[V0_FILE]typescriptreact:file="app/inverters/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/api/solarman/export/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import crypto from "crypto" type TokenResp = { access_token: string token_type: string } type OrgInfo = { companyId?: string } type AccountInfoResp = { orgInfoList?: OrgInfo[]; data?: OrgInfo[]; list?: OrgInfo[] } type Station = { id?: number | string; stationId?: number | string; stationName?: string; name?: string } type DeviceItem = { deviceId?: string | number id?: string | number deviceSn?: string sn?: string model?: string deviceModel?: string deviceType?: string // INVERTER | MICRO_INVERTER | COLLECTOR | BATTERY } type CurrentDataPoint = { key?: string alias?: string name?: string pointName?: string pointId?: string | number value?: any val?: any data?: any v?: any unit?: string u?: string } type CurrentDataResp = { dataList?: CurrentDataPoint[] points?: CurrentDataPoint[] lastUpdateTime?: string time?: string } // Métricas pedidas pelo usuário: cada name é a chave canônica que retornaremos const METRIC_DEFS = [ { name: "acPower", keys: ["ac_power", "active_power", "total_output_power", "pac"] }, { name: "acVoltL1", keys: ["av1", "grid_voltage_l1", "ac_voltage_r", "v_l1"] }, { name: "acVoltL2", keys: ["av2", "grid_voltage_l2", "ac_voltage_s", "v_l2"] }, { name: "acVoltL3", keys: ["av3", "grid_voltage_l3", "ac_voltage_t", "v_l3"] }, { name: "acCurrL1", keys: ["ac1", "grid_current_l1", "i_l1", "ac_current_r"] }, { name: "acCurrL2", keys: ["ac2", "grid_current_l2", "i_l2", "ac_current_s"] }, { name: "acCurrL3", keys: ["ac3", "grid_current_l3", "i_l3", "ac_current_t"] }, { name: "freq", keys: ["freq", "frequency", "grid_frequency", "ac_frequency"] }, { name: "pv1V", keys: ["pv1_voltage", "dv1", "u_pv1"] }, { name: "pv1A", keys: ["pv1_current", "dc1", "i_pv1"] }, { name: "pv2V", keys: ["pv2_voltage", "dv2", "u_pv2"] }, { name: "pv2A", keys: ["pv2_current", "dc2", "i_pv2"] }, { name: "energyDay", keys: ["daily_yield", "today_generation", "e_today", "etdy_ge1"] }, { name: "energyTot", keys: ["total_yield", "total_generation", "e_total", "eg_t_ge1"] }, { name: "temp", keys: ["inverter_temperature", "temperature", "temp", "t_idt1"] }, { name: "battPower", keys: ["battery_power", "charge_power", "discharge_power", "p_batt"] }, { name: "battSOC", keys: ["battery_soc", "soc"] }, { name: "battVolt", keys: ["battery_voltage", "v_batt"] }, { name: "battCurr", keys: ["battery_current", "i_batt"] }, ] as const type MetricKey = (typeof METRIC_DEFS)[number]["name"] type MetricValue = { value: number | null; unit: string | null; sourceKey: string | null } const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)) function sha256(input: string) { return crypto.createHash("sha256").update(input).digest("hex") } function isInverter(dev?: DeviceItem, includeMicro = true) { const t = String(dev?.deviceType || "").toUpperCase() if (t === "INVERTER") return true if (includeMicro && t === "MICRO_INVERTER") return true return false } function normalizePoints(resp?: CurrentDataResp) { const arr = resp?.dataList ?? resp?.points ?? [] const obj: Record< string, { value: number unit: string | null raw: CurrentDataPoint } > = {} for (const p of arr) { const key = String(p.key || p.alias || p.name || p.pointName || p.pointId || `pt_${Object.keys(obj).length}`).trim() const norm = key.toLowerCase().replace(/\s+/g, "_") const rawVal = p.value ?? p.val ?? p.data ?? p.v const num = typeof rawVal === "number" ? rawVal : Number(rawVal) obj[norm] = { value: Number.isFinite(num) ? num : Number.NaN, unit: p.unit || p.u || null, raw: p, } } return obj } function pickMetrics( normalized: Record, ): Record { const out = {} as Record for (const def of METRIC_DEFS) { let found: MetricValue = { value: null, unit: null, sourceKey: null } for (const k of def.keys) { if (normalized[k] !== undefined) { const { value, unit } = normalized[k] found = { value: Number.isFinite(value) ? value : null, unit: unit ?? null, sourceKey: k, } break } } ;(out as any)[def.name] = found } return out } async function withRetry(fn: () => Promise, tries = 5, baseDelay = 500): Promise { let attempt = 0 while (true) { try { return await fn() } catch (err: any) { attempt++ const s = err?.status ?? err?.response?.status const retriable = s === 429 || (s >= 500 && s <= 599) || s === undefined if (!retriable || attempt >= tries) throw err const jitter = Math.random() * 200 await sleep(baseDelay * Math.pow(2, attempt - 1) + jitter) } } } function buildApi(base: string, language: string, authHeader?: string) { async function request(path: string, init?: RequestInit & { searchParams?: Record }) { const url = new URL(path.startsWith("http") ? path : base + path) if (init?.searchParams) { for (const [k, v] of Object.entries(init.searchParams)) url.searchParams.set(k, v) } const headers = new Headers({ "Content-Type": "application/json", "Accept-Language": language, }) if (authHeader) headers.set("Authorization", authHeader) const res = await fetch(url.toString(), { method: init?.method || "POST", headers, body: init?.body ? (typeof init.body === "string" ? init.body : JSON.stringify(init.body)) : JSON.stringify({}), }) if (!res.ok) { let details: any = null try { details = await res.json() } catch { details = await res.text() } const error: any = new Error(`HTTP ${res.status}`) error.status = res.status error.details = details throw error } const data = await res.json() return data } return { setAuthHeader(v: string) { authHeader = v }, post: request, } } async function mapPool(items: T[], limit: number, mapper: (item: T, idx: number) => Promise): Promise { const out = new Array(items.length) let i = 0 const workers = new Array(Math.min(limit, items.length)).fill(0).map(async () => { while (true) { const idx = i++ if (idx >= items.length) break out[idx] = await mapper(items[idx], idx) } }) await Promise.all(workers) return out } export async function POST(req: NextRequest) { try { const body = (await req.json()) as { appId?: string appSecret?: string username?: string password?: string base?: string language?: string includeMicro?: boolean onlyStation?: string } const APP_ID = body.appId?.trim() const APP_SECRET = body.appSecret?.trim() const USERNAME = body.username?.trim() const PASSWORD = body.password?.trim() const BASE = (body.base || "https://globalapi.solarmanpv.com").trim() const LANGUAGE = (body.language || "pt_BR").trim() const INCLUDE_MICRO = body.includeMicro !== false const ONLY_STATION = body.onlyStation?.trim() || "" if (!APP_ID || !APP_SECRET || !USERNAME || !PASSWORD) { return NextResponse.json( { error: "Parâmetros ausentes: appId, appSecret, username, password são obrigatórios." }, { status: 400 }, ) } const api = buildApi(BASE, LANGUAGE) // 1) Autenticação const t1 = (await withRetry(() => api.post("/account/v1.0/token", { body: { appSecret: APP_SECRET, password: sha256(PASSWORD), email: USERNAME, }, searchParams: { appId: APP_ID }, }), )) as TokenResp api.setAuthHeader(`${t1.token_type || "Bearer"} ${t1.access_token}`) // 2) Info conta / org const info = (await withRetry(() => api.post("/account/v1.0/info"))) as AccountInfoResp const orgList = info?.orgInfoList || info?.data || info?.list || [] if (Array.isArray(orgList) && orgList.length > 0) { const orgId = orgList[0]?.companyId if (orgId) { const tb = (await withRetry(() => api.post("/account/v1.0/token", { body: { appSecret: APP_SECRET, password: sha256(PASSWORD), email: USERNAME, orgId, }, searchParams: { appId: APP_ID }, }), )) as TokenResp api.setAuthHeader(`${tb.token_type || "Bearer"} ${tb.access_token}`) } } // 3) Stations const stations: Station[] = [] const pageSizeStations = 100 for (let page = 1; ; page++) { const data = await withRetry(() => api.post("/station/v1.0/list", { body: { page, size: pageSizeStations } })) const list: Station[] = (data?.stationList || data?.list || []) as Station[] stations.push(...list) if (!list || list.length < pageSizeStations) break } let filteredStations = stations if (ONLY_STATION) { filteredStations = stations.filter((st) => (st.stationName || st.name) === ONLY_STATION) } // 4) Devices por station const perStation = await mapPool(filteredStations, 5, async (st) => { const stationId = (st.id ?? st.stationId) as any const stationName = (st.stationName || st.name || "").toString() const all: DeviceItem[] = [] const pageSizeDevices = 200 for (let page = 1; ; page++) { const data = await withRetry(() => api.post("/station/v1.0/device", { body: { stationId, page, size: pageSizeDevices }, }), ) const list: DeviceItem[] = (data?.deviceListItems || data?.list || []) as DeviceItem[] all.push(...list) if (!list || list.length < pageSizeDevices) break } return all.map((d) => ({ stationId: String(stationId), stationName, deviceId: d.deviceId || d.id, deviceSn: d.deviceSn || d.sn, model: d.model || d.deviceModel, deviceType: d.deviceType, })) }) const allDevices = perStation.flat() const inverters = allDevices.filter((d) => isInverter(d as any, INCLUDE_MICRO)) // 5) currentData e métricas const results = await mapPool(inverters, 5, async (inv) => { try { const raw = (await withRetry(() => api.post("/device/v1.0/currentData", { body: { deviceId: inv.deviceId, deviceSn: inv.deviceSn } }), )) as CurrentDataResp const normalized = normalizePoints(raw) const dataList = (raw?.dataList || raw?.points || []) as CurrentDataPoint[] const pointsArray = dataList.map((p) => ({ key: p.key || p.alias || p.name || p.pointName || p.pointId, value: p.value ?? p.val ?? p.data ?? p.v, unit: p.unit || p.u || null, })) const metrics = pickMetrics(normalized) return { stationId: inv.stationId, stationName: (inv as any).stationName, deviceId: inv.deviceId, deviceSn: inv.deviceSn, deviceType: inv.deviceType, model: inv.model, timestamp: raw?.lastUpdateTime || raw?.time || null, points: pointsArray, normalizedPoints: normalized, metrics, } } catch (e: any) { return { stationId: inv.stationId, stationName: (inv as any).stationName, deviceId: inv.deviceId, deviceSn: inv.deviceSn, deviceType: inv.deviceType, model: inv.model, error: e?.details || e?.message || "erro desconhecido", } } }) // Dynamic keys (pontos normalizados) const pointKeys = new Set() for (const r of results) { if (!(r as any).error && (r as any).normalizedPoints) { for (const k of Object.keys((r as any).normalizedPoints)) pointKeys.add(k) } } const ok = results.filter((r: any) => !r.error).length const fail = results.length - ok return NextResponse.json( { ok, fail, stationsCount: filteredStations.length, devicesCount: allDevices.length, invertersCount: inverters.length, includeMicro: INCLUDE_MICRO, onlyStation: ONLY_STATION, language: LANGUAGE, base: BASE, results, dynamicKeys: Array.from(pointKeys).sort(), metricOrder: METRIC_DEFS.map((d) => d.name), // ajuda o client a manter a ordem }, { status: 200 }, ) } catch (err: any) { const status = err?.status || 500 return NextResponse.json( { error: err?.message || "Erro inesperado", details: err?.details ?? null, }, { status }, ) } } [V0_FILE]png:file="public/inverter-energy-graph.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/inverter-energy-graph-kKoyEeAzGziqJshDIviaImjZfrMt52.png" isMerged="true" [V0_FILE]plaintext:file="multiple" isQuickEdit="true" isMerged="true" // app/api/lookup/cpf/route.ts import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = (await req.json()) as { cpf?: string; date?: string } const cpf = (body.cpf || "").replace(/\D+/g, "") const date = (body.date || "").trim() // formato dd/mm/aaaa const TOKEN = process.env.HUBDEV_TOKEN if (!cpf || cpf.length !== 11) { return NextResponse.json({ error: "CPF inválido" }, { status: 400 }) } if (!date) { return NextResponse.json({ error: "Data de nascimento é obrigatória (dd/mm/aaaa)" }, { status: 400 }) } if (!TOKEN) { return NextResponse.json( { error: "Token ausente. Defina a variável de ambiente HUBDEV_TOKEN no servidor." }, { status: 500 }, ) } const url = `http://ws.hubdodesenvolvedor.com.br/v2/cpf/?cpf=${encodeURIComponent( cpf, )}&data=${encodeURIComponent(date)}&token=${encodeURIComponent(TOKEN)}` const res = await fetch(url, { cache: "no-store" }) const data = await res.json().catch(() => ({})) if (!res.ok) { return NextResponse.json({ error: "Falha na consulta", details: data }, { status: res.status }) } return NextResponse.json(data, { status: 200 }) } catch (e: any) { return NextResponse.json({ error: e?.message || "Erro inesperado" }, { status: 500 }) } } // app/api/lookup/cnpj/route.ts import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = (await req.json()) as { cnpj?: string } const cnpj = (body.cnpj || "").replace(/\D+/g, "") const TOKEN = process.env.HUBDEV_TOKEN if (!cnpj || cnpj.length !== 14) { return NextResponse.json({ error: "CNPJ inválido" }, { status: 400 }) } if (!TOKEN) { return NextResponse.json( { error: "Token ausente. Defina a variável de ambiente HUBDEV_TOKEN no servidor." }, { status: 500 }, ) } const url = `http://ws.hubdodesenvolvedor.com.br/v2/cnpj/?cnpj=${encodeURIComponent( cnpj, )}&token=${encodeURIComponent(TOKEN)}` const res = await fetch(url, { cache: "no-store" }) const data = await res.json().catch(() => ({})) if (!res.ok) { return NextResponse.json({ error: "Falha na consulta", details: data }, { status: res.status }) } return NextResponse.json(data, { status: 200 }) } catch (e: any) { return NextResponse.json({ error: e?.message || "Erro inesperado" }, { status: 500 }) } } // app/dashboard/clientes/novo/page.tsx import React from "react" import { ArrowLeft, Plus, Save, Trash2, Loader2 } from 'lucide-react' import { Card } from "@/components/ui/card" export default function NovoClientePage() { // Remover: const [hubToken, setHubToken] = React.useState("") const [cpf, setCpf] = React.useState("") const [cnpj, setCnpj] = React.useState("") const [brDate, setBrDate] = React.useState("") const [loading, setLoading] = React.useState(false) const [cpfData, setCpfData] = React.useState(null) const [cnpjData, setCnpjData] = React.useState(null) const handleCpfLookup = async () => { setLoading(true) const res = await fetch("/api/lookup/cpf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cpf, date: brDate }), }) const data = await res.json() setCpfData(data) setLoading(false) } const handleCnpjLookup = async () => { setLoading(true) const res = await fetch("/api/lookup/cnpj", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ cnpj }), }) const data = await res.json() setCnpjData(data) setLoading(false) } React.useEffect(() => { if (cpf && brDate) { handleCpfLookup() } }, [cpf, brDate]) React.useEffect(() => { if (cnpj) { handleCnpjLookup() } }, [cnpj]) return (

{/* Outros componentes */} {/* Integração: Token do Hub (dev) */} {/* Apague o bloco JSX entre aqui */} {/* inclusive esses comentários */} {/* Outros componentes */}

) } [V0_FILE]typescriptreact:file="app/api/lookup/cnpj/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = (await req.json()) as { cnpj?: string } const cnpj = (body.cnpj || "").replace(/\D+/g, "") const TOKEN = process.env.HUBDEV_TOKEN if (!cnpj || cnpj.length !== 14) { return NextResponse.json({ error: "CNPJ inválido" }, { status: 400 }) } if (!TOKEN) { return NextResponse.json( { error: "Token ausente no servidor. Defina HUBDEV_TOKEN nas variáveis de ambiente." }, { status: 500 }, ) } // Use HTTPS para evitar bloqueios de mixed content const url = `https://ws.hubdodesenvolvedor.com.br/v2/cnpj/?cnpj=${encodeURIComponent( cnpj, )}&token=${encodeURIComponent(TOKEN)}` const res = await fetch(url, { cache: "no-store" }) const data = await res.json().catch(() => ({})) if (!res.ok) { return NextResponse.json({ error: "Falha na consulta CNPJ", details: data }, { status: res.status }) } return NextResponse.json(data, { status: 200 }) } catch (e: any) { return NextResponse.json({ error: e?.message || "Erro inesperado" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/clientes/novo/loading.tsx" isMerged="true" export default function LoadingNovoCliente() { return (

) } [V0_FILE]typescriptreact:file="app/api/lookup/cpf/route.ts" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const body = (await req.json()) as { cpf?: string; date?: string } // date no formato dd/mm/aaaa const cpf = (body.cpf || "").replace(/\D+/g, "") const date = (body.date || "").trim() const TOKEN = process.env.HUBDEV_TOKEN if (!cpf || cpf.length !== 11) { return NextResponse.json({ error: "CPF inválido" }, { status: 400 }) } if (!TOKEN) { return NextResponse.json( { error: "Token ausente no servidor. Defina HUBDEV_TOKEN nas variáveis de ambiente." }, { status: 500 }, ) } // Monta a query dinamicamente: "data" é opcional const params = new URLSearchParams({ cpf, token: TOKEN }) if (date) params.set("data", date) const url = `https://ws.hubdodesenvolvedor.com.br/v2/cpf/?${params.toString()}` const res = await fetch(url, { cache: "no-store" }) const data = await res.json().catch(() => ({})) if (!res.ok) { return NextResponse.json({ error: "Falha na consulta CPF", details: data }, { status: res.status }) } return NextResponse.json(data, { status: 200 }) } catch (e: any) { return NextResponse.json({ error: e?.message || "Erro inesperado" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/dashboard/clientes/loading.tsx" isMerged="true" export default function LoadingClientes() { return (

) } [V0_FILE]typescriptreact:file="lib/clients-storage.ts" isMerged="true" "use client" // Types for persisted clients export type ClientePF = { tipo: "PF" pf: { cpf: string nome: string nascimento: string // yyyy-mm-dd estadoCivil: string profissao: string endereco: { cep: string endereco: string numero: string complemento: string bairro: string cidade: string estado: string } telefone: string email: string observacoes: string contatos: { nome: string; fone: string; funcao: string }[] } } export type ClientePJ = { tipo: "PJ" pj: { cnpj: string parceiroNumero: string razaoSocial: string nomeFantasia: string enderecoEmpresa: { cep: string endereco: string numero: string complemento: string bairro: string cidade: string estado: string } telefone: string email: string observacoes: string contatos: { nome: string; fone: string; funcao: string }[] } administrador: { cpf: string nome: string nascimento: string estadoCivil: string profissao: string endereco: { cep: string endereco: string numero: string complemento: string bairro: string cidade: string estado: string } telefone: string email: string } } export type NovoClientePayload = ClientePF | ClientePJ export type ClienteStored = { id: string createdAt: string // ISO payload: NovoClientePayload } const KEY = "inversores:clientes" function safeJSON(s: string | null): T | null { try { if (!s) return null return JSON.parse(s) as T } catch { return null } } export function getClients(): ClienteStored[] { if (typeof window === "undefined") return [] const raw = localStorage.getItem(KEY) const arr = safeJSON(raw) if (!arr || !Array.isArray(arr)) return [] // Sort newest first return [...arr].sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1)) } export function addClient(payload: NovoClientePayload): ClienteStored { if (typeof window === "undefined") throw new Error("No window") const existing = getClients() const record: ClienteStored = { id: cryptoRandomId(), createdAt: new Date().toISOString(), payload, } existing.push(record) localStorage.setItem(KEY, JSON.stringify(existing)) return record } export function clearAllClients() { if (typeof window === "undefined") return localStorage.removeItem(KEY) } function cryptoRandomId() { // Use Web Crypto if available for better uniqueness if (typeof crypto !== "undefined" && "randomUUID" in crypto) { // @ts-expect-error randomUUID exists in modern browsers return crypto.randomUUID() } return `cli_${Math.random().toString(36).slice(2)}_${Date.now()}` } [V0_FILE]typescriptreact:file="components/clients-table.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { cn } from "@/lib/utils" type Row = { id: string tipo: "PF" | "PJ" nome: string doc: string email: string telefone: string cidadeUf: string criadoEm: string } function formatCPF(cpf: string) { const d = cpf.replace(/\D+/g, "").padStart(11, " ") return `${d.slice(0, 3)}.${d.slice(3, 6)}.${d.slice(6, 9)}-${d.slice(9, 11)}`.trim() } function formatCNPJ(cnpj: string) { const d = cnpj.replace(/\D+/g, "").padStart(14, " ") return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8, 12)}-${d.slice(12, 14)}`.trim() } function formatDateShort(iso: string) { const dt = new Date(iso) if (Number.isNaN(dt.getTime())) return iso return dt.toLocaleDateString(undefined, { day: "2-digit", month: "2-digit", year: "numeric" }) } export function ClientsTable({ rows, className, }: { rows: Row[] className?: string }) { if (!rows.length) { return (

Nenhum cliente cadastrado

Clique em “Novo cliente” para cadastrar o primeiro.

) } return (

{/* Desktop table */}

{rows.map((r) => ( (window.location.href = `/dashboard/clientes/${r.id}`)} > ))}

Tipo	Nome/Razão	Documento	E-mail	Telefone	Cidade/UF	Criado em
{r.tipo}	{r.nome}	{r.doc.length === 11 ? formatCPF(r.doc) : r.doc.length === 14 ? formatCNPJ(r.doc) : r.doc}	{r.email \|\| "—"}	{r.telefone \|\| "—"}	{r.cidadeUf \|\| "—"}	{formatDateShort(r.criadoEm)}

{/* Mobile list */}

{rows.map((r) => (

(window.location.href = `/dashboard/clientes/${r.id}`)} >

{r.nome}

{r.tipo}

{r.doc.length === 11 ? formatCPF(r.doc) : r.doc.length === 14 ? formatCNPJ(r.doc) : r.doc}

E-mail

{r.email || "—"}

Telefone

{r.telefone || "—"}

Cidade/UF

{r.cidadeUf || "—"}

Criado em

{formatDateShort(r.criadoEm)}

))}

) } [V0_FILE]typescriptreact:file="components/require-auth.tsx" isMerged="true" "use client" import * as React from "react" import { useRouter } from "next/navigation" import { Loader2 } from "lucide-react" import { useCurrentUser } from "@/lib/use-current-user" export function RequireAuth({ children }: { children: React.ReactNode }) { const router = useRouter() const { user, loading } = useCurrentUser() React.useEffect(() => { if (!loading && !user) { router.replace("/") } }, [loading, user, router]) if (loading || !user) { return (

Redirecionando...

) } return <>{children} } [V0_FILE]typescriptreact:file="app/inverters/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useCallback, useMemo, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" import { ScrollArea } from "@/components/ui/scroll-area" import { Download, Loader2, Search, SlidersHorizontal, Terminal } from "lucide-react" import { RequireAuth } from "@/components/require-auth" type ResultPoint = { key: string value: unknown unit: string | null } type NormalizedPoint = { value: number unit: string | null raw: any } type MetricValue = { value: number | null unit: string | null sourceKey: string | null } type MetricKey = | "acPower" | "acVoltL1" | "acVoltL2" | "acVoltL3" | "acCurrL1" | "acCurrL2" | "acCurrL3" | "freq" | "pv1V" | "pv1A" | "pv2V" | "pv2A" | "energyDay" | "energyTot" | "temp" | "battPower" | "battSOC" | "battVolt" | "battCurr" type ResultRow = { stationId: string stationName: string deviceId?: string | number deviceSn?: string deviceType?: string model?: string timestamp?: string | null points?: ResultPoint[] normalizedPoints?: Record metrics?: Record error?: any } type ExportResponse = { ok: number fail: number stationsCount: number devicesCount: number invertersCount: number includeMicro: boolean onlyStation: string language: string base: string results: ResultRow[] dynamicKeys: string[] metricOrder?: MetricKey[] } const METRIC_LABELS: Record = { acPower: "AC Power", acVoltL1: "AC Volt L1", acVoltL2: "AC Volt L2", acVoltL3: "AC Volt L3", acCurrL1: "AC Corr L1", acCurrL2: "AC Corr L2", acCurrL3: "AC Corr L3", freq: "Frequência", pv1V: "PV1 V", pv1A: "PV1 A", pv2V: "PV2 V", pv2A: "PV2 A", energyDay: "Energia do dia", energyTot: "Energia total", temp: "Temperatura", battPower: "Potência Bateria", battSOC: "SOC Bateria", battVolt: "Tensão Bateria", battCurr: "Corrente Bateria", } function csvEscape(v: unknown) { if (v === undefined || v === null) return "" const s = String(v) return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s } function buildCsv(results: ResultRow[]) { // Descobre todas as colunas de pontos vistas (normalizadas) const pointKeys = new Set() for (const r of results) { if (!r || r.error || !r.normalizedPoints) continue for (const k of Object.keys(r.normalizedPoints)) pointKeys.add(k) } const fixedCols = ["stationId", "stationName", "deviceSn", "deviceId", "deviceType", "model", "timestamp"] const dynCols = Array.from(pointKeys).sort() const header = fixedCols.concat(dynCols).join(",") const rows: string[] = [header] for (const r of results) { const base = [ csvEscape(r.stationId), csvEscape(r.stationName), csvEscape(r.deviceSn), csvEscape(r.deviceId ?? ""), csvEscape(r.deviceType ?? ""), csvEscape(r.model ?? ""), csvEscape(r.timestamp ?? ""), ] const dynamic = dynCols.map((k) => { const v = r.normalizedPoints?.[k]?.value const u = r.normalizedPoints?.[k]?.unit return csvEscape(v === undefined ? "" : u ? `${v} ${u}` : v) }) rows.push(base.concat(dynamic).join(",")) } return rows.join("\n") } function downloadBlob(filename: string, content: string, mime = "text/plain;charset=utf-8") { const blob = new Blob([content], { type: mime }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename document.body.appendChild(a) a.click() a.remove() URL.revokeObjectURL(url) } function formatMetricValue(m: MetricValue | undefined) { if (!m || m.value === null || Number.isNaN(m.value)) return "—" return `${m.value}${m.unit ? ` ${m.unit}` : ""}` } export default function InvertersDashboard() { const [appId, setAppId] = useState("") const [appSecret, setAppSecret] = useState("") const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [base, setBase] = useState("https://globalapi.solarmanpv.com") const [language, setLanguage] = useState("pt_BR") const [includeMicro, setIncludeMicro] = useState(true) const [onlyStation, setOnlyStation] = useState("") const [isLoading, setIsLoading] = useState(false) const [resp, setResp] = useState(null) const [filter, setFilter] = useState("") const logPlantToConsole = useCallback( (stationId: string) => { if (!resp?.results) return const plantEntries = resp.results.filter((r) => r.stationId === stationId) const stationName = plantEntries[0]?.stationName || "" // Agrupa logs no console console.groupCollapsed(`Planta ${stationName} (stationId=${stationId})`) console.log("Registros da planta (array de inversores):", plantEntries) try { console.log("JSON:", JSON.stringify(plantEntries, null, 2)) } catch {} console.groupEnd() }, [resp], ) const filteredResults = useMemo(() => { if (!resp?.results) return [] if (!filter.trim()) return resp.results const q = filter.toLowerCase() return resp.results.filter((r) => { const baseStr = [r.stationName, r.deviceSn, r.deviceId, r.deviceType, r.model, r.timestamp] .filter(Boolean) .join(" ") .toLowerCase() if (baseStr.includes(q)) return true // Busca em métricas if (r.metrics) { for (const [k, v] of Object.entries(r.metrics)) { const label = METRIC_LABELS[k as MetricKey]?.toLowerCase() || k.toLowerCase() const valStr = v && v.value !== null && !Number.isNaN(v.value) ? `${v.value}${v.unit ? ` ${v.unit}` : ""}` : "" const src = v?.sourceKey || "" if (label.includes(q) || valStr.toLowerCase().includes(q) || src.toLowerCase().includes(q)) return true } } // Busca em pontos normalizados if (r.normalizedPoints) { for (const [k, v] of Object.entries(r.normalizedPoints)) { if (k.toLowerCase().includes(q)) return true if (v.unit?.toLowerCase().includes(q) || String(v.value).toLowerCase().includes(q)) return true } } if (r.error) { try { const e = JSON.stringify(r.error).toLowerCase() if (e.includes(q)) return true } catch {} } return false }) }, [resp, filter]) const onSubmit = useCallback(async () => { setIsLoading(true) setResp(null) try { const res = await fetch("/api/solarman/export", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ appId, appSecret, username, password, base, language, includeMicro, onlyStation, }), }) if (!res.ok) { const text = await res.text() throw new Error(text || `Falha na exportação (${res.status})`) } const data: ExportResponse = await res.json() setResp(data) } catch (e: any) { alert(`Erro: ${e?.message || "Falha desconhecida"}`) } finally { setIsLoading(false) } }, [appId, appSecret, username, password, base, language, includeMicro, onlyStation]) const onDownloadJson = () => { if (!resp) return downloadBlob("inverters_full.json", JSON.stringify(resp.results, null, 2), "application/json") } const onDownloadCsv = () => { if (!resp) return const csv = buildCsv(resp.results) downloadBlob("inverters_full.csv", csv, "text/csv;charset=utf-8") } const ok = resp?.ok ?? 0 const fail = resp?.fail ?? 0 const metricOrder: MetricKey[] = resp?.metricOrder && resp.metricOrder.length ? (resp.metricOrder as MetricKey[]) : (Object.keys(METRIC_LABELS) as MetricKey[]) return (

Exportador de Inversores Solarman

Autentique-se na API, visualize as métricas principais e baixe os dados como JSON ou CSV.

Credenciais e Filtros Informe suas credenciais da API Solarman. Em produção, prefira variáveis de ambiente.

App ID setAppId(e.target.value)} />

App Secret setAppSecret(e.target.value)} />

E-mail (username) setUsername(e.target.value)} />

Senha setPassword(e.target.value)} />

Base URL setBase(e.target.value)} />

Idioma (Accept-Language) setLanguage(e.target.value)} />

Incluir microinversores

Filtrar por nome exato da planta (opcional) setOnlyStation(e.target.value)} />

{resp && ( Resultado Inversores OK: {ok} | Falhas: {fail} | Plantas: {resp.stationsCount} | Dispositivos: {resp.devicesCount}{" "} | Inversores: {resp.invertersCount}

setFilter(e.target.value)} />

Dica: clique no ícone de terminal ao lado do nome da planta para ver a resposta completa no console do navegador.

Planta

Device SN

Device ID

Tipo

Modelo

Timestamp

{filteredResults.map((r, idx) => (

{r.stationName}

{r.deviceSn}

{r.deviceId ?? ""}

{r.deviceType ?? ""}

{r.model}

{r.timestamp ?? ""}

{r.error ? (

Erro ao coletar pontos: {typeof r.error === "string" ? r.error : JSON.stringify(r.error)}

) : ( <> {/* Métricas principais */}

Métricas principais

{metricOrder.map((mk) => { const m = r.metrics?.[mk] return (

{METRIC_LABELS[mk]}

{formatMetricValue(m)}

{m?.sourceKey ? (

src: {m.sourceKey}

) : (

src: —

)}

) })}

{/* Pontos normalizados */}

Pontos (normalizados)

{r.normalizedPoints && Object.entries(r.normalizedPoints).map(([k, v]) => (

{k}

{Number.isFinite(v.value) ? v.value : "—"} {v.unit ? ` ${v.unit}` : ""}

))}

)}

))}

)}

) } [V0_FILE]plaintext:file="EDIT" isQuickEdit="true" isMerged="true" /// app/page.tsx import React, { useState } from 'react'; import { useRouter } from 'next/router'; import { toast } from 'react-toastify'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { listenClients, type ClienteDoc } from "@/lib/clients-db"; import { useCurrentUser } from "@/lib/use-current-user"; const LoginPage = () => { const [loginEmail, setLoginEmail] = useState(''); const [loginPassword, setLoginPassword] = useState(''); const [isLoading, setIsLoading] = useState(false); const [loginError, setLoginError] = useState(null); const router = useRouter(); const mapAuthError = (code: string | undefined) => { switch (code) { case "auth/wrong-password": return "Login ou senha incorreta."; case "auth/user-not-found": return "Login ou senha incorreta."; case "auth/invalid-credential": return "Login ou senha incorreta."; // /** rest of code here **/ default: return "Erro desconhecido."; } }; async function handleLogin(e: React.FormEvent) { e.preventDefault(); setIsLoading(true); setLoginError(null); try { // /** authentication logic here **/ router.push("/dashboard"); } catch (err: any) { const msg = mapAuthError(err?.code); setLoginError(msg); toast({ title: "Erro no login", description: msg, variant: "destructive" }); } finally { setIsLoading(false); } } return (

); }; export default LoginPage; // app/dashboard/layout.tsx import React from 'react'; const DashboardLayout = ({ children }: { children: React.ReactNode }) => { return (

{/* /** other header content here **/ */}

{children}

); }; export default DashboardLayout; // components/dashboard-sidebar.tsx import React from 'react'; import { usePathname } from 'next/navigation'; import { useCurrentUser } from "@/lib/use-current-user"; import SidebarFooter from './SidebarFooter'; const DashboardSidebar = () => { const pathname = usePathname(); const { user } = useCurrentUser(); const display = user?.displayName || user?.email || "Usuário"; const initials = (() => { const base = user?.displayName || user?.email || ""; if (!base) return "?"; const namePart = base.includes("@") ? base.split("@")[0] : base; const parts = namePart.trim().split(/\s+/); const letters = parts.length >= 2 ? [parts[0][0], parts[parts.length - 1][0]] : [parts[0][0] || "?"]; return letters.filter(Boolean).map((c) => String(c).toUpperCase()).slice(0, 2).join("") || "?"; })(); return (

{/* /** other sidebar content here **/ */}

{initials}

{display}

{user?.email || ""}

); }; export default DashboardSidebar; // app/dashboard/clientes/page.tsx import React from 'react'; import { listenClients, type ClienteDoc } from "@/lib/clients-db"; import { useCurrentUser } from "@/lib/use-current-user"; const ClientesPage = () => { const { user } = useCurrentUser(); const [clients, setClients] = useState([]); React.useEffect(() => { if (user) { const unsubscribe = listenClients(user.uid, setClients); return () => unsubscribe(); } }, [user]); return (

{/* /** client list rendering here **/ */}

); }; export default ClientesPage; // app/dashboard/clientes/novo/page.tsx import React from 'react'; import { useRouter } from 'next/router'; import { addClientForUser } from "@/lib/clients-db"; import { useCurrentUser } from "@/lib/use-current-user"; const NovoClientePage = () => { const router = useRouter(); const { user } = useCurrentUser(); const [payload, setPayload] = useState({}); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); try { await addClientForUser(user.uid, payload); router.push("/dashboard/clientes"); } catch (error) { console.error("Error adding client:", error); } }; return (

); }; export default NovoClientePage; [V0_FILE]plaintext:file="MULTI_FILES" isQuickEdit="true" isMerged="true" // lib/firebase.ts "use client" import { initializeApp, getApps, type FirebaseApp } from "firebase/app" import { getAuth, type Auth } from "firebase/auth" let app: FirebaseApp let auth: Auth export function getFirebaseApp() { if (!getApps().length) { app = initializeApp({ apiKey: "AIzaSyB8Kv4hasRK3fZk9s2TJiabjYFBw91MdMg", authDomain: "inversores-6631f.firebaseapp.com", projectId: "inversores-6631f", storageBucket: "inversores-6631f.firebasestorage.app", messagingSenderId: "320180072804", appId: "1:320180072804:web:a52d6bc9d1cc61c7b8ca71", measurementId: "G-X7H7KKMX86", }) } else { app = getApps()[0]! } return app } export function getFirebaseAuth() { if (!auth) { const app = getFirebaseApp() auth = getAuth(app) } return auth } // Singleton de conveniência export const firebaseAuth = getFirebaseAuth() // lib/clients-db.ts "use client" import type { Firestore, DocumentData, Unsubscribe, Timestamp, } from "firebase/firestore" import { getFirebaseApp } from "./firebase" import type { NovoClientePayload } from "./clients-storage" let db: Firestore | null = null async function getDbAndFns() { const m = await import("firebase/firestore") if (!db) { db = m.getFirestore(getFirebaseApp()) } return { ...m, db: db as Firestore } } export type ClienteDoc = { id: string createdAt: string // ISO payload: NovoClientePayload } function toISO(ts?: Timestamp | null): string { try { if (ts && "toDate" in ts) return ts.toDate().toISOString() } catch {} return "" } export async function addClientForUser(uid: string, payload: NovoClientePayload): Promise { const { db, collection, addDoc, serverTimestamp } = await getDbAndFns() const ref = collection(db, "users", uid, "clientes") const docRef = await addDoc(ref, { payload, createdAt: serverTimestamp(), }) return { id: docRef.id, createdAt: new Date().toISOString(), payload } } export function listenClients(uid: string, cb: (docs: ClienteDoc[]) => void): Unsubscribe { let unsub: Unsubscribe | null = null let cancelled = false ;(async () => { const { db, collection, query, orderBy, onSnapshot } = await getDbAndFns() if (cancelled) return const ref = collection(db, "users", uid, "clientes") const qy = query(ref, orderBy("createdAt", "desc")) unsub = onSnapshot(qy, (snap) => { const out: ClienteDoc[] = snap.docs.map((d) => { const data = d.data() as DocumentData return { id: d.id, createdAt: toISO(data.createdAt) || new Date(0).toISOString(), payload: data.payload as NovoClientePayload, } }) cb(out) }) })() return () => { cancelled = true if (unsub) unsub() } } // app/page.tsx import { useState } from "react" import { Alert, AlertDescription } from "@/components/ui/alert" import { toast } from "@/components/ui/use-toast" import { firebaseAuth } from "@/lib/firebase" function mapAuthError(code: string): string { switch (code) { case "auth/wrong-password": return "Senha incorreta" case "auth/user-not-found": return "Usuário não encontrado" default: return "Erro desconhecido" } } export default function LoginPage() { const [loginEmail, setLoginEmail] = useState("") const [loginPassword, setLoginPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [loginError, setLoginError] = useState(null) const handleLogin = async () => { setIsLoading(true) setLoginError(null) try { // Login logic here } catch (err: any) { const msg = mapAuthError(err?.code) setLoginError(msg) toast({ title: "Erro no login", description: msg, variant: "destructive" }) } finally { setIsLoading(false) } } return (

) } // app/dashboard/layout.tsx import React from "react" export default function DashboardLayout({ children }: { children: React.ReactNode }) { return (

{/* Dashboard content here */} {children}

) } // components/dashboard-sidebar.tsx import React from "react" import { useCurrentUser } from "@/lib/use-current-user" import SidebarFooter from "./sidebar-footer" export default function DashboardSidebar() { const { user } = useCurrentUser() const display = user?.displayName || user?.email || "Usuário" const initials = (() => { const base = user?.displayName || user?.email || "" if (!base) return "?" const name = base.includes("@") ? base.split("@")[0] : base const parts = name.trim().split(/\s+/).filter(Boolean) const letters = parts.length >= 2 ? [parts[0][0], parts[parts.length - 1][0]] : [parts[0]?.[0], parts[0]?.[1]] return letters.filter(Boolean).map((c) => String(c).toUpperCase()).slice(0, 2).join("") || "?" })() return (

{/* Sidebar content here */}

{initials}

{display}

{user?.email || ""}

) } [V0_FILE]plaintext:file="MULTI" isQuickEdit="true" isMerged="true" // app/dashboard/layout.tsx import React from "react"; import { usePathname } from "next/navigation"; import { SidebarFooter } from "@/components/dashboard-sidebar"; import { useCurrentUser } from "@/lib/use-current-user"; const DashboardLayout = () => { const pathname = usePathname(); const { user } = useCurrentUser(); const email = user?.email || ""; const displayName = user?.displayName || (email ? email.split("@")[0]?.replace(/[._-]+/g, " ").trim() : "Usuário"); const initials = (() => { const base = user?.displayName?.trim() || email.split("@")[0] || "U"; const parts = base.replace(/[._-]+/g, " ").trim().split(/\s+/).filter(Boolean); if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); if (parts.length === 1) return (parts[0][0] + (parts[0][1] || "")).toUpperCase(); return "U"; })(); return (

{/* Header content here */} {/* Status/ambiente para aspecto enterprise */} {/* Removed the status chip */} {/* Main content here */}

{initials}

{displayName}

{email}

); }; export default DashboardLayout; [V0_FILE]plaintext:file="files" isQuickEdit="true" isMerged="true" /// app/dashboard/layout.tsx import React from "react"; import DashboardHeaderActions from "./dashboard-header-actions"; import SidebarFooter from "../components/dashboard-sidebar-footer"; import { useCurrentUser } from "@/lib/use-current-user"; const Layout = () => { const { user } = useCurrentUser(); const email = user?.email || ""; const displayName = user?.displayName || (email ? email.split("@")[0].replace(/[._-]+/g, " ").trim() : "Usuário"); // iniciais: primeira letra do primeiro nome + primeira letra do último sobrenome const initials = (() => { const base = (user?.displayName || "").trim() || (email ? email.split("@")[0] : ""); const parts = base.replace(/[._-]+/g, " ").trim().split(/\s+/).filter(Boolean); if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); if (parts.length === 1 && parts[0].length >= 2) return (parts[0][0] + parts[0][1]).toUpperCase(); if (parts.length === 1 && parts[0].length === 1) return parts[0][0].toUpperCase(); return "U"; })(); return (

{/* Other header content */}

{/* Main content */}

{initials}

{displayName}

{email}

); }; export default Layout; // components/dashboard-sidebar.tsx import React from "react"; import { usePathname } from "next/navigation"; import { useCurrentUser } from "@/lib/use-current-user"; const DashboardSidebar = () => { const pathname = usePathname(); const { user } = useCurrentUser(); const email = user?.email || ""; const displayName = user?.displayName || (email ? email.split("@")[0].replace(/[._-]+/g, " ").trim() : "Usuário"); // iniciais: primeira letra do primeiro nome + primeira letra do último sobrenome const initials = (() => { const base = (user?.displayName || "").trim() || (email ? email.split("@")[0] : ""); const parts = base.replace(/[._-]+/g, " ").trim().split(/\s+/).filter(Boolean); if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); if (parts.length === 1 && parts[0].length >= 2) return (parts[0][0] + parts[0][1]).toUpperCase(); if (parts.length === 1 && parts[0].length === 1) return parts[0][0].toUpperCase(); return "U"; })(); return (

{/* Sidebar content */}

{initials}

{displayName}

{email}

); }; export default DashboardSidebar; [V0_FILE]typescriptreact:file="lib/mask-br.ts" isMerged="true" // Utilitários de máscara para campos brasileiros export function digitsOnly(s: string) { return (s || "").replace(/\D+/g, "") } export function maskCPF(value: string) { const d = digitsOnly(value).slice(0, 11) const p1 = d.slice(0, 3) const p2 = d.slice(3, 6) const p3 = d.slice(6, 9) const p4 = d.slice(9, 11) let out = p1 if (p2) out += "." + p2 if (p3) out += "." + p3 if (p4) out += "-" + p4 return out } export function maskCNPJ(value: string) { const d = digitsOnly(value).slice(0, 14) const p1 = d.slice(0, 2) const p2 = d.slice(2, 5) const p3 = d.slice(5, 8) const p4 = d.slice(8, 12) const p5 = d.slice(12, 14) let out = p1 if (p2) out += "." + p2 if (p3) out += "." + p3 if (p4) out += "/" + p4 if (p5) out += "-" + p5 return out } export function maskCEP(value: string) { const d = digitsOnly(value).slice(0, 8) const p1 = d.slice(0, 5) const p2 = d.slice(5, 8) return p2 ? `${p1}-${p2}` : p1 } export function maskPhoneBR(value: string) { // Suporta 10 ou 11 dígitos const d = digitsOnly(value).slice(0, 11) const ddd = d.slice(0, 2) if (d.length <= 2) return ddd ? `(${ddd}` : "" if (d.length <= 6) { const p1 = d.slice(2) return `(${ddd}) ${p1}` } if (d.length <= 10) { const p1 = d.slice(2, 6) const p2 = d.slice(6) return `(${ddd}) ${p1}-${p2}` } // 11 dígitos (celular) const p1 = d.slice(2, 7) const p2 = d.slice(7) return `(${ddd}) ${p1}-${p2}` } export const ESTADO_CIVIL_OPTIONS = [ "Solteiro(a)", "Casado(a)", "Divorciado(a)", "Separado(a)", "Viúvo(a)", "União estável", ] as const [V0_FILE]typescriptreact:file="app/dashboard/clientes/novo/page.tsx" isMerged="true" "use client" import * as React from "react" import { useRouter } from "next/navigation" import { ArrowLeft, Plus, Save, Trash2, Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" import Link from "next/link" import type { NovoClientePayload } from "@/lib/clients-storage" import { addClientForUser } from "@/lib/clients-db" import { useCurrentUser } from "@/lib/use-current-user" import { digitsOnly, maskCEP, maskCPF, maskCNPJ, maskPhoneBR, ESTADO_CIVIL_OPTIONS } from "@/lib/mask-br" type Contact = { nome: string; fone: string; funcao: string } const BR_STATES = [ "AC", "AL", "AP", "AM", "BA", "CE", "DF", "ES", "GO", "MA", "MT", "MS", "MG", "PA", "PB", "PR", "PE", "PI", "RJ", "RN", "RS", "RO", "RR", "SC", "SP", "SE", "TO", ] function toBrDate(iso: string) { if (!iso) return "" const [y, m, d] = iso.split("-") if (!y || !m || !d) return "" return `${d}/${m}/${y}` } function fromBrDate(br: string) { const m = br.match(/^(\d{2})\/(\d{2})\/(\d{4})$/) if (!m) return "" return `${m[3]}-${m[2]}-${m[1]}` } async function lookupCep(cep: string) { const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`) const data = await res.json() if (!res.ok || data?.erro) throw new Error(data?.erro ? "CEP não encontrado" : "Falha ao consultar CEP") return data as { logradouro?: string; bairro?: string; localidade?: string; uf?: string; complemento?: string } } export default function NovoClientePage() { const router = useRouter() const { user } = useCurrentUser() React.useEffect(() => { router.prefetch("/dashboard/clientes") }, [router]) const { toast } = useToast() const [isSaving, setIsSaving] = React.useState(false) // Tipo de cliente const [tipo, setTipo] = React.useState<"PF" | "PJ">("PF") // PF const [pfCpf, setPfCpf] = React.useState("") const [pfNome, setPfNome] = React.useState("") const [pfNascimento, setPfNascimento] = React.useState("") // yyyy-mm-dd const [pfEstadoCivil, setPfEstadoCivil] = React.useState("") const [pfProfissao, setPfProfissao] = React.useState("") const [pfCep, setPfCep] = React.useState("") const [pfEndereco, setPfEndereco] = React.useState("") const [pfNumero, setPfNumero] = React.useState("") const [pfComplemento, setPfComplemento] = React.useState("") const [pfBairro, setPfBairro] = React.useState("") const [pfCidade, setPfCidade] = React.useState("") const [pfEstado, setPfEstado] = React.useState("") const [pfTelefone, setPfTelefone] = React.useState("") const [pfEmail, setPfEmail] = React.useState("") const [pfObs, setPfObs] = React.useState("") const [pfContatos, setPfContatos] = React.useState([]) const [pfCepLoading, setPfCepLoading] = React.useState(false) const [pfCpfLoading, setPfCpfLoading] = React.useState(false) // PJ const [pjCnpj, setPjCnpj] = React.useState("") const [pjParceiroNumero, setPjParceiroNumero] = React.useState("") const [pjRazao, setPjRazao] = React.useState("") const [pjFantasia, setPjFantasia] = React.useState("") const [pjCep, setPjCep] = React.useState("") const [pjEndereco, setPjEndereco] = React.useState("") const [pjNumero, setPjNumero] = React.useState("") const [pjComplemento, setPjComplemento] = React.useState("") const [pjBairro, setPjBairro] = React.useState("") const [pjCidade, setPjCidade] = React.useState("") const [pjEstado, setPjEstado] = React.useState("") const [pjTelefone, setPjTelefone] = React.useState("") const [pjEmail, setPjEmail] = React.useState("") const [pjObs, setPjObs] = React.useState("") const [pjContatos, setPjContatos] = React.useState([]) const [pjCepLoading, setPjCepLoading] = React.useState(false) const [pjCnpjLoading, setPjCnpjLoading] = React.useState(false) // Admin PJ const [admCpf, setAdmCpf] = React.useState("") const [admNome, setAdmNome] = React.useState("") const [admNascimento, setAdmNascimento] = React.useState("") const [admEstadoCivil, setAdmEstadoCivil] = React.useState("") const [admProfissao, setAdmProfissao] = React.useState("") const [admCep, setAdmCep] = React.useState("") const [admEndereco, setAdmEndereco] = React.useState("") const [admNumero, setAdmNumero] = React.useState("") const [admComplemento, setAdmComplemento] = React.useState("") const [admBairro, setAdmBairro] = React.useState("") const [admCidade, setAdmCidade] = React.useState("") const [admEstado, setAdmEstado] = React.useState("") const [admTelefone, setAdmTelefone] = React.useState("") const [admEmail, setAdmEmail] = React.useState("") const [admCepLoading, setAdmCepLoading] = React.useState(false) const [admCpfLoading, setAdmCpfLoading] = React.useState(false) // Contatos dinâmicos const contatos = tipo === "PF" ? pfContatos : pjContatos const setContatos = tipo === "PF" ? setPfContatos : setPjContatos function addContact() { setContatos((arr) => [...arr, { nome: "", fone: "", funcao: "" }]) } function updateContact(idx: number, patch: Partial) { setContatos((arr) => arr.map((c, i) => (i === idx ? { ...c, ...patch } : c))) } function removeContact(idx: number) { setContatos((arr) => arr.filter((_, i) => i !== idx)) } async function handleSave(e: React.FormEvent) { e.preventDefault() setIsSaving(true) try { if (!user) throw new Error("É necessário estar autenticado.") const payload = ( tipo === "PF" ? { tipo, pf: { cpf: digitsOnly(pfCpf), nome: pfNome, nascimento: pfNascimento, estadoCivil: pfEstadoCivil, profissao: pfProfissao, endereco: { cep: digitsOnly(pfCep), endereco: pfEndereco, numero: pfNumero, complemento: pfComplemento, bairro: pfBairro, cidade: pfCidade, estado: pfEstado, }, telefone: digitsOnly(pfTelefone), email: pfEmail, observacoes: pfObs, contatos: contatos.map((c) => ({ ...c, fone: digitsOnly(c.fone) })), }, } : { tipo, pj: { cnpj: digitsOnly(pjCnpj), parceiroNumero: pjParceiroNumero, razaoSocial: pjRazao, nomeFantasia: pjFantasia, enderecoEmpresa: { cep: digitsOnly(pjCep), endereco: pjEndereco, numero: pjNumero, complemento: pjComplemento, bairro: pjBairro, cidade: pjCidade, estado: pjEstado, }, telefone: digitsOnly(pjTelefone), email: pjEmail, observacoes: pjObs, contatos: contatos.map((c) => ({ ...c, fone: digitsOnly(c.fone) })), }, administrador: { cpf: digitsOnly(admCpf), nome: admNome, nascimento: admNascimento, estadoCivil: admEstadoCivil, profissao: admProfissao, endereco: { cep: digitsOnly(admCep), endereco: admEndereco, numero: admNumero, complemento: admComplemento, bairro: admBairro, cidade: admCidade, estado: admEstado, }, telefone: digitsOnly(admTelefone), email: admEmail, }, } ) as NovoClientePayload await addClientForUser(user.uid, payload) toast({ title: "Cliente salvo", description: "Cadastro criado com sucesso." }) router.push("/dashboard/clientes") } catch (err: any) { toast({ title: "Erro ao salvar", description: err?.message || "Tente novamente.", variant: "destructive" }) } finally { setIsSaving(false) } } // CEP auto-fill PF React.useEffect(() => { const cep = digitsOnly(pfCep) if (cep.length !== 8) return let cancelled = false ;(async () => { try { setPfCepLoading(true) const data = await lookupCep(cep) if (cancelled) return setPfEndereco(data.logradouro || "") setPfBairro(data.bairro || "") setPfCidade(data.localidade || "") setPfEstado(data.uf || "") if (data.complemento) setPfComplemento(data.complemento) } catch (e: any) { if (!cancelled) console.warn("CEP (PF):", e?.message) } finally { if (!cancelled) setPfCepLoading(false) } })() return () => { cancelled = true } }, [pfCep]) // CEP auto-fill PJ React.useEffect(() => { const cep = digitsOnly(pjCep) if (cep.length !== 8) return let cancelled = false ;(async () => { try { setPjCepLoading(true) const data = await lookupCep(cep) if (cancelled) return setPjEndereco(data.logradouro || "") setPjBairro(data.bairro || "") setPjCidade(data.localidade || "") setPjEstado(data.uf || "") if (data.complemento) setPjComplemento(data.complemento) } catch (e: any) { if (!cancelled) console.warn("CEP (PJ):", e?.message) } finally { if (!cancelled) setPjCepLoading(false) } })() return () => { cancelled = true } }, [pjCep]) // CEP auto-fill ADM React.useEffect(() => { const cep = digitsOnly(admCep) if (cep.length !== 8) return let cancelled = false ;(async () => { try { setAdmCepLoading(true) const data = await lookupCep(cep) if (cancelled) return setAdmEndereco(data.logradouro || "") setAdmBairro(data.bairro || "") setAdmCidade(data.localidade || "") setAdmEstado(data.uf || "") if (data.complemento) setAdmComplemento(data.complemento) } catch (e: any) { if (!cancelled) console.warn("CEP (ADM):", e?.message) } finally { if (!cancelled) setAdmCepLoading(false) } })() return () => { cancelled = true } }, [admCep]) // CPF auto-fill (Administrador) React.useEffect(() => { const cpfDigits = digitsOnly(admCpf) if (cpfDigits.length !== 11) return let cancelled = false const id = setTimeout(async () => { try { setAdmCpfLoading(true) const payload: any = { cpf: cpfDigits } if (admNascimento) { const brDate = toBrDate(admNascimento) if (brDate) payload.date = brDate } const res = await fetch("/api/lookup/cpf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) const data = await res.json() if (!res.ok) throw new Error(data?.error || "Falha ao consultar CPF (Administrador)") if (cancelled) return if (data?.return === "OK" && data?.result) { const r = data.result if (r.nome_da_pf) setAdmNome(r.nome_da_pf) if (r.data_nascimento) { const iso = fromBrDate(String(r.data_nascimento)) if (iso) setAdmNascimento(iso) } } } catch { // silencioso } finally { if (!cancelled) setAdmCpfLoading(false) } }, 450) return () => { cancelled = true clearTimeout(id) } }, [admCpf, admNascimento]) // CPF auto-fill (PF) React.useEffect(() => { const cpfDigits = digitsOnly(pfCpf) if (cpfDigits.length !== 11) return let cancelled = false const id = setTimeout(async () => { try { setPfCpfLoading(true) const payload: any = { cpf: cpfDigits } if (pfNascimento) { const brDate = toBrDate(pfNascimento) if (brDate) payload.date = brDate } const res = await fetch("/api/lookup/cpf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }) const data = await res.json() if (!res.ok) throw new Error(data?.error || "Falha ao consultar CPF") if (cancelled) return if (data?.return === "OK" && data?.result) { const r = data.result if (r.nome_da_pf) setPfNome(r.nome_da_pf) if (r.data_nascimento) { const iso = fromBrDate(String(r.data_nascimento)) if (iso) setPfNascimento(iso) } } } catch { // silencioso } finally { if (!cancelled) setPfCpfLoading(false) } }, 450) return () => { cancelled = true clearTimeout(id) } }, [pfCpf, pfNascimento]) return (

Clientes Novo

Novo Cliente

Preencha os dados do cliente e salve o cadastro.

Tipo de Cliente setTipo(v as "PF" | "PJ")} className="grid max-w-md grid-cols-1 gap-3 sm:grid-cols-2" >

Pessoa Física

CPF, endereço e contatos do titular

Pessoa Jurídica

Dados da empresa e do administrador

{/* PF */} {tipo === "PF" && ( Dados do Cliente (Pessoa Física)

CPF

setPfCpf(maskCPF(e.target.value))} className={pfCpfLoading ? "pr-9" : ""} /> {pfCpfLoading && ( )}

Ao completar 11 dígitos, buscamos automaticamente.

Nome Completo do Titular setPfNome(e.target.value)} />

Data de Nascimento setPfNascimento(e.target.value)} />

Estado Civil

Profissão setPfProfissao(e.target.value)} />

CEP

setPfCep(maskCEP(e.target.value))} className={pfCepLoading ? "pr-9" : ""} /> {pfCepLoading && ( )}

CEP com 8 dígitos busca automaticamente.

Endereço setPfEndereco(e.target.value)} />

Número setPfNumero(e.target.value)} />

Complemento setPfComplemento(e.target.value)} />

Bairro setPfBairro(e.target.value)} />

Cidade setPfCidade(e.target.value)} />

Estado

Telefone setPfTelefone(maskPhoneBR(e.target.value))} />

E-mail setPfEmail(e.target.value)} />

Observações

setPfObs(e.target.value)} />
            </div>

<div className="space-y-3">
              <div className="flex items-center justify-between">
                <div className="text-sm font-medium">Contatos Adicionais</div>
                <Button type="button" variant="outline" size="sm" onClick={addContact}>
                  <Plus className="mr-2 h-4 w-4" />
                  Adicionar contato
                </Button>
              </div>
              <div className="space-y-3">
                {contatos.map((c, i) => (
                  <div key={i} className="grid items-end gap-3 md:grid-cols-[1fr_220px_200px_auto]">
                    <div className="space-y-1.5">
                      <Label>Nome do Contato</Label>
                      <Input value={c.nome} onChange={(e) => updateContact(i, { nome: e.target.value })} />
                    </div>
                    <div className="space-y-1.5">
                      <Label>Fone do Contato</Label>
                      <Input
                        inputMode="tel"
                        maxLength={15}
                        placeholder="(00) 0000-0000"
                        value={c.fone}
                        onChange={(e) => updateContact(i, { fone: maskPhoneBR(e.target.value) })}
                      />
                    </div>
                    <div className="space-y-1.5">
                      <Label>Função do Contato</Label>
                      <Input value={c.funcao} onChange={(e) => updateContact(i, { funcao: e.target.value })} />
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      className="text-red-600 hover:bg-red-50"
                      onClick={() => removeContact(i)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* PJ */}
      {tipo === "PJ" && (
        <>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base">Dados do Cliente (Pessoa Jurídica)</CardTitle>
            </CardHeader>
            <CardContent className="space-y-5">
              <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-1.5">
                  <Label htmlFor="pj-cnpj">CNPJ</Label>
                  <div className="relative">
                    <Input
                      id="pj-cnpj"
                      inputMode="numeric"
                      maxLength={18}
                      placeholder="00.000.000/0000-00"
                      value={pjCnpj}
                      onChange={(e) => setPjCnpj(maskCNPJ(e.target.value))}
                      className={pjCnpjLoading ? "pr-9" : ""}
                    />
                    {pjCnpjLoading && (
                      <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                    )}
                  </div>
                  <p className="text-[11px] text-muted-foreground">
                    Ao completar 14 dígitos, buscamos e preenchemos automaticamente.
                  </p>
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-parc">Número Parceiro de Negócio</Label>
                  <Input id="pj-parc" value={pjParceiroNumero} onChange={(e) => setPjParceiroNumero(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-fant">Nome Fantasia</Label>
                  <Input id="pj-fant" value={pjFantasia} onChange={(e) => setPjFantasia(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-1.5">
                  <Label htmlFor="pj-razao">Razão Social</Label>
                  <Input id="pj-razao" value={pjRazao} onChange={(e) => setPjRazao(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-email">E-mail</Label>
                  <Input id="pj-email" type="email" value={pjEmail} onChange={(e) => setPjEmail(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-1.5">
                  <Label htmlFor="pj-cep">CEP da empresa</Label>
                  <div className="relative">
                    <Input
                      id="pj-cep"
                      inputMode="numeric"
                      maxLength={9}
                      placeholder="00000-000"
                      value={pjCep}
                      onChange={(e) => setPjCep(maskCEP(e.target.value))}
                      className={pjCepLoading ? "pr-9" : ""}
                    />
                    {pjCepLoading && (
                      <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                    )}
                  </div>
                  <p className="text-[11px] text-muted-foreground">CEP com 8 dígitos busca automaticamente.</p>
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="pj-end">Endereço da empresa</Label>
                  <Input id="pj-end" value={pjEndereco} onChange={(e) => setPjEndereco(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-num">Número</Label>
                  <Input id="pj-num" value={pjNumero} onChange={(e) => setPjNumero(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-1.5">
                  <Label htmlFor="pj-comp">Complemento</Label>
                  <Input id="pj-comp" value={pjComplemento} onChange={(e) => setPjComplemento(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-bairro">Bairro</Label>
                  <Input id="pj-bairro" value={pjBairro} onChange={(e) => setPjBairro(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-cidade">Cidade</Label>
                  <Input id="pj-cidade" value={pjCidade} onChange={(e) => setPjCidade(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="pj-uf">Estado</Label>
                  <Select value={pjEstado} onValueChange={setPjEstado}>
                    <SelectTrigger id="pj-uf">
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      {BR_STATES.map((uf) => (
                        <SelectItem key={uf} value={uf}>
                          {uf}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-1.5">
                  <Label htmlFor="pj-tel">Telefone da empresa</Label>
                  <Input
                    id="pj-tel"
                    inputMode="tel"
                    maxLength={15}
                    placeholder="(00) 0000-0000"
                    value={pjTelefone}
                    onChange={(e) => setPjTelefone(maskPhoneBR(e.target.value))}
                  />
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="pj-obs">Observações</Label>
                  <Textarea id="pj-obs" value={pjObs} onChange={(e) => setPjObs(e.target.value)} />
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="text-sm font-medium">Contatos Adicionais</div>
                  <Button type="button" variant="outline" size="sm" onClick={addContact}>
                    <Plus className="mr-2 h-4 w-4" />
                    Adicionar contato
                  </Button>
                </div>
                <div className="space-y-3">
                  {contatos.map((c, i) => (
                    <div key={i} className="grid items-end gap-3 md:grid-cols-[1fr_220px_200px_auto]">
                      <div className="space-y-1.5">
                        <Label>Nome do Contato</Label>
                        <Input value={c.nome} onChange={(e) => updateContact(i, { nome: e.target.value })} />
                      </div>
                      <div className="space-y-1.5">
                        <Label>Fone do Contato</Label>
                        <Input
                          inputMode="tel"
                          maxLength={15}
                          placeholder="(00) 90000-0000"
                          value={c.fone}
                          onChange={(e) => updateContact(i, { fone: maskPhoneBR(e.target.value) })}
                        />
                      </div>
                      <div className="space-y-1.5">
                        <Label>Função do Contato</Label>
                        <Input value={c.funcao} onChange={(e) => updateContact(i, { funcao: e.target.value })} />
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        className="text-red-600 hover:bg-red-50"
                        onClick={() => removeContact(i)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base">Dados do Administrador da Pessoa Jurídica</CardTitle>
            </CardHeader>
            <CardContent className="space-y-5">
              <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-1.5">
                  <Label htmlFor="adm-cpf">CPF do Administrador</Label>
                  <div className="relative">
                    <Input
                      id="adm-cpf"
                      inputMode="numeric"
                      maxLength={14}
                      placeholder="000.000.000-00"
                      value={admCpf}
                      onChange={(e) => setAdmCpf(maskCPF(e.target.value))}
                      className={admCpfLoading ? "pr-9" : ""}
                    />
                    {admCpfLoading && (
                      <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                    )}
                  </div>
                  <p className="text-[11px] text-muted-foreground">
                    Ao completar 11 dígitos, buscamos e preenchemos automaticamente.
                  </p>
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="adm-nome">Nome do Administrador</Label>
                  <Input id="adm-nome" value={admNome} onChange={(e) => setAdmNome(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-1.5">
                  <Label htmlFor="adm-nasc">Data de Nascimento</Label>
                  <Input
                    id="adm-nasc"
                    type="date"
                    value={admNascimento}
                    onChange={(e) => setAdmNascimento(e.target.value)}
                  />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="adm-ec">Estado Civil</Label>
                  <Select value={admEstadoCivil} onValueChange={setAdmEstadoCivil}>
                    <SelectTrigger id="adm-ec">
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      {ESTADO_CIVIL_OPTIONS.map((opt) => (
                        <SelectItem key={opt} value={opt}>
                          {opt}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="adm-prof">Profissão</Label>
                  <Input id="adm-prof" value={admProfissao} onChange={(e) => setAdmProfissao(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-1.5">
                  <Label htmlFor="adm-cep">CEP Residencial</Label>
                  <div className="relative">
                    <Input
                      id="adm-cep"
                      inputMode="numeric"
                      maxLength={9}
                      placeholder="00000-000"
                      value={admCep}
                      onChange={(e) => setAdmCep(maskCEP(e.target.value))}
                      className={admCepLoading ? "pr-9" : ""}
                    />
                    {admCepLoading && (
                      <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                    )}
                  </div>
                  <p className="text-[11px] text-muted-foreground">CEP com 8 dígitos busca automaticamente.</p>
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="adm-end">Endereço Residencial</Label>
                  <Input id="adm-end" value={admEndereco} onChange={(e) => setAdmEndereco(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="adm-num">Número</Label>
                  <Input id="adm-num" value={admNumero} onChange={(e) => setAdmNumero(e.target.value)} />
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-4">
                <div className="space-y-1.5">
                  <Label htmlFor="adm-comp">Complemento</Label>
                  <Input id="adm-comp" value={admComplemento} onChange={(e) => setAdmComplemento(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="adm-bairro">Bairro</Label>
                  <Input id="adm-bairro" value={admBairro} onChange={(e) => setAdmBairro(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="adm-cidade">Cidade</Label>
                  <Input id="adm-cidade" value={admCidade} onChange={(e) => setAdmCidade(e.target.value)} />
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="adm-uf">Estado</Label>
                  <Select value={admEstado} onValueChange={setAdmEstado}>
                    <SelectTrigger id="adm-uf">
                      <SelectValue placeholder="Selecione" />
                    </SelectTrigger>
                    <SelectContent>
                      {BR_STATES.map((uf) => (
                        <SelectItem key={uf} value={uf}>
                          {uf}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-1.5">
                  <Label htmlFor="adm-tel">Telefone</Label>
                  <Input
                    id="adm-tel"
                    inputMode="tel"
                    maxLength={15}
                    placeholder="(00) 90000-0000"
                    value={admTelefone}
                    onChange={(e) => setAdmTelefone(maskPhoneBR(e.target.value))}
                  />
                </div>
                <div className="md:col-span-2 space-y-1.5">
                  <Label htmlFor="adm-email">E-mail</Label>
                  <Input id="adm-email" type="email" value={admEmail} onChange={(e) => setAdmEmail(e.target.value)} />
                </div>
              </div>
            </CardContent>
          </Card>
        </>
      )}

<div className="sticky bottom-0 z-10 -mx-4 border-t bg-white/80 px-4 py-3 backdrop-blur md:-mx-6 md:px-6">
        <div className="mx-auto flex max-w-7xl items-center justify-end gap-2">
          <Button type="button" variant="outline" asChild>
            <Link href="/dashboard/clientes" prefetch>
              <ArrowLeft className="mr-2 h-4 w-4" />
              Cancelar
            </Link>
          </Button>
          <Button type="submit" className="bg-emerald-600 hover:bg-emerald-700" disabled={isSaving || !user}>
            <Save className="mr-2 h-4 w-4" />
            {isSaving ? "Salvando..." : "Salvar"}
          </Button>
        </div>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/client-form-dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Plus, Trash2, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { useCurrentUser } from "@/lib/use-current-user"
import { addClientForUser } from "@/lib/clients-db"
import type { NovoClientePayload } from "@/lib/clients-storage"
import { digitsOnly, maskCEP, maskCPF, maskCNPJ, maskPhoneBR, ESTADO_CIVIL_OPTIONS } from "@/lib/mask-br"

type Contact = { nome: string; fone: string; funcao: string }

const BR_STATES = [
  "AC",
  "AL",
  "AP",
  "AM",
  "BA",
  "CE",
  "DF",
  "ES",
  "GO",
  "MA",
  "MT",
  "MS",
  "MG",
  "PA",
  "PB",
  "PR",
  "PE",
  "PI",
  "RJ",
  "RN",
  "RS",
  "RO",
  "RR",
  "SC",
  "SP",
  "SE",
  "TO",
]

const CONCESSIONARIAS = ["Equatorial Goiás"]

export function ClientFormDialog({
  open,
  onOpenChange,
}: {
  open: boolean
  onOpenChange: (v: boolean) => void
}) {
  const { toast } = useToast()
  const { user } = useCurrentUser()
  const [isSaving, setIsSaving] = React.useState(false)

// Tipo de cliente
  const [tipo, setTipo] = React.useState<"PF" | "PJ">("PF")

// PF
  const [pfCpf, setPfCpf] = React.useState("")
  const [pfNome, setPfNome] = React.useState("")
  const [pfNascimento, setPfNascimento] = React.useState("")
  const [pfEstadoCivil, setPfEstadoCivil] = React.useState<string>("")
  const [pfProfissao, setPfProfissao] = React.useState("")
  const [pfCep, setPfCep] = React.useState("")
  const [pfEndereco, setPfEndereco] = React.useState("")
  const [pfNumero, setPfNumero] = React.useState("")
  const [pfComplemento, setPfComplemento] = React.useState("")
  const [pfBairro, setPfBairro] = React.useState("")
  const [pfCidade, setPfCidade] = React.useState("")
  const [pfEstado, setPfEstado] = React.useState("")
  const [pfTelefone, setPfTelefone] = React.useState("")
  const [pfEmail, setPfEmail] = React.useState("")
  const [pfObs, setPfObs] = React.useState("")
  const [pfContatos, setPfContatos] = React.useState<Contact[]>([])
  const [pfCepLoading, setPfCepLoading] = React.useState(false)
  const [pfCpfLoading, setPfCpfLoading] = React.useState(false)

// PJ
  const [pjCnpj, setPjCnpj] = React.useState("")
  const [pjParceiroNumero, setPjParceiroNumero] = React.useState("")
  const [pjRazao, setPjRazao] = React.useState("")
  const [pjFantasia, setPjFantasia] = React.useState("")
  const [pjCep, setPjCep] = React.useState("")
  const [pjEndereco, setPjEndereco] = React.useState("")
  const [pjNumero, setPjNumero] = React.useState("")
  const [pjComplemento, setPjComplemento] = React.useState("")
  const [pjBairro, setPjBairro] = React.useState("")
  const [pjCidade, setPjCidade] = React.useState("")
  const [pjEstado, setPjEstado] = React.useState("")
  const [pjTelefone, setPjTelefone] = React.useState("")
  const [pjEmail, setPjEmail] = React.useState("")
  const [pjObs, setPjObs] = React.useState("")
  const [pjContatos, setPjContatos] = React.useState<Contact[]>([])
  const [pjCepLoading, setPjCepLoading] = React.useState(false)
  const [pjCnpjLoading, setPjCnpjLoading] = React.useState(false)

// Admin PJ
  const [admCpf, setAdmCpf] = React.useState("")
  const [admNome, setAdmNome] = React.useState("")
  const [admNascimento, setAdmNascimento] = React.useState("")
  const [admEstadoCivil, setAdmEstadoCivil] = React.useState<string>("")
  const [admProfissao, setAdmProfissao] = React.useState("")
  const [admCep, setAdmCep] = React.useState("")
  const [admEndereco, setAdmEndereco] = React.useState("")
  const [admNumero, setAdmNumero] = React.useState("")
  const [admComplemento, setAdmComplemento] = React.useState("")
  const [admBairro, setAdmBairro] = React.useState("")
  const [admCidade, setAdmCidade] = React.useState("")
  const [admEstado, setAdmEstado] = React.useState("")
  const [admTelefone, setAdmTelefone] = React.useState("")
  const [admEmail, setAdmEmail] = React.useState("")
  const [admCepLoading, setAdmCepLoading] = React.useState(false)
  const [admCpfLoading, setAdmCpfLoading] = React.useState(false)

// Comum
  const [concessionaria, setConcessionaria] = React.useState(CONCESSIONARIAS[0])

// ViaCEP (PF)
  React.useEffect(() => {
    const cep = digitsOnly(pfCep)
    if (cep.length !== 8) return
    let cancelled = false
    ;(async () => {
      try {
        setPfCepLoading(true)
        const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
        const data = await res.json()
        if (!res.ok || data?.erro) throw new Error()
        if (cancelled) return
        setPfEndereco(data.logradouro || "")
        setPfBairro(data.bairro || "")
        setPfCidade(data.localidade || "")
        setPfEstado(data.uf || "")
        if (data.complemento) setPfComplemento(data.complemento)
      } catch {
      } finally {
        if (!cancelled) setPfCepLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [pfCep])

// ViaCEP (PJ)
  React.useEffect(() => {
    const cep = digitsOnly(pjCep)
    if (cep.length !== 8) return
    let cancelled = false
    ;(async () => {
      try {
        setPjCepLoading(true)
        const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
        const data = await res.json()
        if (!res.ok || data?.erro) throw new Error()
        if (cancelled) return
        setPjEndereco(data.logradouro || "")
        setPjBairro(data.bairro || "")
        setPjCidade(data.localidade || "")
        setPjEstado(data.uf || "")
        if (data.complemento) setPjComplemento(data.complemento)
      } catch {
      } finally {
        if (!cancelled) setPjCepLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [pjCep])

// ViaCEP (ADM)
  React.useEffect(() => {
    const cep = digitsOnly(admCep)
    if (cep.length !== 8) return
    let cancelled = false
    ;(async () => {
      try {
        setAdmCepLoading(true)
        const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`)
        const data = await res.json()
        if (!res.ok || data?.erro) throw new Error()
        if (cancelled) return
        setAdmEndereco(data.logradouro || "")
        setAdmBairro(data.bairro || "")
        setAdmCidade(data.localidade || "")
        setAdmEstado(data.uf || "")
        if (data.complemento) setAdmComplemento(data.complemento)
      } catch {
      } finally {
        if (!cancelled) setAdmCepLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [admCep])

// CPF auto-fill (PF)
  React.useEffect(() => {
    const cpf = digitsOnly(pfCpf)
    if (cpf.length !== 11) return
    let cancelled = false
    const id = setTimeout(async () => {
      try {
        setPfCpfLoading(true)
        const res = await fetch("/api/lookup/cpf", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ cpf }),
        })
        const data = await res.json()
        if (!res.ok) throw new Error()
        if (cancelled) return
        if (data?.return === "OK" && data?.result?.nome_da_pf) setPfNome(data.result.nome_da_pf)
      } catch {
      } finally {
        if (!cancelled) setPfCpfLoading(false)
      }
    }, 450)
    return () => {
      cancelled = true
      clearTimeout(id)
    }
  }, [pfCpf])

// CPF auto-fill (ADM)
  React.useEffect(() => {
    const cpf = digitsOnly(admCpf)
    if (cpf.length !== 11) return
    let cancelled = false
    const id = setTimeout(async () => {
      try {
        setAdmCpfLoading(true)
        const res = await fetch("/api/lookup/cpf", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ cpf }),
        })
        await res.json()
      } catch {
      } finally {
        if (!cancelled) setAdmCpfLoading(false)
      }
    }, 450)
    return () => {
      cancelled = true
      clearTimeout(id)
    }
  }, [admCpf])

function addContact(which: "PF" | "PJ") {
    const blank = { nome: "", fone: "", funcao: "" }
    if (which === "PF") setPfContatos((arr) => [...arr, blank])
    else setPjContatos((arr) => [...arr, blank])
  }

function updateContact(which: "PF" | "PJ", idx: number, patch: Partial<Contact>) {
    const update = (arr: Contact[]) => arr.map((c, i) => (i === idx ? { ...c, ...patch } : c))
    if (which === "PF") setPfContatos((arr) => update(arr))
    else setPjContatos((arr) => update(arr))
  }

function removeContact(which: "PF" | "PJ", idx: number) {
    const remove = (arr: Contact[]) => arr.filter((_, i) => i !== idx)
    if (which === "PF") setPfContatos((arr) => remove(arr))
    else setPjContatos((arr) => remove(arr))
  }

function resetAll() {
    setTipo("PF")
    setPfCpf("")
    setPfNome("")
    setPfNascimento("")
    setPfEstadoCivil("")
    setPfProfissao("")
    setPfCep("")
    setPfEndereco("")
    setPfNumero("")
    setPfComplemento("")
    setPfBairro("")
    setPfCidade("")
    setPfEstado("")
    setPfTelefone("")
    setPfEmail("")
    setPfObs("")
    setPfContatos([])

setPjCnpj("")
    setPjParceiroNumero("")
    setPjRazao("")
    setPjFantasia("")
    setPjCep("")
    setPjEndereco("")
    setPjNumero("")
    setPjComplemento("")
    setPjBairro("")
    setPjCidade("")
    setPjEstado("")
    setPjTelefone("")
    setPjEmail("")
    setPjObs("")
    setPjContatos([])

setAdmCpf("")
    setAdmNome("")
    setAdmNascimento("")
    setAdmEstadoCivil("")
    setAdmProfissao("")
    setAdmCep("")
    setAdmEndereco("")
    setAdmNumero("")
    setAdmComplemento("")
    setAdmBairro("")
    setAdmCidade("")
    setAdmEstado("")
    setAdmTelefone("")
    setAdmEmail("")
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setIsSaving(true)
    try {
      if (!user) throw new Error("É necessário estar autenticado.")
      const payload: NovoClientePayload =
        tipo === "PF"
          ? {
              tipo,
              pf: {
                cpf: digitsOnly(pfCpf),
                nome: pfNome,
                nascimento: pfNascimento,
                estadoCivil: pfEstadoCivil,
                profissao: pfProfissao,
                endereco: {
                  cep: digitsOnly(pfCep),
                  endereco: pfEndereco,
                  numero: pfNumero,
                  complemento: pfComplemento,
                  bairro: pfBairro,
                  cidade: pfCidade,
                  estado: pfEstado,
                },
                telefone: digitsOnly(pfTelefone),
                email: pfEmail,
                observacoes: pfObs,
                contatos: pfContatos.map((c) => ({ ...c, fone: digitsOnly(c.fone) })),
              },
            }
          : {
              tipo,
              pj: {
                cnpj: digitsOnly(pjCnpj),
                parceiroNumero: pjParceiroNumero,
                razaoSocial: pjRazao,
                nomeFantasia: pjFantasia,
                enderecoEmpresa: {
                  cep: digitsOnly(pjCep),
                  endereco: pjEndereco,
                  numero: pjNumero,
                  complemento: pjComplemento,
                  bairro: pjBairro,
                  cidade: pjCidade,
                  estado: pjEstado,
                },
                telefone: digitsOnly(pjTelefone),
                email: pjEmail,
                observacoes: pjObs,
                contatos: pjContatos.map((c) => ({ ...c, fone: digitsOnly(c.fone) })),
              },
              administrador: {
                cpf: digitsOnly(admCpf),
                nome: admNome,
                nascimento: admNascimento,
                estadoCivil: admEstadoCivil,
                profissao: admProfissao,
                endereco: {
                  cep: digitsOnly(admCep),
                  endereco: admEndereco,
                  numero: admNumero,
                  complemento: admComplemento,
                  bairro: admBairro,
                  cidade: admCidade,
                  estado: admEstado,
                },
                telefone: digitsOnly(admTelefone),
                email: admEmail,
              },
            }

await addClientForUser(user.uid, payload)

toast({ title: "Cliente salvo", description: "Cadastro criado com sucesso." })
      onOpenChange(false)
      resetAll()
    } catch (err: any) {
      toast({ title: "Erro", description: err?.message || "Falha ao salvar.", variant: "destructive" })
    } finally {
      setIsSaving(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={(v) => (v ? onOpenChange(true) : onOpenChange(false))}>
      <DialogContent className="max-w-3xl p-0">
        <DialogHeader className="px-6 pt-6">
          <DialogTitle>Cadastro de Cliente</DialogTitle>
        </DialogHeader>
        <Separator />
        <form onSubmit={handleSubmit}>
          <ScrollArea className="max-h-[75vh] px-6 py-5">
            {/* Tipo Cliente */}
            <section className="space-y-3">
              <Label className="text-sm font-medium">Tipo de Cliente</Label>
              <RadioGroup
                value={tipo}
                onValueChange={(v) => setTipo(v as "PF" | "PJ")}
                className="flex flex-wrap gap-4"
              >
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="PF" id="tipo-pf" />
                  <Label htmlFor="tipo-pf">Pessoa Física</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="PJ" id="tipo-pj" />
                  <Label htmlFor="tipo-pj">Pessoa Jurídica</Label>
                </div>
              </RadioGroup>
            </section>

{/* Pessoa Física */}
            {tipo === "PF" && (
              <section className="space-y-5">
                <div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="pf-cpf">CPF</Label>
                    <div className="relative">
                      <Input
                        id="pf-cpf"
                        inputMode="numeric"
                        maxLength={14}
                        placeholder="000.000.000-00"
                        value={pfCpf}
                        onChange={(e) => setPfCpf(maskCPF(e.target.value))}
                        className={pfCpfLoading ? "pr-9" : ""}
                      />
                      {pfCpfLoading && (
                        <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                      )}
                    </div>
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <Label htmlFor="pf-nome">Nome completo do titular</Label>
                    <Input id="pf-nome" value={pfNome} onChange={(e) => setPfNome(e.target.value)} />
                  </div>
                </div>

<div className="grid gap-4 md:grid-cols-4">
                  <div className="space-y-2">
                    <Label htmlFor="pf-nasc">Data de nascimento</Label>
                    <Input
                      id="pf-nasc"
                      type="date"
                      value={pfNascimento}
                      onChange={(e) => setPfNascimento(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pf-ec">Estado civil</Label>
                    <Select value={pfEstadoCivil} onValueChange={setPfEstadoCivil}>
                      <SelectTrigger id="pf-ec">
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        {ESTADO_CIVIL_OPTIONS.map((opt) => (
                          <SelectItem key={opt} value={opt}>
                            {opt}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <Label htmlFor="pf-prof">Profissão</Label>
                    <Input id="pf-prof" value={pfProfissao} onChange={(e) => setPfProfissao(e.target.value)} />
                  </div>
                </div>

<div className="grid gap-4 md:grid-cols-4">
                  <div className="space-y-2">
                    <Label htmlFor="pf-cep">CEP</Label>
                    <div className="relative">
                      <Input
                        id="pf-cep"
                        inputMode="numeric"
                        maxLength={9}
                        placeholder="00000-000"
                        value={pfCep}
                        onChange={(e) => setPfCep(maskCEP(e.target.value))}
                        className={pfCepLoading ? "pr-9" : ""}
                      />
                      {pfCepLoading && (
                        <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                      )}
                    </div>
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <Label htmlFor="pf-end">Endereço</Label>
                    <Input id="pf-end" value={pfEndereco} onChange={(e) => setPfEndereco(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pf-num">Número</Label>
                    <Input id="pf-num" value={pfNumero} onChange={(e) => setPfNumero(e.target.value)} />
                  </div>
                </div>

<div className="grid gap-4 md:grid-cols-4">
                  <div className="space-y-2">
                    <Label htmlFor="pf-comp">Complemento</Label>
                    <Input id="pf-comp" value={pfComplemento} onChange={(e) => setPfComplemento(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pf-bairro">Bairro</Label>
                    <Input id="pf-bairro" value={pfBairro} onChange={(e) => setPfBairro(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pf-cidade">Cidade</Label>
                    <Input id="pf-cidade" value={pfCidade} onChange={(e) => setPfCidade(e.target.value)} />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="pf-uf">Estado</Label>
                    <Select value={pfEstado} onValueChange={setPfEstado}>
                      <SelectTrigger id="pf-uf">
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        {BR_STATES.map((uf) => (
                          <SelectItem key={uf} value={uf}>
                            {uf}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="pf-tel">Telefone</Label>
                    <Input
                      id="pf-tel"
                      inputMode="tel"
                      maxLength={15}
                      placeholder="(00) 90000-0000"
                      value={pfTelefone}
                      onChange={(e) => setPfTelefone(maskPhoneBR(e.target.value))}
                    />
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <Label htmlFor="pf-email">E-mail</Label>
                    <Input id="pf-email" type="email" value={pfEmail} onChange={(e) => setPfEmail(e.target.value)} />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="pf-obs">Observações</Label>
                  <Textarea id="pf-obs" value={pfObs} onChange={(e) => setPfObs(e.target.value)} />
                </div>

{/* Contatos PF */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="text-sm font-medium">Contatos adicionais</div>
                    <Button type="button" variant="outline" size="sm" onClick={() => addContact("PF")}>
                      <Plus className="mr-2 h-4 w-4" />
                      Adicionar contato
                    </Button>
                  </div>
                  <div className="space-y-3">
                    {pfContatos.map((c, i) => (
                      <div key={i} className="grid gap-3 md:grid-cols-[1fr_220px_200px_auto] items-end">
                        <div className="space-y-1.5">
                          <Label>Nome do contato</Label>
                          <Input value={c.nome} onChange={(e) => updateContact("PF", i, { nome: e.target.value })} />
                        </div>
                        <div className="space-y-1.5">
                          <Label>Fone do contato</Label>
                          <Input
                            inputMode="tel"
                            maxLength={15}
                            placeholder="(00) 0000-0000"
                            value={c.fone}
                            onChange={(e) => updateContact("PF", i, { fone: maskPhoneBR(e.target.value) })}
                          />
                        </div>
                        <div className="space-y-1.5">
                          <Label>Função do contato</Label>
                          <Input
                            value={c.funcao}
                            onChange={(e) => updateContact("PF", i, { funcao: e.target.value })}
                          />
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          className="text-red-600 hover:bg-red-50"
                          onClick={() => removeContact("PF", i)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              </section>
            )}

{/* Pessoa Jurídica */}
            {tipo === "PJ" && (
              <section className="space-y-6">
                {/* Empresa */}
                <div className="space-y-5">
                  <div className="grid gap-4 md:grid-cols-3">
                    <div className="space-y-2">
                      <Label htmlFor="pj-cnpj">CNPJ</Label>
                      <div className="relative">
                        <Input
                          id="pj-cnpj"
                          inputMode="numeric"
                          maxLength={18}
                          placeholder="00.000.000/0000-00"
                          value={pjCnpj}
                          onChange={(e) => setPjCnpj(maskCNPJ(e.target.value))}
                          className={pjCnpjLoading ? "pr-9" : ""}
                        />
                        {pjCnpjLoading && (
                          <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                        )}
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-parc">Número Parceiro de Negócio</Label>
                      <Input
                        id="pj-parc"
                        value={pjParceiroNumero}
                        onChange={(e) => setPjParceiroNumero(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-fant">Nome Fantasia</Label>
                      <Input id="pj-fant" value={pjFantasia} onChange={(e) => setPjFantasia(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="pj-razao">Razão Social</Label>
                      <Input id="pj-razao" value={pjRazao} onChange={(e) => setPjRazao(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-email">E-mail</Label>
                      <Input id="pj-email" type="email" value={pjEmail} onChange={(e) => setPjEmail(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-4">
                    <div className="space-y-2">
                      <Label htmlFor="pj-cep">CEP da empresa</Label>
                      <div className="relative">
                        <Input
                          id="pj-cep"
                          inputMode="numeric"
                          maxLength={9}
                          placeholder="00000-000"
                          value={pjCep}
                          onChange={(e) => setPjCep(maskCEP(e.target.value))}
                          className={pjCepLoading ? "pr-9" : ""}
                        />
                        {pjCepLoading && (
                          <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                        )}
                      </div>
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="pj-end">Endereço da empresa</Label>
                      <Input id="pj-end" value={pjEndereco} onChange={(e) => setPjEndereco(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-num">Número</Label>
                      <Input id="pj-num" value={pjNumero} onChange={(e) => setPjNumero(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-4">
                    <div className="space-y-2">
                      <Label htmlFor="pj-comp">Complemento</Label>
                      <Input id="pj-comp" value={pjComplemento} onChange={(e) => setPjComplemento(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-bairro">Bairro</Label>
                      <Input id="pj-bairro" value={pjBairro} onChange={(e) => setPjBairro(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-cidade">Cidade</Label>
                      <Input id="pj-cidade" value={pjCidade} onChange={(e) => setPjCidade(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="pj-uf">Estado</Label>
                      <Select value={pjEstado} onValueChange={setPjEstado}>
                        <SelectTrigger id="pj-uf">
                          <SelectValue placeholder="Selecione" />
                        </SelectTrigger>
                        <SelectContent>
                          {BR_STATES.map((uf) => (
                            <SelectItem key={uf} value={uf}>
                              {uf}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-3">
                    <div className="space-y-2">
                      <Label htmlFor="pj-tel">Telefone da empresa</Label>
                      <Input
                        id="pj-tel"
                        inputMode="tel"
                        maxLength={15}
                        placeholder="(00) 0000-0000"
                        value={pjTelefone}
                        onChange={(e) => setPjTelefone(maskPhoneBR(e.target.value))}
                      />
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="pj-obs">Observações</Label>
                      <Textarea id="pj-obs" value={pjObs} onChange={(e) => setPjObs(e.target.value)} />
                    </div>
                  </div>

{/* Contatos PJ */}
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="text-sm font-medium">Contatos adicionais</div>
                      <Button type="button" variant="outline" size="sm" onClick={() => addContact("PJ")}>
                        <Plus className="mr-2 h-4 w-4" />
                        Adicionar contato
                      </Button>
                    </div>
                    <div className="space-y-3">
                      {pjContatos.map((c, i) => (
                        <div key={i} className="grid gap-3 md:grid-cols-[1fr_220px_200px_auto] items-end">
                          <div className="space-y-1.5">
                            <Label>Nome do contato</Label>
                            <Input value={c.nome} onChange={(e) => updateContact("PJ", i, { nome: e.target.value })} />
                          </div>
                          <div className="space-y-1.5">
                            <Label>Fone do contato</Label>
                            <Input
                              inputMode="tel"
                              maxLength={15}
                              placeholder="(00) 90000-0000"
                              value={c.fone}
                              onChange={(e) => updateContact("PJ", i, { fone: maskPhoneBR(e.target.value) })}
                            />
                          </div>
                          <div className="space-y-1.5">
                            <Label>Função do contato</Label>
                            <Input
                              value={c.funcao}
                              onChange={(e) => updateContact("PJ", i, { funcao: e.target.value })}
                            />
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            className="text-red-600 hover:bg-red-50"
                            onClick={() => removeContact("PJ", i)}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

{/* Administrador */}
                <div className="space-y-5">
                  <div className="text-sm font-medium">Dados do Administrador</div>
                  <div className="grid gap-4 md:grid-cols-3">
                    <div className="space-y-2">
                      <Label htmlFor="adm-cpf">CPF do Administrador</Label>
                      <div className="relative">
                        <Input
                          id="adm-cpf"
                          inputMode="numeric"
                          maxLength={14}
                          placeholder="000.000.000-00"
                          value={admCpf}
                          onChange={(e) => setAdmCpf(maskCPF(e.target.value))}
                          className={admCpfLoading ? "pr-9" : ""}
                        />
                        {admCpfLoading && (
                          <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                        )}
                      </div>
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="adm-nome">Nome do Administrador</Label>
                      <Input id="adm-nome" value={admNome} onChange={(e) => setAdmNome(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-4">
                    <div className="space-y-2">
                      <Label htmlFor="adm-nasc">Data de Nascimento</Label>
                      <Input
                        id="adm-nasc"
                        type="date"
                        value={admNascimento}
                        onChange={(e) => setAdmNascimento(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="adm-ec">Estado Civil</Label>
                      <Select value={admEstadoCivil} onValueChange={setAdmEstadoCivil}>
                        <SelectTrigger id="adm-ec">
                          <SelectValue placeholder="Selecione" />
                        </SelectTrigger>
                        <SelectContent>
                          {ESTADO_CIVIL_OPTIONS.map((opt) => (
                            <SelectItem key={opt} value={opt}>
                              {opt}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="adm-prof">Profissão</Label>
                      <Input id="adm-prof" value={admProfissao} onChange={(e) => setAdmProfissao(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-4">
                    <div className="space-y-2">
                      <Label htmlFor="adm-cep">CEP Residencial</Label>
                      <div className="relative">
                        <Input
                          id="adm-cep"
                          inputMode="numeric"
                          maxLength={9}
                          placeholder="00000-000"
                          value={admCep}
                          onChange={(e) => setAdmCep(maskCEP(e.target.value))}
                          className={admCepLoading ? "pr-9" : ""}
                        />
                        {admCepLoading && (
                          <Loader2 className="absolute right-2 top-2.5 h-4 w-4 animate-spin text-muted-foreground" />
                        )}
                      </div>
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="adm-end">Endereço Residencial</Label>
                      <Input id="adm-end" value={admEndereco} onChange={(e) => setAdmEndereco(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="adm-num">Número</Label>
                      <Input id="adm-num" value={admNumero} onChange={(e) => setAdmNumero(e.target.value)} />
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-4">
                    <div className="space-y-2">
                      <Label htmlFor="adm-comp">Complemento</Label>
                      <Input id="adm-comp" value={admComplemento} onChange={(e) => setAdmComplemento(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="adm-bairro">Bairro</Label>
                      <Input id="adm-bairro" value={admBairro} onChange={(e) => setAdmBairro(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="adm-cidade">Cidade</Label>
                      <Input id="adm-cidade" value={admCidade} onChange={(e) => setAdmCidade(e.target.value)} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="adm-uf">Estado</Label>
                      <Select value={admEstado} onValueChange={setAdmEstado}>
                        <SelectTrigger id="adm-uf">
                          <SelectValue placeholder="Selecione" />
                        </SelectTrigger>
                        <SelectContent>
                          {BR_STATES.map((uf) => (
                            <SelectItem key={uf} value={uf}>
                              {uf}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="grid gap-4 md:grid-cols-3">
                    <div className="space-y-2">
                      <Label htmlFor="adm-tel">Telefone</Label>
                      <Input
                        id="adm-tel"
                        inputMode="tel"
                        maxLength={15}
                        placeholder="(00) 90000-0000"
                        value={admTelefone}
                        onChange={(e) => setAdmTelefone(maskPhoneBR(e.target.value))}
                      />
                    </div>
                    <div className="md:col-span-2 space-y-2">
                      <Label htmlFor="adm-email">E-mail</Label>
                      <Input
                        id="adm-email"
                        type="email"
                        value={admEmail}
                        onChange={(e) => setAdmEmail(e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              </section>
            )}

{/* Comum: Concessionária */}
            <section className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Concessionária</Label>
                <Select value={concessionaria} onValueChange={setConcessionaria}>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione" />
                  </SelectTrigger>
                  <SelectContent>
                    {CONCESSIONARIAS.map((c) => (
                      <SelectItem key={c} value={c}>
                        {c}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </section>
          </ScrollArea>

<DialogFooter className="px-6 py-4">
            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSaving} className="bg-emerald-600 hover:bg-emerald-700">
              {isSaving ? "Salvando..." : "Salvar cliente"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]png:file="public/solarman-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/solarman-logo-gL7iFyJNYIb9dNLznByvs6MuzDaeCl.png" isMerged="true"
[V0_FILE]png:file="public/solis-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/solis-logo-IyWqZgubPhzrBigRd6rphTmh7l6ESV.png" isMerged="true"
[V0_FILE]png:file="public/sungrow-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sungrow-logo-6482oQL38Gnfe2TNYb3q1DrM0w0Mmt.png" isMerged="true"
[V0_FILE]png:file="public/saj-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/saj-logo-eX5N4QRJvFaYzGKPH8XaDow9mYqNgU.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/api/evolution/utils.ts" isMerged="true"
const DEFAULT_BASE = "https://evo.iasolar.app.br"

export function getEvolutionConfig() {
  const base = process.env.EVOLUTION_BASE_URL || DEFAULT_BASE
  const apiKey = process.env.EVOLUTION_API_KEY || "9fa3d10afec67dcfa68dd522e3af3246"
  return { base, apiKey }
}

export async function evoFetch(path: string, init?: RequestInit) {
  const { base, apiKey } = getEvolutionConfig()
  const url = `${base}${path.startsWith("/") ? path : `/${path}`}`
  const headers = new Headers(init?.headers || {})
  if (!headers.has("apikey")) headers.set("apikey", apiKey)
  if (!headers.has("Content-Type")) headers.set("Content-Type", "application/json")
  const res = await fetch(url, { ...init, headers })
  const contentType = res.headers.get("content-type") || ""
  const ok = res.ok
  let data: any = null
  try {
    data = contentType.includes("application/json") ? await res.json() : await res.text()
  } catch {
    data = null
  }
  if (!ok) {
    const error = new Error(`Evolution API error ${res.status}`)
    ;(error as any).status = res.status
    ;(error as any).data = data
    throw error
  }
  return data
}
[V0_FILE]typescriptreact:file="app/api/evolution/connect/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { evoFetch } from "../utils"

// Evolution usa GET /instance/connect/{instance} para obter QR/código
    const data = await evoFetch(`/instance/connect/${encodeURIComponent(instance)}`, {
      method: "GET",
    })
    return NextResponse.json({ ok: true, data })
  } catch (e: any) {
    const status = e?.status || 500
    return NextResponse.json({ ok: false, error: e?.data || e?.message }, { status })
  }
}
[V0_FILE]typescriptreact:file="app/api/evolution/state/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { evoFetch } from "../utils"

export async function GET(req: Request) {
  try {
    const { searchParams } = new URL(req.url)
    const instance = (searchParams.get("instance") || "").trim()
    if (!instance) {
      return NextResponse.json({ error: "Parâmetro 'instance' é obrigatório." }, { status: 400 })
    }
    const data = await evoFetch(`/instance/connectionState/${encodeURIComponent(instance)}`, { method: "GET" })
    return NextResponse.json({ ok: true, data })
  } catch (e: any) {
    const status = e?.status || 500
    return NextResponse.json({ ok: false, error: e?.data || e?.message }, { status })
  }
}
[V0_FILE]typescriptreact:file="app/api/evolution/logout/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { evoFetch } from "../utils"

export async function POST(req: Request) {
  try {
    const body = (await req.json()) as { instance?: string }
    const instance = (body.instance || "").trim()
    if (!instance) {
      return NextResponse.json({ error: "Parâmetro 'instance' é obrigatório." }, { status: 400 })
    }
    const data = await evoFetch(`/instance/logout/${encodeURIComponent(instance)}`, {
      method: "DELETE",
    })
    return NextResponse.json({ ok: true, data })
  } catch (e: any) {
    const status = e?.status || 500
    return NextResponse.json({ ok: false, error: e?.data || e?.message }, { status })
  }
}
[V0_FILE]typescriptreact:file="lib/firebase.ts" isQuickEdit="true" isMerged="true"
"use client"

// Evita o erro do SDK no cliente: "__FIREBASE_DEFAULTS__ cannot be accessed on the client."
declare global {
  // eslint-disable-next-line no-var
  var __FIREBASE_DEFAULTS__: unknown | undefined
}
if (typeof window !== "undefined") {
  try {
    if ("__FIREBASE_DEFAULTS__" in window) {
      // @ts-expect-error chave privada do SDK
      delete (window as any).__FIREBASE_DEFAULTS__
    }
  } catch {
    // noop
  }
}

import { initializeApp, getApps, type FirebaseApp } from "firebase/app"
import { getAuth, type Auth } from "firebase/auth"
import { getFirestore, type Firestore } from "firebase/firestore"

let app: FirebaseApp | undefined
let auth: Auth | undefined
let db: Firestore | undefined

export function getFirebaseApp() {
  if (!app) {
    if (!getApps().length) {
      app = initializeApp({
        apiKey: "AIzaSyB8Kv4hasRK3fZk9s2TJiabjYFBw91MdMg",
        authDomain: "inversores-6631f.firebaseapp.com",
        projectId: "inversores-6631f",
        storageBucket: "inversores-6631f.firebasestorage.app",
        messagingSenderId: "320180072804",
        appId: "1:320180072804:web:a52d6bc9d1cc61c7b8ca71",
        measurementId: "G-X7H7KKMX86",
      })
    } else {
      app = getApps()[0]!
    }
  }
  return app!
}

export function getFirebaseAuth() {
  if (!auth) {
    auth = getAuth(getFirebaseApp())
  }
  return auth!
}

export function getFirebaseDb() {
  if (!db) {
    db = getFirestore(getFirebaseApp())
  }
  return db!
}
[V0_FILE]typescriptreact:file="lib/use-current-user.ts" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { onAuthStateChanged, type User } from "firebase/auth"
import { getFirebaseAuth } from "./firebase"

export function useCurrentUser() {
  const [user, setUser] = React.useState<User | null>(null)
  const [loading, setLoading] = React.useState(true)

React.useEffect(() => {
    const auth = getFirebaseAuth()
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u)
      setLoading(false)
    })
    return () => unsub()
  }, [])

return { user, loading }
}
[V0_FILE]typescriptreact:file="components/dashboard-header-actions.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { signOut } from "firebase/auth"
import { getFirebaseAuth } from "@/lib/firebase"
import { useCurrentUser } from "@/lib/use-current-user"
import {
  Bell,
  Command,
  LogOut,
  Settings,
  User2,
  Search,
  LayoutDashboard,
  Users,
  Plug,
  MessageCircle,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Command as KbdCommand,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

export function DashboardHeaderActions() {
  const router = useRouter()
  const [openCmd, setOpenCmd] = React.useState(false)
  const [unread, setUnread] = React.useState(3)
  const { user } = useCurrentUser()
  const display = user?.displayName || user?.email || "Usuário"
  const initials =
    (user?.displayName || user?.email || "U U")
      .split(" ")
      .map((s) => s[0]?.toUpperCase())
      .slice(0, 2)
      .join("") || "U"

React.useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      const isMac = navigator.platform.toUpperCase().includes("MAC")
      if ((isMac ? e.metaKey : e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault()
        setOpenCmd((v) => !v)
      }
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [])

function go(href: string) {
    setOpenCmd(false)
    router.push(href)
  }

return (
    <TooltipProvider delayDuration={0}>
      <div className="ml-auto flex items-center gap-2">
        {/* Campo de busca que abre o Command Palette ao focar */}
        <div className="relative hidden sm:block">
          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Buscar (⌘/Ctrl K)"
            className="w-36 pl-8 md:w-64"
            onFocus={() => setOpenCmd(true)}
            aria-label="Buscar no dashboard"
          />
        </div>

{/* Botão para abrir Command Palette diretamente */}
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="outline"
              size="icon"
              className="hidden sm:inline-flex bg-transparent"
              onClick={() => setOpenCmd(true)}
            >
              <Command className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Command Palette</TooltipContent>
        </Tooltip>

{/* Notificações */}
        <DropdownMenu>
          <Tooltip>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon" className="relative bg-transparent">
                  <Bell className="h-4 w-4" />
                  {unread > 0 && (
                    <span className="absolute -right-1 -top-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-600 px-1 text-[10px] font-medium text-white">
                      {unread}
                    </span>
                  )}
                </Button>
              </DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent>Notificações</TooltipContent>
          </Tooltip>
          <DropdownMenuContent align="end" className="w-72">
            <DropdownMenuLabel>Notificações</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => setUnread(Math.max(0, unread - 1))}>
              Nova integração conectada com sucesso
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setUnread(Math.max(0, unread - 1))}>
              2 clientes adicionados hoje
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setUnread(Math.max(0, unread - 1))}>
              Canal WhatsApp reautenticado
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => setUnread(0)}>Marcar todas como lidas</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

{/* Usuário */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-9 gap-2 pl-1 pr-2">
              <Avatar className="size-7">
                <AvatarFallback className="text-[10px]">{initials}</AvatarFallback>
              </Avatar>
              <span className="hidden text-sm font-medium sm:inline">{display}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={() => go("/dashboard")}>
              <User2 className="mr-2 h-4 w-4" />
              Perfil
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => go("/dashboard/integracoes")}>
              <Settings className="mr-2 h-4 w-4" />
              Configurações
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={async () => {
                try {
                  await signOut(getFirebaseAuth())
                } catch (e) {
                  // ignore
                } finally {
                  go("/")
                }
              }}
            >
              <LogOut className="mr-2 h-4 w-4" />
              Sair
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

{/* Command Palette */}
      <Dialog open={openCmd} onOpenChange={setOpenCmd}>
        <DialogContent className="p-0 shadow-2xl sm:max-w-[640px]">
          <KbdCommand shouldFilter={true}>
            <CommandInput placeholder="Pesquisar páginas, ações, clientes..." />
            <CommandList>
              <CommandEmpty>Nenhum resultado.</CommandEmpty>
              <CommandGroup heading="Navegação">
                <CommandItem onSelect={() => go("/dashboard")}>
                  <LayoutDashboard className="mr-2 h-4 w-4" />
                  <span>Dashboard</span>
                </CommandItem>
                <CommandItem onSelect={() => go("/dashboard/clientes")}>
                  <Users className="mr-2 h-4 w-4" />
                  <span>Clientes</span>
                </CommandItem>
                <CommandItem onSelect={() => go("/dashboard/integracoes")}>
                  <Plug className="mr-2 h-4 w-4" />
                  <span>Integrações</span>
                </CommandItem>
                <CommandItem onSelect={() => go("/dashboard/whatsapp")}>
                  <MessageCircle className="mr-2 h-4 w-4" />
                  <span>WhatsApp</span>
                </CommandItem>
                <CommandItem onSelect={() => go("/inverters")}>
                  <Plug className="mr-2 h-4 w-4" />
                  <span>Exportador de Inversores</span>
                </CommandItem>
              </CommandGroup>
              <CommandSeparator />
              <CommandGroup heading="Ações rápidas">
                <CommandItem onSelect={() => go("/dashboard/clientes")}>Novo cliente</CommandItem>
                <CommandItem onSelect={() => go("/dashboard/integracoes")}>Conectar integração</CommandItem>
                <CommandItem onSelect={() => go("/dashboard/whatsapp")}>Abrir WhatsApp</CommandItem>
              </CommandGroup>
            </CommandList>
          </KbdCommand>
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useMemo, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { useToast } from "@/hooks/use-toast"
import { Eye, EyeOff, Loader2, Lock, LogIn, Mail, Send, User, UserPlus } from "lucide-react"
import Link from "next/link"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle } from "lucide-react"

import { getFirebaseAuth } from "@/lib/firebase"
import {
  browserLocalPersistence,
  browserSessionPersistence,
  createUserWithEmailAndPassword,
  sendPasswordResetEmail,
  setPersistence,
  signInWithEmailAndPassword,
  signOut,
  updateProfile,
} from "firebase/auth"

type AuthMode = "login" | "register" | "forgot"

function mapAuthError(code?: string) {
  switch (code) {
    case "auth/wrong-password":
    case "auth/user-not-found":
    case "auth/invalid-credential":
      return "E-mail ou senha incorretos."
    case "auth/invalid-email":
      return "E-mail inválido."
    case "auth/user-disabled":
      return "Usuário desabilitado."
    case "auth/weak-password":
      return "A senha é muito fraca (mínimo 6 caracteres)."
    case "auth/email-already-in-use":
      return "Este e-mail já está em uso."
    case "auth/too-many-requests":
      return "Muitas tentativas. Tente novamente em instantes."
    default:
      return "Ocorreu um erro. Tente novamente."
  }
}

export default function AuthPage() {
  const router = useRouter()
  const [mode, setMode] = useState<AuthMode>("login")
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

// Login
  const [loginEmail, setLoginEmail] = useState("")
  const [loginPassword, setLoginPassword] = useState("")
  const [remember, setRemember] = useState(true)
  const [showLoginPass, setShowLoginPass] = useState(false)
  const [loginError, setLoginError] = useState<string | null>(null)

// Register
  const [name, setName] = useState("")
  const [regEmail, setRegEmail] = useState("")
  const [regPassword, setRegPassword] = useState("")
  const [regConfirm, setRegConfirm] = useState("")
  const [showRegPass, setShowRegPass] = useState(false)
  const [agree, setAgree] = useState(true)

// Forgot
  const [fpEmail, setFpEmail] = useState("")

async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    setLoginError(null)
    try {
      if (!loginEmail || !loginPassword) throw new Error("Informe e-mail e senha.")
      const auth = getFirebaseAuth()
      await setPersistence(auth, remember ? browserLocalPersistence : browserSessionPersistence)
      await signInWithEmailAndPassword(auth, loginEmail, loginPassword)

toast({
        title: "Login realizado",
        description: `Bem-vindo de volta! ${remember ? "Lembraremos de você neste dispositivo." : ""}`,
      })
      router.push("/dashboard")
    } catch (err: any) {
      const msg = mapAuthError(err?.code)
      setLoginError(msg)
      toast({ title: "Erro no login", description: msg, variant: "destructive" })
    } finally {
      setIsLoading(false)
    }
  }

const passwordScore = useMemo(() => {
    let score = 0
    if (regPassword.length >= 8) score++
    if (/[A-Z]/.test(regPassword)) score++
    if (/[a-z]/.test(regPassword)) score++
    if (/[0-9]/.test(regPassword)) score++
    if (/[^A-Za-z0-9]/.test(regPassword)) score++
    return score
  }, [regPassword])

async function handleRegister(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    try {
      if (!name || !regEmail || !regPassword || !regConfirm) throw new Error("Preencha todos os campos.")
      if (regPassword !== regConfirm) throw new Error("As senhas não conferem.")
      if (!agree) throw new Error("Você precisa aceitar os termos.")

const cred = await createUserWithEmailAndPassword(getFirebaseAuth(), regEmail, regPassword)
      if (cred.user && name.trim()) {
        await updateProfile(cred.user, { displayName: name.trim() })
      }

// Mantém o comportamento anterior: volta para a tela de login
      await signOut(getFirebaseAuth())

toast({
        title: "Cadastro concluído",
        description: "Sua conta foi criada. Faça login para continuar.",
      })
      setMode("login")
      setLoginEmail(regEmail)
    } catch (err: any) {
      const msg = mapAuthError(err?.code) || err?.message
      toast({ title: "Erro no cadastro", description: msg, variant: "destructive" })
    } finally {
      setIsLoading(false)
    }
  }

async function handleForgot(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    try {
      if (!fpEmail) throw new Error("Informe seu e-mail.")
      await sendPasswordResetEmail(getFirebaseAuth(), fpEmail)
      toast({
        title: "E-mail enviado",
        description: "Se o e-mail existir, enviaremos as instruções para redefinição de senha.",
      })
      setMode("login")
      setLoginEmail(fpEmail)
    } catch (err: any) {
      const msg = mapAuthError(err?.code) || err?.message
      toast({ title: "Erro", description: msg, variant: "destructive" })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <main
      className="min-h-screen w-full bg-[radial-gradient(1100px_circle_at_10%_-10%,#d1fae5_0%,transparent_50%),radial-gradient(1000px_circle_at_110%_10%,#a7f3d0_0%,transparent_45%),linear-gradient(to_bottom,#ffffff,#f8fafc)]"
      aria-label="Tela de autenticação"
    >
      <div className="mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center p-6">
        {/* Branding topo */}
        <div className="mb-8 flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-600 text-white shadow-sm">
            <Lock className="h-5 w-5" />
          </div>
          <div className="text-lg font-semibold tracking-tight text-emerald-900">Inversores Dashboard</div>
        </div>

<Card className="w-full max-w-md border-emerald-100 shadow-lg">
          <CardHeader className="space-y-1">
            <CardTitle className="text-2xl font-semibold">
              {mode === "login" && "Entrar"}
              {mode === "register" && "Criar conta"}
              {mode === "forgot" && "Redefinir senha"}
            </CardTitle>
            <CardDescription>
              {mode === "login" && "Acesse sua dashboard de inversores com suas credenciais."}
              {mode === "register" && "Crie sua conta para começar a monitorar suas plantas."}
              {mode === "forgot" && "Informe seu e-mail para receber instruções de redefinição."}
            </CardDescription>
          </CardHeader>

<CardContent className="space-y-6">
            {mode === "login" && (
              <form className="space-y-4" onSubmit={handleLogin}>
                <div className="space-y-2">
                  <Label htmlFor="login-email">E-mail</Label>
                  <div className="relative">
                    <Mail className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="login-email"
                      type="email"
                      inputMode="email"
                      autoComplete="email"
                      placeholder="voce@empresa.com"
                      value={loginEmail}
                      onChange={(e) => {
                        setLoginEmail(e.target.value)
                        if (loginError) setLoginError(null)
                      }}
                      className="pl-9"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="login-password">Senha</Label>
                  <div className="relative">
                    <Lock className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="login-password"
                      type={showLoginPass ? "text" : "password"}
                      autoComplete="current-password"
                      placeholder="••••••••"
                      value={loginPassword}
                      onChange={(e) => {
                        setLoginPassword(e.target.value)
                        if (loginError) setLoginError(null)
                      }}
                      className="pl-9 pr-10"
                      required
                    />
                    <button
                      type="button"
                      className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-500 hover:text-slate-700"
                      onClick={() => setShowLoginPass((v) => !v)}
                      aria-label={showLoginPass ? "Ocultar senha" : "Mostrar senha"}
                    >
                      {showLoginPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                </div>

<div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Checkbox id="remember" checked={remember} onCheckedChange={(v) => setRemember(Boolean(v))} />
                    <Label htmlFor="remember" className="text-sm text-slate-600">
                      Lembrar de mim
                    </Label>
                  </div>
                  <button
                    type="button"
                    className="text-sm font-medium text-emerald-700 hover:underline"
                    onClick={() => setMode("forgot")}
                  >
                    Esqueceu a senha?
                  </button>
                </div>
                {loginError && (
                  <Alert variant="destructive" className="flex items-start gap-2" aria-live="assertive">
                    <AlertCircle className="mt-0.5 h-4 w-4" />
                    <AlertDescription className="text-sm font-medium">{loginError}</AlertDescription>
                  </Alert>
                )}

<Button
                  type="submit"
                  className="w-full bg-emerald-600 hover:bg-emerald-700"
                  disabled={isLoading || !loginEmail || !loginPassword}
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Entrando...
                    </>
                  ) : (
                    <>
                      <LogIn className="mr-2 h-4 w-4" />
                      Entrar
                    </>
                  )}
                </Button>

<div className="text-center text-sm text-slate-600">
                  Não tem conta?{" "}
                  <button
                    type="button"
                    className="font-medium text-emerald-700 hover:underline"
                    onClick={() => setMode("register")}
                  >
                    Criar conta
                  </button>
                </div>
              </form>
            )}

{mode === "register" && (
              <form className="space-y-4" onSubmit={handleRegister}>
                <div className="space-y-2">
                  <Label htmlFor="name">Nome</Label>
                  <div className="relative">
                    <User className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="name"
                      placeholder="Seu nome"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      className="pl-9"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="reg-email">E-mail</Label>
                  <div className="relative">
                    <Mail className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="reg-email"
                      type="email"
                      inputMode="email"
                      autoComplete="email"
                      placeholder="voce@empresa.com"
                      value={regEmail}
                      onChange={(e) => setRegEmail(e.target.value)}
                      className="pl-9"
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="reg-password">Senha</Label>
                  <div className="relative">
                    <Lock className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="reg-password"
                      type={showRegPass ? "text" : "password"}
                      autoComplete="new-password"
                      placeholder="Mín. 6 caracteres"
                      value={regPassword}
                      onChange={(e) => setRegPassword(e.target.value)}
                      className="pl-9 pr-10"
                      required
                    />
                    <button
                      type="button"
                      className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-slate-500 hover:text-slate-700"
                      onClick={() => setShowRegPass((v) => !v)}
                      aria-label={showRegPass ? "Ocultar senha" : "Mostrar senha"}
                    >
                      {showRegPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                    </button>
                  </div>
                  {/* barra simples de força */}
                  <div className="mt-1 h-1.5 w-full overflow-hidden rounded bg-slate-100">
                    <div
                      className={`h-full transition-all ${
                        passwordScore <= 2 ? "bg-red-400" : passwordScore === 3 ? "bg-yellow-400" : "bg-emerald-500"
                      }`}
                      style={{ width: `${(passwordScore / 5) * 100}%` }}
                    />
                  </div>
                  <p className="text-xs text-slate-500">
                    Use letras maiúsculas, minúsculas, números e símbolos para uma senha mais forte.
                  </p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="reg-confirm">Confirmar senha</Label>
                  <Input
                    id="reg-confirm"
                    type="password"
                    autoComplete="new-password"
                    placeholder="Repita sua senha"
                    value={regConfirm}
                    onChange={(e) => setRegConfirm(e.target.value)}
                    required
                  />
                </div>

<div className="rounded-md border bg-slate-50 p-3">
                  <div className="flex items-start gap-3">
                    <Label htmlFor="agree" className="sr-only">
                      Aceitar termos
                    </Label>
                    <Checkbox
                      id="agree"
                      checked={agree}
                      onCheckedChange={(v) => setAgree(Boolean(v))}
                      aria-describedby="consent-hint"
                      className="mt-0.5"
                    />
                    <div className="space-y-1">
                      <p id="consent-hint" className="text-sm text-slate-700 leading-relaxed">
                        Eu li e aceito os{" "}
                        <Link href="#" className="text-emerald-700 underline underline-offset-2 hover:text-emerald-800">
                          Termos de Uso
                        </Link>{" "}
                        e a{" "}
                        <Link href="#" className="text-emerald-700 underline underline-offset-2 hover:text-emerald-800">
                          Política de Privacidade
                        </Link>
                        .
                      </p>
                      <p className="text-xs text-slate-500">
                        Você pode revogar o consentimento a qualquer momento nas configurações da conta.
                      </p>
                    </div>
                  </div>
                </div>

<Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700" disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Criando conta...
                    </>
                  ) : (
                    <>
                      <UserPlus className="mr-2 h-4 w-4" />
                      Criar conta
                    </>
                  )}
                </Button>

<div className="text-center text-sm text-slate-600">
                  Já tem conta?{" "}
                  <button
                    type="button"
                    className="font-medium text-emerald-700 hover:underline"
                    onClick={() => setMode("login")}
                  >
                    Entrar
                  </button>
                </div>
              </form>
            )}

{mode === "forgot" && (
              <form className="space-y-4" onSubmit={handleForgot}>
                <div className="space-y-2">
                  <Label htmlFor="fp-email">E-mail</Label>
                  <div className="relative">
                    <Mail className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                    <Input
                      id="fp-email"
                      type="email"
                      inputMode="email"
                      autoComplete="email"
                      placeholder="voce@empresa.com"
                      value={fpEmail}
                      onChange={(e) => setFpEmail(e.target.value)}
                      className="pl-9"
                      required
                    />
                  </div>
                </div>

<Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700" disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Enviando...
                    </>
                  ) : (
                    <>
                      <Send className="mr-2 h-4 w-4" />
                      Enviar instruções
                    </>
                  )}
                </Button>

<div className="text-center text-sm text-slate-600">
                  Lembrou a senha?{" "}
                  <button
                    type="button"
                    className="font-medium text-emerald-700 hover:underline"
                    onClick={() => setMode("login")}
                  >
                    Voltar ao login
                  </button>
                </div>
              </form>
            )}
          </CardContent>
        </Card>

<p className="mt-6 text-center text-xs text-slate-500">
          © {new Date().getFullYear()} Inversores Dashboard. Todos os direitos reservados.
        </p>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/api/evolution/create/route.ts" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { evoFetch } from "../utils"

export async function POST(req: Request) {
  try {
    const body = (await req.json()) as any
    const instance = String(body.instance || "").trim()
    const type = (body.type || "baileys") as "baileys" | "cloud"
    if (!instance) {
      return NextResponse.json({ error: "Parâmetro 'instance' é obrigatório." }, { status: 400 })
    }

// Define integration a partir do body (prioritário) ou do tipo (fallback).
    const integration: string =
      (body.integration && String(body.integration)) || (type === "baileys" ? "WHATSAPP-BAILEYS" : "WHATSAPP-BAILEYS") // ajuste aqui se usar outro provedor

// Lista de campos opcionais aceitos (você pode expandir conforme necessidade)
    const allowed = [
      "token",
      "number",
      "webhook",
      "webhook_by_events",
      "events",
      "reject_call",
      "msg_call",
      "groups_ignore",
      "always_online",
      "read_messages",
      "read_status",
      "websocket_enabled",
      "websocket_events",
      "rabbitmq_enabled",
      "rabbitmq_events",
      "sqs_enabled",
      "sqs_events",
      "typebot_url",
      "typebot",
      "typebot_expire",
      "typebot_keyword_finish",
      "typebot_delay_message",
      "typebot_unknown_message",
      "typebot_listening_from_me",
      "proxy",
      "chatwoot_account_id",
      "chatwoot_token",
      "chatwoot_url",
      "chatwoot_sign_msg",
      "chatwoot_reopen_conversation",
      "chatwoot_conversation_pending",
    ] as const

const payload: any = {
      instanceName: instance,
      integration,
      qrcode: true,
    }

for (const k of allowed) {
      if (body[k] !== undefined) payload[k] = body[k]
    }

const data = await evoFetch("/instance/create", {
      method: "POST",
      body: JSON.stringify(payload),
    })
    return NextResponse.json({ ok: true, data })
  } catch (e: any) {
    const status = e?.status || 500
    return NextResponse.json({ ok: false, error: e?.data || e?.message }, { status })
  }
}
[V0_FILE]typescriptreact:file="lib/user-settings.ts" isMerged="true"
"use client"

import { getFirebaseDb } from "@/lib/firebase"
import { doc, getDoc, setDoc } from "firebase/firestore"

export type InstanceType = "baileys" | "cloud"

export type WhatsappSettings = {
  instance: string
  type?: InstanceType
  updatedAt?: number
}

/**
 * Carrega as configurações de WhatsApp salvas para um usuário.
 * Armazena em: users/{uid}/settings/whatsapp
 */
export async function loadWhatsappSettings(uid: string): Promise<WhatsappSettings | null> {
  if (!uid) return null
  const db = getFirebaseDb()
  const ref = doc(db, "users", uid, "settings", "whatsapp")
  const snap = await getDoc(ref)
  if (!snap.exists()) return null

const data = snap.data() as Partial<WhatsappSettings> | undefined
  if (!data) return null

const instance = typeof data.instance === "string" ? data.instance : ""
  const type = (data.type as InstanceType) || "baileys"
  const updatedAt = typeof data.updatedAt === "number" ? data.updatedAt : undefined

if (!instance) return null
  return { instance, type, updatedAt }
}

/**
 * Salva as configurações de WhatsApp do usuário.
 * Armazena em: users/{uid}/settings/whatsapp (merge)
 */
export async function saveWhatsappSettings(uid: string, settings: WhatsappSettings): Promise<void> {
  if (!uid || !settings?.instance?.trim()) return
  const db = getFirebaseDb()
  const ref = doc(db, "users", uid, "settings", "whatsapp")
  await setDoc(
    ref,
    {
      instance: settings.instance.trim(),
      type: settings.type || "baileys",
      updatedAt: Date.now(),
    },
    { merge: true },
  )
}
[V0_FILE]typescript:file="app/api/solarman/stations/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { MOCK_STATIONS } from "@/lib/mock-data"

export async function POST(request: NextRequest) {
  try {
    await new Promise((resolve) => setTimeout(resolve, 500))

console.log(`Found ${MOCK_STATIONS.length} mock stations`)

return NextResponse.json({
      success: true,
      stations: MOCK_STATIONS.map((station: any) => ({
        id: station.id,
        name: station.name,
        capacity: station.capacity,
        location: station.location,
        status: station.status,
        createdAt: station.createdAt,
        totalGeneration: station.totalGeneration,
        todayGeneration: station.todayGeneration,
        currentPower: station.currentPower,
      })),
    })
  } catch (error) {
    console.error("Mock stations error:", error)
    return NextResponse.json({ error: "Erro ao buscar estações" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/solarman/devices/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createHash } from "crypto"
import { MOCK_INVERTERS } from "@/lib/mock-data"

const SOLARMAN_BASE_URL = process.env.SOLARMAN_BASE_URL || "https://globalapi.solarmanpv.com"
const SOLARMAN_APP_ID = process.env.SOLARMAN_APP_ID
const SOLARMAN_APP_SECRET = process.env.SOLARMAN_APP_SECRET

function sha256(text: string): string {
  return createHash("sha256").update(text).digest("hex")
}

async function getToken(email: string, password: string, orgId?: string) {
  const body: any = {
    appSecret: SOLARMAN_APP_SECRET,
    email,
    password: sha256(password),
  }

if (orgId) {
    body.orgId = orgId
  }

const response = await fetch(`${SOLARMAN_BASE_URL}/account/v1.0/token?appId=${SOLARMAN_APP_ID}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  })

if (!response.ok) {
    throw new Error("Failed to get token")
  }

return await response.json()
}

export async function POST(request: NextRequest) {
  try {
    const { stationId } = await request.json()

if (!stationId) {
      return NextResponse.json({ error: "stationId é obrigatório" }, { status: 400 })
    }

await new Promise((resolve) => setTimeout(resolve, 300))

const stationInverters = MOCK_INVERTERS.filter((inverter) => inverter.stationId === stationId)

console.log(`Found ${stationInverters.length} mock inverters for station ${stationId}`)

return NextResponse.json({
      success: true,
      devices: stationInverters.map((device: any) => ({
        id: device.id,
        sn: device.sn,
        type: device.type,
        model: device.model,
        status: device.status,
        capacity: device.capacity,
        createdAt: device.syncedAt,
      })),
    })
  } catch (error) {
    console.error("Mock devices error:", error)
    return NextResponse.json({ error: "Erro ao buscar dispositivos" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="lib/solarman-integration.ts" isMerged="true"
"use client"

export type SolarmanStation = {
  id: string
  name: string
  capacity?: number
  location?: string
  status?: string
  createdAt?: string
  totalGeneration?: number
  todayGeneration?: number
  currentPower?: number
}

export type SolarmanDevice = {
  id: string
  sn: string
  type: string
  model?: string
  status?: string
  capacity?: number
  createdAt?: string
}

export type SolarmanDataPoint = {
  key: string
  originalKey: string
  value: any
  unit: string
  displayName: string
}

export type SolarmanCurrentData = {
  deviceId: string
  deviceSn: string
  timestamp: string
  totalPoints: number
  categories: {
    dc: SolarmanDataPoint[]
    ac: SolarmanDataPoint[]
    energy: SolarmanDataPoint[]
    battery: SolarmanDataPoint[]
    temperature: SolarmanDataPoint[]
    status: SolarmanDataPoint[]
    other: SolarmanDataPoint[]
  }
  allPoints: SolarmanDataPoint[]
}

export class SolarmanIntegration {
  private email: string
  private password: string
  private orgId?: string

constructor(email: string, password: string, orgId?: string) {
    this.email = email
    this.password = password
    this.orgId = orgId
  }

async authenticate() {
    const response = await fetch("/api/solarman/auth", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: this.email,
        password: this.password,
      }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.error || "Falha na autenticação")
    }

const data = await response.json()
    if (data.orgId) {
      this.orgId = data.orgId
    }

return data
  }

async getStations(): Promise<SolarmanStation[]> {
    const response = await fetch("/api/solarman/stations", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: this.email,
        password: this.password,
        orgId: this.orgId,
      }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.error || "Falha ao buscar estações")
    }

const data = await response.json()
    return data.stations
  }

async getDevices(stationId: string): Promise<SolarmanDevice[]> {
    const response = await fetch("/api/solarman/devices", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: this.email,
        password: this.password,
        orgId: this.orgId,
        stationId,
      }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.error || "Falha ao buscar dispositivos")
    }

const data = await response.json()
    return data.devices
  }

async getCurrentData(deviceId: string, deviceSn: string): Promise<SolarmanCurrentData> {
    const response = await fetch("/api/solarman/current-data", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: this.email,
        password: this.password,
        orgId: this.orgId,
        deviceId,
        deviceSn,
      }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.error || "Falha ao buscar dados atuais")
    }

return await response.json()
  }
}
[V0_FILE]png:file="public/generic-service-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-service-logo-9F66hB6GPiuhdtGpgU51sZACHz3lBr.png" isMerged="true"
[V0_FILE]typescriptreact:file="lib/integrations-db.ts" isMerged="true"
"use client"

import {
  doc,
  setDoc,
  deleteDoc,
  onSnapshot,
  serverTimestamp,
  collection,
  query,
  type Unsubscribe,
} from "firebase/firestore"
import { getFirebaseDb } from "@/lib/firebase"

export type IntegrationRecord = {
  providerId: string
  providerName: string
  email?: string | null
  linkedAt?: any
  updatedAt?: any
  isActive?: boolean
  lastSync?: any
  stationsCount?: number
  invertersCount?: number
  syncError?: string | null
  id?: string
}

/**
 * Observa em tempo real as integrações do usuário.
 */
export function listenUserIntegrations(uid: string, cb: (items: IntegrationRecord[]) => void): Unsubscribe {
  const db = getFirebaseDb()
  const colRef = collection(db, "users", uid, "integrations")
  const q = query(colRef)
  const unsubscribe = onSnapshot(q, (snap) => {
    const items = snap.docs.map((d) => {
      const data = d.data() as Partial<IntegrationRecord>
      const providerId = data.providerId ?? d.id
      return {
        providerId,
        providerName: data.providerName ?? providerId,
        email: data.email ?? null,
        linkedAt: (data as any).linkedAt,
        updatedAt: (data as any).updatedAt,
        isActive: data.isActive ?? false,
        lastSync: (data as any).lastSync,
        stationsCount: data.stationsCount ?? 0,
        invertersCount: data.invertersCount ?? 0,
        syncError: data.syncError ?? null,
        id: d.id,
      } as IntegrationRecord
    })
    cb(items)
  })
  return unsubscribe
}

/**
 * Cria/atualiza a integração do usuário para um provider.
 */
export async function upsertIntegrationForUser(
  uid: string,
  input: {
    providerId: string
    providerName: string
    email?: string
    isActive?: boolean
    stationsCount?: number
    invertersCount?: number
    syncError?: string | null
  },
) {
  console.log("upsertIntegrationForUser called with:", { uid, input })

if (!uid) throw new Error("Missing uid")
  if (!input?.providerId) throw new Error("Missing providerId")

try {
    const db = getFirebaseDb()
    const ref = doc(db, "users", uid, "integrations", input.providerId)

const payload = {
      providerId: input.providerId,
      providerName: input.providerName,
      email: input.email ?? null,
      isActive: input.isActive ?? false,
      stationsCount: input.stationsCount ?? 0,
      invertersCount: input.invertersCount ?? 0,
      syncError: input.syncError ?? null,
      linkedAt: serverTimestamp(),
      updatedAt: serverTimestamp(),
    }

console.log("Saving payload:", payload)
    await setDoc(ref, payload)
    console.log("Document saved successfully")
  } catch (error) {
    console.error("Error in upsertIntegrationForUser:", error)
    throw error
  }
}

/**
 * Remove a integração de um provider para o usuário.
 */
export async function removeIntegrationForUser(uid: string, providerId: string) {
  console.log("removeIntegrationForUser called with:", { uid, providerId })

if (!uid) throw new Error("Missing uid")
  if (!providerId) throw new Error("Missing providerId")

try {
    const db = getFirebaseDb()
    const ref = doc(db, "users", uid, "integrations", providerId)
    await deleteDoc(ref)
    console.log("Document deleted successfully")
  } catch (error) {
    console.error("Error in removeIntegrationForUser:", error)
    throw error
  }
}

/**
 * Atualiza apenas os dados de sincronização da integração
 */
export async function updateIntegrationSyncData(
  uid: string,
  providerId: string,
  syncData: {
    lastSync?: any
    stationsCount?: number
    invertersCount?: number
    syncError?: string | null
  },
) {
  const db = getFirebaseDb()
  const ref = doc(db, "users", uid, "integrations", providerId)

await setDoc(
    ref,
    {
      ...syncData,
      lastSync: syncData.lastSync || serverTimestamp(),
      updatedAt: serverTimestamp(),
    },
    { merge: true },
  )
}
[V0_FILE]typescriptreact:file="lib/solarman-sync.ts" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import {
  doc,
  setDoc,
  collection,
  writeBatch,
  serverTimestamp,
  onSnapshot,
  query,
  type Unsubscribe,
} from "firebase/firestore"
import { getFirebaseDb } from "@/lib/firebase"

export type SolarmanInverter = {
  id: string
  sn: string
  stationId: string
  stationName: string
  type: string
  model?: string
  status?: string
  capacity?: number
  syncedAt?: any
}

/**
 * Remove campos undefined de um objeto para evitar erros no Firestore
 */
function cleanUndefinedFields(obj: any): any {
  const cleaned: any = {}
  for (const [key, value] of Object.entries(obj)) {
    if (value !== undefined) {
      cleaned[key] = value
    }
  }
  return cleaned
}

/**
 * Salva as plantas da Solarman no Firestore com callback de progresso
 */
export async function saveSolarmanStations(
  uid: string,
  stations: any[],
  onProgress?: (current: number, total: number) => void,
) {
  const db = getFirebaseDb()
  const batchSize = 50 // Process in smaller batches for better performance

for (let i = 0; i < stations.length; i += batchSize) {
    const batch = writeBatch(db)
    const batchStations = stations.slice(i, i + batchSize)

for (const station of batchStations) {
      const stationData: SolarmanStation = {
        id: String(station.id || station.stationId),
        name: station.name || station.stationName || `Estação ${station.id}`,
        capacity: station.capacity,
        location: station.location || station.locationAddress || station.address,
        status: station.status,
        createdAt: station.createdAt || station.createdDate || station.createTime,
        totalGeneration: station.totalGeneration,
        todayGeneration: station.todayGeneration,
        currentPower: station.currentPower,
        syncedAt: serverTimestamp(),
      }

const cleanedData = cleanUndefinedFields(stationData)
      const ref = doc(db, "users", uid, "solarman_stations", cleanedData.id)
      batch.set(ref, cleanedData, { merge: true })
    }

await batch.commit()

const processed = Math.min(i + batchSize, stations.length)
    onProgress?.(processed, stations.length)
    console.log(`Saved ${processed}/${stations.length} Solarman stations`)
  }
}

/**
 * Salva os inversores da Solarman no Firestore com callback de progresso
 */
export async function saveSolarmanInverters(
  uid: string,
  inverters: any[],
  onProgress?: (current: number, total: number) => void,
) {
  const db = getFirebaseDb()
  const batchSize = 50 // Process in smaller batches for better performance

const validInverters = inverters.filter((inverter) => {
    const hasValidSn = inverter.sn || inverter.deviceSn
    if (!hasValidSn) {
      console.warn(`Skipping inverter ${inverter.id} - no valid serial number`)
    }
    return hasValidSn
  })

console.log(`Processing ${validInverters.length} valid inverters out of ${inverters.length} total`)

for (let i = 0; i < validInverters.length; i += batchSize) {
    const batch = writeBatch(db)
    const batchInverters = validInverters.slice(i, i + batchSize)

for (const inverter of batchInverters) {
      const inverterData: SolarmanInverter = {
        id: String(inverter.id || inverter.deviceId),
        sn: inverter.sn || inverter.deviceSn,
        stationId: String(inverter.stationId),
        stationName: inverter.stationName || `Estação ${inverter.stationId}`,
        type: inverter.type || inverter.deviceType || "INVERTER",
        model: inverter.model || inverter.deviceModel,
        status: inverter.status,
        capacity: inverter.capacity,
        syncedAt: serverTimestamp(),
      }

const cleanedData = cleanUndefinedFields(inverterData)
      const ref = doc(db, "users", uid, "solarman_inverters", cleanedData.id)
      batch.set(ref, cleanedData, { merge: true })
    }

await batch.commit()

const processed = Math.min(i + batchSize, validInverters.length)
    onProgress?.(processed, validInverters.length)
    console.log(`Saved ${processed}/${validInverters.length} Solarman inverters`)
  }
}

/**
 * Observa as plantas da Solarman em tempo real
 */
export function listenSolarmanStations(uid: string, cb: (stations: SolarmanStation[]) => void): Unsubscribe {
  const db = getFirebaseDb()
  const colRef = collection(db, "users", uid, "solarman_stations")
  const q = query(colRef)

return onSnapshot(q, (snap) => {
    const stations = snap.docs.map((d) => ({
      ...d.data(),
      id: d.id,
    })) as SolarmanStation[]
    cb(stations)
  })
}

/**
 * Observa os inversores da Solarman em tempo real
 */
export function listenSolarmanInverters(uid: string, cb: (inverters: SolarmanInverter[]) => void): Unsubscribe {
  const db = getFirebaseDb()
  const colRef = collection(db, "users", uid, "solarman_inverters")
  const q = query(colRef)

return onSnapshot(q, (snap) => {
    const inverters = snap.docs.map((d) => ({
      ...d.data(),
      id: d.id,
    })) as SolarmanInverter[]
    cb(inverters)
  })
}

/**
 * Atualiza o status de sincronização da integração
 */
export async function updateIntegrationSyncStatus(
  uid: string,
  providerId: string,
  syncData: {
    lastSync?: any
    stationsCount?: number
    invertersCount?: number
    syncError?: string | null
  },
) {
  const db = getFirebaseDb()
  const ref = doc(db, "users", uid, "integrations", providerId)

await setDoc(
    ref,
    {
      ...syncData,
      lastSync: syncData.lastSync || serverTimestamp(),
      updatedAt: serverTimestamp(),
    },
    { merge: true },
  )
}
[V0_FILE]typescriptreact:file="lib/solarman-token-cache.ts" isMerged="true"
type TokenCache = {
  token: string
  tokenType: string
  expiresAt: number
  orgId?: string
}

const tokenCache = new Map<string, TokenCache>()

export function getCachedToken(email: string, orgId?: string): TokenCache | null {
  const key = `${email}:${orgId || "smart"}`
  const cached = tokenCache.get(key)

if (!cached) return null

// Check if token expires in next 5 minutes
  if (Date.now() >= cached.expiresAt - 5 * 60 * 1000) {
    tokenCache.delete(key)
    return null
  }

return cached
}

export function setCachedToken(email: string, token: string, tokenType: string, expiresIn: number, orgId?: string) {
  const key = `${email}:${orgId || "smart"}`
  const expiresAt = Date.now() + expiresIn * 1000

tokenCache.set(key, {
    token,
    tokenType,
    expiresAt,
    orgId,
  })
}

export function clearTokenCache(email?: string) {
  if (email) {
    const smartKey = `${email}:smart`
    const businessKey = `${email}:business`
    tokenCache.delete(smartKey)
    tokenCache.delete(businessKey)
  } else {
    tokenCache.clear()
  }
}
[V0_FILE]typescriptreact:file="app/api/solarman/sync/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createHash } from "crypto"
import { SolarmanClient } from "@/lib/solarman-client"

function sha256(text: string): string {
  return createHash("sha256").update(text).digest("hex")
}

async function getToken(email: string, password: string, orgId?: string) {
  const body: any = {
    appSecret: SOLARMAN_APP_SECRET,
    email,
    password: sha256(password),
  }

if (orgId) {
    body.orgId = orgId
  }

if (!response.ok) {
    throw new Error("Failed to get token")
  }

return await response.json()
}

export async function POST(request: NextRequest) {
  try {
    const { email, password, orgId } = await request.json()

if (!email || !password) {
      return NextResponse.json({ error: "Email e senha são obrigatórios" }, { status: 400 })
    }

console.log("Starting Solarman sync for:", email)

const client = new SolarmanClient(email, password)

// Authenticate
    const authResult = await client.authenticate()

// Get all stations with progress
    const allStations = await client.getAllStations(authResult.token, authResult.tokenType, (current, total) => {
      console.log(`Fetching stations: ${current}/${total}`)
    })

console.log(`Found ${allStations.length} stations`)

// Get all inverters with parallel processing
    const allInverters = await client.getAllInverters(
      allStations,
      authResult.token,
      authResult.tokenType,
      (current, total) => {
        console.log(`Processing stations for inverters: ${current}/${total}`)
      },
    )

console.log(`Found ${allInverters.length} inverters across all stations`)

// Normalize station data
    const normalizedStations = allStations.map((station: any) => ({
      id: String(station.id || station.stationId),
      name: station.stationName || station.name || `Estação ${station.id}`,
      capacity: station.capacity,
      location: station.locationAddress || station.address,
      status: station.status,
      createdAt: station.createdDate || station.createTime,
      totalGeneration: station.totalGeneration,
      todayGeneration: station.todayGeneration,
      currentPower: station.currentPower,
    }))

return NextResponse.json({
      success: true,
      stations: normalizedStations,
      inverters: allInverters,
      summary: {
        stationsCount: allStations.length,
        invertersCount: allInverters.length,
        accountType: authResult.accountType,
        syncedAt: new Date().toISOString(),
      },
    })
  } catch (error) {
    console.error("Solarman sync error:", error)
    return NextResponse.json(
      {
        error: "Erro ao sincronizar dados da Solarman",
        details: error instanceof Error ? error.message : "Erro desconhecido",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/solarman/auth/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createHash } from "crypto"
import { SolarmanClient } from "@/lib/solarman-client"

function sha256(text: string): string {
  return createHash("sha256").update(text).digest("hex")
}

export async function POST(request: NextRequest) {
  try {
    const { email, password } = await request.json()

if (!email || !password) {
      return NextResponse.json({ error: "Email e senha são obrigatórios" }, { status: 400 })
    }

if (!SOLARMAN_APP_ID || !SOLARMAN_APP_SECRET) {
      return NextResponse.json({ error: "Configuração da API Solarman não encontrada" }, { status: 500 })
    }

console.log("Authenticating with Solarman:", { email, appId: SOLARMAN_APP_ID })

const client = new SolarmanClient(email, password)
    const result = await client.authenticate()

return NextResponse.json(result)
  } catch (error) {
    console.error("Solarman auth error:", error)
    return NextResponse.json(
      {
        error: error instanceof Error ? error.message : "Erro interno do servidor",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/plantas/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/inversores/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/dashboard/alertas/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  Search,
  AlertTriangle,
  AlertCircle,
  CheckCircle2,
  XCircle,
  Bell,
  BellOff,
  Clock,
  Zap,
  Thermometer,
  Battery,
  Activity,
  TrendingDown,
  Wifi,
  WifiOff,
  Play,
  Pause,
} from "lucide-react"
import { useCurrentUser } from "@/lib/use-current-user"
import { useToast } from "@/hooks/use-toast"

type SystemAlert = {
  id: string
  type: AlertType
  category: AlertCategory
  title: string
  description: string
  deviceId?: string
  deviceName?: string
  stationId?: string
  stationName?: string
  timestamp: Date
  acknowledged: boolean
  resolved: boolean
  value?: number
  unit?: string
  threshold?: number
}

const mockAlerts: SystemAlert[] = [
  {
    id: "alert-001",
    type: "critical",
    category: "offline",
    title: "Inversor Offline",
    description: "Inversor SUN2000-60KTL-M0 parou de responder e não está gerando energia.",
    deviceId: "inv-001",
    deviceName: "SUN2000-60KTL-M0",
    stationId: "plant-001",
    stationName: "Usina Solar Goiânia",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
    acknowledged: false,
    resolved: false,
  },
  {
    id: "alert-002",
    type: "warning",
    category: "temperature",
    title: "Temperatura Elevada",
    description: "Temperatura do inversor acima do limite recomendado.",
    deviceId: "inv-002",
    deviceName: "SMA-50000TL",
    stationId: "plant-002",
    stationName: "Fazenda Solar Brasília",
    timestamp: new Date(Date.now() - 45 * 60 * 1000), // 45 minutes ago
    acknowledged: true,
    resolved: false,
    value: 68,
    unit: "°C",
    threshold: 65,
  },
  {
    id: "alert-003",
    type: "warning",
    category: "performance",
    title: "Baixa Geração",
    description: "Planta gerando 40% abaixo da capacidade esperada para as condições climáticas.",
    stationId: "plant-003",
    stationName: "Parque Solar Anápolis",
    timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago
    acknowledged: false,
    resolved: false,
    value: 180,
    unit: "kW",
    threshold: 300,
  },
  {
    id: "alert-004",
    type: "info",
    category: "maintenance",
    title: "Manutenção Preventiva Agendada",
    description: "Manutenção preventiva programada para os inversores da String 3.",
    deviceId: "inv-003",
    deviceName: "ABB-PVS980-58",
    stationId: "plant-001",
    stationName: "Usina Solar Goiânia",
    timestamp: new Date(Date.now() - 15 * 60 * 1000), // 15 minutes ago
    acknowledged: true,
    resolved: false,
  },
  {
    id: "alert-005",
    type: "critical",
    category: "communication",
    title: "Falha de Comunicação",
    description: "Perda total de comunicação com o sistema de monitoramento da planta.",
    stationId: "plant-004",
    stationName: "Solar Park Aparecida",
    timestamp: new Date(Date.now() - 10 * 60 * 1000), // 10 minutes ago
    acknowledged: false,
    resolved: false,
  },
  {
    id: "alert-006",
    type: "warning",
    category: "battery",
    title: "Bateria com Baixa Carga",
    description: "Sistema de armazenamento com carga abaixo de 20%.",
    deviceId: "bat-001",
    deviceName: "Tesla Powerpack",
    stationId: "plant-002",
    stationName: "Fazenda Solar Brasília",
    timestamp: new Date(Date.now() - 5 * 60 * 1000), // 5 minutes ago
    acknowledged: false,
    resolved: false,
    value: 18,
    unit: "%",
    threshold: 20,
  },
  {
    id: "alert-007",
    type: "resolved",
    category: "performance",
    title: "Sombreamento Resolvido",
    description: "Problema de sombreamento nos painéis foi corrigido.",
    stationId: "plant-003",
    stationName: "Parque Solar Anápolis",
    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
    acknowledged: true,
    resolved: true,
  },
  {
    id: "alert-008",
    type: "info",
    category: "maintenance",
    title: "Limpeza de Painéis Concluída",
    description: "Limpeza programada dos painéis solares foi finalizada com sucesso.",
    stationId: "plant-001",
    stationName: "Usina Solar Goiânia",
    timestamp: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
    acknowledged: true,
    resolved: false,
  },
  {
    id: "alert-009",
    type: "warning",
    category: "performance",
    title: "Eficiência Reduzida",
    description: "Inversor apresentando eficiência 15% abaixo do esperado.",
    deviceId: "inv-004",
    deviceName: "Fronius Symo 24.0-3",
    stationId: "plant-004",
    stationName: "Solar Park Aparecida",
    timestamp: new Date(Date.now() - 90 * 60 * 1000), // 1.5 hours ago
    acknowledged: false,
    resolved: false,
    value: 85,
    unit: "%",
    threshold: 95,
  },
  {
    id: "alert-010",
    type: "critical",
    category: "offline",
    title: "String Desconectada",
    description: "String de painéis solares desconectada do inversor principal.",
    deviceId: "str-001",
    deviceName: "String A1-A10",
    stationId: "plant-002",
    stationName: "Fazenda Solar Brasília",
    timestamp: new Date(Date.now() - 20 * 60 * 1000), // 20 minutes ago
    acknowledged: false,
    resolved: false,
  },
]

function getAlertIcon(type: AlertType) {
  switch (type) {
    case "critical":
      return XCircle
    case "warning":
      return AlertTriangle
    case "info":
      return AlertCircle
    case "resolved":
      return CheckCircle2
    default:
      return AlertCircle
  }
}

function getAlertColor(type: AlertType) {
  switch (type) {
    case "critical":
      return "text-red-600 bg-red-50 border-red-200"
    case "warning":
      return "text-amber-600 bg-amber-50 border-amber-200"
    case "info":
      return "text-blue-600 bg-blue-50 border-blue-200"
    case "resolved":
      return "text-emerald-600 bg-emerald-50 border-emerald-200"
    default:
      return "text-gray-600 bg-gray-50 border-gray-200"
  }
}

function getCategoryIcon(category: AlertCategory) {
  switch (category) {
    case "offline":
      return WifiOff
    case "performance":
      return TrendingDown
    case "temperature":
      return Thermometer
    case "battery":
      return Battery
    case "communication":
      return Wifi
    case "maintenance":
      return Activity
    default:
      return AlertCircle
  }
}

export default function AlertasPage() {
  const { user } = useCurrentUser()
  const { toast } = useToast()
  const [alerts, setAlerts] = React.useState<SystemAlert[]>(mockAlerts)
  const [loading, setLoading] = React.useState(false)
  const [filter, setFilter] = React.useState("")
  const [selectedType, setSelectedType] = React.useState<AlertType | "all">("all")
  const [selectedCategory, setSelectedCategory] = React.useState<AlertCategory | "all">("all")
  const [showResolved, setShowResolved] = React.useState(false)

const [autoRefresh, setAutoRefresh] = React.useState(false)
  const [refreshInterval, setRefreshInterval] = React.useState(60) // seconds
  const [lastUpdate, setLastUpdate] = React.useState<Date>(new Date())

React.useEffect(() => {
    let intervalRef: NodeJS.Timeout | null = null

if (autoRefresh) {
      intervalRef = setInterval(() => {
        setLastUpdate(new Date())
        // Simulate some alert changes
        setAlerts((prev) =>
          prev.map((alert) => ({
            ...alert,
            // Randomly acknowledge some unacknowledged alerts
            acknowledged: alert.acknowledged || Math.random() > 0.95,
          })),
        )
      }, refreshInterval * 1000)
    }

return () => {
      if (intervalRef) clearInterval(intervalRef)
    }
  }, [autoRefresh, refreshInterval])

// Filter alerts
  const filteredAlerts = React.useMemo(() => {
    let filtered = alerts

// Filter by resolved status
    if (!showResolved) {
      filtered = filtered.filter((alert) => !alert.resolved)
    }

// Filter by type
    if (selectedType !== "all") {
      filtered = filtered.filter((alert) => alert.type === selectedType)
    }

// Filter by category
    if (selectedCategory !== "all") {
      filtered = filtered.filter((alert) => alert.category === selectedCategory)
    }

// Filter by search
    if (filter.trim()) {
      const query = filter.toLowerCase()
      filtered = filtered.filter(
        (alert) =>
          alert.title.toLowerCase().includes(query) ||
          alert.description.toLowerCase().includes(query) ||
          alert.deviceName?.toLowerCase().includes(query) ||
          alert.stationName?.toLowerCase().includes(query),
      )
    }

return filtered
  }, [alerts, showResolved, selectedType, selectedCategory, filter])

// Calculate summary stats
  const summary = React.useMemo(() => {
    const activeAlerts = alerts.filter((a) => !a.resolved)
    return {
      total: activeAlerts.length,
      critical: activeAlerts.filter((a) => a.type === "critical").length,
      warning: activeAlerts.filter((a) => a.type === "warning").length,
      info: activeAlerts.filter((a) => a.type === "info").length,
      acknowledged: activeAlerts.filter((a) => a.acknowledged).length,
    }
  }, [alerts])

const toggleAutoRefresh = () => {
    setAutoRefresh(!autoRefresh)
    if (!autoRefresh) {
      setLastUpdate(new Date())
    }
  }

const handleAcknowledge = (alertId: string) => {
    setAlerts((prev) => prev.map((alert) => (alert.id === alertId ? { ...alert, acknowledged: true } : alert)))
    toast({
      title: "Alerta reconhecido",
      description: "O alerta foi marcado como reconhecido.",
    })
  }

const handleResolve = (alertId: string) => {
    setAlerts((prev) =>
      prev.map((alert) => (alert.id === alertId ? { ...alert, resolved: true, acknowledged: true } : alert)),
    )
    toast({
      title: "Alerta resolvido",
      description: "O alerta foi marcado como resolvido.",
    })
  }

if (loading) {
    return (
      <main className="space-y-6">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Bell className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Alertas e Notificações</h2>
            <p className="text-sm text-muted-foreground">Carregando alertas...</p>
          </div>
        </div>
      </main>
    )
  }

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Bell className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Alertas e Notificações</h2>
            <p className="text-sm text-muted-foreground">
              {filteredAlerts.length} alerta{filteredAlerts.length !== 1 ? "s" : ""} encontrado
              {filteredAlerts.length !== 1 ? "s" : ""}
              {lastUpdate && (
                <span className="ml-2">• Última atualização: {lastUpdate.toLocaleTimeString("pt-BR")}</span>
              )}
            </p>
          </div>
        </div>

<div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <Switch id="auto-refresh-alerts" checked={autoRefresh} onCheckedChange={toggleAutoRefresh} />
            <Label htmlFor="auto-refresh-alerts" className="text-sm">
              Auto-refresh
            </Label>
            {autoRefresh && <Play className="h-4 w-4 text-emerald-600" />}
            {!autoRefresh && <Pause className="h-4 w-4 text-muted-foreground" />}
          </div>

<div className="flex items-center gap-2">
            <Label htmlFor="interval-alerts" className="text-sm text-muted-foreground">
              Intervalo:
            </Label>
            <select
              id="interval-alerts"
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(Number(e.target.value))}
              className="text-sm border rounded px-2 py-1"
              disabled={autoRefresh}
            >
              <option value={30}>30s</option>
              <option value={60}>1min</option>
              <option value={300}>5min</option>
              <option value={600}>10min</option>
            </select>
          </div>

<Button
            variant="outline"
            onClick={() => setShowResolved(!showResolved)}
            className={showResolved ? "bg-muted" : ""}
          >
            {showResolved ? <BellOff className="mr-2 h-4 w-4" /> : <Bell className="mr-2 h-4 w-4" />}
            {showResolved ? "Ocultar Resolvidos" : "Mostrar Resolvidos"}
          </Button>
        </div>
      </div>

{/* Summary Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Total Ativo</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{summary.total}</div>
            </div>
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <Bell className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Críticos</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-red-600">{summary.critical}</div>
            </div>
            <div className="rounded-md bg-red-50 p-2 text-red-600">
              <XCircle className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Avisos</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-amber-600">{summary.warning}</div>
            </div>
            <div className="rounded-md bg-amber-50 p-2 text-amber-600">
              <AlertTriangle className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Informativos</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-blue-600">{summary.info}</div>
            </div>
            <div className="rounded-md bg-blue-50 p-2 text-blue-600">
              <AlertCircle className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Reconhecidos</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-emerald-600">{summary.acknowledged}</div>
            </div>
            <div className="rounded-md bg-emerald-50 p-2 text-emerald-600">
              <CheckCircle2 className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Filters */}
      <div className="flex flex-wrap items-center gap-4">
        <div className="flex items-center gap-2">
          <Search className="h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar alertas..."
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            className="max-w-sm"
          />
        </div>

<div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Tipo:</span>
          <div className="flex gap-1">
            {(["all", "critical", "warning", "info", "resolved"] as const).map((type) => (
              <Button
                key={type}
                variant={selectedType === type ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedType(type)}
              >
                {type === "all"
                  ? "Todos"
                  : type === "critical"
                    ? "Críticos"
                    : type === "warning"
                      ? "Avisos"
                      : type === "info"
                        ? "Info"
                        : "Resolvidos"}
              </Button>
            ))}
          </div>
        </div>

<div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">Categoria:</span>
          <div className="flex gap-1">
            {(["all", "offline", "performance", "temperature", "battery", "communication", "maintenance"] as const).map(
              (category) => (
                <Button
                  key={category}
                  variant={selectedCategory === category ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedCategory(category)}
                >
                  {category === "all"
                    ? "Todas"
                    : category === "offline"
                      ? "Offline"
                      : category === "performance"
                        ? "Performance"
                        : category === "temperature"
                          ? "Temperatura"
                          : category === "battery"
                            ? "Bateria"
                            : category === "communication"
                              ? "Comunicação"
                              : "Manutenção"}
                </Button>
              ),
            )}
          </div>
        </div>
      </div>

{/* Alerts List */}
      {filteredAlerts.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <CheckCircle2 className="h-12 w-12 text-emerald-500 mb-4" />
            <h3 className="text-lg font-semibold mb-2">Nenhum alerta encontrado</h3>
            <p className="text-sm text-muted-foreground text-center">
              {alerts.length === 0
                ? "Não há alertas no momento. Seus sistemas estão funcionando normalmente."
                : "Nenhum alerta corresponde aos filtros selecionados."}
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {filteredAlerts.map((alert) => {
            const AlertIcon = getAlertIcon(alert.type)
            const CategoryIcon = getCategoryIcon(alert.category)
            const alertColor = getAlertColor(alert.type)

return (
              <Alert key={alert.id} className={`${alertColor} ${alert.acknowledged ? "opacity-75" : ""}`}>
                <div className="flex items-start gap-3">
                  <AlertIcon className="h-5 w-5 mt-0.5" />
                  <div className="flex-1 space-y-2">
                    <div className="flex items-start justify-between">
                      <div>
                        <AlertTitle className="flex items-center gap-2">
                          {alert.title}
                          <CategoryIcon className="h-4 w-4" />
                          <Badge variant="outline" className="text-xs">
                            {alert.category}
                          </Badge>
                          {alert.acknowledged && (
                            <Badge variant="secondary" className="text-xs">
                              Reconhecido
                            </Badge>
                          )}
                          {alert.resolved && (
                            <Badge variant="default" className="text-xs bg-emerald-600">
                              Resolvido
                            </Badge>
                          )}
                        </AlertTitle>
                        <AlertDescription className="mt-1">
                          {alert.description}
                          {alert.value !== undefined && (
                            <span className="ml-2 font-medium">
                              {alert.value}
                              {alert.unit} {alert.threshold && `(limite: ${alert.threshold}${alert.unit})`}
                            </span>
                          )}
                        </AlertDescription>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="text-xs text-muted-foreground flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {alert.timestamp.toLocaleString("pt-BR")}
                        </div>
                      </div>
                    </div>

{/* Device/Station info */}
                    {(alert.deviceName || alert.stationName) && (
                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
                        {alert.deviceName && (
                          <span className="flex items-center gap-1">
                            <Zap className="h-3 w-3" />
                            Dispositivo: {alert.deviceName}
                          </span>
                        )}
                        {alert.stationName && (
                          <span className="flex items-center gap-1">
                            <Activity className="h-3 w-3" />
                            Planta: {alert.stationName}
                          </span>
                        )}
                      </div>
                    )}

{/* Actions */}
                    {!alert.resolved && (
                      <div className="flex gap-2 pt-2">
                        {!alert.acknowledged && (
                          <Button variant="outline" size="sm" onClick={() => handleAcknowledge(alert.id)}>
                            <CheckCircle2 className="mr-2 h-4 w-4" />
                            Reconhecer
                          </Button>
                        )}
                        <Button variant="outline" size="sm" onClick={() => handleResolve(alert.id)}>
                          <XCircle className="mr-2 h-4 w-4" />
                          Resolver
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              </Alert>
            )
          })}
        </div>
      )}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/alertas/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="lib/realtime-client.ts" isMerged="true"
export class RealTimeClient {
  private baseUrl: string
  private credentials: { email: string; password: string; orgId?: string }

constructor(baseUrl: string, credentials: { email: string; password: string; orgId?: string }) {
    this.baseUrl = baseUrl
    this.credentials = credentials
  }

async getStations(): Promise<any> {
    const params = new URLSearchParams({
      email: this.credentials.email,
      password: this.credentials.password,
    })

if (this.credentials.orgId) {
      params.append("orgId", this.credentials.orgId)
    }

const response = await fetch(`${this.baseUrl}/api/realtime/stations?${params}`)
    if (!response.ok) {
      throw new Error(`Failed to fetch stations: ${response.status}`)
    }

return response.json()
  }

async getInverters(stationId?: string): Promise<any> {
    const params = new URLSearchParams({
      email: this.credentials.email,
      password: this.credentials.password,
    })

if (this.credentials.orgId) {
      params.append("orgId", this.credentials.orgId)
    }

if (stationId) {
      params.append("stationId", stationId)
    }

const response = await fetch(`${this.baseUrl}/api/realtime/inverters?${params}`)
    if (!response.ok) {
      throw new Error(`Failed to fetch inverters: ${response.status}`)
    }

return response.json()
  }

async getAlerts(): Promise<any> {
    const params = new URLSearchParams({
      email: this.credentials.email,
      password: this.credentials.password,
    })

if (this.credentials.orgId) {
      params.append("orgId", this.credentials.orgId)
    }

const response = await fetch(`${this.baseUrl}/api/realtime/alerts?${params}`)
    if (!response.ok) {
      throw new Error(`Failed to fetch alerts: ${response.status}`)
    }

return response.json()
  }

streamStations(onData: (data: any) => void, onError?: (error: Error) => void, interval = 30000): () => void {
    const eventSource = new EventSource(`${this.baseUrl}/api/realtime/stations`, {
      withCredentials: false,
    })

// Send credentials via POST for streaming
    fetch(`${this.baseUrl}/api/realtime/stations`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: this.credentials.email,
        password: this.credentials.password,
        orgId: this.credentials.orgId,
        interval,
      }),
    }).catch((error) => onError?.(error))

eventSource.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        onData(data)
      } catch (error) {
        onError?.(error as Error)
      }
    }

eventSource.onerror = (event) => {
      onError?.(new Error("EventSource error"))
    }

return () => eventSource.close()
  }

streamInverters(
    onData: (data: any) => void,
    onError?: (error: Error) => void,
    stationId?: string,
    interval = 30000,
  ): () => void {
    const eventSource = new EventSource(`${this.baseUrl}/api/realtime/inverters`)

// Send credentials via POST for streaming
    fetch(`${this.baseUrl}/api/realtime/inverters`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: this.credentials.email,
        password: this.credentials.password,
        orgId: this.credentials.orgId,
        stationId,
        interval,
      }),
    }).catch((error) => onError?.(error))

eventSource.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        onData(data)
      } catch (error) {
        onError?.(error as Error)
      }
    }

eventSource.onerror = (event) => {
      onError?.(new Error("EventSource error"))
    }

return () => eventSource.close()
  }

streamAlerts(onData: (data: any) => void, onError?: (error: Error) => void, interval = 60000): () => void {
    const eventSource = new EventSource(`${this.baseUrl}/api/realtime/alerts`)

// Send credentials via POST for streaming
    fetch(`${this.baseUrl}/api/realtime/alerts`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: this.credentials.email,
        password: this.credentials.password,
        orgId: this.credentials.orgId,
        interval,
      }),
    }).catch((error) => onError?.(error))

eventSource.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        onData(data)
      } catch (error) {
        onError?.(error as Error)
      }
    }

eventSource.onerror = (event) => {
      onError?.(new Error("EventSource error"))
    }

return () => eventSource.close()
  }
}

export function useRealTimeData(credentials: { email: string; password: string; orgId?: string }) {
  const client = new RealTimeClient(typeof window !== "undefined" ? window.location.origin : "", credentials)

return {
    getStations: () => client.getStations(),
    getInverters: (stationId?: string) => client.getInverters(stationId),
    getAlerts: () => client.getAlerts(),
    streamStations: (onData: (data: any) => void, onError?: (error: Error) => void) =>
      client.streamStations(onData, onError),
    streamInverters: (onData: (data: any) => void, onError?: (error: Error) => void, stationId?: string) =>
      client.streamInverters(onData, onError, stationId),
    streamAlerts: (onData: (data: any) => void, onError?: (error: Error) => void) =>
      client.streamAlerts(onData, onError),
  }
}
[V0_FILE]typescriptreact:file="hooks/use-auto-refresh.ts" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

interface UseAutoRefreshOptions {
  enabled: boolean
  interval: number // in seconds
  onRefresh: () => Promise<void> | void
  onError?: (error: Error) => void
}

export function useAutoRefresh({ enabled, interval, onRefresh, onError }: UseAutoRefreshOptions) {
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdate, setLastUpdate] = useState<Date | null>(null)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

useEffect(() => {
    if (enabled) {
      const refresh = async () => {
        if (isRefreshing) return // Prevent overlapping refreshes

setIsRefreshing(true)
        try {
          await onRefresh()
          setLastUpdate(new Date())
        } catch (error) {
          onError?.(error as Error)
        } finally {
          setIsRefreshing(false)
        }
      }

// Initial refresh
      refresh()

// Set up interval
      intervalRef.current = setInterval(refresh, interval * 1000)

return () => {
        if (intervalRef.current) {
          clearInterval(intervalRef.current)
        }
      }
    }
  }, [enabled, interval, onRefresh, onError, isRefreshing])

// Cleanup on unmount
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [])

return {
    isRefreshing,
    lastUpdate,
  }
}
[V0_FILE]typescriptreact:file="app/api/realtime/stations/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { SolarmanClient } from "@/lib/solarman-client"

const SOLARMAN_USERNAME = process.env.SOLARMAN_USERNAME
const SOLARMAN_PASSWORD = process.env.SOLARMAN_PASSWORD

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const email = searchParams.get("email") || SOLARMAN_USERNAME
  const password = searchParams.get("password") || SOLARMAN_PASSWORD
  const orgId = searchParams.get("orgId")

if (!email || !password) {
    return NextResponse.json(
      {
        error:
          "Credenciais não configuradas. Configure SOLARMAN_USERNAME e SOLARMAN_PASSWORD nas variáveis de ambiente.",
      },
      { status: 400 },
    )
  }

try {
    console.log("Fetching real-time stations data...")
    const client = new SolarmanClient(email, password)
    const authResult = await client.authenticate()

console.log(`Authentication successful: ${authResult.accountType} account`)

// Get all stations with real-time data
    const stations = await client.getAllStations(authResult.token, authResult.tokenType)

console.log(`Found ${stations.length} stations with real-time data`)

// Transform to real-time format with better data handling
    const realTimeStations = stations.map((station: any) => {
      const currentPower = station.currentPower ?? 0
      const todayGeneration = station.todayGeneration ?? 0
      const totalGeneration = station.totalGeneration ?? 0

console.log(`Station ${station.id}: Power=${currentPower}, Today=${todayGeneration}, Total=${totalGeneration}`)

return {
        id: String(station.id || station.stationId),
        name: station.stationName || station.name || `Estação ${station.id}`,
        capacity: station.capacity || 0,
        location: station.locationAddress || station.address || "",
        status: station.status || "unknown",
        currentPower,
        todayGeneration,
        totalGeneration,
        timestamp: new Date().toISOString(),
        online: !station.status?.toLowerCase().includes("offline"),
      }
    })

return NextResponse.json({
      success: true,
      timestamp: new Date().toISOString(),
      count: realTimeStations.length,
      stations: realTimeStations,
    })
  } catch (error) {
    console.error("Real-time stations error:", error)
    return NextResponse.json(
      {
        error: "Erro ao buscar dados em tempo real das plantas",
        details: error instanceof Error ? error.message : "Erro desconhecido",
      },
      { status: 500 },
    )
  }
}

export async function POST(request: NextRequest) {
  const { email, password, orgId, interval = 30000 } = await request.json()

const finalEmail = email || SOLARMAN_USERNAME
  const finalPassword = password || SOLARMAN_PASSWORD

if (!finalEmail || !finalPassword) {
    return NextResponse.json(
      {
        error:
          "Credenciais não configuradas. Configure SOLARMAN_USERNAME e SOLARMAN_PASSWORD nas variáveis de ambiente.",
      },
      { status: 400 },
    )
  }

// Create a readable stream for Server-Sent Events
  const stream = new ReadableStream({
    async start(controller) {
      const client = new SolarmanClient(finalEmail, finalPassword)

const sendData = async () => {
        try {
          console.log("Streaming real-time data...")
          const authResult = await client.authenticate()
          const stations = await client.getAllStations(authResult.token, authResult.tokenType)

const realTimeStations = stations.map((station: any) => ({
            id: String(station.id || station.stationId),
            name: station.stationName || station.name || `Estação ${station.id}`,
            capacity: station.capacity || 0,
            currentPower: station.currentPower ?? 0,
            todayGeneration: station.todayGeneration ?? 0,
            totalGeneration: station.totalGeneration ?? 0,
            status: station.status || "unknown",
            timestamp: new Date().toISOString(),
            online: !station.status?.toLowerCase().includes("offline"),
          }))

const data = {
            timestamp: new Date().toISOString(),
            count: realTimeStations.length,
            stations: realTimeStations,
          }

controller.enqueue(`data: ${JSON.stringify(data)}\n\n`)
        } catch (error) {
          console.error("Stream error:", error)
          controller.enqueue(`data: ${JSON.stringify({ error: "Erro ao buscar dados" })}\n\n`)
        }
      }

// Send initial data
      await sendData()

// Set up interval for continuous updates
      const intervalId = setInterval(sendData, interval)

// Clean up on close
      request.signal.addEventListener("abort", () => {
        clearInterval(intervalId)
        controller.close()
      })
    },
  })

return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Cache-Control",
    },
  })
}
[V0_FILE]typescript:file="app/api/solarman/inverter/current/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import axios from "axios"
import crypto from "crypto"
import { fetchInverterRealtimeBySn } from "@/lib/inverter-realtime"

const BASE = process.env.SOLARMAN_BASE_URL || "https://globalapi.solarmanpv.com"
const APP_ID = process.env.SOLARMAN_APP_ID!
const APP_SECRET = process.env.SOLARMAN_APP_SECRET!
const USERNAME = process.env.SOLARMAN_USERNAME!
const PASSWORD = process.env.SOLARMAN_PASSWORD!
const sha256 = (s: string) => crypto.createHash("sha256").update(s).digest("hex")

const api = axios.create({
  baseURL: BASE,
  headers: { "Content-Type": "application/json", "Accept-Language": "pt_BR" },
  timeout: 15000,
  // transforma texto em JSON quando possível
  transformResponse: [
    (data) => {
      if (!data) return null
      try {
        return JSON.parse(data)
      } catch {
        return data
      }
    },
  ],
})

let cache = { token: "", type: "Bearer", orgId: 0, exp: 0 }

function explainAxiosErr(e: any) {
  return {
    status: e?.response?.status ?? null,
    headers: e?.response?.headers ?? null,
    data: typeof e?.response?.data === "string" ? e.response.data.slice(0, 500) : e?.response?.data,
    code: e?.code ?? null,
    message: e?.message ?? null,
  }
}

type Dev = { deviceId: number; deviceSn: string; deviceType?: string }

async function findInverterBySn(stationId: number | string, sn: string): Promise<Dev | null> {
  let page = 1,
    size = 200
  while (true) {
    const { data } = await api.post("/station/v1.0/device", { stationId, page, size })
    const list = data?.deviceListItems || data?.list || []
    const hit = list.find(
      (d: any) => String(d.deviceSn || d.sn).trim() === sn && String(d.deviceType).toUpperCase().includes("INVERTER"),
    )
    if (hit) {
      return {
        deviceId: hit.deviceId || hit.id,
        deviceSn: String(hit.deviceSn || hit.sn).trim(),
        deviceType: hit.deviceType,
      }
    }
    if (list.length < size) break
    page++
  }
  return null
}

function sanitizeInverterInput(payload: any) {
  const errors: string[] = []
  const out: any = {}

// deviceId is now optional - we'll resolve it if missing
  const idNum = Number(payload?.deviceId)
  if (Number.isFinite(idNum) && idNum > 0) {
    out.deviceId = idNum
  }

const sn = String(payload?.deviceSn ?? "").trim()
  if (!sn) errors.push("deviceSn vazio")
  else out.deviceSn = sn.replace(/\s+/g, "")

// stationId is required for device resolution
  const stationIdNum = Number(payload?.stationId)
  if (!Number.isFinite(stationIdNum) || stationIdNum <= 0) {
    errors.push("stationId obrigatório para resolução de dispositivo")
  } else {
    out.stationId = stationIdNum
  }

return { ok: errors.length === 0, errors, value: out }
}

async function getToken(orgId?: number) {
  const body: any = { appSecret: APP_SECRET, email: USERNAME, password: sha256(PASSWORD) }
  if (orgId) body.orgId = orgId
  const { data } = await api.post("/account/v1.0/token", body, { params: { appId: APP_ID } })
  if (!data?.access_token) throw new Error("Falha ao obter token")
  api.defaults.headers.common.Authorization = `${data.token_type || "Bearer"} ${data.access_token}`
  const now = Math.floor(Date.now() / 1000)
  cache = {
    token: data.access_token,
    type: data.token_type || "Bearer",
    orgId: orgId || 0,
    exp: now + Number(data.expires_in || 3600),
  }
  return data
}

async function ensureBusiness() {
  const now = Math.floor(Date.now() / 1000)
  if (cache.token && cache.exp > now + 300) {
    api.defaults.headers.common.Authorization = `${cache.type} ${cache.token}`
    return cache.orgId || null
  }
  // Smart
  const t1 = await getToken()
  // Descobrir org
  const info = await api.post("/account/v1.0/info", {}).then((r) => r.data)
  const orgId = info?.orgInfoList?.[0]?.companyId
  if (!orgId) throw new Error("Conta sem companyId (Business) neste ambiente")
  // Business
  await getToken(orgId)
  return orgId
}

async function listDevices(stationId: number | string) {
  let page = 1,
    size = 200,
    all: any[] = []
  while (true) {
    const { data } = await api.post("/station/v1.0/device", { stationId, page, size })
    const list = data?.deviceListItems || data?.list || []
    all.push(...list)
    if (list.length < size) break
    page++
  }
  return all
}

export async function POST(req: Request) {
  try {
    const { stationId, deviceSn, deviceId } = await req.json()
    if (!stationId || !deviceSn) {
      return NextResponse.json({ error: "stationId e deviceSn são obrigatórios" }, { status: 400 })
    }

const data = await fetchInverterRealtimeBySn(stationId, deviceSn, deviceId)
    return NextResponse.json(data, { status: 200 })
  } catch (e: any) {
    console.error("[SERVER] Error in inverter current API:", e.message)
    return NextResponse.json({ error: e?.message || "erro interno" }, { status: 400 })
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/loading.tsx" isMerged="true"
export default function ClientDashboardLoading() {
  return (
    <main className="space-y-6">
      <div className="animate-pulse">
        <div className="h-8 bg-muted rounded w-48 mb-2"></div>
        <div className="h-4 bg-muted rounded w-64"></div>
      </div>
      <div className="grid gap-6 md:grid-cols-2">
        <div className="h-64 bg-muted rounded"></div>
        <div className="h-64 bg-muted rounded"></div>
        <div className="h-64 bg-muted rounded"></div>
        <div className="h-64 bg-muted rounded"></div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="lib/clients-db.ts" isMerged="true"
"use client"

import {
  collection,
  addDoc,
  serverTimestamp,
  onSnapshot,
  query,
  orderBy,
  doc,
  getDoc,
  type DocumentData,
  type Firestore,
  type Unsubscribe,
  type Timestamp,
} from "firebase/firestore"
import { getFirebaseDb } from "./firebase"
import type { NovoClientePayload } from "./clients-storage"

let db: Firestore | null = null
function getDb() {
  if (!db) db = getFirebaseDb()
  return db
}

export type ClienteDoc = {
  id: string
  createdAt: string // ISO
  updatedAt?: string // ISO
  payload: NovoClientePayload
}

export async function addClientForUser(uid: string, payload: NovoClientePayload): Promise<ClienteDoc> {
  const db = getDb()
  const ref = collection(db, "users", uid, "clientes")
  const docRef = await addDoc(ref, {
    payload,
    createdAt: serverTimestamp(),
  })
  // retornamos um stub com createdAt agora; a subscrição trará o TS real
  return { id: docRef.id, createdAt: new Date().toISOString(), payload }
}

export async function getClientById(clientId: string, uid: string): Promise<ClienteDoc | null> {
  const db = getDb()
  const docRef = doc(db, "users", uid, "clientes", clientId)
  const docSnap = await getDoc(docRef)

if (!docSnap.exists()) {
    return null
  }

const data = docSnap.data() as DocumentData
  return {
    id: docSnap.id,
    createdAt: toISO(data.createdAt) || new Date(0).toISOString(),
    updatedAt: toISO(data.updatedAt),
    payload: data.payload as NovoClientePayload,
  }
}

function toISO(ts?: Timestamp | null): string {
  try {
    if (ts && "toDate" in ts) return ts.toDate().toISOString()
  } catch {}
  return ""
}

export function listenClients(uid: string, cb: (docs: ClienteDoc[]) => void): Unsubscribe {
  const db = getDb()
  const ref = collection(db, "users", uid, "clientes")
  const qy = query(ref, orderBy("createdAt", "desc"))
  return onSnapshot(qy, (snap) => {
    const out: ClienteDoc[] = snap.docs.map((d) => {
      const data = d.data() as DocumentData
      return {
        id: d.id,
        createdAt: toISO(data.createdAt) || new Date(0).toISOString(),
        updatedAt: toISO(data.updatedAt),
        payload: data.payload as NovoClientePayload,
      }
    })
    cb(out)
  })
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/informacoes/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { User, Building2, Mail, Phone, MapPin, FileText, Users, Briefcase, Home, Building } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import type { ClienteDoc } from "@/lib/clients-db"

function formatCPF(cpf: string) {
  const d = cpf.replace(/\D+/g, "").padStart(11, " ")
  return `${d.slice(0, 3)}.${d.slice(3, 6)}.${d.slice(6, 9)}-${d.slice(9, 11)}`.trim()
}

function formatCNPJ(cnpj: string) {
  const d = cnpj.replace(/\D+/g, "").padStart(14, " ")
  return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8, 12)}-${d.slice(12, 14)}`.trim()
}

function formatDate(iso: string) {
  if (!iso) return "Não informado"
  const dt = new Date(iso)
  if (Number.isNaN(dt.getTime())) return iso
  return dt.toLocaleDateString("pt-BR")
}

function generateMockClient(clientId: string): ClienteDoc {
  const mockClients = {
    "client-001": {
      id: "client-001",
      payload: {
        tipo: "PF" as const,
        pf: {
          cpf: "123.456.789-01",
          nome: "João Silva Santos",
          rg: "12.345.678-9",
          dataNascimento: "1985-03-15",
          estadoCivil: "Casado",
          profissao: "Engenheiro",
          telefone: "(62) 99999-1234",
          email: "joao.silva@email.com",
          endereco: {
            cep: "74000-000",
            logradouro: "Rua das Flores, 123",
            numero: "123",
            complemento: "Apto 45",
            bairro: "Centro",
            cidade: "Goiânia",
            estado: "GO",
          },
        },
      },
    },
    "client-002": {
      id: "client-002",
      payload: {
        tipo: "PJ" as const,
        pj: {
          cnpj: "12.345.678/0001-90",
          razaoSocial: "Empresa Solar Ltda",
          nomeFantasia: "Solar Tech",
          inscricaoEstadual: "123456789",
          numeroParceiroNegocio: "PN001",
          telefoneEmpresa: "(62) 3333-4444",
          email: "contato@solartech.com.br",
          enderecoEmpresa: {
            cep: "74100-000",
            logradouro: "Av. Empresarial, 456",
            numero: "456",
            bairro: "Setor Industrial",
            cidade: "Goiânia",
            estado: "GO",
          },
          administrador: {
            cpf: "987.654.321-00",
            nome: "Maria Oliveira",
            dataNascimento: "1978-08-22",
            estadoCivil: "Solteira",
            profissao: "Administradora",
            telefone: "(62) 98888-7777",
            email: "maria@solartech.com.br",
            enderecoResidencial: {
              cep: "74200-000",
              logradouro: "Rua Residencial, 789",
              numero: "789",
              bairro: "Jardim América",
              cidade: "Goiânia",
              estado: "GO",
            },
          },
        },
      },
    },
  }

return (
    mockClients[clientId as keyof typeof mockClients] || {
      id: clientId,
      payload: {
        tipo: "PF" as const,
        pf: {
          cpf: "000.000.000-00",
          nome: `Cliente ${clientId}`,
          telefone: "(62) 99999-0000",
          email: `cliente${clientId}@email.com`,
          endereco: {
            cidade: "Goiânia",
            estado: "GO",
          },
        },
      },
    }
  )
}

export default function ClientInformationPage() {
  const params = useParams()
  const [client, setClient] = React.useState<ClienteDoc | null>(null)
  const [loading, setLoading] = React.useState(true)

React.useEffect(() => {
    const timer = setTimeout(() => {
      if (params.id) {
        const mockClient = generateMockClient(params.id as string)
        setClient(mockClient)
      }
      setLoading(false)
    }, 500)

return () => clearTimeout(timer)
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6 p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-gradient-to-r from-muted to-muted/50 rounded-lg w-48 mb-2"></div>
          <div className="h-4 bg-gradient-to-r from-muted to-muted/50 rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="h-64 bg-gradient-to-br from-muted to-muted/50 rounded-xl"></div>
          <div className="h-64 bg-gradient-to-br from-muted to-muted/50 rounded-xl"></div>
        </div>
      </main>
    )
  }

if (!client) {
    return (
      <main className="space-y-6 p-6">
        <Card className="border-red-200 bg-red-50/50">
          <CardContent className="flex flex-col items-center justify-center gap-3 py-12 text-center">
            <div className="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center">
              <User className="h-6 w-6 text-red-600" />
            </div>
            <div className="text-lg font-semibold text-red-900">Cliente não encontrado</div>
            <div className="text-sm text-red-700 max-w-md">
              O cliente pode ter sido removido ou você não tem permissão para visualizá-lo.
            </div>
          </CardContent>
        </Card>
      </main>
    )
  }

const isPF = client.payload.tipo === "PF"
  const data = isPF ? client.payload.pf : client.payload.pj

return (
    <main className="space-y-8 p-6">
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 text-white">
        <div className="absolute inset-0 bg-black/10"></div>
        <div className="relative">
          <div className="flex items-center gap-3 mb-2">
            {isPF ? <User className="h-8 w-8" /> : <Building2 className="h-8 w-8" />}
            <h1 className="text-3xl font-bold tracking-tight">Informações do Cliente</h1>
          </div>
          <p className="text-blue-100 text-lg">Dados completos e detalhados do cliente</p>
        </div>
      </div>

<Card className="border-0 shadow-lg bg-gradient-to-r from-white to-gray-50/50">
        <CardHeader className="pb-4">
          <CardTitle className="flex items-center gap-3 text-xl">
            {isPF ? (
              <div className="h-10 w-10 rounded-full bg-emerald-100 flex items-center justify-center">
                <User className="h-5 w-5 text-emerald-600" />
              </div>
            ) : (
              <div className="h-10 w-10 rounded-full bg-amber-100 flex items-center justify-center">
                <Building2 className="h-5 w-5 text-amber-600" />
              </div>
            )}
            Tipo de Cliente
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Badge
            variant="secondary"
            className={`px-4 py-2 text-sm font-medium ${
              isPF
                ? "bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-800 border-emerald-200"
                : "bg-gradient-to-r from-amber-50 to-amber-100 text-amber-800 border-amber-200"
            }`}
          >
            {isPF ? "Pessoa Física" : "Pessoa Jurídica"}
          </Badge>
        </CardContent>
      </Card>

{isPF ? (
        <div className="grid gap-8 lg:grid-cols-2">
          {/* Dados Pessoais */}
          <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-blue-50/30 hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="flex items-center gap-3 text-xl">
                <div className="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                  <User className="h-5 w-5 text-blue-600" />
                </div>
                Dados Pessoais
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                <div className="text-sm font-medium text-blue-700 mb-1">CPF</div>
                <div className="font-mono text-lg text-gray-900">{formatCPF(data.cpf || "")}</div>
              </div>

<div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                <div className="text-sm font-medium text-blue-700 mb-1">Nome Completo</div>
                <div className="font-semibold text-lg text-gray-900">{data.nome || "Não informado"}</div>
              </div>

{data.rg && (
                <div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                  <div className="text-sm font-medium text-blue-700 mb-1">RG</div>
                  <div className="font-mono text-lg text-gray-900">{data.rg}</div>
                </div>
              )}

{data.dataNascimento && (
                <div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                  <div className="text-sm font-medium text-blue-700 mb-1">Data de Nascimento</div>
                  <div className="font-semibold text-lg text-gray-900">{formatDate(data.dataNascimento)}</div>
                </div>
              )}

{data.estadoCivil && (
                <div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                  <div className="text-sm font-medium text-blue-700 mb-1">Estado Civil</div>
                  <div className="font-semibold text-lg text-gray-900">{data.estadoCivil}</div>
                </div>
              )}

{data.profissao && (
                <div className="p-4 rounded-lg bg-white/60 border border-blue-100">
                  <div className="text-sm font-medium text-blue-700 mb-1">Profissão</div>
                  <div className="font-semibold text-lg text-gray-900">{data.profissao}</div>
                </div>
              )}
            </CardContent>
          </Card>

<Card className="border-0 shadow-lg bg-gradient-to-br from-white to-green-50/30 hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="flex items-center gap-3 text-xl">
                <div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                  <Phone className="h-5 w-5 text-green-600" />
                </div>
                Contato
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {data.telefone && (
                <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-green-100">
                  <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                    <Phone className="h-4 w-4 text-green-600" />
                  </div>
                  <div>
                    <div className="text-sm font-medium text-green-700 mb-1">Telefone</div>
                    <div className="font-semibold text-lg text-gray-900">{data.telefone}</div>
                  </div>
                </div>
              )}

{data.email && (
                <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-green-100">
                  <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                    <Mail className="h-4 w-4 text-green-600" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-medium text-green-700 mb-1">E-mail</div>
                    <div className="font-semibold break-all text-base text-gray-900">{data.email}</div>
                  </div>
                </div>
              )}

{!data.telefone && !data.email && (
                <div className="text-center py-8">
                  <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                    <Phone className="h-6 w-6 text-gray-400" />
                  </div>
                  <div className="text-sm text-gray-500">Nenhuma informação de contato cadastrada</div>
                </div>
              )}
            </CardContent>
          </Card>

<Card className="lg:col-span-2 border-0 shadow-lg bg-gradient-to-br from-white to-purple-50/30 hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="flex items-center gap-3 text-xl">
                <div className="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                  <MapPin className="h-5 w-5 text-purple-600" />
                </div>
                Endereço Residencial
              </CardTitle>
            </CardHeader>
            <CardContent>
              {(() => {
                const endereco = data.endereco
                if (!endereco || (!endereco.logradouro && !endereco.cidade)) {
                  return (
                    <div className="text-center py-8">
                      <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                        <MapPin className="h-6 w-6 text-gray-400" />
                      </div>
                      <div className="text-sm text-gray-500">Nenhum endereço cadastrado</div>
                    </div>
                  )
                }

return (
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {endereco.cep && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">CEP</div>
                        <div className="font-mono text-lg text-gray-900">{endereco.cep}</div>
                      </div>
                    )}

{endereco.logradouro && (
                      <div className="md:col-span-2 p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Logradouro</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.logradouro}</div>
                      </div>
                    )}

{endereco.numero && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Número</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.numero}</div>
                      </div>
                    )}

{endereco.complemento && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Complemento</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.complemento}</div>
                      </div>
                    )}

{endereco.bairro && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Bairro</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.bairro}</div>
                      </div>
                    )}

{endereco.cidade && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Cidade</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.cidade}</div>
                      </div>
                    )}

{endereco.estado && (
                      <div className="p-4 rounded-lg bg-white/60 border border-purple-100">
                        <div className="text-sm font-medium text-purple-700 mb-1">Estado</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.estado}</div>
                      </div>
                    )}
                  </div>
                )
              })()}
            </CardContent>
          </Card>
        </div>
      ) : (
        <div className="space-y-8">
          <div className="grid gap-8 lg:grid-cols-2">
            {/* Dados da Empresa */}
            <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-orange-50/30 hover:shadow-xl transition-all duration-300">
              <CardHeader className="pb-4">
                <CardTitle className="flex items-center gap-3 text-xl">
                  <div className="h-10 w-10 rounded-full bg-orange-100 flex items-center justify-center">
                    <Building2 className="h-5 w-5 text-orange-600" />
                  </div>
                  Dados da Empresa
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="p-4 rounded-lg bg-white/60 border border-orange-100">
                  <div className="text-sm font-medium text-orange-700 mb-1">CNPJ</div>
                  <div className="font-mono text-lg text-gray-900">{formatCNPJ(data.cnpj || "")}</div>
                </div>

<div className="p-4 rounded-lg bg-white/60 border border-orange-100">
                  <div className="text-sm font-medium text-orange-700 mb-1">Razão Social</div>
                  <div className="font-semibold text-lg text-gray-900">{data.razaoSocial || "Não informado"}</div>
                </div>

{data.nomeFantasia && (
                  <div className="p-4 rounded-lg bg-white/60 border border-orange-100">
                    <div className="text-sm font-medium text-orange-700 mb-1">Nome Fantasia</div>
                    <div className="font-semibold text-lg text-gray-900">{data.nomeFantasia}</div>
                  </div>
                )}

{data.inscricaoEstadual && (
                  <div className="p-4 rounded-lg bg-white/60 border border-orange-100">
                    <div className="text-sm font-medium text-orange-700 mb-1">Inscrição Estadual</div>
                    <div className="font-mono text-lg text-gray-900">{data.inscricaoEstadual}</div>
                  </div>
                )}

{data.numeroParceiroNegocio && (
                  <div className="p-4 rounded-lg bg-white/60 border border-orange-100">
                    <div className="text-sm font-medium text-orange-700 mb-1">Número Parceiro de Negócio</div>
                    <div className="font-mono text-lg text-gray-900">{data.numeroParceiroNegocio}</div>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Contato da Empresa */}
            <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-teal-50/30 hover:shadow-xl transition-all duration-300">
              <CardHeader className="pb-4">
                <CardTitle className="flex items-center gap-3 text-xl">
                  <div className="h-10 w-10 rounded-full bg-teal-100 flex items-center justify-center">
                    <Phone className="h-5 w-5 text-teal-600" />
                  </div>
                  Contato da Empresa
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {data.telefoneEmpresa && (
                  <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-teal-100">
                    <div className="h-8 w-8 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0">
                      <Phone className="h-4 w-4 text-teal-600" />
                    </div>
                    <div>
                      <div className="text-sm font-medium text-teal-700 mb-1">Telefone</div>
                      <div className="font-semibold text-lg text-gray-900">{data.telefoneEmpresa}</div>
                    </div>
                  </div>
                )}

{data.email && (
                  <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-teal-100">
                    <div className="h-8 w-8 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0">
                      <Mail className="h-4 w-4 text-teal-600" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium text-teal-700 mb-1">E-mail</div>
                      <div className="font-semibold break-all text-base text-gray-900">{data.email}</div>
                    </div>
                  </div>
                )}

{!data.telefoneEmpresa && !data.email && (
                  <div className="text-center py-8">
                    <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                      <Phone className="h-6 w-6 text-gray-400" />
                    </div>
                    <div className="text-sm text-gray-500">Nenhuma informação de contato cadastrada</div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

{/* Endereço da Empresa */}
          <Card className="lg:col-span-2 border-0 shadow-lg bg-gradient-to-br from-white to-pink-50/30 hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="flex items-center gap-3 text-xl">
                <div className="h-10 w-10 rounded-full bg-pink-100 flex items-center justify-center">
                  <Building className="h-5 w-5 text-pink-600" />
                </div>
                Endereço da Empresa
              </CardTitle>
            </CardHeader>
            <CardContent>
              {(() => {
                const endereco = data.enderecoEmpresa
                if (!endereco || (!endereco.logradouro && !endereco.cidade)) {
                  return (
                    <div className="text-center py-8">
                      <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                        <Building className="h-6 w-6 text-gray-400" />
                      </div>
                      <div className="text-sm text-gray-500">Nenhum endereço cadastrado</div>
                    </div>
                  )
                }

return (
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {endereco.cep && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">CEP</div>
                        <div className="font-mono text-lg text-gray-900">{endereco.cep}</div>
                      </div>
                    )}

{endereco.logradouro && (
                      <div className="md:col-span-2 p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Logradouro</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.logradouro}</div>
                      </div>
                    )}

{endereco.numero && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Número</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.numero}</div>
                      </div>
                    )}

{endereco.complemento && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Complemento</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.complemento}</div>
                      </div>
                    )}

{endereco.bairro && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Bairro</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.bairro}</div>
                      </div>
                    )}

{endereco.cidade && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Cidade</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.cidade}</div>
                      </div>
                    )}

{endereco.estado && (
                      <div className="p-4 rounded-lg bg-white/60 border border-pink-100">
                        <div className="text-sm font-medium text-pink-700 mb-1">Estado</div>
                        <div className="font-semibold text-lg text-gray-900">{endereco.estado}</div>
                      </div>
                    )}
                  </div>
                )
              })()}
            </CardContent>
          </Card>

{/* Dados do Administrador */}
          {data.administrador && (
            <div className="space-y-8">
              <Separator />
              <div>
                <h3 className="text-lg font-semibold">Dados do Administrador</h3>
                <p className="text-sm text-muted-foreground">Informações do responsável legal da empresa</p>
              </div>

<div className="grid gap-8 lg:grid-cols-2">
                {/* Dados Pessoais do Administrador */}
                <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-cyan-50/30 hover:shadow-xl transition-all duration-300">
                  <CardHeader className="pb-4">
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <div className="h-10 w-10 rounded-full bg-cyan-100 flex items-center justify-center">
                        <User className="h-5 w-5 text-cyan-600" />
                      </div>
                      Dados Pessoais
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {data.administrador.cpf && (
                      <div className="p-4 rounded-lg bg-white/60 border border-cyan-100">
                        <div className="text-sm font-medium text-cyan-700 mb-1">CPF</div>
                        <div className="font-mono text-lg text-gray-900">{formatCPF(data.administrador.cpf)}</div>
                      </div>
                    )}

{data.administrador.nome && (
                      <div className="p-4 rounded-lg bg-white/60 border border-cyan-100">
                        <div className="text-sm font-medium text-cyan-700 mb-1">Nome</div>
                        <div className="font-semibold text-lg text-gray-900">{data.administrador.nome}</div>
                      </div>
                    )}

{data.administrador.dataNascimento && (
                      <div className="p-4 rounded-lg bg-white/60 border border-cyan-100">
                        <div className="text-sm font-medium text-cyan-700 mb-1">Data de Nascimento</div>
                        <div className="font-semibold text-lg text-gray-900">
                          {formatDate(data.administrador.dataNascimento)}
                        </div>
                      </div>
                    )}

{data.administrador.estadoCivil && (
                      <div className="p-4 rounded-lg bg-white/60 border border-cyan-100">
                        <div className="text-sm font-medium text-cyan-700 mb-1">Estado Civil</div>
                        <div className="font-semibold text-lg text-gray-900">{data.administrador.estadoCivil}</div>
                      </div>
                    )}

{data.administrador.profissao && (
                      <div className="p-4 rounded-lg bg-white/60 border border-cyan-100">
                        <div className="text-sm font-medium text-cyan-700 mb-1">Profissão</div>
                        <div className="font-semibold text-lg text-gray-900">{data.administrador.profissao}</div>
                      </div>
                    )}
                  </CardContent>
                </Card>

{/* Contato do Administrador */}
                <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-lime-50/30 hover:shadow-xl transition-all duration-300">
                  <CardHeader className="pb-4">
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <div className="h-10 w-10 rounded-full bg-lime-100 flex items-center justify-center">
                        <Phone className="h-5 w-5 text-lime-600" />
                      </div>
                      Contato
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    {data.administrador.telefone && (
                      <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-lime-100">
                        <div className="h-8 w-8 rounded-full bg-lime-100 flex items-center justify-center flex-shrink-0">
                          <Phone className="h-4 w-4 text-lime-600" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-lime-700 mb-1">Telefone</div>
                          <div className="font-semibold text-lg text-gray-900">{data.administrador.telefone}</div>
                        </div>
                      </div>
                    )}

{data.administrador.email && (
                      <div className="flex items-center gap-4 p-4 rounded-lg bg-white/60 border border-lime-100">
                        <div className="h-8 w-8 rounded-full bg-lime-100 flex items-center justify-center flex-shrink-0">
                          <Mail className="h-4 w-4 text-lime-600" />
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="text-sm font-medium text-lime-700 mb-1">E-mail</div>
                          <div className="font-semibold break-all text-base text-gray-900">
                            {data.administrador.email}
                          </div>
                        </div>
                      </div>
                    )}

{!data.administrador.telefone && !data.administrador.email && (
                      <div className="text-center py-8">
                        <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                          <Phone className="h-6 w-6 text-gray-400" />
                        </div>
                        <div className="text-sm text-gray-500">Nenhuma informação de contato cadastrada</div>
                      </div>
                    )}
                  </CardContent>
                </Card>

{/* Endereço Residencial do Administrador */}
                <Card className="lg:col-span-2 border-0 shadow-lg bg-gradient-to-br from-white to-violet-50/30 hover:shadow-xl transition-all duration-300">
                  <CardHeader className="pb-4">
                    <CardTitle className="flex items-center gap-3 text-xl">
                      <div className="h-10 w-10 rounded-full bg-violet-100 flex items-center justify-center">
                        <Home className="h-5 w-5 text-violet-600" />
                      </div>
                      Endereço Residencial
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    {(() => {
                      const endereco = data.administrador.enderecoResidencial
                      if (!endereco || (!endereco.logradouro && !endereco.cidade)) {
                        return (
                          <div className="text-center py-8">
                            <div className="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-3">
                              <Home className="h-6 w-6 text-gray-400" />
                            </div>
                            <div className="text-sm text-gray-500">Nenhum endereço cadastrado</div>
                          </div>
                        )
                      }

return (
                        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                          {endereco.cep && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">CEP</div>
                              <div className="font-mono text-lg text-gray-900">{endereco.cep}</div>
                            </div>
                          )}

{endereco.logradouro && (
                            <div className="md:col-span-2 p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Logradouro</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.logradouro}</div>
                            </div>
                          )}

{endereco.numero && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Número</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.numero}</div>
                            </div>
                          )}

{endereco.complemento && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Complemento</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.complemento}</div>
                            </div>
                          )}

{endereco.bairro && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Bairro</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.bairro}</div>
                            </div>
                          )}

{endereco.cidade && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Cidade</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.cidade}</div>
                            </div>
                          )}

{endereco.estado && (
                            <div className="p-4 rounded-lg bg-white/60 border border-violet-100">
                              <div className="text-sm font-medium text-violet-700 mb-1">Estado</div>
                              <div className="font-semibold text-lg text-gray-900">{endereco.estado}</div>
                            </div>
                          )}
                        </div>
                      )
                    })()}
                  </CardContent>
                </Card>
              </div>
            </div>
          )}
        </div>
      )}

{/* Observações */}
      {data.observacoes && (
        <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-gray-50/50 hover:shadow-xl transition-all duration-300">
          <CardHeader className="pb-4">
            <CardTitle className="flex items-center gap-3 text-xl">
              <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                <FileText className="h-5 w-5 text-gray-600" />
              </div>
              Observações
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-sm whitespace-pre-wrap text-gray-900">{data.observacoes}</div>
          </CardContent>
        </Card>
      )}

{/* Contatos Adicionais */}
      {data.contatosAdicionais && data.contatosAdicionais.length > 0 && (
        <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-gray-50/50 hover:shadow-xl transition-all duration-300">
          <CardHeader className="pb-4">
            <CardTitle className="flex items-center gap-3 text-xl">
              <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                <Users className="h-5 w-5 text-gray-600" />
              </div>
              Contatos Adicionais
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {data.contatosAdicionais.map((contato, index) => (
                <div key={index} className="flex items-center gap-4 p-3 border rounded-lg bg-white/60 border-gray-100">
                  <div className="flex-1">
                    <div className="font-medium text-gray-900">{contato.nome}</div>
                    <div className="text-sm text-gray-500">{contato.funcao}</div>
                  </div>
                  <div className="text-sm font-mono text-gray-900">{contato.telefone}</div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

{/* Concessionária */}
      {data.concessionaria && (
        <Card className="border-0 shadow-lg bg-gradient-to-br from-white to-gray-50/50 hover:shadow-xl transition-all duration-300">
          <CardHeader className="pb-4">
            <CardTitle className="flex items-center gap-3 text-xl">
              <div className="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                <Briefcase className="h-5 w-5 text-gray-600" />
              </div>
              Concessionária
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="font-medium text-gray-900">{data.concessionaria}</div>
          </CardContent>
        </Card>
      )}
    </main>
  )
}
[V0_FILE]typescript:file="lib/plantas-actions.ts" isMerged="true"
"use server"

export async function syncStationsAction() {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/api/solarman/sync`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: process.env.SOLARMAN_USERNAME,
        password: process.env.SOLARMAN_PASSWORD,
        refreshOnly: true,
      }),
    })

if (!response.ok) {
      throw new Error(`Sync failed with status: ${response.status}`)
    }

const result = await response.json()
    return { success: true, data: result }
  } catch (error) {
    console.error("Sync action error:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Unknown error occurred",
    }
  }
}
[V0_FILE]typescript:file="app/api/solarman/station/kpis/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { MOCK_STATION_KPIS } from "@/lib/mock-data"

type Num = number | null

function cleanSn(s: string) {
  return String(s || "")
    .trim()
    .replace(/\s+/g, "")
}

function num(x: any): Num {
  const n = Number(x)
  return Number.isFinite(n) ? n : null
}

/** Lê a 1ª chave presente na lista e devolve Number */
function pick(points: Record<string, any>, keys: string[]): Num {
  for (const k of keys) {
    const v = points[k]
    if (v == null) continue
    const n = num(v.value ?? v.val ?? v.data ?? v.v ?? v)
    if (n != null) return n
  }
  return null
}

/** Normaliza dataList -> { keyLower: {value, unit, raw} } */
function normalize(data: any): Record<string, any> {
  const list = data?.dataList || data?.points || []
  const out: Record<string, any> = {}
  for (const p of list) {
    const key = String(p.key || p.alias || p.name || p.pointName || p.pointId || "").trim()
    if (!key) continue
    const norm = key.toLowerCase().replace(/\s+/g, "_")
    out[norm] = {
      value: p.value ?? p.val ?? p.data ?? p.v,
      unit: p.unit || p.u || null,
      raw: p,
    }
  }
  return out
}

/** Heurística de potência AC instantânea (W) por inversor */
function readAcPowerW(points: Record<string, any>): Num {
  return pick(points, [
    "gen_p_t", // total AC power
    "inv_o_p_t", // inverter output power total
    "pg_pt1", // power grid total
    "acpower",
    "ac_power",
    "p_ac",
    "active_power",
    "gen_p_to", // em alguns firmwares
  ])
}

/** Energia do dia (kWh ou Wh) por inversor; converte para Wh antes de somar */
function readEnergyTodayWh(points: Record<string, any>): Num {
  const v = pick(points, [
    "e_s_d",
    "etdy_ge1",
    "eydy1",
    "day",
    "e_day",
    "daily_energy",
    "today_energy",
    "eday",
    "eday_kwh",
  ])
  if (v == null) return null
  // maioria vem em kWh; algumas em Wh. Se valor for grande, provavelmente já Wh.
  if (v > 10000) return v // parece Wh
  // senão, trate como kWh -> Wh
  return Math.round(v * 1000)
}

/** Energia total (kWh) por inversor */
function readEnergyTotalKWh(points: Record<string, any>): Num {
  return pick(points, ["e_s_to", "et_ge1", "e_total", "total_energy", "etotal", "et_ge0", "e_b_to"])
}

/** Capacidade nomeada: tenta da estação; se não tiver, estima por inversor */
function readInverterNameplateW(points: Record<string, any>): Num {
  return pick(points, ["nomp", "rated_power", "p_rated", "inv_mod1"])
}

export async function POST(req: Request) {
  try {
    const { stationId } = (await req.json()) as { stationId: number | string }
    if (!stationId) {
      return NextResponse.json({ error: "stationId é obrigatório" }, { status: 400 })
    }

await new Promise((resolve) => setTimeout(resolve, 600))

const mockKpis = MOCK_STATION_KPIS[stationId as keyof typeof MOCK_STATION_KPIS]

if (!mockKpis) {
      return NextResponse.json(
        { error: `Estação ${stationId} não encontrada nos dados de demonstração` },
        { status: 404 },
      )
    }

console.log(`[v0] Returning mock KPIs for station ${stationId}:`, mockKpis)

return NextResponse.json(
      {
        success: true,
        stationId,
        kpis: {
          capacidade_kWp: mockKpis.capacidade_kWp,
          potenciaAtual_W: mockKpis.potenciaAtual_W,
          hoje_kWh: mockKpis.hoje_kWh,
          total_kWh: mockKpis.total_kWh,
          eficiencia: mockKpis.eficiencia,
          fatorCapacidade: mockKpis.fatorCapacidade,
          co2Evitado_kg: mockKpis.co2Evitado_kg,
        },
        meta: {
          inversoresConsiderados: 3, // Mock value
          fonteCapacidade: "mock_data",
          dataSource: "demonstration",
          lastUpdate: new Date().toISOString(),
        },
      },
      { status: 200 },
    )
  } catch (e: any) {
    console.error("Erro ao calcular KPIs da estação:", e)
    return NextResponse.json(
      {
        error: "Falha ao calcular KPIs da estação",
        details: e?.message || "Erro desconhecido",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/realtime/inverters/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { SolarmanClient } from "@/lib/solarman-client"
import { ReadableStream } from "stream/web"

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const email = searchParams.get("email")
  const password = searchParams.get("password")
  const orgId = searchParams.get("orgId")
  const stationId = searchParams.get("stationId")

if (!email || !password) {
    return NextResponse.json({ error: "Email e senha são obrigatórios" }, { status: 400 })
  }

try {
    const client = new SolarmanClient(email, password)
    const authResult = await client.authenticate()

// Get stations first
    const stations = await client.getAllStations(authResult.token, authResult.tokenType)
    let filteredStations = stations

if (stationId) {
      filteredStations = stations.filter((s: any) => String(s.id || s.stationId) === stationId)
    }

// Get inverters for the stations
    const inverters = await client.getAllInverters(filteredStations, authResult.token, authResult.tokenType)

// Get real-time data for each inverter
    const realTimeInverters = await Promise.allSettled(
      inverters.map(async (inverter: any) => {
        try {
          const currentDataResponse = await fetch(`${request.nextUrl.origin}/api/solarman/current-data`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              email,
              password,
              orgId,
              deviceId: inverter.id,
              deviceSn: inverter.sn,
              stationId: inverter.stationId,
            }),
          })

let realTimeData = null
          if (currentDataResponse.ok) {
            const currentData = await currentDataResponse.json()

if (currentData.success && currentData.kpis) {
              realTimeData = {
                acPower: currentData.kpis.acPower || 0,
                acVoltage: currentData.categories?.ac?.find((p: any) => p.key.includes("voltage"))?.value || 0,
                frequency: currentData.kpis.frequency || 0,
                pv1Voltage:
                  currentData.categories?.dc?.find((p: any) => p.key.includes("pv1") && p.key.includes("voltage"))
                    ?.value || 0,
                pv1Current:
                  currentData.categories?.dc?.find((p: any) => p.key.includes("pv1") && p.key.includes("current"))
                    ?.value || 0,
                pv2Voltage:
                  currentData.categories?.dc?.find((p: any) => p.key.includes("pv2") && p.key.includes("voltage"))
                    ?.value || 0,
                pv2Current:
                  currentData.categories?.dc?.find((p: any) => p.key.includes("pv2") && p.key.includes("current"))
                    ?.value || 0,
                dailyEnergy: currentData.kpis.dailyGeneration || 0,
                totalEnergy: currentData.kpis.totalGeneration || 0,
                temperature: currentData.kpis.temperature || 0,
                batteryPower: currentData.categories?.battery?.find((p: any) => p.key.includes("power"))?.value || 0,
                batterySOC: currentData.categories?.battery?.find((p: any) => p.key.includes("soc"))?.value || 0,
                status: "online",
                lastUpdate: currentData.timestamp || new Date().toISOString(),
              }
            }
          }

return {
            id: inverter.id,
            sn: inverter.sn,
            stationId: inverter.stationId,
            stationName: inverter.stationName,
            type: inverter.type,
            model: inverter.model,
            realTimeData,
            timestamp: new Date().toISOString(),
          }
        } catch (error) {
          return {
            id: inverter.id,
            sn: inverter.sn,
            stationId: inverter.stationId,
            stationName: inverter.stationName,
            type: inverter.type,
            model: inverter.model,
            realTimeData: { status: "error", error: error instanceof Error ? error.message : "Unknown error" },
            timestamp: new Date().toISOString(),
          }
        }
      }),
    )

const successfulInverters = realTimeInverters
      .filter((result) => result.status === "fulfilled")
      .map((result) => (result as PromiseFulfilledResult<any>).value)

return NextResponse.json({
      success: true,
      timestamp: new Date().toISOString(),
      count: successfulInverters.length,
      inverters: successfulInverters,
    })
  } catch (error) {
    console.error("Real-time inverters error:", error)
    return NextResponse.json(
      {
        error: "Erro ao buscar dados em tempo real dos inversores",
        details: error instanceof Error ? error.message : "Erro desconhecido",
      },
      { status: 500 },
    )
  }
}

export async function POST(request: NextRequest) {
  const { email, password, orgId, stationId, interval = 30000 } = await request.json()

if (!email || !password) {
    return NextResponse.json({ error: "Email e senha são obrigatórios" }, { status: 400 })
  }

// Create a readable stream for Server-Sent Events
  const stream = new ReadableStream({
    async start(controller) {
      const client = new SolarmanClient(email, password)

const sendData = async () => {
        try {
          const authResult = await client.authenticate()
          const stations = await client.getAllStations(authResult.token, authResult.tokenType)
          let filteredStations = stations

if (stationId) {
            filteredStations = stations.filter((s: any) => String(s.id || s.stationId) === stationId)
          }

const inverters = await client.getAllInverters(filteredStations, authResult.token, authResult.tokenType)

// Get real-time data for a subset of inverters (to avoid rate limits)
          const sampleInverters = inverters.slice(0, 10) // Limit to first 10 inverters
          const realTimeData = await Promise.allSettled(
            sampleInverters.map(async (inverter: any) => {
              try {
                const currentDataResponse = await fetch(`${request.nextUrl.origin}/api/solarman/current-data`, {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    email,
                    password,
                    orgId,
                    deviceId: inverter.id,
                    deviceSn: inverter.sn,
                    stationId: inverter.stationId,
                  }),
                })

if (currentDataResponse.ok) {
                  const currentData = await currentDataResponse.json()

if (currentData.success && currentData.kpis) {
                    return {
                      id: inverter.id,
                      sn: inverter.sn,
                      stationId: inverter.stationId,
                      acPower: currentData.kpis.acPower || 0,
                      status: "online",
                      timestamp: currentData.timestamp || new Date().toISOString(),
                    }
                  }
                }

return {
                  id: inverter.id,
                  sn: inverter.sn,
                  stationId: inverter.stationId,
                  status: "offline",
                  timestamp: new Date().toISOString(),
                }
              } catch (error) {
                return {
                  id: inverter.id,
                  sn: inverter.sn,
                  stationId: inverter.stationId,
                  status: "error",
                  timestamp: new Date().toISOString(),
                }
              }
            }),
          )

const successfulData = realTimeData
            .filter((result) => result.status === "fulfilled")
            .map((result) => (result as PromiseFulfilledResult<any>).value)

const data = {
            timestamp: new Date().toISOString(),
            count: successfulData.length,
            inverters: successfulData,
          }

// Send initial data
      await sendData()

// Set up interval for continuous updates
      const intervalId = setInterval(sendData, interval)

// Clean up on close
      request.signal.addEventListener("abort", () => {
        clearInterval(intervalId)
        controller.close()
      })
    },
  })

return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Cache-Control",
    },
  })
}
[V0_FILE]typescript:file="lib/inverter-realtime.ts" isMerged="true"
import { SolarmanClient } from "./solarman-client"

const USERNAME = process.env.SOLARMAN_USERNAME!
const PASSWORD = process.env.SOLARMAN_PASSWORD!

const solarmanClient = new SolarmanClient(USERNAME, PASSWORD)

function sanitizeSn(sn: string) {
  return String(sn || "")
    .trim()
    .replace(/\s+/g, "")
}

export async function fetchInverterRealtimeBySn(stationId: number | string, rawSn: string, maybeDeviceId?: number) {
  const businessAuth = await solarmanClient.ensureBusiness()

const sn = sanitizeSn(rawSn)
  if (!sn) throw new Error("deviceSn vazio")

// 1) se deviceId não veio (ou está inválido), resolva pelo SN
  let deviceId = Number(maybeDeviceId)
  if (!Number.isFinite(deviceId) || deviceId <= 0) {
    // Find device by SN using the robust client method
    const stations = await solarmanClient.getAllStations(businessAuth.token, businessAuth.tokenType)
    const station = stations.find((s) => String(s.id || s.stationId) === String(stationId))

if (!station) {
      throw new Error(`Estação ${stationId} não encontrada`)
    }

const inverters = await solarmanClient.getAllInverters([station], businessAuth.token, businessAuth.tokenType)
    const inverter = inverters.find((inv) => sanitizeSn(inv.sn || inv.deviceSn) === sn)

if (!inverter) {
      throw new Error(`Inversor SN ${sn} não está na estação ${stationId} (escopo atual)`)
    }

deviceId = inverter.id || inverter.deviceId
  }

// 2) chama currentData com o PAR correto usando o método robusto
  try {
    const result = await solarmanClient.getDeviceCurrentSafe(businessAuth.token, businessAuth.tokenType, {
      stationId: String(stationId),
      deviceId,
      deviceSn: sn,
    })

if (!result.ok) {
      throw new Error("Falha ao obter dados do dispositivo")
    }

const points = result.data?.dataList || result.data?.points || []

return {
      success: true,
      stationId,
      deviceId: result.repaired ? result.newDeviceId : deviceId,
      deviceSn: sn,
      lastUpdateTime: result.data?.lastUpdateTime || result.data?.time || null,
      points: points.map((p: any) => ({
        key: p.key || p.alias || p.name || p.pointName || p.pointId,
        value: p.value ?? p.val ?? p.data ?? p.v,
        unit: p.unit || p.u || null,
      })),
      repaired: result.repaired || false,
    }
  } catch (error: any) {
    console.error("fetchInverterRealtimeBySn failed:", error)
    throw new Error(`Erro ao buscar dados em tempo real: ${error.message}`)
  }
}
[V0_FILE]typescript:file="lib/inverter-utils.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import type { SolarmanInverter } from "@/lib/solarman-sync"

export type InverterWithRealTimeData = SolarmanInverter & {
  realTimeData?: {
    acPower?: number
    acVoltL1?: number
    acVoltL2?: number
    acVoltL3?: number
    freq?: number
    pv1V?: number
    pv1A?: number
    pv2V?: number
    pv2A?: number
    energyDay?: number
    energyTot?: number
    temp?: number
    battPower?: number
    battSOC?: number
    battVolt?: number
    battCurr?: number
    timestamp?: string
    status?: "online" | "offline" | "error"
  }
  isLoading?: boolean
}

export async function fetchRealTimeData(inverter: SolarmanInverter): Promise<InverterWithRealTimeData> {
  try {
    console.log(`[v0] Fetching real-time data for inverter ${inverter.sn} (ID: ${inverter.id})`)

const response = await fetch("/api/solarman/current-data", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        deviceId: inverter.id,
        deviceSn: inverter.sn,
        stationId: inverter.stationId,
      }),
    })

console.log(`[v0] API Response for ${inverter.sn}: ${response.status} ${response.statusText}`)

if (!response.ok) {
      const errorText = await response.text()
      console.log(`[v0] API Error for ${inverter.sn}: ${errorText}`)
      throw new Error(`HTTP ${response.status}: ${errorText}`)
    }

const data = await response.json()
    console.log(`[v0] API Data for ${inverter.sn}:`, {
      success: data.success,
      totalPoints: data.totalPoints,
      hasKpis: !!data.kpis,
      hasCategories: !!data.categories,
      acPower: data.kpis?.acPower,
      dailyGeneration: data.kpis?.dailyGeneration,
      repaired: data.repaired,
    })

if (!data || data.error) {
      console.log(`[v0] Invalid data for ${inverter.sn}:`, data?.error)
      throw new Error(data?.error || "Invalid response from API")
    }

const kpis = data.kpis || {}
    const categories = data.categories || {}

const realTimeData = {
      // Extract AC metrics from KPIs and categories
      acPower: kpis.acPower || 0,
      acVoltL1: categories.ac?.find(
        (p: any) =>
          p.key?.toLowerCase().includes("ac_voltage") &&
          (p.key?.toLowerCase().includes("l1") ||
            p.key?.toLowerCase().includes("phase_a") ||
            p.key?.toLowerCase().includes("uac")),
      )?.value,
      acVoltL2: categories.ac?.find(
        (p: any) =>
          p.key?.toLowerCase().includes("ac_voltage") &&
          (p.key?.toLowerCase().includes("l2") || p.key?.toLowerCase().includes("phase_b")),
      )?.value,
      acVoltL3: categories.ac?.find(
        (p: any) =>
          p.key?.toLowerCase().includes("ac_voltage") &&
          (p.key?.toLowerCase().includes("l3") || p.key?.toLowerCase().includes("phase_c")),
      )?.value,
      freq: kpis.frequency || 0,

// Extract DC/PV metrics from DC category
      pv1V: categories.dc?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("pv1") && p.key?.toLowerCase().includes("voltage")) ||
          p.key?.toLowerCase().includes("pv1_u") ||
          p.key?.toLowerCase().includes("string1_voltage"),
      )?.value,
      pv1A: categories.dc?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("pv1") && p.key?.toLowerCase().includes("current")) ||
          p.key?.toLowerCase().includes("pv1_i") ||
          p.key?.toLowerCase().includes("string1_current"),
      )?.value,
      pv2V: categories.dc?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("pv2") && p.key?.toLowerCase().includes("voltage")) ||
          p.key?.toLowerCase().includes("pv2_u") ||
          p.key?.toLowerCase().includes("string2_voltage"),
      )?.value,
      pv2A: categories.dc?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("pv2") && p.key?.toLowerCase().includes("current")) ||
          p.key?.toLowerCase().includes("pv2_i") ||
          p.key?.toLowerCase().includes("string2_current"),
      )?.value,

// Extract energy metrics from KPIs
      energyDay: kpis.dailyGeneration || 0,
      energyTot: kpis.totalGeneration || 0,

// Extract temperature from KPIs and temperature category
      temp: kpis.temperature || categories.temperature?.[0]?.value,

// Extract battery metrics from battery category
      battPower: categories.battery?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("batt") && p.key?.toLowerCase().includes("power")) ||
          p.key?.toLowerCase().includes("battery_power") ||
          p.key?.toLowerCase().includes("pbat"),
      )?.value,
      battSOC: categories.battery?.find(
        (p: any) =>
          p.key?.toLowerCase().includes("soc") ||
          (p.key?.toLowerCase().includes("batt") && p.key?.toLowerCase().includes("soc")) ||
          p.key?.toLowerCase().includes("battery_soc"),
      )?.value,
      battVolt: categories.battery?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("batt") && p.key?.toLowerCase().includes("volt")) ||
          p.key?.toLowerCase().includes("battery_voltage") ||
          p.key?.toLowerCase().includes("ubat"),
      )?.value,
      battCurr: categories.battery?.find(
        (p: any) =>
          (p.key?.toLowerCase().includes("batt") && p.key?.toLowerCase().includes("current")) ||
          p.key?.toLowerCase().includes("battery_current") ||
          p.key?.toLowerCase().includes("ibat"),
      )?.value,

timestamp: data.timestamp || new Date().toISOString(),
      status: "online" as const,
    }

console.log(`[v0] Processed real-time data for ${inverter.sn}:`, {
      acPower: realTimeData.acPower,
      energyDay: realTimeData.energyDay,
      energyTot: realTimeData.energyTot,
      status: realTimeData.status,
    })

return {
      ...inverter,
      realTimeData,
      isLoading: false,
    }
  } catch (error) {
    console.error(`[v0] Error fetching real-time data for ${inverter.sn}:`, error)
    return {
      ...inverter,
      realTimeData: {
        status: "error" as const,
        timestamp: new Date().toISOString(),
      },
      isLoading: false,
    }
  }
}

export function formatPower(value?: number) {
  if (!value) return "—"
  if (value >= 1000) return `${(value / 1000).toFixed(1)} kW`
  return `${value.toFixed(0)} W`
}

export function formatVoltage(value?: number) {
  if (!value) return "—"
  return `${value.toFixed(1)} V`
}

export function formatCurrent(value?: number) {
  if (!value) return "—"
  return `${value.toFixed(2)} A`
}

export function formatEnergy(value?: number) {
  if (!value) return "—"
  if (value >= 1000) return `${(value / 1000).toFixed(1)} MWh`
  return `${value.toFixed(1)} kWh`
}

export function formatTemperature(value?: number) {
  if (!value) return "—"
  return `${value.toFixed(1)}°C`
}

export function formatFrequency(value?: number) {
  if (!value) return "—"
  return `${value.toFixed(2)} Hz`
}

export function formatSOC(value?: number) {
  if (!value) return "—"
  return `${value.toFixed(0)}%`
}

export function getStatusColor(status?: string) {
  if (!status) return "bg-gray-500"
  switch (status) {
    case "online":
      return "bg-emerald-500"
    case "offline":
      return "bg-red-500"
    case "error":
      return "bg-amber-500"
    default:
      return "bg-blue-500"
  }
}

export function getStatusIcon(status?: string) {
  switch (status) {
    case "online":
      return "CheckCircle2"
    case "offline":
      return "XCircle"
    case "error":
      return "AlertTriangle"
    default:
      return "Activity"
  }
}
[V0_FILE]png:file="public/generic-abstract-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-abstract-logo-ki1ewSkr2FjQBKgBP1nFgVD1cnS16I.png" isMerged="true"
[V0_FILE]png:file="public/fronius-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fronius-logo-z0z1jRAbpfOkxGLLe7HCeLIHasCXn3.png" isMerged="true"
[V0_FILE]png:file="public/generic-interlocking-shapes-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-interlocking-shapes-logo-h4DkwRUTtByXuDEDyj6d7YSYYufsTJ.png" isMerged="true"
[V0_FILE]png:file="public/huawei-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/huawei-logo-NQ79oylM24Wwsay72PyEi6ddowHwoC.png" isMerged="true"
[V0_FILE]png:file="public/goodwe-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/goodwe-logo-XAq5R9jDfKaN0s9CwW2a8ZSFZaRZ6s.png" isMerged="true"
[V0_FILE]png:file="public/growatt-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/growatt-logo-OuBN0hUgf5deYBRsdxmeraeOE7rtNq.png" isMerged="true"
[V0_FILE]png:file="public/solaredge-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/solaredge-logo-IOhnu42pxRbrvrXHMRpkr4S4GW9uIl.png" isMerged="true"
[V0_FILE]png:file="public/enphase-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/enphase-logo-V6gX7Xfp6glFiebgGMIGfhOrIAgmNP.png" isMerged="true"
[V0_FILE]png:file="public/delta-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/delta-logo-UuQ6zVskMPpog2G2wugmha1eMp4ai3.png" isMerged="true"
[V0_FILE]png:file="public/schneider-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/schneider-logo-cHvW8IHAzc1GTS0Kbsr5k6gnV94SFb.png" isMerged="true"
[V0_FILE]png:file="public/ginlong-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ginlong-logo-DqJaU3xMjBdGp2yCC52pKn5AOKkQLy.png" isMerged="true"
[V0_FILE]png:file="public/tbea-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tbea-logo-vuoHpqifl0EkYX3bD9NFheMFAYMMxf.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/dashboard/integracoes/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/api/solarman/current-data/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getRealtimeDataWithVariation } from "@/lib/mock-data"

function normalizeDataPoint(point: any) {
  const key = String(point.key || point.alias || point.name || "").toLowerCase()
  const value = point.value
  const unit = point.unit || ""

// Normalizar chaves comuns
  let normalizedKey = key
  if (key.includes("voltage")) normalizedKey = key.replace(/voltage/g, "voltage")
  if (key.includes("current")) normalizedKey = key.replace(/current/g, "current")
  if (key.includes("power")) normalizedKey = key.replace(/power/g, "power")
  if (key.includes("generation")) normalizedKey = key.replace(/generation/g, "generation")
  if (key.includes("battery")) normalizedKey = key.replace(/battery/g, "battery")

return {
    key: normalizedKey,
    originalKey: point.key || point.alias || point.name,
    value,
    unit,
    displayName: point.name || point.alias || point.key,
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { email, password, deviceId, deviceSn, stationId } = body

console.log(`[v0] API Request for device ${deviceSn} (ID: ${deviceId}) in station ${stationId}`)

const finalEmail = email || process.env.SOLARMAN_USERNAME
    const finalPassword = password || process.env.SOLARMAN_PASSWORD

if (!finalEmail || !finalPassword) {
      console.log(`[v0] Missing credentials for device ${deviceSn}`)
      return NextResponse.json(
        {
          error:
            "Credenciais não configuradas. Configure SOLARMAN_USERNAME e SOLARMAN_PASSWORD nas variáveis de ambiente.",
        },
        { status: 400 },
      )
    }

if (!deviceId || !deviceSn) {
      console.log(`[v0] Missing deviceId or deviceSn: ${deviceId}, ${deviceSn}`)
      return NextResponse.json({ error: "deviceId e deviceSn são obrigatórios" }, { status: 400 })
    }

if (!stationId) {
      console.log(`[v0] Missing stationId for device ${deviceSn}`)
      return NextResponse.json({ error: "stationId é obrigatório" }, { status: 400 })
    }

if (deviceSn.startsWith("INV-")) {
      console.log(`[v0] Invalid SN format for device ${deviceSn}`)
      return NextResponse.json(
        {
          error: "Serial number inválido. Este inversor não possui um número de série válido da Solarman.",
        },
        { status: 400 },
      )
    }

await new Promise((resolve) => setTimeout(resolve, 800))

const mockData = getRealtimeDataWithVariation(deviceSn)

if (!mockData) {
      console.log(`[v0] No mock data available for device ${deviceSn}`)
      return NextResponse.json(
        {
          error: "Dispositivo não encontrado nos dados de demonstração",
          code: "MOCK_DEVICE_NOT_FOUND",
        },
        { status: 400 },
      )
    }

console.log(`[v0] Successfully returned mock data for ${deviceSn}, KPIs:`, {
      acPower: mockData.kpis.acPower,
      dailyGeneration: mockData.kpis.dailyGeneration,
      totalGeneration: mockData.kpis.totalGeneration,
      frequency: mockData.kpis.frequency,
      temperature: mockData.kpis.temperature,
    })

return NextResponse.json({
      success: true,
      deviceId,
      deviceSn,
      timestamp: mockData.timestamp,
      totalPoints: mockData.totalPoints,
      kpis: mockData.kpis,
      categories: mockData.categories || {
        dc: [],
        ac: [],
        energy: [],
        battery: [],
        temperature: [],
        status: [],
        other: [],
      },
      allPoints: [
        ...(mockData.categories?.dc || []),
        ...(mockData.categories?.ac || []),
        ...(mockData.categories?.energy || []),
        ...(mockData.categories?.temperature || []),
        ...(mockData.categories?.status || []),
        ...(mockData.categories?.other || []),
      ],
      repaired: false,
      orgId: "MOCK_ORG",
    })
  } catch (error) {
    console.error(`[v0] Mock current data error:`, error)
    return NextResponse.json(
      {
        error: `Erro interno: ${error instanceof Error ? error.message : "Erro desconhecido"}`,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="lib/solarman-client.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { createHash } from "crypto"
import { getCachedToken, setCachedToken } from "./solarman-token-cache"

function sha256(text: string): string {
  return createHash("sha256").update(text).digest("hex")
}

// Utility for making requests with timeout and retry
async function fetchWithRetry(url: string, options: RequestInit, retries = 3, timeout = 30000): Promise<Response> {
  const controller = new AbortController()
  const timeoutId = setTimeout(() => controller.abort(), timeout)

// Add query parameters to URL
  const urlObj = new URL(url)
  urlObj.searchParams.set("appId", SOLARMAN_APP_ID || "")
  urlObj.searchParams.set("language", SOLARMAN_LANGUAGE)

// Ensure headers use lowercase "bearer"
  const headers = { ...options.headers }
  if (headers && "Authorization" in headers) {
    const authHeader = headers["Authorization"] as string
    if (authHeader && !authHeader.startsWith("bearer ")) {
      headers["Authorization"] = authHeader.replace(/^(Bearer|BEARER)\s+/i, "bearer ")
    }
  }

try {
    const response = await fetch(urlObj.toString(), {
      ...options,
      headers,
      signal: controller.signal,
    })
    clearTimeout(timeoutId)

if (!response.ok && retries > 0 && response.status >= 500) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      return fetchWithRetry(url, options, retries - 1, timeout)
    }

return response
  } catch (error) {
    clearTimeout(timeoutId)
    if (retries > 0 && error instanceof Error && error.name !== "AbortError") {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      return fetchWithRetry(url, options, retries - 1, timeout)
    }
    throw error
  }
}

export class SolarmanClient {
  private email: string
  private password: string

constructor(email: string, password: string) {
    this.email = email
    this.password = password
  }

async getToken(orgId?: string | number) {
    // Check cache first
    const orgIdStr = orgId ? String(orgId) : undefined
    const cached = getCachedToken(this.email, orgIdStr)
    if (cached) {
      return {
        access_token: cached.token,
        token_type: cached.tokenType,
        expires_in: Math.floor((cached.expiresAt - Date.now()) / 1000),
      }
    }

const body: any = {
      appSecret: SOLARMAN_APP_SECRET,
      email: this.email,
      password: sha256(this.password),
    }

if (orgId) {
      body.orgId = Number(orgId)
    }

const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/account/v1.0/token`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    })

if (!response.ok) {
      throw new Error(`Authentication failed: ${response.status}`)
    }

const tokenData = await response.json()

// Cache the token
    setCachedToken(this.email, tokenData.access_token, tokenData.token_type, tokenData.expires_in, orgIdStr)

return tokenData
  }

async authenticate() {
    // Get initial token
    const tokenData = await this.getToken()

// Check if Business account
    const infoResponse = await fetchWithRetry(`${SOLARMAN_BASE_URL}/account/v1.0/info`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `bearer ${tokenData.access_token}`,
      },
      body: JSON.stringify({}),
    })

if (!infoResponse.ok) {
      throw new Error("Failed to get account info")
    }

const infoData = await infoResponse.json()
    const orgId = infoData?.orgInfoList?.[0]?.companyId

let finalToken = tokenData

// Get Business token if needed
    if (orgId) {
      finalToken = await this.getToken(orgId)
    }

return {
      success: true,
      accountType: orgId ? "business" : "smart",
      orgId,
      email: this.email,
      tokenExpires: finalToken.expires_in,
      token: finalToken.access_token,
      tokenType: finalToken.token_type,
    }
  }

async getAllStations(token: string, tokenType: string, onProgress?: (current: number, total: number) => void) {
    const allStations = []
    let page = 1
    let totalEstimated = 100 // Initial estimate

while (true) {
      const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/station/v1.0/list`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `bearer ${token}`,
        },
        body: JSON.stringify({ page, size: 100 }),
      })

if (!response.ok) {
        throw new Error(`Failed to get stations page ${page}`)
      }

const data = await response.json()
      const stations = data.stationList || data.list || []

allStations.push(...stations)

// Update progress
      if (page === 1 && data.total) {
        totalEstimated = data.total
      }
      onProgress?.(allStations.length, Math.max(totalEstimated, allStations.length))

if (stations.length < 100) break
      page++
    }

const stationsWithRealTimeData = await this.enrichStationsWithRealTimeData(allStations, token, tokenType)

return stationsWithRealTimeData
  }

async enrichStationsWithRealTimeData(stations: any[], token: string, tokenType: string) {
    // Always ensure we're using Business token for real-time data
    let businessAuth
    try {
      businessAuth = await this.ensureBusiness()
      console.log(`Using Business token (orgId: ${businessAuth.orgId}) for real-time data`)
    } catch (error) {
      console.warn("Failed to get Business token, using provided token:", error)
      businessAuth = { token, tokenType, orgId: null }
    }

const concurrencyLimit = 2 // Further reduced for stability
    const enrichedStations = []

for (let i = 0; i < stations.length; i += concurrencyLimit) {
      const batch = stations.slice(i, i + concurrencyLimit)

const batchPromises = batch.map(async (station) => {
        try {
          const stationId = station.id || station.stationId
          console.log(`Fetching real-time data for station ${stationId}`)

let realTimeData = {
            currentPower: 0,
            todayGeneration: 0,
            totalGeneration: 0,
            status: "unknown",
          }

// First get the station's devices to find inverters
          const devicesResponse = await fetchWithRetry(`${SOLARMAN_BASE_URL}/station/v1.0/device`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `bearer ${businessAuth.token}`,
            },
            body: JSON.stringify({ stationId: Number(stationId), page: 1, size: 200 }),
          })

if (devicesResponse.ok) {
            const devicesData = await devicesResponse.json()
            const devices = devicesData?.deviceListItems || devicesData?.list || []

// Find inverters and get their real-time data
            const inverters = devices.filter((d: any) =>
              String(d.deviceType || "")
                .toUpperCase()
                .includes("INVERTER"),
            )

if (inverters.length > 0) {
              // Get real-time data from the first inverter as station representative
              const firstInverter = inverters[0]
              const deviceId = firstInverter.deviceId || firstInverter.id
              const deviceSn = firstInverter.deviceSn || firstInverter.sn

if (deviceId && deviceSn) {
                try {
                  const currentDataResponse = await fetchWithRetry(`${SOLARMAN_BASE_URL}/device/v1.0/currentData`, {
                    method: "POST",
                    headers: {
                      "Content-Type": "application/json",
                      Authorization: `bearer ${businessAuth.token}`,
                    },
                    body: JSON.stringify({ deviceId: Number(deviceId), deviceSn: String(deviceSn) }),
                  })

if (currentDataResponse.ok) {
                    const currentData = await currentDataResponse.json()
                    const points = currentData?.dataList || currentData?.points || []

// Extract key metrics from points
                    const powerPoint = points.find((p: any) =>
                      ["pac", "power", "currentPower", "activePower"].includes(p.key || p.alias),
                    )
                    const todayPoint = points.find((p: any) =>
                      ["eToday", "dailyGeneration", "todayGeneration"].includes(p.key || p.alias),
                    )
                    const totalPoint = points.find((p: any) =>
                      ["eTotal", "totalGeneration", "cumulativeGeneration"].includes(p.key || p.alias),
                    )

realTimeData = {
                      currentPower: powerPoint?.value || 0,
                      todayGeneration: todayPoint?.value || 0,
                      totalGeneration: totalPoint?.value || 0,
                      status: (powerPoint?.value || 0) > 0 ? "online" : "offline",
                    }
                  }
                } catch (error) {
                  console.warn(`Failed to get current data for inverter ${deviceSn}:`, error)
                }
              }
            }
          }

return {
            ...station,
            ...realTimeData,
            lastUpdated: new Date().toISOString(),
          }
        } catch (error) {
          console.error(`Error getting real-time data for station ${station.id}:`, error)
          return {
            ...station,
            currentPower: 0,
            todayGeneration: 0,
            totalGeneration: 0,
            status: "error",
            lastUpdated: new Date().toISOString(),
          }
        }
      })

const batchResults = await Promise.allSettled(batchPromises)

batchResults.forEach((result) => {
        if (result.status === "fulfilled") {
          enrichedStations.push(result.value)
        } else {
          console.error("Failed to process station:", result.reason)
        }
      })

// Small delay between batches to avoid rate limiting
      if (i + concurrencyLimit < stations.length) {
        await new Promise((resolve) => setTimeout(resolve, 1000))
      }
    }

return enrichedStations
  }

async getAllInverters(
    stations: any[],
    token: string,
    tokenType: string,
    onProgress?: (current: number, total: number) => void,
  ) {
    const allInverters = []
    const concurrencyLimit = 5 // Process 5 stations at a time

// Process stations in batches for better performance
    for (let i = 0; i < stations.length; i += concurrencyLimit) {
      const batch = stations.slice(i, i + concurrencyLimit)

const batchPromises = batch.map(async (station) => {
        const stationId = station.id || station.stationId
        const stationInverters = []
        let devicePage = 1

while (true) {
          try {
            const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/station/v1.0/device`, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Authorization: `bearer ${token}`,
              },
              body: JSON.stringify({
                stationId,
                page: devicePage,
                size: 200,
              }),
            })

if (!response.ok) {
              console.warn(`Failed to get devices for station ${stationId}`)
              break
            }

const devicesData = await response.json()
            const devices = devicesData.deviceListItems || devicesData.list || []

// Filter only inverters
            const inverters = devices.filter((device: any) => {
              const deviceType = String(device.deviceType || "").toUpperCase()
              return ["INVERTER", "MICRO_INVERTER"].includes(deviceType)
            })

// Add station info to inverters
            const invertersWithStation = inverters.map((inv: any) => ({
              ...inv,
              stationId: String(stationId),
              stationName: station.stationName || station.name || `Estação ${stationId}`,
              id: inv.deviceId || inv.id,
              sn: inv.deviceSn || inv.sn,
              type: inv.deviceType,
              model: inv.deviceModel || inv.model,
            }))

stationInverters.push(...invertersWithStation)

if (devices.length < 200) break
            devicePage++
          } catch (error) {
            console.warn(`Error processing station ${stationId}:`, error)
            break
          }
        }

return stationInverters
      })

const batchResults = await Promise.allSettled(batchPromises)

batchResults.forEach((result) => {
        if (result.status === "fulfilled") {
          allInverters.push(...result.value)
        }
      })

// Update progress
      onProgress?.(i + batch.length, stations.length)
    }

return allInverters
  }

async getDeviceCurrentSafe(
    token: string,
    tokenType: string,
    { stationId, deviceId, deviceSn }: { stationId: string; deviceId: number; deviceSn: string },
  ) {
    // Direct attempt
    try {
      const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/device/v1.0/currentData`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `bearer ${token}`,
        },
        body: JSON.stringify({ deviceSn: String(deviceSn) }),
      })

if (response.ok) {
        const data = await response.json()
        return { ok: true, data }
      }

const errorData = await response.json().catch(() => ({}))
      if (errorData.code !== "2101040" && errorData.code !== "2101032") {
        throw new Error(`API error: ${response.status} - ${JSON.stringify(errorData)}`)
      }
      // Continue to repair logic for device not found errors
    } catch (error: any) {
      const isDeviceNotFound =
        error?.response?.data?.code === "2101040" ||
        error?.response?.data?.code === "2101032" ||
        error.message?.includes("2101040") ||
        error.message?.includes("2101032")

if (!isDeviceNotFound) throw error // Not "device not found", propagate
    }

// Repair logic: refetch device list and find correct deviceId
    console.log(`Device not found (2101040/2101032), searching for deviceSn ${deviceSn} in station ${stationId}`)

let fixedId: number | undefined
    const pageSize = 200
    let page = 1

while (true) {
      const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/station/v1.0/device`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `bearer ${token}`,
        },
        body: JSON.stringify({ stationId: Number(stationId), page, size: pageSize }),
      })

if (!response.ok) {
        throw new Error(`Failed to get devices for station ${stationId}`)
      }

const data = await response.json()
      const list = data?.deviceListItems || data?.list || []

const hit = list.find((d: any) => {
        const deviceSnMatch = (d.deviceSn || d.sn) === deviceSn
        const isInverter = String(d.deviceType || d.type || "")
          .toUpperCase()
          .includes("INVERTER")
        return deviceSnMatch && isInverter
      })

if (hit) {
        fixedId = hit.deviceId || hit.id
        break
      }

if (list.length < pageSize) break
      page++
    }

if (!fixedId) {
      throw new Error(`2101040: deviceSn ${deviceSn} não encontrado na estação ${stationId} (escopo atual).`)
    }

// Retry with corrected deviceId
    const response = await fetchWithRetry(`${SOLARMAN_BASE_URL}/device/v1.0/currentData`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `bearer ${token}`,
      },
      body: JSON.stringify({ deviceSn: String(deviceSn) }),
    })

if (!response.ok) {
      const errorData = await response.json().catch(() => ({}))
      throw new Error(`API error after repair: ${response.status} - ${JSON.stringify(errorData)}`)
    }

const data = await response.json()
    return { ok: true, data, repaired: true, newDeviceId: fixedId }
  }

async ensureBusiness() {
    const now = Math.floor(Date.now() / 1000)

// Check if we have a valid cached Business token
    const cached = getCachedToken(this.email, "3426")
    if (cached && cached.expiresAt > now + 300) {
      return {
        token: cached.token,
        tokenType: cached.tokenType,
        orgId: 3426,
      }
    }

// Get Smart token first
    const smartToken = await this.getToken()

// Get account info to discover orgId
    const infoResponse = await fetchWithRetry(`${SOLARMAN_BASE_URL}/account/v1.0/info`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `bearer ${smartToken.access_token}`,
      },
      body: JSON.stringify({}),
    })

if (!infoResponse.ok) {
      throw new Error("Failed to get account info")
    }

const infoData = await infoResponse.json()
    const orgId = infoData?.orgInfoList?.[0]?.companyId || 3426

// Get Business token with discovered orgId
    const businessToken = await this.getToken(orgId)

return {
      token: businessToken.access_token,
      tokenType: businessToken.token_type,
      orgId,
    }
  }
}
[V0_FILE]typescript:file="scripts/run-complete.js" isMerged="true"
const axios = require("axios")

async function runComplete() {
  try {
    console.log("🚀 Running Solarman inverters complete fetch...\n")

const response = await axios.post(
      "http://localhost:3000/api/solarman/inverters-complete",
      {},
      {
        headers: {
          "Content-Type": "application/json",
        },
        timeout: 300000, // 5 minutes timeout
      },
    )

console.log("✅ Success! Data fetched:")
    console.log(`📊 Stations: ${response.data.stations?.length || 0}`)
    console.log(`🔌 Inverters: ${response.data.inverters?.length || 0}`)
    console.log(`⚡ Real-time records: ${response.data.realTimeData?.length || 0}`)
    console.log(`📈 Historical records: ${response.data.historicalData?.length || 0}`)
    console.log(`🚨 Alert records: ${response.data.alerts?.length || 0}`)

console.log("\n📋 Full response:")
    console.log(JSON.stringify(response.data, null, 2))
  } catch (error) {
    console.error("❌ Error:", error.response?.data || error.message)
    process.exit(1)
  }
}

runComplete()
[V0_FILE]markdown:file="README.md" isMerged="true"
# Solarman Business API Integration

Complete Node.js API integration with Solarman Business OpenAPI using Business Token (orgId).

## Features

- ✅ Business Token authentication with orgId
- ✅ Automatic token caching with expiration
- ✅ HTTP client with interceptors and retry logic
- ✅ Complete data pipeline (stations, inverters, real-time, historical, alerts)
- ✅ Pagination support for large datasets
- ✅ Error handling and detailed logging
- ✅ PowerShell testing examples

## Environment Variables

\`\`\`env
SOLARMAN_BASE_URL=https://globalapi.solarmanpv.com
SOLARMAN_APP_ID=3124071724141602
SOLARMAN_APP_SECRET=b7fde09cb8d1174ffae342eca558ca8f
SOLARMAN_USERNAME=projetos.j7@gmail.com
SOLARMAN_PASSWORD=empresaj7
SOLARMAN_ORG_ID=3426
SOLARMAN_LANGUAGE=pt_BR
\`\`\`

## API Endpoint

### POST /api/solarman/inverters-complete

Returns consolidated data from all stations, inverters, real-time data, historical data, and alerts.

**Response Format:**
\`\`\`json
{
  "stations": [...],
  "inverters": [...], 
  "realTimeData": [...],
  "historicalData": [...],
  "alerts": [...]
}
\`\`\`

## Testing

### PowerShell Examples

```powershell
# Health check (if available)
Invoke-RestMethod "http://localhost:3000/health"

# Complete data fetch
Invoke-RestMethod -Uri "http://localhost:3000/api/solarman/inverters-complete" -Method POST `
  -ContentType "application/json" -Body "{}" | ConvertTo-Json -Depth 10
[V0_FILE]typescript:file="app/api/solarman/inverters-complete/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import axios from "axios"
import crypto from "crypto"

// ======= CONFIGURAÇÃO =======
const BASE = process.env.SOLARMAN_BASE_URL || "https://globalapi.solarmanpv.com"
const APP_ID = process.env.SOLARMAN_APP_ID || "3124071724141602"
const APP_SEC = process.env.SOLARMAN_APP_SECRET || "b7fde09cb8d1174ffae342eca558ca8f"
const EMAIL = process.env.SOLARMAN_USERNAME || "projetos.j7@gmail.com"
const PASSWORD = process.env.SOLARMAN_PASSWORD || "empresaj7"
const ORG_ID = Number(process.env.SOLARMAN_ORG_ID || 3426) // fornecido pela Solarman
const LANGUAGE = process.env.SOLARMAN_LANGUAGE || "pt_BR"

// ======= HELPERS =======
const sha256 = (s: string) => crypto.createHash("sha256").update(s, "utf8").digest("hex")
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
const today = () => new Date().toISOString().slice(0, 10)
const daysAgo = (n = 7) => new Date(Date.now() - n * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)

let token: string | null = null
let expAt = 0
let inflight: Promise<string> | null = null

// ======= AUTH BUSINESS (orgId) =======
// IMPORTANTE: orgId no BODY => gera BUSINESS TOKEN (necessário p/ plantas do Business)
async function fetchBusinessToken() {
  const url = `${BASE}/account/v1.0/token`
  const params = { appId: APP_ID, language: LANGUAGE }
  const body = {
    appSecret: APP_SEC,
    email: EMAIL,
    password: sha256(PASSWORD), // API espera SHA256
    orgId: ORG_ID,
  }

const { data } = await axios.post(url, body, {
    params,
    headers: { "Content-Type": "application/json" },
    timeout: 30000,
  })

if (!data?.access_token) {
    throw new Error(`Falha ao obter Business Token: ${JSON.stringify(data)}`)
  }
  return data
}

async function ensureToken(): Promise<string> {
  const now = Math.floor(Date.now() / 1000)
  if (token && now < expAt) return token
  if (inflight) return inflight

inflight = (async () => {
    const d = await fetchBusinessToken()
    token = d.access_token
    expAt = Math.floor(Date.now() / 1000) + Number.parseInt(d.expires_in || "0", 10) - 60
    console.log(`✔ Auth OK (business) | orgId=${ORG_ID}`)
    return token
  })()

try {
    return await inflight
  } finally {
    inflight = null
  }
}

// ======= AXIOS GLOBAL =======
const api = axios.create({ baseURL: BASE, timeout: 45000 })

api.interceptors.request.use(async (cfg) => {
  const t = await ensureToken()
  cfg.params = { ...(cfg.params || {}), appId: APP_ID, language: LANGUAGE }
  cfg.headers = { ...(cfg.headers || {}), Authorization: `bearer ${t}`, "Content-Type": "application/json" }
  return cfg
})

api.interceptors.response.use(undefined, async (err) => {
  const cfg = err.config || {}
  const retriable =
    err.code === "ECONNRESET" ||
    err.code === "ETIMEDOUT" ||
    (err.response && [408, 429, 500, 502, 503, 504].includes(err.response.status))
  cfg._retries = cfg._retries || 0
  if (retriable && cfg._retries < 3) {
    cfg._retries++
    await sleep(250 * cfg._retries)
    return api(cfg)
  }
  throw err
})

const post = (path: string, body: any) => api.post(path, body).then((r) => r.data)

// ======= ENDPOINTS =======
async function listStations(page = 1, size = 100) {
  return post("/station/v1.0/list", { page, size })
}

async function listStationsAll(size = 100) {
  let page = 1,
    out: any[] = []
  for (;;) {
    const d = await listStations(page, size)
    const list = d.stationList || d?.data?.list || []
    out.push(...list)
    if (list.length < size) break
    page++
  }
  return out
}

async function listStationDevices(stationId: number, page = 1, size = 100) {
  return post("/station/v1.0/device", { stationId, page, size })
}

async function listStationDevicesAll(stationId: number, size = 100) {
  let page = 1,
    out: any[] = []
  for (;;) {
    const d = await listStationDevices(stationId, page, size)
    const list = d.deviceListItems || d.deviceList || d?.data?.list || []
    out.push(...list)
    if (list.length < size) break
    page++
  }
  return out
}

async function stationRealtime(stationId: number) {
  return post("/station/v1.0/realTime", { stationId })
}

async function stationHistory(
  stationId: number,
  { timeType = 2, startTime, endTime }: { timeType?: number; startTime: string; endTime: string },
) {
  return post("/station/v1.0/history", { stationId, timeType, startTime, endTime })
}

async function deviceCurrentData(deviceSn: string) {
  return post("/device/v1.0/currentData", { deviceSn: String(deviceSn) })
}

async function deviceHistorical(
  deviceSn: string,
  { timeType = 2, startTime, endTime }: { timeType?: number; startTime: string; endTime: string },
) {
  return post("/device/v1.0/historical", { deviceSn: String(deviceSn), timeType, startTime, endTime })
}

async function deviceAlerts(
  stationId: number,
  deviceId: number,
  { page = 1, size = 100, startTime, endTime }: { page?: number; size?: number; startTime: string; endTime: string },
) {
  return post("/device/v1.0/alertList", { stationId, deviceId, page, size, startTime, endTime })
}

// ======= LOG BONITO =======
function logTitle(t: string, results: any[]) {
  results.push({ type: "title", message: t })
  console.log(`\n=== ${t} ===`)
}

function logOK(t: string, results: any[]) {
  results.push({ type: "success", message: t })
  console.log(`✔ ${t}`)
}

function logWarn(t: string, results: any[]) {
  results.push({ type: "warning", message: t })
  console.warn(`⚠ ${t}`)
}

function logErr(t: string, results: any[]) {
  results.push({ type: "error", message: t })
  console.error(`✖ ${t}`)
}

function j(o: any) {
  return JSON.stringify(o, null, 2)
}

// ======= PIPELINE COMPLETO =======
async function runAll() {
  const results: any[] = []
  const data: any = {
    stations: [],
    inverters: [],
    realTimeData: [],
    historicalData: [],
    alerts: [],
  }

try {
    logTitle(`Solarman Business (BASE=${BASE})`, results)
    await ensureToken()

logTitle("Listando TODAS as plantas (station/list)", results)
    const stations = await listStationsAll(100)

data.stations = stations.map((s) => ({
      id: s.id || s.stationId,
      name: s.name,
      address: s.locationAddress || s.address,
      timezone: s.regionTimezone || s.timezone,
      installedCapacity: s.installedCapacity,
      createdDate: s.createdDate,
    }))

results.push({ type: "data", message: `Total de plantas: ${stations.length}`, data: { total: stations.length } })

for (let idx = 0; idx < stations.length; idx++) {
      const s = stations[idx]
      const stationId = s.id || s.stationId

logTitle(`Planta [${idx + 1}/${stations.length}] - ${s.name || "Sem Nome"} (ID=${stationId})`, results)

// Tempo real da ESTACAO
      try {
        logTitle(`Tempo real da estação ${stationId} (station/realTime)`, results)
        const rt = await stationRealtime(Number(stationId))

const stationIndex = data.stations.findIndex((st: any) => st.id === stationId)
        if (stationIndex >= 0) {
          data.stations[stationIndex].realtime = rt
        }

results.push({ type: "data", message: "Dados em tempo real da estação", data: rt })
      } catch (e: any) {
        logWarn(`Falha station-rt ID=${stationId}: ${e?.response?.data ? j(e.response.data) : e.message}`, results)
      }

// DISPOSITIVOS da planta
      let devices: any[] = []
      try {
        logTitle(`Dispositivos da estação ${stationId} (station/device)`, results)
        devices = await listStationDevicesAll(Number(stationId), 100)
        results.push({
          type: "data",
          message: `Total de dispositivos: ${devices.length}`,
          data: { total: devices.length },
        })

if (!devices.length) {
          logWarn(
            "Nenhum dispositivo retornado — se há devices no portal, provavelmente é escopo/permissão da planta.",
            results,
          )
        }
      } catch (e: any) {
        logErr(`Falha ao listar devices: ${e?.response?.data ? j(e.response.data) : e.message}`, results)
        continue
      }

// Filtrar apenas inversores
      const inverters = devices.filter((d) => {
        const deviceType = String(d.deviceType || "").toLowerCase()
        return deviceType.includes("inverter") || !d.deviceType // Se não tem tipo, considera todos
      })

data.inverters.push(
        ...inverters.map((inv) => ({
          stationId,
          deviceId: inv.deviceId || inv.id,
          deviceSn: inv.deviceSn || inv.sn || inv.serialNo,
          deviceName: inv.deviceName || inv.name,
          deviceType: inv.deviceType,
        })),
      )

// Para cada INVERTER: tempo real + histórico (hoje) + alertas (últimos 7 dias)
      for (let dIdx = 0; dIdx < inverters.length; dIdx++) {
        const d = inverters[dIdx]
        const deviceSn = d.deviceSn || d.sn || d.serialNo
        const deviceId = d.deviceId || d.id
        const deviceNm = d.deviceName || d.name || `Device ${deviceSn}`

logTitle(
          `Inversor [${dIdx + 1}/${inverters.length}] - ${deviceNm} (deviceSn=${deviceSn}, deviceId=${deviceId})`,
          results,
        )

// Tempo real do INVERSOR
        try {
          logTitle(`Tempo real do inversor ${deviceSn} (device/currentData)`, results)
          const cur = await deviceCurrentData(deviceSn)

data.realTimeData.push({
            stationId,
            deviceSn,
            data: cur,
          })

results.push({ type: "data", message: "Dados em tempo real do inversor", data: cur })
        } catch (e: any) {
          logWarn(`Falha inverter-rt ${deviceSn}: ${e?.response?.data ? j(e.response.data) : e.message}`, results)
        }

// Histórico (hoje)
        try {
          const start = today()
          logTitle(`Histórico do inversor ${deviceSn} (device/historical) dia=${start}`, results)
          const hist = await deviceHistorical(deviceSn, { timeType: 2, startTime: start, endTime: start })

data.historicalData.push({
            stationId,
            deviceSn,
            date: start,
            data: hist,
          })

results.push({ type: "data", message: "Dados históricos do inversor", data: hist })
        } catch (e: any) {
          logWarn(`Falha inverter-hist ${deviceSn}: ${e?.response?.data ? j(e.response.data) : e.message}`, results)
        }

// Alertas últimos 7 dias (precisa deviceId NUMÉRICO + stationId)
        try {
          const start = daysAgo(7),
            end = today()
          logTitle(`Alertas do deviceId=${deviceId} (device/alertList) período ${start}..${end}`, results)

if (!Number.isFinite(Number(deviceId))) {
            logWarn("deviceId não numérico — alguns tenants exigem deviceId numérico para alertList.", results)
          }

const alerts = await deviceAlerts(Number(stationId), Number(deviceId), {
            page: 1,
            size: 100,
            startTime: start,
            endTime: end,
          })

data.alerts.push({
            stationId,
            deviceId: Number(deviceId),
            start,
            end,
            data: alerts,
          })

results.push({ type: "data", message: "Alertas do inversor", data: alerts })
        } catch (e: any) {
          logWarn(
            `Falha inverter-alerts deviceId=${deviceId}: ${e?.response?.data ? j(e.response.data) : e.message}`,
            results,
          )
        }
      }
    }

results.push({ type: "title", message: "FIM" })

return data
  } catch (err: any) {
    const payload = err?.response?.data || err?.message || err
    logErr(`Erro fatal: ${typeof payload === "string" ? payload : JSON.stringify(payload, null, 2)}`, results)

throw new Error(typeof payload === "string" ? payload : JSON.stringify(payload, null, 2))
  }
}

// ======= EXECUÇÃO =======
export async function POST(request: NextRequest) {
  try {
    const result = await runAll()
    return NextResponse.json(result, { status: 200 })
  } catch (error: any) {
    console.error("Erro na execução completa:", error)
    return NextResponse.json(
      {
        error: error?.message || "Erro interno do servidor",
        stations: [],
        inverters: [],
        realTimeData: [],
        historicalData: [],
        alerts: [],
      },
      { status: 500 },
    )
  }
}

export async function GET() {
  return NextResponse.json({
    message: "Use POST para executar a coleta completa de dados dos inversores",
    endpoints: {
      "POST /api/solarman/inverters-complete": "Executa pipeline completo de coleta de dados",
    },
    configuration: {
      BASE,
      APP_ID,
      EMAIL,
      ORG_ID,
      LANGUAGE,
    },
  })
}
[V0_FILE]javascript:file="scripts/test-solarman.js" isEdit="true" isMerged="true"
// Script para testar a integração Solarman
// Executa: node scripts/test-solarman.js

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"

// Polyfill para fetch em Node.js mais antigo
if (!globalThis.fetch) {
  try {
    const { default: fetch } = require("node-fetch")
    globalThis.fetch = fetch
  } catch (e) {
    console.log("⚠️  node-fetch não encontrado. Instale com: npm install node-fetch")
    console.log("   Ou use Node.js 18+ que tem fetch nativo")
  }
}

async function testSolarmanIntegration() {
  console.log("🚀 Testando integração Solarman...")
  console.log(`🌐 URL: ${BASE_URL}/api/solarman/inverters-complete`)

try {
    console.log("🔍 Verificando se o servidor está rodando...")

const response = await fetch(`${BASE_URL}/api/solarman/inverters-complete`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    })

console.log(`📡 Status HTTP: ${response.status} ${response.statusText}`)

if (!response.ok) {
      const errorText = await response.text()
      console.log("📄 Resposta do servidor:", errorText)
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

const data = await response.json()

console.log("\n✅ Sucesso! Dados recebidos:")
    console.log(`📊 Estações: ${data.stations?.length || 0}`)
    console.log(`🔌 Inversores: ${data.inverters?.length || 0}`)
    console.log(`⚡ Dados tempo real: ${data.realTimeData?.length || 0}`)
    console.log(`📈 Dados históricos: ${data.historicalData?.length || 0}`)
    console.log(`🚨 Alertas: ${data.alerts?.length || 0}`)

// Salvar resultado em arquivo para análise
    const fs = require("fs")
    fs.writeFileSync("solarman-result.json", JSON.stringify(data, null, 2))
    console.log("\n💾 Resultado salvo em: solarman-result.json")

if (data.stations?.length > 0) {
      console.log("\n🏭 Primeira estação:", data.stations[0].name || data.stations[0].id)
    }
    if (data.inverters?.length > 0) {
      console.log("🔌 Primeiro inversor:", data.inverters[0].deviceName || data.inverters[0].deviceSn)
    }
  } catch (error) {
    console.error("\n❌ Erro:", error.message)

if (error.message.includes("fetch failed") || error.message.includes("ECONNREFUSED")) {
      console.log("\n🔧 Possíveis soluções:")
      console.log("   1. Certifique-se que o servidor Next.js está rodando: npm run dev")
      console.log("   2. Verifique se a porta 3000 está disponível")
      console.log("   3. Teste no browser: http://localhost:3000")
    }

if (error.message.includes("fetch is not defined")) {
      console.log("\n🔧 Instale node-fetch: npm install node-fetch")
      console.log("   Ou use Node.js 18+ que tem fetch nativo")
    }

process.exit(1)
  }
}

testSolarmanIntegration()
[V0_FILE]typescript:file="app/api/realtime/alerts/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { MOCK_ALERTS } from "@/lib/mock-data"

type RealTimeAlert = {
  id: string
  type: AlertType
  category: AlertCategory
  title: string
  description: string
  deviceId?: string
  deviceName?: string
  stationId?: string
  stationName?: string
  timestamp: string
  value?: number
  unit?: string
  threshold?: number
  status?: "active" | "acknowledged" | "resolved"
  severity?: "low" | "medium" | "high"
}

function generateDynamicMockAlerts(): RealTimeAlert[] {
  const baseAlerts = [...MOCK_ALERTS]

// Add some random variations to simulate real-time changes
  const dynamicAlerts = baseAlerts.map((alert) => ({
    ...alert,
    timestamp: new Date(Date.now() - Math.random() * 24 * 60 * 60 * 1000).toISOString(), // Random time in last 24h
  }))

// Occasionally add a new random alert
  if (Math.random() > 0.7) {
    const randomStations = ["1001", "1002", "1003", "1004", "1005"]
    const randomStation = randomStations[Math.floor(Math.random() * randomStations.length)]

dynamicAlerts.push({
      id: `dynamic-alert-${Date.now()}`,
      stationId: randomStation,
      stationName: `Planta ${randomStation}`,
      type: Math.random() > 0.5 ? "warning" : "info",
      severity: "low",
      title: "Variação de Performance",
      description: `Pequena variação detectada na geração de energia`,
      timestamp: new Date().toISOString(),
      status: "active",
      category: "performance",
    })
  }

return dynamicAlerts.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
}

function generateAlertsFromRealTimeData(stations: any[], inverters: any[]): RealTimeAlert[] {
  return generateDynamicMockAlerts()
}

await new Promise((resolve) => setTimeout(resolve, 400))

try {
    const alerts = generateDynamicMockAlerts()

console.log(`[v0] Generated ${alerts.length} mock alerts`)

return NextResponse.json({
      success: true,
      timestamp: new Date().toISOString(),
      count: alerts.length,
      alerts,
      summary: {
        critical: alerts.filter((a) => a.type === "critical").length,
        warning: alerts.filter((a) => a.type === "warning").length,
        info: alerts.filter((a) => a.type === "info").length,
        error: alerts.filter((a) => a.type === "error").length,
        success: alerts.filter((a) => a.type === "success").length,
      },
      categories: {
        temperature: alerts.filter((a) => a.category === "temperature").length,
        performance: alerts.filter((a) => a.category === "performance").length,
        communication: alerts.filter((a) => a.category === "communication").length,
        maintenance: alerts.filter((a) => a.category === "maintenance").length,
        efficiency: alerts.filter((a) => a.category === "efficiency").length,
      },
    })
  } catch (error) {
    console.error("Mock alerts error:", error)
    return NextResponse.json(
      {
        error: "Erro ao buscar alertas em tempo real",
        details: error instanceof Error ? error.message : "Erro desconhecido",
      },
      { status: 500 },
    )
  }
}

export async function POST(request: NextRequest) {
  const { email, password, orgId, interval = 60000 } = await request.json()

const stream = new ReadableStream({
    async start(controller) {
      const sendAlerts = async () => {
        try {
          const alerts = generateDynamicMockAlerts()

const data = {
            timestamp: new Date().toISOString(),
            count: alerts.length,
            alerts,
            summary: {
              critical: alerts.filter((a) => a.type === "critical").length,
              warning: alerts.filter((a) => a.type === "warning").length,
              info: alerts.filter((a) => a.type === "info").length,
              error: alerts.filter((a) => a.type === "error").length,
              success: alerts.filter((a) => a.type === "success").length,
            },
            source: "mock_data_stream",
          }

controller.enqueue(`data: ${JSON.stringify(data)}\n\n`)
        } catch (error) {
          console.error("Mock alert stream error:", error)
          controller.enqueue(`data: ${JSON.stringify({ error: "Erro ao buscar alertas" })}\n\n`)
        }
      }

// Send initial alerts
      await sendAlerts()

// Set up interval for continuous updates
      const intervalId = setInterval(sendAlerts, interval)

// Clean up on close
      request.signal.addEventListener("abort", () => {
        clearInterval(intervalId)
        controller.close()
      })
    },
  })

return new Response(stream, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Cache-Control",
    },
  })
}
[V0_FILE]typescriptreact:file="app/dashboard/plantas/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  Search,
  Zap,
  MapPin,
  Calendar,
  TrendingUp,
  Sun,
  Activity,
  RefreshCw,
  Database,
  Play,
  Pause,
} from "lucide-react"
import { useCurrentUser } from "@/lib/use-current-user"
import { useToast } from "@/hooks/use-toast"

interface MockStation {
  id: string
  name: string
  location: string
  capacity: number
  currentPower: number
  todayGeneration: number
  totalGeneration: number
  status: string
  syncedAt: Date
}

const mockStations: MockStation[] = [
  {
    id: "USF-001",
    name: "Usina Solar Fazenda Boa Vista",
    location: "Ribeirão Preto, SP",
    capacity: 2500,
    currentPower: 1850.5,
    todayGeneration: 12450.8,
    totalGeneration: 4567890.2,
    status: "online",
    syncedAt: new Date(),
  },
  {
    id: "USF-002",
    name: "Parque Solar Cerrado Verde",
    location: "Brasília, DF",
    capacity: 5000,
    currentPower: 3200.7,
    todayGeneration: 28900.5,
    totalGeneration: 8934567.1,
    status: "online",
    syncedAt: new Date(),
  },
  {
    id: "USF-003",
    name: "Complexo Solar Nordeste",
    location: "Petrolina, PE",
    capacity: 8500,
    currentPower: 6750.2,
    todayGeneration: 45600.3,
    totalGeneration: 15678234.8,
    status: "online",
    syncedAt: new Date(),
  },
  {
    id: "USF-004",
    name: "Usina Fotovoltaica Sul",
    location: "Curitiba, PR",
    capacity: 1200,
    currentPower: 0,
    todayGeneration: 8900.1,
    totalGeneration: 2345678.9,
    status: "offline",
    syncedAt: new Date(),
  },
  {
    id: "USF-005",
    name: "Solar Park Minas",
    location: "Uberlândia, MG",
    capacity: 3200,
    currentPower: 2100.8,
    todayGeneration: 18750.6,
    totalGeneration: 6789012.3,
    status: "warning",
    syncedAt: new Date(),
  },
  {
    id: "USF-006",
    name: "Fazenda Solar Pantanal",
    location: "Campo Grande, MS",
    capacity: 4800,
    currentPower: 3850.4,
    todayGeneration: 32100.9,
    totalGeneration: 9876543.2,
    status: "online",
    syncedAt: new Date(),
  },
]

function formatPower(value?: number | null) {
  if (value === null || value === undefined || isNaN(value)) return "—"
  if (value === 0) return "0 kW"
  if (value >= 1000) return `${(value / 1000).toFixed(1)} MW`
  return `${value.toFixed(1)} kW`
}

function formatEnergy(value?: number | null) {
  if (value === null || value === undefined || isNaN(value)) return "—"
  if (value === 0) return "0 kWh"
  if (value >= 1000) return `${(value / 1000).toFixed(1)} MWh`
  return `${value.toFixed(1)} kWh`
}

function getStatusColor(status?: string) {
  if (!status) return "bg-gray-500"
  const s = status.toLowerCase()
  if (s.includes("online") || s.includes("normal") || s.includes("ativo")) return "bg-emerald-500"
  if (s.includes("offline") || s.includes("erro") || s.includes("falha")) return "bg-red-500"
  if (s.includes("warning") || s.includes("alerta")) return "bg-amber-500"
  return "bg-blue-500"
}

function getStatusLabel(status?: string) {
  if (!status) return "Desconhecido"
  const s = status.toLowerCase()
  if (s.includes("online") || s.includes("normal") || s.includes("ativo")) return "Online"
  if (s.includes("offline") || s.includes("erro") || s.includes("falha")) return "Offline"
  if (s.includes("warning") || s.includes("alerta")) return "Alerta"
  return status
}

export default function PlantasPage() {
  const { user } = useCurrentUser()
  const { toast } = useToast()
  const [stations, setStations] = React.useState<MockStation[]>(mockStations)
  const [loading, setLoading] = React.useState(false)
  const [filter, setFilter] = React.useState("")
  const [refreshing, setRefreshing] = React.useState(false)

const [autoRefresh, setAutoRefresh] = React.useState(false)
  const [refreshInterval, setRefreshInterval] = React.useState(30) // seconds
  const [lastUpdate, setLastUpdate] = React.useState<Date | null>(new Date())
  const intervalRef = React.useRef<NodeJS.Timeout | null>(null)

React.useEffect(() => {
    if (autoRefresh) {
      intervalRef.current = setInterval(() => {
        setStations((prevStations) =>
          prevStations.map((station) => ({
            ...station,
            currentPower:
              station.status === "online" ? Math.max(0, station.currentPower + (Math.random() - 0.5) * 100) : 0,
            todayGeneration: station.todayGeneration + Math.random() * 50,
            syncedAt: new Date(),
          })),
        )
        setLastUpdate(new Date())
      }, refreshInterval * 1000)

return () => {
        if (intervalRef.current) {
          clearInterval(intervalRef.current)
        }
      }
    }
  }, [autoRefresh, refreshInterval])

const filteredStations = React.useMemo(() => {
    if (!filter.trim()) return stations
    const query = filter.toLowerCase()
    return stations.filter(
      (station) =>
        station.name.toLowerCase().includes(query) ||
        station.location?.toLowerCase().includes(query) ||
        station.id.toLowerCase().includes(query),
    )
  }, [stations, filter])

const totals = React.useMemo(() => {
    return filteredStations.reduce(
      (acc, station) => ({
        capacity: acc.capacity + (station.capacity || 0),
        totalGeneration: acc.totalGeneration + (station.totalGeneration || 0),
        todayGeneration: acc.todayGeneration + (station.todayGeneration || 0),
        currentPower: acc.currentPower + (station.currentPower || 0),
      }),
      { capacity: 0, totalGeneration: 0, todayGeneration: 0, currentPower: 0 },
    )
  }, [filteredStations])

const handleRefresh = async () => {
    setRefreshing(true)

await new Promise((resolve) => setTimeout(resolve, 1000))

setStations((prevStations) =>
      prevStations.map((station) => ({
        ...station,
        currentPower:
          station.status === "online"
            ? Math.max(0, station.capacity * 0.6 + (Math.random() - 0.5) * station.capacity * 0.4)
            : 0,
        todayGeneration: station.todayGeneration + Math.random() * 100,
        syncedAt: new Date(),
      })),
    )

setLastUpdate(new Date())
    setRefreshing(false)

toast({
      title: "Dados atualizados",
      description: `${stations.length} plantas atualizadas com dados simulados.`,
    })
  }

const toggleAutoRefresh = () => {
    setAutoRefresh(!autoRefresh)
    if (!autoRefresh) {
      setLastUpdate(new Date())
      toast({
        title: "Auto-refresh ativado",
        description: `Dados serão atualizados a cada ${refreshInterval} segundos.`,
      })
    } else {
      toast({
        title: "Auto-refresh desativado",
        description: "Atualizações automáticas foram pausadas.",
      })
    }
  }

if (loading) {
    return (
      <main className="space-y-6">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Sun className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Plantas Solares</h2>
            <p className="text-sm text-muted-foreground">Carregando plantas...</p>
          </div>
        </div>
      </main>
    )
  }

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Sun className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Plantas Solares</h2>
            <p className="text-sm text-muted-foreground">
              {filteredStations.length} planta{filteredStations.length !== 1 ? "s" : ""} encontrada
              {filteredStations.length !== 1 ? "s" : ""}
              {lastUpdate && (
                <span className="ml-2">• Última atualização: {lastUpdate.toLocaleTimeString("pt-BR")}</span>
              )}
            </p>
          </div>
        </div>

<div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <Switch id="auto-refresh" checked={autoRefresh} onCheckedChange={toggleAutoRefresh} />
            <Label htmlFor="auto-refresh" className="text-sm">
              Auto-refresh
            </Label>
            {autoRefresh && <Play className="h-4 w-4 text-emerald-600" />}
            {!autoRefresh && <Pause className="h-4 w-4 text-muted-foreground" />}
          </div>

<div className="flex items-center gap-2">
            <Label htmlFor="interval" className="text-sm text-muted-foreground">
              Intervalo:
            </Label>
            <select
              id="interval"
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(Number(e.target.value))}
              className="text-sm border rounded px-2 py-1"
              disabled={autoRefresh}
            >
              <option value={15}>15s</option>
              <option value={30}>30s</option>
              <option value={60}>1min</option>
              <option value={300}>5min</option>
            </select>
          </div>

<Button variant="outline" onClick={handleRefresh} disabled={refreshing}>
            <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
            Atualizar
          </Button>
        </div>
      </div>

{/* Summary Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Capacidade Total</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{formatPower(totals.capacity)}</div>
            </div>
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <Zap className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Geração Total</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{formatEnergy(totals.totalGeneration)}</div>
            </div>
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <TrendingUp className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Geração Hoje</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{formatEnergy(totals.todayGeneration)}</div>
            </div>
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <Sun className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Potência Atual</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{formatPower(totals.currentPower)}</div>
            </div>
            <div className="rounded-md bg-muted p-2 text-muted-foreground">
              <Activity className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search */}
      <div className="flex items-center gap-2">
        <Search className="h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Buscar por nome, localização ou ID..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="max-w-sm"
        />
      </div>

{/* Plants List */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredStations.map((station) => (
          <Card key={station.id} className="overflow-hidden">
            <CardHeader className="pb-3">
              <div className="flex items-start justify-between">
                <div className="space-y-1">
                  <CardTitle className="text-base leading-tight">{station.name}</CardTitle>
                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
                    <Database className="h-3 w-3" />
                    ID: {station.id}
                  </div>
                </div>
                <Badge variant="secondary" className="gap-1">
                  <div className={`h-2 w-2 rounded-full ${getStatusColor(station.status)}`} />
                  {getStatusLabel(station.status)}
                </Badge>
              </div>
            </CardHeader>

<CardContent className="space-y-4">
              {/* Location */}
              {station.location && (
                <div className="flex items-center gap-2 text-sm">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span className="truncate">{station.location}</span>
                </div>
              )}

{/* Metrics */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <div className="text-xs text-muted-foreground">Capacidade</div>
                  <div className="font-semibold">{formatPower(station.capacity)}</div>
                </div>
                <div>
                  <div className="text-xs text-muted-foreground">Potência Atual</div>
                  <div className="font-semibold">{formatPower(station.currentPower)}</div>
                </div>
                <div>
                  <div className="text-xs text-muted-foreground">Hoje</div>
                  <div className="font-semibold">{formatEnergy(station.todayGeneration)}</div>
                </div>
                <div>
                  <div className="text-xs text-muted-foreground">Total</div>
                  <div className="font-semibold">{formatEnergy(station.totalGeneration)}</div>
                </div>
              </div>

{/* Actions */}
              <div className="flex gap-2">
                <Button variant="outline" size="sm" className="flex-1 bg-transparent" asChild>
                  <a href={`/dashboard/inversores?station=${station.id}`}>Ver Inversores</a>
                </Button>
                <Button variant="outline" size="sm" asChild>
                  <a href={`/dashboard/plantas/${station.id}`}>Detalhes</a>
                </Button>
              </div>

{/* Last sync */}
              <div className="flex items-center gap-1 text-xs text-muted-foreground">
                <Calendar className="h-3 w-3" />
                Sincronizado: {station.syncedAt.toLocaleString("pt-BR")}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/inversores/page.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import {
  Search,
  Zap,
  Activity,
  RefreshCw,
  Database,
  Sun,
  TrendingUp,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Play,
  Pause,
  Battery,
  Thermometer,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useSearchParams } from "next/navigation"

interface MockInverterData {
  id: string
  sn: string
  stationId: string
  stationName: string
  model: string
  type: string
  syncedAt: { seconds: number }
  realTimeData?: {
    status: "online" | "offline" | "error"
    acPower: number
    energyDay: number
    energyTot: number
    acVoltL1: number
    freq: number
    pv1V?: number
    pv1A?: number
    pv2V?: number
    pv2A?: number
    temp?: number
    battSOC?: number
    timestamp: string
  }
  isLoading?: boolean
}

function formatPower(watts: number): string {
  if (watts >= 1000000) return `${(watts / 1000000).toFixed(1)} MW`
  if (watts >= 1000) return `${(watts / 1000).toFixed(1)} kW`
  return `${watts.toFixed(0)} W`
}

function formatEnergy(kwh: number): string {
  if (kwh >= 1000) return `${(kwh / 1000).toFixed(1)} MWh`
  return `${kwh.toFixed(1)} kWh`
}

function formatVoltage(volts: number): string {
  return `${volts.toFixed(1)} V`
}

function formatCurrent(amps: number): string {
  return `${amps.toFixed(1)} A`
}

function formatTemperature(temp: number): string {
  return `${temp.toFixed(1)}°C`
}

function formatFrequency(freq: number): string {
  return `${freq.toFixed(1)} Hz`
}

function formatSOC(soc: number): string {
  return `${soc.toFixed(0)}%`
}

function getStatusColor(status: string): string {
  switch (status) {
    case "online":
      return "bg-green-500"
    case "offline":
      return "bg-gray-400"
    case "error":
      return "bg-red-500"
    default:
      return "bg-gray-400"
  }
}

function getStatusIcon(status?: string) {
  switch (status) {
    case "online":
      return CheckCircle2
    case "offline":
      return XCircle
    case "error":
      return AlertTriangle
    default:
      return Activity
  }
}

const mockInverters: MockInverterData[] = [
  {
    id: "inv-001",
    sn: "SUN2000-15KTL-M0",
    stationId: "station-001",
    stationName: "Usina Solar Campinas",
    model: "Huawei SUN2000-15KTL-M0",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 3600 },
    realTimeData: {
      status: "online",
      acPower: 12500,
      energyDay: 45.2,
      energyTot: 15420.8,
      acVoltL1: 380.5,
      freq: 60.0,
      pv1V: 650.2,
      pv1A: 9.8,
      pv2V: 645.8,
      pv2A: 9.5,
      temp: 42.3,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-002",
    sn: "SMA-STP25000TL-30",
    stationId: "station-001",
    stationName: "Usina Solar Campinas",
    model: "SMA Sunny Tripower 25000TL-30",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 1800 },
    realTimeData: {
      status: "online",
      acPower: 18750,
      energyDay: 67.8,
      energyTot: 22150.4,
      acVoltL1: 382.1,
      freq: 59.9,
      pv1V: 648.5,
      pv1A: 14.2,
      pv2V: 651.3,
      pv2A: 14.8,
      temp: 38.7,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-003",
    sn: "ABB-PVS980-58",
    stationId: "station-002",
    stationName: "Fazenda Solar Ribeirão Preto",
    model: "ABB PVS980-58",
    type: "Central Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 900 },
    realTimeData: {
      status: "online",
      acPower: 52000,
      energyDay: 185.6,
      energyTot: 68420.2,
      acVoltL1: 13800,
      freq: 60.1,
      temp: 55.2,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-004",
    sn: "FRONIUS-ECO27.0-3-S",
    stationId: "station-003",
    stationName: "Telhado Industrial São José",
    model: "Fronius Eco 27.0-3-S",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 2700 },
    realTimeData: {
      status: "offline",
      acPower: 0,
      energyDay: 0,
      energyTot: 8950.3,
      acVoltL1: 0,
      freq: 0,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-005",
    sn: "GROWATT-MAX100KTL3-LV",
    stationId: "station-004",
    stationName: "Agro Solar Goiânia",
    model: "Growatt MAX 100KTL3 LV",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 600 },
    realTimeData: {
      status: "online",
      acPower: 85200,
      energyDay: 312.4,
      energyTot: 125680.7,
      acVoltL1: 380.8,
      freq: 60.0,
      pv1V: 652.1,
      pv1A: 65.2,
      pv2V: 649.8,
      pv2A: 64.8,
      temp: 48.9,
      battSOC: 85.2,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-006",
    sn: "DELTA-RPI-M50A",
    stationId: "station-005",
    stationName: "Residencial Premium Brasília",
    model: "Delta RPI M50A",
    type: "Micro Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 1200 },
    realTimeData: {
      status: "error",
      acPower: 0,
      energyDay: 12.3,
      energyTot: 4250.8,
      acVoltL1: 220.5,
      freq: 60.0,
      pv1V: 35.2,
      pv1A: 0.8,
      temp: 65.4,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-007",
    sn: "CANADIAN-CSI-50KTL-GS",
    stationId: "station-006",
    stationName: "Parque Solar Bahia",
    model: "Canadian Solar CSI-50KTL-GS",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 450 },
    realTimeData: {
      status: "online",
      acPower: 42800,
      energyDay: 156.7,
      energyTot: 58920.4,
      acVoltL1: 381.2,
      freq: 59.8,
      pv1V: 647.3,
      pv1A: 32.1,
      pv2V: 650.8,
      pv2A: 33.2,
      temp: 44.6,
      timestamp: new Date().toISOString(),
    },
  },
  {
    id: "inv-008",
    sn: "SUNGROW-SG110CX",
    stationId: "station-002",
    stationName: "Fazenda Solar Ribeirão Preto",
    model: "Sungrow SG110CX",
    type: "String Inverter",
    syncedAt: { seconds: Date.now() / 1000 - 1800 },
    realTimeData: {
      status: "online",
      acPower: 95600,
      energyDay: 348.9,
      energyTot: 142580.6,
      acVoltL1: 380.9,
      freq: 60.1,
      pv1V: 651.5,
      pv1A: 72.8,
      pv2V: 648.2,
      pv2A: 71.9,
      temp: 41.2,
      battSOC: 92.4,
      timestamp: new Date().toISOString(),
    },
  },
]

function isValidSerialNumber(sn: string): boolean {
  return !sn.startsWith("INV-")
}

export default function InversoresPage() {
  const { toast } = useToast()
  const searchParams = useSearchParams()
  const stationFilter = searchParams.get("station")

const [inverters, setInverters] = React.useState<MockInverterData[]>([])
  const [loading, setLoading] = React.useState(true)
  const [filter, setFilter] = React.useState("")
  const [refreshing, setRefreshing] = React.useState(false)
  const [loadingRealTime, setLoadingRealTime] = React.useState(false)

const [autoRefresh, setAutoRefresh] = React.useState(true)
  const [refreshInterval, setRefreshInterval] = React.useState(30)
  const [lastUpdate, setLastUpdate] = React.useState<Date | null>(null)
  const intervalRef = React.useRef<NodeJS.Timeout | null>(null)

React.useEffect(() => {
    setLoading(true)

// Simulate loading delay
    setTimeout(() => {
      let filteredList = mockInverters

if (stationFilter) {
        filteredList = mockInverters.filter((inv) => inv.stationId === stationFilter)
      }

setInverters(filteredList)
      setLoading(false)
      setLastUpdate(new Date())
    }, 1000)
  }, [stationFilter])

const simulateDataRefresh = () => {
    setInverters((prev) =>
      prev.map((inv) => {
        if (!inv.realTimeData || inv.realTimeData.status === "offline") return inv

// Add small random variations to simulate real-time changes
        const powerVariation = (Math.random() - 0.5) * 0.1 // ±5% variation
        const energyIncrease = Math.random() * 0.5 // Small energy increase

return {
          ...inv,
          realTimeData: {
            ...inv.realTimeData,
            acPower: Math.max(0, inv.realTimeData.acPower * (1 + powerVariation)),
            energyDay: inv.realTimeData.energyDay + energyIncrease,
            temp: inv.realTimeData.temp ? inv.realTimeData.temp + (Math.random() - 0.5) * 2 : undefined,
            timestamp: new Date().toISOString(),
          },
        }
      }),
    )
    setLastUpdate(new Date())
  }

React.useEffect(() => {
    if (autoRefresh && inverters.length > 0) {
      intervalRef.current = setInterval(() => {
        simulateDataRefresh()
      }, refreshInterval * 1000)

return () => {
        if (intervalRef.current) {
          clearInterval(intervalRef.current)
        }
      }
    }
  }, [autoRefresh, refreshInterval, inverters.length])

// Filter inverters based on search
  const filteredInverters = React.useMemo(() => {
    if (!filter.trim()) return inverters
    const query = filter.toLowerCase()
    return inverters.filter(
      (inverter) =>
        inverter.sn.toLowerCase().includes(query) ||
        inverter.stationName.toLowerCase().includes(query) ||
        inverter.model?.toLowerCase().includes(query) ||
        inverter.type.toLowerCase().includes(query) ||
        inverter.id.toLowerCase().includes(query),
    )
  }, [inverters, filter])

// Calculate totals
  const totals = React.useMemo(() => {
    const result = filteredInverters.reduce(
      (acc, inverter) => ({
        totalInverters: acc.totalInverters + 1,
        onlineInverters: acc.onlineInverters + (inverter.realTimeData?.status === "online" ? 1 : 0),
        totalPower: acc.totalPower + (inverter.realTimeData?.acPower || 0),
        totalEnergyToday: acc.totalEnergyToday + (inverter.realTimeData?.energyDay || 0),
        totalEnergyTotal: acc.totalEnergyTotal + (inverter.realTimeData?.energyTot || 0),
        invalidSerialNumbers: acc.invalidSerialNumbers + (!isValidSerialNumber(inverter.sn) ? 1 : 0),
      }),
      {
        totalInverters: 0,
        onlineInverters: 0,
        totalPower: 0,
        totalEnergyToday: 0,
        totalEnergyTotal: 0,
        invalidSerialNumbers: 0,
      },
    )

return result
  }, [filteredInverters])

const handleRefreshAll = async () => {
    if (inverters.length === 0) return
    setRefreshing(true)

// Simulate refresh delay
    setTimeout(() => {
      simulateDataRefresh()
      setRefreshing(false)
      toast({
        title: "Dados atualizados",
        description: "Os dados em tempo real foram atualizados com sucesso.",
      })
    }, 2000)
  }

const toggleAutoRefresh = () => {
    setAutoRefresh(!autoRefresh)
    if (!autoRefresh) {
      toast({
        title: "Auto-refresh ativado",
        description: `Dados dos inversores serão atualizados a cada ${refreshInterval} segundos.`,
      })
    } else {
      toast({
        title: "Auto-refresh desativado",
        description: "Atualizações automáticas foram pausadas.",
      })
    }
  }

const refreshInverter = (inverterId: string) => {
    setInverters((prev) =>
      prev.map((inv) => {
        if (inv.id !== inverterId) return inv

return {
          ...inv,
          isLoading: true,
        }
      }),
    )

setTimeout(() => {
      setInverters((prev) =>
        prev.map((inv) => {
          if (inv.id !== inverterId) return inv

if (!inv.realTimeData) return { ...inv, isLoading: false }

const powerVariation = (Math.random() - 0.5) * 0.2
          const energyIncrease = Math.random() * 1.0

return {
            ...inv,
            isLoading: false,
            realTimeData: {
              ...inv.realTimeData,
              acPower: Math.max(0, inv.realTimeData.acPower * (1 + powerVariation)),
              energyDay: inv.realTimeData.energyDay + energyIncrease,
              temp: inv.realTimeData.temp ? inv.realTimeData.temp + (Math.random() - 0.5) * 3 : undefined,
              timestamp: new Date().toISOString(),
            },
          }
        }),
      )
    }, 1500)
  }

if (loading) {
    return (
      <main className="space-y-6">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Zap className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Inversores</h2>
            <p className="text-sm text-muted-foreground">Carregando inversores...</p>
          </div>
        </div>
      </main>
    )
  }

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <Zap className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Inversores</h2>
            <p className="text-sm text-muted-foreground">
              {filteredInverters.length} inversor{filteredInverters.length !== 1 ? "es" : ""} encontrado
              {filteredInverters.length !== 1 ? "s" : ""}
              {stationFilter && " (filtrado por planta)"}
              {lastUpdate && (
                <span className="ml-2">• Última atualização: {lastUpdate.toLocaleTimeString("pt-BR")}</span>
              )}
              {loadingRealTime && <span className="ml-2 text-emerald-600">• Carregando dados em tempo real...</span>}
            </p>
          </div>
        </div>

<div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <Switch id="auto-refresh-inverters" checked={autoRefresh} onCheckedChange={toggleAutoRefresh} />
            <Label htmlFor="auto-refresh-inverters" className="text-sm">
              Auto-refresh
            </Label>
            {autoRefresh && <Play className="h-4 w-4 text-emerald-600" />}
            {!autoRefresh && <Pause className="h-4 w-4 text-muted-foreground" />}
          </div>

<div className="flex items-center gap-2">
            <Label htmlFor="interval-inverters" className="text-sm text-muted-foreground">
              Intervalo:
            </Label>
            <select
              id="interval-inverters"
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(Number(e.target.value))}
              className="text-sm border rounded px-2 py-1"
              disabled={autoRefresh}
            >
              <option value={15}>15s</option>
              <option value={30}>30s</option>
              <option value={60}>1min</option>
              <option value={300}>5min</option>
            </select>
          </div>

<Button variant="outline" onClick={handleRefreshAll} disabled={refreshing || loadingRealTime}>
            <RefreshCw className={`mr-2 h-4 w-4 ${refreshing || loadingRealTime ? "animate-spin" : ""}`} />
            Atualizar Dados
          </Button>
        </div>
      </div>

{totals.invalidSerialNumbers > 0 && (
        <Card className="border-amber-200 bg-amber-50">
          <CardContent className="flex items-center gap-3 p-4">
            <AlertTriangle className="h-5 w-5 text-amber-600" />
            <div>
              <div className="font-medium text-amber-800">
                {totals.invalidSerialNumbers} inversor{totals.invalidSerialNumbers !== 1 ? "es" : ""} com número de
                série inválido
              </div>
              <div className="text-sm text-amber-700">
                Estes inversores não possuem números de série válidos da Solarman e não podem ter dados em tempo real.
                Execute uma nova sincronização para tentar obter os números corretos.
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Summary Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Total de Inversores</div>
              <div className="mt-1 text-2xl font-semibold leading-none">{totals.totalInverters}</div>
              <div className="mt-1 text-xs text-emerald-600 font-medium">{totals.onlineInverters} online</div>
            </div>
            <div className="rounded-md bg-emerald-100 p-2 text-emerald-600">
              <Zap className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Potência Atual</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-blue-600">
                {totals.totalPower > 0 ? formatPower(totals.totalPower) : "0 W"}
              </div>
            </div>
            <div className="rounded-md bg-blue-100 p-2 text-blue-600">
              <Activity className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Geração Hoje</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-orange-600">
                {totals.totalEnergyToday > 0 ? formatEnergy(totals.totalEnergyToday) : "0 kWh"}
              </div>
            </div>
            <div className="rounded-md bg-orange-100 p-2 text-orange-600">
              <Sun className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="flex items-center justify-between p-4">
            <div>
              <div className="text-xs text-muted-foreground">Geração Total</div>
              <div className="mt-1 text-2xl font-semibold leading-none text-green-600">
                {totals.totalEnergyTotal > 0 ? formatEnergy(totals.totalEnergyTotal) : "0 kWh"}
              </div>
            </div>
            <div className="rounded-md bg-green-100 p-2 text-green-600">
              <TrendingUp className="h-5 w-5" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Search */}
      <div className="flex items-center gap-2">
        <Search className="h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="Buscar por SN, planta, modelo ou tipo..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="max-w-sm"
        />
      </div>

{/* Inverters List */}
      {filteredInverters.length === 0 ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <Database className="h-12 w-12 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold mb-2">Nenhum inversor encontrado</h3>
            <p className="text-sm text-muted-foreground text-center mb-4">
              {inverters.length === 0
                ? "Conecte uma integração para sincronizar seus inversores."
                : "Nenhum inversor corresponde aos critérios de busca."}
            </p>
            {inverters.length === 0 && (
              <Button asChild>
                <a href="/dashboard/integracoes">Conectar Integração</a>
              </Button>
            )}
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
          {filteredInverters.map((inverter) => {
            const StatusIcon = getStatusIcon(inverter.realTimeData?.status)
            const hasValidSN = isValidSerialNumber(inverter.sn)

return (
              <Card key={inverter.id} className={`overflow-hidden ${!hasValidSN ? "border-amber-200" : ""}`}>
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between">
                    <div className="space-y-1">
                      <CardTitle className="text-base leading-tight flex items-center gap-2">
                        {inverter.sn}
                        {!hasValidSN && (
                          <AlertTriangle className="h-4 w-4 text-amber-600" title="Número de série inválido" />
                        )}
                      </CardTitle>
                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <Database className="h-3 w-3" />
                        {inverter.stationName}
                      </div>
                    </div>
                    <div className="flex flex-col gap-1">
                      {inverter.realTimeData?.status && (
                        <Badge variant="secondary" className="gap-1">
                          <div className={`h-2 w-2 rounded-full ${getStatusColor(inverter.realTimeData.status)}`} />
                          <StatusIcon className="h-3 w-3" />
                          {inverter.realTimeData.status === "online"
                            ? "Online"
                            : inverter.realTimeData.status === "offline"
                              ? "Offline"
                              : "Erro"}
                        </Badge>
                      )}
                      <Badge variant="outline" className="text-xs">
                        {inverter.type}
                      </Badge>
                      {!hasValidSN && (
                        <Badge variant="secondary" className="text-xs bg-amber-100 text-amber-800">
                          SN Inválido
                        </Badge>
                      )}
                    </div>
                  </div>
                </CardHeader>

<CardContent className="space-y-4">
                  {/* Model */}
                  {inverter.model && (
                    <div className="text-sm">
                      <span className="text-muted-foreground">Modelo: </span>
                      <span className="font-medium">{inverter.model}</span>
                    </div>
                  )}

{!hasValidSN ? (
                    <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
                      <div className="flex items-center gap-2 text-amber-800">
                        <AlertTriangle className="h-4 w-4" />
                        <span className="text-sm font-medium">Número de série inválido</span>
                      </div>
                      <p className="text-xs text-amber-700 mt-1">
                        Este inversor não possui um número de série válido da Solarman. Dados em tempo real não estão
                        disponíveis.
                      </p>
                    </div>
                  ) : inverter.isLoading ? (
                    <div className="flex items-center justify-center py-8">
                      <RefreshCw className="h-6 w-6 animate-spin text-emerald-600" />
                      <span className="ml-2 text-sm text-muted-foreground">Carregando dados...</span>
                    </div>
                  ) : inverter.realTimeData ? (
                    <div className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="bg-blue-50 rounded-lg p-3">
                          <div className="flex items-center gap-2 mb-1">
                            <Activity className="h-4 w-4 text-blue-600" />
                            <span className="text-xs font-medium text-blue-800">Potência Atual</span>
                          </div>
                          <div className="text-lg font-bold text-blue-900">
                            {inverter.realTimeData.acPower ? formatPower(inverter.realTimeData.acPower) : "0 W"}
                          </div>
                        </div>
                        <div className="bg-orange-50 rounded-lg p-3">
                          <div className="flex items-center gap-2 mb-1">
                            <Sun className="h-4 w-4 text-orange-600" />
                            <span className="text-xs font-medium text-orange-800">Geração Hoje</span>
                          </div>
                          <div className="text-lg font-bold text-orange-900">
                            {inverter.realTimeData.energyDay ? formatEnergy(inverter.realTimeData.energyDay) : "0 kWh"}
                          </div>
                        </div>
                      </div>

{/* AC & DC Data */}
                      <div className="space-y-3">
                        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                          Dados AC
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <div className="text-xs text-muted-foreground">Tensão</div>
                            <div className="font-semibold">{formatVoltage(inverter.realTimeData.acVoltL1)}</div>
                          </div>
                          <div>
                            <div className="text-xs text-muted-foreground">Frequência</div>
                            <div className="font-semibold">{formatFrequency(inverter.realTimeData.freq)}</div>
                          </div>
                        </div>
                      </div>

{/* PV Strings */}
                      {(inverter.realTimeData.pv1V || inverter.realTimeData.pv2V) && (
                        <div className="space-y-3">
                          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
                            Strings PV
                          </div>
                          <div className="grid grid-cols-2 gap-3">
                            {inverter.realTimeData.pv1V && (
                              <div className="bg-gray-50 rounded p-2">
                                <div className="text-xs text-muted-foreground mb-1">String 1</div>
                                <div className="text-sm font-semibold">{formatVoltage(inverter.realTimeData.pv1V)}</div>
                                <div className="text-xs text-muted-foreground">
                                  {formatCurrent(inverter.realTimeData.pv1A!)}
                                </div>
                              </div>
                            )}
                            {inverter.realTimeData.pv2V && (
                              <div className="bg-gray-50 rounded p-2">
                                <div className="text-xs text-muted-foreground mb-1">String 2</div>
                                <div className="text-sm font-semibold">{formatVoltage(inverter.realTimeData.pv2V)}</div>
                                <div className="text-xs text-muted-foreground">
                                  {formatCurrent(inverter.realTimeData.pv2A!)}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      )}

{/* Additional metrics */}
                      <div className="grid grid-cols-3 gap-3">
                        {inverter.realTimeData.temp && (
                          <div className="text-center">
                            <Thermometer className="h-4 w-4 mx-auto text-red-500 mb-1" />
                            <div className="text-xs text-muted-foreground">Temp</div>
                            <div className="font-semibold text-sm">{formatTemperature(inverter.realTimeData.temp)}</div>
                          </div>
                        )}
                        {inverter.realTimeData.battSOC && (
                          <div className="text-center">
                            <Battery className="h-4 w-4 mx-auto text-green-500 mb-1" />
                            <div className="text-xs text-muted-foreground">Bateria</div>
                            <div className="font-semibold text-sm">{formatSOC(inverter.realTimeData.battSOC)}</div>
                          </div>
                        )}
                        {inverter.realTimeData.energyTot && (
                          <div className="text-center">
                            <TrendingUp className="h-4 w-4 mx-auto text-green-500 mb-1" />
                            <div className="text-xs text-muted-foreground">Total</div>
                            <div className="font-semibold text-sm">{formatEnergy(inverter.realTimeData.energyTot)}</div>
                          </div>
                        )}
                      </div>

{/* Last update */}
                      {inverter.realTimeData.timestamp && (
                        <div className="text-xs text-muted-foreground text-center">
                          Atualizado: {new Date(inverter.realTimeData.timestamp).toLocaleString("pt-BR")}
                        </div>
                      )}
                    </div>
                  ) : (
                    <div className="text-center py-4">
                      <Button
                        variant="outline"
                        size="sm"
                        className="flex-1 bg-transparent"
                        onClick={() => refreshInverter(inverter.id)}
                        disabled={inverter.isLoading}
                      >
                        <Activity className="mr-2 h-4 w-4" />
                        Carregar Dados em Tempo Real
                      </Button>
                    </div>
                  )}

{/* Actions */}
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 bg-transparent"
                      onClick={() => refreshInverter(inverter.id)}
                      disabled={inverter.isLoading || !hasValidSN}
                    >
                      <RefreshCw className={`mr-2 h-4 w-4 ${inverter.isLoading ? "animate-spin" : ""}`} />
                      Atualizar
                    </Button>
                    <Button variant="outline" size="sm" asChild>
                      <a href={`/dashboard/plantas?inverter=${inverter.id}`}>Ver Planta</a>
                    </Button>
                  </div>

{/* Last sync */}
                  {inverter.syncedAt && (
                    <div className="text-xs text-muted-foreground">
                      Sincronizado: {new Date(inverter.syncedAt.seconds * 1000).toLocaleString("pt-BR")}
                    </div>
                  )}
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/unidades-consumidoras/page.tsx" isMerged="true"
"use client"
import { useParams, useRouter } from "next/navigation"
import { ArrowLeft, Zap, MapPin, TrendingUp, AlertTriangle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

// Mock data for consumer units
const mockConsumerUnits = [
  {
    id: "UC001",
    codigo: "12345678901",
    endereco: "Rua das Flores, 123 - Centro",
    cidade: "São Paulo",
    estado: "SP",
    cep: "01234-567",
    classe: "Residencial",
    subgrupo: "B1",
    modalidade: "Convencional",
    demandaContratada: 0,
    consumoMedio: 450,
    consumoUltimoMes: 523,
    valorUltimaFatura: 387.65,
    dataLeitura: "2024-01-15",
    status: "Ativa",
    plantaAssociada: "Planta Solar Residencial",
  },
  {
    id: "UC002",
    codigo: "98765432109",
    endereco: "Av. Industrial, 456 - Distrito Industrial",
    cidade: "São Paulo",
    estado: "SP",
    cep: "04567-890",
    classe: "Comercial",
    subgrupo: "B3",
    modalidade: "Horária Azul",
    demandaContratada: 150,
    consumoMedio: 8500,
    consumoUltimoMes: 9234,
    valorUltimaFatura: 4567.89,
    dataLeitura: "2024-01-18",
    status: "Ativa",
    plantaAssociada: "Planta Solar Comercial",
  },
  {
    id: "UC003",
    codigo: "55566677788",
    endereco: "Estrada Rural, Km 15 - Zona Rural",
    cidade: "Campinas",
    estado: "SP",
    cep: "13000-000",
    classe: "Rural",
    subgrupo: "B2",
    modalidade: "Convencional",
    demandaContratada: 0,
    consumoMedio: 1200,
    consumoUltimoMes: 1456,
    valorUltimaFatura: 892.34,
    dataLeitura: "2024-01-12",
    status: "Pendente",
    plantaAssociada: "Planta Solar Rural",
  },
]

function formatCurrency(value: number) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(value)
}

function formatDate(dateString: string) {
  return new Date(dateString).toLocaleDateString("pt-BR")
}

export default function UnidadesConsumidorasPage() {
  const params = useParams()
  const router = useRouter()

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="sm" onClick={() => router.back()}>
          <ArrowLeft className="h-4 w-4 mr-2" />
          Voltar
        </Button>
      </div>

<div>
        <h2 className="text-2xl font-bold tracking-tight">Unidades Consumidoras</h2>
        <p className="text-muted-foreground">Gerenciamento das unidades consumidoras do cliente</p>
      </div>

{/* Summary Cards */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de UCs</CardTitle>
            <Zap className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{mockConsumerUnits.length}</div>
            <p className="text-xs text-muted-foreground">unidades ativas</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Consumo Total</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {mockConsumerUnits.reduce((acc, uc) => acc + uc.consumoUltimoMes, 0).toLocaleString()} kWh
            </div>
            <p className="text-xs text-muted-foreground">último mês</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Valor Total</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {formatCurrency(mockConsumerUnits.reduce((acc, uc) => acc + uc.valorUltimaFatura, 0))}
            </div>
            <p className="text-xs text-muted-foreground">última fatura</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pendências</CardTitle>
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {mockConsumerUnits.filter((uc) => uc.status === "Pendente").length}
            </div>
            <p className="text-xs text-muted-foreground">requer atenção</p>
          </CardContent>
        </Card>
      </div>

{/* Consumer Units List */}
      <div className="space-y-4">
        {mockConsumerUnits.map((uc) => (
          <Card key={uc.id}>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-lg">UC {uc.codigo}</CardTitle>
                  <p className="text-sm text-muted-foreground flex items-center gap-1">
                    <MapPin className="h-3 w-3" />
                    {uc.endereco}, {uc.cidade} - {uc.estado}
                  </p>
                </div>
                <Badge
                  variant={uc.status === "Ativa" ? "default" : "secondary"}
                  className={uc.status === "Ativa" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}
                >
                  {uc.status}
                </Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {/* Informações Básicas */}
                <div className="space-y-3">
                  <h4 className="font-semibold text-sm">Informações Básicas</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Classe:</span>
                      <span className="font-medium">{uc.classe}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Subgrupo:</span>
                      <span className="font-medium">{uc.subgrupo}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Modalidade:</span>
                      <span className="font-medium">{uc.modalidade}</span>
                    </div>
                    {uc.demandaContratada > 0 && (
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Demanda:</span>
                        <span className="font-medium">{uc.demandaContratada} kW</span>
                      </div>
                    )}
                  </div>
                </div>

{/* Consumo */}
                <div className="space-y-3">
                  <h4 className="font-semibold text-sm">Consumo</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Médio:</span>
                      <span className="font-medium">{uc.consumoMedio.toLocaleString()} kWh</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Último mês:</span>
                      <span className="font-medium">{uc.consumoUltimoMes.toLocaleString()} kWh</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Valor fatura:</span>
                      <span className="font-medium">{formatCurrency(uc.valorUltimaFatura)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Última leitura:</span>
                      <span className="font-medium">{formatDate(uc.dataLeitura)}</span>
                    </div>
                  </div>
                </div>

{/* Planta Associada */}
                <div className="space-y-3">
                  <h4 className="font-semibold text-sm">Planta Solar</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center gap-2">
                      <Zap className="h-4 w-4 text-green-600" />
                      <span className="font-medium">{uc.plantaAssociada}</span>
                    </div>
                    <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                      Conectada
                    </Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/unidades-consumidoras/loading.tsx" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function UnidadesConsumidorasLoading() {
  return (
    <main className="space-y-6">
      {/* Header skeleton */}
      <div className="animate-pulse">
        <div className="h-8 bg-muted rounded w-64 mb-2"></div>
        <div className="h-4 bg-muted rounded w-96"></div>
      </div>

{/* Summary cards skeleton */}
      <div className="grid gap-4 md:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <div className="h-4 bg-muted rounded w-20 animate-pulse"></div>
              <div className="h-4 w-4 bg-muted rounded animate-pulse"></div>
            </CardHeader>
            <CardContent>
              <div className="h-8 bg-muted rounded w-16 mb-1 animate-pulse"></div>
              <div className="h-3 bg-muted rounded w-24 animate-pulse"></div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Consumer units skeleton */}
      <div className="space-y-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <Card key={i}>
            <CardHeader>
              <div className="flex items-center justify-between">
                <div className="space-y-2">
                  <div className="h-6 bg-muted rounded w-32 animate-pulse"></div>
                  <div className="h-4 bg-muted rounded w-64 animate-pulse"></div>
                </div>
                <div className="h-6 bg-muted rounded w-16 animate-pulse"></div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-3">
                {Array.from({ length: 3 }).map((_, j) => (
                  <div key={j} className="space-y-3">
                    <div className="h-4 bg-muted rounded w-24 animate-pulse"></div>
                    <div className="space-y-2">
                      {Array.from({ length: 4 }).map((_, k) => (
                        <div key={k} className="flex justify-between">
                          <div className="h-3 bg-muted rounded w-16 animate-pulse"></div>
                          <div className="h-3 bg-muted rounded w-20 animate-pulse"></div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  Users,
  Plug,
  ServerCog,
  ArrowUpRight,
  ArrowDownRight,
  Sun,
  Zap,
  DollarSign,
  Leaf,
  TrendingUp,
  AlertTriangle,
  Battery,
  Thermometer,
  Cloud,
  Target,
  Award,
  Activity,
} from "lucide-react"
import {
  Line,
  Area,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  ComposedChart,
} from "recharts"
import { useEffect, useState } from "react"

const energyData = [
  { time: "00:00", production: 0, consumption: 45, temperature: 18, irradiance: 0 },
  { time: "06:00", production: 120, consumption: 52, temperature: 22, irradiance: 200 },
  { time: "09:00", production: 450, consumption: 68, temperature: 28, irradiance: 650 },
  { time: "12:00", production: 850, consumption: 75, temperature: 35, irradiance: 950 },
  { time: "15:00", production: 720, consumption: 82, temperature: 32, irradiance: 800 },
  { time: "18:00", production: 280, consumption: 95, temperature: 26, irradiance: 300 },
  { time: "21:00", production: 0, consumption: 65, temperature: 20, irradiance: 0 },
]

const monthlyData = [
  { month: "Jan", revenue: 45000, savings: 12000, co2Avoided: 8.5 },
  { month: "Fev", revenue: 52000, savings: 14500, co2Avoided: 9.8 },
  { month: "Mar", revenue: 48000, savings: 13200, co2Avoided: 9.1 },
  { month: "Abr", revenue: 55000, savings: 15800, co2Avoided: 10.4 },
  { month: "Mai", revenue: 58000, savings: 16500, co2Avoided: 11.2 },
  { month: "Jun", revenue: 62000, savings: 18200, co2Avoided: 12.1 },
]

const plantPerformance = [
  { name: "Usina SP-01", efficiency: 94, status: "Excelente" },
  { name: "Usina RJ-02", efficiency: 87, status: "Bom" },
  { name: "Usina MG-03", efficiency: 91, status: "Excelente" },
  { name: "Usina PR-04", efficiency: 82, status: "Regular" },
]

const environmentalImpact = [
  { name: "CO₂ Evitado", value: 156, color: "#10b981" },
  { name: "Árvores Equivalentes", value: 2340, color: "#059669" },
  { name: "Carros Retirados", value: 89, color: "#047857" },
]

const predictiveData = [
  { month: "Jul", predicted: 65000, confidence: 92 },
  { month: "Ago", predicted: 68000, confidence: 89 },
  { month: "Set", predicted: 63000, confidence: 85 },
  { month: "Out", predicted: 59000, confidence: 88 },
]

function MetricCard({
  title,
  value,
  unit,
  trend,
  trendValue,
  icon: Icon,
  color = "primary",
  subtitle,
}: {
  title: string
  value: string | number
  unit?: string
  trend?: "up" | "down"
  trendValue?: string
  icon: any
  color?: string
  subtitle?: string
}) {
  return (
    <Card className="relative overflow-hidden">
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <p className="text-sm font-medium text-muted-foreground">{title}</p>
            <div className="flex items-baseline space-x-1">
              <span className="text-2xl font-bold">{value}</span>
              {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
            </div>
            {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
            {trend && trendValue && (
              <div className={`flex items-center text-xs ${trend === "up" ? "text-emerald-600" : "text-rose-600"}`}>
                {trend === "up" ? (
                  <ArrowUpRight className="mr-1 h-3 w-3" />
                ) : (
                  <ArrowDownRight className="mr-1 h-3 w-3" />
                )}
                {trendValue}
              </div>
            )}
          </div>
          <div className={`rounded-full p-3 bg-${color}/10`}>
            <Icon className={`h-6 w-6 text-${color}`} />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

function AlertCard({
  type,
  message,
  time,
  severity,
}: {
  type: string
  message: string
  time: string
  severity: "low" | "medium" | "high"
}) {
  const severityColors = {
    low: "bg-blue-50 border-blue-200 text-blue-800",
    medium: "bg-yellow-50 border-yellow-200 text-yellow-800",
    high: "bg-red-50 border-red-200 text-red-800",
  }

return (
    <div className={`p-3 rounded-lg border ${severityColors[severity]}`}>
      <div className="flex items-start justify-between">
        <div className="flex items-start space-x-2">
          <AlertTriangle className="h-4 w-4 mt-0.5" />
          <div>
            <p className="text-sm font-medium">{type}</p>
            <p className="text-xs opacity-80">{message}</p>
          </div>
        </div>
        <span className="text-xs opacity-60">{time}</span>
      </div>
    </div>
  )
}

export default function DashboardHome() {
  const [currentTime, setCurrentTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

return (
    <main className="space-y-6 p-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard Solar</h1>
          <p className="text-muted-foreground">Monitoramento em tempo real • {currentTime.toLocaleString("pt-BR")}</p>
        </div>
        <div className="flex items-center space-x-4">
          <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">
            <Activity className="mr-1 h-3 w-3" />
            Sistema Online
          </Badge>
          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
            <Sun className="mr-1 h-3 w-3" />
            Dia Ensolarado
          </Badge>
        </div>
      </div>

<div className="grid gap-6 lg:grid-cols-3">
        {/* Real-time production chart */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Zap className="h-5 w-5" />
              <span>Produção vs Consumo (Hoje)</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <ComposedChart data={energyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Area
                  type="monotone"
                  dataKey="production"
                  fill="#0891b2"
                  fillOpacity={0.3}
                  stroke="#0891b2"
                  name="Produção (kW)"
                />
                <Line type="monotone" dataKey="consumption" stroke="#d97706" strokeWidth={2} name="Consumo (kW)" />
              </ComposedChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

{/* Plant performance */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Award className="h-5 w-5" />
              <span>Performance das Usinas</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {plantPerformance.map((plant, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">{plant.name}</span>
                  <Badge
                    variant={plant.efficiency > 90 ? "default" : plant.efficiency > 85 ? "secondary" : "destructive"}
                  >
                    {plant.status}
                  </Badge>
                </div>
                <div className="flex items-center space-x-2">
                  <Progress value={plant.efficiency} className="flex-1" />
                  <span className="text-sm font-medium">{plant.efficiency}%</span>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* Monthly revenue trend */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <TrendingUp className="h-5 w-5" />
              <span>Receita e Economia (6 meses)</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={250}>
              <BarChart data={monthlyData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip
                  formatter={(value, name) => [
                    `R$ ${Number(value).toLocaleString()}`,
                    name === "revenue" ? "Receita" : "Economia",
                  ]}
                />
                <Bar dataKey="revenue" fill="#0891b2" name="revenue" />
                <Bar dataKey="savings" fill="#d97706" name="savings" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

{/* Environmental impact */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Leaf className="h-5 w-5" />
              <span>Impacto Ambiental (Este Ano)</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {environmentalImpact.map((item, index) => (
              <div key={index} className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
                  <span className="text-sm font-medium">{item.name}</span>
                </div>
                <span className="text-lg font-bold">{item.value.toLocaleString()}</span>
              </div>
            ))}
            <div className="pt-4 border-t">
              <p className="text-xs text-muted-foreground">
                Seu impacto positivo equivale a retirar 89 carros das ruas por um ano inteiro
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid gap-6 lg:grid-cols-3">
        {/* Predictive analytics */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Activity className="h-5 w-5" />
              <span>Previsão IA</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {predictiveData.map((item, index) => (
                <div key={index} className="flex items-center justify-between">
                  <span className="text-sm">{item.month}</span>
                  <div className="flex items-center space-x-2">
                    <span className="text-sm font-medium">R$ {(item.predicted / 1000).toFixed(0)}k</span>
                    <Badge variant="outline" className="text-xs">
                      {item.confidence}% confiança
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Weather and conditions */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Cloud className="h-5 w-5" />
              <span>Condições Atuais</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Thermometer className="h-4 w-4" />
                <span className="text-sm">Temperatura</span>
              </div>
              <span className="font-medium">32°C</span>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Sun className="h-4 w-4" />
                <span className="text-sm">Irradiância</span>
              </div>
              <span className="font-medium">847 W/m²</span>
            </div>
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Battery className="h-4 w-4" />
                <span className="text-sm">Armazenamento</span>
              </div>
              <span className="font-medium">78%</span>
            </div>
          </CardContent>
        </Card>

{/* Recent alerts */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <AlertTriangle className="h-5 w-5" />
              <span>Alertas Recentes</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <AlertCard
              type="Manutenção Preventiva"
              message="Inversor #3 precisa de limpeza"
              time="2h atrás"
              severity="medium"
            />
            <AlertCard type="Performance" message="Usina SP-01 bateu recorde mensal" time="4h atrás" severity="low" />
            <AlertCard type="Sistema" message="Backup de dados concluído" time="6h atrás" severity="low" />
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Ações Inteligentes</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-3">
          <Button variant="outline" className="bg-gradient-to-r from-blue-50 to-cyan-50 border-blue-200">
            <Users className="mr-2 h-4 w-4 text-blue-600" />
            Novo Cliente
          </Button>
          <Button variant="outline" className="bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200">
            <Plug className="mr-2 h-4 w-4 text-orange-600" />
            Conectar Integração
          </Button>
          <Button variant="outline" className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200">
            <ServerCog className="mr-2 h-4 w-4 text-green-600" />
            Relatório Detalhado
          </Button>
          <Button variant="outline" className="bg-gradient-to-r from-purple-50 to-violet-50 border-purple-200">
            <TrendingUp className="mr-2 h-4 w-4 text-purple-600" />
            Análise Preditiva
          </Button>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import { SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
import { DashboardSidebar } from "@/components/dashboard-sidebar"
import { DashboardHeaderActions } from "@/components/dashboard-header-actions"
import { PersistentSidebarProvider } from "@/components/persistent-sidebar-provider"
import { RequireAuth } from "@/components/require-auth"

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <PersistentSidebarProvider>
      <RequireAuth>
        <DashboardSidebar />
        <SidebarInset>
          <header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b bg-background/80 backdrop-blur-md px-4 transition-all duration-200 md:px-6">
            <div className="flex items-center gap-3">
              <SidebarTrigger className="size-8 hover:bg-accent/80 transition-colors duration-200" />
              <div className="hidden sm:block">
                <h1 className="text-lg font-semibold tracking-tight">Dashboard</h1>
                <p className="text-xs text-muted-foreground">Gerencie suas plantas solares</p>
              </div>
            </div>
            <DashboardHeaderActions />
          </header>

<main className="flex-1 overflow-auto">
            <div className="container mx-auto p-4 space-y-6 md:p-6 lg:p-8 max-w-7xl">{children}</div>
          </main>
        </SidebarInset>
      </RequireAuth>
    </PersistentSidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { PanelLeftIcon } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContextProps = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

// This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open],
  )

// Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
        event.preventDefault()
        toggleSidebar()
      }
      if (event.key === "Escape" && isMobile && openMobile) {
        setOpenMobile(false)
      }
    }

let touchStartX = 0
    let touchStartY = 0

const handleTouchStart = (event: TouchEvent) => {
      touchStartX = event.touches[0].clientX
      touchStartY = event.touches[0].clientY
    }

const handleTouchEnd = (event: TouchEvent) => {
      if (!isMobile) return

const touchEndX = event.changedTouches[0].clientX
      const touchEndY = event.changedTouches[0].clientY
      const deltaX = touchEndX - touchStartX
      const deltaY = touchEndY - touchStartY

// Only trigger if horizontal swipe is dominant
      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
        if (deltaX > 0 && touchStartX < 20) {
          // Swipe right from left edge - open sidebar
          setOpenMobile(true)
        } else if (deltaX < 0 && openMobile) {
          // Swipe left when sidebar is open - close sidebar
          setOpenMobile(false)
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    window.addEventListener("touchstart", handleTouchStart, { passive: true })
    window.addEventListener("touchend", handleTouchEnd, { passive: true })

return () => {
      window.removeEventListener("keydown", handleKeyDown)
      window.removeEventListener("touchstart", handleTouchStart)
      window.removeEventListener("touchend", handleTouchEnd)
    }
  }, [toggleSidebar, isMobile, openMobile, setOpenMobile])

// We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
  )

return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className)}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  side?: "left" | "right"
  variant?: "sidebar" | "floating" | "inset"
  collapsible?: "offcanvas" | "icon" | "none"
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
    return (
      <div
        data-slot="sidebar"
        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
        {...props}
      >
        {children}
      </div>
    )
  }

if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">
            <div className="flex items-center justify-center py-2 border-b">
              <div className="w-12 h-1 bg-muted-foreground/30 rounded-full" />
            </div>
            {children}
          </div>
        </SheetContent>
      </Sheet>
    )
  }

return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      <div
        data-slot="sidebar-gap"
        className={cn(
          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-in-out",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-in-out md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
          className,
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-lg transition-shadow duration-200"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn("size-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
  const { toggleSidebar } = useSidebar()

return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className,
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
        className,
      )}
      {...props}
    />
  )
}

function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn("bg-background h-8 w-full shadow-none", className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn("bg-sidebar-border mx-2 w-auto", className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn("w-full text-sm", className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn("group/menu-item relative", className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = "default",
  size = "default",
  tooltip,
  className,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : "button"
  const { isMobile, state } = useSidebar()

const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

if (!tooltip) {
    return button
  }

if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
    }
  }

return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
      {...props}
    >
      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn("group/menu-sub-item relative", className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = "md",
  isActive = false,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
  size?: "sm" | "md"
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className,
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="app/dashboard/whatsapp/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import {
  LogOut,
  CheckCircle2,
  Loader2,
  MessageSquare,
  Clock,
  AlertTriangle,
  Zap,
  Battery,
  TrendingUp,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { useCurrentUser } from "@/lib/use-current-user"
import { loadWhatsappSettings, type InstanceType } from "@/lib/user-settings"

const mockNotifications = [
  {
    id: 1,
    type: "alert",
    icon: AlertTriangle,
    title: "Inversor Offline",
    message: "Inversor SMA-001 da Planta Solar Campinas está offline há 15 minutos",
    recipient: "+55 62 8127-0550",
    timestamp: "2024-01-20 14:30:00",
    status: "sent",
  },
  {
    id: 2,
    type: "performance",
    icon: TrendingUp,
    title: "Baixa Performance",
    message: "Planta Solar São Paulo apresentou queda de 25% na geração nas últimas 2 horas",
    recipient: "+55 62 8127-0550",
    timestamp: "2024-01-20 12:15:00",
    status: "sent",
  },
  {
    id: 3,
    type: "maintenance",
    icon: Zap,
    title: "Manutenção Programada",
    message: "Lembrete: Manutenção preventiva agendada para amanhã às 08:00 na Planta Solar Ribeirão",
    recipient: "+55 62 8127-0550",
    timestamp: "2024-01-20 10:00:00",
    status: "sent",
  },
  {
    id: 4,
    type: "battery",
    icon: Battery,
    title: "Bateria Baixa",
    message: "Sistema de backup da Planta Solar Santos com bateria em 15% - Verificar carregamento",
    recipient: "+55 62 8127-0550",
    timestamp: "2024-01-20 08:45:00",
    status: "sent",
  },
  {
    id: 5,
    type: "production",
    icon: Zap,
    title: "Meta de Produção Atingida",
    message: "Parabéns! Planta Solar Campinas atingiu 105% da meta mensal de geração",
    recipient: "+55 62 8127-0550",
    timestamp: "2024-01-19 16:20:00",
    status: "sent",
  },
]

type EvoConnectData = any

// Observação: podemos mover para NEXT_PUBLIC_* depois, se desejar.
const EVO_BASE = "https://evo.iasolar.app.br"
const EVO_APIKEY = "9fa3d10afec67dcfa68dd522e3af3246"

function StatusPill({ state }: { state?: string }) {
  return (
    <Badge className="bg-emerald-600 hover:bg-emerald-700">
      <CheckCircle2 className="mr-1 h-3.5 w-3.5" /> Conectado
    </Badge>
  )
}

function pick(obj: any, path: Array<string>): any {
  return path.reduce((acc, key) => (acc && typeof acc === "object" ? acc[key] : undefined), obj)
}

function normalizeStateShape(d: any): string {
  // cobre formatos: { instance: { state } }, { data: { instance: { state } } }, { state }, etc.
  const candidates = [
    ["instance", "state"],
    ["data", "instance", "state"],
    ["data", "data", "instance", "state"],
    ["state"],
    ["data", "state"],
    ["data", "data", "state"],
    ["connection"],
    ["data", "connection"],
    ["data", "data", "connection"],
  ]
  for (const p of candidates) {
    const v = pick(d, p)
    if (typeof v === "string" && v.length > 0) return v.toLowerCase()
  }
  if (typeof d?.data === "string") return d.data.toLowerCase()
  return ""
}

function computeNextInterval(state: string): number {
  const s = String(state || "").toLowerCase()
  if (["qr", "connecting", "pairing", "requires_qr"].includes(s) || s === "") return 800 // mais rápido durante transição
  if (["open", "connected", "online"].includes(s)) return 5000 // reduz quando estável
  return 1500 // desconectado/indefinido
}

function withTimeout<T>(promise: Promise<T>, ms: number, controller: AbortController, label: string): Promise<T> {
  let id: any
  const timeout = new Promise<T>((_, reject) => {
    id = setTimeout(() => {
      controller.abort()
      reject(new Error(`Timeout (${label})`))
    }, ms)
  })
  return Promise.race([promise, timeout]).finally(() => clearTimeout(id))
}

async function serverJSON(path: string, signal: AbortSignal) {
  const res = await fetch(path, { method: "GET", cache: "no-store", signal })
  const data = await res.json().catch(() => ({}))
  return { ok: res.ok, status: res.status, data }
}

async function directJSON(path: string, signal: AbortSignal) {
  const url = `${EVO_BASE}${path.startsWith("/") ? path : `/${path}`}`
  const headers = new Headers()
  headers.set("apikey", EVO_APIKEY)
  headers.set("Content-Type", "application/json")
  const res = await fetch(url, { method: "GET", mode: "cors" as RequestMode, headers, signal })
  const ct = res.headers.get("content-type") || ""
  const body = ct.includes("application/json") ? await res.json().catch(() => ({})) : await res.text()
  return { ok: res.ok, status: res.status, data: body }
}

async function raceStatus(instance: string): Promise<{ ok: boolean; data: any; via: "server" | "direct" }> {
  const c1 = new AbortController()
  const c2 = new AbortController()

const p1 = withTimeout(
    serverJSON(`/api/evolution/state?instance=${encodeURIComponent(instance)}`, c1.signal),
    4500,
    c1,
    "server-status",
  )
  const p2 = withTimeout(
    directJSON(`/instance/connectionState/${encodeURIComponent(instance)}`, c2.signal),
    4500,
    c2,
    "direct-status",
  )

return new Promise((resolve) => {
    let resolved = false
    p1.then((r) => {
      if (!resolved && r.ok) {
        resolved = true
        c2.abort()
        resolve({ ok: true, data: r.data, via: "server" })
      }
    }).catch(() => {
      /* ignora */
    })

p2.then((r) => {
      if (!resolved && r.ok) {
        resolved = true
        c1.abort()
        resolve({ ok: true, data: r.data, via: "direct" })
      }
    }).catch(() => {
      /* ignora */
    })

// Se nenhum OK chegar, resolvemos com o primeiro que terminar (mesmo não-ok)
    Promise.any([p1, p2])
      .then((anyRes: any) => {
        if (!resolved) {
          resolved = true
          c1.abort()
          c2.abort()
          resolve({ ok: anyRes?.ok ?? false, data: anyRes?.data, via: anyRes?.ok ? "server" : "direct" })
        }
      })
      .catch(async () => {
        // Caso ambas rejeitem, retorna uma falha genérica
        if (!resolved) {
          resolved = true
          c1.abort()
          c2.abort()
          resolve({ ok: false, data: {}, via: "server" })
        }
      })
  })
}

async function raceConnect(instance: string): Promise<{ ok: boolean; data: any; via: "server" | "direct" }> {
  // GET /instance/connect e POST /api/evolution/connect concorrem
  const c1 = new AbortController()
  const c2 = new AbortController()

const p1 = withTimeout(
    fetch(`/api/evolution/connect`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ instance }),
      signal: c1.signal,
    }).then(async (res) => ({ ok: res.ok, status: res.status, data: await res.json().catch(() => ({})) })),
    4500,
    c1,
    "server-connect",
  )

const p2 = withTimeout(
    fetch(`${EVO_BASE}/instance/connect/${encodeURIComponent(instance)}`, {
      method: "GET",
      mode: "cors" as RequestMode,
      headers: { apikey: EVO_APIKEY, "Content-Type": "application/json" },
      signal: c2.signal,
    }).then(async (res) => {
      const ct = res.headers.get("content-type") || ""
      const body = ct.includes("application/json") ? await res.json().catch(() => ({})) : await res.text()
      return { ok: res.ok, status: res.status, data: body }
    }),
    4500,
    c2,
    "direct-connect",
  )

p2.then((r) => {
      if (!resolved && r.ok) {
        resolved = true
        c1.abort()
        resolve({ ok: true, data: r.data, via: "direct" })
      }
    }).catch(() => {})

Promise.any([p1, p2])
      .then((anyRes: any) => {
        if (!resolved) {
          resolved = true
          c1.abort()
          c2.abort()
          resolve({ ok: anyRes?.ok ?? false, data: anyRes?.data, via: anyRes?.ok ? "server" : "direct" })
        }
      })
      .catch(() => {
        if (!resolved) {
          resolved = true
          c1.abort()
          c2.abort()
          resolve({ ok: false, data: {}, via: "server" })
        }
      })
  })
}

// Aceita vários formatos de resposta para QR
function extractQr(connectData: EvoConnectData) {
  const base64 =
    connectData?.base64 || connectData?.qrcode?.base64 || connectData?.data?.qrcode?.base64 || connectData?.data?.base64

const qrImg = connectData?.qrCode || connectData?.qrcode || connectData?.qr_image || connectData?.qrImage || base64

const qrText =
    connectData?.qr ||
    connectData?.code ||
    connectData?.pairingCode ||
    connectData?.data?.qr ||
    connectData?.data?.code ||
    connectData?.data?.pairingCode ||
    connectData?.qrcode?.code ||
    connectData?.qrcode?.pairingCode

if (typeof qrImg === "string" && qrImg.length > 50) {
    if (qrImg.startsWith("data:image")) return qrImg
    return `data:image/png;base64,${qrImg}`
  }
  if (typeof qrText === "string" && qrText.length > 0) {
    return { textOnly: qrText } as any
  }
  return null
}

export default function WhatsappPage() {
  const { user } = useCurrentUser()
  const { toast } = useToast()

const suggested = React.useMemo(() => {
    const uid = user?.uid || "anon"
    return `inst-${uid.slice(0, 8)}`
  }, [user?.uid])

const [instance, setInstance] = React.useState(suggested)
  React.useEffect(() => setInstance(suggested), [suggested])

const [type, setType] = React.useState<InstanceType>("baileys")

const [state, setState] = React.useState<string>("connected")
  const [isVerifying, setIsVerifying] = React.useState(false)
  const [loading, setLoading] = React.useState<"create" | "logout" | "refresh" | null>(null)

const isConnected = true // Always connected

const [qrOpen, setQrOpen] = React.useState(false)
  const [qrImage, setQrImage] = React.useState<string | null>(null)
  const [pairingText, setPairingText] = React.useState<string | null>(null)
  const [pollingQR, setPollingQR] = React.useState(false)

// controles de concorrência
  const verifyAbortRef = React.useRef<AbortController | null>(null)
  const qrBusyRef = React.useRef(false)

// Carrega instância salva
  React.useEffect(() => {
    if (!user?.uid) return
    let cancel = false
    ;(async () => {
      try {
        const cfg = await loadWhatsappSettings(user.uid)
        if (cancel) return
        if (cfg?.instance) {
          setInstance(cfg.instance)
          setType(cfg.type || "baileys")
        }
      } catch {
        // silencioso
      }
    })()
    return () => {
      cancel = true
    }
  }, [user?.uid])

async function refreshQrFast() {
    if (!instance.trim() || qrBusyRef.current) return
    qrBusyRef.current = true
    try {
      const res = await raceConnect(instance)
      if (res.ok) {
        const parsed = extractQr(res.data)
        if (parsed && typeof parsed === "string") {
          setQrImage(parsed)
          setPairingText(null)
        } else if (parsed && (parsed as any).textOnly) {
          setPairingText((parsed as any).textOnly)
          setQrImage(null)
        }
      }
    } catch {
      // silencioso
    } finally {
      qrBusyRef.current = false
    }
  }

// Verificador adaptativo mais ágil
  React.useEffect(() => {
    if (!instance.trim()) return

let cancelled = false
    let timer: any

const tick = async () => {
      if (cancelled) return

// aborta requisição anterior se ainda estiver aberta
      verifyAbortRef.current?.abort()
      const localController = new AbortController()
      verifyAbortRef.current = localController

try {
        setIsVerifying(true)
        const res = await raceStatus(instance)
        const st = res.ok ? normalizeStateShape(res.data) : ""
        if (!cancelled) {
          setState(st)

if (["qr", "connecting", "pairing", "requires_qr"].includes(st) || st === "") {
            if (!qrOpen) setQrOpen(true)
            if (!pollingQR) setPollingQR(true)
            if (!qrImage && !pairingText) {
              await refreshQrFast()
            }
          }

if (["open", "connected", "online"].includes(st)) {
            if (qrOpen) setQrOpen(false)
            if (pollingQR) setPollingQR(false)
          }

const next = computeNextInterval(st)
          timer = setTimeout(tick, next)
        }
      } catch {
        if (!cancelled) {
          // Em erro, tenta novamente em 1500ms
          timer = setTimeout(tick, 1500)
        }
      } finally {
        if (!cancelled) setIsVerifying(false)
      }
    }

// exec imediata
    tick()

return () => {
      cancelled = true
      verifyAbortRef.current?.abort()
      if (timer) clearTimeout(timer)
    }
    // Dependemos apenas do "instance" para não reiniciar o loop a cada mudança de UI
  }, [instance])

// Refresh do QR a cada 40s enquanto aguarda pareamento
  React.useEffect(() => {
    let id: any
    if (qrOpen && pollingQR) {
      id = setInterval(() => {
        refreshQrFast()
      }, 40000)
    }
    return () => clearInterval(id)
  }, [qrOpen, pollingQR, instance])

async function handleLogout() {
    if (!instance.trim()) {
      toast({
        title: "Informe a instância",
        description: "Defina um nome de instância para desconectar.",
        variant: "destructive",
      })
      return
    }
    setLoading("logout")
    try {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setState("disconnected")
      toast({ title: "WhatsApp desconectado", description: "Logout realizado com sucesso." })
    } catch (e: any) {
      toast({ title: "Erro ao desconectar", description: e?.message || "Tente novamente.", variant: "destructive" })
    } finally {
      setLoading(null)
    }
  }

return (
    <main className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold tracking-tight">WhatsApp</h2>
        <p className="text-sm text-muted-foreground">
          Gerencie sua instância conectada e visualize o histórico de notificações automáticas.
        </p>
      </div>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Status da Instância</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>Nome da instância</Label>
              <div className="flex items-center gap-2">
                <Input value={instance} disabled className="bg-muted" />
                <StatusPill state={state} />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Tipo</Label>
              <Input value="Baileys" disabled className="bg-muted" />
            </div>
          </div>

<div className="flex flex-wrap items-center gap-2">
            <Button variant="outline" onClick={handleLogout} disabled={loading !== null}>
              {loading === "logout" ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <LogOut className="mr-2 h-4 w-4" />
              )}
              {loading === "logout" ? "Desconectando..." : "Desconectar"}
            </Button>
          </div>

<div className="rounded-md border bg-emerald-50 p-3 text-sm text-emerald-800">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4" />
              <strong>Conectado com sucesso!</strong>
            </div>
            <p className="mt-1">
              Sua instância WhatsApp está ativa e pronta para enviar notificações automáticas baseadas nos parâmetros do
              sistema.
            </p>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare className="h-5 w-5" />
            Histórico de Avisos Enviados
          </CardTitle>
          <p className="text-sm text-muted-foreground">
            Notificações automáticas enviadas pelo sistema baseadas em parâmetros de performance, alertas e manutenção.
          </p>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {mockNotifications.map((notification) => {
              const IconComponent = notification.icon
              return (
                <div key={notification.id} className="flex items-start gap-3 rounded-lg border p-4">
                  <div
                    className={`rounded-full p-2 ${
                      notification.type === "alert"
                        ? "bg-red-100 text-red-600"
                        : notification.type === "performance"
                          ? "bg-orange-100 text-orange-600"
                          : notification.type === "maintenance"
                            ? "bg-blue-100 text-blue-600"
                            : notification.type === "battery"
                              ? "bg-yellow-100 text-yellow-600"
                              : "bg-green-100 text-green-600"
                    }`}
                  >
                    <IconComponent className="h-4 w-4" />
                  </div>
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center justify-between">
                      <h4 className="font-medium">{notification.title}</h4>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                          Enviado
                        </Badge>
                        <span className="text-xs text-muted-foreground flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {notification.timestamp}
                        </span>
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground">{notification.message}</p>
                    <p className="text-xs text-muted-foreground">Enviado para: {notification.recipient}</p>
                  </div>
                </div>
              )
            })}
          </div>

<div className="mt-6 rounded-md border bg-muted/20 p-3 text-sm text-muted-foreground">
            <strong>Parâmetros de Notificação Automática:</strong>
            <ul className="mt-2 space-y-1 text-xs">
              <li>• Inversores offline por mais de 10 minutos</li>
              <li>• Queda de performance superior a 20% em 2 horas</li>
              <li>• Bateria de backup abaixo de 20%</li>
              <li>• Lembretes de manutenção programada</li>
              <li>• Metas de produção atingidas (100%+)</li>
            </ul>
          </div>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/integracoes/page.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import Image from "next/image"
import { CheckCircle2, ExternalLink, Loader2, PlugZap, ShieldCheck, Zap, Database, Search } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { useToast } from "@/hooks/use-toast"
import { useCurrentUser } from "@/lib/use-current-user"

type Provider = {
  id: string
  name: string
  description: string
  logo: string
  accent: string
}

const PROVIDERS: Provider[] = [
  {
    id: "solarman",
    name: "Solarman Business",
    description: "Traga suas usinas da Solarman para o Inversores!",
    logo: "/solarman-logo.png",
    accent: "bg-sky-500",
  },
  {
    id: "solis",
    name: "Solis Cloud",
    description: "Traga suas usinas da Solis Cloud para o Inversores!",
    logo: "/solis-logo.png",
    accent: "bg-orange-500",
  },
  {
    id: "ginlong",
    name: "Ginlong Solis Cloud",
    description: "Monitoramento Ginlong Solis",
    logo: "/ginlong-logo.png",
    accent: "bg-orange-500",
  },
  {
    id: "growatt",
    name: "Growatt ShineServer",
    description: "Plataforma de monitoramento Growatt",
    logo: "/growatt-logo.png",
    accent: "bg-green-500",
  },
  {
    id: "goodwe",
    name: "GoodWe SEMS Portal",
    description: "Sistema de monitoramento GoodWe SEMS",
    logo: "/goodwe-logo.png",
    accent: "bg-blue-500",
  },
  {
    id: "huawei",
    name: "Huawei FusionSolar",
    description: "Smart PV Management System da Huawei",
    logo: "/huawei-logo.png",
    accent: "bg-red-500",
  },
  {
    id: "fronius",
    name: "Fronius Solar.web",
    description: "Conecte seus sistemas Fronius via Solar.web",
    logo: "/fronius-logo.png",
    accent: "bg-green-600",
  },
  {
    id: "canadian",
    name: "Canadian Solar",
    description: "Plataforma Canadian Solar CSI",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-red-800",
  },
  {
    id: "weg",
    name: "WEG Solar",
    description: "Sistema WEG Sun para monitoramento",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-blue-700",
  },
  {
    id: "intelbras",
    name: "Intelbras Solar",
    description: "Plataforma Intelbras de monitoramento solar",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-red-700",
  },
  {
    id: "elgin",
    name: "Elgin Solar",
    description: "Sistema Elgin de monitoramento solar",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-green-700",
  },
  {
    id: "energia-limpa",
    name: "Energia Limpa Brasil",
    description: "Plataforma brasileira Energia Limpa",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-green-950",
  },
  {
    id: "renovigi",
    name: "Renovigi",
    description: "Plataforma brasileira Renovigi",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-teal-700",
  },
  {
    id: "alsol",
    name: "Alsol Solar",
    description: "Sistema brasileiro Alsol",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-teal-800",
  },
  {
    id: "aldo-solar",
    name: "Aldo Solar",
    description: "Monitoramento brasileiro Aldo Solar",
    logo: "/placeholder.svg?height=24&width=24",
    accent: "bg-teal-900",
  },
]

const mockSolarmanIntegration = {
  providerId: "solarman",
  providerName: "Solarman Business",
  email: "projetos.j7@gmail.com",
  isActive: true,
  stationsCount: 6,
  invertersCount: 24,
  syncError: null,
}

type Mode = "connect" | "manage" | "test"

export default function IntegracoesPage() {
  const { toast } = useToast()
  const { user, loading } = useCurrentUser()

const [integrations] = React.useState([mockSolarmanIntegration])
  const [map] = React.useState({ solarman: mockSolarmanIntegration })
  const [selected, setSelected] = React.useState<Provider | null>(null)
  const [mode, setMode] = React.useState<Mode>("connect")
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")
  const [searchTerm, setSearchTerm] = React.useState("")

const deriveProvider = React.useCallback((rec: any): Provider => {
    const p = PROVIDERS.find((pp) => pp.id === rec.providerId)
    if (p) return p
    return {
      id: rec.providerId,
      name: rec.providerName || rec.providerId,
      description: `Integração ${rec.providerName || rec.providerId}`,
      logo: "/generic-service-logo.png",
      accent: "bg-emerald-500",
    }
  }, [])

const openFor = (p: Provider) => {
    if (!p) return
    setSelected(p)
    setEmail(map[p.id]?.email || "")
    setPassword("")
    setMode(map[p.id] ? "manage" : "connect")
  }

const openForFromIntegration = (rec: any) => {
    const p = deriveProvider(rec)
    openFor(p)
  }

const isConnected = (providerId: string) => !!map[providerId]

const filteredProviders = React.useMemo(() => {
    if (!searchTerm.trim()) return PROVIDERS

const term = searchTerm.toLowerCase().trim()
    return PROVIDERS.filter(
      (provider) => provider.name.toLowerCase().includes(term) || provider.description.toLowerCase().includes(term),
    )
  }, [searchTerm])

return (
    <main className="space-y-6">
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-lg bg-emerald-600 text-white">
            <PlugZap className="h-4 w-4" />
          </div>
          <div>
            <h2 className="text-xl font-semibold tracking-tight">Integrações de Monitoramento</h2>
            <p className="text-sm text-muted-foreground">Conecte suas contas para trazer usinas e dados.</p>
          </div>
        </div>
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <ShieldCheck className="h-3.5 w-3.5" />
          Suas credenciais são usadas apenas para autenticação. Tokens são armazenados com segurança.
        </div>
      </div>

<section className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium">Minhas integrações</h3>
          {loading && (
            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground" aria-live="polite">
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
              Carregando
            </span>
          )}
        </div>

<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {integrations.map((it) => {
            const p = PROVIDERS.find((pp) => pp.id === it.providerId)
            return (
              <Card key={it.providerId} className="overflow-hidden border-0 shadow-sm ring-1 ring-black/5 transition">
                <CardContent className="p-5">
                  <div className="flex items-start justify-between">
                    <div className={`rounded-md p-2 ${p?.accent ?? "bg-emerald-500"} text-white`}>
                      <Image
                        src={p?.logo || "/placeholder.svg?height=24&width=24&query=provider%20logo"}
                        alt={`Logo ${it.providerName}`}
                        width={24}
                        height={24}
                        className="h-6 w-6"
                      />
                    </div>
                    <div className="flex flex-col gap-1">
                      <Badge variant="secondary" className="gap-1">
                        <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
                        Conectado
                      </Badge>
                      {it.isActive && (
                        <Badge variant="outline" className="gap-1">
                          <Zap className="h-3 w-3 text-emerald-600" />
                          Ativo
                        </Badge>
                      )}
                    </div>
                  </div>
                  <div className="mt-4">
                    <h4 className="text-base font-semibold">{it.providerName}</h4>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {it.email ? `Conta: ${it.email}` : "Conta vinculada."}
                    </p>
                    {(it.stationsCount || it.invertersCount) && (
                      <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
                        <Database className="h-3 w-3" />
                        {it.stationsCount || 0} plantas, {it.invertersCount || 0} inversores
                      </div>
                    )}
                    <div className="mt-4 flex gap-2">
                      <Button size="sm" variant="outline" onClick={() => openForFromIntegration(it)}>
                        Gerenciar
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      </section>

<section className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium">Integrações disponíveis</h3>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <span>
              {filteredProviders.length} de {PROVIDERS.length} plataformas
            </span>
          </div>
        </div>

<div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="Buscar por nome ou descrição da plataforma..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10"
          />
        </div>

<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3" aria-label="Lista de integrações disponíveis">
          {filteredProviders.map((p) => {
            const connected = isConnected(p.id)
            return (
              <button
                key={p.id}
                onClick={() => openFor(p)}
                className="text-left"
                aria-label={connected ? `Gerenciar ${p.name}` : `Configurar integração ${p.name}`}
              >
                <Card className="group overflow-hidden border-0 shadow-sm ring-1 ring-black/5 transition">
                  <CardContent className="p-5">
                    <div className="flex items-start justify-between">
                      <div className={`rounded-md p-2 ${p.accent} text-white`}>
                        <Image
                          src={p.logo || "/placeholder.svg?height=24&width=24&query=provider%20logo"}
                          alt={`Logo ${p.name}`}
                          width={24}
                          height={24}
                          className="h-6 w-6"
                        />
                      </div>
                      <div className="rounded-md border bg-transparent p-2 text-muted-foreground transition group-hover:bg-muted/50">
                        <ExternalLink className="h-4 w-4" aria-hidden="true" />
                      </div>
                    </div>
                    <div className="mt-4">
                      <div className="flex items-center gap-2">
                        <h3 className="text-base font-semibold">{p.name}</h3>
                        {connected && (
                          <Badge variant="secondary" className="gap-1">
                            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
                            Conectado
                          </Badge>
                        )}
                      </div>
                      <p className="mt-1 text-sm text-muted-foreground">{p.description}</p>
                      <p className="mt-6 text-xs text-muted-foreground">
                        {connected ? "Clique para gerenciar" : "Clique para configurar"}
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </button>
            )
          })}
        </div>

{filteredProviders.length === 0 && searchTerm.trim() && (
          <div className="flex flex-col items-center justify-center py-12 text-center">
            <Search className="h-12 w-12 text-muted-foreground/50" />
            <h3 className="mt-4 text-lg font-semibold">Nenhuma plataforma encontrada</h3>
            <p className="mt-2 text-sm text-muted-foreground">
              Tente buscar por outro termo ou verifique a ortografia.
            </p>
            <Button variant="outline" size="sm" onClick={() => setSearchTerm("")} className="mt-4">
              Limpar busca
            </Button>
          </div>
        )}
      </section>

<Dialog
        open={!!selected}
        onOpenChange={(v) => {
          if (!v) setSelected(null)
        }}
      >
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>
              {mode === "connect"
                ? selected
                  ? `Conectar ${selected.name}`
                  : "Conectar"
                : selected
                  ? `Gerenciar ${selected.name}`
                  : "Gerenciar"}
            </DialogTitle>
            <DialogDescription>
              {mode === "connect"
                ? "Informe suas credenciais para conectar sua conta. Os dados serão sincronizados automaticamente."
                : "Gerencie esta integração da sua conta."}
            </DialogDescription>
          </DialogHeader>

{mode === "connect" ? (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="prov-email">E-mail</Label>
                <Input
                  id="prov-email"
                  type="email"
                  placeholder="voce@provedor.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="prov-password">Senha</Label>
                <Input
                  id="prov-password"
                  type="password"
                  placeholder="Sua senha"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <p className="text-xs text-muted-foreground">
                  A senha não é armazenada. É usada apenas para autenticação.
                </p>
              </div>

<DialogFooter>
                <Button type="button" variant="outline" onClick={() => setSelected(null)}>
                  Cancelar
                </Button>
                <Button type="button">Conectar</Button>
              </DialogFooter>
            </div>
          ) : (
            <div className="space-y-4">
              {selected && (
                <div className="rounded-md border p-3 text-sm">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Image
                        src={selected.logo || "/placeholder.svg?height=20&width=20&query=provider%20logo"}
                        alt={`Logo ${selected.name}`}
                        width={20}
                        height={20}
                        className="h-5 w-5"
                      />
                      <span className="font-medium">{selected.name}</span>
                    </div>
                    <Badge variant="secondary" className="gap-1">
                      <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" /> Conectado
                    </Badge>
                  </div>
                  {selected.id === "solarman" && (
                    <div className="mt-2 text-xs text-muted-foreground">
                      <p>Conta: projetos.j7@gmail.com</p>
                      <p>6 plantas, 24 inversores sincronizados</p>
                    </div>
                  )}
                </div>
              )}
              <DialogFooter>
                <Button variant="outline" onClick={() => setSelected(null)}>
                  Fechar
                </Button>
              </DialogFooter>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/historico-geracao/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { TrendingUp, Calendar, Filter, Download } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"

// Dados de exemplo de geração
const mockGenerationData = {
  historico: [
    { mes: "2024-01", real: 1850.5, projetado: 1800.0, diferenca: 50.5, percentual: 102.8 },
    { mes: "2024-02", real: 1720.3, projetado: 1750.0, diferenca: -29.7, percentual: 98.3 },
    { mes: "2024-03", real: 1950.8, projetado: 1900.0, diferenca: 50.8, percentual: 102.7 },
    { mes: "2024-04", real: 1680.2, projetado: 1700.0, diferenca: -19.8, percentual: 98.8 },
    { mes: "2024-05", real: 1580.7, projetado: 1600.0, diferenca: -19.3, percentual: 98.8 },
    { mes: "2024-06", real: 1420.1, projetado: 1450.0, diferenca: -29.9, percentual: 97.9 },
    { mes: "2024-07", real: 1380.5, projetado: 1400.0, diferenca: -19.5, percentual: 98.6 },
    { mes: "2024-08", real: 1520.8, projetado: 1500.0, diferenca: 20.8, percentual: 101.4 },
    { mes: "2024-09", real: 1650.3, projetado: 1620.0, diferenca: 30.3, percentual: 101.9 },
    { mes: "2024-10", real: 1780.6, projetado: 1750.0, diferenca: 30.6, percentual: 101.7 },
    { mes: "2024-11", real: 1890.2, projetado: 1850.0, diferenca: 40.2, percentual: 102.2 },
    { mes: "2024-12", real: 1920.5, projetado: 1900.0, diferenca: 20.5, percentual: 101.1 },
  ],
  resumo: {
    totalReal: 20352.5,
    totalProjetado: 20220.0,
    mediaUltimos12: 1696.0,
    melhorMes: { mes: "2024-03", valor: 1950.8 },
    piorMes: { mes: "2024-07", valor: 1380.5 },
  },
}

function formatNumber(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num)
}

function formatMonth(monthStr: string) {
  const [year, month] = monthStr.split("-")
  const date = new Date(Number.parseInt(year), Number.parseInt(month) - 1)
  return date.toLocaleDateString("pt-BR", { month: "long", year: "numeric" })
}

function generateMockClient(clientId: string) {
  const clients = {
    "client-001": { nome: "João Silva", email: "joao.silva@email.com", tipo: "PF" },
    "client-002": { nome: "Maria Santos", email: "maria.santos@email.com", tipo: "PF" },
    "client-003": { nome: "Empresa Solar Ltda", email: "contato@empresasolar.com", tipo: "PJ" },
  }

return (
    clients[clientId as keyof typeof clients] || {
      nome: `Cliente ${clientId}`,
      email: `${clientId}@email.com`,
      tipo: "PF",
    }
  )
}

export default function ClientGenerationHistoryPage() {
  const params = useParams()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)
  const [filterType, setFilterType] = React.useState("todos")
  const [filterYear, setFilterYear] = React.useState("2024")

React.useEffect(() => {
    const mockClient = generateMockClient(params.id as string)
    setClient(mockClient)
    setLoading(false)
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          <div className="h-32 bg-muted rounded"></div>
          <div className="h-32 bg-muted rounded"></div>
          <div className="h-32 bg-muted rounded"></div>
        </div>
      </main>
    )
  }

const data = mockGenerationData

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Histórico de Geração</h2>
          <p className="text-muted-foreground">Acompanhe a geração real vs projetada dos últimos 12 meses</p>
        </div>
        <Button variant="outline" className="flex items-center gap-2 bg-transparent">
          <Download className="h-4 w-4" />
          Exportar
        </Button>
      </div>

{/* Filtros */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-4 w-4" />
            Filtros
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            <Select value={filterType} onValueChange={setFilterType}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Tipo de filtro" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os meses</SelectItem>
                <SelectItem value="trimestre">Por trimestre</SelectItem>
                <SelectItem value="semestre">Por semestre</SelectItem>
                <SelectItem value="media">Média 12 meses</SelectItem>
              </SelectContent>
            </Select>

{/* Cards de Resumo */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Gerado</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(data.resumo.totalReal)} kWh</div>
            <p className="text-xs text-muted-foreground">
              {formatNumber(
                ((data.resumo.totalReal - data.resumo.totalProjetado) / data.resumo.totalProjetado) * 100,
                1,
              )}
              % vs projetado
            </p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Média Mensal</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(data.resumo.mediaUltimos12)} kWh</div>
            <p className="text-xs text-muted-foreground">Últimos 12 meses</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Melhor Mês</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(data.resumo.melhorMes.valor)} kWh</div>
            <p className="text-xs text-muted-foreground">{formatMonth(data.resumo.melhorMes.mes)}</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pior Mês</CardTitle>
            <TrendingUp className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(data.resumo.piorMes.valor)} kWh</div>
            <p className="text-xs text-muted-foreground">{formatMonth(data.resumo.piorMes.mes)}</p>
          </CardContent>
        </Card>
      </div>

{/* Tabela de Histórico */}
      <Card>
        <CardHeader>
          <CardTitle>Geração Real vs Projetada</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left p-2">Mês</th>
                  <th className="text-right p-2">Geração Real (kWh)</th>
                  <th className="text-right p-2">Geração Projetada (kWh)</th>
                  <th className="text-right p-2">Diferença (kWh)</th>
                  <th className="text-right p-2">Percentual (%)</th>
                  <th className="text-center p-2">Status</th>
                </tr>
              </thead>
              <tbody>
                {data.historico.map((item) => (
                  <tr key={item.mes} className="border-b hover:bg-muted/50">
                    <td className="p-2 font-medium">{formatMonth(item.mes)}</td>
                    <td className="p-2 text-right font-mono">{formatNumber(item.real)}</td>
                    <td className="p-2 text-right font-mono">{formatNumber(item.projetado)}</td>
                    <td
                      className={`p-2 text-right font-mono ${item.diferenca >= 0 ? "text-green-600" : "text-red-600"}`}
                    >
                      {item.diferenca >= 0 ? "+" : ""}
                      {formatNumber(item.diferenca)}
                    </td>
                    <td className="p-2 text-right font-mono">{formatNumber(item.percentual)}%</td>
                    <td className="p-2 text-center">
                      <Badge
                        variant="secondary"
                        className={
                          item.percentual >= 100
                            ? "bg-green-50 text-green-700"
                            : item.percentual >= 95
                              ? "bg-yellow-50 text-yellow-700"
                              : "bg-red-50 text-red-700"
                        }
                      >
                        {item.percentual >= 100 ? "Acima" : item.percentual >= 95 ? "Normal" : "Abaixo"}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Análise de Performance */}
      <Card>
        <CardHeader>
          <CardTitle>Análise de Performance</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="p-4 border rounded-lg">
                <h4 className="font-medium mb-2">Performance Geral</h4>
                <div className="text-2xl font-bold text-green-600">
                  {formatNumber(
                    ((data.resumo.totalReal - data.resumo.totalProjetado) / data.resumo.totalProjetado) * 100,
                    1,
                  )}
                  %
                </div>
                <p className="text-sm text-muted-foreground">Acima do projetado</p>
              </div>
              <div className="p-4 border rounded-lg">
                <h4 className="font-medium mb-2">Meses Acima da Meta</h4>
                <div className="text-2xl font-bold text-blue-600">
                  {data.historico.filter((item) => item.percentual >= 100).length}
                </div>
                <p className="text-sm text-muted-foreground">de {data.historico.length} meses</p>
              </div>
            </div>
            <div className="p-4 bg-muted/50 rounded-lg">
              <h4 className="font-medium mb-2">Observações</h4>
              <ul className="text-sm text-muted-foreground space-y-1">
                <li>• A usina apresentou performance consistente ao longo do ano</li>
                <li>• Meses de inverno (junho-agosto) tiveram menor geração, conforme esperado</li>
                <li>
                  • Performance geral está{" "}
                  {formatNumber(
                    ((data.resumo.totalReal - data.resumo.totalProjetado) / data.resumo.totalProjetado) * 100,
                    1,
                  )}
                  % acima do projetado
                </li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/historico-faturas/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { FileText, Calendar, Filter, Download, Eye } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"

// Dados de exemplo de faturas
const mockInvoiceData = {
  faturas: [
    {
      id: "fat-001",
      mesReferencia: "2024-01",
      dataLeitura: { inicio: "2023-12-05", fim: "2024-01-04" },
      consumo: 450.2,
      geracao: 1850.5,
      injecao: 1400.3,
      credito: 1200.8,
      valor: 89.45,
      status: "paga",
      dataVencimento: "2024-01-25",
      dataPagamento: "2024-01-20",
    },
    {
      id: "fat-002",
      mesReferencia: "2024-02",
      dataLeitura: { inicio: "2024-01-05", fim: "2024-02-04" },
      consumo: 420.8,
      geracao: 1720.3,
      injecao: 1299.5,
      credito: 1100.2,
      valor: 92.3,
      status: "paga",
      dataVencimento: "2024-02-25",
      dataPagamento: "2024-02-22",
    },
    {
      id: "fat-003",
      mesReferencia: "2024-03",
      dataLeitura: { inicio: "2024-02-05", fim: "2024-03-05" },
      consumo: 480.1,
      geracao: 1950.8,
      injecao: 1470.7,
      credito: 1350.5,
      valor: 85.2,
      status: "paga",
      dataVencimento: "2024-03-25",
      dataPagamento: "2024-03-18",
    },
    {
      id: "fat-004",
      mesReferencia: "2024-04",
      dataLeitura: { inicio: "2024-03-06", fim: "2024-04-05" },
      consumo: 395.6,
      geracao: 1680.2,
      injecao: 1284.6,
      credito: 1180.3,
      valor: 78.9,
      status: "paga",
      dataVencimento: "2024-04-25",
      dataPagamento: "2024-04-20",
    },
    {
      id: "fat-005",
      mesReferencia: "2024-05",
      dataLeitura: { inicio: "2024-04-06", fim: "2024-05-05" },
      consumo: 410.3,
      geracao: 1580.7,
      injecao: 1170.4,
      credito: 1050.8,
      valor: 95.6,
      status: "paga",
      dataVencimento: "2024-05-25",
      dataPagamento: "2024-05-23",
    },
    {
      id: "fat-006",
      mesReferencia: "2024-06",
      dataLeitura: { inicio: "2024-05-06", fim: "2024-06-05" },
      consumo: 380.7,
      geracao: 1420.1,
      injecao: 1039.4,
      credito: 920.2,
      valor: 102.3,
      status: "pendente",
      dataVencimento: "2024-06-25",
      dataPagamento: null,
    },
  ],
}

function formatNumber(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num)
}

function formatCurrency(num: number) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(num)
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("pt-BR")
}

return (
    clients[clientId as keyof typeof clients] || {
      nome: `Cliente ${clientId}`,
      email: `${clientId}@email.com`,
      tipo: "PF",
    }
  )
}

export default function ClientInvoiceHistoryPage() {
  const params = useParams()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)
  const [filterYear, setFilterYear] = React.useState("2024")
  const [filterStatus, setFilterStatus] = React.useState("todas")

React.useEffect(() => {
    const mockClient = generateMockClient(params.id as string)
    setClient(mockClient)
    setLoading(false)
  }, [params.id])

const faturas = mockInvoiceData.faturas
  const totalConsumo = faturas.reduce((sum, f) => sum + f.consumo, 0)
  const totalGeracao = faturas.reduce((sum, f) => sum + f.geracao, 0)
  const totalCredito = faturas.reduce((sum, f) => sum + f.credito, 0)
  const totalValor = faturas.reduce((sum, f) => sum + f.valor, 0)

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Histórico de Faturas</h2>
          <p className="text-muted-foreground">Acompanhe o histórico de faturas de energia elétrica</p>
        </div>
        <Button variant="outline" className="flex items-center gap-2 bg-transparent">
          <Download className="h-4 w-4" />
          Exportar
        </Button>
      </div>

{/* Filtros */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-4 w-4" />
            Filtros
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            <Select value={filterYear} onValueChange={setFilterYear}>
              <SelectTrigger className="w-32">
                <SelectValue placeholder="Ano" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="2024">2024</SelectItem>
                <SelectItem value="2023">2023</SelectItem>
                <SelectItem value="2022">2022</SelectItem>
              </SelectContent>
            </Select>

<Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todas">Todas as faturas</SelectItem>
                <SelectItem value="paga">Pagas</SelectItem>
                <SelectItem value="pendente">Pendentes</SelectItem>
                <SelectItem value="vencida">Vencidas</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Cards de Resumo */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Consumido</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(totalConsumo)} kWh</div>
            <p className="text-xs text-muted-foreground">Últimos {faturas.length} meses</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Gerado</CardTitle>
            <Calendar className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(totalGeracao)} kWh</div>
            <p className="text-xs text-muted-foreground">Energia solar gerada</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Créditos Acumulados</CardTitle>
            <FileText className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatNumber(totalCredito)} kWh</div>
            <p className="text-xs text-muted-foreground">Energia injetada na rede</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Pago</CardTitle>
            <FileText className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{formatCurrency(totalValor)}</div>
            <p className="text-xs text-muted-foreground">Valor total das faturas</p>
          </CardContent>
        </Card>
      </div>

{/* Tabela de Faturas */}
      <Card>
        <CardHeader>
          <CardTitle>Histórico de Faturas</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left p-2">Mês Referência</th>
                  <th className="text-left p-2">Período de Leitura</th>
                  <th className="text-right p-2">Consumo (kWh)</th>
                  <th className="text-right p-2">Geração (kWh)</th>
                  <th className="text-right p-2">Injeção (kWh)</th>
                  <th className="text-right p-2">Crédito (kWh)</th>
                  <th className="text-right p-2">Valor (R$)</th>
                  <th className="text-center p-2">Status</th>
                  <th className="text-center p-2">Ações</th>
                </tr>
              </thead>
              <tbody>
                {faturas.map((fatura) => (
                  <tr key={fatura.id} className="border-b hover:bg-muted/50">
                    <td className="p-2 font-medium">{formatMonth(fatura.mesReferencia)}</td>
                    <td className="p-2 text-sm">
                      {formatDate(fatura.dataLeitura.inicio)} a {formatDate(fatura.dataLeitura.fim)}
                    </td>
                    <td className="p-2 text-right font-mono">{formatNumber(fatura.consumo)}</td>
                    <td className="p-2 text-right font-mono">{formatNumber(fatura.geracao)}</td>
                    <td className="p-2 text-right font-mono">{formatNumber(fatura.injecao)}</td>
                    <td className="p-2 text-right font-mono">{formatNumber(fatura.credito)}</td>
                    <td className="p-2 text-right font-mono">{formatCurrency(fatura.valor)}</td>
                    <td className="p-2 text-center">
                      <Badge
                        variant="secondary"
                        className={
                          fatura.status === "paga"
                            ? "bg-green-50 text-green-700"
                            : fatura.status === "pendente"
                              ? "bg-yellow-50 text-yellow-700"
                              : "bg-red-50 text-red-700"
                        }
                      >
                        {fatura.status === "paga" ? "Paga" : fatura.status === "pendente" ? "Pendente" : "Vencida"}
                      </Badge>
                    </td>
                    <td className="p-2 text-center">
                      <Button variant="ghost" size="sm">
                        <Eye className="h-4 w-4" />
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

{/* Análise de Economia */}
      <Card>
        <CardHeader>
          <CardTitle>Análise de Economia</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-3">
            <div className="p-4 border rounded-lg">
              <h4 className="font-medium mb-2">Economia Mensal Média</h4>
              <div className="text-2xl font-bold text-green-600">
                {formatCurrency((totalGeracao * 0.65 - totalValor) / faturas.length)}
              </div>
              <p className="text-sm text-muted-foreground">Baseado na tarifa média</p>
            </div>
            <div className="p-4 border rounded-lg">
              <h4 className="font-medium mb-2">Autossuficiência</h4>
              <div className="text-2xl font-bold text-blue-600">
                {formatNumber((totalGeracao / totalConsumo) * 100, 0)}%
              </div>
              <p className="text-sm text-muted-foreground">Geração vs consumo</p>
            </div>
            <div className="p-4 border rounded-lg">
              <h4 className="font-medium mb-2">Excedente Médio</h4>
              <div className="text-2xl font-bold text-purple-600">
                {formatNumber((totalGeracao - totalConsumo) / faturas.length)} kWh
              </div>
              <p className="text-sm text-muted-foreground">Energia injetada por mês</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/documentos/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { FolderOpen, Upload, Download, Eye, Trash2, Plus, FileText, File, ImageIcon } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { ClienteDoc } from "@/lib/clients-db"
import { useCurrentUser } from "@/lib/use-current-user"

// Dados de exemplo de documentos
const mockDocumentsData = {
  documentosCliente: [
    {
      id: "doc-001",
      nome: "CNH - João Silva",
      tipo: "CNH",
      categoria: "identificacao",
      arquivo: "cnh-joao-silva.pdf",
      tamanho: "2.3 MB",
      dataUpload: "2024-01-15T10:30:00Z",
      status: "aprovado",
    },
    {
      id: "doc-002",
      nome: "Primeira Conta de Energia",
      tipo: "Conta de Energia",
      categoria: "energia",
      arquivo: "primeira-conta-energia.pdf",
      tamanho: "1.8 MB",
      dataUpload: "2024-01-10T14:20:00Z",
      status: "aprovado",
    },
    {
      id: "doc-003",
      nome: "Contrato de Instalação",
      tipo: "Contrato",
      categoria: "contrato",
      arquivo: "contrato-instalacao.pdf",
      tamanho: "3.2 MB",
      dataUpload: "2024-01-08T09:15:00Z",
      status: "aprovado",
    },
    {
      id: "doc-004",
      nome: "Procuração",
      tipo: "Procuração",
      categoria: "juridico",
      arquivo: "procuracao.pdf",
      tamanho: "1.1 MB",
      dataUpload: "2024-01-12T16:45:00Z",
      status: "pendente",
    },
  ],
  documentosProjeto: [
    {
      id: "proj-001",
      nome: "Diagrama Unifilar",
      tipo: "Diagrama Unifilar",
      categoria: "tecnico",
      arquivo: "diagrama-unifilar.pdf",
      tamanho: "4.5 MB",
      dataUpload: "2024-01-20T11:00:00Z",
      status: "aprovado",
    },
    {
      id: "proj-002",
      nome: "ART - Anotação de Responsabilidade Técnica",
      tipo: "ART",
      categoria: "tecnico",
      arquivo: "art-projeto.pdf",
      tamanho: "0.8 MB",
      dataUpload: "2024-01-18T13:30:00Z",
      status: "aprovado",
    },
    {
      id: "proj-003",
      nome: "Orçamento de Conexão",
      tipo: "Orçamento",
      categoria: "financeiro",
      arquivo: "orcamento-conexao.pdf",
      tamanho: "2.1 MB",
      dataUpload: "2024-01-16T15:20:00Z",
      status: "aprovado",
    },
    {
      id: "proj-004",
      nome: "Memorial Descritivo",
      tipo: "Memorial",
      categoria: "tecnico",
      arquivo: "memorial-descritivo.pdf",
      tamanho: "5.2 MB",
      dataUpload: "2024-01-14T10:10:00Z",
      status: "aprovado",
    },
  ],
}

const tiposDocumentoCliente = [
  "CNH",
  "RG",
  "CPF",
  "Comprovante de Residência",
  "Conta de Energia",
  "Contrato",
  "Contrato Social",
  "Procuração",
  "Nota Fiscal",
  "Outros",
]

const tiposDocumentoProjeto = [
  "Diagrama Unifilar",
  "ART",
  "Orçamento de Conexão",
  "Memorial Descritivo",
  "Projeto Elétrico",
  "Laudo Técnico",
  "Certificado de Conformidade",
  "Manual de Operação",
  "Outros",
]

function formatDateTime(iso: string) {
  return new Date(iso).toLocaleString("pt-BR")
}

function getFileIcon(arquivo: string) {
  const ext = arquivo.split(".").pop()?.toLowerCase()
  switch (ext) {
    case "pdf":
      return FileText
    case "jpg":
    case "jpeg":
    case "png":
      return ImageIcon
    default:
      return File
  }
}

function getStatusColor(status: string) {
  switch (status) {
    case "aprovado":
      return "bg-green-50 text-green-700"
    case "pendente":
      return "bg-yellow-50 text-yellow-700"
    case "rejeitado":
      return "bg-red-50 text-red-700"
    default:
      return "bg-gray-50 text-gray-700"
  }
}

export default function ClientDocumentsPage() {
  const params = useParams()
  const { user } = useCurrentUser()
  const [client, setClient] = React.useState<ClienteDoc | null>(null)
  const [loading, setLoading] = React.useState(true)
  const [isUploadOpen, setIsUploadOpen] = React.useState(false)
  const [uploadCategory, setUploadCategory] = React.useState<"cliente" | "projeto">("cliente")

React.useEffect(() => {
    async function loadClient() {
      if (!params.id) return

try {
        // Generate mock client data based on ID
        const mockClient: ClienteDoc = {
          id: params.id as string,
          nome:
            params.id === "client-001"
              ? "João Silva"
              : params.id === "client-002"
                ? "Maria Santos"
                : params.id === "client-003"
                  ? "Carlos Oliveira"
                  : "Cliente Exemplo",
          email: `${params.id}@email.com`,
          telefone: "(11) 99999-9999",
          cpfCnpj: "123.456.789-00",
          endereco: "Rua Exemplo, 123",
          cidade: "São Paulo",
          estado: "SP",
          cep: "01234-567",
          createdAt: new Date().toISOString(),
          updatedAt: new Date().toISOString(),
          userId: user?.uid || "mock-user",
        }
        setClient(mockClient)
      } catch (error) {
        console.error("Error loading client:", error)
      } finally {
        setLoading(false)
      }
    }

loadClient()
  }, [user, params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="h-64 bg-muted rounded"></div>
          <div className="h-64 bg-muted rounded"></div>
        </div>
      </main>
    )
  }

const { documentosCliente, documentosProjeto } = mockDocumentsData

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Documentos</h2>
          <p className="text-muted-foreground">Gerencie documentos do cliente e do projeto</p>
        </div>
        <Dialog open={isUploadOpen} onOpenChange={setIsUploadOpen}>
          <DialogTrigger asChild>
            <Button className="flex items-center gap-2">
              <Plus className="h-4 w-4" />
              Adicionar Documento
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Adicionar Documento</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="categoria">Categoria</Label>
                <Select value={uploadCategory} onValueChange={(v) => setUploadCategory(v as any)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cliente">Documentos do Cliente</SelectItem>
                    <SelectItem value="projeto">Documentos do Projeto</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="tipo">Tipo de Documento</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    {(uploadCategory === "cliente" ? tiposDocumentoCliente : tiposDocumentoProjeto).map((tipo) => (
                      <SelectItem key={tipo} value={tipo}>
                        {tipo}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="nome">Nome do Documento</Label>
                <Input id="nome" placeholder="Digite o nome do documento" />
              </div>
              <div>
                <Label htmlFor="arquivo">Arquivo</Label>
                <Input id="arquivo" type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" />
              </div>
              <div className="flex gap-2">
                <Button className="flex-1">
                  <Upload className="h-4 w-4 mr-2" />
                  Fazer Upload
                </Button>
                <Button variant="outline" onClick={() => setIsUploadOpen(false)}>
                  Cancelar
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

{/* Cards de Resumo */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de Documentos</CardTitle>
            <FolderOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{documentosCliente.length + documentosProjeto.length}</div>
            <p className="text-xs text-muted-foreground">Arquivos armazenados</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Docs do Cliente</CardTitle>
            <FileText className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{documentosCliente.length}</div>
            <p className="text-xs text-muted-foreground">Documentos pessoais</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Docs do Projeto</CardTitle>
            <FileText className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{documentosProjeto.length}</div>
            <p className="text-xs text-muted-foreground">Documentos técnicos</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pendentes</CardTitle>
            <FileText className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {[...documentosCliente, ...documentosProjeto].filter((d) => d.status === "pendente").length}
            </div>
            <p className="text-xs text-muted-foreground">Aguardando aprovação</p>
          </CardContent>
        </Card>
      </div>

{/* Tabs de Documentos */}
      <Tabs defaultValue="cliente" className="space-y-6">
        <TabsList>
          <TabsTrigger value="cliente">Documentos do Cliente</TabsTrigger>
          <TabsTrigger value="projeto">Documentos do Projeto</TabsTrigger>
        </TabsList>

<TabsContent value="cliente" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Documentos do Cliente</CardTitle>
              <p className="text-sm text-muted-foreground">
                CNH, RG, CPF, Contratos, Procurações e outros documentos pessoais
              </p>
            </CardHeader>
            <CardContent>
              <DocumentList documents={documentosCliente} />
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="projeto" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Documentos do Projeto</CardTitle>
              <p className="text-sm text-muted-foreground">
                Diagramas, ART, Orçamentos, Memoriais e documentos técnicos do projeto
              </p>
            </CardHeader>
            <CardContent>
              <DocumentList documents={documentosProjeto} />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </main>
  )
}

function DocumentList({ documents }: { documents: any[] }) {
  if (documents.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
        <FolderOpen className="h-12 w-12 text-muted-foreground opacity-50" />
        <div className="text-sm font-medium">Nenhum documento encontrado</div>
        <div className="text-xs text-muted-foreground">Adicione documentos para começar.</div>
      </div>
    )
  }

return (
    <div className="space-y-3">
      {documents.map((doc) => {
        const FileIcon = getFileIcon(doc.arquivo)
        return (
          <div key={doc.id} className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50">
            <div className="flex items-center gap-4">
              <FileIcon className="h-8 w-8 text-muted-foreground" />
              <div>
                <div className="font-medium">{doc.nome}</div>
                <div className="text-sm text-muted-foreground">
                  {doc.tipo} • {doc.tamanho} • {formatDateTime(doc.dataUpload)}
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Badge variant="secondary" className={getStatusColor(doc.status)}>
                {doc.status === "aprovado" ? "Aprovado" : doc.status === "pendente" ? "Pendente" : "Rejeitado"}
              </Badge>
              <Button variant="ghost" size="sm">
                <Eye className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="sm">
                <Download className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="sm">
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/status/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { Zap, Sun, Activity, BarChart3, AlertCircle, CheckCircle, Clock } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useCurrentUser } from "@/lib/use-current-user"
import type { ClienteDoc } from "@/lib/clients-db" // Import or declare ClienteDoc here

// Dados de exemplo - em produção viriam da API/banco de dados
const mockPlantData = {
  plantas: [
    {
      id: "usina-001",
      nome: "Usina Principal",
      capacidade: 15.5, // kWp
      potenciaAtual: 12.3, // kW
      geracaoHoje: 45.2, // kWh
      geracaoMes: 1250.8, // kWh
      geracaoAno: 12450.5, // kWh
      geracaoTotal: 25890.2, // kWh
      eficiencia: 79.4, // %
      status: "online",
      ultimaAtualizacao: new Date().toISOString(),
      inversores: [
        { id: "inv-001", nome: "Inversor 1", status: "online", potencia: 6.2 },
        { id: "inv-002", nome: "Inversor 2", status: "online", potencia: 6.1 },
      ],
    },
    {
      id: "usina-002",
      nome: "Usina Secundária",
      capacidade: 8.2, // kWp
      potenciaAtual: 0, // kW (noite)
      geracaoHoje: 28.5, // kWh
      geracaoMes: 680.3, // kWh
      geracaoAno: 7250.8, // kWh
      geracaoTotal: 14520.1, // kWh
      eficiencia: 0, // % (noite)
      status: "offline",
      ultimaAtualizacao: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2h atrás
      inversores: [{ id: "inv-003", nome: "Inversor 3", status: "offline", potencia: 0 }],
    },
  ],
}

function formatNumber(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num)
}

function formatDateTime(iso: string) {
  return new Date(iso).toLocaleString("pt-BR")
}

function getStatusColor(status: string) {
  switch (status) {
    case "online":
      return "text-green-600"
    case "offline":
      return "text-red-600"
    case "warning":
      return "text-yellow-600"
    default:
      return "text-gray-600"
  }
}

function getStatusIcon(status: string) {
  switch (status) {
    case "online":
      return CheckCircle
    case "offline":
      return AlertCircle
    case "warning":
      return Clock
    default:
      return Activity
  }
}

function generateMockClient(clientId: string): ClienteDoc {
  const mockClients = {
    "client-001": {
      id: "client-001",
      payload: {
        tipo: "PF" as const,
        pf: {
          nome: "João Silva Santos",
          cpf: "123.456.789-01",
        },
      },
    },
    "client-002": {
      id: "client-002",
      payload: {
        tipo: "PJ" as const,
        pj: {
          razaoSocial: "Empresa Solar Ltda",
          cnpj: "12.345.678/0001-90",
        },
      },
    },
  }

return (
    mockClients[clientId as keyof typeof mockClients] || {
      id: clientId,
      payload: {
        tipo: "PF" as const,
        pf: {
          nome: `Cliente ${clientId}`,
          cpf: "000.000.000-00",
        },
      },
    }
  )
}

export default function ClientStatusPage() {
  const params = useParams()
  const [client, setClient] = React.useState<ClienteDoc | null>(null)
  const [loading, setLoading] = React.useState(true)
  const [viewMode, setViewMode] = React.useState<"agrupado" | "individual">("agrupado")
  const currentUser = useCurrentUser()

return () => clearTimeout(timer)
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="h-32 bg-muted rounded"></div>
          ))}
        </div>
      </main>
    )
  }

if (!client) {
    return (
      <main className="space-y-6">
        <Card>
          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
            <div className="text-sm font-medium">Cliente não encontrado</div>
            <div className="text-xs text-muted-foreground">
              O cliente pode ter sido removido ou você não tem permissão para visualizá-lo.
            </div>
          </CardContent>
        </Card>
      </main>
    )
  }

const plantas = mockPlantData.plantas
  const totalCapacidade = plantas.reduce((sum, p) => sum + p.capacidade, 0)
  const totalPotenciaAtual = plantas.reduce((sum, p) => sum + p.potenciaAtual, 0)
  const totalGeracaoHoje = plantas.reduce((sum, p) => sum + p.geracaoHoje, 0)
  const totalGeracaoMes = plantas.reduce((sum, p) => sum + p.geracaoMes, 0)
  const totalGeracaoAno = plantas.reduce((sum, p) => sum + p.geracaoAno, 0)
  const totalGeracaoTotal = plantas.reduce((sum, p) => sum + p.geracaoTotal, 0)
  const eficienciaMedia = plantas.length > 0 ? plantas.reduce((sum, p) => sum + p.eficiencia, 0) / plantas.length : 0

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Status das Usinas</h2>
          <p className="text-muted-foreground">Dashboard em tempo real das plantas solares</p>
        </div>

{plantas.length > 1 && (
          <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as any)}>
            <TabsList>
              <TabsTrigger value="agrupado">Agrupado</TabsTrigger>
              <TabsTrigger value="individual">Individual</TabsTrigger>
            </TabsList>
          </Tabs>
        )}
      </div>

{viewMode === "agrupado" ? (
        // Visão Agrupada
        <div className="space-y-6">
          {/* Cards de Resumo */}
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Capacidade Total</CardTitle>
                <Zap className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{formatNumber(totalCapacidade)} kWp</div>
                <p className="text-xs text-muted-foreground">
                  {plantas.length} usina{plantas.length !== 1 ? "s" : ""} instalada{plantas.length !== 1 ? "s" : ""}
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Potência Atual</CardTitle>
                <Activity className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{formatNumber(totalPotenciaAtual)} kW</div>
                <div className="flex items-center gap-2 mt-1">
                  <Progress value={(totalPotenciaAtual / totalCapacidade) * 100} className="flex-1" />
                  <span className="text-xs text-muted-foreground">
                    {formatNumber((totalPotenciaAtual / totalCapacidade) * 100, 0)}%
                  </span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Geração Hoje</CardTitle>
                <Sun className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{formatNumber(totalGeracaoHoje)} kWh</div>
                <p className="text-xs text-muted-foreground">Eficiência média: {formatNumber(eficienciaMedia, 0)}%</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Status Geral</CardTitle>
                <Activity className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2">
                  {plantas.filter((p) => p.status === "online").length > 0 && (
                    <Badge variant="secondary" className="bg-green-50 text-green-700">
                      {plantas.filter((p) => p.status === "online").length} Online
                    </Badge>
                  )}
                  {plantas.filter((p) => p.status === "offline").length > 0 && (
                    <Badge variant="secondary" className="bg-red-50 text-red-700">
                      {plantas.filter((p) => p.status === "offline").length} Offline
                    </Badge>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Card de Histórico de Geração */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <BarChart3 className="h-4 w-4" />
                Histórico de Geração
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-6 md:grid-cols-4">
                <div className="text-center">
                  <div className="text-2xl font-bold text-blue-600">{formatNumber(totalGeracaoHoje)}</div>
                  <div className="text-sm text-muted-foreground">kWh Hoje</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-green-600">{formatNumber(totalGeracaoMes)}</div>
                  <div className="text-sm text-muted-foreground">kWh Este Mês</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-orange-600">{formatNumber(totalGeracaoAno)}</div>
                  <div className="text-sm text-muted-foreground">kWh Este Ano</div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-purple-600">{formatNumber(totalGeracaoTotal)}</div>
                  <div className="text-sm text-muted-foreground">kWh Total</div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Lista de Usinas */}
          <Card>
            <CardHeader>
              <CardTitle>Usinas do Cliente</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {plantas.map((planta) => {
                  const StatusIcon = getStatusIcon(planta.status)
                  return (
                    <div key={planta.id} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center gap-4">
                        <StatusIcon className={`h-5 w-5 ${getStatusColor(planta.status)}`} />
                        <div>
                          <div className="font-medium">{planta.nome}</div>
                          <div className="text-sm text-muted-foreground">
                            {formatNumber(planta.capacidade)} kWp • {planta.inversores.length} inversor
                            {planta.inversores.length !== 1 ? "es" : ""}
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="font-medium">{formatNumber(planta.potenciaAtual)} kW</div>
                        <div className="text-sm text-muted-foreground">{formatNumber(planta.geracaoHoje)} kWh hoje</div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>
        </div>
      ) : (
        // Visão Individual
        <div className="space-y-6">
          {plantas.map((planta) => {
            const StatusIcon = getStatusIcon(planta.status)
            return (
              <Card key={planta.id}>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <StatusIcon className={`h-5 w-5 ${getStatusColor(planta.status)}`} />
                    {planta.nome}
                    <Badge
                      variant="secondary"
                      className={planta.status === "online" ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"}
                    >
                      {planta.status === "online" ? "Online" : "Offline"}
                    </Badge>
                  </CardTitle>
                  <p className="text-sm text-muted-foreground">
                    Última atualização: {formatDateTime(planta.ultimaAtualizacao)}
                  </p>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* Métricas da Usina */}
                    <div className="grid gap-4 md:grid-cols-4">
                      <div className="text-center">
                        <div className="text-xl font-bold">{formatNumber(planta.capacidade)} kWp</div>
                        <div className="text-sm text-muted-foreground">Capacidade</div>
                      </div>
                      <div className="text-center">
                        <div className="text-xl font-bold">{formatNumber(planta.potenciaAtual)} kW</div>
                        <div className="text-sm text-muted-foreground">Potência Atual</div>
                      </div>
                      <div className="text-center">
                        <div className="text-xl font-bold">{formatNumber(planta.geracaoHoje)} kWh</div>
                        <div className="text-sm text-muted-foreground">Geração Hoje</div>
                      </div>
                      <div className="text-center">
                        <div className="text-xl font-bold">{formatNumber(planta.eficiencia, 0)}%</div>
                        <div className="text-sm text-muted-foreground">Eficiência</div>
                      </div>
                    </div>

{/* Histórico de Geração */}
                    <div>
                      <h4 className="font-medium mb-3">Histórico de Geração</h4>
                      <div className="grid gap-4 md:grid-cols-3">
                        <div className="text-center p-3 bg-muted/50 rounded-lg">
                          <div className="text-lg font-bold text-green-600">{formatNumber(planta.geracaoMes)}</div>
                          <div className="text-sm text-muted-foreground">kWh Este Mês</div>
                        </div>
                        <div className="text-center p-3 bg-muted/50 rounded-lg">
                          <div className="text-lg font-bold text-orange-600">{formatNumber(planta.geracaoAno)}</div>
                          <div className="text-sm text-muted-foreground">kWh Este Ano</div>
                        </div>
                        <div className="text-center p-3 bg-muted/50 rounded-lg">
                          <div className="text-lg font-bold text-purple-600">{formatNumber(planta.geracaoTotal)}</div>
                          <div className="text-sm text-muted-foreground">kWh Total</div>
                        </div>
                      </div>
                    </div>

{/* Inversores */}
                    <div>
                      <h4 className="font-medium mb-3">Inversores</h4>
                      <div className="grid gap-3 md:grid-cols-2">
                        {planta.inversores.map((inversor) => {
                          const InversorStatusIcon = getStatusIcon(inversor.status)
                          return (
                            <div key={inversor.id} className="flex items-center justify-between p-3 border rounded-lg">
                              <div className="flex items-center gap-3">
                                <InversorStatusIcon className={`h-4 w-4 ${getStatusColor(inversor.status)}`} />
                                <span className="font-medium">{inversor.nome}</span>
                              </div>
                              <div className="text-right">
                                <div className="font-medium">{formatNumber(inversor.potencia)} kW</div>
                                <div className="text-xs text-muted-foreground capitalize">{inversor.status}</div>
                              </div>
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )
          })}
        </div>
      )}

{plantas.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
            <Zap className="h-12 w-12 text-muted-foreground opacity-50" />
            <div className="text-sm font-medium">Nenhuma usina cadastrada</div>
            <div className="text-xs text-muted-foreground">
              As usinas solares deste cliente aparecerão aqui quando configuradas.
            </div>
          </CardContent>
        </Card>
      )}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/usina/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import {
  Zap,
  MapPin,
  Settings,
  Activity,
  Thermometer,
  Gauge,
  Battery,
  Sun,
  Calendar,
  User2,
  FileCheck,
  ChevronDown,
  ChevronUp,
  Building2,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import type { ClienteDoc } from "@/lib/clients-db"
import { useCurrentUser } from "@/lib/use-current-user"

// Dados de exemplo das usinas
const mockPlantData = {
  usinas: [
    {
      id: "usina-001",
      nome: "Usina Principal",
      capacidade: 15.5,
      endereco: {
        logradouro: "Rua das Flores, 123",
        bairro: "Centro",
        cidade: "Goiânia",
        estado: "GO",
        cep: "74000-000",
        coordenadas: { lat: -16.6869, lng: -49.2648 },
      },
      equipamentos: {
        placas: {
          modelo: "Canadian Solar CS3W-400P",
          potencia: 400,
          quantidade: 39,
          tecnologia: "Policristalino",
          fabricante: "Canadian Solar",
        },
        inversores: [
          {
            id: "inv-001",
            modelo: "Fronius Primo 15.0-1",
            potencia: 15000,
            fabricante: "Fronius",
            status: "online",
            grandezas: {
              potenciaAC: 12.3,
              tensaoAC: 220,
              correnteAC: 18.6,
              frequencia: 60.1,
              temperatura: 45.2,
              eficiencia: 97.8,
              energiaTotal: 25890.2,
            },
          },
        ],
        stringBox: {
          modelo: "Steca PV-Switch 1000V",
          quantidade: 2,
          fabricante: "Steca",
        },
        estrutura: {
          tipo: "Estrutura Metálica Fixa",
          material: "Alumínio Anodizado",
          inclinacao: 15,
          orientacao: "Norte",
        },
      },
      instalacao: {
        dataInstalacao: "2023-03-15",
        dataComissionamento: "2023-03-20",
        responsavelTecnico: "João Silva - CREA 123456",
        art: "ART-2023-001234",
      },
    },
    {
      id: "usina-002",
      nome: "Usina Secundária",
      capacidade: 8.2,
      endereco: {
        logradouro: "Av. Principal, 456",
        bairro: "Setor Sul",
        cidade: "Goiânia",
        estado: "GO",
        cep: "74000-001",
        coordenadas: { lat: -16.695, lng: -49.27 },
      },
      equipamentos: {
        placas: {
          modelo: "Jinko Solar JKM400M-54HL4-V",
          potencia: 400,
          quantidade: 21,
          tecnologia: "Monocristalino",
          fabricante: "Jinko Solar",
        },
        inversores: [
          {
            id: "inv-003",
            modelo: "Growatt MID 8KTL3-X",
            potencia: 8000,
            fabricante: "Growatt",
            status: "offline",
            grandezas: {
              potenciaAC: 0,
              tensaoAC: 0,
              correnteAC: 0,
              frequencia: 0,
              temperatura: 25.1,
              eficiencia: 0,
              energiaTotal: 14520.1,
            },
          },
        ],
        stringBox: {
          modelo: "Steca PV-Switch 600V",
          quantidade: 1,
          fabricante: "Steca",
        },
        estrutura: {
          tipo: "Estrutura Metálica com Rastreamento",
          material: "Aço Galvanizado",
          inclinacao: 20,
          orientacao: "Norte",
        },
      },
      instalacao: {
        dataInstalacao: "2023-06-10",
        dataComissionamento: "2023-06-15",
        responsavelTecnico: "Maria Santos - CREA 654321",
        art: "ART-2023-005678",
      },
    },
  ],
}

function formatNumber(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num)
}

function formatDate(dateStr: string) {
  return new Date(dateStr).toLocaleDateString("pt-BR")
}

export default function ClientPlantPage() {
  const params = useParams()
  const { user } = useCurrentUser()
  const [client, setClient] = React.useState<ClienteDoc | null>(null)
  const [loading, setLoading] = React.useState(true)
  const [selectedInverter, setSelectedInverter] = React.useState<string | null>(null)

React.useEffect(() => {
    function generateMockClient(clientId: string): ClienteDoc {
      const mockClients = {
        "client-001": {
          id: "client-001",
          nome: "João Silva Santos",
          email: "joao.silva@email.com",
          telefone: "(62) 99999-1234",
          tipo: "PF" as const,
          documento: "123.456.789-00",
          endereco: {
            logradouro: "Rua das Flores, 123",
            bairro: "Centro",
            cidade: "Goiânia",
            estado: "GO",
            cep: "74000-000",
          },
          createdAt: new Date("2023-01-15"),
          updatedAt: new Date("2024-01-20"),
        },
        "client-002": {
          id: "client-002",
          nome: "Empresa Solar Ltda",
          email: "contato@empresasolar.com.br",
          telefone: "(62) 3333-4444",
          tipo: "PJ" as const,
          documento: "12.345.678/0001-90",
          endereco: {
            logradouro: "Av. Empresarial, 456",
            bairro: "Setor Empresarial",
            cidade: "Goiânia",
            estado: "GO",
            cep: "74000-001",
          },
          createdAt: new Date("2023-02-10"),
          updatedAt: new Date("2024-01-18"),
        },
        "client-003": {
          id: "client-003",
          nome: "Maria Oliveira Costa",
          email: "maria.costa@email.com",
          telefone: "(62) 98888-7777",
          tipo: "PF" as const,
          documento: "987.654.321-00",
          endereco: {
            logradouro: "Rua do Sol, 789",
            bairro: "Jardim América",
            cidade: "Anápolis",
            estado: "GO",
            cep: "75000-000",
          },
          createdAt: new Date("2023-03-05"),
          updatedAt: new Date("2024-01-15"),
        },
      }

return (
        mockClients[clientId as keyof typeof mockClients] || {
          id: clientId,
          nome: "Cliente Exemplo",
          email: "cliente@email.com",
          telefone: "(62) 99999-0000",
          tipo: "PF" as const,
          documento: "000.000.000-00",
          endereco: {
            logradouro: "Endereço Exemplo",
            bairro: "Bairro Exemplo",
            cidade: "Goiânia",
            estado: "GO",
            cep: "74000-000",
          },
          createdAt: new Date("2023-01-01"),
          updatedAt: new Date("2024-01-01"),
        }
      )
    }

async function loadClient() {
      if (!params.id) return

try {
        const mockClient = generateMockClient(params.id as string)
        setClient(mockClient)
      } catch (error) {
        console.error("Error loading client:", error)
      } finally {
        setLoading(false)
      }
    }

loadClient()
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="h-64 bg-muted rounded"></div>
          <div className="h-64 bg-muted rounded"></div>
        </div>
      </main>
    )
  }

const usinas = mockPlantData.usinas

return (
    <main className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-orange-50/20">
      <div className="container mx-auto px-4 py-6 space-y-8 max-w-7xl">
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-orange-500 via-orange-600 to-amber-500 p-8 text-white shadow-xl">
          <div className="absolute inset-0 bg-black/10"></div>
          <div className="relative z-10 flex flex-col sm:flex-row sm:items-center gap-4">
            <div className="flex items-center gap-4">
              <div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl">
                <Sun className="h-8 w-8" />
              </div>
              <div>
                <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Usina Fotovoltaica</h1>
                <p className="text-orange-100 text-lg">Monitoramento técnico e equipamentos</p>
              </div>
            </div>
          </div>
        </div>

{usinas.length > 1 ? (
          <Tabs defaultValue={usinas[0].id} className="space-y-8">
            <div className="flex justify-center">
              <TabsList className="grid w-full max-w-md grid-cols-2 h-12 bg-white shadow-lg border">
                {usinas.map((usina, index) => (
                  <TabsTrigger
                    key={usina.id}
                    value={usina.id}
                    className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-orange-500 data-[state=active]:to-amber-500 data-[state=active]:text-white font-medium"
                  >
                    <Zap className="h-4 w-4 mr-2" />
                    <span className="hidden sm:inline">{index === 0 ? usina.nome : `Usina ${index + 1}`}</span>
                    <span className="sm:hidden">{index + 1}</span>
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>

{usinas.map((usina) => (
              <TabsContent key={usina.id} value={usina.id} className="space-y-8">
                <PlantDetails
                  usina={usina}
                  selectedInverter={selectedInverter}
                  setSelectedInverter={setSelectedInverter}
                />
              </TabsContent>
            ))}
          </Tabs>
        ) : usinas.length === 1 ? (
          <PlantDetails
            usina={usinas[0]}
            selectedInverter={selectedInverter}
            setSelectedInverter={setSelectedInverter}
          />
        ) : (
          <Card className="border-dashed border-2 border-muted-foreground/25 bg-white/50 backdrop-blur-sm">
            <CardContent className="flex flex-col items-center justify-center gap-6 py-20 text-center">
              <div className="p-6 bg-gradient-to-br from-orange-100 to-amber-100 rounded-full">
                <Zap className="h-16 w-16 text-orange-600" />
              </div>
              <div className="space-y-3">
                <h3 className="text-2xl font-bold text-slate-800">Nenhuma usina cadastrada</h3>
                <p className="text-muted-foreground max-w-md text-lg">
                  As usinas solares deste cliente aparecerão aqui quando configuradas no sistema.
                </p>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </main>
  )
}

function PlantDetails({ usina, selectedInverter, setSelectedInverter }: any) {
  return (
    <div className="space-y-8">
      <div className="grid gap-6 lg:grid-cols-3">
        <Card className="lg:col-span-2 bg-white/80 backdrop-blur-sm shadow-lg border-0 ring-1 ring-slate-200">
          <CardHeader className="pb-6">
            <CardTitle className="flex items-center gap-3 text-2xl">
              <div className="p-2 bg-gradient-to-br from-orange-500 to-amber-500 rounded-lg">
                <Sun className="h-6 w-6 text-white" />
              </div>
              Informações Gerais
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-8">
            <div className="grid gap-8 sm:grid-cols-2">
              <div className="space-y-6">
                <div className="space-y-2">
                  <div className="text-sm font-medium text-slate-600">Nome da Usina</div>
                  <div className="text-xl font-bold text-slate-800">{usina.nome}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-slate-600">Capacidade Instalada</div>
                  <div className="text-3xl font-bold bg-gradient-to-r from-orange-600 to-amber-600 bg-clip-text text-transparent">
                    {formatNumber(usina.capacidade)} kWp
                  </div>
                </div>
              </div>
              <div className="space-y-6">
                <div className="space-y-2">
                  <div className="text-sm font-medium text-slate-600 flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-blue-500" />
                    Data de Instalação
                  </div>
                  <div className="font-semibold text-slate-800">{formatDate(usina.instalacao.dataInstalacao)}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-slate-600 flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-green-500" />
                    Data de Comissionamento
                  </div>
                  <div className="font-semibold text-slate-800">{formatDate(usina.instalacao.dataComissionamento)}</div>
                </div>
              </div>
            </div>

<div className="grid gap-6 sm:grid-cols-2">
              <div className="space-y-2">
                <div className="text-sm font-medium text-slate-600 flex items-center gap-2">
                  <User2 className="h-4 w-4 text-purple-500" />
                  Responsável Técnico
                </div>
                <div className="font-semibold text-slate-800">{usina.instalacao.responsavelTecnico}</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-slate-600 flex items-center gap-2">
                  <FileCheck className="h-4 w-4 text-emerald-500" />
                  ART
                </div>
                <div className="font-mono text-sm bg-slate-100 px-3 py-2 rounded-lg border">{usina.instalacao.art}</div>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-br from-blue-50 to-cyan-50 border-0 ring-1 ring-blue-200 shadow-lg">
          <CardHeader className="pb-6">
            <CardTitle className="flex items-center gap-3 text-xl">
              <div className="p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg">
                <MapPin className="h-5 w-5 text-white" />
              </div>
              Localização
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <div className="text-sm font-medium text-blue-700">Endereço</div>
              <div className="font-semibold text-slate-800 leading-relaxed">{usina.endereco.logradouro}</div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1">
                <div className="text-xs font-medium text-blue-600">Bairro</div>
                <div className="text-sm font-semibold text-slate-700">{usina.endereco.bairro}</div>
              </div>
              <div className="space-y-1">
                <div className="text-xs font-medium text-blue-600">CEP</div>
                <div className="text-sm font-mono font-semibold text-slate-700">{usina.endereco.cep}</div>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1">
                <div className="text-xs font-medium text-blue-600">Cidade</div>
                <div className="text-sm font-semibold text-slate-700">{usina.endereco.cidade}</div>
              </div>
              <div className="space-y-1">
                <div className="text-xs font-medium text-blue-600">Estado</div>
                <div className="text-sm font-semibold text-slate-700">{usina.endereco.estado}</div>
              </div>
            </div>
            <div className="space-y-2">
              <div className="text-xs font-medium text-blue-600">Coordenadas</div>
              <div className="text-xs font-mono bg-white/70 px-3 py-2 rounded-lg border border-blue-200">
                {usina.endereco.coordenadas.lat}, {usina.endereco.coordenadas.lng}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="space-y-6">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-gradient-to-br from-slate-600 to-slate-700 rounded-lg">
            <Settings className="h-6 w-6 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-slate-800">Equipamentos</h2>
        </div>

<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-0 ring-1 ring-blue-200 shadow-lg hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="text-xl flex items-center gap-3">
                <div className="p-2 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg">
                  <Sun className="h-5 w-5 text-white" />
                </div>
                Placas Solares
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-blue-700">Modelo</div>
                <div className="font-bold text-slate-800 text-lg">{usina.equipamentos.placas.modelo}</div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white/70 p-3 rounded-lg border border-blue-200">
                  <div className="text-xs font-medium text-blue-600 mb-1">Potência</div>
                  <div className="text-lg font-bold text-blue-700">{usina.equipamentos.placas.potencia}W</div>
                </div>
                <div className="bg-white/70 p-3 rounded-lg border border-blue-200">
                  <div className="text-xs font-medium text-blue-600 mb-1">Quantidade</div>
                  <div className="text-lg font-bold text-slate-800">{usina.equipamentos.placas.quantidade} un</div>
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-xs font-medium text-blue-600">Tecnologia</div>
                <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100 border-blue-200">
                  {usina.equipamentos.placas.tecnologia}
                </Badge>
              </div>
              <div className="space-y-2">
                <div className="text-xs font-medium text-blue-600">Fabricante</div>
                <div className="text-sm font-semibold text-slate-700">{usina.equipamentos.placas.fabricante}</div>
              </div>
            </CardContent>
          </Card>

<Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-0 ring-1 ring-green-200 shadow-lg hover:shadow-xl transition-all duration-300">
            <CardHeader className="pb-4">
              <CardTitle className="text-xl flex items-center gap-3">
                <div className="p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg">
                  <Settings className="h-5 w-5 text-white" />
                </div>
                String Box
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-green-700">Modelo</div>
                <div className="font-bold text-slate-800 text-lg">{usina.equipamentos.stringBox.modelo}</div>
              </div>
              <div className="bg-white/70 p-4 rounded-lg border border-green-200">
                <div className="text-sm font-medium text-green-600 mb-1">Quantidade</div>
                <div className="text-2xl font-bold text-green-700">
                  {usina.equipamentos.stringBox.quantidade} unidades
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-green-600">Fabricante</div>
                <div className="text-sm font-semibold text-slate-700">{usina.equipamentos.stringBox.fabricante}</div>
              </div>
            </CardContent>
          </Card>

<Card className="bg-gradient-to-br from-purple-50 to-violet-50 border-0 ring-1 ring-purple-200 shadow-lg hover:shadow-xl transition-all duration-300 md:col-span-2 xl:col-span-1">
            <CardHeader className="pb-4">
              <CardTitle className="text-xl flex items-center gap-3">
                <div className="p-2 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg">
                  <Building2 className="h-5 w-5 text-white" />
                </div>
                Estrutura
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-purple-700">Tipo</div>
                <div className="font-bold text-slate-800 text-lg leading-relaxed">
                  {usina.equipamentos.estrutura.tipo}
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-purple-600">Material</div>
                <div className="font-semibold text-slate-700">{usina.equipamentos.estrutura.material}</div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white/70 p-3 rounded-lg border border-purple-200">
                  <div className="text-xs font-medium text-purple-600 mb-1">Inclinação</div>
                  <div className="text-lg font-bold text-purple-700">{usina.equipamentos.estrutura.inclinacao}°</div>
                </div>
                <div className="bg-white/70 p-3 rounded-lg border border-purple-200">
                  <div className="text-xs font-medium text-purple-600 mb-1">Orientação</div>
                  <div className="text-lg font-bold text-slate-800">{usina.equipamentos.estrutura.orientacao}</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<div className="space-y-6">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-gradient-to-br from-orange-500 to-amber-500 rounded-lg">
            <Zap className="h-6 w-6 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-slate-800">Inversores</h2>
        </div>

<div className="space-y-6">
          {usina.equipamentos.inversores.map((inversor: any) => (
            <Card
              key={inversor.id}
              className="bg-white/80 backdrop-blur-sm shadow-lg border-0 ring-1 ring-orange-200 hover:ring-orange-300 transition-all duration-300"
            >
              <CardContent className="p-6 sm:p-8">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
                  <div className="flex items-center gap-4">
                    <div className="p-3 bg-gradient-to-br from-orange-500 to-amber-500 rounded-xl shadow-lg">
                      <Zap className="h-7 w-7 text-white" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-slate-800">{inversor.modelo}</h3>
                      <p className="text-slate-600 font-medium">{inversor.fabricante}</p>
                    </div>
                  </div>
                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                    <Badge
                      variant={inversor.status === "online" ? "default" : "destructive"}
                      className={`${
                        inversor.status === "online"
                          ? "bg-green-100 text-green-800 hover:bg-green-100 border-green-200"
                          : "bg-red-100 text-red-800 hover:bg-red-100 border-red-200"
                      } px-3 py-1`}
                    >
                      <div
                        className={`w-2 h-2 rounded-full mr-2 ${inversor.status === "online" ? "bg-green-500" : "bg-red-500"}`}
                      />
                      {inversor.status === "online" ? "Online" : "Offline"}
                    </Badge>
                    <Button
                      variant={selectedInverter === inversor.id ? "default" : "outline"}
                      size="sm"
                      onClick={() => setSelectedInverter(selectedInverter === inversor.id ? null : inversor.id)}
                      className={`gap-2 ${
                        selectedInverter === inversor.id
                          ? "bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600"
                          : "hover:bg-orange-50 hover:border-orange-200"
                      }`}
                    >
                      {selectedInverter === inversor.id ? (
                        <ChevronUp className="h-4 w-4" />
                      ) : (
                        <ChevronDown className="h-4 w-4" />
                      )}
                      {selectedInverter === inversor.id ? "Ocultar" : "Ver"} Grandezas
                    </Button>
                  </div>
                </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                  <div className="bg-gradient-to-br from-orange-50 to-amber-50 p-5 rounded-xl border border-orange-200">
                    <div className="text-sm font-medium text-orange-700 mb-2">Potência Nominal</div>
                    <div className="text-2xl font-bold text-orange-600">
                      {formatNumber(inversor.potencia / 1000)} kW
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-blue-50 to-cyan-50 p-5 rounded-xl border border-blue-200">
                    <div className="text-sm font-medium text-blue-700 mb-2">Energia Total</div>
                    <div className="text-2xl font-bold text-blue-600">
                      {formatNumber(inversor.grandezas.energiaTotal)} kWh
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-green-50 to-emerald-50 p-5 rounded-xl border border-green-200 sm:col-span-2 lg:col-span-1">
                    <div className="text-sm font-medium text-green-700 mb-2">Eficiência</div>
                    <div className="text-2xl font-bold text-green-600">
                      {formatNumber(inversor.grandezas.eficiencia)}%
                    </div>
                  </div>
                </div>

{selectedInverter === inversor.id && (
                  <div className="border-t border-slate-200 pt-8">
                    <h4 className="font-bold mb-6 flex items-center gap-3 text-xl text-slate-800">
                      <div className="p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg">
                        <Activity className="h-5 w-5 text-white" />
                      </div>
                      Grandezas Elétricas em Tempo Real
                    </h4>
                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border border-blue-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="p-2 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg">
                          <Gauge className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-blue-800">Potência AC</div>
                          <div className="text-xl font-bold text-blue-900">
                            {formatNumber(inversor.grandezas.potenciaAC)} kW
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="p-2 bg-gradient-to-br from-green-500 to-green-600 rounded-lg">
                          <Zap className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-green-800">Tensão AC</div>
                          <div className="text-xl font-bold text-green-900">
                            {formatNumber(inversor.grandezas.tensaoAC, 0)} V
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl border border-orange-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="p-2 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg">
                          <Activity className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-orange-800">Corrente AC</div>
                          <div className="text-xl font-bold text-orange-900">
                            {formatNumber(inversor.grandezas.correnteAC)} A
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl border border-purple-200 shadow-sm hover:shadow-md transition-shadow">
                        <div className="p-2 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg">
                          <Settings className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-purple-800">Frequência</div>
                          <div className="text-xl font-bold text-purple-900">
                            {formatNumber(inversor.grandezas.frequencia)} Hz
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-red-50 to-red-100 rounded-xl border border-red-200 shadow-sm hover:shadow-md transition-shadow sm:col-span-2 lg:col-span-1">
                        <div className="p-2 bg-gradient-to-br from-red-500 to-red-600 rounded-lg">
                          <Thermometer className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-red-800">Temperatura</div>
                          <div className="text-xl font-bold text-red-900">
                            {formatNumber(inversor.grandezas.temperatura)} °C
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-4 p-5 bg-gradient-to-br from-teal-50 to-teal-100 rounded-xl border border-teal-200 shadow-sm hover:shadow-md transition-shadow sm:col-span-2 lg:col-span-1">
                        <div className="p-2 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg">
                          <Battery className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <div className="text-sm font-medium text-teal-800">Eficiência</div>
                          <div className="text-xl font-bold text-teal-900">
                            {formatNumber(inversor.grandezas.eficiencia)} %
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/alertas/page.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { AlertTriangle, CheckCircle, Clock, Settings, Lightbulb, X } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"

// Dados de exemplo de alertas
const mockAlertsData = {
  alertas: [
    {
      id: "alert-001",
      tipo: "critico",
      categoria: "inversor",
      equipamento: "Inversor 1 - Fronius Primo 15.0-1",
      codigo: "E001",
      descricao: "Falha de comunicação DC",
      dataOcorrencia: "2024-01-15T14:30:00Z",
      status: "ativo",
      impacto: "Redução de 50% na geração",
      diagnosticoIA: {
        causa: "Possível problema no cabo DC ou conexão solta",
        solucao: "Verificar conexões DC, inspecionar cabos por danos físicos e testar continuidade",
        urgencia: "Alta - Resolver em até 24h",
        custoEstimado: "R$ 150 - R$ 300",
      },
    },
    {
      id: "alert-002",
      tipo: "aviso",
      categoria: "temperatura",
      equipamento: "Inversor 2 - Fronius Primo 15.0-1",
      codigo: "W003",
      descricao: "Temperatura elevada",
      dataOcorrencia: "2024-01-14T13:45:00Z",
      status: "ativo",
      impacto: "Redução temporária de eficiência",
      diagnosticoIA: {
        causa: "Ventilação insuficiente ou obstrução das aletas de resfriamento",
        solucao: "Limpar aletas de resfriamento, verificar ventilação do local de instalação",
        urgencia: "Média - Resolver em até 7 dias",
        custoEstimado: "R$ 80 - R$ 150",
      },
    },
    {
      id: "alert-003",
      tipo: "info",
      categoria: "manutencao",
      equipamento: "Usina Principal",
      codigo: "M001",
      descricao: "Manutenção preventiva programada",
      dataOcorrencia: "2024-01-10T09:00:00Z",
      status: "resolvido",
      impacto: "Nenhum impacto na geração",
      diagnosticoIA: {
        causa: "Manutenção preventiva de rotina",
        solucao: "Limpeza dos painéis, inspeção visual dos equipamentos, verificação de conexões",
        urgencia: "Baixa - Agendar conforme disponibilidade",
        custoEstimado: "R$ 200 - R$ 400",
      },
    },
    {
      id: "alert-004",
      tipo: "critico",
      categoria: "rede",
      equipamento: "Sistema de Monitoramento",
      codigo: "N002",
      descricao: "Perda de comunicação com inversor",
      dataOcorrencia: "2024-01-12T16:20:00Z",
      status: "ativo",
      impacto: "Impossibilidade de monitoramento remoto",
      diagnosticoIA: {
        causa: "Falha na conexão de rede ou problema no módulo de comunicação",
        solucao: "Verificar conexão de internet, reiniciar equipamento, testar módulo WiFi/Ethernet",
        urgencia: "Alta - Resolver em até 48h",
        custoEstimado: "R$ 100 - R$ 250",
      },
    },
  ],
}

function formatDateTime(iso: string) {
  return new Date(iso).toLocaleString("pt-BR")
}

function getAlertIcon(tipo: string) {
  switch (tipo) {
    case "critico":
      return AlertTriangle
    case "aviso":
      return Clock
    case "info":
      return CheckCircle
    default:
      return AlertTriangle
  }
}

function getAlertColor(tipo: string) {
  switch (tipo) {
    case "critico":
      return "text-red-600"
    case "aviso":
      return "text-yellow-600"
    case "info":
      return "text-blue-600"
    default:
      return "text-gray-600"
  }
}

function getStatusColor(status: string) {
  switch (status) {
    case "ativo":
      return "bg-red-50 text-red-700"
    case "resolvido":
      return "bg-green-50 text-green-700"
    case "em_andamento":
      return "bg-yellow-50 text-yellow-700"
    default:
      return "bg-gray-50 text-gray-700"
  }
}

return (
    clients[clientId as keyof typeof clients] || {
      nome: `Cliente ${clientId}`,
      email: `${clientId}@email.com`,
      tipo: "PF",
    }
  )
}

export default function ClientAlertsPage() {
  const params = useParams()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)
  const [filterType, setFilterType] = React.useState("todos")
  const [filterStatus, setFilterStatus] = React.useState("todos")
  const [selectedAlert, setSelectedAlert] = React.useState<string | null>(null)

React.useEffect(() => {
    const mockClient = generateMockClient(params.id as string)
    setClient(mockClient)
    setLoading(false)
  }, [params.id])

const alertas = mockAlertsData.alertas
  const alertasAtivos = alertas.filter((a) => a.status === "ativo")
  const alertasCriticos = alertas.filter((a) => a.tipo === "critico" && a.status === "ativo")
  const alertasAvisos = alertas.filter((a) => a.tipo === "aviso" && a.status === "ativo")

return (
    <main className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold tracking-tight">Alertas do Sistema</h2>
        <p className="text-muted-foreground">Monitoramento inteligente com diagnóstico automático</p>
      </div>

{/* Cards de Resumo */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de Alertas</CardTitle>
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{alertas.length}</div>
            <p className="text-xs text-muted-foreground">Últimos 30 dias</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Alertas Ativos</CardTitle>
            <Clock className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{alertasAtivos.length}</div>
            <p className="text-xs text-muted-foreground">Requerem atenção</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Críticos</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{alertasCriticos.length}</div>
            <p className="text-xs text-muted-foreground">Alta prioridade</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Avisos</CardTitle>
            <Clock className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{alertasAvisos.length}</div>
            <p className="text-xs text-muted-foreground">Média prioridade</p>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardHeader>
          <CardTitle>Filtros</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            <Select value={filterType} onValueChange={setFilterType}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Tipo de alerta" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os tipos</SelectItem>
                <SelectItem value="critico">Críticos</SelectItem>
                <SelectItem value="aviso">Avisos</SelectItem>
                <SelectItem value="info">Informativos</SelectItem>
              </SelectContent>
            </Select>

<Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os status</SelectItem>
                <SelectItem value="ativo">Ativos</SelectItem>
                <SelectItem value="resolvido">Resolvidos</SelectItem>
                <SelectItem value="em_andamento">Em andamento</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Lista de Alertas */}
      <div className="space-y-4">
        {alertas.map((alerta) => {
          const AlertIcon = getAlertIcon(alerta.tipo)
          const isSelected = selectedAlert === alerta.id

return (
            <Card key={alerta.id} className={isSelected ? "ring-2 ring-primary" : ""}>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <AlertIcon className={`h-5 w-5 ${getAlertColor(alerta.tipo)}`} />
                    <div>
                      <CardTitle className="text-base">{alerta.descricao}</CardTitle>
                      <p className="text-sm text-muted-foreground">{alerta.equipamento}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="secondary" className={getStatusColor(alerta.status)}>
                      {alerta.status === "ativo"
                        ? "Ativo"
                        : alerta.status === "resolvido"
                          ? "Resolvido"
                          : "Em Andamento"}
                    </Badge>
                    <Button variant="outline" size="sm" onClick={() => setSelectedAlert(isSelected ? null : alerta.id)}>
                      {isSelected ? <X className="h-4 w-4" /> : <Lightbulb className="h-4 w-4" />}
                      {isSelected ? "Fechar" : "Diagnóstico IA"}
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-4 md:grid-cols-3 mb-4">
                  <div>
                    <div className="text-sm text-muted-foreground">Código do Erro</div>
                    <div className="font-mono text-sm">{alerta.codigo}</div>
                  </div>
                  <div>
                    <div className="text-sm text-muted-foreground">Data de Ocorrência</div>
                    <div className="text-sm">{formatDateTime(alerta.dataOcorrencia)}</div>
                  </div>
                  <div>
                    <div className="text-sm text-muted-foreground">Impacto</div>
                    <div className="text-sm">{alerta.impacto}</div>
                  </div>
                </div>

{isSelected && (
                  <div className="border-t pt-4">
                    <div className="flex items-center gap-2 mb-4">
                      <Lightbulb className="h-5 w-5 text-blue-600" />
                      <h4 className="font-medium">Diagnóstico Inteligente</h4>
                    </div>

<div className="space-y-4">
                      <Alert>
                        <AlertTriangle className="h-4 w-4" />
                        <AlertDescription>
                          <strong>Causa Provável:</strong> {alerta.diagnosticoIA.causa}
                        </AlertDescription>
                      </Alert>

<div className="grid gap-4 md:grid-cols-2">
                        <div className="p-4 border rounded-lg">
                          <h5 className="font-medium mb-2 flex items-center gap-2">
                            <Settings className="h-4 w-4" />
                            Solução Recomendada
                          </h5>
                          <p className="text-sm text-muted-foreground">{alerta.diagnosticoIA.solucao}</p>
                        </div>

<div className="p-4 border rounded-lg">
                          <h5 className="font-medium mb-2 flex items-center gap-2">
                            <Clock className="h-4 w-4" />
                            Urgência e Custo
                          </h5>
                          <div className="space-y-2">
                            <div className="text-sm">
                              <span className="text-muted-foreground">Urgência:</span> {alerta.diagnosticoIA.urgencia}
                            </div>
                            <div className="text-sm">
                              <span className="text-muted-foreground">Custo estimado:</span>{" "}
                              {alerta.diagnosticoIA.custoEstimado}
                            </div>
                          </div>
                        </div>
                      </div>

<div className="flex gap-2">
                        <Button size="sm" className="bg-green-600 hover:bg-green-700">
                          Marcar como Resolvido
                        </Button>
                        <Button variant="outline" size="sm">
                          Criar Chamado
                        </Button>
                        <Button variant="outline" size="sm">
                          Agendar Manutenção
                        </Button>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          )
        })}
      </div>

{alertas.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
            <CheckCircle className="h-12 w-12 text-green-600 opacity-50" />
            <div className="text-sm font-medium">Nenhum alerta encontrado</div>
            <div className="text-xs text-muted-foreground">Todos os sistemas estão funcionando normalmente.</div>
          </CardContent>
        </Card>
      )}
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/chamados/page.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import { Headphones, Plus, Filter, Calendar, User, Clock, CheckCircle, AlertCircle } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

return (
    clients[clientId as keyof typeof clients] || {
      nome: `Cliente ${clientId}`,
      email: `${clientId}@email.com`,
      tipo: "PF",
    }
  )
}

// Dados de exemplo de chamados
const mockTicketsData = {
  chamados: [
    {
      id: "ticket-001",
      numero: "2024-001",
      tipo: "Alerta no Inversor",
      titulo: "Falha de comunicação DC - Inversor 1",
      descricao: "Inversor apresentando erro E001 - Falha de comunicação DC",
      prioridade: "alta",
      status: "aberto",
      dataAbertura: "2024-01-15T14:30:00Z",
      dataPrevisao: "2024-01-17T14:30:00Z",
      responsavel: "João Silva",
      categoria: "manutencao",
    },
    {
      id: "ticket-002",
      numero: "2024-002",
      tipo: "Agendar Limpeza na Usina",
      titulo: "Limpeza preventiva dos painéis solares",
      descricao: "Agendar limpeza dos painéis solares da usina principal",
      prioridade: "media",
      status: "em_andamento",
      dataAbertura: "2024-01-10T09:00:00Z",
      dataPrevisao: "2024-01-20T09:00:00Z",
      responsavel: "Maria Santos",
      categoria: "limpeza",
    },
    {
      id: "ticket-003",
      numero: "2024-003",
      tipo: "Checar a conta de energia",
      titulo: "Análise da fatura de janeiro/2024",
      descricao: "Verificar divergências na fatura de energia elétrica",
      prioridade: "baixa",
      status: "concluido",
      dataAbertura: "2024-01-05T10:15:00Z",
      dataPrevisao: "2024-01-12T10:15:00Z",
      dataConclusao: "2024-01-11T16:30:00Z",
      responsavel: "Carlos Oliveira",
      categoria: "financeiro",
    },
    {
      id: "ticket-004",
      numero: "2024-004",
      tipo: "Agendar Visita",
      titulo: "Inspeção técnica semestral",
      descricao: "Visita técnica para inspeção geral dos equipamentos",
      prioridade: "media",
      status: "agendado",
      dataAbertura: "2024-01-08T11:20:00Z",
      dataPrevisao: "2024-01-25T14:00:00Z",
      responsavel: "Ana Costa",
      categoria: "inspecao",
    },
  ],
}

const tiposChamado = [
  "Alerta no Inversor",
  "Agendar Limpeza na Usina",
  "Agendar Visita",
  "Checar a conta de energia",
  "Cadastrar um rateio da Energia",
  "Mudar Titularidade de uma UC",
  "Manutenção Preventiva",
  "Manutenção Corretiva",
  "Suporte Técnico",
  "Outros",
]

function formatDateTime(iso: string) {
  return new Date(iso).toLocaleString("pt-BR")
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString("pt-BR")
}

function getStatusColor(status: string) {
  switch (status) {
    case "aberto":
      return "bg-red-50 text-red-700"
    case "em_andamento":
      return "bg-yellow-50 text-yellow-700"
    case "agendado":
      return "bg-blue-50 text-blue-700"
    case "concluido":
      return "bg-green-50 text-green-700"
    default:
      return "bg-gray-50 text-gray-700"
  }
}

function getPriorityColor(prioridade: string) {
  switch (prioridade) {
    case "alta":
      return "bg-red-50 text-red-700"
    case "media":
      return "bg-yellow-50 text-yellow-700"
    case "baixa":
      return "bg-green-50 text-green-700"
    default:
      return "bg-gray-50 text-gray-700"
  }
}

function getStatusIcon(status: string) {
  switch (status) {
    case "aberto":
      return AlertCircle
    case "em_andamento":
      return Clock
    case "agendado":
      return Calendar
    case "concluido":
      return CheckCircle
    default:
      return Clock
  }
}

export default function ClientTicketsPage() {
  const params = useParams()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)
  const [filterStatus, setFilterStatus] = React.useState("todos")
  const [filterPriority, setFilterPriority] = React.useState("todas")
  const [isNewTicketOpen, setIsNewTicketOpen] = React.useState(false)

React.useEffect(() => {
    function loadClient() {
      if (!params.id) return

loadClient()
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-4">
          <div className="h-32 bg-muted rounded"></div>
          <div className="h-32 bg-muted rounded"></div>
          <div className="h-32 bg-muted rounded"></div>
          <div className="h-32 bg-muted rounded"></div>
        </div>
      </main>
    )
  }

const chamados = mockTicketsData.chamados
  const chamadosAbertos = chamados.filter((c) => c.status === "aberto")
  const chamadosAndamento = chamados.filter((c) => c.status === "em_andamento")
  const chamadosAgendados = chamados.filter((c) => c.status === "agendado")
  const chamadosConcluidos = chamados.filter((c) => c.status === "concluido")

return (
    <main className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Chamados de Atendimento</h2>
          <p className="text-muted-foreground">Gerencie solicitações e acompanhe o atendimento</p>
        </div>
        <Dialog open={isNewTicketOpen} onOpenChange={setIsNewTicketOpen}>
          <DialogTrigger asChild>
            <Button className="flex items-center gap-2">
              <Plus className="h-4 w-4" />
              Novo Chamado
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle>Novo Chamado</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="tipo">Tipo de Chamado</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    {tiposChamado.map((tipo) => (
                      <SelectItem key={tipo} value={tipo}>
                        {tipo}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="titulo">Título</Label>
                <Input id="titulo" placeholder="Descreva brevemente o problema" />
              </div>
              <div>
                <Label htmlFor="descricao">Descrição</Label>
                <Textarea id="descricao" placeholder="Descreva detalhadamente a solicitação" rows={3} />
              </div>
              <div>
                <Label htmlFor="prioridade">Prioridade</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione a prioridade" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="alta">Alta</SelectItem>
                    <SelectItem value="media">Média</SelectItem>
                    <SelectItem value="baixa">Baixa</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex gap-2">
                <Button className="flex-1">Criar Chamado</Button>
                <Button variant="outline" onClick={() => setIsNewTicketOpen(false)}>
                  Cancelar
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

{/* Cards de Resumo */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Abertos</CardTitle>
            <AlertCircle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{chamadosAbertos.length}</div>
            <p className="text-xs text-muted-foreground">Aguardando atendimento</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Em Andamento</CardTitle>
            <Clock className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{chamadosAndamento.length}</div>
            <p className="text-xs text-muted-foreground">Sendo executados</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Agendados</CardTitle>
            <Calendar className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{chamadosAgendados.length}</div>
            <p className="text-xs text-muted-foreground">Com data marcada</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Concluídos</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{chamadosConcluidos.length}</div>
            <p className="text-xs text-muted-foreground">Este mês</p>
          </CardContent>
        </Card>
      </div>

{/* Filtros */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="h-4 w-4" />
            Filtros
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            <Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os status</SelectItem>
                <SelectItem value="aberto">Abertos</SelectItem>
                <SelectItem value="em_andamento">Em andamento</SelectItem>
                <SelectItem value="agendado">Agendados</SelectItem>
                <SelectItem value="concluido">Concluídos</SelectItem>
              </SelectContent>
            </Select>

<Select value={filterPriority} onValueChange={setFilterPriority}>
              <SelectTrigger className="w-48">
                <SelectValue placeholder="Prioridade" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todas">Todas as prioridades</SelectItem>
                <SelectItem value="alta">Alta</SelectItem>
                <SelectItem value="media">Média</SelectItem>
                <SelectItem value="baixa">Baixa</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Lista de Chamados */}
      <div className="space-y-4">
        {chamados.map((chamado) => {
          const StatusIcon = getStatusIcon(chamado.status)

return (
            <Card key={chamado.id}>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <StatusIcon className="h-5 w-5 text-muted-foreground" />
                    <div>
                      <CardTitle className="text-base">
                        #{chamado.numero} - {chamado.titulo}
                      </CardTitle>
                      <p className="text-sm text-muted-foreground">{chamado.tipo}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="secondary" className={getPriorityColor(chamado.prioridade)}>
                      {chamado.prioridade === "alta" ? "Alta" : chamado.prioridade === "media" ? "Média" : "Baixa"}
                    </Badge>
                    <Badge variant="secondary" className={getStatusColor(chamado.status)}>
                      {chamado.status === "aberto"
                        ? "Aberto"
                        : chamado.status === "em_andamento"
                          ? "Em Andamento"
                          : chamado.status === "agendado"
                            ? "Agendado"
                            : "Concluído"}
                    </Badge>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-sm">{chamado.descricao}</p>

<div className="grid gap-4 md:grid-cols-3">
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <div className="text-sm text-muted-foreground">Abertura</div>
                        <div className="text-sm font-medium">{formatDate(chamado.dataAbertura)}</div>
                      </div>
                    </div>

<div className="flex items-center gap-2">
                      <Clock className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <div className="text-sm text-muted-foreground">Previsão</div>
                        <div className="text-sm font-medium">{formatDate(chamado.dataPrevisao)}</div>
                      </div>
                    </div>

<div className="flex items-center gap-2">
                      <User className="h-4 w-4 text-muted-foreground" />
                      <div>
                        <div className="text-sm text-muted-foreground">Responsável</div>
                        <div className="text-sm font-medium">{chamado.responsavel}</div>
                      </div>
                    </div>
                  </div>

{chamado.status !== "concluido" && (
                    <div className="flex gap-2">
                      <Button size="sm" variant="outline">
                        Editar
                      </Button>
                      <Button size="sm" variant="outline">
                        Adicionar Comentário
                      </Button>
                      {chamado.status === "aberto" && (
                        <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
                          Iniciar Atendimento
                        </Button>
                      )}
                      {chamado.status === "em_andamento" && (
                        <Button size="sm" className="bg-green-600 hover:bg-green-700">
                          Marcar como Concluído
                        </Button>
                      )}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

{chamados.length === 0 && (
        <Card>
          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
            <Headphones className="h-12 w-12 text-muted-foreground opacity-50" />
            <div className="text-sm font-medium">Nenhum chamado encontrado</div>
            <div className="text-xs text-muted-foreground">Crie um novo chamado para começar.</div>
          </CardContent>
        </Card>
      )}
    </main>
  )
}
[V0_FILE]typescript:file="app/dashboard/clientes/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import Link from "next/link"
import { Plus, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ClientsTable } from "@/components/clients-table"
import { useCurrentUser } from "@/lib/use-current-user"

const mockClients = [
  {
    id: "client-001",
    tipo: "PF" as const,
    nome: "João Silva Santos",
    doc: "456.789.123-45",
    email: "joao.silva@email.com",
    telefone: "(62) 99876-5432",
    cidadeUf: "Goiânia/GO",
    criadoEm: new Date("2023-03-15"),
  },
  {
    id: "client-002",
    tipo: "PJ" as const,
    nome: "Energia Solar Goiás Ltda",
    doc: "12.345.678/0001-95",
    email: "contato@energiasolargoias.com.br",
    telefone: "(62) 3456-7890",
    cidadeUf: "Goiânia/GO",
    criadoEm: new Date("2023-07-22"),
  },
  {
    id: "client-003",
    tipo: "PF" as const,
    nome: "Maria Oliveira Costa",
    doc: "123.456.789-09",
    email: "maria.oliveira@gmail.com",
    telefone: "(62) 98765-4321",
    cidadeUf: "Aparecida de Goiânia/GO",
    criadoEm: new Date("2023-11-08"),
  },
  {
    id: "client-004",
    tipo: "PF" as const,
    nome: "Carlos Eduardo Ferreira",
    doc: "987.654.321-09",
    email: "carlos.ferreira@hotmail.com",
    telefone: "(61) 99123-4567",
    cidadeUf: "Brasília/DF",
    criadoEm: new Date("2024-01-10"),
  },
  {
    id: "client-005",
    tipo: "PJ" as const,
    nome: "Fazenda Solar Brasília S.A.",
    doc: "98.765.432/0001-10",
    email: "admin@fazendasolarbsb.com.br",
    telefone: "(61) 3234-5678",
    cidadeUf: "Brasília/DF",
    criadoEm: new Date("2024-02-01"),
  },
  {
    id: "client-006",
    tipo: "PF" as const,
    nome: "Ana Paula Rodrigues",
    doc: "789.123.456-33",
    email: "ana.rodrigues@yahoo.com.br",
    telefone: "(62) 98888-7777",
    cidadeUf: "Senador Canedo/GO",
    criadoEm: new Date("2024-02-15"),
  },
  {
    id: "client-007",
    tipo: "PJ" as const,
    nome: "Cooperativa Agro Solar",
    doc: "55.666.777/0001-88",
    email: "cooperativa@agrosolar.coop.br",
    telefone: "(62) 3555-6666",
    cidadeUf: "Rio Verde/GO",
    criadoEm: new Date("2024-03-01"),
  },
  {
    id: "client-008",
    tipo: "PF" as const,
    nome: "Roberto Almeida Nunes",
    doc: "321.654.987-44",
    email: "roberto.nunes@gmail.com",
    telefone: "(62) 97777-8888",
    cidadeUf: "Trindade/GO",
    criadoEm: new Date("2024-03-10"),
  },
  {
    id: "client-009",
    tipo: "PJ" as const,
    nome: "Shopping Center Eco Energy S.A.",
    doc: "33.444.555/0001-66",
    email: "energia@shoppingeco.com.br",
    telefone: "(61) 3333-4444",
    cidadeUf: "Taguatinga/DF",
    criadoEm: new Date("2024-03-15"),
  },
  {
    id: "client-010",
    tipo: "PF" as const,
    nome: "Fernanda Silva Pereira",
    doc: "456.789.123-55",
    email: "fernanda.pereira@email.com",
    telefone: "(62) 96666-5555",
    cidadeUf: "Goiânia/GO",
    criadoEm: new Date("2024-03-20"),
  },
]

export default function ClientesPage() {
  const { user } = useCurrentUser()
  const [rows] = React.useState(mockClients)
  const [queryStr, setQueryStr] = React.useState("")

const filtered = React.useMemo(() => {
    if (!queryStr.trim()) return rows
    const q = queryStr.toLowerCase()
    return rows.filter((r) => {
      return (
        r.nome.toLowerCase().includes(q) ||
        r.doc.toLowerCase().includes(q) ||
        r.email.toLowerCase().includes(q) ||
        r.telefone.toLowerCase().includes(q) ||
        r.cidadeUf.toLowerCase().includes(q) ||
        r.tipo.toLowerCase().includes(q)
      )
    })
  }, [rows, queryStr])

return (
    <main className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 className="text-xl font-semibold tracking-tight">Clientes</h2>
          <p className="text-sm text-muted-foreground">Lista e gerenciamento de clientes (escopo do seu usuário).</p>
        </div>
        <Button asChild className="bg-emerald-600 hover:bg-emerald-700">
          <Link href="/dashboard/clientes/novo" prefetch>
            <Plus className="mr-2 h-4 w-4" />
            Novo cliente
          </Link>
        </Button>
      </div>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Clientes cadastrados</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-2">
            <Search className="h-4 w-4 text-muted-foreground" />
            <Input
              value={queryStr}
              onChange={(e) => setQueryStr(e.target.value)}
              placeholder="Buscar por nome, documento, e-mail, telefone, cidade..."
            />
          </div>

<ClientsTable rows={filtered} />
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescript:file="app/dashboard/clientes/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams, useRouter } from "next/navigation"
import { ArrowLeft, Mail, Phone, MapPin, Calendar, FileText, Zap } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { generateMockClient } from "@/lib/mock-data"

function formatCPF(cpf: string) {
  const d = cpf.replace(/\D+/g, "").padStart(11, " ")
  return `${d.slice(0, 3)}.${d.slice(3, 6)}.${d.slice(6, 9)}-${d.slice(9, 11)}`.trim()
}

function formatCNPJ(cnpj: string) {
  const d = cnpj.replace(/\D+/g, "").padStart(14, " ")
  return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8, 12)}-${d.slice(12, 14)}`.trim()
}

function formatDate(iso: string) {
  const dt = new Date(iso)
  if (Number.isNaN(dt.getTime())) return iso
  return dt.toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "long",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })
}

export default function ClientDashboardPage() {
  const params = useParams()
  const router = useRouter()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)

React.useEffect(() => {
    async function loadClient() {
      if (!params.id) return

// Simulate loading delay
      await new Promise((resolve) => setTimeout(resolve, 500))

const mockClient = generateMockClient(params.id as string)
      setClient(mockClient)
      setLoading(false)
    }

loadClient()
  }, [params.id])

if (loading) {
    return (
      <main className="space-y-6">
        <div className="animate-pulse">
          <div className="h-8 bg-muted rounded w-48 mb-2"></div>
          <div className="h-4 bg-muted rounded w-64"></div>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="h-64 bg-muted rounded"></div>
          <div className="h-64 bg-muted rounded"></div>
        </div>
      </main>
    )
  }

if (!client) {
    return (
      <main className="space-y-6">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="sm" onClick={() => router.back()}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Voltar
          </Button>
        </div>
        <Card>
          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
            <div className="text-sm font-medium">Cliente não encontrado</div>
            <div className="text-xs text-muted-foreground">
              O cliente pode ter sido removido ou você não tem permissão para visualizá-lo.
            </div>
          </CardContent>
        </Card>
      </main>
    )
  }

const isPF = client.payload.tipo === "PF"
  const data = isPF ? client.payload.pf : client.payload.pj

return (
    <main className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold tracking-tight">Dashboard do Cliente</h2>
        <p className="text-muted-foreground">Visão geral das informações e atividades do cliente</p>
      </div>

<div className="grid gap-6 md:grid-cols-2">
        {/* Informações Básicas */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-4 w-4" />
              Informações Básicas
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Tipo</span>
              <Badge
                variant="secondary"
                className={isPF ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"}
              >
                {isPF ? "Pessoa Física" : "Pessoa Jurídica"}
              </Badge>
            </div>

<div className="space-y-3">
              <div>
                <div className="text-sm text-muted-foreground">Nome{!isPF && "/Razão Social"}</div>
                <div className="font-medium">{isPF ? data.nome : data.razaoSocial}</div>
              </div>

{!isPF && data.nomeFantasia && (
                <div>
                  <div className="text-sm text-muted-foreground">Nome Fantasia</div>
                  <div className="font-medium">{data.nomeFantasia}</div>
                </div>
              )}

<div>
                <div className="text-sm text-muted-foreground">{isPF ? "CPF" : "CNPJ"}</div>
                <div className="font-mono text-sm">
                  {isPF ? formatCPF(data.cpf || "") : formatCNPJ(data.cnpj || "")}
                </div>
              </div>

{isPF && data.rg && (
                <div>
                  <div className="text-sm text-muted-foreground">RG</div>
                  <div className="font-mono text-sm">{data.rg}</div>
                </div>
              )}

{!isPF && data.inscricaoEstadual && (
                <div>
                  <div className="text-sm text-muted-foreground">Inscrição Estadual</div>
                  <div className="font-mono text-sm">{data.inscricaoEstadual}</div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Contato */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Phone className="h-4 w-4" />
              Contato
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {data.email && (
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <div>
                  <div className="text-sm text-muted-foreground">E-mail</div>
                  <div className="font-medium">{data.email}</div>
                </div>
              </div>
            )}

{data.telefone && (
              <div className="flex items-center gap-3">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <div>
                  <div className="text-sm text-muted-foreground">Telefone</div>
                  <div className="font-medium">{data.telefone}</div>
                </div>
              </div>
            )}

{!data.email && !data.telefone && (
              <div className="text-sm text-muted-foreground text-center py-4">
                Nenhuma informação de contato cadastrada
              </div>
            )}
          </CardContent>
        </Card>

{/* Endereço */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <MapPin className="h-4 w-4" />
              Endereço
            </CardTitle>
          </CardHeader>
          <CardContent>
            {(() => {
              const endereco = isPF ? data.endereco : data.enderecoEmpresa
              if (!endereco || (!endereco.logradouro && !endereco.cidade)) {
                return <div className="text-sm text-muted-foreground text-center py-4">Nenhum endereço cadastrado</div>
              }

return (
                <div className="space-y-2">
                  {endereco.logradouro && (
                    <div>
                      <div className="text-sm text-muted-foreground">Logradouro</div>
                      <div className="font-medium">{endereco.logradouro}</div>
                    </div>
                  )}

<div className="grid grid-cols-2 gap-4">
                    {endereco.numero && (
                      <div>
                        <div className="text-sm text-muted-foreground">Número</div>
                        <div className="font-medium">{endereco.numero}</div>
                      </div>
                    )}
                    {endereco.cep && (
                      <div>
                        <div className="text-sm text-muted-foreground">CEP</div>
                        <div className="font-mono text-sm">{endereco.cep}</div>
                      </div>
                    )}
                  </div>

{endereco.complemento && (
                    <div>
                      <div className="text-sm text-muted-foreground">Complemento</div>
                      <div className="font-medium">{endereco.complemento}</div>
                    </div>
                  )}

<div className="grid grid-cols-2 gap-4">
                    {endereco.cidade && (
                      <div>
                        <div className="text-sm text-muted-foreground">Cidade</div>
                        <div className="font-medium">{endereco.cidade}</div>
                      </div>
                    )}
                    {endereco.estado && (
                      <div>
                        <div className="text-sm text-muted-foreground">Estado</div>
                        <div className="font-medium">{endereco.estado}</div>
                      </div>
                    )}
                  </div>
                </div>
              )
            })()}
          </CardContent>
        </Card>

{/* Informações do Sistema */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calendar className="h-4 w-4" />
              Informações do Sistema
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <div className="text-sm text-muted-foreground">Cadastrado em</div>
              <div className="font-medium">{formatDate(client.createdAt)}</div>
            </div>

{client.updatedAt && client.updatedAt !== client.createdAt && (
              <div>
                <div className="text-sm text-muted-foreground">Última atualização</div>
                <div className="font-medium">{formatDate(client.updatedAt)}</div>
              </div>
            )}

<div>
              <div className="text-sm text-muted-foreground">ID do Cliente</div>
              <div className="font-mono text-xs text-muted-foreground">{client.id}</div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Seção de Plantas Solares */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Zap className="h-4 w-4" />
            Plantas Solares
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {/* Planta 1 */}
            <div className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <h4 className="font-semibold">Planta Solar Residencial</h4>
                  <p className="text-sm text-muted-foreground">Instalada em 15/03/2023</p>
                </div>
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  Ativa
                </Badge>
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Potência</div>
                  <div className="font-medium">8,5 kWp</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Hoje</div>
                  <div className="font-medium">42,3 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Mês</div>
                  <div className="font-medium">1.247 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Inversores</div>
                  <div className="font-medium">2 unidades</div>
                </div>
              </div>
            </div>

{/* Planta 2 */}
            <div className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <h4 className="font-semibold">Planta Solar Comercial</h4>
                  <p className="text-sm text-muted-foreground">Instalada em 08/11/2023</p>
                </div>
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  Ativa
                </Badge>
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Potência</div>
                  <div className="font-medium">25,2 kWp</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Hoje</div>
                  <div className="font-medium">128,7 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Mês</div>
                  <div className="font-medium">3.891 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Inversores</div>
                  <div className="font-medium">5 unidades</div>
                </div>
              </div>
            </div>

{/* Planta 3 */}
            <div className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <h4 className="font-semibold">Planta Solar Rural</h4>
                  <p className="text-sm text-muted-foreground">Instalada em 22/07/2024</p>
                </div>
                <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
                  Manutenção
                </Badge>
              </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Potência</div>
                  <div className="font-medium">15,8 kWp</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Hoje</div>
                  <div className="font-medium">0 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Geração Mês</div>
                  <div className="font-medium">2.156 kWh</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Inversores</div>
                  <div className="font-medium">3 unidades</div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescript:file="lib/mock-data.ts" isEdit="true" isQuickEdit="true" isMerged="true"
// Dados mocados para apresentação - Sistema Solar Fictício
export const MOCK_STATIONS = [
  {
    id: "1001",
    name: "Usina Solar Horizonte",
    capacity: 2500.5,
    location: "Horizonte, CE - Brasil",
    status: "online",
    createdAt: "2023-01-15T10:00:00Z",
    totalGeneration: 4250000.75,
    todayGeneration: 12500.25,
    currentPower: 1850.5,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "1002",
    name: "Parque Fotovoltaico Nordeste",
    capacity: 1800.0,
    location: "Sobral, CE - Brasil",
    status: "online",
    createdAt: "2023-03-20T14:30:00Z",
    totalGeneration: 2890000.5,
    todayGeneration: 8750.8,
    currentPower: 1320.2,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "1003",
    name: "Central Solar Ceará",
    capacity: 3200.8,
    location: "Fortaleza, CE - Brasil",
    status: "online",
    createdAt: "2022-11-10T08:15:00Z",
    totalGeneration: 6750000.25,
    todayGeneration: 15200.4,
    currentPower: 2450.7,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "1004",
    name: "Fazenda Solar Sertão",
    capacity: 950.2,
    location: "Juazeiro do Norte, CE - Brasil",
    status: "warning",
    createdAt: "2023-06-05T16:45:00Z",
    totalGeneration: 1250000.8,
    todayGeneration: 4200.15,
    currentPower: 680.3,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "1005",
    name: "Complexo Fotovoltaico Vale",
    capacity: 4100.5,
    location: "Caucaia, CE - Brasil",
    status: "online",
    createdAt: "2022-08-22T12:20:00Z",
    totalGeneration: 8900000.6,
    todayGeneration: 18750.9,
    currentPower: 3200.8,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
]

export const MOCK_INVERTERS = [
  // Usina Solar Horizonte (1001)
  {
    id: "2001",
    sn: "INV-HSZ-001",
    stationId: "1001",
    stationName: "Usina Solar Horizonte",
    type: "INVERTER",
    model: "Huawei SUN2000-100KTL-M1",
    status: "online",
    capacity: 100.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "2002",
    sn: "INV-HSZ-002",
    stationId: "1001",
    stationName: "Usina Solar Horizonte",
    type: "INVERTER",
    model: "Huawei SUN2000-100KTL-M1",
    status: "online",
    capacity: 100.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "2003",
    sn: "INV-HSZ-003",
    stationId: "1001",
    stationName: "Usina Solar Horizonte",
    type: "INVERTER",
    model: "Sungrow SG110CX",
    status: "online",
    capacity: 110.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },

// Parque Fotovoltaico Nordeste (1002)
  {
    id: "2004",
    sn: "INV-PFN-001",
    stationId: "1002",
    stationName: "Parque Fotovoltaico Nordeste",
    type: "INVERTER",
    model: "ABB PVS980-58",
    status: "online",
    capacity: 58.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "2005",
    sn: "INV-PFN-002",
    stationId: "1002",
    stationName: "Parque Fotovoltaico Nordeste",
    type: "INVERTER",
    model: "ABB PVS980-58",
    status: "online",
    capacity: 58.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },

// Central Solar Ceará (1003)
  {
    id: "2006",
    sn: "INV-CSC-001",
    stationId: "1003",
    stationName: "Central Solar Ceará",
    type: "INVERTER",
    model: "Fronius Symo 24.0-3",
    status: "online",
    capacity: 24.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "2007",
    sn: "INV-CSC-002",
    stationId: "1003",
    stationName: "Central Solar Ceará",
    type: "INVERTER",
    model: "Fronius Symo 24.0-3",
    status: "online",
    capacity: 24.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },

// Fazenda Solar Sertão (1004)
  {
    id: "2008",
    sn: "INV-FSS-001",
    stationId: "1004",
    stationName: "Fazenda Solar Sertão",
    type: "INVERTER",
    model: "SMA Sunny Central 850CP XT",
    status: "warning",
    capacity: 850.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },

// Complexo Fotovoltaico Vale (1005)
  {
    id: "2009",
    sn: "INV-CFV-001",
    stationId: "1005",
    stationName: "Complexo Fotovoltaico Vale",
    type: "INVERTER",
    model: "Power Electronics FS3400V",
    status: "online",
    capacity: 3400.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
  {
    id: "2010",
    sn: "INV-CFV-002",
    stationId: "1005",
    stationName: "Complexo Fotovoltaico Vale",
    type: "INVERTER",
    model: "Power Electronics FS700V",
    status: "online",
    capacity: 700.0,
    syncedAt: { seconds: Math.floor(Date.now() / 1000) },
  },
]

export const MOCK_REALTIME_DATA = {
  "INV-HSZ-001": {
    deviceId: "2001",
    deviceSn: "INV-HSZ-001",
    timestamp: new Date().toISOString(),
    totalPoints: 45,
    kpis: {
      acPower: 85.2,
      frequency: 60.1,
      dailyGeneration: 520.8,
      totalGeneration: 125000.5,
      temperature: 42.3,
    },
    categories: {
      dc: [
        { key: "pv1_voltage", originalKey: "PV1_U", value: 580.5, unit: "V", displayName: "String 1 Voltage" },
        { key: "pv1_current", originalKey: "PV1_I", value: 8.2, unit: "A", displayName: "String 1 Current" },
        { key: "pv1_power", originalKey: "PV1_P", value: 4760.1, unit: "W", displayName: "String 1 Power" },
        { key: "pv2_voltage", originalKey: "PV2_U", value: 575.8, unit: "V", displayName: "String 2 Voltage" },
        { key: "pv2_current", originalKey: "PV2_I", value: 8.0, unit: "A", displayName: "String 2 Current" },
        { key: "pv2_power", originalKey: "PV2_P", value: 4606.4, unit: "W", displayName: "String 2 Power" },
      ],
      ac: [
        { key: "ac_power", originalKey: "PAC", value: 85200, unit: "W", displayName: "AC Power" },
        { key: "ac_voltage_r", originalKey: "UAC_R", value: 380.2, unit: "V", displayName: "AC Voltage R" },
        { key: "ac_voltage_s", originalKey: "UAC_S", value: 379.8, unit: "V", displayName: "AC Voltage S" },
        { key: "ac_voltage_t", originalKey: "UAC_T", value: 380.5, unit: "V", displayName: "AC Voltage T" },
        { key: "ac_current_r", originalKey: "IAC_R", value: 125.4, unit: "A", displayName: "AC Current R" },
        { key: "ac_current_s", originalKey: "IAC_S", value: 124.8, unit: "A", displayName: "AC Current S" },
        { key: "ac_current_t", originalKey: "IAC_T", value: 125.1, unit: "A", displayName: "AC Current T" },
        { key: "frequency", originalKey: "FREQ", value: 60.1, unit: "Hz", displayName: "Grid Frequency" },
      ],
      energy: [
        { key: "daily_generation", originalKey: "ETODAY", value: 520.8, unit: "kWh", displayName: "Daily Generation" },
        {
          key: "total_generation",
          originalKey: "ETOTAL",
          value: 125000.5,
          unit: "kWh",
          displayName: "Total Generation",
        },
      ],
      temperature: [
        {
          key: "inverter_temperature",
          originalKey: "TEMP",
          value: 42.3,
          unit: "°C",
          displayName: "Inverter Temperature",
        },
      ],
      status: [
        { key: "status", originalKey: "STATUS", value: 1, unit: "", displayName: "Inverter Status" },
        { key: "alarm", originalKey: "ALARM", value: 0, unit: "", displayName: "Alarm Status" },
      ],
      battery: [],
      other: [
        { key: "efficiency", originalKey: "EFF", value: 97.8, unit: "%", displayName: "Efficiency" },
        { key: "power_factor", originalKey: "PF", value: 0.99, unit: "", displayName: "Power Factor" },
      ],
    },
  },
  "INV-HSZ-002": {
    deviceId: "2002",
    deviceSn: "INV-HSZ-002",
    timestamp: new Date().toISOString(),
    totalPoints: 45,
    kpis: {
      acPower: 92.1,
      frequency: 60.0,
      dailyGeneration: 580.2,
      totalGeneration: 118500.8,
      temperature: 41.8,
    },
  },
  "INV-PFN-001": {
    deviceId: "2004",
    deviceSn: "INV-PFN-001",
    timestamp: new Date().toISOString(),
    totalPoints: 38,
    kpis: {
      acPower: 45.8,
      frequency: 59.9,
      dailyGeneration: 280.5,
      totalGeneration: 89200.3,
      temperature: 39.2,
    },
  },
  "INV-FSS-001": {
    deviceId: "2008",
    deviceSn: "INV-FSS-001",
    timestamp: new Date().toISOString(),
    totalPoints: 52,
    kpis: {
      acPower: 680.3,
      frequency: 60.2,
      dailyGeneration: 4200.15,
      totalGeneration: 1250000.8,
      temperature: 48.5,
    },
  },
}

export const MOCK_ALERTS = [
  {
    id: "alert-001",
    stationId: "1004",
    stationName: "Fazenda Solar Sertão",
    deviceId: "2008",
    deviceSn: "INV-FSS-001",
    type: "warning",
    severity: "medium",
    title: "Temperatura Elevada",
    description: "Inversor operando com temperatura acima do normal (48.5°C)",
    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2 horas atrás
    status: "active",
    category: "temperature",
  },
  {
    id: "alert-002",
    stationId: "1002",
    stationName: "Parque Fotovoltaico Nordeste",
    deviceId: "2005",
    deviceSn: "INV-PFN-002",
    type: "info",
    severity: "low",
    title: "Manutenção Programada",
    description: "Manutenção preventiva agendada para próxima semana",
    timestamp: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), // 1 dia atrás
    status: "acknowledged",
    category: "maintenance",
  },
  {
    id: "alert-003",
    stationId: "1001",
    stationName: "Usina Solar Horizonte",
    deviceId: "2003",
    deviceSn: "INV-HSZ-003",
    type: "success",
    severity: "low",
    title: "Produção Recorde",
    description: "Inversor atingiu novo recorde de produção diária: 650 kWh",
    timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(), // 6 horas atrás
    status: "resolved",
    category: "performance",
  },
  {
    id: "alert-004",
    stationId: "1003",
    stationName: "Central Solar Ceará",
    deviceId: "2006",
    deviceSn: "INV-CSC-001",
    type: "warning",
    severity: "medium",
    title: "Queda de Eficiência",
    description: "Eficiência do inversor abaixo de 95% nas últimas 4 horas",
    timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(), // 4 horas atrás
    status: "active",
    category: "efficiency",
  },
  {
    id: "alert-005",
    stationId: "1005",
    stationName: "Complexo Fotovoltaico Vale",
    deviceId: "2009",
    deviceSn: "INV-CFV-001",
    type: "error",
    severity: "high",
    title: "Falha de Comunicação",
    description: "Perda de comunicação com inversor principal - verificar conexão",
    timestamp: new Date(Date.now() - 30 * 60 * 1000).toISOString(), // 30 min atrás
    status: "active",
    category: "communication",
  },
]

export const MOCK_STATION_KPIS = {
  "1001": {
    capacidade_kWp: 2500.5,
    potenciaAtual_W: 1850500,
    hoje_kWh: 12500.25,
    total_kWh: 4250000.75,
    eficiencia: 97.2,
    fatorCapacidade: 85.4,
    co2Evitado_kg: 2975000.5,
  },
  "1002": {
    capacidade_kWp: 1800.0,
    potenciaAtual_W: 1320200,
    hoje_kWh: 8750.8,
    total_kWh: 2890000.5,
    eficiencia: 96.8,
    fatorCapacidade: 82.1,
    co2Evitado_kg: 2023000.35,
  },
  "1003": {
    capacidade_kWp: 3200.8,
    potenciaAtual_W: 2450700,
    hoje_kWh: 15200.4,
    total_kWh: 6750000.25,
    eficiencia: 98.1,
    fatorCapacidade: 88.9,
    co2Evitado_kg: 4725000.18,
  },
  "1004": {
    capacidade_kWp: 950.2,
    potenciaAtual_W: 680300,
    hoje_kWh: 4200.15,
    total_kWh: 1250000.8,
    eficiencia: 94.2,
    fatorCapacidade: 78.5,
    co2Evitado_kg: 875000.56,
  },
  "1005": {
    capacidade_kWp: 4100.5,
    potenciaAtual_W: 3200800,
    hoje_kWh: 18750.9,
    total_kWh: 8900000.6,
    eficiencia: 97.9,
    fatorCapacidade: 91.2,
    co2Evitado_kg: 6230000.42,
  },
}

// Função para gerar dados históricos fictícios
export function generateMockHistoricalData(deviceSn: string, days = 30) {
  const data = []
  const baseGeneration = MOCK_REALTIME_DATA[deviceSn as keyof typeof MOCK_REALTIME_DATA]?.kpis?.dailyGeneration || 500

for (let i = days; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)

// Simular variação sazonal e climática
    const seasonalFactor = 0.8 + 0.4 * Math.sin((date.getMonth() / 12) * 2 * Math.PI)
    const weatherFactor = 0.7 + 0.6 * Math.random() // Simular variação climática
    const dailyGeneration = baseGeneration * seasonalFactor * weatherFactor

data.push({
      date: date.toISOString().split("T")[0],
      generation: Math.round(dailyGeneration * 100) / 100,
      peakPower: Math.round(dailyGeneration * 0.15 * 100) / 100, // Aproximadamente 15% da geração diária
      efficiency: 94 + Math.random() * 4, // Entre 94% e 98%
      irradiance: 800 + Math.random() * 400, // Entre 800 e 1200 W/m²
    })
  }

return data
}

// Função para simular dados em tempo real com variação
export function getRealtimeDataWithVariation(deviceSn: string) {
  const baseData = MOCK_REALTIME_DATA[deviceSn as keyof typeof MOCK_REALTIME_DATA]
  if (!baseData) return null

// Adicionar pequenas variações aos dados base para simular tempo real
  const variation = 0.95 + Math.random() * 0.1 // ±5% de variação

return {
    ...baseData,
    timestamp: new Date().toISOString(),
    kpis: {
      ...baseData.kpis,
      acPower: Math.round(baseData.kpis.acPower * variation * 100) / 100,
      temperature: Math.round((baseData.kpis.temperature + (Math.random() - 0.5) * 2) * 10) / 10,
      dailyGeneration: Math.round(baseData.kpis.dailyGeneration * (1 + Math.random() * 0.02) * 100) / 100,
    },
  }
}

// Função para gerar CPF válido
function generateValidCPF(): string {
  const digits = Array.from({ length: 9 }, () => Math.floor(Math.random() * 10))

// Calcular primeiro dígito verificador
  let sum = 0
  for (let i = 0; i < 9; i++) {
    sum += digits[i] * (10 - i)
  }
  const firstDigit = ((sum * 10) % 11) % 10
  digits.push(firstDigit)

// Calcular segundo dígito verificador
  sum = 0
  for (let i = 0; i < 10; i++) {
    sum += digits[i] * (11 - i)
  }
  const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11)
  digits.push(secondDigit)

const cpfString = digits.join("")
  return `${cpfString.slice(0, 3)}.${cpfString.slice(3, 6)}.${cpfString.slice(6, 9)}-${cpfString.slice(9, 11)}`
}

// Função para gerar CNPJ válido
function generateValidCNPJ(): string {
  const digits = Array.from({ length: 8 }, () => Math.floor(Math.random() * 10))
  digits.push(0, 0, 0, 1) // Filial 0001

// Calcular primeiro dígito verificador
  const weights1 = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]
  let sum = 0
  for (let i = 0; i < 12; i++) {
    sum += digits[i] * weights1[i]
  }
  const firstDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11)
  digits.push(firstDigit)

// Calcular segundo dígito verificador
  const weights2 = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]
  sum = 0
  for (let i = 0; i < 13; i++) {
    sum += digits[i] * weights2[i]
  }
  const secondDigit = sum % 11 < 2 ? 0 : 11 - (sum % 11)
  digits.push(secondDigit)

const cnpjString = digits.join("")
  return `${cnpjString.slice(0, 2)}.${cnpjString.slice(2, 5)}.${cnpjString.slice(5, 8)}/${cnpjString.slice(8, 12)}-${cnpjString.slice(12, 14)}`
}

// Nomes brasileiros realistas
const NOMES_MASCULINOS = [
  "João Silva Santos",
  "Carlos Eduardo Ferreira",
  "Roberto Almeida Nunes",
  "José Maria Oliveira",
  "Antonio Carlos Lima",
  "Francisco José Costa",
  "Paulo Roberto Souza",
  "Luiz Fernando Pereira",
  "Marcos Antonio Silva",
  "Pedro Henrique Rodrigues",
  "Rafael Santos Barbosa",
  "Daniel Oliveira Cruz",
  "Fernando Augusto Dias",
  "Gustavo Henrique Alves",
  "Ricardo Pereira Gomes",
  "Thiago Santos Moreira",
]

const NOMES_FEMININOS = [
  "Maria Oliveira Costa",
  "Ana Paula Rodrigues",
  "Fernanda Silva Pereira",
  "Juliana Santos Almeida",
  "Carla Cristina Lima",
  "Patricia Ferreira Souza",
  "Luciana Rodrigues Santos",
  "Mariana Costa Oliveira",
  "Gabriela Alves Pereira",
  "Camila Santos Silva",
  "Renata Oliveira Cruz",
  "Vanessa Lima Barbosa",
  "Tatiana Pereira Gomes",
  "Cristina Santos Moreira",
  "Adriana Silva Costa",
  "Simone Rodrigues Alves",
]

const EMPRESAS_RAZAO_SOCIAL = [
  "Energia Solar Goiás Ltda",
  "Fazenda Solar Brasília S.A.",
  "Indústria Sustentável do Centro-Oeste Ltda",
  "Cooperativa Agro Solar",
  "Shopping Center Eco Energy S.A.",
  "Construtora Verde Horizonte Ltda",
  "Metalúrgica Solar Tech Ltda",
  "Frigorífico Sustentável do Cerrado S.A.",
  "Transportadora Eco Logística Ltda",
  "Hospital Regional Solar S.A.",
  "Universidade Tecnológica Verde Ltda",
  "Supermercados Energia Limpa S.A.",
  "Fábrica de Móveis EcoWood Ltda",
  "Laboratório Farmacêutico Solar S.A.",
  "Escola Técnica Renovável Ltda",
]

const EMPRESAS_NOME_FANTASIA = [
  "EnergiaSolar GO",
  "FazendaSolar BSB",
  "IndustriaSustentavel CO",
  "CoopAgroSolar",
  "ShoppingEcoEnergy",
  "ConstrutorVerde",
  "MetalurgicaSolar",
  "FrigoriSustentavel",
  "EcoLogistica",
  "HospitalSolar",
  "UniTecVerde",
  "SuperEnergia",
  "EcoWoodMoveis",
  "LabSolarFarma",
  "EscolaTecRenov",
]

const CIDADES_ESTADOS = [
  { cidade: "Goiânia", estado: "GO", cep: "74000-000" },
  { cidade: "Anápolis", estado: "GO", cep: "75000-000" },
  { cidade: "Aparecida de Goiânia", estado: "GO", cep: "74900-000" },
  { cidade: "Rio Verde", estado: "GO", cep: "75900-000" },
  { cidade: "Senador Canedo", estado: "GO", cep: "75250-000" },
  { cidade: "Trindade", estado: "GO", cep: "75380-000" },
  { cidade: "Brasília", estado: "DF", cep: "70000-000" },
  { cidade: "Águas Claras", estado: "DF", cep: "71900-000" },
  { cidade: "Taguatinga", estado: "DF", cep: "72000-000" },
  { cidade: "Ceilândia", estado: "DF", cep: "72200-000" },
]

const LOGRADOUROS = [
  "Rua das Flores",
  "Avenida Central",
  "Rua do Sol",
  "Avenida Paulista",
  "Rua das Palmeiras",
  "Avenida Brasil",
  "Rua dos Ipês",
  "Avenida Goiás",
  "Rua das Acácias",
  "Avenida T-4",
  "Rua 85",
  "Avenida Anhanguera",
  "Rua C-240",
  "Avenida Independência",
  "Rua Padre Pelágio",
]

// Sistema centralizado de dados de clientes fictícios
export const MOCK_CLIENTS = {
  "client-001": {
    id: "client-001",
    createdAt: "2023-03-15T10:30:00Z",
    updatedAt: "2024-01-20T14:45:00Z",
    payload: {
      tipo: "PF" as const,
      pf: {
        nome: "João Silva Santos",
        cpf: "710.137.371-21", // Valid formatted CPF as requested
        rg: "MG-12.345.678",
        nascimento: "1985-06-15",
        estadoCivil: "Casado(a)",
        profissao: "Engenheiro Civil",
        email: "joao.silva@email.com",
        telefone: "(62) 99876-5432",
        endereco: {
          cep: "74000-123",
          endereco: "Rua das Flores, 123",
          numero: "123",
          complemento: "Casa",
          bairro: "Setor Central",
          cidade: "Goiânia",
          estado: "GO",
        },
        observacoes: "Cliente desde 2023, sempre pontual nos pagamentos",
        contatos: [
          { nome: "Maria Silva", fone: "(62) 99876-5433", funcao: "Esposa" },
          { nome: "Pedro Silva", fone: "(62) 99876-5434", funcao: "Filho" },
        ],
      },
    },
  },
  "client-002": {
    id: "client-002",
    createdAt: "2023-07-22T09:15:00Z",
    updatedAt: "2024-01-18T16:20:00Z",
    payload: {
      tipo: "PJ" as const,
      pj: {
        razaoSocial: "Energia Solar Goiás Ltda",
        nomeFantasia: "EnergiaSolar GO",
        cnpj: "12.345.678/0001-95", // Valid formatted CNPJ
        parceiroNumero: "P001",
        inscricaoEstadual: "123456789",
        email: "contato@energiasolargoias.com.br",
        telefone: "(62) 3456-7890",
        enderecoEmpresa: {
          cep: "74000-456",
          endereco: "Avenida Central, 1000",
          numero: "1000",
          complemento: "Sala 1501",
          bairro: "Setor Oeste",
          cidade: "Goiânia",
          estado: "GO",
        },
        observacoes: "Empresa parceira, foco em energia renovável",
        contatos: [
          { nome: "Carlos Diretor", fone: "(62) 3456-7891", funcao: "Diretor Geral" },
          { nome: "Ana Gerente", fone: "(62) 3456-7892", funcao: "Gerente Comercial" },
        ],
      },
      administrador: {
        cpf: "987.654.321-09", // Valid formatted CPF
        nome: "Carlos Eduardo Ferreira",
        nascimento: "1978-03-22",
        estadoCivil: "Casado(a)",
        profissao: "Empresário",
        endereco: {
          cep: "74000-789",
          endereco: "Rua dos Ipês, 456",
          numero: "456",
          complemento: "Casa",
          bairro: "Setor Sul",
          cidade: "Goiânia",
          estado: "GO",
        },
        telefone: "(62) 99123-4567",
        email: "carlos@energiasolargoias.com.br",
      },
    },
  },
  "client-003": {
    id: "client-003",
    createdAt: "2023-11-08T11:45:00Z",
    updatedAt: "2024-01-15T13:30:00Z",
    payload: {
      tipo: "PF" as const,
      pf: {
        nome: "Maria Oliveira Costa",
        cpf: "123.456.789-09", // Valid formatted CPF
        rg: "GO-98.765.432",
        nascimento: "1990-12-08",
        estadoCivil: "Solteiro(a)",
        profissao: "Médica Veterinária",
        email: "maria.oliveira@gmail.com",
        telefone: "(62) 98765-4321",
        endereco: {
          cep: "74900-123",
          endereco: "Rua do Sol, 789",
          numero: "789",
          complemento: "Apto 201",
          bairro: "Cidade Jardim",
          cidade: "Aparecida de Goiânia",
          estado: "GO",
        },
        observacoes: "Profissional da área veterinária, interessada em sustentabilidade",
        contatos: [{ nome: "José Costa", fone: "(62) 98765-4322", funcao: "Pai" }],
      },
    },
  },
}

// Função para gerar cliente fictício baseado no ID
export function generateMockClient(clientId: string) {
  // Se existe um cliente pré-definido, retorna ele
  if (MOCK_CLIENTS[clientId as keyof typeof MOCK_CLIENTS]) {
    return MOCK_CLIENTS[clientId as keyof typeof MOCK_CLIENTS]
  }

// Gera cliente fictício baseado no ID
  const isEven = Number.parseInt(clientId.replace(/\D/g, "") || "0") % 2 === 0
  const isPF = Math.random() > 0.4 // 60% PF, 40% PJ
  const location = CIDADES_ESTADOS[Math.floor(Math.random() * CIDADES_ESTADOS.length)]
  const logradouro = LOGRADOUROS[Math.floor(Math.random() * LOGRADOUROS.length)]

if (isPF) {
    const nomes = isEven ? NOMES_MASCULINOS : NOMES_FEMININOS
    const nome = nomes[Math.floor(Math.random() * nomes.length)]
    const cpf = generateValidCPF()

return {
      id: clientId,
      createdAt: "2023-06-01T10:00:00Z",
      updatedAt: "2024-01-10T15:00:00Z",
      payload: {
        tipo: "PF" as const,
        pf: {
          nome,
          cpf,
          rg: `${location.estado}-${Math.floor(Math.random() * 90000000) + 10000000}`,
          nascimento: `${1970 + Math.floor(Math.random() * 40)}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, "0")}`,
          estadoCivil: ["Solteiro(a)", "Casado(a)", "Divorciado(a)"][Math.floor(Math.random() * 3)],
          profissao: ["Engenheiro", "Médico", "Advogado", "Professor", "Empresário"][Math.floor(Math.random() * 5)],
          email:
            nome
              .toLowerCase()
              .replace(/\s+/g, ".")
              .replace(/[áàâã]/g, "a")
              .replace(/[éêë]/g, "e")
              .replace(/[íîï]/g, "i")
              .replace(/[óôõ]/g, "o")
              .replace(/[úûü]/g, "u")
              .replace(/ç/g, "c") + "@email.com",
          telefone: `(${location.estado === "GO" ? "62" : "61"}) 9${Math.floor(Math.random() * 9000) + 1000}-${Math.floor(Math.random() * 9000) + 1000}`,
          endereco: {
            cep: `${location.cep.slice(0, 5)}-${Math.floor(Math.random() * 900) + 100}`,
            endereco: `${logradouro}, ${Math.floor(Math.random() * 9000) + 100}`,
            numero: String(Math.floor(Math.random() * 9000) + 100),
            complemento: Math.random() > 0.5 ? "Casa" : `Apto ${Math.floor(Math.random() * 900) + 100}`,
            bairro: ["Setor Central", "Setor Oeste", "Setor Sul", "Cidade Jardim"][Math.floor(Math.random() * 4)],
            cidade: location.cidade,
            estado: location.estado,
          },
          observacoes: "Cliente gerado automaticamente para demonstração",
          contatos: [],
        },
      },
    }
  } else {
    const razaoSocial = EMPRESAS_RAZAO_SOCIAL[Math.floor(Math.random() * EMPRESAS_RAZAO_SOCIAL.length)]
    const nomeFantasia = EMPRESAS_NOME_FANTASIA[Math.floor(Math.random() * EMPRESAS_NOME_FANTASIA.length)]
    const cnpj = generateValidCNPJ()
    const adminNome = NOMES_MASCULINOS[Math.floor(Math.random() * NOMES_MASCULINOS.length)]

return {
      id: clientId,
      createdAt: "2023-06-01T10:00:00Z",
      updatedAt: "2024-01-10T15:00:00Z",
      payload: {
        tipo: "PJ" as const,
        pj: {
          razaoSocial,
          nomeFantasia,
          cnpj,
          parceiroNumero: `P${String(Math.floor(Math.random() * 900) + 100)}`,
          inscricaoEstadual: String(Math.floor(Math.random() * 900000000) + 100000000),
          email: `contato@${nomeFantasia.toLowerCase().replace(/\s+/g, "")}.com.br`,
          telefone: `(${location.estado === "GO" ? "62" : "61"}) 3${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`,
          enderecoEmpresa: {
            cep: `${location.cep.slice(0, 5)}-${Math.floor(Math.random() * 900) + 100}`,
            endereco: `${logradouro}, ${Math.floor(Math.random() * 9000) + 100}`,
            numero: String(Math.floor(Math.random() * 9000) + 100),
            complemento: `Sala ${Math.floor(Math.random() * 900) + 100}`,
            bairro: ["Setor Empresarial", "Centro Comercial", "Distrito Industrial"][Math.floor(Math.random() * 3)],
            cidade: location.cidade,
            estado: location.estado,
          },
          observacoes: "Empresa gerada automaticamente para demonstração",
          contatos: [],
        },
        administrador: {
          cpf: generateValidCPF(),
          nome: adminNome,
          nascimento: `${1970 + Math.floor(Math.random() * 30)}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, "0")}`,
          estadoCivil: ["Solteiro(a)", "Casado(a)", "Divorciado(a)"][Math.floor(Math.random() * 3)],
          profissao: "Empresário",
          endereco: {
            cep: `${location.cep.slice(0, 5)}-${Math.floor(Math.random() * 900) + 100}`,
            endereco: `${logradouro}, ${Math.floor(Math.random() * 9000) + 100}`,
            numero: String(Math.floor(Math.random() * 9000) + 100),
            complemento: "Casa",
            bairro: ["Setor Residencial", "Jardim Privê", "Condomínio Fechado"][Math.floor(Math.random() * 3)],
            cidade: location.cidade,
            estado: location.estado,
          },
          telefone: `(${location.estado === "GO" ? "62" : "61"}) 9${Math.floor(Math.random() * 9000) + 1000}-${Math.floor(Math.random() * 9000) + 1000}`,
          email:
            adminNome
              .toLowerCase()
              .replace(/\s+/g, ".")
              .replace(/[áàâã]/g, "a")
              .replace(/[éêë]/g, "e")
              .replace(/[íîï]/g, "i")
              .replace(/[óôõ]/g, "o")
              .replace(/[úûü]/g, "u")
              .replace(/ç/g, "c") +
            "@" +
            nomeFantasia.toLowerCase().replace(/\s+/g, "") +
            ".com.br",
        },
      },
    }
  }
}
[V0_FILE]typescriptreact:file="components/client-sidebar.tsx" isEdit="true" isMerged="true"
"use client"
import { useParams, usePathname } from "next/navigation"
import Link from "next/link"
import { cn } from "@/lib/utils"
import {
  Info,
  Activity,
  Zap,
  TrendingUp,
  FileText,
  AlertTriangle,
  BarChart3,
  Building,
  Headphones,
  FolderOpen,
  Building2,
} from "lucide-react"
import type { ClienteDoc } from "@/lib/clients-db"

interface ClientSidebarProps {
  client: ClienteDoc | null
}

const menuItems = [
  {
    id: "informacoes",
    label: "Informações",
    icon: Info,
    href: "/informacoes",
  },
  {
    id: "status",
    label: "Status",
    icon: Activity,
    href: "/status",
  },
  {
    id: "usina",
    label: "Usina Fotovoltaica",
    icon: Zap,
    href: "/usina",
  },
  {
    id: "historico-geracao",
    label: "Histórico da Geração",
    icon: TrendingUp,
    href: "/historico-geracao",
  },
  {
    id: "historico-faturas",
    label: "Histórico de Faturas",
    icon: FileText,
    href: "/historico-faturas",
  },
  {
    id: "alertas",
    label: "Alertas",
    icon: AlertTriangle,
    href: "/alertas",
  },
  {
    id: "relatorios",
    label: "Relatórios",
    icon: BarChart3,
    href: "/relatorios",
  },
  {
    id: "unidades-consumidoras",
    label: "Unidades Consumidoras",
    icon: Building,
    href: "/unidades-consumidoras",
  },
  {
    id: "chamados",
    label: "Chamados",
    icon: Headphones,
    href: "/chamados",
  },
  {
    id: "documentos",
    label: "Documentos",
    icon: FolderOpen,
    href: "/documentos",
  },
]

export function ClientSidebar({ client }: ClientSidebarProps) {
  const params = useParams()
  const pathname = usePathname()
  const clientId = params.id as string

if (!client) {
    return (
      <div className="w-80 border-l bg-muted/10 p-4">
        <div className="space-y-4">
          <div className="h-8 bg-muted rounded animate-pulse"></div>
          <div className="space-y-2">
            {Array.from({ length: 10 }).map((_, i) => (
              <div key={i} className="h-10 bg-muted rounded"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

const isPF = client.payload.tipo === "PF"
  const data = isPF ? client.payload.pf : client.payload.pj
  const clientName = isPF ? data.nome : data.nomeFantasia || data.razaoSocial

return (
    <div className="w-80 border-l bg-muted/10 flex flex-col">
      <div className="p-6 border-b">
        {/* Header do Cliente */}
        <div className="flex items-start gap-3 mb-6">
          <div className="p-2 rounded-lg bg-primary/10">
            <Building2 className="h-6 w-6 text-primary" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
              {isPF ? "Pessoa Física" : "Pessoa Jurídica"}
            </div>
            <h2 className="text-lg font-semibold leading-tight mt-1 break-words">{clientName}</h2>
          </div>
        </div>
      </div>

{/* Menu de Navegação Vertical */}
      <nav className="flex-1 p-4">
        <div className="space-y-2">
          {menuItems.map((item) => {
            const href = `/dashboard/clientes/${clientId}${item.href}`
            const isActive = pathname === href
            const Icon = item.icon

return (
              <Link
                key={item.id}
                href={href}
                className={cn(
                  "flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-lg transition-colors w-full",
                  isActive
                    ? "bg-primary text-primary-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50",
                )}
              >
                <Icon className="h-5 w-5 flex-shrink-0" />
                <span className="truncate">{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated to match design brief color palette for reports dashboard */
  --background: #ffffff; /* Pure white for main background */
  --foreground: #475569; /* Slate gray for primary text */
  --card: #f1f5f9; /* Light slate for card backgrounds */
  --card-foreground: #475569; /* Slate gray for text within cards */
  --popover: #ffffff; /* White for popover backgrounds */
  --popover-foreground: #475569; /* Slate gray for text within popovers */
  --primary: #059669; /* Emerald green for call-to-action buttons */
  --primary-foreground: #ffffff; /* White for button text */
  --secondary: #10b981; /* Lighter emerald for secondary actions */
  --secondary-foreground: #ffffff; /* White for button text */
  --muted: #f1f5f9; /* Light slate for muted elements */
  --muted-foreground: #475569; /* Slate gray for muted text */
  --accent: #10b981; /* Lighter emerald for highlights and indicators */
  --accent-foreground: #ffffff; /* White for accent text */
  --destructive: #ff4c4c; /* Red for alerts or critical actions */
  --destructive-foreground: #ffffff; /* White for destructive action text */
  --border: #e2e8f0; /* Light slate border color for separation */
  --input: #ffffff; /* White input fields */
  --ring: rgba(5, 150, 105, 0.5); /* Emerald focus ring with transparency */
  --chart-1: #10b981; /* Emerald for chart accents */
  --chart-2: #059669; /* Darker emerald for charts */
  --chart-3: #a16207; /* Amber for chart elements */
  --chart-4: #164e63; /* Cyan for chart elements */
  --chart-5: #475569; /* Slate for chart elements */
  --radius: 0.5rem;
  --sidebar: #f1f5f9; /* Light slate for sidebar background */
  --sidebar-foreground: #475569; /* Slate gray for sidebar text */
  --sidebar-primary: #059669; /* Emerald for primary sidebar actions */
  --sidebar-primary-foreground: #ffffff; /* White for sidebar action text */
  --sidebar-accent: #10b981; /* Lighter emerald for secondary sidebar actions */
  --sidebar-accent-foreground: #ffffff; /* White for sidebar accent text */
  --sidebar-border: #e2e8f0; /* Light slate border color for sidebar */
  --sidebar-ring: rgba(5, 150, 105, 0.5); /* Emerald focus ring for sidebar */
}

.dark {
  /* Enhanced dark mode with better contrast */
  --background: #1a1a1a; /* Dark background but not too dark */
  --foreground: #ffffff; /* Pure white for text */
  --card: #2d2d2d; /* Medium gray for cards */
  --card-foreground: #ffffff; /* White text on cards */
  --popover: #2d2d2d; /* Medium gray for popovers */
  --popover-foreground: #ffffff; /* White text on popovers */
  --primary: #00b894; /* Keep vibrant teal consistent */
  --primary-foreground: #ffffff; /* White text on primary */
  --secondary: #d63031; /* Keep bright red consistent */
  --secondary-foreground: #ffffff; /* White text on secondary */
  --muted: #404040; /* Medium muted gray */
  --muted-foreground: #ffffff; /* White for muted text */
  --accent: #00b894; /* Keep teal accent */
  --accent-foreground: #ffffff; /* White on accent */
  --destructive: #d63031; /* Keep red destructive */
  --destructive-foreground: #ffffff; /* White on destructive */
  --border: #404040; /* Medium gray borders */
  --input: #2d2d2d; /* Medium gray inputs */
  --ring: #00b894; /* Teal focus ring */
  --chart-1: #00b894; /* Teal charts */
  --chart-2: #d63031; /* Red charts */
  --chart-3: #ffffff; /* White charts */
  --chart-4: #404040; /* Gray charts */
  --chart-5: #2d2d2d; /* Dark gray charts */
  --sidebar: #2d2d2d; /* Medium gray sidebar */
  --sidebar-foreground: #ffffff; /* White sidebar text */
  --sidebar-primary: #00b894; /* Teal sidebar primary */
  --sidebar-primary-foreground: #ffffff; /* White on sidebar primary */
  --sidebar-accent: #d63031; /* Red sidebar accent */
  --sidebar-accent-foreground: #ffffff; /* White on sidebar accent */
  --sidebar-border: #404040; /* Gray sidebar border */
  --sidebar-ring: #00b894; /* Teal sidebar focus */
}

/* Added CSS to hide the v0 "Built with v0" floating button */
/* Oculta o botão flutuante "Built with v0" */
[id^="v0-built-with-button"] {
  display: none !important;
  visibility: hidden !important;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/relatorios/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams } from "next/navigation"
import {
  Download,
  TrendingUp,
  Zap,
  Mail,
  LucideLineChart,
  LucidePieChart,
  Activity,
  DollarSign,
  Leaf,
  Target,
  Award,
  AlertTriangle,
  CheckCircle,
  Clock,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  AreaChart,
  Area,
  BarChart,
  Bar,
  Line,
  PieChart as RechartsPieChart,
  Cell,
  ComposedChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Pie,
} from "recharts"

return (
    clients[clientId as keyof typeof clients] || {
      nome: `Cliente ${clientId}`,
      email: `${clientId}@email.com`,
      tipo: "PF",
    }
  )
}

const mockReportsData = {
  // Daily generation data for charts
  dailyGeneration: [
    { date: "01/01", generation: 45.2, consumption: 38.1, injection: 7.1, weather: "sunny" },
    { date: "02/01", generation: 42.8, consumption: 35.9, injection: 6.9, weather: "cloudy" },
    { date: "03/01", generation: 48.5, consumption: 41.2, injection: 7.3, weather: "sunny" },
    { date: "04/01", generation: 39.1, consumption: 42.8, injection: -3.7, weather: "rainy" },
    { date: "05/01", generation: 51.3, consumption: 39.5, injection: 11.8, weather: "sunny" },
    { date: "06/01", generation: 47.9, consumption: 40.1, injection: 7.8, weather: "partly-cloudy" },
    { date: "07/01", generation: 44.6, consumption: 37.3, injection: 7.3, weather: "sunny" },
    { date: "08/01", generation: 49.2, consumption: 43.1, injection: 6.1, weather: "sunny" },
    { date: "09/01", generation: 41.7, consumption: 38.9, injection: 2.8, weather: "cloudy" },
    { date: "10/01", generation: 52.1, consumption: 41.7, injection: 10.4, weather: "sunny" },
    { date: "11/01", generation: 46.3, consumption: 39.2, injection: 7.1, weather: "partly-cloudy" },
    { date: "12/01", generation: 43.8, consumption: 40.5, injection: 3.3, weather: "cloudy" },
    { date: "13/01", generation: 50.7, consumption: 42.1, injection: 8.6, weather: "sunny" },
    { date: "14/01", generation: 45.9, consumption: 38.7, injection: 7.2, weather: "sunny" },
    { date: "15/01", generation: 48.1, consumption: 41.3, injection: 6.8, weather: "partly-cloudy" },
  ],

// Monthly comparison data
  monthlyComparison: [
    { month: "Jan", generation: 1420, consumption: 580, savings: 890, efficiency: 94.2 },
    { month: "Fev", generation: 1380, consumption: 620, savings: 820, efficiency: 92.8 },
    { month: "Mar", generation: 1650, consumption: 590, savings: 1180, efficiency: 96.1 },
    { month: "Abr", generation: 1520, consumption: 610, savings: 980, efficiency: 95.3 },
    { month: "Mai", generation: 1380, consumption: 640, savings: 850, efficiency: 93.7 },
    { month: "Jun", generation: 1290, consumption: 680, savings: 720, efficiency: 91.4 },
    { month: "Jul", generation: 1340, consumption: 660, savings: 780, efficiency: 92.9 },
    { month: "Ago", generation: 1480, consumption: 620, savings: 920, efficiency: 94.8 },
    { month: "Set", generation: 1580, consumption: 590, savings: 1050, efficiency: 95.7 },
    { month: "Out", generation: 1720, consumption: 570, savings: 1240, efficiency: 97.2 },
    { month: "Nov", generation: 1650, consumption: 580, savings: 1150, efficiency: 96.5 },
    { month: "Dez", generation: 1590, consumption: 600, savings: 1080, efficiency: 95.8 },
  ],

// Energy distribution pie chart data
  energyDistribution: [
    { name: "Autoconsumo", value: 35.2, color: "#10b981" },
    { name: "Injeção na Rede", value: 64.8, color: "#059669" },
  ],

// Performance metrics
  performanceMetrics: [
    { metric: "Eficiência do Sistema", value: 97.8, target: 95, unit: "%" },
    { metric: "Fator de Capacidade", value: 18.2, target: 16, unit: "%" },
    { metric: "Disponibilidade", value: 99.1, target: 98, unit: "%" },
    { metric: "Degradação Anual", value: 0.4, target: 0.8, unit: "%" },
  ],

// Financial analysis
  financialData: [
    { category: "Economia Mensal", current: 1203.33, previous: 1089.45, growth: 10.4 },
    { category: "ROI Acumulado", current: 24.7, previous: 22.1, growth: 11.8 },
    { category: "Payback Restante", current: 3.2, previous: 3.8, growth: -15.8 },
    { category: "VPL do Projeto", current: 89420, previous: 85230, growth: 4.9 },
  ],

// Environmental impact
  environmentalImpact: [
    { metric: "CO₂ Evitado", value: 14.8, unit: "toneladas", equivalent: "3.2 carros/ano" },
    { metric: "Árvores Equivalentes", value: 672, unit: "árvores", equivalent: "1.8 hectares" },
    { metric: "Petróleo Poupado", value: 6.2, unit: "barris", equivalent: "984 litros" },
    { metric: "Carvão Evitado", value: 7.4, unit: "toneladas", equivalent: "14.8 MWh" },
  ],

// Predictive analytics
  predictiveData: [
    { month: "Jan 25", predicted: 1580, confidence: 92, actual: null },
    { month: "Fev 25", predicted: 1620, confidence: 89, actual: null },
    { month: "Mar 25", predicted: 1750, confidence: 94, actual: null },
    { month: "Abr 25", predicted: 1680, confidence: 91, actual: null },
    { month: "Mai 25", predicted: 1520, confidence: 87, actual: null },
    { month: "Jun 25", predicted: 1420, confidence: 85, actual: null },
  ],

// System health indicators
  systemHealth: [
    { component: "Inversor Principal", status: "excellent", value: 98.7, issues: 0 },
    { component: "Painéis Solares", status: "good", value: 96.2, issues: 2 },
    { component: "Sistema de Monitoramento", status: "excellent", value: 99.8, issues: 0 },
    { component: "Conexão de Rede", status: "good", value: 97.1, issues: 1 },
  ],

// Comparative benchmarks
  benchmarkData: [
    { category: "Sua Planta", generation: 1850, efficiency: 97.8, savings: 1203 },
    { category: "Média Regional", generation: 1620, efficiency: 94.2, savings: 1050 },
    { category: "Top 10%", generation: 2100, efficiency: 98.9, savings: 1450 },
  ],
}

function formatNumber(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num)
}

function formatCurrency(num: number) {
  return new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  }).format(num)
}

function formatPercentage(num: number, decimals = 1) {
  return new Intl.NumberFormat("pt-BR", {
    style: "percent",
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(num / 100)
}

function getStatusColor(status: string) {
  switch (status) {
    case "excellent":
      return "bg-emerald-50 text-emerald-700"
    case "good":
      return "bg-blue-50 text-blue-700"
    case "warning":
      return "bg-yellow-50 text-yellow-700"
    case "critical":
      return "bg-red-50 text-red-700"
    default:
      return "bg-gray-50 text-gray-700"
  }
}

export default function ClientReportsPage() {
  const params = useParams()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)

React.useEffect(() => {
    function loadClient() {
      if (!params.id) return

loadClient()
  }, [params.id])

return (
    <main className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
            Relatórios Avançados
          </h2>
          <p className="text-muted-foreground">Dashboard completo de análise e performance solar</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="flex items-center gap-2 bg-transparent">
            <Activity className="h-4 w-4" />
            Análise IA
          </Button>
          <Button variant="outline" className="flex items-center gap-2 bg-transparent">
            <Mail className="h-4 w-4" />
            Configurar Envio
          </Button>
          <Button className="flex items-center gap-2">
            <Download className="h-4 w-4" />
            Exportar Completo
          </Button>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="border-l-4 border-l-primary">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Geração Total</CardTitle>
            <Zap className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1.850,5 kWh</div>
            <p className="text-xs text-muted-foreground">+12.3% vs mês anterior</p>
            <Progress value={85} className="mt-2 h-2" />
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-chart-2">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Economia Mensal</CardTitle>
            <DollarSign className="h-4 w-4 text-chart-2" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 1.203,33</div>
            <p className="text-xs text-muted-foreground">+10.4% vs mês anterior</p>
            <Progress value={92} className="mt-2 h-2" />
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-chart-3">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Eficiência Sistema</CardTitle>
            <Target className="h-4 w-4 text-chart-3" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">97.8%</div>
            <p className="text-xs text-muted-foreground">Meta: 95% ✓</p>
            <Progress value={97.8} className="mt-2 h-2" />
          </CardContent>
        </Card>

<Card className="border-l-4 border-l-chart-4">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">CO₂ Evitado</CardTitle>
            <Leaf className="h-4 w-4 text-chart-4" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">14.8 ton</div>
            <p className="text-xs text-muted-foreground">≈ 672 árvores plantadas</p>
            <Progress value={78} className="mt-2 h-2" />
          </CardContent>
        </Card>
      </div>

{/* Daily Generation Chart */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <LucideLineChart className="h-5 w-5" />
            Geração vs Consumo Diário
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <ComposedChart data={mockReportsData.dailyGeneration}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Area
                type="monotone"
                dataKey="generation"
                fill="#10b981"
                fillOpacity={0.3}
                stroke="#059669"
                name="Geração (kWh)"
              />
              <Line type="monotone" dataKey="consumption" stroke="#4b5563" strokeWidth={2} name="Consumo (kWh)" />
              <Bar dataKey="injection" fill="#ea580c" name="Injeção Líquida (kWh)" />
            </ComposedChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Energy Distribution and System Health */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <LucidePieChart className="h-5 w-5" />
              Distribuição de Energia
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={250}>
              <RechartsPieChart>
                <Pie
                  data={mockReportsData.energyDistribution}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={100}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {mockReportsData.energyDistribution.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip formatter={(value) => `${value}%`} />
                <Legend />
              </RechartsPieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5" />
              Saúde do Sistema
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {mockReportsData.systemHealth.map((item, index) => (
                <div key={index} className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-3 h-3 rounded-full ${
                        item.status === "excellent"
                          ? "bg-emerald-500"
                          : item.status === "good"
                            ? "bg-blue-500"
                            : item.status === "warning"
                              ? "bg-yellow-500"
                              : "bg-red-500"
                      }`}
                    />
                    <span className="text-sm font-medium">{item.component}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-mono">{item.value}%</span>
                    <Badge variant="secondary" className={getStatusColor(item.status)}>
                      {item.issues === 0 ? "OK" : `${item.issues} alertas`}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Monthly Performance Trend */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5" />
            Tendência de Performance Anual
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={350}>
            <ComposedChart data={mockReportsData.monthlyComparison}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis yAxisId="left" />
              <YAxis yAxisId="right" orientation="right" />
              <Tooltip />
              <Legend />
              <Bar yAxisId="left" dataKey="generation" fill="#10b981" name="Geração (kWh)" />
              <Bar yAxisId="left" dataKey="consumption" fill="#4b5563" name="Consumo (kWh)" />
              <Line
                yAxisId="right"
                type="monotone"
                dataKey="efficiency"
                stroke="#ea580c"
                strokeWidth={3}
                name="Eficiência (%)"
              />
            </ComposedChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Performance Metrics */}
      <Card>
        <CardHeader>
          <CardTitle>Métricas de Performance</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {mockReportsData.performanceMetrics.map((metric, index) => (
              <div key={index} className="p-4 border rounded-lg">
                <div className="text-sm text-muted-foreground mb-2">{metric.metric}</div>
                <div className="text-2xl font-bold mb-2">
                  {metric.value}
                  {metric.unit}
                </div>
                <div className="flex items-center gap-2">
                  <Progress value={(metric.value / metric.target) * 100} className="flex-1 h-2" />
                  <span className="text-xs text-muted-foreground">
                    Meta: {metric.target}
                    {metric.unit}
                  </span>
                </div>
                {metric.value >= metric.target ? (
                  <Badge className="mt-2 bg-emerald-50 text-emerald-700">
                    <CheckCircle className="h-3 w-3 mr-1" />
                    Meta atingida
                  </Badge>
                ) : (
                  <Badge variant="secondary" className="mt-2 bg-yellow-50 text-yellow-700">
                    <Clock className="h-3 w-3 mr-1" />
                    Abaixo da meta
                  </Badge>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Financial Analysis */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <DollarSign className="h-5 w-5" />
            Análise Financeira Detalhada
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {mockReportsData.financialData.map((item, index) => (
              <div key={index} className="p-4 border rounded-lg">
                <div className="text-sm text-muted-foreground mb-2">{item.category}</div>
                <div className="text-2xl font-bold mb-2">
                  {item.category.includes("VPL")
                    ? formatCurrency(item.current)
                    : item.category.includes("ROI")
                      ? `${item.current}%`
                      : item.category.includes("Payback")
                        ? `${item.current} anos`
                        : formatCurrency(item.current)}
                </div>
                <div className="flex items-center gap-2">
                  <Badge
                    variant={item.growth > 0 ? "default" : "secondary"}
                    className={item.growth > 0 ? "bg-emerald-50 text-emerald-700" : "bg-red-50 text-red-700"}
                  >
                    {item.growth > 0 ? "+" : ""}
                    {item.growth.toFixed(1)}%
                  </Badge>
                  <span className="text-xs text-muted-foreground">vs anterior</span>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Savings Projection */}
      <Card>
        <CardHeader>
          <CardTitle>Projeção de Economia (25 anos)</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart
              data={Array.from({ length: 25 }, (_, i) => ({
                year: 2024 + i,
                savings: 14400 * (1 + 0.08) ** i * (1 - 0.004 * i),
                cumulative: Array.from({ length: i + 1 }, (_, j) => 14400 * (1 + 0.08) ** j * (1 - 0.004 * j)).reduce(
                  (a, b) => a + b,
                  0,
                ),
              }))}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="year" />
              <YAxis />
              <Tooltip formatter={(value) => formatCurrency(value as number)} />
              <Legend />
              <Area
                type="monotone"
                dataKey="cumulative"
                stackId="1"
                stroke="#059669"
                fill="#10b981"
                fillOpacity={0.6}
                name="Economia Acumulada"
              />
              <Area
                type="monotone"
                dataKey="savings"
                stackId="2"
                stroke="#ea580c"
                fill="#f97316"
                fillOpacity={0.4}
                name="Economia Anual"
              />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Environmental Impact */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Leaf className="h-5 w-5" />
            Impacto Ambiental Acumulado
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            {mockReportsData.environmentalImpact.map((impact, index) => (
              <div key={index} className="p-6 border rounded-lg text-center">
                <div className="text-3xl font-bold text-primary mb-2">
                  {impact.value} {impact.unit}
                </div>
                <div className="text-sm font-medium mb-2">{impact.metric}</div>
                <div className="text-xs text-muted-foreground">{impact.equivalent}</div>
                <div className="mt-4">
                  <Progress value={Math.min((impact.value / 20) * 100, 100)} className="h-2" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Carbon Footprint Reduction */}
      <Card>
        <CardHeader>
          <CardTitle>Redução de Pegada de Carbono</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <AreaChart
              data={Array.from({ length: 12 }, (_, i) => ({
                month: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"][i],
                co2Avoided: 1.2 + Math.sin(i * 0.5) * 0.3,
                treesEquivalent: (1.2 + Math.sin(i * 0.5) * 0.3) * 45.4,
                coalAvoided: (1.2 + Math.sin(i * 0.5) * 0.3) * 0.5,
              }))}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Area
                type="monotone"
                dataKey="co2Avoided"
                stackId="1"
                stroke="#059669"
                fill="#10b981"
                name="CO₂ Evitado (ton)"
              />
              <Area
                type="monotone"
                dataKey="coalAvoided"
                stackId="2"
                stroke="#4b5563"
                fill="#6b7280"
                name="Carvão Evitado (ton)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Predictive Analytics */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            Análise Preditiva com IA
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <ComposedChart data={mockReportsData.predictiveData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="predicted" fill="#10b981" name="Geração Prevista (kWh)" />
              <Line type="monotone" dataKey="confidence" stroke="#ea580c" strokeWidth={2} name="Confiança (%)" />
            </ComposedChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* AI Insights */}
      <Card>
        <CardHeader>
          <CardTitle>Insights da Inteligência Artificial</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <CheckCircle className="h-5 w-5 text-emerald-600" />
                <span className="font-medium text-emerald-800">Oportunidade Identificada</span>
              </div>
              <p className="text-sm text-emerald-700">
                Baseado nos padrões de consumo, recomendamos ajustar o horário de uso de equipamentos de alta potência
                para o período entre 10h-14h, quando a geração solar é máxima. Isso pode aumentar o autoconsumo em 15%.
              </p>
            </div>

<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <Activity className="h-5 w-5 text-blue-600" />
                <span className="font-medium text-blue-800">Previsão de Manutenção</span>
              </div>
              <p className="text-sm text-blue-700">
                O sistema de monitoramento detectou uma leve queda na eficiência do painel #12. Recomendamos limpeza
                preventiva nos próximos 15 dias para manter a performance ideal.
              </p>
            </div>

<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
              <div className="flex items-center gap-2 mb-2">
                <AlertTriangle className="h-5 w-5 text-yellow-600" />
                <span className="font-medium text-yellow-800">Alerta Climático</span>
              </div>
              <p className="text-sm text-yellow-700">
                Previsão meteorológica indica período de baixa irradiação nos próximos 5 dias. Geração estimada: 60% da
                média. Considere otimizar o consumo neste período.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Benchmark Comparison */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Award className="h-5 w-5" />
            Comparativo de Performance
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={mockReportsData.benchmarkData} layout="horizontal">
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis type="number" />
              <YAxis dataKey="category" type="category" width={120} />
              <Tooltip />
              <Legend />
              <Bar dataKey="generation" fill="#10b981" name="Geração (kWh)" />
              <Bar dataKey="efficiency" fill="#4b5563" name="Eficiência (%)" />
              <Bar dataKey="savings" fill="#ea580c" name="Economia (R$)" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

{/* Performance Ranking */}
      <Card>
        <CardHeader>
          <CardTitle>Ranking de Performance</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 bg-gradient-to-r from-yellow-50 to-yellow-100 border border-yellow-200 rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-yellow-500 text-white rounded-full flex items-center justify-center font-bold">
                  1
                </div>
                <div>
                  <div className="font-medium">Eficiência Energética</div>
                  <div className="text-sm text-muted-foreground">Top 5% da região</div>
                </div>
              </div>
              <Badge className="bg-yellow-500 text-white">97.8%</Badge>
            </div>

<div className="flex items-center justify-between p-4 bg-gradient-to-r from-emerald-50 to-emerald-100 border border-emerald-200 rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-emerald-500 text-white rounded-full flex items-center justify-center font-bold">
                  2
                </div>
                <div>
                  <div className="font-medium">Geração Solar</div>
                  <div className="text-sm text-muted-foreground">Top 12% da região</div>
                </div>
              </div>
              <Badge className="bg-emerald-500 text-white">1.850 kWh</Badge>
            </div>

<div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 border border-blue-200 rounded-lg">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold">
                  3
                </div>
                <div>
                  <div className="font-medium">Economia Financeira</div>
                  <div className="text-sm text-muted-foreground">Top 18% da região</div>
                </div>
              </div>
              <Badge className="bg-blue-500 text-white">R$ 1.203</Badge>
            </div>
          </div>
        </CardContent>
      </Card>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/clientes/[id]/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useParams, useRouter, usePathname } from "next/navigation"
import { useSidebar } from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import {
  ArrowLeft,
  User,
  FileText,
  Zap,
  History,
  Receipt,
  AlertTriangle,
  BarChart3,
  Phone,
  FileCheck,
  Home,
  Users,
} from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"

function getMockClientById(clientId: string) {
  const mockClients = {
    "client-001": {
      id: "client-001",
      createdAt: "2023-03-15T10:30:00Z",
      updatedAt: "2024-01-20T14:45:00Z",
      payload: {
        tipo: "PF" as const,
        pf: {
          nome: "João Silva Santos",
          cpf: "12345678901",
          rg: "MG-12.345.678",
          email: "joao.silva@email.com",
          telefone: "(31) 99999-1234",
          endereco: {
            logradouro: "Rua das Flores, 123",
            numero: "123",
            complemento: "Apto 45",
            cep: "30112-000",
            cidade: "Belo Horizonte",
            estado: "MG",
          },
        },
      },
    },
    "client-002": {
      id: "client-002",
      createdAt: "2023-07-22T09:15:00Z",
      updatedAt: "2024-01-18T16:20:00Z",
      payload: {
        tipo: "PJ" as const,
        pj: {
          razaoSocial: "Energia Limpa Ltda",
          nomeFantasia: "Energia Limpa",
          cnpj: "12345678000195",
          inscricaoEstadual: "123456789",
          email: "contato@energialimpa.com.br",
          telefone: "(11) 3333-4444",
          enderecoEmpresa: {
            logradouro: "Av. Paulista, 1000",
            numero: "1000",
            complemento: "Sala 1501",
            cep: "01310-100",
            cidade: "São Paulo",
            estado: "SP",
          },
        },
      },
    },
    "client-003": {
      id: "client-003",
      createdAt: "2023-11-08T11:45:00Z",
      updatedAt: "2024-01-15T13:30:00Z",
      payload: {
        tipo: "PF" as const,
        pf: {
          nome: "Maria Oliveira Costa",
          cpf: "98765432100",
          rg: "SP-98.765.432",
          email: "maria.oliveira@gmail.com",
          telefone: "(11) 98888-7777",
          endereco: {
            logradouro: "Rua do Sol, 456",
            numero: "456",
            cep: "04567-890",
            cidade: "São Paulo",
            estado: "SP",
          },
        },
      },
    },
  }

return (
    mockClients[clientId as keyof typeof mockClients] || {
      id: clientId,
      createdAt: "2023-06-01T10:00:00Z",
      updatedAt: "2024-01-10T15:00:00Z",
      payload: {
        tipo: "PF" as const,
        pf: {
          nome: "Cliente Exemplo",
          cpf: "11122233344",
          email: "cliente@exemplo.com",
          telefone: "(11) 99999-0000",
          endereco: {
            logradouro: "Rua Exemplo, 100",
            numero: "100",
            cep: "01000-000",
            cidade: "São Paulo",
            estado: "SP",
          },
        },
      },
    }
  )
}

const navigationTabs = [
  { id: "overview", label: "Visão Geral", icon: User, href: "" },
  { id: "informacoes", label: "Informações", icon: FileText, href: "/informacoes" },
  { id: "status", label: "Status", icon: Zap, href: "/status" },
  { id: "usina", label: "Usina", icon: Home, href: "/usina" },
  { id: "historico-geracao", label: "Histórico", icon: History, href: "/historico-geracao" },
  { id: "historico-faturas", label: "Faturas", icon: Receipt, href: "/historico-faturas" },
  { id: "alertas", label: "Alertas", icon: AlertTriangle, href: "/alertas" },
  { id: "relatorios", label: "Relatórios", icon: BarChart3, href: "/relatorios" },
  { id: "unidades-consumidoras", label: "Unidades", icon: Users, href: "/unidades-consumidoras" },
  { id: "chamados", label: "Chamados", icon: Phone, href: "/chamados" },
  { id: "documentos", label: "Documentos", icon: FileCheck, href: "/documentos" },
]

export default function ClientLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const params = useParams()
  const router = useRouter()
  const pathname = usePathname()
  const [client, setClient] = React.useState<any>(null)
  const [loading, setLoading] = React.useState(true)
  const { setOpen } = useSidebar()

const getCurrentTab = () => {
    const basePath = `/dashboard/clientes/${params.id}`
    if (pathname === basePath) return "overview"

const currentPath = pathname.replace(basePath, "")
    const activeTab = navigationTabs.find((tab) => tab.href === currentPath)
    return activeTab?.id || "overview"
  }

const activeTab = getCurrentTab()

React.useEffect(() => {
    async function loadClient() {
      if (!params.id) return

// Simulate loading delay
      await new Promise((resolve) => setTimeout(resolve, 300))

const mockClient = getMockClientById(params.id as string)
      setClient(mockClient)
      setLoading(false)
    }

loadClient()
  }, [params.id])

React.useEffect(() => {
    setOpen(false)
  }, [setOpen])

if (loading) {
    return (
      <div className="flex flex-col h-screen">
        <div className="border-b bg-background px-6 py-3 animate-pulse">
          <div className="h-8 bg-muted rounded w-48"></div>
        </div>
        <div className="border-b bg-card px-6 py-4 animate-pulse">
          <div className="flex space-x-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-10 bg-muted rounded w-24"></div>
            ))}
          </div>
        </div>
        <div className="flex-1 p-6 animate-pulse">
          <div className="space-y-4">
            <div className="h-8 bg-muted rounded w-64"></div>
            <div className="h-4 bg-muted rounded w-96"></div>
          </div>
        </div>
      </div>
    )
  }

const clientName =
    client?.payload?.tipo === "PF"
      ? client.payload.pf?.nome
      : client?.payload?.pj?.nomeFantasia || client?.payload?.pj?.razaoSocial

return (
    <div className="flex flex-col h-screen">
      <div className="border-b bg-background px-6 py-3">
        <div className="flex items-center justify-between">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.push("/dashboard/clientes")}
            className="gap-2 text-muted-foreground hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Voltar para Clientes
          </Button>
          <div className="text-sm text-muted-foreground">Clientes / {clientName}</div>
        </div>
      </div>

<div className="border-b bg-card px-3 sm:px-6 py-4">
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-11 gap-1 sm:gap-2">
          {navigationTabs.map((tab) => {
            const Icon = tab.icon
            const isActive = activeTab === tab.id
            const href = `/dashboard/clientes/${params.id}${tab.href}`

return (
              <Link
                key={tab.id}
                href={href}
                className={cn(
                  "flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 px-2 sm:px-3 py-2 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-colors text-center",
                  isActive
                    ? "bg-primary text-primary-foreground shadow-sm"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted",
                )}
              >
                <Icon className="h-4 w-4 flex-shrink-0" />
                <span className="text-xs sm:text-sm leading-tight">{tab.label}</span>
              </Link>
            )
          })}
        </div>
      </div>

<div className="flex flex-1 overflow-hidden">
        <div className="flex-1 overflow-auto">
          <div className="p-3 sm:p-6">{children}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css"

export const metadata: Metadata = {
  title: "GSolar",
  description: "Sistema de Gestão Solar",
  generator: "v0.app",
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon-16x16.png",
    apple: "/apple-touch-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head>
        <style>{`
html {
  font-family: ${GeistSans.style.fontFamily};
  --font-sans: ${GeistSans.variable};
  --font-mono: ${GeistMono.variable};
}
        `}</style>
      </head>
      <body>{children}</body>
    </html>
  )
}
[V0_FILE]plaintext:file="public/favicon.ico" query="solar energy management system icon with green and blue colors" isMerged="true"
[V0_FILE]png:file="public/favicon-16x16.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/favicon-16x16-3co9f78jnTfziDCteiDC5w5QRbiEkf.png" isMerged="true"
[V0_FILE]png:file="public/apple-touch-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-touch-icon-PQgKelX65ImkPTMAykm7z95q7Y5vuw.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/persistent-sidebar-provider.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { usePathname } from "next/navigation"
import { SidebarProvider } from "@/components/ui/sidebar"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days

function readCookieBoolean(name: string, fallback = true) {
  if (typeof document === "undefined") return fallback
  const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`))
  if (!m) return fallback
  try {
    return decodeURIComponent(m[1]) === "true"
  } catch {
    return fallback
  }
}

function writeCookieBoolean(name: string, value: boolean, maxAge = SIDEBAR_COOKIE_MAX_AGE) {
  if (typeof document === "undefined") return
  document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`
}

export function PersistentSidebarProvider({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

const isClientsRoute = pathname === "/dashboard/clientes" || pathname?.startsWith("/dashboard/clientes/")

const [open, setOpen] = React.useState<boolean>(() => {
    if (isClientsRoute) return true
    return readCookieBoolean(SIDEBAR_COOKIE_NAME, true)
  })

React.useEffect(() => {
    if (isClientsRoute && !open) {
      setOpen(true)
      writeCookieBoolean(SIDEBAR_COOKIE_NAME, true)
    }
  }, [isClientsRoute, open])

// Mantém cookie sempre em sincronia
  const handleOpenChange = React.useCallback((next: boolean) => {
    setOpen(next)
    writeCookieBoolean(SIDEBAR_COOKIE_NAME, next)
  }, [])

// Sincroniza abertura inicial após hydration se o cookie mudar fora deste componente
  React.useEffect(() => {
    if (isClientsRoute) return

const current = readCookieBoolean(SIDEBAR_COOKIE_NAME, open)
    if (current !== open) setOpen(current)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isClientsRoute])

// Importante: passamos open e onOpenChange para manter o estado através de navegações
  return (
    <SidebarProvider open={open} onOpenChange={handleOpenChange}>
      {children}
    </SidebarProvider>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-sidebar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard,
  MessageCircle,
  Plug,
  Users,
  Sun,
  Zap,
  ChevronDown,
  Settings,
  LogOut,
  Monitor,
  HelpCircle,
  Database,
  Cpu,
  Sliders,
  ChevronRight,
} from "lucide-react"
import { useCurrentUser } from "@/lib/use-current-user"
import { useState } from "react"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
} from "@/components/ui/sidebar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const items = [
  {
    title: "Dashboard",
    url: "/dashboard",
    icon: LayoutDashboard,
    description: "Visão geral do sistema",
  },
  {
    title: "Painel de Operação",
    url: "/dashboard/plantas",
    icon: Monitor,
    description: "Operações das plantas",
  },
  {
    title: "Chamados",
    url: "/dashboard/alertas",
    icon: HelpCircle,
    description: "Suporte e chamados",
  },
  {
    title: "Clientes",
    url: "/dashboard/clientes",
    icon: Users,
    description: "Gerenciar clientes",
  },
  {
    title: "Cadastros",
    icon: Database,
    description: "Cadastros do sistema",
    isSubmenu: true,
    submenuItems: [
      {
        title: "Inversor",
        url: "/dashboard/inversores",
        icon: Zap,
        description: "Gerenciar inversores",
      },
      {
        title: "Módulo",
        url: "/dashboard/modulos",
        icon: Cpu,
        description: "Módulos solares",
      },
      {
        title: "Base de Dados Solarimétrico",
        url: "/dashboard/solares",
        icon: Sun,
        description: "Dados solares",
      },
      {
        title: "Integrações",
        url: "/dashboard/integracoes",
        icon: Plug,
        description: "Configurar integrações",
      },
      {
        title: "WhatsApp",
        url: "/dashboard/whatsapp",
        icon: MessageCircle,
        description: "Comunicação via WhatsApp",
      },
      {
        title: "Parâmetros",
        url: "/dashboard/parametros",
        icon: Sliders,
        description: "Configurações gerais",
      },
    ],
  },
]

export function DashboardSidebar() {
  const pathname = usePathname()
  const { user } = useCurrentUser()
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
  const [expandedMenus, setExpandedMenus] = useState<string[]>(() => {
    const cadastrosRoutes = [
      "/dashboard/inversores",
      "/dashboard/modulos",
      "/dashboard/solares",
      "/dashboard/integracoes",
      "/dashboard/whatsapp",
      "/dashboard/parametros",
    ]
    if (cadastrosRoutes.some((route) => pathname?.startsWith(route))) {
      return ["Cadastros"]
    }
    return []
  })

const email = user?.email || ""
  const displayName =
    user?.displayName ||
    (email
      ? email
          .split("@")[0]
          .replace(/[._-]+/g, " ")
          .trim()
      : "Usuário")

const initials = (() => {
    const base = (user?.displayName || "").trim() || (email ? email.split("@")[0] : "")
    const parts = base
      .replace(/[._-]+/g, " ")
      .trim()
      .split(/\s+/)
      .filter(Boolean)
    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
    if (parts.length === 1 && parts[0].length >= 2) return (parts[0][0] + parts[0][1]).toUpperCase()
    if (parts.length === 1 && parts[0].length === 1) return parts[0][0].toUpperCase()
    return "U"
  })()

const toggleSubmenu = (menuTitle: string) => {
    setExpandedMenus((prev) =>
      prev.includes(menuTitle) ? prev.filter((title) => title !== menuTitle) : [...prev, menuTitle],
    )
  }

return (
    <Sidebar className="border-r-0 h-screen">
      <SidebarHeader className="pt-6 pb-4">
        <Link
          href="/dashboard"
          className="flex items-center gap-3 rounded-lg px-3 py-2.5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2"
        >
          <div className="grid size-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 text-white shadow-md ring-1 ring-emerald-700/20">
            <LayoutDashboard className="size-5" />
          </div>
          <div className="flex flex-col group-data-[collapsible=icon]:hidden">
            <span className="text-base font-bold tracking-tight">GSolar</span>
            <span className="text-xs text-muted-foreground">Solar Management</span>
          </div>
        </Link>
      </SidebarHeader>

<SidebarContent className="px-2 flex-1">
        <SidebarGroup>
          <SidebarGroupLabel className="px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground group-data-[collapsible=icon]:hidden mb-4">
            Menu Sistema
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu className="gap-3">
              {items.map((item) => {
                const isDashboard = item.url === "/dashboard"
                const isActive = item.url
                  ? isDashboard
                    ? pathname === "/dashboard"
                    : pathname === item.url || pathname?.startsWith(item.url + "/")
                  : false
                const Icon = item.icon
                const isExpanded = expandedMenus.includes(item.title)

const hasActiveSubmenu = item.submenuItems?.some(
                  (subItem) => pathname === subItem.url || pathname?.startsWith(subItem.url + "/"),
                )

return (
                  <SidebarMenuItem key={item.title}>
                    {item.isSubmenu ? (
                      <div>
                        <SidebarMenuButton
                          onClick={() => toggleSubmenu(item.title)}
                          isActive={hasActiveSubmenu}
                          tooltip={`${item.title} - ${item.description}`}
                          className="
                            relative rounded-lg h-14 px-4 py-3
                            data-[active=true]:bg-primary/10 data-[active=true]:text-primary 
                            data-[active=true]:shadow-sm data-[active=true]:border-primary/20
                            group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2
                            mb-2 cursor-pointer
                            hover:bg-transparent hover:text-current
                            active:bg-transparent focus:bg-transparent
                          "
                        >
                          <div className="flex items-center gap-4 w-full">
                            {hasActiveSubmenu && (
                              <span className="absolute -left-1 top-1/2 h-8 w-1 -translate-y-1/2 rounded-r bg-primary group-data-[collapsible=icon]:hidden" />
                            )}

<div className="flex items-center justify-between w-full group-data-[collapsible=icon]:hidden">
                              <div className="flex flex-col">
                                <span className="font-medium text-sm">{item.title}</span>
                                <span className="text-xs text-muted-foreground truncate max-w-[140px]">
                                  {item.description}
                                </span>
                              </div>
                              <ChevronRight
                                className={`size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-90" : ""}`}
                              />
                            </div>
                          </div>
                        </SidebarMenuButton>

{isExpanded && (
                          <div className="ml-6 mt-2 space-y-1">
                            {item.submenuItems?.map((subItem) => {
                              const isSubActive = pathname === subItem.url || pathname?.startsWith(subItem.url + "/")
                              const SubIcon = subItem.icon

return (
                                <SidebarMenuButton
                                  key={subItem.title}
                                  asChild
                                  isActive={isSubActive}
                                  tooltip={`${subItem.title} - ${subItem.description}`}
                                  className="
                                    relative rounded-lg h-12 px-3 py-2
                                    data-[active=true]:bg-primary/10 data-[active=true]:text-primary 
                                    data-[active=true]:shadow-sm data-[active=true]:border-primary/20
                                    group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2
                                    mb-1
                                    hover:bg-transparent hover:text-current
                                    active:bg-transparent focus:bg-transparent
                                  "
                                >
                                  <Link
                                    href={subItem.url}
                                    className="flex items-center gap-3 w-full hover:text-current active:text-current focus:text-current"
                                  >
                                    {isSubActive && (
                                      <span className="absolute -left-1 top-1/2 h-6 w-1 -translate-y-1/2 rounded-r bg-primary group-data-[collapsible=icon]:hidden" />
                                    )}

<div className="flex flex-col group-data-[collapsible=icon]:hidden">
                                      <span className="font-medium text-sm">{subItem.title}</span>
                                      <span className="text-xs text-muted-foreground truncate max-w-[120px]">
                                        {subItem.description}
                                      </span>
                                    </div>
                                  </Link>
                                </SidebarMenuButton>
                              )
                            })}
                          </div>
                        )}
                      </div>
                    ) : (
                      <SidebarMenuButton
                        asChild
                        isActive={isActive}
                        tooltip={`${item.title} - ${item.description}`}
                        className="
                          relative rounded-lg h-14 px-4 py-3
                          data-[active=true]:bg-primary/10 data-[active=true]:text-primary 
                          data-[active=true]:shadow-sm data-[active=true]:border-primary/20
                          group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2
                          mb-2
                          hover:bg-transparent hover:text-current
                          active:bg-transparent focus:bg-transparent
                        "
                      >
                        <Link
                          href={item.url!}
                          className="flex items-center gap-4 w-full hover:text-current active:text-current focus:text-current"
                        >
                          {isActive && (
                            <span className="absolute -left-1 top-1/2 h-8 w-1 -translate-y-1/2 rounded-r bg-primary group-data-[collapsible=icon]:hidden" />
                          )}

<div className="flex items-center justify-between w-full group-data-[collapsible=icon]:hidden">
                            <div className="flex flex-col">
                              <span className="font-medium text-sm">{item.title}</span>
                              <span className="text-xs text-muted-foreground truncate max-w-[140px]">
                                {item.description}
                              </span>
                            </div>
                          </div>
                        </Link>
                      </SidebarMenuButton>
                    )}
                  </SidebarMenuItem>
                )
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

<SidebarFooter className="p-2">
        <DropdownMenu open={isUserMenuOpen} onOpenChange={setIsUserMenuOpen}>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-3 rounded-lg px-3 py-3 w-full text-left focus:bg-transparent focus:outline-none group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2 hover:bg-transparent active:bg-transparent">
              <div
                className="grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 text-white text-sm font-semibold shadow-md ring-2 ring-background"
                aria-hidden="true"
              >
                {initials}
              </div>
              <div className="flex items-center justify-between w-full group-data-[collapsible=icon]:hidden">
                <div className="min-w-0 flex-1">
                  <div className="truncate text-sm font-semibold" title={displayName}>
                    {displayName}
                  </div>
                  <div className="truncate text-xs text-muted-foreground" title={email}>
                    {email}
                  </div>
                </div>
                <ChevronDown className={`size-4 text-muted-foreground ${isUserMenuOpen ? "rotate-180" : ""}`} />
              </div>
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56 p-2" side="top">
            <div className="flex items-center gap-3 p-2 mb-2 bg-muted/50 rounded-lg">
              <div className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-emerald-500 to-emerald-600 text-white text-xs font-semibold">
                {initials}
              </div>
              <div className="min-w-0 flex-1">
                <div className="truncate text-sm font-semibold">{displayName}</div>
                <div className="truncate text-xs text-muted-foreground">{email}</div>
              </div>
            </div>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-3 p-2 cursor-pointer hover:bg-transparent active:bg-transparent focus:bg-transparent">
              <Settings className="size-4" />
              <span>Configurações</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-3 p-2 cursor-pointer text-destructive focus:text-destructive hover:bg-transparent active:bg-transparent focus:bg-transparent">
              <LogOut className="size-4" />
              <span>Sair</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarFooter>