10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["b_PmjSSsoakEo",null],["b_UtZWYlGKzWa",null],["b_lpg4hBJSYBn",null]] 110:[["b_PmjSSsoakEo",{"templateVersionId":null,"templateCanonId":null}],["b_UtZWYlGKzWa",{"templateVersionId":null,"templateCanonId":null}],["b_lpg4hBJSYBn",{"templateVersionId":null,"templateCanonId":null}]] 111:[["5kUPzM32c15","$D2025-10-21T16:12:56.744Z"],["b_vNW5QIqniJG","$D2025-10-22T15:12:33.787Z"],["b_IhGiEHgEbq7","$D2025-10-22T16:06:22.611Z"],["b_idFP0rl8Y8W","$D2025-10-22T16:08:44.195Z"],["b_OCR7QOgif3k","$D2025-10-22T16:12:21.396Z"],["b_f7nMQ3upoTb","$D2025-10-22T16:12:55.617Z"],["b_PmjSSsoakEo","$D2025-10-22T16:21:55.809Z"],["b_UtZWYlGKzWa","$D2025-11-29T12:59:14.874Z"],["b_lpg4hBJSYBn","$D2025-11-29T13:00:13.700Z"]] 112:[["b_PmjSSsoakEo",false],["b_UtZWYlGKzWa",false],["b_lpg4hBJSYBn",false]] 113:[["b_PmjSSsoakEo","$undefined"],["b_UtZWYlGKzWa","$undefined"],["b_lpg4hBJSYBn","$undefined"]] 114:[["b_PmjSSsoakEo",null],["b_UtZWYlGKzWa",null],["b_lpg4hBJSYBn",null]] 115:[["b_PmjSSsoakEo",true],["b_UtZWYlGKzWa",true],["b_lpg4hBJSYBn",true]] 116:[["b_PmjSSsoakEo",true],["b_UtZWYlGKzWa",true],["b_lpg4hBJSYBn",true]] 117:[] 118:T668,O usuário pediu para pegar informações dos pacientes registrados no Supabase e colocá-los como opções na agenda. Olhando para o código que já escrevi, vejo que: 1. No `new-appointment-dialog.tsx`, já implementei a busca de pacientes do Supabase da tabela `agenda-pacientes` 2. No `agenda-calendar.tsx`, removi uma função `getStatusColor` que estava com async mas era usada de forma síncrona (isso causaria problemas) 3. Preciso verificar o código da página principal para garantir que está tudo conectado corretamente O erro era sobre `createClientComponentClient` que não existe no `@supabase/auth-helpers-nextjs`. Já corrigi isso usando `createClient()` de `lib/supabase/client.ts`. Mas agora preciso verificar se o código da agenda-calendar.tsx está correto, porque adicionei uma chamada async `getStatusColor` que não deveria ser async dentro do componente. Preciso corrigir isso. Deixe-me reler o código do agenda-calendar.tsx que escrevi... Sim, o problema é que eu criei uma função `getStatusColor` que é async mas ela está sendo usada de forma síncrona. Preciso remover o async e fazer a busca das cores de status de forma diferente - provavelmente buscando todas as cores de status uma vez e mantendo em um state. Além disso, preciso garantir que os agendamentos estão sendo salvos corretamente com o status e que a página principal está buscando os status corretos do Supabase. Vou: 1. Corrigir o agenda-calendar.tsx removendo a função async getStatusColor e usando apenas as cores que vêm do appointment 2. Verificar se o app/agenda/page.tsx está buscando as cores de status corretamente119:T1642be,[V0_FILE]typescript:file="app/api/generate-alerts/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { supabase } from "@/lib/supabase" export async function POST(req: NextRequest) { try { console.log("Iniciando geração de alertas...") // Buscar dados do Supabase const [productsResult, movementsResult] = await Promise.all([ supabase.from("products").select("*").limit(50), supabase.from("movement_history").select("*").order("movement_date", { ascending: false }).limit(20), ]) const products = productsResult.data || [] const movements = movementsResult.data || [] console.log(`Produtos encontrados: ${products.length}`) console.log(`Movimentações encontradas: ${movements.length}`) // Gerar alertas baseados nos dados reais const alerts = [] // Alerta de produtos com estoque baixo const lowStockProducts = products.filter((p) => p.current_stock < p.ideal_quantity * 0.3) if (lowStockProducts.length > 0) { alerts.push({ id: "low_stock", type: "estoque", title: "Produtos com Estoque Baixo", message: `${lowStockProducts.length} produtos estão com estoque abaixo de 30% do ideal.`, severity: "medium", icon: "Package", actionable: true, priority: 8, }) } // Alerta de produtos em falta const outOfStockProducts = products.filter((p) => p.current_stock === 0) if (outOfStockProducts.length > 0) { alerts.push({ id: "out_of_stock", type: "estoque", title: "Produtos em Falta", message: `${outOfStockProducts.length} produtos estão completamente sem estoque.`, severity: "high", icon: "AlertTriangle", actionable: true, priority: 10, }) } // Alerta de valor do estoque const totalStockValue = products.reduce((sum, p) => sum + (p.current_stock || 0) * (p.last_purchase_value || 0), 0) alerts.push({ id: "stock_value", type: "financeiro", title: "Valor Total do Estoque", message: `Valor atual do estoque: R$ ${totalStockValue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`, severity: "info", icon: "DollarSign", actionable: false, priority: 5, }) // Alerta de movimentações recentes if (movements.length > 0) { alerts.push({ id: "recent_movements", type: "estoque", title: "Movimentações Recentes", message: `${movements.length} movimentações registradas recentemente no sistema.`, severity: "info", icon: "Activity", actionable: false, priority: 3, }) } // Alerta de sistema funcionando alerts.push({ id: "system_status", type: "estoque", title: "Sistema Operacional", message: "Conexão com Supabase estabelecida. Dados atualizados em tempo real.", severity: "info", icon: "Target", actionable: false, priority: 1, }) console.log(`Alertas gerados: ${alerts.length}`) return NextResponse.json({ success: true, alerts: alerts, timestamp: new Date().toISOString(), }) } catch (error) { console.error("Erro ao gerar alertas:", error) // Retornar alertas de fallback em caso de erro const fallbackAlerts = [ { id: "fallback_error", type: "estoque", title: "Erro de Conexão", message: "Não foi possível conectar ao banco de dados. Verifique a configuração do Supabase.", severity: "medium", icon: "AlertTriangle", actionable: true, priority: 7, }, ] return NextResponse.json({ success: false, alerts: fallbackAlerts, error: error instanceof Error ? error.message : "Erro desconhecido", timestamp: new Date().toISOString(), }) } } [V0_FILE]typescript:file="app/auth/callback/route.ts" isMerged="true" import { createClient } from "@/lib/supabase/server" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const { searchParams, origin } = new URL(request.url) const code = searchParams.get("code") // if "next" is in param, use it as the redirect URL const next = searchParams.get("next") ?? "/" if (code) { const supabase = createClient() const { error } = await supabase.auth.exchangeCodeForSession(code) if (!error) { const forwardedHost = request.headers.get("x-forwarded-host") // original origin before load balancer const isLocalEnv = process.env.NODE_ENV === "development" if (isLocalEnv) { // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host return NextResponse.redirect(`${origin}${next}`) } else if (forwardedHost) { return NextResponse.redirect(`https://${forwardedHost}${next}`) } else { return NextResponse.redirect(`${origin}${next}`) } } } // return the user to an error page with instructions return NextResponse.redirect(`${origin}/auth/auth-code-error`) } [V0_FILE]plaintext:file=".env.local" isMerged="true" # Google Gemini API Key GOOGLE_GENERATIVE_AI_API_KEY=AIzaSyCMBP8WML7isq78Ahoxa0Tt1uaofPEyx9U # Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=https://fonobanapqbpzgihozev.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM4MDI2OTksImV4cCI6MjA2OTM3ODY5OX0.4pBNSJHU1Cgrv4Wqui_X8VsmPcfeXbvK_cRXKmcle4E SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1MzgwMjY5OSwiZXhwIjoyMDY5Mzc4Njk5fQ.pgiorFaZHNx2aG4SUl-3b_GomTSSzPa7zpOeIBjphmQ SUPABASE_URL=https://fonobanapqbpzgihozev.supabase.co SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM4MDI2OTksImV4cCI6MjA2OTM3ODY5OX0.4pBNSJHU1Cgrv4Wqui_X8VsmPcfeXbvK_cRXKmcle4E SUPABASE_JWT_SECRET=Qzju9T6u7EPD7KzDK4PHFO8HowNALD1p6g2IQ5s9Jd5i/K4K54ZVua1yxHrJvuocS7JnVPmeJyeqkXEFwjHM7A== # PostgreSQL Configuration POSTGRES_URL=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:6543/postgres?sslmode=require&supa=base-pooler.x POSTGRES_URL_NON_POOLING=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:5432/postgres?sslmode=require POSTGRES_PRISMA_URL=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:6543/postgres?sslmode=require&pgbouncer=true POSTGRES_HOST=host POSTGRES_USER=user POSTGRES_PASSWORD=YDPm1WiTH1TzjIPF POSTGRES_DATABASE=database [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescript:file="hooks/use-theme.ts" isMerged="true" "use client" import { useState, useEffect } from "react" type Theme = "light" | "dark" | "system" export function useTheme() { const [theme, setTheme] = useState("light") const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light") useEffect(() => { // Carregar tema salvo do localStorage const savedTheme = localStorage.getItem("risoarte-theme") as Theme if (savedTheme) { setTheme(savedTheme) } // Detectar preferência do sistema const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") const handleChange = () => { if (theme === "system") { setResolvedTheme(mediaQuery.matches ? "dark" : "light") } } mediaQuery.addEventListener("change", handleChange) handleChange() return () => mediaQuery.removeEventListener("change", handleChange) }, [theme]) useEffect(() => { // Resolver tema baseado na configuração if (theme === "system") { const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") setResolvedTheme(mediaQuery.matches ? "dark" : "light") } else { setResolvedTheme(theme as "light" | "dark") } }, [theme]) useEffect(() => { // Aplicar tema ao documento const root = document.documentElement root.classList.remove("light", "dark") root.classList.add(resolvedTheme) }, [resolvedTheme]) const updateTheme = (newTheme: Theme) => { setTheme(newTheme) localStorage.setItem("risoarte-theme", newTheme) } return { theme, setTheme: updateTheme, resolvedTheme, } } [V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 [V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) // IMPORTANT: Avoid writing any logic between createServerClient and // supabase.auth.getUser(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. const { data: { user }, } = await supabase.auth.getUser() // Protected routes - redirect to login if not authenticated const isAuthRoute = request.nextUrl.pathname.startsWith("/auth/login") || request.nextUrl.pathname.startsWith("/auth/signup") || request.nextUrl.pathname === "/auth/callback" if (!isAuthRoute && !user) { // no user, potentially respond by redirecting the user to the login page const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. If you're // creating a new response object with NextResponse.next() make sure to: // 1. Pass the request in it, like so: // const myNewResponse = NextResponse.next({ request }) // 2. Copy over the cookies, like so: // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) // 3. Change the myNewResponse object to fit your needs, but avoid changing // the cookies! // 4. Finally: // return myNewResponse // If this is not done, you may be causing the browser and server to go out // of sync and terminate the user's session prematurely! return supabaseResponse } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export function createClient() { const cookieStore = cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => { cookieStore.set(name, value, options) }) } catch { // The `setAll` method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 [V0_FILE]typescript:file="lib/actions.ts" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { redirect } from "next/navigation" export async function signIn(prevState: any, formData: FormData) { const email = formData.get("email") as string const password = formData.get("password") as string if (!email || !password) { return { error: "Email and password are required" } } const supabase = createClient() const { error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) { return { error: error.message } } redirect("/") } export async function signUp(prevState: any, formData: FormData) { const email = formData.get("email") as string const password = formData.get("password") as string const fullName = formData.get("fullName") as string const clinicName = formData.get("clinicName") as string if (!email || !password) { return { error: "Email and password are required" } } const supabase = createClient() const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/auth/callback`, data: { full_name: fullName, clinic_name: clinicName, }, }, }) if (error) { return { error: error.message } } return { success: "Verifique seu email para confirmar sua conta." } } export async function signOut() { const supabase = createClient() await supabase.auth.signOut() redirect("/auth/login") } export async function updateProfile(formData: FormData) { const supabase = createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { return { error: "Usuário não autenticado" } } const profileData = { full_name: formData.get("full_name") as string, clinic_name: formData.get("clinic_name") as string, phone: formData.get("phone") as string, position: formData.get("position") as string, specialization: formData.get("specialization") as string, cro_number: formData.get("cro_number") as string, updated_at: new Date().toISOString(), } const { error } = await supabase.from("user_profiles").upsert({ user_id: user.id, ...profileData }) if (error) { return { error: error.message } } return { success: "Perfil atualizado com sucesso" } } export async function updatePassword(formData: FormData) { const supabase = createClient() const currentPassword = formData.get("current_password") as string const newPassword = formData.get("new_password") as string const confirmPassword = formData.get("confirm_password") as string if (!currentPassword || !newPassword || !confirmPassword) { return { error: "Todos os campos são obrigatórios" } } if (newPassword !== confirmPassword) { return { error: "As senhas não coincidem" } } if (newPassword.length < 6) { return { error: "A nova senha deve ter pelo menos 6 caracteres" } } const { error } = await supabase.auth.updateUser({ password: newPassword, }) if (error) { return { error: error.message } } return { success: "Senha atualizada com sucesso" } } [V0_FILE]typescript:file="lib/database-estoque.ts" isMerged="true" import { supabase } from "./supabase-estoque" import type { Product, MovementHistory, ProductLot } from "@/app/estoque/page" import type { DatabaseProduct, DatabaseMovementHistory, DatabaseProductLot } from "./supabase-estoque" // Helper para converter lote do banco para o formato da aplicação function convertDatabaseProductLotToProductLot(dbLot: DatabaseProductLot): ProductLot { return { id: dbLot.id, quantity: dbLot.quantity, expirationDate: dbLot.expiration_date, purchaseDate: dbLot.purchase_date, } } // Converter produto do banco para o formato da aplicação function convertDatabaseProductToProduct( dbProduct: DatabaseProduct, movementHistory: MovementHistory[] = [], lots: ProductLot[] = [], ): Product { // Calcula o estoque atual somando as quantidades de todos os lotes const currentStock = lots.reduce((sum, lot) => sum + lot.quantity, 0) return { id: dbProduct.id, name: dbProduct.name, brand: dbProduct.brand, packageType: dbProduct.package_type, productType: dbProduct.product_type, supplier: dbProduct.supplier, currentStock: currentStock, // Derivado dos lotes idealQuantity: dbProduct.ideal_quantity, lastPurchaseDate: dbProduct.last_purchase_date, lastPurchaseValue: dbProduct.last_purchase_value, lastPurchaseQuantity: dbProduct.last_purchase_quantity, stockEntry: 0, stockExit: 0, movementHistory, lots, // Adiciona os lotes ao objeto do produto } } // Converter histórico do banco para o formato da aplicação function convertDatabaseMovementToMovement(dbMovement: DatabaseMovementHistory): MovementHistory { return { id: dbMovement.id, date: dbMovement.movement_date, type: dbMovement.movement_type, quantity: dbMovement.quantity, previousStock: dbMovement.previous_stock, newStock: dbMovement.new_stock, user: dbMovement.user_name, notes: dbMovement.notes, } } // Buscar todos os produtos com histórico e lotes export async function getAllProducts(): Promise { try { // Buscar produtos const { data: products, error: productsError } = await supabase.from("products").select("*").order("name") if (productsError) throw productsError // Buscar todos os lotes const { data: lots, error: lotsError } = await supabase .from("product_lots") .select("*") .order("expiration_date", { ascending: true, nullsFirst: false }) // Ordenar por vencimento (nulos por último) .order("created_at", { ascending: true }) // Ordenação secundária para desempate if (lotsError) throw lotsError // Buscar histórico de movimentações para todos os produtos const { data: movements, error: movementsError } = await supabase .from("movement_history") .select("*") .order("movement_date", { ascending: false }) if (movementsError) throw movementsError // Agrupar movimentações por produto const movementsByProduct = movements?.reduce( (acc, movement) => { if (!acc[movement.product_id]) { acc[movement.product_id] = [] } acc[movement.product_id].push(convertDatabaseMovementToMovement(movement)) return acc }, {} as Record, ) || {} // Agrupar lotes por produto const lotsByProduct = lots?.reduce( (acc, lot) => { if (!acc[lot.product_id]) { acc[lot.product_id] = [] } acc[lot.product_id].push(convertDatabaseProductLotToProductLot(lot)) return acc }, {} as Record, ) || {} // Converter produtos com histórico e lotes return ( products?.map((product) => convertDatabaseProductToProduct(product, movementsByProduct[product.id] || [], lotsByProduct[product.id] || []), ) || [] ) } catch (error) { console.error("Erro ao buscar produtos:", error) return [] } } // Criar novo produto e seu lote inicial export async function createProduct( product: Omit, initialLotQuantity: number, initialLotExpirationDate: string | null, ): Promise { try { // 1. Criar o produto const { data: newProductData, error: productError } = await supabase .from("products") .insert({ name: product.name, brand: product.brand, package_type: product.packageType, product_type: product.productType, supplier: product.supplier, current_stock: 0, // Estoque inicial é 0, será atualizado pelo lote ideal_quantity: product.idealQuantity, last_purchase_date: product.lastPurchaseDate, last_purchase_value: product.lastPurchaseValue, last_purchase_quantity: product.lastPurchaseQuantity, }) .select() .single() if (productError) throw productError // 2. Criar o lote inicial para este produto // Se a data de expiração for null, usar uma data muito distante no futuro const expirationDate = initialLotExpirationDate || "2099-12-31" const { data: newLotData, error: lotError } = await supabase .from("product_lots") .insert({ product_id: newProductData.id, quantity: initialLotQuantity, expiration_date: expirationDate, purchase_date: product.lastPurchaseDate, }) .select() .single() if (lotError) throw lotError // 3. Atualizar o current_stock do produto com base no novo lote const { error: updateStockError } = await supabase .from("products") .update({ current_stock: initialLotQuantity }) .eq("id", newProductData.id) if (updateStockError) throw updateStockError return convertDatabaseProductToProduct(newProductData, [], [convertDatabaseProductLotToProductLot(newLotData)]) } catch (error) { console.error("Erro ao criar produto e lote inicial:", error) return null } } // Atualizar produto (excluindo current_stock e expiration_date, que são gerenciados por lotes) export async function updateProduct( id: string, updates: Partial>, ): Promise { try { const updateData: Partial = {} if (updates.name !== undefined) updateData.name = updates.name if (updates.brand !== undefined) updateData.brand = updates.brand if (updates.packageType !== undefined) updateData.package_type = updates.packageType if (updates.productType !== undefined) updateData.product_type = updates.productType if (updates.supplier !== undefined) updateData.supplier = updates.supplier if (updates.idealQuantity !== undefined) updateData.ideal_quantity = updates.idealQuantity if (updates.lastPurchaseDate !== undefined) updateData.last_purchase_date = updates.lastPurchaseDate if (updates.lastPurchaseValue !== undefined) updateData.last_purchase_value = updates.lastPurchaseValue if (updates.lastPurchaseQuantity !== undefined) updateData.last_purchase_quantity = updates.lastPurchaseQuantity const { error } = await supabase.from("products").update(updateData).eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao atualizar produto:", error) return false } } // Deletar produto (o cascade deletará lotes e movimentações associadas) export async function deleteProduct(id: string): Promise { try { const { error } = await supabase.from("products").delete().eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao deletar produto:", error) return false } } // Adicionar movimentação ao histórico export async function addMovementHistory(productId: string, movement: Omit): Promise { try { const { error } = await supabase.from("movement_history").insert({ product_id: productId, movement_date: movement.date, movement_type: movement.type, quantity: movement.quantity, previous_stock: movement.previousStock, new_stock: movement.newStock, user_name: movement.user, notes: movement.notes, }) if (error) throw error return true } catch (error) { console.error("Erro ao adicionar movimentação:", error) return false } } // Novo: Adicionar um novo lote de produto (para entradas) export async function addProductLot( productId: string, quantity: number, expirationDate: string | null, purchaseDate: string, ): Promise { try { // Se a data de expiração for null, usar uma data muito distante no futuro const finalExpirationDate = expirationDate || "2099-12-31" const { data, error } = await supabase .from("product_lots") .insert({ product_id: productId, quantity: quantity, expiration_date: finalExpirationDate, purchase_date: purchaseDate, }) .select() .single() if (error) throw error return convertDatabaseProductLotToProductLot(data) } catch (error) { console.error("Erro ao adicionar lote de produto:", error) return null } } // Novo: Deduzir quantidade dos lotes existentes (FIFO - Primeiro a Vencer, Primeiro a Sair) export async function deductFromLots(productId: string, quantityToDeduct: number): Promise { try { // Obter todos os lotes para o produto, ordenados por data de vencimento (FIFO) // Lotes com data de vencimento indeterminada (NULL) devem vir por último const { data: lots, error: fetchError } = await supabase .from("product_lots") .select("*") .eq("product_id", productId) .order("expiration_date", { ascending: true, nullsFirst: false }) // Lotes com data vêm antes dos nulos .order("created_at", { ascending: true }) // Ordenação secundária para desempate if (fetchError) throw fetchError if (!lots || lots.length === 0) return false // Não há lotes para deduzir let remainingToDeduct = quantityToDeduct const updatePromises = [] const deletePromises = [] for (const lot of lots) { if (remainingToDeduct <= 0) break if (lot.quantity <= remainingToDeduct) { // Este lote será totalmente consumido deletePromises.push(supabase.from("product_lots").delete().eq("id", lot.id)) remainingToDeduct -= lot.quantity } else { // Este lote será parcialmente consumido updatePromises.push( supabase .from("product_lots") .update({ quantity: lot.quantity - remainingToDeduct }) .eq("id", lot.id), ) remainingToDeduct = 0 } } // Executar todas as atualizações e exclusões const results = await Promise.all([...updatePromises, ...deletePromises]) const hasErrors = results.some((res) => res.error) if (hasErrors) { console.error("Erro ao deduzir de lotes:", results.map((res) => res.error).filter(Boolean)) return false } return true } catch (error) { console.error("Erro ao deduzir de lotes:", error) return false } } // Nova função: Verificar se um produto com o mesmo nome já existe export async function checkProductExistsByName(name: string): Promise { try { const { data, error } = await supabase .from("products") .select("id") .ilike("name", name) // 'ilike' para busca case-insensitive .limit(1) if (error) throw error return data && data.length > 0 } catch (error) { console.error("Erro ao verificar produto por nome:", error) return false } } [V0_FILE]typescript:file="lib/database.ts" isMerged="true" import { supabase } from "./supabase" import type { Product, MovementHistory } from "@/app/page" import type { DatabaseProduct, DatabaseMovementHistory } from "./supabase" // Converter produto do banco para o formato da aplicação function convertDatabaseProductToProduct(dbProduct: DatabaseProduct, movementHistory: MovementHistory[] = []): Product { return { id: dbProduct.id, name: dbProduct.name, brand: dbProduct.brand, packageType: dbProduct.package_type, productType: dbProduct.product_type, supplier: dbProduct.supplier, currentStock: dbProduct.current_stock, idealQuantity: dbProduct.ideal_quantity, lastPurchaseDate: dbProduct.last_purchase_date, lastPurchaseValue: dbProduct.last_purchase_value, lastPurchaseQuantity: dbProduct.last_purchase_quantity, stockEntry: 0, stockExit: 0, movementHistory, } } // Converter histórico do banco para o formato da aplicação function convertDatabaseMovementToMovement(dbMovement: DatabaseMovementHistory): MovementHistory { return { id: dbMovement.id, date: dbMovement.movement_date, type: dbMovement.movement_type, quantity: dbMovement.quantity, previousStock: dbMovement.previous_stock, newStock: dbMovement.new_stock, user: dbMovement.user_name, notes: dbMovement.notes, } } // Buscar todos os produtos com histórico export async function getAllProducts(): Promise { try { // Buscar produtos const { data: products, error: productsError } = await supabase.from("products").select("*").order("name") if (productsError) throw productsError // Buscar histórico de movimentações para todos os produtos const { data: movements, error: movementsError } = await supabase .from("movement_history") .select("*") .order("movement_date", { ascending: false }) if (movementsError) throw movementsError // Agrupar movimentações por produto const movementsByProduct = movements?.reduce( (acc, movement) => { if (!acc[movement.product_id]) { acc[movement.product_id] = [] } acc[movement.product_id].push(convertDatabaseMovementToMovement(movement)) return acc }, {} as Record, ) || {} // Converter produtos com histórico return ( products?.map((product) => convertDatabaseProductToProduct(product, movementsByProduct[product.id] || [])) || [] ) } catch (error) { console.error("Erro ao buscar produtos:", error) return [] } } // Criar novo produto export async function createProduct( product: Omit, ): Promise { try { const { data, error } = await supabase .from("products") .insert({ name: product.name, brand: product.brand, package_type: product.packageType, product_type: product.productType, supplier: product.supplier, current_stock: product.currentStock, ideal_quantity: product.idealQuantity, last_purchase_date: product.lastPurchaseDate, last_purchase_value: product.lastPurchaseValue, last_purchase_quantity: product.lastPurchaseQuantity, }) .select() .single() if (error) throw error return convertDatabaseProductToProduct(data, []) } catch (error) { console.error("Erro ao criar produto:", error) return null } } // Atualizar produto export async function updateProduct(id: string, updates: Partial): Promise { try { const updateData: Partial = {} if (updates.name !== undefined) updateData.name = updates.name if (updates.brand !== undefined) updateData.brand = updates.brand if (updates.packageType !== undefined) updateData.package_type = updates.packageType if (updates.productType !== undefined) updateData.product_type = updates.productType if (updates.supplier !== undefined) updateData.supplier = updates.supplier if (updates.currentStock !== undefined) updateData.current_stock = updates.currentStock if (updates.idealQuantity !== undefined) updateData.ideal_quantity = updates.idealQuantity if (updates.lastPurchaseDate !== undefined) updateData.last_purchase_date = updates.lastPurchaseDate if (updates.lastPurchaseValue !== undefined) updateData.last_purchase_value = updates.lastPurchaseValue if (updates.lastPurchaseQuantity !== undefined) updateData.last_purchase_quantity = updates.lastPurchaseQuantity const { error } = await supabase.from("products").update(updateData).eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao atualizar produto:", error) return false } } // Deletar produto export async function deleteProduct(id: string): Promise { try { const { error } = await supabase.from("products").delete().eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao deletar produto:", error) return false } } // Adicionar movimentação ao histórico export async function addMovementHistory(productId: string, movement: Omit): Promise { try { const { error } = await supabase.from("movement_history").insert({ product_id: productId, movement_date: movement.date, movement_type: movement.type, quantity: movement.quantity, previous_stock: movement.previousStock, new_stock: movement.newStock, user_name: movement.user, notes: movement.notes, }) if (error) throw error return true } catch (error) { console.error("Erro ao adicionar movimentação:", error) return false } } // Buscar histórico de um produto específico export async function getProductMovementHistory(productId: string): Promise { try { const { data, error } = await supabase .from("movement_history") .select("*") .eq("product_id", productId) .order("movement_date", { ascending: false }) if (error) throw error return data?.map(convertDatabaseMovementToMovement) || [] } catch (error) { console.error("Erro ao buscar histórico:", error) return [] } } [V0_FILE]typescript:file="lib/prosthetic-database.ts" isMerged="true" import { supabase } from "./supabase" // Tipos para o controle protético export interface WorkSchedule { monday: { active: boolean; start: string; end: string } tuesday: { active: boolean; start: string; end: string } wednesday: { active: boolean; start: string; end: string } thursday: { active: boolean; start: string; end: string } friday: { active: boolean; start: string; end: string } saturday: { active: boolean; start: string; end: string } sunday: { active: boolean; start: string; end: string } } export interface Professional { id: string name: string email?: string phone?: string specialty?: string role: string access_level: number is_active: boolean hire_date?: string salary?: number performance_score: number // Campos pessoais birth_date?: string cpf?: string rg?: string address?: string emergency_contact_name?: string emergency_contact_phone?: string documents?: { contract?: string insurance?: string medical_certificate?: string diploma?: string [key: string]: string | undefined } permissions?: { prosthetic_control: boolean employee_management: boolean inventory_control: boolean reports: boolean settings: boolean financial: boolean } work_schedule?: WorkSchedule created_at: string updated_at: string } export interface Laboratory { id: string name: string contact_phone?: string contact_email?: string address?: string is_active: boolean created_at: string updated_at: string } export interface ProstheticService { id: string professional_id?: string professional?: Professional laboratory_id?: string laboratory?: Laboratory work_description: string observations?: string return_deadline?: string agreed_value?: number payment_date?: string status: "PRE_ENVIO" | "ENVIO_LABORATORIO" | "RETORNO_CLINICA" | "AGENDAMENTO_PACIENTE" | "INSTALADO" created_at: string updated_at: string } // Buscar todos os profissionais export async function getAllProfessionals(): Promise { try { const { data, error } = await supabase.from("professionals").select("*").eq("is_active", true).order("name") if (error) throw error return data || [] } catch (error) { console.error("Erro ao buscar profissionais:", error) return [] } } // Buscar profissionais doutores para o controle protético export async function getDoctors(): Promise { try { const { data, error } = await supabase .from("professionals") .select("*") .eq("is_active", true) .eq("role", "doutor") .order("name") if (error) throw error return data || [] } catch (error) { console.error("Erro ao buscar doutores:", error) return [] } } // Criar novo profissional/funcionário export async function createProfessional( professional: Omit, ): Promise { try { const { data, error } = await supabase.from("professionals").insert(professional).select().single() if (error) throw error return data } catch (error) { console.error("Erro ao criar profissional:", error) return null } } // Atualizar profissional export async function updateProfessional(id: string, updates: Partial): Promise { try { const { error } = await supabase.from("professionals").update(updates).eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao atualizar profissional:", error) return false } } // Deletar profissional (desativar) export async function deleteProfessional(id: string): Promise { try { const { error } = await supabase.from("professionals").update({ is_active: false }).eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao desativar profissional:", error) return false } } // Upload de arquivo export async function uploadDocument(file: File, employeeId: string, documentType: string): Promise { try { const fileExt = file.name.split(".").pop() const fileName = `${employeeId}/${documentType}.${fileExt}` const { data, error } = await supabase.storage.from("employee-documents").upload(fileName, file, { upsert: true, }) if (error) throw error const { data: { publicUrl }, } = supabase.storage.from("employee-documents").getPublicUrl(fileName) return publicUrl } catch (error) { console.error("Erro ao fazer upload:", error) return null } } // Buscar todos os laboratórios export async function getAllLaboratories(): Promise { try { const { data, error } = await supabase.from("laboratories").select("*").eq("is_active", true).order("name") if (error) throw error return data || [] } catch (error) { console.error("Erro ao buscar laboratórios:", error) return [] } } // Criar novo laboratório export async function createLaboratory(name: string): Promise { try { const { data, error } = await supabase.from("laboratories").insert({ name }).select().single() if (error) throw error return data } catch (error) { console.error("Erro ao criar laboratório:", error) return null } } // Buscar todos os serviços protéticos export async function getAllProstheticServices(): Promise { try { const { data, error } = await supabase .from("prosthetic_services") .select(` *, professional:professional_id( id, name, email, phone, specialty, role, access_level, is_active, hire_date, salary, performance_score, created_at, updated_at ), laboratory:laboratory_id( id, name, contact_phone, contact_email, address, is_active, created_at, updated_at ) `) .order("created_at", { ascending: false }) if (error) throw error return data || [] } catch (error) { console.error("Erro ao buscar serviços protéticos:", error) return [] } } // Criar novo serviço protético export async function createProstheticService( service: Omit, ): Promise { try { const { data, error } = await supabase .from("prosthetic_services") .insert({ professional_id: service.professional_id, laboratory_id: service.laboratory_id, work_description: service.work_description, observations: service.observations, return_deadline: service.return_deadline, agreed_value: service.agreed_value, payment_date: service.payment_date, status: service.status || "PRE_ENVIO", }) .select(` *, professional:professional_id( id, name, email, phone, specialty, role, access_level, is_active, hire_date, salary, performance_score, created_at, updated_at ), laboratory:laboratory_id( id, name, contact_phone, contact_email, address, is_active, created_at, updated_at ) `) .single() if (error) throw error return data } catch (error) { console.error("Erro ao criar serviço protético:", error) return null } } // Atualizar status do serviço protético export async function updateProstheticServiceStatus(id: string, status: ProstheticService["status"]): Promise { try { const { error } = await supabase.from("prosthetic_services").update({ status }).eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao atualizar status:", error) return false } } // Deletar serviço protético export async function deleteProstheticService(id: string): Promise { try { const { error } = await supabase.from("prosthetic_services").delete().eq("id", id) if (error) throw error return true } catch (error) { console.error("Erro ao deletar serviço:", error) return false } } [V0_FILE]typescript:file="lib/supabase-estoque.ts" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseAnonKey) // Tipos para o banco de dados export interface DatabaseProduct { id: string name: string brand: string package_type: string product_type: string supplier: string current_stock: number // Este será um valor derivado da soma dos lotes ideal_quantity: number last_purchase_date: string last_purchase_value: number last_purchase_quantity: number created_at: string updated_at: string } export interface DatabaseProductLot { id: string product_id: string quantity: number expiration_date: string | null // Alterado para permitir NULL purchase_date: string created_at: string updated_at: string } export interface DatabaseMovementHistory { id: string product_id: string movement_date: string movement_type: "entry" | "exit" | "purchase" | "adjustment" quantity: number previous_stock: number new_stock: number user_name: string notes?: string created_at: string } [V0_FILE]typescript:file="lib/supabase.ts" isMerged="true" import { createClientComponentClient } from "@supabase/auth-helpers-nextjs" // Check if Supabase environment variables are available export const isSupabaseConfigured = typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" && process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 && typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0 export const supabase = createClientComponentClient() export const createClient = () => createClientComponentClient() // Tipos para o banco de dados export interface DatabaseProduct { id: string name: string brand: string package_type: string product_type: string supplier: string current_stock: number ideal_quantity: number last_purchase_date: string last_purchase_value: number last_purchase_quantity: number created_at: string updated_at: string } export interface DatabaseMovementHistory { id: string product_id: string movement_date: string movement_type: "entry" | "exit" | "purchase" | "adjustment" quantity: number previous_stock: number new_stock: number user_name: string notes?: string created_at: string } export interface DatabaseConversation { id: string title: string created_at: string updated_at: string archived: boolean } export interface DatabaseMessage { id: string conversation_id: string role: "user" | "assistant" content: string created_at: string } export const chatService = { // Carregar todas as conversas async getConversations(): Promise { const { data, error } = await supabase.from("conversations").select("*").order("updated_at", { ascending: false }) if (error) throw error return data || [] }, // Carregar mensagens de uma conversa async getMessages(conversationId: string): Promise { const { data, error } = await supabase .from("messages") .select("*") .eq("conversation_id", conversationId) .order("created_at", { ascending: true }) if (error) throw error return data || [] }, // Criar nova conversa async createConversation(title = "Nova Conversa"): Promise { const { data, error } = await supabase.from("conversations").insert({ title }).select().single() if (error) throw error return data }, // Salvar mensagem async saveMessage(conversationId: string, role: "user" | "assistant", content: string): Promise { const { data, error } = await supabase .from("messages") .insert({ conversation_id: conversationId, role, content, }) .select() .single() if (error) throw error // Atualizar timestamp da conversa await supabase.from("conversations").update({ updated_at: new Date().toISOString() }).eq("id", conversationId) return data }, // Atualizar título da conversa async updateConversationTitle(conversationId: string, title: string): Promise { const { error } = await supabase .from("conversations") .update({ title, updated_at: new Date().toISOString() }) .eq("id", conversationId) if (error) throw error }, // Arquivar/desarquivar conversa async archiveConversation(conversationId: string, archived: boolean): Promise { const { error } = await supabase .from("conversations") .update({ archived, updated_at: new Date().toISOString() }) .eq("id", conversationId) if (error) throw error }, // Deletar conversa async deleteConversation(conversationId: string): Promise { const { error } = await supabase.from("conversations").delete().eq("id", conversationId) if (error) throw error }, } [V0_FILE]typescript:file="lib/types.ts" isQuickEdit="true" isMerged="true" export interface MovementHistory { id: string date: string type: "entry" | "exit" | "purchase" | "adjustment" quantity: number previousStock: number newStock: number user: string notes?: string } export interface ProductLot { id: string quantity: number expirationDate: string | null purchaseDate: string } export interface Product { id: string name: string brand: string packageType: string productType: string supplier: string currentStock: number idealQuantity: number lastPurchaseDate: string lastPurchaseValue: number lastPurchaseQuantity: number stockEntry: number stockExit: number movementHistory: MovementHistory[] lots: ProductLot[] alternativeNames?: string[] photos?: string[] } [V0_FILE]typescriptreact:file="components/games/bomb-game.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { ArrowLeft, RotateCcw, Bomb, Trophy, Zap, Settings, Home, Clock, Target, Award } from "lucide-react" import { cn } from "@/lib/utils" import { CardManager } from "./card-manager" interface BombGameProps { onBack?: () => void } interface Equipment { id: number name: string image: string alternatives: string[] category: string } interface GameStats { totalTime: number correctAnswers: number wrongAnswers: number maxStreak: number averageTime: number } export function BombGame({ onBack }: BombGameProps) { const [currentEquipment, setCurrentEquipment] = useState(null) const [userAnswer, setUserAnswer] = useState("") const [score, setScore] = useState(0) const [round, setRound] = useState(1) const [timeLeft, setTimeLeft] = useState(15) const [gameOver, setGameOver] = useState(false) const [bombExploded, setBombExploded] = useState(false) const [isCorrect, setIsCorrect] = useState(null) const [showCelebration, setShowCelebration] = useState(false) const [streak, setStreak] = useState(0) const [showCardManager, setShowCardManager] = useState(false) const [gameStats, setGameStats] = useState({ totalTime: 0, correctAnswers: 0, wrongAnswers: 0, maxStreak: 0, averageTime: 0, }) const [gameStartTime, setGameStartTime] = useState(null) // Equipamentos odontológicos com fotos reais const [equipments, setEquipments] = useState([ { id: 1, name: "Turbina Odontológica", image: "/odontologic-high-speed-turbine.png", alternatives: ["turbina", "alta rotação", "caneta de alta", "motor alta rotação"], category: "Instrumentos Rotatórios", }, { id: 2, name: "Micromotor", image: "/placeholder-88plz.png", alternatives: ["micromotor", "baixa rotação", "contra-ângulo", "motor baixa rotação"], category: "Instrumentos Rotatórios", }, { id: 3, name: "Espelho Bucal", image: "/dental-mouth-mirror.png", alternatives: ["espelho", "espelho bucal", "espelho dental", "espelhinho"], category: "Instrumentos de Exame", }, { id: 4, name: "Sonda Exploradora", image: "/dental-explorer-clinic.png", alternatives: ["sonda", "sonda exploradora", "explorador", "sonda dental"], category: "Instrumentos de Exame", }, { id: 5, name: "Pinça Clínica", image: "/dental-clinic-forceps.png", alternatives: ["pinça", "pinça clínica", "pinça dental", "fórceps"], category: "Instrumentos de Preensão", }, { id: 6, name: "Sugador Odontológico", image: "/dental-suction-device.png", alternatives: ["sugador", "aspirador", "sucção", "bomba de sucção"], category: "Equipamentos de Aspiração", }, { id: 7, name: "Seringa Tríplice", image: "/dental-air-water-syringe.png", alternatives: ["seringa tríplice", "ar água", "seringa ar água", "spray"], category: "Equipamentos de Irrigação", }, { id: 8, name: "Fotopolimerizador", image: "/dental-led-curing-light.png", alternatives: ["fotopolimerizador", "led", "aparelho de luz", "polimerizador"], category: "Equipamentos de Polimerização", }, { id: 9, name: "Amalgamador", image: "/dental-amalgamator.png", alternatives: ["amalgamador", "misturador", "misturador de amalgama", "triturador"], category: "Equipamentos de Preparo", }, { id: 10, name: "Autoclave", image: "/dental-hospital-autoclave.png", alternatives: ["autoclave", "esterilizador", "esterilização", "estufa"], category: "Equipamentos de Esterilização", }, { id: 11, name: "Ultrassom Odontológico", image: "/placeholder.svg?height=200&width=200", alternatives: ["ultrassom", "raspador ultrassônico", "limpeza ultrassônica", "scaler"], category: "Equipamentos de Limpeza", }, { id: 12, name: "Cadeira Odontológica", image: "/placeholder.svg?height=200&width=200", alternatives: ["cadeira", "cadeira odontológica", "cadeira dental", "equipo"], category: "Mobiliário Clínico", }, ]) // Inicializar jogo useEffect(() => { resetGame() }, []) // Timer useEffect(() => { if (!gameOver && timeLeft > 0) { const timer = setTimeout(() => { setTimeLeft(timeLeft - 1) }, 1000) return () => clearTimeout(timer) } else if (timeLeft === 0 && !gameOver) { handleTimeUp() } }, [timeLeft, gameOver]) const resetGame = () => { setScore(0) setRound(1) setGameOver(false) setBombExploded(false) setIsCorrect(null) setShowCelebration(false) setStreak(0) setGameStats({ totalTime: 0, correctAnswers: 0, wrongAnswers: 0, maxStreak: 0, averageTime: 0, }) setGameStartTime(new Date()) nextRound() } const nextRound = () => { const randomEquipment = equipments[Math.floor(Math.random() * equipments.length)] setCurrentEquipment(randomEquipment) setUserAnswer("") setTimeLeft(15) setIsCorrect(null) } const handleTimeUp = () => { setIsCorrect(false) setStreak(0) setBombExploded(true) setGameStats((prev) => ({ ...prev, wrongAnswers: prev.wrongAnswers + 1, totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0, averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / round : 0, })) setTimeout(() => { setGameOver(true) }, 3000) } const checkAnswer = () => { if (!currentEquipment || !userAnswer.trim()) return const answer = userAnswer.toLowerCase().trim() const isAnswerCorrect = currentEquipment.alternatives.some( (alt) => alt.toLowerCase().includes(answer) || answer.includes(alt.toLowerCase()), ) setIsCorrect(isAnswerCorrect) if (isAnswerCorrect) { const timeBonus = Math.max(0, timeLeft - 3) * 2 const streakBonus = streak >= 3 ? 5 : 0 const basePoints = 15 const points = basePoints + timeBonus + streakBonus setScore(score + points) setStreak(streak + 1) setTimeLeft(Math.min(timeLeft + 3, 20)) setGameStats((prev) => ({ ...prev, correctAnswers: prev.correctAnswers + 1, maxStreak: Math.max(prev.maxStreak, streak + 1), })) } else { setStreak(0) setBombExploded(true) setGameStats((prev) => ({ ...prev, wrongAnswers: prev.wrongAnswers + 1, totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0, averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / round : 0, })) setTimeout(() => { setGameOver(true) }, 3000) return } setTimeout(() => { if (round >= 12) { const finalStats = { ...gameStats, correctAnswers: gameStats.correctAnswers + (isAnswerCorrect ? 1 : 0), totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0, averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / 12 : 0, } setGameStats(finalStats) setGameOver(true) if (score >= 150) { setShowCelebration(true) } } else { setRound(round + 1) nextRound() } }, 2000) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !gameOver && timeLeft > 0) { checkAnswer() } } const handleEquipmentsUpdate = (newEquipments: Equipment[]) => { setEquipments(newEquipments) } const goToGamesPage = () => { window.location.href = "/jogos" } return (

{/* Animação de celebração */} {showCelebration && (

🏆

Especialista em Equipamentos!

Você domina os equipamentos odontológicos!

)}

🔧 Desafio dos Equipamentos

Pontuação

{score}

Rodada

{round}/12

Sequência

{streak}

{!gameOver ? (

{bombExploded ? "💥 BOMBA EXPLODIU!" : "Identifique o equipamento odontológico"}

{timeLeft}s

{currentEquipment && (

{!bombExploded && (

Categoria: {currentEquipment.category}

setUserAnswer(e.target.value)} onKeyPress={handleKeyPress} placeholder="Digite o nome do equipamento..." className="text-lg text-center" disabled={gameOver || timeLeft === 0} autoFocus />

)} {bombExploded && (

💥

A BOMBA EXPLODIU!

Resposta correta: {currentEquipment.name}

O jogo será finalizado em alguns segundos...

)} {isCorrect !== null && !bombExploded && (

{isCorrect ? (

✅ Correto! +3s

Resposta: {currentEquipment.name}

{streak >= 3 && (

🔥 Sequência de {streak}! Bônus +5 pontos!

)}

) : (

💥 Incorreto!

Resposta correta: {currentEquipment.name}

)}

Progresso

Rodada {round} de 12

Como Jogar:

• Identifique o equipamento na foto
• Digite o nome antes da bomba explodir
• Você tem 15 segundos por rodada
• Ganhe +3s ao acertar!
• Sequências de acertos dão bônus!

{streak >= 3 && (

🔥

Sequência de {streak}!

+5 pontos de bônus por acerto

)}

) : (

{bombExploded ? "💥" : score >= 150 ? "🏆" : score >= 100 ? "🥈" : score >= 60 ? "🥉" : "💣"}

{bombExploded ? "GAME OVER" : "Jogo Finalizado!"}

{bombExploded ? "A bomba explodiu!" : "Parabéns pela performance!"}

{/* Estatísticas principais */}

{score}

Pontuação Final

{Math.floor(gameStats.totalTime / 60)}:{(gameStats.totalTime % 60).toString().padStart(2, "0")}

Tempo Total

{gameStats.maxStreak}

Maior Sequência

{round - 1}

Rodadas Jogadas

{/* Estatísticas detalhadas */}

✅

{gameStats.correctAnswers}

Respostas Corretas

❌

{gameStats.wrongAnswers}

Respostas Erradas

{gameStats.averageTime}s

Tempo Médio/Rodada

{/* Avaliação de performance */}

{bombExploded ? "Continue praticando!" : score >= 150 ? "Especialista em Equipamentos!" : score >= 100 ? "Muito bom desempenho!" : score >= 60 ? "Bom trabalho!" : "Continue estudando!"}

{bombExploded ? "Estude mais os equipamentos odontológicos e tente novamente." : score >= 150 ? "Você domina completamente os equipamentos odontológicos!" : score >= 100 ? "Continue praticando para se tornar um especialista!" : score >= 60 ? "Você está no caminho certo, continue melhorando!" : "Dedique mais tempo ao estudo dos equipamentos!"}

{/* Botões de ação */}

)}

) } [V0_FILE]typescriptreact:file="components/games/card-manager.tsx" isMerged="true" "use client" import { useState } from "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 { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Plus, Edit, Trash2, Save, X } from "lucide-react" interface Equipment { id: number name: string image: string alternatives: string[] category: string } interface CardManagerProps { equipments: Equipment[] onUpdate: (equipments: Equipment[]) => void } export function CardManager({ equipments, onUpdate }: CardManagerProps) { const [editingEquipment, setEditingEquipment] = useState(null) const [isCreating, setIsCreating] = useState(false) const [formData, setFormData] = useState({ name: "", image: "", alternatives: "", category: "", }) const categories = [ "Instrumentos Rotatórios", "Instrumentos de Exame", "Instrumentos de Preensão", "Equipamentos de Aspiração", "Equipamentos de Irrigação", "Equipamentos de Polimerização", "Equipamentos de Preparo", "Equipamentos de Esterilização", "Equipamentos de Limpeza", "Mobiliário Clínico", "Outros", ] const resetForm = () => { setFormData({ name: "", image: "", alternatives: "", category: "", }) setEditingEquipment(null) setIsCreating(false) } const handleEdit = (equipment: Equipment) => { setEditingEquipment(equipment) setFormData({ name: equipment.name, image: equipment.image, alternatives: equipment.alternatives.join(", "), category: equipment.category, }) setIsCreating(false) } const handleCreate = () => { setIsCreating(true) setEditingEquipment(null) resetForm() } const handleSave = () => { if (!formData.name.trim() || !formData.category.trim()) return const alternativesArray = formData.alternatives .split(",") .map((alt) => alt.trim()) .filter((alt) => alt.length > 0) if (isCreating) { const newEquipment: Equipment = { id: Math.max(...equipments.map((e) => e.id)) + 1, name: formData.name.trim(), image: formData.image.trim() || `/placeholder.svg?height=200&width=200&query=${encodeURIComponent(formData.name)}`, alternatives: alternativesArray, category: formData.category.trim(), } onUpdate([...equipments, newEquipment]) } else if (editingEquipment) { const updatedEquipments = equipments.map((eq) => eq.id === editingEquipment.id ? { ...eq, name: formData.name.trim(), image: formData.image.trim() || eq.image, alternatives: alternativesArray, category: formData.category.trim(), } : eq, ) onUpdate(updatedEquipments) } resetForm() } const handleDelete = (id: number) => { if (confirm("Tem certeza que deseja excluir este equipamento?")) { onUpdate(equipments.filter((eq) => eq.id !== id)) } } return (

{/* Formulário de criação/edição */}

{isCreating ? "Criar Novo Equipamento" : editingEquipment ? "Editar Equipamento" : "Gerenciar Equipamentos"} {!isCreating && !editingEquipment && ( )}

{(isCreating || editingEquipment) && (

Nome do Equipamento setFormData({ ...formData, name: e.target.value })} placeholder="Ex: Turbina Odontológica" />

Categoria

URL da Imagem (opcional) setFormData({ ...formData, image: e.target.value })} placeholder="Se vazio, será gerada automaticamente" />

Alternativas de Resposta

setFormData({ ...formData, alternatives: e.target.value })}
                placeholder="Separe as alternativas por vírgula. Ex: turbina, alta rotação, caneta de alta"
                rows={3}
              />
              <p className="text-xs text-muted-foreground">
                Digite diferentes formas de nomear este equipamento, separadas por vírgula
              </p>
            </div>

<div className="flex gap-2">
              <Button onClick={handleSave}>
                <Save className="h-4 w-4 mr-2" />
                Salvar
              </Button>
              <Button variant="outline" onClick={resetForm}>
                <X className="h-4 w-4 mr-2" />
                Cancelar
              </Button>
            </div>
          </CardContent>
        )}
      </Card>

{/* Lista de equipamentos */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {equipments.map((equipment) => (
          <Card key={equipment.id} className="relative">
            <CardHeader className="pb-2">
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <CardTitle className="text-sm">{equipment.name}</CardTitle>
                  <Badge variant="secondary" className="text-xs mt-1">
                    {equipment.category}
                  </Badge>
                </div>
                <div className="flex gap-1">
                  <Button size="sm" variant="ghost" onClick={() => handleEdit(equipment)}>
                    <Edit className="h-3 w-3" />
                  </Button>
                  <Button size="sm" variant="ghost" onClick={() => handleDelete(equipment.id)}>
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            </CardHeader>

<div className="text-xs">
                <p className="font-medium mb-1">Alternativas:</p>
                <div className="flex flex-wrap gap-1">
                  {equipment.alternatives.slice(0, 3).map((alt, index) => (
                    <Badge key={index} variant="outline" className="text-xs">
                      {alt}
                    </Badge>
                  ))}
                  {equipment.alternatives.length > 3 && (
                    <Badge variant="outline" className="text-xs">
                      +{equipment.alternatives.length - 3}
                    </Badge>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{equipments.length === 0 && (
        <Card>
          <CardContent className="text-center py-8">
            <p className="text-muted-foreground">Nenhum equipamento cadastrado</p>
            <Button onClick={handleCreate} className="mt-4">
              <Plus className="h-4 w-4 mr-2" />
              Criar Primeiro Equipamento
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games/memory-game.tsx" isMerged="true"
"use client"

interface PuzzleGameProps {
  onBack: () => void
}

interface MemoryCard {
  id: number
  emoji: string
  name: string
  isFlipped: boolean
  isMatched: boolean
}

export function MemoryGame({ onBack }: PuzzleGameProps) {
  const [cards, setCards] = useState<MemoryCard[]>([])
  const [flippedCards, setFlippedCards] = useState<number[]>([])
  const [moves, setMoves] = useState(0)
  const [pairs, setPairs] = useState(0)
  const [isComplete, setIsComplete] = useState(false)
  const [startTime, setStartTime] = useState<number>(0)
  const [elapsedTime, setElapsedTime] = useState(0)
  const [showCelebration, setShowCelebration] = useState(false)

// Instrumentos dentários
  const instruments = [
    { emoji: "🦷", name: "Dente" },
    { emoji: "🪥", name: "Escova" },
    { emoji: "🔬", name: "Microscópio" },
    { emoji: "💉", name: "Seringa" },
    { emoji: "🩺", name: "Estetoscópio" },
    { emoji: "⚕️", name: "Símbolo Médico" },
    { emoji: "🧪", name: "Tubo de Ensaio" },
    { emoji: "🔍", name: "Lupa" },
  ]

// Inicializar o jogo
  useEffect(() => {
    resetGame()
    setStartTime(Date.now())
  }, [])

// Timer
  useEffect(() => {
    if (!isComplete && startTime > 0) {
      const interval = setInterval(() => {
        setElapsedTime(Math.floor((Date.now() - startTime) / 1000))
      }, 1000)
      return () => clearInterval(interval)
    }
  }, [isComplete, startTime])

// Animação de celebração
  useEffect(() => {
    if (isComplete) {
      setShowCelebration(true)
      const timer = setTimeout(() => setShowCelebration(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [isComplete])

const resetGame = () => {
    // Criar pares de cartas
    const cardPairs = instruments.flatMap((instrument, index) => [
      { id: index * 2, ...instrument, isFlipped: false, isMatched: false },
      { id: index * 2 + 1, ...instrument, isFlipped: false, isMatched: false },
    ])

// Embaralhar
    const shuffled = [...cardPairs].sort(() => Math.random() - 0.5)

setCards(shuffled)
    setFlippedCards([])
    setMoves(0)
    setPairs(0)
    setIsComplete(false)
    setStartTime(Date.now())
    setElapsedTime(0)
    setShowCelebration(false)
  }

const flipCard = (cardId: number) => {
    if (flippedCards.length === 2 || flippedCards.includes(cardId)) return

const card = cards.find((c) => c.id === cardId)
    if (!card || card.isMatched) return

const newFlippedCards = [...flippedCards, cardId]
    setFlippedCards(newFlippedCards)

// Atualizar estado das cartas
    setCards((prev) => prev.map((c) => (c.id === cardId ? { ...c, isFlipped: true } : c)))

if (newFlippedCards.length === 2) {
      setMoves(moves + 1)

const [firstId, secondId] = newFlippedCards
      const firstCard = cards.find((c) => c.id === firstId)
      const secondCard = cards.find((c) => c.id === secondId)

if (firstCard && secondCard && firstCard.emoji === secondCard.emoji) {
        // Par encontrado
        setTimeout(() => {
          setCards((prev) => prev.map((c) => (c.id === firstId || c.id === secondId ? { ...c, isMatched: true } : c)))
          setPairs(pairs + 1)
          setFlippedCards([])

// Verificar se completou
          if (pairs + 1 === instruments.length) {
            setIsComplete(true)
          }
        }, 1000)
      } else {
        // Não é par, virar de volta
        setTimeout(() => {
          setCards((prev) => prev.map((c) => (c.id === firstId || c.id === secondId ? { ...c, isFlipped: false } : c)))
          setFlippedCards([])
        }, 1000)
      }
    }
  }

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

return (
    <div className="container mx-auto p-6 relative">
      {/* Animação de celebração */}
      {showCelebration && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 text-center shadow-2xl animate-bounce">
            <div className="text-6xl mb-4">🧠</div>
            <h2 className="text-3xl font-bold text-green-600 mb-2">Excelente Memória!</h2>
            <p className="text-lg text-gray-600">Todos os pares encontrados!</p>
            <div className="flex justify-center space-x-4 mt-4">
              <Brain className="h-6 w-6 text-purple-500 animate-pulse" />
              <Trophy className="h-6 w-6 text-yellow-500 animate-pulse" />
              <Brain className="h-6 w-6 text-purple-500 animate-pulse" />
            </div>
          </div>
        </div>
      )}

<div className="mb-6">
        <Button variant="ghost" onClick={onBack} className="mb-4">
          <ArrowLeft className="h-4 w-4 mr-2" />
          Voltar aos Jogos
        </Button>

<div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold">Jogo da Memória - Instrumentos Dentários</h1>
          <div className="flex gap-4">
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Movimentos</p>
              <p className="text-2xl font-bold">{moves}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Pares</p>
              <p className="text-2xl font-bold">
                {pairs}/{instruments.length}
              </p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Tempo</p>
              <p className="text-2xl font-bold">{formatTime(elapsedTime)}</p>
            </div>
          </div>
        </div>
      </div>

<div className="flex flex-col lg:flex-row gap-8">
        <div className="flex-1">
          <Card className={cn("transition-all duration-500", isComplete && "ring-4 ring-green-500 bg-green-50")}>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span className="flex items-center gap-2">
                  Encontre os pares de instrumentos
                  {isComplete && <Trophy className="h-5 w-5 text-green-600" />}
                </span>
                <Button variant="outline" onClick={resetGame}>
                  <RotateCcw className="h-4 w-4 mr-2" />
                  Reiniciar
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-4 gap-3 max-w-2xl mx-auto">
                {cards.map((card) => (
                  <div
                    key={card.id}
                    onClick={() => flipCard(card.id)}
                    className={cn(
                      "aspect-square rounded-xl cursor-pointer transition-all duration-500 transform-gpu",
                      "hover:scale-105 shadow-lg",
                      card.isFlipped || card.isMatched
                        ? "bg-gradient-to-br from-blue-400 to-blue-600"
                        : "bg-gradient-to-br from-gray-400 to-gray-600 hover:from-gray-300 hover:to-gray-500",
                      card.isMatched && "from-green-400 to-green-600 ring-2 ring-green-300",
                      flippedCards.includes(card.id) && !card.isMatched && "animate-pulse",
                    )}
                  >
                    <div className="w-full h-full rounded-xl flex flex-col items-center justify-center text-white">
                      {card.isFlipped || card.isMatched ? (
                        <>
                          <div className="text-4xl mb-2">{card.emoji}</div>
                          <div className="text-xs font-bold text-center px-1">{card.name}</div>
                        </>
                      ) : (
                        <div className="text-4xl">❓</div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

<div className="lg:w-80">
          <Card>
            <CardHeader>
              <CardTitle>Progresso</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="w-full bg-gray-200 rounded-full h-3">
                  <div
                    className="bg-gradient-to-r from-blue-500 to-green-500 h-3 rounded-full transition-all duration-500"
                    style={{ width: `${(pairs / instruments.length) * 100}%` }}
                  />
                </div>

<div className="text-center text-sm text-muted-foreground">
                  {pairs} de {instruments.length} pares encontrados
                </div>

{isComplete && (
                  <div className="text-center p-4 bg-green-50 rounded-lg border border-green-200 animate-pulse">
                    <Trophy className="h-8 w-8 text-green-600 mx-auto mb-2" />
                    <h3 className="font-bold text-green-800">Parabéns!</h3>
                    <p className="text-sm text-green-600">
                      Completado em {moves} movimentos e {formatTime(elapsedTime)}
                    </p>
                  </div>
                )}

<div className="p-3 bg-purple-50 rounded-lg">
                  <h4 className="font-semibold text-purple-800 mb-2">Como Jogar:</h4>
                  <ul className="text-xs text-purple-700 space-y-1">
                    <li>• Clique nas cartas para virá-las</li>
                    <li>• Encontre os pares iguais</li>
                    <li>• Use sua memória para lembrar das posições</li>
                    <li>• Complete com o menor número de movimentos!</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games/puzzle-game.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Shuffle, RotateCcw, Trophy, Clock } from "lucide-react"
import { toast } from "@/hooks/use-toast"

interface PuzzlePiece {
  id: number
  value: string
  emoji: string
  currentPosition: number
  correctPosition: number
}

export function PuzzleGame() {
  const [pieces, setPieces] = useState<PuzzlePiece[]>([])
  const [moves, setMoves] = useState(0)
  const [isComplete, setIsComplete] = useState(false)
  const [startTime, setStartTime] = useState<Date | null>(null)
  const [elapsedTime, setElapsedTime] = useState(0)
  const [showCelebration, setShowCelebration] = useState(false)

// Peças do quebra-cabeça com equipamentos odontológicos
  const initialPieces: Omit<PuzzlePiece, "currentPosition">[] = [
    { id: 1, value: "Espelho", emoji: "🪞", correctPosition: 0 },
    { id: 2, value: "Sonda", emoji: "🔍", correctPosition: 1 },
    { id: 3, value: "Pinça", emoji: "🔧", correctPosition: 2 },
    { id: 4, value: "Broca", emoji: "⚙️", correctPosition: 3 },
    { id: 5, value: "Seringa", emoji: "💉", correctPosition: 4 },
    { id: 6, value: "Fórceps", emoji: "🔨", correctPosition: 5 },
    { id: 7, value: "Cureta", emoji: "🥄", correctPosition: 6 },
    { id: 8, value: "Vazio", emoji: "", correctPosition: 7 },
  ]

// Timer
  useEffect(() => {
    let interval: NodeJS.Timeout
    if (startTime && !isComplete) {
      interval = setInterval(() => {
        setElapsedTime(Math.floor((Date.now() - startTime.getTime()) / 1000))
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [startTime, isComplete])

// Inicializar o jogo
  useEffect(() => {
    initializeGame()
  }, [])

const initializeGame = () => {
    const shuffledPieces = [...initialPieces].map((piece, index) => ({
      ...piece,
      currentPosition: index,
    }))

// Embaralhar as peças (exceto a vazia)
    for (let i = 0; i < 100; i++) {
      const emptyIndex = shuffledPieces.findIndex((p) => p.value === "Vazio")
      const possibleMoves = getPossibleMoves(emptyIndex)
      if (possibleMoves.length > 0) {
        const randomMove = possibleMoves[Math.floor(Math.random() * possibleMoves.length)]
        swapPieces(shuffledPieces, emptyIndex, randomMove)
      }
    }

setPieces(shuffledPieces)
    setMoves(0)
    setIsComplete(false)
    setStartTime(new Date())
    setElapsedTime(0)
    setShowCelebration(false)
  }

const getPossibleMoves = (emptyIndex: number): number[] => {
    const moves: number[] = []
    const row = Math.floor(emptyIndex / 3)
    const col = emptyIndex % 3

// Cima
    if (row > 0) moves.push(emptyIndex - 3)
    // Baixo
    if (row < 2) moves.push(emptyIndex + 3)
    // Esquerda
    if (col > 0) moves.push(emptyIndex - 1)
    // Direita
    if (col < 2) moves.push(emptyIndex + 1)

return moves
  }

const swapPieces = (piecesArray: PuzzlePiece[], index1: number, index2: number) => {
    const temp = piecesArray[index1].currentPosition
    piecesArray[index1].currentPosition = piecesArray[index2].currentPosition
    piecesArray[index2].currentPosition = temp
  }

const handlePieceClick = (clickedIndex: number) => {
    if (isComplete) return

const emptyIndex = pieces.findIndex((p) => p.value === "Vazio")
    const possibleMoves = getPossibleMoves(emptyIndex)

if (possibleMoves.includes(clickedIndex)) {
      const newPieces = [...pieces]
      swapPieces(newPieces, emptyIndex, clickedIndex)
      setPieces(newPieces)
      setMoves(moves + 1)

// Verificar se está completo
      const isCompleted = newPieces.every((piece) => piece.currentPosition === piece.correctPosition)

if (isCompleted) {
        setIsComplete(true)
        setShowCelebration(true)

toast({
          title: "🎉 Parabéns!",
          description: `Quebra-cabeça concluído em ${moves + 1} movimentos e ${elapsedTime} segundos!`,
        })

// Esconder celebração após 3 segundos
        setTimeout(() => setShowCelebration(false), 3000)
      }
    }
  }

return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span className="flex items-center">🧩 Quebra-Cabeça Dental</span>
          {isComplete && <Trophy className="h-5 w-5 text-yellow-500" />}
        </CardTitle>
        <div className="flex items-center justify-between text-sm text-muted-foreground">
          <div className="flex items-center space-x-4">
            <Badge variant="outline">
              <Clock className="mr-1 h-3 w-3" />
              {formatTime(elapsedTime)}
            </Badge>
            <Badge variant="outline">Movimentos: {moves}</Badge>
          </div>
        </div>
      </CardHeader>

<CardContent className="space-y-4">
        {/* Grid do quebra-cabeça */}
        <div
          className={`grid grid-cols-3 gap-2 p-4 rounded-lg transition-all duration-500 ${
            isComplete ? "bg-green-100 border-2 border-green-300" : "bg-muted/20"
          }`}
        >
          {Array.from({ length: 9 }, (_, index) => {
            const piece = pieces.find((p) => p.currentPosition === index)
            const isEmpty = piece?.value === "Vazio"
            const isClickable = !isEmpty && !isComplete

return (
              <div
                key={index}
                onClick={() => !isEmpty && handlePieceClick(index)}
                className={`
                  aspect-square rounded-lg flex flex-col items-center justify-center text-center
                  transition-all duration-300 cursor-pointer
                  ${
                    isEmpty
                      ? "bg-transparent"
                      : isComplete
                        ? "bg-gradient-to-br from-green-400 to-green-600 text-white shadow-lg transform scale-105"
                        : "bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md hover:shadow-lg hover:scale-105"
                  }
                  ${isClickable ? "hover:from-blue-500 hover:to-blue-700" : ""}
                `}
              >
                {!isEmpty && (
                  <>
                    <div className="text-2xl mb-1">{piece?.emoji}</div>
                    <div className="text-xs font-medium">{piece?.value}</div>
                  </>
                )}
              </div>
            )
          })}
        </div>

{/* Celebração */}
        {showCelebration && (
          <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50 animate-in fade-in duration-300">
            <div className="bg-white rounded-lg p-8 text-center animate-in zoom-in duration-500">
              <div className="text-6xl mb-4">🎉</div>
              <h2 className="text-2xl font-bold text-green-600 mb-2">Parabéns!</h2>
              <p className="text-muted-foreground mb-4">Quebra-cabeça concluído com sucesso!</p>
              <div className="flex justify-center space-x-4 text-sm">
                <Badge className="bg-green-100 text-green-800">⏱️ {formatTime(elapsedTime)}</Badge>
                <Badge className="bg-blue-100 text-blue-800">🎯 {moves} movimentos</Badge>
              </div>
            </div>
          </div>
        )}

{/* Controles */}
        <div className="flex space-x-2">
          <Button onClick={initializeGame} variant="outline" size="sm" className="flex-1 bg-transparent">
            <Shuffle className="mr-2 h-4 w-4" />
            Embaralhar
          </Button>
          <Button onClick={initializeGame} variant="outline" size="sm" className="flex-1 bg-transparent">
            <RotateCcw className="mr-2 h-4 w-4" />
            Reiniciar
          </Button>
        </div>

{/* Instruções */}
        <div className="text-xs text-muted-foreground text-center">
          Clique nas peças adjacentes ao espaço vazio para movê-las.
          <br />
          Organize os equipamentos odontológicos na ordem correta!
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/games/quiz-game.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Clock, Trophy, Brain, CheckCircle, XCircle } from "lucide-react"
import { toast } from "@/hooks/use-toast"

interface Question {
  id: number
  question: string
  options: string[]
  correctAnswer: number
  explanation: string
  category: string
}

interface QuizState {
  currentQuestion: number
  score: number
  answers: (number | null)[]
  timeLeft: number
  isComplete: boolean
  showExplanation: boolean
}

export function QuizGame() {
  const [quizState, setQuizState] = useState<QuizState>({
    currentQuestion: 0,
    score: 0,
    answers: [],
    timeLeft: 30,
    isComplete: false,
    showExplanation: false,
  })

const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null)
  const [showCelebration, setShowCelebration] = useState(false)

// Perguntas sobre odontologia
  const questions: Question[] = [
    {
      id: 1,
      question: "Qual é o nome do processo de formação de cáries dentárias?",
      options: ["Desmineralização", "Remineralização", "Calcificação", "Fluoretação"],
      correctAnswer: 0,
      explanation:
        "A desmineralização é o processo onde os ácidos produzidos pelas bactérias dissolvem os minerais do esmalte dentário, causando cáries.",
      category: "Cariologia",
    },
    {
      id: 2,
      question: "Quantos dentes permanentes tem um adulto completo?",
      options: ["28", "30", "32", "34"],
      correctAnswer: 2,
      explanation: "Um adulto tem 32 dentes permanentes, incluindo 4 dentes do siso (terceiros molares).",
      category: "Anatomia",
    },
    {
      id: 3,
      question: "Qual é a principal função do flúor na prevenção de cáries?",
      options: ["Matar bactérias", "Remineralizar o esmalte", "Limpar os dentes", "Fortalecer a gengiva"],
      correctAnswer: 1,
      explanation:
        "O flúor ajuda na remineralização do esmalte dentário, tornando-o mais resistente aos ácidos que causam cáries.",
      category: "Prevenção",
    },
    {
      id: 4,
      question: "O que é gengivite?",
      options: ["Inflamação da gengiva", "Cárie no dente", "Fratura dentária", "Sensibilidade dental"],
      correctAnswer: 0,
      explanation:
        "Gengivite é a inflamação da gengiva causada pelo acúmulo de placa bacteriana, caracterizada por vermelhidão, inchaço e sangramento.",
      category: "Periodontia",
    },
    {
      id: 5,
      question: "Qual é o pH crítico para início da desmineralização do esmalte?",
      options: ["7.0", "6.5", "5.5", "4.5"],
      correctAnswer: 2,
      explanation:
        "O pH crítico é 5.5. Abaixo deste valor, o esmalte dentário começa a se desmineralizar, iniciando o processo de formação de cáries.",
      category: "Cariologia",
    },
    {
      id: 6,
      question: "Com que frequência deve-se trocar a escova de dentes?",
      options: ["A cada mês", "A cada 2 meses", "A cada 3 meses", "A cada 6 meses"],
      correctAnswer: 2,
      explanation:
        "A escova de dentes deve ser trocada a cada 3 meses ou quando as cerdas estiverem desgastadas, para manter a eficácia da limpeza.",
      category: "Prevenção",
    },
    {
      id: 7,
      question: "Qual é a camada mais externa do dente?",
      options: ["Dentina", "Polpa", "Esmalte", "Cemento"],
      correctAnswer: 2,
      explanation: "O esmalte é a camada mais externa e dura do dente, composta principalmente por hidroxiapatita.",
      category: "Anatomia",
    },
    {
      id: 8,
      question: "O que causa a halitose (mau hálito)?",
      options: ["Apenas má higiene", "Apenas problemas estomacais", "Bactérias na boca", "Apenas alimentos"],
      correctAnswer: 2,
      explanation:
        "A halitose é principalmente causada por bactérias na boca que produzem compostos sulfurados, embora outros fatores também possam contribuir.",
      category: "Diagnóstico",
    },
    {
      id: 9,
      question: "Qual é a idade recomendada para a primeira consulta odontológica?",
      options: ["6 meses", "1 ano", "2 anos", "3 anos"],
      correctAnswer: 1,
      explanation:
        "A primeira consulta deve ocorrer até o primeiro ano de vida ou 6 meses após o nascimento do primeiro dente.",
      category: "Odontopediatria",
    },
    {
      id: 10,
      question: "O que é bruxismo?",
      options: ["Inflamação da gengiva", "Ranger ou apertar os dentes", "Sensibilidade dental", "Mau hálito"],
      correctAnswer: 1,
      explanation:
        "Bruxismo é o hábito involuntário de ranger ou apertar os dentes, geralmente durante o sono, podendo causar desgaste dentário.",
      category: "Diagnóstico",
    },
  ]

// Timer
  useEffect(() => {
    if (quizState.timeLeft > 0 && !quizState.isComplete && !quizState.showExplanation) {
      const timer = setTimeout(() => {
        setQuizState((prev) => ({ ...prev, timeLeft: prev.timeLeft - 1 }))
      }, 1000)
      return () => clearTimeout(timer)
    } else if (quizState.timeLeft === 0 && !quizState.showExplanation) {
      handleTimeUp()
    }
  }, [quizState.timeLeft, quizState.isComplete, quizState.showExplanation])

const handleTimeUp = () => {
    setSelectedAnswer(null)
    handleAnswer(null)
  }

const handleAnswer = (answerIndex: number | null) => {
    const newAnswers = [...quizState.answers]
    newAnswers[quizState.currentQuestion] = answerIndex

let newScore = quizState.score
    if (answerIndex === questions[quizState.currentQuestion].correctAnswer) {
      newScore += 1
    }

setQuizState((prev) => ({
      ...prev,
      answers: newAnswers,
      score: newScore,
      showExplanation: true,
    }))
  }

const nextQuestion = () => {
    if (quizState.currentQuestion < questions.length - 1) {
      setQuizState((prev) => ({
        ...prev,
        currentQuestion: prev.currentQuestion + 1,
        timeLeft: 30,
        showExplanation: false,
      }))
      setSelectedAnswer(null)
    } else {
      // Quiz completo
      setQuizState((prev) => ({ ...prev, isComplete: true }))

const percentage = (quizState.score / questions.length) * 100
      if (percentage >= 80) {
        setShowCelebration(true)
        setTimeout(() => setShowCelebration(false), 3000)
      }

toast({
        title: "Quiz Concluído!",
        description: `Você acertou ${quizState.score} de ${questions.length} perguntas (${percentage.toFixed(0)}%)`,
      })
    }
  }

const restartQuiz = () => {
    setQuizState({
      currentQuestion: 0,
      score: 0,
      answers: [],
      timeLeft: 30,
      isComplete: false,
      showExplanation: false,
    })
    setSelectedAnswer(null)
    setShowCelebration(false)
  }

const currentQ = questions[quizState.currentQuestion]
  const progress = ((quizState.currentQuestion + 1) / questions.length) * 100

if (quizState.isComplete) {
    const percentage = (quizState.score / questions.length) * 100
    return (
      <Card className="w-full max-w-2xl mx-auto">
        <CardHeader className="text-center">
          <CardTitle className="flex items-center justify-center space-x-2">
            <Trophy className="h-6 w-6 text-yellow-500" />
            <span>Quiz Concluído!</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="text-center space-y-6">
          <div className="text-6xl mb-4">{percentage >= 80 ? "🎉" : percentage >= 60 ? "👏" : "📚"}</div>

<div className="space-y-2">
            <div className="text-3xl font-bold">
              {quizState.score}/{questions.length}
            </div>
            <div className="text-lg text-muted-foreground">{percentage.toFixed(0)}% de acertos</div>
          </div>

<div className="space-y-2">
            {percentage >= 80 && (
              <Badge className="bg-green-100 text-green-800 text-lg px-4 py-2">
                🏆 Excelente! Você domina o assunto!
              </Badge>
            )}
            {percentage >= 60 && percentage < 80 && (
              <Badge className="bg-blue-100 text-blue-800 text-lg px-4 py-2">
                👍 Bom trabalho! Continue estudando!
              </Badge>
            )}
            {percentage < 60 && (
              <Badge className="bg-orange-100 text-orange-800 text-lg px-4 py-2">
                📖 Continue praticando para melhorar!
              </Badge>
            )}
          </div>

<Button onClick={restartQuiz} size="lg" className="w-full">
            <Brain className="mr-2 h-5 w-5" />
            Jogar Novamente
          </Button>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center space-x-2">
            <Brain className="h-5 w-5" />
            <span>Quiz Odontológico</span>
          </CardTitle>
          <Badge variant="outline">
            <Clock className="mr-1 h-3 w-3" />
            {quizState.timeLeft}s
          </Badge>
        </div>

<div className="space-y-2">
          <div className="flex justify-between text-sm text-muted-foreground">
            <span>
              Pergunta {quizState.currentQuestion + 1} de {questions.length}
            </span>
            <span>Pontuação: {quizState.score}</span>
          </div>
          <Progress value={progress} className="h-2" />
        </div>
      </CardHeader>

<CardContent className="space-y-6">
        <div className="space-y-4">
          <div className="flex items-center space-x-2">
            <Badge variant="secondary">{currentQ.category}</Badge>
          </div>

<h3 className="text-lg font-semibold leading-relaxed">{currentQ.question}</h3>
        </div>

{!quizState.showExplanation ? (
          <div className="space-y-3">
            {currentQ.options.map((option, index) => (
              <Button
                key={index}
                variant={selectedAnswer === index ? "default" : "outline"}
                className="w-full text-left justify-start h-auto p-4"
                onClick={() => {
                  setSelectedAnswer(index)
                  handleAnswer(index)
                }}
                disabled={quizState.showExplanation}
              >
                <span className="mr-3 font-bold">{String.fromCharCode(65 + index)}.</span>
                {option}
              </Button>
            ))}
          </div>
        ) : (
          <div className="space-y-4">
            <div className="space-y-3">
              {currentQ.options.map((option, index) => {
                const isCorrect = index === currentQ.correctAnswer
                const wasSelected = quizState.answers[quizState.currentQuestion] === index

return (
                  <div
                    key={index}
                    className={`p-4 rounded-lg border-2 flex items-center space-x-3 ${
                      isCorrect
                        ? "bg-green-50 border-green-300"
                        : wasSelected
                          ? "bg-red-50 border-red-300"
                          : "bg-gray-50 border-gray-200"
                    }`}
                  >
                    {isCorrect ? (
                      <CheckCircle className="h-5 w-5 text-green-600" />
                    ) : wasSelected ? (
                      <XCircle className="h-5 w-5 text-red-600" />
                    ) : (
                      <div className="h-5 w-5" />
                    )}
                    <span className="font-bold mr-2">{String.fromCharCode(65 + index)}.</span>
                    <span className={isCorrect ? "font-semibold" : ""}>{option}</span>
                  </div>
                )
              })}
            </div>

<div className="bg-blue-50 p-4 rounded-lg">
              <h4 className="font-semibold text-blue-800 mb-2">💡 Explicação:</h4>
              <p className="text-blue-700">{currentQ.explanation}</p>
            </div>

<Button onClick={nextQuestion} className="w-full" size="lg">
              {quizState.currentQuestion < questions.length - 1 ? "Próxima Pergunta" : "Ver Resultado"}
            </Button>
          </div>
        )}

{/* Celebração */}
        {showCelebration && (
          <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50 animate-in fade-in duration-300">
            <div className="bg-white rounded-lg p-8 text-center animate-in zoom-in duration-500">
              <div className="text-6xl mb-4">🎉</div>
              <h2 className="text-2xl font-bold text-green-600 mb-2">Parabéns!</h2>
              <p className="text-muted-foreground mb-4">Excelente desempenho no quiz!</p>
              <Badge className="bg-green-100 text-green-800 text-lg px-4 py-2">
                🏆 {((quizState.score / questions.length) * 100).toFixed(0)}% de acertos
              </Badge>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/add-employee-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Upload, FileText, Shield, User, FileCheck, Clock, Camera, X } from "lucide-react"

interface WorkSchedule {
  monday: { active: boolean; start: string; end: string }
  tuesday: { active: boolean; start: string; end: string }
  wednesday: { active: boolean; start: string; end: string }
  thursday: { active: boolean; start: string; end: string }
  friday: { active: boolean; start: string; end: string }
  saturday: { active: boolean; start: string; end: string }
  sunday: { active: boolean; start: string; end: string }
}

interface AddEmployeeDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAddEmployee: (employee: Omit<Employee, "id" | "created_at" | "updated_at">) => void
}

export function AddEmployeeDialog({ open, onOpenChange, onAddEmployee }: AddEmployeeDialogProps) {
  const [currentStep, setCurrentStep] = useState(1)
  const [uploading, setUploading] = useState(false)
  const [photoFile, setPhotoFile] = useState<File | null>(null)
  const [photoPreview, setPhotoPreview] = useState<string | null>(null)

// Dados profissionais (Etapa 1)
  const [professionalData, setProfessionalData] = useState({
    name: "",
    email: "",
    phone: "",
    specialty: "",
    role: "",
    hire_date: "",
    salary: "",
  })

// Dados pessoais (Etapa 2)
  const [personalData, setPersonalData] = useState({
    birth_date: "",
    cpf: "",
    rg: "",
    address: "",
    emergency_contact_name: "",
    emergency_contact_phone: "",
  })

// Permissões
  const [permissions, setPermissions] = useState({
    prosthetic_control: false,
    employee_management: false,
    inventory_control: false,
    reports: false,
    settings: false,
    financial: false,
  })

// Horários de trabalho
  const [workSchedule, setWorkSchedule] = useState<WorkSchedule>({
    monday: { active: true, start: "08:00", end: "18:00" },
    tuesday: { active: true, start: "08:00", end: "18:00" },
    wednesday: { active: true, start: "08:00", end: "18:00" },
    thursday: { active: true, start: "08:00", end: "18:00" },
    friday: { active: true, start: "08:00", end: "18:00" },
    saturday: { active: false, start: "08:00", end: "12:00" },
    sunday: { active: false, start: "08:00", end: "12:00" },
  })

// Documentos
  const [documents, setDocuments] = useState<{ [key: string]: File | null }>({
    contract: null,
    insurance: null,
    medical_certificate: null,
    diploma: null,
  })

const [uploadedDocuments, setUploadedDocuments] = useState<{ [key: string]: string }>({})

const roles = [
    { value: "admin", label: "Administrador" },
    { value: "doutor", label: "Doutor" },
    { value: "funcionario", label: "Funcionário" },
    { value: "recepcionista", label: "Recepcionista" },
    { value: "auxiliar", label: "Auxiliar" },
  ]

const permissionLabels = {
    prosthetic_control: "Controle Protético",
    employee_management: "Gestão de Funcionários",
    inventory_control: "Controle de Estoque",
    reports: "Relatórios",
    settings: "Configurações",
    financial: "Financeiro",
  }

const documentLabels = {
    contract: "Contrato de Trabalho",
    insurance: "Seguro",
    medical_certificate: "Atestado Médico",
    diploma: "Diploma/Certificado",
  }

const dayLabels = {
    monday: "Segunda-feira",
    tuesday: "Terça-feira",
    wednesday: "Quarta-feira",
    thursday: "Quinta-feira",
    friday: "Sexta-feira",
    saturday: "Sábado",
    sunday: "Domingo",
  }

const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setPhotoFile(file)
      const reader = new FileReader()
      reader.onload = (e) => {
        setPhotoPreview(e.target?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const removePhoto = () => {
    setPhotoFile(null)
    setPhotoPreview(null)
  }

const handleFileChange = (documentType: string, file: File | null) => {
    setDocuments((prev) => ({
      ...prev,
      [documentType]: file,
    }))
  }

const handleScheduleChange = (day: keyof WorkSchedule, field: keyof WorkSchedule[keyof WorkSchedule], value: any) => {
    setWorkSchedule((prev) => ({
      ...prev,
      [day]: {
        ...prev[day],
        [field]: value,
      },
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setUploading(true)

try {
      let photoUrl = undefined
      if (photoFile) {
        photoUrl = URL.createObjectURL(photoFile)
      }

const employeeData = {
        // Dados profissionais
        name: professionalData.name,
        email: professionalData.email || undefined,
        phone: professionalData.phone || undefined,
        specialty: professionalData.specialty || undefined,
        role: professionalData.role,
        hire_date: professionalData.hire_date || undefined,
        salary: professionalData.salary ? Number.parseFloat(professionalData.salary) : undefined,
        photo: photoUrl,

// Dados pessoais
        birth_date: personalData.birth_date || undefined,
        cpf: personalData.cpf || undefined,
        rg: personalData.rg || undefined,
        address: personalData.address || undefined,
        emergency_contact_name: personalData.emergency_contact_name || undefined,
        emergency_contact_phone: personalData.emergency_contact_phone || undefined,

// Configurações
        is_active: true,
        performance_score: 0,
        permissions,
        work_schedule: workSchedule,
        documents: uploadedDocuments,
      }

onAddEmployee(employeeData)

// Reset form
      setCurrentStep(1)
      setPhotoFile(null)
      setPhotoPreview(null)
      setProfessionalData({
        name: "",
        email: "",
        phone: "",
        specialty: "",
        role: "",
        hire_date: "",
        salary: "",
      })
      setPersonalData({
        birth_date: "",
        cpf: "",
        rg: "",
        address: "",
        emergency_contact_name: "",
        emergency_contact_phone: "",
      })
      setPermissions({
        prosthetic_control: false,
        employee_management: false,
        inventory_control: false,
        reports: false,
        settings: false,
        financial: false,
      })
      setWorkSchedule({
        monday: { active: true, start: "08:00", end: "18:00" },
        tuesday: { active: true, start: "08:00", end: "18:00" },
        wednesday: { active: true, start: "08:00", end: "18:00" },
        thursday: { active: true, start: "08:00", end: "18:00" },
        friday: { active: true, start: "08:00", end: "18:00" },
        saturday: { active: false, start: "08:00", end: "12:00" },
        sunday: { active: false, start: "08:00", end: "12:00" },
      })
      setDocuments({
        contract: null,
        insurance: null,
        medical_certificate: null,
        diploma: null,
      })
      setUploadedDocuments({})

onOpenChange(false)
    } catch (error) {
      console.error("Erro ao adicionar funcionário:", error)
    } finally {
      setUploading(false)
    }
  }

const handleNext = () => {
    setCurrentStep(2)
  }

const handleBack = () => {
    setCurrentStep(1)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <User className="h-5 w-5" />
            <span>Adicionar Novo Funcionário</span>
          </DialogTitle>
          <div className="flex items-center space-x-2 mt-2">
            <Progress value={currentStep === 1 ? 50 : 100} className="flex-1" />
            <span className="text-sm text-muted-foreground">Etapa {currentStep} de 2</span>
          </div>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
          {currentStep === 1 && (
            <div className="space-y-6">
              <div className="flex items-center space-x-2 mb-4">
                <User className="h-4 w-4" />
                <h3 className="text-lg font-semibold">Informações Profissionais</h3>
              </div>

<div className="flex flex-col items-center space-y-4 p-6 border-2 border-dashed border-muted rounded-lg">
                <div className="flex flex-col items-center space-y-4">
                  <Avatar className="h-24 w-24">
                    <AvatarImage src={photoPreview || undefined} />
                    <AvatarFallback className="text-2xl">
                      {professionalData.name ? (
                        professionalData.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")
                          .substring(0, 2)
                      ) : (
                        <Camera className="h-8 w-8" />
                      )}
                    </AvatarFallback>
                  </Avatar>

<div className="flex items-center space-x-2">
                    <Label htmlFor="photo-upload" className="cursor-pointer">
                      <Button type="button" variant="outline" size="sm" asChild>
                        <span>
                          <Camera className="mr-2 h-4 w-4" />
                          {photoPreview ? "Alterar Foto" : "Adicionar Foto"}
                        </span>
                      </Button>
                    </Label>
                    <Input
                      id="photo-upload"
                      type="file"
                      accept="image/*"
                      onChange={handlePhotoChange}
                      className="hidden"
                    />
                    {photoPreview && (
                      <Button type="button" variant="ghost" size="sm" onClick={removePhoto}>
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>

<p className="text-sm text-muted-foreground text-center">
                    Formatos aceitos: JPG, PNG, GIF (máx. 5MB)
                  </p>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="name">Nome Completo *</Label>
                  <Input
                    id="name"
                    value={professionalData.name}
                    onChange={(e) => setProfessionalData({ ...professionalData, name: e.target.value })}
                    required
                  />
                </div>

<div>
                  <Label htmlFor="email">E-mail</Label>
                  <Input
                    id="email"
                    type="email"
                    value={professionalData.email}
                    onChange={(e) => setProfessionalData({ ...professionalData, email: e.target.value })}
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="phone">Telefone</Label>
                  <Input
                    id="phone"
                    value={professionalData.phone}
                    onChange={(e) => setProfessionalData({ ...professionalData, phone: e.target.value })}
                  />
                </div>

<div>
                  <Label htmlFor="role">Cargo *</Label>
                  <Select
                    value={professionalData.role}
                    onValueChange={(value) => setProfessionalData({ ...professionalData, role: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione o cargo" />
                    </SelectTrigger>
                    <SelectContent>
                      {roles.map((role) => (
                        <SelectItem key={role.value} value={role.value}>
                          {role.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div>
                <Label htmlFor="specialty">Especialidade</Label>
                <Input
                  id="specialty"
                  placeholder="Ex: Dentista Geral, Protesista, etc."
                  value={professionalData.specialty}
                  onChange={(e) => setProfessionalData({ ...professionalData, specialty: e.target.value })}
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="hire_date">Data de Contratação</Label>
                  <Input
                    id="hire_date"
                    type="date"
                    value={professionalData.hire_date}
                    onChange={(e) => setProfessionalData({ ...professionalData, hire_date: e.target.value })}
                  />
                </div>

<div>
                  <Label htmlFor="salary">Salário</Label>
                  <Input
                    id="salary"
                    type="number"
                    step="0.01"
                    min="0"
                    placeholder="0,00"
                    value={professionalData.salary}
                    onChange={(e) => setProfessionalData({ ...professionalData, salary: e.target.value })}
                  />
                </div>
              </div>

{/* Permissões */}
              <div className="space-y-3">
                <div className="flex items-center space-x-2">
                  <Shield className="h-4 w-4" />
                  <Label className="text-base font-semibold">Permissões de Acesso</Label>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  {Object.entries(permissionLabels).map(([key, label]) => (
                    <div key={key} className="flex items-center space-x-2">
                      <Checkbox
                        id={key}
                        checked={permissions[key as keyof typeof permissions]}
                        onCheckedChange={(checked) => setPermissions((prev) => ({ ...prev, [key]: checked }))}
                      />
                      <Label htmlFor={key} className="text-sm">
                        {label}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

{/* Horários de Trabalho */}
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <Clock className="h-4 w-4" />
                  <Label className="text-base font-semibold">Horários de Trabalho</Label>
                </div>
                <div className="space-y-3">
                  {Object.entries(dayLabels).map(([day, label]) => (
                    <div key={day} className="flex items-center space-x-4 p-3 border rounded-lg">
                      <div className="flex items-center space-x-2 min-w-[120px]">
                        <Checkbox
                          id={`${day}-active`}
                          checked={workSchedule[day as keyof WorkSchedule].active}
                          onCheckedChange={(checked) =>
                            handleScheduleChange(day as keyof WorkSchedule, "active", checked)
                          }
                        />
                        <Label htmlFor={`${day}-active`} className="text-sm font-medium">
                          {label}
                        </Label>
                      </div>
                      {workSchedule[day as keyof WorkSchedule].active && (
                        <div className="flex items-center space-x-2">
                          <Input
                            type="time"
                            value={workSchedule[day as keyof WorkSchedule].start}
                            onChange={(e) => handleScheduleChange(day as keyof WorkSchedule, "start", e.target.value)}
                            className="w-24"
                          />
                          <span className="text-sm text-muted-foreground">às</span>
                          <Input
                            type="time"
                            value={workSchedule[day as keyof WorkSchedule].end}
                            onChange={(e) => handleScheduleChange(day as keyof WorkSchedule, "end", e.target.value)}
                            className="w-24"
                          />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>

<div className="flex justify-end">
                <Button type="button" onClick={handleNext}>
                  Continuar
                </Button>
              </div>
            </div>
          )}

{currentStep === 2 && (
            <div className="space-y-4">
              <div className="flex items-center space-x-2 mb-4">
                <FileText className="h-4 w-4" />
                <h3 className="text-lg font-semibold">Informações Pessoais e Documentos</h3>
              </div>

{/* Dados Pessoais */}
              <div className="space-y-4">
                <h4 className="font-medium">Dados Pessoais</h4>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="birth_date">Data de Nascimento</Label>
                    <Input
                      id="birth_date"
                      type="date"
                      value={personalData.birth_date}
                      onChange={(e) => setPersonalData({ ...personalData, birth_date: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="cpf">CPF</Label>
                    <Input
                      id="cpf"
                      placeholder="000.000.000-00"
                      value={personalData.cpf}
                      onChange={(e) => setPersonalData({ ...personalData, cpf: e.target.value })}
                    />
                  </div>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="rg">RG</Label>
                    <Input
                      id="rg"
                      placeholder="00.000.000-0"
                      value={personalData.rg}
                      onChange={(e) => setPersonalData({ ...personalData, rg: e.target.value })}
                    />
                  </div>
                </div>

<div>
                  <Label htmlFor="address">Endereço</Label>
                  <Textarea
                    id="address"
                    placeholder="Endereço completo..."
                    value={personalData.address}
                    onChange={(e) => setPersonalData({ ...personalData, address: e.target.value })}
                    rows={2}
                  />
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="emergency_contact_name">Contato de Emergência</Label>
                    <Input
                      id="emergency_contact_name"
                      placeholder="Nome do contato"
                      value={personalData.emergency_contact_name}
                      onChange={(e) => setPersonalData({ ...personalData, emergency_contact_name: e.target.value })}
                    />
                  </div>

<div>
                    <Label htmlFor="emergency_contact_phone">Telefone de Emergência</Label>
                    <Input
                      id="emergency_contact_phone"
                      placeholder="(00) 00000-0000"
                      value={personalData.emergency_contact_phone}
                      onChange={(e) => setPersonalData({ ...personalData, emergency_contact_phone: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{/* Upload de Documentos */}
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <FileCheck className="h-4 w-4" />
                  <h4 className="font-medium">Documentos</h4>
                </div>

<div className="grid grid-cols-2 gap-4">
                  {Object.entries(documentLabels).map(([key, label]) => (
                    <div key={key} className="space-y-2">
                      <Label htmlFor={key}>{label}</Label>
                      <div className="flex items-center space-x-2">
                        <Input
                          id={key}
                          type="file"
                          accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                          onChange={(e) => handleFileChange(key, e.target.files?.[0] || null)}
                          className="flex-1"
                        />
                        {documents[key] && (
                          <div className="flex items-center text-green-600">
                            <FileCheck className="h-4 w-4" />
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

<div className="flex justify-between pt-4">
                <Button type="button" variant="outline" onClick={handleBack}>
                  Voltar
                </Button>
                <Button type="submit" disabled={uploading}>
                  {uploading ? (
                    <>
                      <Upload className="mr-2 h-4 w-4 animate-spin" />
                      Salvando...
                    </>
                  ) : (
                    "Adicionar Funcionário"
                  )}
                </Button>
              </div>
            </div>
          )}
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/add-prosthetic-service-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus } from "lucide-react"
import type { Professional, Laboratory, ProstheticService } from "@/lib/prosthetic-database"
import { getDoctors, getAllLaboratories, createLaboratory } from "@/lib/prosthetic-database"

interface AddProstheticServiceDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAddService: (
    service: Omit<ProstheticService, "id" | "created_at" | "updated_at" | "professional" | "laboratory">,
  ) => void
}

export function AddProstheticServiceDialog({ open, onOpenChange, onAddService }: AddProstheticServiceDialogProps) {
  const [doctors, setDoctors] = useState<Professional[]>([])
  const [laboratories, setLaboratories] = useState<Laboratory[]>([])
  const [showNewLabInput, setShowNewLabInput] = useState(false)
  const [newLabName, setNewLabName] = useState("")
  const [formData, setFormData] = useState({
    professional_id: "",
    laboratory_id: "",
    work_description: "",
    observations: "",
    return_deadline: "",
    agreed_value: "",
    payment_date: "",
  })

// Carregar dados iniciais
  useEffect(() => {
    if (open) {
      loadDoctors()
      loadLaboratories()
    }
  }, [open])

const loadDoctors = async () => {
    const data = await getDoctors()
    setDoctors(data)
  }

const loadLaboratories = async () => {
    const data = await getAllLaboratories()
    setLaboratories(data)
  }

const handleCreateNewLab = async () => {
    if (newLabName.trim()) {
      const newLab = await createLaboratory(newLabName.trim())
      if (newLab) {
        setLaboratories([...laboratories, newLab])
        setFormData({ ...formData, laboratory_id: newLab.id })
        setNewLabName("")
        setShowNewLabInput(false)
      }
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

const serviceData = {
      professional_id: formData.professional_id || undefined,
      laboratory_id: formData.laboratory_id || undefined,
      work_description: formData.work_description,
      observations: formData.observations || undefined,
      return_deadline: formData.return_deadline ? new Date(formData.return_deadline).toISOString() : undefined,
      agreed_value: formData.agreed_value ? Number.parseFloat(formData.agreed_value) : undefined,
      payment_date: formData.payment_date || undefined,
      status: "PRE_ENVIO" as const,
    }

onAddService(serviceData)

// Reset form
    setFormData({
      professional_id: "",
      laboratory_id: "",
      work_description: "",
      observations: "",
      return_deadline: "",
      agreed_value: "",
      payment_date: "",
    })
    setShowNewLabInput(false)
    setNewLabName("")
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Adicionar Novo Serviço Protético</DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="professional">Profissional Solicitante</Label>
            <Select
              value={formData.professional_id}
              onValueChange={(value) => setFormData({ ...formData, professional_id: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Selecione o profissional" />
              </SelectTrigger>
              <SelectContent>
                {doctors.map((doctor) => (
                  <SelectItem key={doctor.id} value={doctor.id}>
                    {doctor.name} {doctor.specialty && `- ${doctor.specialty}`}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div>
            <Label htmlFor="laboratory">Laboratório</Label>
            <div className="space-y-2">
              {!showNewLabInput ? (
                <div className="flex space-x-2">
                  <Select
                    value={formData.laboratory_id}
                    onValueChange={(value) => setFormData({ ...formData, laboratory_id: value })}
                  >
                    <SelectTrigger className="flex-1">
                      <SelectValue placeholder="Selecione o laboratório" />
                    </SelectTrigger>
                    <SelectContent>
                      {laboratories.map((laboratory) => (
                        <SelectItem key={laboratory.id} value={laboratory.id}>
                          {laboratory.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Button type="button" variant="outline" size="icon" onClick={() => setShowNewLabInput(true)}>
                    <Plus className="h-4 w-4" />
                  </Button>
                </div>
              ) : (
                <div className="flex space-x-2">
                  <Input
                    placeholder="Nome do novo laboratório"
                    value={newLabName}
                    onChange={(e) => setNewLabName(e.target.value)}
                    className="flex-1"
                  />
                  <Button type="button" onClick={handleCreateNewLab} disabled={!newLabName.trim()}>
                    Criar
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      setShowNewLabInput(false)
                      setNewLabName("")
                    }}
                  >
                    Cancelar
                  </Button>
                </div>
              )}
            </div>
          </div>

<div>
            <Label htmlFor="work_description">Trabalho a ser Executado *</Label>
            <Textarea
              id="work_description"
              placeholder="Descreva o trabalho protético a ser realizado..."
              value={formData.work_description}
              onChange={(e) => setFormData({ ...formData, work_description: e.target.value })}
              required
              rows={3}
            />
          </div>

<div>
            <Label htmlFor="observations">Observações</Label>
            <Textarea
              id="observations"
              placeholder="Observações adicionais (opcional)..."
              value={formData.observations}
              onChange={(e) => setFormData({ ...formData, observations: e.target.value })}
              rows={2}
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="return_deadline">Prazo para Retorno</Label>
              <Input
                id="return_deadline"
                type="datetime-local"
                value={formData.return_deadline}
                onChange={(e) => setFormData({ ...formData, return_deadline: e.target.value })}
              />
            </div>

<div>
              <Label htmlFor="agreed_value">Valor Acordado</Label>
              <Input
                id="agreed_value"
                type="number"
                step="0.01"
                min="0"
                placeholder="0,00"
                value={formData.agreed_value}
                onChange={(e) => setFormData({ ...formData, agreed_value: e.target.value })}
              />
            </div>
          </div>

<div>
            <Label htmlFor="payment_date">Data de Pagamento</Label>
            <Input
              id="payment_date"
              type="date"
              value={formData.payment_date}
              onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
            />
          </div>

<div className="flex justify-end space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit">Adicionar Serviço</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/alert-management-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Label } from "@/components/ui/label"
import { CalendarIcon, AlertTriangle, Info, CheckCircle } from 'lucide-react'
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"

interface AlertManagementDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AlertManagementDialog({ open, onOpenChange }: AlertManagementDialogProps) {
  const [alertType, setAlertType] = useState<"info" | "warning" | "success">("info")
  const [priority, setPriority] = useState<"low" | "medium" | "high">("medium")
  const [title, setTitle] = useState("")
  const [message, setMessage] = useState("")
  const [targetDate, setTargetDate] = useState<Date>()

const alertTypeConfig = {
    info: { icon: Info, color: "bg-blue-100 text-blue-800", label: "Informação" },
    warning: { icon: AlertTriangle, color: "bg-yellow-100 text-yellow-800", label: "Aviso" },
    success: { icon: CheckCircle, color: "bg-green-100 text-green-800", label: "Sucesso" }
  }

const priorityConfig = {
    low: { color: "bg-gray-100 text-gray-800", label: "Baixa" },
    medium: { color: "bg-blue-100 text-blue-800", label: "Média" },
    high: { color: "bg-red-100 text-red-800", label: "Alta" }
  }

const handleSave = () => {
    // Implementar lógica de salvamento
    console.log({ alertType, priority, title, message, targetDate })
    onOpenChange(false)
    // Reset form
    setTitle("")
    setMessage("")
    setTargetDate(undefined)
    setAlertType("info")
    setPriority("medium")
  }

const Icon = alertTypeConfig[alertType].icon

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Gerenciar Avisos</DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Tipo de Alerta */}
          <div className="space-y-2">
            <Label>Tipo de Alerta</Label>
            <Select value={alertType} onValueChange={(value: "info" | "warning" | "success") => setAlertType(value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(alertTypeConfig).map(([key, config]) => (
                  <SelectItem key={key} value={key}>
                    <div className="flex items-center space-x-2">
                      <config.icon className="h-4 w-4" />
                      <span>{config.label}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Prioridade */}
          <div className="space-y-2">
            <Label>Prioridade</Label>
            <Select value={priority} onValueChange={(value: "low" | "medium" | "high") => setPriority(value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(priorityConfig).map(([key, config]) => (
                  <SelectItem key={key} value={key}>
                    <Badge className={config.color} variant="secondary">
                      {config.label}
                    </Badge>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

{/* Título */}
          <div className="space-y-2">
            <Label>Título</Label>
            <Input
              placeholder="Digite o título do aviso"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

{/* Mensagem */}
          <div className="space-y-2">
            <Label>Mensagem</Label>
            <Textarea
              placeholder="Digite a mensagem do aviso"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={3}
            />
          </div>

{/* Data Alvo */}
          <div className="space-y-2">
            <Label>Data Alvo (opcional)</Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" className="w-full justify-start text-left font-normal">
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {targetDate ? format(targetDate, "PPP", { locale: ptBR }) : "Selecionar data"}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="single"
                  selected={targetDate}
                  onSelect={setTargetDate}
                  initialFocus
                />
              </PopoverContent>
            </Popover>
          </div>

{/* Preview */}
          {(title || message) && (
            <div className="space-y-2">
              <Label>Preview</Label>
              <div className={`p-3 rounded-md border ${alertTypeConfig[alertType].color}`}>
                <div className="flex items-start space-x-2">
                  <Icon className="h-5 w-5 mt-0.5" />
                  <div className="flex-1">
                    {title && <h4 className="font-semibold">{title}</h4>}
                    {message && <p className="text-sm mt-1">{message}</p>}
                    {targetDate && (
                      <p className="text-xs mt-2 opacity-75">
                        Data alvo: {format(targetDate, "PPP", { locale: ptBR })}
                      </p>
                    )}
                  </div>
                  <Badge className={priorityConfig[priority].color} variant="secondary">
                    {priorityConfig[priority].label}
                  </Badge>
                </div>
              </div>
            </div>
          )}

{/* Botões */}
          <div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button onClick={handleSave} disabled={!title.trim()}>
              Salvar Aviso
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/bulk-purchase-dialog.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import type { Product } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { ShoppingCart, Package, Search, Plus } from "lucide-react" // Importar Infinity

interface BulkPurchaseDialogProps {
  products: Product[]
  allProducts: Product[] // Todos os produtos para pesquisa
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirmPurchases: (purchases: { productId: string; quantity: number; expirationDate: string | null }[]) => void // Alterado para string | null
}

interface PurchaseItem {
  productId: string
  product: Product
  suggestedQuantity: number
  actualQuantity: number
  selected: boolean
  expirationDate: string // Data de vencimento
  isExpirationDateIndeterminate: boolean // Novo campo para a checkbox
}

export function BulkPurchaseDialog({
  products,
  allProducts,
  open,
  onOpenChange,
  onConfirmPurchases,
}: BulkPurchaseDialogProps) {
  const [purchaseItems, setPurchaseItems] = useState<PurchaseItem[]>([])
  const [searchTerm, setSearchTerm] = useState("")

// Helper para obter uma data de vencimento padrão (ex: 1 ano a partir de agora)
  const getDefaultExpirationDate = () => {
    const date = new Date()
    date.setFullYear(date.getFullYear() + 1)
    return date.toISOString().split("T")[0]
  }

// Inicializar itens quando o dialog abrir
  useEffect(() => {
    if (open) {
      const items = products.map((product) => ({
        productId: product.id,
        product,
        suggestedQuantity: Math.max(0, product.idealQuantity - product.currentStock),
        actualQuantity: Math.max(0, product.idealQuantity - product.currentStock),
        selected: true,
        expirationDate: getDefaultExpirationDate(),
        isExpirationDateIndeterminate: false,
      }))
      setPurchaseItems(items)
    }
  }, [open, products])

const updateQuantity = (productId: string, quantity: number) => {
    setPurchaseItems((items) =>
      items.map((item) => (item.productId === productId ? { ...item, actualQuantity: Math.max(0, quantity) } : item)),
    )
  }

const updateExpirationDate = (productId: string, date: string) => {
    setPurchaseItems((items) =>
      items.map((item) => (item.productId === productId ? { ...item, expirationDate: date } : item)),
    )
  }

const toggleExpirationDateIndeterminate = (productId: string, checked: boolean) => {
    setPurchaseItems((items) =>
      items.map((item) =>
        item.productId === productId
          ? {
              ...item,
              isExpirationDateIndeterminate: checked,
              expirationDate: checked ? "" : item.expirationDate, // Limpa a data se for indeterminada
            }
          : item,
      ),
    )
  }

const toggleSelection = (productId: string) => {
    setPurchaseItems((items) =>
      items.map((item) => (item.productId === productId ? { ...item, selected: !item.selected } : item)),
    )
  }

const selectAll = () => {
    setPurchaseItems((items) => items.map((item) => ({ ...item, selected: true })))
  }

const deselectAll = () => {
    setPurchaseItems((items) => items.map((item) => ({ ...item, selected: false })))
  }

const addProductToList = (product: Product) => {
    const existingItem = purchaseItems.find((item) => item.productId === product.id)
    if (!existingItem) {
      const newItem: PurchaseItem = {
        productId: product.id,
        product,
        suggestedQuantity: Math.max(0, product.idealQuantity - product.currentStock),
        actualQuantity: Math.max(0, product.idealQuantity - product.currentStock),
        selected: true,
        expirationDate: getDefaultExpirationDate(),
        isExpirationDateIndeterminate: false,
      }
      setPurchaseItems([...purchaseItems, newItem])
    }
    setSearchTerm("")
  }

const removeProductFromList = (productId: string) => {
    setPurchaseItems((items) => items.filter((item) => item.productId !== productId))
  }

const handleConfirm = () => {
    const selectedPurchases = purchaseItems
      .filter((item) => item.selected && item.actualQuantity > 0)
      .map((item) => ({
        productId: item.productId,
        quantity: item.actualQuantity,
        expirationDate: item.isExpirationDateIndeterminate ? null : item.expirationDate, // Passa null se for indeterminada
      }))

onConfirmPurchases(selectedPurchases)
    onOpenChange(false)
    // Limpar estados
    setPurchaseItems([])
    setSearchTerm("")
  }

const totalItems = purchaseItems.filter((item) => item.selected).length
  const totalQuantity = purchaseItems
    .filter((item) => item.selected)
    .reduce((sum, item) => sum + item.actualQuantity, 0)
  const totalValue = purchaseItems
    .filter((item) => item.selected)
    .reduce((sum, item) => sum + item.actualQuantity * item.product.lastPurchaseValue, 0)

// Filtrar produtos disponíveis para adicionar
  const availableProducts = allProducts
    .filter(
      (product) =>
        product.name.toLowerCase().includes(searchTerm.toLowerCase()) &&
        !purchaseItems.some((item) => item.productId === product.id),
    )
    .slice(0, 5)

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-7xl max-h-[95vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <ShoppingCart className="h-5 w-5" />
            <span>Movimentação por Lista de Compras</span>
          </DialogTitle>
          <p className="text-sm text-muted-foreground">
            Confirme os produtos que foram comprados e ajuste as quantidades conforme necessário
          </p>
        </DialogHeader>

<div className="space-y-6">
          {/* Seção de Adicionar Produtos */}
          <div className="space-y-3 p-4 border rounded-lg bg-muted/20">
            <div className="flex items-center space-x-2">
              <Plus className="h-4 w-4" />
              <Label className="font-semibold">Adicionar Produto à Lista</Label>
            </div>
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="Pesquisar produto para adicionar..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

{/* Lista de produtos filtrados */}
            {searchTerm && availableProducts.length > 0 && (
              <div className="max-h-40 overflow-y-auto border rounded-md bg-background">
                {availableProducts.map((product) => (
                  <div
                    key={product.id}
                    className="p-3 hover:bg-muted cursor-pointer border-b last:border-b-0 transition-colors"
                    onClick={() => addProductToList(product)}
                  >
                    <div className="flex justify-between items-center">
                      <div>
                        <p className="font-medium">{product.name}</p>
                        <p className="text-sm text-muted-foreground">
                          {product.brand} • {product.productType} • {product.supplier}
                        </p>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Badge variant="outline">Estoque: {product.currentStock}</Badge>
                        <Badge variant="secondary">
                          <Plus className="h-3 w-3 mr-1" />
                          Adicionar
                        </Badge>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

{searchTerm && availableProducts.length === 0 && (
              <p className="text-sm text-muted-foreground text-center py-2">
                Nenhum produto encontrado ou todos já estão na lista
              </p>
            )}
          </div>

{purchaseItems.length === 0 ? (
            <div className="text-center py-8">
              <Package className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <p className="text-muted-foreground">
                Nenhum produto na lista. Use a pesquisa acima para adicionar produtos.
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {/* Controles de seleção */}
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Button variant="outline" size="sm" onClick={selectAll}>
                    Selecionar Todos
                  </Button>
                  <Button variant="outline" size="sm" onClick={deselectAll}>
                    Desmarcar Todos
                  </Button>
                </div>
                <div className="text-sm text-muted-foreground">{totalItems} produtos selecionados</div>
              </div>

{/* Tabela de produtos */}
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">
                        <Checkbox
                          checked={purchaseItems.length > 0 && purchaseItems.every((item) => item.selected)}
                          onCheckedChange={(checked) => {
                            if (checked) selectAll()
                            else deselectAll()
                          }}
                        />
                      </TableHead>
                      <TableHead>Produto</TableHead>
                      <TableHead>Marca</TableHead>
                      <TableHead>Tipo</TableHead>
                      <TableHead>Estoque Atual</TableHead>
                      <TableHead>Qtde Ideal</TableHead>
                      <TableHead>Qtde Sugerida</TableHead>
                      <TableHead>Qtde a Comprar</TableHead>
                      <TableHead>Vencimento Lote</TableHead>
                      <TableHead>Valor Unit.</TableHead>
                      <TableHead>Total</TableHead>
                      <TableHead className="w-[50px]">Ações</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {purchaseItems.map((item) => (
                      <TableRow key={item.productId}>
                        <TableCell>
                          <Checkbox checked={item.selected} onCheckedChange={() => toggleSelection(item.productId)} />
                        </TableCell>
                        <TableCell className="font-medium">{item.product.name}</TableCell>
                        <TableCell>{item.product.brand}</TableCell>
                        <TableCell>
                          <Badge variant="outline">{item.product.productType}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant={
                              item.product.currentStock < item.product.idealQuantity ? "destructive" : "secondary"
                            }
                          >
                            {item.product.currentStock}
                          </Badge>
                        </TableCell>
                        <TableCell>{item.product.idealQuantity}</TableCell>
                        <TableCell className="text-blue-600 font-semibold">{item.suggestedQuantity}</TableCell>
                        <TableCell>
                          <Input
                            type="number"
                            min="0"
                            value={item.actualQuantity}
                            onChange={(e) => updateQuantity(item.productId, Number.parseInt(e.target.value) || 0)}
                            className="w-20"
                            disabled={!item.selected}
                          />
                        </TableCell>
                        <TableCell>
                          <Input
                            type="date"
                            value={item.expirationDate}
                            onChange={(e) => updateExpirationDate(item.productId, e.target.value)}
                            className="leading-[0.8rem] w-[146px] px-2"
                            disabled={!item.selected || item.isExpirationDateIndeterminate}
                            required={!item.isExpirationDateIndeterminate}
                          />
                          <div className="flex items-center space-x-1 mt-1">
                            <Checkbox
                              id={`indeterminate-${item.productId}`}
                              checked={item.isExpirationDateIndeterminate}
                              onCheckedChange={(checked) =>
                                toggleExpirationDateIndeterminate(item.productId, !!checked)
                              }
                              disabled={!item.selected}
                            />
                            <label
                              htmlFor={`indeterminate-${item.productId}`}
                              className="text-xs leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 py-[5px]"
                            >
                              Indeterminado
                            </label>
                          </div>
                        </TableCell>
                        <TableCell>R$ {item.product.lastPurchaseValue.toFixed(2)}</TableCell>
                        <TableCell className="font-semibold">
                          R$ {(item.actualQuantity * item.product.lastPurchaseValue).toFixed(2)}
                        </TableCell>
                        <TableCell>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeProductFromList(item.productId)}
                            className="text-red-600 hover:text-red-700"
                          >
                            ×
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

{/* Resumo */}
              <div className="bg-muted p-4 rounded-lg">
                <div className="grid grid-cols-3 gap-4 text-center">
                  <div>
                    <p className="text-2xl font-bold">{totalItems}</p>
                    <p className="text-sm text-muted-foreground">Produtos</p>
                  </div>
                  <div>
                    <p className="text-2xl font-bold">{totalQuantity}</p>
                    <p className="text-sm text-muted-foreground">Unidades</p>
                  </div>
                  <div>
                    <p className="text-2xl font-bold">R$ {totalValue.toFixed(2)}</p>
                    <p className="text-sm text-muted-foreground">Total Estimado</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={purchaseItems.filter((item) => item.selected && item.actualQuantity > 0).length === 0}
          >
            Confirmar Compras ({totalItems} produtos)
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/confirm-dialog.tsx" isMerged="true"
"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface ConfirmDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description: string
  onConfirm: () => void
}

export function ConfirmDialog({ open, onOpenChange, title, description, onConfirm }: ConfirmDialogProps) {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancelar</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>Confirmar</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
[V0_FILE]typescriptreact:file="components/confirm-hide-professional-dialog.tsx" isMerged="true"
"use client"

interface ConfirmHideProfessionalDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  professionalName: string
  appointmentCount: number
  onConfirm: () => void
}

export function ConfirmHideProfessionalDialog({
  open,
  onOpenChange,
  professionalName,
  appointmentCount,
  onConfirm,
}: ConfirmHideProfessionalDialogProps) {
  const handleConfirm = () => {
    onConfirm()
    onOpenChange(false)
  }

return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Tem certeza que deseja ocultar este profissional?</AlertDialogTitle>
          <AlertDialogDescription>
            O profissional <strong>{professionalName}</strong> possui <strong>{appointmentCount}</strong> agendamento
            {appointmentCount > 1 ? "s" : ""} para hoje. Ao ocultar, você não conseguirá visualizar estes agendamentos
            na agenda.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancelar</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm}>Sim, ocultar profissional</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
[V0_FILE]typescriptreact:file="components/edit-product-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import type { Product } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Check, Search, Plus, Package, Building2, Hash, Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"

interface EditProductDialogProps {
  product: Product
  open: boolean
  onOpenChange: (open: boolean) => void
  onUpdateProduct: (updates: Partial<Product>) => void
}

export function EditProductDialog({ product, open, onOpenChange, onUpdateProduct }: EditProductDialogProps) {
  const [formData, setFormData] = useState({
    name: "",
    brand: "",
    packageType: "",
    productType: "",
    supplier: "",
    currentStock: "",
    idealQuantity: "",
    expirationDate: "",
    lastPurchaseValue: "",
    alternativeNames: "",
    photos: [] as string[],
  })

const [brandOpen, setBrandOpen] = useState(false)
  const [supplierOpen, setSupplierOpen] = useState(false)
  const [productTypeOpen, setProductTypeOpen] = useState(false)
  const [showNewBrandInput, setShowNewBrandInput] = useState(false)
  const [showNewSupplierInput, setShowNewSupplierInput] = useState(false)
  const [showNewProductTypeInput, setShowNewProductTypeInput] = useState(false)
  const [newBrand, setNewBrand] = useState("")
  const [newSupplier, setNewSupplier] = useState("")
  const [newProductTypeName, setNewProductTypeName] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)

const existingBrands = [
    "3M ESPE",
    "Angelus",
    "Biodinâmica",
    "Dentsply",
    "FGM",
    "Ivoclar Vivadent",
    "Kerr",
    "Maquira",
    "Ultradent",
    "Villevie",
  ]

const existingSuppliers = [
    "Dental Cremer",
    "Dental Speed",
    "Dentmed",
    "Henry Schein",
    "Implacil De Bortoli",
    "Labordental",
    "Maquira",
    "Odonto Empresarial",
    "Promedica",
    "Surya Dental",
  ]

const packageTypes = ["Caixa", "Unitário", "Frasco", "Seringa", "Tubo", "Sachê", "Blister", "Outros"]

const [productTypeOptions, setProductTypeOptions] = useState<string[]>([
    "Cirugia",
    "EPI",
    "Dentística",
    "Resina",
    "Endo",
    "Analgesicos e Agulhas",
    "Protese/Pinos e Núcleos",
    "Clareamento",
    "Cimentos",
    "Prevenção",
    "Descartaveis",
    "Embalagens para esterilização",
  ])

useEffect(() => {
    if (product) {
      setFormData({
        name: product.name,
        brand: product.brand,
        packageType: product.packageType,
        productType: product.productType,
        supplier: product.supplier,
        currentStock: product.currentStock?.toString() || "",
        idealQuantity: product.idealQuantity?.toString() || "",
        expirationDate: product.expirationDate,
        lastPurchaseValue: product.lastPurchaseValue?.toString() || "",
        alternativeNames: product.alternativeNames?.join(", ") || "",
        photos: product.photos || [],
      })
    }
  }, [product])

const handleAddNewBrand = () => {
    if (newBrand.trim()) {
      setFormData({ ...formData, brand: newBrand.trim() })
      setNewBrand("")
      setShowNewBrandInput(false)
      setBrandOpen(false)
    }
  }

const handleAddNewSupplier = () => {
    if (newSupplier.trim()) {
      setFormData({ ...formData, supplier: newSupplier.trim() })
      setNewSupplier("")
      setShowNewSupplierInput(false)
      setSupplierOpen(false)
    }
  }

const handleAddNewProductType = () => {
    if (newProductTypeName.trim() && !productTypeOptions.includes(newProductTypeName.trim())) {
      const newProductType = newProductTypeName.trim()
      setProductTypeOptions([...productTypeOptions, newProductType])
      setFormData({ ...formData, productType: newProductType })
      setNewProductTypeName("")
      setShowNewProductTypeInput(false)
      setProductTypeOpen(false)
    }
  }

const handleNumericChange = (field: string, value: string) => {
    if (value === "" || (!isNaN(Number(value)) && Number(value) >= 0)) {
      setFormData({ ...formData, [field]: value })
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

const updates: Partial<Product> = {
      name: formData.name,
      brand: formData.brand,
      packageType: formData.packageType,
      productType: formData.productType,
      supplier: formData.supplier,
      currentStock: Number(formData.currentStock) || 0,
      idealQuantity: Number(formData.idealQuantity) || 0,
      expirationDate: formData.expirationDate,
      lastPurchaseValue: Number(formData.lastPurchaseValue) || 0,
      alternativeNames: formData.alternativeNames
        ? formData.alternativeNames
            .split(",")
            .map((name) => name.trim())
            .filter((name) => name)
        : [],
      photos: formData.photos || [],
    }

await onUpdateProduct(updates)
    setIsSubmitting(false)
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
            Editar Produto
          </DialogTitle>
        </DialogHeader>

<div className="space-y-2">
                <Label className="text-sm font-medium text-gray-700 dark:text-gray-300">Marca</Label>
                <div className="space-y-2">
                  {!showNewBrandInput ? (
                    <div className="flex space-x-2">
                      <Popover open={brandOpen} onOpenChange={setBrandOpen}>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            role="combobox"
                            aria-expanded={brandOpen}
                            className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                          >
                            {formData.brand || "Selecione a marca..."}
                            <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-full p-0">
                          <Command>
                            <CommandInput placeholder="Pesquisar marca..." />
                            <CommandList>
                              <CommandEmpty>
                                <div className="p-4 text-center">
                                  <p className="text-sm text-muted-foreground mb-2">Nenhuma marca encontrada.</p>
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      setShowNewBrandInput(true)
                                      setBrandOpen(false)
                                    }}
                                  >
                                    <Plus className="h-4 w-4 mr-1" />
                                    Adicionar Nova Marca
                                  </Button>
                                </div>
                              </CommandEmpty>
                              <CommandGroup>
                                {existingBrands.map((brand) => (
                                  <CommandItem
                                    key={brand}
                                    value={brand}
                                    onSelect={() => {
                                      setFormData({ ...formData, brand })
                                      setBrandOpen(false)
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        formData.brand === brand ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    {brand}
                                  </CommandItem>
                                ))}
                              </CommandGroup>
                            </CommandList>
                          </Command>
                        </PopoverContent>
                      </Popover>
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        onClick={() => setShowNewBrandInput(true)}
                        className="bg-green-50 hover:bg-green-100 border-green-300 text-green-700"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  ) : (
                    <div className="flex space-x-2">
                      <Input
                        placeholder="Nome da nova marca"
                        value={newBrand}
                        onChange={(e) => setNewBrand(e.target.value)}
                        className="flex-1 bg-white/80 dark:bg-gray-800/80"
                        onKeyDown={(e) => e.key === "Enter" && handleAddNewBrand()}
                      />
                      <Button type="button" onClick={handleAddNewBrand} className="bg-green-600 hover:bg-green-700">
                        Criar
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => {
                          setShowNewBrandInput(false)
                          setNewBrand("")
                        }}
                      >
                        Cancelar
                      </Button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 p-6 rounded-xl border border-purple-200/50 dark:border-purple-800/50">
            <h3 className="text-lg font-semibold text-purple-900 dark:text-purple-100 mb-4">Categorização</h3>
            <div className="grid grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="packageType" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Tipo de Embalagem
                </Label>
                <Select
                  value={formData.packageType}
                  onValueChange={(value) => setFormData({ ...formData, packageType: value })}
                >
                  <SelectTrigger className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600">
                    <SelectValue placeholder="Selecione o tipo de embalagem" />
                  </SelectTrigger>
                  <SelectContent>
                    {packageTypes.map((type) => (
                      <SelectItem key={type} value={type}>
                        {type}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="productType" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Tipo de Produto
                </Label>
                <div className="space-y-2">
                  {!showNewProductTypeInput ? (
                    <div className="flex space-x-2">
                      <Popover open={productTypeOpen} onOpenChange={setProductTypeOpen}>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            role="combobox"
                            aria-expanded={productTypeOpen}
                            className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                          >
                            {formData.productType || "Selecione o tipo..."}
                            <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-full p-0">
                          <Command>
                            <CommandInput placeholder="Pesquisar tipo..." />
                            <CommandList>
                              <CommandEmpty>
                                <div className="p-4 text-center">
                                  <p className="text-sm text-muted-foreground mb-2">Nenhum tipo encontrado.</p>
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      setShowNewProductTypeInput(true)
                                      setProductTypeOpen(false)
                                    }}
                                  >
                                    <Plus className="h-4 w-4 mr-1" />
                                    Adicionar Novo Tipo
                                  </Button>
                                </div>
                              </CommandEmpty>
                              <CommandGroup>
                                {productTypeOptions.map((type) => (
                                  <CommandItem
                                    key={type}
                                    value={type}
                                    onSelect={() => {
                                      setFormData({ ...formData, productType: type })
                                      setProductTypeOpen(false)
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        formData.productType === type ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    {type}
                                  </CommandItem>
                                ))}
                              </CommandGroup>
                            </CommandList>
                          </Command>
                        </PopoverContent>
                      </Popover>
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        onClick={() => setShowNewProductTypeInput(true)}
                        className="bg-purple-50 hover:bg-purple-100 border-purple-300 text-purple-700"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  ) : (
                    <div className="flex space-x-2">
                      <Input
                        placeholder="Nome do novo tipo"
                        value={newProductTypeName}
                        onChange={(e) => setNewProductTypeName(e.target.value)}
                        className="flex-1 bg-white/80 dark:bg-gray-800/80"
                        onKeyDown={(e) => e.key === "Enter" && handleAddNewProductType()}
                      />
                      <Button
                        type="button"
                        onClick={handleAddNewProductType}
                        className="bg-purple-600 hover:bg-purple-700"
                      >
                        Criar
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => {
                          setShowNewProductTypeInput(false)
                          setNewProductTypeName("")
                        }}
                      >
                        Cancelar
                      </Button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>

<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 p-6 rounded-xl border border-green-200/50 dark:border-green-800/50">
            <h3 className="text-lg font-semibold text-green-900 dark:text-green-100 mb-4 flex items-center">
              <Building2 className="mr-2 h-5 w-5" />
              Fornecedor
            </h3>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700 dark:text-gray-300">Fornecedor</Label>
              <div className="space-y-2">
                {!showNewSupplierInput ? (
                  <div className="flex space-x-2">
                    <Popover open={supplierOpen} onOpenChange={setSupplierOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={supplierOpen}
                          className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                        >
                          {formData.supplier || "Selecione um fornecedor..."}
                          <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="Pesquisar fornecedor..." />
                          <CommandList>
                            <CommandEmpty>
                              <div className="p-4 text-center">
                                <p className="text-sm text-muted-foreground mb-2">Nenhum fornecedor encontrado.</p>
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  onClick={() => {
                                    setShowNewSupplierInput(true)
                                    setSupplierOpen(false)
                                  }}
                                >
                                  <Plus className="h-4 w-4 mr-1" />
                                  Adicionar Novo Fornecedor
                                </Button>
                              </div>
                            </CommandEmpty>
                            <CommandGroup>
                              {existingSuppliers.map((supplier) => (
                                <CommandItem
                                  key={supplier}
                                  value={supplier}
                                  onSelect={() => {
                                    setFormData({ ...formData, supplier })
                                    setSupplierOpen(false)
                                  }}
                                >
                                  <Check
                                    className={cn(
                                      "mr-2 h-4 w-4",
                                      formData.supplier === supplier ? "opacity-100" : "opacity-0",
                                    )}
                                  />
                                  {supplier}
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      onClick={() => setShowNewSupplierInput(true)}
                      className="bg-green-50 hover:bg-green-100 border-green-300 text-green-700"
                    >
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex space-x-2">
                    <Input
                      placeholder="Nome do novo fornecedor"
                      value={newSupplier}
                      onChange={(e) => setNewSupplier(e.target.value)}
                      className="flex-1 bg-white/80 dark:bg-gray-800/80"
                      onKeyDown={(e) => e.key === "Enter" && handleAddNewSupplier()}
                    />
                    <Button type="button" onClick={handleAddNewSupplier} className="bg-green-600 hover:bg-green-700">
                      Criar
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => {
                        setShowNewSupplierInput(false)
                        setNewSupplier("")
                      }}
                    >
                      Cancelar
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </div>

<div className="space-y-2">
                <Label htmlFor="idealQuantity" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Quantidade Ideal
                </Label>
                <Input
                  id="idealQuantity"
                  type="number"
                  min="0"
                  value={formData.idealQuantity}
                  onChange={(e) => handleNumericChange("idealQuantity", e.target.value)}
                  className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                  placeholder="0"
                  required
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-6 mt-6">
              <div className="space-y-2">
                <Label htmlFor="lastPurchaseValue" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Preço Unitário
                </Label>
                <Input
                  id="lastPurchaseValue"
                  type="number"
                  step="0.01"
                  min="0"
                  value={formData.lastPurchaseValue}
                  onChange={(e) => handleNumericChange("lastPurchaseValue", e.target.value)}
                  className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                  placeholder="0.00"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="expirationDate" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Data de Vencimento
                </Label>
                <Input
                  id="expirationDate"
                  type="date"
                  value={formData.expirationDate}
                  onChange={(e) => setFormData({ ...formData, expirationDate: e.target.value })}
                  className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                />
              </div>
            </div>
          </div>

<div className="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-950/20 dark:to-blue-950/20 p-6 rounded-xl border border-indigo-200/50 dark:border-indigo-800/50">
            <h3 className="text-lg font-semibold text-indigo-900 dark:text-indigo-100 mb-4">Informações Adicionais</h3>
            <div className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="alternativeNames" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Nomes Alternativos
                </Label>
                <Input
                  id="alternativeNames"
                  value={formData.alternativeNames}
                  onChange={(e) => setFormData({ ...formData, alternativeNames: e.target.value })}
                  className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                  placeholder="Digite nomes alternativos separados por vírgula"
                />
                <p className="text-xs text-muted-foreground">
                  Exemplo: Nome comercial, Nome genérico, Apelido do produto
                </p>
              </div>

<div className="space-y-2">
                <Label htmlFor="photos" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Fotos do Produto (Opcional)
                </Label>
                <Input
                  id="photos"
                  type="file"
                  multiple
                  accept="image/*"
                  onChange={(e) => {
                    const files = Array.from(e.target.files || [])
                    const photoNames = files.map((file) => file.name)
                    setFormData({ ...formData, photos: [...formData.photos, ...photoNames] })
                  }}
                  className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                />
                <p className="text-xs text-muted-foreground">
                  Selecione uma ou mais fotos do produto (formatos: JPG, PNG, GIF)
                </p>
                {formData.photos.length > 0 && (
                  <div className="flex flex-wrap gap-2 mt-2">
                    {formData.photos.map((photo, index) => (
                      <Badge key={index} variant="secondary" className="text-xs">
                        {photo}
                        <button
                          type="button"
                          onClick={() => {
                            const newPhotos = formData.photos.filter((_, i) => i !== index)
                            setFormData({ ...formData, photos: newPhotos })
                          }}
                          className="ml-1 text-red-500 hover:text-red-700"
                        >
                          ×
                        </button>
                      </Badge>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>

<DialogFooter className="bg-gray-50 dark:bg-gray-800/50 p-6 rounded-xl">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
              Cancelar
            </Button>
            <Button
              type="submit"
              disabled={isSubmitting}
              className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Salvando...
                </>
              ) : (
                "Salvar Alterações"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/finance-dialogs.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { DollarSign, FileText, CreditCard, Loader2 } from "lucide-react"

interface NewBoletoDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onCreateBoleto?: (boletoData: any) => void
}

export function NewBoletoDialog({ open, onOpenChange, onCreateBoleto }: NewBoletoDialogProps) {
  const [formData, setFormData] = useState({
    cliente: "",
    valor: "",
    vencimento: "",
    descricao: "",
    categoria: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      if (onCreateBoleto) {
        await onCreateBoleto({
          ...formData,
          valor: Number.parseFloat(formData.valor),
          tipo: "boleto",
          status: "pendente",
          dataEmissao: new Date().toISOString().split("T")[0],
        })
      }

// Reset form
      setFormData({
        cliente: "",
        valor: "",
        vencimento: "",
        descricao: "",
        categoria: "",
      })

onOpenChange(false)
    } catch (error) {
      console.error("Erro ao criar boleto:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5 text-blue-600" />
            Novo Boleto
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="cliente">Cliente</Label>
            <Input
              id="cliente"
              value={formData.cliente}
              onChange={(e) => setFormData({ ...formData, cliente: e.target.value })}
              placeholder="Nome do cliente"
              required
            />
          </div>

<div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="valor">Valor (R$)</Label>
              <Input
                id="valor"
                type="number"
                step="0.01"
                min="0"
                value={formData.valor}
                onChange={(e) => setFormData({ ...formData, valor: e.target.value })}
                placeholder="0,00"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="vencimento">Vencimento</Label>
              <Input
                id="vencimento"
                type="date"
                value={formData.vencimento}
                onChange={(e) => setFormData({ ...formData, vencimento: e.target.value })}
                required
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="categoria">Categoria</Label>
            <Select
              value={formData.categoria}
              onValueChange={(value) => setFormData({ ...formData, categoria: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Selecione uma categoria" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="consulta">Consulta</SelectItem>
                <SelectItem value="tratamento">Tratamento</SelectItem>
                <SelectItem value="procedimento">Procedimento</SelectItem>
                <SelectItem value="manutencao">Manutenção</SelectItem>
                <SelectItem value="outros">Outros</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="descricao">Descrição</Label>
            <Textarea
              id="descricao"
              value={formData.descricao}
              onChange={(e) => setFormData({ ...formData, descricao: e.target.value })}
              placeholder="Descrição do serviço..."
              rows={3}
            />
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Criando...
                </>
              ) : (
                "Criar Boleto"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

interface NewContaDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onCreateConta?: (contaData: any) => void
}

export function NewContaDialog({ open, onOpenChange, onCreateConta }: NewContaDialogProps) {
  const [formData, setFormData] = useState({
    fornecedor: "",
    valor: "",
    vencimento: "",
    descricao: "",
    categoria: "",
    tipo: "despesa",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      if (onCreateConta) {
        await onCreateConta({
          ...formData,
          valor: Number.parseFloat(formData.valor),
          status: "pendente",
          dataEmissao: new Date().toISOString().split("T")[0],
        })
      }

// Reset form
      setFormData({
        fornecedor: "",
        valor: "",
        vencimento: "",
        descricao: "",
        categoria: "",
        tipo: "despesa",
      })

onOpenChange(false)
    } catch (error) {
      console.error("Erro ao criar conta:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <DollarSign className="h-5 w-5 text-red-600" />
            Nova Conta a Pagar
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="tipo">Tipo</Label>
            <Select value={formData.tipo} onValueChange={(value) => setFormData({ ...formData, tipo: value })}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="despesa">Despesa</SelectItem>
                <SelectItem value="investimento">Investimento</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="fornecedor">Fornecedor</Label>
            <Input
              id="fornecedor"
              value={formData.fornecedor}
              onChange={(e) => setFormData({ ...formData, fornecedor: e.target.value })}
              placeholder="Nome do fornecedor"
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="categoria">Categoria</Label>
            <Select
              value={formData.categoria}
              onValueChange={(value) => setFormData({ ...formData, categoria: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Selecione uma categoria" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="aluguel">Aluguel</SelectItem>
                <SelectItem value="energia">Energia Elétrica</SelectItem>
                <SelectItem value="agua">Água</SelectItem>
                <SelectItem value="telefone">Telefone/Internet</SelectItem>
                <SelectItem value="material">Material Odontológico</SelectItem>
                <SelectItem value="equipamento">Equipamentos</SelectItem>
                <SelectItem value="marketing">Marketing</SelectItem>
                <SelectItem value="outros">Outros</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="descricao">Descrição</Label>
            <Textarea
              id="descricao"
              value={formData.descricao}
              onChange={(e) => setFormData({ ...formData, descricao: e.target.value })}
              placeholder="Descrição da despesa..."
              rows={3}
            />
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Criando...
                </>
              ) : (
                "Criar Conta"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

interface PaymentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  item?: any
  onConfirmPayment?: (paymentData: any) => void
}

export function PaymentDialog({ open, onOpenChange, item, onConfirmPayment }: PaymentDialogProps) {
  const [formData, setFormData] = useState({
    dataPagamento: new Date().toISOString().split("T")[0],
    valorPago: "",
    metodoPagamento: "",
    observacoes: "",
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      if (onConfirmPayment && item) {
        await onConfirmPayment({
          ...formData,
          valorPago: Number.parseFloat(formData.valorPago),
          itemId: item.id,
          valorOriginal: item.valor,
        })
      }

// Reset form
      setFormData({
        dataPagamento: new Date().toISOString().split("T")[0],
        valorPago: "",
        metodoPagamento: "",
        observacoes: "",
      })

onOpenChange(false)
    } catch (error) {
      console.error("Erro ao registrar pagamento:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <CreditCard className="h-5 w-5 text-green-600" />
            Registrar Pagamento
          </DialogTitle>
        </DialogHeader>

{item && (
          <div className="bg-muted/50 p-4 rounded-lg mb-4">
            <div className="flex justify-between items-center mb-2">
              <span className="font-medium">{item.cliente || item.fornecedor}</span>
              <span className="text-lg font-bold">R$ {item.valor?.toFixed(2)}</span>
            </div>
            <p className="text-sm text-muted-foreground">{item.descricao}</p>
            <p className="text-sm text-muted-foreground">
              Vencimento: {new Date(item.vencimento).toLocaleDateString("pt-BR")}
            </p>
          </div>
        )}

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="dataPagamento">Data do Pagamento</Label>
              <Input
                id="dataPagamento"
                type="date"
                value={formData.dataPagamento}
                onChange={(e) => setFormData({ ...formData, dataPagamento: e.target.value })}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="valorPago">Valor Pago (R$)</Label>
              <Input
                id="valorPago"
                type="number"
                step="0.01"
                min="0"
                value={formData.valorPago}
                onChange={(e) => setFormData({ ...formData, valorPago: e.target.value })}
                placeholder={item?.valor?.toFixed(2) || "0,00"}
                required
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="metodoPagamento">Método de Pagamento</Label>
            <Select
              value={formData.metodoPagamento}
              onValueChange={(value) => setFormData({ ...formData, metodoPagamento: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Selecione o método" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="dinheiro">Dinheiro</SelectItem>
                <SelectItem value="cartao_credito">Cartão de Crédito</SelectItem>
                <SelectItem value="cartao_debito">Cartão de Débito</SelectItem>
                <SelectItem value="pix">PIX</SelectItem>
                <SelectItem value="transferencia">Transferência Bancária</SelectItem>
                <SelectItem value="boleto">Boleto</SelectItem>
                <SelectItem value="cheque">Cheque</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="observacoes">Observações</Label>
            <Textarea
              id="observacoes"
              value={formData.observacoes}
              onChange={(e) => setFormData({ ...formData, observacoes: e.target.value })}
              placeholder="Observações sobre o pagamento..."
              rows={3}
            />
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Processando...
                </>
              ) : (
                "Confirmar Pagamento"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/finance-dialogs.tsxfinance-dialogs.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"

interface NewBoletoDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function NewBoletoDialog({ open, onOpenChange }: NewBoletoDialogProps) {
  const [formData, setFormData] = useState({
    beneficiary: "",
    value: "",
    dueDate: "",
    description: "",
  })
  const { toast } = useToast()

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: "Boleto criado",
      description: "O boleto foi criado com sucesso",
    })
    onOpenChange(false)
    setFormData({ beneficiary: "", value: "", dueDate: "", description: "" })
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Novo Boleto</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="beneficiary">Beneficiário</Label>
            <Input
              id="beneficiary"
              value={formData.beneficiary}
              onChange={(e) => setFormData({ ...formData, beneficiary: e.target.value })}
              required
            />
          </div>
          <div>
            <Label htmlFor="value">Valor</Label>
            <Input
              id="value"
              type="number"
              step="0.01"
              value={formData.value}
              onChange={(e) => setFormData({ ...formData, value: e.target.value })}
              required
            />
          </div>
          <div>
            <Label htmlFor="dueDate">Data de Vencimento</Label>
            <Input
              id="dueDate"
              type="date"
              value={formData.dueDate}
              onChange={(e) => setFormData({ ...formData, dueDate: e.target.value })}
              required
            />
          </div>
          <div>
            <Label htmlFor="description">Descrição</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit">Criar Boleto</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}

interface NewContaDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  type: "pagar" | "receber"
}

export function NewContaDialog({ open, onOpenChange, type }: NewContaDialogProps) {
  const [formData, setFormData] = useState({
    description: "",
    value: "",
    dueDate: "",
    supplier: "",
    patient: "",
    procedure: "",
  })
  const { toast } = useToast()

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: `Conta ${type === "pagar" ? "a pagar" : "a receber"} criada`,
      description: "A conta foi criada com sucesso",
    })
    onOpenChange(false)
    setFormData({ description: "", value: "", dueDate: "", supplier: "", patient: "", procedure: "" })
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Nova Conta {type === "pagar" ? "a Pagar" : "a Receber"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="description">Descrição</Label>
            <Input
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              required
            />
          </div>
          {type === "pagar" ? (
            <div>
              <Label htmlFor="supplier">Fornecedor</Label>
              <Input
                id="supplier"
                value={formData.supplier}
                onChange={(e) => setFormData({ ...formData, supplier: e.target.value })}
                required
              />
            </div>
          ) : (
            <>
              <div>
                <Label htmlFor="patient">Paciente</Label>
                <Input
                  id="patient"
                  value={formData.patient}
                  onChange={(e) => setFormData({ ...formData, patient: e.target.value })}
                  required
                />
              </div>
              <div>
                <Label htmlFor="procedure">Procedimento</Label>
                <Input
                  id="procedure"
                  value={formData.procedure}
                  onChange={(e) => setFormData({ ...formData, procedure: e.target.value })}
                  required
                />
              </div>
            </>
          )}
          <div>
            <Label htmlFor="value">Valor</Label>
            <Input
              id="value"
              type="number"
              step="0.01"
              value={formData.value}
              onChange={(e) => setFormData({ ...formData, value: e.target.value })}
              required
            />
          </div>
          <div>
            <Label htmlFor="dueDate">Data de Vencimento</Label>
            <Input
              id="dueDate"
              type="date"
              value={formData.dueDate}
              onChange={(e) => setFormData({ ...formData, dueDate: e.target.value })}
              required
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit">Criar Conta</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}

interface PaymentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  type: "pay" | "receive"
  description: string
  value: string
}

export function PaymentDialog({ open, onOpenChange, type, description, value }: PaymentDialogProps) {
  const [paymentMethod, setPaymentMethod] = useState("")
  const { toast } = useToast()

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    toast({
      title: type === "pay" ? "Pagamento realizado" : "Recebimento registrado",
      description: `${description} - ${value}`,
    })
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{type === "pay" ? "Realizar Pagamento" : "Registrar Recebimento"}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label>Descrição</Label>
            <p className="text-sm text-muted-foreground">{description}</p>
          </div>
          <div>
            <Label>Valor</Label>
            <p className="text-sm font-medium">{value}</p>
          </div>
          <div>
            <Label htmlFor="paymentMethod">Forma de Pagamento</Label>
            <Select value={paymentMethod} onValueChange={setPaymentMethod} required>
              <SelectTrigger>
                <SelectValue placeholder="Selecione a forma de pagamento" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="dinheiro">Dinheiro</SelectItem>
                <SelectItem value="cartao-debito">Cartão de Débito</SelectItem>
                <SelectItem value="cartao-credito">Cartão de Crédito</SelectItem>
                <SelectItem value="pix">PIX</SelectItem>
                <SelectItem value="transferencia">Transferência</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button type="submit">{type === "pay" ? "Pagar" : "Receber"}</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/mini-calendar.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ChevronLeft, ChevronRight, Calendar } from "lucide-react"
import {
  format,
  addMonths,
  subMonths,
  startOfMonth,
  endOfMonth,
  eachDayOfInterval,
  getDay,
  isSameDay,
  isSameMonth,
} from "date-fns"
import { ptBR } from "date-fns/locale"

interface MiniCalendarProps {
  currentDate: Date
  onDateSelect: (date: Date) => void
}

export function MiniCalendar({ currentDate, onDateSelect }: MiniCalendarProps) {
  const [viewDate, setViewDate] = useState(currentDate)

const monthStart = startOfMonth(viewDate)
  const monthEnd = endOfMonth(viewDate)
  const calendarDays = eachDayOfInterval({ start: monthStart, end: monthEnd })

// Adicionar dias do mês anterior para completar a primeira semana
  const startDay = getDay(monthStart)
  const previousMonthDays = []
  for (let i = startDay - 1; i >= 0; i--) {
    const day = new Date(monthStart)
    day.setDate(day.getDate() - (i + 1))
    previousMonthDays.push(day)
  }

// Adicionar dias do próximo mês para completar a última semana
  const endDay = getDay(monthEnd)
  const nextMonthDays = []
  for (let i = 1; i <= 6 - endDay; i++) {
    const day = new Date(monthEnd)
    day.setDate(day.getDate() + i)
    nextMonthDays.push(day)
  }

const allDays = [...previousMonthDays, ...calendarDays, ...nextMonthDays]

const navigateMonth = (direction: "prev" | "next") => {
    setViewDate(direction === "next" ? addMonths(viewDate, 1) : subMonths(viewDate, 1))
  }

return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-sm flex items-center justify-between">
          <div className="flex items-center">
            <Calendar className="mr-2 h-4 w-4" />
            {format(viewDate, "MMMM yyyy", { locale: ptBR })}
          </div>
          <div className="flex items-center space-x-1">
            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => navigateMonth("prev")}>
              <ChevronLeft className="h-3 w-3" />
            </Button>
            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => navigateMonth("next")}>
              <ChevronRight className="h-3 w-3" />
            </Button>
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-7 gap-1 text-center text-xs mb-2">
          {["D", "S", "T", "Q", "Q", "S", "S"].map((day, i) => (
            <div key={i} className="p-1 font-medium text-muted-foreground">
              {day}
            </div>
          ))}
        </div>
        <div className="grid grid-cols-7 gap-1">
          {allDays.map((day, i) => (
            <button
              key={i}
              onClick={() => onDateSelect(day)}
              className={`
                p-1 text-xs rounded hover:bg-accent transition-colors
                ${!isSameMonth(day, viewDate) ? "text-muted-foreground opacity-50" : ""}
                ${isSameDay(day, currentDate) ? "bg-primary text-primary-foreground font-bold" : ""}
                ${isSameDay(day, new Date()) && !isSameDay(day, currentDate) ? "bg-accent" : ""}
              `}
            >
              {format(day, "d")}
            </button>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/movement-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import type { Product } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { ArrowUp, ArrowDown, User, FileText } from "lucide-react"

interface MovementDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  product: Product | null
  type: "entry" | "exit"
  onConfirm: (product: Product, type: "entry" | "exit", quantity: number, user: string, notes: string) => void
}

export function MovementDialog({ open, onOpenChange, product, type, onConfirm }: MovementDialogProps) {
  const [quantity, setQuantity] = useState(1)
  const [user, setUser] = useState("")
  const [notes, setNotes] = useState("")

if (!product) return null

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (quantity > 0 && user.trim()) {
      onConfirm(product, type, quantity, user.trim(), notes.trim())
      // Reset form
      setQuantity(1)
      setUser("")
      setNotes("")
      onOpenChange(false)
    }
  }

const isExit = type === "exit"
  const maxQuantity = isExit ? product.currentStock : 999

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            {isExit ? <ArrowDown className="h-5 w-5 text-red-600" /> : <ArrowUp className="h-5 w-5 text-green-600" />}
            <span>{isExit ? "Saída" : "Entrada"} de Estoque</span>
          </DialogTitle>
        </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <p className="text-sm text-muted-foreground">
              <strong>Produto:</strong> {product.name}
            </p>
            <p className="text-sm text-muted-foreground">
              <strong>Estoque atual:</strong> {product.currentStock} unidades
            </p>
          </div>

<div className="space-y-2">
            <Label htmlFor="quantity">Quantidade para {isExit ? "saída" : "entrada"}</Label>
            <Input
              id="quantity"
              type="number"
              min="1"
              max={maxQuantity}
              value={quantity}
              onChange={(e) => setQuantity(Number.parseInt(e.target.value) || 1)}
              required
            />
            {isExit && (
              <p className="text-xs text-muted-foreground">Máximo disponível: {product.currentStock} unidades</p>
            )}
          </div>

<div className="space-y-2">
            <Label htmlFor="user" className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <span>Responsável pela movimentação</span>
            </Label>
            <Input
              id="user"
              type="text"
              placeholder="Nome de quem fez a movimentação"
              value={user}
              onChange={(e) => setUser(e.target.value)}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="notes" className="flex items-center space-x-2">
              <FileText className="h-4 w-4" />
              <span>Justificativa/Observações</span>
            </Label>
            <Textarea
              id="notes"
              placeholder="Descreva o motivo da movimentação..."
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={3}
            />
          </div>

<div className="bg-muted p-3 rounded-lg">
            <p className="text-sm">
              <strong>Estoque após movimentação:</strong>{" "}
              <span className={isExit ? "text-red-600" : "text-green-600"}>
                {isExit ? Math.max(0, product.currentStock - quantity) : product.currentStock + quantity} unidades
              </span>
            </p>
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button
              type="submit"
              variant={isExit ? "destructive" : "default"}
              disabled={quantity <= 0 || (isExit && quantity > product.currentStock) || !user.trim()}
            >
              Confirmar {isExit ? "Saída" : "Entrada"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/product-details-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type { Product, ProductLot } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Calendar, Building2, DollarSign, AlertTriangle, Package, Infinity } from "lucide-react" // Importar Infinity

interface ProductDetailsDialogProps {
  product: Product
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function ProductDetailsDialog({ product, open, onOpenChange }: ProductDetailsDialogProps) {
  const calculateStockValue = (product: Product) => {
    return (product.currentStock * product.lastPurchaseValue).toFixed(2)
  }

const isLowStock = (product: Product) => {
    return product.currentStock <= product.idealQuantity * 0.3
  }

const isExpiringSoon = (expirationDate: string) => {
    const expDate = new Date(expirationDate)
    const today = new Date()
    const diffTime = expDate.getTime() - today.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays <= 90 && diffDays > 0
  }

const isExpired = (expirationDate: string) => {
    const expDate = new Date(expirationDate)
    const today = new Date()
    return expDate < today
  }

const getProductTypeColor = (type: string) => {
    switch (type) {
      case "EPI":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
      case "Dentística":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
      case "Resina":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300"
      case "Endo":
        return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300"
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <span>Detalhes do Produto</span>
            <div className="flex space-x-2">
              <Badge className={getProductTypeColor(product.productType)}>{product.productType}</Badge>
              <Badge variant="outline">{product.packageType}</Badge>
            </div>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          {/* Informações Básicas */}
          <div>
            <h3 className="text-lg font-semibold mb-3">Informações Básicas</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-muted-foreground">Nome do Produto</p>
                <p className="font-medium">{product.name}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Marca</p>
                <p className="font-medium">{product.brand}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Tipo de Embalagem</p>
                <p className="font-medium">{product.packageType}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Fornecedor</p>
                <p className="font-medium flex items-center">
                  <Building2 className="h-4 w-4 mr-2" />
                  {product.supplier}
                </p>
              </div>
            </div>
          </div>

{product.alternativeNames && product.alternativeNames.length > 0 && (
            <>
              <Separator />
              <div>
                <h3 className="text-lg font-semibold mb-3">Nomes Alternativos</h3>
                <div className="flex flex-wrap gap-2">
                  {product.alternativeNames.map((name, index) => (
                    <Badge key={index} variant="secondary">
                      {name}
                    </Badge>
                  ))}
                </div>
              </div>
            </>
          )}

{product.photos && product.photos.length > 0 && (
            <>
              <Separator />
              <div>
                <h3 className="text-lg font-semibold mb-3">Fotos do Produto</h3>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                  {product.photos.map((photo, index) => (
                    <div key={index} className="aspect-square bg-muted rounded-lg flex items-center justify-center">
                      <div className="text-center p-4">
                        <Package className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
                        <p className="text-xs text-muted-foreground truncate">{photo}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </>
          )}

{/* Estoque */}
          <div>
            <h3 className="text-lg font-semibold mb-3">Controle de Estoque</h3>
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center p-4 bg-muted rounded-lg">
                <p className="text-2xl font-bold flex items-center justify-center">
                  {product.currentStock}
                  {isLowStock(product) && <AlertTriangle className="h-5 w-5 text-red-600 ml-2" />}
                </p>
                <p className="text-sm text-muted-foreground">Estoque Atual</p>
                {isLowStock(product) && (
                  <Badge variant="destructive" className="mt-1">
                    Baixo Estoque
                  </Badge>
                )}
              </div>
              <div className="text-center p-4 bg-muted rounded-lg">
                <p className="text-2xl font-bold">{product.idealQuantity}</p>
                <p className="text-sm text-muted-foreground">Quantidade Ideal</p>
              </div>
              <div className="text-center p-4 bg-muted rounded-lg">
                <p className="text-2xl font-bold flex items-center justify-center">
                  <DollarSign className="h-5 w-5 mr-1" />
                  {calculateStockValue(product)}
                </p>
                <p className="text-sm text-muted-foreground">Valor em Estoque</p>
              </div>
            </div>
          </div>

{/* Informações Financeiras */}
          <div>
            <h3 className="text-lg font-semibold mb-3">Informações Financeiras</h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-muted-foreground">Valor Unitário</p>
                <p className="font-medium text-lg">R$ {product.lastPurchaseValue.toFixed(2)}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Quantidade Última Compra</p>
                <p className="font-medium">{product.lastPurchaseQuantity} unidades</p>
              </div>
            </div>
          </div>

{/* Lotes e Vencimentos */}
          <div>
            <h3 className="text-lg font-semibold mb-3 flex items-center space-x-2">
              <Package className="h-5 w-5" />
              <span>Lotes e Vencimentos</span>
            </h3>
            {product.lots.length === 0 ? (
              <p className="text-sm text-muted-foreground">Nenhum lote registrado para este produto.</p>
            ) : (
              <div className="space-y-2">
                {product.lots.map((lot: ProductLot) => (
                  <div key={lot.id} className="flex items-center justify-between p-3 bg-muted rounded-lg">
                    <div className="flex items-center space-x-3">
                      <Badge variant="secondary">{lot.quantity} unidades</Badge>
                      <p className="text-sm text-muted-foreground">
                        Comprado em: {new Date(lot.purchaseDate).toLocaleDateString("pt-BR")}
                      </p>
                    </div>
                    <div className="flex items-center space-x-2">
                      {lot.expirationDate ? (
                        <>
                          <Calendar className="h-4 w-4 text-muted-foreground" />
                          <p
                            className={`font-medium ${
                              isExpired(lot.expirationDate)
                                ? "text-red-600"
                                : isExpiringSoon(lot.expirationDate)
                                  ? "text-yellow-600"
                                  : ""
                            }`}
                          >
                            Vence: {new Date(lot.expirationDate).toLocaleDateString("pt-BR")}
                          </p>
                          {(isExpired(lot.expirationDate) || isExpiringSoon(lot.expirationDate)) && (
                            <AlertTriangle className="h-4 w-4 ml-1 text-yellow-600" />
                          )}
                        </>
                      ) : (
                        <>
                          <Infinity className="h-4 w-4 text-muted-foreground" />
                          <p className="font-medium">Vencimento Indeterminado</p>
                        </>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/profile-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { toast } from "@/hooks/use-toast"
import { updateProfile, updatePassword } from "@/lib/actions"
import { User, Settings, Lock, Upload } from "lucide-react"

interface ProfileFormProps {
  user: any
  profile: any
}

export function ProfileForm({ user, profile }: ProfileFormProps) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [passwordLoading, setPasswordLoading] = useState(false)

const handleProfileSubmit = async (formData: FormData) => {
    setLoading(true)
    try {
      const result = await updateProfile(formData)
      if (result.success) {
        toast({
          title: "Perfil atualizado",
          description: "Suas informações foram salvas com sucesso.",
        })
        router.refresh()
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao atualizar perfil.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro inesperado ao atualizar perfil.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handlePasswordSubmit = async (formData: FormData) => {
    setPasswordLoading(true)
    try {
      const result = await updatePassword(formData)
      if (result.success) {
        toast({
          title: "Senha atualizada",
          description: "Sua senha foi alterada com sucesso.",
        })
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao atualizar senha.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro inesperado ao atualizar senha.",
        variant: "destructive",
      })
    } finally {
      setPasswordLoading(false)
    }
  }

return (
    <Tabs defaultValue="profile" className="space-y-6">
      <TabsList className="grid w-full grid-cols-3">
        <TabsTrigger value="profile" className="flex items-center gap-2">
          <User className="h-4 w-4" />
          Perfil
        </TabsTrigger>
        <TabsTrigger value="security" className="flex items-center gap-2">
          <Lock className="h-4 w-4" />
          Segurança
        </TabsTrigger>
        <TabsTrigger value="preferences" className="flex items-center gap-2">
          <Settings className="h-4 w-4" />
          Preferências
        </TabsTrigger>
      </TabsList>

<TabsContent value="profile">
        <Card>
          <CardHeader>
            <CardTitle>Informações Pessoais</CardTitle>
            <CardDescription>Atualize suas informações pessoais e profissionais</CardDescription>
          </CardHeader>
          <CardContent>
            <form action={handleProfileSubmit} className="space-y-6">
              <div className="flex items-center gap-6">
                <Avatar className="h-20 w-20">
                  <AvatarImage src={profile?.avatar_url || "/placeholder-user.jpg"} />
                  <AvatarFallback className="text-lg">
                    {profile?.full_name?.charAt(0) || user.email?.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <Button type="button" variant="outline" size="sm">
                    <Upload className="h-4 w-4 mr-2" />
                    Alterar foto
                  </Button>
                  <p className="text-xs text-muted-foreground mt-2">JPG, PNG até 2MB</p>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="full_name">Nome completo</Label>
                  <Input
                    id="full_name"
                    name="full_name"
                    defaultValue={profile?.full_name || ""}
                    placeholder="Seu nome completo"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="clinic_name">Nome da clínica</Label>
                  <Input
                    id="clinic_name"
                    name="clinic_name"
                    defaultValue={profile?.clinic_name || ""}
                    placeholder="Nome da sua clínica"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="phone">Telefone</Label>
                  <Input id="phone" name="phone" defaultValue={profile?.phone || ""} placeholder="(11) 99999-9999" />
                </div>

<div className="space-y-2">
                  <Label htmlFor="position">Cargo</Label>
                  <Select name="position" defaultValue={profile?.position || "Dentista"}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Dentista">Dentista</SelectItem>
                      <SelectItem value="Ortodontista">Ortodontista</SelectItem>
                      <SelectItem value="Endodontista">Endodontista</SelectItem>
                      <SelectItem value="Periodontista">Periodontista</SelectItem>
                      <SelectItem value="Cirurgião">Cirurgião</SelectItem>
                      <SelectItem value="Administrador">Administrador</SelectItem>
                      <SelectItem value="Recepcionista">Recepcionista</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="specialization">Especialização</Label>
                  <Input
                    id="specialization"
                    name="specialization"
                    defaultValue={profile?.specialization || ""}
                    placeholder="Sua especialização"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="cro_number">Número do CRO</Label>
                  <Input
                    id="cro_number"
                    name="cro_number"
                    defaultValue={profile?.cro_number || ""}
                    placeholder="CRO-SP 12345"
                  />
                </div>
              </div>

<Button type="submit" disabled={loading}>
                {loading ? "Salvando..." : "Salvar alterações"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="security">
        <Card>
          <CardHeader>
            <CardTitle>Segurança</CardTitle>
            <CardDescription>Altere sua senha e configure opções de segurança</CardDescription>
          </CardHeader>
          <CardContent>
            <form action={handlePasswordSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current_password">Senha atual</Label>
                <Input id="current_password" name="current_password" type="password" />
              </div>

<div className="space-y-2">
                <Label htmlFor="new_password">Nova senha</Label>
                <Input id="new_password" name="new_password" type="password" />
              </div>

<div className="space-y-2">
                <Label htmlFor="confirm_password">Confirmar nova senha</Label>
                <Input id="confirm_password" name="confirm_password" type="password" />
              </div>

<Button type="submit" disabled={passwordLoading}>
                {passwordLoading ? "Alterando..." : "Alterar senha"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="preferences">
        <Card>
          <CardHeader>
            <CardTitle>Preferências</CardTitle>
            <CardDescription>Configure suas preferências do aplicativo</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Notificações por email</Label>
                <p className="text-sm text-muted-foreground">Receber notificações importantes por email</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Notificações push</Label>
                <p className="text-sm text-muted-foreground">Receber notificações no navegador</p>
              </div>
              <Switch defaultChecked />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Lembretes de consulta</Label>
                <p className="text-sm text-muted-foreground">Receber lembretes automáticos de consultas</p>
              </div>
              <Switch defaultChecked />
            </div>

<Button>Salvar preferências</Button>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/profile-tabs.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import type { User } from "@supabase/supabase-js"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { updateProfile, updatePassword } from "@/lib/actions"
import { UserIcon, Lock, Settings, Sliders, Save, Eye, EyeOff, Moon, Sun, Globe, Database, Trash2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface ProfileTabsProps {
  user: User
  profile: any
}

export function ProfileTabs({ user, profile }: ProfileTabsProps) {
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

// Profile form state
  const [profileData, setProfileData] = useState({
    full_name: profile?.full_name || "",
    phone: profile?.phone || "",
    clinic_name: profile?.clinic_name || "",
    specialization: profile?.specialization || "",
    position: profile?.position || "Dentista",
    bio: profile?.bio || "",
    address: profile?.address || "",
    cro_number: profile?.cro_number || "",
  })

// Password form state
  const [passwordData, setPasswordData] = useState({
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
  })

// Preferences state
  const [preferences, setPreferences] = useState({
    theme: profile?.preferences?.theme || "system",
    language: profile?.preferences?.language || "pt-BR",
    notifications: {
      email: profile?.preferences?.notifications?.email ?? true,
      push: profile?.preferences?.notifications?.push ?? true,
      appointments: profile?.preferences?.notifications?.appointments ?? true,
      payments: profile?.preferences?.notifications?.payments ?? true,
      stock: profile?.preferences?.notifications?.stock ?? true,
    },
    privacy: {
      profileVisible: profile?.preferences?.privacy?.profileVisible ?? true,
      showEmail: profile?.preferences?.privacy?.showEmail ?? false,
      showPhone: profile?.preferences?.privacy?.showPhone ?? false,
    },
  })

const handleProfileSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const result = await updateProfile(profileData)
      if (result.success) {
        toast({
          title: "Perfil atualizado",
          description: "Suas informações foram salvas com sucesso.",
        })
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao atualizar perfil.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro inesperado ao atualizar perfil.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handlePasswordSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (passwordData.newPassword !== passwordData.confirmPassword) {
      toast({
        title: "Erro",
        description: "As senhas não coincidem.",
        variant: "destructive",
      })
      return
    }

if (passwordData.newPassword.length < 6) {
      toast({
        title: "Erro",
        description: "A nova senha deve ter pelo menos 6 caracteres.",
        variant: "destructive",
      })
      return
    }

setLoading(true)

try {
      const result = await updatePassword(passwordData.newPassword)
      if (result.success) {
        toast({
          title: "Senha atualizada",
          description: "Sua senha foi alterada com sucesso.",
        })
        setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "" })
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao atualizar senha.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro inesperado ao atualizar senha.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handlePreferencesSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

try {
      const result = await updateProfile({ preferences })
      if (result.success) {
        toast({
          title: "Preferências salvas",
          description: "Suas preferências foram atualizadas com sucesso.",
        })
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao salvar preferências.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Erro inesperado ao salvar preferências.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

return (
    <Tabs defaultValue="profile" className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="profile" className="flex items-center gap-2">
          <UserIcon className="h-4 w-4" />
          Perfil
        </TabsTrigger>
        <TabsTrigger value="security" className="flex items-center gap-2">
          <Lock className="h-4 w-4" />
          Segurança
        </TabsTrigger>
        <TabsTrigger value="preferences" className="flex items-center gap-2">
          <Settings className="h-4 w-4" />
          Preferências
        </TabsTrigger>
        <TabsTrigger value="advanced" className="flex items-center gap-2">
          <Sliders className="h-4 w-4" />
          Avançado
        </TabsTrigger>
      </TabsList>

<TabsContent value="profile" className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Informações Pessoais</CardTitle>
            <CardDescription>Atualize suas informações pessoais e profissionais</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleProfileSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="full_name">Nome Completo</Label>
                  <Input
                    id="full_name"
                    value={profileData.full_name}
                    onChange={(e) => setProfileData({ ...profileData, full_name: e.target.value })}
                    placeholder="Seu nome completo"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Telefone</Label>
                  <Input
                    id="phone"
                    value={profileData.phone}
                    onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
                    placeholder="(11) 99999-9999"
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="clinic_name">Nome da Clínica</Label>
                  <Input
                    id="clinic_name"
                    value={profileData.clinic_name}
                    onChange={(e) => setProfileData({ ...profileData, clinic_name: e.target.value })}
                    placeholder="Nome da sua clínica"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="cro_number">Número do CRO</Label>
                  <Input
                    id="cro_number"
                    value={profileData.cro_number}
                    onChange={(e) => setProfileData({ ...profileData, cro_number: e.target.value })}
                    placeholder="CRO-SP 12345"
                  />
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="specialization">Especialização</Label>
                  <Select
                    value={profileData.specialization}
                    onValueChange={(value) => setProfileData({ ...profileData, specialization: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione sua especialização" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Clínico Geral">Clínico Geral</SelectItem>
                      <SelectItem value="Ortodontia">Ortodontia</SelectItem>
                      <SelectItem value="Endodontia">Endodontia</SelectItem>
                      <SelectItem value="Periodontia">Periodontia</SelectItem>
                      <SelectItem value="Implantodontia">Implantodontia</SelectItem>
                      <SelectItem value="Cirurgia Oral">Cirurgia Oral</SelectItem>
                      <SelectItem value="Prótese Dentária">Prótese Dentária</SelectItem>
                      <SelectItem value="Odontopediatria">Odontopediatria</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="position">Cargo</Label>
                  <Select
                    value={profileData.position}
                    onValueChange={(value) => setProfileData({ ...profileData, position: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Dentista">Dentista</SelectItem>
                      <SelectItem value="Especialista">Especialista</SelectItem>
                      <SelectItem value="Coordenador">Coordenador</SelectItem>
                      <SelectItem value="Diretor Clínico">Diretor Clínico</SelectItem>
                      <SelectItem value="Proprietário">Proprietário</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="address">Endereço da Clínica</Label>
                <Input
                  id="address"
                  value={profileData.address}
                  onChange={(e) => setProfileData({ ...profileData, address: e.target.value })}
                  placeholder="Endereço completo da clínica"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="bio">Biografia</Label>
                <Textarea
                  id="bio"
                  value={profileData.bio}
                  onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
                  placeholder="Conte um pouco sobre você e sua experiência profissional..."
                  rows={4}
                />
              </div>

<Button type="submit" disabled={loading}>
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Salvando..." : "Salvar Alterações"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="security" className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Alterar Senha</CardTitle>
            <CardDescription>Mantenha sua conta segura com uma senha forte</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handlePasswordSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="newPassword">Nova Senha</Label>
                <div className="relative">
                  <Input
                    id="newPassword"
                    type={showNewPassword ? "text" : "password"}
                    value={passwordData.newPassword}
                    onChange={(e) => setPasswordData({ ...passwordData, newPassword: e.target.value })}
                    placeholder="Digite sua nova senha"
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8"
                    onClick={() => setShowNewPassword(!showNewPassword)}
                  >
                    {showNewPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirmar Nova Senha</Label>
                <div className="relative">
                  <Input
                    id="confirmPassword"
                    type={showConfirmPassword ? "text" : "password"}
                    value={passwordData.confirmPassword}
                    onChange={(e) => setPasswordData({ ...passwordData, confirmPassword: e.target.value })}
                    placeholder="Confirme sua nova senha"
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  >
                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

<Button type="submit" disabled={loading}>
                <Lock className="h-4 w-4 mr-2" />
                {loading ? "Atualizando..." : "Atualizar Senha"}
              </Button>
            </form>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Informações da Conta</CardTitle>
            <CardDescription>Detalhes sobre sua conta e segurança</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Email</p>
                <p className="text-sm text-muted-foreground">{user.email}</p>
              </div>
              <Badge variant="secondary">Verificado</Badge>
            </div>
            <Separator />
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Conta criada em</p>
                <p className="text-sm text-muted-foreground">{new Date(user.created_at).toLocaleDateString("pt-BR")}</p>
              </div>
            </div>
            <Separator />
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Último login</p>
                <p className="text-sm text-muted-foreground">
                  {user.last_sign_in_at ? new Date(user.last_sign_in_at).toLocaleString("pt-BR") : "Nunca"}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="preferences" className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Notificações</CardTitle>
            <CardDescription>Configure como você deseja receber notificações</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handlePreferencesSubmit} className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Notificações por Email</Label>
                    <p className="text-sm text-muted-foreground">Receba notificações importantes por email</p>
                  </div>
                  <Switch
                    checked={preferences.notifications.email}
                    onCheckedChange={(checked) =>
                      setPreferences({
                        ...preferences,
                        notifications: { ...preferences.notifications, email: checked },
                      })
                    }
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Notificações Push</Label>
                    <p className="text-sm text-muted-foreground">Receba notificações no navegador</p>
                  </div>
                  <Switch
                    checked={preferences.notifications.push}
                    onCheckedChange={(checked) =>
                      setPreferences({
                        ...preferences,
                        notifications: { ...preferences.notifications, push: checked },
                      })
                    }
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Consultas e Agendamentos</Label>
                    <p className="text-sm text-muted-foreground">Notificações sobre consultas e lembretes</p>
                  </div>
                  <Switch
                    checked={preferences.notifications.appointments}
                    onCheckedChange={(checked) =>
                      setPreferences({
                        ...preferences,
                        notifications: { ...preferences.notifications, appointments: checked },
                      })
                    }
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Pagamentos e Financeiro</Label>
                    <p className="text-sm text-muted-foreground">
                      Notificações sobre pagamentos e relatórios financeiros
                    </p>
                  </div>
                  <Switch
                    checked={preferences.notifications.payments}
                    onCheckedChange={(checked) =>
                      setPreferences({
                        ...preferences,
                        notifications: { ...preferences.notifications, payments: checked },
                      })
                    }
                  />
                </div>

<div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>Estoque</Label>
                    <p className="text-sm text-muted-foreground">Alertas sobre estoque baixo e movimentações</p>
                  </div>
                  <Switch
                    checked={preferences.notifications.stock}
                    onCheckedChange={(checked) =>
                      setPreferences({
                        ...preferences,
                        notifications: { ...preferences.notifications, stock: checked },
                      })
                    }
                  />
                </div>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Aparência</h4>
                <div className="space-y-2">
                  <Label>Tema</Label>
                  <Select
                    value={preferences.theme}
                    onValueChange={(value) => setPreferences({ ...preferences, theme: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="light">
                        <div className="flex items-center gap-2">
                          <Sun className="h-4 w-4" />
                          Claro
                        </div>
                      </SelectItem>
                      <SelectItem value="dark">
                        <div className="flex items-center gap-2">
                          <Moon className="h-4 w-4" />
                          Escuro
                        </div>
                      </SelectItem>
                      <SelectItem value="system">
                        <div className="flex items-center gap-2">
                          <Settings className="h-4 w-4" />
                          Sistema
                        </div>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label>Idioma</Label>
                  <Select
                    value={preferences.language}
                    onValueChange={(value) => setPreferences({ ...preferences, language: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="pt-BR">
                        <div className="flex items-center gap-2">
                          <Globe className="h-4 w-4" />
                          Português (Brasil)
                        </div>
                      </SelectItem>
                      <SelectItem value="en-US">
                        <div className="flex items-center gap-2">
                          <Globe className="h-4 w-4" />
                          English (US)
                        </div>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<Button type="submit" disabled={loading}>
                <Save className="h-4 w-4 mr-2" />
                {loading ? "Salvando..." : "Salvar Preferências"}
              </Button>
            </form>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="advanced" className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Privacidade</CardTitle>
            <CardDescription>Configure suas preferências de privacidade</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Perfil Visível</Label>
                <p className="text-sm text-muted-foreground">Permitir que outros usuários vejam seu perfil</p>
              </div>
              <Switch
                checked={preferences.privacy.profileVisible}
                onCheckedChange={(checked) =>
                  setPreferences({
                    ...preferences,
                    privacy: { ...preferences.privacy, profileVisible: checked },
                  })
                }
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Mostrar Email</Label>
                <p className="text-sm text-muted-foreground">Exibir seu email para outros usuários</p>
              </div>
              <Switch
                checked={preferences.privacy.showEmail}
                onCheckedChange={(checked) =>
                  setPreferences({
                    ...preferences,
                    privacy: { ...preferences.privacy, showEmail: checked },
                  })
                }
              />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label>Mostrar Telefone</Label>
                <p className="text-sm text-muted-foreground">Exibir seu telefone para outros usuários</p>
              </div>
              <Switch
                checked={preferences.privacy.showPhone}
                onCheckedChange={(checked) =>
                  setPreferences({
                    ...preferences,
                    privacy: { ...preferences.privacy, showPhone: checked },
                  })
                }
              />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Dados da Conta</CardTitle>
            <CardDescription>Gerencie os dados da sua conta</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium">Exportar Dados</p>
                <p className="text-sm text-muted-foreground">Baixe uma cópia de todos os seus dados</p>
              </div>
              <Button variant="outline">
                <Database className="h-4 w-4 mr-2" />
                Exportar
              </Button>
            </div>

<div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-red-600">Excluir Conta</p>
                <p className="text-sm text-muted-foreground">Excluir permanentemente sua conta e todos os dados</p>
              </div>
              <Button variant="destructive">
                <Trash2 className="h-4 w-4 mr-2" />
                Excluir
              </Button>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/prosthetic-kanban.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { MoreHorizontal, Calendar, DollarSign, Building2, Trash2, ArrowRight, AlertTriangle, CheckCircle, Package, Truck, UserCheck, Wrench, Edit, ArrowLeft, GripVertical } from 'lucide-react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import type { ProstheticService } from "@/lib/prosthetic-database"

interface ProstheticKanbanProps {
  services: ProstheticService[]
  onUpdateStatus: (id: string, status: ProstheticService["status"]) => void
  onDeleteService: (id: string) => void
  onEditService?: (service: ProstheticService) => void
}

const statusConfig = {
  PRE_ENVIO: {
    title: "Pré-Envio",
    icon: Package,
    color: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-200",
    borderColor: "border-slate-200 dark:border-slate-700",
    nextStatus: "ENVIO_LABORATORIO" as const,
    nextLabel: "Enviar para Lab",
    prevStatus: null,
    prevLabel: null,
    description: "Trabalhos aguardando envio",
    showDate: false,
  },
  ENVIO_LABORATORIO: {
    title: "Em Laboratório",
    icon: Truck,
    color: "bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200",
    borderColor: "border-blue-200 dark:border-blue-700",
    nextStatus: "RETORNO_CLINICA" as const,
    nextLabel: "Retornou à Clínica",
    prevStatus: "PRE_ENVIO" as const,
    prevLabel: "Voltar para Pré-Envio",
    description: "Trabalhos sendo executados",
    showDate: true,
  },
  RETORNO_CLINICA: {
    title: "Retorno à Clínica",
    icon: CheckCircle,
    color: "bg-amber-100 text-amber-800 dark:bg-amber-800 dark:text-amber-200",
    borderColor: "border-amber-200 dark:border-amber-700",
    nextStatus: "AGENDAMENTO_PACIENTE" as const,
    nextLabel: "Agendar Paciente",
    prevStatus: "ENVIO_LABORATORIO" as const,
    prevLabel: "Voltar para Laboratório",
    description: "Trabalhos prontos para instalação",
    showDate: true,
  },
  AGENDAMENTO_PACIENTE: {
    title: "Agendamento",
    icon: UserCheck,
    color: "bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-200",
    borderColor: "border-purple-200 dark:border-purple-700",
    nextStatus: "INSTALADO" as const,
    nextLabel: "Instalar",
    prevStatus: "RETORNO_CLINICA" as const,
    prevLabel: "Voltar para Retorno",
    description: "Pacientes agendados",
    showDate: false,
  },
  INSTALADO: {
    title: "Instalado",
    icon: Wrench,
    color: "bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200",
    borderColor: "border-green-200 dark:border-green-700",
    nextStatus: null,
    nextLabel: null,
    prevStatus: "AGENDAMENTO_PACIENTE" as const,
    prevLabel: "Voltar para Agendamento",
    description: "Trabalhos concluídos",
    showDate: false,
  },
}

export function ProstheticKanban({ services, onUpdateStatus, onDeleteService, onEditService }: ProstheticKanbanProps) {
  const [confirmDialog, setConfirmDialog] = useState<{
    open: boolean
    title: string
    description: string
    onConfirm: () => void
  }>({
    open: false,
    title: "",
    description: "",
    onConfirm: () => {},
  })

const [draggedItem, setDraggedItem] = useState<ProstheticService | null>(null)
  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null)

const handleDelete = (service: ProstheticService) => {
    setConfirmDialog({
      open: true,
      title: "Confirmar Exclusão",
      description: `Tem certeza que deseja excluir o serviço "${service.work_description.substring(0, 50)}..."? Esta ação não pode ser desfeita.`,
      onConfirm: () => {
        onDeleteService(service.id)
        setConfirmDialog({ ...confirmDialog, open: false })
      },
    })
  }

const handleEdit = (service: ProstheticService) => {
    setConfirmDialog({
      open: true,
      title: "Confirmar Edição",
      description: `Deseja editar o serviço "${service.work_description.substring(0, 50)}..."?`,
      onConfirm: () => {
        onEditService?.(service)
        setConfirmDialog({ ...confirmDialog, open: false })
      },
    })
  }

const handleStatusChange = (service: ProstheticService, newStatus: ProstheticService["status"]) => {
    const statusName = statusConfig[newStatus].title
    setConfirmDialog({
      open: true,
      title: "Confirmar Mudança de Status",
      description: `Deseja mover este serviço para "${statusName}"?`,
      onConfirm: () => {
        onUpdateStatus(service.id, newStatus)
        setConfirmDialog({ ...confirmDialog, open: false })
      },
    })
  }

// Drag and Drop handlers
  const handleDragStart = (e: React.DragEvent, service: ProstheticService) => {
    setDraggedItem(service)
    e.dataTransfer.effectAllowed = "move"
  }

const handleDragOver = (e: React.DragEvent, status: string) => {
    e.preventDefault()
    e.dataTransfer.dropEffect = "move"
    setDragOverColumn(status)
  }

const handleDragLeave = () => {
    setDragOverColumn(null)
  }

const handleDrop = (e: React.DragEvent, newStatus: ProstheticService["status"]) => {
    e.preventDefault()
    setDragOverColumn(null)
    
    if (draggedItem && draggedItem.status !== newStatus) {
      handleStatusChange(draggedItem, newStatus)
    }
    setDraggedItem(null)
  }

const getServicesByStatus = (status: ProstheticService["status"]) => {
    return services.filter((service) => service.status === status)
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return null
    return new Date(dateString).toLocaleDateString("pt-BR")
  }

const formatDateTime = (dateString?: string) => {
    if (!dateString) return null
    return new Date(dateString).toLocaleString("pt-BR")
  }

const isOverdue = (deadline?: string) => {
    if (!deadline) return false
    return new Date(deadline) < new Date()
  }

const getDaysUntilDeadline = (deadline?: string) => {
    if (!deadline) return null
    const today = new Date()
    const deadlineDate = new Date(deadline)
    const diffTime = deadlineDate.getTime() - today.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays
  }

const getTotalValue = (status: ProstheticService["status"]) => {
    return getServicesByStatus(status).reduce((total, service) => total + (service.agreed_value || 0), 0)
  }

return (
    <div className="h-full">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 h-full">
        {Object.entries(statusConfig).map(([status, config]) => {
          const statusServices = getServicesByStatus(status as ProstheticService["status"])
          const totalValue = getTotalValue(status as ProstheticService["status"])
          const Icon = config.icon
          const isDragOver = dragOverColumn === status

return (
            <div key={status} className="flex flex-col h-full">
              {/* Header da Coluna */}
              <div className={`p-4 rounded-t-lg border-t border-l border-r ${config.borderColor} bg-background ${
                isDragOver ? 'bg-blue-50 border-blue-300' : ''
              }`}>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center space-x-2">
                    <Icon className="h-5 w-5" />
                    <h3 className="font-semibold text-base">{config.title}</h3>
                  </div>
                  <Badge variant="secondary" className="text-xs">
                    {statusServices.length}
                  </Badge>
                </div>
                <p className="text-xs text-muted-foreground mb-2">{config.description}</p>
                {totalValue > 0 && (
                  <div className="flex items-center text-xs text-muted-foreground">
                    <DollarSign className="h-3 w-3 mr-1" />
                    R$ {totalValue.toFixed(2)}
                  </div>
                )}
              </div>

{/* Lista de Serviços */}
              <div
                className={`flex-1 p-2 border-l border-r border-b ${config.borderColor} bg-muted/20 rounded-b-lg overflow-y-auto ${
                  isDragOver ? 'bg-blue-50/50' : ''
                }`}
                onDragOver={(e) => handleDragOver(e, status)}
                onDragLeave={handleDragLeave}
                onDrop={(e) => handleDrop(e, status as ProstheticService["status"])}
              >
                <div className="space-y-3 min-h-[400px]">
                  {statusServices.map((service) => {
                    const daysUntilDeadline = getDaysUntilDeadline(service.return_deadline)
                    const isUrgent = daysUntilDeadline !== null && daysUntilDeadline <= 2 && daysUntilDeadline >= 0
                    const isOverdueService = isOverdue(service.return_deadline)

return (
                      <Card
                        key={service.id}
                        className="hover:shadow-md transition-all duration-200 border-l-4 cursor-move"
                        style={{
                          borderLeftColor: isOverdueService ? "#ef4444" : isUrgent ? "#f59e0b" : "#e5e7eb",
                        }}
                        draggable
                        onDragStart={(e) => handleDragStart(e, service)}
                      >
                        <CardHeader className="pb-2">
                          <div className="flex items-start justify-between">
                            <div className="flex items-start space-x-2 flex-1">
                              <GripVertical className="h-4 w-4 text-muted-foreground mt-1 flex-shrink-0" />
                              <CardTitle className="text-sm font-medium line-clamp-2 leading-tight">
                                {service.work_description}
                              </CardTitle>
                            </div>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon" className="h-6 w-6 flex-shrink-0">
                                  <MoreHorizontal className="h-3 w-3" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                {config.nextStatus && (
                                  <DropdownMenuItem onClick={() => handleStatusChange(service, config.nextStatus!)}>
                                    <ArrowRight className="mr-2 h-4 w-4" />
                                    {config.nextLabel}
                                  </DropdownMenuItem>
                                )}
                                {config.prevStatus && (
                                  <DropdownMenuItem onClick={() => handleStatusChange(service, config.prevStatus!)}>
                                    <ArrowLeft className="mr-2 h-4 w-4" />
                                    {config.prevLabel}
                                  </DropdownMenuItem>
                                )}
                                <DropdownMenuItem onClick={() => handleEdit(service)}>
                                  <Edit className="mr-2 h-4 w-4" />
                                  Editar
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => handleDelete(service)} className="text-red-600">
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  Excluir
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </CardHeader>

<CardContent className="pt-0 space-y-3">
                          {/* Profissional */}
                          {service.professional && (
                            <div className="flex items-center space-x-2">
                              <Avatar className="h-6 w-6">
                                <AvatarFallback className="text-xs">
                                  {service.professional.name
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")
                                    .substring(0, 2)}
                                </AvatarFallback>
                              </Avatar>
                              <div className="flex-1 min-w-0">
                                <p className="text-xs font-medium truncate">{service.professional.name}</p>
                                {service.professional.specialty && (
                                  <p className="text-xs text-muted-foreground truncate">
                                    {service.professional.specialty}
                                  </p>
                                )}
                              </div>
                            </div>
                          )}

{/* Laboratório */}
                          {service.laboratory && (
                            <div className="flex items-center text-xs text-muted-foreground">
                              <Building2 className="mr-2 h-3 w-3 flex-shrink-0" />
                              <span className="truncate">{service.laboratory.name}</span>
                            </div>
                          )}

{/* Prazo - só mostrar até RETORNO_CLINICA */}
                          {config.showDate && service.return_deadline && (
                            <div className="space-y-1">
                              <div
                                className={`flex items-center text-xs ${
                                  isOverdueService
                                    ? "text-red-600"
                                    : isUrgent
                                      ? "text-amber-600"
                                      : "text-muted-foreground"
                                }`}
                              >
                                <Calendar className="mr-2 h-3 w-3 flex-shrink-0" />
                                <span>{formatDateTime(service.return_deadline)}</span>
                                {(isOverdueService || isUrgent) && <AlertTriangle className="ml-1 h-3 w-3" />}
                              </div>

{daysUntilDeadline !== null && (
                                <div className="w-full">
                                  {isOverdueService ? (
                                    <Badge variant="destructive" className="text-xs w-full justify-center">
                                      Atrasado {Math.abs(daysUntilDeadline)} dias
                                    </Badge>
                                  ) : isUrgent ? (
                                    <Badge
                                      variant="secondary"
                                      className="text-xs w-full justify-center bg-amber-100 text-amber-800"
                                    >
                                      {daysUntilDeadline === 0 ? "Vence hoje" : `${daysUntilDeadline} dias restantes`}
                                    </Badge>
                                  ) : (
                                    <div className="text-xs text-center text-muted-foreground">
                                      {daysUntilDeadline} dias restantes
                                    </div>
                                  )}
                                </div>
                              )}
                            </div>
                          )}

{/* Valor */}
                          {service.agreed_value && (
                            <div className="flex items-center justify-between text-xs">
                              <div className="flex items-center text-muted-foreground">
                                <DollarSign className="mr-1 h-3 w-3" />
                                <span>Valor:</span>
                              </div>
                              <span className="font-semibold text-green-600">R$ {service.agreed_value.toFixed(2)}</span>
                            </div>
                          )}

{/* Observações */}
                          {service.observations && (
                            <div className="pt-2 border-t">
                              <p className="text-xs text-muted-foreground line-clamp-2 italic">
                                "{service.observations}"
                              </p>
                            </div>
                          )}

{/* Status Badge */}
                          <div className="pt-2">
                            <Badge className={`text-xs w-full justify-center ${config.color}`}>{config.title}</Badge>
                          </div>

{/* Botões de ação */}
                          <div className="pt-2 space-y-1">
                            {config.nextStatus && (
                              <Button
                                size="sm"
                                variant="outline"
                                className="w-full text-xs h-7 bg-transparent"
                                onClick={() => handleStatusChange(service, config.nextStatus!)}
                              >
                                <ArrowRight className="mr-1 h-3 w-3" />
                                {config.nextLabel}
                              </Button>
                            )}
                            {config.prevStatus && (
                              <Button
                                size="sm"
                                variant="outline"
                                className="w-full text-xs h-7 bg-transparent"
                                onClick={() => handleStatusChange(service, config.prevStatus!)}
                              >
                                <ArrowLeft className="mr-1 h-3 w-3" />
                                {config.prevLabel}
                              </Button>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    )
                  })}

{statusServices.length === 0 && (
                    <div className="flex flex-col items-center justify-center py-12 text-center">
                      <Icon className="h-12 w-12 text-muted-foreground/50 mb-3" />
                      <p className="text-sm text-muted-foreground">Nenhum serviço nesta etapa</p>
                      <p className="text-xs text-muted-foreground mt-1">{config.description}</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )
        })}
      </div>

<AlertDialog open={confirmDialog.open} onOpenChange={(open) => setConfirmDialog({ ...confirmDialog, open })}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{confirmDialog.title}</AlertDialogTitle>
            <AlertDialogDescription>{confirmDialog.description}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDialog.onConfirm}>Confirmar</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/quick-chat-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Send, Bot, ArrowLeft, Database, X, GripVertical, Calendar, Users, FileText, Clock } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { cn } from "@/lib/utils"

interface QuickChatDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

interface Contact {
  id: string
  name: string
  role: string
  avatar?: string
  online: boolean
  type: "doctor" | "ai"
}

interface Message {
  id: string
  content: string
  sender: "user" | "contact"
  timestamp: string
}

const contacts: Contact[] = [
  {
    id: "ai",
    name: "DentalIA",
    role: "Assistente Inteligente",
    online: true,
    type: "ai",
  },
  {
    id: "dr-silva",
    name: "Dr. João Silva",
    role: "Ortodontista",
    online: true,
    type: "doctor",
  },
  {
    id: "dr-santos",
    name: "Dra. Maria Santos",
    role: "Implantodontista",
    online: false,
    type: "doctor",
  },
  {
    id: "dr-costa",
    name: "Dr. Pedro Costa",
    role: "Endodontista",
    online: true,
    type: "doctor",
  },
]

const suggestionButtons = [
  { icon: Calendar, text: "Próximos agendamentos", action: "agendamentos" },
  { icon: Users, text: "Pacientes de hoje", action: "pacientes" },
  { icon: FileText, text: "Relatório financeiro", action: "financeiro" },
  { icon: Clock, text: "Horários disponíveis", action: "horarios" },
]

export function QuickChatDialog({ open, onOpenChange }: QuickChatDialogProps) {
  const [selectedContact, setSelectedContact] = useState<Contact | null>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [dataAccess, setDataAccess] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

const [position, setPosition] = useState({ x: window.innerWidth - 400, y: 100 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const dialogRef = useRef<HTMLDivElement>(null)

const handleMouseDown = (e: React.MouseEvent) => {
    if (dialogRef.current) {
      const rect = dialogRef.current.getBoundingClientRect()
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      })
      setIsDragging(true)
    }
  }

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        const newX = Math.max(0, Math.min(window.innerWidth - 400, e.clientX - dragOffset.x))
        const newY = Math.max(0, Math.min(window.innerHeight - 500, e.clientY - dragOffset.y))
        setPosition({ x: newX, y: newY })
      }
    }

const handleMouseUp = () => {
      setIsDragging(false)
    }

if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDragging, dragOffset])

const handleSuggestionClick = (action: string) => {
    let suggestionText = ""
    switch (action) {
      case "agendamentos":
        suggestionText = "Quais são os próximos agendamentos de hoje?"
        break
      case "pacientes":
        suggestionText = "Me mostre a lista de pacientes agendados para hoje"
        break
      case "financeiro":
        suggestionText = "Gere um relatório financeiro do mês atual"
        break
      case "horarios":
        suggestionText = "Quais horários estão disponíveis para agendamento?"
        break
    }
    setNewMessage(suggestionText)
  }

const handleSendMessage = async () => {
    if (!newMessage.trim() || !selectedContact) return

const userMessage: Message = {
      id: Date.now().toString(),
      content: newMessage,
      sender: "user",
      timestamp: new Date().toLocaleTimeString(),
    }

setMessages((prev) => [...prev, userMessage])
    setNewMessage("")

if (selectedContact.type === "ai") {
      setIsLoading(true)
      try {
        const response = await fetch("/api/chat", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            messages: [userMessage],
            dataAccess,
          }),
        })

if (response.ok) {
          const data = await response.json()
          const aiResponse: Message = {
            id: (Date.now() + 1).toString(),
            content: data.content,
            sender: "contact",
            timestamp: new Date().toLocaleTimeString(),
          }
          setMessages((prev) => [...prev, aiResponse])
        } else {
          throw new Error("Erro na resposta da API")
        }
      } catch (error) {
        console.error("Erro no chat:", error)
        const errorResponse: Message = {
          id: (Date.now() + 1).toString(),
          content: "Desculpe, ocorreu um erro. Tente novamente.",
          sender: "contact",
          timestamp: new Date().toLocaleTimeString(),
        }
        setMessages((prev) => [...prev, errorResponse])
      } finally {
        setIsLoading(false)
      }
    } else {
      // Simular resposta para doutores
      setTimeout(() => {
        const response: Message = {
          id: (Date.now() + 1).toString(),
          content: "Recebi sua mensagem. Vou responder assim que possível.",
          sender: "contact",
          timestamp: new Date().toLocaleTimeString(),
        }
        setMessages((prev) => [...prev, response])
      }, 1000)
    }
  }

const handleBackToContacts = () => {
    setSelectedContact(null)
    setMessages([])
    setDataAccess(false)
  }

const handleClose = () => {
    onOpenChange(false)
    handleBackToContacts()
  }

if (!open) return null

return (
    <div
      ref={dialogRef}
      className={cn(
        "fixed z-50 bg-background border rounded-lg shadow-lg",
        "w-96 h-[500px] flex flex-col",
        isDragging && "cursor-grabbing",
      )}
      style={{
        left: position.x,
        top: position.y,
      }}
    >
      <div
        className="flex items-center justify-between p-4 border-b cursor-grab active:cursor-grabbing"
        onMouseDown={handleMouseDown}
      >
        <div className="flex items-center gap-2">
          <GripVertical className="h-4 w-4 text-muted-foreground" />
          {selectedContact && (
            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleBackToContacts}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
          )}
          <span className="font-semibold">{selectedContact ? selectedContact.name : "Mensagens Rápidas"}</span>
        </div>
        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

{selectedContact?.type === "ai" && (
        <div className="flex items-center space-x-2 bg-muted/50 rounded-lg p-2 mx-4 mt-2">
          <Database className={`h-4 w-4 ${dataAccess ? "text-green-600" : "text-muted-foreground"}`} />
          <span className="text-sm font-medium">Acesso aos Dados</span>
          <Switch checked={dataAccess} onCheckedChange={setDataAccess} className="data-[state=checked]:bg-green-600" />
        </div>
      )}

{!selectedContact ? (
        <ScrollArea className="flex-1 p-4">
          <div className="space-y-2">
            {contacts.map((contact) => (
              <div
                key={contact.id}
                className="flex items-center gap-3 p-3 rounded-lg border cursor-pointer hover:bg-accent"
                onClick={() => setSelectedContact(contact)}
              >
                <Avatar className="h-10 w-10">
                  <AvatarImage src={contact.avatar || "/placeholder.svg"} />
                  <AvatarFallback>
                    {contact.type === "ai" ? (
                      <Bot className="h-5 w-5" />
                    ) : (
                      contact.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")
                    )}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{contact.name}</span>
                    {contact.online && (
                      <Badge variant="secondary" className="text-xs">
                        Online
                      </Badge>
                    )}
                  </div>
                  <p className="text-sm text-muted-foreground">{contact.role}</p>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      ) : (
        <>
          <ScrollArea className="flex-1 px-4">
            <div className="space-y-3 py-4">
              {messages.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-full text-center py-8">
                  <div className="bg-muted rounded-full p-4 mb-4">
                    {selectedContact.type === "ai" ? (
                      <Bot className="h-8 w-8 text-muted-foreground" />
                    ) : (
                      <Avatar className="h-8 w-8">
                        <AvatarFallback>
                          {selectedContact.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                    )}
                  </div>
                  <h3 className="font-medium mb-2">Conversa com {selectedContact.name}</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    {selectedContact.type === "ai"
                      ? "Faça perguntas sobre pacientes, agendamentos ou relatórios"
                      : "Envie uma mensagem para iniciar a conversa"}
                  </p>

{selectedContact.type === "ai" && (
                    <div className="grid grid-cols-2 gap-2 w-full">
                      {suggestionButtons.map((suggestion) => (
                        <Button
                          key={suggestion.action}
                          variant="outline"
                          size="sm"
                          className="h-auto p-2 text-xs bg-transparent"
                          onClick={() => handleSuggestionClick(suggestion.action)}
                        >
                          <suggestion.icon className="h-3 w-3 mr-1" />
                          {suggestion.text}
                        </Button>
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                messages.map((message) => (
                  <div
                    key={message.id}
                    className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
                  >
                    <div
                      className={`max-w-[80%] rounded-lg px-3 py-2 ${
                        message.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
                      }`}
                    >
                      <p className="text-sm">{message.content}</p>
                      <p className="text-xs opacity-70 mt-1">{message.timestamp}</p>
                    </div>
                  </div>
                ))
              )}
              {isLoading && (
                <div className="flex justify-start">
                  <div className="bg-muted rounded-lg px-3 py-2">
                    <p className="text-sm">DentalIA está pensando...</p>
                  </div>
                </div>
              )}
            </div>
          </ScrollArea>

<div className="flex gap-2 p-4 border-t">
            <Input
              placeholder="Digite sua mensagem..."
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
              disabled={isLoading}
            />
            <Button size="icon" onClick={handleSendMessage} disabled={isLoading}>
              <Send className="h-4 w-4" />
            </Button>
          </div>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/quick-patient-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, User } from 'lucide-react'
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"

interface QuickPatientDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function QuickPatientDialog({ open, onOpenChange }: QuickPatientDialogProps) {
  const [name, setName] = useState("")
  const [phone, setPhone] = useState("")
  const [cpf, setCpf] = useState("")
  const [birthDate, setBirthDate] = useState<Date>()
  const [gender, setGender] = useState("")

const formatPhone = (value: string) => {
    const numbers = value.replace(/\D/g, "")
    if (numbers.length <= 11) {
      return numbers.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3")
    }
    return phone
  }

const formatCPF = (value: string) => {
    const numbers = value.replace(/\D/g, "")
    if (numbers.length <= 11) {
      return numbers.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4")
    }
    return cpf
  }

const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPhone(formatPhone(e.target.value))
  }

const handleCPFChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCpf(formatCPF(e.target.value))
  }

const handleSave = () => {
    // Implementar lógica de salvamento
    console.log({ name, phone, cpf, birthDate, gender })
    onOpenChange(false)
    // Reset form
    setName("")
    setPhone("")
    setCpf("")
    setBirthDate(undefined)
    setGender("")
  }

const isFormValid = name.trim() && phone.trim() && cpf.trim()

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <User className="h-5 w-5" />
            <span>Cadastro Rápido de Paciente</span>
          </DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Nome */}
          <div className="space-y-2">
            <Label htmlFor="name">Nome Completo *</Label>
            <Input
              id="name"
              placeholder="Digite o nome completo"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
          </div>

{/* Telefone */}
          <div className="space-y-2">
            <Label htmlFor="phone">Telefone *</Label>
            <Input
              id="phone"
              placeholder="(11) 99999-9999"
              value={phone}
              onChange={handlePhoneChange}
              maxLength={15}
            />
          </div>

{/* CPF */}
          <div className="space-y-2">
            <Label htmlFor="cpf">CPF *</Label>
            <Input
              id="cpf"
              placeholder="000.000.000-00"
              value={cpf}
              onChange={handleCPFChange}
              maxLength={14}
            />
          </div>

{/* Data de Nascimento */}
          <div className="space-y-2">
            <Label>Data de Nascimento</Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" className="w-full justify-start text-left font-normal">
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {birthDate ? format(birthDate, "PPP", { locale: ptBR }) : "Selecionar data"}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="single"
                  selected={birthDate}
                  onSelect={setBirthDate}
                  initialFocus
                />
              </PopoverContent>
            </Popover>
          </div>

{/* Gênero */}
          <div className="space-y-2">
            <Label>Gênero</Label>
            <Select value={gender} onValueChange={setGender}>
              <SelectTrigger>
                <SelectValue placeholder="Selecionar gênero" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="masculino">Masculino</SelectItem>
                <SelectItem value="feminino">Feminino</SelectItem>
                <SelectItem value="outro">Outro</SelectItem>
              </SelectContent>
            </Select>
          </div>

{/* Preview */}
          {isFormValid && (
            <div className="space-y-2">
              <Label>Preview dos Dados</Label>
              <div className="p-3 bg-muted rounded-md space-y-1">
                <p><strong>Nome:</strong> {name}</p>
                <p><strong>Telefone:</strong> {phone}</p>
                <p><strong>CPF:</strong> {cpf}</p>
                {birthDate && <p><strong>Nascimento:</strong> {format(birthDate, "PPP", { locale: ptBR })}</p>}
                {gender && <p><strong>Gênero:</strong> {gender}</p>}
              </div>
            </div>
          )}

{/* Botões */}
          <div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button onClick={handleSave} disabled={!isFormValid}>
              Cadastrar Paciente
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/stock-filters.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import type { Product } from "@/app/page"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  X,
  Filter,
  Search,
  MoreHorizontal,
  Edit,
  Trash2,
  AlertTriangle,
  ShoppingCart,
  Eye,
  ArrowUp,
  ArrowDown,
  Download,
  ChevronDown,
  ChevronRight,
  Clock,
  User,
  Package,
  Calendar,
  Infinity,
} from "lucide-react"
import { EditProductDialog } from "@/components/edit-product-dialog"
import { ShoppingListDialog } from "@/components/shopping-list-dialog"
import { ProductDetailsDialog } from "@/components/product-details-dialog"
import { ConfirmDialog } from "@/components/confirm-dialog"
import { MovementDialog } from "@/components/movement-dialog"
import { BulkPurchaseDialog } from "@/components/bulk-purchase-dialog"
import * as XLSX from "xlsx"

interface StockFiltersProps {
  products: Product[]
  onUpdateProduct: (id: string, updates: Partial<Omit<Product, "currentStock" | "lots">>) => void
  onDeleteProduct: (id: string) => void
  onAddMovement: (
    productId: string,
    movementType: "entry" | "exit" | "purchase",
    quantity: number,
    user: string,
    notes: string,
    expirationDate: string | null,
  ) => void
  productTypes: string[]
  suppliers: string[]
}

export function StockFilters({
  products,
  onUpdateProduct,
  onDeleteProduct,
  onAddMovement,
  productTypes,
  suppliers,
}: StockFiltersProps) {
  const [filters, setFilters] = useState<{
    type?: string
    supplier?: string
    lowStock?: boolean
  }>({})
  const [searchTerm, setSearchTerm] = useState("")

const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const [viewingProduct, setViewingProduct] = useState<Product | null>(null)
  const [showShoppingList, setShowShoppingList] = useState(false)
  const [showBulkPurchase, setShowBulkPurchase] = useState(false)
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
  const [confirmDialog, setConfirmDialog] = useState<{
    open: boolean
    title: string
    description: string
    onConfirm: () => void
  }>({
    open: false,
    title: "",
    description: "",
    onConfirm: () => {},
  })
  const [movementDialog, setMovementDialog] = useState<{
    open: boolean
    product: Product | null
    type: "entry" | "exit"
  }>({
    open: false,
    product: null,
    type: "entry",
  })

const filteredProducts = products.filter((product) => {
    // Filtro de pesquisa
    const matchesSearch =
      product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      product.brand.toLowerCase().includes(searchTerm.toLowerCase()) ||
      product.supplier.toLowerCase().includes(searchTerm.toLowerCase())

// Filtros de categoria
    const matchesType = !filters.type || product.productType === filters.type
    const matchesSupplier = !filters.supplier || product.supplier === filters.supplier
    const matchesLowStock = !filters.lowStock || product.currentStock <= product.idealQuantity * 0.3

return matchesSearch && matchesType && matchesSupplier && matchesLowStock
  })

const updateFilters = (newFilters: typeof filters) => {
    setFilters(newFilters)
  }

const clearFilter = (filterKey: keyof typeof filters) => {
    const newFilters = { ...filters }
    delete newFilters[filterKey]
    updateFilters(newFilters)
  }

const clearAllFilters = () => {
    updateFilters({})
    setSearchTerm("")
  }

const hasActiveFilters = Object.keys(filters).length > 0 || searchTerm.length > 0

const calculateStockValue = (product: Product) => {
    return (product.currentStock * product.lastPurchaseValue).toFixed(2)
  }

const isLowStock = (product: Product) => {
    return product.currentStock <= product.idealQuantity * 0.3
  }

const isExpired = (expirationDate: string) => {
    const expDate = new Date(expirationDate)
    const today = new Date()
    return expDate < today
  }

const handleEdit = (product: Product) => {
    setConfirmDialog({
      open: true,
      title: "Confirmar Edição",
      description: `Deseja realmente editar o produto "${product.name}"?`,
      onConfirm: () => {
        setEditingProduct(product)
        setConfirmDialog({ ...confirmDialog, open: false })
      },
    })
  }

const handleDelete = (product: Product) => {
    setConfirmDialog({
      open: true,
      title: "Confirmar Exclusão",
      description: `Deseja realmente excluir o produto "${product.name}"? Esta ação não pode ser desfeita.`,
      onConfirm: () => {
        onDeleteProduct(product.id)
        setConfirmDialog({ ...confirmDialog, open: false })
      },
    })
  }

const handleMovement = (
    product: Product,
    type: "entry" | "exit",
    quantity: number,
    user: string,
    notes: string,
    expirationDate: string | null,
  ) => {
    onAddMovement(product.id, type, quantity, user, notes, expirationDate)
  }

const toggleRowExpansion = (productId: string) => {
    const newExpanded = new Set(expandedRows)
    if (newExpanded.has(productId)) {
      newExpanded.delete(productId)
    } else {
      newExpanded.add(productId)
    }
    setExpandedRows(newExpanded)
  }

const exportToExcel = () => {
    const exportData = products.map((product) => ({
      "Nome do Produto": product.name,
      Marca: product.brand,
      "Tipo de Embalagem": product.packageType,
      "Tipo de Produto": product.productType,
      "Estoque Atual": product.currentStock,
      "Quantidade Ideal": product.idealQuantity,
      Fornecedor: product.supplier,
      "Última Compra": new Date(product.lastPurchaseDate).toLocaleDateString("pt-BR"),
      "Valor Unitário": `R$ ${product.lastPurchaseValue.toFixed(2)}`,
      "Valor em Estoque": `R$ ${calculateStockValue(product)}`,
      Status: isLowStock(product) ? "Baixo Estoque" : "Normal",
      "Lotes (Qtde - Vencimento)": product.lots
        .map((lot) =>
          lot.expirationDate
            ? `${lot.quantity} - ${new Date(lot.expirationDate).toLocaleDateString("pt-BR")}`
            : `${lot.quantity} - Indeterminada`,
        )
        .join("; "),
    }))

const ws = XLSX.utils.json_to_sheet(exportData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, "Estoque")

const colWidths = [
      { wch: 25 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 12 },
      { wch: 15 },
      { wch: 20 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 15 },
      { wch: 40 },
    ]
    ws["!cols"] = colWidths

XLSX.writeFile(wb, `estoque-dental-${new Date().toISOString().split("T")[0]}.xlsx`)
  }

const getMovementTypeColor = (type: string) => {
    switch (type) {
      case "entry":
        return "text-green-600"
      case "exit":
        return "text-red-600"
      case "purchase":
        return "text-blue-600"
      case "adjustment":
        return "text-yellow-600"
      default:
        return "text-gray-600"
    }
  }

const getMovementTypeLabel = (type: string) => {
    switch (type) {
      case "entry":
        return "Entrada"
      case "exit":
        return "Saída"
      case "purchase":
        return "Compra"
      case "adjustment":
        return "Ajuste"
      default:
        return type
    }
  }

const lowStockProducts = products.filter((p) => p.currentStock < p.idealQuantity)

return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total de Produtos</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{products.length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Estoque Baixo</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">
              {products.filter((p) => p.currentStock <= p.idealQuantity * 0.3).length}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Produtos Sem Estoque</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">{products.filter((p) => p.currentStock === 0).length}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Valor Total do Estoque</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">
              R$ {products.reduce((total, p) => total + p.currentStock * p.lastPurchaseValue, 0).toFixed(2)}
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="leading-[0.8rem] pb-0 pt-3.5">
          <div className="flex flex-wrap items-center gap-4 mb-4">
            <div className="flex items-center gap-2">
              <Filter className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">Filtros:</span>
            </div>

<div className="relative flex-1 max-w-sm">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="Pesquisar produtos..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

<Select
              value={filters.type || "all"}
              onValueChange={(value) => updateFilters({ ...filters, type: value === "all" ? undefined : value })}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Tipo do produto" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os tipos</SelectItem>
                {productTypes.map((type) => (
                  <SelectItem key={type} value={type}>
                    {type}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

<Select
              value={filters.supplier || "all"}
              onValueChange={(value) => updateFilters({ ...filters, supplier: value === "all" ? undefined : value })}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Fornecedor" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos fornecedores</SelectItem>
                {suppliers.map((supplier) => (
                  <SelectItem key={supplier} value={supplier}>
                    {supplier}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

<Button
              variant={filters.lowStock ? "default" : "outline"}
              size="sm"
              onClick={() => updateFilters({ ...filters, lowStock: !filters.lowStock })}
            >
              Estoque Baixo
            </Button>

{hasActiveFilters && (
              <Button variant="ghost" size="sm" onClick={clearAllFilters}>
                Limpar Tudo
              </Button>
            )}
          </div>

{hasActiveFilters && (
            <div className="flex flex-wrap gap-2">
              {searchTerm && (
                <Badge variant="secondary" className="gap-1">
                  Pesquisa: {searchTerm}
                  <X className="h-3 w-3 cursor-pointer" onClick={() => setSearchTerm("")} />
                </Badge>
              )}
              {filters.type && (
                <Badge variant="secondary" className="gap-1">
                  Tipo: {filters.type}
                  <X className="h-3 w-3 cursor-pointer" onClick={() => clearFilter("type")} />
                </Badge>
              )}
              {filters.supplier && (
                <Badge variant="secondary" className="gap-1">
                  Fornecedor: {filters.supplier}
                  <X className="h-3 w-3 cursor-pointer" onClick={() => clearFilter("supplier")} />
                </Badge>
              )}
              {filters.lowStock && (
                <Badge variant="secondary" className="gap-1">
                  Estoque Baixo
                  <X className="h-3 w-3 cursor-pointer" onClick={() => clearFilter("lowStock")} />
                </Badge>
              )}
            </div>
          )}
        </CardContent>
      </Card>

<div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <h2 className="text-lg font-semibold">Produtos em Estoque</h2>
          <Badge variant="secondary">{filteredProducts.length} produtos</Badge>
          {lowStockProducts.length > 0 && (
            <Badge variant="destructive">
              <AlertTriangle className="mr-1 h-3 w-3" />
              {lowStockProducts.length} baixo estoque
            </Badge>
          )}
        </div>
        <div className="flex items-center space-x-2">
          <Button onClick={() => setShowShoppingList(true)} variant="outline">
            <ShoppingCart className="mr-2 h-4 w-4" />
            Lista de Compras
          </Button>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={exportToExcel}>
                <Download className="mr-2 h-4 w-4" />
                Baixar Planilha Excel
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setShowBulkPurchase(true)}>
                <ShoppingCart className="mr-2 h-4 w-4" />
                Movimentação por Lista de Compras
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

<div className="rounded-md border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[30px]"></TableHead>
              <TableHead>Produto</TableHead>
              <TableHead>Marca</TableHead>
              <TableHead>Embalagem</TableHead>
              <TableHead>Tipo</TableHead>
              <TableHead>Estoque Atual</TableHead>
              <TableHead>Qtde Ideal</TableHead>
              <TableHead>Fornecedor</TableHead>
              <TableHead>Última Compra</TableHead>
              <TableHead>Valor Unit.</TableHead>
              <TableHead>Valor Estoque</TableHead>
              <TableHead>Movimentação</TableHead>
              <TableHead>Detalhes</TableHead>
              <TableHead className="w-[50px]"></TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredProducts.map((product) => (
              <>
                <TableRow key={product.id} className="cursor-pointer" onClick={() => toggleRowExpansion(product.id)}>
                  <TableCell>
                    <Button variant="ghost" size="icon" className="h-6 w-6">
                      {expandedRows.has(product.id) ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      )}
                    </Button>
                  </TableCell>
                  <TableCell className="font-medium">{product.name}</TableCell>
                  <TableCell>{product.brand}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{product.packageType}</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge className={getProductTypeColor(product.productType)}>{product.productType}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center space-x-2">
                      <span className={isLowStock(product) ? "text-red-600 font-semibold" : ""}>
                        {product.currentStock}
                      </span>
                      {isLowStock(product) && <AlertTriangle className="h-4 w-4 text-red-600" />}
                    </div>
                  </TableCell>
                  <TableCell>{product.idealQuantity}</TableCell>
                  <TableCell>{product.supplier}</TableCell>
                  <TableCell>{new Date(product.lastPurchaseDate).toLocaleDateString("pt-BR")}</TableCell>
                  <TableCell>R$ {product.lastPurchaseValue.toFixed(2)}</TableCell>
                  <TableCell>R$ {calculateStockValue(product)}</TableCell>
                  <TableCell onClick={(e) => e.stopPropagation()}>
                    <div className="flex space-x-1">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setMovementDialog({ open: true, product, type: "entry" })}
                        className="h-8 w-8 p-0"
                      >
                        <ArrowUp className="h-3 w-3 text-green-600" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => setMovementDialog({ open: true, product, type: "exit" })}
                        className="h-8 w-8 p-0"
                        disabled={product.currentStock === 0}
                      >
                        <ArrowDown className="h-3 w-3 text-red-600" />
                      </Button>
                    </div>
                  </TableCell>
                  <TableCell onClick={(e) => e.stopPropagation()}>
                    <Button size="sm" variant="outline" onClick={() => setViewingProduct(product)}>
                      <Eye className="h-4 w-4" />
                    </Button>
                  </TableCell>
                  <TableCell onClick={(e) => e.stopPropagation()}>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => handleEdit(product)}>
                          <Edit className="mr-2 h-4 w-4" />
                          Editar
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(product)} className="text-red-600">
                          <Trash2 className="mr-2 h-4 w-4" />
                          Excluir
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
                {expandedRows.has(product.id) && (
                  <TableRow>
                    <TableCell colSpan={14} className="bg-muted/50">
                      <div className="p-4">
                        <div className="flex items-center space-x-2 mb-3">
                          <Clock className="h-4 w-4" />
                          <h4 className="font-semibold">Histórico de Movimentações</h4>
                        </div>
                        {product.movementHistory.length === 0 ? (
                          <p className="text-sm text-muted-foreground">Nenhuma movimentação registrada.</p>
                        ) : (
                          <div className="space-y-2">
                            {product.movementHistory.slice(0, 5).map((movement) => (
                              <div
                                key={movement.id}
                                className="flex items-center justify-between p-2 bg-background rounded border"
                              >
                                <div className="flex items-center space-x-3">
                                  <Badge variant="outline" className={getMovementTypeColor(movement.type)}>
                                    {getMovementTypeLabel(movement.type)}
                                  </Badge>
                                  <span className="text-sm">
                                    <strong>{movement.quantity}</strong> unidades
                                  </span>
                                  <span className="text-sm text-muted-foreground">
                                    {movement.previousStock} → {movement.newStock}
                                  </span>
                                  {movement.notes && (
                                    <span className="text-sm text-muted-foreground italic">"{movement.notes}"</span>
                                  )}
                                </div>
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                  <User className="h-3 w-3" />
                                  <span>{movement.user}</span>
                                  <span>•</span>
                                  <span>{new Date(movement.date).toLocaleString("pt-BR")}</span>
                                </div>
                              </div>
                            ))}
                            {product.movementHistory.length > 5 && (
                              <p className="text-sm text-muted-foreground text-center">
                                E mais {product.movementHistory.length - 5} movimentações...
                              </p>
                            )}
                          </div>
                        )}

<div className="flex items-center space-x-2 mt-6 mb-3">
                          <Package className="h-4 w-4" />
                          <h4 className="font-semibold">Lotes Ativos</h4>
                        </div>
                        {product.lots.length === 0 ? (
                          <p className="text-sm text-muted-foreground">Nenhum lote ativo para este produto.</p>
                        ) : (
                          <div className="space-y-2">
                            {product.lots.map((lot) => (
                              <div
                                key={lot.id}
                                className="flex items-center justify-between p-2 bg-background rounded border"
                              >
                                <div className="flex items-center space-x-3">
                                  <Badge variant="secondary">{lot.quantity} unidades</Badge>
                                  <span className="text-sm text-muted-foreground">
                                    Comprado em: {new Date(lot.purchaseDate).toLocaleDateString("pt-BR")}
                                  </span>
                                </div>
                                <div className="flex items-center space-x-2 text-sm">
                                  {lot.expirationDate ? (
                                    <>
                                      <Calendar className="h-3 w-3 text-muted-foreground" />
                                      <span
                                        className={
                                          isExpired(lot.expirationDate)
                                            ? "text-red-600 font-semibold"
                                            : isExpiringSoon(lot.expirationDate)
                                              ? "text-yellow-600 font-semibold"
                                              : ""
                                        }
                                      >
                                        Vence: {new Date(lot.expirationDate).toLocaleDateString("pt-BR")}
                                      </span>
                                      {(isExpired(lot.expirationDate) || isExpiringSoon(lot.expirationDate)) && (
                                        <AlertTriangle className="h-3 w-3 ml-1 text-yellow-600" />
                                      )}
                                    </>
                                  ) : (
                                    <>
                                      <Infinity className="h-3 w-3 text-muted-foreground" />
                                      <span className="font-medium">Vencimento Indeterminado</span>
                                    </>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </>
            ))}
          </TableBody>
        </Table>
      </div>

{filteredProducts.length === 0 && (searchTerm || hasActiveFilters) && (
        <div className="text-center py-8">
          <p className="text-muted-foreground">Nenhum produto encontrado {searchTerm && `para "${searchTerm}"`}</p>
        </div>
      )}

{/* Diálogos */}
      {editingProduct && (
        <EditProductDialog
          product={editingProduct}
          open={!!editingProduct}
          onOpenChange={(open) => !open && setEditingProduct(null)}
          onUpdateProduct={(updates) => {
            onUpdateProduct(editingProduct.id, updates)
            setEditingProduct(null)
          }}
        />
      )}

{viewingProduct && (
        <ProductDetailsDialog
          product={viewingProduct}
          open={!!viewingProduct}
          onOpenChange={(open) => !open && setViewingProduct(null)}
        />
      )}

<BulkPurchaseDialog
        products={lowStockProducts}
        allProducts={filteredProducts}
        open={showBulkPurchase}
        onOpenChange={setShowBulkPurchase}
        onConfirmPurchases={(purchases) => {
          purchases.forEach((purchase) => {
            const product = products.find((p) => p.id === purchase.productId)
            if (product) {
              onAddMovement(
                purchase.productId,
                "purchase",
                purchase.quantity,
                "Sistema - Compra em Lote",
                "Compra em lote",
                purchase.expirationDate,
              )
            }
          })
        }}
      />

<ConfirmDialog
        open={confirmDialog.open}
        onOpenChange={(open) => setConfirmDialog({ ...confirmDialog, open })}
        title={confirmDialog.title}
        description={confirmDialog.description}
        onConfirm={confirmDialog.onConfirm}
      />

<MovementDialog
        open={movementDialog.open}
        onOpenChange={(open) => setMovementDialog({ ...movementDialog, open })}
        product={movementDialog.product}
        type={movementDialog.type}
        onConfirm={handleMovement}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/toaster.tsx" isMerged="true"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/hooks/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="app/ai-assistant/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { toast } from "@/hooks/use-toast"
import {
  Send,
  Plus,
  MoreVertical,
  Download,
  Archive,
  Trash2,
  ArchiveRestore,
  RefreshCw,
  AlertTriangle,
  Activity,
  Loader2,
  Bot,
  User,
  Database,
} from "lucide-react"
import { chatService } from "@/lib/supabase"
import { Switch } from "@/components/ui/switch"

interface Message {
  id: string
  content: string
  role: "user" | "assistant"
  createdAt: Date
}

interface Chat {
  id: string
  title: string
  messages: Message[]
  isArchived: boolean
  createdAt: Date
}

interface AIAlert {
  id: string
  type: "warning" | "error" | "info"
  title: string
  description: string
  priority: "high" | "medium" | "low"
  createdAt: Date
}

const quickPrompts = [
  "Olá! Como você pode me ajudar?",
  "Quais produtos estão com estoque baixo?",
  "Como posso melhorar a gestão da minha clínica?",
  "Preciso de um relatório de movimentações",
  "Quais são as melhores práticas para controle de estoque?",
  "Como organizar o agendamento de pacientes?",
]

export default function AIAssistantPage() {
  const [chats, setChats] = useState<Chat[]>([])
  const [activeChat, setActiveChat] = useState<string>("")
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isLoadingChats, setIsLoadingChats] = useState(true)
  const [dataAccess, setDataAccess] = useState(false)
  const [deleteDialog, setDeleteDialog] = useState<{ open: boolean; chatId: string | null }>({
    open: false,
    chatId: null,
  })
  const [archiveDialog, setArchiveDialog] = useState<{
    open: boolean
    chatId: string | null
    action: "archive" | "unarchive"
  }>({ open: false, chatId: null, action: "archive" })

const [aiAlerts, setAiAlerts] = useState<AIAlert[]>([])
  const [isGeneratingAlerts, setIsGeneratingAlerts] = useState(false)
  const [lastAlertUpdate, setLastAlertUpdate] = useState<Date | null>(null)

const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

useEffect(() => {
    loadChatsFromDatabase()
    generateAlerts()
  }, [])

const loadChatsFromDatabase = async () => {
    try {
      setIsLoadingChats(true)
      const conversations = await chatService.getConversations()

const chatsWithMessages = await Promise.all(
        conversations.map(async (conv) => {
          const messages = await chatService.getMessages(conv.id)
          return {
            id: conv.id,
            title: conv.title,
            isArchived: conv.archived,
            createdAt: new Date(conv.created_at),
            messages: messages.map((msg) => ({
              id: msg.id,
              content: msg.content,
              role: msg.role,
              createdAt: new Date(msg.created_at),
            })),
          }
        }),
      )

setChats(chatsWithMessages)

// Se não há conversas, criar uma nova
      if (chatsWithMessages.length === 0) {
        await createNewChat()
      }
    } catch (error) {
      console.error("Erro ao carregar conversas:", error)
      toast({
        title: "Erro ao carregar conversas",
        description: "Não foi possível carregar as conversas salvas.",
        variant: "destructive",
      })
    } finally {
      setIsLoadingChats(false)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim() || isLoading || !activeChat) return

const userMessage: Message = {
      id: Date.now().toString(),
      content: input.trim(),
      role: "user",
      createdAt: new Date(),
    }

setMessages((prev) => [...prev, userMessage])
    setInput("")
    setIsLoading(true)

try {
      await chatService.saveMessage(activeChat, "user", userMessage.content)

const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          messages: [...messages, userMessage],
          dataAccess,
        }),
      })

if (!response.ok) {
        throw new Error("Erro na resposta da API")
      }

const data = await response.json()

if (data.error) {
        throw new Error(data.details || "Erro desconhecido")
      }

const assistantMessage: Message = {
        id: data.id || Date.now().toString(),
        content: data.content,
        role: "assistant",
        createdAt: new Date(data.createdAt || Date.now()),
      }

setMessages((prev) => [...prev, assistantMessage])

await chatService.saveMessage(activeChat, "assistant", assistantMessage.content)

const currentChat = chats.find((c) => c.id === activeChat)
      if (currentChat && currentChat.messages.length === 0) {
        const newTitle = userMessage.content.slice(0, 30) + (userMessage.content.length > 30 ? "..." : "")
        await chatService.updateConversationTitle(activeChat, newTitle)

setChats((prev) => prev.map((chat) => (chat.id === activeChat ? { ...chat, title: newTitle } : chat)))
      }

// Atualizar o chat ativo
      updateChatMessages(activeChat, [...messages, userMessage, assistantMessage])
    } catch (error) {
      console.error("Erro no chat:", error)
      toast({
        title: "Erro no chat",
        description: "Não foi possível enviar a mensagem. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value)
  }

const generateAlerts = async () => {
    setIsGeneratingAlerts(true)
    try {
      const response = await fetch("/api/generate-alerts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      })

if (response.ok) {
        const data = await response.json()
        setAiAlerts(data.alerts || [])
        setLastAlertUpdate(new Date())
      }
    } catch (error) {
      console.error("Erro ao gerar alertas:", error)
    } finally {
      setIsGeneratingAlerts(false)
    }
  }

const createNewChat = async () => {
    try {
      const newConversation = await chatService.createConversation()

const newChat: Chat = {
        id: newConversation.id,
        title: newConversation.title,
        messages: [],
        isArchived: false,
        createdAt: new Date(newConversation.created_at),
      }

setChats((prev) => [newChat, ...prev])
      setActiveChat(newChat.id)
      setMessages([])
    } catch (error) {
      console.error("Erro ao criar conversa:", error)
      toast({
        title: "Erro ao criar conversa",
        description: "Não foi possível criar uma nova conversa.",
        variant: "destructive",
      })
    }
  }

const updateChatMessages = (chatId: string, newMessages: Message[]) => {
    setChats((prev) =>
      prev.map((chat) =>
        chat.id === chatId
          ? {
              ...chat,
              messages: newMessages,
            }
          : chat,
      ),
    )
  }

const selectChat = async (chatId: string) => {
    try {
      const chat = chats.find((c) => c.id === chatId)
      if (chat) {
        setActiveChat(chatId)

if (chat.messages.length === 0) {
          const dbMessages = await chatService.getMessages(chatId)
          const messages = dbMessages.map((msg) => ({
            id: msg.id,
            content: msg.content,
            role: msg.role,
            createdAt: new Date(msg.created_at),
          }))

setMessages(messages)
          updateChatMessages(chatId, messages)
        } else {
          setMessages(chat.messages)
        }
      }
    } catch (error) {
      console.error("Erro ao carregar mensagens:", error)
      toast({
        title: "Erro ao carregar mensagens",
        description: "Não foi possível carregar as mensagens da conversa.",
        variant: "destructive",
      })
    }
  }

const handleQuickPrompt = (prompt: string) => {
    if (!activeChat) {
      createNewChat().then(() => {
        setTimeout(() => {
          setInput(prompt)
        }, 100)
      })
    } else {
      setInput(prompt)
    }
  }

const downloadChat = (chatId: string) => {
    const chat = chats.find((c) => c.id === chatId)
    if (!chat) return

const content = chat.messages
      .map((msg) => `[${msg.createdAt.toLocaleString()}] ${msg.role === "user" ? "Você" : "DentalIA"}: ${msg.content}`)
      .join("\n\n")

const blob = new Blob([content], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `chat-${chat.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.txt`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)

toast({
      title: "Chat baixado",
      description: "O arquivo foi salvo com sucesso.",
    })
  }

const archiveChat = async (chatId: string) => {
    try {
      await chatService.archiveConversation(chatId, true)

setChats((prev) => prev.map((chat) => (chat.id === chatId ? { ...chat, isArchived: true } : chat)))
      if (activeChat === chatId) {
        setActiveChat("")
        setMessages([])
      }
      toast({
        title: "Chat arquivado",
        description: "A conversa foi movida para o arquivo.",
      })
    } catch (error) {
      console.error("Erro ao arquivar conversa:", error)
      toast({
        title: "Erro ao arquivar",
        description: "Não foi possível arquivar a conversa.",
        variant: "destructive",
      })
    }
  }

const unarchiveChat = async (chatId: string) => {
    try {
      await chatService.archiveConversation(chatId, false)

setChats((prev) => prev.map((chat) => (chat.id === chatId ? { ...chat, isArchived: false } : chat)))
      toast({
        title: "Chat desarquivado",
        description: "A conversa foi restaurada.",
      })
    } catch (error) {
      console.error("Erro ao desarquivar conversa:", error)
      toast({
        title: "Erro ao desarquivar",
        description: "Não foi possível desarquivar a conversa.",
        variant: "destructive",
      })
    }
  }

const deleteChat = async (chatId: string) => {
    try {
      await chatService.deleteConversation(chatId)

setChats((prev) => prev.filter((chat) => chat.id !== chatId))

if (activeChat === chatId) {
        const remainingChats = chats.filter((chat) => chat.id !== chatId && !chat.isArchived)
        if (remainingChats.length > 0) {
          // Selecionar o primeiro chat disponível
          const nextChat = remainingChats[0]
          setActiveChat(nextChat.id)
          setMessages(nextChat.messages)
        } else {
          // Se não há chats restantes, criar um novo
          setActiveChat("")
          setMessages([])
          setTimeout(() => {
            createNewChat()
          }, 100)
        }
      }

toast({
        title: "Chat deletado",
        description: "A conversa foi removida permanentemente.",
      })
    } catch (error) {
      console.error("Erro ao deletar conversa:", error)
      toast({
        title: "Erro ao deletar",
        description: "Não foi possível deletar a conversa.",
        variant: "destructive",
      })
    }
  }

const activeChats = chats.filter((chat) => !chat.isArchived)
  const archivedChats = chats.filter((chat) => chat.isArchived)

const formatMessage = (content: string) => {
    // Substitui **texto** por <strong>texto</strong>
    const parts = content.split(/(\*\*.*?\*\*)/g)

return parts.map((part, index) => {
      if (part.startsWith("**") && part.endsWith("**")) {
        const boldText = part.slice(2, -2)
        return <strong key={index}>{boldText}</strong>
      }
      return part
    })
  }

if (isLoadingChats) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
            <p>Carregando conversas...</p>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />

<div className="flex-1 flex">
        {/* Chat Area */}
        <div className="flex-1 flex flex-col">
          {/* Header */}
          <div className="border-b p-4">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold">DentalIA Assistant</h1>
                <p className="text-muted-foreground">Seu assistente inteligente para gestão da clínica</p>
              </div>
              <div className="flex items-center space-x-4">
                <div className="flex items-center space-x-2 bg-muted/50 rounded-lg p-2">
                  <Database className={`h-4 w-4 ${dataAccess ? "text-green-600" : "text-muted-foreground"}`} />
                  <span className="text-sm font-medium">Acesso aos Dados</span>
                  <Switch
                    checked={dataAccess}
                    onCheckedChange={setDataAccess}
                    className="data-[state=checked]:bg-green-600"
                  />
                </div>
                <Button onClick={createNewChat} variant="outline">
                  <Plus className="h-4 w-4 mr-2" />
                  Nova Conversa
                </Button>
              </div>
            </div>
            {dataAccess && (
              <div className="mt-2 flex items-center space-x-2 text-sm text-green-600">
                <Database className="h-4 w-4" />
                <span>IA com acesso aos dados: Pacientes, Agendamentos, Funcionários, Estoque</span>
              </div>
            )}
          </div>

{/* Messages */}
          <ScrollArea className="flex-1 p-4">
            {activeChat ? (
              <div className="space-y-4 max-w-4xl mx-auto">
                {messages.length === 0 && (
                  <div className="text-center py-8">
                    <Bot className="h-16 w-16 mx-auto mb-4 text-muted-foreground/50" />
                    <h3 className="text-lg font-medium mb-2">Olá! Sou a DentalIA</h3>
                    <p className="text-muted-foreground mb-6">
                      {dataAccess
                        ? "Estou com acesso aos seus dados e posso ajudar com informações específicas da clínica."
                        : "Como posso ajudar você hoje? Ative o 'Acesso aos Dados' para respostas mais específicas."}
                    </p>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-w-2xl mx-auto">
                      {quickPrompts.map((prompt, index) => (
                        <Button
                          key={index}
                          variant="outline"
                          className="text-left justify-start h-auto p-3 whitespace-normal bg-transparent"
                          onClick={() => setInput(prompt)}
                        >
                          {prompt}
                        </Button>
                      ))}
                    </div>
                  </div>
                )}

{messages.map((message) => (
                  <div key={message.id} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`flex items-start space-x-3 max-w-[80%] ${message.role === "user" ? "flex-row-reverse space-x-reverse" : ""}`}
                    >
                      <Avatar className="w-8 h-8">
                        <AvatarFallback
                          className={
                            message.role === "user" ? "bg-primary text-primary-foreground" : "bg-blue-100 text-blue-600"
                          }
                        >
                          {message.role === "user" ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
                        </AvatarFallback>
                      </Avatar>
                      <div
                        className={`rounded-lg p-4 ${message.role === "user" ? "bg-primary text-primary-foreground" : "bg-muted"}`}
                      >
                        <div className="text-sm font-medium mb-2">{message.role === "user" ? "Você" : "DentalIA"}</div>
                        <div className="text-sm whitespace-pre-wrap leading-relaxed">
                          {formatMessage(message.content)}
                        </div>
                        <div className="text-xs opacity-70 mt-3">
                          {message.createdAt?.toLocaleDateString()} às {message.createdAt?.toLocaleTimeString()}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
                {isLoading && (
                  <div className="flex justify-start">
                    <div className="flex items-start space-x-3">
                      <Avatar className="w-8 h-8">
                        <AvatarFallback className="bg-blue-100 text-blue-600">
                          <Bot className="h-4 w-4" />
                        </AvatarFallback>
                      </Avatar>
                      <div className="bg-muted rounded-lg p-4">
                        <div className="text-sm font-medium mb-2">DentalIA</div>
                        <div className="flex items-center space-x-2">
                          <Loader2 className="h-4 w-4 animate-spin" />
                          <span className="text-sm">Pensando...</span>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>
            ) : (
              <div className="flex items-center justify-center h-full">
                <div className="text-center">
                  <Bot className="h-16 w-16 mx-auto mb-4 text-muted-foreground/50" />
                  <h3 className="text-lg font-medium mb-2">Nenhuma conversa selecionada</h3>
                  <p>Selecione uma conversa ou crie uma nova para começar</p>
                </div>
              </div>
            )}
          </ScrollArea>

{/* Input */}
          {activeChat && (
            <div className="border-t p-4">
              <form onSubmit={handleSubmit} className="flex space-x-2">
                <Input
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                  placeholder="Digite sua mensagem..."
                  className="flex-1"
                  disabled={isLoading}
                />
                <Button type="submit" disabled={!input.trim() || isLoading}>
                  {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                </Button>
              </form>
            </div>
          )}
        </div>

{/* Sidebar */}
        <div className="w-80 border-l bg-muted/30 flex flex-col">
          <ScrollArea className="flex-1 p-4">
            {/* Active Chats */}
            <div className="space-y-4">
              <div>
                <h3 className="font-medium mb-3">Conversas Ativas</h3>
                <div className="space-y-2">
                  {activeChats.map((chat) => (
                    <div
                      key={chat.id}
                      className={`group p-3 rounded-lg cursor-pointer transition-colors relative ${
                        activeChat === chat.id ? "bg-primary/10 border border-primary/20" : "hover:bg-muted"
                      }`}
                      onClick={() => selectChat(chat.id)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-1 min-w-0">
                          <p className="font-medium text-sm truncate">{chat.title}</p>
                          <p className="text-xs text-muted-foreground">{chat.messages.length} mensagens</p>
                        </div>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="opacity-0 group-hover:opacity-100 transition-opacity"
                            >
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => downloadChat(chat.id)}>
                              <Download className="h-4 w-4 mr-2" />
                              Baixar Conversa
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => setArchiveDialog({ open: true, chatId: chat.id, action: "archive" })}
                            >
                              <Archive className="h-4 w-4 mr-2" />
                              Arquivar
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => setDeleteDialog({ open: true, chatId: chat.id })}
                              className="text-red-600"
                            >
                              <Trash2 className="h-4 w-4 mr-2" />
                              Deletar
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>
                  ))}
                  {activeChats.length === 0 && (
                    <div className="text-xs text-muted-foreground text-center py-4">Nenhuma conversa ativa</div>
                  )}
                </div>
              </div>

{/* Archived Chats */}
              {archivedChats.length > 0 && (
                <div>
                  <Separator className="my-4" />
                  <h3 className="font-medium mb-3">Conversas Arquivadas</h3>
                  <div className="space-y-2">
                    {archivedChats.map((chat) => (
                      <div key={chat.id} className="group p-3 rounded-lg hover:bg-muted transition-colors">
                        <div className="flex items-center justify-between">
                          <div className="flex-1 min-w-0">
                            <p className="font-medium text-sm truncate opacity-70">{chat.title}</p>
                            <p className="text-xs text-muted-foreground">{chat.messages.length} mensagens</p>
                          </div>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="opacity-0 group-hover:opacity-100 transition-opacity"
                              >
                                <MoreVertical className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem
                                onClick={() => setArchiveDialog({ open: true, chatId: chat.id, action: "unarchive" })}
                              >
                                <ArchiveRestore className="h-4 w-4 mr-2" />
                                Desarquivar
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => downloadChat(chat.id)}>
                                <Download className="h-4 w-4 mr-2" />
                                Baixar Conversa
                              </DropdownMenuItem>
                              <DropdownMenuItem
                                onClick={() => setDeleteDialog({ open: true, chatId: chat.id })}
                                className="text-red-600"
                              >
                                <Trash2 className="h-4 w-4 mr-2" />
                                Deletar
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* AI Alerts */}
              <div>
                <Separator className="my-4" />
                <div className="flex items-center justify-between mb-3">
                  <h3 className="font-medium">Alertas IA</h3>
                  <Button variant="ghost" size="sm" onClick={generateAlerts} disabled={isGeneratingAlerts}>
                    <RefreshCw className={`h-4 w-4 ${isGeneratingAlerts ? "animate-spin" : ""}`} />
                  </Button>
                </div>
                <div className="space-y-2">
                  {aiAlerts.slice(0, 5).map((alert) => (
                    <Card key={alert.id} className="p-3">
                      <div className="flex items-start space-x-2">
                        <div className="mt-0.5">
                          {alert.type === "error" && <AlertTriangle className="h-4 w-4 text-red-500" />}
                          {alert.type === "warning" && <AlertTriangle className="h-4 w-4 text-yellow-500" />}
                          {alert.type === "info" && <Activity className="h-4 w-4 text-blue-500" />}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-sm font-medium">{alert.title}</p>
                          <p className="text-xs text-muted-foreground">{alert.description}</p>
                          <Badge
                            variant={
                              alert.priority === "high"
                                ? "destructive"
                                : alert.priority === "medium"
                                  ? "default"
                                  : "secondary"
                            }
                            className="mt-1 text-xs"
                          >
                            {alert.priority === "high" ? "Alta" : alert.priority === "medium" ? "Média" : "Baixa"}
                          </Badge>
                        </div>
                      </div>
                    </Card>
                  ))}
                  {aiAlerts.length === 0 && (
                    <div className="text-xs text-muted-foreground text-center py-4">Nenhum alerta no momento</div>
                  )}
                  {lastAlertUpdate && (
                    <p className="text-xs text-muted-foreground text-center">
                      Última atualização: {lastAlertUpdate.toLocaleTimeString()}
                    </p>
                  )}
                </div>
              </div>
            </div>
          </ScrollArea>
        </div>
      </div>

{/* Delete Dialog */}
      <AlertDialog
        open={deleteDialog.open}
        onOpenChange={(open) => {
          if (!open) {
            setDeleteDialog({ open: false, chatId: null })
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Deletar conversa</AlertDialogTitle>
            <AlertDialogDescription>
              Esta ação não pode ser desfeita. A conversa será removida permanentemente.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel
              onClick={() => {
                setDeleteDialog({ open: false, chatId: null })
              }}
            >
              Cancelar
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={async () => {
                if (deleteDialog.chatId) {
                  try {
                    await deleteChat(deleteDialog.chatId)
                  } catch (error) {
                    console.error("Erro ao deletar:", error)
                  }
                }
                setDeleteDialog({ open: false, chatId: null })
              }}
              className="bg-red-600 hover:bg-red-700"
            >
              Deletar
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

{/* Archive Dialog */}
      <AlertDialog
        open={archiveDialog.open}
        onOpenChange={(open) => {
          if (!open) {
            setArchiveDialog({ open: false, chatId: null, action: "archive" })
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {archiveDialog.action === "archive" ? "Arquivar" : "Desarquivar"} conversa
            </AlertDialogTitle>
            <AlertDialogDescription>
              {archiveDialog.action === "archive"
                ? "A conversa será movida para o arquivo e não aparecerá na lista principal."
                : "A conversa será restaurada para a lista principal."}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel
              onClick={() => {
                setArchiveDialog({ open: false, chatId: null, action: "archive" })
              }}
            >
              Cancelar
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={async () => {
                if (archiveDialog.chatId) {
                  try {
                    if (archiveDialog.action === "archive") {
                      await archiveChat(archiveDialog.chatId)
                    } else {
                      await unarchiveChat(archiveDialog.chatId)
                    }
                  } catch (error) {
                    console.error("Erro na ação do diálogo:", error)
                  }
                }
                setArchiveDialog({ open: false, chatId: null, action: "archive" })
              }}
            >
              {archiveDialog.action === "archive" ? "Arquivar" : "Desarquivar"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true"
import { createClient, isSupabaseConfigured } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import LoginForm from "@/components/login-form"

export default async function LoginPage() {
  // If Supabase is not configured, show setup message directly
  if (!isSupabaseConfigured) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4 text-gray-800">Conecte o Supabase para começar</h1>
          <p className="text-gray-600">Configure a integração do Supabase nas configurações do projeto</p>
        </div>
      </div>
    )
  }

// Check if user is already logged in
  const supabase = createClient()
  const {
    data: { session },
  } = await supabase.auth.getSession()

// If user is logged in, redirect to home page
  if (session) {
    redirect("/")
  }

return (
    <div className="flex min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Left side - Information about RisoArte */}
      <div className="hidden lg:flex lg:w-1/2 bg-blue-600 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-800"></div>
        <div className="relative z-10 flex flex-col justify-center px-12 py-16 text-white">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4">RisoArte</h1>
            <p className="text-xl text-blue-100">Sistema de Gestão Odontológica Completo</p>
          </div>

<div className="space-y-6">
            <div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Gestão de Pacientes</h3>
                <p className="text-blue-100">
                  Controle completo do histórico, agendamentos e tratamentos dos seus pacientes.
                </p>
              </div>
            </div>

<div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Controle Financeiro</h3>
                <p className="text-blue-100">
                  Acompanhe receitas, despesas e tenha relatórios detalhados da sua clínica.
                </p>
              </div>
            </div>

<div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                  <path
                    fillRule="evenodd"
                    d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3h4v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm8 8a1 1 0 100-2 1 1 0 000 2zm-3-1a1 1 0 11-2 0 1 1 0 012 0zm-1-4a1 1 0 100-2 1 1 0 000 2zm3-1a1 1 0 11-2 0 1 1 0 012 0z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Agenda Inteligente</h3>
                <p className="text-blue-100">Organize consultas, lembretes automáticos e otimize sua agenda diária.</p>
              </div>
            </div>
          </div>

<div className="mt-12 p-6 bg-blue-700/50 rounded-lg">
            <p className="text-sm text-blue-100 italic">
              "Transforme sua clínica odontológica com tecnologia de ponta e gestão eficiente."
            </p>
          </div>
        </div>
      </div>

{/* Right side - Login Form */}
      <div className="flex-1 flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
        <LoginForm />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isMerged="true"
import { createClient, isSupabaseConfigured } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import SignUpForm from "@/components/signup-form"

export default async function SignUpPage() {
  // If Supabase is not configured, show setup message directly
  if (!isSupabaseConfigured) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="text-center">
          <h1 className="text-2xl font-bold mb-4 text-gray-800">Conecte o Supabase para começar</h1>
          <p className="text-gray-600">Configure a integração do Supabase nas configurações do projeto</p>
        </div>
      </div>
    )
  }

// Check if user is already logged in
  const supabase = createClient()
  const {
    data: { session },
  } = await supabase.auth.getSession()

// If user is logged in, redirect to home page
  if (session) {
    redirect("/")
  }

return (
    <div className="flex min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Left side - Signup Form */}
      <div className="flex-1 flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
        <SignUpForm />
      </div>

{/* Right side - Information about RisoArte */}
      <div className="hidden lg:flex lg:w-1/2 bg-blue-600 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-800"></div>
        <div className="relative z-10 flex flex-col justify-center px-12 py-16 text-white">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4">Junte-se à RisoArte</h1>
            <p className="text-xl text-blue-100">Modernize sua clínica odontológica hoje mesmo</p>
          </div>

<div className="space-y-6">
            <div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Segurança Total</h3>
                <p className="text-blue-100">Seus dados e dos pacientes protegidos com criptografia de ponta.</p>
              </div>
            </div>

<div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z" />
                  <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Relatórios Avançados</h3>
                <p className="text-blue-100">Análises detalhadas para tomar decisões estratégicas na sua clínica.</p>
              </div>
            </div>

<div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2">Suporte Especializado</h3>
                <p className="text-blue-100">Equipe dedicada para ajudar você a aproveitar ao máximo o sistema.</p>
              </div>
            </div>
          </div>

<div className="mt-12 p-6 bg-blue-700/50 rounded-lg">
            <div className="flex items-center space-x-3 mb-3">
              <div className="flex -space-x-2">
                <div className="w-8 h-8 bg-blue-400 rounded-full border-2 border-white"></div>
                <div className="w-8 h-8 bg-blue-300 rounded-full border-2 border-white"></div>
                <div className="w-8 h-8 bg-blue-500 rounded-full border-2 border-white"></div>
              </div>
              <span className="text-sm text-blue-100">+500 clínicas confiam na RisoArte</span>
            </div>
            <p className="text-sm text-blue-100 italic">
              "Cadastre-se gratuitamente e descubra como podemos revolucionar sua gestão odontológica."
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/estoque/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { AddProductDialog } from "@/components/add-product-dialog"
import { Button } from "@/components/ui/button"
import { Plus, Loader2 } from "lucide-react"
import {
  getAllProducts,
  createProduct,
  updateProduct,
  deleteProduct,
  addMovementHistory,
  addProductLot,
  deductFromLots,
  checkProductExistsByName,
} from "@/lib/database-estoque"
import { useToast } from "@/hooks/use-toast"
import { StockFilters } from "@/components/stock-filters"
import type { Product } from "@/lib/types"

export type { Product, MovementHistory, ProductLot } from "@/lib/types"

export default function HomePage() {
  const [products, setProducts] = useState<Product[]>([])
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [loading, setLoading] = useState(true)
  const { toast } = useToast()

const [filteredProducts, setFilteredProducts] = useState<Product[]>([])

useEffect(() => {
    loadProducts()
  }, [])

const productTypes = [...new Set(products.map((p) => p.productType))].filter(Boolean)
  const suppliers = [...new Set(products.map((p) => p.supplier))].filter(Boolean)

const loadProducts = async () => {
    setLoading(true)
    try {
      const data = await getAllProducts()
      setProducts(data)
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível carregar os produtos",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleAddProduct = async (
    productData: Omit<Product, "id" | "movementHistory" | "stockEntry" | "stockExit" | "lots">,
    initialLotQuantity: number,
    initialLotExpirationDate: string | null,
  ) => {
    try {
      const newProduct = await createProduct(productData, initialLotQuantity, initialLotExpirationDate)
      if (newProduct) {
        await loadProducts()
        toast({
          title: "Sucesso",
          description: "Produto adicionado com sucesso",
        })
      } else {
        throw new Error("Falha ao criar produto")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível adicionar o produto",
        variant: "destructive",
      })
    }
  }

const handleUpdateProduct = async (id: string, updates: Partial<Omit<Product, "currentStock" | "lots">>) => {
    try {
      const success = await updateProduct(id, updates)
      if (success) {
        await loadProducts()
        toast({
          title: "Sucesso",
          description: "Produto atualizado com sucesso",
        })
      } else {
        throw new Error("Falha ao atualizar produto")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível atualizar o produto",
        variant: "destructive",
      })
    }
  }

const handleDeleteProduct = async (id: string) => {
    try {
      const success = await deleteProduct(id)
      if (success) {
        await loadProducts()
        toast({
          title: "Sucesso",
          description: "Produto excluído com sucesso",
        })
      } else {
        throw new Error("Falha ao excluir produto")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível excluir o produto",
        variant: "destructive",
      })
    }
  }

const handleAddMovement = async (
    productId: string,
    movementType: "entry" | "exit" | "purchase",
    quantity: number,
    user: string,
    notes: string,
    expirationDate: string | null,
  ) => {
    try {
      const product = products.find((p) => p.id === productId)
      if (!product) throw new Error("Produto não encontrado")

const previousStock = product.currentStock
      let newStock = previousStock

if (movementType === "entry" || movementType === "purchase") {
        const lotAdded = await addProductLot(
          productId,
          quantity,
          expirationDate,
          new Date().toISOString().split("T")[0],
        )
        if (!lotAdded) throw new Error("Falha ao adicionar lote.")
        newStock = previousStock + quantity
        await updateProduct(productId, {
          lastPurchaseDate: new Date().toISOString().split("T")[0],
          lastPurchaseQuantity: quantity,
        })
      } else if (movementType === "exit") {
        const deducted = await deductFromLots(productId, quantity)
        if (!deducted) throw new Error("Falha ao deduzir de lotes.")
        newStock = Math.max(0, previousStock - quantity)
      }

const success = await addMovementHistory(productId, {
        date: new Date().toISOString(),
        type: movementType,
        quantity,
        previousStock,
        newStock,
        user,
        notes,
      })

if (success) {
        await loadProducts()
        toast({
          title: "Sucesso",
          description: "Movimentação registrada com sucesso",
        })
      } else {
        throw new Error("Falha ao registrar movimentação")
      }
    } catch (error: any) {
      toast({
        title: "Erro",
        description: error.message || "Não foi possível registrar a movimentação",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <div className="flex items-center space-x-2">
            <Loader2 className="h-6 w-6 animate-spin" />
            <span>Carregando produtos...</span>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-hidden">
        <div className="h-full flex flex-col">
          <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <div className="flex h-16 items-center justify-between px-6">
              <div>
                <h1 className="text-2xl font-semibold">Controle de Estoque</h1>
                <p className="text-sm text-muted-foreground">Gerencie o estoque da sua clínica odontológica</p>
              </div>
              <Button onClick={() => setIsAddDialogOpen(true)}>
                <Plus className="mr-2 h-4 w-4" />
                Adicionar Produto
              </Button>
            </div>
          </header>

<AddProductDialog
        open={isAddDialogOpen}
        onOpenChange={setIsAddDialogOpen}
        onAddProduct={handleAddProduct}
        onCheckDuplicateName={checkProductExistsByName}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/financeiro/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DollarSign, TrendingUp, TrendingDown, Plus, Eye, Download, Filter } from "lucide-react"
import { NewBoletoDialog, NewContaDialog, PaymentDialog } from "@/components/finance-dialogs"

export default function FinanceiroPage() {
  const [activeTab, setActiveTab] = useState("caixa")

const [newBoletoOpen, setNewBoletoOpen] = useState(false)
  const [newContaPagarOpen, setNewContaPagarOpen] = useState(false)
  const [newContaReceberOpen, setNewContaReceberOpen] = useState(false)
  const [paymentDialog, setPaymentDialog] = useState<{
    open: boolean
    type: "pay" | "receive"
    description: string
    value: string
  }>({ open: false, type: "pay", description: "", value: "" })

const renderCaixa = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saldo Atual</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">R$ 15.430,50</div>
            <p className="text-xs text-muted-foreground">Atualizado agora</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Entradas Hoje</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 2.850,00</div>
            <p className="text-xs text-muted-foreground">+12% vs ontem</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Saídas Hoje</CardTitle>
            <TrendingDown className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 680,00</div>
            <p className="text-xs text-muted-foreground">-5% vs ontem</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Movimentações Recentes</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Data/Hora</TableHead>
                <TableHead>Descrição</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead className="text-right">Valor</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[
                {
                  date: "09/01 14:30",
                  description: "Consulta - João Silva",
                  type: "Entrada",
                  value: "R$ 150,00",
                  positive: true,
                },
                {
                  date: "09/01 13:15",
                  description: "Compra materiais",
                  type: "Saída",
                  value: "R$ 280,00",
                  positive: false,
                },
                {
                  date: "09/01 11:45",
                  description: "Procedimento - Maria Santos",
                  type: "Entrada",
                  value: "R$ 450,00",
                  positive: true,
                },
                {
                  date: "09/01 10:20",
                  description: "Pagamento fornecedor",
                  type: "Saída",
                  value: "R$ 400,00",
                  positive: false,
                },
              ].map((transaction, index) => (
                <TableRow key={index}>
                  <TableCell>{transaction.date}</TableCell>
                  <TableCell>{transaction.description}</TableCell>
                  <TableCell>
                    <Badge variant={transaction.positive ? "default" : "secondary"}>{transaction.type}</Badge>
                  </TableCell>
                  <TableCell
                    className={`text-right font-medium ${transaction.positive ? "text-green-600" : "text-red-600"}`}
                  >
                    {transaction.positive ? "+" : "-"}
                    {transaction.value}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )

const renderContaCorrente = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardHeader>
            <CardTitle>Banco Principal</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span>Banco do Brasil</span>
                <span className="font-medium">Ag: 1234-5</span>
              </div>
              <div className="flex justify-between">
                <span>Conta Corrente</span>
                <span className="font-medium">12345-6</span>
              </div>
              <div className="flex justify-between">
                <span>Saldo Atual</span>
                <span className="font-bold text-green-600">R$ 28.450,30</span>
              </div>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Conta Poupança</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span>Banco do Brasil</span>
                <span className="font-medium">Ag: 1234-5</span>
              </div>
              <div className="flex justify-between">
                <span>Conta Poupança</span>
                <span className="font-medium">54321-0</span>
              </div>
              <div className="flex justify-between">
                <span>Saldo Atual</span>
                <span className="font-bold text-blue-600">R$ 45.200,00</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Extrato Bancário</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Data</TableHead>
                <TableHead>Descrição</TableHead>
                <TableHead>Documento</TableHead>
                <TableHead className="text-right">Valor</TableHead>
                <TableHead className="text-right">Saldo</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[
                {
                  date: "08/01",
                  description: "TED Recebida",
                  doc: "123456",
                  value: "+R$ 5.200,00",
                  balance: "R$ 28.450,30",
                },
                {
                  date: "07/01",
                  description: "Pagamento Fornecedor",
                  doc: "789012",
                  value: "-R$ 1.800,00",
                  balance: "R$ 23.250,30",
                },
                {
                  date: "06/01",
                  description: "Depósito",
                  doc: "345678",
                  value: "+R$ 3.400,00",
                  balance: "R$ 25.050,30",
                },
              ].map((item, index) => (
                <TableRow key={index}>
                  <TableCell>{item.date}</TableCell>
                  <TableCell>{item.description}</TableCell>
                  <TableCell>{item.doc}</TableCell>
                  <TableCell className={`text-right ${item.value.startsWith("+") ? "text-green-600" : "text-red-600"}`}>
                    {item.value}
                  </TableCell>
                  <TableCell className="text-right font-medium">{item.balance}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )

const renderFluxoCaixa = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Previsão 7 Dias</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">R$ 12.300,00</div>
            <p className="text-xs text-muted-foreground">Saldo projetado</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="text-sm">Previsão 30 Dias</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">R$ 45.800,00</div>
            <p className="text-xs text-muted-foreground">Saldo projetado</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle className="text-sm">Margem de Segurança</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-yellow-600">R$ 15.000,00</div>
            <p className="text-xs text-muted-foreground">Reserva mínima</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Projeção de Fluxo de Caixa</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[
              { period: "Próximos 7 dias", entries: "R$ 8.500,00", exits: "R$ 3.200,00", balance: "+R$ 5.300,00" },
              { period: "Próximos 15 dias", entries: "R$ 18.200,00", exits: "R$ 7.800,00", balance: "+R$ 10.400,00" },
              { period: "Próximos 30 dias", entries: "R$ 35.600,00", exits: "R$ 15.200,00", balance: "+R$ 20.400,00" },
            ].map((projection, index) => (
              <div key={index} className="grid grid-cols-4 gap-4 p-4 border rounded-lg">
                <div>
                  <p className="font-medium">{projection.period}</p>
                </div>
                <div className="text-center">
                  <p className="text-sm text-muted-foreground">Entradas</p>
                  <p className="font-medium text-green-600">{projection.entries}</p>
                </div>
                <div className="text-center">
                  <p className="text-sm text-muted-foreground">Saídas</p>
                  <p className="font-medium text-red-600">{projection.exits}</p>
                </div>
                <div className="text-center">
                  <p className="text-sm text-muted-foreground">Saldo</p>
                  <p className="font-bold text-blue-600">{projection.balance}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )

const renderRecebiveis = () => (
    <Card>
      <CardHeader>
        <CardTitle>Recebíveis do Sistema</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Paciente</TableHead>
              <TableHead>Procedimento</TableHead>
              <TableHead>Vencimento</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
              <TableHead>Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              {
                patient: "João Silva",
                procedure: "Implante",
                due: "15/01/2024",
                status: "Pendente",
                value: "R$ 2.500,00",
              },
              {
                patient: "Maria Santos",
                procedure: "Ortodontia",
                due: "20/01/2024",
                status: "Vencido",
                value: "R$ 800,00",
              },
              {
                patient: "Pedro Costa",
                procedure: "Limpeza",
                due: "25/01/2024",
                status: "Pendente",
                value: "R$ 150,00",
              },
            ].map((item, index) => (
              <TableRow key={index}>
                <TableCell>{item.patient}</TableCell>
                <TableCell>{item.procedure}</TableCell>
                <TableCell>{item.due}</TableCell>
                <TableCell>
                  <Badge variant={item.status === "Vencido" ? "destructive" : "secondary"}>{item.status}</Badge>
                </TableCell>
                <TableCell className="text-right font-medium">{item.value}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Button size="sm" variant="outline">
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="outline">
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const renderBoletos = () => (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>Controle de Boletos</CardTitle>
          <Button size="sm" onClick={() => setNewBoletoOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Novo Boleto
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Número</TableHead>
              <TableHead>Beneficiário</TableHead>
              <TableHead>Vencimento</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
              <TableHead>Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              {
                number: "001234567890",
                beneficiary: "Fornecedor ABC",
                due: "15/01/2024",
                status: "Pendente",
                value: "R$ 1.200,00",
              },
              {
                number: "001234567891",
                beneficiary: "Laboratório XYZ",
                due: "18/01/2024",
                status: "Pago",
                value: "R$ 850,00",
              },
              {
                number: "001234567892",
                beneficiary: "Aluguel Clínica",
                due: "20/01/2024",
                status: "Pendente",
                value: "R$ 3.500,00",
              },
            ].map((boleto, index) => (
              <TableRow key={index}>
                <TableCell className="font-mono text-sm">{boleto.number}</TableCell>
                <TableCell>{boleto.beneficiary}</TableCell>
                <TableCell>{boleto.due}</TableCell>
                <TableCell>
                  <Badge variant={boleto.status === "Pago" ? "default" : "secondary"}>{boleto.status}</Badge>
                </TableCell>
                <TableCell className="text-right font-medium">{boleto.value}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Button size="sm" variant="outline">
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="outline">
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const renderCartoes = () => (
    <Card>
      <CardHeader>
        <CardTitle>Controle de Cartões</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium mb-4">Recebimentos por Cartão</h4>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Bandeira</TableHead>
                  <TableHead>Transações</TableHead>
                  <TableHead className="text-right">Valor</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { brand: "Visa", transactions: 45, value: "R$ 12.300,00" },
                  { brand: "Mastercard", transactions: 32, value: "R$ 8.950,00" },
                  { brand: "Elo", transactions: 18, value: "R$ 4.200,00" },
                ].map((card, index) => (
                  <TableRow key={index}>
                    <TableCell>{card.brand}</TableCell>
                    <TableCell>{card.transactions}</TableCell>
                    <TableCell className="text-right font-medium">{card.value}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

<div>
            <h4 className="font-medium mb-4">Taxas e Prazos</h4>
            <div className="space-y-3">
              {[
                { type: "Débito", fee: "2,5%", period: "D+1" },
                { type: "Crédito à Vista", fee: "3,2%", period: "D+30" },
                { type: "Crédito Parcelado", fee: "4,1%", period: "D+30" },
              ].map((item, index) => (
                <div key={index} className="flex justify-between items-center p-3 border rounded-lg">
                  <span className="font-medium">{item.type}</span>
                  <div className="text-right">
                    <p className="text-sm">Taxa: {item.fee}</p>
                    <p className="text-xs text-muted-foreground">Prazo: {item.period}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )

const renderPlanos = () => (
    <Card>
      <CardHeader>
        <CardTitle>Controle de Planos</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Plano</TableHead>
              <TableHead>Pacientes Ativos</TableHead>
              <TableHead>Valor Mensal</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Receita Total</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              { plan: "Plano Básico", patients: 25, monthly: "R$ 89,90", status: "Ativo", total: "R$ 2.247,50" },
              { plan: "Plano Premium", patients: 15, monthly: "R$ 149,90", status: "Ativo", total: "R$ 2.248,50" },
              { plan: "Plano Família", patients: 8, monthly: "R$ 249,90", status: "Ativo", total: "R$ 1.999,20" },
            ].map((plan, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium">{plan.plan}</TableCell>
                <TableCell>{plan.patients}</TableCell>
                <TableCell>{plan.monthly}</TableCell>
                <TableCell>
                  <Badge variant="default">{plan.status}</Badge>
                </TableCell>
                <TableCell className="text-right font-medium">{plan.total}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const renderContasPagar = () => (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>Contas a Pagar</CardTitle>
          <Button size="sm" onClick={() => setNewContaPagarOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Nova Conta
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Descrição</TableHead>
              <TableHead>Fornecedor</TableHead>
              <TableHead>Vencimento</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
              <TableHead>Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              {
                description: "Aluguel Janeiro",
                supplier: "Imobiliária Santos",
                due: "10/01/2024",
                status: "Pendente",
                value: "R$ 3.500,00",
              },
              {
                description: "Energia Elétrica",
                supplier: "CPFL",
                due: "15/01/2024",
                status: "Vencido",
                value: "R$ 450,00",
              },
              {
                description: "Material Odontológico",
                supplier: "Dental Supply",
                due: "20/01/2024",
                status: "Pendente",
                value: "R$ 1.200,00",
              },
            ].map((conta, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium">{conta.description}</TableCell>
                <TableCell>{conta.supplier}</TableCell>
                <TableCell>{conta.due}</TableCell>
                <TableCell>
                  <Badge variant={conta.status === "Vencido" ? "destructive" : "secondary"}>{conta.status}</Badge>
                </TableCell>
                <TableCell className="text-right font-medium">{conta.value}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() =>
                        setPaymentDialog({
                          open: true,
                          type: "pay",
                          description: conta.description,
                          value: conta.value,
                        })
                      }
                    >
                      Pagar
                    </Button>
                    <Button size="sm" variant="outline">
                      <Eye className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const renderContasReceber = () => (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>Contas a Receber</CardTitle>
          <Button size="sm" onClick={() => setNewContaReceberOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            Nova Conta
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Paciente</TableHead>
              <TableHead>Procedimento</TableHead>
              <TableHead>Vencimento</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Valor</TableHead>
              <TableHead>Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              {
                patient: "Ana Costa",
                procedure: "Clareamento",
                due: "12/01/2024",
                status: "Pendente",
                value: "R$ 600,00",
              },
              {
                patient: "Carlos Silva",
                procedure: "Prótese",
                due: "18/01/2024",
                status: "Parcial",
                value: "R$ 1.500,00",
              },
              {
                patient: "Lucia Santos",
                procedure: "Ortodontia",
                due: "25/01/2024",
                status: "Pendente",
                value: "R$ 350,00",
              },
            ].map((conta, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium">{conta.patient}</TableCell>
                <TableCell>{conta.procedure}</TableCell>
                <TableCell>{conta.due}</TableCell>
                <TableCell>
                  <Badge variant={conta.status === "Parcial" ? "secondary" : "default"}>{conta.status}</Badge>
                </TableCell>
                <TableCell className="text-right font-medium">{conta.value}</TableCell>
                <TableCell>
                  <div className="flex space-x-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() =>
                        setPaymentDialog({
                          open: true,
                          type: "receive",
                          description: conta.patient + " - " + conta.procedure,
                          value: conta.value,
                        })
                      }
                    >
                      Receber
                    </Button>
                    <Button size="sm" variant="outline">
                      <Eye className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const renderExtrato = () => (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>Extrato Geral</CardTitle>
          <div className="flex space-x-2">
            <Button size="sm" variant="outline">
              <Filter className="h-4 w-4 mr-2" />
              Filtrar
            </Button>
            <Button size="sm" variant="outline">
              <Download className="h-4 w-4 mr-2" />
              Exportar
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Data</TableHead>
              <TableHead>Descrição</TableHead>
              <TableHead>Categoria</TableHead>
              <TableHead>Tipo</TableHead>
              <TableHead className="text-right">Valor</TableHead>
              <TableHead className="text-right">Saldo</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {[
              {
                date: "09/01",
                description: "Consulta - João Silva",
                category: "Receita",
                type: "Entrada",
                value: "+R$ 150,00",
                balance: "R$ 15.430,50",
              },
              {
                date: "09/01",
                description: "Pagamento Aluguel",
                category: "Despesa",
                type: "Saída",
                value: "-R$ 3.500,00",
                balance: "R$ 15.280,50",
              },
              {
                date: "08/01",
                description: "Procedimento - Maria Santos",
                category: "Receita",
                type: "Entrada",
                value: "+R$ 450,00",
                balance: "R$ 18.780,50",
              },
              {
                date: "08/01",
                description: "Compra Materiais",
                category: "Despesa",
                type: "Saída",
                value: "-R$ 280,00",
                balance: "R$ 18.330,50",
              },
            ].map((item, index) => (
              <TableRow key={index}>
                <TableCell>{item.date}</TableCell>
                <TableCell>{item.description}</TableCell>
                <TableCell>
                  <Badge variant={item.category === "Receita" ? "default" : "secondary"}>{item.category}</Badge>
                </TableCell>
                <TableCell>{item.type}</TableCell>
                <TableCell
                  className={`text-right font-medium ${item.value.startsWith("+") ? "text-green-600" : "text-red-600"}`}
                >
                  {item.value}
                </TableCell>
                <TableCell className="text-right font-medium">{item.balance}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )

const tabContent = {
    caixa: renderCaixa(),
    "conta-corrente": renderContaCorrente(),
    "fluxo-caixa": renderFluxoCaixa(),
    recebiveis: renderRecebiveis(),
    boletos: renderBoletos(),
    cartoes: renderCartoes(),
    planos: renderPlanos(),
    "contas-pagar": renderContasPagar(),
    "contas-receber": renderContasReceber(),
    extrato: renderExtrato(),
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 flex flex-col p-6 overflow-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold">Financeiro</h1>
          <p className="text-muted-foreground">Gerencie todas as finanças da sua clínica</p>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1">
          <TabsList className="grid w-full grid-cols-5 lg:grid-cols-10">
            <TabsTrigger value="caixa">Caixa</TabsTrigger>
            <TabsTrigger value="conta-corrente">Conta Corrente</TabsTrigger>
            <TabsTrigger value="fluxo-caixa">Fluxo de Caixa</TabsTrigger>
            <TabsTrigger value="recebiveis">Recebíveis</TabsTrigger>
            <TabsTrigger value="boletos">Boletos</TabsTrigger>
            <TabsTrigger value="cartoes">Cartões</TabsTrigger>
            <TabsTrigger value="planos">Planos</TabsTrigger>
            <TabsTrigger value="contas-pagar">Contas a Pagar</TabsTrigger>
            <TabsTrigger value="contas-receber">Contas a Receber</TabsTrigger>
            <TabsTrigger value="extrato">Extrato</TabsTrigger>
          </TabsList>

{Object.entries(tabContent).map(([key, content]) => (
            <TabsContent key={key} value={key} className="mt-6">
              {content}
            </TabsContent>
          ))}
        </Tabs>
      </main>
      <NewBoletoDialog open={newBoletoOpen} onOpenChange={setNewBoletoOpen} />
      <NewContaDialog open={newContaPagarOpen} onOpenChange={setNewContaPagarOpen} type="pagar" />
      <NewContaDialog open={newContaReceberOpen} onOpenChange={setNewContaReceberOpen} type="receber" />
      <PaymentDialog
        open={paymentDialog.open}
        onOpenChange={(open) => setPaymentDialog({ ...paymentDialog, open })}
        type={paymentDialog.type}
        description={paymentDialog.description}
        value={paymentDialog.value}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/jogos/page.tsx" isMerged="true"
"use client"

import { Sidebar } from "@/components/sidebar"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { PuzzleGame } from "@/components/games/puzzle-game"
import { MemoryGame } from "@/components/games/memory-game"
import { BombGame } from "@/components/games/bomb-game"
import { QuizGame } from "@/components/games/quiz-game"
import { Gamepad2, Puzzle, Brain, Bomb, Trophy, Clock, Target, BookOpen, Star, Zap } from "lucide-react"

type GameType = "menu" | "puzzle" | "memory" | "bomb" | "quiz"

export default function JogosPage() {
  const [currentGame, setCurrentGame] = useState<GameType>("menu")
  const [gameStats, setGameStats] = useState({
    gamesPlayed: 0,
    totalTime: 0,
    bestScore: 0,
    level: "Iniciante",
  })

const games = [
    {
      id: "puzzle" as GameType,
      title: "Quebra-Cabeça Dental",
      description: "Monte o quebra-cabeça com equipamentos odontológicos",
      icon: Puzzle,
      color: "bg-blue-500",
      difficulty: "Fácil",
      estimatedTime: "5-10 min",
      skills: ["Concentração", "Lógica"],
      featured: false,
    },
    {
      id: "memory" as GameType,
      title: "Jogo da Memória",
      description: "Encontre os pares de instrumentos dentários",
      icon: Brain,
      color: "bg-green-500",
      difficulty: "Médio",
      estimatedTime: "3-8 min",
      skills: ["Memória", "Atenção"],
      featured: false,
    },
    {
      id: "bomb" as GameType,
      title: "Desafio dos Equipamentos",
      description: "Identifique equipamentos reais antes que o tempo acabe",
      icon: Bomb,
      color: "bg-red-500",
      difficulty: "Difícil",
      estimatedTime: "2-5 min",
      skills: ["Agilidade", "Conhecimento"],
      featured: true,
    },
    {
      id: "quiz" as GameType,
      title: "Quiz Odontológico",
      description: "Teste seus conhecimentos sobre odontologia",
      icon: BookOpen,
      color: "bg-purple-500",
      difficulty: "Variado",
      estimatedTime: "10-15 min",
      skills: ["Conhecimento", "Raciocínio"],
      featured: false,
    },
  ]

const achievements = [
    { name: "Primeiro Jogo", description: "Complete seu primeiro jogo", unlocked: false },
    { name: "Especialista", description: "Alcance 100 pontos em qualquer jogo", unlocked: false },
    { name: "Velocista", description: "Complete um jogo em menos de 2 minutos", unlocked: false },
    { name: "Persistente", description: "Jogue 10 vezes seguidas", unlocked: false },
  ]

const renderGame = () => {
    switch (currentGame) {
      case "puzzle":
        return <PuzzleGame onBack={() => setCurrentGame("menu")} />
      case "memory":
        return <MemoryGame onBack={() => setCurrentGame("menu")} />
      case "bomb":
        return <BombGame onBack={() => setCurrentGame("menu")} />
      case "quiz":
        return <QuizGame onBack={() => setCurrentGame("menu")} />
      default:
        return null
    }
  }

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Fácil":
        return "bg-green-100 text-green-800"
      case "Médio":
        return "bg-yellow-100 text-yellow-800"
      case "Difícil":
        return "bg-red-100 text-red-800"
      default:
        return "bg-blue-100 text-blue-800"
    }
  }

if (currentGame !== "menu") {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex flex-col overflow-hidden">
          <div className="flex-1 overflow-auto p-6 flex items-center justify-center">{renderGame()}</div>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-16 items-center justify-between px-6">
            <div className="flex items-center space-x-4">
              <h1 className="text-2xl font-bold flex items-center">
                <Gamepad2 className="mr-3 h-6 w-6" />
                Jogos Interativos
              </h1>
              <Badge variant="secondary">4 jogos disponíveis</Badge>
              <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200">
                <Star className="h-3 w-3 mr-1" />
                Novo: Equipamentos Reais!
              </Badge>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          {/* Introdução */}
          <div className="mb-8 text-center">
            <h2 className="text-3xl font-bold mb-4">🎮 Centro de Jogos Educativos</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Aprenda e pratique conhecimentos odontológicos de forma divertida e interativa. Agora com fotos reais de
              equipamentos para uma experiência mais realista!
            </p>
          </div>

{/* Estatísticas e conquistas */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Trophy className="mr-2 h-4 w-4 text-yellow-500" />
                  Jogos Concluídos
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{gameStats.gamesPlayed}</div>
                <p className="text-xs text-muted-foreground">Nesta sessão</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Clock className="mr-2 h-4 w-4 text-blue-500" />
                  Tempo Total
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{gameStats.totalTime}min</div>
                <p className="text-xs text-muted-foreground">Tempo jogado</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Target className="mr-2 h-4 w-4 text-green-500" />
                  Melhor Pontuação
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{gameStats.bestScore || "-"}</div>
                <p className="text-xs text-muted-foreground">Recorde pessoal</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Brain className="mr-2 h-4 w-4 text-purple-500" />
                  Nível
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{gameStats.level}</div>
                <p className="text-xs text-muted-foreground">Continue jogando!</p>
              </CardContent>
            </Card>
          </div>

{/* Grid de jogos */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            {games.map((game) => {
              const IconComponent = game.icon
              return (
                <Card
                  key={game.id}
                  className={`hover:shadow-lg transition-all duration-300 cursor-pointer group relative ${
                    game.featured ? "ring-2 ring-yellow-400 bg-gradient-to-br from-yellow-50 to-orange-50" : ""
                  }`}
                  onClick={() => setCurrentGame(game.id)}
                >
                  {game.featured && (
                    <div className="absolute -top-2 -right-2 bg-yellow-400 text-yellow-900 px-2 py-1 rounded-full text-xs font-bold flex items-center">
                      <Zap className="h-3 w-3 mr-1" />
                      NOVO
                    </div>
                  )}

<CardHeader>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div
                          className={`p-3 rounded-lg ${game.color} text-white group-hover:scale-110 transition-transform`}
                        >
                          <IconComponent className="h-6 w-6" />
                        </div>
                        <div>
                          <CardTitle className="text-xl">{game.title}</CardTitle>
                          <p className="text-sm text-muted-foreground mt-1">{game.description}</p>
                        </div>
                      </div>
                    </div>
                  </CardHeader>

<CardContent className="space-y-4">
                    <div className="flex items-center justify-between">
                      <Badge className={getDifficultyColor(game.difficulty)}>{game.difficulty}</Badge>
                      <div className="flex items-center text-sm text-muted-foreground">
                        <Clock className="mr-1 h-3 w-3" />
                        {game.estimatedTime}
                      </div>
                    </div>

<div className="space-y-2">
                      <div className="text-sm font-medium">Habilidades desenvolvidas:</div>
                      <div className="flex flex-wrap gap-1">
                        {game.skills.map((skill, index) => (
                          <Badge key={index} variant="outline" className="text-xs">
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>

<Button
                      className="w-full group-hover:bg-primary/90 transition-colors"
                      onClick={(e) => {
                        e.stopPropagation()
                        setCurrentGame(game.id)
                      }}
                    >
                      {game.featured ? "🔥 Jogar Agora" : "Jogar Agora"}
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>

{/* Conquistas */}
          <Card className="mb-8">
            <CardHeader>
              <CardTitle className="flex items-center">
                <Trophy className="mr-2 h-5 w-5 text-yellow-500" />
                Conquistas
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {achievements.map((achievement, index) => (
                  <div
                    key={index}
                    className={`flex items-center space-x-3 p-3 rounded-lg border ${
                      achievement.unlocked ? "bg-yellow-50 border-yellow-200" : "bg-gray-50 border-gray-200"
                    }`}
                  >
                    <div className={`text-2xl ${achievement.unlocked ? "" : "grayscale"}`}>
                      {achievement.unlocked ? "🏆" : "🔒"}
                    </div>
                    <div>
                      <p className="font-medium">{achievement.name}</p>
                      <p className="text-sm text-muted-foreground">{achievement.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Dicas */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">💡 Dicas para Aproveitar Melhor</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div className="space-y-2">
                  <h4 className="font-semibold">🎯 Para Iniciantes:</h4>
                  <ul className="space-y-1 text-muted-foreground">
                    <li>• Comece com o Quebra-Cabeça Dental</li>
                    <li>• Pratique o Jogo da Memória regularmente</li>
                    <li>• Use o Quiz para testar conhecimentos</li>
                  </ul>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold">🏆 Para Avançados:</h4>
                  <ul className="space-y-1 text-muted-foreground">
                    <li>• Desafie-se com o Jogo dos Equipamentos</li>
                    <li>• Tente completar todos em sequência</li>
                    <li>• Melhore seus tempos de conclusão</li>
                    <li>• Crie seus próprios cards de equipamentos</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isMerged="true"
"use client"

import { Sidebar } from "@/components/sidebar"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Bell,
  Search,
  Filter,
  CheckCircle,
  AlertTriangle,
  Info,
  XCircle,
  Calendar,
  DollarSign,
  Package,
  Users,
  Clock,
  Trash2,
  BookMarkedIcon as MarkAsUnread,
  BookMarkedIcon as MarkAsRead,
  RefreshCw,
  Briefcase,
  Megaphone,
  Settings,
  Bot,
  Wrench,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { supabase } from "@/lib/supabase"

interface Notification {
  id: number
  title: string
  message: string
  created_at: string
  type: "success" | "warning" | "error" | "info"
  category:
    | "agenda"
    | "pacientes"
    | "estoque"
    | "financeiro"
    | "funcionarios"
    | "protético"
    | "marketing"
    | "sistema"
    | "ia"
  is_read: boolean
  priority: "alta" | "media" | "baixa"
}

export default function NotificationsPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState<string>("todas")
  const [selectedType, setSelectedType] = useState<string>("todas")
  const [selectedStatus, setSelectedStatus] = useState<string>("todas")
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

const loadNotifications = async () => {
    try {
      const { data, error } = await supabase.from("notifications").select("*").order("created_at", { ascending: false })

if (error) {
        console.error("Erro ao carregar notificações:", error)
        return
      }

setNotifications(data || [])
    } catch (error) {
      console.error("Erro ao carregar notificações:", error)
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }

const refreshNotifications = async () => {
    setRefreshing(true)
    await loadNotifications()
  }

useEffect(() => {
    loadNotifications()
  }, [])

const formatRelativeTime = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60))

if (diffInMinutes < 1) return "Agora"
    if (diffInMinutes < 60) return `${diffInMinutes} min atrás`

const diffInHours = Math.floor(diffInMinutes / 60)
    if (diffInHours < 24) return `${diffInHours}h atrás`

const diffInDays = Math.floor(diffInHours / 24)
    return `${diffInDays} dia${diffInDays > 1 ? "s" : ""} atrás`
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "success":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-5 w-5 text-yellow-500" />
      case "error":
        return <XCircle className="h-5 w-5 text-red-500" />
      case "info":
        return <Info className="h-5 w-5 text-blue-500" />
      default:
        return <Bell className="h-5 w-5 text-gray-500" />
    }
  }

const getCategoryIcon = (category: string) => {
    switch (category) {
      case "agenda":
        return <Calendar className="h-4 w-4" />
      case "pacientes":
        return <Users className="h-4 w-4" />
      case "estoque":
        return <Package className="h-4 w-4" />
      case "financeiro":
        return <DollarSign className="h-4 w-4" />
      case "funcionarios":
        return <Briefcase className="h-4 w-4" />
      case "protético":
        return <Wrench className="h-4 w-4" />
      case "marketing":
        return <Megaphone className="h-4 w-4" />
      case "sistema":
        return <Settings className="h-4 w-4" />
      case "ia":
        return <Bot className="h-4 w-4" />
      default:
        return <Bell className="h-4 w-4" />
    }
  }

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "alta":
        return "bg-red-100 text-red-800 border-red-200"
      case "media":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "baixa":
        return "bg-green-100 text-green-800 border-green-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const filteredNotifications = notifications.filter((notification) => {
    const matchesSearch =
      (notification.title?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
      (notification.message?.toLowerCase() || "").includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "todas" || notification.category === selectedCategory
    const matchesType = selectedType === "todas" || notification.type === selectedType
    const matchesStatus =
      selectedStatus === "todas" ||
      (selectedStatus === "lidas" && notification.is_read) ||
      (selectedStatus === "nao-lidas" && !notification.is_read)

return matchesSearch && matchesCategory && matchesType && matchesStatus
  })

const unreadCount = notifications.filter((n) => !n.is_read).length
  const categories = [
    "todas",
    "agenda",
    "pacientes",
    "estoque",
    "financeiro",
    "funcionarios",
    "protético",
    "marketing",
    "sistema",
    "ia",
  ]
  const types = ["todas", "success", "warning", "error", "info"]
  const statuses = ["todas", "lidas", "nao-lidas"]

const markAsRead = async (id: number) => {
    try {
      const { error } = await supabase.from("notifications").update({ is_read: true }).eq("id", id)

if (error) {
        console.error("Erro ao marcar como lida:", error)
        return
      }

setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, is_read: true } : n)))
    } catch (error) {
      console.error("Erro ao marcar como lida:", error)
    }
  }

const markAsUnread = async (id: number) => {
    try {
      const { error } = await supabase.from("notifications").update({ is_read: false }).eq("id", id)

if (error) {
        console.error("Erro ao marcar como não lida:", error)
        return
      }

setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, is_read: false } : n)))
    } catch (error) {
      console.error("Erro ao marcar como não lida:", error)
    }
  }

const deleteNotification = async (id: number) => {
    try {
      const { error } = await supabase.from("notifications").delete().eq("id", id)

if (error) {
        console.error("Erro ao deletar notificação:", error)
        return
      }

setNotifications((prev) => prev.filter((n) => n.id !== id))
    } catch (error) {
      console.error("Erro ao deletar notificação:", error)
    }
  }

const markAllAsRead = async () => {
    try {
      const { error } = await supabase.from("notifications").update({ is_read: true }).eq("is_read", false)

if (error) {
        console.error("Erro ao marcar todas como lidas:", error)
        return
      }

setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })))
    } catch (error) {
      console.error("Erro ao marcar todas como lidas:", error)
    }
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-16 items-center justify-between px-6">
            <div className="flex items-center space-x-4">
              <h1 className="text-2xl font-bold">Notificações</h1>
              <Badge variant="secondary" className="text-sm">
                {unreadCount} não lidas
              </Badge>
            </div>
            <div className="flex items-center space-x-2">
              <Button onClick={refreshNotifications} variant="outline" size="sm" disabled={refreshing}>
                <RefreshCw className={cn("h-4 w-4 mr-2", refreshing && "animate-spin")} />
                Atualizar
              </Button>
              <Button onClick={markAllAsRead} variant="outline" size="sm">
                Marcar todas como lidas
              </Button>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6 space-y-6">
          {loading ? (
            <div className="flex items-center justify-center py-12">
              <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
              <span className="ml-2 text-muted-foreground">Carregando notificações...</span>
            </div>
          ) : (
            <>
              {/* Filters */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Filter className="h-5 w-5" />
                    <span>Filtros</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Pesquisar</label>
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          placeholder="Buscar notificações..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-10"
                        />
                      </div>
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Categoria</label>
                      <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {categories.map((category) => (
                            <SelectItem key={category} value={category}>
                              {category === "todas"
                                ? "Todas as categorias"
                                : category === "protético"
                                  ? "Controle Protético"
                                  : category === "ia"
                                    ? "IA"
                                    : category
                                      ? category.charAt(0).toUpperCase() + category.slice(1)
                                      : ""}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Tipo</label>
                      <Select value={selectedType} onValueChange={setSelectedType}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {types.map((type) => (
                            <SelectItem key={type} value={type}>
                              {type === "todas"
                                ? "Todos os tipos"
                                : type === "success"
                                  ? "Sucesso"
                                  : type === "warning"
                                    ? "Aviso"
                                    : type === "error"
                                      ? "Erro"
                                      : type === "info"
                                        ? "Informação"
                                        : type}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Status</label>
                      <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {statuses.map((status) => (
                            <SelectItem key={status} value={status}>
                              {status === "todas"
                                ? "Todas"
                                : status === "lidas"
                                  ? "Lidas"
                                  : status === "nao-lidas"
                                    ? "Não lidas"
                                    : status}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Notifications List */}
              <div className="space-y-4">
                {filteredNotifications.length === 0 ? (
                  <Card>
                    <CardContent className="flex flex-col items-center justify-center py-12">
                      <Bell className="h-12 w-12 text-muted-foreground mb-4" />
                      <h3 className="text-lg font-medium mb-2">Nenhuma notificação encontrada</h3>
                      <p className="text-muted-foreground text-center">
                        Não há notificações que correspondam aos filtros selecionados.
                      </p>
                    </CardContent>
                  </Card>
                ) : (
                  filteredNotifications.map((notification) => (
                    <Card
                      key={notification.id}
                      className={cn(
                        "transition-all duration-200 hover:shadow-md",
                        !notification.is_read && "border-l-4 border-l-blue-500 bg-blue-50/50",
                      )}
                    >
                      <CardContent className="p-4">
                        <div className="flex items-start space-x-4">
                          <div className="flex-shrink-0 mt-1">{getTypeIcon(notification.type)}</div>

<div className="flex-1 min-w-0">
                            <div className="flex items-start justify-between">
                              <div className="flex-1">
                                <div className="flex items-center space-x-2 mb-1">
                                  <h3 className={cn("text-sm font-medium", !notification.is_read && "font-semibold")}>
                                    {notification.title}
                                  </h3>
                                  {!notification.is_read && <div className="w-2 h-2 bg-blue-500 rounded-full" />}
                                </div>

<p className="text-sm text-muted-foreground mb-2">{notification.message}</p>

<div className="flex items-center space-x-4 text-xs text-muted-foreground">
                                  <div className="flex items-center space-x-1">
                                    <Clock className="h-3 w-3" />
                                    <span>{formatRelativeTime(notification.created_at)}</span>
                                  </div>

<div className="flex items-center space-x-1">
                                    {getCategoryIcon(notification.category)}
                                    <span className="capitalize">{notification.category}</span>
                                  </div>

<Badge
                                    variant="outline"
                                    className={cn("text-xs", getPriorityColor(notification.priority))}
                                  >
                                    {notification.priority
                                      ? notification.priority.charAt(0).toUpperCase() + notification.priority.slice(1)
                                      : "Baixa"}
                                  </Badge>
                                </div>
                              </div>

<div className="flex items-center space-x-1 ml-4">
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() =>
                                    notification.is_read ? markAsUnread(notification.id) : markAsRead(notification.id)
                                  }
                                  className="h-8 w-8"
                                >
                                  {notification.is_read ? (
                                    <MarkAsUnread className="h-4 w-4" />
                                  ) : (
                                    <MarkAsRead className="h-4 w-4" />
                                  )}
                                </Button>

<Button
                                  variant="ghost"
                                  size="icon"
                                  onClick={() => deleteNotification(notification.id)}
                                  className="h-8 w-8 text-red-500 hover:text-red-700"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))
                )}
              </div>

{/* Results Summary */}
              {filteredNotifications.length > 0 && (
                <div className="text-center text-sm text-muted-foreground">
                  Mostrando {filteredNotifications.length} de {notifications.length} notificações
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Sidebar } from "@/components/sidebar"
import { ProfileTabs } from "@/components/profile-tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Mail, Phone, Building, Award, Calendar } from "lucide-react"

export default async function ProfilePage() {
  const supabase = createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("user_profiles").select("*").eq("user_id", user.id).single()

return (
    <div className="flex h-screen bg-background">
      <Sidebar />

<div className="flex-1 overflow-auto">
        <div className="p-6">
          <div className="mb-6">
            <h1 className="text-3xl font-bold">Perfil do Usuário</h1>
            <p className="text-muted-foreground">Gerencie suas informações pessoais e preferências do sistema</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
            {/* Profile Overview */}
            <Card className="lg:col-span-1">
              <CardHeader className="text-center">
                <div className="flex justify-center mb-4">
                  <Avatar className="h-24 w-24">
                    <AvatarImage src={profile?.avatar_url || "/placeholder-user.jpg"} />
                    <AvatarFallback className="text-2xl">
                      {profile?.full_name?.charAt(0) || user.email?.charAt(0).toUpperCase()}
                    </AvatarFallback>
                  </Avatar>
                </div>
                <CardTitle>{profile?.full_name || "Nome não informado"}</CardTitle>
                <CardDescription className="flex items-center justify-center gap-2">
                  <Badge variant="secondary">{profile?.position || "Dentista"}</Badge>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-3 text-sm">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <span className="truncate">{user.email}</span>
                </div>
                {profile?.phone && (
                  <div className="flex items-center gap-3 text-sm">
                    <Phone className="h-4 w-4 text-muted-foreground" />
                    <span>{profile.phone}</span>
                  </div>
                )}
                {profile?.clinic_name && (
                  <div className="flex items-center gap-3 text-sm">
                    <Building className="h-4 w-4 text-muted-foreground" />
                    <span className="truncate">{profile.clinic_name}</span>
                  </div>
                )}
                {profile?.specialization && (
                  <div className="flex items-center gap-3 text-sm">
                    <Award className="h-4 w-4 text-muted-foreground" />
                    <span>{profile.specialization}</span>
                  </div>
                )}
                <div className="flex items-center gap-3 text-sm">
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                  <span>Membro desde {new Date(user.created_at).toLocaleDateString("pt-BR")}</span>
                </div>
              </CardContent>
            </Card>

{/* Profile Tabs */}
            <div className="lg:col-span-3">
              <ProfileTabs user={user} profile={profile} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/prosthetic/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { ProstheticKanban } from "@/components/prosthetic-kanban"
import { AddProstheticServiceDialog } from "@/components/add-prosthetic-service-dialog"
import { Button } from "@/components/ui/button"
import { Plus, Loader2 } from "lucide-react"
import {
  getAllProstheticServices,
  createProstheticService,
  updateProstheticServiceStatus,
  deleteProstheticService,
  type ProstheticService,
} from "@/lib/prosthetic-database"
import { useToast } from "@/hooks/use-toast"

export default function ProstheticPage() {
  const [services, setServices] = useState<ProstheticService[]>([])
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [loading, setLoading] = useState(true)
  const { toast } = useToast()

// Carregar serviços do Supabase
  useEffect(() => {
    loadServices()
  }, [])

const loadServices = async () => {
    setLoading(true)
    try {
      const data = await getAllProstheticServices()
      setServices(data)
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível carregar os serviços",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleAddService = async (
    serviceData: Omit<ProstheticService, "id" | "created_at" | "updated_at" | "professional" | "laboratory">,
  ) => {
    try {
      const newService = await createProstheticService(serviceData)
      if (newService) {
        await loadServices() // Recarregar lista
        toast({
          title: "Sucesso",
          description: "Serviço adicionado com sucesso",
        })
      } else {
        throw new Error("Falha ao criar serviço")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível adicionar o serviço",
        variant: "destructive",
      })
    }
  }

const handleUpdateStatus = async (id: string, status: ProstheticService["status"]) => {
    try {
      const success = await updateProstheticServiceStatus(id, status)
      if (success) {
        await loadServices() // Recarregar lista
        toast({
          title: "Sucesso",
          description: "Status atualizado com sucesso",
        })
      } else {
        throw new Error("Falha ao atualizar status")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível atualizar o status",
        variant: "destructive",
      })
    }
  }

const handleDeleteService = async (id: string) => {
    try {
      const success = await deleteProstheticService(id)
      if (success) {
        await loadServices() // Recarregar lista
        toast({
          title: "Sucesso",
          description: "Serviço excluído com sucesso",
        })
      } else {
        throw new Error("Falha ao excluir serviço")
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Não foi possível excluir o serviço",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <main className="flex-1 flex items-center justify-center">
          <div className="flex items-center space-x-2">
            <Loader2 className="h-6 w-6 animate-spin" />
            <span>Carregando serviços...</span>
          </div>
        </main>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 overflow-hidden">
        <div className="h-full flex flex-col">
          <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <div className="flex h-16 items-center justify-between px-6">
              <div>
                <h1 className="text-2xl font-semibold">Controle Protético</h1>
                <p className="text-sm text-muted-foreground">Gerencie os serviços protéticos da clínica</p>
              </div>
              <Button onClick={() => setIsAddDialogOpen(true)}>
                <Plus className="mr-2 h-4 w-4" />
                Adicionar Serviço
              </Button>
            </div>
          </header>

<AddProstheticServiceDialog
        open={isAddDialogOpen}
        onOpenChange={setIsAddDialogOpen}
        onAddService={handleAddService}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notifications/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/patients/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]sql:file="scripts/001_create_appointments_table.sql" isMerged="true"
-- Creating appointments table for Supabase
CREATE TABLE IF NOT EXISTS appointments (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  professional_id VARCHAR(255) NOT NULL,
  patient_name VARCHAR(255) NOT NULL,
  patient_email VARCHAR(255),
  patient_phone VARCHAR(20),
  start_time TIME NOT NULL,
  end_time TIME NOT NULL,
  date DATE NOT NULL,
  type VARCHAR(50) NOT NULL CHECK (type IN ('consulta', 'compromisso', 'evento', 'aviso', 'retorno')),
  color VARCHAR(7) NOT NULL,
  status VARCHAR(50) DEFAULT 'agendado' CHECK (status IN ('agendado', 'confirmado', 'em_andamento', 'concluido', 'cancelado', 'nao_compareceu')),
  is_first_consultation BOOLEAN DEFAULT FALSE,
  referral_source VARCHAR(100),
  procedures TEXT[],
  notes TEXT,
  category VARCHAR(50),
  scheduled_by VARCHAR(255) DEFAULT 'Sistema',
  scheduled_at TIMESTAMP DEFAULT NOW(),
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- Create index for better query performance
CREATE INDEX IF NOT EXISTS idx_appointments_date ON appointments(date);
CREATE INDEX IF NOT EXISTS idx_appointments_professional ON appointments(professional_id);
CREATE INDEX IF NOT EXISTS idx_appointments_type ON appointments(type);
[V0_FILE]sql:file="scripts/002_seed_test_appointments.sql" isMerged="true"
-- Creating test appointments for days 22, 23, and 24
INSERT INTO appointments (
  professional_id, 
  patient_name, 
  patient_email, 
  patient_phone, 
  start_time, 
  end_time, 
  date, 
  type, 
  color, 
  status,
  is_first_consultation,
  referral_source,
  procedures,
  notes,
  category
) VALUES 
-- Appointments for day 22
('prof-1', 'Maria Silva', 'maria.silva@email.com', '(11) 99999-1111', '09:00', '10:00', '2025-01-22', 'consulta', '#3B82F6', 'agendado', true, 'Google', ARRAY['Consulta Inicial', 'Limpeza'], 'Primeira consulta - paciente com sensibilidade', 'rotina'),
('prof-1', 'João Santos', 'joao.santos@email.com', '(11) 99999-2222', '10:30', '11:30', '2025-01-22', 'consulta', '#3B82F6', 'confirmado', false, NULL, ARRAY['Restauração'], 'Restauração no dente 16', 'rotina'),
('prof-2', 'Ana Costa', 'ana.costa@email.com', '(11) 99999-3333', '14:00', '15:00', '2025-01-22', 'consulta', '#10B981', 'agendado', false, NULL, ARRAY['Canal'], 'Tratamento de canal - segunda sessão', 'rotina'),
('prof-1', 'Reunião Equipe', NULL, NULL, '12:00', '13:00', '2025-01-22', 'evento', '#F59E0B', 'agendado', NULL, NULL, NULL, 'Reunião mensal da equipe', NULL),

-- Appointments for day 23
('prof-1', 'Carlos Oliveira', 'carlos.oliveira@email.com', '(11) 99999-4444', '08:30', '09:30', '2025-01-23', 'consulta', '#3B82F6', 'agendado', true, 'Instagram', ARRAY['Consulta Inicial', 'Avaliação'], 'Paciente interessado em implante', 'avaliacao'),
('prof-2', 'Fernanda Lima', 'fernanda.lima@email.com', '(11) 99999-5555', '09:00', '10:30', '2025-01-23', 'consulta', '#10B981', 'confirmado', false, NULL, ARRAY['Implante'], 'Colocação de implante - procedimento longo', 'rotina'),
('prof-1', 'Pedro Almeida', 'pedro.almeida@email.com', '(11) 99999-6666', '15:00', '16:00', '2025-01-23', 'consulta', '#3B82F6', 'agendado', false, NULL, ARRAY['Retorno'], 'Retorno pós-cirúrgico', 'retorno'),
('prof-1', 'Lembrete: Pedido Material', NULL, NULL, '11:00', '11:15', '2025-01-23', 'aviso', '#EF4444', 'agendado', NULL, NULL, NULL, 'Lembrar de fazer pedido de material odontológico', NULL),

-- Appointments for day 24
('prof-2', 'Lucia Ferreira', 'lucia.ferreira@email.com', '(11) 99999-7777', '08:00', '09:00', '2025-01-24', 'consulta', '#10B981', 'agendado', true, 'Indicação de amigo', ARRAY['Consulta Inicial', 'Ortodontia'], 'Avaliação para aparelho ortodôntico', 'avaliacao'),
('prof-1', 'Roberto Souza', 'roberto.souza@email.com', '(11) 99999-8888', '10:00', '11:00', '2025-01-24', 'consulta', '#3B82F6', 'confirmado', false, NULL, ARRAY['Limpeza', 'Clareamento'], 'Limpeza + início do clareamento', 'rotina'),
('prof-2', 'Mariana Rocha', 'mariana.rocha@email.com', '(11) 99999-9999', '14:30', '16:00', '2025-01-24', 'consulta', '#10B981', 'agendado', false, NULL, ARRAY['Cirurgia'], 'Extração de siso - procedimento complexo', 'urgencia'),
('prof-1', 'Compromisso Banco', NULL, NULL, '16:30', '17:30', '2025-01-24', 'compromisso', '#8B5CF6', 'agendado', NULL, NULL, NULL, 'Reunião no banco para financiamento', NULL);
[V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true"
"use client"

import { useActionState, useState } from "react"
import { useFormStatus } from "react-dom"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Loader2, Stethoscope, Eye, EyeOff } from "lucide-react"
import Link from "next/link"
import { signIn } from "@/lib/actions"

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <Button
      type="submit"
      disabled={pending}
      className="w-full bg-blue-600 hover:bg-blue-700 text-white py-6 text-lg font-medium rounded-lg h-[60px]"
    >
      {pending ? (
        <>
          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          Entrando...
        </>
      ) : (
        "Entrar"
      )}
    </Button>
  )
}

export default function LoginForm() {
  const [state, formAction] = useActionState(signIn, null)
  const [showPassword, setShowPassword] = useState(false)
  const [rememberMe, setRememberMe] = useState(false)

return (
    <Card className="w-full max-w-md shadow-2xl border-0">
      <CardHeader className="space-y-4 text-center pb-8">
        <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
          <Stethoscope className="h-8 w-8 text-blue-600" />
        </div>
        <div>
          <CardTitle className="text-3xl font-bold text-gray-900">RisoArte</CardTitle>
          <CardDescription className="text-lg text-gray-600 mt-2">Sistema de Gestão Odontológica</CardDescription>
        </div>
      </CardHeader>

<CardContent className="space-y-6">
        <form action={formAction} className="space-y-6">
          {state?.error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {state.error}
            </div>
          )}

<div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email
              </label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="seu@email.com"
                required
                className="h-12 text-base"
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Senha
              </label>
              <div className="relative">
                <Input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  required
                  className="h-12 text-base pr-10"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-gray-400" />
                  ) : (
                    <Eye className="h-4 w-4 text-gray-400" />
                  )}
                </Button>
              </div>
            </div>
          </div>

<div className="flex items-center space-x-2">
            <Checkbox
              id="rememberMe"
              name="rememberMe"
              checked={rememberMe}
              onCheckedChange={(checked) => setRememberMe(!!checked)}
            />
            <label htmlFor="rememberMe" className="text-sm font-medium text-gray-700 cursor-pointer">
              Lembrar de mim
            </label>
          </div>

<div className="text-center text-gray-600">
            Não tem uma conta?{" "}
            <Link href="/auth/signup" className="text-blue-600 hover:text-blue-700 font-medium hover:underline">
              Cadastre-se
            </Link>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/signup-form.tsx" isMerged="true"
"use client"

import { useActionState, useState } from "react"
import { useFormStatus } from "react-dom"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Stethoscope, Eye, EyeOff } from "lucide-react"
import Link from "next/link"
import { signUp } from "@/lib/actions"

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <Button
      type="submit"
      disabled={pending}
      className="w-full bg-blue-600 hover:bg-blue-700 text-white py-6 text-lg font-medium rounded-lg h-[60px]"
    >
      {pending ? (
        <>
          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          Cadastrando...
        </>
      ) : (
        "Criar Conta"
      )}
    </Button>
  )
}

export default function SignUpForm() {
  const [state, formAction] = useActionState(signUp, null)
  const [passwordError, setPasswordError] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

const handlePasswordValidation = (formData: FormData) => {
    const password = formData.get("password") as string
    const confirmPassword = formData.get("confirmPassword") as string

if (password !== confirmPassword) {
      setPasswordError("As senhas não coincidem")
      return false
    }

setPasswordError("")
    return true
  }

const enhancedFormAction = (formData: FormData) => {
    if (handlePasswordValidation(formData)) {
      formAction(formData)
    }
  }

return (
    <Card className="w-full max-w-md shadow-2xl border-0">
      <CardHeader className="space-y-4 text-center pb-8">
        <div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
          <Stethoscope className="h-8 w-8 text-blue-600" />
        </div>
        <div>
          <CardTitle className="text-3xl font-bold text-gray-900">RisoArte</CardTitle>
          <CardDescription className="text-lg text-gray-600 mt-2">Crie sua conta no sistema</CardDescription>
        </div>
      </CardHeader>

<CardContent className="space-y-6">
        <form action={enhancedFormAction} className="space-y-6">
          {state?.error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {state.error}
            </div>
          )}

{state?.success && (
            <div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
              {state.success}
            </div>
          )}

{passwordError && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
              {passwordError}
            </div>
          )}

<div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="fullName" className="block text-sm font-medium text-gray-700">
                Nome Completo
              </label>
              <Input
                id="fullName"
                name="fullName"
                type="text"
                placeholder="Dr(a). Seu Nome"
                required
                className="h-12 text-base"
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="clinicName" className="block text-sm font-medium text-gray-700">
                Nome da Clínica
              </label>
              <Input
                id="clinicName"
                name="clinicName"
                type="text"
                placeholder="Nome da sua clínica"
                className="h-12 text-base"
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email
              </label>
              <Input
                id="email"
                name="email"
                type="email"
                placeholder="seu@email.com"
                required
                className="h-12 text-base"
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                Senha
              </label>
              <div className="relative">
                <Input
                  id="password"
                  name="password"
                  type={showPassword ? "text" : "password"}
                  required
                  className="h-12 text-base pr-10"
                  minLength={6}
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowPassword(!showPassword)}
                >
                  {showPassword ? (
                    <EyeOff className="h-4 w-4 text-gray-400" />
                  ) : (
                    <Eye className="h-4 w-4 text-gray-400" />
                  )}
                </Button>
              </div>
              <p className="text-xs text-gray-500">Mínimo de 6 caracteres</p>
            </div>
            <div className="space-y-2">
              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
                Confirmar Senha
              </label>
              <div className="relative">
                <Input
                  id="confirmPassword"
                  name="confirmPassword"
                  type={showConfirmPassword ? "text" : "password"}
                  required
                  className="h-12 text-base pr-10"
                  minLength={6}
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                >
                  {showConfirmPassword ? (
                    <EyeOff className="h-4 w-4 text-gray-400" />
                  ) : (
                    <Eye className="h-4 w-4 text-gray-400" />
                  )}
                </Button>
              </div>
            </div>
          </div>

<div className="text-center text-gray-600">
            Já tem uma conta?{" "}
            <Link href="/auth/login" className="text-blue-600 hover:text-blue-700 font-medium hover:underline">
              Faça login
            </Link>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/marketing/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface Campaign {
  id: string
  name: string
  type: "email" | "sms" | "social" | "promocao"
  status: "ativa" | "pausada" | "finalizada" | "rascunho"
  startDate: string
  endDate?: string
  audience: number
  sent: number
  opened: number
  clicked: number
  converted: number
  budget: number
  spent: number
  description: string
}

interface Promotion {
  id: string
  name: string
  type: "desconto" | "combo" | "cashback" | "fidelidade"
  value: number
  valueType: "percentage" | "fixed"
  startDate: string
  endDate: string
  status: "ativa" | "pausada" | "expirada"
  usageLimit: number
  usageCount: number
  conditions: string
  code?: string
}

export default function MarketingPage() {
  const [newCampaignDialog, setNewCampaignDialog] = useState(false)
  const [newPromotionDialog, setNewPromotionDialog] = useState(false)
  const [whatsappConnected, setWhatsappConnected] = useState(false)
  const [whatsappSettings, setWhatsappSettings] = useState({
    aiAutomation: true,
    autoTimeMessages: true,
    welcomeMessage: true,
    businessHours: true,
  })

const [campaigns] = useState<Campaign[]>([
    {
      id: "1",
      name: "Campanha de Limpeza Dental",
      type: "email",
      status: "ativa",
      startDate: "2025-07-01",
      endDate: "2025-08-31",
      audience: 1200,
      sent: 1200,
      opened: 480,
      clicked: 96,
      converted: 24,
      budget: 500,
      spent: 350,
      description: "Promoção especial para limpeza dental com 30% de desconto",
    },
    {
      id: "2",
      name: "Retorno de Pacientes Inativos",
      type: "sms",
      status: "ativa",
      startDate: "2025-07-15",
      audience: 300,
      sent: 300,
      opened: 270,
      clicked: 45,
      converted: 12,
      budget: 200,
      spent: 150,
      description: "Campanha para reativar pacientes que não visitam há mais de 6 meses",
    },
    {
      id: "3",
      name: "Dia do Dentista - Redes Sociais",
      type: "social",
      status: "finalizada",
      startDate: "2025-10-01",
      endDate: "2025-10-07",
      audience: 5000,
      sent: 5000,
      opened: 2500,
      clicked: 500,
      converted: 50,
      budget: 800,
      spent: 800,
      description: "Campanha especial para o Dia do Dentista com conteúdo educativo",
    },
  ])

const [promotions] = useState<Promotion[]>([
    {
      id: "1",
      name: "Primeira Consulta Grátis",
      type: "desconto",
      value: 100,
      valueType: "percentage",
      startDate: "2025-07-01",
      endDate: "2025-12-31",
      status: "ativa",
      usageLimit: 100,
      usageCount: 23,
      conditions: "Válido apenas para novos pacientes",
      code: "PRIMEIRA2025",
    },
    {
      id: "2",
      name: "Combo Limpeza + Flúor",
      type: "combo",
      value: 50,
      valueType: "fixed",
      startDate: "2025-08-01",
      endDate: "2025-08-31",
      status: "ativa",
      usageLimit: 50,
      usageCount: 12,
      conditions: "Limpeza + aplicação de flúor por R$ 120",
      code: "COMBO50",
    },
    {
      id: "3",
      name: "Cashback Tratamento Ortodôntico",
      type: "cashback",
      value: 10,
      valueType: "percentage",
      startDate: "2025-07-01",
      endDate: "2025-09-30",
      status: "ativa",
      usageLimit: 20,
      usageCount: 5,
      conditions: "10% de cashback em tratamentos ortodônticos acima de R$ 2000",
    },
  ])

const [whatsappMessages] = useState([
    {
      id: "1",
      contact: "Maria Silva",
      phone: "+55 11 99999-1234",
      lastMessage: "Gostaria de agendar uma consulta",
      timestamp: "2025-08-23T10:30:00",
      unread: true,
      type: "received",
    },
    {
      id: "2",
      contact: "João Santos",
      phone: "+55 11 99999-5678",
      lastMessage: "Obrigado pelo atendimento!",
      timestamp: "2025-08-23T09:15:00",
      unread: false,
      type: "sent",
    },
    {
      id: "3",
      contact: "Ana Costa",
      phone: "+55 11 99999-9012",
      lastMessage: "Qual o horário de funcionamento?",
      timestamp: "2025-08-23T08:45:00",
      unread: true,
      type: "received",
    },
  ])

const getStatusBadge = (status: string) => {
    switch (status) {
      case "ativa":
        return <Badge className="bg-green-100 text-green-800">Ativa</Badge>
      case "pausada":
        return <Badge className="bg-yellow-100 text-yellow-800">Pausada</Badge>
      case "finalizada":
        return <Badge className="bg-gray-100 text-gray-800">Finalizada</Badge>
      case "expirada":
        return <Badge className="bg-red-100 text-red-800">Expirada</Badge>
      case "rascunho":
        return <Badge variant="outline">Rascunho</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "email":
        return <Mail className="h-4 w-4" />
      case "sms":
        return <MessageSquare className="h-4 w-4" />
      case "social":
        return <Share2 className="h-4 w-4" />
      case "promocao":
        return <Gift className="h-4 w-4" />
      default:
        return <Megaphone className="h-4 w-4" />
    }
  }

const calculateROI = (campaign: Campaign) => {
    if (campaign.spent === 0) return 0
    const revenue = campaign.converted * 150 // Assumindo ticket médio de R$ 150
    return (((revenue - campaign.spent) / campaign.spent) * 100).toFixed(1)
  }

<div className="flex items-center space-x-2">
              <Button variant="outline" size="sm">
                <BarChart3 className="mr-2 h-4 w-4" />
                Relatórios
              </Button>
              <Button size="sm" onClick={() => setNewCampaignDialog(true)}>
                <Plus className="mr-2 h-4 w-4" />
                Nova Campanha
              </Button>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          {/* Métricas gerais */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Users className="mr-2 h-4 w-4" />
                  Alcance Total
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">6.5K</div>
                <p className="text-xs text-muted-foreground">+12% vs mês anterior</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <TrendingUp className="mr-2 h-4 w-4" />
                  Taxa de Conversão
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">2.8%</div>
                <p className="text-xs text-muted-foreground">+0.5% vs mês anterior</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <DollarSign className="mr-2 h-4 w-4" />
                  ROI Médio
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">285%</div>
                <p className="text-xs text-muted-foreground">+45% vs mês anterior</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center">
                  <Target className="mr-2 h-4 w-4" />
                  Campanhas Ativas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{campaigns.filter((c) => c.status === "ativa").length}</div>
                <p className="text-xs text-muted-foreground">de {campaigns.length} total</p>
              </CardContent>
            </Card>
          </div>

{/* Tabs principais */}
          <Tabs defaultValue="campaigns" className="space-y-4">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="campaigns">Campanhas</TabsTrigger>
              <TabsTrigger value="promotions">Promoções</TabsTrigger>
              <TabsTrigger value="whatsapp">WhatsApp</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
            </TabsList>

<TabsContent value="campaigns">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Campanhas de Marketing</CardTitle>
                    <Button size="sm" onClick={() => setNewCampaignDialog(true)}>
                      <Plus className="mr-2 h-4 w-4" />
                      Nova Campanha
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Campanha</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Período</TableHead>
                        <TableHead>Alcance</TableHead>
                        <TableHead>Conversões</TableHead>
                        <TableHead>ROI</TableHead>
                        <TableHead>Ações</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {campaigns.map((campaign) => (
                        <TableRow key={campaign.id}>
                          <TableCell>
                            <div>
                              <div className="font-medium">{campaign.name}</div>
                              <div className="text-sm text-muted-foreground">{campaign.description}</div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center">
                              {getTypeIcon(campaign.type)}
                              <span className="ml-2 capitalize">{campaign.type}</span>
                            </div>
                          </TableCell>
                          <TableCell>{getStatusBadge(campaign.status)}</TableCell>
                          <TableCell>
                            <div className="text-sm">
                              <div>{new Date(campaign.startDate).toLocaleDateString("pt-BR")}</div>
                              {campaign.endDate && (
                                <div className="text-muted-foreground">
                                  até {new Date(campaign.endDate).toLocaleDateString("pt-BR")}
                                </div>
                              )}
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="text-sm">
                              <div>{campaign.sent.toLocaleString()}</div>
                              <div className="text-muted-foreground">
                                {((campaign.opened / campaign.sent) * 100).toFixed(1)}% abertura
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="text-sm">
                              <div className="font-medium">{campaign.converted}</div>
                              <div className="text-muted-foreground">
                                {((campaign.converted / campaign.sent) * 100).toFixed(1)}% taxa
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="text-sm font-medium text-green-600">+{calculateROI(campaign)}%</div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center space-x-2">
                              <Button variant="ghost" size="sm">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="sm">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="sm">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="promotions">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Promoções Ativas</CardTitle>
                    <Button size="sm" onClick={() => setNewPromotionDialog(true)}>
                      <Plus className="mr-2 h-4 w-4" />
                      Nova Promoção
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {promotions.map((promotion) => (
                      <Card key={promotion.id}>
                        <CardHeader className="pb-3">
                          <div className="flex items-center justify-between">
                            <CardTitle className="text-lg">{promotion.name}</CardTitle>
                            {getStatusBadge(promotion.status)}
                          </div>
                        </CardHeader>
                        <CardContent className="space-y-4">
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-muted-foreground">Desconto</span>
                            <span className="font-medium">
                              {promotion.valueType === "percentage" ? `${promotion.value}%` : `R$ ${promotion.value}`}
                            </span>
                          </div>

{promotion.code && (
                            <div className="flex items-center justify-between">
                              <span className="text-sm text-muted-foreground">Código</span>
                              <Badge variant="outline">{promotion.code}</Badge>
                            </div>
                          )}

<div className="flex items-center justify-between">
                            <span className="text-sm text-muted-foreground">Uso</span>
                            <span className="text-sm">
                              {promotion.usageCount}/{promotion.usageLimit}
                            </span>
                          </div>

<div className="text-sm text-muted-foreground">
                            Válido até {new Date(promotion.endDate).toLocaleDateString("pt-BR")}
                          </div>

<div className="text-xs text-muted-foreground">{promotion.conditions}</div>

<div className="flex space-x-2">
                            <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                              <Edit className="mr-2 h-3 w-3" />
                              Editar
                            </Button>
                            <Button variant="outline" size="sm" className="flex-1 bg-transparent">
                              <Share2 className="mr-2 h-3 w-3" />
                              Compartilhar
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="whatsapp">
              <div className="space-y-6">
                {/* WhatsApp Connection Status */}
                <Card>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <CardTitle className="flex items-center">
                        <MessageCircle className="mr-2 h-5 w-5 text-green-500" />
                        Status da Conexão WhatsApp
                      </CardTitle>
                      <div className="flex items-center space-x-2">
                        {whatsappConnected ? (
                          <Badge className="bg-green-100 text-green-800">
                            <Wifi className="mr-1 h-3 w-3" />
                            Conectado
                          </Badge>
                        ) : (
                          <Badge className="bg-red-100 text-red-800">
                            <WifiOff className="mr-1 h-3 w-3" />
                            Desconectado
                          </Badge>
                        )}
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    {!whatsappConnected ? (
                      <div className="text-center space-y-4">
                        <div className="mx-auto w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
                          <QrCode className="h-24 w-24 text-gray-400" />
                        </div>
                        <div>
                          <h3 className="text-lg font-medium mb-2">Conectar WhatsApp</h3>
                          <p className="text-muted-foreground mb-4">
                            Escaneie o QR Code com seu WhatsApp para conectar a API W-Api
                          </p>
                          <div className="flex justify-center space-x-2">
                            <Button onClick={() => setWhatsappConnected(true)}>
                              <RefreshCw className="mr-2 h-4 w-4" />
                              Gerar QR Code
                            </Button>
                            <Button variant="outline">
                              <Settings className="mr-2 h-4 w-4" />
                              Configurar API
                            </Button>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="text-center space-y-4">
                        <div className="flex items-center justify-center space-x-2 text-green-600">
                          <CheckCircle className="h-6 w-6" />
                          <span className="text-lg font-medium">WhatsApp Conectado</span>
                        </div>
                        <p className="text-muted-foreground">
                          Sua conta WhatsApp está conectada e funcionando via W-Api
                        </p>
                        <Button variant="outline" onClick={() => setWhatsappConnected(false)}>
                          Desconectar
                        </Button>
                      </div>
                    )}
                  </CardContent>
                </Card>

{whatsappConnected && (
                  <>
                    {/* WhatsApp Messages */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center">
                            <MessageSquare className="mr-2 h-5 w-5" />
                            Mensagens Recentes
                          </CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="space-y-4">
                            {whatsappMessages.map((message) => (
                              <div
                                key={message.id}
                                className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 cursor-pointer"
                              >
                                <div className="flex-1">
                                  <div className="flex items-center justify-between mb-1">
                                    <span className="font-medium">{message.contact}</span>
                                    <span className="text-xs text-muted-foreground">
                                      {new Date(message.timestamp).toLocaleTimeString("pt-BR", {
                                        hour: "2-digit",
                                        minute: "2-digit",
                                      })}
                                    </span>
                                  </div>
                                  <p className="text-sm text-muted-foreground">{message.phone}</p>
                                  <p className="text-sm mt-1">{message.lastMessage}</p>
                                </div>
                                <div className="flex items-center space-x-2">
                                  {message.unread && <div className="w-2 h-2 bg-blue-500 rounded-full"></div>}
                                  <Button variant="ghost" size="sm">
                                    <Send className="h-4 w-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}
                          </div>
                          <Button className="w-full mt-4 bg-transparent" variant="outline">
                            Ver Todas as Conversas
                          </Button>
                        </CardContent>
                      </Card>

{/* WhatsApp Settings */}
                      <Card>
                        <CardHeader>
                          <CardTitle className="flex items-center">
                            <Settings className="mr-2 h-5 w-5" />
                            Configurações Avançadas
                          </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-6">
                          <div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                              <Label className="text-base flex items-center">
                                <Bot className="mr-2 h-4 w-4" />
                                IA de Automatização
                              </Label>
                              <p className="text-sm text-muted-foreground">Respostas automáticas inteligentes</p>
                            </div>
                            <Switch
                              checked={whatsappSettings.aiAutomation}
                              onCheckedChange={(checked) =>
                                setWhatsappSettings((prev) => ({ ...prev, aiAutomation: checked }))
                              }
                            />
                          </div>

<div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                              <Label className="text-base flex items-center">
                                <Clock className="mr-2 h-4 w-4" />
                                Mensagens de Ponto Automáticas
                              </Label>
                              <p className="text-sm text-muted-foreground">Notificar funcionários sobre horários</p>
                            </div>
                            <Switch
                              checked={whatsappSettings.autoTimeMessages}
                              onCheckedChange={(checked) =>
                                setWhatsappSettings((prev) => ({ ...prev, autoTimeMessages: checked }))
                              }
                            />
                          </div>

<div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                              <Label className="text-base flex items-center">
                                <MessageCircle className="mr-2 h-4 w-4" />
                                Mensagem de Boas-vindas
                              </Label>
                              <p className="text-sm text-muted-foreground">Saudar novos contatos automaticamente</p>
                            </div>
                            <Switch
                              checked={whatsappSettings.welcomeMessage}
                              onCheckedChange={(checked) =>
                                setWhatsappSettings((prev) => ({ ...prev, welcomeMessage: checked }))
                              }
                            />
                          </div>

<div className="flex items-center justify-between">
                            <div className="space-y-0.5">
                              <Label className="text-base flex items-center">
                                <AlertCircle className="mr-2 h-4 w-4" />
                                Horário Comercial
                              </Label>
                              <p className="text-sm text-muted-foreground">Respostas automáticas fora do horário</p>
                            </div>
                            <Switch
                              checked={whatsappSettings.businessHours}
                              onCheckedChange={(checked) =>
                                setWhatsappSettings((prev) => ({ ...prev, businessHours: checked }))
                              }
                            />
                          </div>

<div className="pt-4 border-t">
                            <Button className="w-full">
                              <Settings className="mr-2 h-4 w-4" />
                              Configurações Avançadas
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    </div>

{/* WhatsApp Analytics */}
                    <Card>
                      <CardHeader>
                        <CardTitle>Estatísticas do WhatsApp</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                          <div className="text-center">
                            <div className="text-2xl font-bold text-green-600">156</div>
                            <p className="text-sm text-muted-foreground">Mensagens Enviadas</p>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-blue-600">89</div>
                            <p className="text-sm text-muted-foreground">Mensagens Recebidas</p>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-purple-600">23</div>
                            <p className="text-sm text-muted-foreground">Conversas Ativas</p>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-orange-600">12</div>
                            <p className="text-sm text-muted-foreground">Agendamentos</p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </>
                )}
              </div>
            </TabsContent>

<TabsContent value="analytics">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Performance por Canal</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <Mail className="h-4 w-4 text-blue-500" />
                          <span>Email Marketing</span>
                        </div>
                        <div className="text-right">
                          <div className="font-medium">1,200 enviados</div>
                          <div className="text-sm text-muted-foreground">40% abertura</div>
                        </div>
                      </div>

<div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <MessageSquare className="h-4 w-4 text-green-500" />
                          <span>SMS</span>
                        </div>
                        <div className="text-right">
                          <div className="font-medium">300 enviados</div>
                          <div className="text-sm text-muted-foreground">90% abertura</div>
                        </div>
                      </div>

<div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <Instagram className="h-4 w-4 text-pink-500" />
                          <span>Instagram</span>
                        </div>
                        <div className="text-right">
                          <div className="font-medium">2,500 alcance</div>
                          <div className="text-sm text-muted-foreground">15% engajamento</div>
                        </div>
                      </div>

<div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2">
                          <Facebook className="h-4 w-4 text-blue-600" />
                          <span>Facebook</span>
                        </div>
                        <div className="text-right">
                          <div className="font-medium">2,500 alcance</div>
                          <div className="text-sm text-muted-foreground">12% engajamento</div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Melhores Promoções</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {promotions
                        .sort((a, b) => b.usageCount - a.usageCount)
                        .slice(0, 3)
                        .map((promotion, index) => (
                          <div key={promotion.id} className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-medium">
                                {index + 1}
                              </div>
                              <div>
                                <div className="font-medium">{promotion.name}</div>
                                <div className="text-sm text-muted-foreground">{promotion.usageCount} usos</div>
                              </div>
                            </div>
                            <div className="text-right">
                              <div className="font-medium">
                                {promotion.valueType === "percentage" ? `${promotion.value}%` : `R$ ${promotion.value}`}
                              </div>
                              <div className="text-sm text-muted-foreground">
                                {((promotion.usageCount / promotion.usageLimit) * 100).toFixed(0)}% usado
                              </div>
                            </div>
                          </div>
                        ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>

{/* Dialog para nova campanha */}
      <Dialog open={newCampaignDialog} onOpenChange={setNewCampaignDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Nova Campanha de Marketing</DialogTitle>
            <DialogDescription>Crie uma nova campanha para engajar seus pacientes</DialogDescription>
          </DialogHeader>

<div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Nome da Campanha</label>
                <Input placeholder="Ex: Promoção de Verão" />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Tipo</label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="email">Email Marketing</SelectItem>
                    <SelectItem value="sms">SMS</SelectItem>
                    <SelectItem value="social">Redes Sociais</SelectItem>
                    <SelectItem value="promocao">Promoção</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Data de Início</label>
                <Input type="date" />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Data de Fim</label>
                <Input type="date" />
              </div>
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Público-Alvo</label>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Selecione o público" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todos">Todos os pacientes</SelectItem>
                  <SelectItem value="ativos">Pacientes ativos</SelectItem>
                  <SelectItem value="inativos">Pacientes inativos</SelectItem>
                  <SelectItem value="novos">Novos pacientes</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Descrição</label>
              <Textarea placeholder="Descreva o objetivo da campanha..." />
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Orçamento (R$)</label>
              <Input type="number" placeholder="0,00" />
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setNewCampaignDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={() => setNewCampaignDialog(false)}>Criar Campanha</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Dialog para nova promoção */}
      <Dialog open={newPromotionDialog} onOpenChange={setNewPromotionDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Nova Promoção</DialogTitle>
            <DialogDescription>Crie uma nova promoção para atrair e fidelizar pacientes</DialogDescription>
          </DialogHeader>

<div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Nome da Promoção</label>
                <Input placeholder="Ex: Desconto de Verão" />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Tipo</label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione o tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="desconto">Desconto</SelectItem>
                    <SelectItem value="combo">Combo</SelectItem>
                    <SelectItem value="cashback">Cashback</SelectItem>
                    <SelectItem value="fidelidade">Fidelidade</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="grid grid-cols-3 gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Valor</label>
                <Input type="number" placeholder="0" />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Tipo do Valor</label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="percentage">Porcentagem (%)</SelectItem>
                    <SelectItem value="fixed">Valor Fixo (R$)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">Código</label>
                <Input placeholder="PROMO2025" />
              </div>
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Limite de Uso</label>
              <Input type="number" placeholder="100" />
            </div>

<div className="space-y-2">
              <label className="text-sm font-medium">Condições</label>
              <Textarea placeholder="Descreva as condições da promoção..." />
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setNewPromotionDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={() => setNewPromotionDialog(false)}>Criar Promoção</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whatsapp/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/diverse-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-woman-portrait-1kEzS9tpkfIxvwLlduyviCsXZ40QAf.png" isMerged="true"
[V0_FILE]png:file="public/thoughtful-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/thoughtful-man-MfMm8o08cN6dwbWAxCUruh1fLHOQo9.png" isMerged="true"
[V0_FILE]png:file="public/elderly-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elderly-woman-ownCpirxM6Kk1MwcpJKVjwsfWiJ5Iu.png" isMerged="true"
[V0_FILE]png:file="public/middle-aged-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/middle-aged-man-ROJ7YSyL23bbKHhE8KCedInSJ0xqwZ.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/employees/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { EmployeesTable } from "@/components/employees-table"
import { AddEmployeeDialog } from "@/components/add-employee-dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search, Download, Upload } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

const mockEmployees: Employee[] = [
  {
    id: "1",
    name: "Dr. João Silva",
    email: "joao.silva@clinica.com",
    phone: "(11) 99999-1111",
    specialty: "Ortodontia",
    role: "doutor",
    is_active: true,
    hire_date: "2023-01-15",
    salary: 8000,
    performance_score: 95,
    birth_date: "1985-03-20",
    cpf: "123.456.789-01",
    rg: "12.345.678-9",
    address: "Rua das Flores, 123 - São Paulo, SP",
    emergency_contact_name: "Maria Silva",
    emergency_contact_phone: "(11) 98888-1111",
    created_at: "2023-01-15T10:00:00Z",
    updated_at: "2023-01-15T10:00:00Z",
  },
  {
    id: "2",
    name: "Dra. Ana Costa",
    email: "ana.costa@clinica.com",
    phone: "(11) 99999-2222",
    specialty: "Endodontia",
    role: "doutor",
    is_active: true,
    hire_date: "2023-02-01",
    salary: 7500,
    performance_score: 88,
    birth_date: "1990-07-15",
    cpf: "987.654.321-01",
    rg: "98.765.432-1",
    address: "Av. Paulista, 456 - São Paulo, SP",
    emergency_contact_name: "Carlos Costa",
    emergency_contact_phone: "(11) 98888-2222",
    created_at: "2023-02-01T10:00:00Z",
    updated_at: "2023-02-01T10:00:00Z",
  },
  {
    id: "3",
    name: "Maria Santos",
    email: "maria.santos@clinica.com",
    phone: "(11) 99999-3333",
    role: "recepcionista",
    is_active: true,
    hire_date: "2023-03-10",
    salary: 2500,
    performance_score: 92,
    birth_date: "1995-12-05",
    cpf: "456.789.123-01",
    rg: "45.678.912-3",
    address: "Rua da Consolação, 789 - São Paulo, SP",
    emergency_contact_name: "José Santos",
    emergency_contact_phone: "(11) 98888-3333",
    created_at: "2023-03-10T10:00:00Z",
    updated_at: "2023-03-10T10:00:00Z",
  },
  {
    id: "4",
    name: "Carlos Oliveira",
    email: "carlos.oliveira@clinica.com",
    phone: "(11) 99999-4444",
    role: "auxiliar",
    is_active: false,
    hire_date: "2022-11-20",
    salary: 2000,
    performance_score: 75,
    birth_date: "1988-09-12",
    cpf: "789.123.456-01",
    rg: "78.912.345-6",
    address: "Rua Augusta, 321 - São Paulo, SP",
    emergency_contact_name: "Lucia Oliveira",
    emergency_contact_phone: "(11) 98888-4444",
    created_at: "2022-11-20T10:00:00Z",
    updated_at: "2023-06-15T10:00:00Z",
  },
]

export default function EmployeesPage() {
  const [employees, setEmployees] = useState<Employee[]>(mockEmployees)
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [roleFilter, setRoleFilter] = useState("todos")
  const [statusFilter, setStatusFilter] = useState("todos")
  const { toast } = useToast()

const handleAddEmployee = (employeeData: Omit<Employee, "id" | "created_at" | "updated_at">) => {
    const newEmployee: Employee = {
      ...employeeData,
      id: Date.now().toString(),
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
    }

setEmployees((prev) => [...prev, newEmployee])
    toast({
      title: "Sucesso",
      description: "Funcionário adicionado com sucesso",
    })
  }

const handleUpdateEmployee = (id: string, updates: Partial<Employee>) => {
    setEmployees((prev) =>
      prev.map((emp) => (emp.id === id ? { ...emp, ...updates, updated_at: new Date().toISOString() } : emp)),
    )
    toast({
      title: "Sucesso",
      description: "Funcionário atualizado com sucesso",
    })
  }

const handleDeleteEmployee = (id: string) => {
    setEmployees((prev) =>
      prev.map((emp) => (emp.id === id ? { ...emp, is_active: false, updated_at: new Date().toISOString() } : emp)),
    )
    toast({
      title: "Sucesso",
      description: "Funcionário desativado com sucesso",
    })
  }

const filteredEmployees = employees.filter((employee) => {
    const matchesSearch =
      employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (employee.email && employee.email.toLowerCase().includes(searchTerm.toLowerCase())) ||
      (employee.phone && employee.phone.includes(searchTerm)) ||
      (employee.specialty && employee.specialty.toLowerCase().includes(searchTerm.toLowerCase()))

const matchesRole = roleFilter === "todos" || employee.role === roleFilter
    const matchesStatus =
      statusFilter === "todos" ||
      (statusFilter === "ativo" && employee.is_active) ||
      (statusFilter === "inativo" && !employee.is_active)

return matchesSearch && matchesRole && matchesStatus
  })

const exportEmployees = () => {
    const csvContent = [
      ["Nome", "Email", "Telefone", "Cargo", "Especialidade", "Status", "Data Contratação"].join(","),
      ...filteredEmployees.map((employee) =>
        [
          `"${employee.name}"`,
          employee.email || "",
          employee.phone || "",
          employee.role,
          employee.specialty || "",
          employee.is_active ? "Ativo" : "Inativo",
          employee.hire_date || "",
        ].join(","),
      ),
    ].join("\n")

const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    const url = URL.createObjectURL(blob)
    link.setAttribute("href", url)
    link.setAttribute("download", `funcionarios_${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const importEmployees = () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = ".csv"
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const csv = e.target?.result as string
          const lines = csv.split("\n")
          const headers = lines[0].split(",")

console.log("Importando funcionários:", lines.length - 1, "registros")
          alert(`Importação iniciada! ${lines.length - 1} funcionários serão processados.`)
        }
        reader.readAsText(file)
      }
    }
    input.click()
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-16 items-center justify-between px-6">
            <div className="flex items-center space-x-4">
              <h1 className="text-2xl font-bold">Funcionários</h1>
              <Badge variant="secondary" className="text-sm">
                {filteredEmployees.length} funcionários
              </Badge>
            </div>

<div className="flex items-center space-x-2">
              <Button variant="outline" size="sm" onClick={exportEmployees}>
                <Download className="mr-2 h-4 w-4" />
                Exportar
              </Button>
              <Button variant="outline" size="sm" onClick={importEmployees}>
                <Upload className="mr-2 h-4 w-4" />
                Importar
              </Button>
              <Button onClick={() => setIsAddDialogOpen(true)}>
                <Plus className="mr-2 h-4 w-4" />
                Adicionar Funcionário
              </Button>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          <div className="flex flex-col sm:flex-row gap-4 mb-6">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="Buscar por nome, email, telefone ou especialidade..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

<Select value={roleFilter} onValueChange={setRoleFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Cargo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os cargos</SelectItem>
                <SelectItem value="admin">Administrador</SelectItem>
                <SelectItem value="doutor">Doutor</SelectItem>
                <SelectItem value="funcionario">Funcionário</SelectItem>
                <SelectItem value="recepcionista">Recepcionista</SelectItem>
                <SelectItem value="auxiliar">Auxiliar</SelectItem>
              </SelectContent>
            </Select>

<Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos</SelectItem>
                <SelectItem value="ativo">Ativo</SelectItem>
                <SelectItem value="inativo">Inativo</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Total de Funcionários</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{employees.length}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Funcionários Ativos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-600">{employees.filter((e) => e.is_active).length}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Doutores</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">
                  {employees.filter((e) => e.role === "doutor").length}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Funcionários Inativos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-red-600">{employees.filter((e) => !e.is_active).length}</div>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Lista de Funcionários</CardTitle>
            </CardHeader>
            <CardContent>
              <EmployeesTable
                employees={filteredEmployees}
                onUpdateEmployee={handleUpdateEmployee}
                onDeleteEmployee={handleDeleteEmployee}
              />
            </CardContent>
          </Card>
        </div>
      </div>

<AddEmployeeDialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen} onAddEmployee={handleAddEmployee} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/employees/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isMerged="true"
import { GoogleGenerativeAI } from "@google/generative-ai"

export const maxDuration = 30

const genAI = new GoogleGenerativeAI("AIzaSyCMBP8WML7isq78Ahoxa0Tt1uaofPEyx9U")

async function getClinicData() {
  try {
    // Mock data instead of Supabase calls
    const mockData = {
      patients: [
        { name: "João Silva", email: "joao@email.com", phone: "(11) 99999-1111" },
        { name: "Maria Santos", email: "maria@email.com", phone: "(11) 99999-2222" },
      ],
      appointments: [
        { patient_name: "João Silva", date: "2024-01-15", time: "14:00", service: "Consulta" },
        { patient_name: "Maria Santos", date: "2024-01-16", time: "10:00", service: "Limpeza" },
      ],
      employees: [
        { name: "Dr. João Silva", role: "doutor", email: "joao.silva@clinica.com" },
        { name: "Maria Santos", role: "recepcionista", email: "maria.santos@clinica.com" },
      ],
      products: [
        { name: "Anestésico", quantity: 50, price: 25.0 },
        { name: "Luvas", quantity: 200, price: 0.5 },
      ],
      movements: [
        { product_name: "Anestésico", type: "entrada", quantity: 10, date: "2024-01-15" },
        { product_name: "Luvas", type: "saída", quantity: 20, date: "2024-01-14" },
      ],
    }

return mockData
  } catch (error) {
    console.error("Erro ao buscar dados:", error)
    return null
  }
}

export async function POST(req: Request) {
  try {
    const { messages, dataAccess } = await req.json()

console.log("Mensagens recebidas:", messages)
    console.log("Acesso aos dados:", dataAccess)

let systemPrompt = `Você é a DentalIA, assistente especializada em gestão de clínicas odontológicas.

SUAS CAPACIDADES:
1. Análise de estoque
2. Relatórios de movimentações
3. Sugestões de reposição
4. Análise financeira
5. Controle de produtos
6. Gestão de pacientes
7. Controle de agendamentos
8. Gestão de funcionários

DIRETRIZES:
- Seja sempre útil e preciso
- Forneça respostas práticas
- Mantenha tom profissional
- Seja específico quando possível
- Use dados reais quando disponíveis

Responda de forma clara e objetiva.`

let clinicData = null
    if (dataAccess) {
      clinicData = await getClinicData()

if (clinicData) {
        systemPrompt += `

DADOS ATUAIS DA CLÍNICA:

PACIENTES (${clinicData.patients.length} registros):
${clinicData.patients.map((p) => `- ${p.name} (${p.email}) - Tel: ${p.phone}`).join("\n")}

AGENDAMENTOS (${clinicData.appointments.length} registros):
${clinicData.appointments.map((a) => `- ${a.patient_name} - ${a.date} às ${a.time} - ${a.service}`).join("\n")}

FUNCIONÁRIOS (${clinicData.employees.length} registros):
${clinicData.employees.map((e) => `- ${e.name} (${e.role}) - ${e.email}`).join("\n")}

PRODUTOS EM ESTOQUE (${clinicData.products.length} registros):
${clinicData.products.map((p) => `- ${p.name}: ${p.quantity} unidades - R$ ${p.price}`).join("\n")}

MOVIMENTAÇÕES RECENTES (${clinicData.movements.length} registros):
${clinicData.movements.map((m) => `- ${m.product_name}: ${m.type} ${m.quantity} unidades em ${m.date}`).join("\n")}

Use essas informações para dar respostas mais precisas e específicas sobre a clínica.`
      }
    }

const lastMessage = messages[messages.length - 1]
    const conversationHistory = messages
      .slice(0, -1)
      .map((msg: any) => `${msg.role === "user" ? "Usuário" : "DentalIA"}: ${msg.content}`)
      .join("\n")

const fullPrompt = `${systemPrompt}

${conversationHistory ? `Histórico da conversa:\n${conversationHistory}\n` : ""}

Usuário: ${lastMessage.content}

DentalIA:`

const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" })

const result = await model.generateContent(fullPrompt)
    const response = await result.response
    const text = response.text()

console.log("Resposta gerada:", text)

return new Response(
      JSON.stringify({
        id: Date.now().toString(),
        role: "assistant",
        content: text,
        createdAt: new Date(),
      }),
      {
        status: 200,
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "POST, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type",
        },
      },
    )
  } catch (error) {
    console.error("Erro detalhado na API do chat:", error)

return new Response(
      JSON.stringify({
        error: "Erro interno do servidor",
        details: error instanceof Error ? error.message : "Erro desconhecido",
      }),
      {
        status: 500,
        headers: { "Content-Type": "application/json" },
      },
    )
  }
}
[V0_FILE]typescriptreact:file="components/employees-table.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Link from "next/link"
import {
  MoreHorizontal,
  Edit,
  Trash2,
  Mail,
  Phone,
  Calendar,
  Shield,
  ChevronDown,
  ChevronRight,
  User,
  Clock,
  X,
  Eye,
} from "lucide-react"
import { ConfirmDialog } from "@/components/confirm-dialog"

interface Employee {
  id: string
  name: string
  email?: string
  phone?: string
  specialty?: string
  role: string
  is_active: boolean
  hire_date?: string
  salary?: number
  performance_score: number
  birth_date?: string
  cpf?: string
  rg?: string
  address?: string
  emergency_contact_name?: string
  emergency_contact_phone?: string
  permissions?: {
    prosthetic_control: boolean
    employee_management: boolean
    inventory_control: boolean
    reports: boolean
    settings: boolean
    financial: boolean
  }
  work_schedule?: WorkSchedule
  documents?: {
    contract?: string
    insurance?: string
    medical_certificate?: string
    diploma?: string
    [key: string]: string | undefined
  }
  created_at: string
  updated_at: string
}

interface EmployeesTableProps {
  employees: Employee[]
  onUpdateEmployee: (id: string, updates: Partial<Employee>) => void
  onDeleteEmployee: (id: string) => void
}

export function EmployeesTable({ employees, onUpdateEmployee, onDeleteEmployee }: EmployeesTableProps) {
  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
  const [editingEmployee, setEditingEmployee] = useState<string | null>(null)
  const [editData, setEditData] = useState<Partial<Employee>>({})
  const [deleteConfirm, setDeleteConfirm] = useState<{ open: boolean; employeeId: string; employeeName: string }>({
    open: false,
    employeeId: "",
    employeeName: "",
  })

const toggleRow = (employeeId: string) => {
    const newExpanded = new Set(expandedRows)
    if (newExpanded.has(employeeId)) {
      newExpanded.delete(employeeId)
    } else {
      newExpanded.add(employeeId)
    }
    setExpandedRows(newExpanded)
  }

const startEdit = (employee: Employee) => {
    setEditingEmployee(employee.id)
    setEditData({
      name: employee.name,
      email: employee.email || "",
      phone: employee.phone || "",
      specialty: employee.specialty || "",
      role: employee.role,
      salary: employee.salary,
    })
  }

const saveEdit = () => {
    if (editingEmployee && editData) {
      onUpdateEmployee(editingEmployee, editData)
      setEditingEmployee(null)
      setEditData({})
    }
  }

const cancelEdit = () => {
    setEditingEmployee(null)
    setEditData({})
  }

const handleDelete = (employee: Employee) => {
    setDeleteConfirm({
      open: true,
      employeeId: employee.id,
      employeeName: employee.name,
    })
  }

const confirmDelete = () => {
    onDeleteEmployee(deleteConfirm.employeeId)
    setDeleteConfirm({ open: false, employeeId: "", employeeName: "" })
  }

const getRoleLabel = (role: string) => {
    const roleLabels: { [key: string]: string } = {
      admin: "Administrador",
      doutor: "Doutor",
      funcionario: "Funcionário",
      recepcionista: "Recepcionista",
      auxiliar: "Auxiliar",
    }
    return roleLabels[role] || role
  }

const getRoleBadgeVariant = (role: string) => {
    switch (role) {
      case "admin":
        return "destructive"
      case "doutor":
        return "default"
      case "funcionario":
        return "secondary"
      case "recepcionista":
        return "outline"
      case "auxiliar":
        return "secondary"
      default:
        return "secondary"
    }
  }

const formatCurrency = (value?: number) => {
    if (!value) return "Não informado"
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value)
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return "Não informado"
    return new Date(dateString).toLocaleDateString("pt-BR")
  }

const getPerformanceColor = (score: number) => {
    if (score >= 90) return "text-green-600"
    if (score >= 70) return "text-yellow-600"
    return "text-red-600"
  }

const getPermissionCount = (permissions?: Employee["permissions"]) => {
    if (!permissions) return 0
    return Object.values(permissions).filter(Boolean).length
  }

const getWorkingDays = (schedule?: Employee["work_schedule"]) => {
    if (!schedule) return 0
    return Object.values(schedule).filter((day) => day.active).length
  }

if (employees.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <User className="h-12 w-12 text-muted-foreground mb-4" />
        <h3 className="text-lg font-medium mb-2">Nenhum funcionário encontrado</h3>
        <p className="text-muted-foreground">
          Não há funcionários cadastrados ou que correspondam aos filtros selecionados.
        </p>
      </div>
    )
  }

return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[50px]"></TableHead>
              <TableHead>Funcionário</TableHead>
              <TableHead>Cargo</TableHead>
              <TableHead>Contato</TableHead>
              <TableHead>Performance</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {employees.map((employee) => (
              <>
                <TableRow key={employee.id} className={!employee.is_active ? "opacity-60" : ""}>
                  <TableCell>
                    <Button variant="ghost" size="sm" onClick={() => toggleRow(employee.id)} className="h-8 w-8 p-0">
                      {expandedRows.has(employee.id) ? (
                        <ChevronDown className="h-4 w-4" />
                      ) : (
                        <ChevronRight className="h-4 w-4" />
                      )}
                    </Button>
                  </TableCell>

<TableCell>
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10">
                        <AvatarImage src={employee.photo || "/placeholder.svg"} />
                        <AvatarFallback>
                          {employee.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")
                            .substring(0, 2)}
                        </AvatarFallback>
                      </Avatar>
                      <div>
                        {editingEmployee === employee.id ? (
                          <Input
                            value={editData.name || ""}
                            onChange={(e) => setEditData({ ...editData, name: e.target.value })}
                            className="h-8 w-40"
                          />
                        ) : (
                          <div className="font-medium">{employee.name}</div>
                        )}
                        {employee.specialty && (
                          <div className="text-sm text-muted-foreground">{employee.specialty}</div>
                        )}
                      </div>
                    </div>
                  </TableCell>

<TableCell>
                    {editingEmployee === employee.id ? (
                      <select
                        value={editData.role || ""}
                        onChange={(e) => setEditData({ ...editData, role: e.target.value })}
                        className="h-8 px-2 border rounded"
                      >
                        <option value="admin">Administrador</option>
                        <option value="doutor">Doutor</option>
                        <option value="funcionario">Funcionário</option>
                        <option value="recepcionista">Recepcionista</option>
                        <option value="auxiliar">Auxiliar</option>
                      </select>
                    ) : (
                      <Badge variant={getRoleBadgeVariant(employee.role)}>{getRoleLabel(employee.role)}</Badge>
                    )}
                  </TableCell>

<TableCell>
                    <div className="space-y-1">
                      {editingEmployee === employee.id ? (
                        <>
                          <Input
                            value={editData.email || ""}
                            onChange={(e) => setEditData({ ...editData, email: e.target.value })}
                            placeholder="Email"
                            className="h-8 w-40"
                          />
                          <Input
                            value={editData.phone || ""}
                            onChange={(e) => setEditData({ ...editData, phone: e.target.value })}
                            placeholder="Telefone"
                            className="h-8 w-40"
                          />
                        </>
                      ) : (
                        <>
                          {employee.email && (
                            <div className="flex items-center text-sm">
                              <Mail className="mr-1 h-3 w-3" />
                              {employee.email}
                            </div>
                          )}
                          {employee.phone && (
                            <div className="flex items-center text-sm">
                              <Phone className="mr-1 h-3 w-3" />
                              {employee.phone}
                            </div>
                          )}
                        </>
                      )}
                    </div>
                  </TableCell>

<TableCell>
                    <div className="flex items-center space-x-2">
                      <Progress value={employee.performance_score} className="w-16" />
                      <span className={`text-sm font-medium ${getPerformanceColor(employee.performance_score)}`}>
                        {employee.performance_score}%
                      </span>
                    </div>
                  </TableCell>

<TableCell>
                    <Badge variant={employee.is_active ? "default" : "secondary"}>
                      {employee.is_active ? "Ativo" : "Inativo"}
                    </Badge>
                  </TableCell>

<TableCell className="text-right">
                    {editingEmployee === employee.id ? (
                      <div className="flex items-center justify-end space-x-2">
                        <Button size="sm" onClick={saveEdit}>
                          Salvar
                        </Button>
                        <Button size="sm" variant="outline" onClick={cancelEdit}>
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" className="h-8 w-8 p-0">
                            <MoreHorizontal className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem asChild>
                            <Link href={`/employees/${employee.id}`}>
                              <Eye className="mr-2 h-4 w-4" />
                              Ver Detalhes
                            </Link>
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => startEdit(employee)}>
                            <Edit className="mr-2 h-4 w-4" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDelete(employee)} className="text-red-600">
                            <Trash2 className="mr-2 h-4 w-4" />
                            {employee.is_active ? "Desativar" : "Ativar"}
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    )}
                  </TableCell>
                </TableRow>

{expandedRows.has(employee.id) && (
                  <TableRow>
                    <TableCell colSpan={7} className="bg-muted/50">
                      <div className="p-4 space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                          {/* Informações Pessoais */}
                          <div className="space-y-2">
                            <h4 className="font-medium flex items-center">
                              <User className="mr-2 h-4 w-4" />
                              Informações Pessoais
                            </h4>
                            <div className="text-sm space-y-1">
                              <div>
                                <span className="font-medium">Data de Nascimento:</span>{" "}
                                {formatDate(employee.birth_date)}
                              </div>
                              <div>
                                <span className="font-medium">CPF:</span> {employee.cpf || "Não informado"}
                              </div>
                              <div>
                                <span className="font-medium">RG:</span> {employee.rg || "Não informado"}
                              </div>
                              <div>
                                <span className="font-medium">Endereço:</span> {employee.address || "Não informado"}
                              </div>
                            </div>
                          </div>

{/* Informações Profissionais */}
                          <div className="space-y-2">
                            <h4 className="font-medium flex items-center">
                              <Calendar className="mr-2 h-4 w-4" />
                              Informações Profissionais
                            </h4>
                            <div className="text-sm space-y-1">
                              <div>
                                <span className="font-medium">Data de Contratação:</span>{" "}
                                {formatDate(employee.hire_date)}
                              </div>
                              <div>
                                <span className="font-medium">Salário:</span> {formatCurrency(employee.salary)}
                              </div>
                              <div>
                                <span className="font-medium">Dias de Trabalho:</span>{" "}
                                {getWorkingDays(employee.work_schedule)} dias/semana
                              </div>
                              <div>
                                <span className="font-medium">Permissões:</span>{" "}
                                {getPermissionCount(employee.permissions)} ativas
                              </div>
                            </div>
                          </div>

{/* Contato de Emergência */}
                          <div className="space-y-2">
                            <h4 className="font-medium flex items-center">
                              <Phone className="mr-2 h-4 w-4" />
                              Contato de Emergência
                            </h4>
                            <div className="text-sm space-y-1">
                              <div>
                                <span className="font-medium">Nome:</span>{" "}
                                {employee.emergency_contact_name || "Não informado"}
                              </div>
                              <div>
                                <span className="font-medium">Telefone:</span>{" "}
                                {employee.emergency_contact_phone || "Não informado"}
                              </div>
                            </div>
                          </div>
                        </div>

{/* Horários de Trabalho */}
                        {employee.work_schedule && (
                          <div className="space-y-2">
                            <h4 className="font-medium flex items-center">
                              <Clock className="mr-2 h-4 w-4" />
                              Horários de Trabalho
                            </h4>
                            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2">
                              {Object.entries(employee.work_schedule).map(([day, schedule]) => (
                                <div key={day} className="text-sm p-2 border rounded">
                                  <div className="font-medium capitalize">
                                    {day === "monday" && "Seg"}
                                    {day === "tuesday" && "Ter"}
                                    {day === "wednesday" && "Qua"}
                                    {day === "thursday" && "Qui"}
                                    {day === "friday" && "Sex"}
                                    {day === "saturday" && "Sáb"}
                                    {day === "sunday" && "Dom"}
                                  </div>
                                  {schedule.active ? (
                                    <div className="text-xs text-muted-foreground">
                                      {schedule.start} - {schedule.end}
                                    </div>
                                  ) : (
                                    <div className="text-xs text-muted-foreground">Folga</div>
                                  )}
                                </div>
                              ))}
                            </div>
                          </div>
                        )}

{/* Permissões */}
                        {employee.permissions && (
                          <div className="space-y-2">
                            <h4 className="font-medium flex items-center">
                              <Shield className="mr-2 h-4 w-4" />
                              Permissões de Acesso
                            </h4>
                            <div className="flex flex-wrap gap-2">
                              {Object.entries(employee.permissions).map(([key, value]) => (
                                <Badge key={key} variant={value ? "default" : "secondary"}>
                                  {key === "prosthetic_control" && "Controle Protético"}
                                  {key === "employee_management" && "Gestão de Funcionários"}
                                  {key === "inventory_control" && "Controle de Estoque"}
                                  {key === "reports" && "Relatórios"}
                                  {key === "settings" && "Configurações"}
                                  {key === "financial" && "Financeiro"}
                                </Badge>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </>
            ))}
          </TableBody>
        </Table>
      </div>

<ConfirmDialog
        open={deleteConfirm.open}
        onOpenChange={(open) => setDeleteConfirm({ ...deleteConfirm, open })}
        title="Confirmar ação"
        description={`Tem certeza que deseja alterar o status do funcionário "${deleteConfirm.employeeName}"?`}
        onConfirm={confirmDelete}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/employees/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Sidebar } from "@/components/sidebar"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import {
  ArrowLeft,
  Phone,
  Mail,
  MapPin,
  Edit,
  FileText,
  DollarSign,
  Clock,
  User,
  Calendar,
  AlertTriangle,
  CheckCircle,
  XCircle,
  Plus,
  Download,
  Printer,
  CreditCard,
  TrendingUp,
  ClipboardList,
  Shield,
  MoreHorizontal,
  Trash2,
  Receipt,
} from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"

interface EmployeeDetails {
  id: string
  name: string
  email: string
  phone: string
  birthDate: string
  address: string
  cpf: string
  rg: string
  role: string
  department: string
  hireDate: string
  salary: number
  performanceScore: number
  isActive: boolean
  emergencyContact: {
    name: string
    phone: string
    relationship: string
  }
  documents: {
    contract: string
    insurance: string
    medicalCertificate: string
    diploma: string
    workPermit: string
  }
  financialSummary: {
    monthlySalary: number
    totalEarned: number
    bonuses: number
    deductions: number
    lastPayment: string
  }
  paymentMethod: {
    type: "bank_transfer" | "pix" | "check"
    bankName?: string
    accountNumber?: string
    pixKey?: string
  }
  recentPayments: Array<{
    id: string
    date: string
    amount: number
    type: "salary" | "bonus" | "overtime" | "deduction"
    description: string
    status: "paid" | "pending" | "cancelled"
    hasReceipt: boolean
    receiptUrl: string | null
  }>
  timeRecords: Array<{
    id: string
    date: string
    entries: Array<{
      id: string
      clockIn: string
      clockOut?: string
      type: "morning" | "afternoon" | "full_day"
      modified: boolean
      modificationReason: string | null
    }>
    breakTime: number
    totalHours: number
    status: "present" | "absent" | "late" | "early_leave"
  }>
  workDays: {
    totalDays: number
    workedDays: number
    absences: number
    lateArrivals: number
  }
  productivity: {
    tasksCompleted: number
    tasksAssigned: number
    averageRating: number
    goalsAchieved: number
    totalGoals: number
  }
  tasks: {
    today: Array<{
      id: string
      title: string
      description: string
      priority: "low" | "medium" | "high"
      status: "pending" | "in_progress" | "completed"
      dueTime: string
    }>
    completed: Array<{
      id: string
      title: string
      description: string
      completedDate: string
      rating: number
    }>
  }
  permissions: {
    prosthetic_control: boolean
    employee_management: boolean
    inventory_control: boolean
    reports: boolean
    settings: boolean
    financial: boolean
  }
  paymentMethods?: Array<{
    id: string
    type: "bank_transfer" | "pix" | "check"
    bankName?: string
    accountNumber?: string
    pixKey?: string
    isDefault: boolean
  }>
}

export default function EmployeeDetailsPage() {
  const params = useParams()
  const employeeId = params.id as string

const [showAddPaymentMethodDialog, setShowAddPaymentMethodDialog] = useState(false)
  const [showEditDocumentDialog, setShowEditDocumentDialog] = useState(false)
  const [showEditPermissionsDialog, setShowEditPermissionsDialog] = useState(false)
  const [showTimeEditDialog, setShowTimeEditDialog] = useState(false)
  const [showReceiptDialog, setShowReceiptDialog] = useState(false)
  const [showPaymentProofDialog, setShowPaymentProofDialog] = useState(false)
  const [selectedDocument, setSelectedDocument] = useState<string>("")
  const [selectedPayment, setSelectedPayment] = useState<any>(null)
  const [selectedTimeRecord, setSelectedTimeRecord] = useState<any>(null)
  const [newPaymentMethod, setNewPaymentMethod] = useState({
    type: "",
    bankName: "",
    accountNumber: "",
    pixKey: "",
  })
  const [timeEditReason, setTimeEditReason] = useState("")
  const [paymentProof, setPaymentProof] = useState<File | null>(null)

const [employee, setEmployee] = useState<EmployeeDetails>({
    id: employeeId,
    name: "Ana Caroline Marques",
    email: "ana.marques@clinica.com",
    phone: "(11) 98765-4321",
    birthDate: "1988-05-20",
    address: "Rua das Palmeiras, 456, Apto 78 - Jardins - São Paulo, SP - CEP: 01234-567",
    cpf: "987.654.321-00",
    rg: "98.765.432-1",
    role: "doutor",
    department: "Odontologia",
    hireDate: "2020-03-15",
    salary: 8500.0,
    performanceScore: 92,
    isActive: true,
    emergencyContact: {
      name: "Carlos Marques",
      phone: "(11) 99876-5432",
      relationship: "Esposo",
    },
    documents: {
      contract: "contrato_ana_marques.pdf",
      insurance: "seguro_saude_ana.pdf",
      medicalCertificate: "atestado_medico_ana.pdf",
      diploma: "diploma_odontologia_ana.pdf",
      workPermit: "cro_ana_marques.pdf",
    },
    financialSummary: {
      monthlySalary: 8500.0,
      totalEarned: 102000.0,
      bonuses: 5200.0,
      deductions: 1800.0,
      lastPayment: "2025-08-01",
    },
    paymentMethod: {
      type: "bank_transfer",
      bankName: "Banco do Brasil",
      accountNumber: "12345-6",
    },
    paymentMethods: [
      {
        id: "1",
        type: "bank_transfer",
        bankName: "Banco do Brasil",
        accountNumber: "12345-6",
        isDefault: true,
      },
      {
        id: "2",
        type: "pix",
        pixKey: "ana.marques@clinica.com",
        isDefault: false,
      },
    ],
    recentPayments: [
      {
        id: "1",
        date: "2025-08-01",
        amount: 8500.0,
        type: "salary",
        description: "Salário Agosto 2025",
        status: "paid",
        hasReceipt: true,
        receiptUrl: "/receipts/payment_1.pdf",
      },
      {
        id: "2",
        date: "2025-07-15",
        amount: 1200.0,
        type: "bonus",
        description: "Bônus por performance",
        status: "pending",
        hasReceipt: false,
        receiptUrl: null,
      },
      {
        id: "3",
        date: "2025-07-01",
        amount: 8500.0,
        type: "salary",
        description: "Salário Julho 2025",
        status: "paid",
        hasReceipt: true,
        receiptUrl: "/receipts/payment_3.pdf",
      },
    ],
    timeRecords: [
      {
        id: "1",
        date: "2025-08-15",
        entries: [
          {
            id: "1a",
            clockIn: "08:00",
            clockOut: "12:00",
            type: "morning",
            modified: false,
            modificationReason: null,
          },
          {
            id: "1b",
            clockIn: "13:00",
            clockOut: "17:30",
            type: "afternoon",
            modified: false,
            modificationReason: null,
          },
        ],
        breakTime: 60,
        totalHours: 8.5,
        status: "present",
      },
      {
        id: "2",
        date: "2025-08-14",
        entries: [
          {
            id: "2a",
            clockIn: "08:15",
            clockOut: "17:30",
            type: "full_day",
            modified: true,
            modificationReason: "Funcionário esqueceu de bater o ponto na entrada",
          },
        ],
        breakTime: 60,
        totalHours: 8.25,
        status: "late",
      },
    ],
    workDays: {
      totalDays: 22,
      workedDays: 20,
      absences: 1,
      lateArrivals: 3,
    },
    productivity: {
      tasksCompleted: 45,
      tasksAssigned: 50,
      averageRating: 4.6,
      goalsAchieved: 8,
      totalGoals: 10,
    },
    tasks: {
      today: [
        {
          id: "1",
          title: "Consulta com paciente João Silva",
          description: "Avaliação periodontal e limpeza",
          priority: "high",
          status: "completed",
          dueTime: "09:00",
        },
        {
          id: "2",
          title: "Relatório mensal de procedimentos",
          description: "Compilar dados dos procedimentos realizados",
          priority: "medium",
          status: "in_progress",
          dueTime: "14:00",
        },
        {
          id: "3",
          title: "Reunião de equipe",
          description: "Discussão sobre novos protocolos",
          priority: "medium",
          status: "pending",
          dueTime: "16:00",
        },
      ],
      completed: [
        {
          id: "1",
          title: "Tratamento de canal - Paciente Maria",
          description: "Procedimento completo de endodontia",
          completedDate: "2025-08-14",
          rating: 5,
        },
        {
          id: "2",
          title: "Atualização de prontuários",
          description: "Revisão e atualização de 15 prontuários",
          completedDate: "2025-08-13",
          rating: 4,
        },
      ],
    },
    permissions: {
      prosthetic_control: true,
      employee_management: false,
      inventory_control: true,
      reports: true,
      settings: false,
      financial: false,
    },
  })

const handleAddPaymentMethod = () => {
    const newMethod = {
      id: Date.now().toString(),
      ...newPaymentMethod,
      isDefault: employee.paymentMethods.length === 0,
    }
    setEmployee((prev) => ({
      ...prev,
      paymentMethods: [...prev.paymentMethods, newMethod],
    }))
    setNewPaymentMethod({ type: "", bankName: "", accountNumber: "", pixKey: "" })
    setShowAddPaymentMethodDialog(false)
  }

const handleDeleteDocument = (docKey: string) => {
    setEmployee((prev) => ({
      ...prev,
      documents: {
        ...prev.documents,
        [docKey]: "",
      },
    }))
  }

const handleUpdatePermissions = (key: string, value: boolean) => {
    setEmployee((prev) => ({
      ...prev,
      permissions: {
        ...prev.permissions,
        [key]: value,
      },
    }))
  }

const handleMarkAsPaid = (paymentId: string) => {
    if (!paymentProof) {
      alert("É necessário anexar o comprovante antes de marcar como pago!")
      return
    }

setEmployee((prev) => ({
      ...prev,
      recentPayments: prev.recentPayments.map((payment) =>
        payment.id === paymentId
          ? { ...payment, status: "paid", hasReceipt: true, receiptUrl: `/receipts/payment_${paymentId}.pdf` }
          : payment,
      ),
    }))
    setPaymentProof(null)
    setShowPaymentProofDialog(false)
  }

const handleTimeEdit = () => {
    if (!timeEditReason.trim()) {
      alert("É necessário informar o motivo da alteração!")
      return
    }

// Logic to update time record with modification reason
    setTimeEditReason("")
    setShowTimeEditDialog(false)
  }

const calculateAge = (birthDate: string) => {
    const today = new Date()
    const birth = new Date(birthDate)
    let age = today.getFullYear() - birth.getFullYear()
    const monthDiff = today.getMonth() - birth.getMonth()

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }

return age
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Concluído
          </Badge>
        )
      case "in_progress":
        return (
          <Badge className="bg-blue-100 text-blue-800">
            <Clock className="w-3 h-3 mr-1" />
            Em Andamento
          </Badge>
        )
      case "pending":
        return (
          <Badge className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Pendente
          </Badge>
        )
      case "paid":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Pago
          </Badge>
        )
      case "present":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Presente
          </Badge>
        )
      case "late":
        return (
          <Badge className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Atraso
          </Badge>
        )
      case "absent":
        return (
          <Badge className="bg-red-100 text-red-800">
            <XCircle className="w-3 h-3 mr-1" />
            Ausente
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "high":
        return <Badge variant="destructive">Alta</Badge>
      case "medium":
        return <Badge className="bg-yellow-100 text-yellow-800">Média</Badge>
      case "low":
        return <Badge variant="secondary">Baixa</Badge>
      default:
        return <Badge variant="secondary">{priority}</Badge>
    }
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value)
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-16 items-center justify-between px-6">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" asChild>
                <Link href="/employees">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Voltar
                </Link>
              </Button>
              <Separator orientation="vertical" className="h-6" />
              <div className="flex items-center space-x-3">
                <h1 className="text-2xl font-bold">{employee.name}</h1>
                <Badge variant="outline" className="text-sm font-mono">
                  #{employee.id.padStart(6, "0")}
                </Badge>
              </div>
              <Badge className={employee.isActive ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}>
                {employee.isActive ? "Funcionário Ativo" : "Funcionário Inativo"}
              </Badge>
            </div>

<div className="flex items-center space-x-2">
              <Button variant="outline" size="sm">
                <Printer className="mr-2 h-4 w-4" />
                Imprimir
              </Button>
              <Button variant="outline" size="sm">
                <Download className="mr-2 h-4 w-4" />
                Exportar
              </Button>
              <Button size="sm">
                <Edit className="mr-2 h-4 w-4" />
                Editar
              </Button>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          {/* Informações principais */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            {/* Perfil do funcionário */}
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <User className="mr-2 h-5 w-5" />
                  Informações Pessoais
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-start space-x-4">
                  <Avatar className="h-20 w-20">
                    <AvatarImage src="/placeholder.svg" />
                    <AvatarFallback className="text-lg">
                      {employee.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")
                        .substring(0, 2)}
                    </AvatarFallback>
                  </Avatar>

<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-3">
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Nome Completo</label>
                        <p className="text-sm">{employee.name}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Idade</label>
                        <p className="text-sm">{calculateAge(employee.birthDate)} anos</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">CPF</label>
                        <p className="text-sm">{employee.cpf}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Cargo</label>
                        <p className="text-sm">{getRoleLabel(employee.role)}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Departamento</label>
                        <p className="text-sm">{employee.department}</p>
                      </div>
                    </div>

<div className="space-y-3">
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Telefone</label>
                        <div className="flex items-center space-x-2">
                          <Phone className="h-4 w-4 text-muted-foreground" />
                          <p className="text-sm">{employee.phone}</p>
                        </div>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Email</label>
                        <div className="flex items-center space-x-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <p className="text-sm">{employee.email}</p>
                        </div>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">RG</label>
                        <p className="text-sm">{employee.rg}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Data de Contratação</label>
                        <p className="text-sm">{new Date(employee.hireDate).toLocaleDateString("pt-BR")}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Endereço</label>
                        <div className="flex items-start space-x-2">
                          <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                          <p className="text-sm">{employee.address}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Resumo financeiro */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <DollarSign className="mr-2 h-5 w-5" />
                  Resumo Financeiro
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Salário Mensal</span>
                    <span className="text-sm font-medium">
                      {formatCurrency(employee.financialSummary.monthlySalary)}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Total Recebido</span>
                    <span className="text-sm font-medium text-green-600">
                      {formatCurrency(employee.financialSummary.totalEarned)}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Bônus</span>
                    <span className="text-sm font-medium text-blue-600">
                      {formatCurrency(employee.financialSummary.bonuses)}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Descontos</span>
                    <span className="text-sm font-medium text-red-600">
                      {formatCurrency(employee.financialSummary.deductions)}
                    </span>
                  </div>
                </div>
                <Separator />
                <div>
                  <span className="text-sm text-muted-foreground">Último Pagamento</span>
                  <p className="text-sm font-medium">
                    {new Date(employee.financialSummary.lastPayment).toLocaleDateString("pt-BR")}
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Performance e Produtividade */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <TrendingUp className="mr-2 h-5 w-5" />
                  Performance
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Score Geral</span>
                  <div className="flex items-center space-x-2">
                    <Progress value={employee.performanceScore} className="w-20" />
                    <span className="text-sm font-medium">{employee.performanceScore}%</span>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-muted-foreground">Tarefas Concluídas</span>
                    <p className="font-medium">
                      {employee.productivity.tasksCompleted}/{employee.productivity.tasksAssigned}
                    </p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Avaliação Média</span>
                    <p className="font-medium">{employee.productivity.averageRating}/5.0</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Metas Atingidas</span>
                    <p className="font-medium">
                      {employee.productivity.goalsAchieved}/{employee.productivity.totalGoals}
                    </p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Taxa de Presença</span>
                    <p className="font-medium">
                      {Math.round((employee.workDays.workedDays / employee.workDays.totalDays) * 100)}%
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Calendar className="mr-2 h-5 w-5" />
                  Frequência
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-muted-foreground">Dias Trabalhados</span>
                    <p className="font-medium text-green-600">{employee.workDays.workedDays}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Faltas</span>
                    <p className="font-medium text-red-600">{employee.workDays.absences}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Atrasos</span>
                    <p className="font-medium text-yellow-600">{employee.workDays.lateArrivals}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Total de Dias</span>
                    <p className="font-medium">{employee.workDays.totalDays}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Contato de emergência */}
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="flex items-center">
                <AlertTriangle className="mr-2 h-5 w-5" />
                Contato de Emergência
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Nome</label>
                  <p className="text-sm">{employee.emergencyContact.name}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Telefone</label>
                  <p className="text-sm">{employee.emergencyContact.phone}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Parentesco</label>
                  <p className="text-sm">{employee.emergencyContact.relationship}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Tabs com informações detalhadas */}
          <Tabs defaultValue="financial" className="space-y-4">
            <TabsList className="grid w-full grid-cols-6">
              <TabsTrigger value="financial">Financeiro</TabsTrigger>
              <TabsTrigger value="timesheet">Ponto</TabsTrigger>
              <TabsTrigger value="tasks">Tarefas</TabsTrigger>
              <TabsTrigger value="documents">Documentos</TabsTrigger>
              <TabsTrigger value="permissions">Permissões</TabsTrigger>
              <TabsTrigger value="payment">Pagamento</TabsTrigger>
            </TabsList>

<TabsContent value="financial">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Histórico de Pagamentos</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Novo Pagamento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Data</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Descrição</TableHead>
                        <TableHead>Valor</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Ações</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {employee.recentPayments.map((payment) => (
                        <TableRow key={payment.id}>
                          <TableCell>{new Date(payment.date).toLocaleDateString("pt-BR")}</TableCell>
                          <TableCell>
                            <Badge variant="outline">
                              {payment.type === "salary" && "Salário"}
                              {payment.type === "bonus" && "Bônus"}
                              {payment.type === "overtime" && "Hora Extra"}
                              {payment.type === "deduction" && "Desconto"}
                            </Badge>
                          </TableCell>
                          <TableCell>{payment.description}</TableCell>
                          <TableCell className={payment.type === "deduction" ? "text-red-600" : "text-green-600"}>
                            {payment.type === "deduction" ? "-" : ""}
                            {formatCurrency(payment.amount)}
                          </TableCell>
                          <TableCell>{getStatusBadge(payment.status)}</TableCell>
                          <TableCell>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                {payment.hasReceipt && (
                                  <DropdownMenuItem
                                    onClick={() => {
                                      setSelectedPayment(payment)
                                      setShowReceiptDialog(true)
                                    }}
                                  >
                                    <Receipt className="mr-2 h-4 w-4" />
                                    Ver Comprovante
                                  </DropdownMenuItem>
                                )}
                                {payment.status === "pending" && (
                                  <DropdownMenuItem
                                    onClick={() => {
                                      setSelectedPayment(payment)
                                      setShowPaymentProofDialog(true)
                                    }}
                                  >
                                    <CheckCircle className="mr-2 h-4 w-4" />
                                    Marcar como Pago
                                  </DropdownMenuItem>
                                )}
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="timesheet">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Registro de Ponto</CardTitle>
                    <Button size="sm" onClick={() => setShowTimeEditDialog(true)}>
                      <Plus className="mr-2 h-4 w-4" />
                      Adicionar/Editar Ponto
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Data</TableHead>
                        <TableHead>Entradas/Saídas</TableHead>
                        <TableHead>Intervalo</TableHead>
                        <TableHead>Total</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Ações</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {employee.timeRecords.map((record) => (
                        <TableRow key={record.id}>
                          <TableCell>{new Date(record.date).toLocaleDateString("pt-BR")}</TableCell>
                          <TableCell>
                            <div className="space-y-1">
                              {record.entries.map((entry, index) => (
                                <div key={entry.id} className="flex items-center space-x-2 text-sm">
                                  <span>
                                    {entry.clockIn} - {entry.clockOut || "..."}
                                  </span>
                                  {entry.modified && (
                                    <Badge variant="outline" className="text-xs">
                                      Editado
                                    </Badge>
                                  )}
                                </div>
                              ))}
                            </div>
                          </TableCell>
                          <TableCell>{record.breakTime}min</TableCell>
                          <TableCell>{record.totalHours}h</TableCell>
                          <TableCell>{getStatusBadge(record.status)}</TableCell>
                          <TableCell>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => {
                                setSelectedTimeRecord(record)
                                setShowTimeEditDialog(true)
                              }}
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="tasks">
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <ClipboardList className="mr-2 h-5 w-5" />
                      Tarefas de Hoje
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {employee.tasks.today.map((task) => (
                        <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-2">
                              <h4 className="font-medium">{task.title}</h4>
                              {getPriorityBadge(task.priority)}
                              {getStatusBadge(task.status)}
                            </div>
                            <p className="text-sm text-muted-foreground">{task.description}</p>
                          </div>
                          <div className="text-sm text-muted-foreground">
                            <Clock className="inline w-4 h-4 mr-1" />
                            {task.dueTime}
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Tarefas Concluídas Recentemente</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {employee.tasks.completed.map((task) => (
                        <div key={task.id} className="flex items-center justify-between p-4 border rounded-lg">
                          <div className="flex-1">
                            <h4 className="font-medium">{task.title}</h4>
                            <p className="text-sm text-muted-foreground">{task.description}</p>
                          </div>
                          <div className="text-right">
                            <div className="text-sm text-muted-foreground">
                              {new Date(task.completedDate).toLocaleDateString("pt-BR")}
                            </div>
                            <div className="flex items-center">
                              {"★".repeat(task.rating)}
                              <span className="ml-1 text-sm">({task.rating}/5)</span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="documents">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center">
                      <FileText className="mr-2 h-5 w-5" />
                      Documentos
                    </CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Adicionar Documento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {Object.entries(employee.documents).map(([key, filename]) => (
                      <div key={key} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center space-x-3">
                          <FileText className="h-8 w-8 text-muted-foreground" />
                          <div>
                            <p className="font-medium">
                              {key === "contract" && "Contrato de Trabalho"}
                              {key === "insurance" && "Seguro Saúde"}
                              {key === "medicalCertificate" && "Atestado Médico"}
                              {key === "diploma" && "Diploma"}
                              {key === "workPermit" && "Registro Profissional"}
                            </p>
                            <p className="text-sm text-muted-foreground">{filename}</p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button variant="outline" size="sm">
                            <Download className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setSelectedDocument(key)
                              setShowEditDocumentDialog(true)
                            }}
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button variant="outline" size="sm">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>Confirmar Exclusão</AlertDialogTitle>
                                <AlertDialogDescription>
                                  Tem certeza que deseja excluir este documento? Esta ação não pode ser desfeita.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancelar</AlertDialogCancel>
                                <AlertDialogAction onClick={() => handleDeleteDocument(key)}>Excluir</AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="permissions">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center">
                      <Shield className="mr-2 h-5 w-5" />
                      Permissões de Acesso
                    </CardTitle>
                    <Button size="sm" onClick={() => setShowEditPermissionsDialog(true)}>
                      <Edit className="mr-2 h-4 w-4" />
                      Editar Permissões
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {Object.entries(employee.permissions).map(([key, value]) => (
                      <div key={key} className="flex items-center justify-between p-3 border rounded-lg">
                        <span className="font-medium">
                          {key === "prosthetic_control" && "Controle Protético"}
                          {key === "employee_management" && "Gestão de Funcionários"}
                          {key === "inventory_control" && "Controle de Estoque"}
                          {key === "reports" && "Relatórios"}
                          {key === "settings" && "Configurações"}
                          {key === "financial" && "Financeiro"}
                        </span>
                        <Badge variant={value ? "default" : "secondary"}>{value ? "Permitido" : "Negado"}</Badge>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="payment">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center">
                      <CreditCard className="mr-2 h-5 w-5" />
                      Formas de Pagamento
                    </CardTitle>
                    <Button size="sm" onClick={() => setShowAddPaymentMethodDialog(true)}>
                      <Plus className="mr-2 h-4 w-4" />
                      Adicionar Forma de Pagamento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {employee.paymentMethods?.map((method) => (
                      <div key={method.id} className="flex items-center justify-between p-4 border rounded-lg">
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <span className="font-medium">
                              {method.type === "bank_transfer" && "Transferência Bancária"}
                              {method.type === "pix" && "PIX"}
                              {method.type === "check" && "Cheque"}
                            </span>
                            {method.isDefault && <Badge variant="default">Padrão</Badge>}
                          </div>
                          <div className="text-sm text-muted-foreground">
                            {method.bankName && <p>Banco: {method.bankName}</p>}
                            {method.accountNumber && <p>Conta: {method.accountNumber}</p>}
                            {method.pixKey && <p>Chave PIX: {method.pixKey}</p>}
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button variant="outline" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="outline" size="sm">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>

<Dialog open={showAddPaymentMethodDialog} onOpenChange={setShowAddPaymentMethodDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Adicionar Forma de Pagamento</DialogTitle>
            <DialogDescription>Configure uma nova forma de pagamento para o funcionário.</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="payment-type">Tipo de Pagamento</Label>
              <Select
                value={newPaymentMethod.type}
                onValueChange={(value) => setNewPaymentMethod((prev) => ({ ...prev, type: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Selecione o tipo" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="bank_transfer">Transferência Bancária</SelectItem>
                  <SelectItem value="pix">PIX</SelectItem>
                  <SelectItem value="check">Cheque</SelectItem>
                </SelectContent>
              </Select>
            </div>

{newPaymentMethod.type === "bank_transfer" && (
              <>
                <div>
                  <Label htmlFor="bank-name">Nome do Banco</Label>
                  <Input
                    id="bank-name"
                    value={newPaymentMethod.bankName}
                    onChange={(e) => setNewPaymentMethod((prev) => ({ ...prev, bankName: e.target.value }))}
                    placeholder="Ex: Banco do Brasil"
                  />
                </div>
                <div>
                  <Label htmlFor="account-number">Número da Conta</Label>
                  <Input
                    id="account-number"
                    value={newPaymentMethod.accountNumber}
                    onChange={(e) => setNewPaymentMethod((prev) => ({ ...prev, accountNumber: e.target.value }))}
                    placeholder="Ex: 12345-6"
                  />
                </div>
              </>
            )}

{newPaymentMethod.type === "pix" && (
              <div>
                <Label htmlFor="pix-key">Chave PIX</Label>
                <Input
                  id="pix-key"
                  value={newPaymentMethod.pixKey}
                  onChange={(e) => setNewPaymentMethod((prev) => ({ ...prev, pixKey: e.target.value }))}
                  placeholder="Ex: email@exemplo.com"
                />
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowAddPaymentMethodDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAddPaymentMethod}>Adicionar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showEditPermissionsDialog} onOpenChange={setShowEditPermissionsDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Editar Permissões</DialogTitle>
            <DialogDescription>Configure as permissões de acesso do funcionário.</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            {Object.entries(employee.permissions).map(([key, value]) => (
              <div key={key} className="flex items-center justify-between">
                <Label htmlFor={key}>
                  {key === "prosthetic_control" && "Controle Protético"}
                  {key === "employee_management" && "Gestão de Funcionários"}
                  {key === "inventory_control" && "Controle de Estoque"}
                  {key === "reports" && "Relatórios"}
                  {key === "settings" && "Configurações"}
                  {key === "financial" && "Financeiro"}
                </Label>
                <Switch id={key} checked={value} onCheckedChange={(checked) => handleUpdatePermissions(key, checked)} />
              </div>
            ))}
          </div>
          <DialogFooter>
            <Button onClick={() => setShowEditPermissionsDialog(false)}>Salvar Alterações</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showTimeEditDialog} onOpenChange={setShowTimeEditDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Editar/Adicionar Ponto</DialogTitle>
            <DialogDescription>
              Adicione ou edite registros de ponto. É obrigatório informar o motivo da alteração.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="date">Data</Label>
              <Input id="date" type="date" />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="clock-in">Entrada</Label>
                <Input id="clock-in" type="time" />
              </div>
              <div>
                <Label htmlFor="clock-out">Saída</Label>
                <Input id="clock-out" type="time" />
              </div>
            </div>
            <div>
              <Label htmlFor="reason">Motivo da Alteração *</Label>
              <Textarea
                id="reason"
                value={timeEditReason}
                onChange={(e) => setTimeEditReason(e.target.value)}
                placeholder="Ex: Funcionário esqueceu de bater o ponto por isso tive que alterar"
                required
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowTimeEditDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={handleTimeEdit}>Salvar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showPaymentProofDialog} onOpenChange={setShowPaymentProofDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Anexar Comprovante</DialogTitle>
            <DialogDescription>
              É obrigatório anexar o comprovante antes de marcar o pagamento como pago.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="payment-proof">Comprovante de Pagamento</Label>
              <Input
                id="payment-proof"
                type="file"
                accept=".pdf,.jpg,.jpeg,.png"
                onChange={(e) => setPaymentProof(e.target.files?.[0] || null)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowPaymentProofDialog(false)}>
              Cancelar
            </Button>
            <Button onClick={() => selectedPayment && handleMarkAsPaid(selectedPayment.id)} disabled={!paymentProof}>
              Marcar como Pago
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={showReceiptDialog} onOpenChange={setShowReceiptDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Comprovante de Pagamento</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <p>Visualizando comprovante do pagamento:</p>
            {selectedPayment && (
              <div className="p-4 border rounded-lg">
                <p>
                  <strong>Descrição:</strong> {selectedPayment.description}
                </p>
                <p>
                  <strong>Valor:</strong> {formatCurrency(selectedPayment.amount)}
                </p>
                <p>
                  <strong>Data:</strong> {new Date(selectedPayment.date).toLocaleDateString("pt-BR")}
                </p>
              </div>
            )}
            <div className="flex justify-center p-8 border-2 border-dashed rounded-lg">
              <p className="text-muted-foreground">Comprovante seria exibido aqui</p>
            </div>
          </div>
          <DialogFooter>
            <Button onClick={() => setShowReceiptDialog(false)}>Fechar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]sql:file="scripts/003_create_consultas_table.sql" isMerged="true"
-- Criando tabela de consultas com estrutura adequada
CREATE TABLE IF NOT EXISTS consultas (
    id SERIAL PRIMARY KEY,
    paciente_nome VARCHAR(255) NOT NULL,
    paciente_telefone VARCHAR(20),
    paciente_email VARCHAR(255),
    data_consulta DATE NOT NULL,
    hora_consulta TIME NOT NULL,
    procedimento VARCHAR(255) NOT NULL,
    dentista VARCHAR(255) NOT NULL,
    status VARCHAR(50) DEFAULT 'agendado',
    observacoes TEXT,
    valor DECIMAL(10,2),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Índices para melhor performance
CREATE INDEX IF NOT EXISTS idx_consultas_data ON consultas(data_consulta);
CREATE INDEX IF NOT EXISTS idx_consultas_status ON consultas(status);
CREATE INDEX IF NOT EXISTS idx_consultas_dentista ON consultas(dentista);
[V0_FILE]sql:file="scripts/004_seed_consultas_data.sql" isMerged="true"
-- Inserindo dados de exemplo para consultas
INSERT INTO consultas (paciente_nome, paciente_telefone, paciente_email, data_consulta, hora_consulta, procedimento, dentista, status, observacoes, valor) VALUES
('Maria Silva', '(11) 99999-1111', 'maria@email.com', '2024-09-20', '09:00', 'Limpeza', 'Dr. João Santos', 'agendado', 'Primeira consulta', 150.00),
('Pedro Oliveira', '(11) 99999-2222', 'pedro@email.com', '2024-09-20', '10:30', 'Obturação', 'Dra. Ana Costa', 'confirmado', 'Dor no dente 16', 200.00),
('Ana Souza', '(11) 99999-3333', 'ana@email.com', '2024-09-21', '14:00', 'Canal', 'Dr. João Santos', 'agendado', 'Tratamento de canal', 800.00),
('Carlos Lima', '(11) 99999-4444', 'carlos@email.com', '2024-09-21', '16:00', 'Extração', 'Dra. Ana Costa', 'concluido', 'Extração siso', 300.00),
('Lucia Ferreira', '(11) 99999-5555', 'lucia@email.com', '2024-09-22', '08:30', 'Limpeza', 'Dr. João Santos', 'cancelado', 'Paciente cancelou', 150.00);
[V0_FILE]typescriptreact:file="app/consultas/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Calendar, Plus, Search } from "lucide-react"
import { toast } from "@/hooks/use-toast"

interface Consulta {
  id: number
  paciente_nome: string
  paciente_telefone: string
  paciente_email: string
  data_consulta: string
  hora_consulta: string
  procedimento: string
  dentista: string
  status: string
  observacoes: string
  valor: number
  created_at: string
}

export default function ConsultasPage() {
  const [consultas, setConsultas] = useState<Consulta[]>([])
  const [filteredConsultas, setFilteredConsultas] = useState<Consulta[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("todos")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [formData, setFormData] = useState({
    paciente_nome: "",
    paciente_telefone: "",
    paciente_email: "",
    data_consulta: "",
    hora_consulta: "",
    procedimento: "",
    dentista: "",
    observacoes: "",
    valor: "",
  })

// Simular dados das consultas (substitua por chamada real ao banco)
  useEffect(() => {
    const mockConsultas: Consulta[] = [
      {
        id: 1,
        paciente_nome: "Maria Silva",
        paciente_telefone: "(11) 99999-1111",
        paciente_email: "maria@email.com",
        data_consulta: "2024-09-20",
        hora_consulta: "09:00",
        procedimento: "Limpeza",
        dentista: "Dr. João Santos",
        status: "agendado",
        observacoes: "Primeira consulta",
        valor: 150.0,
        created_at: "2024-09-17T10:00:00Z",
      },
      {
        id: 2,
        paciente_nome: "Pedro Oliveira",
        paciente_telefone: "(11) 99999-2222",
        paciente_email: "pedro@email.com",
        data_consulta: "2024-09-20",
        hora_consulta: "10:30",
        procedimento: "Obturação",
        dentista: "Dra. Ana Costa",
        status: "confirmado",
        observacoes: "Dor no dente 16",
        valor: 200.0,
        created_at: "2024-09-17T11:00:00Z",
      },
      {
        id: 3,
        paciente_nome: "Ana Souza",
        paciente_telefone: "(11) 99999-3333",
        paciente_email: "ana@email.com",
        data_consulta: "2024-09-21",
        hora_consulta: "14:00",
        procedimento: "Canal",
        dentista: "Dr. João Santos",
        status: "agendado",
        observacoes: "Tratamento de canal",
        valor: 800.0,
        created_at: "2024-09-17T12:00:00Z",
      },
    ]
    setConsultas(mockConsultas)
    setFilteredConsultas(mockConsultas)
  }, [])

// Filtrar consultas
  useEffect(() => {
    let filtered = consultas

if (searchTerm) {
      filtered = filtered.filter(
        (consulta) =>
          consulta.paciente_nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
          consulta.procedimento.toLowerCase().includes(searchTerm.toLowerCase()) ||
          consulta.dentista.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

if (statusFilter !== "todos") {
      filtered = filtered.filter((consulta) => consulta.status === statusFilter)
    }

setFilteredConsultas(filtered)
  }, [consultas, searchTerm, statusFilter])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      // Aqui você faria a inserção no banco de dados
      const novaConsulta: Consulta = {
        id: Date.now(), // Em produção, seria gerado pelo banco
        ...formData,
        valor: Number.parseFloat(formData.valor),
        status: "agendado",
        created_at: new Date().toISOString(),
      }

setConsultas((prev) => [...prev, novaConsulta])

// Limpar formulário
      setFormData({
        paciente_nome: "",
        paciente_telefone: "",
        paciente_email: "",
        data_consulta: "",
        hora_consulta: "",
        procedimento: "",
        dentista: "",
        observacoes: "",
        valor: "",
      })

setIsDialogOpen(false)

toast({
        title: "Consulta agendada",
        description: "Nova consulta foi agendada com sucesso!",
      })
    } catch (error) {
      console.error("Erro ao agendar consulta:", error)
      toast({
        title: "Erro",
        description: "Erro ao agendar consulta. Tente novamente.",
        variant: "destructive",
      })
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "agendado":
        return <Badge variant="secondary">Agendado</Badge>
      case "confirmado":
        return <Badge variant="default">Confirmado</Badge>
      case "concluido":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            Concluído
          </Badge>
        )
      case "cancelado":
        return <Badge variant="destructive">Cancelado</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const updateStatus = async (id: number, newStatus: string) => {
    try {
      console.log("[v0] Updating status for ID:", id, "to status:", newStatus)

setConsultas((prev) =>
        prev.map((consulta) => (consulta.id === id ? { ...consulta, status: newStatus } : consulta)),
      )

toast({
        title: "Status atualizado",
        description: `Consulta marcada como ${newStatus}.`,
      })
    } catch (error) {
      console.error("Erro ao atualizar status:", error)
      toast({
        title: "Erro",
        description: "Erro ao atualizar status da consulta.",
        variant: "destructive",
      })
    }
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />

<div className="flex-1 overflow-auto">
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-3xl font-bold">Consultas</h1>
              <p className="text-muted-foreground">Gerencie os agendamentos da clínica</p>
            </div>
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Nova Consulta
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-2xl">
                <DialogHeader>
                  <DialogTitle>Agendar Nova Consulta</DialogTitle>
                  <DialogDescription>Preencha os dados para agendar uma nova consulta</DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="paciente_nome">Nome do Paciente</Label>
                      <Input
                        id="paciente_nome"
                        value={formData.paciente_nome}
                        onChange={(e) => setFormData((prev) => ({ ...prev, paciente_nome: e.target.value }))}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="paciente_telefone">Telefone</Label>
                      <Input
                        id="paciente_telefone"
                        value={formData.paciente_telefone}
                        onChange={(e) => setFormData((prev) => ({ ...prev, paciente_telefone: e.target.value }))}
                        placeholder="(11) 99999-9999"
                      />
                    </div>
                  </div>

<div>
                    <Label htmlFor="paciente_email">Email</Label>
                    <Input
                      id="paciente_email"
                      type="email"
                      value={formData.paciente_email}
                      onChange={(e) => setFormData((prev) => ({ ...prev, paciente_email: e.target.value }))}
                    />
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="data_consulta">Data</Label>
                      <Input
                        id="data_consulta"
                        type="date"
                        value={formData.data_consulta}
                        onChange={(e) => setFormData((prev) => ({ ...prev, data_consulta: e.target.value }))}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="hora_consulta">Horário</Label>
                      <Input
                        id="hora_consulta"
                        type="time"
                        value={formData.hora_consulta}
                        onChange={(e) => setFormData((prev) => ({ ...prev, hora_consulta: e.target.value }))}
                        required
                      />
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="procedimento">Procedimento</Label>
                      <Select
                        value={formData.procedimento}
                        onValueChange={(value) => setFormData((prev) => ({ ...prev, procedimento: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o procedimento" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Limpeza">Limpeza</SelectItem>
                          <SelectItem value="Obturação">Obturação</SelectItem>
                          <SelectItem value="Canal">Canal</SelectItem>
                          <SelectItem value="Extração">Extração</SelectItem>
                          <SelectItem value="Implante">Implante</SelectItem>
                          <SelectItem value="Ortodontia">Ortodontia</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="dentista">Dentista</Label>
                      <Select
                        value={formData.dentista}
                        onValueChange={(value) => setFormData((prev) => ({ ...prev, dentista: value }))}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o dentista" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Dr. João Santos">Dr. João Santos</SelectItem>
                          <SelectItem value="Dra. Ana Costa">Dra. Ana Costa</SelectItem>
                          <SelectItem value="Dr. Carlos Silva">Dr. Carlos Silva</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div>
                    <Label htmlFor="valor">Valor (R$)</Label>
                    <Input
                      id="valor"
                      type="number"
                      step="0.01"
                      value={formData.valor}
                      onChange={(e) => setFormData((prev) => ({ ...prev, valor: e.target.value }))}
                      placeholder="0.00"
                    />
                  </div>

<div>
                    <Label htmlFor="observacoes">Observações</Label>
                    <Textarea
                      id="observacoes"
                      value={formData.observacoes}
                      onChange={(e) => setFormData((prev) => ({ ...prev, observacoes: e.target.value }))}
                      placeholder="Observações adicionais..."
                    />
                  </div>

<div className="flex justify-end space-x-2">
                    <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                      Cancelar
                    </Button>
                    <Button type="submit">Agendar Consulta</Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          </div>

{/* Filtros */}
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="text-lg">Filtros</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex gap-4">
                <div className="flex-1">
                  <Label htmlFor="search">Buscar</Label>
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="search"
                      placeholder="Buscar por paciente, procedimento ou dentista..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <div>
                  <Label htmlFor="status-filter">Status</Label>
                  <Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger className="w-40">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="todos">Todos</SelectItem>
                      <SelectItem value="agendado">Agendado</SelectItem>
                      <SelectItem value="confirmado">Confirmado</SelectItem>
                      <SelectItem value="concluido">Concluído</SelectItem>
                      <SelectItem value="cancelado">Cancelado</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Lista de Consultas */}
          <Card>
            <CardHeader>
              <CardTitle>Consultas Registradas</CardTitle>
              <CardDescription>{filteredConsultas.length} consulta(s) encontrada(s)</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Paciente</TableHead>
                    <TableHead>Data/Hora</TableHead>
                    <TableHead>Procedimento</TableHead>
                    <TableHead>Dentista</TableHead>
                    <TableHead>Valor</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Ações</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredConsultas.map((consulta) => (
                    <TableRow key={consulta.id}>
                      <TableCell>
                        <div>
                          <div className="font-medium">{consulta.paciente_nome}</div>
                          <div className="text-sm text-muted-foreground">{consulta.paciente_telefone}</div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <Calendar className="h-4 w-4 text-muted-foreground" />
                          <div>
                            <div>{new Date(consulta.data_consulta).toLocaleDateString("pt-BR")}</div>
                            <div className="text-sm text-muted-foreground">{consulta.hora_consulta}</div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>{consulta.procedimento}</TableCell>
                      <TableCell>{consulta.dentista}</TableCell>
                      <TableCell>R$ {consulta.valor.toFixed(2)}</TableCell>
                      <TableCell>{getStatusBadge(consulta.status)}</TableCell>
                      <TableCell>
                        <Select
                          value={consulta.status}
                          onValueChange={(newStatus) => updateStatus(consulta.id, newStatus)}
                        >
                          <SelectTrigger className="w-32">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="agendado">Agendado</SelectItem>
                            <SelectItem value="confirmado">Confirmado</SelectItem>
                            <SelectItem value="concluido">Concluído</SelectItem>
                            <SelectItem value="cancelado">Cancelado</SelectItem>
                          </SelectContent>
                        </Select>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/consultas/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]sql:file="scripts/03-insert-sample-data.sql" isMerged="true"
-- Inserindo doutores de exemplo
INSERT INTO doctors (nome, especialidade, telefone, cro) VALUES
('Dr. João Silva', 'Ortodontia', '(11) 99888-7777', 'CRO-SP 12345'),
('Dra. Maria Santos', 'Endodontia', '(11) 98765-4321', 'CRO-SP 67890'),
('Dr. Carlos Oliveira', 'Implantodontia', '(11) 97654-3210', 'CRO-SP 11111'),
('Dra. Ana Costa', 'Periodontia', '(11) 96543-2109', 'CRO-SP 22222');

-- Inserindo pacientes de exemplo
INSERT INTO patients (nome, telefone, prontuario, email, data_nascimento) VALUES
('Roberto Souza', '(11) 99190-8579', '11616', 'roberto@email.com', '1985-03-12'),
('Maria Silva', '(11) 98765-1234', '11617', 'maria@email.com', '1990-07-20'),
('João Santos', '(11) 97654-5678', '11618', 'joao@email.com', '1988-11-15'),
('Ana Oliveira', '(11) 96543-9876', '11619', 'ana@email.com', '1992-05-08'),
('Carlos Lima', '(11) 95432-1098', '11620', 'carlos@email.com', '1987-09-25'),
('Lucia Pereira', '(11) 94321-0987', '11621', 'lucia@email.com', '1995-02-14'),
('Pedro Costa', '(11) 93210-9876', '11622', 'pedro@email.com', '1983-12-03'),
('Sofia Alves', '(11) 92109-8765', '11623', 'sofia@email.com', '1991-08-17');

-- Inserindo status de consulta
INSERT INTO appointment_status (descricao) VALUES
('Agendado'),
('Confirmado'), 
('Faltou'),
('Cancelado'),
('Em Espera'),
('Em Atendimento'),
('Atendido');

-- Inserindo procedimentos
INSERT INTO procedures (nome) VALUES
('Avaliação Particular'),
('Limpeza'),
('Restauração'),
('Canal'),
('Extração'),
('Implante'),
('Ortodontia'),
('Clareamento');

-- Inserindo tags/marcadores
INSERT INTO tags (nome) VALUES
('Primeira consulta'),
('Particular'),
('Convênio'),
('Urgência'),
('Retorno'),
('Avaliação'),
('Tratamento'),
('Manutenção');
[V0_FILE]sql:file="scripts/04-insert-appointments-august-25.sql" isMerged="true"
-- Agendamentos para 25 de agosto de 2025
INSERT INTO appointments (doctor_id, patient_id, status_id, data_consulta, hora_inicio, hora_fim, check_in, confirmado_por, observacoes) VALUES
-- Dr. João Silva (Ortodontia)
(1, 1, 2, '2025-08-25', '08:00', '09:00', TRUE, 'Secretária', 'Consulta de avaliação ortodôntica'),
(1, 2, 1, '2025-08-25', '09:30', '10:30', FALSE, NULL, 'Manutenção aparelho'),
(1, 3, 2, '2025-08-25', '14:00', '15:00', TRUE, 'WhatsApp', 'Ajuste ortodôntico'),

-- Dra. Maria Santos (Endodontia)
(2, 4, 2, '2025-08-25', '08:30', '10:00', TRUE, 'Telefone', 'Tratamento de canal - 2ª sessão'),
(2, 5, 1, '2025-08-25', '10:30', '12:00', FALSE, NULL, 'Avaliação endodôntica'),
(2, 6, 2, '2025-08-25', '15:00', '16:30', TRUE, 'Secretária', 'Finalização canal'),

-- Dr. Carlos Oliveira (Implantodontia)
(3, 7, 2, '2025-08-25', '09:00', '11:00', TRUE, 'WhatsApp', 'Cirurgia implante'),
(3, 8, 1, '2025-08-25', '14:30', '15:30', FALSE, NULL, 'Consulta pós-operatório'),

-- Dra. Ana Costa (Periodontia)
(4, 1, 2, '2025-08-25', '10:00', '11:00', TRUE, 'Telefone', 'Limpeza periodontal'),
(4, 2, 1, '2025-08-25', '16:00', '17:00', FALSE, NULL, 'Avaliação gengival');
[V0_FILE]sql:file="scripts/05-insert-appointments-august-26.sql" isMerged="true"
-- Agendamentos para 26 de agosto de 2025
INSERT INTO appointments (doctor_id, patient_id, status_id, data_consulta, hora_inicio, hora_fim, check_in, confirmado_por, observacoes) VALUES
-- Dr. João Silva (Ortodontia)
(1, 3, 2, '2025-08-26', '08:30', '09:30', TRUE, 'Secretária', 'Instalação aparelho'),
(1, 4, 1, '2025-08-26', '10:00', '11:00', FALSE, NULL, 'Consulta ortodôntica'),
(1, 5, 2, '2025-08-26', '15:30', '16:30', TRUE, 'WhatsApp', 'Manutenção mensal'),

-- Dra. Maria Santos (Endodontia)
(2, 6, 2, '2025-08-26', '09:00', '10:30', TRUE, 'Telefone', 'Tratamento canal - 1ª sessão'),
(2, 7, 1, '2025-08-26', '11:00', '12:30', FALSE, NULL, 'Avaliação dor'),
(2, 8, 2, '2025-08-26', '14:00', '15:30', TRUE, 'Secretária', 'Retratamento canal'),

-- Dr. Carlos Oliveira (Implantodontia)
(3, 1, 2, '2025-08-26', '08:00', '09:30', TRUE, 'WhatsApp', 'Consulta implante'),
(3, 2, 1, '2025-08-26', '16:00', '17:30', FALSE, NULL, 'Planejamento cirúrgico'),

-- Dra. Ana Costa (Periodontia)
(4, 3, 2, '2025-08-26', '10:30', '11:30', TRUE, 'Telefone', 'Raspagem'),
(4, 4, 1, '2025-08-26', '14:30', '15:30', FALSE, NULL, 'Controle periodontal');
[V0_FILE]sql:file="scripts/06-link-procedures-and-tags.sql" isMerged="true"
-- Vinculando procedimentos aos agendamentos do dia 25/08
INSERT INTO appointment_procedures (appointment_id, procedure_id) VALUES
-- Assumindo que os IDs dos appointments começam em 1
(1, 7), -- Ortodontia
(2, 7), -- Ortodontia  
(3, 7), -- Ortodontia
(4, 4), -- Canal
(5, 1), -- Avaliação
(6, 4), -- Canal
(7, 6), -- Implante
(8, 1), -- Avaliação
(9, 2), -- Limpeza
(10, 1); -- Avaliação

-- Vinculando procedimentos aos agendamentos do dia 26/08
INSERT INTO appointment_procedures (appointment_id, procedure_id) VALUES
(11, 7), -- Ortodontia
(12, 7), -- Ortodontia
(13, 7), -- Ortodontia
(14, 4), -- Canal
(15, 1), -- Avaliação
(16, 4), -- Canal
(17, 6), -- Implante
(18, 6), -- Implante
(19, 2), -- Limpeza
(20, 1); -- Avaliação

-- Vinculando tags aos agendamentos do dia 25/08
INSERT INTO appointment_tags (appointment_id, tag_id) VALUES
(1, 1), (1, 6), -- Primeira consulta, Avaliação
(2, 5), (2, 8), -- Retorno, Manutenção
(3, 5), (3, 7), -- Retorno, Tratamento
(4, 7), (4, 2), -- Tratamento, Particular
(5, 1), (5, 6), -- Primeira consulta, Avaliação
(6, 7), (6, 2), -- Tratamento, Particular
(7, 7), (7, 4), -- Tratamento, Urgência
(8, 5), (8, 6), -- Retorno, Avaliação
(9, 8), (9, 3), -- Manutenção, Convênio
(10, 1), (10, 6); -- Primeira consulta, Avaliação

-- Vinculando tags aos agendamentos do dia 26/08
INSERT INTO appointment_tags (appointment_id, tag_id) VALUES
(11, 7), (11, 2), -- Tratamento, Particular
(12, 1), (12, 6), -- Primeira consulta, Avaliação
(13, 5), (13, 8), -- Retorno, Manutenção
(14, 7), (14, 2), -- Tratamento, Particular
(15, 1), (15, 4), -- Primeira consulta, Urgência
(16, 7), (16, 2), -- Tratamento, Particular
(17, 1), (17, 6), -- Primeira consulta, Avaliação
(18, 7), (18, 2), -- Tratamento, Particular
(19, 8), (19, 3), -- Manutenção, Convênio
(20, 5), (20, 6); -- Retorno, Avaliação
[V0_FILE]sql:file="scripts/07-create-agenda-tables.sql" isMerged="true"
-- Criação das tabelas com prefixo agenda-
-- Criando todas as tabelas necessárias para o sistema de agenda

-- Tabela de doutores
CREATE TABLE IF NOT EXISTS "agenda-doutor" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nome VARCHAR(255) NOT NULL,
    especialidade VARCHAR(255),
    telefone VARCHAR(20),
    email VARCHAR(255),
    cro VARCHAR(20),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de pacientes
CREATE TABLE IF NOT EXISTS "agenda-pacientes" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nome VARCHAR(255) NOT NULL,
    telefone VARCHAR(20),
    email VARCHAR(255),
    data_nascimento DATE,
    prontuario VARCHAR(50),
    endereco TEXT,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de procedimentos
CREATE TABLE IF NOT EXISTS "agenda-procedimentos" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nome VARCHAR(255) NOT NULL,
    descricao TEXT,
    valor DECIMAL(10,2),
    duracao_minutos INTEGER DEFAULT 60,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de status de consulta
CREATE TABLE IF NOT EXISTS "agenda-status" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nome VARCHAR(100) NOT NULL,
    cor VARCHAR(7) DEFAULT '#3B82F6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de tags
CREATE TABLE IF NOT EXISTS "agenda-tags" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nome VARCHAR(100) NOT NULL,
    cor VARCHAR(7) DEFAULT '#10B981',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela principal de consultas
CREATE TABLE IF NOT EXISTS "agenda-consultas" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    doutor_id UUID REFERENCES "agenda-doutor"(id) ON DELETE CASCADE,
    paciente_id UUID REFERENCES "agenda-pacientes"(id) ON DELETE CASCADE,
    data_consulta DATE NOT NULL,
    hora_inicio TIME NOT NULL,
    hora_fim TIME NOT NULL,
    status_id UUID REFERENCES "agenda-status"(id),
    observacoes TEXT,
    primeira_consulta BOOLEAN DEFAULT false,
    valor DECIMAL(10,2),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de relacionamento consulta-procedimentos
CREATE TABLE IF NOT EXISTS "agenda-consulta-procedimentos" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    consulta_id UUID REFERENCES "agenda-consultas"(id) ON DELETE CASCADE,
    procedimento_id UUID REFERENCES "agenda-procedimentos"(id) ON DELETE CASCADE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tabela de relacionamento consulta-tags
CREATE TABLE IF NOT EXISTS "agenda-consulta-tags" (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    consulta_id UUID REFERENCES "agenda-consultas"(id) ON DELETE CASCADE,
    tag_id UUID REFERENCES "agenda-tags"(id) ON DELETE CASCADE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Índices para melhor performance
CREATE INDEX IF NOT EXISTS idx_agenda_consultas_data ON "agenda-consultas"(data_consulta);
CREATE INDEX IF NOT EXISTS idx_agenda_consultas_doutor ON "agenda-consultas"(doutor_id);
CREATE INDEX IF NOT EXISTS idx_agenda_consultas_paciente ON "agenda-consultas"(paciente_id);
[V0_FILE]sql:file="scripts/08-insert-agenda-sample-data.sql" isMerged="true"
-- Inserção de dados de exemplo para as tabelas agenda
-- Inserindo dados de exemplo com os novos nomes de tabelas

-- Inserir doutores
INSERT INTO "agenda-doutor" (id, nome, especialidade, telefone, email, cro) VALUES
('550e8400-e29b-41d4-a716-446655440001', 'Dr. João Silva', 'Ortodontia', '(11) 99999-0001', 'joao@clinica.com', 'CRO-SP 12345'),
('550e8400-e29b-41d4-a716-446655440002', 'Dra. Maria Santos', 'Endodontia', '(11) 99999-0002', 'maria@clinica.com', 'CRO-SP 12346'),
('550e8400-e29b-41d4-a716-446655440003', 'Dr. Pedro Costa', 'Implantodontia', '(11) 99999-0003', 'pedro@clinica.com', 'CRO-SP 12347'),
('550e8400-e29b-41d4-a716-446655440004', 'Dra. Ana Oliveira', 'Periodontia', '(11) 99999-0004', 'ana@clinica.com', 'CRO-SP 12348'),
('550e8400-e29b-41d4-a716-446655440005', 'Dr. Carlos Lima', 'Cirurgia Oral', '(11) 99999-0005', 'carlos@clinica.com', 'CRO-SP 12349');

-- Inserir pacientes
INSERT INTO "agenda-pacientes" (id, nome, telefone, email, data_nascimento, prontuario) VALUES
('660e8400-e29b-41d4-a716-446655440001', 'Lucas Ferreira', '(11) 98888-0001', 'lucas@email.com', '1990-05-15', 'P001'),
('660e8400-e29b-41d4-a716-446655440002', 'Fernanda Alves', '(11) 98888-0002', 'fernanda@email.com', '1985-08-22', 'P002'),
('660e8400-e29b-41d4-a716-446655440003', 'Roberto Mendes', '(11) 98888-0003', 'roberto@email.com', '1992-12-10', 'P003'),
('660e8400-e29b-41d4-a716-446655440004', 'Juliana Rocha', '(11) 98888-0004', 'juliana@email.com', '1988-03-07', 'P004'),
('660e8400-e29b-41d4-a716-446655440005', 'Marcos Souza', '(11) 98888-0005', 'marcos@email.com', '1995-11-18', 'P005'),
('660e8400-e29b-41d4-a716-446655440006', 'Carla Dias', '(11) 98888-0006', 'carla@email.com', '1987-09-25', 'P006'),
('660e8400-e29b-41d4-a716-446655440007', 'Rafael Torres', '(11) 98888-0007', 'rafael@email.com', '1993-06-14', 'P007'),
('660e8400-e29b-41d4-a716-446655440008', 'Patrícia Gomes', '(11) 98888-0008', 'patricia@email.com', '1991-01-30', 'P008');

-- Inserir status
INSERT INTO "agenda-status" (id, nome, cor) VALUES
('770e8400-e29b-41d4-a716-446655440001', 'Agendado', '#3B82F6'),
('770e8400-e29b-41d4-a716-446655440002', 'Confirmado', '#10B981'),
('770e8400-e29b-41d4-a716-446655440003', 'Em Atendimento', '#F59E0B'),
('770e8400-e29b-41d4-a716-446655440004', 'Concluído', '#059669'),
('770e8400-e29b-41d4-a716-446655440005', 'Cancelado', '#EF4444'),
('770e8400-e29b-41d4-a716-446655440006', 'Faltou', '#8B5CF6');

-- Inserir procedimentos
INSERT INTO "agenda-procedimentos" (id, nome, descricao, valor, duracao_minutos) VALUES
('880e8400-e29b-41d4-a716-446655440001', 'Limpeza', 'Limpeza e profilaxia dental', 120.00, 60),
('880e8400-e29b-41d4-a716-446655440002', 'Restauração', 'Restauração em resina composta', 180.00, 90),
('880e8400-e29b-41d4-a716-446655440003', 'Canal', 'Tratamento endodôntico', 450.00, 120),
('880e8400-e29b-41d4-a716-446655440004', 'Extração', 'Extração dentária simples', 200.00, 45),
('880e8400-e29b-41d4-a716-446655440005', 'Implante', 'Colocação de implante dentário', 1200.00, 180),
('880e8400-e29b-41d4-a716-446655440006', 'Ortodontia', 'Consulta ortodôntica', 150.00, 60),
('880e8400-e29b-41d4-a716-446655440007', 'Clareamento', 'Clareamento dental', 300.00, 90);

-- Inserir tags
INSERT INTO "agenda-tags" (id, nome, cor) VALUES
('990e8400-e29b-41d4-a716-446655440001', 'Urgência', '#EF4444'),
('990e8400-e29b-41d4-a716-446655440002', 'Retorno', '#3B82F6'),
('990e8400-e29b-41d4-a716-446655440003', 'Primeira Consulta', '#10B981'),
('990e8400-e29b-41d4-a716-446655440004', 'Particular', '#F59E0B'),
('990e8400-e29b-41d4-a716-446655440005', 'Convênio', '#8B5CF6');
[V0_FILE]sql:file="scripts/09-insert-agenda-appointments.sql" isMerged="true"
-- Inserção de consultas de exemplo para diferentes dias
-- Criando consultas para os dias 25, 26 e 27 de agosto de 2025

-- Consultas para 25 de agosto de 2025
INSERT INTO "agenda-consultas" (id, doutor_id, paciente_id, data_consulta, hora_inicio, hora_fim, status_id, observacoes, primeira_consulta, valor) VALUES
-- Dr. João Silva
('aa0e8400-e29b-41d4-a716-446655440001', '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440001', '2025-08-25', '08:00', '09:00', '770e8400-e29b-41d4-a716-446655440002', 'Consulta de rotina', false, 150.00),
('aa0e8400-e29b-41d4-a716-446655440002', '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440002', '2025-08-25', '10:00', '11:30', '770e8400-e29b-41d4-a716-446655440001', 'Avaliação ortodôntica', true, 150.00),
('aa0e8400-e29b-41d4-a716-446655440003', '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440003', '2025-08-25', '14:00', '15:00', '770e8400-e29b-41d4-a716-446655440002', 'Manutenção aparelho', false, 150.00),

-- Dra. Maria Santos
('aa0e8400-e29b-41d4-a716-446655440004', '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440004', '2025-08-25', '09:00', '11:00', '770e8400-e29b-41d4-a716-446655440003', 'Tratamento de canal', false, 450.00),
('aa0e8400-e29b-41d4-a716-446655440005', '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440005', '2025-08-25', '15:00', '16:00', '770e8400-e29b-41d4-a716-446655440002', 'Consulta de retorno', false, 120.00),

-- Dr. Pedro Costa
('aa0e8400-e29b-41d4-a716-446655440006', '550e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440006', '2025-08-25', '08:30', '11:30', '770e8400-e29b-41d4-a716-446655440001', 'Cirurgia de implante', false, 1200.00),
('aa0e8400-e29b-41d4-a716-446655440007', '550e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440007', '2025-08-25', '14:30', '15:30', '770e8400-e29b-41d4-a716-446655440002', 'Avaliação pré-implante', true, 200.00);

-- Consultas para 26 de agosto de 2025
INSERT INTO "agenda-consultas" (id, doutor_id, paciente_id, data_consulta, hora_inicio, hora_fim, status_id, observacoes, primeira_consulta, valor) VALUES
-- Dr. João Silva
('bb0e8400-e29b-41d4-a716-446655440001', '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440008', '2025-08-26', '09:00', '10:00', '770e8400-e29b-41d4-a716-446655440002', 'Primeira consulta ortodôntica', true, 150.00),
('bb0e8400-e29b-41d4-a716-446655440002', '550e8400-e29b-41d4-a716-446655440001', '660e8400-e29b-41d4-a716-446655440001', '2025-08-26', '15:00', '16:00', '770e8400-e29b-41d4-a716-446655440001', 'Retorno ortodontia', false, 150.00),

-- Dra. Maria Santos
('bb0e8400-e29b-41d4-a716-446655440003', '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440003', '2025-08-26', '08:00', '10:00', '770e8400-e29b-41d4-a716-446655440003', 'Finalização de canal', false, 450.00),
('bb0e8400-e29b-41d4-a716-446655440004', '550e8400-e29b-41d4-a716-446655440002', '660e8400-e29b-41d4-a716-446655440002', '2025-08-26', '14:00', '15:30', '770e8400-e29b-41d4-a716-446655440002', 'Restauração', false, 180.00),

-- Dra. Ana Oliveira
('bb0e8400-e29b-41d4-a716-446655440005', '550e8400-e29b-41d4-a716-446655440004', '660e8400-e29b-41d4-a716-446655440004', '2025-08-26', '10:00', '11:00', '770e8400-e29b-41d4-a716-446655440002', 'Limpeza periodontal', false, 120.00),
('bb0e8400-e29b-41d4-a716-446655440006', '550e8400-e29b-41d4-a716-446655440004', '660e8400-e29b-41d4-a716-446655440005', '2025-08-26', '16:00', '17:00', '770e8400-e29b-41d4-a716-446655440001', 'Avaliação periodontal', true, 150.00);

-- Consultas para 27 de agosto de 2025
INSERT INTO "agenda-consultas" (id, doutor_id, paciente_id, data_consulta, hora_inicio, hora_fim, status_id, observacoes, primeira_consulta, valor) VALUES
-- Dr. Carlos Lima
('cc0e8400-e29b-41d4-a716-446655440001', '550e8400-e29b-41d4-a716-446655440005', '660e8400-e29b-41d4-a716-446655440006', '2025-08-27', '08:00', '08:45', '770e8400-e29b-41d4-a716-446655440002', 'Extração simples', false, 200.00),
('cc0e8400-e29b-41d4-a716-446655440002', '550e8400-e29b-41d4-a716-446655440005', '660e8400-e29b-41d4-a716-446655440007', '2025-08-27', '10:00', '11:00', '770e8400-e29b-41d4-a716-446655440001', 'Avaliação cirúrgica', true, 150.00),

-- Dr. Pedro Costa
('cc0e8400-e29b-41d4-a716-446655440003', '550e8400-e29b-41d4-a716-446655440003', '660e8400-e29b-41d4-a716-446655440008', '2025-08-27', '14:00', '15:00', '770e8400-e29b-41d4-a716-446655440002', 'Retorno pós-implante', false, 100.00),

-- Dra. Ana Oliveira
('cc0e8400-e29b-41d4-a716-446655440004', '550e8400-e29b-41d4-a716-446655440004', '660e8400-e29b-41d4-a716-446655440001', '2025-08-27', '09:00', '10:30', '770e8400-e29b-41d4-a716-446655440003', 'Clareamento dental', false, 300.00);
[V0_FILE]sql:file="scripts/10-link-agenda-procedures-tags.sql" isMerged="true"
-- Vinculação de procedimentos e tags às consultas
-- Criando relacionamentos entre consultas, procedimentos e tags

-- Vincular procedimentos às consultas do dia 25/08/2025
INSERT INTO "agenda-consulta-procedimentos" (consulta_id, procedimento_id) VALUES
-- Dr. João Silva
('aa0e8400-e29b-41d4-a716-446655440001', '880e8400-e29b-41d4-a716-446655440006'), -- Ortodontia
('aa0e8400-e29b-41d4-a716-446655440002', '880e8400-e29b-41d4-a716-446655440006'), -- Ortodontia
('aa0e8400-e29b-41d4-a716-446655440003', '880e8400-e29b-41d4-a716-446655440006'), -- Ortodontia

-- Dra. Maria Santos
('aa0e8400-e29b-41d4-a716-446655440004', '880e8400-e29b-41d4-a716-446655440003'), -- Canal
('aa0e8400-e29b-41d4-a716-446655440005', '880e8400-e29b-41d4-a716-446655440001'), -- Limpeza

-- Dr. Pedro Costa
('aa0e8400-e29b-41d4-a716-446655440006', '880e8400-e29b-41d4-a716-446655440005'), -- Implante
('aa0e8400-e29b-41d4-a716-446655440007', '880e8400-e29b-41d4-a716-446655440001'); -- Limpeza

-- Vincular procedimentos às consultas do dia 26/08/2025
INSERT INTO "agenda-consulta-procedimentos" (consulta_id, procedimento_id) VALUES
-- Dr. João Silva
('bb0e8400-e29b-41d4-a716-446655440001', '880e8400-e29b-41d4-a716-446655440006'), -- Ortodontia
('bb0e8400-e29b-41d4-a716-446655440002', '880e8400-e29b-41d4-a716-446655440006'), -- Ortodontia

-- Dra. Maria Santos
('bb0e8400-e29b-41d4-a716-446655440003', '880e8400-e29b-41d4-a716-446655440003'), -- Canal
('bb0e8400-e29b-41d4-a716-446655440004', '880e8400-e29b-41d4-a716-446655440002'), -- Restauração

-- Dra. Ana Oliveira
('bb0e8400-e29b-41d4-a716-446655440005', '880e8400-e29b-41d4-a716-446655440001'), -- Limpeza
('bb0e8400-e29b-41d4-a716-446655440006', '880e8400-e29b-41d4-a716-446655440001'); -- Limpeza

-- Vincular procedimentos às consultas do dia 27/08/2025
INSERT INTO "agenda-consulta-procedimentos" (consulta_id, procedimento_id) VALUES
-- Dr. Carlos Lima
('cc0e8400-e29b-41d4-a716-446655440001', '880e8400-e29b-41d4-a716-446655440004'), -- Extração
('cc0e8400-e29b-41d4-a716-446655440002', '880e8400-e29b-41d4-a716-446655440001'), -- Limpeza

-- Dr. Pedro Costa
('cc0e8400-e29b-41d4-a716-446655440003', '880e8400-e29b-41d4-a716-446655440005'), -- Implante

-- Dra. Ana Oliveira
('cc0e8400-e29b-41d4-a716-446655440004', '880e8400-e29b-41d4-a716-446655440007'); -- Clareamento

-- Vincular tags às consultas
INSERT INTO "agenda-consulta-tags" (consulta_id, tag_id) VALUES
-- Tags para primeira consulta
('aa0e8400-e29b-41d4-a716-446655440002', '990e8400-e29b-41d4-a716-446655440003'), -- Primeira Consulta
('aa0e8400-e29b-41d4-a716-446655440007', '990e8400-e29b-41d4-a716-446655440003'), -- Primeira Consulta
('bb0e8400-e29b-41d4-a716-446655440001', '990e8400-e29b-41d4-a716-446655440003'), -- Primeira Consulta
('bb0e8400-e29b-41d4-a716-446655440006', '990e8400-e29b-41d4-a716-446655440003'), -- Primeira Consulta
('cc0e8400-e29b-41d4-a716-446655440002', '990e8400-e29b-41d4-a716-446655440003'), -- Primeira Consulta

-- Tags para retorno
('aa0e8400-e29b-41d4-a716-446655440005', '990e8400-e29b-41d4-a716-446655440002'), -- Retorno
('bb0e8400-e29b-41d4-a716-446655440002', '990e8400-e29b-41d4-a716-446655440002'), -- Retorno
('cc0e8400-e29b-41d4-a716-446655440003', '990e8400-e29b-41d4-a716-446655440002'), -- Retorno

-- Tags para particular
('aa0e8400-e29b-41d4-a716-446655440006', '990e8400-e29b-41d4-a716-446655440004'), -- Particular
('bb0e8400-e29b-41d4-a716-446655440003', '990e8400-e29b-41d4-a716-446655440004'), -- Particular
('cc0e8400-e29b-41d4-a716-446655440004', '990e8400-e29b-41d4-a716-446655440004'); -- Particular
[V0_FILE]typescriptreact:file="components/whatsapp-qr-login.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Loader2, RefreshCw, CheckCircle, AlertCircle, QrCode } from "lucide-react"
import { wApiClient } from "@/lib/w-api"

interface QRLoginProps {
  onConnectionSuccess: () => void
}

export function WhatsAppQRLogin({ onConnectionSuccess }: QRLoginProps) {
  const [qrCodeUrl, setQrCodeUrl] = useState<string>("")
  const [status, setStatus] = useState<"disconnected" | "connecting" | "connected" | "error">("disconnected")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string>("")

const checkConnectionStatus = async () => {
    try {
      const statusResponse = await wApiClient.getInstanceStatus()
      console.log("[v0] Status response:", statusResponse)

if (statusResponse.connected) {
        setStatus("connected")
        onConnectionSuccess()
      } else {
        setStatus("disconnected")
      }
      setError("") // Clear any previous errors
    } catch (error) {
      console.error("Error checking status:", error)
      setStatus("disconnected")
      setError("")
    }
  }

const generateQRCode = async () => {
    setLoading(true)
    setError("")

try {
      setStatus("connecting")
      console.log("[v0] Generating QR code for instance:", wApiClient)

const response = await wApiClient.getQRCode()
      console.log("[v0] QR Code response:", response)

if (response.qrCodeUrl) {
        setQrCodeUrl(response.qrCodeUrl)
        const pollInterval = setInterval(async () => {
          try {
            const statusResponse = await wApiClient.getInstanceStatus()
            console.log("[v0] Polling status:", statusResponse)

if (statusResponse.connected) {
              setStatus("connected")
              clearInterval(pollInterval)
              URL.revokeObjectURL(response.qrCodeUrl)
              onConnectionSuccess()
            }
          } catch (error) {
            console.log("[v0] Polling error (normal during connection):", error)
          }
        }, 3000)

setTimeout(() => {
          clearInterval(pollInterval)
          URL.revokeObjectURL(response.qrCodeUrl)
        }, 120000)
      } else {
        throw new Error("QR Code não foi retornado pela API")
      }
    } catch (error: any) {
      console.error("Error generating QR code:", error)
      setStatus("error")
      if (error.message.includes("404")) {
        setError("Instância não encontrada. Verifique o ID da instância.")
      } else if (error.message.includes("401")) {
        setError("Token de acesso inválido. Verifique suas credenciais.")
      } else {
        setError(`Erro ao gerar QR Code: ${error.message}`)
      }
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    return () => {
      if (qrCodeUrl) {
        URL.revokeObjectURL(qrCodeUrl)
      }
    }
  }, [qrCodeUrl])

useEffect(() => {
    checkConnectionStatus()
  }, [])

const getStatusBadge = () => {
    switch (status) {
      case "connected":
        return (
          <Badge className="bg-green-500">
            <CheckCircle className="h-3 w-3 mr-1" />
            Conectado
          </Badge>
        )
      case "connecting":
        return (
          <Badge variant="secondary">
            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
            Conectando
          </Badge>
        )
      case "error":
        return (
          <Badge variant="destructive">
            <AlertCircle className="h-3 w-3 mr-1" />
            Erro
          </Badge>
        )
      default:
        return <Badge variant="outline">Desconectado</Badge>
    }
  }

if (status === "connected") {
    return (
      <Card className="w-full max-w-md mx-auto">
        <CardHeader className="text-center">
          <CardTitle className="flex items-center justify-center gap-2">
            <CheckCircle className="h-5 w-5 text-green-500" />
            WhatsApp Conectado
          </CardTitle>
          <CardDescription>Sua instância do WhatsApp está conectada e funcionando</CardDescription>
        </CardHeader>
        <CardContent className="text-center">
          <div className="space-y-4">
            {getStatusBadge()}
            <Button variant="outline" onClick={checkConnectionStatus} className="w-full bg-transparent">
              <RefreshCw className="h-4 w-4 mr-2" />
              Verificar Status
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="text-center">
        <CardTitle className="flex items-center justify-center gap-2">
          <QrCode className="h-5 w-5" />
          Conectar WhatsApp
        </CardTitle>
        <CardDescription>Escaneie o QR Code com seu WhatsApp para conectar</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex justify-center">{getStatusBadge()}</div>

{error && (
          <div className="text-center text-sm text-red-600 bg-red-50 p-3 rounded-lg border border-red-200">{error}</div>
        )}

{qrCodeUrl && status === "connecting" ? (
          <div className="text-center space-y-4">
            <div className="bg-white p-4 rounded-lg border inline-block">
              <img src={qrCodeUrl || "/placeholder.svg"} alt="QR Code WhatsApp" className="w-48 h-48 mx-auto" />
            </div>
            <p className="text-sm text-muted-foreground">Abra o WhatsApp no seu celular e escaneie este código</p>
            <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              Aguardando conexão...
            </div>
          </div>
        ) : (
          <div className="text-center space-y-4">
            <div className="w-48 h-48 mx-auto bg-muted rounded-lg flex items-center justify-center">
              <QrCode className="h-16 w-16 text-muted-foreground" />
            </div>
            <Button onClick={generateQRCode} disabled={loading} className="w-full">
              {loading ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Gerando QR Code...
                </>
              ) : (
                <>
                  <QrCode className="h-4 w-4 mr-2" />
                  Gerar QR Code
                </>
              )}
            </Button>

{status === "error" && (
              <Button variant="outline" onClick={checkConnectionStatus} className="w-full bg-transparent">
                <RefreshCw className="h-4 w-4 mr-2" />
                Tentar Novamente
              </Button>
            )}
          </div>
        )}

<div className="text-xs text-muted-foreground text-center space-y-1">
          <p>• Abra o WhatsApp no seu celular</p>
          <p>• Vá em Configurações → Aparelhos conectados</p>
          <p>• Toque em "Conectar um aparelho"</p>
          <p>• Escaneie o QR Code acima</p>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]jpg:file="public/qr-code-for-patient-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/qr-code-for-patient--9gGywEUvKdrzO9edR4uSKVGg5Zuzo1.jpg" isMerged="true"
[V0_FILE]jpg:file="public/medical-anamnesis-form-document.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/medical-anamnesis-form-document-0XzSiUsvDtG7skflMwheiagaLdZhts.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dental-frontal-smile-photo-before-treatment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-frontal-smile-photo-before-treatment-0sljuGEnYAL0ysutsicHqXmGC5On0p.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dental-lateral-right-occlusion-photo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-lateral-right-occlusion-photo-CWgtzEmtDQy1xT16fxpuEiwCcgiSQk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/panoramic-dental-x-ray-radiography.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/panoramic-dental-x-ray-radiography-DqwdKQcADyjID7MB4EzTyOUUpG6frI.jpg" isMerged="true"
[V0_FILE]jpg:file="public/upper-dental-arch-impression-mold.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/upper-dental-arch-impression-mold-55Pdt5eePR8PK5eGaP1argZISjIcCZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/orthodontic-treatment-plan-document.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orthodontic-treatment-plan-document-Ehvc5Et9IsfKrAbXXxX9mnLOno2PfW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/periapical-dental-x-ray-tooth-36-root-canal.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/periapical-dental-x-ray-tooth-36-root-canal-vT4sOtCARBXQgoYj89BfnCbCaOpGD8.jpg" isMerged="true"
[V0_FILE]jpg:file="public/post-operative-dental-x-ray-control-endodontic.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/post-operative-dental-x-ray-control-endodontic-X3sHw5kzn8HBn8yLutDzxLjkn3cFcj.jpg" isMerged="true"
[V0_FILE]png:file="public/medical-certificate.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/medical-certificate-PQYfGeybb5jRmVVlkEXMZkvKJdSXco.png" isMerged="true"
[V0_FILE]jpg:file="public/attendance-declaration-document.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/attendance-declaration-document-CxAGEsan7CQMMb6G9kdkAG1ia0ghRy.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/appointment-info-popup.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "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 { Separator } from "@/components/ui/separator"
import { X, Clock, User, Phone, Calendar, DollarSign, FileText, Tag, Check } from "lucide-react"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { useRouter } from "next/navigation"

interface Appointment {
  id: string
  professional_id: string
  patient_name: string
  patient_phone: string
  start_time: string
  end_time: string
  date: string
  type: "consulta" | "compromisso" | "evento" | "aviso" | "retorno"
  color: string
  procedures?: string[]
  notes?: string
}

interface Professional {
  id: string
  name: string
  color: string
  active: boolean
}

interface AppointmentInfoPopupProps {
  appointment: Appointment
  professional: Professional
  position: { x: number; y: number }
  onClose: () => void
}

export function AppointmentInfoPopup({ appointment, professional, position, onClose }: AppointmentInfoPopupProps) {
  const router = useRouter()
  const popupRef = useRef<HTMLDivElement>(null)
  const [status, setStatus] = useState("4-Atendido")
  const [markers, setMarkers] = useState<string[]>(["CIRURGIA"])
  const [newMarker, setNewMarker] = useState("")
  const [showNewMarkerInput, setShowNewMarkerInput] = useState(false)
  const [markerToDelete, setMarkerToDelete] = useState<string | null>(null)
  const [isVisible, setIsVisible] = useState(false)

const patientData = {
    prontuario: appointment.patient_name === "ROBERTO KATSUICHI" ? "11616" : "14306",
    telefone: appointment.patient_phone || "(11) 99190-8579",
    financeiro: "Ok",
    agendadoEm: "15/09/2025 às 10:49",
    procedimentos: appointment.procedures?.join(", ") || "Avaliação particular",
    observacoes:
      appointment.notes ||
      "Bom dia, minha coroa caiu e estava tendo infiltração há um tempinho, e decidi fazer um implante pois o dente está ruim, será que eu poderia marcar para semana que vem?",
    codigo: appointment.type === "consulta" ? "COD-2025-001" : null,
    checkin: "Confirmado pela secretária",
  }

const statusOptions = [
    { value: "1-Confirmado", label: "1-Confirmado", color: "bg-green-500" },
    { value: "2-Em espera", label: "2-Emespera", color: "bg-yellow-500" },
    { value: "3-Sendo atendido", label: "3-Sendo atendido", color: "bg-blue-500" },
    { value: "4-Atendido", label: "4-Atendido", color: "bg-green-600" },
    { value: "5-Não compareceu", label: "5-Não compareceu", color: "bg-red-500" },
    { value: "6-Reagendado", label: "6-Reagendado", color: "bg-purple-500" },
  ]

const markerOptions = [
    "Prótese feita",
    "Trabalho clínico",
    "Primeira consulta",
    "Retorno",
    "Urgência",
    "Canal",
    "Extração",
    "Limpeza",
    "CIRURGIA",
  ]

const getCurrentStatusConfig = () => {
    return statusOptions.find((option) => option.value === status) || statusOptions[0]
  }

const handleAddMarker = () => {
    if (newMarker.trim() && !markers.includes(newMarker.trim())) {
      setMarkers([...markers, newMarker.trim()])
      setNewMarker("")
      setShowNewMarkerInput(false)
    }
  }

const handleRemoveMarker = (markerToRemove: string) => {
    setMarkerToDelete(markerToRemove)
  }

const confirmRemoveMarker = () => {
    if (markerToDelete) {
      setMarkers(markers.filter((marker) => marker !== markerToDelete))
      setMarkerToDelete(null)
    }
  }

const handleSelectMarker = (marker: string) => {
    if (!markers.includes(marker)) {
      setMarkers([...markers, marker])
    }
  }

const handlePatientClick = () => {
    // Navegar para a página do paciente
    router.push(`/patients/${appointment.id}`)
  }

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
        const target = event.target as Element
        if (!target.closest(".scroll-area") && !target.closest("[data-radix-scroll-area-viewport]")) {
          onClose()
        }
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [onClose])

useEffect(() => {
    setIsVisible(true)
  }, [])

useEffect(() => {
    if (popupRef.current) {
      const popup = popupRef.current
      const rect = popup.getBoundingClientRect()
      const viewportWidth = window.innerWidth
      const viewportHeight = window.innerHeight

let adjustedX = position.x
      let adjustedY = position.y

if (rect.right > viewportWidth) {
        adjustedX = position.x - rect.width - 20
      }

if (rect.bottom > viewportHeight) {
        adjustedY = position.y - rect.height
      }

popup.style.left = `${adjustedX}px`
      popup.style.top = `${adjustedY}px`
    }
  }, [position])

return (
    <>
      <div
        ref={popupRef}
        className={`fixed z-50 w-80 bg-background border rounded-lg shadow-lg pointer-events-auto transition-all duration-200 ease-out ${
          isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"
        }`}
        style={{
          left: position.x,
          top: position.y,
          transformOrigin: "top left",
        }}
      >
        <div className="absolute inset-0 bg-background/95 backdrop-blur-sm rounded-lg" />
        <div className="relative">
          <Card className="border-0 shadow-none bg-transparent">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-sm font-semibold">{appointment.patient_name}</CardTitle>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6 hover:bg-accent/50 transition-colors duration-150"
                  onClick={onClose}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>

<CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="text-sm font-medium">Status:</span>
                    <div className={`w-3 h-3 rounded-full ${getCurrentStatusConfig().color}`} />
                    <span className="text-sm font-medium">{getCurrentStatusConfig().label}</span>
                  </div>
                  <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              </div>

<div className="space-y-3 text-sm">
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Calendar className="h-4 w-4 text-blue-600" />
                    <span className="text-gray-600">Agendado em:</span>
                    <span className="font-semibold text-gray-800">{patientData.agendadoEm}</span>
                  </div>

<div className="flex items-center space-x-2">
                    <User className="h-4 w-4 text-green-600" />
                    <span className="text-gray-600">Profissional:</span>
                    <span className="font-semibold text-gray-800">{professional.name}</span>
                  </div>

<div className="flex items-center space-x-2">
                    <FileText className="h-4 w-4 text-purple-600" />
                    <span className="text-gray-600">Prontuário:</span>
                    <button
                      onClick={handlePatientClick}
                      className="font-semibold text-blue-600 hover:text-blue-800 underline cursor-pointer transition-colors"
                    >
                      {appointment.patient_name} ({patientData.prontuario})
                    </button>
                  </div>

<div className="flex items-center space-x-2">
                    <DollarSign className="h-4 w-4 text-green-600" />
                    <Button size="sm" className="bg-green-600 hover:bg-green-700 text-white">
                      Financeiro Ok
                    </Button>
                  </div>

<div className="flex items-center space-x-2">
                    <Phone className="h-4 w-4 text-orange-600" />
                    <span className="text-gray-600">Telefone:</span>
                    <span className="font-semibold text-gray-800">{patientData.telefone}</span>
                    <span className="text-green-600">📱</span>
                  </div>

<div className="flex items-center space-x-2">
                    <Clock className="h-4 w-4 text-red-600" />
                    <span className="text-gray-600">Horário:</span>
                    <span className="font-semibold text-gray-800">
                      {appointment.start_time} - {appointment.end_time}
                    </span>
                    <Button variant="ghost" size="icon" className="h-4 w-4">
                      ✏️
                    </Button>
                    <Button variant="ghost" size="icon" className="h-4 w-4">
                      ❌
                    </Button>
                  </div>

<div className="flex items-center space-x-2">
                    <Check className="h-4 w-4 text-green-600" />
                    <span className="text-gray-600">Check-in:</span>
                    <span className="font-semibold text-gray-800">{patientData.checkin}</span>
                  </div>
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center space-x-2">
                  <FileText className="h-4 w-4 text-blue-600" />
                  <span className="text-sm font-semibold">Procedimentos:</span>
                </div>
                <div className="text-sm text-gray-700 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-200">
                  {patientData.procedimentos}
                </div>
              </div>

<div className="space-y-3">
                <div className="flex items-center space-x-2">
                  <Tag className="h-4 w-4 text-purple-600" />
                  <span className="text-sm font-semibold">Marcadores</span>
                </div>

<div className="flex flex-wrap gap-2">
                  {markers.map((marker, index) => (
                    <Badge
                      key={index}
                      variant="default"
                      className="text-xs cursor-pointer hover:bg-destructive hover:text-destructive-foreground flex items-center gap-1 bg-red-600 text-white transition-all duration-200"
                      onClick={() => handleRemoveMarker(marker)}
                    >
                      🔴 {marker} ❌
                    </Badge>
                  ))}
                </div>

<Select onValueChange={handleSelectMarker}>
                  <SelectTrigger className="h-8 bg-gradient-to-r from-purple-50 to-indigo-50 border-purple-200">
                    <SelectValue placeholder="Selecionar marcadores..." />
                  </SelectTrigger>
                  <SelectContent>
                    {markerOptions
                      .filter((option) => !markers.includes(option))
                      .map((option) => (
                        <SelectItem key={option} value={option}>
                          {option}
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-3">
                <div className="flex items-center space-x-2">
                  <FileText className="h-4 w-4 text-green-600" />
                  <span className="text-sm font-semibold">Obs:</span>
                </div>
                <div className="text-sm text-gray-700 bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg max-h-24 overflow-y-auto border border-green-200">
                  {patientData.observacoes}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<AlertDialog open={!!markerToDelete} onOpenChange={() => setMarkerToDelete(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remover marcador</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja remover o marcador "{markerToDelete}"? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={confirmRemoveMarker} className="bg-destructive hover:bg-destructive/90">
              Remover
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/add-product-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useCallback } from "react"
import type { Product } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { ConfirmDialog } from "@/components/confirm-dialog"
import { Loader2, Plus, Check, Search, X } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"

interface AddProductDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAddProduct: (
    product: Omit<Product, "id" | "movementHistory" | "stockEntry" | "stockExit" | "lots">,
    initialLotQuantity: number,
    initialLotExpirationDate: string | null,
  ) => void
  onCheckDuplicateName: (name: string) => Promise<boolean>
}

// Função de debounce
function debounce<T extends (...args: any[]) => any>(func: T, delay: number): T & { cancel: () => void } {
  let timeout: NodeJS.Timeout | null

const debounced = ((...args: Parameters<T>) => {
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(() => {
      func(...args)
      timeout = null
    }, delay)
  }) as T & { cancel: () => void }

debounced.cancel = () => {
    if (timeout) {
      clearTimeout(timeout)
      timeout = null
    }
  }

return debounced
}

export function AddProductDialog({ open, onOpenChange, onAddProduct, onCheckDuplicateName }: AddProductDialogProps) {
  const [formData, setFormData] = useState({
    name: "",
    brand: "",
    packageType: "",
    productType: "",
    supplier: "",
    idealQuantity: "",
    lastPurchaseDate: "",
    lastPurchaseValue: "",
    lastPurchaseQuantity: "",
    initialLotQuantity: "",
    initialLotExpirationDate: "",
    isExpirationDateIndeterminate: false,
    alternativeNames: "",
    photos: [] as string[],
  })

const [brandOptions, setBrandOptions] = useState<string[]>([])
  const [supplierOptions, setSupplierOptions] = useState<string[]>([])
  const [brandOpen, setBrandOpen] = useState(false)
  const [supplierOpen, setSupplierOpen] = useState(false)
  const [productTypeOpen, setProductTypeOpen] = useState(false)
  const [showNewProductTypeInput, setShowNewProductTypeInput] = useState(false)
  const [newProductTypeName, setNewProductTypeName] = useState("")
  const [showNewBrandInput, setShowNewBrandInput] = useState(false)
  const [showNewSupplierInput, setShowNewSupplierInput] = useState(false)
  const [newBrandName, setNewBrandName] = useState("")
  const [newSupplierName, setNewSupplierName] = useState("")

const [isDuplicateName, setIsDuplicateName] = useState(false)
  const [showDuplicateWarning, setShowDuplicateWarning] = useState(false)
  const [isCheckingDuplicate, setIsCheckingDuplicate] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

const packageTypes = ["Caixa", "Unitário", "Frasco", "Seringa", "Tubo", "Sachê", "Blister", "Outros"]
  const [productTypeOptions, setProductTypeOptions] = useState<string[]>([
    "Cirugia",
    "EPI",
    "Dentística",
    "Resina",
    "Endo",
    "Analgesicos e Agulhas",
    "Protese/Pinos e Núcleos",
    "Clareamento",
    "Cimentos",
    "Prevenção",
    "Descartaveis",
    "Embalagens para esterilização",
  ])

useEffect(() => {
    if (open) {
      // Simular carregamento de marcas e fornecedores existentes
      // Em uma implementação real, isso viria do banco de dados
      setBrandOptions([
        "3M ESPE",
        "Angelus",
        "Biodinâmica",
        "Dentsply",
        "FGM",
        "Ivoclar Vivadent",
        "Kerr",
        "Maquira",
        "Ultradent",
        "Villevie",
      ])

setSupplierOptions([
        "Dental Cremer",
        "Dental Speed",
        "Dentmed",
        "Henry Schein",
        "Implacil De Bortoli",
        "Labordental",
        "Maquira",
        "Odonto Empresarial",
        "Promedica",
        "Surya Dental",
      ])
    }
  }, [open])

const handleCreateNewBrand = () => {
    if (newBrandName.trim() && !brandOptions.includes(newBrandName.trim())) {
      const newBrand = newBrandName.trim()
      setBrandOptions([...brandOptions, newBrand])
      setFormData({ ...formData, brand: newBrand })
      setNewBrandName("")
      setShowNewBrandInput(false)
      setBrandOpen(false)
    }
  }

const handleCreateNewSupplier = () => {
    if (newSupplierName.trim() && !supplierOptions.includes(newSupplierName.trim())) {
      const newSupplier = newSupplierName.trim()
      setSupplierOptions([...supplierOptions, newSupplier])
      setFormData({ ...formData, supplier: newSupplier })
      setNewSupplierName("")
      setShowNewSupplierInput(false)
      setSupplierOpen(false)
    }
  }

const handleCreateNewProductType = () => {
    if (newProductTypeName.trim() && !productTypeOptions.includes(newProductTypeName.trim())) {
      const newProductType = newProductTypeName.trim()
      setProductTypeOptions([...productTypeOptions, newProductType])
      setFormData({ ...formData, productType: newProductType })
      setNewProductTypeName("")
      setShowNewProductTypeInput(false)
      setProductTypeOpen(false)
    }
  }

useEffect(() => {
    if (!open) {
      setFormData({
        name: "",
        brand: "",
        packageType: "",
        productType: "",
        supplier: "",
        idealQuantity: "",
        lastPurchaseDate: "",
        lastPurchaseValue: "",
        lastPurchaseQuantity: "",
        initialLotQuantity: "",
        initialLotExpirationDate: "",
        isExpirationDateIndeterminate: false,
        alternativeNames: "",
        photos: [],
      })
      setIsDuplicateName(false)
      setShowDuplicateWarning(false)
      setIsCheckingDuplicate(false)
      setIsSubmitting(false)
      setBrandOpen(false)
      setSupplierOpen(false)
      setProductTypeOpen(false)
      setShowNewProductTypeInput(false)
      setNewProductTypeName("")
      setShowNewBrandInput(false)
      setShowNewSupplierInput(false)
      setNewBrandName("")
      setNewSupplierName("")
    }
  }, [open])

const checkNameDebounced = useCallback(
    debounce(async (name: string) => {
      if (name.trim().length > 2) {
        setIsCheckingDuplicate(true)
        const exists = await onCheckDuplicateName(name)
        setIsDuplicateName(exists)
        setIsCheckingDuplicate(false)
      } else {
        setIsDuplicateName(false)
      }
    }, 500),
    [onCheckDuplicateName],
  )

useEffect(() => {
    checkNameDebounced(formData.name)
    return () => checkNameDebounced.cancel()
  }, [formData.name, checkNameDebounced])

const handleNumericChange = (field: string, value: string) => {
    // Permitir string vazia ou números válidos
    if (value === "" || (!isNaN(Number(value)) && Number(value) >= 0)) {
      setFormData({ ...formData, [field]: value })
    }
  }

const handleFormSubmit = async () => {
    setIsSubmitting(true)
    const {
      initialLotQuantity,
      initialLotExpirationDate,
      isExpirationDateIndeterminate,
      alternativeNames,
      photos,
      ...rest
    } = formData
    const finalExpirationDate = isExpirationDateIndeterminate ? null : initialLotExpirationDate

const processedData = {
      ...rest,
      idealQuantity: Number(rest.idealQuantity) || 0,
      lastPurchaseValue: Number(rest.lastPurchaseValue) || 0,
      lastPurchaseQuantity: Number(rest.lastPurchaseQuantity) || 0,
      currentStock: 0,
      alternativeNames: alternativeNames
        ? alternativeNames
            .split(",")
            .map((name) => name.trim())
            .filter((name) => name)
        : [],
      photos: photos || [],
    }

await onAddProduct(processedData, Number(initialLotQuantity) || 0, finalExpirationDate)
    setIsSubmitting(false)
    onOpenChange(false)
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (isDuplicateName && !showDuplicateWarning) {
      setShowDuplicateWarning(true)
      return
    }

handleFormSubmit()
  }

return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              Adicionar Novo Produto
            </DialogTitle>
          </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 p-6 rounded-xl border border-blue-200/50 dark:border-blue-800/50">
              <h3 className="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-4 flex items-center">
                <Search className="mr-2 h-5 w-5" />
                Informações Básicas
              </h3>
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="name" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Nome do Produto
                  </Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500"
                    required
                  />
                  {isCheckingDuplicate && (
                    <p className="text-sm text-muted-foreground flex items-center mt-1">
                      <Loader2 className="h-4 w-4 animate-spin mr-1" /> Verificando nome...
                    </p>
                  )}
                  {isDuplicateName && !isCheckingDuplicate && (
                    <p className="text-sm text-orange-500 mt-1">
                      Um produto com este nome já existe. Deseja adicionar mesmo assim?
                    </p>
                  )}
                </div>

<div className="space-y-2">
                  <Label htmlFor="brand" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Marca
                  </Label>
                  <div className="space-y-2">
                    {!showNewBrandInput ? (
                      <div className="flex space-x-2">
                        <Popover open={brandOpen} onOpenChange={setBrandOpen}>
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              role="combobox"
                              aria-expanded={brandOpen}
                              className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                            >
                              {formData.brand || "Selecione a marca..."}
                              <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-full p-0">
                            <Command>
                              <CommandInput placeholder="Pesquisar marca..." />
                              <CommandList>
                                <CommandEmpty>
                                  <div className="p-4 text-center">
                                    <p className="text-sm text-muted-foreground mb-2">Nenhuma marca encontrada.</p>
                                    <Button
                                      type="button"
                                      variant="outline"
                                      size="sm"
                                      onClick={() => {
                                        setShowNewBrandInput(true)
                                        setBrandOpen(false)
                                      }}
                                    >
                                      <Plus className="h-4 w-4 mr-1" />
                                      Adicionar Nova Marca
                                    </Button>
                                  </div>
                                </CommandEmpty>
                                <CommandGroup>
                                  {brandOptions.map((brand) => (
                                    <CommandItem
                                      key={brand}
                                      value={brand}
                                      onSelect={(currentValue) => {
                                        setFormData({ ...formData, brand: currentValue })
                                        setBrandOpen(false)
                                      }}
                                    >
                                      <Check
                                        className={cn(
                                          "mr-2 h-4 w-4",
                                          formData.brand === brand ? "opacity-100" : "opacity-0",
                                        )}
                                      />
                                      {brand}
                                    </CommandItem>
                                  ))}
                                </CommandGroup>
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                        <Button
                          type="button"
                          variant="outline"
                          size="icon"
                          onClick={() => setShowNewBrandInput(true)}
                          className="bg-green-50 hover:bg-green-100 border-green-300 text-green-700"
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <div className="flex space-x-2">
                        <Input
                          placeholder="Nome da nova marca"
                          value={newBrandName}
                          onChange={(e) => setNewBrandName(e.target.value)}
                          className="flex-1 bg-white/80 dark:bg-gray-800/80"
                        />
                        <Button
                          type="button"
                          onClick={handleCreateNewBrand}
                          disabled={!newBrandName.trim()}
                          className="bg-green-600 hover:bg-green-700"
                        >
                          Criar
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => {
                            setShowNewBrandInput(false)
                            setNewBrandName("")
                          }}
                        >
                          Cancelar
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 p-6 rounded-xl border border-purple-200/50 dark:border-purple-800/50">
              <h3 className="text-lg font-semibold text-purple-900 dark:text-purple-100 mb-4">Categorização</h3>
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="packageType" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Tipo de Embalagem
                  </Label>
                  <Select
                    value={formData.packageType}
                    onValueChange={(value) => setFormData({ ...formData, packageType: value })}
                  >
                    <SelectTrigger className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600">
                      <SelectValue placeholder="Selecione a embalagem" />
                    </SelectTrigger>
                    <SelectContent>
                      {packageTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="productType" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Tipo de Produto
                  </Label>
                  <div className="space-y-2">
                    {!showNewProductTypeInput ? (
                      <div className="flex space-x-2">
                        <Popover open={productTypeOpen} onOpenChange={setProductTypeOpen}>
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              role="combobox"
                              aria-expanded={productTypeOpen}
                              className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                            >
                              {formData.productType || "Selecione o tipo..."}
                              <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-full p-0">
                            <Command>
                              <CommandInput placeholder="Pesquisar tipo..." />
                              <CommandList>
                                <CommandEmpty>
                                  <div className="p-4 text-center">
                                    <p className="text-sm text-muted-foreground mb-2">Nenhum tipo encontrado.</p>
                                    <Button
                                      type="button"
                                      variant="outline"
                                      size="sm"
                                      onClick={() => {
                                        setShowNewProductTypeInput(true)
                                        setProductTypeOpen(false)
                                      }}
                                    >
                                      <Plus className="h-4 w-4 mr-1" />
                                      Adicionar Novo Tipo
                                    </Button>
                                  </div>
                                </CommandEmpty>
                                <CommandGroup>
                                  {productTypeOptions.map((type) => (
                                    <CommandItem
                                      key={type}
                                      value={type}
                                      onSelect={(currentValue) => {
                                        setFormData({ ...formData, productType: currentValue })
                                        setProductTypeOpen(false)
                                      }}
                                    >
                                      <Check
                                        className={cn(
                                          "mr-2 h-4 w-4",
                                          formData.productType === type ? "opacity-100" : "opacity-0",
                                        )}
                                      />
                                      {type}
                                    </CommandItem>
                                  ))}
                                </CommandGroup>
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                        <Button
                          type="button"
                          variant="outline"
                          size="icon"
                          onClick={() => setShowNewProductTypeInput(true)}
                          className="bg-purple-50 hover:bg-purple-100 border-purple-300 text-purple-700"
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <div className="flex space-x-2">
                        <Input
                          placeholder="Nome do novo tipo"
                          value={newProductTypeName}
                          onChange={(e) => setNewProductTypeName(e.target.value)}
                          className="flex-1 bg-white/80 dark:bg-gray-800/80"
                        />
                        <Button
                          type="button"
                          onClick={handleCreateNewProductType}
                          disabled={!newProductTypeName.trim()}
                          className="bg-purple-600 hover:bg-purple-700"
                        >
                          Criar
                        </Button>
                        <Button
                          type="button"
                          variant="outline"
                          onClick={() => {
                            setShowNewProductTypeInput(false)
                            setNewProductTypeName("")
                          }}
                        >
                          Cancelar
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 p-6 rounded-xl border border-green-200/50 dark:border-green-800/50">
              <h3 className="text-lg font-semibold text-green-900 dark:text-green-100 mb-4">Fornecedor</h3>
              <div className="space-y-2">
                <Label htmlFor="supplier" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Fornecedor
                </Label>
                <div className="space-y-2">
                  {!showNewSupplierInput ? (
                    <div className="flex space-x-2">
                      <Popover open={supplierOpen} onOpenChange={setSupplierOpen}>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            role="combobox"
                            aria-expanded={supplierOpen}
                            className="flex-1 justify-between bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
                          >
                            {formData.supplier || "Selecione o fornecedor..."}
                            <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-full p-0">
                          <Command>
                            <CommandInput placeholder="Pesquisar fornecedor..." />
                            <CommandList>
                              <CommandEmpty>
                                <div className="p-4 text-center">
                                  <p className="text-sm text-muted-foreground mb-2">Nenhum fornecedor encontrado.</p>
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      setShowNewSupplierInput(true)
                                      setSupplierOpen(false)
                                    }}
                                  >
                                    <Plus className="h-4 w-4 mr-1" />
                                    Adicionar Novo Fornecedor
                                  </Button>
                                </div>
                              </CommandEmpty>
                              <CommandGroup>
                                {supplierOptions.map((supplier) => (
                                  <CommandItem
                                    key={supplier}
                                    value={supplier}
                                    onSelect={(currentValue) => {
                                      setFormData({ ...formData, supplier: currentValue })
                                      setSupplierOpen(false)
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        formData.supplier === supplier ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    {supplier}
                                  </CommandItem>
                                ))}
                              </CommandGroup>
                            </CommandList>
                          </Command>
                        </PopoverContent>
                      </Popover>
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        onClick={() => setShowNewSupplierInput(true)}
                        className="bg-green-50 hover:bg-green-100 border-green-300 text-green-700"
                      >
                        <Plus className="h-4 w-4" />
                      </Button>
                    </div>
                  ) : (
                    <div className="flex space-x-2">
                      <Input
                        placeholder="Nome do novo fornecedor"
                        value={newSupplierName}
                        onChange={(e) => setNewSupplierName(e.target.value)}
                        className="flex-1 bg-white/80 dark:bg-gray-800/80"
                      />
                      <Button
                        type="button"
                        onClick={handleCreateNewSupplier}
                        disabled={!newSupplierName.trim()}
                        className="bg-green-600 hover:bg-green-700"
                      >
                        Criar
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={() => {
                          setShowNewSupplierInput(false)
                          setNewSupplierName("")
                        }}
                      >
                        Cancelar
                      </Button>
                    </div>
                  )}
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-950/20 dark:to-red-950/20 p-6 rounded-xl border border-orange-200/50 dark:border-orange-800/50">
              <h3 className="text-lg font-semibold text-orange-900 dark:text-orange-100 mb-4">Quantidades</h3>
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="idealQuantity" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Quantidade Ideal
                  </Label>
                  <Input
                    id="idealQuantity"
                    type="number"
                    min="0"
                    value={formData.idealQuantity}
                    onChange={(e) => handleNumericChange("idealQuantity", e.target.value)}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    placeholder="0"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="initialLotQuantity" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Quantidade Inicial (Lote)
                  </Label>
                  <Input
                    id="initialLotQuantity"
                    type="number"
                    min="0"
                    value={formData.initialLotQuantity}
                    onChange={(e) => handleNumericChange("initialLotQuantity", e.target.value)}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    placeholder="0"
                    required
                  />
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-950/20 dark:to-cyan-950/20 p-6 rounded-xl border border-teal-200/50 dark:border-teal-800/50">
              <h3 className="text-lg font-semibold text-teal-900 dark:text-teal-100 mb-4">Datas e Valores</h3>
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label
                    htmlFor="initialLotExpirationDate"
                    className="text-sm font-medium text-gray-700 dark:text-gray-300"
                  >
                    Data de Vencimento (Lote Inicial)
                  </Label>
                  <Input
                    id="initialLotExpirationDate"
                    type="date"
                    value={formData.initialLotExpirationDate}
                    onChange={(e) => setFormData({ ...formData, initialLotExpirationDate: e.target.value })}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    required={!formData.isExpirationDateIndeterminate}
                    disabled={formData.isExpirationDateIndeterminate}
                  />
                  <div className="flex items-center space-x-2 mt-2">
                    <Checkbox
                      id="isExpirationDateIndeterminate"
                      checked={formData.isExpirationDateIndeterminate}
                      onCheckedChange={(checked) => {
                        setFormData({
                          ...formData,
                          isExpirationDateIndeterminate: !!checked,
                          initialLotExpirationDate: !!checked ? "" : formData.initialLotExpirationDate,
                        })
                      }}
                    />
                    <label
                      htmlFor="isExpirationDateIndeterminate"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Data de Vencimento Indeterminada
                    </label>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="lastPurchaseDate" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Data Última Compra (Lote Inicial)
                  </Label>
                  <Input
                    id="lastPurchaseDate"
                    type="date"
                    value={formData.lastPurchaseDate}
                    onChange={(e) => setFormData({ ...formData, lastPurchaseDate: e.target.value })}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    required
                  />
                </div>
              </div>

<div className="grid grid-cols-2 gap-6 mt-6">
                <div className="space-y-2">
                  <Label htmlFor="lastPurchaseValue" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Valor Última Compra (Lote Inicial)
                  </Label>
                  <Input
                    id="lastPurchaseValue"
                    type="number"
                    step="0.01"
                    min="0"
                    value={formData.lastPurchaseValue}
                    onChange={(e) => handleNumericChange("lastPurchaseValue", e.target.value)}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    placeholder="0.00"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label
                    htmlFor="lastPurchaseQuantity"
                    className="text-sm font-medium text-gray-700 dark:text-gray-300"
                  >
                    Qtde Última Compra (Lote Inicial)
                  </Label>
                  <Input
                    id="lastPurchaseQuantity"
                    type="number"
                    min="0"
                    value={formData.lastPurchaseQuantity}
                    onChange={(e) => handleNumericChange("lastPurchaseQuantity", e.target.value)}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    placeholder="0"
                    required
                  />
                </div>
              </div>
            </div>

<div className="bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-950/20 dark:to-blue-950/20 p-6 rounded-xl border border-indigo-200/50 dark:border-indigo-800/50">
              <h3 className="text-lg font-semibold text-indigo-900 dark:text-indigo-100 mb-4">
                Informações Adicionais
              </h3>
              <div className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="alternativeNames" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Nomes Alternativos
                  </Label>
                  <Input
                    id="alternativeNames"
                    value={formData.alternativeNames}
                    onChange={(e) => setFormData({ ...formData, alternativeNames: e.target.value })}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                    placeholder="Digite nomes alternativos separados por vírgula"
                  />
                  <p className="text-xs text-muted-foreground">
                    Exemplo: Nome comercial, Nome genérico, Apelido do produto
                  </p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="photos" className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Fotos do Produto (Opcional)
                  </Label>
                  <Input
                    id="photos"
                    type="file"
                    multiple
                    accept="image/*"
                    onChange={(e) => {
                      const files = Array.from(e.target.files || [])
                      // In a real implementation, you would upload these files and get URLs
                      // For now, we'll just store the file names as placeholders
                      const photoNames = files.map((file) => file.name)
                      setFormData({ ...formData, photos: photoNames })
                    }}
                    className="bg-white/80 dark:bg-gray-800/80 border-gray-300 dark:border-gray-600"
                  />
                  <p className="text-xs text-muted-foreground">
                    Selecione uma ou mais fotos do produto (formatos: JPG, PNG, GIF)
                  </p>
                  {formData.photos.length > 0 && (
                    <div className="flex flex-wrap gap-2 mt-2">
                      {formData.photos.map((photo, index) => (
                        <Badge key={index} variant="secondary" className="text-xs">
                          {photo}
                          <button
                            type="button"
                            onClick={() => {
                              const newPhotos = formData.photos.filter((_, i) => i !== index)
                              setFormData({ ...formData, photos: newPhotos })
                            }}
                            className="ml-1 text-red-500 hover:text-red-700"
                          >
                            <X className="h-3 w-3" />
                          </button>
                        </Badge>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>

<DialogFooter className="bg-gray-50 dark:bg-gray-800/50 p-6 rounded-xl">
              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
                Cancelar
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting || isCheckingDuplicate}
                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Adicionando...
                  </>
                ) : (
                  "Adicionar Produto"
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

<ConfirmDialog
        open={showDuplicateWarning}
        onOpenChange={setShowDuplicateWarning}
        title="Produto Duplicado Detectado"
        description={`Já existe um produto com o nome "${formData.name}". Deseja adicionar um novo produto com o mesmo nome?`}
        onConfirm={() => {
          setShowDuplicateWarning(false)
          handleFormSubmit()
        }}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true"
import { createClient, isSupabaseConfigured } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { Sidebar } from "@/components/sidebar"
import { Card, CardContent, CardDescription, 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 { ScrollArea } from "@/components/ui/scroll-area"
import { ProceduresCarousel } from "@/components/procedures-carousel"
import {
  Package,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  DollarSign,
  Activity,
  RefreshCw,
  Bot,
  BarChart3,
  Clock,
  Target,
  Calendar,
  Users,
  Settings,
  Zap,
  Shield,
  Database,
  ChevronRight,
  Sparkles,
  Heart,
  Stethoscope,
  UserCheck,
} from "lucide-react"

export default async function DashboardPage() {
  // If Supabase is not configured, show setup message directly
  if (!isSupabaseConfigured) {
    return (
      <div className="flex min-h-screen items-center justify-center gradient-bg">
        <div className="text-center space-y-4">
          <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
            <Database className="w-8 h-8 text-primary" />
          </div>
          <h1 className="text-3xl font-bold text-balance">Conecte o Supabase para começar</h1>
          <p className="text-muted-foreground max-w-md">
            Configure a integração do Supabase nas configurações do projeto para acessar todas as funcionalidades
          </p>
          <Button className="quick-action-btn">
            <Settings className="w-4 h-4 mr-2" />
            Configurar Integração
          </Button>
        </div>
      </div>
    )
  }

// Get the user from the server
  const supabase = createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

// If no user, redirect to login
  if (!user) {
    redirect("/auth/login")
  }

const metrics = {
    totalAppointments: 247,
    todayAppointments: 12,
    totalPatients: 1834,
    monthlyRevenue: 125430.5,
    completedProcedures: 89,
    systemHealth: 98,
    activeAlerts: 3,
    pendingTasks: 7,
  }

const quickActions = [
    {
      title: "Nova Consulta",
      description: "Agendar nova consulta",
      icon: Calendar,
      href: "/appointments/new",
      color: "from-blue-500 to-blue-600",
    },
    {
      title: "Pacientes",
      description: "Gerenciar pacientes",
      icon: Users,
      href: "/patients",
      color: "from-green-500 to-green-600",
    },
    {
      title: "Relatórios",
      description: "Visualizar relatórios",
      icon: BarChart3,
      href: "/reports",
      color: "from-purple-500 to-purple-600",
    },
    {
      title: "DentalIA",
      description: "Assistente inteligente",
      icon: Sparkles,
      href: "/ai-assistant",
      color: "from-orange-500 to-orange-600",
    },
  ]

const features = [
    {
      title: "Gestão de Consultas",
      description: "Sistema completo para agendamento e controle de consultas odontológicas",
      icon: Calendar,
      stats: `${metrics.totalAppointments} consultas`,
    },
    {
      title: "Cadastro de Pacientes",
      description: "Base de dados completa com histórico médico e informações detalhadas",
      icon: UserCheck,
      stats: `${metrics.totalPatients} pacientes`,
    },
    {
      title: "Controle Financeiro",
      description: "Acompanhamento de receitas, despesas e análise financeira detalhada",
      icon: DollarSign,
      stats: `R$ ${metrics.monthlyRevenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`,
    },
    {
      title: "Assistente IA",
      description: "Inteligência artificial para auxiliar em diagnósticos e tratamentos",
      icon: Sparkles,
      stats: "Sempre disponível",
    },
  ]

const quickAlerts = [
    {
      id: "welcome",
      title: "Sistema Operacional",
      message: `Bem-vindo, ${user.email?.split("@")[0]}! Todos os sistemas funcionando perfeitamente.`,
      severity: "info" as const,
      icon: "Shield",
      timestamp: new Date(),
    },
    {
      id: "appointments_today",
      title: "Consultas Hoje",
      message: `${metrics.todayAppointments} consultas agendadas para hoje`,
      severity: "info" as const,
      icon: "Calendar",
      timestamp: new Date(),
    },
    {
      id: "system_update",
      title: "Atualização Disponível",
      message: "Nova versão do sistema disponível com melhorias de performance",
      severity: "medium" as const,
      icon: "Zap",
      timestamp: new Date(),
    },
  ]

const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "high":
        return "text-red-600 bg-red-50 border-red-200"
      case "medium":
        return "text-yellow-600 bg-yellow-50 border-yellow-200"
      case "info":
        return "text-blue-600 bg-blue-50 border-blue-200"
      default:
        return "text-gray-600 bg-gray-50 border-gray-200"
    }
  }

const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "high":
        return { variant: "destructive" as const, label: "Urgente" }
      case "medium":
        return { variant: "secondary" as const, label: "Atenção" }
      case "info":
        return { variant: "default" as const, label: "Info" }
      default:
        return { variant: "outline" as const, label: "Normal" }
    }
  }

const iconMap = {
    Package,
    AlertTriangle,
    Activity,
    Target,
    DollarSign,
    TrendingUp,
    TrendingDown,
    Shield,
    Calendar,
    Zap,
    Heart,
    Stethoscope,
    UserCheck,
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />

<div className="flex-1 overflow-auto">
        <div className="p-6 space-y-8">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary/80 rounded-lg flex items-center justify-center">
                  <Heart className="w-5 h-5 text-white" />
                </div>
                <div>
                  <h1 className="text-3xl font-bold text-balance">RisoArte Dashboard</h1>
                  <p className="text-muted-foreground">Sistema de Gestão Odontológica Profissional</p>
                </div>
              </div>
            </div>
            <div className="flex space-x-3">
              <Button variant="outline" size="sm" className="border-border/50 bg-transparent">
                <RefreshCw className="h-4 w-4 mr-2" />
                Atualizar
              </Button>
              <Button asChild size="sm" className="quick-action-btn">
                <a href="/ai-assistant">
                  <Bot className="h-4 w-4 mr-2" />
                  DentalIA
                </a>
              </Button>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {quickActions.map((action) => (
              <Card key={action.title} className="feature-card group cursor-pointer">
                <CardContent className="p-6">
                  <div className="flex items-center space-x-4">
                    <div
                      className={`w-12 h-12 rounded-lg bg-gradient-to-r ${action.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}
                    >
                      <action.icon className="w-6 h-6 text-white" />
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold text-sm">{action.title}</h3>
                      <p className="text-xs text-muted-foreground">{action.description}</p>
                    </div>
                    <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card className="metric-card">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Consultas Totais</CardTitle>
                <Calendar className="h-4 w-4 text-primary" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{metrics.totalAppointments}</div>
                <p className="text-xs text-muted-foreground">+12% em relação ao mês anterior</p>
              </CardContent>
            </Card>

<Card className="metric-card">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Pacientes Ativos</CardTitle>
                <Users className="h-4 w-4 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{metrics.totalPatients}</div>
                <p className="text-xs text-muted-foreground">Base de pacientes crescendo</p>
              </CardContent>
            </Card>

<Card className="metric-card">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Receita Mensal</CardTitle>
                <DollarSign className="h-4 w-4 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-500">
                  R$ {metrics.monthlyRevenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
                <p className="text-xs text-muted-foreground">+8% em relação ao mês anterior</p>
              </CardContent>
            </Card>

<Card className="metric-card">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Saúde do Sistema</CardTitle>
                <Shield className="h-4 w-4 text-primary" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-primary">{metrics.systemHealth}%</div>
                <p className="text-xs text-muted-foreground">Todos os sistemas operacionais</p>
              </CardContent>
            </Card>
          </div>

<div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-balance mb-2">Funcionalidades do Sistema</h2>
              <p className="text-muted-foreground">
                Conheça todas as ferramentas disponíveis para otimizar sua clínica
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {features.map((feature) => (
                <Card key={feature.title} className="feature-card">
                  <CardHeader>
                    <div className="flex items-center space-x-3">
                      <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                        <feature.icon className="w-5 h-5 text-primary" />
                      </div>
                      <div>
                        <CardTitle className="text-lg">{feature.title}</CardTitle>
                        <Badge variant="secondary" className="text-xs">
                          {feature.stats}
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

<div className="space-y-6">
            <div>
              <h2 className="text-2xl font-bold text-balance">Nossos Procedimentos</h2>
              <p className="text-muted-foreground">Conheça os tratamentos oferecidos pela RisoArte</p>
            </div>
            <ProceduresCarousel />
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="feature-card">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <BarChart3 className="h-5 w-5 mr-2 text-primary" />
                  Performance da Clínica
                </CardTitle>
                <CardDescription>Indicadores de performance e produtividade</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">Procedimentos Concluídos</span>
                    <span className="text-2xl font-bold text-primary">{metrics.completedProcedures}</span>
                  </div>
                  <Progress value={85} className="h-2" />
                  <div className="grid grid-cols-3 gap-4 text-center">
                    <div>
                      <div className="text-lg font-bold text-green-500">{metrics.todayAppointments}</div>
                      <div className="text-xs text-muted-foreground">Hoje</div>
                    </div>
                    <div>
                      <div className="text-lg font-bold text-blue-500">47</div>
                      <div className="text-xs text-muted-foreground">Esta Semana</div>
                    </div>
                    <div>
                      <div className="text-lg font-bold text-purple-500">189</div>
                      <div className="text-xs text-muted-foreground">Este Mês</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="feature-card">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Activity className="h-5 w-5 mr-2 text-primary" />
                  Atividade do Sistema
                </CardTitle>
                <CardDescription>Monitoramento em tempo real das operações</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">Status Geral</span>
                    <Badge className="bg-green-500/10 text-green-500 border-green-500/20">Operacional</Badge>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between text-sm">
                      <span>Consultas Agendadas</span>
                      <span className="font-medium">{metrics.todayAppointments} hoje</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span>Tarefas Pendentes</span>
                      <span className="font-medium">{metrics.pendingTasks}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span>Alertas Ativos</span>
                      <span className="font-medium">{metrics.activeAlerts}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<Card className="feature-card">
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center">
                  <AlertTriangle className="h-5 w-5 mr-2 text-primary" />
                  Central de Notificações
                </div>
                <Badge variant="outline">{quickAlerts.length} ativas</Badge>
              </CardTitle>
              <CardDescription>Acompanhe as atualizações importantes do sistema</CardDescription>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-64">
                <div className="space-y-3">
                  {quickAlerts.map((alert) => {
                    const IconComponent = iconMap[alert.icon as keyof typeof iconMap] || AlertTriangle
                    const severityBadge = getSeverityBadge(alert.severity)

return (
                      <div
                        key={alert.id}
                        className={`p-4 rounded-lg border border-border/50 bg-card/30 hover:bg-card/50 transition-colors`}
                      >
                        <div className="flex items-start space-x-3">
                          <div className="p-2 rounded-full bg-primary/10">
                            <IconComponent className="h-4 w-4 text-primary" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <p className="font-medium text-sm">{alert.title}</p>
                              <Badge variant={severityBadge.variant} className="text-xs">
                                {severityBadge.label}
                              </Badge>
                            </div>
                            <p className="text-xs mt-1 leading-relaxed text-muted-foreground">{alert.message}</p>
                            <p className="text-xs text-muted-foreground mt-2 flex items-center">
                              <Clock className="w-3 h-3 mr-1" />
                              {alert.timestamp.toLocaleString()}
                            </p>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/toaster"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "RisoArte - Sistema de Gestão Odontológica",
  description: "Sistema de gestão para clínicas odontológicas",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="dark"
          enableSystem={false}
          storageKey="risoarte-theme"
          disableTransitionOnChange={false}
        >
          {children}
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-theme-color.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useThemeColor() {
  const [theme, setTheme] = useState<Theme>("light")
  const [colorTheme, setColorTheme] = useState<ColorTheme>("blue")
  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light")

useEffect(() => {
    const savedTheme = localStorage.getItem("risoarte-theme") as Theme
    const savedColorTheme = localStorage.getItem("risoarte-color-theme") as ColorTheme

if (savedTheme) {
      setTheme(savedTheme)
    }
    if (savedColorTheme) {
      setColorTheme(savedColorTheme)
    }

// Detect system preference
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
    const handleChange = () => {
      if (theme === "system") {
        setResolvedTheme(mediaQuery.matches ? "dark" : "light")
      }
    }

mediaQuery.addEventListener("change", handleChange)
    handleChange()

return () => mediaQuery.removeEventListener("change", handleChange)
  }, [theme])

useEffect(() => {
    if (theme === "system") {
      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
      setResolvedTheme(mediaQuery.matches ? "dark" : "light")
    } else {
      setResolvedTheme(theme as "light" | "dark")
    }
  }, [theme])

useEffect(() => {
    const root = document.documentElement
    root.classList.remove("light", "dark")
    root.classList.add(resolvedTheme)

root.classList.remove(
      "theme-blue",
      "theme-green",
      "theme-purple",
      "theme-orange",
      "theme-red",
      "theme-pink",
      "theme-monochrome",
    )
    root.classList.add(`theme-${colorTheme}`)
  }, [resolvedTheme, colorTheme])

const updateTheme = (newTheme: Theme) => {
    setTheme(newTheme)
    localStorage.setItem("risoarte-theme", newTheme)
  }

const updateColorTheme = (newColorTheme: ColorTheme) => {
    setColorTheme(newColorTheme)
    localStorage.setItem("risoarte-color-theme", newColorTheme)
  }

return {
    theme,
    colorTheme,
    setTheme: updateTheme,
    setColorTheme: updateColorTheme,
    resolvedTheme,
  }
}
[V0_FILE]typescriptreact:file="components/theme-color-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { useThemeColor } from "@/hooks/use-theme-color"
import { Moon, Sun, Monitor, Palette, Check, Circle } from "lucide-react"

const colorThemes = [
  { name: "blue", label: "Azul", color: "hsl(210, 100%, 50%)" },
  { name: "green", label: "Verde", color: "hsl(142, 76%, 36%)" },
  { name: "purple", label: "Roxo", color: "hsl(262, 83%, 58%)" },
  { name: "orange", label: "Laranja", color: "hsl(25, 95%, 53%)" },
  { name: "red", label: "Vermelho", color: "hsl(0, 72%, 51%)" },
  { name: "pink", label: "Rosa", color: "hsl(330, 81%, 60%)" },
  { name: "monochrome", label: "Adaptativo", color: "currentColor", isAdaptive: true },
] as const

export function ThemeColorSelector() {
  const { theme, colorTheme, setTheme, setColorTheme, resolvedTheme } = useThemeColor()
  const [open, setOpen] = useState(false)

const getThemeIcon = () => {
    if (theme === "dark") return <Moon className="h-4 w-4" />
    if (theme === "light") return <Sun className="h-4 w-4" />
    return <Monitor className="h-4 w-4" />
  }

const getCurrentColorTheme = () => {
    return colorThemes.find((c) => c.name === colorTheme) || colorThemes[0]
  }

const getDisplayColor = (colorThemeItem: (typeof colorThemes)[0]) => {
    if (colorThemeItem.isAdaptive) {
      return resolvedTheme === "dark" ? "#ffffff" : "#000000"
    }
    return colorThemeItem.color
  }

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2 bg-transparent">
          {getThemeIcon()}
          <div
            className="w-3 h-3 rounded-full border border-border"
            style={{ backgroundColor: getDisplayColor(getCurrentColorTheme()) }}
          />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-4" align="end">
        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium mb-3">Tema</h4>
            <div className="grid grid-cols-3 gap-2">
              <Button
                variant={theme === "light" ? "default" : "outline"}
                size="sm"
                onClick={() => setTheme("light")}
                className="gap-2"
              >
                <Sun className="h-4 w-4" />
                Claro
              </Button>
              <Button
                variant={theme === "dark" ? "default" : "outline"}
                size="sm"
                onClick={() => setTheme("dark")}
                className="gap-2"
              >
                <Moon className="h-4 w-4" />
                Escuro
              </Button>
              <Button
                variant={theme === "system" ? "default" : "outline"}
                size="sm"
                onClick={() => setTheme("system")}
                className="gap-2"
              >
                <Monitor className="h-4 w-4" />
                Sistema
              </Button>
            </div>
          </div>

<div>
            <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
              <Palette className="h-4 w-4" />
              Cor de Destaque
            </h4>
            <div className="grid grid-cols-2 gap-2">
              {colorThemes.map((color) => (
                <Button
                  key={color.name}
                  variant={colorTheme === color.name ? "default" : "outline"}
                  size="sm"
                  onClick={() => setColorTheme(color.name as any)}
                  className="gap-2 justify-start"
                >
                  {color.isAdaptive ? (
                    <Circle className="h-3 w-3" style={{ color: getDisplayColor(color) }} />
                  ) : (
                    <div
                      className="w-3 h-3 rounded-full border border-border"
                      style={{ backgroundColor: color.color }}
                    />
                  )}
                  {color.label}
                  {colorTheme === color.name && <Check className="h-3 w-3 ml-auto" />}
                </Button>
              ))}
            </div>
          </div>

<div className="pt-2 border-t">
            <p className="text-xs text-muted-foreground">
              Tema atual: <span className="font-medium">{resolvedTheme === "light" ? "Claro" : "Escuro"}</span> • Cor:{" "}
              <span className="font-medium">{getCurrentColorTheme().label}</span>
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    /* Adjusted light theme to be slightly less bright for better readability */
    --background: 0 0% 98%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 210 100% 50%;
    --chart-1: 210 100% 50%;
    --chart-2: 120 100% 40%;
    --chart-3: 45 100% 50%;
    --chart-4: 300 100% 60%;
    --chart-5: 15 100% 50%;
    --radius: 0.75rem;
    --sidebar-background: 0 0% 96%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 210 100% 50%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 94%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 0 0% 89.8%;
    --sidebar-ring: 210 100% 50%;
  }
  .dark {
    --background: 0 0% 2%;
    --foreground: 0 0% 98%;
    --card: 0 0% 4%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 4%;
    --popover-foreground: 0 0% 98%;
    --primary: 210 100% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 8%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 8%;
    --muted-foreground: 0 0% 65%;
    --accent: 0 0% 8%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 12%;
    --input: 0 0% 12%;
    --ring: 210 100% 60%;
    --chart-1: 210 100% 60%;
    --chart-2: 120 100% 50%;
    --chart-3: 45 100% 60%;
    --chart-4: 300 100% 70%;
    --chart-5: 15 100% 60%;
    --sidebar-background: 0 0% 3%;
    --sidebar-foreground: 0 0% 90%;
    --sidebar-primary: 210 100% 60%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 6%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 12%;
    --sidebar-ring: 210 100% 60%;
  }

/* Added color theme variants */
  .theme-blue {
    --primary: 210 100% 50%;
    --ring: 210 100% 50%;
    --chart-1: 210 100% 50%;
    --sidebar-primary: 210 100% 50%;
    --sidebar-ring: 210 100% 50%;
  }

.theme-green {
    --primary: 142 76% 36%;
    --ring: 142 76% 36%;
    --chart-1: 142 76% 36%;
    --sidebar-primary: 142 76% 36%;
    --sidebar-ring: 142 76% 36%;
  }

.theme-purple {
    --primary: 262 83% 58%;
    --ring: 262 83% 58%;
    --chart-1: 262 83% 58%;
    --sidebar-primary: 262 83% 58%;
    --sidebar-ring: 262 83% 58%;
  }

.theme-orange {
    --primary: 25 95% 53%;
    --ring: 25 95% 53%;
    --chart-1: 25 95% 53%;
    --sidebar-primary: 25 95% 53%;
    --sidebar-ring: 25 95% 53%;
  }

.theme-red {
    --primary: 0 72% 51%;
    --ring: 0 72% 51%;
    --chart-1: 0 72% 51%;
    --sidebar-primary: 0 72% 51%;
    --sidebar-ring: 0 72% 51%;
  }

.theme-pink {
    --primary: 330 81% 60%;
    --ring: 330 81% 60%;
    --chart-1: 330 81% 60%;
    --sidebar-primary: 330 81% 60%;
    --sidebar-ring: 330 81% 60%;
  }

/* Added monochrome theme for light mode - uses black accents */
  .theme-monochrome {
    --primary: 0 0% 9%;
    --ring: 0 0% 9%;
    --chart-1: 0 0% 9%;
    --sidebar-primary: 0 0% 9%;
    --sidebar-ring: 0 0% 9%;
  }

.dark.theme-blue {
    --primary: 210 100% 60%;
    --ring: 210 100% 60%;
    --chart-1: 210 100% 60%;
    --sidebar-primary: 210 100% 60%;
    --sidebar-ring: 210 100% 60%;
  }

.dark.theme-green {
    --primary: 142 76% 46%;
    --ring: 142 76% 46%;
    --chart-1: 142 76% 46%;
    --sidebar-primary: 142 76% 46%;
    --sidebar-ring: 142 76% 46%;
  }

.dark.theme-purple {
    --primary: 262 83% 68%;
    --ring: 262 83% 68%;
    --chart-1: 262 83% 68%;
    --sidebar-primary: 262 83% 68%;
    --sidebar-ring: 262 83% 68%;
  }

.dark.theme-orange {
    --primary: 25 95% 63%;
    --ring: 25 95% 63%;
    --chart-1: 25 95% 63%;
    --sidebar-primary: 25 95% 63%;
    --sidebar-ring: 25 95% 63%;
  }

.dark.theme-red {
    --primary: 0 72% 61%;
    --ring: 0 72% 61%;
    --chart-1: 0 72% 61%;
    --sidebar-primary: 0 72% 61%;
    --sidebar-ring: 0 72% 61%;
  }

.dark.theme-pink {
    --primary: 330 81% 70%;
    --ring: 330 81% 70%;
    --chart-1: 330 81% 70%;
    --sidebar-primary: 330 81% 70%;
    --sidebar-ring: 330 81% 70%;
  }

/* Added monochrome theme for dark mode - uses white accents */
  .dark.theme-monochrome {
    --primary: 0 0% 98%;
    --ring: 0 0% 98%;
    --chart-1: 0 0% 98%;
    --sidebar-primary: 0 0% 98%;
    --sidebar-ring: 0 0% 98%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Added professional gradient backgrounds and animations */
@layer components {
  .gradient-bg {
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
  }

.feature-card {
    @apply relative overflow-hidden border border-border/50 bg-card/50 backdrop-blur-sm;
    @apply hover:border-primary/20 transition-all duration-300;
  }

.feature-card::before {
    content: "";
    @apply absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0;
    @apply transition-opacity duration-300;
  }

.feature-card:hover::before {
    @apply opacity-100;
  }

.metric-card {
    @apply relative overflow-hidden border border-border/30 bg-gradient-to-br from-card to-card/50;
    @apply hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5;
  }

.quick-action-btn {
    @apply relative overflow-hidden bg-gradient-to-r from-primary to-primary/80;
    @apply hover:from-primary/90 hover:to-primary/70 transition-all duration-300;
    @apply shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30;
  }
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Home,
  CalendarDays,
  Users,
  Package,
  DollarSign,
  Bot,
  Gamepad2,
  Megaphone,
  ChevronLeft,
  ChevronRight,
  User,
  Bluetooth as Tooth,
  UserCheck,
  Activity,
  LogOut,
  MessageCircle,
  Video,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { QuickChatDialog } from "./quick-chat-dialog"
import { supabase } from "@/lib/supabase"
import { signOut } from "@/lib/actions"
import { ThemeColorSelector } from "@/components/theme-color-selector"

interface Notification {
  id: number
  title: string
  message: string
  created_at: string
  type: "success" | "warning" | "error" | "info"
  category: "consultas" | "pagamentos" | "estoque" | "pacientes" | "sistema"
  read: boolean
  priority: "alta" | "media" | "baixa"
}

export function Sidebar() {
  const [collapsed, setCollapsed] = useState(false)
  const [mounted, setMounted] = useState(false)
  const [quickChatOpen, setQuickChatOpen] = useState(false)
  const pathname = usePathname()

const [notifications, setNotifications] = useState<Notification[]>([])
  const [loadingNotifications, setLoadingNotifications] = useState(true)

useEffect(() => {
    setMounted(true)
  }, [])

const loadNotifications = async () => {
    try {
      const { data, error } = await supabase
        .from("notifications")
        .select("*")
        .order("created_at", { ascending: false })
        .limit(4)

if (error) {
        console.error("Erro ao carregar notificações:", error)
        return
      }

setNotifications(data || [])
    } catch (error) {
      console.error("Erro ao carregar notificações:", error)
    } finally {
      setLoadingNotifications(false)
    }
  }

useEffect(() => {
    loadNotifications()
  }, [])

if (diffInMinutes < 1) return "Agora"
    if (diffInMinutes < 60) return `${diffInMinutes} min atrás`

const diffInHours = Math.floor(diffInMinutes / 60)
    if (diffInHours < 24) return `${diffInHours}h atrás`

const diffInDays = Math.floor(diffInHours / 24)
    return `${diffInDays} dia${diffInDays > 1 ? "s" : ""} atrás`
  }

const navigation = [
    {
      name: "Home",
      href: "/",
      icon: Home,
      current: pathname === "/",
    },
    {
      name: "Dashboard",
      href: "/dashboard",
      icon: Activity,
      current: pathname === "/dashboard",
    },
    {
      name: "Agenda",
      href: "/agenda",
      icon: CalendarDays,
      current: pathname === "/agenda",
    },
    {
      name: "TeleOrientações",
      href: "/teleconsultas",
      icon: Video,
      current: pathname === "/teleconsultas",
    },
    {
      name: "Pacientes",
      href: "/patients",
      icon: Users,
      current: pathname === "/patients",
    },
    {
      name: "WhatsApp",
      href: "/whatsapp",
      icon: MessageCircle,
      current: pathname === "/whatsapp",
    },
    {
      name: "Estoque",
      href: "/estoque",
      icon: Package,
      current: pathname === "/estoque",
    },
    {
      name: "Financeiro",
      href: "/financeiro",
      icon: DollarSign,
      current: pathname === "/financeiro",
    },
    {
      name: "Funcionários",
      href: "/employees",
      icon: UserCheck,
      current: pathname === "/employees",
    },
    {
      name: "Prótese",
      href: "/prosthetic",
      icon: Tooth,
      current: pathname === "/prosthetic",
    },
    {
      name: "Marketing",
      href: "/marketing",
      icon: Megaphone,
      current: pathname === "/marketing",
    },
    {
      name: "Jogos",
      href: "/jogos",
      icon: Gamepad2,
      current: pathname === "/jogos",
    },
    {
      name: "DentalIA",
      href: "/ai-assistant",
      icon: Bot,
      current: pathname === "/ai-assistant",
    },
  ]

const unreadCount = notifications.filter((n) => !n.read).length

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "warning":
        return "⚠️"
      case "success":
        return "✅"
      case "error":
        return "🚨"
      case "info":
        return "ℹ️"
      default:
        return "📢"
    }
  }

return (
    <div className={cn("flex flex-col bg-card border-r transition-all duration-300", collapsed ? "w-16" : "w-64")}>
      <div className="flex h-16 items-center justify-between px-4 border-b">
        {!collapsed && (
          <div className="flex items-center space-x-2">
            <Activity className="h-6 w-6 text-primary" />
            <span className="font-semibold">Your Company 2.0</span>
          </div>
        )}
        <Button variant="ghost" size="icon" onClick={() => setCollapsed(!collapsed)} className="h-8 w-8">
          {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
        </Button>
      </div>

<nav className="flex-1 space-y-1 p-2">
        {navigation.map((item) => {
          const Icon = item.icon
          return (
            <Link
              key={item.name}
              href={item.href}
              className={cn(
                "flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                item.current
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
              )}
            >
              <Icon className="h-4 w-4" />
              {!collapsed && <span className="ml-3">{item.name}</span>}
            </Link>
          )
        })}
      </nav>

<div className="p-2 border-t">
        <Button
          variant="ghost"
          size={collapsed ? "icon" : "sm"}
          onClick={() => setQuickChatOpen(true)}
          className="w-full justify-start"
        >
          <MessageCircle className="h-4 w-4" />
          {!collapsed && <span className="ml-3">Mensagens</span>}
        </Button>
      </div>

<div className="p-2 border-t">
        {collapsed ? (
          <div className="flex justify-center py-2">
            <ThemeColorSelector />
          </div>
        ) : (
          <div className="flex items-center justify-center gap-3 py-2">
            <span className="text-sm font-medium">Tema & Cores</span>
            <ThemeColorSelector />
          </div>
        )}
      </div>

<div className="p-2 border-t">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className={cn("w-full justify-start h-auto p-2", collapsed && "justify-center")}>
              <Avatar className="h-8 w-8">
                <AvatarImage src="/placeholder-user.jpg" />
                <AvatarFallback>RD</AvatarFallback>
              </Avatar>
              {!collapsed && (
                <div className="ml-3 text-left">
                  <p className="text-sm font-medium">Rodrigo Dantas</p>
                  <p className="text-xs text-muted-foreground">Administrador</p>
                </div>
              )}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/profile">
                <User className="mr-2 h-4 w-4" />
                Perfil
              </Link>
            </DropdownMenuItem>

<DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/notifications" className="w-full">
                <div className="flex items-center justify-between w-full">
                  <span className="flex items-center">
                    <Activity className="mr-2 h-4 w-4" />
                    Ver Notificações
                  </span>
                  {unreadCount > 0 && (
                    <span className="bg-red-500 text-white text-xs rounded-full px-2 py-1 min-w-[20px] text-center">
                      {unreadCount}
                    </span>
                  )}
                </div>
              </Link>
            </DropdownMenuItem>

<QuickChatDialog open={quickChatOpen} onOpenChange={setQuickChatOpen} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/teleconsultas/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/woman-doctor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/woman-doctor-eyTxBcrtDLMJoImUmpH1TwFv1nPVoJ.png" isMerged="true"
[V0_FILE]png:file="public/man-patient.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/man-patient-GipqxOQzZ6E3NESqEGB0A76V6FG9WK.png" isMerged="true"
[V0_FILE]jpg:file="public/medical-scan-head-pain.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/medical-scan-head-pain-GPP30WkrppCRIKy7SHTu5HFYuZNwPB.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/patient-profile.tsx" isQuickEdit="true" isMerged="true"
"use client"

import {
  Phone,
  Mail,
  MapPin,
  Calendar,
  FileText,
  AlertTriangle,
  Pill,
  Clock,
  Shield,
  PanelLeftClose,
  PanelLeftOpen,
} 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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"

interface Patient {
  id: number
  name: string
  age: number
  phone: string
  email: string
  address: string
  lastConsult: string
  status: "online" | "offline" | "busy"
  avatar?: string
  medicalRecord: string
  insurance: string
  emergencyContact: string
  allergies: string[]
  medications: string[]
  lastVisit: string
  nextAppointment?: string
}

interface PatientProfileProps {
  patient: Patient
  isSidebarVisible: boolean
  onToggleSidebar: () => void
}

export default function PatientProfile({ patient, isSidebarVisible, onToggleSidebar }: PatientProfileProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "text-green-600 bg-green-50 border-green-200"
      case "busy":
        return "text-yellow-600 bg-yellow-50 border-yellow-200"
      default:
        return "text-gray-600 bg-gray-50 border-gray-200"
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case "online":
        return "Online"
      case "busy":
        return "Ocupado"
      default:
        return "Offline"
    }
  }

return (
    null
  )
}
[V0_FILE]typescriptreact:file="components/medical-chat.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import {
  MessageSquare,
  Send,
  Paperclip,
  ImageIcon,
  FileText,
  Clock,
  Check,
  CheckCheck,
  AlertCircle,
  Camera,
  Mic,
  MicOff,
  X,
} 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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Textarea } from "@/components/ui/textarea"

interface ChatMessage {
  id: number
  sender: "doctor" | "patient"
  message: string
  time: string
  type: "text" | "image" | "file" | "audio" | "prescription"
  status: "sent" | "delivered" | "read"
  attachment?: {
    name: string
    url: string
    type: string
    size?: string
  }
  isUrgent?: boolean
}

interface Patient {
  id: number
  name: string
  avatar?: string
}

interface MedicalChatProps {
  patient: Patient
  isVideoActive: boolean
}

export default function MedicalChat({ patient, isVideoActive }: MedicalChatProps) {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: 1,
      sender: "patient",
      message: "Olá doutor, estou com dor de cabeça há 2 dias",
      time: "14:30",
      type: "text",
      status: "read",
    },
    {
      id: 2,
      sender: "doctor",
      message: "Boa tarde! Vou te ajudar. A dor é constante ou vem e vai?",
      time: "14:32",
      type: "text",
      status: "read",
    },
    {
      id: 3,
      sender: "patient",
      message: "É mais forte pela manhã. Anexei uma foto da região onde dói",
      time: "14:33",
      type: "image",
      status: "read",
      attachment: {
        name: "dor_cabeca.jpg",
        url: "/medical-scan-head-pain.jpg",
        type: "image",
        size: "2.1 MB",
      },
    },
    {
      id: 4,
      sender: "doctor",
      message: "Obrigado pela imagem. Vou prescrever um analgésico para você.",
      time: "14:35",
      type: "prescription",
      status: "delivered",
      attachment: {
        name: "Receita - Dipirona 500mg",
        url: "#",
        type: "prescription",
      },
    },
  ])

const [newMessage, setNewMessage] = useState("")
  const [isRecording, setIsRecording] = useState(false)
  const [showAttachmentMenu, setShowAttachmentMenu] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const sendMessage = () => {
    if (!newMessage.trim()) return

const message: ChatMessage = {
      id: messages.length + 1,
      sender: "doctor",
      message: newMessage,
      time: new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }),
      type: "text",
      status: "sent",
    }

setMessages([...messages, message])
    setNewMessage("")

// Simular entrega da mensagem
    setTimeout(() => {
      setMessages((prev) => prev.map((msg) => (msg.id === message.id ? { ...msg, status: "delivered" } : msg)))
    }, 1000)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      sendMessage()
    }
  }

const handleFileUpload = (type: string) => {
    setShowAttachmentMenu(false)
    // Simular upload de arquivo
    const message: ChatMessage = {
      id: messages.length + 1,
      sender: "doctor",
      message: `Arquivo ${type} enviado`,
      time: new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }),
      type: type as any,
      status: "sent",
      attachment: {
        name: `documento.${type}`,
        url: "#",
        type: type,
        size: "1.2 MB",
      },
    }
    setMessages([...messages, message])
  }

const toggleRecording = () => {
    setIsRecording(!isRecording)
    if (!isRecording) {
      // Iniciar gravação
      setTimeout(() => {
        setIsRecording(false)
        const message: ChatMessage = {
          id: messages.length + 1,
          sender: "doctor",
          message: "Áudio gravado",
          time: new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }),
          type: "audio",
          status: "sent",
          attachment: {
            name: "audio_message.mp3",
            url: "#",
            type: "audio",
            size: "0:15",
          },
        }
        setMessages([...messages, message])
      }, 3000)
    }
  }

const getMessageStatusIcon = (status: string) => {
    switch (status) {
      case "sent":
        return <Check className="h-3 w-3" />
      case "delivered":
        return <CheckCheck className="h-3 w-3" />
      case "read":
        return <CheckCheck className="h-3 w-3 text-blue-500" />
      default:
        return <Clock className="h-3 w-3" />
    }
  }

const renderMessageContent = (message: ChatMessage) => {
    switch (message.type) {
      case "image":
        return (
          <div className="space-y-2">
            <p className="text-sm">{message.message}</p>
            <div className="relative">
              <img
                src={message.attachment?.url || "/placeholder.svg"}
                alt={message.attachment?.name}
                className="max-w-xs rounded-lg cursor-pointer hover:opacity-90"
                onClick={() => {
                  // Abrir modal de imagem
                }}
              />
              <Badge variant="secondary" className="absolute bottom-2 right-2 text-xs">
                {message.attachment?.size}
              </Badge>
            </div>
          </div>
        )

case "file":
        return (
          <div className="space-y-2">
            <p className="text-sm">{message.message}</p>
            <div className="flex items-center gap-2 p-2 bg-muted rounded-lg">
              <FileText className="h-4 w-4" />
              <div className="flex-1">
                <p className="text-sm font-medium">{message.attachment?.name}</p>
                <p className="text-xs text-muted-foreground">{message.attachment?.size}</p>
              </div>
              <Button variant="ghost" size="sm">
                Download
              </Button>
            </div>
          </div>
        )

case "audio":
        return (
          <div className="space-y-2">
            <div className="flex items-center gap-2 p-2 bg-muted rounded-lg">
              <Mic className="h-4 w-4" />
              <div className="flex-1">
                <div className="w-32 h-2 bg-primary/20 rounded-full">
                  <div className="w-1/3 h-full bg-primary rounded-full"></div>
                </div>
              </div>
              <span className="text-xs">{message.attachment?.size}</span>
              <Button variant="ghost" size="sm">
                ▶️
              </Button>
            </div>
          </div>
        )

case "prescription":
        return (
          <div className="space-y-2">
            <p className="text-sm">{message.message}</p>
            <div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
              <FileText className="h-4 w-4 text-green-600" />
              <div className="flex-1">
                <p className="text-sm font-medium text-green-800">{message.attachment?.name}</p>
                <p className="text-xs text-green-600">Receita médica digital</p>
              </div>
              <Button variant="outline" size="sm" className="border-green-300 text-green-700 bg-transparent">
                Ver Receita
              </Button>
            </div>
          </div>
        )

default:
        return <p className="text-sm">{message.message}</p>
    }
  }

return (
    <div className="flex flex-col h-full">
      {/* Header do Chat */}
      <CardHeader className="border-b p-4 flex-shrink-0">
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <MessageSquare className="h-4 w-4" />
            <span>Chat com {patient.name}</span>
          </div>
          {isVideoActive && (
            <Badge variant="outline" className="text-green-600 border-green-600">
              Em chamada
            </Badge>
          )}
        </CardTitle>
      </CardHeader>

{/* Área de Mensagens */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0">
        {messages.map((message) => (
          <div key={message.id} className={`flex ${message.sender === "doctor" ? "justify-end" : "justify-start"}`}>
            <div className="flex items-start gap-2 max-w-[85%]">
              {message.sender === "patient" && (
                <Avatar className="h-6 w-6">
                  <AvatarImage src={patient.avatar || "/placeholder.svg"} />
                  <AvatarFallback className="text-xs">
                    {patient.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
              )}

<div
                className={`p-3 rounded-lg ${
                  message.sender === "doctor" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                } ${message.isUrgent ? "border-2 border-red-500" : ""}`}
              >
                {message.isUrgent && (
                  <div className="flex items-center gap-1 mb-2">
                    <AlertCircle className="h-3 w-3 text-red-500" />
                    <span className="text-xs text-red-500 font-medium">URGENTE</span>
                  </div>
                )}

{renderMessageContent(message)}

<div className="flex items-center justify-between mt-2">
                  <span className="text-xs opacity-70">{message.time}</span>
                  {message.sender === "doctor" && (
                    <div className="opacity-70">{getMessageStatusIcon(message.status)}</div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

{/* Área de Input */}
      <div className="border-t p-4 space-y-3 flex-shrink-0">
        {/* Menu de Anexos */}
        {showAttachmentMenu && (
          <Card className="mb-2">
            <CardContent className="p-2">
              <div className="grid grid-cols-2 gap-2">
                <Button variant="ghost" size="sm" className="justify-start" onClick={() => handleFileUpload("image")}>
                  <ImageIcon className="h-4 w-4 mr-2" />
                  Imagem
                </Button>
                <Button variant="ghost" size="sm" className="justify-start" onClick={() => handleFileUpload("file")}>
                  <FileText className="h-4 w-4 mr-2" />
                  Documento
                </Button>
                <Button variant="ghost" size="sm" className="justify-start" onClick={() => {}}>
                  <Camera className="h-4 w-4 mr-2" />
                  Câmera
                </Button>
                <Button variant="ghost" size="sm" className="justify-start" onClick={() => {}}>
                  <FileText className="h-4 w-4 mr-2" />
                  Receita
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Input de Mensagem */}
        <div className="flex gap-2">
          <div className="flex-1 relative">
            <Textarea
              placeholder="Digite sua mensagem..."
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              onKeyPress={handleKeyPress}
              className="min-h-[40px] max-h-[120px] resize-none pr-12"
              rows={1}
            />
            <Button
              variant="ghost"
              size="sm"
              className="absolute right-1 top-1 h-8 w-8 p-0"
              onClick={() => setShowAttachmentMenu(!showAttachmentMenu)}
            >
              {showAttachmentMenu ? <X className="h-4 w-4" /> : <Paperclip className="h-4 w-4" />}
            </Button>
          </div>

<Button
            variant={isRecording ? "destructive" : "outline"}
            size="sm"
            className="h-10 w-10 p-0"
            onClick={toggleRecording}
          >
            {isRecording ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
          </Button>

{isRecording && (
          <div className="flex items-center gap-2 text-red-500 text-sm">
            <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
            Gravando áudio...
          </div>
        )}
      </div>

<input ref={fileInputRef} type="file" className="hidden" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/teleconsulta-popup-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X, GripVertical, MessageSquare, FileText, Maximize2 } from "lucide-react"
import { cn } from "@/lib/utils"
import MedicalChat from "@/components/medical-chat"
import MedicalNotesPanel from "@/components/medical-notes-panel"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface TeleconsultaPopupDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  patient: any
  isVideoActive: boolean
}

export function TeleconsultaPopupDialog({ open, onOpenChange, patient, isVideoActive }: TeleconsultaPopupDialogProps) {
  const [position, setPosition] = useState({ x: window.innerWidth - 500, y: 100 })
  const [size, setSize] = useState({ width: 500, height: 600 })
  const [isDragging, setIsDragging] = useState(false)
  const [isResizing, setIsResizing] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 })
  const dialogRef = useRef<HTMLDivElement>(null)

const handleResizeMouseDown = (e: React.MouseEvent) => {
    e.stopPropagation()
    setResizeStart({
      x: e.clientX,
      y: e.clientY,
      width: size.width,
      height: size.height,
    })
    setIsResizing(true)
  }

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        const newX = Math.max(0, Math.min(window.innerWidth - size.width, e.clientX - dragOffset.x))
        const newY = Math.max(0, Math.min(window.innerHeight - size.height, e.clientY - dragOffset.y))
        setPosition({ x: newX, y: newY })
      }
      if (isResizing) {
        const deltaX = e.clientX - resizeStart.x
        const deltaY = e.clientY - resizeStart.y
        const newWidth = Math.max(400, Math.min(800, resizeStart.width + deltaX))
        const newHeight = Math.max(400, Math.min(800, resizeStart.height + deltaY))
        setSize({ width: newWidth, height: newHeight })
      }
    }

const handleMouseUp = () => {
      setIsDragging(false)
      setIsResizing(false)
    }

if (isDragging || isResizing) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDragging, isResizing, dragOffset, resizeStart, size.width, size.height])

const handleClose = () => {
    onOpenChange(false)
  }

if (!open || !patient) return null

return (
    <div
      ref={dialogRef}
      className={cn(
        "fixed z-50 bg-background border rounded-lg shadow-lg",
        "flex flex-col",
        isDragging && "cursor-grabbing",
      )}
      style={{
        left: position.x,
        top: position.y,
        width: size.width,
        height: size.height,
      }}
    >
      <div
        className="flex items-center justify-between p-4 border-b cursor-grab active:cursor-grabbing"
        onMouseDown={handleMouseDown}
      >
        <div className="flex items-center gap-2">
          <GripVertical className="h-4 w-4 text-muted-foreground" />
          <span className="font-semibold">Chat e Anotações - {patient.name}</span>
        </div>
        <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

<Tabs defaultValue="chat" className="flex-1 flex flex-col min-h-0 overflow-hidden">
        <TabsList className="w-full rounded-none border-b bg-muted/50">
          <TabsTrigger value="chat" className="flex-1">
            <MessageSquare className="h-4 w-4 mr-2" />
            Chat
          </TabsTrigger>
          <TabsTrigger value="notes" className="flex-1">
            <FileText className="h-4 w-4 mr-2" />
            Anotações
          </TabsTrigger>
        </TabsList>

<div
        className="absolute bottom-0 right-0 w-6 h-6 cursor-nwse-resize flex items-center justify-center group hover:bg-primary/10 rounded-bl-lg transition-colors"
        onMouseDown={handleResizeMouseDown}
      >
        <Maximize2 className="h-3 w-3 text-muted-foreground group-hover:text-primary transition-colors rotate-90" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/appointment-popup-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { X, GripVertical, Calendar, Clock, User, Maximize2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface AppointmentPopupDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function AppointmentPopupDialog({ open, onOpenChange }: AppointmentPopupDialogProps) {
  const [position, setPosition] = useState({ x: window.innerWidth / 2 - 250, y: 100 })
  const [size, setSize] = useState({ width: 500, height: 550 })
  const [isDragging, setIsDragging] = useState(false)
  const [isResizing, setIsResizing] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 })
  const dialogRef = useRef<HTMLDivElement>(null)

const [formData, setFormData] = useState({
    patientName: "",
    date: "",
    time: "",
    type: "teleconsulta",
    notes: "",
  })

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        const newX = Math.max(0, Math.min(window.innerWidth - size.width, e.clientX - dragOffset.x))
        const newY = Math.max(0, Math.min(window.innerHeight - size.height, e.clientY - dragOffset.y))
        setPosition({ x: newX, y: newY })
      }
      if (isResizing) {
        const deltaX = e.clientX - resizeStart.x
        const deltaY = e.clientY - resizeStart.y
        const newWidth = Math.max(400, Math.min(800, resizeStart.width + deltaX))
        const newHeight = Math.max(450, Math.min(900, resizeStart.height + deltaY))
        setSize({ width: newWidth, height: newHeight })
      }
    }

const handleMouseUp = () => {
      setIsDragging(false)
      setIsResizing(false)
    }

if (isDragging || isResizing) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

const handleClose = () => {
    onOpenChange(false)
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("[v0] Agendamento:", formData)
    handleClose()
  }

if (!open) return null

return (
    <div
      ref={dialogRef}
      className={cn(
        "fixed z-50 bg-background border rounded-lg shadow-2xl",
        "flex flex-col",
        isDragging && "cursor-grabbing",
      )}
      style={{
        left: position.x,
        top: position.y,
        width: size.width,
        height: size.height,
      }}
    >
      <div
        className="flex items-center justify-between p-4 border-b cursor-grab active:cursor-grabbing bg-primary text-primary-foreground rounded-t-lg"
        onMouseDown={handleMouseDown}
      >
        <div className="flex items-center gap-2">
          <GripVertical className="h-4 w-4" />
          <Calendar className="h-4 w-4" />
          <span className="font-semibold">Agendar Nova Consulta</span>
        </div>
        <Button
          variant="ghost"
          size="icon"
          className="h-6 w-6 text-primary-foreground hover:bg-primary-foreground/20"
          onClick={handleClose}
        >
          <X className="h-4 w-4" />
        </Button>
      </div>

<form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">
        <div className="space-y-2">
          <Label htmlFor="patientName">Nome do Paciente</Label>
          <div className="relative">
            <User className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              id="patientName"
              placeholder="Digite o nome do paciente"
              className="pl-10"
              value={formData.patientName}
              onChange={(e) => setFormData({ ...formData, patientName: e.target.value })}
              required
            />
          </div>
        </div>

<div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="date">Data</Label>
            <div className="relative">
              <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                id="date"
                type="date"
                className="pl-10"
                value={formData.date}
                onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                required
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="time">Horário</Label>
            <div className="relative">
              <Clock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                id="time"
                type="time"
                className="pl-10"
                value={formData.time}
                onChange={(e) => setFormData({ ...formData, time: e.target.value })}
                required
              />
            </div>
          </div>
        </div>

<div className="space-y-2">
          <Label htmlFor="type">Tipo de Consulta</Label>
          <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
            <SelectTrigger id="type">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="teleconsulta">Teleconsulta</SelectItem>
              <SelectItem value="presencial">Presencial</SelectItem>
              <SelectItem value="retorno">Retorno</SelectItem>
              <SelectItem value="emergencia">Emergência</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <Label htmlFor="notes">Observações</Label>
          <Textarea
            id="notes"
            placeholder="Adicione observações sobre a consulta..."
            className="min-h-[100px] resize-none"
            value={formData.notes}
            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
          />
        </div>

<div className="flex gap-2 pt-4">
          <Button type="button" variant="outline" className="flex-1 bg-transparent" onClick={handleClose}>
            Cancelar
          </Button>
          <Button type="submit" className="flex-1">
            <Calendar className="h-4 w-4 mr-2" />
            Agendar Consulta
          </Button>
        </div>
      </form>

<div
        className="absolute bottom-0 right-0 w-6 h-6 cursor-nwse-resize flex items-center justify-center group hover:bg-primary/10 rounded-bl-lg transition-colors"
        onMouseDown={handleResizeMouseDown}
      >
        <Maximize2 className="h-3 w-3 text-muted-foreground group-hover:text-primary transition-colors rotate-90" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/medical-notes-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  FileText,
  Save,
  Trash2,
  Edit3,
  Clock,
  User,
  Stethoscope,
  Pill,
  Activity,
  Eye,
  Search,
  Tag,
  Maximize2,
  X,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"

interface Patient {
  id: number
  name: string
}

interface MedicalNote {
  id: number
  type: "consultation" | "prescription" | "exam" | "observation"
  title: string
  content: string
  timestamp: string
  author: string
  tags: string[]
  isPrivate: boolean
}

interface MedicalNotesPanelProps {
  patient: Patient
}

export default function MedicalNotesPanel({ patient }: MedicalNotesPanelProps) {
  const [currentNote, setCurrentNote] = useState("")
  const [noteType, setNoteType] = useState<"consultation" | "prescription" | "exam" | "observation">("consultation")
  const [noteTitle, setNoteTitle] = useState("")

const [searchTermNotes, setSearchTermNotes] = useState("")
  const [selectedCategoryNotes, setSelectedCategoryNotes] = useState("all")

const [expandedNote, setExpandedNote] = useState<MedicalNote | null>(null)

const [notes, setNotes] = useState<MedicalNote[]>([
    {
      id: 1,
      type: "consultation",
      title: "Consulta Inicial - Dor de Cabeça",
      content:
        "Paciente relata dor de cabeça há 2 dias, mais intensa pela manhã. Sem febre. Pressão arterial normal (120/80). Recomendado analgésico e acompanhamento.",
      timestamp: "2024-01-15 14:30",
      author: "Dr. Silva",
      tags: ["dor de cabeça", "analgésico"],
      isPrivate: false,
    },
    {
      id: 2,
      type: "prescription",
      title: "Receita - Dipirona 500mg",
      content: "Dipirona 500mg - 1 comprimido a cada 6 horas por 3 dias. Máximo 4 comprimidos por dia.",
      timestamp: "2024-01-15 14:35",
      author: "Dr. Silva",
      tags: ["dipirona", "analgésico"],
      isPrivate: false,
    },
  ])

const saveNote = () => {
    if (!currentNote.trim() || !noteTitle.trim()) return

const newNote: MedicalNote = {
      id: notes.length + 1,
      type: noteType,
      title: noteTitle,
      content: currentNote,
      timestamp: new Date().toLocaleString("pt-BR"),
      author: "Dr. Silva",
      tags: [],
      isPrivate: false,
    }

setNotes([newNote, ...notes])
    setCurrentNote("")
    setNoteTitle("")
  }

const getTypeIcon = (type: string) => {
    switch (type) {
      case "consultation":
        return <Stethoscope className="h-4 w-4" />
      case "prescription":
        return <Pill className="h-4 w-4" />
      case "exam":
        return <Activity className="h-4 w-4" />
      case "observation":
        return <Eye className="h-4 w-4" />
      default:
        return <FileText className="h-4 w-4" />
    }
  }

const getTypeColor = (type: string) => {
    switch (type) {
      case "consultation":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "prescription":
        return "bg-green-100 text-green-800 border-green-200"
      case "exam":
        return "bg-purple-100 text-purple-800 border-purple-200"
      case "observation":
        return "bg-orange-100 text-orange-800 border-orange-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const filteredNotes = notes.filter((note) => {
    const matchesSearch =
      note.title.toLowerCase().includes(searchTermNotes.toLowerCase()) ||
      note.content.toLowerCase().includes(searchTermNotes.toLowerCase())
    const matchesCategory = selectedCategoryNotes === "all" || note.type === selectedCategoryNotes
    return matchesSearch && matchesCategory
  })

const toggleExpandNote = (note: MedicalNote) => {
    setExpandedNote(expandedNote?.id === note.id ? null : note)
  }

return (
    <div className="flex flex-col h-full">
      {expandedNote ? (
        <div className="flex flex-col h-full">
          <div className="border-b p-4 flex items-center justify-between flex-shrink-0">
            <h3 className="font-semibold">Visualização Expandida</h3>
            <Button variant="ghost" size="sm" onClick={() => setExpandedNote(null)}>
              <X className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex-1 overflow-y-auto p-4">
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between mb-2">
                  <Badge className={getTypeColor(expandedNote.type)}>
                    {getTypeIcon(expandedNote.type)}
                    <span className="ml-1 capitalize">{expandedNote.type}</span>
                  </Badge>
                  <div className="flex gap-1">
                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                      <Edit3 className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-red-500">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
                <CardTitle className="text-xl">{expandedNote.title}</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="prose prose-sm max-w-none">
                  <p className="text-base whitespace-pre-wrap">{expandedNote.content}</p>
                </div>

<div className="grid grid-cols-2 gap-4 text-sm">
                  <div className="flex items-center gap-2">
                    <User className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-xs text-muted-foreground">Autor</p>
                      <p className="font-medium">{expandedNote.author}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Clock className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-xs text-muted-foreground">Data/Hora</p>
                      <p className="font-medium">{expandedNote.timestamp}</p>
                    </div>
                  </div>
                </div>

{expandedNote.tags.length > 0 && (
                  <>
                    <Separator />
                    <div>
                      <p className="text-xs text-muted-foreground mb-2">Tags</p>
                      <div className="flex flex-wrap gap-2">
                        {expandedNote.tags.map((tag, index) => (
                          <Badge key={index} variant="outline">
                            <Tag className="h-3 w-3 mr-1" />
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      ) : (
        <div className="flex flex-col h-full">
          <div className="border-b p-4 flex-shrink-0">
            <h3 className="font-semibold flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Anotações Médicas
            </h3>
          </div>

<div className="flex-1 flex flex-col min-h-0">
            {/* Nova Anotação */}
            <Card className="mx-4 mt-4 mb-2 flex-shrink-0">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium">Nova Anotação</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Input
                  placeholder="Título da anotação..."
                  value={noteTitle}
                  onChange={(e) => setNoteTitle(e.target.value)}
                />

<Select value={noteType} onValueChange={(value: any) => setNoteType(value)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="consultation">Consulta</SelectItem>
                    <SelectItem value="prescription">Receita</SelectItem>
                    <SelectItem value="exam">Exame</SelectItem>
                    <SelectItem value="observation">Observação</SelectItem>
                  </SelectContent>
                </Select>

<Textarea
                  placeholder="Escreva suas anotações sobre a consulta..."
                  value={currentNote}
                  onChange={(e) => setCurrentNote(e.target.value)}
                  className="min-h-[100px] resize-none"
                />

<Button
                  onClick={saveNote}
                  disabled={!currentNote.trim() || !noteTitle.trim()}
                  className="w-full"
                  size="sm"
                >
                  <Save className="h-4 w-4 mr-2" />
                  Salvar Anotação
                </Button>
              </CardContent>
            </Card>

{/* Filtros */}
            <div className="px-4 pb-2 space-y-2 flex-shrink-0">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                <Input
                  placeholder="Buscar anotações..."
                  className="pl-10"
                  value={searchTermNotes}
                  onChange={(e) => setSearchTermNotes(e.target.value)}
                />
              </div>

<Select value={selectedCategoryNotes} onValueChange={setSelectedCategoryNotes}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todas as categorias</SelectItem>
                  <SelectItem value="consultation">Consultas</SelectItem>
                  <SelectItem value="prescription">Receitas</SelectItem>
                  <SelectItem value="exam">Exames</SelectItem>
                  <SelectItem value="observation">Observações</SelectItem>
                </SelectContent>
              </Select>
            </div>

{/* Lista de Anotações */}
            <div className="flex-1 overflow-y-auto px-4 pb-4 min-h-0">
              <div className="space-y-3">
                {filteredNotes.length === 0 ? (
                  <div className="text-center text-muted-foreground py-8">
                    <FileText className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p>Nenhuma anotação encontrada</p>
                  </div>
                ) : (
                  filteredNotes.map((note) => (
                    <Card key={note.id} className="hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-2">
                          <div className="flex items-center gap-2">
                            <Badge className={getTypeColor(note.type)}>
                              {getTypeIcon(note.type)}
                              <span className="ml-1 capitalize">{note.type}</span>
                            </Badge>
                          </div>
                          <div className="flex gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              className="h-6 w-6 p-0"
                              onClick={() => toggleExpandNote(note)}
                            >
                              <Maximize2 className="h-3 w-3" />
                            </Button>
                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                              <Edit3 className="h-3 w-3" />
                            </Button>
                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-red-500">
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </div>
                        </div>

<h4 className="font-medium text-sm mb-2">{note.title}</h4>
                        <p className="text-sm text-muted-foreground mb-3 line-clamp-3">{note.content}</p>

<div className="flex items-center justify-between text-xs text-muted-foreground">
                          <div className="flex items-center gap-1">
                            <User className="h-3 w-3" />
                            <span>{note.author}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            <span>{note.timestamp}</span>
                          </div>
                        </div>

{note.tags.length > 0 && (
                          <div className="flex flex-wrap gap-1 mt-2">
                            {note.tags.map((tag, index) => (
                              <Badge key={index} variant="outline" className="text-xs">
                                <Tag className="h-2 w-2 mr-1" />
                                {tag}
                              </Badge>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  ))
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/patient-search.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import {
  Search,
  Filter,
  Calendar,
  Phone,
  Clock,
  ArrowLeft,
  Mail,
  MapPin,
  AlertCircle,
  Pill,
  Users,
  Video,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface Meeting {
  id: number
  title: string
  description: string
  date: string
  time: string
  status: "scheduled" | "in-progress" | "completed"
  participants?: string[]
}

interface PatientSearchProps {
  onPatientSelect: (patient: Patient) => void
  selectedPatient?: Patient | null
  onMeetingSelect?: (meeting: Meeting) => void
  selectedMeeting?: Meeting | null
}

export default function PatientSearch({
  onPatientSelect,
  selectedPatient,
  onMeetingSelect,
  selectedMeeting,
}: PatientSearchProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [filteredPatients, setFilteredPatients] = useState<Patient[]>([])
  const [filteredMeetings, setFilteredMeetings] = useState<Meeting[]>([])
  const [viewingDetails, setViewingDetails] = useState(false)

const patients: Patient[] = [
    {
      id: 1,
      name: "Maria Silva",
      age: 45,
      phone: "(11) 99999-9999",
      email: "maria.silva@email.com",
      address: "Rua das Flores, 123 - São Paulo, SP",
      lastConsult: "2024-01-15",
      status: "online",
      avatar: "/woman-doctor.png",
      medicalRecord: "MED-001",
      insurance: "Unimed",
      emergencyContact: "(11) 88888-8888",
      allergies: ["Penicilina", "Dipirona"],
      medications: ["Losartana 50mg", "Metformina 850mg"],
      lastVisit: "2024-01-15",
      nextAppointment: "2024-02-15",
      meetingTime: "14:30",
    },
    {
      id: 2,
      name: "João Santos",
      age: 32,
      phone: "(11) 88888-8888",
      email: "joao.santos@email.com",
      address: "Av. Paulista, 456 - São Paulo, SP",
      lastConsult: "2024-01-10",
      status: "offline",
      avatar: "/man-patient.png",
      medicalRecord: "MED-002",
      insurance: "Bradesco Saúde",
      emergencyContact: "(11) 77777-7777",
      allergies: [],
      medications: ["Omeprazol 20mg"],
      lastVisit: "2024-01-10",
      meetingTime: "10:00",
    },
    {
      id: 3,
      name: "Ana Costa",
      age: 28,
      phone: "(11) 77777-7777",
      email: "ana.costa@email.com",
      address: "Rua Augusta, 789 - São Paulo, SP",
      lastConsult: "2024-01-20",
      status: "busy",
      medicalRecord: "MED-003",
      insurance: "SulAmérica",
      emergencyContact: "(11) 66666-6666",
      allergies: ["Lactose"],
      medications: [],
      lastVisit: "2024-01-20",
      nextAppointment: "2024-02-20",
      meetingTime: "16:00",
    },
  ]

const meetings: Meeting[] = [
    {
      id: 1,
      title: "Reunião de Equipe - Planejamento Mensal",
      description: "Discussão sobre metas e estratégias para o próximo mês",
      date: "2025-01-25",
      time: "09:00",
      status: "scheduled",
      participants: ["Dr. João Silva", "Dra. Maria Santos", "Enf. Carlos Lima"],
    },
    {
      id: 2,
      title: "Apresentação de Casos Clínicos",
      description: "Revisão de casos complexos e discussão de tratamentos",
      date: "2025-01-26",
      time: "14:00",
      status: "scheduled",
      participants: ["Dr. João Silva", "Dr. Pedro Costa"],
    },
    {
      id: 3,
      title: "Treinamento - Novo Sistema",
      description: "Capacitação sobre o novo sistema de prontuário eletrônico",
      date: "2025-01-24",
      time: "10:30",
      status: "in-progress",
      participants: ["Equipe Técnica", "Todos os médicos"],
    },
  ]

useEffect(() => {
    let filtered = patients

if (searchTerm) {
      filtered = filtered.filter(
        (patient) =>
          patient.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          patient.medicalRecord.toLowerCase().includes(searchTerm.toLowerCase()) ||
          patient.phone.includes(searchTerm),
      )
    }

if (statusFilter !== "all") {
      filtered = filtered.filter((patient) => patient.status === statusFilter)
    }

setFilteredPatients(filtered)
  }, [searchTerm, statusFilter])

useEffect(() => {
    let filtered = meetings

if (searchTerm) {
      filtered = filtered.filter(
        (meeting) =>
          meeting.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
          meeting.description.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

setFilteredMeetings(filtered)
  }, [searchTerm])

const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "bg-green-500"
      case "busy":
        return "bg-yellow-500"
      default:
        return "bg-gray-400"
    }
  }

const getMeetingStatusColor = (status: string) => {
    switch (status) {
      case "scheduled":
        return "bg-blue-500"
      case "in-progress":
        return "bg-green-500"
      case "completed":
        return "bg-gray-500"
      default:
        return "bg-gray-400"
    }
  }

const getMeetingStatusText = (status: string) => {
    switch (status) {
      case "scheduled":
        return "Agendada"
      case "in-progress":
        return "Em Andamento"
      case "completed":
        return "Concluída"
      default:
        return "Desconhecido"
    }
  }

const handlePatientSelect = (patient: Patient) => {
    onPatientSelect(patient)
    setViewingDetails(true)
  }

const handleMeetingSelect = (meeting: Meeting) => {
    if (onMeetingSelect) {
      onMeetingSelect(meeting)
    }
  }

const handleBackToList = () => {
    setViewingDetails(false)
  }

if (viewingDetails && selectedPatient) {
    return (
      <div className="w-80 border-r bg-card flex flex-col h-full">
        <div className="p-4 border-b">
          <Button variant="ghost" size="sm" onClick={handleBackToList} className="mb-3">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Voltar
          </Button>
          <div className="flex items-center gap-3">
            <Avatar className="h-16 w-16">
              <AvatarImage src={selectedPatient.avatar || "/placeholder.svg"} />
              <AvatarFallback>
                {selectedPatient.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <div>
              <h2 className="font-bold text-lg">{selectedPatient.name}</h2>
              <p className="text-sm text-muted-foreground">{selectedPatient.age} anos</p>
            </div>
          </div>
        </div>

<div className="flex-1 overflow-y-auto p-4 space-y-4">
          <Card>
            <CardContent className="p-4 space-y-3">
              <div>
                <p className="text-xs text-muted-foreground mb-1">Prontuário</p>
                <p className="font-medium">{selectedPatient.medicalRecord}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground mb-1">Convênio</p>
                <p className="font-medium">{selectedPatient.insurance}</p>
              </div>
              {selectedPatient.meetingTime && (
                <div>
                  <p className="text-xs text-muted-foreground mb-1">Horário da Consulta</p>
                  <p className="font-medium flex items-center gap-2">
                    <Clock className="h-4 w-4 text-primary" />
                    {selectedPatient.meetingTime}
                  </p>
                </div>
              )}
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4 space-y-3">
              <div>
                <p className="text-xs text-muted-foreground mb-1">Contato</p>
                <div className="flex items-center gap-2 text-sm">
                  <Phone className="h-4 w-4 text-muted-foreground" />
                  <span>{selectedPatient.phone}</span>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <span className="truncate">{selectedPatient.email}</span>
                </div>
                <div className="flex items-start gap-2 text-sm">
                  <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                  <span className="flex-1">{selectedPatient.address}</span>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-4">
              <h3 className="font-semibold text-sm mb-2">Contato de Emergência</h3>
              <div className="flex items-center gap-2 text-sm">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <span>{selectedPatient.emergencyContact}</span>
              </div>
            </CardContent>
          </Card>

{selectedPatient.allergies.length > 0 && (
            <Card>
              <CardContent className="p-4">
                <h3 className="font-semibold text-sm mb-2 flex items-center gap-2">
                  <AlertCircle className="h-4 w-4 text-red-500" />
                  Alergias
                </h3>
                <div className="flex flex-wrap gap-2">
                  {selectedPatient.allergies.map((allergy, index) => (
                    <Badge key={index} variant="destructive">
                      {allergy}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{selectedPatient.medications.length > 0 && (
            <Card>
              <CardContent className="p-4">
                <h3 className="font-semibold text-sm mb-2 flex items-center gap-2">
                  <Pill className="h-4 w-4 text-blue-500" />
                  Medicações em Uso
                </h3>
                <ul className="space-y-1">
                  {selectedPatient.medications.map((medication, index) => (
                    <li key={index} className="text-sm">
                      • {medication}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          )}

<Card>
            <CardContent className="p-4 space-y-3">
              <h3 className="font-semibold text-sm mb-2">Consultas</h3>
              <div>
                <p className="text-xs text-muted-foreground mb-1">Última Visita</p>
                <p className="text-sm">{new Date(selectedPatient.lastVisit).toLocaleDateString()}</p>
              </div>
              {selectedPatient.nextAppointment && (
                <div>
                  <p className="text-xs text-muted-foreground mb-1">Próxima Consulta</p>
                  <p className="text-sm">{new Date(selectedPatient.nextAppointment).toLocaleDateString()}</p>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

return (
    <div className="w-80 border-r bg-card flex flex-col h-full">
      <div className="p-4 border-b space-y-3">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
          <Input
            placeholder="Buscar..."
            className="pl-10"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>

<div className="flex gap-2">
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="flex-1">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="online">Online</SelectItem>
              <SelectItem value="busy">Ocupado</SelectItem>
              <SelectItem value="offline">Offline</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            <Filter className="h-4 w-4" />
          </Button>
        </div>
      </div>

<Tabs defaultValue="patients" className="flex-1 flex flex-col min-h-0">
        <TabsList className="w-full rounded-none border-b">
          <TabsTrigger value="patients" className="flex-1">
            <Users className="h-4 w-4 mr-2" />
            Pacientes
          </TabsTrigger>
          <TabsTrigger value="meetings" className="flex-1">
            <Video className="h-4 w-4 mr-2" />
            Reuniões
          </TabsTrigger>
        </TabsList>

<TabsContent value="patients" className="flex-1 overflow-y-auto p-4 space-y-3 m-0">
          {filteredPatients.length === 0 ? (
            <div className="text-center text-muted-foreground py-8">
              <Search className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p>Nenhum paciente encontrado</p>
            </div>
          ) : (
            filteredPatients.map((patient) => (
              <Card
                key={patient.id}
                className={`cursor-pointer transition-all hover:shadow-md ${
                  selectedPatient?.id === patient.id ? "ring-2 ring-primary" : ""
                }`}
                onClick={() => handlePatientSelect(patient)}
              >
                <CardContent className="p-4">
                  <div className="flex items-start gap-3">
                    <div className="relative">
                      <Avatar>
                        <AvatarImage src={patient.avatar || "/placeholder.svg"} />
                        <AvatarFallback>
                          {patient.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div
                        className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white ${getStatusColor(
                          patient.status,
                        )}`}
                      />
                    </div>

<div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between mb-1">
                        <h3 className="font-medium truncate">{patient.name}</h3>
                        <Badge variant="outline" className="text-xs">
                          {patient.medicalRecord}
                        </Badge>
                      </div>

<p className="text-sm text-muted-foreground mb-2">
                        {patient.age} anos • {patient.insurance}
                      </p>

<div className="space-y-1">
                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
                          <Phone className="h-3 w-3" />
                          <span className="truncate">{patient.phone}</span>
                        </div>
                        {patient.meetingTime && (
                          <div className="flex items-center gap-1 text-xs text-primary font-medium">
                            <Clock className="h-3 w-3" />
                            <span>Horário: {patient.meetingTime}</span>
                          </div>
                        )}
                      </div>

<div className="flex items-center justify-between mt-2">
                        <span className="text-xs text-muted-foreground">{getStatusText(patient.status)}</span>
                        {patient.nextAppointment && (
                          <Badge variant="secondary" className="text-xs">
                            <Calendar className="h-3 w-3 mr-1" />
                            {new Date(patient.nextAppointment).toLocaleDateString()}
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>

<TabsContent value="meetings" className="flex-1 overflow-y-auto p-4 space-y-3 m-0">
          {filteredMeetings.length === 0 ? (
            <div className="text-center text-muted-foreground py-8">
              <Video className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p>Nenhuma reunião encontrada</p>
            </div>
          ) : (
            filteredMeetings.map((meeting) => (
              <Card
                key={meeting.id}
                className={`cursor-pointer transition-all hover:shadow-md ${
                  selectedMeeting?.id === meeting.id ? "ring-2 ring-primary" : ""
                }`}
                onClick={() => handleMeetingSelect(meeting)}
              >
                <CardContent className="p-4">
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <h3 className="font-medium line-clamp-2 mb-1">{meeting.title}</h3>
                        <p className="text-sm text-muted-foreground line-clamp-2">{meeting.description}</p>
                      </div>
                      <div
                        className={`w-2 h-2 rounded-full flex-shrink-0 mt-2 ml-2 ${getMeetingStatusColor(
                          meeting.status,
                        )}`}
                      />
                    </div>

<div className="space-y-1">
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <Calendar className="h-3 w-3" />
                        <span>{new Date(meeting.date).toLocaleDateString("pt-BR")}</span>
                      </div>
                      <div className="flex items-center gap-2 text-xs font-medium text-primary">
                        <Clock className="h-3 w-3" />
                        <span>{meeting.time}</span>
                      </div>
                    </div>

{meeting.participants && meeting.participants.length > 0 && (
                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
                        <Users className="h-3 w-3" />
                        <span className="truncate">{meeting.participants.join(", ")}</span>
                      </div>
                    )}

<div className="flex items-center justify-between pt-2 border-t">
                      <Badge variant="outline" className="text-xs">
                        {getMeetingStatusText(meeting.status)}
                      </Badge>
                      <Button variant="ghost" size="sm" className="h-7 text-xs">
                        <Video className="h-3 w-3 mr-1" />
                        Entrar
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))
          )}
        </TabsContent>
      </Tabs>

<div className="border-t p-4">
        <div className="text-xs text-muted-foreground text-center">
          {filteredPatients.length} paciente{filteredPatients.length !== 1 ? "s" : ""} • {filteredMeetings.length}{" "}
          reuniõ{filteredMeetings.length !== 1 ? "es" : "ão"}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/appointment-details-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { X, GripVertical, Calendar, Clock, User, FileText, Tag, CheckCircle2, Circle, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface Appointment {
  id: string
  title: string
  patient: string
  patient_id?: string // Added patient_id for navigation
  date: string
  time: string
  duration: string
  type: string
  status: "scheduled" | "confirmed" | "completed" | "cancelled"
  notes?: string
  color?: string
  tags?: string[]
}

interface AppointmentDetailsDialogProps {
  appointment: Appointment
  onClose: () => void
  onUpdate: (updatedAppointment: Appointment) => void
  onPatientClick?: (patientId: string) => void // Added callback for patient navigation
}

export function AppointmentDetailsDialog({
  appointment,
  onClose,
  onUpdate,
  onPatientClick,
}: AppointmentDetailsDialogProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editedAppointment, setEditedAppointment] = useState(appointment)
  const [newTag, setNewTag] = useState("")

// Drag state
  const [position, setPosition] = useState({ x: window.innerWidth - 420, y: 100 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const dialogRef = useRef<HTMLDivElement>(null)

// Resize state
  const [isResizing, setIsResizing] = useState(false)
  const [size, setSize] = useState({ width: 400, height: 600 })

useEffect(() => {
    setEditedAppointment(appointment)
  }, [appointment])

// Drag handlers
  const handleMouseDown = (e: React.MouseEvent) => {
    if (dialogRef.current) {
      const rect = dialogRef.current.getBoundingClientRect()
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      })
      setIsDragging(true)
      e.preventDefault() // Prevent text selection while dragging
    }
  }

const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
      setPosition({
        x: e.clientX - dragOffset.x,
        y: e.clientY - dragOffset.y,
      })
    } else if (isResizing && dialogRef.current) {
      const rect = dialogRef.current.getBoundingClientRect()
      setSize({
        width: Math.max(350, e.clientX - rect.left),
        height: Math.max(400, e.clientY - rect.top),
      })
    }
  }

const handleMouseUp = () => {
    setIsDragging(false)
    setIsResizing(false)
  }

useEffect(() => {
    if (isDragging || isResizing) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
      return () => {
        document.removeEventListener("mousemove", handleMouseMove)
        document.removeEventListener("mouseup", handleMouseUp)
      }
    }
  }, [isDragging, isResizing, dragOffset])

const handleSave = () => {
    onUpdate(editedAppointment)
    setIsEditing(false)
  }

const handleAddTag = () => {
    if (newTag.trim()) {
      setEditedAppointment({
        ...editedAppointment,
        tags: [...(editedAppointment.tags || []), newTag.trim()],
      })
      setNewTag("")
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    setEditedAppointment({
      ...editedAppointment,
      tags: editedAppointment.tags?.filter((tag) => tag !== tagToRemove),
    })
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "confirmed":
        return <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
      case "completed":
        return <CheckCircle2 className="h-4 w-4 text-blue-600 dark:text-blue-400" />
      case "cancelled":
        return <AlertCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
      default:
        return <Circle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
    }
  }

const getStatusLabel = (status: string) => {
    switch (status) {
      case "scheduled":
        return "Agendado"
      case "confirmed":
        return "Confirmado"
      case "completed":
        return "Concluído"
      case "cancelled":
        return "Cancelado"
      default:
        return status
    }
  }

return (
    <div
      ref={dialogRef}
      className="fixed bg-card border border-border rounded-lg shadow-2xl flex flex-col z-50"
      style={{
        left: `${position.x}px`,
        top: `${position.y}px`,
        width: `${size.width}px`,
        height: `${size.height}px`,
        cursor: isDragging ? "grabbing" : isResizing ? "nw-resize" : "default",
      }}
    >
      {/* Header */}
      <div
        className="relative text-white p-3 flex-shrink-0 cursor-grab active:cursor-grabbing rounded-t-lg"
        style={{
          background: `linear-gradient(135deg, ${appointment.color || "#3b82f6"}, ${appointment.color || "#3b82f6"}dd)`,
        }}
        onMouseDown={handleMouseDown}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <GripVertical className="h-4 w-4 opacity-70" />
            <h3 className="font-semibold text-sm">Detalhes do Agendamento</h3>
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-white hover:bg-white/20"
            onClick={onClose}
            onMouseDown={(e) => e.stopPropagation()} // Prevent drag when clicking close button
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>

{/* Content */}
      <div className="flex-1 overflow-y-auto p-3 space-y-3">
        {/* Status Section */}
        <div className="bg-card border border-border rounded-lg p-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              {getStatusIcon(editedAppointment.status)}
              <div>
                <p className="text-xs text-muted-foreground">Status</p>
                {isEditing ? (
                  <Select
                    value={editedAppointment.status}
                    onValueChange={(value: any) => setEditedAppointment({ ...editedAppointment, status: value })}
                  >
                    <SelectTrigger className="h-8 w-[180px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="scheduled">Agendado</SelectItem>
                      <SelectItem value="confirmed">Confirmado</SelectItem>
                      <SelectItem value="completed">Concluído</SelectItem>
                      <SelectItem value="cancelled">Cancelado</SelectItem>
                    </SelectContent>
                  </Select>
                ) : (
                  <p className="font-medium text-sm text-foreground">{getStatusLabel(editedAppointment.status)}</p>
                )}
              </div>
            </div>
            {!isEditing && (
              <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
                Editar
              </Button>
            )}
          </div>
        </div>

{/* Basic Info Section */}
        <div className="bg-card border border-border rounded-lg p-3 space-y-3">
          <div className="flex items-start space-x-3">
            <User className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground">Paciente</p>
              {isEditing ? (
                <Input
                  value={editedAppointment.patient}
                  onChange={(e) => setEditedAppointment({ ...editedAppointment, patient: e.target.value })}
                  className="h-8 mt-1"
                />
              ) : (
                <button
                  onClick={() => {
                    if (onPatientClick && editedAppointment.patient_id) {
                      onPatientClick(editedAppointment.patient_id)
                    }
                  }}
                  className={`font-medium text-sm text-foreground text-left ${
                    onPatientClick && editedAppointment.patient_id
                      ? "hover:text-primary hover:underline cursor-pointer"
                      : ""
                  }`}
                  disabled={!onPatientClick || !editedAppointment.patient_id}
                >
                  {editedAppointment.patient}
                </button>
              )}
            </div>
          </div>

<div className="flex items-start space-x-3">
            <FileText className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground">Título</p>
              {isEditing ? (
                <Input
                  value={editedAppointment.title}
                  onChange={(e) => setEditedAppointment({ ...editedAppointment, title: e.target.value })}
                  className="h-8 mt-1"
                />
              ) : (
                <p className="font-medium text-sm text-foreground">{editedAppointment.title}</p>
              )}
            </div>
          </div>
        </div>

{/* Date & Time Section */}
        <div className="bg-card border border-border rounded-lg p-3 space-y-3">
          <div className="flex items-start space-x-3">
            <Calendar className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground">Data</p>
              {isEditing ? (
                <Input
                  type="date"
                  value={editedAppointment.date}
                  onChange={(e) => setEditedAppointment({ ...editedAppointment, date: e.target.value })}
                  className="h-8 mt-1"
                />
              ) : (
                <p className="font-medium text-sm text-foreground">{editedAppointment.date}</p>
              )}
            </div>
          </div>

<div className="flex items-start space-x-3">
            <Clock className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground">Horário</p>
              {isEditing ? (
                <Input
                  type="time"
                  value={editedAppointment.time}
                  onChange={(e) => setEditedAppointment({ ...editedAppointment, time: e.target.value })}
                  className="h-8 mt-1"
                />
              ) : (
                <p className="font-medium text-sm text-foreground">
                  {editedAppointment.time} ({editedAppointment.duration})
                </p>
              )}
            </div>
          </div>
        </div>

{/* Notes Section */}
        <div className="bg-card border border-border rounded-lg p-3">
          <div className="flex items-start space-x-3">
            <FileText className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground mb-2">Observações</p>
              {isEditing ? (
                <Textarea
                  value={editedAppointment.notes || ""}
                  onChange={(e) => setEditedAppointment({ ...editedAppointment, notes: e.target.value })}
                  placeholder="Adicione observações sobre o agendamento..."
                  className="min-h-[80px] resize-none"
                />
              ) : (
                <p className="text-sm text-foreground">{editedAppointment.notes || "Nenhuma observação adicionada"}</p>
              )}
            </div>
          </div>
        </div>

{/* Tags Section */}
        <div className="bg-card border border-border rounded-lg p-3">
          <div className="flex items-start space-x-3">
            <Tag className="h-4 w-4 text-muted-foreground mt-0.5" />
            <div className="flex-1">
              <p className="text-xs text-muted-foreground mb-2">Marcadores</p>
              <div className="flex flex-wrap gap-2 mb-2">
                {editedAppointment.tags?.map((tag, index) => (
                  <span
                    key={index}
                    className="inline-flex items-center px-2 py-1 rounded-full text-xs bg-secondary text-secondary-foreground"
                  >
                    {tag}
                    {isEditing && (
                      <button onClick={() => handleRemoveTag(tag)} className="ml-1 hover:text-destructive">
                        <X className="h-3 w-3" />
                      </button>
                    )}
                  </span>
                ))}
              </div>
              {isEditing && (
                <div className="flex gap-2">
                  <Input
                    value={newTag}
                    onChange={(e) => setNewTag(e.target.value)}
                    onKeyPress={(e) => e.key === "Enter" && handleAddTag()}
                    placeholder="Adicionar marcador..."
                    className="h-8"
                  />
                  <Button onClick={handleAddTag} size="sm" variant="outline">
                    Adicionar
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>

{/* Action Buttons */}
        {isEditing && (
          <div className="flex gap-2 pt-2">
            <Button onClick={handleSave} className="flex-1">
              Salvar Alterações
            </Button>
            <Button
              onClick={() => {
                setIsEditing(false)
                setEditedAppointment(appointment)
              }}
              variant="outline"
              className="flex-1"
            >
              Cancelar
            </Button>
          </div>
        )}
      </div>

{/* Resize Handle */}
      <div
        className="absolute bottom-0 right-0 w-4 h-4 cursor-nw-resize"
        onMouseDown={(e) => {
          e.stopPropagation()
          setIsResizing(true)
        }}
      >
        <div className="absolute bottom-1 right-1 w-2 h-2 border-r-2 border-b-2 border-border" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/shopping-list-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type { Product } from "@/app/page"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Download, Printer } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { useState } from "react"

interface ShoppingListDialogProps {
  products: Product[]
  open: boolean
  onOpenChange: (open: boolean) => void
}

interface PrintColumns {
  produto: boolean
  marca: boolean
  fornecedor: boolean
  estoqueAtual: boolean
  qtdeIdeal: boolean
  qtdeNecessaria: boolean
  valorUnit: boolean
  totalEstimado: boolean
}

export function ShoppingListDialog({ products, open, onOpenChange }: ShoppingListDialogProps) {
  const [showPrintCustomization, setShowPrintCustomization] = useState(false)
  const [printColumns, setPrintColumns] = useState<PrintColumns>({
    produto: true,
    marca: true,
    fornecedor: true,
    estoqueAtual: true,
    qtdeIdeal: true,
    qtdeNecessaria: true,
    valorUnit: true,
    totalEstimado: true,
  })

const calculateNeededQuantity = (product: Product) => {
    return Math.max(0, product.idealQuantity - product.currentStock)
  }

const calculateEstimatedCost = (product: Product) => {
    const neededQty = calculateNeededQuantity(product)
    return (neededQty * product.lastPurchaseValue).toFixed(2)
  }

const totalEstimatedCost = products.reduce((total, product) => {
    return total + Number.parseFloat(calculateEstimatedCost(product))
  }, 0)

const handlePrint = (columns: PrintColumns) => {
    const printDate = new Date().toLocaleDateString("pt-BR", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    })

const headers: string[] = []
    if (columns.produto) headers.push("Produto")
    if (columns.marca) headers.push("Marca")
    if (columns.fornecedor) headers.push("Fornecedor")
    if (columns.estoqueAtual) headers.push("Estoque Atual")
    if (columns.qtdeIdeal) headers.push("Qtde Ideal")
    if (columns.qtdeNecessaria) headers.push("Qtde Necessária")
    if (columns.valorUnit) headers.push("Valor Unit.")
    if (columns.totalEstimado) headers.push("Total Estimado")

const buildRow = (product: Product) => {
      const cells: string[] = []
      if (columns.produto) cells.push(`<td class="product-name">${product.name}</td>`)
      if (columns.marca) cells.push(`<td>${product.brand}</td>`)
      if (columns.fornecedor) cells.push(`<td>${product.supplier}</td>`)
      if (columns.estoqueAtual) cells.push(`<td class="stock-low">${product.currentStock}</td>`)
      if (columns.qtdeIdeal) cells.push(`<td>${product.idealQuantity}</td>`)
      if (columns.qtdeNecessaria) cells.push(`<td class="quantity-needed">${calculateNeededQuantity(product)}</td>`)
      if (columns.valorUnit) cells.push(`<td>R$ ${product.lastPurchaseValue.toFixed(2)}</td>`)
      if (columns.totalEstimado) cells.push(`<td>R$ ${calculateEstimatedCost(product)}</td>`)
      return `<tr>${cells.join("")}</tr>`
    }

<div class="summary">
            <div class="summary-item">
              <div class="summary-label">Total de Produtos</div>
              <div class="summary-value">${products.length}</div>
            </div>
            ${
              columns.totalEstimado
                ? `
            <div class="summary-item">
              <div class="summary-label">Valor Total Estimado</div>
              <div class="summary-value">R$ ${totalEstimatedCost.toFixed(2)}</div>
            </div>
            `
                : ""
            }
          </div>

${
            products.length === 0
              ? '<p style="text-align: center; color: #666; margin-top: 50px;">Nenhum produto precisa ser reabastecido no momento.</p>'
              : `
          <table>
            <thead>
              <tr>
                ${headers.map((header) => `<th>${header}</th>`).join("")}
              </tr>
            </thead>
            <tbody>
              ${products.map((product) => buildRow(product)).join("")}
              ${
                columns.totalEstimado
                  ? `
              <tr class="total-row">
                <td colspan="${headers.length - 1}" style="text-align: right; padding-right: 20px;">TOTAL GERAL:</td>
                <td>R$ ${totalEstimatedCost.toFixed(2)}</td>
              </tr>
              `
                  : ""
              }
            </tbody>
          </table>
          `
          }

<div class="footer">
            <p>Lista de compras gerada automaticamente pelo sistema de gestão de estoque</p>
            <p>Data de impressão: ${new Date().toLocaleString("pt-BR")}</p>
          </div>
        </body>
      </html>
    `

const printWindow = window.open("", "_blank")
    if (printWindow) {
      printWindow.document.write(printContent)
      printWindow.document.close()
      printWindow.focus()
      printWindow.print()
      printWindow.close()
    }
  }

const handlePrintClick = () => {
    setShowPrintCustomization(true)
  }

const handleConfirmPrint = () => {
    setShowPrintCustomization(false)
    handlePrint(printColumns)
  }

const handleExport = () => {
    const csvContent = [
      ["Produto", "Marca", "Fornecedor", "Qtde Necessária", "Valor Unit.", "Total Estimado"].join(","),
      ...products.map((product) =>
        [
          product.name,
          product.brand,
          product.supplier,
          calculateNeededQuantity(product),
          product.lastPurchaseValue.toFixed(2),
          calculateEstimatedCost(product),
        ].join(","),
      ),
    ].join("\n")

const blob = new Blob([csvContent], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `lista-compras-${new Date().toISOString().split("T")[0]}.csv`
    a.click()
    window.URL.revokeObjectURL(url)
  }

return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <div className="flex items-center justify-between">
              <div>
                <DialogTitle>Lista de Compras</DialogTitle>
                <p className="text-sm text-muted-foreground mt-1">Produtos com estoque abaixo do ideal</p>
              </div>
              <div className="flex space-x-2">
                <Button variant="outline" size="sm" onClick={handlePrintClick}>
                  <Printer className="mr-2 h-4 w-4" />
                  Imprimir
                </Button>
                <Button variant="outline" size="sm" onClick={handleExport}>
                  <Download className="mr-2 h-4 w-4" />
                  Exportar CSV
                </Button>
              </div>
            </div>
          </DialogHeader>

{products.length === 0 ? (
            <div className="text-center py-8">
              <p className="text-muted-foreground">Nenhum produto precisa ser reabastecido no momento.</p>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Badge variant="secondary">{products.length} produtos para comprar</Badge>
                <div className="text-right">
                  <p className="text-sm text-muted-foreground">Total Estimado</p>
                  <p className="text-lg font-semibold">R$ {totalEstimatedCost.toFixed(2)}</p>
                </div>
              </div>

<div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Produto</TableHead>
                      <TableHead>Marca</TableHead>
                      <TableHead>Fornecedor</TableHead>
                      <TableHead>Estoque Atual</TableHead>
                      <TableHead>Qtde Ideal</TableHead>
                      <TableHead>Qtde Necessária</TableHead>
                      <TableHead>Valor Unit.</TableHead>
                      <TableHead>Total Estimado</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {products.map((product) => (
                      <TableRow key={product.id}>
                        <TableCell className="font-medium">{product.name}</TableCell>
                        <TableCell>{product.brand}</TableCell>
                        <TableCell>{product.supplier}</TableCell>
                        <TableCell>
                          <Badge variant="destructive">{product.currentStock}</Badge>
                        </TableCell>
                        <TableCell>{product.idealQuantity}</TableCell>
                        <TableCell className="font-semibold">{calculateNeededQuantity(product)}</TableCell>
                        <TableCell>R$ {product.lastPurchaseValue.toFixed(2)}</TableCell>
                        <TableCell className="font-semibold">R$ {calculateEstimatedCost(product)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

<Dialog open={showPrintCustomization} onOpenChange={setShowPrintCustomization}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Personalizar Impressão</DialogTitle>
            <p className="text-sm text-muted-foreground">Selecione as colunas que deseja incluir na impressão</p>
          </DialogHeader>

<div className="space-y-4 py-4">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="produto"
                checked={printColumns.produto}
                onCheckedChange={(checked) => setPrintColumns((prev) => ({ ...prev, produto: checked as boolean }))}
              />
              <Label htmlFor="produto" className="text-sm font-medium cursor-pointer">
                Produto
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="marca"
                checked={printColumns.marca}
                onCheckedChange={(checked) => setPrintColumns((prev) => ({ ...prev, marca: checked as boolean }))}
              />
              <Label htmlFor="marca" className="text-sm font-medium cursor-pointer">
                Marca
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="fornecedor"
                checked={printColumns.fornecedor}
                onCheckedChange={(checked) => setPrintColumns((prev) => ({ ...prev, fornecedor: checked as boolean }))}
              />
              <Label htmlFor="fornecedor" className="text-sm font-medium cursor-pointer">
                Fornecedor
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="estoqueAtual"
                checked={printColumns.estoqueAtual}
                onCheckedChange={(checked) =>
                  setPrintColumns((prev) => ({ ...prev, estoqueAtual: checked as boolean }))
                }
              />
              <Label htmlFor="estoqueAtual" className="text-sm font-medium cursor-pointer">
                Estoque Atual
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="qtdeIdeal"
                checked={printColumns.qtdeIdeal}
                onCheckedChange={(checked) => setPrintColumns((prev) => ({ ...prev, qtdeIdeal: checked as boolean }))}
              />
              <Label htmlFor="qtdeIdeal" className="text-sm font-medium cursor-pointer">
                Qtde Ideal
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="qtdeNecessaria"
                checked={printColumns.qtdeNecessaria}
                onCheckedChange={(checked) =>
                  setPrintColumns((prev) => ({ ...prev, qtdeNecessaria: checked as boolean }))
                }
              />
              <Label htmlFor="qtdeNecessaria" className="text-sm font-medium cursor-pointer">
                Qtde Necessária
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="valorUnit"
                checked={printColumns.valorUnit}
                onCheckedChange={(checked) => setPrintColumns((prev) => ({ ...prev, valorUnit: checked as boolean }))}
              />
              <Label htmlFor="valorUnit" className="text-sm font-medium cursor-pointer">
                Valor Unit.
              </Label>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="totalEstimado"
                checked={printColumns.totalEstimado}
                onCheckedChange={(checked) =>
                  setPrintColumns((prev) => ({ ...prev, totalEstimado: checked as boolean }))
                }
              />
              <Label htmlFor="totalEstimado" className="text-sm font-medium cursor-pointer">
                Total Estimado
              </Label>
            </div>
          </div>

<div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={() => setShowPrintCustomization(false)}>
              Cancelar
            </Button>
            <Button onClick={handleConfirmPrint}>
              <Printer className="mr-2 h-4 w-4" />
              Imprimir
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]sql:file="scripts/01_create_patients_schema.sql" isMerged="true"
-- =====================================================
-- SCHEMA DE PACIENTES - SISTEMA ODONTOLÓGICO
-- =====================================================
-- Este script cria todas as tabelas necessárias para o módulo de pacientes
-- Inclui: pacientes, histórico médico, consultas, tratamentos, planejamentos

-- =====================================================
-- 1. TABELA PRINCIPAL DE PACIENTES
-- =====================================================

CREATE TABLE IF NOT EXISTS patients (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  code VARCHAR(20) UNIQUE NOT NULL, -- Código único do paciente (ex: PAC001)
  
  -- Informações Pessoais
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) UNIQUE NOT NULL,
  phone VARCHAR(20) NOT NULL,
  birth_date DATE NOT NULL,
  cpf VARCHAR(14) UNIQUE, -- 123.456.789-00
  rg VARCHAR(20),
  profession VARCHAR(100),
  
  -- Endereço
  address TEXT,
  
  -- Contato de Emergência
  emergency_contact_name VARCHAR(255),
  emergency_contact_phone VARCHAR(20),
  emergency_contact_relationship VARCHAR(100),
  
  -- Status
  status VARCHAR(20) DEFAULT 'ativo' CHECK (status IN ('ativo', 'inativo', 'pendente')),
  financial_status VARCHAR(20) DEFAULT 'ok' CHECK (financial_status IN ('ok', 'pendente', 'atrasado')),
  
  -- Avatar
  avatar_url TEXT,
  
  -- Metadados
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  created_by UUID REFERENCES auth.users(id),
  
  -- Índices para busca rápida
  CONSTRAINT patients_email_check CHECK (email ~* '^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$')
);

-- Índices para performance
CREATE INDEX IF NOT EXISTS idx_patients_code ON patients(code);
CREATE INDEX IF NOT EXISTS idx_patients_email ON patients(email);
CREATE INDEX IF NOT EXISTS idx_patients_name ON patients(name);
CREATE INDEX IF NOT EXISTS idx_patients_status ON patients(status);
CREATE INDEX IF NOT EXISTS idx_patients_created_at ON patients(created_at DESC);

-- Comentários
COMMENT ON TABLE patients IS 'Tabela principal de pacientes do sistema';
COMMENT ON COLUMN patients.code IS 'Código único do paciente (ex: PAC001, PAC002)';
COMMENT ON COLUMN patients.financial_status IS 'Status financeiro: ok (em dia), pendente (pagamento pendente), atrasado (pagamento atrasado)';

-- =====================================================
-- 2. HISTÓRICO MÉDICO
-- =====================================================

CREATE TABLE IF NOT EXISTS patient_medical_history (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES patients(id) ON DELETE CASCADE,
  
  -- Informações Médicas
  allergies TEXT[], -- Array de alergias
  medications TEXT[], -- Array de medicamentos em uso
  conditions TEXT[], -- Array de condições médicas
  notes TEXT, -- Observações gerais do histórico médico
  
  -- Metadados
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  
  -- Um paciente tem apenas um histórico médico
  CONSTRAINT unique_patient_medical_history UNIQUE(patient_id)
);

CREATE INDEX IF NOT EXISTS idx_medical_history_patient ON patient_medical_history(patient_id);

COMMENT ON TABLE patient_medical_history IS 'Histórico médico completo do paciente';

-- =====================================================
-- 3. CONSULTAS/AGENDAMENTOS
-- =====================================================

CREATE TABLE IF NOT EXISTS patient_appointments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES patients(id) ON DELETE CASCADE,
  
  -- Data e Hora
  appointment_date DATE NOT NULL,
  start_time TIME NOT NULL,
  end_time TIME NOT NULL,
  
  -- Informações da Consulta
  professional VARCHAR(255) NOT NULL, -- Nome do profissional
  appointment_type VARCHAR(100) NOT NULL, -- Tipo: Consulta, Tratamento, Retorno, etc.
  insurance VARCHAR(100), -- Convênio ou Particular
  
  -- Status e Marcadores
  status VARCHAR(20) DEFAULT 'agendado' CHECK (status IN ('agendado', 'concluido', 'cancelado', 'faltou')),
  markers TEXT[], -- Array de marcadores (ex: ['Retorno', 'Urgência'])
  
  -- Procedimentos e Observações
  procedures TEXT[], -- Array de procedimentos realizados
  observations TEXT, -- Observações da consulta
  notes TEXT, -- Notas adicionais
  
  -- Financeiro
  cost DECIMAL(10, 2) DEFAULT 0,
  
  -- Metadados
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  
  -- Validações
  CONSTRAINT valid_appointment_time CHECK (end_time > start_time)
);

-- Índices para performance
CREATE INDEX IF NOT EXISTS idx_appointments_patient ON patient_appointments(patient_id);
CREATE INDEX IF NOT EXISTS idx_appointments_date ON patient_appointments(appointment_date DESC);
CREATE INDEX IF NOT EXISTS idx_appointments_status ON patient_appointments(status);
CREATE INDEX IF NOT EXISTS idx_appointments_professional ON patient_appointments(professional);

COMMENT ON TABLE patient_appointments IS 'Consultas e agendamentos dos pacientes';

-- =====================================================
-- 4. TRATAMENTOS
-- =====================================================

CREATE TABLE IF NOT EXISTS patient_treatments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES patients(id) ON DELETE CASCADE,
  
  -- Informações do Tratamento
  name VARCHAR(255) NOT NULL,
  start_date DATE NOT NULL,
  end_date DATE,
  
  -- Status e Progresso
  status VARCHAR(20) DEFAULT 'em_andamento' CHECK (status IN ('em_andamento', 'concluido', 'pausado', 'cancelado')),
  progress INTEGER DEFAULT 0 CHECK (progress >= 0 AND progress <= 100),
  
  -- Sessões
  total_sessions INTEGER DEFAULT 1,
  completed_sessions INTEGER DEFAULT 0,
  
  -- Financeiro
  cost DECIMAL(10, 2) DEFAULT 0,
  
  -- Metadados
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  
  -- Validações
  CONSTRAINT valid_sessions CHECK (completed_sessions <= total_sessions),
  CONSTRAINT valid_dates CHECK (end_date IS NULL OR end_date >= start_date)
);

-- Índices
CREATE INDEX IF NOT EXISTS idx_treatments_patient ON patient_treatments(patient_id);
CREATE INDEX IF NOT EXISTS idx_treatments_status ON patient_treatments(status);
CREATE INDEX IF NOT EXISTS idx_treatments_start_date ON patient_treatments(start_date DESC);

COMMENT ON TABLE patient_treatments IS 'Tratamentos em andamento ou concluídos dos pacientes';

-- =====================================================
-- 5. PLANEJAMENTOS
-- =====================================================

CREATE TABLE IF NOT EXISTS patient_plannings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES patients(id) ON DELETE CASCADE,
  
  -- Informações do Planejamento
  title VARCHAR(255) NOT NULL,
  doctor_name VARCHAR(255) NOT NULL,
  comments TEXT,
  total_value DECIMAL(10, 2) DEFAULT 0,
  
  -- Metadados
  created_date DATE DEFAULT CURRENT_DATE,
  last_edit_date DATE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Índices
CREATE INDEX IF NOT EXISTS idx_plannings_patient ON patient_plannings(patient_id);
CREATE INDEX IF NOT EXISTS idx_plannings_created_date ON patient_plannings(created_date DESC);

COMMENT ON TABLE patient_plannings IS 'Planejamentos de tratamento dos pacientes';

-- =====================================================
-- 6. PROCEDIMENTOS DO PLANEJAMENTO
-- =====================================================

CREATE TABLE IF NOT EXISTS planning_procedures (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  planning_id UUID NOT NULL REFERENCES patient_plannings(id) ON DELETE CASCADE,
  
  -- Informações do Procedimento
  name VARCHAR(255) NOT NULL,
  value DECIMAL(10, 2),
  status VARCHAR(20) DEFAULT 'planned' CHECK (status IN ('planned', 'in_progress', 'completed', 'cancelled')),
  
  -- Envio para Tratamento
  sent_to_treatment BOOLEAN DEFAULT FALSE,
  treatment_start_date DATE,
  treatment_end_date DATE,
  sessions INTEGER,
  treatment_value DECIMAL(10, 2),
  
  -- Ordem de exibição
  display_order INTEGER DEFAULT 0,
  
  -- Metadados
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  
  -- Validações
  CONSTRAINT valid_treatment_dates CHECK (treatment_end_date IS NULL OR treatment_end_date >= treatment_start_date)
);

-- Índices
CREATE INDEX IF NOT EXISTS idx_procedures_planning ON planning_procedures(planning_id);
CREATE INDEX IF NOT EXISTS idx_procedures_status ON planning_procedures(status);
CREATE INDEX IF NOT EXISTS idx_procedures_order ON planning_procedures(planning_id, display_order);

COMMENT ON TABLE planning_procedures IS 'Procedimentos individuais dentro de um planejamento';

-- =====================================================
-- 7. FUNÇÃO PARA ATUALIZAR updated_at AUTOMATICAMENTE
-- =====================================================

CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Aplicar trigger em todas as tabelas
CREATE TRIGGER update_patients_updated_at BEFORE UPDATE ON patients
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_medical_history_updated_at BEFORE UPDATE ON patient_medical_history
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_appointments_updated_at BEFORE UPDATE ON patient_appointments
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_treatments_updated_at BEFORE UPDATE ON patient_treatments
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_plannings_updated_at BEFORE UPDATE ON patient_plannings
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

CREATE TRIGGER update_procedures_updated_at BEFORE UPDATE ON planning_procedures
  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- =====================================================
-- 8. VIEWS ÚTEIS
-- =====================================================

-- View para resumo financeiro dos pacientes
CREATE OR REPLACE VIEW patient_financial_summary AS
SELECT 
  p.id AS patient_id,
  p.name,
  p.code,
  COALESCE(SUM(CASE WHEN pa.status = 'concluido' THEN pa.cost ELSE 0 END), 0) AS total_spent,
  COALESCE(SUM(CASE WHEN pa.status = 'agendado' THEN pa.cost ELSE 0 END), 0) AS total_pending,
  COALESCE(SUM(CASE WHEN pt.status IN ('em_andamento', 'pausado') THEN pt.cost ELSE 0 END), 0) AS total_treatments,
  MAX(CASE WHEN pa.status = 'concluido' THEN pa.appointment_date END) AS last_payment_date
FROM patients p
LEFT JOIN patient_appointments pa ON p.id = pa.patient_id
LEFT JOIN patient_treatments pt ON p.id = pt.patient_id
GROUP BY p.id, p.name, p.code;

COMMENT ON VIEW patient_financial_summary IS 'Resumo financeiro consolidado por paciente';

-- View para próximas consultas
CREATE OR REPLACE VIEW upcoming_appointments AS
SELECT 
  pa.*,
  p.name AS patient_name,
  p.code AS patient_code,
  p.phone AS patient_phone,
  p.email AS patient_email
FROM patient_appointments pa
JOIN patients p ON pa.patient_id = p.id
WHERE pa.status = 'agendado' 
  AND pa.appointment_date >= CURRENT_DATE
ORDER BY pa.appointment_date, pa.start_time;

COMMENT ON VIEW upcoming_appointments IS 'Consultas agendadas futuras com informações do paciente';

-- =====================================================
-- 9. FUNÇÃO PARA GERAR CÓDIGO DE PACIENTE AUTOMATICAMENTE
-- =====================================================

CREATE OR REPLACE FUNCTION generate_patient_code()
RETURNS TRIGGER AS $$
DECLARE
  next_number INTEGER;
  new_code VARCHAR(20);
BEGIN
  -- Se o código já foi fornecido, não gera automaticamente
  IF NEW.code IS NOT NULL AND NEW.code != '' THEN
    RETURN NEW;
  END IF;
  
  -- Busca o último número usado
  SELECT COALESCE(MAX(CAST(SUBSTRING(code FROM 4) AS INTEGER)), 0) + 1
  INTO next_number
  FROM patients
  WHERE code ~ '^PAC[0-9]+$';
  
  -- Gera o novo código com padding de zeros
  new_code := 'PAC' || LPAD(next_number::TEXT, 3, '0');
  
  NEW.code := new_code;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER generate_patient_code_trigger
BEFORE INSERT ON patients
FOR EACH ROW
EXECUTE FUNCTION generate_patient_code();

COMMENT ON FUNCTION generate_patient_code() IS 'Gera automaticamente código sequencial para novos pacientes (PAC001, PAC002, etc.)';
[V0_FILE]sql:file="scripts/02_enable_rls_patients.sql" isMerged="true"
-- =====================================================
-- ROW LEVEL SECURITY (RLS) - PACIENTES
-- =====================================================
-- Este script habilita e configura políticas de segurança para as tabelas de pacientes

-- =====================================================
-- 1. HABILITAR RLS EM TODAS AS TABELAS
-- =====================================================

ALTER TABLE patients ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_medical_history ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_appointments ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_treatments ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_plannings ENABLE ROW LEVEL SECURITY;
ALTER TABLE planning_procedures ENABLE ROW LEVEL SECURITY;

-- =====================================================
-- 2. POLÍTICAS PARA TABELA PATIENTS
-- =====================================================

-- Permitir leitura para usuários autenticados
CREATE POLICY "Usuários autenticados podem ver pacientes"
ON patients FOR SELECT
TO authenticated
USING (true);

-- Permitir inserção para usuários autenticados
CREATE POLICY "Usuários autenticados podem criar pacientes"
ON patients FOR INSERT
TO authenticated
WITH CHECK (true);

-- Permitir atualização para usuários autenticados
CREATE POLICY "Usuários autenticados podem atualizar pacientes"
ON patients FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

-- Permitir exclusão para usuários autenticados
CREATE POLICY "Usuários autenticados podem deletar pacientes"
ON patients FOR DELETE
TO authenticated
USING (true);

-- =====================================================
-- 3. POLÍTICAS PARA PATIENT_MEDICAL_HISTORY
-- =====================================================

CREATE POLICY "Usuários autenticados podem ver histórico médico"
ON patient_medical_history FOR SELECT
TO authenticated
USING (true);

CREATE POLICY "Usuários autenticados podem criar histórico médico"
ON patient_medical_history FOR INSERT
TO authenticated
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem atualizar histórico médico"
ON patient_medical_history FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem deletar histórico médico"
ON patient_medical_history FOR DELETE
TO authenticated
USING (true);

-- =====================================================
-- 4. POLÍTICAS PARA PATIENT_APPOINTMENTS
-- =====================================================

CREATE POLICY "Usuários autenticados podem ver consultas"
ON patient_appointments FOR SELECT
TO authenticated
USING (true);

CREATE POLICY "Usuários autenticados podem criar consultas"
ON patient_appointments FOR INSERT
TO authenticated
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem atualizar consultas"
ON patient_appointments FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem deletar consultas"
ON patient_appointments FOR DELETE
TO authenticated
USING (true);

-- =====================================================
-- 5. POLÍTICAS PARA PATIENT_TREATMENTS
-- =====================================================

CREATE POLICY "Usuários autenticados podem ver tratamentos"
ON patient_treatments FOR SELECT
TO authenticated
USING (true);

CREATE POLICY "Usuários autenticados podem criar tratamentos"
ON patient_treatments FOR INSERT
TO authenticated
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem atualizar tratamentos"
ON patient_treatments FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem deletar tratamentos"
ON patient_treatments FOR DELETE
TO authenticated
USING (true);

-- =====================================================
-- 6. POLÍTICAS PARA PATIENT_PLANNINGS
-- =====================================================

CREATE POLICY "Usuários autenticados podem ver planejamentos"
ON patient_plannings FOR SELECT
TO authenticated
USING (true);

CREATE POLICY "Usuários autenticados podem criar planejamentos"
ON patient_plannings FOR INSERT
TO authenticated
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem atualizar planejamentos"
ON patient_plannings FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem deletar planejamentos"
ON patient_plannings FOR DELETE
TO authenticated
USING (true);

-- =====================================================
-- 7. POLÍTICAS PARA PLANNING_PROCEDURES
-- =====================================================

CREATE POLICY "Usuários autenticados podem ver procedimentos"
ON planning_procedures FOR SELECT
TO authenticated
USING (true);

CREATE POLICY "Usuários autenticados podem criar procedimentos"
ON planning_procedures FOR INSERT
TO authenticated
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem atualizar procedimentos"
ON planning_procedures FOR UPDATE
TO authenticated
USING (true)
WITH CHECK (true);

CREATE POLICY "Usuários autenticados podem deletar procedimentos"
ON planning_procedures FOR DELETE
TO authenticated
USING (true);
[V0_FILE]sql:file="scripts/03_seed_patients_data.sql" isMerged="true"
-- =====================================================
-- DADOS DE EXEMPLO - PACIENTES
-- =====================================================
-- Este script insere dados de exemplo para testes

-- =====================================================
-- 1. INSERIR PACIENTES
-- =====================================================

INSERT INTO patients (code, name, email, phone, birth_date, cpf, rg, profession, address, emergency_contact_name, emergency_contact_phone, emergency_contact_relationship, status, financial_status)
VALUES
  ('PAC001', 'Keith dos Santos', 'keith.santos@email.com', '(11) 96307-3740', '1985-03-15', '123.456.789-00', '12.345.678-9', 'Engenheiro de Software', 'Rua das Flores, 123 - São Paulo, SP', 'Maria dos Santos', '(11) 98765-4321', 'Esposa', 'ativo', 'ok'),
  ('PAC002', 'Marcia Claudia', 'marcia.claudia@email.com', '(11) 98765-4321', '1978-11-22', '234.567.890-11', '23.456.789-0', 'Professora', 'Av. Paulista, 456 - São Paulo, SP', 'João Claudia', '(11) 97654-3210', 'Marido', 'ativo', 'pendente'),
  ('PAC003', 'Leonardo Guedes', 'leonardo.guedes@email.com', '(11) 95555-1234', '1992-06-08', '345.678.901-22', '34.567.890-1', 'Designer', 'Rua Augusta, 789 - São Paulo, SP', 'Ana Guedes', '(11) 96543-2109', 'Mãe', 'ativo', 'ok'),
  ('PAC004', 'Yung Kun Cho', 'yung.cho@email.com', '(11) 94444-5678', '1988-12-03', '456.789.012-33', '45.678.901-2', 'Empresário', 'Rua da Liberdade, 321 - São Paulo, SP', 'Min Cho', '(11) 95432-1098', 'Irmã', 'ativo', 'atrasado'),
  ('PAC005', 'Michele Ana Bomfim', 'michele.bomfim@email.com', '(11) 93333-9876', '1995-09-17', '567.890.123-44', '56.789.012-3', 'Advogada', 'Rua dos Jardins, 654 - São Paulo, SP', 'Carlos Bomfim', '(11) 94321-0987', 'Pai', 'ativo', 'ok'),
  ('PAC006', 'José Marcus', 'jose.marcus@email.com', '(11) 92222-1111', '1980-04-12', '678.901.234-55', '67.890.123-4', 'Contador', 'Rua do Comércio, 987 - São Paulo, SP', 'Paula Marcus', '(11) 93210-9876', 'Esposa', 'inativo', 'ok');

-- =====================================================
-- 2. INSERIR HISTÓRICO MÉDICO
-- =====================================================

INSERT INTO patient_medical_history (patient_id, allergies, medications, conditions, notes)
SELECT 
  id,
  ARRAY['Penicilina', 'Látex'],
  ARRAY['Losartana 50mg', 'Sinvastatina 20mg'],
  ARRAY['Hipertensão', 'Bruxismo'],
  'Paciente apresenta sensibilidade dentária. Histórico familiar de problemas periodontais. Recomendado acompanhamento preventivo a cada 6 meses.'
FROM patients WHERE code = 'PAC001';

INSERT INTO patient_medical_history (patient_id, allergies, medications, conditions, notes)
SELECT 
  id,
  ARRAY['Dipirona'],
  ARRAY['Metformina 850mg'],
  ARRAY['Diabetes Tipo 2'],
  'Paciente diabética, necessita cuidados especiais em procedimentos invasivos.'
FROM patients WHERE code = 'PAC002';

INSERT INTO patient_medical_history (patient_id, allergies, medications, conditions, notes)
SELECT 
  id,
  ARRAY[]::TEXT[],
  ARRAY[]::TEXT[],
  ARRAY[]::TEXT[],
  'Sem histórico médico relevante.'
FROM patients WHERE code = 'PAC003';

-- =====================================================
-- 3. INSERIR CONSULTAS
-- =====================================================

INSERT INTO patient_appointments (patient_id, appointment_date, start_time, end_time, professional, appointment_type, insurance, status, markers, procedures, observations, cost)
SELECT 
  id,
  '2025-08-01',
  '09:00',
  '10:00',
  'Dr. Ana Caroline Marques',
  'Consulta',
  'Particular',
  'agendado',
  ARRAY['Retorno', 'Avaliação'],
  ARRAY['Limpeza', 'Avaliação periodontal'],
  'Retorno para avaliação do tratamento de canal',
  150.00
FROM patients WHERE code = 'PAC001';

INSERT INTO patient_appointments (patient_id, appointment_date, start_time, end_time, professional, appointment_type, insurance, status, markers, procedures, observations, cost)
SELECT 
  id,
  '2025-07-15',
  '14:30',
  '16:00',
  'Dr. Ana Caroline Marques',
  'Tratamento',
  'Unimed',
  'concluido',
  ARRAY['Tratamento Concluído'],
  ARRAY['Tratamento de canal', 'Restauração'],
  'Tratamento de canal no dente 36 concluído com sucesso',
  800.00
FROM patients WHERE code = 'PAC001';

-- =====================================================
-- 4. INSERIR TRATAMENTOS
-- =====================================================

INSERT INTO patient_treatments (patient_id, name, start_date, end_date, status, progress, total_sessions, completed_sessions, cost)
SELECT 
  id,
  'Tratamento de Canal - Dente 36',
  '2025-06-20',
  '2025-07-15',
  'concluido',
  100,
  3,
  3,
  1200.00
FROM patients WHERE code = 'PAC001';

INSERT INTO patient_treatments (patient_id, name, start_date, status, progress, total_sessions, completed_sessions, cost)
SELECT 
  id,
  'Tratamento Periodontal',
  '2025-08-01',
  'em_andamento',
  0,
  4,
  0,
  600.00
FROM patients WHERE code = 'PAC001';

-- =====================================================
-- 5. INSERIR PLANEJAMENTOS
-- =====================================================

INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, last_edit_date, comments, total_value)
SELECT 
  id,
  'Plano de Tratamento Ortodôntico Completo',
  'Ana Caroline Marques',
  '2025-08-15',
  '2025-08-20',
  'Paciente necessita de correção da mordida e alinhamento dos dentes superiores. Tratamento estimado em 24 meses.',
  8500.00
FROM patients WHERE code = 'PAC001';

-- =====================================================
-- 6. INSERIR PROCEDIMENTOS DO PLANEJAMENTO
-- =====================================================

INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, display_order)
SELECT 
  pp.id,
  'Instalação de Aparelho Ortodôntico',
  2500.00,
  'planned',
  false,
  1
FROM patient_plannings pp
JOIN patients p ON pp.patient_id = p.id
WHERE p.code = 'PAC001' AND pp.title = 'Plano de Tratamento Ortodôntico Completo';

INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, display_order)
SELECT 
  pp.id,
  'Manutenções Mensais (24x)',
  150.00,
  'planned',
  false,
  2
FROM patient_plannings pp
JOIN patients p ON pp.patient_id = p.id
WHERE p.code = 'PAC001' AND pp.title = 'Plano de Tratamento Ortodôntico Completo';

INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, treatment_start_date, sessions, treatment_value, display_order)
SELECT 
  pp.id,
  'Radiografias de Controle',
  250.00,
  'in_progress',
  true,
  '2025-08-25',
  3,
  250.00,
  3
FROM patient_plannings pp
JOIN patients p ON pp.patient_id = p.id
WHERE p.code = 'PAC001' AND pp.title = 'Plano de Tratamento Ortodôntico Completo';
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Users,
  Wrench,
  CalendarDays,
  Package,
  Bot,
  DollarSign,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  CheckCircle,
  Clock,
  Star,
  RefreshCw,
  Filter,
  Calendar,
  UserCheck,
  UserX,
  Cake,
  Activity,
  ShoppingCart,
  Truck,
  BarChart3,
  PieChartIcon,
  CreditCard,
  Wallet,
  ArrowUpRight,
  ArrowDownRight,
  MessageSquare,
  ThumbsUp,
  Target,
} from "lucide-react"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  AreaChart,
  Area,
  RadialBarChart,
  RadialBar,
  Legend,
  ComposedChart,
} from "recharts"

export default function DashboardPage() {
  const [activeDashboard, setActiveDashboard] = useState("funcionarios")
  const [isLoading, setIsLoading] = useState(false)
  const [selectedPeriod, setSelectedPeriod] = useState("current")
  const [selectedMonth, setSelectedMonth] = useState("")
  const [startDate, setStartDate] = useState("")
  const [endDate, setEndDate] = useState("")

const dashboardOptions = [
    { id: "funcionarios", name: "Funcionários", icon: Users },
    { id: "protetico", name: "Protético", icon: Wrench },
    { id: "agendamentos", name: "Agendamentos", icon: CalendarDays },
    { id: "estoque", name: "Estoque", icon: Package },
    { id: "ia", name: "Assistente IA", icon: Bot },
    { id: "financeiro", name: "Financeiro", icon: DollarSign },
  ]

const monthOptions = [
    { value: "2024-01", label: "Janeiro 2024" },
    { value: "2024-02", label: "Fevereiro 2024" },
    { value: "2024-03", label: "Março 2024" },
    { value: "2024-04", label: "Abril 2024" },
    { value: "2024-05", label: "Maio 2024" },
    { value: "2024-06", label: "Junho 2024" },
    { value: "2024-07", label: "Julho 2024" },
    { value: "2024-08", label: "Agosto 2024" },
    { value: "2024-09", label: "Setembro 2024" },
    { value: "2024-10", label: "Outubro 2024" },
    { value: "2024-11", label: "Novembro 2024" },
    { value: "2024-12", label: "Dezembro 2024" },
  ]

const refreshData = async () => {
    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setIsLoading(false)
  }

const getPeriodTitle = () => {
    if (selectedPeriod === "current") {
      return "Dashboard Principal - Dezembro 2024"
    } else if (selectedPeriod === "monthly" && selectedMonth) {
      const monthLabel = monthOptions.find((m) => m.value === selectedMonth)?.label
      return `Dashboard - ${monthLabel}`
    } else if (selectedPeriod === "custom" && startDate && endDate) {
      return `Dashboard - ${new Date(startDate).toLocaleDateString("pt-BR")} a ${new Date(endDate).toLocaleDateString("pt-BR")}`
    }
    return "Dashboard Principal"
  }

const employeePerformanceData = [
    { name: "Dr. João Silva", performance: 95, hours: 40 },
    { name: "Dra. Maria Santos", performance: 88, hours: 38 },
    { name: "Ana Costa", performance: 92, hours: 35 },
    { name: "Carlos Oliveira", performance: 78, hours: 42 },
    { name: "Dra. Lucia Ferreira", performance: 85, hours: 36 },
  ]

const attendanceData = [
    { day: "Seg", present: 10, total: 12, late: 1 },
    { day: "Ter", present: 11, total: 12, late: 0 },
    { day: "Qua", present: 9, total: 12, late: 2 },
    { day: "Qui", present: 12, total: 12, late: 0 },
    { day: "Sex", present: 10, total: 12, late: 1 },
    { day: "Sáb", present: 8, total: 10, late: 0 },
  ]

const departmentDistributionData = [
    { name: "Dentistas", value: 5, color: "#3b82f6" },
    { name: "Assistentes", value: 4, color: "#22c55e" },
    { name: "Recepção", value: 2, color: "#eab308" },
    { name: "Administrativo", value: 1, color: "#f97316" },
  ]

const overtimeData = [
    { week: "Sem 1", hours: 8 },
    { week: "Sem 2", hours: 12 },
    { week: "Sem 3", hours: 6 },
    { week: "Sem 4", hours: 15 },
  ]

const prostheticStatusData = [
    { name: "Moldagem", value: 5, color: "#3b82f6" },
    { name: "Laboratório", value: 8, color: "#eab308" },
    { name: "Prova", value: 6, color: "#f97316" },
    { name: "Finalizado", value: 5, color: "#22c55e" },
  ]

const prostheticTypesData = [
    { type: "Coroa", count: 12, avgCost: 850 },
    { type: "Ponte", count: 8, avgCost: 1200 },
    { type: "Prótese Total", count: 5, avgCost: 2500 },
    { type: "Implante", count: 15, avgCost: 3200 },
  ]

const labPartnersData = [
    { name: "Lab Dental Pro", services: 45, avgTime: 7, rating: 4.8 },
    { name: "Protética Master", services: 38, avgTime: 6, rating: 4.9 },
    { name: "Dental Lab Express", services: 32, avgTime: 5, rating: 4.7 },
  ]

const appointmentTrendsData = [
    { month: "Jan", appointments: 120, cancellations: 8, noShow: 5 },
    { month: "Fev", appointments: 135, cancellations: 12, noShow: 7 },
    { month: "Mar", appointments: 148, cancellations: 6, noShow: 4 },
    { month: "Abr", appointments: 162, cancellations: 9, noShow: 6 },
    { month: "Mai", appointments: 178, cancellations: 7, noShow: 5 },
    { month: "Jun", appointments: 185, cancellations: 11, noShow: 8 },
  ]

const procedureTypesData = [
    { name: "Limpeza", value: 45, color: "#3b82f6" },
    { name: "Restauração", value: 32, color: "#22c55e" },
    { name: "Extração", value: 18, color: "#eab308" },
    { name: "Canal", value: 25, color: "#f97316" },
    { name: "Implante", value: 15, color: "#8b5cf6" },
  ]

const peakHoursData = [
    { hour: "08:00", appointments: 3 },
    { hour: "09:00", appointments: 5 },
    { hour: "10:00", appointments: 7 },
    { hour: "11:00", appointments: 6 },
    { hour: "14:00", appointments: 8 },
    { hour: "15:00", appointments: 9 },
    { hour: "16:00", appointments: 7 },
    { hour: "17:00", appointments: 5 },
  ]

const stockMovementData = [
    { day: "1", entrada: 15, saida: 12 },
    { day: "2", entrada: 8, saida: 18 },
    { day: "3", entrada: 22, saida: 15 },
    { day: "4", entrada: 12, saida: 20 },
    { day: "5", entrada: 18, saida: 14 },
    { day: "6", entrada: 25, saida: 22 },
    { day: "7", entrada: 16, saida: 19 },
  ]

const productCategoriesData = [
    { name: "Anestésicos", value: 25, color: "#3b82f6" },
    { name: "Materiais", value: 35, color: "#22c55e" },
    { name: "Instrumentos", value: 20, color: "#eab308" },
    { name: "Descartáveis", value: 40, color: "#f97316" },
    { name: "Medicamentos", value: 15, color: "#8b5cf6" },
  ]

const topUsedProductsData = [
    { product: "Luvas Descartáveis", usage: 450, unit: "unidades" },
    { product: "Anestésico Lidocaína", usage: 85, unit: "ampolas" },
    { product: "Resina Composta", usage: 32, unit: "seringas" },
    { product: "Algodão Hidrófilo", usage: 120, unit: "pacotes" },
  ]

const financialData = [
    { month: "Jan", receita: 85430, despesas: 32150, lucro: 53280 },
    { month: "Fev", receita: 92340, despesas: 35200, lucro: 57140 },
    { month: "Mar", receita: 78920, despesas: 28900, lucro: 50020 },
    { month: "Abr", receita: 95670, despesas: 38400, lucro: 57270 },
    { month: "Mai", receita: 102340, despesas: 41200, lucro: 61140 },
    { month: "Jun", receita: 88750, despesas: 33600, lucro: 55150 },
  ]

const paymentMethodsData = [
    { name: "Dinheiro", value: 15, color: "#22c55e" },
    { name: "Cartão Débito", value: 25, color: "#3b82f6" },
    { name: "Cartão Crédito", value: 35, color: "#8b5cf6" },
    { name: "PIX", value: 20, color: "#eab308" },
    { name: "Convênio", value: 5, color: "#f97316" },
  ]

const cashFlowData = [
    { day: "1-7", entrada: 18500, saida: 8200 },
    { day: "8-14", entrada: 22300, saida: 9500 },
    { day: "15-21", entrada: 25800, saida: 11200 },
    { day: "22-28", entrada: 19200, saida: 7800 },
  ]

const aiUsageData = [
    { hour: "08h", conversations: 5 },
    { hour: "09h", conversations: 12 },
    { hour: "10h", conversations: 18 },
    { hour: "11h", conversations: 15 },
    { hour: "12h", conversations: 8 },
    { hour: "13h", conversations: 6 },
    { hour: "14h", conversations: 22 },
    { hour: "15h", conversations: 28 },
    { hour: "16h", conversations: 25 },
    { hour: "17h", conversations: 19 },
    { hour: "18h", conversations: 12 },
  ]

const aiTopicsData = [
    { name: "Agendamento", value: 35, color: "#3b82f6" },
    { name: "Informações", value: 25, color: "#22c55e" },
    { name: "Cancelamento", value: 15, color: "#eab308" },
    { name: "Procedimentos", value: 20, color: "#8b5cf6" },
    { name: "Outros", value: 5, color: "#f97316" },
  ]

const aiResponseTimeData = [
    { range: "< 1s", count: 45 },
    { range: "1-2s", count: 32 },
    { range: "2-3s", count: 18 },
    { range: "> 3s", count: 5 },
  ]

const renderFuncionariosDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de Funcionários</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
            <p className="text-xs text-muted-foreground">+2 desde o mês passado</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Presentes Hoje</CardTitle>
            <UserCheck className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">10</div>
            <p className="text-xs text-muted-foreground">83% de presença</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ausentes</CardTitle>
            <UserX className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2</div>
            <p className="text-xs text-muted-foreground">1 atestado, 1 falta</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Horas Trabalhadas</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">320h</div>
            <p className="text-xs text-muted-foreground">Esta semana</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Horas Extras</CardTitle>
            <Activity className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">41h</div>
            <p className="text-xs text-muted-foreground">Este 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">Satisfação</CardTitle>
            <Star className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">4.7/5</div>
            <p className="text-xs text-muted-foreground">Avaliação média</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Aniversariantes</CardTitle>
            <Cake className="h-4 w-4 text-pink-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">3</div>
            <p className="text-xs text-muted-foreground">Este 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">Turnover</CardTitle>
            <TrendingDown className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">5%</div>
            <p className="text-xs text-muted-foreground">Últimos 12 meses</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Desempenho por Funcionário</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={employeePerformanceData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" angle={-45} textAnchor="end" height={80} />
                <YAxis />
                <Tooltip />
                <Bar dataKey="performance" fill="#3b82f6" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Presença Semanal</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <ComposedChart data={attendanceData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="day" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="present" fill="#22c55e" />
                <Line type="monotone" dataKey="total" stroke="#94a3b8" strokeWidth={2} strokeDasharray="5 5" />
                <Bar dataKey="late" fill="#f97316" />
              </ComposedChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Distribuição por Departamento</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={departmentDistributionData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {departmentDistributionData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Horas Extras por Semana</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={overtimeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="week" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="hours" stroke="#f97316" fill="#f97316" />
              </AreaChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Aniversariantes do Mês</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { name: "Ana Costa", date: "05/12", department: "Assistente" },
                { name: "Dr. João Silva", date: "15/12", department: "Dentista" },
                { name: "Carlos Oliveira", date: "28/12", department: "Recepção" },
              ].map((person, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <Cake className="h-5 w-5 text-pink-600" />
                    <div>
                      <p className="font-medium">{person.name}</p>
                      <p className="text-sm text-muted-foreground">{person.department}</p>
                    </div>
                  </div>
                  <Badge variant="secondary">{person.date}</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Top Performers do Mês</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { name: "Dr. João Silva", score: 95, badge: "🥇" },
                { name: "Ana Costa", score: 92, badge: "🥈" },
                { name: "Dra. Maria Santos", score: 88, badge: "🥉" },
              ].map((person, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <span className="text-2xl">{person.badge}</span>
                    <div>
                      <p className="font-medium">{person.name}</p>
                      <Progress value={person.score} className="w-32 mt-1" />
                    </div>
                  </div>
                  <Badge variant="default">{person.score}%</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Registro de Horas Extras</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Funcionário</TableHead>
                <TableHead>Departamento</TableHead>
                <TableHead>Horas Extras</TableHead>
                <TableHead>Valor</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {[
                { name: "Dr. João Silva", dept: "Dentista", hours: 12, value: "R$ 720", status: "Aprovado" },
                { name: "Ana Costa", dept: "Assistente", hours: 8, value: "R$ 320", status: "Aprovado" },
                { name: "Carlos Oliveira", dept: "Recepção", hours: 6, value: "R$ 240", status: "Pendente" },
                { name: "Dra. Maria Santos", dept: "Dentista", hours: 10, value: "R$ 600", status: "Aprovado" },
              ].map((record, index) => (
                <TableRow key={index}>
                  <TableCell className="font-medium">{record.name}</TableCell>
                  <TableCell>{record.dept}</TableCell>
                  <TableCell>{record.hours}h</TableCell>
                  <TableCell>{record.value}</TableCell>
                  <TableCell>
                    <Badge variant={record.status === "Aprovado" ? "default" : "secondary"}>{record.status}</Badge>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )

const renderProteticoDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Serviços Ativos</CardTitle>
            <Wrench className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24</div>
            <p className="text-xs text-muted-foreground">+3 novos esta semana</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Prazo Médio</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">7 dias</div>
            <p className="text-xs text-muted-foreground">-1 dia vs mês anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Taxa de Sucesso</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">96%</div>
            <p className="text-xs text-muted-foreground">Satisfação do cliente</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Faturamento</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 18.5k</div>
            <p className="text-xs text-muted-foreground">Este 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">Laboratórios Parceiros</CardTitle>
            <Truck className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">3</div>
            <p className="text-xs text-muted-foreground">Ativos</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Custo Médio</CardTitle>
            <BarChart3 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 1.850</div>
            <p className="text-xs text-muted-foreground">Por serviç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">Entregas no Prazo</CardTitle>
            <Target className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">92%</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">Retrabalhos</CardTitle>
            <AlertTriangle className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2</div>
            <p className="text-xs text-muted-foreground">Este mês</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Status dos Serviços</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={prostheticStatusData}
                  cx="50%"
                  cy="50%"
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                  label={({ name, value }) => `${name}: ${value}`}
                >
                  {prostheticStatusData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Tipos de Próteses Mais Solicitadas</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={prostheticTypesData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="type" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="count" fill="#3b82f6" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Custo Médio por Tipo</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={prostheticTypesData} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="type" type="category" />
                <Tooltip formatter={(value) => `R$ ${value}`} />
                <Bar dataKey="avgCost" fill="#22c55e" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Progresso dos Serviços</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <RadialBarChart cx="50%" cy="50%" innerRadius="10%" outerRadius="80%" data={prostheticStatusData}>
                <RadialBar dataKey="value" cornerRadius={10} fill="#8884d8" />
                <Legend />
                <Tooltip />
              </RadialBarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Laboratórios Parceiros</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Laboratório</TableHead>
                  <TableHead>Serviços</TableHead>
                  <TableHead>Prazo Médio</TableHead>
                  <TableHead>Avaliação</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {labPartnersData.map((lab, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{lab.name}</TableCell>
                    <TableCell>{lab.services}</TableCell>
                    <TableCell>{lab.avgTime} dias</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <span>{lab.rating}</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Serviços em Andamento</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                {
                  patient: "João Silva",
                  type: "Coroa",
                  lab: "Lab Dental Pro",
                  deadline: "2 dias",
                  status: "Laboratório",
                },
                {
                  patient: "Maria Santos",
                  type: "Implante",
                  lab: "Protética Master",
                  deadline: "5 dias",
                  status: "Moldagem",
                },
                {
                  patient: "Pedro Costa",
                  type: "Ponte",
                  lab: "Dental Lab Express",
                  deadline: "1 dia",
                  status: "Prova",
                },
                {
                  patient: "Ana Oliveira",
                  type: "Prótese Total",
                  lab: "Lab Dental Pro",
                  deadline: "3 dias",
                  status: "Laboratório",
                },
              ].map((service, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">{service.patient}</p>
                    <p className="text-sm text-muted-foreground">
                      {service.type} - {service.lab}
                    </p>
                  </div>
                  <div className="text-right">
                    <Badge variant="secondary">{service.status}</Badge>
                    <p className="text-xs text-muted-foreground mt-1">{service.deadline}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderAgendamentosDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Consultas Hoje</CardTitle>
            <CalendarDays className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">18</div>
            <p className="text-xs text-muted-foreground">85% de ocupaçã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">Taxa de Comparecimento</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">92%</div>
            <p className="text-xs text-muted-foreground">+5% vs mês anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Cancelamentos</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">3</div>
            <p className="text-xs text-muted-foreground">Hoje</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Receita Média</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 285</div>
            <p className="text-xs text-muted-foreground">Por consulta</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Taxa de Retorno</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">78%</div>
            <p className="text-xs text-muted-foreground">Pacientes retornam</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Tempo Médio</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">45 min</div>
            <p className="text-xs text-muted-foreground">Por consulta</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Próxima Semana</CardTitle>
            <Calendar className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">87</div>
            <p className="text-xs text-muted-foreground">Agendamentos</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Tendência de Agendamentos</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={appointmentTrendsData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="appointments" stackId="1" stroke="#3b82f6" fill="#3b82f6" />
                <Area type="monotone" dataKey="cancellations" stackId="2" stroke="#ef4444" fill="#ef4444" />
              </AreaChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Tipos de Procedimentos</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={procedureTypesData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {procedureTypesData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Horários de Pico</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={peakHoursData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="hour" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="appointments" fill="#8b5cf6" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Agendamentos por Profissional</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {[
                { name: "Dr. João Silva", appointments: 8, capacity: 10 },
                { name: "Dra. Maria Santos", appointments: 6, capacity: 8 },
                { name: "Dr. Pedro Costa", appointments: 4, capacity: 6 },
                { name: "Dra. Lucia Ferreira", appointments: 7, capacity: 9 },
              ].map((doctor, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex justify-between">
                    <span className="font-medium">{doctor.name}</span>
                    <span className="text-sm text-muted-foreground">
                      {doctor.appointments}/{doctor.capacity}
                    </span>
                  </div>
                  <Progress value={(doctor.appointments / doctor.capacity) * 100} />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Próximos Agendamentos</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { patient: "João Silva", time: "09:00", procedure: "Limpeza", doctor: "Dr. João Silva" },
                { patient: "Maria Santos", time: "10:30", procedure: "Restauração", doctor: "Dra. Maria Santos" },
                { patient: "Pedro Costa", time: "14:00", procedure: "Canal", doctor: "Dr. João Silva" },
                { patient: "Ana Oliveira", time: "15:30", procedure: "Implante", doctor: "Dra. Lucia Ferreira" },
              ].map((appointment, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">{appointment.patient}</p>
                    <p className="text-sm text-muted-foreground">
                      {appointment.procedure} - {appointment.doctor}
                    </p>
                  </div>
                  <Badge variant="outline">{appointment.time}</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Horários Mais Procurados</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Horário</TableHead>
                  <TableHead>Agendamentos</TableHead>
                  <TableHead>Ocupação</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { time: "09:00 - 10:00", count: 12, rate: 85 },
                  { time: "10:00 - 11:00", count: 15, rate: 95 },
                  { time: "14:00 - 15:00", count: 18, rate: 100 },
                  { time: "15:00 - 16:00", count: 14, rate: 90 },
                ].map((slot, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{slot.time}</TableCell>
                    <TableCell>{slot.count}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Progress value={slot.rate} className="w-16" />
                        <span className="text-sm">{slot.rate}%</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderEstoqueDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Produtos em Estoque</CardTitle>
            <Package className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">156</div>
            <p className="text-xs text-muted-foreground">Diferentes produtos</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Estoque Baixo</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8</div>
            <p className="text-xs text-muted-foreground">Produtos precisam reposiçã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">Valor Total</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 45.230</div>
            <p className="text-xs text-muted-foreground">Valor do estoque</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Giro Médio</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">15 dias</div>
            <p className="text-xs text-muted-foreground">Tempo de rotaçã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">Categorias</CardTitle>
            <PieChartIcon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">5</div>
            <p className="text-xs text-muted-foreground">Categorias 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">Fornecedores</CardTitle>
            <Truck className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
            <p className="text-xs text-muted-foreground">Fornecedores ativos</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pedidos Pendentes</CardTitle>
            <ShoppingCart className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">4</div>
            <p className="text-xs text-muted-foreground">Aguardando entrega</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Produtos Vencidos</CardTitle>
            <AlertTriangle className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2</div>
            <p className="text-xs text-muted-foreground">Requer atenção</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Movimentação de Estoque</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={stockMovementData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="day" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="entrada" fill="#22c55e" />
                <Bar dataKey="saida" fill="#ef4444" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Distribuição por Categoria</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={productCategoriesData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {productCategoriesData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Produtos Mais Usados</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={topUsedProductsData} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" />
                <YAxis dataKey="product" type="category" width={150} />
                <Tooltip />
                <Bar dataKey="usage" fill="#3b82f6" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Produtos com Estoque Baixo</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { name: "Anestésico Lidocaína", current: 5, ideal: 20, status: "Crítico" },
                { name: "Resina Composta", current: 8, ideal: 15, status: "Baixo" },
                { name: "Luvas Descartáveis", current: 12, ideal: 50, status: "Crítico" },
                { name: "Algodão Hidrófilo", current: 3, ideal: 10, status: "Crítico" },
              ].map((product, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">{product.name}</p>
                    <p className="text-sm text-muted-foreground">
                      Atual: {product.current} | Ideal: {product.ideal}
                    </p>
                  </div>
                  <Badge variant={product.status === "Crítico" ? "destructive" : "secondary"}>{product.status}</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Principais Fornecedores</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fornecedor</TableHead>
                  <TableHead>Produtos</TableHead>
                  <TableHead>Prazo</TableHead>
                  <TableHead>Avaliação</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { name: "Dental Supply Co.", products: 45, delivery: "2-3 dias", rating: 4.8 },
                  { name: "MedDent Distribuidora", products: 38, delivery: "3-5 dias", rating: 4.6 },
                  { name: "OdontoMax", products: 32, delivery: "1-2 dias", rating: 4.9 },
                  { name: "Dental Express", products: 28, delivery: "2-4 dias", rating: 4.7 },
                ].map((supplier, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{supplier.name}</TableCell>
                    <TableCell>{supplier.products}</TableCell>
                    <TableCell>{supplier.delivery}</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <span>{supplier.rating}</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Pedidos em Andamento</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { supplier: "Dental Supply Co.", items: 8, value: "R$ 2.450", eta: "2 dias", status: "Em trânsito" },
                {
                  supplier: "MedDent Distribuidora",
                  items: 5,
                  value: "R$ 1.280",
                  eta: "3 dias",
                  status: "Processando",
                },
                { supplier: "OdontoMax", items: 12, value: "R$ 3.890", eta: "1 dia", status: "Em trânsito" },
                { supplier: "Dental Express", items: 6, value: "R$ 1.650", eta: "2 dias", status: "Processando" },
              ].map((order, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">{order.supplier}</p>
                    <p className="text-sm text-muted-foreground">
                      {order.items} itens - {order.value}
                    </p>
                  </div>
                  <div className="text-right">
                    <Badge variant="secondary">{order.status}</Badge>
                    <p className="text-xs text-muted-foreground mt-1">ETA: {order.eta}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderIADashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Conversas Hoje</CardTitle>
            <Bot className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">47</div>
            <p className="text-xs text-muted-foreground">+12% vs ontem</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Tempo Médio</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2.3 min</div>
            <p className="text-xs text-muted-foreground">Por conversa</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Satisfação</CardTitle>
            <ThumbsUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">4.8/5</div>
            <p className="text-xs text-muted-foreground">Avaliação média</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Economia de Tempo</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">3.2h</div>
            <p className="text-xs text-muted-foreground">Economizadas hoje</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Taxa de Resolução</CardTitle>
            <CheckCircle className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">87%</div>
            <p className="text-xs text-muted-foreground">Resolvidas pela IA</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Mensagens Totais</CardTitle>
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1.2k</div>
            <p className="text-xs text-muted-foreground">Este 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">Feedback Positivo</CardTitle>
            <Star className="h-4 w-4 text-yellow-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">92%</div>
            <p className="text-xs text-muted-foreground">Usuários satisfeitos</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Escalações</CardTitle>
            <ArrowUpRight className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">6</div>
            <p className="text-xs text-muted-foreground">Para atendimento humano</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Uso da IA por Horário</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={aiUsageData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="hour" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="conversations" stroke="#8b5cf6" strokeWidth={3} />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Tópicos Mais Discutidos</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={aiTopicsData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {aiTopicsData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Tempo de Resposta</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={aiResponseTimeData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="range" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="count" fill="#22c55e" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Perguntas Mais Frequentes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { question: "Como agendar uma consulta?", count: 23 },
                { question: "Quais são os horários de funcionamento?", count: 18 },
                { question: "Aceita convênio médico?", count: 15 },
                { question: "Como cancelar um agendamento?", count: 12 },
                { question: "Onde fica localizada a clínica?", count: 9 },
              ].map((item, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <p className="font-medium">{item.question}</p>
                  <Badge variant="secondary">{item.count}x</Badge>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Feedbacks Recentes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {[
                { user: "João Silva", rating: 5, comment: "Muito útil e rápido!", time: "há 2h" },
                { user: "Maria Santos", rating: 4, comment: "Resolveu minha dúvida", time: "há 3h" },
                { user: "Pedro Costa", rating: 5, comment: "Excelente atendimento", time: "há 5h" },
                { user: "Ana Oliveira", rating: 3, comment: "Poderia ser mais detalhado", time: "há 6h" },
              ].map((feedback, index) => (
                <div key={index} className="p-3 border rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-medium">{feedback.user}</span>
                    <div className="flex items-center gap-1">
                      {Array.from({ length: feedback.rating }).map((_, i) => (
                        <Star key={i} className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                      ))}
                    </div>
                  </div>
                  <p className="text-sm text-muted-foreground">{feedback.comment}</p>
                  <p className="text-xs text-muted-foreground mt-1">{feedback.time}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Performance por Categoria</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Categoria</TableHead>
                  <TableHead>Conversas</TableHead>
                  <TableHead>Resolução</TableHead>
                  <TableHead>Satisfação</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { category: "Agendamento", conversations: 35, resolution: 95, satisfaction: 4.9 },
                  { category: "Informações", conversations: 25, resolution: 88, satisfaction: 4.7 },
                  { category: "Cancelamento", conversations: 15, resolution: 82, satisfaction: 4.5 },
                  { category: "Procedimentos", conversations: 20, resolution: 90, satisfaction: 4.8 },
                ].map((cat, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{cat.category}</TableCell>
                    <TableCell>{cat.conversations}</TableCell>
                    <TableCell>{cat.resolution}%</TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                        <span>{cat.satisfaction}</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderFinanceiroDashboard = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Receita Mensal</CardTitle>
            <ArrowUpRight className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 88.750</div>
            <p className="text-xs text-muted-foreground">+15% vs mês anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Despesas</CardTitle>
            <ArrowDownRight className="h-4 w-4 text-red-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 33.600</div>
            <p className="text-xs text-muted-foreground">-5% vs mês anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Lucro Líquido</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 55.150</div>
            <p className="text-xs text-muted-foreground">Margem de 62%</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Crescimento</CardTitle>
            <TrendingUp className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">+18%</div>
            <p className="text-xs text-muted-foreground">Comparado ao ano anterior</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Contas a Receber</CardTitle>
            <Wallet className="h-4 w-4 text-blue-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 12.450</div>
            <p className="text-xs text-muted-foreground">8 pendências</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Contas a Pagar</CardTitle>
            <CreditCard className="h-4 w-4 text-orange-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 8.200</div>
            <p className="text-xs text-muted-foreground">5 pendências</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Ticket Médio</CardTitle>
            <BarChart3 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">R$ 385</div>
            <p className="text-xs text-muted-foreground">Por 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">Fluxo de Caixa</CardTitle>
            <Activity className="h-4 w-4 text-green-600" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">Positivo</div>
            <p className="text-xs text-muted-foreground">R$ 21.550 este mês</p>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Receita vs Despesas vs Lucro</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <ComposedChart data={financialData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip formatter={(value) => `R$ ${value.toLocaleString()}`} />
                <Bar dataKey="receita" fill="#22c55e" />
                <Bar dataKey="despesas" fill="#ef4444" />
                <Line type="monotone" dataKey="lucro" stroke="#3b82f6" strokeWidth={3} />
              </ComposedChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Formas de Pagamento</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={paymentMethodsData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {paymentMethodsData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Fluxo de Caixa Semanal</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={cashFlowData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="day" />
                <YAxis />
                <Tooltip formatter={(value) => `R$ ${value.toLocaleString()}`} />
                <Bar dataKey="entrada" fill="#22c55e" />
                <Bar dataKey="saida" fill="#ef4444" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Resumo Financeiro</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-3">
                <h4 className="font-medium text-green-600 flex items-center gap-2">
                  <ArrowUpRight className="h-4 w-4" />
                  Recebimentos
                </h4>
                {[
                  { description: "Consultas", value: "R$ 45.200" },
                  { description: "Procedimentos", value: "R$ 28.500" },
                  { description: "Convênios", value: "R$ 11.730" },
                  { description: "Outros", value: "R$ 3.320" },
                ].map((item, index) => (
                  <div key={index} className="flex justify-between">
                    <span>{item.description}</span>
                    <span className="font-medium">{item.value}</span>
                  </div>
                ))}
              </div>
              <div className="space-y-3">
                <h4 className="font-medium text-red-600 flex items-center gap-2">
                  <ArrowDownRight className="h-4 w-4" />
                  Pagamentos
                </h4>
                {[
                  { description: "Salários", value: "R$ 18.500" },
                  { description: "Materiais", value: "R$ 8.200" },
                  { description: "Aluguel", value: "R$ 5.450" },
                  { description: "Outros", value: "R$ 1.450" },
                ].map((item, index) => (
                  <div key={index} className="flex justify-between">
                    <span>{item.description}</span>
                    <span className="font-medium">{item.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Contas a Receber</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Cliente</TableHead>
                  <TableHead>Valor</TableHead>
                  <TableHead>Vencimento</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { client: "João Silva", value: "R$ 2.850", due: "05/12", status: "Pendente" },
                  { client: "Maria Santos", value: "R$ 1.450", due: "08/12", status: "Atrasado" },
                  { client: "Pedro Costa", value: "R$ 3.200", due: "12/12", status: "Pendente" },
                  { client: "Ana Oliveira", value: "R$ 4.950", due: "15/12", status: "Pendente" },
                ].map((account, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{account.client}</TableCell>
                    <TableCell>{account.value}</TableCell>
                    <TableCell>{account.due}</TableCell>
                    <TableCell>
                      <Badge variant={account.status === "Atrasado" ? "destructive" : "secondary"}>
                        {account.status}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Contas a Pagar</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Fornecedor</TableHead>
                  <TableHead>Valor</TableHead>
                  <TableHead>Vencimento</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {[
                  { supplier: "Dental Supply Co.", value: "R$ 2.450", due: "10/12", status: "Pendente" },
                  { supplier: "Energia Elétrica", value: "R$ 850", due: "15/12", status: "Pendente" },
                  { supplier: "Água e Esgoto", value: "R$ 320", due: "18/12", status: "Pendente" },
                  { supplier: "Internet/Telefone", value: "R$ 280", due: "20/12", status: "Pendente" },
                ].map((bill, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{bill.supplier}</TableCell>
                    <TableCell>{bill.value}</TableCell>
                    <TableCell>{bill.due}</TableCell>
                    <TableCell>
                      <Badge variant="secondary">{bill.status}</Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )

const renderDashboardContent = () => {
    switch (activeDashboard) {
      case "funcionarios":
        return renderFuncionariosDashboard()
      case "protetico":
        return renderProteticoDashboard()
      case "agendamentos":
        return renderAgendamentosDashboard()
      case "estoque":
        return renderEstoqueDashboard()
      case "ia":
        return renderIADashboard()
      case "financeiro":
        return renderFinanceiroDashboard()
      default:
        return null
    }
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <main className="flex-1 flex flex-col p-6 overflow-auto">
        <Card className="flex-1 flex flex-col">
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="text-2xl font-bold">{getPeriodTitle()}</CardTitle>
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2">
                  <Filter className="h-4 w-4 text-muted-foreground" />
                  <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Selecionar período" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="current">Mês Atual</SelectItem>
                      <SelectItem value="monthly">Mês Específico</SelectItem>
                      <SelectItem value="custom">Período Personalizado</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

{selectedPeriod === "monthly" && (
                  <Select value={selectedMonth} onValueChange={setSelectedMonth}>
                    <SelectTrigger className="w-[160px]">
                      <SelectValue placeholder="Selecionar mês" />
                    </SelectTrigger>
                    <SelectContent>
                      {monthOptions.map((month) => (
                        <SelectItem key={month.value} value={month.value}>
                          {month.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}

{selectedPeriod === "custom" && (
                  <div className="flex items-center gap-2">
                    <div className="flex flex-col gap-1">
                      <Label htmlFor="start-date" className="text-xs">
                        Data Início
                      </Label>
                      <Input
                        id="start-date"
                        type="date"
                        value={startDate}
                        onChange={(e) => setStartDate(e.target.value)}
                        className="w-[140px]"
                      />
                    </div>
                    <div className="flex flex-col gap-1">
                      <Label htmlFor="end-date" className="text-xs">
                        Data Fim
                      </Label>
                      <Input
                        id="end-date"
                        type="date"
                        value={endDate}
                        onChange={(e) => setEndDate(e.target.value)}
                        className="w-[140px]"
                      />
                    </div>
                  </div>
                )}

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

{selectedPeriod !== "current" && (
              <div className="flex items-center gap-2 mt-2">
                <Calendar className="h-4 w-4 text-blue-600" />
                <span className="text-sm text-muted-foreground">
                  {selectedPeriod === "monthly" &&
                    selectedMonth &&
                    `Visualizando dados de ${monthOptions.find((m) => m.value === selectedMonth)?.label}`}
                  {selectedPeriod === "custom" &&
                    startDate &&
                    endDate &&
                    `Visualizando dados de ${new Date(startDate).toLocaleDateString("pt-BR")} até ${new Date(endDate).toLocaleDateString("pt-BR")}`}
                </span>
              </div>
            )}
          </CardHeader>

<CardContent className="flex-1 flex flex-col">
            <Tabs defaultValue="funcionarios" onValueChange={setActiveDashboard} className="w-full">
              <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
                {dashboardOptions.map((option) => (
                  <TabsTrigger key={option.id} value={option.id}>
                    <option.icon className="mr-2 h-4 w-4" />
                    {option.name}
                  </TabsTrigger>
                ))}
              </TabsList>
              {dashboardOptions.map((option) => (
                <TabsContent key={option.id} value={option.id} className="mt-6">
                  {renderDashboardContent()}
                </TabsContent>
              ))}
            </Tabs>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "dental-clinic-management",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ai-sdk/google": "^0.0.54",
    "@ai-sdk/react": "^0.0.67",
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-badge": "^1.0.4",
    "@radix-ui/react-button": "^1.0.4",
    "@radix-ui/react-card": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-input": "^1.0.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-textarea": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@supabase/supabase-js": "^2.39.3",
    "ai": "^3.4.32",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "cmdk": "^0.2.1",
    "date-fns": "^3.3.1",
    "lucide-react": "^0.344.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.49.3",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.4",
    "@google/generative-ai": "0.24.1",
    "@supabase/ssr": "0.7.0",
    "@supabase/auth-helpers-nextjs": "0.10.0",
    "xlsx": "0.18.5",
    "next-themes": "0.4.6",
    "recharts": "2.12.7",
    "tiny-invariant": "^1.3.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/procedures-carousel.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, Play, Pause, CheckCircle } from "lucide-react"
import { cn } from "@/lib/utils"

interface Procedure {
  id: number
  title: string
  description: string
  image: string
  details: string[]
}

const procedures: Procedure[] = [
  {
    id: 1,
    title: "Limpeza Dental Profissional",
    description: "Remoção completa de placa bacteriana e tártaro, proporcionando saúde bucal e sorriso radiante.",
    image: "/dental-cleaning-professional.jpg",
    details: [
      "Remoção de placa e tártaro",
      "Polimento dos dentes",
      "Aplicação de flúor",
      "Orientações de higiene bucal",
    ],
  },
  {
    id: 2,
    title: "Restauração Dental",
    description:
      "Tratamento de cáries e restauração da estrutura dental com materiais de alta qualidade e durabilidade.",
    image: "/dental-restoration-filling.jpg",
    details: [
      "Remoção de cáries",
      "Restauração com resina composta",
      "Acabamento e polimento",
      "Preservação da estrutura dental",
    ],
  },
  {
    id: 3,
    title: "Extração Dental",
    description: "Procedimento seguro e indolor para remoção de dentes comprometidos ou inclusos.",
    image: "/dental-extraction-surgery.jpg",
    details: [
      "Anestesia local eficaz",
      "Técnica minimamente invasiva",
      "Cuidados pós-operatórios",
      "Orientações para recuperação",
    ],
  },
  {
    id: 4,
    title: "Implante Dentário",
    description: "Substituição de dentes perdidos com implantes de titânio, restaurando função e estética.",
    image: "/dental-implant-titanium.jpg",
    details: [
      "Planejamento digital 3D",
      "Implante de titânio biocompatível",
      "Prótese personalizada",
      "Resultado natural e duradouro",
    ],
  },
  {
    id: 5,
    title: "Clareamento Dental",
    description: "Tratamento estético para deixar os dentes mais brancos e o sorriso mais bonito.",
    image: "/teeth-whitening-laser.jpg",
    details: [
      "Clareamento a laser",
      "Gel clareador profissional",
      "Resultados imediatos",
      "Acompanhamento personalizado",
    ],
  },
  {
    id: 6,
    title: "Tratamento Ortodôntico",
    description: "Correção do posicionamento dos dentes e mordida com aparelhos modernos e eficazes.",
    image: "/orthodontic-braces-treatment.jpg",
    details: [
      "Aparelhos fixos e móveis",
      "Alinhadores transparentes",
      "Acompanhamento regular",
      "Sorriso perfeitamente alinhado",
    ],
  },
]

export function ProceduresCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isPlaying, setIsPlaying] = useState(true)

useEffect(() => {
    if (!isPlaying) return

const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % procedures.length)
    }, 5000)

return () => clearInterval(interval)
  }, [isPlaying])

const goToPrevious = () => {
    setCurrentIndex((prev) => (prev - 1 + procedures.length) % procedures.length)
  }

const goToNext = () => {
    setCurrentIndex((prev) => (prev + 1) % procedures.length)
  }

const toggleAutoplay = () => {
    setIsPlaying(!isPlaying)
  }

const currentProcedure = procedures[currentIndex]

return (
    <Card className="w-full border-0 shadow-lg bg-gradient-to-br from-slate-50 to-blue-50/30">
      <CardContent className="p-0">
        <div className="flex flex-col lg:flex-row min-h-[400px]">
          {/* Imagem */}
          <div className="lg:w-1/2 relative overflow-hidden">
            <img
              src={currentProcedure.image || "/placeholder.svg"}
              alt={currentProcedure.title}
              className="w-full h-64 lg:h-full object-cover transition-transform duration-700 hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />

{/* Badge da categoria */}
            <div className="absolute top-4 left-4">
              <div className="bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium text-slate-700">
                Procedimento {currentIndex + 1}
              </div>
            </div>
          </div>

{/* Conteúdo */}
          <div className="lg:w-1/2 p-8 flex flex-col justify-center bg-white">
            <div className="mb-6">
              <h3 className="text-2xl lg:text-3xl font-bold text-slate-800 mb-4 leading-tight">
                {currentProcedure.title}
              </h3>
              <p className="text-slate-600 text-base leading-relaxed mb-6">{currentProcedure.description}</p>
            </div>

{/* Detalhes do procedimento */}
            <div className="mb-8">
              <h4 className="font-semibold text-slate-700 mb-4 flex items-center">
                <CheckCircle className="h-4 w-4 mr-2 text-emerald-500" />O que inclui:
              </h4>
              <div className="grid grid-cols-1 gap-3">
                {currentProcedure.details.map((detail, index) => (
                  <div key={index} className="flex items-center text-sm text-slate-600 bg-slate-50 rounded-lg p-3">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full mr-3 flex-shrink-0" />
                    {detail}
                  </div>
                ))}
              </div>
            </div>

{/* Controles */}
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={goToPrevious}
                  className="h-10 w-10 p-0 border-slate-200 hover:bg-slate-50 hover:border-slate-300 bg-transparent"
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>

<Button
                  variant="outline"
                  size="sm"
                  onClick={toggleAutoplay}
                  className="h-10 w-10 p-0 border-slate-200 hover:bg-slate-50 hover:border-slate-300 bg-transparent"
                >
                  {isPlaying ? <Pause className="h-3 w-3" /> : <Play className="h-3 w-3" />}
                </Button>

{/* Indicadores */}
              <div className="flex space-x-2">
                {procedures.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentIndex(index)}
                    className={cn(
                      "h-2 rounded-full transition-all duration-300",
                      index === currentIndex ? "bg-emerald-500 w-8" : "bg-slate-300 hover:bg-slate-400 w-2",
                    )}
                  />
                ))}
              </div>
            </div>

{/* Contador */}
            <div className="mt-6 text-center">
              <span className="text-sm text-slate-500 bg-slate-100 px-3 py-1 rounded-full">
                {currentIndex + 1} de {procedures.length} procedimentos
              </span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]jpg:file="public/dental-cleaning-professional.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-cleaning-professional-bUzjuz3DSOGmjuQGZIqqX4XOapc1db.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dental-restoration-filling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-restoration-filling-zttqAU7eu9D0rwag2d3ztybPOL7op4.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dental-extraction-surgery.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-extraction-surgery-k9yeRBHkEaRTTlP1AHWENBmlmi6bkF.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dental-implant-titanium.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dental-implant-titanium-X5Cmzr3h13l5lhEAT7FKgsbx1OewN3.jpg" isMerged="true"
[V0_FILE]jpg:file="public/teeth-whitening-laser.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/teeth-whitening-laser-ooY1cFTNbx9nLsBjZvK69979bVbcQr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/orthodontic-braces-treatment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/orthodontic-braces-treatment-ptu2ccEGL952v47qGkoytzl7OP3vxU.jpg" isMerged="true"
[V0_FILE]sql:file="scripts/12-seed-pactable.sql" isMerged="true"
-- Seed pactable with initial patient data
INSERT INTO pactable (code, name, email, phone, birth_date, address, last_visit, next_appointment, status, financial_status)
VALUES
  (
    'PAC001',
    'Keith dos Santos',
    'keith.santos@email.com',
    '(11) 96307-3740',
    '1985-03-15',
    'Rua das Flores, 123 - São Paulo, SP',
    '2025-07-15',
    '2025-08-01',
    'ativo',
    'ok'
  ),
  (
    'PAC002',
    'Marcia Claudia',
    'marcia.claudia@email.com',
    '(11) 98765-4321',
    '1978-11-22',
    'Av. Paulista, 456 - São Paulo, SP',
    '2025-07-20',
    '2025-08-01',
    'ativo',
    'pendente'
  ),
  (
    'PAC003',
    'Leonardo Guedes',
    'leonardo.guedes@email.com',
    '(11) 95555-1234',
    '1992-06-08',
    'Rua Augusta, 789 - São Paulo, SP',
    '2025-06-30',
    NULL,
    'ativo',
    'ok'
  ),
  (
    'PAC004',
    'Yung Kun Cho',
    'yung.cho@email.com',
    '(11) 94444-5678',
    '1988-12-03',
    'Rua da Liberdade, 321 - São Paulo, SP',
    '2025-07-10',
    '2025-08-01',
    'ativo',
    'atrasado'
  ),
  (
    'PAC005',
    'Michele Ana Bomfim',
    'michele.bomfim@email.com',
    '(11) 93333-9876',
    '1995-09-17',
    'Rua dos Jardins, 654 - São Paulo, SP',
    '2025-07-25',
    '2025-08-01',
    'ativo',
    'ok'
  ),
  (
    'PAC006',
    'José Marcus',
    'jose.marcus@email.com',
    '(11) 92222-1111',
    '1980-04-12',
    'Rua do Comércio, 987 - São Paulo, SP',
    '2025-05-15',
    NULL,
    'inativo',
    'ok'
  );
[V0_FILE]sql:file="scripts/14-seed-patient-details-data.sql" isMerged="true"
-- Get the first patient ID from pactable
DO $$
DECLARE
  patient_id_var UUID;
BEGIN
  -- Get the first patient ID
  SELECT id INTO patient_id_var FROM pactable LIMIT 1;

-- Insert Emergency Contact
  INSERT INTO emergency_contacts (patient_id, name, phone, relationship)
  VALUES (patient_id_var, 'Carlos Santos', '(11) 98765-4321', 'Irmão');

-- Insert Medical History
  INSERT INTO medical_history (patient_id, allergies, medications, conditions, notes)
  VALUES (
    patient_id_var,
    ARRAY['Penicilina', 'Látex'],
    ARRAY['Losartana 50mg', 'Sinvastatina 20mg'],
    ARRAY['Hipertensão', 'Colesterol Alto'],
    'Paciente com histórico de hipertensão controlada. Alergia a penicilina confirmada em 2020.'
  );

-- Insert Appointments
  INSERT INTO patient_appointments (patient_id, date, start_time, end_time, professional, type, insurance, status, procedures, markers, observations, cost)
  VALUES
    (patient_id_var, '2025-08-01', '09:00', '10:00', 'Dr. Ana Caroline Marques', 'Consulta', 'Particular', 'agendado', ARRAY['Consulta de Rotina'], ARRAY['Retorno'], 'Paciente solicitou avaliação para clareamento dental', 150.00),
    (patient_id_var, '2025-07-15', '14:00', '15:30', 'Dr. Pedro Henrique Silva', 'Procedimento', 'Unimed', 'concluido', ARRAY['Limpeza', 'Aplicação de Flúor'], ARRAY['Primeira Consulta'], 'Paciente apresentou boa higiene bucal. Recomendado uso de fio dental diariamente.', 280.00),
    (patient_id_var, '2025-06-20', '10:00', '11:00', 'Dr. Ana Caroline Marques', 'Consulta', 'Particular', 'concluido', ARRAY['Avaliação Inicial'], ARRAY[], 'Primeira consulta do paciente. Identificada necessidade de tratamento ortodôntico.', 150.00),
    (patient_id_var, '2025-05-10', '15:00', '16:00', 'Dr. Mariana Costa', 'Emergência', 'Particular', 'concluido', ARRAY['Tratamento de Canal'], ARRAY['Urgência'], 'Paciente com dor intensa no dente 36. Realizado tratamento de canal de urgência.', 800.00),
    (patient_id_var, '2025-04-05', '11:00', '11:30', 'Dr. Pedro Henrique Silva', 'Consulta', 'Particular', 'faltou', ARRAY['Consulta de Retorno'], ARRAY[], '', 0.00);

-- Insert Treatments
  INSERT INTO patient_treatments (patient_id, name, start_date, end_date, status, progress, total_sessions, completed_sessions, cost)
  VALUES
    (patient_id_var, 'Tratamento Ortodôntico', '2025-07-01', NULL, 'em_andamento', 35, 24, 8, 4500.00),
    (patient_id_var, 'Clareamento Dental', '2025-06-15', '2025-07-30', 'concluido', 100, 4, 4, 1200.00),
    (patient_id_var, 'Implante Dentário - Dente 46', '2025-05-20', NULL, 'em_andamento', 60, 5, 3, 3500.00);

-- Insert Planning
  INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, last_edit_date, comments, total_value)
  VALUES (
    patient_id_var,
    'Planejamento Ortodôntico Completo',
    'Ana Caroline Marques',
    '2025-06-20',
    '2025-07-01',
    'Paciente apresenta má oclusão classe II com apinhamento anterior. Planejamento prevê uso de aparelho fixo por 24 meses com possível necessidade de extrações dos pré-molares superiores.',
    5800.00
  );

-- Get the planning ID
  DECLARE
    planning_id_var UUID;
  BEGIN
    SELECT id INTO planning_id_var FROM patient_plannings WHERE patient_id = patient_id_var LIMIT 1;

-- Insert Planning Procedures
    INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, treatment_start_date, sessions, treatment_value)
    VALUES
      (planning_id_var, 'Instalação de Aparelho Ortodôntico', 1500.00, 'completed', TRUE, '2025-07-01', 1, 1500.00),
      (planning_id_var, 'Manutenções Mensais (24 meses)', 3600.00, 'in_progress', TRUE, '2025-07-01', 24, 3600.00),
      (planning_id_var, 'Contenção Ortodôntica', 700.00, 'planned', FALSE, NULL, 1, NULL),
      (planning_id_var, 'Extração de Pré-molares (se necessário)', 0.00, 'planned', FALSE, NULL, 2, NULL);
  END;

-- Insert another Planning
  INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, comments, total_value)
  VALUES (
    patient_id_var,
    'Reabilitação Oral Posterior',
    'Pedro Henrique Silva',
    '2025-08-01',
    'Planejamento para reabilitação dos dentes posteriores com implantes e próteses.',
    8500.00
  );

-- Get the second planning ID
  DECLARE
    planning_id_var2 UUID;
  BEGIN
    SELECT id INTO planning_id_var2 FROM patient_plannings WHERE patient_id = patient_id_var AND title = 'Reabilitação Oral Posterior' LIMIT 1;

-- Insert Planning Procedures for second planning
    INSERT INTO planning_procedures (planning_id, name, value, status)
    VALUES
      (planning_id_var2, 'Implante Dentário - Dente 46', 3500.00, 'in_progress'),
      (planning_id_var2, 'Implante Dentário - Dente 47', 3500.00, 'planned'),
      (planning_id_var2, 'Prótese sobre Implante', 1500.00, 'planned');
  END;

-- Insert Budgets
  INSERT INTO patient_budgets (patient_id, title, description, total_value, status, created_date, expiry_date)
  VALUES
    (patient_id_var, 'Orçamento - Clareamento Dental', 'Clareamento dental com gel de peróxido de hidrogênio 35%', 1200.00, 'approved', '2025-06-10', '2025-07-10'),
    (patient_id_var, 'Orçamento - Facetas de Porcelana', 'Facetas de porcelana para dentes anteriores superiores (6 unidades)', 7200.00, 'pending', '2025-08-01', '2025-09-01');

-- Get budget IDs and insert items
  DECLARE
    budget_id_var1 UUID;
    budget_id_var2 UUID;
  BEGIN
    SELECT id INTO budget_id_var1 FROM patient_budgets WHERE patient_id = patient_id_var AND title = 'Orçamento - Clareamento Dental' LIMIT 1;
    SELECT id INTO budget_id_var2 FROM patient_budgets WHERE patient_id = patient_id_var AND title = 'Orçamento - Facetas de Porcelana' LIMIT 1;

-- Insert Budget Items
    INSERT INTO budget_items (budget_id, procedure_name, quantity, unit_price, total_price)
    VALUES
      (budget_id_var1, 'Clareamento Dental - Sessão', 4, 300.00, 1200.00),
      (budget_id_var2, 'Faceta de Porcelana', 6, 1200.00, 7200.00);
  END;

-- Insert Financial Transactions
  INSERT INTO financial_transactions (patient_id, description, amount, type, status, due_date, payment_date, payment_method)
  VALUES
    (patient_id_var, 'Consulta Inicial', 150.00, 'payment', 'completed', '2025-06-20', '2025-06-20', 'Cartão de Crédito'),
    (patient_id_var, 'Tratamento de Canal - Dente 36', 800.00, 'payment', 'completed', '2025-05-10', '2025-05-10', 'PIX'),
    (patient_id_var, 'Limpeza e Aplicação de Flúor', 280.00, 'payment', 'completed', '2025-07-15', '2025-07-15', 'Dinheiro'),
    (patient_id_var, 'Clareamento Dental - Parcela 1/4', 300.00, 'payment', 'completed', '2025-06-15', '2025-06-15', 'Cartão de Crédito'),
    (patient_id_var, 'Clareamento Dental - Parcela 2/4', 300.00, 'payment', 'completed', '2025-06-30', '2025-06-30', 'Cartão de Crédito'),
    (patient_id_var, 'Clareamento Dental - Parcela 3/4', 300.00, 'payment', 'completed', '2025-07-15', '2025-07-15', 'Cartão de Crédito'),
    (patient_id_var, 'Clareamento Dental - Parcela 4/4', 300.00, 'payment', 'completed', '2025-07-30', '2025-07-30', 'Cartão de Crédito'),
    (patient_id_var, 'Instalação Aparelho Ortodôntico', 1500.00, 'payment', 'completed', '2025-07-01', '2025-07-01', 'Cartão de Crédito'),
    (patient_id_var, 'Manutenção Ortodôntica - Mês 1', 150.00, 'payment', 'completed', '2025-07-15', '2025-07-15', 'PIX'),
    (patient_id_var, 'Manutenção Ortodôntica - Mês 2', 150.00, 'payment', 'completed', '2025-08-15', '2025-08-15', 'PIX'),
    (patient_id_var, 'Implante Dentário - Entrada', 1000.00, 'payment', 'completed', '2025-05-20', '2025-05-20', 'Transferência'),
    (patient_id_var, 'Implante Dentário - Parcela 1/5', 500.00, 'payment', 'completed', '2025-06-20', '2025-06-20', 'Cartão de Crédito'),
    (patient_id_var, 'Implante Dentário - Parcela 2/5', 500.00, 'payment', 'completed', '2025-07-20', '2025-07-20', 'Cartão de Crédito'),
    (patient_id_var, 'Implante Dentário - Parcela 3/5', 500.00, 'payment', 'pending', '2025-08-20', NULL, NULL),
    (patient_id_var, 'Implante Dentário - Parcela 4/5', 500.00, 'charge', 'pending', '2025-09-20', NULL, NULL),
    (patient_id_var, 'Implante Dentário - Parcela 5/5', 500.00, 'charge', 'pending', '2025-10-20', NULL, NULL),
    (patient_id_var, 'Manutenção Ortodôntica - Mês 3', 150.00, 'charge', 'overdue', '2025-09-15', NULL, NULL);

-- Insert Documents
  INSERT INTO patient_documents (patient_id, category, title, description, file_type, added_date)
  VALUES
    (patient_id_var, 'initial', 'Anamnese Completa', 'Questionário de saúde geral e histórico médico do paciente', 'pdf', '2025-06-15'),
    (patient_id_var, 'initial', 'Fotos Iniciais - Frontal', 'Fotografia frontal do sorriso antes do tratamento', 'image', '2025-06-15'),
    (patient_id_var, 'initial', 'Fotos Iniciais - Lateral Direita', 'Vista lateral direita da oclusão', 'image', '2025-06-15'),
    (patient_id_var, 'initial', 'Radiografia Panorâmica', 'Radiografia panorâmica inicial para diagnóstico', 'image', '2025-06-16'),
    (patient_id_var, 'orthodontics', 'Moldagem Superior', 'Moldagem do arco superior para confecção de aparelho', 'image', '2025-07-01'),
    (patient_id_var, 'orthodontics', 'Plano de Tratamento Ortodôntico', 'Planejamento detalhado do tratamento ortodôntico', 'pdf', '2025-07-02'),
    (patient_id_var, 'endodontics', 'Radiografia Periapical - Dente 36', 'Radiografia do dente 36 antes do tratamento de canal', 'image', '2025-06-20'),
    (patient_id_var, 'endodontics', 'Controle Pós-Operatório', 'Radiografia de controle após tratamento endodôntico', 'image', '2025-07-15'),
    (patient_id_var, 'certificates', 'Atestado Médico', 'Atestado para afastamento de 2 dias após cirurgia', 'pdf', '2025-07-15'),
    (patient_id_var, 'certificates', 'Declaração de Comparecimento', 'Declaração de comparecimento à consulta odontológica', 'pdf', '2025-08-01');

-- Update pactable with financial summary
  UPDATE pactable
  SET 
    financial_status = 'Em Dia'
  WHERE id = patient_id_var;

END $$;
[V0_FILE]typescriptreact:file="app/patients/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { Sidebar } from "@/components/sidebar"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import Link from "next/link"

import {
  FileImage,
  FileText,
  CheckCircle,
  Clock,
  XCircle,
  AlertTriangle,
  FileSpreadsheet,
  ArrowLeft,
  QrCode,
  MoreHorizontal,
  Printer,
  Download,
  Edit,
  User,
  Phone,
  Mail,
  MapPin,
  DollarSign,
  Plus,
  Trash2,
} from "lucide-react"

import { createClient } from "@/lib/supabase/client"

interface PatientDetails {
  id: string
  name: string
  email: string
  phone: string
  birthDate: string
  address: string
  cpf: string
  rg: string
  profession: string
  emergencyContact: {
    name: string
    phone: string
    relationship: string
  }
  medicalHistory: {
    allergies: string[]
    medications: string[]
    conditions: string[]
    notes: string
  }
  appointments: Array<{
    id: string
    date: string
    startTime: string
    endTime: string
    professional: string
    type: string
    insurance?: string
    status: "concluido" | "agendado" | "cancelado" | "faltou"
    procedures: string[]
    markers?: string[]
    observations?: string
    cost: number
  }>
  treatments: Array<{
    id: string
    name: string
    startDate: string
    endDate?: string
    status: "em_andamento" | "concluido" | "pausado"
    progress: number
    totalSessions: number
    completedSessions: number
    cost: number
  }>
  plannings: Array<{
    id: string
    title: string
    doctorName: string
    createdDate: string
    lastEditDate?: string
    comments: string
    totalValue?: number
    procedures: Array<{
      id: string
      name: string
      value?: number
      status: "planned" | "in_progress" | "completed" | "cancelled"
      sentToTreatment?: boolean
      treatmentStartDate?: string
      sessions?: number
      treatmentValue?: number
      treatmentEndDate?: string
    }>
  }>
  indications: Array<{
    id: string
    referredPatientId: string
    referredPatientName: string
    referredPatientPhone: string
    indicationDate: string
    converted: boolean
    conversionDate?: string
    valueGenerated: number
  }>
  budgets: Array<{
    id: string
    title: string
    description: string
    totalValue: number
    status: "pending" | "approved" | "rejected" | "expired"
    createdDate: string
    expiryDate?: string
    items: Array<{
      procedureName: string
      quantity: number
      unitPrice: number
      totalPrice: number
    }>
  }>
  financialTransactions: Array<{
    id: string
    description: string
    amount: number
    type: "payment" | "charge" | "refund"
    status: "pending" | "completed" | "overdue" | "cancelled"
    dueDate?: string
    paymentDate?: string
    paymentMethod?: string
  }>
  documents: Array<{
    id: string
    category: string
    title: string
    description: string
    fileType: string
    addedDate: string
  }>
  financialSummary: {
    totalSpent: number
    totalPending: number
    totalOverdue: number
    lastPayment: string
  }
}

interface Payment {
  id: string
  description: string
  amount: number
  date: string
}

export default function PatientDetailsPage({ params }: { params: { id: string } }) {
  const patientId = params.id as string

const [isDocumentModalOpen, setIsDocumentModalOpen] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [isQRModalOpen, setIsQRModalOpen] = useState(false)
  const [documentStep, setDocumentStep] = useState<"upload" | "configure">("upload")
  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null)
  const [documentTitle, setDocumentTitle] = useState("")
  const [documentDescription, setDocumentDescription] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("")
  const [newCategoryName, setNewCategoryName] = useState("")
  const [isViewDocumentModalOpen, setIsViewDocumentModalOpen] = useState(false)
  const [selectedDocument, setSelectedDocument] = useState<any>(null)
  const [editingDocument, setEditingDocument] = useState(false)
  const [isTreatmentModalOpen, setIsTreatmentModalOpen] = useState(false)
  const [selectedProcedure, setSelectedProcedure] = useState<any>(null)
  const [treatmentStartDate, setTreatmentStartDate] = useState("")
  const [treatmentSessions, setTreatmentSessions] = useState("")
  const [treatmentValue, setTreatmentValue] = useState("")
  const [showPaymentProofDialog, setShowPaymentProofDialog] = useState(false)
  const [paymentProof, setPaymentProof] = useState<File | null>(null)
  const [selectedPayment, setSelectedPayment] = useState<Payment | null>(null)

const [patient, setPatient] = useState<PatientDetails | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchPatient = async () => {
      const supabase = createClient()

// Fetch basic patient info
      const { data: patientData, error: patientError } = await supabase
        .from("pactable")
        .select("*")
        .eq("id", patientId)
        .single()

if (patientError) {
        console.error("Error fetching patient:", patientError)
        setError("Erro ao carregar dados do paciente")
        setLoading(false)
        return
      }

// Fetch emergency contact
      const { data: emergencyData } = await supabase
        .from("emergency_contacts")
        .select("*")
        .eq("patient_id", patientId)
        .single()

// Fetch medical history
      const { data: medicalData } = await supabase
        .from("medical_history")
        .select("*")
        .eq("patient_id", patientId)
        .single()

// Fetch appointments
      const { data: appointmentsData } = await supabase
        .from("patient_appointments")
        .select("*")
        .eq("patient_id", patientId)
        .order("date", { ascending: false })

// Fetch treatments
      const { data: treatmentsData } = await supabase
        .from("patient_treatments")
        .select("*")
        .eq("patient_id", patientId)
        .order("start_date", { ascending: false })

// Fetch plannings with procedures
      const { data: planningsData } = await supabase
        .from("patient_plannings")
        .select(`
          *,
          planning_procedures (*)
        `)
        .eq("patient_id", patientId)
        .order("created_date", { ascending: false })

// Fetch indications
      const { data: indicationsData } = await supabase
        .from("patient_indications")
        .select(`
          *,
          referred:pactable!patient_indications_referred_patient_id_fkey (id, name, phone)
        `)
        .eq("referrer_patient_id", patientId)

// Fetch budgets with items
      const { data: budgetsData } = await supabase
        .from("patient_budgets")
        .select(`
          *,
          budget_items (*)
        `)
        .eq("patient_id", patientId)
        .order("created_date", { ascending: false })

// Fetch financial transactions
      const { data: transactionsData } = await supabase
        .from("financial_transactions")
        .select("*")
        .eq("patient_id", patientId)
        .order("due_date", { ascending: false })

// Fetch documents
      const { data: documentsData } = await supabase
        .from("patient_documents")
        .select("*")
        .eq("patient_id", patientId)
        .order("added_date", { ascending: false })

// Calculate financial summary
      const totalSpent =
        transactionsData
          ?.filter((t) => t.type === "payment" && t.status === "completed")
          .reduce((sum, t) => sum + Number.parseFloat(t.amount), 0) || 0

const totalPending =
        transactionsData
          ?.filter((t) => t.status === "pending")
          .reduce((sum, t) => sum + Number.parseFloat(t.amount), 0) || 0

const totalOverdue =
        transactionsData
          ?.filter((t) => t.status === "overdue")
          .reduce((sum, t) => sum + Number.parseFloat(t.amount), 0) || 0

const lastPaymentTransaction = transactionsData?.find(
        (t) => t.type === "payment" && t.status === "completed" && t.payment_date,
      )

// Map data to PatientDetails interface
      setPatient({
        id: patientData.id,
        name: patientData.name,
        email: patientData.email,
        phone: patientData.phone,
        birthDate: patientData.birth_date,
        address: patientData.address,
        cpf: patientData.cpf || "N/A",
        rg: patientData.rg || "N/A",
        profession: patientData.profession || "N/A",
        emergencyContact: emergencyData
          ? {
              name: emergencyData.name,
              phone: emergencyData.phone,
              relationship: emergencyData.relationship,
            }
          : { name: "N/A", phone: "N/A", relationship: "N/A" },
        medicalHistory: medicalData
          ? {
              allergies: medicalData.allergies || [],
              medications: medicalData.medications || [],
              conditions: medicalData.conditions || [],
              notes: medicalData.notes || "",
            }
          : { allergies: [], medications: [], conditions: [], notes: "" },
        appointments:
          appointmentsData?.map((apt) => ({
            id: apt.id,
            date: apt.date,
            startTime: apt.start_time,
            endTime: apt.end_time,
            professional: apt.professional,
            type: apt.type,
            insurance: apt.insurance,
            status: apt.status,
            procedures: apt.procedures || [],
            markers: apt.markers || [],
            observations: apt.observations,
            cost: Number.parseFloat(apt.cost),
          })) || [],
        treatments:
          treatmentsData?.map((t) => ({
            id: t.id,
            name: t.name,
            startDate: t.start_date,
            endDate: t.end_date,
            status: t.status,
            progress: t.progress,
            totalSessions: t.total_sessions,
            completedSessions: t.completed_sessions,
            cost: Number.parseFloat(t.cost),
          })) || [],
        plannings:
          planningsData?.map((p) => ({
            id: p.id,
            title: p.title,
            doctorName: p.doctor_name,
            createdDate: p.created_date,
            lastEditDate: p.last_edit_date,
            comments: p.comments,
            totalValue: p.total_value ? Number.parseFloat(p.total_value) : undefined,
            procedures:
              p.planning_procedures?.map((proc: any) => ({
                id: proc.id,
                name: proc.name,
                value: proc.value ? Number.parseFloat(proc.value) : undefined,
                status: proc.status,
                sentToTreatment: proc.sent_to_treatment,
                treatmentStartDate: proc.treatment_start_date,
                sessions: proc.sessions,
                treatmentValue: proc.treatment_value ? Number.parseFloat(proc.treatment_value) : undefined,
                treatmentEndDate: proc.treatment_end_date,
              })) || [],
          })) || [],
        indications:
          indicationsData?.map((ind: any) => ({
            id: ind.id,
            referredPatientId: ind.referred_patient_id,
            referredPatientName: ind.referred?.name || "N/A",
            referredPatientPhone: ind.referred?.phone || "N/A",
            indicationDate: ind.indication_date,
            converted: ind.converted,
            conversionDate: ind.conversion_date,
            valueGenerated: Number.parseFloat(ind.value_generated),
          })) || [],
        budgets:
          budgetsData?.map((b) => ({
            id: b.id,
            title: b.title,
            description: b.description,
            totalValue: Number.parseFloat(b.total_value),
            status: b.status,
            createdDate: b.created_date,
            expiryDate: b.expiry_date,
            items:
              b.budget_items?.map((item: any) => ({
                procedureName: item.procedure_name,
                quantity: item.quantity,
                unitPrice: Number.parseFloat(item.unit_price),
                totalPrice: Number.parseFloat(item.total_price),
              })) || [],
          })) || [],
        financialTransactions:
          transactionsData?.map((t) => ({
            id: t.id,
            description: t.description,
            amount: Number.parseFloat(t.amount),
            type: t.type,
            status: t.status,
            dueDate: t.due_date,
            paymentDate: t.payment_date,
            paymentMethod: t.payment_method,
          })) || [],
        documents:
          documentsData?.map((d) => ({
            id: d.id,
            category: d.category,
            title: d.title,
            description: d.description,
            fileType: d.file_type,
            addedDate: d.added_date,
          })) || [],
        financialSummary: {
          totalSpent,
          totalPending,
          totalOverdue,
          lastPayment: lastPaymentTransaction?.payment_date || patientData.last_visit || "N/A",
        },
      })

setLoading(false)
    }

fetchPatient()
  }, [patientId])

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }

return age
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "concluido":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Concluído
          </Badge>
        )
      case "agendado":
        return (
          <Badge className="bg-blue-100 text-blue-800">
            <Clock className="w-3 h-3 mr-1" />
            Agendado
          </Badge>
        )
      case "cancelado":
        return (
          <Badge className="bg-gray-100 text-gray-800">
            <XCircle className="w-3 h-3 mr-1" />
            Cancelado
          </Badge>
        )
      case "faltou":
        return (
          <Badge className="bg-red-100 text-red-800">
            <XCircle className="w-3 h-3 mr-1" />
            Faltou
          </Badge>
        )
      case "em_andamento":
        return (
          <Badge className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Em Andamento
          </Badge>
        )
      case "pausado":
        return (
          <Badge className="bg-orange-100 text-orange-800">
            <AlertTriangle className="w-3 h-3 mr-1" />
            Pausado
          </Badge>
        )
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setSelectedFile(file)
      setDocumentStep("configure")
      console.log("File selected:", file.name)
    }
  }

const handleGenerateDocument = (templateType: string) => {
    console.log("Generating document:", templateType)
    setSelectedTemplate(templateType)
    setDocumentStep("configure")
  }

const handleDocumentClick = (document: any) => {
    setSelectedDocument(document)
    setDocumentTitle(document.title)
    setDocumentDescription(document.description)
    setIsViewDocumentModalOpen(true)
    setEditingDocument(false)
  }

const handleSaveDocument = () => {
    console.log("Saving document:", {
      file: selectedFile,
      template: selectedTemplate,
      title: documentTitle,
      description: documentDescription,
      category: selectedCategory || newCategoryName,
    })

setIsDocumentModalOpen(false)
    setDocumentStep("upload")
    setSelectedFile(null)
    setSelectedTemplate(null)
    setDocumentTitle("")
    setDocumentDescription("")
    setSelectedCategory("")
    setNewCategoryName("")
  }

const resetDocumentModal = () => {
    setDocumentStep("upload")
    setSelectedFile(null)
    setSelectedTemplate(null)
    setDocumentTitle("")
    setDocumentDescription("")
    setSelectedCategory("")
    setNewCategoryName("")
  }

const handleDownloadDocument = () => {
    console.log("Downloading document:", selectedDocument?.title)
    const link = document.createElement("a")
    link.href = selectedDocument?.preview || "#"
    link.download = selectedDocument?.title || "document"
    link.click()
  }

const handleSaveDocumentEdit = () => {
    console.log("Saving document edit:", {
      id: selectedDocument?.id,
      title: documentTitle,
      description: documentDescription,
    })
    setEditingDocument(false)
  }

const generateAccessCode = (patientId: string) => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let result = ""
    const seed = patientId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)

for (let i = 0; i < 6; i++) {
      result += chars[(seed + i) % chars.length]
    }
    return result
  }

const copyAccessCode = () => {
    const accessCode = generateAccessCode(patientId)
    navigator.clipboard.writeText(accessCode)
    console.log("Access code copied:", accessCode)
  }

const documentTemplates = [
    { id: "receituario", name: "Receituário Comum", icon: FileText },
    { id: "atestado", name: "Atestado Médico", icon: FileText },
    { id: "declaracao", name: "Declaração de Comparecimento", icon: FileText },
    { id: "laudo", name: "Laudo Médico", icon: FileText },
    { id: "encaminhamento", name: "Encaminhamento", icon: FileText },
    { id: "solicitacao_exame", name: "Solicitação de Exame", icon: FileText },
    { id: "plano_tratamento", name: "Plano de Tratamento", icon: FileText },
    { id: "orcamento", name: "Orçamento", icon: FileSpreadsheet },
  ]

const handleSendToTreatment = (planningId: string, procedureId: string) => {
    const planning = patient?.plannings.find((p) => p.id === planningId)
    const procedure = planning?.procedures.find((p) => p.id === procedureId)

if (procedure) {
      setSelectedProcedure({ ...procedure, planningId })
      setTreatmentStartDate("")
      setTreatmentSessions("")
      setTreatmentValue(procedure.value?.toString() || "")
      setIsTreatmentModalOpen(true)
    }
  }

const handleSaveTreatment = () => {
    console.log("Saving treatment:", {
      procedure: selectedProcedure,
      startDate: treatmentStartDate,
      sessions: treatmentSessions,
      value: treatmentValue,
    })

setIsTreatmentModalOpen(false)
    setSelectedProcedure(null)
  }

const getProcedureStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Concluído
          </Badge>
        )
      case "in_progress":
        return (
          <Badge className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Em Andamento
          </Badge>
        )
      case "cancelled":
        return (
          <Badge className="bg-red-100 text-red-800">
            <XCircle className="w-3 h-3 mr-1" />
            Cancelado
          </Badge>
        )
      default:
        return <Badge className="bg-blue-100 text-blue-800">Planejado</Badge>
    }
  }

const getDocumentIcon = (type: string) => {
    switch (type) {
      case "image":
        return FileImage
      case "pdf":
        return FileText
      default:
        return FileText
    }
  }

const groupedDocuments = patient?.documents.reduce(
    (acc, doc) => {
      if (!acc[doc.category]) {
        acc[doc.category] = []
      }
      acc[doc.category].push(doc)
      return acc
    },
    {} as Record<string, typeof patient.documents>,
  )

if (loading) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-medium">Carregando dados do paciente...</div>
          </div>
        </div>
      </div>
    )
  }

if (error || !patient) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-medium text-red-600">{error || "Paciente não encontrado"}</div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header */}
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-16 items-center justify-between px-6">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" asChild>
                <Link href="/patients">
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Voltar
                </Link>
              </Button>
              <Separator orientation="vertical" className="h-6" />
              <div className="flex items-center space-x-3">
                <h1 className="text-2xl font-bold">{patient.name}</h1>
                <Badge variant="outline" className="text-sm font-mono">
                  #{patient.id.substring(0, 8)}
                </Badge>
              </div>
              <Badge className="bg-green-100 text-green-800">Paciente Ativo</Badge>
            </div>

<div className="flex items-center space-x-2">
              <Button variant="outline" size="sm" onClick={() => setIsQRModalOpen(true)}>
                <QrCode className="mr-2 h-4 w-4" />
                QR Code
              </Button>

<DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" size="sm">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>
                    <Printer className="mr-2 h-4 w-4" />
                    Imprimir
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Download className="mr-2 h-4 w-4" />
                    Exportar
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Edit className="mr-2 h-4 w-4" />
                    Editar
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          {/* Informações principais */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
            {/* Perfil do paciente */}
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <User className="mr-2 h-5 w-5" />
                  Informações Pessoais
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-start space-x-4">
                  <Avatar className="h-20 w-20">
                    <AvatarImage src="/placeholder.svg" />
                    <AvatarFallback className="text-lg">
                      {patient.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")
                        .substring(0, 2)}
                    </AvatarFallback>
                  </Avatar>

<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-3">
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Nome Completo</label>
                        <p className="text-sm">{patient.name}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Idade</label>
                        <p className="text-sm">{calculateAge(patient.birthDate)} anos</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">CPF</label>
                        <p className="text-sm">{patient.cpf}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Profissão</label>
                        <p className="text-sm">{patient.profession}</p>
                      </div>
                    </div>

<div className="space-y-3">
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Telefone</label>
                        <div className="flex items-center space-x-2">
                          <Phone className="h-4 w-4 text-muted-foreground" />
                          <p className="text-sm">{patient.phone}</p>
                        </div>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Email</label>
                        <div className="flex items-center space-x-2">
                          <Mail className="h-4 w-4 text-muted-foreground" />
                          <p className="text-sm">{patient.email}</p>
                        </div>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">RG</label>
                        <p className="text-sm">{patient.rg}</p>
                      </div>
                      <div>
                        <label className="text-sm font-medium text-muted-foreground">Endereço</label>
                        <div className="flex items-start space-x-2">
                          <MapPin className="h-4 w-4 text-muted-foreground mt-0.5" />
                          <p className="text-sm">{patient.address}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Resumo financeiro */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <DollarSign className="mr-2 h-5 w-5" />
                  Resumo Financeiro
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Total Gasto</span>
                    <span className="text-sm font-medium">R$ {patient.financialSummary.totalSpent.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Pendente</span>
                    <span className="text-sm font-medium text-yellow-600">
                      R$ {patient.financialSummary.totalPending.toFixed(2)}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Em Atraso</span>
                    <span className="text-sm font-medium text-red-600">
                      R$ {patient.financialSummary.totalOverdue.toFixed(2)}
                    </span>
                  </div>
                </div>
                <Separator />
                <div>
                  <span className="text-sm text-muted-foreground">Último Pagamento</span>
                  <p className="text-sm font-medium">
                    {patient.financialSummary.lastPayment !== "N/A"
                      ? new Date(patient.financialSummary.lastPayment).toLocaleDateString("pt-BR")
                      : "N/A"}
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Contato de emergência */}
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="flex items-center">
                <AlertTriangle className="mr-2 h-5 w-5" />
                Contato de Emergência
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Nome</label>
                  <p className="text-sm">{patient.emergencyContact.name}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Telefone</label>
                  <p className="text-sm">{patient.emergencyContact.phone}</p>
                </div>
                <div>
                  <label className="text-sm font-medium text-muted-foreground">Parentesco</label>
                  <p className="text-sm">{patient.emergencyContact.relationship}</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Tabs com informações detalhadas */}
          <Tabs defaultValue="appointments" className="space-y-4">
            <TabsList className="grid w-full grid-cols-8">
              <TabsTrigger value="appointments">Consultas</TabsTrigger>
              <TabsTrigger value="treatments">Tratamentos</TabsTrigger>
              <TabsTrigger value="plannings">Planejamentos</TabsTrigger>
              <TabsTrigger value="indications">Indicações</TabsTrigger>
              <TabsTrigger value="budgets">Orçamentos</TabsTrigger>
              <TabsTrigger value="financial">Financeiro</TabsTrigger>
              <TabsTrigger value="medical">Histórico Médico</TabsTrigger>
              <TabsTrigger value="documents">Documentos</TabsTrigger>
            </TabsList>

<TabsContent value="appointments">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Histórico de Consultas</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Nova Consulta
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Data</TableHead>
                        <TableHead>Horário</TableHead>
                        <TableHead>Doutor</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Convênio</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Marcadores</TableHead>
                        <TableHead>Procedimentos</TableHead>
                        <TableHead>Observações</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {patient.appointments.map((appointment) => (
                        <TableRow key={appointment.id}>
                          <TableCell>{new Date(appointment.date).toLocaleDateString("pt-BR")}</TableCell>
                          <TableCell>
                            {appointment.startTime} até {appointment.endTime}
                          </TableCell>
                          <TableCell>{appointment.professional}</TableCell>
                          <TableCell>{appointment.type}</TableCell>
                          <TableCell>
                            <Badge variant="secondary" className="text-xs">
                              {appointment.insurance || "Particular"}
                            </Badge>
                          </TableCell>
                          <TableCell>{getStatusBadge(appointment.status)}</TableCell>
                          <TableCell>
                            <div className="space-y-1">
                              {appointment.markers?.map((marker, index) => (
                                <Badge key={index} variant="outline" className="text-xs bg-blue-50 text-blue-700">
                                  {marker}
                                </Badge>
                              ))}
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="space-y-1">
                              {appointment.procedures.map((procedure, index) => (
                                <Badge key={index} variant="outline" className="text-xs">
                                  {procedure}
                                </Badge>
                              ))}
                            </div>
                          </TableCell>
                          <TableCell className="align-top">
                            <div className="min-w-[200px] max-w-[300px]">
                              <p className="text-xs text-muted-foreground whitespace-pre-wrap break-words leading-relaxed">
                                {appointment.observations || "-"}
                              </p>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="treatments">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Tratamentos</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Novo Tratamento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {patient.treatments.map((treatment) => (
                      <Card key={treatment.id}>
                        <CardContent className="pt-6">
                          <div className="flex items-center justify-between mb-4">
                            <h3 className="font-semibold">{treatment.name}</h3>
                            {getStatusBadge(treatment.status)}
                          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                            <div>
                              <label className="text-sm font-medium text-muted-foreground">Início</label>
                              <p className="text-sm">{new Date(treatment.startDate).toLocaleDateString("pt-BR")}</p>
                            </div>
                            {treatment.endDate && (
                              <div>
                                <label className="text-sm font-medium text-muted-foreground">Fim</label>
                                <p className="text-sm">{new Date(treatment.endDate).toLocaleDateString("pt-BR")}</p>
                              </div>
                            )}
                            <div>
                              <label className="text-sm font-medium text-muted-foreground">Sessões</label>
                              <p className="text-sm">
                                {treatment.completedSessions}/{treatment.totalSessions}
                              </p>
                            </div>
                            <div>
                              <label className="text-sm font-medium text-muted-foreground">Valor</label>
                              <p className="text-sm">R$ {treatment.cost.toFixed(2)}</p>
                            </div>
                          </div>

<div className="space-y-2">
                            <div className="flex justify-between text-sm">
                              <span>Progresso</span>
                              <span>{treatment.progress}%</span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2">
                              <div
                                className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                                style={{ width: `${treatment.progress}%` }}
                              ></div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="plannings">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Planejamentos de Tratamento</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Novo Planejamento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {patient.plannings.map((planning) => (
                      <Card key={planning.id} className="border-l-4 border-l-blue-500">
                        <CardHeader>
                          <div className="flex items-start justify-between">
                            <div>
                              <CardTitle className="text-lg">{planning.title}</CardTitle>
                              <div className="flex items-center space-x-4 mt-2 text-sm text-muted-foreground">
                                <span>Dr. {planning.doctorName}</span>
                                <span>•</span>
                                <span>Criado em {new Date(planning.createdDate).toLocaleDateString("pt-BR")}</span>
                                {planning.lastEditDate && (
                                  <>
                                    <span>•</span>
                                    <span>
                                      Editado em {new Date(planning.lastEditDate).toLocaleDateString("pt-BR")}
                                    </span>
                                  </>
                                )}
                              </div>
                            </div>
                            <div className="flex items-center space-x-2">
                              {planning.totalValue && (
                                <div className="text-right">
                                  <p className="text-sm text-muted-foreground">Valor Total</p>
                                  <p className="text-lg font-semibold text-green-600">
                                    R$ {planning.totalValue.toFixed(2)}
                                  </p>
                                </div>
                              )}
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm">
                                    <MoreHorizontal className="h-4 w-4" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem>
                                    <Edit className="mr-2 h-4 w-4" />
                                    Editar
                                  </DropdownMenuItem>
                                  <DropdownMenuItem>
                                    <Printer className="mr-2 h-4 w-4" />
                                    Imprimir
                                  </DropdownMenuItem>
                                  <DropdownMenuItem className="text-red-600">
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    Deletar
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          {planning.comments && (
                            <div className="mb-6 p-4 bg-muted/50 rounded-lg">
                              <h4 className="font-medium mb-2">Comentários:</h4>
                              <p className="text-sm text-muted-foreground">{planning.comments}</p>
                            </div>
                          )}

<div className="space-y-3">
                            <h4 className="font-medium">Procedimentos Planejados:</h4>
                            {planning.procedures.map((procedure) => (
                              <div
                                key={procedure.id}
                                className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/30 transition-colors"
                              >
                                <div className="flex-1">
                                  <div className="flex items-center space-x-3">
                                    <h5 className="font-medium">{procedure.name}</h5>
                                    {getProcedureStatusBadge(procedure.status)}
                                  </div>
                                  <div className="flex items-center space-x-4 mt-2 text-sm text-muted-foreground">
                                    {procedure.value && <span>R$ {procedure.value.toFixed(2)}</span>}
                                    {procedure.sentToTreatment && procedure.treatmentStartDate && (
                                      <>
                                        <span>•</span>
                                        <span>
                                          Iniciado em{" "}
                                          {new Date(procedure.treatmentStartDate).toLocaleDateString("pt-BR")}
                                        </span>
                                      </>
                                    )}
                                    {procedure.sessions && (
                                      <>
                                        <span>•</span>
                                        <span>{procedure.sessions} sessões</span>
                                      </>
                                    )}
                                  </div>
                                </div>

<div className="flex items-center space-x-2">
                                  {procedure.status === "completed" && (
                                    <CheckCircle className="h-5 w-5 text-green-500" />
                                  )}
                                  {procedure.status === "in_progress" && <Clock className="h-5 w-5 text-yellow-500" />}
                                  {procedure.status === "cancelled" && <XCircle className="h-5 w-5 text-red-500" />}

{procedure.status === "planned" && !procedure.sentToTreatment && (
                                    <Button
                                      size="sm"
                                      variant="outline"
                                      onClick={() => handleSendToTreatment(planning.id, procedure.id)}
                                    >
                                      Enviar para Tratamento
                                    </Button>
                                  )}
                                </div>
                              </div>
                            ))}
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="indications">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Pacientes Indicados</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Registrar Indicação
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {patient.indications.map((indication) => (
                      <Card key={indication.id}>
                        <CardContent className="pt-6">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-4">
                              <Avatar>
                                <AvatarFallback>
                                  {indication.referredPatientName
                                    .split(" ")
                                    .map((n) => n[0])
                                    .join("")
                                    .substring(0, 2)}
                                </AvatarFallback>
                              </Avatar>
                              <div>
                                <div className="flex items-center space-x-2">
                                  <Button
                                    variant="link"
                                    className="p-0 h-auto font-semibold text-base"
                                    onClick={() => window.open(`/patients/${indication.referredPatientId}`, "_blank")}
                                  >
                                    {indication.referredPatientName}
                                  </Button>
                                  <Badge variant="outline" className="text-xs font-mono">
                                    #{indication.referredPatientId.substring(0, 8)}
                                  </Badge>
                                </div>
                                <p className="text-sm text-muted-foreground">
                                  Indicado em {new Date(indication.indicationDate).toLocaleDateString("pt-BR")}
                                </p>
                                <p className="text-sm text-muted-foreground">
                                  Telefone: {indication.referredPatientPhone}
                                </p>
                              </div>
                            </div>
                            <div className="text-right">
                              {indication.converted ? (
                                <>
                                  <Badge className="bg-green-100 text-green-800">
                                    <CheckCircle className="w-3 h-3 mr-1" />
                                    Convertido
                                  </Badge>
                                  <p className="text-sm text-muted-foreground mt-1">
                                    Valor gerado: R$ {indication.valueGenerated.toFixed(2)}
                                  </p>
                                </>
                              ) : (
                                <Badge className="bg-yellow-100 text-yellow-800">
                                  <Clock className="w-3 h-3 mr-1" />
                                  Pendente
                                </Badge>
                              )}
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="budgets">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Orçamentos</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Novo Orçamento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {patient.budgets.map((budget) => (
                      <Card key={budget.id}>
                        <CardHeader>
                          <div className="flex items-start justify-between">
                            <div>
                              <CardTitle className="text-lg">{budget.title}</CardTitle>
                              <p className="text-sm text-muted-foreground mt-1">{budget.description}</p>
                              <div className="flex items-center space-x-4 mt-2 text-sm text-muted-foreground">
                                <span>Criado em {new Date(budget.createdDate).toLocaleDateString("pt-BR")}</span>
                                {budget.expiryDate && (
                                  <>
                                    <span>•</span>
                                    <span>Validade: {new Date(budget.expiryDate).toLocaleDateString("pt-BR")}</span>
                                  </>
                                )}
                              </div>
                            </div>
                            <div className="text-right">
                              <p className="text-sm text-muted-foreground">Valor Total</p>
                              <p className="text-2xl font-bold text-green-600">R$ {budget.totalValue.toFixed(2)}</p>
                              <Badge
                                className={
                                  budget.status === "approved"
                                    ? "bg-green-100 text-green-800 mt-2"
                                    : budget.status === "pending"
                                      ? "bg-yellow-100 text-yellow-800 mt-2"
                                      : "bg-red-100 text-red-800 mt-2"
                                }
                              >
                                {budget.status === "approved"
                                  ? "Aprovado"
                                  : budget.status === "pending"
                                    ? "Pendente"
                                    : budget.status === "rejected"
                                      ? "Rejeitado"
                                      : "Expirado"}
                              </Badge>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent>
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>Procedimento</TableHead>
                                <TableHead className="text-right">Quantidade</TableHead>
                                <TableHead className="text-right">Valor Unitário</TableHead>
                                <TableHead className="text-right">Total</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {budget.items.map((item, index) => (
                                <TableRow key={index}>
                                  <TableCell>{item.procedureName}</TableCell>
                                  <TableCell className="text-right">{item.quantity}</TableCell>
                                  <TableCell className="text-right">R$ {item.unitPrice.toFixed(2)}</TableCell>
                                  <TableCell className="text-right font-medium">
                                    R$ {item.totalPrice.toFixed(2)}
                                  </TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="financial">
              <Card>
                <CardHeader>
                  <CardTitle>Histórico Financeiro</CardTitle>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Descrição</TableHead>
                        <TableHead>Tipo</TableHead>
                        <TableHead>Valor</TableHead>
                        <TableHead>Vencimento</TableHead>
                        <TableHead>Pagamento</TableHead>
                        <TableHead>Método</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {patient.financialTransactions.map((transaction) => (
                        <TableRow key={transaction.id}>
                          <TableCell>{transaction.description}</TableCell>
                          <TableCell>
                            <Badge variant="outline">
                              {transaction.type === "payment"
                                ? "Pagamento"
                                : transaction.type === "charge"
                                  ? "Cobrança"
                                  : "Reembolso"}
                            </Badge>
                          </TableCell>
                          <TableCell className="font-medium">R$ {transaction.amount.toFixed(2)}</TableCell>
                          <TableCell>
                            {transaction.dueDate ? new Date(transaction.dueDate).toLocaleDateString("pt-BR") : "-"}
                          </TableCell>
                          <TableCell>
                            {transaction.paymentDate
                              ? new Date(transaction.paymentDate).toLocaleDateString("pt-BR")
                              : "-"}
                          </TableCell>
                          <TableCell>{transaction.paymentMethod || "-"}</TableCell>
                          <TableCell>
                            {transaction.status === "completed" && (
                              <Badge className="bg-green-100 text-green-800">
                                <CheckCircle className="w-3 h-3 mr-1" />
                                Pago
                              </Badge>
                            )}
                            {transaction.status === "pending" && (
                              <Badge className="bg-yellow-100 text-yellow-800">
                                <Clock className="w-3 h-3 mr-1" />
                                Pendente
                              </Badge>
                            )}
                            {transaction.status === "overdue" && (
                              <Badge className="bg-red-100 text-red-800">
                                <AlertTriangle className="w-3 h-3 mr-1" />
                                Atrasado
                              </Badge>
                            )}
                            {transaction.status === "cancelled" && (
                              <Badge className="bg-gray-100 text-gray-800">
                                <XCircle className="w-3 h-3 mr-1" />
                                Cancelado
                              </Badge>
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="medical">
              <Card>
                <CardHeader>
                  <CardTitle>Histórico Médico</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <h4 className="font-medium mb-2">Alergias</h4>
                      <div className="flex flex-wrap gap-2">
                        {patient.medicalHistory.allergies.length > 0 ? (
                          patient.medicalHistory.allergies.map((allergy, index) => (
                            <Badge key={index} variant="outline" className="bg-red-50 text-red-700">
                              {allergy}
                            </Badge>
                          ))
                        ) : (
                          <p className="text-sm text-muted-foreground">Nenhuma alergia registrada</p>
                        )}
                      </div>
                    </div>

<div>
                      <h4 className="font-medium mb-2">Medicamentos em Uso</h4>
                      <div className="flex flex-wrap gap-2">
                        {patient.medicalHistory.medications.length > 0 ? (
                          patient.medicalHistory.medications.map((medication, index) => (
                            <Badge key={index} variant="outline" className="bg-blue-50 text-blue-700">
                              {medication}
                            </Badge>
                          ))
                        ) : (
                          <p className="text-sm text-muted-foreground">Nenhum medicamento registrado</p>
                        )}
                      </div>
                    </div>

<div>
                      <h4 className="font-medium mb-2">Condições Médicas</h4>
                      <div className="flex flex-wrap gap-2">
                        {patient.medicalHistory.conditions.length > 0 ? (
                          patient.medicalHistory.conditions.map((condition, index) => (
                            <Badge key={index} variant="outline" className="bg-yellow-50 text-yellow-700">
                              {condition}
                            </Badge>
                          ))
                        ) : (
                          <p className="text-sm text-muted-foreground">Nenhuma condição registrada</p>
                        )}
                      </div>
                    </div>

<div>
                      <h4 className="font-medium mb-2">Observações</h4>
                      <p className="text-sm text-muted-foreground">
                        {patient.medicalHistory.notes || "Nenhuma observação registrada"}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="documents">
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle>Documentos</CardTitle>
                    <Button size="sm">
                      <Plus className="mr-2 h-4 w-4" />
                      Adicionar Documento
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {groupedDocuments &&
                      Object.entries(groupedDocuments).map(([category, docs]) => (
                        <div key={category}>
                          <h4 className="font-medium mb-3 capitalize">
                            {category === "initial"
                              ? "Documentação Inicial"
                              : category === "orthodontics"
                                ? "Documentação Ortodôntica"
                                : category === "endodontics"
                                  ? "Documentação Endodôntica"
                                  : category === "certificates"
                                    ? "Atestados e Declarações"
                                    : category}
                          </h4>
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            {docs.map((doc) => {
                              const Icon = getDocumentIcon(doc.fileType)
                              return (
                                <Card key={doc.id} className="hover:shadow-md transition-shadow cursor-pointer">
                                  <CardContent className="p-4">
                                    <div className="flex items-start space-x-3">
                                      <Icon className="h-8 w-8 text-muted-foreground flex-shrink-0" />
                                      <div className="flex-1 min-w-0">
                                        <h5 className="font-medium text-sm truncate">{doc.title}</h5>
                                        <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
                                          {doc.description}
                                        </p>
                                        <p className="text-xs text-muted-foreground mt-2">
                                          {new Date(doc.addedDate).toLocaleDateString("pt-BR")}
                                        </p>
                                      </div>
                                    </div>
                                  </CardContent>
                                </Card>
                              )
                            })}
                          </div>
                        </div>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/11-create-pactable.sql" isMerged="true"
-- Create pactable (patients table)
CREATE TABLE IF NOT EXISTS pactable (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  code VARCHAR(50) UNIQUE NOT NULL,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255),
  phone VARCHAR(50) NOT NULL,
  birth_date DATE NOT NULL,
  cpf VARCHAR(14) NOT NULL,
  rg VARCHAR(20),
  gender VARCHAR(20),
  marital_status VARCHAR(20),
  profession VARCHAR(100),
  address TEXT,
  city VARCHAR(100),
  state VARCHAR(50),
  zip_code VARCHAR(10),
  last_visit DATE,
  next_appointment DATE,
  status VARCHAR(20) NOT NULL DEFAULT 'ativo' CHECK (status IN ('ativo', 'inativo', 'pendente')),
  financial_status VARCHAR(20) NOT NULL DEFAULT 'em_dia' CHECK (financial_status IN ('em_dia', 'pendente', 'atrasado')),
  insurance_provider VARCHAR(100),
  insurance_number VARCHAR(50),
  insurance_validity DATE,
  preferred_appointment_time VARCHAR(20),
  communication_preference VARCHAR(20),
  notes TEXT,
  consent_treatment BOOLEAN DEFAULT false,
  consent_data_usage BOOLEAN DEFAULT false,
  consent_marketing BOOLEAN DEFAULT false,
  avatar TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create index for faster searches
CREATE INDEX IF NOT EXISTS idx_pactable_code ON pactable(code);
CREATE INDEX IF NOT EXISTS idx_pactable_name ON pactable(name);
CREATE INDEX IF NOT EXISTS idx_pactable_email ON pactable(email);
CREATE INDEX IF NOT EXISTS idx_pactable_cpf ON pactable(cpf);
CREATE INDEX IF NOT EXISTS idx_pactable_status ON pactable(status);
CREATE INDEX IF NOT EXISTS idx_pactable_financial_status ON pactable(financial_status);

-- Enable Row Level Security
ALTER TABLE pactable ENABLE ROW LEVEL SECURITY;

-- Create policy to allow all operations for authenticated users
CREATE POLICY "Allow all operations for authenticated users" ON pactable
  FOR ALL
  USING (auth.role() = 'authenticated')
  WITH CHECK (auth.role() = 'authenticated');
[V0_FILE]sql:file="scripts/13-create-patient-details-tables.sql" isMerged="true"
-- Emergency Contacts Table
CREATE TABLE IF NOT EXISTS emergency_contacts (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  phone TEXT NOT NULL,
  relationship TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Medical History Table
CREATE TABLE IF NOT EXISTS medical_history (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  allergies TEXT[] DEFAULT '{}',
  medications TEXT[] DEFAULT '{}',
  conditions TEXT[] DEFAULT '{}',
  notes TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Appointments Table (consultas)
CREATE TABLE IF NOT EXISTS patient_appointments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  date DATE NOT NULL,
  start_time TIME NOT NULL,
  end_time TIME NOT NULL,
  professional TEXT NOT NULL,
  type TEXT NOT NULL,
  insurance TEXT,
  status TEXT NOT NULL CHECK (status IN ('concluido', 'agendado', 'cancelado', 'faltou')),
  procedures TEXT[] DEFAULT '{}',
  markers TEXT[] DEFAULT '{}',
  observations TEXT,
  cost DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Treatments Table (tratamentos)
CREATE TABLE IF NOT EXISTS patient_treatments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  start_date DATE NOT NULL,
  end_date DATE,
  status TEXT NOT NULL CHECK (status IN ('em_andamento', 'concluido', 'pausado')),
  progress INTEGER DEFAULT 0 CHECK (progress >= 0 AND progress <= 100),
  total_sessions INTEGER NOT NULL,
  completed_sessions INTEGER DEFAULT 0,
  cost DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Plannings Table (planejamentos)
CREATE TABLE IF NOT EXISTS patient_plannings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  doctor_name TEXT NOT NULL,
  created_date DATE NOT NULL DEFAULT CURRENT_DATE,
  last_edit_date DATE,
  comments TEXT,
  total_value DECIMAL(10, 2),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Planning Procedures Table
CREATE TABLE IF NOT EXISTS planning_procedures (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  planning_id UUID NOT NULL REFERENCES patient_plannings(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  value DECIMAL(10, 2),
  status TEXT NOT NULL CHECK (status IN ('planned', 'in_progress', 'completed', 'cancelled')),
  sent_to_treatment BOOLEAN DEFAULT FALSE,
  treatment_start_date DATE,
  sessions INTEGER,
  treatment_value DECIMAL(10, 2),
  treatment_end_date DATE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Indications Table (indicações)
CREATE TABLE IF NOT EXISTS patient_indications (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  referrer_patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  referred_patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  indication_date DATE NOT NULL DEFAULT CURRENT_DATE,
  converted BOOLEAN DEFAULT FALSE,
  conversion_date DATE,
  value_generated DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Budgets Table (orçamentos)
CREATE TABLE IF NOT EXISTS patient_budgets (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  total_value DECIMAL(10, 2) NOT NULL,
  status TEXT NOT NULL CHECK (status IN ('pending', 'approved', 'rejected', 'expired')),
  created_date DATE NOT NULL DEFAULT CURRENT_DATE,
  expiry_date DATE,
  approved_date DATE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Budget Items Table
CREATE TABLE IF NOT EXISTS budget_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  budget_id UUID NOT NULL REFERENCES patient_budgets(id) ON DELETE CASCADE,
  procedure_name TEXT NOT NULL,
  quantity INTEGER DEFAULT 1,
  unit_price DECIMAL(10, 2) NOT NULL,
  total_price DECIMAL(10, 2) NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Financial Transactions Table
CREATE TABLE IF NOT EXISTS financial_transactions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  description TEXT NOT NULL,
  amount DECIMAL(10, 2) NOT NULL,
  type TEXT NOT NULL CHECK (type IN ('payment', 'charge', 'refund')),
  status TEXT NOT NULL CHECK (status IN ('pending', 'completed', 'overdue', 'cancelled')),
  due_date DATE,
  payment_date DATE,
  payment_method TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Documents Table
CREATE TABLE IF NOT EXISTS patient_documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  category TEXT NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  file_type TEXT NOT NULL,
  file_url TEXT,
  added_date DATE NOT NULL DEFAULT CURRENT_DATE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE emergency_contacts ENABLE ROW LEVEL SECURITY;
ALTER TABLE medical_history ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_appointments ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_treatments ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_plannings ENABLE ROW LEVEL SECURITY;
ALTER TABLE planning_procedures ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_indications ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_budgets ENABLE ROW LEVEL SECURITY;
ALTER TABLE budget_items ENABLE ROW LEVEL SECURITY;
ALTER TABLE financial_transactions ENABLE ROW LEVEL SECURITY;
ALTER TABLE patient_documents ENABLE ROW LEVEL SECURITY;

-- Drop existing policies before creating new ones to avoid conflicts
DROP POLICY IF EXISTS "Allow all operations on emergency_contacts" ON emergency_contacts;
DROP POLICY IF EXISTS "Allow all operations on medical_history" ON medical_history;
DROP POLICY IF EXISTS "Allow all operations on patient_appointments" ON patient_appointments;
DROP POLICY IF EXISTS "Allow all operations on patient_treatments" ON patient_treatments;
DROP POLICY IF EXISTS "Allow all operations on patient_plannings" ON patient_plannings;
DROP POLICY IF EXISTS "Allow all operations on planning_procedures" ON planning_procedures;
DROP POLICY IF EXISTS "Allow all operations on patient_indications" ON patient_indications;
DROP POLICY IF EXISTS "Allow all operations on patient_budgets" ON patient_budgets;
DROP POLICY IF EXISTS "Allow all operations on budget_items" ON budget_items;
DROP POLICY IF EXISTS "Allow all operations on financial_transactions" ON financial_transactions;
DROP POLICY IF EXISTS "Allow all operations on patient_documents" ON patient_documents;

-- Create RLS Policies (allow all for now - adjust based on your auth requirements)
CREATE POLICY "Allow all operations on emergency_contacts" ON emergency_contacts FOR ALL USING (true);
CREATE POLICY "Allow all operations on medical_history" ON medical_history FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_appointments" ON patient_appointments FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_treatments" ON patient_treatments FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_plannings" ON patient_plannings FOR ALL USING (true);
CREATE POLICY "Allow all operations on planning_procedures" ON planning_procedures FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_indications" ON patient_indications FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_budgets" ON patient_budgets FOR ALL USING (true);
CREATE POLICY "Allow all operations on budget_items" ON budget_items FOR ALL USING (true);
CREATE POLICY "Allow all operations on financial_transactions" ON financial_transactions FOR ALL USING (true);
CREATE POLICY "Allow all operations on patient_documents" ON patient_documents FOR ALL USING (true);
[V0_FILE]typescriptreact:file="docs/webrtc-api-guide.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Info, Code, Zap, Network, Shield, CheckCircle2 } from "lucide-react"

export default function WebRTCAPIGuide() {
  return (
    <div className="container mx-auto p-6 max-w-6xl">
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-4">Guia Completo da API WebRTC</h1>
        <p className="text-lg text-muted-foreground">
          Documentação técnica sobre como funciona a API WebRTC para comunicação em tempo real
        </p>
      </div>

<Tabs defaultValue="overview" className="space-y-6">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="architecture">Arquitetura</TabsTrigger>
          <TabsTrigger value="implementation">Implementação</TabsTrigger>
          <TabsTrigger value="signaling">Sinalização</TabsTrigger>
          <TabsTrigger value="best-practices">Boas Práticas</TabsTrigger>
        </TabsList>

{/* VISÃO GERAL */}
        <TabsContent value="overview" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Info className="h-5 w-5" />O que é WebRTC?
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p>
                <strong>WebRTC (Web Real-Time Communication)</strong> é uma tecnologia de código aberto que permite
                comunicação em tempo real diretamente entre navegadores e dispositivos móveis através de APIs simples.
              </p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card className="bg-muted">
                  <CardContent className="pt-6">
                    <Zap className="h-8 w-8 mb-2 text-primary" />
                    <h3 className="font-semibold mb-2">Comunicação P2P</h3>
                    <p className="text-sm text-muted-foreground">
                      Conexão direta entre peers sem necessidade de servidor intermediário para dados
                    </p>
                  </CardContent>
                </Card>

<Card className="bg-muted">
                  <CardContent className="pt-6">
                    <Network className="h-8 w-8 mb-2 text-primary" />
                    <h3 className="font-semibold mb-2">Baixa Latência</h3>
                    <p className="text-sm text-muted-foreground">
                      Transmissão de áudio e vídeo com latência mínima, ideal para chamadas em tempo real
                    </p>
                  </CardContent>
                </Card>

<Card className="bg-muted">
                  <CardContent className="pt-6">
                    <Shield className="h-8 w-8 mb-2 text-primary" />
                    <h3 className="font-semibold mb-2">Segurança</h3>
                    <p className="text-sm text-muted-foreground">
                      Criptografia obrigatória (DTLS e SRTP) para proteger áudio, vídeo e dados
                    </p>
                  </CardContent>
                </Card>
              </div>

<Alert>
                <Info className="h-4 w-4" />
                <AlertTitle>Principais Casos de Uso</AlertTitle>
                <AlertDescription>
                  <ul className="list-disc list-inside mt-2 space-y-1">
                    <li>Videochamadas e conferências</li>
                    <li>Compartilhamento de tela</li>
                    <li>Streaming de áudio/vídeo</li>
                    <li>Transferência de arquivos P2P</li>
                    <li>Jogos multiplayer em tempo real</li>
                  </ul>
                </AlertDescription>
              </Alert>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Componentes Principais da API</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="border-l-4 border-primary pl-4">
                  <h3 className="font-semibold mb-1">
                    <Badge variant="outline" className="mr-2">
                      API
                    </Badge>
                    MediaStream (getUserMedia)
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    Captura áudio e vídeo de dispositivos locais (câmera, microfone, tela)
                  </p>
                </div>

<div className="border-l-4 border-primary pl-4">
                  <h3 className="font-semibold mb-1">
                    <Badge variant="outline" className="mr-2">
                      API
                    </Badge>
                    RTCPeerConnection
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    Gerencia a conexão peer-to-peer, incluindo codificação, transmissão e recepção de streams
                  </p>
                </div>

<div className="border-l-4 border-primary pl-4">
                  <h3 className="font-semibold mb-1">
                    <Badge variant="outline" className="mr-2">
                      API
                    </Badge>
                    RTCDataChannel
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    Permite troca de dados arbitrários entre peers (mensagens, arquivos, etc.)
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* ARQUITETURA */}
        <TabsContent value="architecture" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Arquitetura de Conexão WebRTC</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="bg-muted p-6 rounded-lg">
                <pre className="text-sm overflow-x-auto">
                  {`
┌─────────────┐                                    ┌─────────────┐
│   Peer A    │                                    │   Peer B    │
│  (Médico)   │                                    │ (Paciente)  │
└──────┬──────┘                                    └──────┬──────┘
       │                                                  │
       │  1. getUserMedia() - Captura mídia local        │
       │◄────────────────────────────────────────────────┤
       │                                                  │
       │  2. Criar RTCPeerConnection                     │
       ├──────────────────────────────────────────────►  │
       │                                                  │
       │  3. Criar Offer (SDP)                           │
       ├──────────────────────────────────────────────►  │
       │                                                  │
       │         ┌──────────────────┐                    │
       │         │ Signaling Server │                    │
       │         │  (WebSocket/API) │                    │
       │         └────────┬─────────┘                    │
       │                  │                              │
       │  4. Enviar Offer via Signaling                  │
       ├─────────────────►│─────────────────────────────►│
       │                  │                              │
       │  5. Receber Answer via Signaling                │
       │◄─────────────────┤◄─────────────────────────────┤
       │                  │                              │
       │  6. Trocar ICE Candidates                       │
       │◄────────────────►│◄────────────────────────────►│
       │                  │                              │
       │  7. Conexão P2P Estabelecida                    │
       │◄═══════════════════════════════════════════════►│
       │         (Áudio/Vídeo/Dados)                     │
                `}
                </pre>
              </div>

<div className="space-y-4">
                <h3 className="font-semibold text-lg">Etapas da Conexão</h3>

<div className="space-y-3">
                  <div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">1</Badge>
                    <div>
                      <h4 className="font-semibold">Captura de Mídia</h4>
                      <p className="text-sm text-muted-foreground">
                        Ambos os peers capturam áudio/vídeo usando <code>getUserMedia()</code>
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">2</Badge>
                    <div>
                      <h4 className="font-semibold">Criação da Peer Connection</h4>
                      <p className="text-sm text-muted-foreground">
                        Instanciar <code>RTCPeerConnection</code> com servidores STUN/TURN
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">3</Badge>
                    <div>
                      <h4 className="font-semibold">Negociação SDP</h4>
                      <p className="text-sm text-muted-foreground">
                        Peer A cria uma oferta (SDP) descrevendo suas capacidades de mídia
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">4</Badge>
                    <div>
                      <h4 className="font-semibold">Sinalização</h4>
                      <p className="text-sm text-muted-foreground">
                        Oferta é enviada ao Peer B através de um servidor de sinalização
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">5</Badge>
                    <div>
                      <h4 className="font-semibold">Resposta SDP</h4>
                      <p className="text-sm text-muted-foreground">
                        Peer B cria uma resposta (SDP) e envia de volta ao Peer A
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">6</Badge>
                    <div>
                      <h4 className="font-semibold">Troca de ICE Candidates</h4>
                      <p className="text-sm text-muted-foreground">
                        Ambos os peers trocam candidatos ICE para encontrar o melhor caminho de rede
                      </p>
                    </div>
                  </div>

<div className="flex gap-3">
                    <Badge className="h-6 w-6 rounded-full flex items-center justify-center">7</Badge>
                    <div>
                      <h4 className="font-semibold">Conexão Estabelecida</h4>
                      <p className="text-sm text-muted-foreground">
                        Conexão P2P direta é estabelecida e mídia flui entre os peers
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Servidores de Infraestrutura</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Card className="bg-muted">
                  <CardContent className="pt-6">
                    <h3 className="font-semibold mb-2">STUN Server</h3>
                    <p className="text-sm text-muted-foreground mb-3">
                      <strong>Session Traversal Utilities for NAT</strong>
                    </p>
                    <ul className="text-sm space-y-1 list-disc list-inside">
                      <li>Descobre endereço IP público do peer</li>
                      <li>Permite conexão através de NAT</li>
                      <li>Gratuito (ex: Google STUN)</li>
                    </ul>
                    <div className="mt-3 bg-background p-2 rounded text-xs font-mono">stun:stun.l.google.com:19302</div>
                  </CardContent>
                </Card>

<Card className="bg-muted">
                  <CardContent className="pt-6">
                    <h3 className="font-semibold mb-2">TURN Server</h3>
                    <p className="text-sm text-muted-foreground mb-3">
                      <strong>Traversal Using Relays around NAT</strong>
                    </p>
                    <ul className="text-sm space-y-1 list-disc list-inside">
                      <li>Relay de mídia quando P2P falha</li>
                      <li>Necessário para NAT simétrico</li>
                      <li>Requer servidor próprio ou pago</li>
                    </ul>
                    <div className="mt-3 bg-background p-2 rounded text-xs font-mono">turn:turn.example.com:3478</div>
                  </CardContent>
                </Card>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* IMPLEMENTAÇÃO */}
        <TabsContent value="implementation" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Code className="h-5 w-5" />
                Código de Implementação
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h3 className="font-semibold mb-3">1. Capturar Mídia Local</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Solicitar acesso à câmera e microfone
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    facingMode: "user"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  }
});

// Exibir vídeo local
localVideoElement.srcObject = stream;`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">2. Criar Peer Connection</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Configurar servidores ICE
const configuration = {
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" },
    { urls: "stun:stun1.l.google.com:19302" },
    {
      urls: "turn:turn.example.com:3478",
      username: "user",
      credential: "pass"
    }
  ]
};

// Criar conexão
const peerConnection = new RTCPeerConnection(configuration);

// Adicionar tracks locais
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">3. Configurar Event Listeners</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Receber stream remoto
peerConnection.ontrack = (event) => {
  remoteVideoElement.srcObject = event.streams[0];
};

// Coletar ICE candidates
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    // Enviar candidate para peer remoto via signaling
    sendToSignalingServer({
      type: "ice-candidate",
      candidate: event.candidate
    });
  }
};

// Monitorar estado da conexão
peerConnection.onconnectionstatechange = () => {
  console.log("Estado:", peerConnection.connectionState);
  // Estados: new, connecting, connected, disconnected, failed, closed
};

// Monitorar estado do ICE
peerConnection.oniceconnectionstatechange = () => {
  console.log("ICE Estado:", peerConnection.iceConnectionState);
};`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">4. Criar e Enviar Offer (Peer A)</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Criar oferta
const offer = await peerConnection.createOffer({
  offerToReceiveAudio: true,
  offerToReceiveVideo: true
});

// Definir descrição local
await peerConnection.setLocalDescription(offer);

// Enviar oferta para Peer B via signaling
sendToSignalingServer({
  type: "offer",
  sdp: offer
});`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">5. Receber Offer e Enviar Answer (Peer B)</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Receber oferta do Peer A
signalingServer.on("offer", async (offer) => {
  // Definir descrição remota
  await peerConnection.setRemoteDescription(
    new RTCSessionDescription(offer)
  );
  
  // Criar resposta
  const answer = await peerConnection.createAnswer();
  
  // Definir descrição local
  await peerConnection.setLocalDescription(answer);
  
  // Enviar resposta para Peer A
  sendToSignalingServer({
    type: "answer",
    sdp: answer
  });
});`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">6. Processar ICE Candidates</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Receber ICE candidate do peer remoto
signalingServer.on("ice-candidate", async (candidate) => {
  try {
    await peerConnection.addIceCandidate(
      new RTCIceCandidate(candidate)
    );
  } catch (error) {
    console.error("Erro ao adicionar ICE candidate:", error);
  }
});`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">7. Controlar Mídia</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Mutar/desmutar microfone
function toggleMicrophone(enabled) {
  const audioTracks = stream.getAudioTracks();
  audioTracks.forEach(track => {
    track.enabled = enabled;
  });
}

// Ligar/desligar câmera
function toggleCamera(enabled) {
  const videoTracks = stream.getVideoTracks();
  videoTracks.forEach(track => {
    track.enabled = enabled;
  });
}

// Compartilhar tela
async function shareScreen() {
  const screenStream = await navigator.mediaDevices.getDisplayMedia({
    video: { cursor: "always" },
    audio: false
  });
  
  const screenTrack = screenStream.getVideoTracks()[0];
  const sender = peerConnection.getSenders()
    .find(s => s.track?.kind === "video");
  
  if (sender) {
    await sender.replaceTrack(screenTrack);
  }
  
  // Voltar para câmera quando compartilhamento terminar
  screenTrack.onended = () => {
    const videoTrack = stream.getVideoTracks()[0];
    sender.replaceTrack(videoTrack);
  };
}`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">8. Encerrar Conexão</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`function endCall() {
  // Parar todos os tracks
  stream.getTracks().forEach(track => {
    track.stop();
  });
  
  // Fechar peer connection
  peerConnection.close();
  
  // Limpar elementos de vídeo
  localVideoElement.srcObject = null;
  remoteVideoElement.srcObject = null;
  
  // Notificar peer remoto
  sendToSignalingServer({ type: "end-call" });
}`}
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* SINALIZAÇÃO */}
        <TabsContent value="signaling" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Servidor de Sinalização</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <Alert>
                <Info className="h-4 w-4" />
                <AlertTitle>O que é Sinalização?</AlertTitle>
                <AlertDescription>
                  WebRTC não especifica como os peers devem se descobrir e trocar informações de conexão. Isso é feito
                  através de um servidor de sinalização, que pode usar WebSocket, HTTP, ou qualquer outro protocolo.
                </AlertDescription>
              </Alert>

<div>
                <h3 className="font-semibold mb-3">Exemplo: Servidor WebSocket (Node.js)</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const clients = new Map();

wss.on('connection', (ws) => {
  const clientId = generateId();
  clients.set(clientId, ws);
  
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    
    // Encaminhar mensagem para o destinatário
    const recipient = clients.get(data.to);
    if (recipient) {
      recipient.send(JSON.stringify({
        from: clientId,
        ...data
      }));
    }
  });
  
  ws.on('close', () => {
    clients.delete(clientId);
  });
  
  // Enviar ID do cliente
  ws.send(JSON.stringify({
    type: 'connected',
    clientId: clientId
  }));
});`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">Cliente WebSocket</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// client.js
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('Conectado ao servidor de sinalização');
};

ws.onmessage = async (event) => {
  const data = JSON.parse(event.data);
  
  switch (data.type) {
    case 'offer':
      await handleOffer(data.sdp);
      break;
    case 'answer':
      await handleAnswer(data.sdp);
      break;
    case 'ice-candidate':
      await handleIceCandidate(data.candidate);
      break;
  }
};

function sendToSignalingServer(message) {
  ws.send(JSON.stringify(message));
}`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">Alternativas de Sinalização</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <Card className="bg-muted">
                    <CardContent className="pt-6">
                      <h4 className="font-semibold mb-2">WebSocket</h4>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Comunicação bidirecional em tempo real</li>
                        <li>Baixa latência</li>
                        <li>Ideal para sinalização WebRTC</li>
                      </ul>
                    </CardContent>
                  </Card>

<Card className="bg-muted">
                    <CardContent className="pt-6">
                      <h4 className="font-semibold mb-2">HTTP Long Polling</h4>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Compatível com qualquer servidor</li>
                        <li>Mais simples de implementar</li>
                        <li>Maior latência que WebSocket</li>
                      </ul>
                    </CardContent>
                  </Card>

<Card className="bg-muted">
                    <CardContent className="pt-6">
                      <h4 className="font-semibold mb-2">Firebase/Firestore</h4>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Sem necessidade de servidor próprio</li>
                        <li>Sincronização em tempo real</li>
                        <li>Fácil de implementar</li>
                      </ul>
                    </CardContent>
                  </Card>

<Card className="bg-muted">
                    <CardContent className="pt-6">
                      <h4 className="font-semibold mb-2">Socket.io</h4>
                      <ul className="text-sm space-y-1 list-disc list-inside">
                        <li>Abstração sobre WebSocket</li>
                        <li>Fallback automático</li>
                        <li>Recursos extras (rooms, broadcast)</li>
                      </ul>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* BOAS PRÁTICAS */}
        <TabsContent value="best-practices" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CheckCircle2 className="h-5 w-5" />
                Boas Práticas e Otimizações
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h3 className="font-semibold mb-3">1. Tratamento de Erros</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Sempre tratar erros de getUserMedia
try {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  });
} catch (error) {
  if (error.name === 'NotAllowedError') {
    // Usuário negou permissão
    showError('Permissão de câmera/microfone negada');
  } else if (error.name === 'NotFoundError') {
    // Dispositivo não encontrado
    showError('Câmera ou microfone não encontrado');
  } else {
    showError('Erro ao acessar mídia: ' + error.message);
  }
}`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">2. Monitoramento de Qualidade</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Monitorar estatísticas da conexão
setInterval(async () => {
  const stats = await peerConnection.getStats();
  
  stats.forEach(report => {
    if (report.type === 'inbound-rtp' && report.kind === 'video') {
      const packetsLost = report.packetsLost;
      const packetsReceived = report.packetsReceived;
      const lossRate = packetsLost / (packetsLost + packetsReceived);
      
      if (lossRate > 0.1) {
        console.warn('Alta perda de pacotes:', lossRate);
        // Reduzir qualidade do vídeo
      }
    }
  });
}, 5000);`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">3. Adaptação de Qualidade</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Ajustar bitrate baseado na conexão
const sender = peerConnection.getSenders()
  .find(s => s.track?.kind === 'video');

if (sender) {
  const parameters = sender.getParameters();
  
  if (!parameters.encodings) {
    parameters.encodings = [{}];
  }
  
  // Reduzir bitrate em conexões ruins
  parameters.encodings[0].maxBitrate = 500000; // 500 kbps
  
  await sender.setParameters(parameters);
}`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">4. Reconexão Automática</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`peerConnection.oniceconnectionstatechange = () => {
  if (peerConnection.iceConnectionState === 'failed') {
    // Tentar reconectar usando ICE restart
    peerConnection.restartIce();
  }
  
  if (peerConnection.iceConnectionState === 'disconnected') {
    // Aguardar alguns segundos antes de tentar reconectar
    setTimeout(() => {
      if (peerConnection.iceConnectionState === 'disconnected') {
        peerConnection.restartIce();
      }
    }, 5000);
  }
};`}
                  </pre>
                </div>
              </div>

<div>
                <h3 className="font-semibold mb-3">5. Limpeza de Recursos</h3>
                <div className="bg-muted p-4 rounded-lg">
                  <pre className="text-sm overflow-x-auto">
                    {`// Sempre limpar recursos ao desmontar componente
useEffect(() => {
  return () => {
    // Parar todos os tracks
    if (localStream) {
      localStream.getTracks().forEach(track => track.stop());
    }
    
    // Fechar conexão
    if (peerConnection) {
      peerConnection.close();
    }
    
    // Fechar WebSocket
    if (signalingSocket) {
      signalingSocket.close();
    }
  };
}, []);`}
                  </pre>
                </div>
              </div>

<Alert>
                <Shield className="h-4 w-4" />
                <AlertTitle>Segurança</AlertTitle>
                <AlertDescription>
                  <ul className="list-disc list-inside mt-2 space-y-1">
                    <li>Sempre use HTTPS em produção (WebRTC requer contexto seguro)</li>
                    <li>Implemente autenticação no servidor de sinalização</li>
                    <li>Valide e sanitize todas as mensagens de sinalização</li>
                    <li>Use TURN com autenticação para evitar abuso</li>
                    <li>Implemente rate limiting no servidor de sinalização</li>
                  </ul>
                </AlertDescription>
              </Alert>

<Alert>
                <Zap className="h-4 w-4" />
                <AlertTitle>Performance</AlertTitle>
                <AlertDescription>
                  <ul className="list-disc list-inside mt-2 space-y-1">
                    <li>Use codecs eficientes (VP9, H.264)</li>
                    <li>Implemente simulcast para múltiplos participantes</li>
                    <li>Monitore e ajuste bitrate dinamicamente</li>
                    <li>Use SFU (Selective Forwarding Unit) para conferências grandes</li>
                    <li>Implemente cache de ICE candidates</li>
                  </ul>
                </AlertDescription>
              </Alert>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Recursos Adicionais</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="border-l-4 border-primary pl-4">
                  <h4 className="font-semibold">Documentação Oficial</h4>
                  <p className="text-sm text-muted-foreground">
                    MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
                  </p>
                </div>

<div className="border-l-4 border-primary pl-4">
                  <h4 className="font-semibold">WebRTC Samples</h4>
                  <p className="text-sm text-muted-foreground">Exemplos práticos: https://webrtc.github.io/samples/</p>
                </div>

<div className="border-l-4 border-primary pl-4">
                  <h4 className="font-semibold">Bibliotecas Úteis</h4>
                  <ul className="text-sm text-muted-foreground list-disc list-inside">
                    <li>Simple-peer: Abstração simplificada do WebRTC</li>
                    <li>PeerJS: Framework completo para WebRTC</li>
                    <li>Mediasoup: SFU para aplicações escaláveis</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/video-call-interface.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import {
  Phone,
  PhoneOff,
  Mic,
  MicOff,
  VideoIcon,
  VideoOff,
  Share,
  AlertTriangle,
  Settings,
  Volume2,
  VolumeX,
  Camera,
  Monitor,
  CreditCard as Record,
  StopCircle,
  Wifi,
  WifiOff,
  ArrowLeftRight,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Slider } from "@/components/ui/slider"
import { Progress } from "@/components/ui/progress"

interface Patient {
  id: number
  name: string
  avatar?: string
}

interface VideoCallInterfaceProps {
  patient: Patient
  isVideoActive: boolean
  setIsVideoActive: (active: boolean) => void
  isMicActive: boolean
  setIsMicActive: (active: boolean) => void
  isCameraActive: boolean
  setIsCameraActive: (active: boolean) => void
  roomId?: string // Added roomId prop for room-based connections
  onRoomCreated?: (roomId: string) => void // Callback when room is created
}

export default function VideoCallInterface({
  patient,
  isVideoActive,
  setIsVideoActive,
  isMicActive,
  setIsMicActive,
  isCameraActive,
  setIsCameraActive,
  roomId,
  onRoomCreated,
}: VideoCallInterfaceProps) {
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [volume, setVolume] = useState([80])
  const [isRecording, setIsRecording] = useState(false)
  const [recordingTime, setRecordingTime] = useState(0)
  const [connectionQuality, setConnectionQuality] = useState<"excellent" | "good" | "poor">("good")
  const [isScreenSharing, setIsScreenSharing] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [callDuration, setCallDuration] = useState(0)
  const [isSwapped, setIsSwapped] = useState(false)
  const [currentRoomId, setCurrentRoomId] = useState<string | null>(roomId || null)
  const [isHost, setIsHost] = useState(false)
  const [isConnecting, setIsConnecting] = useState(false) // Declared isConnecting
  const [webrtcError, setWebrtcError] = useState<string | null>(null) // Declared setWebrtcError and webrtcError
  const signalingIntervalRef = useRef<NodeJS.Timeout | null>(null)

const localVideoRef = useRef<HTMLVideoElement>(null)
  const remoteVideoRef = useRef<HTMLVideoElement>(null)
  const peerConnectionRef = useRef<RTCPeerConnection | null>(null)
  const localStreamRef = useRef<MediaStream | null>(null)

useEffect(() => {
    if (isVideoActive) {
      initializeWebRTC()
    } else {
      cleanupWebRTC()
    }

return () => {
      cleanupWebRTC()
    }
  }, [isVideoActive, roomId])

useEffect(() => {
    if (localStreamRef.current) {
      const audioTracks = localStreamRef.current.getAudioTracks()
      audioTracks.forEach((track) => {
        track.enabled = isMicActive
      })
    }
  }, [isMicActive])

useEffect(() => {
    if (localStreamRef.current) {
      const videoTracks = localStreamRef.current.getVideoTracks()
      videoTracks.forEach((track) => {
        track.enabled = isCameraActive
      })
    }
  }, [isCameraActive])

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isVideoActive) {
      interval = setInterval(() => {
        setCallDuration((prev) => prev + 1)
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isVideoActive])

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isRecording) {
      interval = setInterval(() => {
        setRecordingTime((prev) => prev + 1)
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isRecording])

const getConnectionIcon = () => {
    switch (connectionQuality) {
      case "excellent":
        return <Wifi className="h-4 w-4 text-green-500" />
      case "good":
        return <Wifi className="h-4 w-4 text-yellow-500" />
      case "poor":
        return <WifiOff className="h-4 w-4 text-red-500" />
    }
  }

const getConnectionText = () => {
    switch (connectionQuality) {
      case "excellent":
        return "Excelente"
      case "good":
        return "Boa"
      case "poor":
        return "Ruim"
    }
  }

const toggleRecording = () => {
    setIsRecording(!isRecording)
    if (!isRecording) {
      setRecordingTime(0)
    }
  }

const endCall = () => {
    setIsVideoActive(false)
    setCallDuration(0)
    setIsRecording(false)
    setRecordingTime(0)
    setCurrentRoomId(null)
    setIsHost(false)
  }

const generateRoomId = () => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let result = ""
    for (let i = 0; i < 8; i++) {
      result += chars[Math.floor(Math.random() * chars.length)]
    }
    return result
  }

const storeSignalingData = (roomId: string, type: string, data: any) => {
    const key = `webrtc_room_${roomId}_${type}`
    localStorage.setItem(key, JSON.stringify(data))
    console.log("[v0] Stored signaling data:", type, "for room:", roomId)
  }

const getSignalingData = (roomId: string, type: string) => {
    const key = `webrtc_room_${roomId}_${type}`
    const data = localStorage.getItem(key)
    return data ? JSON.parse(data) : null
  }

const startSignalingPolling = (roomId: string, isHost: boolean) => {
    if (signalingIntervalRef.current) {
      clearInterval(signalingIntervalRef.current)
    }

signalingIntervalRef.current = setInterval(async () => {
      if (!peerConnectionRef.current) return

if (isHost) {
        // Host checks for answer from guest
        const answer = getSignalingData(roomId, "answer")
        if (answer && peerConnectionRef.current.signalingState === "have-local-offer") {
          console.log("[v0] Host received answer")
          await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer))
        }

// Host checks for ICE candidates from guest
        const guestCandidates = getSignalingData(roomId, "guest_candidates") || []
        for (const candidate of guestCandidates) {
          if (candidate && !candidate.added) {
            await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(candidate))
            candidate.added = true
          }
        }
      } else {
        // Guest checks for offer from host
        const offer = getSignalingData(roomId, "offer")
        if (offer && peerConnectionRef.current.signalingState === "stable") {
          console.log("[v0] Guest received offer")
          await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offer))

const answer = await peerConnectionRef.current.createAnswer()
          await peerConnectionRef.current.setLocalDescription(answer)
          storeSignalingData(roomId, "answer", answer)
        }

// Guest checks for ICE candidates from host
        const hostCandidates = getSignalingData(roomId, "host_candidates") || []
        for (const candidate of hostCandidates) {
          if (candidate && !candidate.added) {
            await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(candidate))
            candidate.added = true
          }
        }
      }
    }, 1000)
  }

const initializeWebRTC = async () => {
    try {
      setIsConnecting(true)
      setWebrtcError(null)

let activeRoomId = currentRoomId
      let hostMode = isHost

if (!activeRoomId) {
        // Create new room
        activeRoomId = generateRoomId()
        setCurrentRoomId(activeRoomId)
        setIsHost(true)
        hostMode = true
        if (onRoomCreated) {
          onRoomCreated(activeRoomId)
        }
        console.log("[v0] Created new room:", activeRoomId)
      } else {
        // Joining existing room
        setIsHost(false)
        hostMode = false
        console.log("[v0] Joining room:", activeRoomId)
      }

const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: { ideal: 1280 },
          height: { ideal: 720 },
          facingMode: "user",
        },
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
          autoGainControl: true,
        },
      })

localStreamRef.current = stream

if (localVideoRef.current) {
        localVideoRef.current.srcObject = stream
      }

const configuration: RTCConfiguration = {
        iceServers: [{ urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }],
      }

const peerConnection = new RTCPeerConnection(configuration)
      peerConnectionRef.current = peerConnection

stream.getTracks().forEach((track) => {
        peerConnection.addTrack(track, stream)
      })

peerConnection.ontrack = (event) => {
        console.log("[v0] Received remote track:", event.track.kind)
        if (remoteVideoRef.current && event.streams[0]) {
          remoteVideoRef.current.srcObject = event.streams[0]
        }
      }

peerConnection.onicecandidate = (event) => {
        if (event.candidate && activeRoomId) {
          console.log("[v0] New ICE candidate")
          const candidateType = hostMode ? "host_candidates" : "guest_candidates"
          const existingCandidates = getSignalingData(activeRoomId, candidateType) || []
          existingCandidates.push(event.candidate.toJSON())
          storeSignalingData(activeRoomId, candidateType, existingCandidates)
        }
      }

peerConnection.onconnectionstatechange = () => {
        console.log("[v0] Connection state:", peerConnection.connectionState)
        switch (peerConnection.connectionState) {
          case "connected":
            setConnectionQuality("excellent")
            setIsConnecting(false)
            break
          case "connecting":
            setConnectionQuality("good")
            break
          case "disconnected":
          case "failed":
            setConnectionQuality("poor")
            setWebrtcError("Conexão perdida")
            break
        }
      }

if (hostMode && activeRoomId) {
        const offer = await peerConnection.createOffer()
        await peerConnection.setLocalDescription(offer)
        storeSignalingData(activeRoomId, "offer", offer)
        console.log("[v0] Created and stored offer for room:", activeRoomId)
      }

if (activeRoomId) {
        startSignalingPolling(activeRoomId, hostMode)
      }

setIsConnecting(false)
    } catch (error) {
      console.error("[v0] WebRTC initialization error:", error)
      setWebrtcError(error instanceof Error ? error.message : "Erro ao iniciar vídeo chamada")
      setIsConnecting(false)
    }
  }

const cleanupWebRTC = () => {
    if (signalingIntervalRef.current) {
      clearInterval(signalingIntervalRef.current)
      signalingIntervalRef.current = null
    }

if (localStreamRef.current) {
      localStreamRef.current.getTracks().forEach((track) => {
        track.stop()
      })
      localStreamRef.current = null
    }

if (peerConnectionRef.current) {
      peerConnectionRef.current.close()
      peerConnectionRef.current = null
    }

if (localVideoRef.current) {
      localVideoRef.current.srcObject = null
    }
    if (remoteVideoRef.current) {
      remoteVideoRef.current.srcObject = null
    }

if (currentRoomId && isHost) {
      localStorage.removeItem(`webrtc_room_${currentRoomId}_offer`)
      localStorage.removeItem(`webrtc_room_${currentRoomId}_answer`)
      localStorage.removeItem(`webrtc_room_${currentRoomId}_host_candidates`)
      localStorage.removeItem(`webrtc_room_${currentRoomId}_guest_candidates`)
    }
  }

const toggleScreenShare = async () => {
    if (!isScreenSharing) {
      try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({
          video: { cursor: "always" },
          audio: false,
        })

const screenTrack = screenStream.getVideoTracks()[0]

if (peerConnectionRef.current && localStreamRef.current) {
          const sender = peerConnectionRef.current.getSenders().find((s) => s.track?.kind === "video")

if (sender) {
            await sender.replaceTrack(screenTrack)
          }

screenTrack.onended = () => {
            setIsScreenSharing(false)
            const videoTrack = localStreamRef.current?.getVideoTracks()[0]
            if (sender && videoTrack) {
              sender.replaceTrack(videoTrack)
            }
          }
        }

setIsScreenSharing(true)
      } catch (error) {
        console.error("[v0] Screen sharing error:", error)
      }
    } else {
      if (peerConnectionRef.current && localStreamRef.current) {
        const videoTrack = localStreamRef.current.getVideoTracks()[0]
        const sender = peerConnectionRef.current.getSenders().find((s) => s.track?.kind === "video")

if (sender && videoTrack) {
          await sender.replaceTrack(videoTrack)
        }
      }
      setIsScreenSharing(false)
    }
  }

return (
    <div className="h-full flex flex-col overflow-hidden p-4">
      <div
        className={`flex-1 bg-muted relative overflow-hidden rounded-2xl ${isFullscreen ? "fixed inset-0 z-50 m-0 rounded-none" : ""}`}
      >
        <div className="absolute top-4 left-4 z-10">
          <Card className="bg-background/80 backdrop-blur-sm border-border">
            <CardContent className="p-2 flex items-center gap-2">
              {getConnectionIcon()}
              <span className="text-foreground text-sm">{getConnectionText()}</span>
              <Badge variant="outline" className="border-border">
                {formatTime(callDuration)}
              </Badge>
              {isConnecting && (
                <Badge variant="outline" className="border-border">
                  Conectando...
                </Badge>
              )}
              {currentRoomId && (
                <Badge variant="outline" className="border-border bg-blue-500/20">
                  Sala: {currentRoomId}
                </Badge>
              )}
            </CardContent>
          </Card>
        </div>

{isRecording && (
          <div className="absolute top-4 right-4 z-10">
            <Card className="bg-red-500/90 border-red-400">
              <CardContent className="p-2 flex items-center gap-2">
                <div className="w-2 h-2 bg-white rounded-full animate-pulse" />
                <span className="text-white text-sm font-medium">REC {formatTime(recordingTime)}</span>
              </CardContent>
            </Card>
          </div>
        )}

{webrtcError && (
          <div className="absolute top-20 left-4 right-4 z-10">
            <Card className="bg-destructive/90 border-destructive">
              <CardContent className="p-3 flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-destructive-foreground" />
                <span className="text-destructive-foreground text-sm">{webrtcError}</span>
              </CardContent>
            </Card>
          </div>
        )}

{isVideoActive ? (
          <div className="h-full relative">
            <video
              ref={remoteVideoRef}
              autoPlay
              playsInline
              className={`w-full h-full object-cover ${!isSwapped ? "block" : "hidden"}`}
            />
            <video
              ref={localVideoRef}
              autoPlay
              playsInline
              muted
              className={`w-full h-full object-cover ${isSwapped ? "block" : "hidden"}`}
            />
            {!localStreamRef.current && (
              <div className="absolute inset-0 flex items-center justify-center bg-muted">
                <div className="text-foreground text-center">
                  <Avatar className="h-32 w-32 mx-auto mb-4">
                    <AvatarImage src={patient.avatar || "/placeholder.svg"} />
                    <AvatarFallback className="text-4xl">
                      {patient.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <p className="text-xl font-medium">{patient.name}</p>
                  <p className="text-sm text-muted-foreground">Aguardando conexão...</p>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div className="h-full flex items-center justify-center">
            <div className="text-foreground text-center">
              <VideoOff className="h-16 w-16 mx-auto mb-4 opacity-50 text-muted-foreground" />
              <p className="text-xl font-medium">Vídeo desconectado</p>
              <p className="text-sm text-muted-foreground">Clique em iniciar chamada para conectar</p>
            </div>
          </div>
        )}

<div className="absolute bottom-32 right-4 w-48 h-36 bg-card rounded-lg border-2 border-border overflow-hidden">
          {isCameraActive && isVideoActive ? (
            <>
              <video
                ref={!isSwapped ? localVideoRef : remoteVideoRef}
                autoPlay
                playsInline
                muted={!isSwapped}
                className="w-full h-full object-cover"
              />
            </>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground bg-muted">
              <VideoOff className="h-8 w-8 opacity-50" />
            </div>
          )}

<div className="absolute top-2 right-2 flex gap-1">
            <Button
              variant="ghost"
              size="sm"
              className="h-6 w-6 p-0 bg-background/50 hover:bg-background/70"
              onClick={() => setIsSwapped(!isSwapped)}
              title="Trocar câmeras"
            >
              <ArrowLeftRight className="h-3 w-3" />
            </Button>
          </div>
        </div>

{isScreenSharing && (
          <div className="absolute bottom-32 left-4 z-10">
            <Badge variant="outline" className="border-border bg-blue-500/20">
              <Monitor className="h-3 w-3 mr-1" />
              Compartilhando tela
            </Badge>
          </div>
        )}

<div className="absolute bottom-0 left-0 right-0 bg-card/50 backdrop-blur-sm p-4 z-20 border-t border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Button
                variant={isMicActive ? "default" : "destructive"}
                size="lg"
                className="rounded-full w-12 h-12"
                onClick={() => setIsMicActive(!isMicActive)}
              >
                {isMicActive ? <Mic className="h-5 w-5" /> : <MicOff className="h-5 w-5" />}
              </Button>

<Button
                variant={isCameraActive ? "default" : "destructive"}
                size="lg"
                className="rounded-full w-12 h-12"
                onClick={() => setIsCameraActive(!isCameraActive)}
              >
                {isCameraActive ? <VideoIcon className="h-5 w-5" /> : <VideoOff className="h-5 w-5" />}
              </Button>

<div className="flex items-center gap-2 text-foreground">
                <Button
                  variant="ghost"
                  size="sm"
                  className="hover:bg-accent"
                  onClick={() => setVolume(volume[0] > 0 ? [0] : [80])}
                >
                  {volume[0] > 0 ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
                </Button>
                <Slider value={volume} onValueChange={setVolume} max={100} step={1} className="w-20" />
              </div>
            </div>

<div className="flex items-center gap-3">
              <Button
                variant={isVideoActive ? "destructive" : "default"}
                size="lg"
                className="rounded-full w-16 h-12 font-medium"
                onClick={() => (isVideoActive ? endCall() : setIsVideoActive(true))}
              >
                {isVideoActive ? <PhoneOff className="h-5 w-5" /> : <Phone className="h-5 w-5" />}
              </Button>
            </div>

<Button
                variant={isRecording ? "destructive" : "outline"}
                size="lg"
                className="rounded-full w-12 h-12"
                onClick={toggleRecording}
              >
                {isRecording ? <StopCircle className="h-5 w-5" /> : <Record className="h-5 w-5" />}
              </Button>

<Button
                variant="outline"
                size="lg"
                className="rounded-full w-12 h-12 bg-transparent"
                onClick={() => setShowSettings(!showSettings)}
              >
                <Settings className="h-5 w-5" />
              </Button>
            </div>
          </div>

{showSettings && (
            <Card className="mt-4 bg-card border-border">
              <CardContent className="p-4">
                <div className="grid grid-cols-3 gap-4 text-foreground">
                  <div>
                    <h4 className="text-sm font-medium mb-2">Qualidade de Vídeo</h4>
                    <div className="space-y-1">
                      <Button variant="ghost" size="sm" className="w-full justify-start">
                        HD (720p)
                      </Button>
                      <Button variant="ghost" size="sm" className="w-full justify-start">
                        SD (480p)
                      </Button>
                    </div>
                  </div>

<div>
                    <h4 className="text-sm font-medium mb-2">Dispositivos</h4>
                    <div className="space-y-1">
                      <Button variant="ghost" size="sm" className="w-full justify-start">
                        <Camera className="h-4 w-4 mr-2" />
                        Câmera Principal
                      </Button>
                      <Button variant="ghost" size="sm" className="w-full justify-start">
                        <Mic className="h-4 w-4 mr-2" />
                        Microfone Padrão
                      </Button>
                    </div>
                  </div>

<div>
                    <h4 className="text-sm font-medium mb-2">Conexão</h4>
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Qualidade:</span>
                        <Badge variant="outline" className="border-border">
                          {getConnectionText()}
                        </Badge>
                      </div>
                      <Progress value={75} className="h-2" />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/teleconsultas/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  Calendar,
  Video,
  MessageSquare,
  FileText,
  PanelLeftClose,
  PanelLeftOpen,
  Maximize2,
  QrCode,
  Copy,
  Printer,
  Download,
  FileImage,
  Mail,
  Eye,
  FolderOpen,
  Plus,
  Upload,
  ArrowLeft,
  Clock,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Sidebar } from "@/components/sidebar"
import PatientSearch from "@/components/patient-search"
import PatientProfile from "@/components/patient-profile"
import VideoCallInterface from "@/components/video-call-interface"
import MedicalChat from "@/components/medical-chat"
import MedicalNotesPanel from "@/components/medical-notes-panel"
import { TeleconsultaPopupDialog } from "@/components/teleconsulta-popup-dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AppointmentPopupDialog } from "@/components/appointment-popup-dialog"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"

interface Meeting {
  id: number
  title: string
  description: string
  date: string
  time: string
  status: "scheduled" | "in-progress" | "completed"
  participants?: string[]
}

export default function TeleconsultasPage() {
  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null)
  const [selectedMeeting, setSelectedMeeting] = useState<Meeting | null>(null)
  const [isVideoActive, setIsVideoActive] = useState(false)
  const [isMicActive, setIsMicActive] = useState(true)
  const [isCameraActive, setIsCameraActive] = useState(true)
  const [isSidebarVisible, setIsSidebarVisible] = useState(true)
  const [isPatientInfoVisible, setIsPatientInfoVisible] = useState(false)
  const [isChatVisible, setIsChatVisible] = useState(true)
  const [isPopupOpen, setIsPopupOpen] = useState(false)
  const [isAppointmentPopupOpen, setIsAppointmentPopupOpen] = useState(false)
  const [isQRModalOpen, setIsQRModalOpen] = useState(false)
  const [isViewDocumentModalOpen, setIsViewDocumentModalOpen] = useState(false)
  const [selectedDocument, setSelectedDocument] = useState<any>(null)
  const [currentRoomId, setCurrentRoomId] = useState<string | null>(null)
  const [isJoinCallModalOpen, setIsJoinCallModalOpen] = useState(false)
  const [joinRoomCode, setJoinRoomCode] = useState("")

const [isDocumentModalOpen, setIsDocumentModalOpen] = useState(false)
  const [documentStep, setDocumentStep] = useState<"upload" | "configure">("upload")
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null)
  const [documentTitle, setDocumentTitle] = useState("")
  const [documentDescription, setDocumentDescription] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("")
  const [newCategoryName, setNewCategoryName] = useState("")

const documentTemplates = [
    { id: "anamnesis", name: "Anamnese Completa", icon: FileText },
    { id: "treatment-plan", name: "Plano de Tratamento", icon: FileText },
    { id: "prescription", name: "Receita Médica", icon: FileText },
    { id: "exam-request", name: "Pedido de Exame", icon: FileText },
    { id: "medical-certificate", name: "Atestado Médico", icon: FileText },
    { id: "referral", name: "Encaminhamento", icon: FileText },
  ]

const documentCategories = [
    {
      id: "initial",
      name: "Documentação Inicial do Paciente",
      documents: [
        {
          id: "1",
          title: "Anamnese Completa",
          description: "Questionário de saúde geral e histórico médico do paciente",
          type: "pdf",
          addedDate: "2025-06-15",
          addedBy: "Dr. João Silva",
          preview: "/medical-anamnesis-form-document.jpg",
        },
        {
          id: "2",
          title: "Fotos Iniciais - Frontal",
          description: "Fotografia frontal do sorriso antes do tratamento",
          type: "image",
          addedDate: "2025-06-15",
          addedBy: "Dr. João Silva",
          preview: "/dental-frontal-smile-photo-before-treatment.jpg",
        },
      ],
    },
    {
      id: "orthodontics",
      name: "Documentação Ortodôntica",
      documents: [
        {
          id: "5",
          title: "Moldagem Superior",
          description: "Moldagem do arco superior para confecção de aparelho",
          type: "image",
          addedDate: "2025-07-01",
          addedBy: "Dra. Maria Santos",
          preview: "/upper-dental-arch-impression-mold.jpg",
        },
        {
          id: "6",
          title: "Plano de Tratamento Ortodôntico",
          description: "Planejamento detalhado do tratamento ortodôntico",
          type: "pdf",
          addedDate: "2025-07-02",
          addedBy: "Dr. João Silva",
          preview: "/orthodontic-treatment-plan-document.jpg",
        },
      ],
    },
  ]

const getDocumentIcon = (type: string) => {
    switch (type) {
      case "image":
        return FileImage
      case "pdf":
        return FileText
      default:
        return FileText
    }
  }

const handleDocumentClick = (document: any) => {
    setSelectedDocument(document)
    setIsViewDocumentModalOpen(true)
  }

const handleDownloadDocument = () => {
    if (selectedDocument) {
      console.log("[v0] Downloading document:", selectedDocument.title)
    }
  }

const handleGenerateDocument = (templateType: string) => {
    console.log("[v0] Generating document:", templateType)
    setSelectedTemplate(templateType)
    setDocumentStep("configure")
  }

const handleSaveDocument = () => {
    console.log("[v0] Saving document:", {
      file: selectedFile,
      template: selectedTemplate,
      title: documentTitle,
      description: documentDescription,
      category: selectedCategory || newCategoryName,
    })

// Reset states
    setIsDocumentModalOpen(false)
    setDocumentStep("upload")
    setSelectedFile(null)
    setSelectedTemplate(null)
    setDocumentTitle("")
    setDocumentDescription("")
    setSelectedCategory("")
    setNewCategoryName("")
  }

const generateAccessCode = (id: string) => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let result = ""
    const seed = id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)

for (let i = 0; i < 6; i++) {
      result += chars[(seed + i) % chars.length]
    }
    return result
  }

const handleRoomCreated = (roomId: string) => {
    setCurrentRoomId(roomId)
    console.log("[v0] Room created:", roomId)
  }

const handleJoinCall = () => {
    if (joinRoomCode.trim()) {
      setCurrentRoomId(joinRoomCode.trim().toUpperCase())
      setIsVideoActive(true)
      setIsJoinCallModalOpen(false)
      setJoinRoomCode("")
    }
  }

const copyAccessCode = () => {
    if (currentRoomId) {
      navigator.clipboard.writeText(currentRoomId)
    }
  }

const showDocumentsTab = selectedPatient !== null

return (
    <div className="flex h-screen bg-background">
      <Sidebar />

<div className="flex-1 flex flex-col overflow-hidden">
        <div className="flex flex-col h-full">
          <div className="border-b bg-card p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <h1 className="text-2xl font-bold text-foreground">{"Sala Digital de TeleOrientações"}</h1>
                {(selectedPatient || selectedMeeting) && (
                  <div className="flex items-center gap-2 ml-4 border-l pl-4">
                    <Button
                      variant={isSidebarVisible ? "default" : "outline"}
                      size="sm"
                      onClick={() => setIsSidebarVisible(!isSidebarVisible)}
                      title="Toggle lista"
                    >
                      {isSidebarVisible ? (
                        <PanelLeftClose className="h-4 w-4" />
                      ) : (
                        <PanelLeftOpen className="h-4 w-4" />
                      )}
                    </Button>

<Button
                      variant={isChatVisible ? "default" : "outline"}
                      size="sm"
                      onClick={() => setIsChatVisible(!isChatVisible)}
                      title="Toggle chat"
                    >
                      <MessageSquare className="h-4 w-4" />
                    </Button>

<Button
                      variant="outline"
                      size="sm"
                      onClick={() => setIsPopupOpen(true)}
                      title="Abrir chat em janela flutuante"
                    >
                      <Maximize2 className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="outline" className="text-green-600 border-green-600">
                  Sistema Online
                </Badge>
                <Button variant="outline" size="sm" onClick={() => setIsJoinCallModalOpen(true)}>
                  <Video className="h-4 w-4 mr-2" />
                  Entrar em Chamada
                </Button>
                {(selectedPatient || selectedMeeting) && currentRoomId && (
                  <Button variant="outline" size="sm" onClick={() => setIsQRModalOpen(true)}>
                    <QrCode className="h-4 w-4 mr-2" />
                    QR Code
                  </Button>
                )}
                <Button variant="outline" size="sm" onClick={() => setIsAppointmentPopupOpen(true)}>
                  <Calendar className="h-4 w-4 mr-2" />
                  Agendar Consulta
                </Button>
              </div>
            </div>
          </div>

<div className="flex-1 flex overflow-hidden">
            {isSidebarVisible && (
              <PatientSearch
                onPatientSelect={(patient) => {
                  setSelectedPatient(patient)
                  setSelectedMeeting(null)
                }}
                selectedPatient={selectedPatient}
                onMeetingSelect={(meeting) => {
                  setSelectedMeeting(meeting)
                  setSelectedPatient(null)
                }}
                selectedMeeting={selectedMeeting}
              />
            )}

<div className="flex-1 flex flex-col min-h-0">
              {selectedPatient ? (
                <>
                  {isPatientInfoVisible && (
                    <PatientProfile
                      patient={selectedPatient}
                      isSidebarVisible={isSidebarVisible}
                      onToggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
                    />
                  )}

<div className="flex-1 min-h-0">
                    <VideoCallInterface
                      patient={selectedPatient}
                      isVideoActive={isVideoActive}
                      setIsVideoActive={setIsVideoActive}
                      isMicActive={isMicActive}
                      setIsMicActive={setIsMicActive}
                      isCameraActive={isCameraActive}
                      setIsCameraActive={setIsCameraActive}
                      roomId={currentRoomId || undefined}
                      onRoomCreated={handleRoomCreated}
                    />
                  </div>
                </>
              ) : selectedMeeting ? (
                <div className="flex-1 min-h-0">
                  <div className="h-full bg-gray-900 relative flex items-center justify-center p-4">
                    <div className="absolute top-4 left-4 bg-background/90 backdrop-blur-sm rounded-lg p-4 max-w-md">
                      <h2 className="font-bold text-lg mb-1">{selectedMeeting.title}</h2>
                      <p className="text-sm text-muted-foreground mb-2">{selectedMeeting.description}</p>
                      <div className="flex items-center gap-4 text-xs text-muted-foreground">
                        <div className="flex items-center gap-1">
                          <Calendar className="h-3 w-3" />
                          {new Date(selectedMeeting.date).toLocaleDateString("pt-BR")}
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          {selectedMeeting.time}
                        </div>
                      </div>
                    </div>

<div className="text-center text-white">
                      <Video className="h-16 w-16 mx-auto mb-4 opacity-50" />
                      <p className="text-lg">Aguardando participantes...</p>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex-1 flex items-center justify-center">
                  <div className="text-center text-muted-foreground">
                    <Video className="h-16 w-16 mx-auto mb-4 opacity-50" />
                    <h2 className="text-xl font-semibold mb-2">Selecione um Paciente ou Reunião</h2>
                    <p>Escolha na lista ao lado para iniciar</p>
                  </div>
                </div>
              )}
            </div>

{isChatVisible && (selectedPatient || selectedMeeting) && !isPopupOpen && (
              <div className="w-[500px] border-l bg-card flex flex-col h-full">
                <Tabs defaultValue="chat" className="flex-1 flex flex-col min-h-0">
                  <TabsList className="w-full rounded-none border-b">
                    <TabsTrigger value="chat" className="flex-1">
                      <MessageSquare className="h-4 w-4 mr-2" />
                      Chat
                    </TabsTrigger>
                    <TabsTrigger value="notes" className="flex-1">
                      <FileText className="h-4 w-4 mr-2" />
                      Anotações
                    </TabsTrigger>
                    {showDocumentsTab && (
                      <TabsTrigger value="documents" className="flex-1">
                        <FolderOpen className="h-4 w-4 mr-2" />
                        Documentos
                      </TabsTrigger>
                    )}
                  </TabsList>

<TabsContent value="chat" className="flex-1 min-h-0 m-0">
                    {selectedPatient && <MedicalChat patient={selectedPatient} isVideoActive={isVideoActive} />}
                    {selectedMeeting && (
                      <div className="h-full flex items-center justify-center p-4 text-center text-muted-foreground">
                        <div>
                          <MessageSquare className="h-12 w-12 mx-auto mb-3 opacity-50" />
                          <p>Chat da reunião</p>
                        </div>
                      </div>
                    )}
                  </TabsContent>

<TabsContent value="notes" className="flex-1 min-h-0 m-0 overflow-hidden">
                    {selectedPatient && <MedicalNotesPanel patient={selectedPatient} />}
                    {selectedMeeting && (
                      <div className="h-full flex items-center justify-center p-4 text-center text-muted-foreground">
                        <div>
                          <FileText className="h-12 w-12 mx-auto mb-3 opacity-50" />
                          <p>Anotações da reunião</p>
                        </div>
                      </div>
                    )}
                  </TabsContent>

{showDocumentsTab && (
                    <TabsContent value="documents" className="flex-1 min-h-0 m-0 overflow-y-auto">
                      <div className="p-4 pb-2 border-b flex items-center justify-between">
                        <h3 className="font-semibold text-sm">Documentos do Paciente</h3>
                        <Button size="sm" onClick={() => setIsDocumentModalOpen(true)}>
                          <Plus className="mr-2 h-4 w-4" />
                          Adicionar Documento
                        </Button>
                      </div>

<div className="p-4 space-y-6">
                        {documentCategories.map((category) => (
                          <div key={category.id} className="space-y-3">
                            <div className="flex items-center space-x-2">
                              <h3 className="text-sm font-semibold text-foreground">{category.name}</h3>
                              <Badge variant="outline" className="text-xs">
                                {category.documents.length}
                              </Badge>
                            </div>

<div className="space-y-2">
                              {category.documents.map((document) => {
                                const IconComponent = getDocumentIcon(document.type)
                                return (
                                  <Card
                                    key={document.id}
                                    className="hover:shadow-md transition-shadow cursor-pointer"
                                    onClick={() => handleDocumentClick(document)}
                                  >
                                    <CardContent className="p-3">
                                      <div className="flex items-start space-x-3">
                                        <div className="relative flex-shrink-0">
                                          <img
                                            src={document.preview || "/placeholder.svg"}
                                            alt={document.title}
                                            className="w-16 h-16 object-cover rounded border bg-muted"
                                          />
                                          <div className="absolute -top-1 -right-1 bg-background rounded-full p-1 border">
                                            <IconComponent className="h-3 w-3 text-muted-foreground" />
                                          </div>
                                        </div>

<div className="flex-1 min-w-0 space-y-1">
                                          <h4 className="font-semibold text-sm line-clamp-1">{document.title}</h4>
                                          <p className="text-xs text-muted-foreground line-clamp-2">
                                            {document.description}
                                          </p>
                                          <div className="flex items-center justify-between pt-1">
                                            <span className="text-xs text-muted-foreground">
                                              {new Date(document.addedDate).toLocaleDateString("pt-BR")}
                                            </span>
                                            <Button
                                              variant="ghost"
                                              size="sm"
                                              className="h-6 px-2 text-xs"
                                              onClick={(e) => {
                                                e.stopPropagation()
                                                handleDocumentClick(document)
                                              }}
                                            >
                                              <Eye className="h-3 w-3 mr-1" />
                                              Ver detalhes
                                            </Button>
                                          </div>
                                        </div>
                                      </div>
                                    </CardContent>
                                  </Card>
                                )
                              })}
                            </div>

{category.id !== documentCategories[documentCategories.length - 1].id && (
                              <Separator className="my-4" />
                            )}
                          </div>
                        ))}
                      </div>
                    </TabsContent>
                  )}
                </Tabs>
              </div>
            )}
          </div>
        </div>
      </div>

{selectedPatient && (
        <TeleconsultaPopupDialog
          open={isPopupOpen}
          onOpenChange={setIsPopupOpen}
          patient={selectedPatient}
          isVideoActive={isVideoActive}
        />
      )}

{selectedDocument && (
        <Dialog open={isViewDocumentModalOpen} onOpenChange={setIsViewDocumentModalOpen}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <div className="flex items-center justify-between">
                <DialogTitle className="text-xl font-semibold">Detalhes do Documento</DialogTitle>
                <div className="flex space-x-2">
                  <Button variant="outline" size="sm" onClick={handleDownloadDocument}>
                    <Download className="mr-2 h-4 w-4" />
                    Baixar
                  </Button>
                </div>
              </div>
            </DialogHeader>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Informações do Documento</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Título</label>
                      <p className="text-sm font-semibold">{selectedDocument.title}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Descrição</label>
                      <p className="text-sm">{selectedDocument.description}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Data de Adição</label>
                      <p className="text-sm">{new Date(selectedDocument.addedDate).toLocaleDateString("pt-BR")}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Adicionado por</label>
                      <p className="text-sm">{selectedDocument.addedBy}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">Tipo</label>
                      <Badge variant="outline" className="text-xs">
                        {selectedDocument.type.toUpperCase()}
                      </Badge>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Ações</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <Button variant="outline" className="w-full bg-transparent" onClick={handleDownloadDocument}>
                      <Download className="mr-2 h-4 w-4" />
                      Baixar Documento
                    </Button>
                    <Button variant="outline" className="w-full bg-transparent">
                      <Printer className="mr-2 h-4 w-4" />
                      Imprimir
                    </Button>
                    <Button variant="outline" className="w-full bg-transparent">
                      <Mail className="mr-2 h-4 w-4" />
                      Enviar por Email
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}

{(selectedPatient || selectedMeeting) && currentRoomId && (
        <Dialog open={isQRModalOpen} onOpenChange={setIsQRModalOpen}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <div className="flex items-center justify-between">
                <DialogTitle className="text-xl font-semibold">Código da Chamada</DialogTitle>
              </div>
            </DialogHeader>

<div className="space-y-6 mt-6">
              <div className="text-center">
                <h3 className="font-semibold text-lg">
                  {selectedPatient ? selectedPatient.name : selectedMeeting?.title}
                </h3>
                <p className="text-sm text-muted-foreground">
                  Compartilhe este código para que outros possam entrar na chamada
                </p>
              </div>

<div className="space-y-3">
                <div className="text-center">
                  <p className="text-sm text-muted-foreground mb-2">Ou use o código da sala:</p>
                  <div className="flex items-center justify-center space-x-2">
                    <div className="bg-muted px-4 py-2 rounded-lg font-mono text-lg font-bold tracking-wider border">
                      {currentRoomId}
                    </div>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={copyAccessCode}
                      className="h-10 w-10 p-0 bg-transparent"
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>

<div className="bg-muted/50 p-4 rounded-lg border">
                <h4 className="font-semibold text-sm mb-2">Como usar:</h4>
                <ul className="text-xs text-muted-foreground space-y-1">
                  <li>• Escaneie o QR code com a câmera do celular</li>
                  <li>• Ou clique em "Entrar em Chamada" e digite o código</li>
                  <li>• Outras pessoas poderão entrar na mesma chamada</li>
                  <li>• O código é válido enquanto a chamada estiver ativa</li>
                </ul>
              </div>

<div className="flex space-x-2">
                <Button variant="outline" className="flex-1 bg-transparent">
                  <Printer className="mr-2 h-4 w-4" />
                  Imprimir
                </Button>
                <Button variant="outline" className="flex-1 bg-transparent">
                  <Download className="mr-2 h-4 w-4" />
                  Salvar
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}

<Dialog open={isJoinCallModalOpen} onOpenChange={setIsJoinCallModalOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="text-xl font-semibold">Entrar em uma Chamada</DialogTitle>
          </DialogHeader>

<div className="space-y-6 mt-6">
            <div className="text-center">
              <Video className="h-16 w-16 mx-auto mb-4 text-blue-500" />
              <p className="text-sm text-muted-foreground">
                Digite o código da sala para entrar em uma chamada existente
              </p>
            </div>

<div className="space-y-4">
              <div>
                <label className="text-sm font-medium mb-2 block">Código da Sala</label>
                <Input
                  placeholder="Digite o código (ex: ABC12345)"
                  value={joinRoomCode}
                  onChange={(e) => setJoinRoomCode(e.target.value.toUpperCase())}
                  className="text-center font-mono text-lg tracking-wider"
                  maxLength={8}
                />
              </div>

<Button className="w-full" onClick={handleJoinCall} disabled={!joinRoomCode.trim()}>
                <Video className="mr-2 h-4 w-4" />
                Entrar na Chamada
              </Button>
            </div>

<div className="bg-muted/50 p-4 rounded-lg border">
              <h4 className="font-semibold text-sm mb-2">Dica:</h4>
              <p className="text-xs text-muted-foreground">
                Peça ao anfitrião da chamada para compartilhar o código da sala ou escaneie o QR code fornecido.
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<Dialog
        open={isDocumentModalOpen}
        onOpenChange={(open) => {
          setIsDocumentModalOpen(open)
          if (!open) resetDocumentModal()
        }}
      >
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <div className="flex items-center justify-between">
              <DialogTitle className="text-xl font-semibold">
                {documentStep === "upload" ? "Adicionar Documento" : "Configurar Documento"}
              </DialogTitle>
              {documentStep === "configure" && (
                <Button variant="ghost" size="sm" onClick={() => setDocumentStep("upload")}>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Voltar
                </Button>
              )}
            </div>
          </DialogHeader>

{documentStep === "upload" ? (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              {/* Upload de Arquivo */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center text-lg">
                    <Upload className="mr-2 h-5 w-5" />
                    Upload de Arquivo
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors">
                    <Upload className="mx-auto h-12 w-12 text-gray-400 mb-4" />
                    <p className="text-sm text-gray-600 mb-2">
                      Arraste e solte um arquivo aqui ou clique para selecionar
                    </p>
                    <Input
                      type="file"
                      onChange={handleFileUpload}
                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                      className="hidden"
                      id="file-upload"
                    />
                    <Button variant="outline" onClick={() => document.getElementById("file-upload")?.click()}>
                      Selecionar Arquivo
                    </Button>
                  </div>

<div className="text-xs text-gray-500">
                    Formatos aceitos: PDF, DOC, DOCX, JPG, JPEG, PNG (máx. 10MB)
                  </div>
                </CardContent>
              </Card>

{/* Gerar Documentos */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center text-lg">
                    <FileText className="mr-2 h-5 w-5" />
                    Gerar Documento
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-600 mb-4">
                    Selecione um modelo de documento para gerar automaticamente:
                  </p>

<div className="space-y-2 max-h-80 overflow-y-auto">
                    {documentTemplates.map((template) => {
                      const IconComponent = template.icon
                      return (
                        <Button
                          key={template.id}
                          variant="outline"
                          className="w-full justify-start h-auto p-3 hover:bg-gray-50 bg-transparent"
                          onClick={() => handleGenerateDocument(template.id)}
                        >
                          <IconComponent className="mr-3 h-5 w-5 text-blue-500" />
                          <div className="text-left">
                            <div className="font-medium">{template.name}</div>
                          </div>
                        </Button>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>
            </div>
          ) : (
            /* Configure step content */
            <div className="space-y-6 mt-6">
              {/* Selected File/Template Info */}
              <Card>
                <CardContent className="pt-6">
                  <div className="flex items-center space-x-4">
                    {selectedFile ? (
                      <>
                        <FileImage className="h-8 w-8 text-blue-500" />
                        <div>
                          <p className="font-medium">Arquivo Selecionado</p>
                          <p className="text-sm text-muted-foreground">{selectedFile.name}</p>
                        </div>
                      </>
                    ) : (
                      <>
                        <FileText className="h-8 w-8 text-blue-500" />
                        <div>
                          <p className="font-medium">Documento a Gerar</p>
                          <p className="text-sm text-muted-foreground">
                            {documentTemplates.find((t) => t.id === selectedTemplate)?.name}
                          </p>
                        </div>
                      </>
                    )}
                  </div>
                </CardContent>
              </Card>

{/* Configuration Form */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Category Selection */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Categoria</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Selecionar categoria existente:</label>
                      <select
                        className="w-full p-2 border rounded-md"
                        value={selectedCategory}
                        onChange={(e) => {
                          setSelectedCategory(e.target.value)
                          if (e.target.value) setNewCategoryName("")
                        }}
                      >
                        <option value="">Selecione uma categoria...</option>
                        {documentCategories.map((cat) => (
                          <option key={cat.id} value={cat.id}>
                            {cat.name}
                          </option>
                        ))}
                      </select>
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Criar nova categoria:</label>
                      <Input
                        placeholder="Nome da nova categoria"
                        value={newCategoryName}
                        onChange={(e) => {
                          setNewCategoryName(e.target.value)
                          if (e.target.value) setSelectedCategory("")
                        }}
                      />
                    </div>
                  </CardContent>
                </Card>

{/* Document Details */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">Detalhes do Documento</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium">Título:</label>
                      <Input
                        placeholder="Digite o título do documento"
                        value={documentTitle}
                        onChange={(e) => setDocumentTitle(e.target.value)}
                      />
                    </div>

<div className="space-y-2">
                      <label className="text-sm font-medium">Descrição:</label>
                      <textarea
                        className="w-full p-2 border rounded-md min-h-[100px] resize-none"
                        placeholder="Digite uma descrição para o documento"
                        value={documentDescription}
                        onChange={(e) => setDocumentDescription(e.target.value)}
                      />
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Action Buttons */}
              <div className="flex justify-end space-x-2">
                <Button variant="outline" onClick={() => setDocumentStep("upload")}>
                  Cancelar
                </Button>
                <Button
                  onClick={handleSaveDocument}
                  disabled={!documentTitle || (!selectedCategory && !newCategoryName)}
                >
                  Salvar Documento
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]jpg:file="public/qr-code-for-video-call-room-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/qr-code-for-video-call-room--qK1q3UdtgujvwqIQja6YCWfedyqynJ.jpg" isMerged="true"
[V0_FILE]sql:file="scripts/15-recreate-patient-details-tables.sql" isMerged="true"
-- Drop existing tables if they exist (in correct order due to foreign keys)
DROP TABLE IF EXISTS planning_procedures CASCADE;
DROP TABLE IF EXISTS patient_plannings CASCADE;
DROP TABLE IF EXISTS budget_items CASCADE;
DROP TABLE IF EXISTS patient_budgets CASCADE;
DROP TABLE IF EXISTS patient_indications CASCADE;
DROP TABLE IF EXISTS financial_transactions CASCADE;
DROP TABLE IF EXISTS patient_documents CASCADE;
DROP TABLE IF EXISTS patient_appointments CASCADE;
DROP TABLE IF EXISTS patient_treatments CASCADE;
DROP TABLE IF EXISTS medical_history CASCADE;
DROP TABLE IF EXISTS emergency_contacts CASCADE;

-- Emergency Contacts Table
CREATE TABLE emergency_contacts (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  phone TEXT NOT NULL,
  relationship TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Medical History Table
CREATE TABLE medical_history (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  allergies TEXT[] DEFAULT '{}',
  medications TEXT[] DEFAULT '{}',
  conditions TEXT[] DEFAULT '{}',
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Appointments Table
CREATE TABLE patient_appointments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  date DATE NOT NULL,
  start_time TIME NOT NULL,
  end_time TIME NOT NULL,
  professional TEXT NOT NULL,
  type TEXT NOT NULL,
  insurance TEXT,
  status TEXT NOT NULL CHECK (status IN ('concluido', 'agendado', 'cancelado', 'faltou')),
  procedures TEXT[] DEFAULT '{}',
  markers TEXT[] DEFAULT '{}',
  observations TEXT,
  cost DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Treatments Table
CREATE TABLE patient_treatments (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  start_date DATE NOT NULL,
  end_date DATE,
  status TEXT NOT NULL CHECK (status IN ('em_andamento', 'concluido', 'pausado')),
  progress INTEGER DEFAULT 0 CHECK (progress >= 0 AND progress <= 100),
  total_sessions INTEGER NOT NULL,
  completed_sessions INTEGER DEFAULT 0,
  cost DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Plannings Table
CREATE TABLE patient_plannings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  doctor_name TEXT NOT NULL,
  created_date DATE NOT NULL DEFAULT CURRENT_DATE,
  last_edit_date DATE,
  comments TEXT,
  total_value DECIMAL(10, 2),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Planning Procedures Table
CREATE TABLE planning_procedures (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  planning_id UUID NOT NULL REFERENCES patient_plannings(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  value DECIMAL(10, 2),
  status TEXT NOT NULL CHECK (status IN ('planned', 'in_progress', 'completed', 'cancelled')),
  sent_to_treatment BOOLEAN DEFAULT FALSE,
  treatment_start_date DATE,
  sessions INTEGER,
  treatment_value DECIMAL(10, 2),
  treatment_end_date DATE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Indications Table
CREATE TABLE patient_indications (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  referrer_patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  referred_patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  indication_date DATE NOT NULL DEFAULT CURRENT_DATE,
  converted BOOLEAN DEFAULT FALSE,
  conversion_date DATE,
  value_generated DECIMAL(10, 2) DEFAULT 0,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Budgets Table
CREATE TABLE patient_budgets (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  total_value DECIMAL(10, 2) NOT NULL,
  status TEXT NOT NULL CHECK (status IN ('pending', 'approved', 'rejected', 'expired')),
  created_date DATE NOT NULL DEFAULT CURRENT_DATE,
  expiry_date DATE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Budget Items Table
CREATE TABLE budget_items (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  budget_id UUID NOT NULL REFERENCES patient_budgets(id) ON DELETE CASCADE,
  procedure_name TEXT NOT NULL,
  quantity INTEGER NOT NULL DEFAULT 1,
  unit_price DECIMAL(10, 2) NOT NULL,
  total_price DECIMAL(10, 2) NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Financial Transactions Table
CREATE TABLE financial_transactions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  description TEXT NOT NULL,
  amount DECIMAL(10, 2) NOT NULL,
  type TEXT NOT NULL CHECK (type IN ('payment', 'charge', 'refund')),
  status TEXT NOT NULL CHECK (status IN ('pending', 'completed', 'overdue', 'cancelled')),
  due_date DATE,
  payment_date DATE,
  payment_method TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Patient Documents Table
CREATE TABLE patient_documents (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  patient_id UUID NOT NULL REFERENCES pactable(id) ON DELETE CASCADE,
  category TEXT NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  file_type TEXT NOT NULL,
  file_url TEXT,
  added_date DATE NOT NULL DEFAULT CURRENT_DATE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Drop existing policies if they exist
DROP POLICY IF EXISTS "Allow all operations on emergency_contacts" ON emergency_contacts;
DROP POLICY IF EXISTS "Allow all operations on medical_history" ON medical_history;
DROP POLICY IF EXISTS "Allow all operations on patient_appointments" ON patient_appointments;
DROP POLICY IF EXISTS "Allow all operations on patient_treatments" ON patient_treatments;
DROP POLICY IF EXISTS "Allow all operations on patient_plannings" ON patient_plannings;
DROP POLICY IF EXISTS "Allow all operations on planning_procedures" ON planning_procedures;
DROP POLICY IF EXISTS "Allow all operations on patient_indications" ON patient_indications;
DROP POLICY IF EXISTS "Allow all operations on patient_budgets" ON patient_budgets;
DROP POLICY IF EXISTS "Allow all operations on budget_items" ON budget_items;
DROP POLICY IF EXISTS "Allow all operations on financial_transactions" ON financial_transactions;
DROP POLICY IF EXISTS "Allow all operations on patient_documents" ON patient_documents;

-- Create RLS Policies (Allow all operations for now - adjust based on your auth requirements)
CREATE POLICY "Allow all operations on emergency_contacts" ON emergency_contacts FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on medical_history" ON medical_history FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_appointments" ON patient_appointments FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_treatments" ON patient_treatments FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_plannings" ON patient_plannings FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on planning_procedures" ON planning_procedures FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_indications" ON patient_indications FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_budgets" ON patient_budgets FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on budget_items" ON budget_items FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on financial_transactions" ON financial_transactions FOR ALL USING (true) WITH CHECK (true);
CREATE POLICY "Allow all operations on patient_documents" ON patient_documents FOR ALL USING (true) WITH CHECK (true);

-- Create indexes for better query performance
CREATE INDEX idx_emergency_contacts_patient ON emergency_contacts(patient_id);
CREATE INDEX idx_medical_history_patient ON medical_history(patient_id);
CREATE INDEX idx_appointments_patient ON patient_appointments(patient_id);
CREATE INDEX idx_appointments_date ON patient_appointments(date);
CREATE INDEX idx_treatments_patient ON patient_treatments(patient_id);
CREATE INDEX idx_plannings_patient ON patient_plannings(patient_id);
CREATE INDEX idx_planning_procedures_planning ON planning_procedures(planning_id);
CREATE INDEX idx_indications_referrer ON patient_indications(referrer_patient_id);
CREATE INDEX idx_indications_referred ON patient_indications(referred_patient_id);
CREATE INDEX idx_budgets_patient ON patient_budgets(patient_id);
CREATE INDEX idx_budget_items_budget ON budget_items(budget_id);
CREATE INDEX idx_transactions_patient ON financial_transactions(patient_id);
CREATE INDEX idx_documents_patient ON patient_documents(patient_id);
[V0_FILE]sql:file="scripts/16-seed-patient-details-comprehensive.sql" isMerged="true"
-- This script seeds comprehensive patient detail data for all patients in pactable
-- It creates realistic medical records, appointments, treatments, and financial data

-- Get the first 3 patient IDs for seeding
DO $$
DECLARE
  patient1_id UUID;
  patient2_id UUID;
  patient3_id UUID;
  planning1_id UUID;
  planning2_id UUID;
  budget1_id UUID;
BEGIN
  -- Get patient IDs
  SELECT id INTO patient1_id FROM pactable ORDER BY created_at LIMIT 1;
  SELECT id INTO patient2_id FROM pactable ORDER BY created_at LIMIT 1 OFFSET 1;
  SELECT id INTO patient3_id FROM pactable ORDER BY created_at LIMIT 1 OFFSET 2;

-- Emergency Contacts
  INSERT INTO emergency_contacts (patient_id, name, phone, relationship) VALUES
  (patient1_id, 'Maria Silva Santos', '(11) 98765-4321', 'Mãe'),
  (patient2_id, 'Carlos Oliveira', '(11) 97654-3210', 'Marido'),
  (patient3_id, 'Ana Paula Costa', '(11) 96543-2109', 'Irmã');

-- Medical History
  INSERT INTO medical_history (patient_id, allergies, medications, conditions, notes) VALUES
  (patient1_id, 
   ARRAY['Penicilina', 'Látex'], 
   ARRAY['Losartana 50mg', 'Metformina 850mg'], 
   ARRAY['Hipertensão', 'Diabetes tipo 2'],
   'Paciente com histórico de hipertensão controlada. Diabetes diagnosticada há 5 anos.'),
  (patient2_id, 
   ARRAY['Dipirona'], 
   ARRAY['Omeprazol 20mg'], 
   ARRAY['Gastrite'],
   'Paciente relata episódios de gastrite. Evitar anti-inflamatórios.'),
  (patient3_id, 
   ARRAY[], 
   ARRAY[], 
   ARRAY[],
   'Paciente saudável, sem comorbidades conhecidas.');

-- Patient Appointments (últimos 6 meses)
  INSERT INTO patient_appointments (patient_id, date, start_time, end_time, professional, type, insurance, status, procedures, markers, observations, cost) VALUES
  -- Patient 1 appointments
  (patient1_id, '2025-01-15', '09:00', '10:00', 'Dr. João Silva', 'Consulta', 'Unimed', 'concluido', 
   ARRAY['Limpeza', 'Avaliação'], ARRAY['Primeira consulta'], 'Paciente apresentou boa higiene bucal.', 250.00),
  (patient1_id, '2025-02-20', '14:00', '15:00', 'Dr. João Silva', 'Retorno', 'Unimed', 'concluido', 
   ARRAY['Restauração'], ARRAY['Urgência'], 'Restauração no dente 16 concluída.', 450.00),
  (patient1_id, '2025-03-10', '10:00', '11:00', 'Dra. Maria Santos', 'Consulta', 'Unimed', 'agendado', 
   ARRAY['Clareamento'], ARRAY[], 'Consulta para avaliação de clareamento dental.', 0.00),
  
  -- Patient 2 appointments
  (patient2_id, '2025-01-08', '15:00', '16:00', 'Dr. Pedro Costa', 'Consulta', 'Bradesco Saúde', 'concluido', 
   ARRAY['Avaliação ortodôntica'], ARRAY['Primeira consulta'], 'Indicado tratamento ortodôntico.', 300.00),
  (patient2_id, '2025-02-12', '09:00', '10:00', 'Dr. Pedro Costa', 'Retorno', 'Bradesco Saúde', 'concluido', 
   ARRAY['Instalação de aparelho'], ARRAY[], 'Aparelho ortodôntico instalado com sucesso.', 1500.00),
  (patient2_id, '2025-03-15', '11:00', '11:30', 'Dr. Pedro Costa', 'Manutenção', 'Bradesco Saúde', 'faltou', 
   ARRAY['Ajuste de aparelho'], ARRAY['Faltou'], 'Paciente não compareceu.', 0.00),
  
  -- Patient 3 appointments
  (patient3_id, '2025-02-05', '13:00', '14:00', 'Dra. Ana Lima', 'Consulta', 'Particular', 'concluido', 
   ARRAY['Extração'], ARRAY['Urgência'], 'Extração do dente 38 realizada.', 350.00),
  (patient3_id, '2025-03-20', '10:00', '11:00', 'Dra. Ana Lima', 'Retorno', 'Particular', 'agendado', 
   ARRAY['Avaliação pós-operatória'], ARRAY[], 'Retorno para avaliação da cicatrização.', 0.00);

-- Patient Treatments
  INSERT INTO patient_treatments (patient_id, name, start_date, end_date, status, progress, total_sessions, completed_sessions, cost) VALUES
  (patient1_id, 'Tratamento de Canal - Dente 16', '2025-02-01', '2025-02-28', 'concluido', 100, 3, 3, 1200.00),
  (patient1_id, 'Clareamento Dental', '2025-03-15', NULL, 'em_andamento', 50, 4, 2, 800.00),
  (patient2_id, 'Tratamento Ortodôntico', '2025-02-12', NULL, 'em_andamento', 15, 24, 4, 4500.00),
  (patient3_id, 'Implante Dentário - Dente 46', '2025-03-01', NULL, 'em_andamento', 30, 5, 2, 3500.00);

-- Patient Plannings
  INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, last_edit_date, comments, total_value) VALUES
  (patient1_id, 'Plano de Tratamento Completo 2025', 'Dr. João Silva', '2025-01-15', '2025-02-10', 
   'Paciente necessita de tratamento restaurador e estético. Priorizar restaurações e depois clareamento.', 3500.00)
  RETURNING id INTO planning1_id;

INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, comments, total_value) VALUES
  (patient2_id, 'Planejamento Ortodôntico', 'Dr. Pedro Costa', '2025-01-08', 
   'Tratamento ortodôntico com duração estimada de 24 meses. Aparelho fixo metálico.', 5000.00)
  RETURNING id INTO planning2_id;

-- Planning Procedures
  INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, treatment_start_date, sessions, treatment_value) VALUES
  (planning1_id, 'Tratamento de Canal - Dente 16', 1200.00, 'completed', TRUE, '2025-02-01', 3, 1200.00),
  (planning1_id, 'Restauração - Dente 15', 450.00, 'completed', TRUE, '2025-02-20', 1, 450.00),
  (planning1_id, 'Clareamento Dental', 800.00, 'in_progress', TRUE, '2025-03-15', 4, 800.00),
  (planning1_id, 'Limpeza Profissional', 250.00, 'planned', FALSE, NULL, NULL, NULL),
  (planning1_id, 'Aplicação de Flúor', 150.00, 'planned', FALSE, NULL, NULL, NULL),
  
  (planning2_id, 'Documentação Ortodôntica', 500.00, 'completed', FALSE, NULL, NULL, NULL),
  (planning2_id, 'Instalação de Aparelho Fixo', 1500.00, 'completed', TRUE, '2025-02-12', 1, 1500.00),
  (planning2_id, 'Manutenções Mensais (24x)', 3000.00, 'in_progress', TRUE, '2025-02-12', 24, 3000.00);

-- Patient Indications (Patient 1 indicou Patient 3)
  INSERT INTO patient_indications (referrer_patient_id, referred_patient_id, indication_date, converted, conversion_date, value_generated) VALUES
  (patient1_id, patient3_id, '2025-01-20', TRUE, '2025-02-05', 3500.00);

-- Patient Budgets
  INSERT INTO patient_budgets (patient_id, title, description, total_value, status, created_date, expiry_date) VALUES
  (patient1_id, 'Orçamento - Tratamento Completo', 'Orçamento para tratamento restaurador e estético completo', 3500.00, 'approved', '2025-01-15', '2025-04-15')
  RETURNING id INTO budget1_id;

INSERT INTO patient_budgets (patient_id, title, description, total_value, status, created_date, expiry_date) VALUES
  (patient3_id, 'Orçamento - Implante Dentário', 'Orçamento para implante unitário com coroa em porcelana', 4200.00, 'pending', '2025-02-25', '2025-05-25');

-- Budget Items
  INSERT INTO budget_items (budget_id, procedure_name, quantity, unit_price, total_price) VALUES
  (budget1_id, 'Tratamento de Canal', 1, 1200.00, 1200.00),
  (budget1_id, 'Restauração em Resina', 3, 450.00, 1350.00),
  (budget1_id, 'Clareamento Dental', 1, 800.00, 800.00),
  (budget1_id, 'Limpeza Profissional', 1, 250.00, 250.00);

-- Financial Transactions
  INSERT INTO financial_transactions (patient_id, description, amount, type, status, due_date, payment_date, payment_method) VALUES
  -- Patient 1 transactions
  (patient1_id, 'Consulta Inicial + Limpeza', 250.00, 'charge', 'completed', '2025-01-15', '2025-01-15', 'Cartão de Crédito'),
  (patient1_id, 'Tratamento de Canal - Parcela 1/3', 400.00, 'charge', 'completed', '2025-02-01', '2025-02-01', 'Débito'),
  (patient1_id, 'Tratamento de Canal - Parcela 2/3', 400.00, 'charge', 'completed', '2025-02-15', '2025-02-15', 'Débito'),
  (patient1_id, 'Tratamento de Canal - Parcela 3/3', 400.00, 'charge', 'completed', '2025-03-01', '2025-03-01', 'Débito'),
  (patient1_id, 'Restauração Dente 15', 450.00, 'charge', 'completed', '2025-02-20', '2025-02-20', 'PIX'),
  (patient1_id, 'Clareamento - Parcela 1/2', 400.00, 'charge', 'completed', '2025-03-15', '2025-03-15', 'Cartão de Crédito'),
  (patient1_id, 'Clareamento - Parcela 2/2', 400.00, 'charge', 'pending', '2025-04-15', NULL, NULL),
  
  -- Patient 2 transactions
  (patient2_id, 'Consulta Ortodôntica', 300.00, 'charge', 'completed', '2025-01-08', '2025-01-08', 'Cartão de Crédito'),
  (patient2_id, 'Documentação Ortodôntica', 500.00, 'charge', 'completed', '2025-01-20', '2025-01-22', 'PIX'),
  (patient2_id, 'Instalação de Aparelho', 1500.00, 'charge', 'completed', '2025-02-12', '2025-02-12', 'Cartão de Crédito'),
  (patient2_id, 'Manutenção Mensal - Março', 125.00, 'charge', 'overdue', '2025-03-12', NULL, NULL),
  (patient2_id, 'Manutenção Mensal - Abril', 125.00, 'charge', 'pending', '2025-04-12', NULL, NULL),
  
  -- Patient 3 transactions
  (patient3_id, 'Extração Dente 38', 350.00, 'charge', 'completed', '2025-02-05', '2025-02-05', 'Dinheiro'),
  (patient3_id, 'Implante - Entrada', 1000.00, 'charge', 'completed', '2025-03-01', '2025-03-01', 'PIX'),
  (patient3_id, 'Implante - Parcela 1/5', 500.00, 'charge', 'pending', '2025-04-01', NULL, NULL);

-- Patient Documents
  INSERT INTO patient_documents (patient_id, category, title, description, file_type, added_date) VALUES
  -- Patient 1 documents
  (patient1_id, 'initial', 'Ficha de Anamnese', 'Ficha de anamnese preenchida na primeira consulta', 'pdf', '2025-01-15'),
  (patient1_id, 'initial', 'Termo de Consentimento', 'Termo de consentimento para tratamento odontológico', 'pdf', '2025-01-15'),
  (patient1_id, 'initial', 'Radiografia Panorâmica', 'Radiografia panorâmica inicial', 'image', '2025-01-15'),
  (patient1_id, 'endodontics', 'Radiografia Periapical - Dente 16', 'Radiografia antes do tratamento de canal', 'image', '2025-02-01'),
  (patient1_id, 'certificates', 'Atestado Odontológico', 'Atestado para justificar ausência no trabalho', 'pdf', '2025-02-20'),
  
  -- Patient 2 documents
  (patient2_id, 'initial', 'Ficha de Anamnese', 'Ficha de anamnese ortodôntica', 'pdf', '2025-01-08'),
  (patient2_id, 'orthodontics', 'Documentação Ortodôntica Completa', 'Fotos, radiografias e modelos', 'pdf', '2025-01-20'),
  (patient2_id, 'orthodontics', 'Plano de Tratamento Ortodôntico', 'Planejamento detalhado do tratamento', 'pdf', '2025-01-25'),
  (patient2_id, 'orthodontics', 'Termo de Consentimento Ortodôntico', 'Termo específico para tratamento ortodôntico', 'pdf', '2025-02-12'),
  
  -- Patient 3 documents
  (patient3_id, 'initial', 'Ficha de Anamnese', 'Ficha de anamnese inicial', 'pdf', '2025-02-05'),
  (patient3_id, 'initial', 'Radiografia Panorâmica', 'Radiografia panorâmica pré-extração', 'image', '2025-02-05'),
  (patient3_id, 'certificates', 'Receita Médica', 'Receita de antibiótico e analgésico pós-extração', 'pdf', '2025-02-05'),
  (patient3_id, 'initial', 'Tomografia Computadorizada', 'Tomografia para planejamento de implante', 'image', '2025-02-25');

END $$;
[V0_FILE]sql:file="scripts/17-seed-all-patients-data.sql" isMerged="true"
-- This script seeds comprehensive data for ALL patients in pactable
-- Including José Marcus and other patients that were missing data

DO $$
DECLARE
  patient_keith_id UUID;
  patient_marcia_id UUID;
  patient_leonardo_id UUID;
  patient_yung_id UUID;
  patient_michele_id UUID;
  patient_jose_id UUID;
  planning_jose_id UUID;
  budget_jose_id UUID;
BEGIN
  -- Get all patient IDs by name
  SELECT id INTO patient_keith_id FROM pactable WHERE name = 'Keith dos Santos';
  SELECT id INTO patient_marcia_id FROM pactable WHERE name = 'Marcia Claudia';
  SELECT id INTO patient_leonardo_id FROM pactable WHERE name = 'Leonardo Guedes';
  SELECT id INTO patient_yung_id FROM pactable WHERE name = 'Yung Kun Cho';
  SELECT id INTO patient_michele_id FROM pactable WHERE name = 'Michele Ana Bomfim';
  SELECT id INTO patient_jose_id FROM pactable WHERE name = 'José Marcus';

-- Adding emergency contacts for remaining patients
  INSERT INTO emergency_contacts (patient_id, name, phone, relationship) VALUES
  (patient_yung_id, 'Li Wei Cho', '(11) 94321-8765', 'Esposa'),
  (patient_michele_id, 'Roberto Bomfim', '(11) 93210-7654', 'Pai'),
  (patient_jose_id, 'Helena Marcus', '(11) 92109-6543', 'Esposa')
  ON CONFLICT DO NOTHING;

-- Adding medical history for remaining patients
  INSERT INTO medical_history (patient_id, allergies, medications, conditions, notes) VALUES
  (patient_yung_id, 
   ARRAY['Ibuprofeno'], 
   ARRAY['Sinvastatina 20mg'], 
   ARRAY['Colesterol alto'],
   'Paciente com histórico de colesterol elevado. Controle com estatina.'),
  (patient_michele_id, 
   ARRAY[], 
   ARRAY['Anticoncepcional'], 
   ARRAY[],
   'Paciente jovem, saudável. Sem comorbidades.'),
  (patient_jose_id, 
   ARRAY['Aspirina'], 
   ARRAY['Enalapril 10mg', 'AAS 100mg'], 
   ARRAY['Hipertensão', 'Histórico de AVC'],
   'Paciente com histórico de AVC há 3 anos. Hipertensão controlada com medicação. Cuidado com procedimentos invasivos.')
  ON CONFLICT DO NOTHING;

-- Adding appointments for José Marcus and other patients
  INSERT INTO patient_appointments (patient_id, date, start_time, end_time, professional, type, insurance, status, procedures, markers, observations, cost) VALUES
  -- José Marcus appointments (PAC006)
  (patient_jose_id, '2024-12-10', '09:00', '10:00', 'Dr. Carlos Mendes', 'Consulta', 'Amil', 'concluido', 
   ARRAY['Avaliação geral', 'Limpeza'], ARRAY['Retorno'], 'Paciente retornou após 6 meses. Boa higiene bucal.', 280.00),
  (patient_jose_id, '2025-01-20', '14:00', '15:30', 'Dr. Carlos Mendes', 'Tratamento', 'Amil', 'concluido', 
   ARRAY['Extração dente 48'], ARRAY['Cirurgia'], 'Extração do siso inferior direito. Paciente tolerou bem o procedimento.', 450.00),
  (patient_jose_id, '2025-02-15', '10:00', '11:00', 'Dr. Carlos Mendes', 'Retorno', 'Amil', 'concluido', 
   ARRAY['Avaliação pós-operatória'], ARRAY[], 'Cicatrização adequada. Sem complicações.', 0.00),
  (patient_jose_id, '2025-03-05', '15:00', '16:00', 'Dra. Patricia Alves', 'Consulta', 'Amil', 'concluido', 
   ARRAY['Avaliação protética'], ARRAY['Planejamento'], 'Avaliação para prótese parcial removível superior.', 200.00),
  (patient_jose_id, '2025-04-10', '09:00', '10:30', 'Dra. Patricia Alves', 'Tratamento', 'Amil', 'agendado', 
   ARRAY['Moldagem para prótese'], ARRAY[], 'Moldagem inicial para confecção de prótese parcial.', 600.00),
  (patient_jose_id, '2025-05-15', '14:00', '15:00', 'Dra. Patricia Alves', 'Instalação', 'Amil', 'agendado', 
   ARRAY['Instalação de prótese'], ARRAY[], 'Instalação e ajuste da prótese parcial removível.', 0.00),
  
  -- Yung Kun Cho appointments (PAC004)
  (patient_yung_id, '2025-01-12', '11:00', '12:00', 'Dr. Roberto Lima', 'Consulta', 'SulAmérica', 'concluido', 
   ARRAY['Avaliação', 'Radiografia'], ARRAY['Primeira consulta'], 'Paciente com necessidade de tratamento periodontal.', 320.00),
  (patient_yung_id, '2025-02-08', '09:00', '10:30', 'Dr. Roberto Lima', 'Tratamento', 'SulAmérica', 'concluido', 
   ARRAY['Raspagem periodontal'], ARRAY['Periodontia'], 'Raspagem e alisamento radicular realizado.', 850.00),
  (patient_yung_id, '2025-03-18', '14:00', '15:00', 'Dr. Roberto Lima', 'Retorno', 'SulAmérica', 'agendado', 
   ARRAY['Reavaliação periodontal'], ARRAY[], 'Retorno para avaliar resposta ao tratamento.', 0.00),
  
  -- Michele Ana Bomfim appointments (PAC005)
  (patient_michele_id, '2025-01-25', '10:00', '11:00', 'Dra. Juliana Ferreira', 'Consulta', 'Particular', 'concluido', 
   ARRAY['Avaliação estética'], ARRAY['Estética'], 'Paciente interessada em lentes de contato dental.', 250.00),
  (patient_michele_id, '2025-02-22', '15:00', '16:00', 'Dra. Juliana Ferreira', 'Planejamento', 'Particular', 'concluido', 
   ARRAY['Mockup digital'], ARRAY['Planejamento'], 'Planejamento digital smile design realizado.', 400.00),
  (patient_michele_id, '2025-03-28', '09:00', '12:00', 'Dra. Juliana Ferreira', 'Tratamento', 'Particular', 'agendado', 
   ARRAY['Preparo para lentes'], ARRAY['Estética'], 'Preparo dos dentes para instalação das lentes.', 3500.00);

-- Adding treatments for José Marcus and others
  INSERT INTO patient_treatments (patient_id, name, start_date, end_date, status, progress, total_sessions, completed_sessions, cost) VALUES
  (patient_jose_id, 'Confecção de Prótese Parcial Removível', '2025-03-05', NULL, 'em_andamento', 60, 4, 3, 2800.00),
  (patient_yung_id, 'Tratamento Periodontal Completo', '2025-02-08', NULL, 'em_andamento', 70, 3, 2, 1500.00),
  (patient_michele_id, 'Lentes de Contato Dental (6 elementos)', '2025-02-22', NULL, 'em_andamento', 40, 3, 1, 8500.00);

-- Adding planning for José Marcus
  INSERT INTO patient_plannings (patient_id, title, doctor_name, created_date, comments, total_value) VALUES
  (patient_jose_id, 'Reabilitação Protética Superior', 'Dra. Patricia Alves', '2025-03-05', 
   'Paciente necessita de prótese parcial removível superior para substituir dentes perdidos. Planejamento inclui moldagem, prova e instalação.', 2800.00)
  RETURNING id INTO planning_jose_id;

-- Adding planning procedures for José Marcus
  INSERT INTO planning_procedures (planning_id, name, value, status, sent_to_treatment, treatment_start_date, sessions, treatment_value) VALUES
  (planning_jose_id, 'Avaliação e Planejamento Protético', 200.00, 'completed', FALSE, NULL, NULL, NULL),
  (planning_jose_id, 'Moldagem Inicial', 600.00, 'completed', TRUE, '2025-04-10', 1, 600.00),
  (planning_jose_id, 'Prova da Estrutura Metálica', 500.00, 'in_progress', TRUE, '2025-04-25', 1, 500.00),
  (planning_jose_id, 'Instalação e Ajuste Final', 1500.00, 'planned', FALSE, NULL, NULL, NULL);

-- Adding budget for José Marcus
  INSERT INTO patient_budgets (patient_id, title, description, total_value, status, created_date, expiry_date) VALUES
  (patient_jose_id, 'Orçamento - Prótese Parcial Removível', 'Orçamento para confecção de prótese parcial removível superior', 2800.00, 'approved', '2025-03-05', '2025-06-05')
  RETURNING id INTO budget_jose_id;

-- Adding budget items for José Marcus
  INSERT INTO budget_items (budget_id, procedure_name, quantity, unit_price, total_price) VALUES
  (budget_jose_id, 'Consulta e Planejamento', 1, 200.00, 200.00),
  (budget_jose_id, 'Moldagem e Registros', 1, 600.00, 600.00),
  (budget_jose_id, 'Confecção da Prótese', 1, 1500.00, 1500.00),
  (budget_jose_id, 'Instalação e Ajustes', 1, 500.00, 500.00);

-- Adding financial transactions for José Marcus
  INSERT INTO financial_transactions (patient_id, description, amount, type, status, due_date, payment_date, payment_method) VALUES
  (patient_jose_id, 'Consulta e Limpeza - Dezembro', 280.00, 'charge', 'completed', '2024-12-10', '2024-12-10', 'Convênio'),
  (patient_jose_id, 'Extração Dente 48', 450.00, 'charge', 'completed', '2025-01-20', '2025-01-20', 'Convênio'),
  (patient_jose_id, 'Avaliação Protética', 200.00, 'charge', 'completed', '2025-03-05', '2025-03-05', 'Convênio'),
  (patient_jose_id, 'Prótese - Entrada (30%)', 840.00, 'charge', 'completed', '2025-03-05', '2025-03-05', 'Cartão de Crédito'),
  (patient_jose_id, 'Prótese - Parcela 1/3', 653.33, 'charge', 'completed', '2025-04-05', '2025-04-05', 'Débito'),
  (patient_jose_id, 'Prótese - Parcela 2/3', 653.33, 'charge', 'pending', '2025-05-05', NULL, NULL),
  (patient_jose_id, 'Prótese - Parcela 3/3', 653.34, 'charge', 'pending', '2025-06-05', NULL, NULL);

-- Adding documents for José Marcus
  INSERT INTO patient_documents (patient_id, category, title, description, file_type, added_date) VALUES
  (patient_jose_id, 'initial', 'Ficha de Anamnese', 'Ficha de anamnese completa com histórico médico', 'pdf', '2024-12-10'),
  (patient_jose_id, 'initial', 'Termo de Consentimento', 'Termo de consentimento para tratamento odontológico', 'pdf', '2024-12-10'),
  (patient_jose_id, 'initial', 'Radiografia Panorâmica', 'Radiografia panorâmica inicial', 'image', '2024-12-10'),
  (patient_jose_id, 'initial', 'Radiografia Periapical - Dente 48', 'Radiografia pré-extração', 'image', '2025-01-20'),
  (patient_jose_id, 'certificates', 'Atestado Odontológico', 'Atestado para justificar ausência - extração', 'pdf', '2025-01-20'),
  (patient_jose_id, 'certificates', 'Receita Médica', 'Receita de antibiótico e analgésico pós-extração', 'pdf', '2025-01-20'),
  (patient_jose_id, 'initial', 'Moldagem Inicial', 'Fotos da moldagem para prótese', 'image', '2025-04-10'),
  (patient_jose_id, 'initial', 'Plano de Tratamento Protético', 'Planejamento detalhado da prótese', 'pdf', '2025-03-05');

END $$;
[V0_FILE]typescriptreact:file="app/patients/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Sidebar } from "@/components/sidebar"
import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, MoreHorizontal, Eye, Edit, Phone, Mail, Calendar, MapPin, Download, Upload } from "lucide-react"
import Link from "next/link"
import { AddPatientDialog } from "@/components/add-patient-dialog"
import { createClient } from "@/lib/supabase/client"

interface Patient {
  id: string
  code: string
  name: string
  email: string
  phone: string
  birth_date: string
  address: string
  last_visit: string
  next_appointment?: string
  status: "ativo" | "inativo" | "pendente"
  financial_status: "ok" | "pendente" | "atrasado"
  avatar?: string
}

export default function PatientsPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("todos")
  const [financialFilter, setFinancialFilter] = useState("todos")
  const [patients, setPatients] = useState<Patient[]>([])
  const [loading, setLoading] = useState(true)

const fetchPatients = async () => {
    const supabase = createClient()
    const { data, error } = await supabase.from("pactable").select("*").order("name", { ascending: true })

if (error) {
      console.error("Error fetching patients:", error)
    } else {
      setPatients(data || [])
    }
    setLoading(false)
  }

useEffect(() => {
    fetchPatients()
  }, [])

const getStatusBadge = (status: string) => {
    switch (status) {
      case "ativo":
        return <Badge className="bg-green-100 text-green-800">Ativo</Badge>
      case "inativo":
        return <Badge variant="secondary">Inativo</Badge>
      case "pendente":
        return <Badge className="bg-yellow-100 text-yellow-800">Pendente</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const getFinancialBadge = (status: string) => {
    switch (status) {
      case "ok":
        return <Badge className="bg-green-100 text-green-800">Em dia</Badge>
      case "pendente":
        return <Badge className="bg-yellow-100 text-yellow-800">Pendente</Badge>
      case "atrasado":
        return <Badge className="bg-red-100 text-red-800">Atrasado</Badge>
      default:
        return <Badge variant="secondary">{status}</Badge>
    }
  }

const filteredPatients = patients.filter((patient) => {
    const matchesSearch =
      patient.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      patient.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      patient.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      patient.phone.includes(searchTerm)

const matchesStatus = statusFilter === "todos" || patient.status === statusFilter
    const matchesFinancial = financialFilter === "todos" || patient.financial_status === financialFilter

return matchesSearch && matchesStatus && matchesFinancial
  })

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
      age--
    }

return age
  }

const exportPatients = () => {
    const csvContent = [
      ["Código", "Nome", "Email", "Telefone", "Data Nascimento", "Endereço", "Status", "Status Financeiro"].join(","),
      ...filteredPatients.map((patient) =>
        [
          patient.code,
          `"${patient.name}"`,
          patient.email,
          patient.phone,
          patient.birth_date,
          `"${patient.address}"`,
          patient.status,
          patient.financial_status,
        ].join(","),
      ),
    ].join("\n")

const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    const url = URL.createObjectURL(blob)
    link.setAttribute("href", url)
    link.setAttribute("download", `pacientes_${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

const importPatients = () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = ".csv"
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const csv = e.target?.result as string
          const lines = csv.split("\n")
          const headers = lines[0].split(",")

console.log("Importando pacientes:", lines.length - 1, "registros")
          alert(`Importação iniciada! ${lines.length - 1} pacientes serão processados.`)
        }
        reader.readAsText(file)
      }
    }
    input.click()
  }

const handlePatientAdded = () => {
    console.log("[v0] Patient added, refreshing list...")
    fetchPatients()
  }

if (loading) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <div className="text-lg font-medium">Carregando pacientes...</div>
          </div>
        </div>
      </div>
    )
  }

<div className="flex items-center space-x-2">
              <Button variant="outline" size="sm" onClick={exportPatients}>
                <Download className="mr-2 h-4 w-4" />
                Exportar
              </Button>
              <Button variant="outline" size="sm" onClick={importPatients}>
                <Upload className="mr-2 h-4 w-4" />
                Importar
              </Button>
              <AddPatientDialog onPatientAdded={handlePatientAdded} />
            </div>
          </div>
        </header>

<div className="flex-1 overflow-auto p-6">
          {/* Filtros */}
          <div className="flex flex-col sm:flex-row gap-4 mb-6">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                placeholder="Buscar por nome, email, código ou telefone..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

<Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos os status</SelectItem>
                <SelectItem value="ativo">Ativo</SelectItem>
                <SelectItem value="inativo">Inativo</SelectItem>
                <SelectItem value="pendente">Pendente</SelectItem>
              </SelectContent>
            </Select>

<Select value={financialFilter} onValueChange={setFinancialFilter}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Financeiro" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="todos">Todos</SelectItem>
                <SelectItem value="ok">Em dia</SelectItem>
                <SelectItem value="pendente">Pendente</SelectItem>
                <SelectItem value="atrasado">Atrasado</SelectItem>
              </SelectContent>
            </Select>
          </div>

{/* Estatísticas rápidas */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Total de Pacientes</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{patients.length}</div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Pacientes Ativos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-600">
                  {patients.filter((p) => p.status === "ativo").length}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Pendências Financeiras</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-red-600">
                  {patients.filter((p) => p.financial_status === "atrasado").length}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Consultas Hoje</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-blue-600">
                  {patients.filter((p) => p.next_appointment === "2025-08-01").length}
                </div>
              </CardContent>
            </Card>
          </div>

{/* Tabela de pacientes */}
          <Card>
            <CardHeader>
              <CardTitle>Lista de Pacientes</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Paciente</TableHead>
                    <TableHead>Contato</TableHead>
                    <TableHead>Idade</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Financeiro</TableHead>
                    <TableHead>Última Consulta</TableHead>
                    <TableHead>Próxima Consulta</TableHead>
                    <TableHead className="text-right">Ações</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredPatients.map((patient) => (
                    <TableRow key={patient.id}>
                      <TableCell>
                        <div className="flex items-center space-x-3">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={patient.avatar || "/placeholder.svg"} />
                            <AvatarFallback>
                              {patient.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")
                                .substring(0, 2)}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <div className="font-medium">{patient.name}</div>
                            <div className="text-sm text-muted-foreground flex items-center space-x-2">
                              <span className="font-mono bg-muted px-1.5 py-0.5 rounded text-xs">{patient.code}</span>
                              <span className="flex items-center">
                                <MapPin className="h-3 w-3 mr-1" />
                                {patient.address.split(" - ")[1] || "São Paulo, SP"}
                              </span>
                            </div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="space-y-1">
                          <div className="flex items-center text-sm">
                            <Phone className="h-3 w-3 mr-2 text-muted-foreground" />
                            {patient.phone}
                          </div>
                          <div className="flex items-center text-sm text-muted-foreground">
                            <Mail className="h-3 w-3 mr-2" />
                            {patient.email}
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>{calculateAge(patient.birth_date)} anos</TableCell>
                      <TableCell>{getStatusBadge(patient.status)}</TableCell>
                      <TableCell>{getFinancialBadge(patient.financial_status)}</TableCell>
                      <TableCell>
                        <div className="flex items-center text-sm">
                          <Calendar className="h-3 w-3 mr-2 text-muted-foreground" />
                          {new Date(patient.last_visit).toLocaleDateString("pt-BR")}
                        </div>
                      </TableCell>
                      <TableCell>
                        {patient.next_appointment ? (
                          <div className="flex items-center text-sm">
                            <Calendar className="h-3 w-3 mr-2 text-green-600" />
                            {new Date(patient.next_appointment).toLocaleDateString("pt-BR")}
                          </div>
                        ) : (
                          <span className="text-muted-foreground text-sm">Não agendado</span>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Ações</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem asChild>
                              <Link href={`/patients/${patient.id}`}>
                                <Eye className="mr-2 h-4 w-4" />
                                Ver detalhes
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Edit className="mr-2 h-4 w-4" />
                              Editar
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Calendar className="mr-2 h-4 w-4" />
                              Agendar consulta
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Phone className="mr-2 h-4 w-4" />
                              Ligar
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/18-fix-pactable-schema.sql" isMerged="true"
-- Fix pactable schema by ensuring all columns exist
-- This script safely adds missing columns without dropping the table

-- Add missing columns if they don't exist
DO $$ 
BEGIN
  -- Check and add city column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'city') THEN
    ALTER TABLE pactable ADD COLUMN city VARCHAR(100);
  END IF;

-- Check and add state column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'state') THEN
    ALTER TABLE pactable ADD COLUMN state VARCHAR(50);
  END IF;

-- Check and add zip_code column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'zip_code') THEN
    ALTER TABLE pactable ADD COLUMN zip_code VARCHAR(10);
  END IF;

-- Check and add cpf column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'cpf') THEN
    ALTER TABLE pactable ADD COLUMN cpf VARCHAR(14) NOT NULL DEFAULT '';
  END IF;

-- Check and add rg column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'rg') THEN
    ALTER TABLE pactable ADD COLUMN rg VARCHAR(20);
  END IF;

-- Check and add gender column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'gender') THEN
    ALTER TABLE pactable ADD COLUMN gender VARCHAR(20);
  END IF;

-- Check and add marital_status column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'marital_status') THEN
    ALTER TABLE pactable ADD COLUMN marital_status VARCHAR(20);
  END IF;

-- Check and add profession column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'profession') THEN
    ALTER TABLE pactable ADD COLUMN profession VARCHAR(100);
  END IF;

-- Check and add insurance_provider column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'insurance_provider') THEN
    ALTER TABLE pactable ADD COLUMN insurance_provider VARCHAR(100);
  END IF;

-- Check and add insurance_number column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'insurance_number') THEN
    ALTER TABLE pactable ADD COLUMN insurance_number VARCHAR(50);
  END IF;

-- Check and add insurance_validity column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'insurance_validity') THEN
    ALTER TABLE pactable ADD COLUMN insurance_validity DATE;
  END IF;

-- Check and add preferred_appointment_time column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'preferred_appointment_time') THEN
    ALTER TABLE pactable ADD COLUMN preferred_appointment_time VARCHAR(20);
  END IF;

-- Check and add communication_preference column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'communication_preference') THEN
    ALTER TABLE pactable ADD COLUMN communication_preference VARCHAR(20);
  END IF;

-- Check and add notes column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'notes') THEN
    ALTER TABLE pactable ADD COLUMN notes TEXT;
  END IF;

-- Check and add consent_treatment column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'consent_treatment') THEN
    ALTER TABLE pactable ADD COLUMN consent_treatment BOOLEAN DEFAULT false;
  END IF;

-- Check and add consent_data_usage column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'consent_data_usage') THEN
    ALTER TABLE pactable ADD COLUMN consent_data_usage BOOLEAN DEFAULT false;
  END IF;

-- Check and add consent_marketing column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'consent_marketing') THEN
    ALTER TABLE pactable ADD COLUMN consent_marketing BOOLEAN DEFAULT false;
  END IF;

-- Check and add avatar column
  IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                 WHERE table_name = 'pactable' AND column_name = 'avatar') THEN
    ALTER TABLE pactable ADD COLUMN avatar TEXT;
  END IF;

END $$;

-- Create indexes if they don't exist
CREATE INDEX IF NOT EXISTS idx_pactable_city ON pactable(city);
CREATE INDEX IF NOT EXISTS idx_pactable_state ON pactable(state);
[V0_FILE]sql:file="scripts/19-fix-financial-status-constraint.sql" isMerged="true"
-- Fix the financial_status CHECK constraint
-- This script drops the old constraint and creates a new one with the correct values

-- Drop the existing CHECK constraint if it exists
DO $$ 
BEGIN
  -- Drop the constraint if it exists
  IF EXISTS (
    SELECT 1 FROM information_schema.table_constraints 
    WHERE constraint_name = 'pactable_financial_status_check' 
    AND table_name = 'pactable'
  ) THEN
    ALTER TABLE pactable DROP CONSTRAINT pactable_financial_status_check;
  END IF;
END $$;

-- Add the correct CHECK constraint
ALTER TABLE pactable 
ADD CONSTRAINT pactable_financial_status_check 
CHECK (financial_status IN ('em_dia', 'pendente', 'atrasado'));

-- Also fix the status constraint if needed
DO $$ 
BEGIN
  -- Drop the status constraint if it exists
  IF EXISTS (
    SELECT 1 FROM information_schema.table_constraints 
    WHERE constraint_name = 'pactable_status_check' 
    AND table_name = 'pactable'
  ) THEN
    ALTER TABLE pactable DROP CONSTRAINT pactable_status_check;
  END IF;
END $$;

-- Add the correct status CHECK constraint
ALTER TABLE pactable 
ADD CONSTRAINT pactable_status_check 
CHECK (status IN ('ativo', 'inativo', 'pendente'));

-- Update any existing rows that might have invalid values
UPDATE pactable 
SET financial_status = 'em_dia' 
WHERE financial_status NOT IN ('em_dia', 'pendente', 'atrasado');

UPDATE pactable 
SET status = 'ativo' 
WHERE status NOT IN ('ativo', 'inativo', 'pendente');
[V0_FILE]typescriptreact:file="components/add-patient-dialog.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Plus, Loader2, User } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import { useToast } from "@/hooks/use-toast"

interface AddPatientDialogProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onPatientAdded?: () => void
}

interface PatientFormData {
  name: string
  email: string
  phone: string
  birth_date: string
  address: string
  city: string
  state: string
  last_visit: string
  next_appointment: string
}

export function AddPatientDialog({ open: controlledOpen, onOpenChange, onPatientAdded }: AddPatientDialogProps = {}) {
  const [internalOpen, setInternalOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

const [formData, setFormData] = useState<PatientFormData>({
    name: "",
    email: "",
    phone: "",
    birth_date: "",
    address: "",
    city: "",
    state: "",
    last_visit: "",
    next_appointment: "",
  })

const open = controlledOpen !== undefined ? controlledOpen : internalOpen
  const setOpen = onOpenChange || setInternalOpen

const handleInputChange = (field: keyof PatientFormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

try {
      console.log("[v0] Starting patient registration...")
      const supabase = createClient()

const patientCode = `PAC${Date.now().toString().slice(-6)}`
      console.log("[v0] Generated patient code:", patientCode)

const { data: patientData, error: patientError } = await supabase
        .from("pactable")
        .insert({
          code: patientCode,
          name: formData.name,
          email: formData.email || null,
          phone: formData.phone,
          birth_date: formData.birth_date,
          address: formData.address || null,
          city: formData.city || null,
          state: formData.state || null,
          status: "ativo",
          last_visit: formData.last_visit || new Date().toISOString().split("T")[0],
          next_appointment: formData.next_appointment || null,
        })
        .select()
        .single()

if (patientError) {
        console.error("[v0] Error inserting patient:", patientError)
        throw patientError
      }

console.log("[v0] Patient created successfully:", patientData)

toast({
        title: "Paciente cadastrado com sucesso!",
        description: `${formData.name} foi adicionado ao sistema com o código ${patientCode}.`,
      })

setOpen(false)
      setFormData({
        name: "",
        email: "",
        phone: "",
        birth_date: "",
        address: "",
        city: "",
        state: "",
        last_visit: "",
        next_appointment: "",
      })

console.log("[v0] Calling onPatientAdded callback...")
      onPatientAdded?.()
    } catch (error) {
      console.error("[v0] Error saving patient:", error)
      toast({
        title: "Erro ao cadastrar paciente",
        description: error instanceof Error ? error.message : "Ocorreu um erro ao salvar os dados. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleClose = () => {
    setOpen(false)
  }

const isFormValid = () => {
    return formData.name && formData.phone && formData.birth_date
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Adicionar Paciente
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <User className="h-5 w-5" />
            Cadastrar Novo Paciente
          </DialogTitle>
          <DialogDescription>
            Preencha as informações básicas do paciente. Campos marcados com * são obrigatórios.
          </DialogDescription>
        </DialogHeader>

<form onSubmit={handleSubmit}>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="md:col-span-2">
                <Label htmlFor="name">Nome Completo *</Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => handleInputChange("name", e.target.value)}
                  placeholder="Nome completo do paciente"
                  required
                />
              </div>

<div>
                <Label htmlFor="phone">Telefone *</Label>
                <Input
                  id="phone"
                  value={formData.phone}
                  onChange={(e) => handleInputChange("phone", e.target.value)}
                  placeholder="(11) 99999-9999"
                  required
                />
              </div>

<div>
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email}
                  onChange={(e) => handleInputChange("email", e.target.value)}
                  placeholder="email@exemplo.com"
                />
              </div>

<div>
                <Label htmlFor="birth_date">Data de Nascimento *</Label>
                <Input
                  id="birth_date"
                  type="date"
                  value={formData.birth_date}
                  onChange={(e) => handleInputChange("birth_date", e.target.value)}
                  required
                />
              </div>

<div>
                <Label htmlFor="last_visit">Última Consulta</Label>
                <Input
                  id="last_visit"
                  type="date"
                  value={formData.last_visit}
                  onChange={(e) => handleInputChange("last_visit", e.target.value)}
                  placeholder="Data da última consulta"
                />
              </div>

<div className="md:col-span-2">
                <Label htmlFor="address">Endereço</Label>
                <Input
                  id="address"
                  value={formData.address}
                  onChange={(e) => handleInputChange("address", e.target.value)}
                  placeholder="Rua, número, complemento"
                />
              </div>

<div>
                <Label htmlFor="city">Cidade</Label>
                <Input
                  id="city"
                  value={formData.city}
                  onChange={(e) => handleInputChange("city", e.target.value)}
                  placeholder="Cidade"
                />
              </div>

<div>
                <Label htmlFor="state">Estado</Label>
                <Input
                  id="state"
                  value={formData.state}
                  onChange={(e) => handleInputChange("state", e.target.value)}
                  placeholder="SP"
                  maxLength={2}
                />
              </div>

<div className="md:col-span-2">
                <Label htmlFor="next_appointment">Próxima Consulta</Label>
                <Input
                  id="next_appointment"
                  type="date"
                  value={formData.next_appointment}
                  onChange={(e) => handleInputChange("next_appointment", e.target.value)}
                  placeholder="Data da próxima consulta"
                />
              </div>
            </div>
          </div>

<DialogFooter>
            <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
              Cancelar
            </Button>
            <Button type="submit" disabled={!isFormValid() || isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Cadastrando...
                </>
              ) : (
                "Cadastrar Paciente"
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/api/whatsapp/status/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const INSTANCE_ID = "JX584A-MG0RNE-YVYX0E"
const INSTANCE_TOKEN = "WX1dblDmJx3ylqBGftTMeHwqVXHiEuHse"

export async function GET() {
  try {
    const response = await fetch(`https://api.w-api.app/v1/instance/status-instance?instanceId=${INSTANCE_ID}`, {
      headers: {
        Authorization: `Bearer ${INSTANCE_TOKEN}`,
      },
    })

if (!response.ok) {
      throw new Error("Failed to fetch status")
    }

const data = await response.json()
    return NextResponse.json(data)
  } catch (error) {
    console.error("[v0] Error fetching WhatsApp status:", error)
    return NextResponse.json({ error: "Failed to fetch status", connected: false }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/whatsapp/qr-code/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const INSTANCE_ID = "JX584A-MG0RNE-YVYX0E"
const INSTANCE_TOKEN = "WX1dblDmJx3ylqBGftTMeHwqVXHiEuHse"

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const image = searchParams.get("image") || "enable"
    const syncContacts = searchParams.get("syncContacts") || "disable"

const response = await fetch(
      `https://api.w-api.app/v1/instance/qr-code?instanceId=${INSTANCE_ID}&image=${image}&syncContacts=${syncContacts}`,
      {
        headers: {
          Authorization: `Bearer ${INSTANCE_TOKEN}`,
        },
      },
    )

if (!response.ok) {
      throw new Error("Failed to fetch QR code")
    }

// If image is enabled, the response will be an image
    if (image === "enable") {
      const imageBuffer = await response.arrayBuffer()
      return new NextResponse(imageBuffer, {
        headers: {
          "Content-Type": "image/png",
        },
      })
    }

// Otherwise return JSON with base64
    const data = await response.json()
    return NextResponse.json(data)
  } catch (error) {
    console.error("[v0] Error fetching QR code:", error)
    return NextResponse.json({ error: "Failed to fetch QR code" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/whatsapp/send-message/route.ts" isMerged="true"
import { NextResponse } from "next/server"

const INSTANCE_ID = "JX584A-MG0RNE-YVYX0E"
const INSTANCE_TOKEN = "WX1dblDmJx3ylqBGftTMeHwqVXHiEuHse"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { phone, message } = body

if (!phone || !message) {
      return NextResponse.json({ error: "Phone and message are required" }, { status: 400 })
    }

// Format phone number (remove special characters)
    const formattedPhone = phone.replace(/\D/g, "")

const response = await fetch(`https://api.w-api.app/v1/messages/send-text`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${INSTANCE_TOKEN}`,
      },
      body: JSON.stringify({
        instanceId: INSTANCE_ID,
        phone: formattedPhone,
        message: message,
      }),
    })

if (!response.ok) {
      const errorData = await response.json()
      throw new Error(errorData.message || "Failed to send message")
    }

const data = await response.json()
    return NextResponse.json(data)
  } catch (error) {
    console.error("[v0] Error sending message:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Failed to send message" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/whatsapp-connection.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { RefreshCw, CheckCircle2, XCircle, QrCode } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface ConnectionStatus {
  instanceId: string
  connected: boolean
}

export function WhatsAppConnection() {
  const [status, setStatus] = useState<ConnectionStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null)
  const [showQrCode, setShowQrCode] = useState(false)
  const { toast } = useToast()

const checkStatus = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/whatsapp/status")
      const data = await response.json()
      setStatus(data)

if (!data.connected) {
        toast({
          title: "WhatsApp Desconectado",
          description: "Conecte sua conta do WhatsApp para começar a enviar mensagens.",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("[v0] Error checking status:", error)
      toast({
        title: "Erro",
        description: "Não foi possível verificar o status da conexão.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const generateQrCode = async () => {
    try {
      setShowQrCode(true)
      // Generate a unique URL with timestamp to prevent caching
      const timestamp = new Date().getTime()
      setQrCodeUrl(`/api/whatsapp/qr-code?image=enable&t=${timestamp}`)

toast({
        title: "QR Code Gerado",
        description: "Escaneie o QR Code com seu WhatsApp para conectar.",
      })

// Auto-refresh status every 5 seconds while QR code is showing
      const interval = setInterval(async () => {
        const response = await fetch("/api/whatsapp/status")
        const data = await response.json()
        if (data.connected) {
          setStatus(data)
          setShowQrCode(false)
          clearInterval(interval)
          toast({
            title: "Conectado!",
            description: "Sua conta do WhatsApp foi conectada com sucesso.",
          })
        }
      }, 5000)

// Clear interval after 2 minutes
      setTimeout(() => clearInterval(interval), 120000)
    } catch (error) {
      console.error("[v0] Error generating QR code:", error)
      toast({
        title: "Erro",
        description: "Não foi possível gerar o QR Code.",
        variant: "destructive",
      })
    }
  }

useEffect(() => {
    checkStatus()
  }, [])

return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              Status da Conexão
              {status?.connected ? (
                <CheckCircle2 className="h-5 w-5 text-green-500" />
              ) : (
                <XCircle className="h-5 w-5 text-red-500" />
              )}
            </CardTitle>
            <CardDescription>Gerencie a conexão com o WhatsApp</CardDescription>
          </div>
          <Button variant="outline" size="icon" onClick={checkStatus} disabled={loading}>
            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">Status:</span>
          <Badge variant={status?.connected ? "default" : "destructive"}>
            {loading ? "Verificando..." : status?.connected ? "Conectado" : "Desconectado"}
          </Badge>
        </div>

{status?.instanceId && (
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Instância:</span>
            <span className="text-sm text-muted-foreground font-mono">{status.instanceId}</span>
          </div>
        )}

{!status?.connected && (
          <Button onClick={generateQrCode} className="w-full" disabled={showQrCode}>
            <QrCode className="h-4 w-4 mr-2" />
            {showQrCode ? "Aguardando Conexão..." : "Gerar QR Code"}
          </Button>
        )}

{showQrCode && qrCodeUrl && (
          <div className="space-y-3">
            <div className="border rounded-lg p-4 bg-white flex items-center justify-center">
              <img src={qrCodeUrl || "/placeholder.svg"} alt="QR Code WhatsApp" className="max-w-full h-auto" />
            </div>
            <p className="text-sm text-muted-foreground text-center">
              Abra o WhatsApp no seu celular, vá em <strong>Dispositivos Conectados</strong> e escaneie este QR Code
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/whatsapp-chat.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Send, Loader2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

export function WhatsAppChat() {
  const [phone, setPhone] = useState("")
  const [message, setMessage] = useState("")
  const [sending, setSending] = useState(false)
  const { toast } = useToast()

const handleSendMessage = async (e: React.FormEvent) => {
    e.preventDefault()

if (!phone || !message) {
      toast({
        title: "Campos obrigatórios",
        description: "Preencha o número e a mensagem.",
        variant: "destructive",
      })
      return
    }

setSending(true)
    try {
      const response = await fetch("/api/whatsapp/send-message", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ phone, message }),
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.error || "Erro ao enviar mensagem")
      }

toast({
        title: "Mensagem Enviada!",
        description: `Mensagem enviada para ${phone} com sucesso.`,
      })

// Clear form
      setMessage("")
    } catch (error) {
      console.error("[v0] Error sending message:", error)
      toast({
        title: "Erro ao Enviar",
        description: error instanceof Error ? error.message : "Não foi possível enviar a mensagem.",
        variant: "destructive",
      })
    } finally {
      setSending(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Enviar Mensagem</CardTitle>
        <CardDescription>Envie mensagens de texto para seus contatos</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSendMessage} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="phone">Número do WhatsApp</Label>
            <Input
              id="phone"
              type="tel"
              placeholder="+55 11 99999-9999"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              disabled={sending}
            />
            <p className="text-xs text-muted-foreground">Digite o número com código do país (ex: +5511999999999)</p>
          </div>

<div className="space-y-2">
            <Label htmlFor="message">Mensagem</Label>
            <Textarea
              id="message"
              placeholder="Digite sua mensagem aqui..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              disabled={sending}
              rows={6}
            />
          </div>

<Button type="submit" className="w-full" disabled={sending}>
            {sending ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Enviando...
              </>
            ) : (
              <>
                <Send className="h-4 w-4 mr-2" />
                Enviar Mensagem
              </>
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/w-api.ts" isQuickEdit="true" isMerged="true"
const INSTANCE_ID = "0QINEK-UKIC16-MKV1S0"
const API_TOKEN = "tySRC06Ug9n580T6CZeCD5phAzvG3BD1y"
const BASE_URL = "https://api.w-api.app/v1"

export interface WApiChat {
  id: string
  name: string
  phone: string
  lastMessage?: {
    content: string
    timestamp: string
    fromMe: boolean
  }
  unreadCount: number
  profilePicUrl?: string
}

export interface WApiMessage {
  id: string
  content: string
  timestamp: string
  fromMe: boolean
  status: "sent" | "delivered" | "read"
  type?: "text" | "image" | "audio" | "video" | "document"
  mediaUrl?: string
}

export interface WApiContact {
  id: string
  name: string
  phone: string
  profilePicUrl?: string
  isBlocked: boolean
  isMyContact: boolean
}

export interface WApiGroup {
  id: string
  name: string
  description?: string
  participants: string[]
  admins: string[]
  profilePicUrl?: string
  createdAt: string
}

export interface WApiWebhook {
  url: string
  events: string[]
  enabled: boolean
}

export interface WApiMessageTemplate {
  name: string
  content: string
  variables?: string[]
}

export class WApiClient {
  private instanceId: string
  private token: string

constructor(instanceId: string = INSTANCE_ID, token: string = API_TOKEN) {
    this.instanceId = instanceId
    this.token = token
  }

private async makeRequest(endpoint: string, options: RequestInit = {}, expectImage = false) {
    const url = `${BASE_URL}${endpoint}`

console.log("[v0] Making W-API request:", {
      url,
      method: options.method || "GET",
      hasAuth: !!this.token,
    })

const response = await fetch(url, {
      ...options,
      headers: {
        Authorization: `Bearer ${this.token}`,
        "Content-Type": "application/json",
        ...options.headers,
      },
    })

console.log("[v0] W-API response:", {
      status: response.status,
      statusText: response.statusText,
      url,
    })

if (!response.ok) {
      let errorDetails = ""
      try {
        const errorBody = await response.text()
        errorDetails = errorBody ? ` - ${errorBody}` : ""
        console.log("[v0] Error response body:", errorBody)
      } catch (e) {
        // Ignore if we can't read the body
      }
      throw new Error(`W-API request failed: ${response.status} ${response.statusText}${errorDetails}`)
    }

if (expectImage) {
      return response
    }

return response.json()
  }

async getQRCode(): Promise<{ qrCodeUrl: string; status: string }> {
    try {
      console.log("[v0] Generating QR code for instance:", {
        instanceId: this.instanceId,
        token: this.token.substring(0, 10) + "...",
      })

const response = await this.makeRequest(
        `/instance/qr-code?instanceId=${this.instanceId}&syncContacts=enable&image=enable`,
        {
          method: "GET",
        },
        true,
      )

const blob = await response.blob()
      const qrCodeUrl = URL.createObjectURL(blob)

console.log("[v0] QR code generated successfully")

return {
        qrCodeUrl,
        status: "qr_generated",
      }
    } catch (error) {
      console.error("Error getting QR code:", error)
      throw error
    }
  }

async getInstanceStatus(): Promise<{ status: string; connected: boolean }> {
    try {
      console.log("[v0] Checking instance status for:", this.instanceId)

const response = await this.makeRequest(`/instance/status-instance?instanceId=${this.instanceId}`)

console.log("[v0] Status response:", response)

const connected = response.connected === true

return {
        status: connected ? "connected" : "disconnected",
        connected,
      }
    } catch (error) {
      console.error("Error getting instance status:", error)
      return {
        status: "error",
        connected: false,
      }
    }
  }

async fetchChats(page = 1, perPage = 20, force = false): Promise<{ chats: WApiChat[]; total: number }> {
    try {
      console.log("[v0] ===== FETCHING CHATS =====")
      console.log("[v0] Fetching chats - page:", page, "perPage:", perPage)
      console.log("[v0] Instance ID:", this.instanceId)
      console.log(
        "[v0] Full URL:",
        `${BASE_URL}/chats/fetch-chats?instanceId=${this.instanceId}&perPage=${perPage}&page=${page}`,
      )

const response = await this.makeRequest(
        `/chats/fetch-chats?instanceId=${this.instanceId}&perPage=${perPage}&page=${page}`,
      )

console.log("[v0] ===== RAW CHATS API RESPONSE =====")
      console.log("[v0] Full response object:", JSON.stringify(response, null, 2))
      console.log("[v0] Response type:", typeof response)
      console.log("[v0] Response keys:", Object.keys(response))

if (response.chats) {
        console.log("[v0] Chats array length:", response.chats.length)
        console.log("[v0] First chat sample:", JSON.stringify(response.chats[0], null, 2))
      } else {
        console.log("[v0] WARNING: No 'chats' property in response!")
        console.log("[v0] Available properties:", Object.keys(response))
      }

const chatsWithPictures = await Promise.all(
        (response.chats || []).map(async (chat: any) => {
          const phone = chat.id?.split("@")[0] || chat.phone
          let profilePicUrl = chat.profilePicUrl || chat.profilePic

// Try to fetch profile picture if not provided
          if (!profilePicUrl && phone) {
            try {
              profilePicUrl = await this.getContactProfilePicture(phone)
            } catch (error) {
              // Ignore errors fetching profile pictures
            }
          }

return {
            id: chat.id || chat.chatId,
            name: chat.name || chat.pushname || phone || "Unknown",
            phone: phone || "",
            lastMessage: chat.lastMessage
              ? {
                  content: chat.lastMessage.body || chat.lastMessage.content || "",
                  timestamp: chat.lastMessage.timestamp
                    ? new Date(chat.lastMessage.timestamp * 1000).toLocaleTimeString("pt-BR", {
                        hour: "2-digit",
                        minute: "2-digit",
                      })
                    : "",
                  fromMe: chat.lastMessage.fromMe || false,
                }
              : undefined,
            unreadCount: chat.unreadCount || 0,
            profilePicUrl,
          }
        }),
      )

console.log("[v0] ===== PROCESSED CHATS =====")
      console.log("[v0] Processed chats count:", chatsWithPictures.length)
      console.log("[v0] Processed chats:", JSON.stringify(chatsWithPictures, null, 2))

return {
        chats: chatsWithPictures,
        total: response.totalChats || response.total || chatsWithPictures.length,
      }
    } catch (error: any) {
      console.log("[v0] ===== ERROR FETCHING CHATS =====")
      console.log("[v0] Error object:", error)
      console.log("[v0] Error message:", error.message)
      console.log("[v0] Error stack:", error.stack)

if (error.message && (error.message.includes("não encontrados") || error.message.includes("404"))) {
        console.log("[v0] No chats found (404) - returning empty array")
        return {
          chats: [],
          total: 0,
        }
      }

console.error("[v0] Unexpected error fetching chats:", error)
      throw error
    }
  }

async sendTextMessage(chatId: string, message: string): Promise<{ success: boolean; messageId?: string }> {
    try {
      // Extract phone number from chatId (format: 5511969483809@s.whatsapp.net)
      const phone = chatId.split("@")[0]

const response = await this.makeRequest(`/message/send-text?instanceId=${this.instanceId}`, {
        method: "POST",
        body: JSON.stringify({
          phone,
          message,
          delayMessage: 1, // Default 1 second delay
        }),
      })

return {
        success: true,
        messageId: response.messageId || response.id || response.key?.id,
      }
    } catch (error) {
      console.error("Error sending text message:", error)
      return { success: false }
    }
  }

async sendImageMessage(
    chatId: string,
    imageUrl: string,
    caption?: string,
  ): Promise<{ success: boolean; messageId?: string }> {
    try {
      const response = await this.makeRequest(`/messages/send-image`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          chatId,
          image: imageUrl,
          caption,
        }),
      })

return {
        success: true,
        messageId: response.messageId || response.id,
      }
    } catch (error) {
      console.error("Error sending image message:", error)
      return { success: false }
    }
  }

async sendDocumentMessage(
    chatId: string,
    documentUrl: string,
    filename?: string,
  ): Promise<{ success: boolean; messageId?: string }> {
    try {
      const response = await this.makeRequest(`/messages/send-document`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          chatId,
          document: documentUrl,
          filename,
        }),
      })

return {
        success: true,
        messageId: response.messageId || response.id,
      }
    } catch (error) {
      console.error("Error sending document message:", error)
      return { success: false }
    }
  }

async sendAudioMessage(chatId: string, audioUrl: string): Promise<{ success: boolean; messageId?: string }> {
    try {
      const response = await this.makeRequest(`/messages/send-audio`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          chatId,
          audio: audioUrl,
        }),
      })

return {
        success: true,
        messageId: response.messageId || response.id,
      }
    } catch (error) {
      console.error("Error sending audio message:", error)
      return { success: false }
    }
  }

async sendLocationMessage(
    chatId: string,
    latitude: number,
    longitude: number,
    name?: string,
  ): Promise<{ success: boolean; messageId?: string }> {
    try {
      const response = await this.makeRequest(`/messages/send-location`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          chatId,
          latitude,
          longitude,
          name,
        }),
      })

return {
        success: true,
        messageId: response.messageId || response.id,
      }
    } catch (error) {
      console.error("Error sending location message:", error)
      return { success: false }
    }
  }

async fetchAllContacts(perPage = 100): Promise<{ contacts: WApiContact[]; total: number }> {
    let page = 1
    const allContacts: any[] = []

while (true) {
      try {
        const response = await this.makeRequest(
          `/contacts/fetch-contacts?instanceId=${this.instanceId}&perPage=${perPage}&page=${page}`,
        )

// Handle different response formats
        const contacts = response.contacts ?? response

if (!contacts || contacts.length === 0) {
          break
        }

allContacts.push(...contacts)
        page += 1

// Safety limit to prevent infinite loops
        if (page > 100) break
      } catch (error: any) {
        if (error.message && error.message.includes("Contatos não encontrados")) {
          break
        }
        throw error
      }
    }

const contactsWithPictures = await Promise.all(
      allContacts.map(async (contact: any) => {
        const phone = contact.phone || contact.id?.split("@")[0]
        let profilePicUrl = contact.profilePicUrl

// Try to fetch profile picture if not provided
        if (!profilePicUrl && phone) {
          try {
            profilePicUrl = await this.getContactProfilePicture(phone)
          } catch (error) {
            // Ignore errors fetching profile pictures
          }
        }

return {
          id: contact.id || contact.phone,
          name: contact.name || contact.pushname || phone,
          phone: phone || contact.id,
          profilePicUrl,
          isBlocked: contact.isBlocked || false,
          isMyContact: contact.isMyContact || true,
        }
      }),
    )

return {
      contacts: contactsWithPictures,
      total: allContacts.length,
    }
  }

async fetchContacts(page = 1, perPage = 10): Promise<{ contacts: WApiContact[]; total: number }> {
    return this.fetchAllContacts(perPage)
  }

async getContactProfilePicture(phoneNumber: string): Promise<string | null> {
    try {
      const response = await this.makeRequest(
        `/contacts/profile-picture?instanceId=${this.instanceId}&phoneNumber=${phoneNumber}`,
      )

// W-API returns different formats, try all possible fields
      return response.profilePicUrl || response.url || response.profilePic || response.picture || null
    } catch (error) {
      // Return null if profile picture not found
      return null
    }
  }

async getContacts(): Promise<WApiContact[]> {
    try {
      const response = await this.fetchContacts(1, 100)
      return response.contacts
    } catch (error) {
      console.error("Error getting contacts:", error)
      return []
    }
  }

async blockContact(contactId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/contacts/block`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          contactId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error blocking contact:", error)
      return { success: false }
    }
  }

async unblockContact(contactId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/contacts/unblock`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          contactId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error unblocking contact:", error)
      return { success: false }
    }
  }

async getGroups(): Promise<WApiGroup[]> {
    try {
      const response = await this.makeRequest(`/groups?instanceId=${this.instanceId}`)

return (
        response.groups?.map((group: any) => ({
          id: group.id,
          name: group.name || group.subject,
          description: group.description || group.desc,
          participants: group.participants || [],
          admins: group.admins || [],
          profilePicUrl: group.profilePicUrl,
          createdAt: group.createdAt || new Date().toISOString(),
        })) || []
      )
    } catch (error) {
      console.error("Error getting groups:", error)
      return []
    }
  }

async createGroup(name: string, participants: string[]): Promise<{ success: boolean; groupId?: string }> {
    try {
      const response = await this.makeRequest(`/groups/create`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          name,
          participants,
        }),
      })

return {
        success: true,
        groupId: response.groupId || response.id,
      }
    } catch (error) {
      console.error("Error creating group:", error)
      return { success: false }
    }
  }

async addParticipantToGroup(groupId: string, participantId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/groups/add-participant`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          groupId,
          participantId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error adding participant to group:", error)
      return { success: false }
    }
  }

async removeParticipantFromGroup(groupId: string, participantId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/groups/remove-participant`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          groupId,
          participantId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error removing participant from group:", error)
      return { success: false }
    }
  }

async markMessageAsRead(chatId: string, messageId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/messages/mark-read`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          chatId,
          messageId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error marking message as read:", error)
      return { success: false }
    }
  }

async deleteMessage(messageId: string, forEveryone = false): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/messages/delete`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          messageId,
          forEveryone,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error deleting message:", error)
      return { success: false }
    }
  }

async forwardMessage(messageId: string, toChatId: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/messages/forward`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          messageId,
          toChatId,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error forwarding message:", error)
      return { success: false }
    }
  }

async setWebhook(webhookUrl: string, events: string[] = ["message", "status"]): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/webhook/set`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          url: webhookUrl,
          events,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error setting webhook:", error)
      return { success: false }
    }
  }

async getWebhook(): Promise<WApiWebhook | null> {
    try {
      const response = await this.makeRequest(`/webhook?instanceId=${this.instanceId}`)
      return {
        url: response.url,
        events: response.events || [],
        enabled: response.enabled || false,
      }
    } catch (error) {
      console.error("Error getting webhook:", error)
      return null
    }
  }

async getProfilePicture(contactId?: string): Promise<string | null> {
    try {
      const endpoint = contactId
        ? `/profile/picture?instanceId=${this.instanceId}&contactId=${contactId}`
        : `/profile/picture?instanceId=${this.instanceId}`

const response = await this.makeRequest(endpoint)
      return response.profilePicUrl || null
    } catch (error) {
      console.error("Error getting profile picture:", error)
      return null
    }
  }

async setProfilePicture(imageUrl: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/profile/picture`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          image: imageUrl,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error setting profile picture:", error)
      return { success: false }
    }
  }

async setProfileStatus(status: string): Promise<{ success: boolean }> {
    try {
      await this.makeRequest(`/profile/status`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          status,
        }),
      })
      return { success: true }
    } catch (error) {
      console.error("Error setting profile status:", error)
      return { success: false }
    }
  }

async checkPhoneNumber(phoneNumber: string): Promise<{ exists: boolean; isWhatsApp: boolean }> {
    try {
      const response = await this.makeRequest(`/phone/check`, {
        method: "POST",
        body: JSON.stringify({
          instanceId: this.instanceId,
          phoneNumber,
        }),
      })

return {
        exists: response.exists || false,
        isWhatsApp: response.isWhatsApp || false,
      }
    } catch (error) {
      console.error("Error checking phone number:", error)
      return { exists: false, isWhatsApp: false }
    }
  }

async checkPhonesExistBatch(phoneNumbers: string[]): Promise<{ phone: string; exists: boolean }[]> {
    try {
      const response = await this.makeRequest(`/contacts/phone-exists-batch?instanceId=${this.instanceId}`, {
        method: "POST",
        body: JSON.stringify({
          phones: phoneNumbers,
        }),
      })

// W-API returns an array of results with phone and exists status
      return response.results || response.phones || response || []
    } catch (error) {
      console.error("Error checking phones in batch:", error)
      return []
    }
  }

async getInstanceInfo(): Promise<{ phone?: string; name?: string; profilePicUrl?: string }> {
    try {
      const response = await this.makeRequest(`/instance/info?instanceId=${this.instanceId}`)
      return {
        phone: response.phone,
        name: response.name || response.pushname,
        profilePicUrl: response.profilePicUrl,
      }
    } catch (error) {
      console.error("Error getting instance info:", error)
      return {}
    }
  }

async sendMessage(chatId: string, message: string): Promise<{ success: boolean; messageId?: string }> {
    return this.sendTextMessage(chatId, message)
  }

async getChatMessages(chatId: string, limit = 50): Promise<WApiMessage[]> {
    console.log("[v0] getChatMessages called but endpoint not available - returning empty array")
    console.log("[v0] Please provide the W-API endpoint documentation for listing messages")

return []

/* Original implementation - disabled until correct endpoint is provided
    try {
      const response = await this.makeRequest(`/messages/chat/${chatId}?instanceId=${this.instanceId}&limit=${limit}`)

return (
        response.messages?.map((msg: any) => ({
          id: msg.id,
          content: msg.body || "",
          timestamp: new Date(msg.timestamp * 1000).toLocaleTimeString("pt-BR", {
            hour: "2-digit",
            minute: "2-digit",
          }),
          fromMe: msg.fromMe || false,
          status: msg.ack === 3 ? "read" : msg.ack === 2 ? "delivered" : "sent",
          type: msg.type,
          mediaUrl: msg.mediaUrl,
        })) || []
      )
    } catch (error) {
      console.error("Error getting chat messages:", error)
      return []
    }
    */
  }
}

export const wApiClient = new WApiClient()
[V0_FILE]sql:file="scripts/20-create-webhook-ao-enviar.sql" isMerged="true"
-- Create table for webhook_ao_enviar (sent messages)
CREATE TABLE IF NOT EXISTS webhook_ao_enviar (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  data JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE webhook_ao_enviar ENABLE ROW LEVEL SECURITY;

-- Create policy to allow inserts from API
CREATE POLICY "Allow webhook inserts" ON webhook_ao_enviar
  FOR INSERT
  TO anon, authenticated
  WITH CHECK (true);

-- Create policy to allow reads for authenticated users
CREATE POLICY "Allow authenticated reads" ON webhook_ao_enviar
  FOR SELECT
  TO authenticated
  USING (true);

-- Create index on created_at for better query performance
CREATE INDEX IF NOT EXISTS idx_webhook_ao_enviar_created_at 
  ON webhook_ao_enviar(created_at DESC);

-- Create index on phone number for faster lookups
CREATE INDEX IF NOT EXISTS idx_webhook_ao_enviar_phone 
  ON webhook_ao_enviar USING gin ((data->'phone'));
[V0_FILE]sql:file="scripts/21-create-webhook-ao-receber.sql" isMerged="true"
-- Create table for webhook_ao_receber (received messages)
CREATE TABLE IF NOT EXISTS webhook_ao_receber (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  data JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE webhook_ao_receber ENABLE ROW LEVEL SECURITY;

-- Create policy to allow inserts from API
CREATE POLICY "Allow webhook inserts" ON webhook_ao_receber
  FOR INSERT
  TO anon, authenticated
  WITH CHECK (true);

-- Create policy to allow reads for authenticated users
CREATE POLICY "Allow authenticated reads" ON webhook_ao_receber
  FOR SELECT
  TO authenticated
  USING (true);

-- Create index on created_at for better query performance
CREATE INDEX IF NOT EXISTS idx_webhook_ao_receber_created_at 
  ON webhook_ao_receber(created_at DESC);

-- Create index on phone number for faster lookups
CREATE INDEX IF NOT EXISTS idx_webhook_ao_receber_phone 
  ON webhook_ao_receber USING gin ((data->'phone'));
[V0_FILE]typescriptreact:file="app/whatsapp/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Sidebar } from "@/components/sidebar"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { WhatsAppQRLogin } from "@/components/whatsapp-qr-login"
import { wApiClient } from "@/lib/w-api"
import { createClient } from "@/lib/supabase/client" // Imported Supabase client
import {
  Search,
  Send,
  Video,
  MoreVertical,
  Settings,
  UserPlus,
  Archive,
  Trash2,
  Bell,
  BellOff,
  MessageCircle,
  Clock,
  CheckCheck,
  Paperclip,
  Mic,
  Edit3,
  Copy,
  Reply,
  Bot,
  BotIcon,
  X,
  RefreshCw,
  Loader2,
  Download,
  ExternalLink,
} from "lucide-react"

interface Contact {
  id: string
  name: string
  phone: string
  avatar?: string
  patientCode?: string
  doctor?: string
  lastMessage?: string
  lastMessageTime?: string
  unreadCount?: number
  isOnline?: boolean
  archived?: boolean
}

interface Message {
  id: string
  content: string
  timestamp: string
  isFromMe: boolean
  status: "sent" | "delivered" | "read"
  date?: string
  mediaType?: "text" | "image" | "video" | "audio" | "sticker" | "document" | "gif" | "contact" | "location"
  mediaUrl?: string
  mediaCaption?: string
  mediaDuration?: number
  mediaFileName?: string
}

export default function WhatsAppPage() {
  const [isConnected, setIsConnected] = useState(false)
  const [loadingChats, setLoadingChats] = useState(true)
  const [sendingMessage, setSendingMessage] = useState(false)
  const [forceConnected, setForceConnected] = useState(false)
  const [connectionChecked, setConnectionChecked] = useState(false)

const [selectedContact, setSelectedContact] = useState<Contact | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [newMessage, setNewMessage] = useState("")
  const [contactInfoOpen, setContactInfoOpen] = useState(false)
  const [isIAActive, setIsIAActive] = useState(true)
  const [editingMessage, setEditingMessage] = useState<string | null>(null)
  const [editContent, setEditContent] = useState("")
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
  const [archiveConfirmOpen, setArchiveConfirmOpen] = useState(false)
  const [messageToDelete, setMessageToDelete] = useState<string | null>(null)
  const [messages, setMessages] = useState<Message[]>([])
  const [chats, setChats] = useState<Contact[]>([])

const [editModalOpen, setEditModalOpen] = useState(false)
  const [toastMessage, setToastMessage] = useState("")
  const [showToast, setShowToast] = useState(false)
  const [activeTab, setActiveTab] = useState("chats")

const [lightboxOpen, setLightboxOpen] = useState(false)
  const [lightboxImageUrl, setLightboxImageUrl] = useState("")

const [patients, setPatients] = useState<any[]>([]) // State to hold patient data from Supabase

// Fetches patients from Supabase
  const fetchPatientsFromSupabase = async () => {
    try {
      const supabase = createClient()
      const { data, error } = await supabase.from("pactable").select("*").order("name", { ascending: true })

if (error) {
        console.error("Error fetching patients:", error)
        return []
      }

return data || []
    } catch (error) {
      console.error("Error fetching patients from Supabase:", error)
      return []
    }
  }

const fetchMessagesFromSupabase = async (contactPhone: string) => {
    try {
      const supabase = createClient()

const cleanPhone = contactPhone.replace(/\D/g, "")

console.log("[v0] ===== FETCHING MESSAGES FROM SUPABASE =====")
      console.log("[v0] Contact phone:", contactPhone)
      console.log("[v0] Clean phone:", cleanPhone)

const { data: sentMessages, error: sentError } = await supabase
        .from("webhook_ao_enviar")
        .select("*")
        .order("created_at", { ascending: true })

if (sentError) {
        console.error("[v0] Error fetching sent messages:", sentError)
      } else {
        console.log("[v0] Sent messages count:", sentMessages?.length || 0)
      }

const { data: receivedMessages, error: receivedError } = await supabase
        .from("webhook_ao_receber")
        .select("*")
        .order("created_at", { ascending: true })

if (receivedError) {
        console.error("[v0] Error fetching received messages:", receivedError)
      } else {
        console.log("[v0] Received messages count:", receivedMessages?.length || 0)
      }

const allMessages: Message[] = []

const extractMessageContent = (msgData: any): Partial<Message> => {
        const msgContent = msgData?.msgContent

if (!msgContent) return { content: "Mensagem sem conteúdo", mediaType: "text" }

// Text message
        if (msgContent.conversation) {
          return {
            content: msgContent.conversation,
            mediaType: "text",
          }
        }

if (msgContent.imageMessage) {
          const imageUrl = msgContent.imageMessage.jpegThumbnail
            ? `data:image/jpeg;base64,${msgContent.imageMessage.jpegThumbnail}`
            : msgContent.imageMessage.url || msgContent.imageMessage.directPath

return {
            content: msgContent.imageMessage.caption || "",
            mediaType: "image",
            mediaUrl: imageUrl,
            mediaCaption: msgContent.imageMessage.caption,
          }
        }

if (msgContent.videoMessage) {
          return {
            content: msgContent.videoMessage.caption || "",
            mediaType: msgContent.videoMessage.gifPlayback ? "gif" : "video",
            mediaUrl: msgContent.videoMessage.url || msgContent.videoMessage.directPath,
            mediaCaption: msgContent.videoMessage.caption,
            mediaDuration: msgContent.videoMessage.seconds,
          }
        }

if (msgContent.audioMessage) {
          console.log("[v0] Audio message data:", msgContent.audioMessage)

// WhatsApp audio URLs are encrypted, so we need to handle them specially
          // For now, we'll use the URL and let the browser try to play it
          const audioUrl = msgContent.audioMessage.url || msgContent.audioMessage.directPath

return {
            content: "",
            mediaType: "audio",
            mediaUrl: audioUrl,
            mediaDuration: msgContent.audioMessage.seconds,
          }
        }

if (msgContent.stickerMessage) {
          return {
            content: "",
            mediaType: "sticker",
            mediaUrl: msgContent.stickerMessage.url || msgContent.stickerMessage.directPath,
          }
        }

if (msgContent.documentMessage) {
          return {
            content: msgContent.documentMessage.fileName || "Documento",
            mediaType: "document",
            mediaUrl: msgContent.documentMessage.url || msgContent.documentMessage.directPath,
            mediaFileName: msgContent.documentMessage.fileName,
          }
        }

// Contact message
        if (msgContent.contactMessage) {
          return {
            content: `Contato: ${msgContent.contactMessage.displayName || "Desconhecido"}`,
            mediaType: "contact",
          }
        }

// Location message
        if (msgContent.locationMessage) {
          return {
            content: "Localização compartilhada",
            mediaType: "location",
            mediaUrl: `https://www.google.com/maps?q=${msgContent.locationMessage.degreesLatitude},${msgContent.locationMessage.degreesLongitude}`,
          }
        }

// Extended text (links with preview)
        if (msgContent.extendedTextMessage) {
          return {
            content: msgContent.extendedTextMessage.text || "Mensagem",
            mediaType: "text",
          }
        }

// Fallback for unknown message types
        console.log("[v0] Unknown message type:", Object.keys(msgContent))
        return { content: "Mensagem", mediaType: "text" }
      }

if (sentMessages) {
        sentMessages.forEach((msg) => {
          const msgPhone = msg.data?.chat?.id?.split("@")[0] || msg.data?.phone || msg.data?.to
          const msgPhoneClean = msgPhone?.replace(/\D/g, "")

console.log(
            "[v0] Sent message - Chat ID:",
            msg.data?.chat?.id,
            "Extracted phone:",
            msgPhone,
            "Clean:",
            msgPhoneClean,
          )

if (
            msgPhoneClean &&
            (msgPhoneClean === cleanPhone || cleanPhone.endsWith(msgPhoneClean) || msgPhoneClean.endsWith(cleanPhone))
          ) {
            const messageData = extractMessageContent(msg.data)

allMessages.push({
              id: msg.id,
              ...messageData,
              content: messageData.content || "Mensagem",
              timestamp: new Date(msg.created_at).toLocaleTimeString("pt-BR", {
                hour: "2-digit",
                minute: "2-digit",
              }),
              isFromMe: true,
              status: "sent",
              date:
                new Date(msg.created_at).toLocaleDateString("pt-BR") === new Date().toLocaleDateString("pt-BR")
                  ? "Hoje"
                  : new Date(msg.created_at).toLocaleDateString("pt-BR"),
              createdAt: new Date(msg.created_at).getTime(),
            } as Message & { createdAt: number })
            console.log("[v0] ✓ Matched sent message:", messageData.content?.substring(0, 50))
          }
        })
      }

if (receivedMessages) {
        receivedMessages.forEach((msg) => {
          const msgPhone = msg.data?.sender?.id?.split("@")[0] || msg.data?.phone || msg.data?.from
          const msgPhoneClean = msgPhone?.replace(/\D/g, "")

console.log(
            "[v0] Received message - Sender ID:",
            msg.data?.sender?.id,
            "Extracted phone:",
            msgPhone,
            "Clean:",
            msgPhoneClean,
          )

allMessages.push({
              id: msg.id,
              ...messageData,
              content: messageData.content || "Mensagem",
              timestamp: new Date(msg.created_at).toLocaleTimeString("pt-BR", {
                hour: "2-digit",
                minute: "2-digit",
              }),
              isFromMe: false,
              status: "delivered",
              date:
                new Date(msg.created_at).toLocaleDateString("pt-BR") === new Date().toLocaleDateString("pt-BR")
                  ? "Hoje"
                  : new Date(msg.created_at).toLocaleDateString("pt-BR"),
              createdAt: new Date(msg.created_at).getTime(),
            } as Message & { createdAt: number })
            console.log("[v0] ✓ Matched received message:", messageData.content?.substring(0, 50))
          }
        })
      }

allMessages.sort((a: any, b: any) => a.createdAt - b.createdAt)

console.log("[v0] ===== FILTERED MESSAGES FOR CONTACT =====")
      console.log("[v0] Total messages for this contact:", allMessages.length)
      console.log(
        "[v0] Sample messages:",
        allMessages.slice(0, 3).map((m) => ({ content: m.content.substring(0, 30), isFromMe: m.isFromMe })),
      )

return allMessages
    } catch (error) {
      console.error("[v0] Error fetching messages from Supabase:", error)
      return []
    }
  }

const loadPatientsAsChats = async () => {
    console.log("[v0] Starting loadPatientsAsChats")
    setLoadingChats(true)
    try {
      // Fetch all patients from Supabase
      const patientsData = await fetchPatientsFromSupabase()
      console.log("[v0] Fetched patients:", patientsData.length)
      setPatients(patientsData)

if (patientsData.length === 0) {
        showToastNotification("Nenhum paciente encontrado no banco de dados.")
        setChats([])
        return
      }

// Extract phone numbers and format them (remove non-digits, ensure country code)
      const phoneNumbers = patientsData
        .map((patient) => {
          // Check if phone exists and is a string
          if (!patient?.phone || typeof patient.phone !== "string" || patient.phone.trim() === "") {
            console.log("[v0] Patient has invalid phone:", patient?.code, patient?.phone)
            return null
          }

try {
            // Remove all non-digits
            let phone = patient.phone.replace(/\D/g, "")

// Skip if phone is empty after cleaning
            if (!phone || phone.length === 0) {
              console.log("[v0] Phone is empty after cleaning:", patient.code)
              return null
            }

// Ensure it starts with 55 (Brazil country code)
            if (!phone.startsWith("55")) {
              phone = "55" + phone
            }

return phone
          } catch (error) {
            console.error("[v0] Error processing phone for patient:", patient.code, error)
            return null
          }
        })
        .filter((phone): phone is string => phone !== null && phone.length >= 12) // Valid Brazilian phone: 55 + DDD (2) + number (8-9)

console.log("[v0] Valid phone numbers:", phoneNumbers.length)

if (phoneNumbers.length === 0) {
        showToastNotification("Nenhum número de telefone válido encontrado nos pacientes.")
        setChats([])
        return
      }

showToastNotification(`Validando ${phoneNumbers.length} números no WhatsApp...`)

// Validate phones in batch using W-API
      console.log("[v0] Calling checkPhonesExistBatch with", phoneNumbers.length, "phones")
      const validationResults = await wApiClient.checkPhonesExistBatch(phoneNumbers)
      console.log("[v0] Validation results:", validationResults)

// Create a map of validated phones
      const validatedPhonesMap = new Map(
        validationResults.map((result) => [result.inputPhone?.replace(/\D/g, "") || "", result.exists]),
      )

// Create chats for patients with validated WhatsApp numbers
      const validatedChats: Contact[] = patientsData
        .filter((patient) => {
          if (!patient?.phone || typeof patient.phone !== "string" || patient.phone.trim() === "") return false

try {
            let phone = patient.phone.replace(/\D/g, "")
            if (!phone || phone.length === 0) return false

if (!phone.startsWith("55")) {
              phone = "55" + phone
            }
            return validatedPhonesMap.get(phone) === true
          } catch (error) {
            console.error("[v0] Error filtering patient:", patient?.code, error)
            return false
          }
        })
        .map((patient) => {
          // Safe to call .replace() here because we've already validated in filter
          let phone = patient.phone!.replace(/\D/g, "")
          if (!phone.startsWith("55")) {
            phone = "55" + phone
          }

return {
            id: `${phone}@s.whatsapp.net`,
            name: patient.name || phone,
            phone: phone,
            avatar: undefined,
            patientCode: patient.code,
            doctor: "Dr. Silva", // You can enhance this to fetch from patient data
            lastMessage: undefined,
            lastMessageTime: undefined,
            unreadCount: 0,
            isOnline: false,
            archived: false,
          }
        })

console.log("[v0] Validated chats:", validatedChats.length)
      setChats(validatedChats)
      showToastNotification(
        `${validatedChats.length} de ${patientsData.length} pacientes têm WhatsApp e foram carregados!`,
      )
    } catch (error) {
      console.error("Error loading patients as chats:", error)
      showToastNotification("Erro ao carregar pacientes. Tente novamente.")
    } finally {
      setLoadingChats(false)
    }
  }

// Enriches WhatsApp contacts with patient data from Supabase
  const enrichContactsWithPatientData = (contacts: Contact[], patients: any[]): Contact[] => {
    return contacts.map((contact) => {
      // Extract phone number from contact (remove country code formatting if needed)
      const contactPhone = contact.phone.replace(/\D/g, "")

// Find matching patient by phone number
      const matchingPatient = patients.find((patient) => {
        // Ensure patient and patient.phone are not null/undefined before accessing
        if (!patient || !patient.phone || typeof patient.phone !== "string") return false
        const patientPhone = patient.phone.replace(/\D/g, "")
        return (
          patientPhone === contactPhone || patientPhone.endsWith(contactPhone) || contactPhone.endsWith(patientPhone)
        )
      })

if (matchingPatient) {
        return {
          ...contact,
          name: matchingPatient.name,
          patientCode: matchingPatient.code,
          doctor: "Dr. Silva", // Placeholder, can be enhanced to fetch from patient data
        }
      }

return contact
    })
  }

const checkConnectionStatus = async () => {
    setLoadingChats(true)

try {
      const statusResponse = await wApiClient.getInstanceStatus()

if (statusResponse.connected) {
        setIsConnected(true)
        setForceConnected(true)
        setConnectionChecked(true)

await loadPatientsAsChats()

showToastNotification("WhatsApp conectado com sucesso!")
        return true
      } else {
        setIsConnected(false)
        setForceConnected(false)
      }
    } catch (error) {
      console.error("Error checking connection status:", error)
      setIsConnected(false)
      setForceConnected(false)
    }

setLoadingChats(false)
    setConnectionChecked(true)
    return false
  }

// const loadChatsFromAPI = async (force = false) => {
  //   if (!isConnected && !forceConnected && !force) return

//   setLoadingChats(true)
  //   try {
  //     console.log("[v0] Loading chats from API, force:", force)
  //     const response = await wApiClient.fetchChats(1, 50, force)

//     if (response.chats.length === 0) {
  //       console.log("[v0] No chats returned - endpoint may not be available yet")
  //       showToastNotification("Conectado! Aguardando endpoint de listagem de conversas.")
  //       setContacts([])
  //       return
  //     }

//     const apiContacts: Contact[] = response.chats.map((chat: WApiChat, index: number) => ({
  //       id: chat.id,
  //       name: chat.name,
  //       phone: chat.phone,
  //       avatar: chat.profilePicUrl,
  //       patientCode: `P${String(index + 1).padStart(3, "0")}`,
  //       doctor: index % 3 === 0 ? "Dr. Silva" : index % 3 === 1 ? "Dr. Costa" : "Dr. Santos",
  //       lastMessage: chat.lastMessage?.content,
  //       lastMessageTime: chat.lastMessage?.timestamp,
  //       unreadCount: chat.unreadCount,
  //       isOnline: Math.random() > 0.5,
  //       archived: false,
  //     }))

//     setContacts(apiContacts)
  //     if (apiContacts.length > 0) {
  //       setForceConnected(true)
  //       setIsConnected(true)
  //     }
  //     showToastNotification(`${apiContacts.length} conversas carregadas!`)
  //   } catch (error) {
  //     console.error("Error loading chats:", error)
  //     showToastNotification("Erro ao carregar conversas")
  //   } finally {
  //     setLoadingChats(false)
  //   }
  // }

const handleSendMessage = async () => {
    if (!newMessage.trim() || !selectedContact || (!isConnected && !forceConnected)) return

setSendingMessage(true)
    try {
      const result = await wApiClient.sendMessage(selectedContact.id, newMessage)

if (result.success) {
        const newMsg: Message = {
          id: result.messageId || Date.now().toString(),
          content: newMessage,
          timestamp: new Date().toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }),
          isFromMe: true,
          status: "sent",
          date: "Hoje",
        }
        setMessages([...messages, newMsg])
        setNewMessage("")
        showToastNotification("Mensagem enviada!")
      } else {
        showToastNotification("Erro ao enviar mensagem")
      }
    } catch (error) {
      console.error("Error sending message:", error)
      showToastNotification("Erro ao enviar mensagem")
    } finally {
      setSendingMessage(false)
    }
  }

const handleContactSelect = async (contact: Contact) => {
    setSelectedContact(contact)

console.log("[v0] Loading messages for contact:", contact.name, contact.phone)
    const messagesFromSupabase = await fetchMessagesFromSupabase(contact.phone)
    setMessages(messagesFromSupabase)
  }

useEffect(() => {
    if (!connectionChecked) {
      checkConnectionStatus()
    }
  }, [connectionChecked])

// useEffect(() => {
  //   if (isConnected || forceConnected) {
  //     loadContactsFromAPI() // Removed the effect that loads chats, now we load contacts instead
  //   }
  // }, [isConnected, forceConnected])

const handleCopyMessage = (content: string) => {
    navigator.clipboard.writeText(content)
    showToastNotification("Mensagem copiada!")
  }

const handleEditMessage = (messageId: string, content: string) => {
    setEditingMessage(messageId)
    setEditContent(content)
    setEditModalOpen(true)
  }

const handleSaveEdit = () => {
    if (editingMessage && editContent.trim()) {
      setMessages(messages.map((msg) => (msg.id === editingMessage ? { ...msg, content: editContent } : msg)))
      setEditingMessage(null)
      setEditContent("")
      setEditModalOpen(false)
      showToastNotification("Mensagem editada com sucesso!")
    }
  }

const handleDeleteMessage = (messageId: string) => {
    setMessageToDelete(messageId)
    setDeleteConfirmOpen(true)
  }

const confirmDeleteMessage = () => {
    if (messageToDelete) {
      setMessages(messages.filter((msg) => msg.id !== messageToDelete))
      showToastNotification("Mensagem excluída!")
    }
    setDeleteConfirmOpen(false)
    setMessageToDelete(null)
  }

const handleArchiveConversation = () => {
    setArchiveConfirmOpen(true)
  }

const confirmArchiveConversation = () => {
    if (selectedContact) {
      // Check if the selected contact is a chat or a general contact
      const isChat = chats.some((chat) => chat.id === selectedContact.id)
      // const isContact = contacts.some((contact) => contact.id === selectedContact.id) // No longer needed

if (isChat) {
        setChats(chats.map((chat) => (chat.id === selectedContact.id ? { ...chat, archived: true } : chat)))
      }
      // else if (isContact) { // No longer needed
      //   setContacts(
      //     contacts.map((contact) => (contact.id === selectedContact.id ? { ...contact, archived: true } : contact)),
      //   )
      // }
      setSelectedContact(null)
      showToastNotification("Conversa arquivada!")
    }
    setArchiveConfirmOpen(false)
  }

const showToastNotification = (message: string) => {
    setToastMessage(message)
    setShowToast(true)
    setTimeout(() => setShowToast(false), 3000)
  }

const groupMessagesByDate = (messages: Message[]) => {
    const groups: { [key: string]: Message[] } = {}
    messages.forEach((message) => {
      const date = message.date || "Hoje"
      if (!groups[date]) {
        groups[date] = []
      }
      groups[date].push(message)
    })
    return groups
  }

const openImageLightbox = (imageUrl: string) => {
    setLightboxImageUrl(imageUrl)
    setLightboxOpen(true)
  }

const currentMessages: Message[] = selectedContact ? messages : []
  const messageGroups = groupMessagesByDate(currentMessages)

const filteredChats = chats.filter(
    (chat) =>
      !chat.archived &&
      (chat.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        chat.phone.includes(searchTerm) ||
        chat.patientCode?.toLowerCase().includes(searchTerm.toLowerCase())),
  )

const archivedContacts = chats.filter((contact) => contact.archived)

if (!connectionChecked || (loadingChats && !isConnected && !forceConnected)) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center space-y-4">
            <Loader2 className="h-12 w-12 mx-auto animate-spin text-primary" />
            <div>
              <h2 className="text-xl font-semibold mb-2">Verificando conexão do WhatsApp</h2>
              <p className="text-muted-foreground">
                Aguarde enquanto verificamos se sua instância já está conectada...
              </p>
            </div>
          </div>
        </div>
      </div>
    )
  }

if (!isConnected && !forceConnected) {
    return (
      <div className="flex h-screen bg-background">
        <Sidebar />
        <div className="flex-1 flex items-center justify-center">
          <div className="max-w-md w-full space-y-4">
            <WhatsAppQRLogin
              onConnectionSuccess={() => {
                setIsConnected(true)
                checkConnectionStatus()
              }}
            />
            <div className="text-center">
              <p className="text-sm text-muted-foreground mb-4">Ou se sua instância já está conectada:</p>
              <Button onClick={() => checkConnectionStatus()} variant="outline" disabled={loadingChats}>
                {loadingChats ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Verificando conexão...
                  </>
                ) : (
                  <>
                    <MessageCircle className="h-4 w-4 mr-2" />
                    Verificar conexão
                  </>
                )}
              </Button>
            </div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex">
        {/* Contacts Sidebar */}
        <div className="w-80 border-r bg-card flex flex-col">
          {/* Header */}
          <div className="p-4 border-b">
            <div className="flex items-center justify-between mb-4">
              <h1 className="text-xl font-semibold">WhatsApp Business</h1>
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => {
                    loadPatientsAsChats()
                    // loadContactsFromAPI() // Removed
                  }}
                  disabled={loadingChats} // Removed loadingContacts
                >
                  {loadingChats ? ( // Removed loadingContacts
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <RefreshCw className="h-4 w-4" />
                  )}
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => setIsIAActive(!isIAActive)}>
                      {isIAActive ? <BotIcon className="h-4 w-4 mr-2" /> : <Bot className="h-4 w-4 mr-2" />}
                      {isIAActive ? "Desativar IA" : "Ativar IA"}
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => setIsConnected(false)}>
                      <Settings className="h-4 w-4 mr-2" />
                      Reconectar WhatsApp
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>

{/* Search */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
            <TabsList className="grid w-full grid-cols-2 mx-4 mt-2">
              <TabsTrigger value="chats">
                Conversas
                {loadingChats && <Loader2 className="ml-2 h-3 w-3 animate-spin" />}
              </TabsTrigger>
              <TabsTrigger value="archived" className="relative">
                Arquivadas
                {archivedContacts.length > 0 && (
                  <Badge className="ml-2 h-5 w-5 p-0 text-xs">{archivedContacts.length}</Badge>
                )}
              </TabsTrigger>
            </TabsList>

<TabsContent value="chats" className="flex-1 mt-0">
              <ScrollArea className="flex-1">
                <div className="p-2">
                  {filteredChats.length === 0 && !loadingChats ? (
                    <div className="text-center py-8 px-4 text-muted-foreground">
                      <MessageCircle className="h-12 w-12 mx-auto mb-3 opacity-50" />
                      <p className="font-medium mb-2">Nenhuma conversa encontrada</p>
                      <p className="text-xs mb-4 leading-relaxed">
                        {chats.length === 0
                          ? "Suas conversas do WhatsApp aparecerão aqui. Inicie uma conversa no WhatsApp para vê-la aqui."
                          : "Tente ajustar sua busca ou recarregar as conversas."}
                      </p>
                      <Button
                        variant="outline"
                        size="sm"
                        className="mt-2 bg-transparent"
                        onClick={() => loadPatientsAsChats()}
                        disabled={loadingChats}
                      >
                        <RefreshCw className="h-4 w-4 mr-2" />
                        Recarregar Conversas
                      </Button>
                    </div>
                  ) : (
                    filteredChats.map((contact) => (
                      <div
                        key={contact.id}
                        onClick={() => handleContactSelect(contact)}
                        className={`flex items-center p-3 rounded-lg cursor-pointer hover:bg-accent transition-colors ${
                          selectedContact?.id === contact.id ? "bg-accent" : ""
                        }`}
                      >
                        <div className="relative">
                          <Avatar className="h-12 w-12">
                            <AvatarImage src={contact.avatar || "/placeholder.svg"} />
                            <AvatarFallback>
                              {contact.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          {contact.isOnline && (
                            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-background"></div>
                          )}
                        </div>

<div className="ml-3 flex-1 min-w-0">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <h3 className="font-medium truncate">{contact.name}</h3>
                              <Badge variant="outline" className="text-xs px-1 py-0">
                                {contact.patientCode}
                              </Badge>
                            </div>
                            {contact.lastMessageTime && (
                              <span className="text-xs text-muted-foreground">{contact.lastMessageTime}</span>
                            )}
                          </div>

<div className="flex items-center justify-between mt-1">
                            <div className="text-sm text-muted-foreground">
                              <div className="truncate">{contact.phone}</div>
                            </div>

{contact.unreadCount && contact.unreadCount > 0 && (
                              <Badge className="bg-green-500 text-white text-xs min-w-[20px] h-5 flex items-center justify-center">
                                {contact.unreadCount}
                              </Badge>
                            )}
                          </div>

{contact.lastMessage && (
                            <p className="text-sm text-muted-foreground truncate mt-1">{contact.lastMessage}</p>
                          )}
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </ScrollArea>
            </TabsContent>

<TabsContent value="archived" className="flex-1 mt-0">
              <ScrollArea className="flex-1">
                <div className="p-2">
                  {archivedContacts.length === 0 ? (
                    <div className="text-center py-8 text-muted-foreground">
                      <Archive className="h-12 w-12 mx-auto mb-2 opacity-50" />
                      <p>Nenhuma conversa arquivada</p>
                    </div>
                  ) : (
                    archivedContacts.map((contact) => (
                      <div
                        key={contact.id}
                        onClick={() => {
                          setChats(chats.map((c) => (c.id === contact.id ? { ...c, archived: false } : c)))
                          setSelectedContact(contact)
                          setActiveTab("chats")
                          showToastNotification("Conversa desarquivada!")
                        }}
                        className="flex items-center p-3 rounded-lg cursor-pointer hover:bg-accent transition-colors"
                      >
                        <div className="relative">
                          <Avatar className="h-12 w-12">
                            <AvatarImage src={contact.avatar || "/placeholder.svg"} />
                            <AvatarFallback>
                              {contact.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                        </div>

<div className="ml-3 flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <h3 className="font-medium truncate">{contact.name}</h3>
                            <Badge variant="outline" className="text-xs px-1 py-0">
                              {contact.patientCode}
                            </Badge>
                          </div>
                          <div className="text-sm text-muted-foreground">
                            <div className="truncate">{contact.phone}</div>
                            {contact.doctor && <div className="text-xs mt-1">{contact.doctor}</div>}
                          </div>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </ScrollArea>
            </TabsContent>
          </Tabs>
        </div>

{/* Chat Area */}
        <div className="flex-1 flex flex-col">
          {selectedContact ? (
            <>
              {/* Chat Header */}
              <div className="p-4 border-b bg-card flex items-center justify-between">
                <Dialog open={contactInfoOpen} onOpenChange={setContactInfoOpen}>
                  <DialogTrigger asChild>
                    <div className="flex items-center cursor-pointer hover:bg-accent rounded-lg p-2 -m-2">
                      <Avatar className="h-10 w-10">
                        <AvatarImage src={selectedContact.avatar || "/placeholder.svg"} />
                        <AvatarFallback>
                          {selectedContact.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="ml-3">
                        <div className="flex items-center gap-2">
                          <h2 className="font-semibold">{selectedContact.name}</h2>
                          <Badge variant="outline" className="text-xs px-1 py-0">
                            {selectedContact.patientCode}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">
                          {selectedContact.isOnline ? "Online" : "Visto por último hoje às 12:30"}
                        </p>
                      </div>
                    </div>
                  </DialogTrigger>

<DialogContent className="max-w-md">
                    <DialogHeader>
                      <DialogTitle>Informações do Contato</DialogTitle>
                    </DialogHeader>

<div className="space-y-4">
                      <div className="flex items-center space-x-4">
                        <Avatar className="h-16 w-16">
                          <AvatarImage src={selectedContact.avatar || "/placeholder.svg"} />
                          <AvatarFallback className="text-lg">
                            {selectedContact.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold text-lg">{selectedContact.name}</h3>
                            <Badge variant="outline" className="text-xs px-2 py-1">
                              {selectedContact.patientCode}
                            </Badge>
                          </div>
                          <p className="text-muted-foreground">{selectedContact.phone}</p>
                        </div>
                      </div>

<div className="space-y-2">
                        {selectedContact.doctor && (
                          <div className="flex justify-between">
                            <span className="text-sm font-medium">Médico Responsável:</span>
                            <span className="text-sm">{selectedContact.doctor}</span>
                          </div>
                        )}
                      </div>

<div className="border-t pt-4">
                        <h4 className="font-medium mb-3">Configurações Avançadas</h4>
                        <div className="space-y-2">
                          <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                            <Bell className="h-4 w-4 mr-2" />
                            Notificações Ativadas
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            className="w-full justify-start bg-transparent"
                            onClick={() => setIsIAActive(!isIAActive)}
                          >
                            {isIAActive ? <Bot className="h-4 w-4 mr-2" /> : <BotIcon className="h-4 w-4 mr-2" />}
                            IA Automatizada: {isIAActive ? "Ativa" : "Inativa"}
                          </Button>
                          <Button variant="outline" size="sm" className="w-full justify-start bg-transparent">
                            <Clock className="h-4 w-4 mr-2" />
                            Lembretes Automáticos
                          </Button>
                        </div>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>

<div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon">
                    <Video className="h-4 w-4" />
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>
                        <UserPlus className="h-4 w-4 mr-2" />
                        Ver Perfil do Paciente
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={handleArchiveConversation}>
                        <Archive className="h-4 w-4 mr-2" />
                        Arquivar Conversa
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <BellOff className="h-4 w-4 mr-2" />
                        Silenciar
                      </DropdownMenuItem>
                      <DropdownMenuItem className="text-red-600">
                        <Trash2 className="h-4 w-4 mr-2" />
                        Excluir Conversa
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>

{/* Messages */}
              <ScrollArea className="flex-1 p-4">
                <div className="space-y-4">
                  {Object.entries(messageGroups).map(([date, dateMessages]) => (
                    <div key={date}>
                      <div className="flex justify-center my-4">
                        <div className="bg-muted px-3 py-1 rounded-full text-xs text-muted-foreground">{date}</div>
                      </div>

{dateMessages.map((message) => (
                        <div
                          key={message.id}
                          className={`flex mb-2 ${message.isFromMe ? "justify-end" : "justify-start"}`}
                        >
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <div
                                className={`max-w-lg px-4 py-2 rounded-lg cursor-pointer hover:shadow-md transition-shadow ${
                                  message.isFromMe ? "bg-green-500 text-white" : "bg-card border"
                                }`}
                              >
                                {message.mediaType === "image" && message.mediaUrl && (
                                  <div>
                                    <img
                                      src={message.mediaUrl || "/placeholder.svg"}
                                      alt="Imagem"
                                      className="rounded-lg max-w-full h-auto cursor-pointer hover:opacity-90 transition-opacity"
                                      style={{ maxHeight: "600px", maxWidth: "600px" }}
                                      onClick={(e) => {
                                        e.stopPropagation()
                                        openImageLightbox(message.mediaUrl!)
                                      }}
                                    />
                                    {message.mediaCaption && <p className="text-sm mt-2">{message.mediaCaption}</p>}
                                  </div>
                                )}

{message.mediaType === "video" && message.mediaUrl && (
                                  <div>
                                    <video
                                      src={message.mediaUrl}
                                      controls
                                      className="rounded-lg max-w-full h-auto"
                                      style={{ maxHeight: "600px", maxWidth: "600px" }}
                                    >
                                      Seu navegador não suporta vídeos.
                                    </video>
                                    {message.mediaCaption && <p className="text-sm mt-2">{message.mediaCaption}</p>}
                                  </div>
                                )}

{message.mediaType === "gif" && message.mediaUrl && (
                                  <div>
                                    <video
                                      src={message.mediaUrl}
                                      autoPlay
                                      loop
                                      muted
                                      className="rounded-lg max-w-full h-auto"
                                      style={{ maxHeight: "600px", maxWidth: "600px" }}
                                    >
                                      Seu navegador não suporta GIFs.
                                    </video>
                                    {message.mediaCaption && <p className="text-sm mt-2">{message.mediaCaption}</p>}
                                  </div>
                                )}

{message.mediaType === "audio" && message.mediaUrl && (
                                  <div className="space-y-1">
                                    <audio src={message.mediaUrl} controls className="w-full max-w-md">
                                      Seu navegador não suporta áudio.
                                    </audio>
                                    {message.mediaDuration && (
                                      <p className="text-xs opacity-70">{message.mediaDuration}s</p>
                                    )}
                                  </div>
                                )}

{message.mediaType === "sticker" && message.mediaUrl && (
                                  <div>
                                    <img
                                      src={message.mediaUrl || "/placeholder.svg"}
                                      alt="Figurinha"
                                      className="rounded-lg"
                                      style={{ maxWidth: "200px", maxHeight: "200px" }}
                                    />
                                  </div>
                                )}

{message.mediaType === "document" && (
                                  <div className="flex items-center space-x-2">
                                    <Paperclip className="h-4 w-4" />
                                    <span className="text-sm">{message.mediaFileName || "Documento"}</span>
                                  </div>
                                )}

{message.mediaType === "location" && message.mediaUrl && (
                                  <div>
                                    <a
                                      href={message.mediaUrl}
                                      target="_blank"
                                      rel="noopener noreferrer"
                                      className="text-sm underline"
                                    >
                                      📍 Ver localização no mapa
                                    </a>
                                  </div>
                                )}

{message.mediaType === "text" && message.content && (
                                  <p className="text-sm">{message.content}</p>
                                )}

{message.mediaType === "contact" && message.content && (
                                  <p className="text-sm">{message.content}</p>
                                )}

<div
                                  className={`flex items-center justify-end mt-1 space-x-1 ${
                                    message.isFromMe ? "text-green-100" : "text-muted-foreground"
                                  }`}
                                >
                                  <span className="text-xs">{message.timestamp}</span>
                                  {message.isFromMe && (
                                    <CheckCheck
                                      className={`h-3 w-3 ${message.status === "read" ? "text-blue-200" : "text-green-100"}`}
                                    />
                                  )}
                                </div>
                              </div>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent>
                              <DropdownMenuItem>
                                <Reply className="h-4 w-4 mr-2" />
                                Responder
                              </DropdownMenuItem>

{message.mediaType === "image" && message.mediaUrl && (
                                <>
                                  <DropdownMenuItem onClick={() => openImageLightbox(message.mediaUrl!)}>
                                    <ExternalLink className="h-4 w-4 mr-2" />
                                    Abrir Foto
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={() => {
                                      const link = document.createElement("a")
                                      link.href = message.mediaUrl!
                                      link.download = "imagem.jpg"
                                      link.click()
                                    }}
                                  >
                                    <Download className="h-4 w-4 mr-2" />
                                    Baixar Foto
                                  </DropdownMenuItem>
                                </>
                              )}

{message.mediaType === "video" && message.mediaUrl && (
                                <>
                                  <DropdownMenuItem onClick={() => window.open(message.mediaUrl, "_blank")}>
                                    <ExternalLink className="h-4 w-4 mr-2" />
                                    Abrir Vídeo
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={() => {
                                      const link = document.createElement("a")
                                      link.href = message.mediaUrl!
                                      link.download = "video.mp4"
                                      link.click()
                                    }}
                                  >
                                    <Download className="h-4 w-4 mr-2" />
                                    Baixar Vídeo
                                  </DropdownMenuItem>
                                </>
                              )}

{message.mediaType === "gif" && message.mediaUrl && (
                                <>
                                  <DropdownMenuItem onClick={() => window.open(message.mediaUrl, "_blank")}>
                                    <ExternalLink className="h-4 w-4 mr-2" />
                                    Abrir GIF
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={() => {
                                      const link = document.createElement("a")
                                      link.href = message.mediaUrl!
                                      link.download = "gif.mp4"
                                      link.click()
                                    }}
                                  >
                                    <Download className="h-4 w-4 mr-2" />
                                    Baixar GIF
                                  </DropdownMenuItem>
                                </>
                              )}

{message.mediaType === "audio" && message.mediaUrl && (
                                <DropdownMenuItem
                                  onClick={() => {
                                    const link = document.createElement("a")
                                    link.href = message.mediaUrl!
                                    link.download = "audio.ogg"
                                    link.click()
                                  }}
                                >
                                  <Download className="h-4 w-4 mr-2" />
                                  Baixar Áudio
                                </DropdownMenuItem>
                              )}

{message.content && message.mediaType === "text" && (
                                <DropdownMenuItem onClick={() => handleCopyMessage(message.content)}>
                                  <Copy className="h-4 w-4 mr-2" />
                                  Copiar
                                </DropdownMenuItem>
                              )}

{message.isFromMe && message.mediaType === "text" && (
                                <DropdownMenuItem onClick={() => handleEditMessage(message.id, message.content)}>
                                  <Edit3 className="h-4 w-4 mr-2" />
                                  Editar
                                </DropdownMenuItem>
                              )}

<DropdownMenuItem
                                className="text-red-600"
                                onClick={() => handleDeleteMessage(message.id)}
                              >
                                <Trash2 className="h-4 w-4 mr-2" />
                                Apagar para mim
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              </ScrollArea>

{/* Message Input */}
              <div className="p-4 border-t bg-card">
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="icon">
                    <Paperclip className="h-4 w-4" />
                  </Button>
                  <Input
                    placeholder="Digite uma mensagem..."
                    value={newMessage}
                    onChange={(e) => setNewMessage(e.target.value)}
                    onKeyPress={(e) => e.key === "Enter" && !sendingMessage && handleSendMessage()}
                    className="flex-1"
                    disabled={sendingMessage}
                  />
                  {newMessage.trim() ? (
                    <Button onClick={handleSendMessage} size="icon" disabled={sendingMessage}>
                      {sendingMessage ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                    </Button>
                  ) : (
                    <Button variant="ghost" size="icon">
                      <Mic className="h-4 w-4" />
                    </Button>
                  )}
                </div>

{isIAActive && (
                  <div className="flex items-center justify-center mt-2">
                    <div className="flex items-center space-x-1 text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full">
                      <Bot className="h-3 w-3" />
                      <span>IA Ativa - Respostas automáticas habilitadas</span>
                    </div>
                  </div>
                )}
              </div>
            </>
          ) : (
            <div className="flex-1 flex items-center justify-center bg-muted/20">
              <div className="text-center max-w-md">
                <div className="mb-6">
                  <MessageCircle className="h-24 w-24 mx-auto text-muted-foreground mb-4" />
                  <h2 className="text-2xl font-semibold mb-2">WhatsApp Business</h2>
                  <p className="text-muted-foreground">Gerencie todas as conversas com seus pacientes em um só lugar</p>
                </div>

<div className="space-y-3 text-sm text-muted-foreground">
                  <div className="flex items-center justify-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span>Conectado via W-API</span>
                  </div>
                  <div className="flex items-center justify-center space-x-2">
                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    <span>Integração com agenda e pacientes</span>
                  </div>
                  <div className="flex items-center justify-center space-x-2">
                    <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                    <span>Lembretes automáticos de consultas</span>
                  </div>
                </div>

<p className="text-xs text-muted-foreground mt-6">Selecione um contato para começar a conversar</p>
              </div>
            </div>
          )}
        </div>
      </div>

<Dialog open={editModalOpen} onOpenChange={setEditModalOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Editar Mensagem</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <Textarea
              value={editContent}
              onChange={(e) => setEditContent(e.target.value)}
              placeholder="Digite sua mensagem..."
              className="min-h-[100px]"
            />
            <div className="flex justify-end space-x-2">
              <Button variant="outline" onClick={() => setEditModalOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleSaveEdit}>Salvar</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Excluir mensagem</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja excluir esta mensagem? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDeleteMessage} className="bg-red-600 hover:bg-red-700">
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

<AlertDialog open={archiveConfirmOpen} onOpenChange={setArchiveConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Arquivar conversa</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja arquivar esta conversa? Ela será removida da lista principal mas poderá ser
              acessada na seção de arquivadas.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={confirmArchiveConversation}>Arquivar</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

{showToast && (
        <div className="fixed top-4 right-4 z-50 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center space-x-2 animate-in slide-in-from-right">
          <CheckCheck className="h-4 w-4" />
          <span>{toastMessage}</span>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6 text-white hover:bg-green-700"
            onClick={() => setShowToast(false)}
          >
            <X className="h-3 w-3" />
          </Button>
        </div>
      )}

{lightboxOpen && (
        <div
          className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
          onClick={() => setLightboxOpen(false)}
        >
          <Button
            variant="ghost"
            size="icon"
            className="absolute top-4 right-4 text-white hover:bg-white/20"
            onClick={() => setLightboxOpen(false)}
          >
            <X className="h-6 w-6" />
          </Button>
          <img
            src={lightboxImageUrl || "/placeholder.svg"}
            alt="Imagem em tela cheia"
            className="max-w-full max-h-full object-contain"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}
    </div>
  )
}
[V0_FILE]sql:file="scripts/22-create-status-history-table.sql" isMerged="true"
-- =====================================================
-- TABELA DE HISTÓRICO DE STATUS
-- =====================================================
-- Esta tabela registra todas as mudanças de status dos agendamentos
-- com timestamp para auditoria completa

CREATE TABLE IF NOT EXISTS "agenda-status-history" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  consulta_id UUID NOT NULL REFERENCES "agenda-consultas"(id) ON DELETE CASCADE,
  status_anterior_id UUID REFERENCES "agenda-status"(id),
  status_novo_id UUID NOT NULL REFERENCES "agenda-status"(id),
  changed_at TIMESTAMPTZ DEFAULT NOW(),
  changed_by TEXT, -- Nome do usuário que fez a mudança
  observacoes TEXT, -- Observações sobre a mudança
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Índices para performance
CREATE INDEX IF NOT EXISTS idx_status_history_consulta ON "agenda-status-history"(consulta_id);
CREATE INDEX IF NOT EXISTS idx_status_history_changed_at ON "agenda-status-history"(changed_at DESC);

COMMENT ON TABLE "agenda-status-history" IS 'Histórico completo de todas as mudanças de status dos agendamentos';
COMMENT ON COLUMN "agenda-status-history".status_anterior_id IS 'Status anterior (NULL se for o primeiro status)';
COMMENT ON COLUMN "agenda-status-history".status_novo_id IS 'Novo status aplicado';
COMMENT ON COLUMN "agenda-status-history".changed_at IS 'Data e hora exata da mudança';
COMMENT ON COLUMN "agenda-status-history".changed_by IS 'Usuário que realizou a mudança';

-- =====================================================
-- FUNÇÃO PARA REGISTRAR MUDANÇAS DE STATUS AUTOMATICAMENTE
-- =====================================================

CREATE OR REPLACE FUNCTION log_status_change()
RETURNS TRIGGER AS $$
BEGIN
  -- Só registra se o status realmente mudou
  IF (TG_OP = 'UPDATE' AND OLD.status_id IS DISTINCT FROM NEW.status_id) THEN
    INSERT INTO "agenda-status-history" (
      consulta_id,
      status_anterior_id,
      status_novo_id,
      changed_at,
      observacoes
    ) VALUES (
      NEW.id,
      OLD.status_id,
      NEW.status_id,
      NOW(),
      'Status alterado automaticamente'
    );
  ELSIF (TG_OP = 'INSERT') THEN
    -- Registra o status inicial quando uma consulta é criada
    INSERT INTO "agenda-status-history" (
      consulta_id,
      status_anterior_id,
      status_novo_id,
      changed_at,
      observacoes
    ) VALUES (
      NEW.id,
      NULL,
      NEW.status_id,
      NOW(),
      'Consulta criada'
    );
  END IF;
  
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Criar trigger para registrar mudanças automaticamente
DROP TRIGGER IF EXISTS trigger_log_status_change ON "agenda-consultas";
CREATE TRIGGER trigger_log_status_change
AFTER INSERT OR UPDATE OF status_id ON "agenda-consultas"
FOR EACH ROW
EXECUTE FUNCTION log_status_change();

COMMENT ON FUNCTION log_status_change() IS 'Registra automaticamente todas as mudanças de status em agenda-status-history';
[V0_FILE]sql:file="scripts/23-seed-default-statuses.sql" isMerged="true"
-- =====================================================
-- SEED DE STATUS PADRÃO
-- =====================================================
-- Insere os status padrão do sistema se não existirem

-- Limpar status existentes (opcional - remova se quiser manter os existentes)
-- DELETE FROM "agenda-status";

-- Inserir status padrão com cores específicas
INSERT INTO "agenda-status" (nome, cor) VALUES
  ('Agendado', '#3B82F6'),      -- Azul
  ('Confirmado', '#10B981'),    -- Verde
  ('Em espera', '#F59E0B'),     -- Amarelo/Laranja
  ('Em atendimento', '#F97316'), -- Laranja
  ('Atendido', '#22C55E'),      -- Verde claro
  ('Atrasado', '#DC2626'),      -- Vermelho
  ('Faltou', '#EF4444'),        -- Vermelho claro
  ('Cancelado', '#6B7280')      -- Cinza
ON CONFLICT (nome) DO UPDATE SET
  cor = EXCLUDED.cor;

COMMENT ON TABLE "agenda-status" IS 'Status disponíveis para agendamentos - podem ser gerenciados dinamicamente';
[V0_FILE]typescript:file="components/new-appointment-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } 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 { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { format } from "date-fns"
import { User, Mail, Phone, Calendar, Clock, Search, Check, Plus, Settings, Palette, Edit2, Trash2 } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { createClient } from "@/lib/supabase/client"
import { toast } from "@/hooks/use-toast"

interface Professional {
  id: string
  name: string
  color: string
  active: boolean
}

interface Patient {
  id: string
  name: string
  phone?: string
  email?: string
  address?: string
  birth_date?: string
  notes?: string
  prontuario?: string
}

interface Procedure {
  id: string
  name: string
  color: string
  active: boolean
}

interface NewAppointmentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  professionals: Professional[]
  patients: Patient[]
  selectedProfessional: string
  selectedTime: string
  selectedDate: Date
  appointments?: Array<{
    professional_id: string
    start_time: string
    end_time: string
    date: string
  }>
  onSave: (appointmentData: {
    professionalId: string
    patientName: string
    patientEmail?: string
    patientPhone?: string
    startTime: string
    endTime: string
    type: "consulta" | "compromisso" | "evento"
    isFirstConsultation?: boolean
    referralSource?: string
    procedures?: string[]
    notes?: string
    confirmationSettings?: {
      sendNow: boolean
      cliniMe: boolean
      whatsapp: boolean
      sms: boolean
      email: boolean
    }
    alertSettings?: {
      timing: string
      cliniMe: boolean
      whatsapp: boolean
      sms: boolean
      email: boolean
    }
  }) => void
}

export function NewAppointmentDialog({
  open,
  onOpenChange,
  professionals,
  patients,
  selectedProfessional,
  selectedTime,
  selectedDate,
  appointments = [],
  onSave,
}: NewAppointmentDialogProps) {
  const [procedures, setProcedures] = useState<Procedure[]>([
    { id: "1", name: "Consulta Inicial", color: "bg-blue-500", active: true },
    { id: "2", name: "Limpeza", color: "bg-green-500", active: true },
    { id: "3", name: "Restauração", color: "bg-yellow-500", active: true },
    { id: "4", name: "Canal", color: "bg-red-500", active: true },
    { id: "5", name: "Extração", color: "bg-red-700", active: true },
    { id: "6", name: "Implante", color: "bg-purple-500", active: true },
    { id: "7", name: "Ortodontia", color: "bg-pink-500", active: true },
    { id: "8", name: "Clareamento", color: "bg-cyan-500", active: true },
    { id: "9", name: "Prótese", color: "bg-orange-500", active: true },
    { id: "10", name: "Cirurgia", color: "bg-red-800", active: true },
  ])

const [procedureManagerOpen, setProcedureManagerOpen] = useState(false)
  const [editingProcedure, setEditingProcedure] = useState<Procedure | null>(null)
  const [newProcedureName, setNewProcedureName] = useState("")
  const [newProcedureColor, setNewProcedureColor] = useState("bg-blue-500")

const [formData, setFormData] = useState({
    professionalId: "",
    patientName: "",
    patientEmail: "",
    patientPhone: "",
    startTime: "",
    endTime: "",
    isFirstConsultation: false,
    referralSource: "",
    procedures: [] as string[],
    notes: "",
    confirmationSettings: {
      sendNow: true,
      cliniMe: false,
      whatsapp: false,
      sms: false,
      email: false,
    },
    alertSettings: {
      timing: "Um dia antes",
      cliniMe: false,
      whatsapp: false,
      sms: false,
      email: false,
    },
  })

const [patientSearch, setPatientSearch] = useState("")
  const [patientOpen, setPatientOpen] = useState(false)
  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null)
  const [supabasePatients, setSupabasePatients] = useState<Patient[]>([])
  const [loadingPatients, setLoadingPatients] = useState(false)

const [startTimeOpen, setStartTimeOpen] = useState(false)
  const [endTimeOpen, setEndTimeOpen] = useState(false)

const filteredPatients = useMemo(() => {
    const patientsToFilter = supabasePatients.length > 0 ? supabasePatients : patients

if (!patientSearch) return patientsToFilter.slice(0, 10)

const searchLower = patientSearch.toLowerCase()
    return patientsToFilter
      .filter((patient) => {
        if (patient.name.toLowerCase().includes(searchLower)) return true
        if (patient.phone?.includes(patientSearch)) return true
        if (patient.email?.toLowerCase().includes(searchLower)) return true
        if (patient.prontuario?.includes(searchLower)) return true
        if (patient.id.includes(patientSearch)) return true
        return false
      })
      .slice(0, 10)
  }, [supabasePatients, patients, patientSearch])

const colorOptions = [
    "bg-blue-500",
    "bg-green-500",
    "bg-yellow-500",
    "bg-red-500",
    "bg-purple-500",
    "bg-pink-500",
    "bg-cyan-500",
    "bg-orange-500",
    "bg-indigo-500",
    "bg-teal-500",
    "bg-red-700",
    "bg-red-800",
    "bg-blue-700",
    "bg-green-700",
    "bg-purple-700",
  ]

const referralSources = [
    "Google",
    "Instagram",
    "Facebook",
    "Indicação de amigo",
    "Indicação médica",
    "Placa na rua",
    "Panfleto",
    "Site da clínica",
    "WhatsApp Business",
    "Outros",
  ]

const isTimeSlotOccupied = useMemo(() => {
    const dateStr = format(selectedDate, "yyyy-MM-dd")
    const occupiedSlots = new Set<string>()

appointments.forEach((apt) => {
      if (apt.professional_id === formData.professionalId && apt.date === dateStr) {
        // Mark all time slots between start and end as occupied
        const startHour = Number.parseInt(apt.start_time.split(":")[0])
        const startMinute = Number.parseInt(apt.start_time.split(":")[1])
        const endHour = Number.parseInt(apt.end_time.split(":")[0])
        const endMinute = Number.parseInt(apt.end_time.split(":")[1])

timeSlots.forEach((slot) => {
          const slotHour = Number.parseInt(slot.split(":")[0])
          const slotMinute = Number.parseInt(slot.split(":")[1])
          const slotTime = slotHour * 60 + slotMinute
          const startTime = startHour * 60 + startMinute
          const endTime = endHour * 60 + endMinute

if (slotTime >= startTime && slotTime < endTime) {
            occupiedSlots.add(slot)
          }
        })
      }
    })

return (timeSlot: string) => occupiedSlots.has(timeSlot)
  }, [appointments, formData.professionalId, selectedDate, timeSlots])

useEffect(() => {
    if (open) {
      setFormData((prev) => ({
        ...prev,
        professionalId: selectedProfessional || "",
        startTime: selectedTime || "",
        endTime: calculateEndTime(selectedTime || ""),
      }))
    }
  }, [open, selectedProfessional, selectedTime])

useEffect(() => {
    if (!open) {
      setFormData({
        professionalId: "",
        patientName: "",
        patientEmail: "",
        patientPhone: "",
        startTime: "",
        endTime: "",
        isFirstConsultation: false,
        referralSource: "",
        procedures: [],
        notes: "",
        confirmationSettings: {
          sendNow: true,
          cliniMe: false,
          whatsapp: false,
          sms: false,
          email: false,
        },
        alertSettings: {
          timing: "Um dia antes",
          cliniMe: false,
          whatsapp: false,
          sms: false,
          email: false,
        },
      })
      setPatientSearch("")
      setSelectedPatient(null)
      setPatientOpen(false)
      setStartTimeOpen(false)
      setEndTimeOpen(false)
    }
  }, [open])

const calculateEndTime = (startTime: string) => {
    if (!startTime) return ""
    const [hours, minutes] = startTime.split(":").map(Number)
    const endHours = hours + 1
    return `${endHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`
  }

const handlePatientSelect = (patient: Patient) => {
    console.log("[v0] Patient selected:", patient)
    setSelectedPatient(patient)
    setPatientSearch(patient.name)
    setFormData((prev) => ({
      ...prev,
      patientName: patient.name,
      patientEmail: patient.email || "",
      patientPhone: patient.phone || "",
    }))
    setPatientOpen(false)
  }

const handleSave = () => {
    console.log("[v0] Saving appointment with data:", formData)

if (!formData.professionalId || !formData.patientName || !formData.startTime || !formData.endTime) {
      console.log("[v0] Missing required fields")
      return
    }

onSave({
      professionalId: formData.professionalId,
      patientName: formData.patientName,
      patientEmail: formData.patientEmail,
      patientPhone: formData.patientPhone,
      startTime: formData.startTime,
      endTime: formData.endTime,
      type: "consulta",
      isFirstConsultation: formData.isFirstConsultation,
      referralSource: formData.referralSource,
      procedures: formData.procedures,
      notes: formData.notes,
      confirmationSettings: formData.confirmationSettings,
      alertSettings: formData.alertSettings,
    })

onOpenChange(false)
  }

const toggleProcedure = (procedure: string) => {
    setFormData((prev) => ({
      ...prev,
      procedures: prev.procedures.includes(procedure)
        ? prev.procedures.filter((p) => p !== procedure)
        : [...prev.procedures, procedure],
    }))
  }

const addNewProcedure = () => {
    if (!newProcedureName.trim()) return

const newProcedure: Procedure = {
      id: Date.now().toString(),
      name: newProcedureName.trim(),
      color: newProcedureColor,
      active: true,
    }

setProcedures((prev) => [...prev, newProcedure])
    setNewProcedureName("")
    setNewProcedureColor("bg-blue-500")
  }

const updateProcedure = (id: string, updates: Partial<Procedure>) => {
    setProcedures((prev) => prev.map((proc) => (proc.id === id ? { ...proc, ...updates } : proc)))
  }

const deleteProcedure = (id: string) => {
    setProcedures((prev) => prev.filter((proc) => proc.id !== id))
  }

const getProcedureColor = (procedureName: string) => {
    const procedure = procedures.find((p) => p.name === procedureName)
    return procedure?.color || "bg-gray-500"
  }

useEffect(() => {
    const fetchPatients = async () => {
      if (!open) return

setLoadingPatients(true)
      try {
        const supabase = createClient()
        const { data, error } = await supabase
          .from("agenda-pacientes")
          .select("*")
          .order("nome", { ascending: true })
          .limit(100)

if (error) {
          console.error("[v0] Error fetching patients:", error)
          toast({
            title: "Erro",
            description: "Erro ao carregar pacientes do banco de dados.",
            variant: "destructive",
          })
          return
        }

const patientsData: Patient[] = data.map((p: any) => ({
          id: p.id,
          name: p.nome,
          phone: p.telefone,
          email: p.email,
          address: p.endereco,
          birth_date: p.data_nascimento,
          prontuario: p.prontuario,
        }))

setSupabasePatients(patientsData)
        console.log("[v0] Loaded patients from Supabase:", patientsData.length)
      } catch (error) {
        console.error("[v0] Unexpected error fetching patients:", error)
      } finally {
        setLoadingPatients(false)
      }
    }

fetchPatients()
  }, [open])

<div className="space-y-6">
            <Card>
              <CardHeader className="space-y-0">
                <CardTitle className="text-sm flex items-center gap-2">
                  <User className="h-4 w-4" />
                  Informações do Paciente
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-[7px]">
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label>Paciente</Label>
                    <Popover open={patientOpen} onOpenChange={setPatientOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={patientOpen}
                          className="w-full justify-between bg-transparent"
                          disabled={loadingPatients}
                        >
                          {loadingPatients
                            ? "Carregando..."
                            : selectedPatient
                              ? selectedPatient.name
                              : "Buscar paciente..."}
                          <Search className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput
                            placeholder="Digite nome, telefone, email ou prontuário..."
                            value={patientSearch}
                            onValueChange={setPatientSearch}
                          />
                          <CommandList>
                            <CommandEmpty>
                              <div className="p-4 text-center">
                                <p className="text-sm text-muted-foreground mb-2">Nenhum paciente encontrado.</p>
                                <Button
                                  type="button"
                                  variant="outline"
                                  size="sm"
                                  onClick={() => {
                                    setFormData((prev) => ({ ...prev, patientName: patientSearch }))
                                    setPatientOpen(false)
                                  }}
                                >
                                  Usar "{patientSearch}" como novo paciente
                                </Button>
                              </div>
                            </CommandEmpty>
                            <CommandGroup>
                              {filteredPatients.map((patient) => (
                                <CommandItem
                                  key={patient.id}
                                  value={patient.name}
                                  onSelect={() => handlePatientSelect(patient)}
                                  className="flex flex-col items-start p-3"
                                >
                                  <div className="flex items-center w-full">
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        selectedPatient?.id === patient.id ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    <div className="flex-1">
                                      <div className="font-medium">{patient.name}</div>
                                      <div className="text-sm text-muted-foreground">
                                        {patient.prontuario && `Prontuário: ${patient.prontuario}`}
                                        {patient.phone && ` • ${patient.phone}`}
                                        {patient.email && ` • ${patient.email}`}
                                      </div>
                                    </div>
                                  </div>
                                </CommandItem>
                              ))}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                  <div className="space-y-2">
                    <Label className="flex items-center gap-2">
                      <Mail className="h-4 w-4" />
                      Email
                    </Label>
                    <Input
                      type="email"
                      value={formData.patientEmail}
                      onChange={(e) => setFormData((prev) => ({ ...prev, patientEmail: e.target.value }))}
                      placeholder="email@exemplo.com"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="flex items-center gap-2">
                      <Phone className="h-4 w-4" />
                      Celular
                    </Label>
                    <Input
                      value={formData.patientPhone}
                      onChange={(e) => setFormData((prev) => ({ ...prev, patientPhone: e.target.value }))}
                      placeholder="(11) 99999-9999"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="space-y-[7px]">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Calendar className="h-4 w-4" />
                  Detalhes do Agendamento
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-4 gap-4">
                  <div className="space-y-2">
                    <Label>Data</Label>
                    <Input type="date" value={format(selectedDate, "yyyy-MM-dd")} readOnly />
                  </div>
                  <div className="space-y-3.5">
                    <Label className="flex items-center gap-2">
                      <Clock className="h-4 w-4" />
                      Horário Início
                    </Label>
                    <Popover open={startTimeOpen} onOpenChange={setStartTimeOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={startTimeOpen}
                          className="w-full justify-between bg-transparent"
                        >
                          {formData.startTime || "Selecionar horário"}
                          <Clock className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="Buscar horário..." />
                          <CommandList>
                            <CommandEmpty>Nenhum horário encontrado.</CommandEmpty>
                            <CommandGroup>
                              {timeSlots.map((slot) => {
                                const occupied = isTimeSlotOccupied(slot)
                                return (
                                  <CommandItem
                                    key={slot}
                                    value={slot}
                                    onSelect={() => {
                                      setFormData((prev) => ({
                                        ...prev,
                                        startTime: slot,
                                        endTime: calculateEndTime(slot),
                                      }))
                                      setStartTimeOpen(false)
                                    }}
                                    className={cn("flex items-center justify-between", occupied && "text-red-600")}
                                  >
                                    <div className="flex items-center">
                                      <Check
                                        className={cn(
                                          "mr-2 h-4 w-4",
                                          formData.startTime === slot ? "opacity-100" : "opacity-0",
                                        )}
                                      />
                                      {slot}
                                    </div>
                                    {occupied && (
                                      <Badge variant="destructive" className="text-xs">
                                        Ocupado
                                      </Badge>
                                    )}
                                  </CommandItem>
                                )
                              })}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                  <div className="space-y-2">
                    <Label>Horário Fim</Label>
                    <Popover open={endTimeOpen} onOpenChange={setEndTimeOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={endTimeOpen}
                          className="w-full justify-between bg-transparent"
                        >
                          {formData.endTime || "Selecionar horário"}
                          <Clock className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="Buscar horário..." />
                          <CommandList>
                            <CommandEmpty>Nenhum horário encontrado.</CommandEmpty>
                            <CommandGroup>
                              {timeSlots.map((slot) => {
                                const occupied = isTimeSlotOccupied(slot)
                                return (
                                  <CommandItem
                                    key={slot}
                                    value={slot}
                                    onSelect={() => {
                                      setFormData((prev) => ({
                                        ...prev,
                                        endTime: slot,
                                      }))
                                      setEndTimeOpen(false)
                                    }}
                                    className={cn("flex items-center justify-between", occupied && "text-red-600")}
                                  >
                                    <div className="flex items-center">
                                      <Check
                                        className={cn(
                                          "mr-2 h-4 w-4",
                                          formData.endTime === slot ? "opacity-100" : "opacity-0",
                                        )}
                                      />
                                      {slot}
                                    </div>
                                    {occupied && (
                                      <Badge variant="destructive" className="text-xs">
                                        Ocupado
                                      </Badge>
                                    )}
                                  </CommandItem>
                                )
                              })}
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                  <div className="space-y-2">
                    <Label>Profissional</Label>
                    <Select
                      value={formData.professionalId}
                      onValueChange={(value) => setFormData((prev) => ({ ...prev, professionalId: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione" />
                      </SelectTrigger>
                      <SelectContent>
                        {professionals.map((prof) => (
                          <SelectItem key={prof.id} value={prof.id}>
                            {prof.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="flex items-center space-x-2">
                  <Checkbox
                    id="firstConsultation"
                    checked={formData.isFirstConsultation}
                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, isFirstConsultation: !!checked }))}
                  />
                  <Label htmlFor="firstConsultation">Primeira Consulta</Label>
                </div>

{formData.isFirstConsultation && (
                  <div className="space-y-2">
                    <Label>Como conheceu nossa clínica?</Label>
                    <Select
                      value={formData.referralSource}
                      onValueChange={(value) => setFormData((prev) => ({ ...prev, referralSource: value }))}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Selecione como o paciente nos conheceu" />
                      </SelectTrigger>
                      <SelectContent>
                        {referralSources.map((source) => (
                          <SelectItem key={source} value={source}>
                            {source}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                )}
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-sm flex items-center justify-between">
                  <span>Procedimentos</span>
                  <div className="flex gap-2">
                    <Button type="button" variant="outline" size="sm" onClick={() => setProcedureManagerOpen(true)}>
                      <Settings className="h-4 w-4 mr-1" />
                      Gerenciar
                    </Button>
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {procedures
                    .filter((p) => p.active)
                    .map((procedure) => (
                      <Badge
                        key={procedure.id}
                        variant={formData.procedures.includes(procedure.name) ? "default" : "outline"}
                        className={cn(
                          "cursor-pointer transition-all flex items-center gap-2",
                          formData.procedures.includes(procedure.name)
                            ? `${procedure.color} text-white hover:opacity-80`
                            : "hover:bg-gray-100",
                        )}
                        onClick={() => toggleProcedure(procedure.name)}
                      >
                        <div
                          className={`w-2 h-2 rounded-full ${procedure.color} ${formData.procedures.includes(procedure.name) ? "bg-white/80" : ""}`}
                        />
                        {procedure.name}
                      </Badge>
                    ))}
                </div>
              </CardContent>
            </Card>

<div className="space-y-2">
              <Label>Observações</Label>
              <Textarea
                value={formData.notes}
                onChange={(e) => setFormData((prev) => ({ ...prev, notes: e.target.value }))}
                placeholder="Observações sobre a consulta..."
                rows={3}
              />
            </div>
          </div>

<div className="flex justify-end gap-2 pt-4 border-t">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Cancelar
            </Button>
            <Button onClick={handleSave}>Salvar Consulta</Button>
          </div>
        </DialogContent>
      </Dialog>

<Dialog open={procedureManagerOpen} onOpenChange={setProcedureManagerOpen}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-xl font-semibold flex items-center gap-2">
              <Palette className="h-5 w-5" />
              Gerenciar Procedimentos
            </DialogTitle>
          </DialogHeader>

<div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm flex items-center gap-2">
                  <Plus className="h-4 w-4" />
                  Adicionar Novo Procedimento
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex gap-4">
                  <div className="flex-1">
                    <Label>Nome do Procedimento</Label>
                    <Input
                      value={newProcedureName}
                      onChange={(e) => setNewProcedureName(e.target.value)}
                      placeholder="Ex: Consulta de Retorno"
                    />
                  </div>
                  <div className="w-32">
                    <Label>Cor</Label>
                    <Select value={newProcedureColor} onValueChange={setNewProcedureColor}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {colorOptions.map((color) => (
                          <SelectItem key={color} value={color}>
                            <div className="flex items-center gap-2">
                              <div className={`w-4 h-4 rounded ${color}`} />
                              {color.replace("bg-", "").replace("-", " ")}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex items-end">
                    <Button onClick={addNewProcedure} disabled={!newProcedureName.trim()}>
                      <Plus className="h-4 w-4 mr-1" />
                      Adicionar
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="text-sm">Procedimentos Existentes</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {procedures.map((procedure) => (
                    <div key={procedure.id} className="flex items-center gap-3 p-3 border rounded-lg">
                      <div className={`w-6 h-6 rounded ${procedure.color}`} />
                      <div className="flex-1">
                        {editingProcedure?.id === procedure.id ? (
                          <div className="flex gap-2">
                            <Input
                              value={editingProcedure.name}
                              onChange={(e) => setEditingProcedure({ ...editingProcedure, name: e.target.value })}
                              className="flex-1"
                            />
                            <Select
                              value={editingProcedure.color}
                              onValueChange={(color) => setEditingProcedure({ ...editingProcedure, color })}
                            >
                              <SelectTrigger className="w-32">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {colorOptions.map((color) => (
                                  <SelectItem key={color} value={color}>
                                    <div className="flex items-center gap-2">
                                      <div className={`w-4 h-4 rounded ${color}`} />
                                    </div>
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                        ) : (
                          <span className="font-medium">{procedure.name}</span>
                        )}
                      </div>
                      <div className="flex gap-1">
                        {editingProcedure?.id === procedure.id ? (
                          <>
                            <Button
                              size="sm"
                              onClick={() => {
                                updateProcedure(procedure.id, editingProcedure)
                                setEditingProcedure(null)
                              }}
                            >
                              <Check className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline" onClick={() => setEditingProcedure(null)}>
                              ✕
                            </Button>
                          </>
                        ) : (
                          <>
                            <Button size="sm" variant="outline" onClick={() => setEditingProcedure(procedure)}>
                              <Edit2 className="h-4 w-4" />
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              onClick={() => deleteProcedure(procedure.id)}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

<div className="flex justify-end gap-2 pt-4 border-t">
            <Button onClick={() => setProcedureManagerOpen(false)}>Fechar</Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescript:file="app/agenda/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Sidebar } from "@/components/sidebar"
import { useState, useEffect } from "react"
import { AgendaCalendar } from "@/components/agenda-calendar"
import { Button } from "@/components/ui/button"
import {
  Users,
  ChevronLeft,
  ChevronRight,
  Printer,
  Calendar,
  AlertTriangle,
  UserPlus,
  PanelLeftClose,
  PanelLeftOpen,
  Eye,
  EyeOff,
  Plus,
  Clock,
  Phone,
  User,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { MiniCalendar } from "@/components/mini-calendar"
import { NewAppointmentDialog } from "@/components/new-appointment-dialog"
import { ConfirmHideProfessionalDialog } from "@/components/confirm-hide-professional-dialog"
import { toast } from "@/hooks/use-toast"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { AlertManagementDialog } from "@/components/alert-management-dialog"
import { QuickPatientDialog } from "@/components/quick-patient-dialog"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { createClient } from "@/lib/supabase/client"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { AppointmentDetailsDialog } from "@/components/appointment-details-dialog"

const supabase = createClient()

interface Professional {
  id: string
  name: string
  color: string
  active: boolean
  specialty?: string
  phone?: string
  email?: string
  cro?: string // Adicionado para CRO
}

interface Patient {
  id: string
  name: string
  phone?: string
  email?: string
  address?: string
  birth_date?: string
  notes?: string
  prontuario?: string // Adicionado para prontuário
}

interface Appointment {
  id: string
  professional_id: string
  patient_id: string
  patient_name: string
  patient_phone?: string
  patient_email?: string
  patient_prontuario?: string
  start_time: string
  end_time: string
  date: string
  type: "consulta" | "compromisso" | "evento" | "aviso"
  status: string
  color: string
  notes?: string
  procedures?: string[]
  markers?: string[]
  doctor_name?: string
  doctor_specialty?: string
  check_in?: boolean
  confirmado_por?: string
  tags?: string[]
}

interface WaitingPatient {
  id: string
  name: string
  phone: string
  arrival_time: string
  waiting_time: string
  priority: "normal" | "urgente" | "retorno"
  status: "aguardando" | "chamado" | "atendido"
}

const samplePatients: Patient[] = [
  {
    id: "P001",
    name: "Ana Carolina Silva",
    phone: "(11) 98888-1111",
    email: "ana.silva@email.com",
    address: "Rua das Flores, 123 - São Paulo, SP",
    birth_date: "1985-03-15",
    notes: "Paciente regular, sem alergias conhecidas",
  },
  {
    id: "P002",
    name: "Carlos Eduardo Santos",
    phone: "(11) 97777-2222",
    email: "carlos.santos@email.com",
    address: "Av. Paulista, 456 - São Paulo, SP",
    birth_date: "1978-07-22",
    notes: "Histórico de sensibilidade dentária",
  },
  {
    id: "P003",
    name: "Maria Fernanda Costa",
    phone: "(11) 96666-3333",
    email: "maria.costa@email.com",
    address: "Rua Augusta, 789 - São Paulo, SP",
    birth_date: "1992-11-08",
    notes: "Primeira consulta, indicação de amigo",
  },
  {
    id: "P004",
    name: "João Pedro Oliveira",
    phone: "(11) 95555-4444",
    email: "joao.oliveira@email.com",
    address: "Rua Oscar Freire, 321 - São Paulo, SP",
    birth_date: "1988-05-30",
    notes: "Paciente ansioso, preferir horários matutinos",
  },
  {
    id: "P005",
    name: "Beatriz Almeida",
    phone: "(11) 94444-5555",
    email: "beatriz.almeida@email.com",
    address: "Rua Consolação, 654 - São Paulo, SP",
    birth_date: "1995-09-12",
    notes: "Tratamento ortodôntico em andamento",
  },
  {
    id: "P006",
    name: "Rafael Mendes",
    phone: "(11) 93333-6666",
    email: "rafael.mendes@email.com",
    address: "Av. Faria Lima, 987 - São Paulo, SP",
    birth_date: "1982-01-25",
    notes: "Paciente VIP, preferir Dr. Silva",
  },
  {
    id: "P007",
    name: "Camila Rodrigues",
    phone: "(11) 92222-7777",
    email: "camila.rodrigues@email.com",
    address: "Rua Haddock Lobo, 147 - São Paulo, SP",
    birth_date: "1990-04-18",
    notes: "Alergia à penicilina",
  },
  {
    id: "P008",
    name: "Lucas Ferreira",
    phone: "(11) 91111-8888",
    email: "lucas.ferreira@email.com",
    address: "Rua Bela Cintra, 258 - São Paulo, SP",
    birth_date: "1987-12-03",
    notes: "Paciente pontual, sem restrições",
  },
  {
    id: "P009",
    name: "Juliana Barbosa",
    phone: "(11) 90000-9999",
    email: "juliana.barbosa@email.com",
    address: "Av. Rebouças, 369 - São Paulo, SP",
    birth_date: "1993-08-14",
    notes: "Grávida - 2º trimestre, cuidados especiais",
  },
  {
    id: "P010",
    name: "Pedro Henrique Lima",
    phone: "(11) 98765-4321",
    email: "pedro.lima@email.com",
    address: "Rua Estados Unidos, 741 - São Paulo, SP",
    birth_date: "1986-06-27",
    notes: "Paciente diabético, controle rigoroso",
  },
  {
    id: "P011",
    name: "Amanda Souza",
    phone: "(11) 97654-3210",
    email: "amanda.souza@email.com",
    address: "Rua Pamplona, 852 - São Paulo, SP",
    birth_date: "1991-10-09",
    notes: "Fobia de dentista, necessita sedação",
  },
  {
    id: "P012",
    name: "Thiago Martins",
    phone: "(11) 96543-2109",
    email: "thiago.martins@email.com",
    address: "Av. Ibirapuera, 963 - São Paulo, SP",
    birth_date: "1984-02-16",
    notes: "Atleta profissional, horários flexíveis",
  },
  {
    id: "P013",
    name: "Fernanda Oliveira",
    phone: "(11) 95432-1098",
    email: "fernanda.oliveira@email.com",
    address: "Rua Teodoro Sampaio, 456 - São Paulo, SP",
    birth_date: "1989-03-22",
    notes: "Paciente regular, histórico de cáries",
  },
  {
    id: "P014",
    name: "Roberto Silva",
    phone: "(11) 94321-0987",
    email: "roberto.silva@email.com",
    address: "Av. Brigadeiro Faria Lima, 789 - São Paulo, SP",
    birth_date: "1975-11-15",
    notes: "Executivo, prefere horários após 18h",
  },
  {
    id: "P015",
    name: "Mariana Santos",
    phone: "(11) 93210-9876",
    email: "mariana.santos@email.com",
    address: "Rua da Consolação, 321 - São Paulo, SP",
    birth_date: "1992-07-08",
    notes: "Estudante de medicina, interessada em prevenção",
  },
  {
    id: "P016",
    name: "Gabriel Costa",
    phone: "(11) 92109-8765",
    email: "gabriel.costa@email.com",
    address: "Rua Augusta, 654 - São Paulo, SP",
    birth_date: "1987-12-30",
    notes: "Músico, cuidados especiais com embocadura",
  },
  {
    id: "P017",
    name: "Larissa Pereira",
    phone: "(11) 91098-7654",
    email: "larissa.pereira@email.com",
    address: "Av. Paulista, 987 - São Paulo, SP",
    birth_date: "1994-05-18",
    notes: "Modelo, preocupação estética alta",
  },
  {
    id: "P018",
    name: "Diego Almeida",
    phone: "(11) 90987-6543",
    email: "diego.almeida@email.com",
    address: "Rua Oscar Freire, 147 - São Paulo, SP",
    birth_date: "1983-09-25",
    notes: "Empresário, agenda flexível",
  },
  {
    id: "P019",
    name: "Patrícia Lima",
    phone: "(11) 99876-5432",
    email: "patricia.lima@email.com",
    address: "Rua Bela Cintra, 258 - São Paulo, SP",
    birth_date: "1990-01-12",
    notes: "Professora, disponível apenas nas férias",
  },
  {
    id: "P020",
    name: "Henrique Barbosa",
    phone: "(11) 98765-4321",
    email: "henrique.barbosa@email.com",
    address: "Av. Rebouças, 369 - São Paulo, SP",
    birth_date: "1986-08-07",
    notes: "Advogado, horários comerciais preferenciais",
  },
]

const fictionalDoctors: Professional[] = [
  {
    id: "D001",
    name: "Dr. Carlos Silva",
    color: "#3B82F6",
    active: true,
    specialty: "Clínico Geral",
    phone: "(11) 99999-0001",
    email: "carlos.silva@clinica.com",
    cro: "CRM 12345-SP",
  },
  {
    id: "D002",
    name: "Dra. Ana Rodrigues",
    color: "#10B981",
    active: true,
    specialty: "Cardiologia",
    phone: "(11) 99999-0002",
    email: "ana.rodrigues@clinica.com",
    cro: "CRM 23456-SP",
  },
  {
    id: "D003",
    name: "Dr. Pedro Santos",
    color: "#F59E0B",
    active: true,
    specialty: "Ortopedia",
    phone: "(11) 99999-0003",
    email: "pedro.santos@clinica.com",
    cro: "CRM 34567-SP",
  },
  {
    id: "D004",
    name: "Dra. Maria Oliveira",
    color: "#EF4444",
    active: true,
    specialty: "Dermatologia",
    phone: "(11) 99999-0004",
    email: "maria.oliveira@clinica.com",
    cro: "CRM 45678-SP",
  },
  {
    id: "D005",
    name: "Dr. João Costa",
    color: "#8B5CF6",
    active: true,
    specialty: "Neurologia",
    phone: "(11) 99999-0005",
    email: "joao.costa@clinica.com",
    cro: "CRM 56789-SP",
  },
  {
    id: "D006",
    name: "Dra. Fernanda Lima",
    color: "#F97316",
    active: true,
    specialty: "Ginecologia",
    phone: "(11) 99999-0006",
    email: "fernanda.lima@clinica.com",
    cro: "CRM 67890-SP",
  },
]

const getAppointmentColor = (status: string) => {
  switch (status) {
    case "Agendado":
      return "#3b82f6" // blue
    case "Em espera":
      return "#eab308" // yellow
    case "Em atendimento":
      return "#f97316" // orange
    case "Atendido":
      return "#22c55e" // green
    case "Faltou":
      return "#ef4444" // red
    case "Cancelado":
      return "#6b7280" // gray
    default:
      return "#3b82f6" // blue default
  }
}

const generateSeptemberAppointments = (): Appointment[] => {
  const appointments: Appointment[] = []
  const startDate = new Date(2025, 8, 1) // September 1, 2025
  const endDate = new Date(2025, 8, 30) // September 30, 2025

const timeSlots = [
    "08:00",
    "08:30",
    "09:00",
    "09:30",
    "10:00",
    "10:30",
    "11:00",
    "11:30",
    "14:00",
    "14:30",
    "15:00",
    "15:30",
    "16:00",
    "16:30",
    "17:00",
    "17:30",
    "18:00",
    "18:30",
  ]

const statusOptions = ["1-Agendado", "2-Em espera", "3-Em atendimento", "4-Atendido", "5-Faltou", "6-Cancelado"]
  const procedures = [
    "Consulta Clínica Geral",
    "Exame Cardiológico",
    "Consulta Ortopédica",
    "Avaliação Dermatológica",
    "Consulta Neurológica",
    "Exame Ginecológico",
    "Retorno",
    "Primeira Consulta",
    "Exame de Rotina",
    "Urgência",
  ]

let appointmentId = 1000

for (let date = new Date(startDate); date <= endDate; date.setDate(date.getDate() + 1)) {
    const dateStr = format(date, "yyyy-MM-dd")
    const dayOfWeek = date.getDay()

// Skip Sundays (0) and reduce appointments on Saturdays (6)
    if (dayOfWeek === 0) continue

const maxAppointments = dayOfWeek === 6 ? 8 : 15 // Fewer appointments on Saturday
    const appointmentsForDay = Math.floor(Math.random() * maxAppointments) + 5

const usedSlots = new Set<string>()

for (let i = 0; i < appointmentsForDay; i++) {
      const doctor = fictionalDoctors[Math.floor(Math.random() * fictionalDoctors.length)]
      const patient = samplePatients[Math.floor(Math.random() * samplePatients.length)]

// Find available time slot
      let timeSlot: string
      let attempts = 0
      do {
        timeSlot = timeSlots[Math.floor(Math.random() * timeSlots.length)]
        attempts++
      } while (usedSlots.has(`${doctor.id}-${timeSlot}`) && attempts < 20)

if (attempts >= 20) continue // Skip if can't find available slot

usedSlots.add(`${doctor.id}-${timeSlot}`)

const startTime = timeSlot
      const [hours, minutes] = startTime.split(":").map(Number)
      const endTime = `${String(hours + (minutes === 30 ? 1 : 0)).padStart(2, "0")}:${minutes === 30 ? "00" : "30"}`

const status = statusOptions[Math.floor(Math.random() * statusOptions.length)]
      const procedure = procedures[Math.floor(Math.random() * procedures.length)]

appointments.push({
        id: `FICT-${appointmentId++}`,
        professional_id: doctor.id,
        patient_id: patient.id,
        patient_name: patient.name,
        patient_phone: patient.phone,
        patient_email: patient.email,
        start_time: startTime,
        end_time: endTime,
        date: dateStr,
        type: "consulta",
        status: status,
        color: getAppointmentColor(status.split("-")[1] || "Agendado"),
        notes: `${procedure} - ${Math.random() > 0.5 ? "Paciente pontual" : "Primeira vez"}`,
        procedures: [procedure],
        markers: Math.random() > 0.5 ? ["Primeira consulta"] : ["Retorno"],
        doctor_name: doctor.name,
        doctor_specialty: doctor.specialty,
      })
    }
  }

return appointments
}

const mockWaitingList: WaitingPatient[] = [
  {
    id: "W001",
    name: "Laura Pereira",
    phone: "(11) 98765-1234",
    arrival_time: "09:15",
    waiting_time: "15 min",
    priority: "normal",
    status: "aguardando",
  },
  {
    id: "W002",
    name: "Gustavo Almeida",
    phone: "(11) 91234-5678",
    arrival_time: "09:30",
    waiting_time: "0 min",
    priority: "urgente",
    status: "aguardando",
  },
  {
    id: "W003",
    name: "Sofia Castro",
    phone: "(11) 94567-8901",
    arrival_time: "09:45",
    waiting_time: "30 min",
    priority: "retorno",
    status: "chamado",
  },
]

export default function AgendaPage() {
  const router = useRouter()

const [currentDate, setCurrentDate] = useState(new Date())
  const [visibleProfessionals, setVisibleProfessionals] = useState<string[]>([])
  const [newAppointmentDialog, setNewAppointmentDialog] = useState(false)
  const [newEventDialog, setNewEventDialog] = useState(false)
  const [newAlertDialog, setNewAlertDialog] = useState(false)
  const [waitingListDialog, setWaitingListDialog] = useState(false)
  const [manageProfessionalsDialog, setManageProfessionalsDialog] = useState(false)
  const [weeklyReportDialog, setWeeklyReportDialog] = useState(false)
  const [monthlyReportDialog, setMonthlyReportDialog] = useState(false)
  const [appointmentType, setAppointmentType] = useState<"consulta" | "compromisso" | "evento">("consulta")
  const [selectedProfessional, setSelectedProfessional] = useState<string>("")
  const [selectedTime, setSelectedTime] = useState<string>("")
  const [confirmDialog, setConfirmDialog] = useState<{
    open: boolean
    professionalId: string
    professionalName: string
    appointmentCount: number
  }>({
    open: false,
    professionalId: "",
    professionalName: "",
    appointmentCount: 0,
  })

const [appointmentDetailsPopover, setAppointmentDetailsPopover] = useState<{
    open: boolean
    appointment: Appointment | null
    professional: Professional | null
    patient: Patient | null
  }>({
    open: false,
    appointment: null,
    professional: null,
    patient: null,
  })

const [editAppointmentDialog, setEditAppointmentDialog] = useState<{
    open: boolean
    appointment: Appointment | null
  }>({
    open: false,
    appointment: null,
  })

const [patientDialog, setPatientDialog] = useState(false)
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [alertDialog, setAlertDialog] = useState(false) // Declared alertDialog and setAlertDialog

const [appointmentStatus, setAppointmentStatus] = useState("4-Atendido")
  const [selectedMarkers, setSelectedMarkers] = useState<string[]>(["Primeira consulta"])

const [isEditingCheckIn, setIsEditingCheckIn] = useState(false)
  const [isEditingObservations, setIsEditingObservations] = useState(false)
  const [checkInText, setCheckInText] = useState("Confirmado pela secretária")
  const [observationsText, setObservationsText] = useState("Paciente chegou no horário. Primeira consulta.")

const statusOptions = [
    { value: "1-Agendado", label: "1-Agendado", color: "bg-blue-500" },
    { value: "2-Em espera", label: "2-Em espera", color: "bg-yellow-500" },
    { value: "3-Em atendimento", label: "3-Em atendimento", color: "bg-orange-500" },
    { value: "4-Atendido", label: "4-Atendido", color: "bg-green-500" },
    { value: "5-Faltou", label: "5-Faltou", color: "bg-red-500" },
    { value: "6-Cancelado", label: "6-Cancelado", color: "bg-gray-500" },
  ]

const markerOptions = [
    "Primeira consulta",
    "Retorno",
    "Laboratório protético OK",
    "Urgência",
    "Convênio",
    "Particular",
    "Procedimento especial",
    "Acompanhante",
  ]

const [professionals, setProfessionals] = useState<Professional[]>([])
  const [patients, setPatients] = useState<Patient[]>(samplePatients)
  const [waitingList, setWaitingList] = useState<WaitingPatient[]>(mockWaitingList) // Initialize with mock data

const [appointments, setAppointments] = useState<Appointment[]>([])
  const [loading, setLoading] = useState(true) // mudando para true para mostrar loading inicial

const getDoctorColor = (doctorId: string): string => {
    const colors = [
      "#3B82F6", // Blue
      "#10B981", // Green
      "#F59E0B", // Yellow
      "#EF4444", // Red
      "#8B5CF6", // Purple
      "#F97316", // Orange
      "#06B6D4", // Cyan
      "#8CC616", // Lime
      "#EC4899", // Pink
      "#6366F1", // Indigo
    ]

// Usar hash do ID para garantir cor consistente
    let hash = 0
    for (let i = 0; i < doctorId.length; i++) {
      const char = doctorId.charCodeAt(i)
      hash = (hash << 5) - hash + char
      hash = hash & hash // Convert to 32bit integer
    }

return colors[Math.abs(hash) % colors.length]
  }

const fetchAppointments = async (date: Date): Promise<Appointment[]> => {
    try {
      console.log("[v0] Fetching appointments from Supabase for date:", format(date, "yyyy-MM-dd"))

const { data, error } = await supabase
        .from("agenda-consultas")
        .select(
          `
          *,
          doutor:agenda-doutor!doutor_id (
            id,
            nome,
            especialidade,
            telefone,
            email,
            cro
          ),
          paciente:agenda-pacientes!paciente_id (
            id,
            nome,
            telefone,
            email,
            prontuario
          ),
          status:agenda-status!status_id (
            id,
            nome,
            cor
          )
        `,
        )
        .eq("data_consulta", format(date, "yyyy-MM-dd"))

if (error) {
        console.error("[v0] Error fetching appointments:", error)
        toast({
          title: "Erro",
          description: "Erro ao carregar agendamentos do banco de dados.",
          variant: "destructive",
        })
        return []
      }

console.log("[v0] Raw appointments data from Supabase:", data)

if (!data || data.length === 0) {
        console.log("[v0] No appointments found for this date")
        return []
      }

const appointments: Appointment[] = data.map((apt: any) => {
        const doctor = apt.doutor
        const patient = apt.paciente
        const status = apt.status

console.log("[v0] Processing appointment:", {
          id: apt.id,
          doctor: doctor?.nome,
          patient: patient?.nome,
          status: status?.nome,
          statusColor: status?.cor,
          time: `${apt.hora_inicio} - ${apt.hora_fim}`,
        })

return {
          id: apt.id,
          professional_id: apt.doutor_id,
          patient_id: apt.paciente_id,
          patient_name: patient?.nome || "Paciente não encontrado",
          patient_phone: patient?.telefone || "",
          patient_email: patient?.email || "",
          patient_prontuario: patient?.prontuario || "",
          start_time: apt.hora_inicio,
          end_time: apt.hora_fim,
          date: apt.data_consulta,
          type: "consulta",
          status: status?.nome || "Agendado",
          color: status?.cor || getDoctorColor(apt.doutor_id),
          notes: apt.observacoes || "",
          procedures: [],
          markers: apt.primeira_consulta ? ["Primeira consulta"] : [],
          doctor_name: doctor?.nome || "Profissional não encontrado",
          doctor_specialty: doctor?.especialidade || "",
        }
      })

console.log("[v0] Transformed appointments:", appointments)
      return appointments
    } catch (error) {
      console.error("[v0] Unexpected error fetching appointments:", error)
      toast({
        title: "Erro",
        description: "Erro inesperado ao carregar agendamentos.",
        variant: "destructive",
      })
      return []
    }
  }

useEffect(() => {
    const loadAgendaData = async () => {
      console.log("[v0] Loading agenda data for date:", format(currentDate, "yyyy-MM-dd"))
      setLoading(true)

try {
        // Fetch professionals from Supabase
        const professionalsData = await fetchProfessionals()
        console.log("[v0] Professionals loaded:", professionalsData.length)

// Fetch appointments from Supabase for the current date
        const appointmentsData = await fetchAppointments(currentDate)
        console.log("[v0] Appointments loaded:", appointmentsData.length)

// Set state
        setProfessionals(professionalsData)
        setAppointments(appointmentsData)

// Set all professionals as visible by default
        setVisibleProfessionals(professionalsData.filter((p) => p.active).map((p) => p.id))

console.log("[v0] Agenda data loaded successfully:", {
          professionals: professionalsData.length,
          appointments: appointmentsData.length,
          date: format(currentDate, "yyyy-MM-dd"),
        })
      } catch (error) {
        console.error("[v0] Error loading agenda data:", error)
        toast({
          title: "Erro",
          description: "Erro ao carregar dados da agenda.",
          variant: "destructive",
        })
      } finally {
        setLoading(false)
      }
    }

loadAgendaData()
  }, [currentDate])

const getStatusColor = (status: string) => {
    switch (status) {
      case "confirmado":
        return "#3B82F6"
      case "agendado":
        return "#10B981"
      case "em atendimento":
        return "#F59E0B"
      case "atendido":
        return "#8B5CF6"
      case "faltou":
        return "#EF4444"
      case "cancelado":
        return "#6B7280"
      case "em espera":
        return "#F97316"
      default:
        return "#10B981"
    }
  }

const fetchProfessionals = async (): Promise<Professional[]> => {
    try {
      console.log("[v0] Buscando profissionais do Supabase...")
      const { data, error } = await supabase.from("agenda-doutor").select("*")

if (error) {
        console.error("[v0] Erro ao buscar profissionais:", error)
        toast({
          title: "Erro",
          description: "Erro ao carregar profissionais",
          variant: "destructive",
        })
        return []
      }

const professionalsData = data.map((prof: any) => ({
        id: prof.id.toString(),
        name: prof.nome,
        color: prof.cor || getDoctorColor(prof.id.toString()), // Use stored color or generate one
        active: prof.ativo ?? true, // Default to true if not specified
        specialty: prof.especialidade,
        phone: prof.telefone,
        email: prof.email,
        cro: prof.cro,
      }))

console.log("[v0] Profissionais carregados:", professionalsData)
      return professionalsData
    } catch (error) {
      console.error("[v0] Erro inesperado ao buscar profissionais:", error)
      toast({
        title: "Erro",
        description: "Erro inesperado ao carregar profissionais",
        variant: "destructive",
      })
      return []
    }
  }

// This function is no longer used because we fetch data directly
  // const loadData = async () => { ... }

const handlePatientClick = (patientId: string) => {
    if (patientId) {
      router.push(`/patients/${patientId}`)
      // Fechar o popover após navegar
      setAppointmentDetailsPopover({
        open: false,
        appointment: null,
        professional: null,
        patient: null,
      })
    }
  }

// Função para imprimir a agenda do dia
  const printDaySchedule = () => {
    const dateStr = format(currentDate, "yyyy-MM-dd")
    const dayAppointments = appointments.filter((apt) => apt.date === dateStr)

// Criar conteúdo HTML para impressão
    const printContent = `
      <html>
        <head>
          <title>Agenda - ${format(currentDate, "dd/MM/yyyy")}</title>
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
            .appointment { margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
            .professional { font-weight: bold; color: #333; }
            .time { color: #666; font-size: 14px; }
            .patient { font-size: 16px; margin: 5px 0; }
            .type { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
            .consulta { background-color: #e8f5e8; color: #2d5a2d; }
            .compromisso { background-color: #e8f0ff; color: #1a4480; }
            .evento { background-color: #fff3e0; color: #8b4513; }
            .retorno { background-color: #ffe0b2; color: #e65100; }
            .aviso { background-color: #f8bbd0; color: #d81b60; }
            @media print { body { margin: 0; } }
          </style>
        </head>
        <body>
          <div class="header">
            <h1>Agenda do Dia</h1>
            <h2>${format(currentDate, "EEEE, d 'de' MMMM 'de' yyyy", { locale: ptBR })}</h2>
          </div>
          ${dayAppointments
            .map((apt) => {
              const prof = professionals.find((p) => p.id === apt.professional_id)
              return `
              <div class="appointment">
                <div class="professional">${prof?.name || "Profissional não encontrado"}</div>
                <div class="time">${apt.start_time} - ${apt.end_time}</div>
                <div class="patient">${apt.patient_name}</div>
                <span class="type ${apt.type}">${apt.type.toUpperCase()}</span>
              </div>
            `
            })
            .join("")}
          ${dayAppointments.length === 0 ? '<p style="text-align: center; color: #666; margin-top: 50px;">Nenhum agendamento para este dia.</p>' : ""}
        </body>
      </html>
    `

// Abrir janela de impressão
    const printWindow = window.open("", "_blank")
    if (printWindow) {
      printWindow.document.write(printContent)
      printWindow.document.close()
      printWindow.focus()
      printWindow.print()
      printWindow.close()
    }

toast({
      title: "Agenda impressa",
      description: `Agenda do dia ${format(currentDate, "dd/MM/yyyy")} enviada para impressão.`,
    })
  }

const handleViewWaitingList = () => {
    setWaitingListDialog(true)
  }

// Função para abrir novo paciente
  const handleNewPatient = () => {
    setPatientDialog(true)
  }

// Função para criar aviso
  const handleNewAlert = () => {
    setNewAlertDialog(true)
  }

// Função para gerenciar profissionais
  const handleManageProfessionals = () => {
    setManageProfessionalsDialog(true)
  }

// Função para criar relatório semanal
  const handleWeeklyReport = () => {
    setWeeklyReportDialog(true)
  }

// Função para criar relatório mensal
  const handleMonthlyReport = () => {
    setMonthlyReportDialog(true)
  }

// Contar agendamentos para um profissional na data atual
  const getAppointmentCount = (professionalId: string) => {
    const dateStr = format(currentDate, "yyyy-MM-dd")
    return appointments.filter((apt) => apt.professional_id === professionalId && apt.date === dateStr).length
  }

// Toggle visibilidade do profissional
  const toggleProfessionalVisibility = (professionalId: string) => {
    const professional = professionals.find((p) => p.id === professionalId)
    if (!professional) return

const isVisible = visibleProfessionals.includes(professionalId)

if (isVisible) {
      // Verificar se tem agendamentos antes de ocultar
      const appointmentCount = getAppointmentCount(professionalId)

if (appointmentCount > 0) {
        setConfirmDialog({
          open: true,
          professionalId,
          professionalName: professional.name,
          appointmentCount,
        })
      } else {
        // Ocultar diretamente se não tem agendamentos
        setVisibleProfessionals((prev) => prev.filter((id) => id !== professionalId))
        toast({
          title: "Profissional ocultado",
          description: `${professional.name} foi ocultado da agenda.`,
        })
      }
    } else {
      // Mostrar profissional
      setVisibleProfessionals((prev) => [...prev, professionalId])
      toast({
        title: "Profissional exibido",
        description: `${professional.name} foi adicionado à agenda.`,
      })
    }
  }

// Confirmar ocultação do profissional
  const confirmHideProfessional = () => {
    setVisibleProfessionals((prev) => prev.filter((id) => id !== confirmDialog.professionalId))
    toast({
      title: "Profissional ocultado",
      description: `${confirmDialog.professionalName} foi ocultado da agenda.`,
    })
  }

// Lidar com novo agendamento
  const handleNewAppointment = (
    type: "consulta" | "compromisso" | "evento" = "consulta",
    date?: Date,
    time?: string,
    professionalId?: string,
  ) => {
    setAppointmentType(type)

// Set the selected professional if provided
    if (professionalId) {
      setSelectedProfessional(professionalId)
    }

// Set the selected time if provided
    if (time) {
      setSelectedTime(time)
    }

// Update current date if a different date was provided
    if (date) {
      setCurrentDate(date)
    }

setNewAppointmentDialog(true)
  }

const handleAppointmentClick = (appointment: Appointment) => {
    const professional = professionals.find((p) => p.id === appointment.professional_id)
    const patient = patients.find((p) => p.id === appointment.patient_id)

setAppointmentStatus(appointment.status || "4-Atendido")
    setSelectedMarkers(appointment.markers || ["Primeira consulta"])

setAppointmentDetailsPopover({
      open: true,
      appointment,
      professional: professional || null,
      patient: patient || null,
    })
  }

const handleEditAppointment = (appointment: Appointment) => {
    setAppointmentDetailsPopover({
      open: false,
      appointment: null,
      professional: null,
      patient: null,
    })
    setEditAppointmentDialog({ open: true, appointment })
  }

const handleDeleteAppointment = async (appointmentId: string) => {
    try {
      // Assuming Supabase table name is 'appointments' and it has an 'id' column
      const { error } = await supabase.from("agenda-consultas").delete().eq("id", appointmentId)

if (error) throw error

setAppointments((prev) => prev.filter((apt) => apt.id !== appointmentId))
      setAppointmentDetailsPopover({
        open: false,
        appointment: null,
        professional: null,
        patient: null,
      })

toast({
        title: "Agendamento excluído",
        description: "O agendamento foi removido com sucesso.",
      })
    } catch (error) {
      console.error("Erro ao excluir agendamento:", error)
      toast({
        title: "Erro",
        description: "Erro ao excluir agendamento.",
        variant: "destructive",
      })
    }
  }

const updateAppointmentStatus = async (appointmentId: string, newStatus: string) => {
    try {
      // Fetch the status_id from the 'agenda-status' table based on the newStatus name
      const { data: statusData, error: statusError } = await supabase
        .from("agenda-status")
        .select("id")
        .eq("nome", newStatus.charAt(0).toUpperCase() + newStatus.slice(1)) // Match 'Agendado', 'Em espera', etc.
        .single()

if (statusError || !statusData) {
        console.error("Erro ao buscar status_id:", statusError)
        toast({
          title: "Erro",
          description: `Não foi possível encontrar o ID para o status: ${newStatus}`,
          variant: "destructive",
        })
        return
      }

// Update the appointment in the 'agenda-consultas' table
      const { error: updateError } = await supabase
        .from("agenda-consultas")
        .update({
          status_id: statusData.id,
          // You might want to update check_in based on the status here as well,
          // but it depends on your application's logic.
          // check_in: newStatus === "em atendimento" || newStatus === "atendido",
        })
        .eq("id", appointmentId) // Assuming appointmentId is the correct type for the 'id' column

if (updateError) {
        console.error("Erro ao atualizar status no Supabase:", updateError)
        toast({
          title: "Erro",
          description: "Erro ao atualizar o status do agendamento no banco de dados.",
          variant: "destructive",
        })
        return
      }

// Re-fetch appointments to reflect the change, or update the state directly
      // For simplicity, we'll re-fetch here.
      // await fetchAppointments() // This would fetch for the current date only.
      // A more robust solution might involve updating the state directly.
      toast({
        title: "Status atualizado",
        description: `Status do agendamento ${appointmentId} atualizado para ${newStatus}.`,
      })
    } catch (error) {
      console.error("Erro inesperado ao atualizar status:", error)
      toast({
        title: "Erro",
        description: "Ocorreu um erro inesperado ao atualizar o status.",
        variant: "destructive",
      })
    }
  }

const handleStatusChange = async (appointmentId: string, newStatusValue: string) => {
    try {
      console.log("[v0] Changing status for appointment:", appointmentId, "to:", newStatusValue)

const { data: statusData, error: statusError } = await supabase
        .from("agenda-status")
        .select("id, nome, cor")
        .eq("nome", newStatusValue)
        .single()

if (statusError || !statusData) {
        console.error("[v0] Error fetching status:", statusError)
        toast({
          title: "Erro",
          description: `Não foi possível encontrar o status: ${newStatusValue}`,
          variant: "destructive",
        })
        return
      }

const { error: updateError } = await supabase
        .from("agenda-consultas")
        .update({
          status_id: statusData.id,
          updated_at: new Date().toISOString(),
        })
        .eq("id", appointmentId)

if (updateError) {
        console.error("[v0] Error updating status:", updateError)
        toast({
          title: "Erro",
          description: "Erro ao atualizar o status do agendamento.",
          variant: "destructive",
        })
        return
      }

setAppointments((prev) =>
        prev.map((apt) =>
          apt.id === appointmentId ? { ...apt, status: statusData.nome, color: statusData.cor } : apt,
        ),
      )

toast({
        title: "Status atualizado",
        description: `Status alterado para ${statusData.nome}.`,
      })

console.log("[v0] Status updated successfully. History will be logged automatically by trigger.")
    } catch (error) {
      console.error("[v0] Unexpected error updating status:", error)
      toast({
        title: "Erro",
        description: "Erro inesperado ao atualizar status.",
        variant: "destructive",
      })
    }
  }

const saveNewAppointment = async (appointmentData: {
    professionalId: string
    patientName: string
    patientEmail?: string
    patientPhone?: string
    startTime: string
    endTime: string
    type: "consulta" | "compromisso" | "evento"
    isFirstConsultation?: boolean
    referralSource?: string
    procedures?: string[]
    notes?: string
    confirmationSettings?: any
    alertSettings?: any
  }) => {
    console.log("[v0] Saving appointment with data:", appointmentData)

try {
      let patientId: string

const { data: existingPatients, error: searchError } = await supabase
        .from("agenda-pacientes")
        .select("id, nome, telefone, email")
        .ilike("nome", appointmentData.patientName)
        .limit(1)

if (searchError) {
        console.error("[v0] Error searching for patient:", searchError)
        toast({
          title: "Erro",
          description: "Erro ao buscar paciente no banco de dados.",
          variant: "destructive",
        })
        return
      }

if (existingPatients && existingPatients.length > 0) {
        // Patient exists in agenda-pacientes, use their UUID
        patientId = existingPatients[0].id
        console.log("[v0] Using existing patient from agenda-pacientes:", patientId)
      } else {
        // Create new patient in agenda-pacientes table
        console.log("[v0] Creating new patient in agenda-pacientes")
        const { data: newPatient, error: patientError } = await supabase
          .from("agenda-pacientes")
          .insert({
            nome: appointmentData.patientName,
            telefone: appointmentData.patientPhone || "",
            email: appointmentData.patientEmail || "",
            prontuario: `P${Date.now()}`, // Generate unique prontuario
          })
          .select()
          .single()

if (patientError) {
          console.error("[v0] Error creating patient:", patientError)
          toast({
            title: "Erro",
            description: "Erro ao criar paciente no banco de dados.",
            variant: "destructive",
          })
          return
        }

patientId = newPatient.id
        console.log("[v0] Created new patient in agenda-pacientes:", patientId)
      }

const professional = professionals.find((p) => p.id === appointmentData.professionalId)
      const appointmentDate = format(currentDate, "yyyy-MM-dd")

// Fetch status_id for "Agendado"
      const { data: statusData, error: statusError } = await supabase
        .from("agenda-status")
        .select("id")
        .eq("nome", "Agendado")
        .single()

if (statusError || !statusData) {
        console.error("[v0] Error fetching status_id for 'Agendado':", statusError)
        toast({
          title: "Erro",
          description: "Não foi possível obter o ID para o status 'Agendado'.",
          variant: "destructive",
        })
        return
      }

console.log("[v0] Creating appointment with:", {
        paciente_id: patientId,
        doutor_id: appointmentData.professionalId,
        data_consulta: appointmentDate,
        hora_inicio: appointmentData.startTime,
        hora_fim: appointmentData.endTime,
        status_id: statusData.id,
      })

const { data: newAppointment, error: appointmentError } = await supabase
        .from("agenda-consultas")
        .insert({
          paciente_id: patientId, // Now using UUID from agenda-pacientes
          doutor_id: appointmentData.professionalId,
          data_consulta: appointmentDate,
          hora_inicio: appointmentData.startTime,
          hora_fim: appointmentData.endTime,
          status_id: statusData.id,
          observacoes: appointmentData.notes || "",
          primeira_consulta: appointmentData.isFirstConsultation || false,
        })
        .select()
        .single()

if (appointmentError) {
        console.error("[v0] Error creating appointment:", appointmentError)
        toast({
          title: "Erro",
          description: "Erro ao criar agendamento no banco de dados.",
          variant: "destructive",
        })
        return
      }

console.log("[v0] Appointment created successfully:", newAppointment)

const updatedAppointments = await fetchAppointments(currentDate)
      setAppointments(updatedAppointments)

const typeLabel =
        appointmentData.type === "consulta"
          ? "Consulta"
          : appointmentData.type === "compromisso"
            ? "Compromisso"
            : "Evento"

toast({
        title: `${typeLabel} criada com sucesso`,
        description: `${appointmentData.patientName} foi agendado para ${appointmentData.startTime}.`,
      })

console.log("[v0] Appointment saved successfully to Supabase")
    } catch (error) {
      console.error("[v0] Error saving appointment:", error)
      toast({
        title: "Erro",
        description: "Erro ao criar agendamento.",
        variant: "destructive",
      })
    }
  }

const transformAppointment = (rawAppointment: any): Appointment => {
    console.log("[v0] Transformando agendamento:", rawAppointment)

const transformed = {
      id: rawAppointment.id,
      professional_id: rawAppointment.doutor_id,
      patient_id: rawAppointment.paciente_id,
      patient_name: rawAppointment["agenda-pacientes"]?.nome || "Paciente não encontrado",
      patient_phone: rawAppointment["agenda-pacientes"]?.telefone || "",
      patient_email: rawAppointment["agenda-pacientes"]?.email || "",
      patient_prontuario: rawAppointment["agenda-pacientes"]?.prontuario || "",
      start_time: rawAppointment.hora_inicio,
      end_time: rawAppointment.hora_fim,
      date: rawAppointment.data_consulta,
      type: "consulta" as const,
      status: rawAppointment["agenda-status"]?.nome || "Agendado",
      color: rawAppointment["agenda-status"]?.cor || getDoctorColor(rawAppointment.doutor_id),
      notes: rawAppointment.observacoes || "",
      procedures: [], // Assuming this needs to be fetched or mapped if available in raw data
      markers: rawAppointment.primeira_consulta ? ["Primeira consulta"] : [], // Assuming this mapping
      doctor_name: rawAppointment["agenda-doutor"]?.nome || "Profissional não encontrado",
      doctor_specialty: rawAppointment["agenda-doutor"]?.especialidade || "",
    }

console.log("[v0] Agendamento transformado:", transformed)
    return transformed
  }

const handleUpdateAppointment = (updatedAppointment: Appointment) => {
    setAppointments((prev) => prev.map((apt) => (apt.id === updatedAppointment.id ? updatedAppointment : apt)))
    setAppointmentDetailsPopover({
      open: false,
      appointment: null,
      professional: null,
      patient: null,
    })
  }

return (
    <div className="flex h-screen bg-background">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Header estilizado como na imagem */}
        <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex h-14 items-center justify-between px-6">
            {/* Ícones à esquerda com funcionalidades */}
            <div className="flex items-center space-x-2">
              {/* Dropdown para novo agendamento */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <Plus className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem onClick={() => handleNewAppointment("consulta")}>
                    <Calendar className="mr-2 h-4 w-4" />
                    Nova Consulta
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => handleNewAppointment("compromisso")}>
                    <Calendar className="mr-2 h-4 w-4" />
                    Novo Compromisso
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => handleNewAppointment("evento")}>
                    <Calendar className="mr-2 h-4 w-4" />
                    Novo Evento
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={handleNewPatient}>
                    <UserPlus className="mr-2 h-4 w-4" />
                    Novo Paciente
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={handleNewAlert}>
                    <AlertTriangle className="mr-2 h-4 w-4" />
                    Novo Aviso
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>

{/* Botão para toggle da sidebar */}
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSidebarOpen(!sidebarOpen)}>
                {sidebarOpen ? <PanelLeftClose className="h-4 w-4" /> : <PanelLeftOpen className="h-4 w-4" />}
              </Button>

{/* Botão de visualização e impressão */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <Eye className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem onClick={printDaySchedule}>
                    <Printer className="mr-2 h-4 w-4" />
                    Imprimir Agenda do Dia
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={handleWeeklyReport}>
                    <Eye className="mr-2 h-4 w-4" />
                    Relatório Semanal
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={handleMonthlyReport}>
                    <Eye className="mr-2 h-4 w-4" />
                    Relatório Mensal
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>

{/* Botões de visualização no centro */}
            <div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
              <Button variant="ghost" size="sm" className="h-7 px-3 text-xs">
                Mês
              </Button>
              <Button variant="default" size="sm" className="h-7 px-3 text-xs">
                Semana
              </Button>
              <Button variant="ghost" size="sm" className="h-7 px-3 text-xs">
                Dia
              </Button>
            </div>

{/* Data e navegação à direita */}
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-2">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => setCurrentDate(new Date(currentDate.getTime() - 24 * 60 * 60 * 1000))}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <span className="text-sm font-medium min-w-[200px] text-center">
                  {format(currentDate, "EEEE, d 'de' MMMM 'de' yyyy", { locale: ptBR })}
                </span>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => setCurrentDate(new Date(currentDate.getTime() + 24 * 60 * 60 * 1000))}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <Button
                variant="outline"
                size="sm"
                className="h-8 px-3 text-xs font-medium bg-transparent"
                onClick={() => setCurrentDate(new Date())}
              >
                IR PARA HOJE
              </Button>
            </div>
          </div>
        </header>

<div className="flex-1 flex overflow-hidden">
          {/* Sidebar esquerda com calendário e profissionais */}
          {sidebarOpen && (
            <div className="w-80 border-r bg-muted/20 overflow-y-auto transition-all duration-300">
              <div className="p-4 space-y-6">
                {/* Mini calendário */}
                <MiniCalendar currentDate={currentDate} onDateSelect={setCurrentDate} />

{/* Lista de Profissionais */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm flex items-center">
                      <Users className="mr-2 h-4 w-4" />
                      Profissionais
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {loading ? (
                      <div className="text-xs text-muted-foreground">Carregando...</div>
                    ) : (
                      professionals.map((prof) => {
                        const isVisible = visibleProfessionals.includes(prof.id)
                        const appointmentCount = appointments.filter((apt) => apt.professional_id === prof.id).length

return (
                          <div key={prof.id} className="flex items-center space-x-2 group">
                            <button
                              onClick={() => toggleProfessionalVisibility(prof.id)}
                              className="flex items-center space-x-2 flex-1 p-1 rounded hover:bg-accent transition-colors"
                            >
                              <div className="w-3 h-3 rounded-full" style={{ backgroundColor: prof.color }} />
                              <span className={`text-xs flex-1 text-left ${!isVisible ? "opacity-50" : ""}`}>
                                {prof.name}
                              </span>
                              {appointmentCount > 0 && (
                                <Badge variant="secondary" className="text-xs h-4 px-1">
                                  {appointmentCount}
                                </Badge>
                              )}
                            </button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
                              onClick={() => toggleProfessionalVisibility(prof.id)}
                            >
                              {isVisible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                            </Button>
                          </div>
                        )
                      })
                    )}
                  </CardContent>
                </Card>

{/* Lista de Espera */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm">Lista de Espera</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {waitingList.length === 0 ? (
                      <div className="text-xs text-muted-foreground">Nenhum paciente na lista de espera</div>
                    ) : (
                      waitingList.map((patient) => (
                        <div key={patient.id} className="flex items-center justify-between text-xs">
                          <div className="flex items-center space-x-2">
                            {patient.phone && <div className="w-2 h-2 bg-green-500 rounded-full" />}
                            <span>{patient.name}</span>
                          </div>
                          <Badge variant="secondary" className="text-xs">
                            {patient.priority}
                          </Badge>
                        </div>
                      ))
                    )}
                  </CardContent>
                </Card>

{/* Alertas de Retorno */}
                <Card>
                  <CardHeader className="pb-3">
                    <CardTitle className="text-sm">Alertas de Retorno</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    <div className="text-xs text-muted-foreground">Nenhum alerta no momento</div>
                  </CardContent>
                </Card>
              </div>
            </div>
          )}

{/* Área principal da agenda */}
          <main className="flex-1 relative">
            <AgendaCalendar
              currentDate={currentDate}
              professionals={professionals}
              appointments={appointments}
              visibleProfessionals={visibleProfessionals}
              onNewAppointment={handleNewAppointment}
              onAppointmentClick={handleAppointmentClick}
            />

{appointmentDetailsPopover.open && appointmentDetailsPopover.appointment && (
              <AppointmentDetailsDialog
                appointment={{
                  ...appointmentDetailsPopover.appointment,
                  patient: appointmentDetailsPopover.appointment.patient_name,
                  patient_id: appointmentDetailsPopover.appointment.patient_id,
                  title: appointmentDetailsPopover.appointment.notes || "Consulta",
                  date: appointmentDetailsPopover.appointment.date,
                  time: appointmentDetailsPopover.appointment.start_time,
                  duration: `${appointmentDetailsPopover.appointment.start_time} - ${appointmentDetailsPopover.appointment.end_time}`,
                  type: appointmentDetailsPopover.appointment.type,
                  status: appointmentDetailsPopover.appointment.status as any,
                  notes: appointmentDetailsPopover.appointment.notes,
                  color: appointmentDetailsPopover.appointment.color,
                  tags: appointmentDetailsPopover.appointment.tags,
                }}
                onClose={() =>
                  setAppointmentDetailsPopover({
                    open: false,
                    appointment: null,
                    professional: null,
                    patient: null,
                  })
                }
                onUpdate={handleUpdateAppointment}
                onPatientClick={handlePatientClick}
              />
            )}
          </main>
        </div>
      </div>

{/* Dialogs */}
      <NewAppointmentDialog
        open={newAppointmentDialog}
        onOpenChange={setNewAppointmentDialog}
        professionals={professionals}
        patients={patients}
        selectedProfessional={selectedProfessional}
        selectedTime={selectedTime}
        selectedDate={currentDate}
        appointments={appointments}
        onSave={saveNewAppointment}
      />

<ConfirmHideProfessionalDialog
        open={confirmDialog.open}
        onOpenChange={(open) => setConfirmDialog((prev) => ({ ...prev, open }))}
        professionalName={confirmDialog.professionalName}
        appointmentCount={confirmDialog.appointmentCount}
        onConfirm={confirmHideProfessional}
      />

{/* Popup fixo que não some com scroll */}
      <Dialog open={waitingListDialog} onOpenChange={setWaitingListDialog}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              Lista de Espera - Recepção
            </DialogTitle>
            <DialogDescription>Pacientes aguardando atendimento na recepção</DialogDescription>
          </DialogHeader>

<div className="space-y-4">
            {waitingList.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                <Clock className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>Nenhum paciente na lista de espera</p>
              </div>
            ) : (
              <div className="grid gap-3">
                {waitingList.map((patient) => (
                  <Card key={patient.id} className="p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div className="flex flex-col">
                          <div className="flex items-center gap-2">
                            <User className="h-4 w-4" />
                            <span className="font-medium">{patient.name}</span>
                            <Badge
                              variant={
                                patient.priority === "urgente"
                                  ? "destructive"
                                  : patient.priority === "retorno"
                                    ? "secondary"
                                    : "default"
                              }
                            >
                              {patient.priority}
                            </Badge>
                            <Badge
                              variant={
                                patient.status === "chamado"
                                  ? "secondary"
                                  : patient.status === "atendido"
                                    ? "default"
                                    : "outline"
                              }
                            >
                              {patient.status}
                            </Badge>
                          </div>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
                            <span className="flex items-center gap-1">
                              <Phone className="h-3 w-3" />
                              {patient.phone}
                            </span>
                            <span className="flex items-center gap-1">
                              <Clock className="h-3 w-3" />
                              Chegou às {patient.arrival_time}
                            </span>
                            <span className="font-medium text-orange-600">Aguardando: {patient.waiting_time}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant={patient.status === "chamado" ? "secondary" : "default"}
                          onClick={() => {
                            // Atualizar status do paciente
                            setWaitingList((prev) =>
                              prev.map((p) =>
                                p.id === patient.id
                                  ? { ...p, status: patient.status === "chamado" ? "aguardando" : "chamado" }
                                  : p,
                              ),
                            )
                            toast({
                              title: patient.status === "chamado" ? "Paciente retornou à espera" : "Paciente chamado",
                              description: `${patient.name} foi ${
                                patient.status === "chamado"
                                  ? "colocado de volta na espera"
                                  : "chamado para atendimento"
                              }.`,
                            })
                          }}
                        >
                          {patient.status === "chamado" ? "Cancelar Chamada" : "Chamar"}
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            // Marcar como atendido e remover da lista
                            setWaitingList((prev) => prev.filter((p) => p.id !== patient.id))
                            toast({
                              title: "Paciente atendido",
                              description: `${patient.name} foi marcado como atendido e removido da lista.`,
                            })
                          }}
                        >
                          Atendido
                        </Button>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            )}
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setWaitingListDialog(false)}>
              Fechar
            </Button>
            <Button
              onClick={() => {
                // Adicionar novo paciente à lista de espera
                const newPatient: WaitingPatient = {
                  id: `w${Date.now()}`,
                  name: "Novo Paciente",
                  phone: "(11) 99999-0000",
                  arrival_time: format(new Date(), "HH:mm"),
                  waiting_time: "0 min",
                  priority: "normal",
                  status: "aguardando",
                }
                setWaitingList((prev) => [...prev, newPatient])
                toast({
                  title: "Paciente adicionado",
                  description: "Novo paciente foi adicionado à lista de espera.",
                })
              }}
            >
              <Plus className="h-4 w-4 mr-2" />
              Adicionar Paciente
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Dialog para Gerenciar Profissionais */}
      <Dialog open={manageProfessionalsDialog} onOpenChange={setManageProfessionalsDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Gerenciar Profissionais</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            {professionals.map((prof) => (
              <div key={prof.id} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: prof.color }} />
                  <div>
                    <h4 className="font-medium">{prof.name}</h4>
                    <p className="text-sm text-muted-foreground">{prof.specialty}</p>
                  </div>
                </div>
                <div className="flex space-x-2">
                  <Button variant="outline" size="sm">
                    Editar
                  </Button>
                  <Button variant="outline" size="sm">
                    {prof.active ? "Desativar" : "Ativar"}
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>

{/* Dialog para Relatório Semanal */}
      <Dialog open={weeklyReportDialog} onOpenChange={setWeeklyReportDialog}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>Relatório Semanal</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-3 gap-4">
              <Card>
                <CardContent className="p-4">
                  <h3 className="font-medium">Total de Consultas</h3>
                  <p className="text-2xl font-bold">{appointments.length}</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4">
                  <h3 className="font-medium">Pacientes Atendidos</h3>
                  <p className="text-2xl font-bold">{new Set(appointments.map((a) => a.patient_id)).size}</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4">
                  <h3 className="font-medium">Taxa de Ocupação</h3>
                  <p className="text-2xl font-bold">85%</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Dialog para Relatório Mensal */}
      <Dialog open={monthlyReportDialog} onOpenChange={setMonthlyReportDialog}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>Relatório Mensal</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <Card>
                <CardContent className="p-4">
                  <h3 className="font-medium">Consultas do Mês</h3>
                  <p className="text-3xl font-bold">{appointments.length * 4}</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-4">
                  <h3 className="font-medium">Receita Estimada</h3>
                  <p className="text-3xl font-bold">R$ {(appointments.length * 4 * 150).toLocaleString()}</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Dialog para Novo Aviso */}
      <Dialog open={newAlertDialog} onOpenChange={setNewAlertDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Novo Aviso</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Título do Aviso</Label>
              <Input placeholder="Digite o título do aviso" />
            </div>
            <div>
              <Label>Descrição</Label>
              <textarea className="w-full p-2 border rounded-md" rows={3} placeholder="Digite a descrição do aviso" />
            </div>
            <div>
              <Label>Profissional</Label>
              <select className="w-full p-2 border rounded-md">
                <option>Selecione um profissional</option>
                {professionals.map((prof) => (
                  <option key={prof.id} value={prof.id}>
                    {prof.name}
                  </option>
                ))}
              </select>
            </div>
            <Button className="w-full">Criar Aviso</Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Novos Dialogs */}
      <AlertManagementDialog open={alertDialog} onOpenChange={setAlertDialog} />
      <QuickPatientDialog open={patientDialog} onOpenChange={setPatientDialog} />
    </div>
  )
}
[V0_FILE]typescript:file="components/agenda-calendar.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { format } from "date-fns"
import { createClient } from "@/lib/supabase/client"

interface Professional {
  id: string
  name: string
  color: string
  active: boolean
}

interface Appointment {
  id: string
  professional_id: string
  patient_id: string
  patient_name: string
  start_time: string
  end_time: string
  date: string
  type: "consulta" | "compromisso" | "evento" | "aviso" | "retorno"
  status: string
  color: string
  notes?: string
  patient_phone?: string
  patient_email?: string
  procedures?: string[]
  markers?: string[]
}

interface AgendaCalendarProps {
  currentDate: Date
  professionals: Professional[]
  appointments: Appointment[]
  visibleProfessionals: string[]
  onNewAppointment: (
    type?: "consulta" | "compromisso" | "evento",
    date?: Date,
    time?: string,
    professionalId?: string,
  ) => void
  onAppointmentClick: (appointment: Appointment, event: React.MouseEvent) => void
}

export function AgendaCalendar({
  currentDate,
  professionals,
  appointments,
  visibleProfessionals,
  onNewAppointment,
  onAppointmentClick,
}: AgendaCalendarProps) {
  const [hoveredSlot, setHoveredSlot] = useState<{ time: string; professionalId: string } | null>(null)
  const [currentTime, setCurrentTime] = useState(new Date())
  const [tooltip, setTooltip] = useState<{ text: string; x: number; y: number; color?: string } | null>(null)
  const supabase = createClient()

useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date())
    }, 30 * 1000) // Already updating every 30 seconds as requested

return () => clearInterval(interval)
  }, [])

const timeSlots = generateTimeSlots()
  const visibleProfessionalsData = professionals.filter((p) => visibleProfessionals.includes(p.id))
  const currentDateStr = format(currentDate, "yyyy-MM-dd")

// Calculate position for the current time line
  const now = currentTime
  const currentHour = now.getHours()
  const currentMinute = now.getMinutes()
  const totalMinutesSince8AM = (currentHour - 8) * 60 + currentMinute
  const lineTop = (totalMinutesSince8AM / 15) * 40 // 40px per 15-min slot

const normalizeTime = (time: string): string => {
    // If time has seconds (HH:mm:ss), remove them
    if (time && time.length > 5) {
      return time.substring(0, 5) // Get only HH:mm
    }
    return time
  }

const getAppointmentForSlot = (professionalId: string, timeSlot: string) => {
    return appointments.find((apt) => {
      const aptStartTime = normalizeTime(apt.start_time)
      const aptEndTime = normalizeTime(apt.end_time)
      const normalizedTimeSlot = normalizeTime(timeSlot)

return (
        apt.professional_id === professionalId &&
        apt.date === currentDateStr &&
        aptStartTime <= normalizedTimeSlot &&
        aptEndTime > normalizedTimeSlot
      )
    })
  }

const getAppointmentHeight = (appointment: Appointment) => {
    const startTime = normalizeTime(appointment.start_time)
    const endTime = normalizeTime(appointment.end_time)

const startMinutes = Number.parseInt(startTime.split(":")[0]) * 60 + Number.parseInt(startTime.split(":")[1])
    const endMinutes = Number.parseInt(endTime.split(":")[0]) * 60 + Number.parseInt(endTime.split(":")[1])
    const durationMinutes = endMinutes - startMinutes
    const slots = durationMinutes / 15
    return slots * 40 - 2
  }

const isFirstSlotOfAppointment = (appointment: Appointment, timeSlot: string) => {
    return normalizeTime(appointment.start_time) === normalizeTime(timeSlot)
  }

const getMarkerShape = (marker: string, index: number) => {
    const shapes = ["rounded-full", "rounded-sm", "rounded-none", "rounded-lg"]
    const colors = ["bg-purple-500", "bg-orange-500", "bg-teal-500", "bg-pink-500", "bg-indigo-500"]
    return {
      shape: shapes[index % shapes.length],
      color: colors[index % colors.length],
    }
  }

const showTooltip = (text: string, event: React.MouseEvent, color?: string) => {
    const rect = event.currentTarget.getBoundingClientRect()
    setTooltip({
      text,
      x: rect.left + rect.width / 2,
      y: rect.top - 10,
      color,
    })
  }

const hideTooltip = () => {
    setTooltip(null)
  }

return (
    <div className="h-full flex flex-col">
      {/* Header com nomes dos profissionais */}
      <div className="border-b bg-background sticky top-0 z-10">
        <div className="flex">
          {/* Coluna de horários */}
          <div className="w-20 border-r bg-muted/20 p-2">
            <div className="text-xs font-medium text-center">Horário</div>
          </div>

{/* Colunas dos profissionais */}
          {visibleProfessionalsData.map((professional) => (
            <div
              key={professional.id}
              className="flex-1 min-w-[150px] max-w-[200px] border-r p-2 text-center"
              style={{ backgroundColor: `${professional.color}10` }}
            >
              <div className="flex flex-col items-center gap-1">
                <div className="w-3 h-3 rounded-full" style={{ backgroundColor: professional.color }} />
                <div className="text-xs font-medium leading-tight break-words">{professional.name}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

{/* Grade de horários */}
      <div className="flex-1 overflow-auto">
        <div className="flex">
          {/* Coluna de horários */}
          <div className="w-20 border-r bg-muted/20">
            {timeSlots.map((timeSlot) => (
              <div
                key={timeSlot}
                className={`h-10 border-b px-2 flex items-center justify-center text-xs font-medium ${
                  hoveredSlot?.time === timeSlot ? "bg-accent font-bold" : ""
                }`}
              >
                {timeSlot}
              </div>
            ))}
          </div>

{/* Colunas dos profissionais */}
          {visibleProfessionalsData.map((professional) => (
            <div
              key={professional.id}
              className="flex-1 min-w-[150px] max-w-[200px] border-r relative"
              style={{ backgroundColor: `${professional.color}08` }}
            >
              {format(currentDate, "yyyy-MM-dd") === format(now, "yyyy-MM-dd") && (
                <div
                  className="absolute left-0 right-0 h-0.5 bg-red-500 z-20 transition-all duration-500 ease-out"
                  style={{ top: `${lineTop}px` }}
                >
                  <div className="absolute -left-1.5 -top-1.5 h-3 w-3 rounded-full bg-red-500 transition-all duration-500 ease-out" />
                </div>
              )}
              {timeSlots.map((timeSlot) => {
                const appointment = getAppointmentForSlot(professional.id, timeSlot)
                const isFirstSlot = appointment && isFirstSlotOfAppointment(appointment, timeSlot)
                const isHovered = hoveredSlot?.time === timeSlot && hoveredSlot?.professionalId === professional.id

return (
                  <div
                    key={timeSlot}
                    className="h-10 border-b relative cursor-pointer hover:bg-accent/20 transition-colors"
                    onMouseEnter={() => setHoveredSlot({ time: timeSlot, professionalId: professional.id })}
                    onMouseLeave={() => setHoveredSlot(null)}
                    onDoubleClick={() => onNewAppointment("consulta", currentDate, timeSlot, professional.id)}
                  >
                    {isFirstSlot && appointment && (
                      <div
                        className="absolute inset-x-1 rounded-lg text-white text-xs font-medium z-10 overflow-hidden cursor-pointer hover:opacity-90 transition-opacity border border-white/20"
                        style={{
                          backgroundColor: appointment.color,
                          height: getAppointmentHeight(appointment),
                        }}
                        onClick={(e) => onAppointmentClick(appointment, e)}
                      >
                        <div
                          className="p-2.5 h-full flex flex-col gap-1.5"
                          onMouseEnter={(e) => {
                            if (appointment.procedures && appointment.procedures.length > 0) {
                              showTooltip(`Procedimentos: ${appointment.procedures.join(", ")}`, e, appointment.color)
                            }
                          }}
                          onMouseLeave={hideTooltip}
                        >
                          <div className="flex items-center justify-between">
                            <div className="font-bold text-xs truncate flex-1">{appointment.patient_name}</div>
                            <div
                              className="w-4 h-4 rounded-full ml-1 cursor-help border-2 border-white shadow-lg"
                              style={{ backgroundColor: appointment.color }}
                              onMouseEnter={(e) => showTooltip(`Status: ${appointment.status}`, e)}
                              onMouseLeave={hideTooltip}
                            />
                          </div>

<div className="text-xs opacity-90">#{appointment.patient_id || "11616"}</div>

<div className="text-xs opacity-90">
                            {appointment.start_time} - {appointment.end_time}
                          </div>

{appointment.procedures && appointment.procedures.length > 0 && (
                            <div className="text-xs opacity-90 truncate">
                              {appointment.procedures.slice(0, 2).join(", ")}
                              {appointment.procedures.length > 2 && "..."}
                            </div>
                          )}

{appointment.markers && appointment.markers.length > 0 && (
                            <div className="flex flex-wrap gap-1 mt-0.5">
                              {appointment.markers.slice(0, 4).map((marker, index) => {
                                const { shape, color } = getMarkerShape(marker, index)
                                return (
                                  <div
                                    key={index}
                                    className={`w-2.5 h-2.5 ${shape} ${color} cursor-help border border-white/50 shadow-sm`}
                                    onMouseEnter={(e) => showTooltip(`Marcador: ${marker}`, e)}
                                    onMouseLeave={hideTooltip}
                                  />
                                )
                              })}
                              {appointment.markers.length > 4 && (
                                <div
                                  className="w-2.5 h-2.5 rounded-full bg-gray-500 cursor-help flex items-center justify-center border border-white/50 shadow-sm"
                                  style={{ fontSize: "7px" }}
                                  onMouseEnter={(e) => showTooltip(`+${appointment.markers.length - 4} marcadores`, e)}
                                  onMouseLeave={hideTooltip}
                                >
                                  <span className="text-white font-bold">+</span>
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    )}

{!appointment && isHovered && (
                      <div className="absolute inset-0 flex items-center justify-center bg-accent/30 text-accent-foreground text-xs font-medium">
                        AGENDAR
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          ))}
        </div>
      </div>

{tooltip && (
        <div
          className="fixed z-50 text-white text-xs px-2 py-1 rounded shadow-lg pointer-events-none"
          style={{
            left: tooltip.x,
            top: tooltip.y,
            transform: "translateX(-50%) translateY(-100%)",
            backgroundColor: tooltip.color || "#1f2937",
          }}
        >
          {tooltip.text}
          <div
            className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-2 border-transparent"
            style={{ borderTopColor: tooltip.color || "#1f2937" }}
          />
        </div>
      )}
    </div>
  )
}11a:T1642be,[V0_FILE]typescript:file="app/api/generate-alerts/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { supabase } from "@/lib/supabase"

export async function POST(req: NextRequest) {
  try {
    console.log("Iniciando geração de alertas...")

// Buscar dados do Supabase
    const [productsResult, movementsResult] = await Promise.all([
      supabase.from("products").select("*").limit(50),
      supabase.from("movement_history").select("*").order("movement_date", { ascending: false }).limit(20),
    ])

const products = productsResult.data || []
    const movements = movementsResult.data || []

console.log(`Produtos encontrados: ${products.length}`)
    console.log(`Movimentações encontradas: ${movements.length}`)

// Gerar alertas baseados nos dados reais
    const alerts = []

// Alerta de produtos com estoque baixo
    const lowStockProducts = products.filter((p) => p.current_stock < p.ideal_quantity * 0.3)
    if (lowStockProducts.length > 0) {
      alerts.push({
        id: "low_stock",
        type: "estoque",
        title: "Produtos com Estoque Baixo",
        message: `${lowStockProducts.length} produtos estão com estoque abaixo de 30% do ideal.`,
        severity: "medium",
        icon: "Package",
        actionable: true,
        priority: 8,
      })
    }

// Alerta de produtos em falta
    const outOfStockProducts = products.filter((p) => p.current_stock === 0)
    if (outOfStockProducts.length > 0) {
      alerts.push({
        id: "out_of_stock",
        type: "estoque",
        title: "Produtos em Falta",
        message: `${outOfStockProducts.length} produtos estão completamente sem estoque.`,
        severity: "high",
        icon: "AlertTriangle",
        actionable: true,
        priority: 10,
      })
    }

// Alerta de valor do estoque
    const totalStockValue = products.reduce((sum, p) => sum + (p.current_stock || 0) * (p.last_purchase_value || 0), 0)
    alerts.push({
      id: "stock_value",
      type: "financeiro",
      title: "Valor Total do Estoque",
      message: `Valor atual do estoque: R$ ${totalStockValue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`,
      severity: "info",
      icon: "DollarSign",
      actionable: false,
      priority: 5,
    })

// Alerta de movimentações recentes
    if (movements.length > 0) {
      alerts.push({
        id: "recent_movements",
        type: "estoque",
        title: "Movimentações Recentes",
        message: `${movements.length} movimentações registradas recentemente no sistema.`,
        severity: "info",
        icon: "Activity",
        actionable: false,
        priority: 3,
      })
    }

// Alerta de sistema funcionando
    alerts.push({
      id: "system_status",
      type: "estoque",
      title: "Sistema Operacional",
      message: "Conexão com Supabase estabelecida. Dados atualizados em tempo real.",
      severity: "info",
      icon: "Target",
      actionable: false,
      priority: 1,
    })

console.log(`Alertas gerados: ${alerts.length}`)

return NextResponse.json({
      success: true,
      alerts: alerts,
      timestamp: new Date().toISOString(),
    })
  } catch (error) {
    console.error("Erro ao gerar alertas:", error)

// Retornar alertas de fallback em caso de erro
    const fallbackAlerts = [
      {
        id: "fallback_error",
        type: "estoque",
        title: "Erro de Conexão",
        message: "Não foi possível conectar ao banco de dados. Verifique a configuração do Supabase.",
        severity: "medium",
        icon: "AlertTriangle",
        actionable: true,
        priority: 7,
      },
    ]

return NextResponse.json({
      success: false,
      alerts: fallbackAlerts,
      error: error instanceof Error ? error.message : "Erro desconhecido",
      timestamp: new Date().toISOString(),
    })
  }
}
[V0_FILE]typescript:file="app/auth/callback/route.ts" isMerged="true"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get("code")
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get("next") ?? "/"

if (code) {
    const supabase = createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get("x-forwarded-host") // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === "development"
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

// return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}
[V0_FILE]plaintext:file=".env.local" isMerged="true"
# Google Gemini API Key
GOOGLE_GENERATIVE_AI_API_KEY=AIzaSyCMBP8WML7isq78Ahoxa0Tt1uaofPEyx9U

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://fonobanapqbpzgihozev.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM4MDI2OTksImV4cCI6MjA2OTM3ODY5OX0.4pBNSJHU1Cgrv4Wqui_X8VsmPcfeXbvK_cRXKmcle4E
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1MzgwMjY5OSwiZXhwIjoyMDY5Mzc4Njk5fQ.pgiorFaZHNx2aG4SUl-3b_GomTSSzPa7zpOeIBjphmQ
SUPABASE_URL=https://fonobanapqbpzgihozev.supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZvbm9iYW5hcHFicHpnaWhvemV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM4MDI2OTksImV4cCI6MjA2OTM3ODY5OX0.4pBNSJHU1Cgrv4Wqui_X8VsmPcfeXbvK_cRXKmcle4E
SUPABASE_JWT_SECRET=Qzju9T6u7EPD7KzDK4PHFO8HowNALD1p6g2IQ5s9Jd5i/K4K54ZVua1yxHrJvuocS7JnVPmeJyeqkXEFwjHM7A==

# PostgreSQL Configuration
POSTGRES_URL=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:6543/postgres?sslmode=require&supa=base-pooler.x
POSTGRES_URL_NON_POOLING=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:5432/postgres?sslmode=require
POSTGRES_PRISMA_URL=postgres://postgres.fonobanapqbpzgihozev:YDPm1WiTH1TzjIPF@aws-0-us-east-1.pooler.supabase.com:6543/postgres?sslmode=require&pgbouncer=true
POSTGRES_HOST=host
POSTGRES_USER=user
POSTGRES_PASSWORD=YDPm1WiTH1TzjIPF
POSTGRES_DATABASE=database
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { updateSession } from "@/lib/supabase/middleware"
import type { NextRequest } from "next/server"

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    "/((?!_next/static|_next/image|favicon.ico|.*.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
}
[V0_FILE]typescript:file="hooks/use-theme.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

type Theme = "light" | "dark" | "system"

export function useTheme() {
  const [theme, setTheme] = useState<Theme>("light")
  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light")

useEffect(() => {
    // Carregar tema salvo do localStorage
    const savedTheme = localStorage.getItem("risoarte-theme") as Theme
    if (savedTheme) {
      setTheme(savedTheme)
    }

// Detectar preferência do sistema
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
    const handleChange = () => {
      if (theme === "system") {
        setResolvedTheme(mediaQuery.matches ? "dark" : "light")
      }
    }

mediaQuery.addEventListener("change", handleChange)
    handleChange()

return () => mediaQuery.removeEventListener("change", handleChange)
  }, [theme])

useEffect(() => {
    // Resolver tema baseado na configuração
    if (theme === "system") {
      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
      setResolvedTheme(mediaQuery.matches ? "dark" : "light")
    } else {
      setResolvedTheme(theme as "light" | "dark")
    }
  }, [theme])

useEffect(() => {
    // Aplicar tema ao documento
    const root = document.documentElement
    root.classList.remove("light", "dark")
    root.classList.add(resolvedTheme)
  }, [resolvedTheme])

const updateTheme = (newTheme: Theme) => {
    setTheme(newTheme)
    localStorage.setItem("risoarte-theme", newTheme)
  }

return {
    theme,
    setTheme: updateTheme,
    resolvedTheme,
  }
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}

// Check if Supabase environment variables are available
export const isSupabaseConfigured =
  typeof process.env.NEXT_PUBLIC_SUPABASE_URL === "string" &&
  process.env.NEXT_PUBLIC_SUPABASE_URL.length > 0 &&
  typeof process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY === "string" &&
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY.length > 0
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

// IMPORTANT: Avoid writing any logic between createServerClient and
  // supabase.auth.getUser(). A simple mistake could make it very hard to debug
  // issues with users being randomly logged out.

const {
    data: { user },
  } = await supabase.auth.getUser()

// Protected routes - redirect to login if not authenticated
  const isAuthRoute =
    request.nextUrl.pathname.startsWith("/auth/login") ||
    request.nextUrl.pathname.startsWith("/auth/signup") ||
    request.nextUrl.pathname === "/auth/callback"

if (!isAuthRoute && !user) {
    // no user, potentially respond by redirecting the user to the login page
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

// IMPORTANT: You *must* return the supabaseResponse object as it is. If you're
  // creating a new response object with NextResponse.next() make sure to:
  // 1. Pass the request in it, like so:
  //    const myNewResponse = NextResponse.next({ request })
  // 2. Copy over the cookies, like so:
  //    myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
  // 3. Change the myNewResponse object to fit your needs, but avoid changing
  //    the cookies!
  // 4. Finally:
  //    return myNewResponse
  // If this is not done, you may be causing the browser and server to go out
  // of sync and terminate the user's session prematurely!

return supabaseResponse
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export function createClient() {
  const cookieStore = cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => {
            cookieStore.set(name, value, options)
          })
        } catch {
          // The `setAll` method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}

import { createClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"

export async function signIn(prevState: any, formData: FormData) {
  const email = formData.get("email") as string
  const password = formData.get("password") as string

if (!email || !password) {
    return { error: "Email and password are required" }
  }

const supabase = createClient()

const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

if (error) {
    return { error: error.message }
  }

redirect("/")
}

export async function signUp(prevState: any, formData: FormData) {
  const email = formData.get("email") as string
  const password = formData.get("password") as string
  const fullName = formData.get("fullName") as string
  const clinicName = formData.get("clinicName") as string

if (!email || !password) {
    return { error: "Email and password are required" }
  }

const supabase = createClient()

const { error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      emailRedirectTo:
        process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL ||
        `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/auth/callback`,
      data: {
        full_name: fullName,
        clinic_name: clinicName,
      },
    },
  })

if (error) {
    return { error: error.message }
  }

return { success: "Verifique seu email para confirmar sua conta." }
}

export async function signOut() {
  const supabase = createClient()
  await supabase.auth.signOut()
  redirect("/auth/login")
}

export async function updateProfile(formData: FormData) {
  const supabase = createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    return { error: "Usuário não autenticado" }
  }

const profileData = {
    full_name: formData.get("full_name") as string,
    clinic_name: formData.get("clinic_name") as string,
    phone: formData.get("phone") as string,
    position: formData.get("position") as string,
    specialization: formData.get("specialization") as string,
    cro_number: formData.get("cro_number") as string,
    updated_at: new Date().toISOString(),
  }

const { error } = await supabase.from("user_profiles").upsert({ user_id: user.id, ...profileData })

if (error) {
    return { error: error.message }
  }

return { success: "Perfil atualizado com sucesso" }
}

export async function updatePassword(formData: FormData) {
  const supabase = createClient()

const currentPassword = formData.get("current_password") as string
  const newPassword = formData.get("new_password") as string
  const confirmPassword = formData.get("confirm_password") as string

if (!currentPassword || !newPassword || !confirmPassword) {
    return { error: "Todos os campos são obrigatórios" }
  }

if (newPassword !== confirmPassword) {
    return { error: "As senhas não coincidem" }
  }

if (newPassword.length < 6) {
    return { error: "A nova senha deve ter pelo menos 6 caracteres" }
  }

const { error } = await supabase.auth.updateUser({
    password: newPassword,
  })

if (error) {
    return { error: error.message }
  }

return { success: "Senha atualizada com sucesso" }
}
[V0_FILE]typescript:file="lib/database-estoque.ts" isMerged="true"
import { supabase } from "./supabase-estoque"
import type { Product, MovementHistory, ProductLot } from "@/app/estoque/page"
import type { DatabaseProduct, DatabaseMovementHistory, DatabaseProductLot } from "./supabase-estoque"

// Helper para converter lote do banco para o formato da aplicação
function convertDatabaseProductLotToProductLot(dbLot: DatabaseProductLot): ProductLot {
  return {
    id: dbLot.id,
    quantity: dbLot.quantity,
    expirationDate: dbLot.expiration_date,
    purchaseDate: dbLot.purchase_date,
  }
}

// Converter produto do banco para o formato da aplicação
function convertDatabaseProductToProduct(
  dbProduct: DatabaseProduct,
  movementHistory: MovementHistory[] = [],
  lots: ProductLot[] = [],
): Product {
  // Calcula o estoque atual somando as quantidades de todos os lotes
  const currentStock = lots.reduce((sum, lot) => sum + lot.quantity, 0)

return {
    id: dbProduct.id,
    name: dbProduct.name,
    brand: dbProduct.brand,
    packageType: dbProduct.package_type,
    productType: dbProduct.product_type,
    supplier: dbProduct.supplier,
    currentStock: currentStock, // Derivado dos lotes
    idealQuantity: dbProduct.ideal_quantity,
    lastPurchaseDate: dbProduct.last_purchase_date,
    lastPurchaseValue: dbProduct.last_purchase_value,
    lastPurchaseQuantity: dbProduct.last_purchase_quantity,
    stockEntry: 0,
    stockExit: 0,
    movementHistory,
    lots, // Adiciona os lotes ao objeto do produto
  }
}

// Converter histórico do banco para o formato da aplicação
function convertDatabaseMovementToMovement(dbMovement: DatabaseMovementHistory): MovementHistory {
  return {
    id: dbMovement.id,
    date: dbMovement.movement_date,
    type: dbMovement.movement_type,
    quantity: dbMovement.quantity,
    previousStock: dbMovement.previous_stock,
    newStock: dbMovement.new_stock,
    user: dbMovement.user_name,
    notes: dbMovement.notes,
  }
}

// Buscar todos os produtos com histórico e lotes
export async function getAllProducts(): Promise<Product[]> {
  try {
    // Buscar produtos
    const { data: products, error: productsError } = await supabase.from("products").select("*").order("name")
    if (productsError) throw productsError

// Buscar todos os lotes
    const { data: lots, error: lotsError } = await supabase
      .from("product_lots")
      .select("*")
      .order("expiration_date", { ascending: true, nullsFirst: false }) // Ordenar por vencimento (nulos por último)
      .order("created_at", { ascending: true }) // Ordenação secundária para desempate
    if (lotsError) throw lotsError

// Buscar histórico de movimentações para todos os produtos
    const { data: movements, error: movementsError } = await supabase
      .from("movement_history")
      .select("*")
      .order("movement_date", { ascending: false })
    if (movementsError) throw movementsError

// Agrupar movimentações por produto
    const movementsByProduct =
      movements?.reduce(
        (acc, movement) => {
          if (!acc[movement.product_id]) {
            acc[movement.product_id] = []
          }
          acc[movement.product_id].push(convertDatabaseMovementToMovement(movement))
          return acc
        },
        {} as Record<string, MovementHistory[]>,
      ) || {}

// Agrupar lotes por produto
    const lotsByProduct =
      lots?.reduce(
        (acc, lot) => {
          if (!acc[lot.product_id]) {
            acc[lot.product_id] = []
          }
          acc[lot.product_id].push(convertDatabaseProductLotToProductLot(lot))
          return acc
        },
        {} as Record<string, ProductLot[]>,
      ) || {}

// Converter produtos com histórico e lotes
    return (
      products?.map((product) =>
        convertDatabaseProductToProduct(product, movementsByProduct[product.id] || [], lotsByProduct[product.id] || []),
      ) || []
    )
  } catch (error) {
    console.error("Erro ao buscar produtos:", error)
    return []
  }
}

// Criar novo produto e seu lote inicial
export async function createProduct(
  product: Omit<Product, "id" | "movementHistory" | "stockEntry" | "stockExit" | "lots">,
  initialLotQuantity: number,
  initialLotExpirationDate: string | null,
): Promise<Product | null> {
  try {
    // 1. Criar o produto
    const { data: newProductData, error: productError } = await supabase
      .from("products")
      .insert({
        name: product.name,
        brand: product.brand,
        package_type: product.packageType,
        product_type: product.productType,
        supplier: product.supplier,
        current_stock: 0, // Estoque inicial é 0, será atualizado pelo lote
        ideal_quantity: product.idealQuantity,
        last_purchase_date: product.lastPurchaseDate,
        last_purchase_value: product.lastPurchaseValue,
        last_purchase_quantity: product.lastPurchaseQuantity,
      })
      .select()
      .single()

if (productError) throw productError

// 2. Criar o lote inicial para este produto
    // Se a data de expiração for null, usar uma data muito distante no futuro
    const expirationDate = initialLotExpirationDate || "2099-12-31"

const { data: newLotData, error: lotError } = await supabase
      .from("product_lots")
      .insert({
        product_id: newProductData.id,
        quantity: initialLotQuantity,
        expiration_date: expirationDate,
        purchase_date: product.lastPurchaseDate,
      })
      .select()
      .single()

if (lotError) throw lotError

// 3. Atualizar o current_stock do produto com base no novo lote
    const { error: updateStockError } = await supabase
      .from("products")
      .update({ current_stock: initialLotQuantity })
      .eq("id", newProductData.id)

if (updateStockError) throw updateStockError

return convertDatabaseProductToProduct(newProductData, [], [convertDatabaseProductLotToProductLot(newLotData)])
  } catch (error) {
    console.error("Erro ao criar produto e lote inicial:", error)
    return null
  }
}

// Atualizar produto (excluindo current_stock e expiration_date, que são gerenciados por lotes)
export async function updateProduct(
  id: string,
  updates: Partial<Omit<Product, "currentStock" | "lots">>,
): Promise<boolean> {
  try {
    const updateData: Partial<DatabaseProduct> = {}

if (updates.name !== undefined) updateData.name = updates.name
    if (updates.brand !== undefined) updateData.brand = updates.brand
    if (updates.packageType !== undefined) updateData.package_type = updates.packageType
    if (updates.productType !== undefined) updateData.product_type = updates.productType
    if (updates.supplier !== undefined) updateData.supplier = updates.supplier
    if (updates.idealQuantity !== undefined) updateData.ideal_quantity = updates.idealQuantity
    if (updates.lastPurchaseDate !== undefined) updateData.last_purchase_date = updates.lastPurchaseDate
    if (updates.lastPurchaseValue !== undefined) updateData.last_purchase_value = updates.lastPurchaseValue
    if (updates.lastPurchaseQuantity !== undefined) updateData.last_purchase_quantity = updates.lastPurchaseQuantity

const { error } = await supabase.from("products").update(updateData).eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao atualizar produto:", error)
    return false
  }
}

// Deletar produto (o cascade deletará lotes e movimentações associadas)
export async function deleteProduct(id: string): Promise<boolean> {
  try {
    const { error } = await supabase.from("products").delete().eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao deletar produto:", error)
    return false
  }
}

// Adicionar movimentação ao histórico
export async function addMovementHistory(productId: string, movement: Omit<MovementHistory, "id">): Promise<boolean> {
  try {
    const { error } = await supabase.from("movement_history").insert({
      product_id: productId,
      movement_date: movement.date,
      movement_type: movement.type,
      quantity: movement.quantity,
      previous_stock: movement.previousStock,
      new_stock: movement.newStock,
      user_name: movement.user,
      notes: movement.notes,
    })

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao adicionar movimentação:", error)
    return false
  }
}

// Novo: Adicionar um novo lote de produto (para entradas)
export async function addProductLot(
  productId: string,
  quantity: number,
  expirationDate: string | null,
  purchaseDate: string,
): Promise<ProductLot | null> {
  try {
    // Se a data de expiração for null, usar uma data muito distante no futuro
    const finalExpirationDate = expirationDate || "2099-12-31"

const { data, error } = await supabase
      .from("product_lots")
      .insert({
        product_id: productId,
        quantity: quantity,
        expiration_date: finalExpirationDate,
        purchase_date: purchaseDate,
      })
      .select()
      .single()

if (error) throw error
    return convertDatabaseProductLotToProductLot(data)
  } catch (error) {
    console.error("Erro ao adicionar lote de produto:", error)
    return null
  }
}

// Novo: Deduzir quantidade dos lotes existentes (FIFO - Primeiro a Vencer, Primeiro a Sair)
export async function deductFromLots(productId: string, quantityToDeduct: number): Promise<boolean> {
  try {
    // Obter todos os lotes para o produto, ordenados por data de vencimento (FIFO)
    // Lotes com data de vencimento indeterminada (NULL) devem vir por último
    const { data: lots, error: fetchError } = await supabase
      .from("product_lots")
      .select("*")
      .eq("product_id", productId)
      .order("expiration_date", { ascending: true, nullsFirst: false }) // Lotes com data vêm antes dos nulos
      .order("created_at", { ascending: true }) // Ordenação secundária para desempate

if (fetchError) throw fetchError
    if (!lots || lots.length === 0) return false // Não há lotes para deduzir

let remainingToDeduct = quantityToDeduct
    const updatePromises = []
    const deletePromises = []

for (const lot of lots) {
      if (remainingToDeduct <= 0) break

if (lot.quantity <= remainingToDeduct) {
        // Este lote será totalmente consumido
        deletePromises.push(supabase.from("product_lots").delete().eq("id", lot.id))
        remainingToDeduct -= lot.quantity
      } else {
        // Este lote será parcialmente consumido
        updatePromises.push(
          supabase
            .from("product_lots")
            .update({ quantity: lot.quantity - remainingToDeduct })
            .eq("id", lot.id),
        )
        remainingToDeduct = 0
      }
    }

// Executar todas as atualizações e exclusões
    const results = await Promise.all([...updatePromises, ...deletePromises])
    const hasErrors = results.some((res) => res.error)

if (hasErrors) {
      console.error("Erro ao deduzir de lotes:", results.map((res) => res.error).filter(Boolean))
      return false
    }

return true
  } catch (error) {
    console.error("Erro ao deduzir de lotes:", error)
    return false
  }
}

// Nova função: Verificar se um produto com o mesmo nome já existe
export async function checkProductExistsByName(name: string): Promise<boolean> {
  try {
    const { data, error } = await supabase
      .from("products")
      .select("id")
      .ilike("name", name) // 'ilike' para busca case-insensitive
      .limit(1)

if (error) throw error
    return data && data.length > 0
  } catch (error) {
    console.error("Erro ao verificar produto por nome:", error)
    return false
  }
}
[V0_FILE]typescript:file="lib/database.ts" isMerged="true"
import { supabase } from "./supabase"
import type { Product, MovementHistory } from "@/app/page"
import type { DatabaseProduct, DatabaseMovementHistory } from "./supabase"

// Converter produto do banco para o formato da aplicação
function convertDatabaseProductToProduct(dbProduct: DatabaseProduct, movementHistory: MovementHistory[] = []): Product {
  return {
    id: dbProduct.id,
    name: dbProduct.name,
    brand: dbProduct.brand,
    packageType: dbProduct.package_type,
    productType: dbProduct.product_type,
    supplier: dbProduct.supplier,
    currentStock: dbProduct.current_stock,
    idealQuantity: dbProduct.ideal_quantity,
    lastPurchaseDate: dbProduct.last_purchase_date,
    lastPurchaseValue: dbProduct.last_purchase_value,
    lastPurchaseQuantity: dbProduct.last_purchase_quantity,
    stockEntry: 0,
    stockExit: 0,
    movementHistory,
  }
}

// Buscar todos os produtos com histórico
export async function getAllProducts(): Promise<Product[]> {
  try {
    // Buscar produtos
    const { data: products, error: productsError } = await supabase.from("products").select("*").order("name")

if (productsError) throw productsError

if (movementsError) throw movementsError

// Converter produtos com histórico
    return (
      products?.map((product) => convertDatabaseProductToProduct(product, movementsByProduct[product.id] || [])) || []
    )
  } catch (error) {
    console.error("Erro ao buscar produtos:", error)
    return []
  }
}

// Criar novo produto
export async function createProduct(
  product: Omit<Product, "id" | "movementHistory" | "stockEntry" | "stockExit">,
): Promise<Product | null> {
  try {
    const { data, error } = await supabase
      .from("products")
      .insert({
        name: product.name,
        brand: product.brand,
        package_type: product.packageType,
        product_type: product.productType,
        supplier: product.supplier,
        current_stock: product.currentStock,
        ideal_quantity: product.idealQuantity,
        last_purchase_date: product.lastPurchaseDate,
        last_purchase_value: product.lastPurchaseValue,
        last_purchase_quantity: product.lastPurchaseQuantity,
      })
      .select()
      .single()

if (error) throw error

return convertDatabaseProductToProduct(data, [])
  } catch (error) {
    console.error("Erro ao criar produto:", error)
    return null
  }
}

// Atualizar produto
export async function updateProduct(id: string, updates: Partial<Product>): Promise<boolean> {
  try {
    const updateData: Partial<DatabaseProduct> = {}

if (updates.name !== undefined) updateData.name = updates.name
    if (updates.brand !== undefined) updateData.brand = updates.brand
    if (updates.packageType !== undefined) updateData.package_type = updates.packageType
    if (updates.productType !== undefined) updateData.product_type = updates.productType
    if (updates.supplier !== undefined) updateData.supplier = updates.supplier
    if (updates.currentStock !== undefined) updateData.current_stock = updates.currentStock
    if (updates.idealQuantity !== undefined) updateData.ideal_quantity = updates.idealQuantity
    if (updates.lastPurchaseDate !== undefined) updateData.last_purchase_date = updates.lastPurchaseDate
    if (updates.lastPurchaseValue !== undefined) updateData.last_purchase_value = updates.lastPurchaseValue
    if (updates.lastPurchaseQuantity !== undefined) updateData.last_purchase_quantity = updates.lastPurchaseQuantity

const { error } = await supabase.from("products").update(updateData).eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao atualizar produto:", error)
    return false
  }
}

// Deletar produto
export async function deleteProduct(id: string): Promise<boolean> {
  try {
    const { error } = await supabase.from("products").delete().eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao deletar produto:", error)
    return false
  }
}

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao adicionar movimentação:", error)
    return false
  }
}

// Buscar histórico de um produto específico
export async function getProductMovementHistory(productId: string): Promise<MovementHistory[]> {
  try {
    const { data, error } = await supabase
      .from("movement_history")
      .select("*")
      .eq("product_id", productId)
      .order("movement_date", { ascending: false })

if (error) throw error

return data?.map(convertDatabaseMovementToMovement) || []
  } catch (error) {
    console.error("Erro ao buscar histórico:", error)
    return []
  }
}
[V0_FILE]typescript:file="lib/prosthetic-database.ts" isMerged="true"
import { supabase } from "./supabase"

// Tipos para o controle protético
export interface WorkSchedule {
  monday: { active: boolean; start: string; end: string }
  tuesday: { active: boolean; start: string; end: string }
  wednesday: { active: boolean; start: string; end: string }
  thursday: { active: boolean; start: string; end: string }
  friday: { active: boolean; start: string; end: string }
  saturday: { active: boolean; start: string; end: string }
  sunday: { active: boolean; start: string; end: string }
}

export interface Professional {
  id: string
  name: string
  email?: string
  phone?: string
  specialty?: string
  role: string
  access_level: number
  is_active: boolean
  hire_date?: string
  salary?: number
  performance_score: number
  // Campos pessoais
  birth_date?: string
  cpf?: string
  rg?: string
  address?: string
  emergency_contact_name?: string
  emergency_contact_phone?: string
  documents?: {
    contract?: string
    insurance?: string
    medical_certificate?: string
    diploma?: string
    [key: string]: string | undefined
  }
  permissions?: {
    prosthetic_control: boolean
    employee_management: boolean
    inventory_control: boolean
    reports: boolean
    settings: boolean
    financial: boolean
  }
  work_schedule?: WorkSchedule
  created_at: string
  updated_at: string
}

export interface Laboratory {
  id: string
  name: string
  contact_phone?: string
  contact_email?: string
  address?: string
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface ProstheticService {
  id: string
  professional_id?: string
  professional?: Professional
  laboratory_id?: string
  laboratory?: Laboratory
  work_description: string
  observations?: string
  return_deadline?: string
  agreed_value?: number
  payment_date?: string
  status: "PRE_ENVIO" | "ENVIO_LABORATORIO" | "RETORNO_CLINICA" | "AGENDAMENTO_PACIENTE" | "INSTALADO"
  created_at: string
  updated_at: string
}

// Buscar todos os profissionais
export async function getAllProfessionals(): Promise<Professional[]> {
  try {
    const { data, error } = await supabase.from("professionals").select("*").eq("is_active", true).order("name")

if (error) throw error
    return data || []
  } catch (error) {
    console.error("Erro ao buscar profissionais:", error)
    return []
  }
}

// Buscar profissionais doutores para o controle protético
export async function getDoctors(): Promise<Professional[]> {
  try {
    const { data, error } = await supabase
      .from("professionals")
      .select("*")
      .eq("is_active", true)
      .eq("role", "doutor")
      .order("name")

if (error) throw error
    return data || []
  } catch (error) {
    console.error("Erro ao buscar doutores:", error)
    return []
  }
}

// Criar novo profissional/funcionário
export async function createProfessional(
  professional: Omit<Professional, "id" | "created_at" | "updated_at">,
): Promise<Professional | null> {
  try {
    const { data, error } = await supabase.from("professionals").insert(professional).select().single()

if (error) throw error
    return data
  } catch (error) {
    console.error("Erro ao criar profissional:", error)
    return null
  }
}

// Atualizar profissional
export async function updateProfessional(id: string, updates: Partial<Professional>): Promise<boolean> {
  try {
    const { error } = await supabase.from("professionals").update(updates).eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao atualizar profissional:", error)
    return false
  }
}

// Deletar profissional (desativar)
export async function deleteProfessional(id: string): Promise<boolean> {
  try {
    const { error } = await supabase.from("professionals").update({ is_active: false }).eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao desativar profissional:", error)
    return false
  }
}

// Upload de arquivo
export async function uploadDocument(file: File, employeeId: string, documentType: string): Promise<string | null> {
  try {
    const fileExt = file.name.split(".").pop()
    const fileName = `${employeeId}/${documentType}.${fileExt}`

const { data, error } = await supabase.storage.from("employee-documents").upload(fileName, file, {
      upsert: true,
    })

if (error) throw error

const {
      data: { publicUrl },
    } = supabase.storage.from("employee-documents").getPublicUrl(fileName)

return publicUrl
  } catch (error) {
    console.error("Erro ao fazer upload:", error)
    return null
  }
}

// Buscar todos os laboratórios
export async function getAllLaboratories(): Promise<Laboratory[]> {
  try {
    const { data, error } = await supabase.from("laboratories").select("*").eq("is_active", true).order("name")

if (error) throw error
    return data || []
  } catch (error) {
    console.error("Erro ao buscar laboratórios:", error)
    return []
  }
}

// Criar novo laboratório
export async function createLaboratory(name: string): Promise<Laboratory | null> {
  try {
    const { data, error } = await supabase.from("laboratories").insert({ name }).select().single()

if (error) throw error
    return data
  } catch (error) {
    console.error("Erro ao criar laboratório:", error)
    return null
  }
}

// Buscar todos os serviços protéticos
export async function getAllProstheticServices(): Promise<ProstheticService[]> {
  try {
    const { data, error } = await supabase
      .from("prosthetic_services")
      .select(`
        *,
        professional:professional_id(
          id,
          name,
          email,
          phone,
          specialty,
          role,
          access_level,
          is_active,
          hire_date,
          salary,
          performance_score,
          created_at,
          updated_at
        ),
        laboratory:laboratory_id(
          id,
          name,
          contact_phone,
          contact_email,
          address,
          is_active,
          created_at,
          updated_at
        )
      `)
      .order("created_at", { ascending: false })

if (error) throw error
    return data || []
  } catch (error) {
    console.error("Erro ao buscar serviços protéticos:", error)
    return []
  }
}

// Criar novo serviço protético
export async function createProstheticService(
  service: Omit<ProstheticService, "id" | "created_at" | "updated_at" | "professional" | "laboratory">,
): Promise<ProstheticService | null> {
  try {
    const { data, error } = await supabase
      .from("prosthetic_services")
      .insert({
        professional_id: service.professional_id,
        laboratory_id: service.laboratory_id,
        work_description: service.work_description,
        observations: service.observations,
        return_deadline: service.return_deadline,
        agreed_value: service.agreed_value,
        payment_date: service.payment_date,
        status: service.status || "PRE_ENVIO",
      })
      .select(`
        *,
        professional:professional_id(
          id,
          name,
          email,
          phone,
          specialty,
          role,
          access_level,
          is_active,
          hire_date,
          salary,
          performance_score,
          created_at,
          updated_at
        ),
        laboratory:laboratory_id(
          id,
          name,
          contact_phone,
          contact_email,
          address,
          is_active,
          created_at,
          updated_at
        )
      `)
      .single()

if (error) throw error
    return data
  } catch (error) {
    console.error("Erro ao criar serviço protético:", error)
    return null
  }
}

// Atualizar status do serviço protético
export async function updateProstheticServiceStatus(id: string, status: ProstheticService["status"]): Promise<boolean> {
  try {
    const { error } = await supabase.from("prosthetic_services").update({ status }).eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao atualizar status:", error)
    return false
  }
}

// Deletar serviço protético
export async function deleteProstheticService(id: string): Promise<boolean> {
  try {
    const { error } = await supabase.from("prosthetic_services").delete().eq("id", id)

if (error) throw error
    return true
  } catch (error) {
    console.error("Erro ao deletar serviço:", error)
    return false
  }
}
[V0_FILE]typescript:file="lib/supabase-estoque.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

// Tipos para o banco de dados
export interface DatabaseProduct {
  id: string
  name: string
  brand: string
  package_type: string
  product_type: string
  supplier: string
  current_stock: number // Este será um valor derivado da soma dos lotes
  ideal_quantity: number
  last_purchase_date: string
  last_purchase_value: number
  last_purchase_quantity: number
  created_at: string
  updated_at: string
}

export interface DatabaseProductLot {
  id: string
  product_id: string
  quantity: number
  expiration_date: string | null // Alterado para permitir NULL
  purchase_date: string
  created_at: string
  updated_at: string
}

export interface DatabaseMovementHistory {
  id: string
  product_id: string
  movement_date: string
  movement_type: "entry" | "exit" | "purchase" | "adjustment"
  quantity: number
  previous_stock: number
  new_stock: number
  user_name: string
  notes?: string
  created_at: string
}
[V0_FILE]typescript:file="lib/supabase.ts" isMerged="true"
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export const supabase = createClientComponentClient()

export const createClient = () => createClientComponentClient()

// Tipos para o banco de dados
export interface DatabaseProduct {
  id: string
  name: string
  brand: string
  package_type: string
  product_type: string
  supplier: string
  current_stock: number
  ideal_quantity: number
  last_purchase_date: string
  last_purchase_value: number
  last_purchase_quantity: number
  created_at: string
  updated_at: string
}

export interface DatabaseConversation {
  id: string
  title: string
  created_at: string
  updated_at: string
  archived: boolean
}

export interface DatabaseMessage {
  id: string
  conversation_id: string
  role: "user" | "assistant"
  content: string
  created_at: string
}

export const chatService = {
  // Carregar todas as conversas
  async getConversations(): Promise<DatabaseConversation[]> {
    const { data, error } = await supabase.from("conversations").select("*").order("updated_at", { ascending: false })

if (error) throw error
    return data || []
  },

// Carregar mensagens de uma conversa
  async getMessages(conversationId: string): Promise<DatabaseMessage[]> {
    const { data, error } = await supabase
      .from("messages")
      .select("*")
      .eq("conversation_id", conversationId)
      .order("created_at", { ascending: true })

if (error) throw error
    return data || []
  },

// Criar nova conversa
  async createConversation(title = "Nova Conversa"): Promise<DatabaseConversation> {
    const { data, error } = await supabase.from("conversations").insert({ title }).select().single()

if (error) throw error
    return data
  },

// Salvar mensagem
  async saveMessage(conversationId: string, role: "user" | "assistant", content: string): Promise<DatabaseMessage> {
    const { data, error } = await supabase
      .from("messages")
      .insert({
        conversation_id: conversationId,
        role,
        content,
      })
      .select()
      .single()

if (error) throw error

// Atualizar timestamp da conversa
    await supabase.from("conversations").update({ updated_at: new Date().toISOString() }).eq("id", conversationId)

return data
  },

// Atualizar título da conversa
  async updateConversationTitle(conversationId: string, title: string): Promise<void> {
    const { error } = await supabase
      .from("conversations")
      .update({ title, updated_at: new Date().toISOString() })
      .eq("id", conversationId)

if (error) throw error
  },

// Arquivar/desarquivar conversa
  async archiveConversation(conversationId: string, archived: boolean): Promise<void> {
    const { error } = await supabase
      .from("conversations")
      .update({ archived, updated_at: new Date().toISOString() })
      .eq("id", conversationId)

if (error) throw error
  },

// Deletar conversa
  async deleteConversation(conversationId: string): Promise<void> {
    const { error } = await supabase.from("conversations").delete().eq("id", conversationId)

if (error) throw error
  },
}
[V0_FILE]typescript:file="lib/types.ts" isQuickEdit="true" isMerged="true"
export interface MovementHistory {
  id: string
  date: string
  type: "entry" | "exit" | "purchase" | "adjustment"
  quantity: number
  previousStock: number
  newStock: number
  user: string
  notes?: string
}

export interface ProductLot {
  id: string
  quantity: number
  expirationDate: string | null
  purchaseDate: string
}

export interface Product {
  id: string
  name: string
  brand: string
  packageType: string
  productType: string
  supplier: string
  currentStock: number
  idealQuantity: number
  lastPurchaseDate: string
  lastPurchaseValue: number
  lastPurchaseQuantity: number
  stockEntry: number
  stockExit: number
  movementHistory: MovementHistory[]
  lots: ProductLot[]
  alternativeNames?: string[]
  photos?: string[]
}
[V0_FILE]typescriptreact:file="components/games/bomb-game.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ArrowLeft, RotateCcw, Bomb, Trophy, Zap, Settings, Home, Clock, Target, Award } from "lucide-react"
import { cn } from "@/lib/utils"
import { CardManager } from "./card-manager"

interface BombGameProps {
  onBack?: () => void
}

interface Equipment {
  id: number
  name: string
  image: string
  alternatives: string[]
  category: string
}

interface GameStats {
  totalTime: number
  correctAnswers: number
  wrongAnswers: number
  maxStreak: number
  averageTime: number
}

export function BombGame({ onBack }: BombGameProps) {
  const [currentEquipment, setCurrentEquipment] = useState<Equipment | null>(null)
  const [userAnswer, setUserAnswer] = useState("")
  const [score, setScore] = useState(0)
  const [round, setRound] = useState(1)
  const [timeLeft, setTimeLeft] = useState(15)
  const [gameOver, setGameOver] = useState(false)
  const [bombExploded, setBombExploded] = useState(false)
  const [isCorrect, setIsCorrect] = useState<boolean | null>(null)
  const [showCelebration, setShowCelebration] = useState(false)
  const [streak, setStreak] = useState(0)
  const [showCardManager, setShowCardManager] = useState(false)
  const [gameStats, setGameStats] = useState<GameStats>({
    totalTime: 0,
    correctAnswers: 0,
    wrongAnswers: 0,
    maxStreak: 0,
    averageTime: 0,
  })
  const [gameStartTime, setGameStartTime] = useState<Date | null>(null)

// Equipamentos odontológicos com fotos reais
  const [equipments, setEquipments] = useState<Equipment[]>([
    {
      id: 1,
      name: "Turbina Odontológica",
      image: "/odontologic-high-speed-turbine.png",
      alternatives: ["turbina", "alta rotação", "caneta de alta", "motor alta rotação"],
      category: "Instrumentos Rotatórios",
    },
    {
      id: 2,
      name: "Micromotor",
      image: "/placeholder-88plz.png",
      alternatives: ["micromotor", "baixa rotação", "contra-ângulo", "motor baixa rotação"],
      category: "Instrumentos Rotatórios",
    },
    {
      id: 3,
      name: "Espelho Bucal",
      image: "/dental-mouth-mirror.png",
      alternatives: ["espelho", "espelho bucal", "espelho dental", "espelhinho"],
      category: "Instrumentos de Exame",
    },
    {
      id: 4,
      name: "Sonda Exploradora",
      image: "/dental-explorer-clinic.png",
      alternatives: ["sonda", "sonda exploradora", "explorador", "sonda dental"],
      category: "Instrumentos de Exame",
    },
    {
      id: 5,
      name: "Pinça Clínica",
      image: "/dental-clinic-forceps.png",
      alternatives: ["pinça", "pinça clínica", "pinça dental", "fórceps"],
      category: "Instrumentos de Preensão",
    },
    {
      id: 6,
      name: "Sugador Odontológico",
      image: "/dental-suction-device.png",
      alternatives: ["sugador", "aspirador", "sucção", "bomba de sucção"],
      category: "Equipamentos de Aspiração",
    },
    {
      id: 7,
      name: "Seringa Tríplice",
      image: "/dental-air-water-syringe.png",
      alternatives: ["seringa tríplice", "ar água", "seringa ar água", "spray"],
      category: "Equipamentos de Irrigação",
    },
    {
      id: 8,
      name: "Fotopolimerizador",
      image: "/dental-led-curing-light.png",
      alternatives: ["fotopolimerizador", "led", "aparelho de luz", "polimerizador"],
      category: "Equipamentos de Polimerização",
    },
    {
      id: 9,
      name: "Amalgamador",
      image: "/dental-amalgamator.png",
      alternatives: ["amalgamador", "misturador", "misturador de amalgama", "triturador"],
      category: "Equipamentos de Preparo",
    },
    {
      id: 10,
      name: "Autoclave",
      image: "/dental-hospital-autoclave.png",
      alternatives: ["autoclave", "esterilizador", "esterilização", "estufa"],
      category: "Equipamentos de Esterilização",
    },
    {
      id: 11,
      name: "Ultrassom Odontológico",
      image: "/placeholder.svg?height=200&width=200",
      alternatives: ["ultrassom", "raspador ultrassônico", "limpeza ultrassônica", "scaler"],
      category: "Equipamentos de Limpeza",
    },
    {
      id: 12,
      name: "Cadeira Odontológica",
      image: "/placeholder.svg?height=200&width=200",
      alternatives: ["cadeira", "cadeira odontológica", "cadeira dental", "equipo"],
      category: "Mobiliário Clínico",
    },
  ])

// Inicializar jogo
  useEffect(() => {
    resetGame()
  }, [])

// Timer
  useEffect(() => {
    if (!gameOver && timeLeft > 0) {
      const timer = setTimeout(() => {
        setTimeLeft(timeLeft - 1)
      }, 1000)
      return () => clearTimeout(timer)
    } else if (timeLeft === 0 && !gameOver) {
      handleTimeUp()
    }
  }, [timeLeft, gameOver])

const resetGame = () => {
    setScore(0)
    setRound(1)
    setGameOver(false)
    setBombExploded(false)
    setIsCorrect(null)
    setShowCelebration(false)
    setStreak(0)
    setGameStats({
      totalTime: 0,
      correctAnswers: 0,
      wrongAnswers: 0,
      maxStreak: 0,
      averageTime: 0,
    })
    setGameStartTime(new Date())
    nextRound()
  }

const nextRound = () => {
    const randomEquipment = equipments[Math.floor(Math.random() * equipments.length)]
    setCurrentEquipment(randomEquipment)
    setUserAnswer("")
    setTimeLeft(15)
    setIsCorrect(null)
  }

const handleTimeUp = () => {
    setIsCorrect(false)
    setStreak(0)
    setBombExploded(true)

setGameStats((prev) => ({
      ...prev,
      wrongAnswers: prev.wrongAnswers + 1,
      totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0,
      averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / round : 0,
    }))

setTimeout(() => {
      setGameOver(true)
    }, 3000)
  }

const checkAnswer = () => {
    if (!currentEquipment || !userAnswer.trim()) return

const answer = userAnswer.toLowerCase().trim()
    const isAnswerCorrect = currentEquipment.alternatives.some(
      (alt) => alt.toLowerCase().includes(answer) || answer.includes(alt.toLowerCase()),
    )

setIsCorrect(isAnswerCorrect)

if (isAnswerCorrect) {
      const timeBonus = Math.max(0, timeLeft - 3) * 2
      const streakBonus = streak >= 3 ? 5 : 0
      const basePoints = 15
      const points = basePoints + timeBonus + streakBonus
      setScore(score + points)
      setStreak(streak + 1)
      setTimeLeft(Math.min(timeLeft + 3, 20))

setGameStats((prev) => ({
        ...prev,
        correctAnswers: prev.correctAnswers + 1,
        maxStreak: Math.max(prev.maxStreak, streak + 1),
      }))
    } else {
      setStreak(0)
      setBombExploded(true)

setGameStats((prev) => ({
        ...prev,
        wrongAnswers: prev.wrongAnswers + 1,
        totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0,
        averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / round : 0,
      }))

setTimeout(() => {
        setGameOver(true)
      }, 3000)
      return
    }

setTimeout(() => {
      if (round >= 12) {
        const finalStats = {
          ...gameStats,
          correctAnswers: gameStats.correctAnswers + (isAnswerCorrect ? 1 : 0),
          totalTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) : 0,
          averageTime: gameStartTime ? Math.floor((new Date().getTime() - gameStartTime.getTime()) / 1000) / 12 : 0,
        }
        setGameStats(finalStats)
        setGameOver(true)
        if (score >= 150) {
          setShowCelebration(true)
        }
      } else {
        setRound(round + 1)
        nextRound()
      }
    }, 2000)
  }

const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !gameOver && timeLeft > 0) {
      checkAnswer()
    }
  }

const handleEquipmentsUpdate = (newEquipments: Equipment[]) => {
    setEquipments(newEquipments)
  }

const goToGamesPage = () => {
    window.location.href = "/jogos"
  }

return (
    <div className="container mx-auto p-6 relative">
      {/* Animação de celebração */}
      {showCelebration && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 text-center shadow-2xl animate-bounce">
            <div className="text-6xl mb-4">🏆</div>
            <h2 className="text-3xl font-bold text-green-600 mb-2">Especialista em Equipamentos!</h2>
            <p className="text-lg text-gray-600">Você domina os equipamentos odontológicos!</p>
            <div className="flex justify-center space-x-4 mt-4">
              <Zap className="h-6 w-6 text-yellow-500 animate-pulse" />
              <Trophy className="h-6 w-6 text-yellow-500 animate-pulse" />
              <Zap className="h-6 w-6 text-yellow-500 animate-pulse" />
            </div>
          </div>
        </div>
      )}

<div className="mb-6">
        <div className="flex items-center justify-between mb-4">
          <Button variant="ghost" onClick={onBack}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Voltar aos Jogos
          </Button>

<Dialog open={showCardManager} onOpenChange={setShowCardManager}>
            <DialogTrigger asChild>
              <Button variant="outline">
                <Settings className="h-4 w-4 mr-2" />
                Gerenciar Cards
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Gerenciar Cards do Jogo</DialogTitle>
              </DialogHeader>
              <CardManager equipments={equipments} onUpdate={handleEquipmentsUpdate} />
            </DialogContent>
          </Dialog>
        </div>

<div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold">🔧 Desafio dos Equipamentos</h1>
          <div className="flex gap-4">
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Pontuação</p>
              <p className="text-2xl font-bold text-green-600">{score}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Rodada</p>
              <p className="text-2xl font-bold">{round}/12</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Sequência</p>
              <p className="text-2xl font-bold text-purple-600">{streak}</p>
            </div>
          </div>
        </div>
      </div>

{!gameOver ? (
        <div className="flex flex-col lg:flex-row gap-8">
          <div className="flex-1">
            <Card
              className={cn(
                "transition-all duration-500",
                isCorrect === true && "ring-4 ring-green-500 bg-green-50",
                isCorrect === false && "ring-4 ring-red-500 bg-red-50",
                bombExploded && "animate-pulse bg-red-100",
              )}
            >
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span className="flex items-center gap-2">
                    {bombExploded ? "💥 BOMBA EXPLODIU!" : "Identifique o equipamento odontológico"}
                    <Bomb
                      className={cn("h-5 w-5", timeLeft <= 5 ? "text-red-500 animate-bounce" : "text-orange-500")}
                    />
                  </span>
                  <div
                    className={cn(
                      "text-3xl font-bold px-4 py-2 rounded-lg",
                      timeLeft <= 5 ? "bg-red-100 text-red-600 animate-pulse" : "bg-orange-100 text-orange-600",
                    )}
                  >
                    {timeLeft}s
                  </div>
                </CardTitle>
              </CardHeader>
              <CardContent>
                {currentEquipment && (
                  <div className="text-center space-y-6">
                    <div className="flex justify-center">
                      <img
                        src={currentEquipment.image || "/placeholder.svg"}
                        alt="Equipamento odontológico"
                        className={cn(
                          "w-64 h-64 object-cover rounded-lg shadow-lg border-4 border-blue-200",
                          bombExploded && "grayscale animate-pulse",
                        )}
                      />
                    </div>

{!bombExploded && (
                      <div className="space-y-4">
                        <div className="text-sm text-muted-foreground">
                          Categoria: <span className="font-medium">{currentEquipment.category}</span>
                        </div>

<Input
                          value={userAnswer}
                          onChange={(e) => setUserAnswer(e.target.value)}
                          onKeyPress={handleKeyPress}
                          placeholder="Digite o nome do equipamento..."
                          className="text-lg text-center"
                          disabled={gameOver || timeLeft === 0}
                          autoFocus
                        />

<Button
                          onClick={checkAnswer}
                          disabled={!userAnswer.trim() || gameOver || timeLeft === 0}
                          className="w-full text-lg py-3"
                        >
                          Confirmar Resposta
                        </Button>
                      </div>
                    )}

{bombExploded && (
                      <div className="p-6 bg-red-100 rounded-lg border-2 border-red-300">
                        <div className="text-4xl mb-4">💥</div>
                        <h3 className="text-2xl font-bold text-red-800 mb-2">A BOMBA EXPLODIU!</h3>
                        <p className="text-red-700 mb-2">Resposta correta: {currentEquipment.name}</p>
                        <p className="text-sm text-red-600">O jogo será finalizado em alguns segundos...</p>
                      </div>
                    )}

{isCorrect !== null && !bombExploded && (
                      <div
                        className={cn(
                          "p-4 rounded-lg text-center font-bold",
                          isCorrect ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800",
                        )}
                      >
                        {isCorrect ? (
                          <div>
                            <div className="text-2xl mb-2">✅ Correto! +3s</div>
                            <div>Resposta: {currentEquipment.name}</div>
                            {streak >= 3 && (
                              <div className="text-sm mt-1">🔥 Sequência de {streak}! Bônus +5 pontos!</div>
                            )}
                          </div>
                        ) : (
                          <div>
                            <div className="text-2xl mb-2">💥 Incorreto!</div>
                            <div>Resposta correta: {currentEquipment.name}</div>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

<div className="lg:w-80">
            <Card>
              <CardHeader>
                <CardTitle>Progresso</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="w-full bg-gray-200 rounded-full h-3">
                    <div
                      className="bg-gradient-to-r from-red-500 to-orange-500 h-3 rounded-full transition-all duration-500"
                      style={{ width: `${(round / 12) * 100}%` }}
                    />
                  </div>

<div className="text-center text-sm text-muted-foreground">Rodada {round} de 12</div>

<div className="p-3 bg-blue-50 rounded-lg">
                    <h4 className="font-semibold text-blue-800 mb-2">Como Jogar:</h4>
                    <ul className="text-xs text-blue-700 space-y-1">
                      <li>• Identifique o equipamento na foto</li>
                      <li>• Digite o nome antes da bomba explodir</li>
                      <li>• Você tem 15 segundos por rodada</li>
                      <li>• Ganhe +3s ao acertar!</li>
                      <li>• Sequências de acertos dão bônus!</li>
                    </ul>
                  </div>

{streak >= 3 && (
                    <div className="p-3 bg-purple-50 rounded-lg border border-purple-200">
                      <div className="text-center">
                        <div className="text-2xl mb-1">🔥</div>
                        <div className="font-bold text-purple-800">Sequência de {streak}!</div>
                        <div className="text-xs text-purple-600">+5 pontos de bônus por acerto</div>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      ) : (
        <Card className="max-w-5xl mx-auto border-0 shadow-2xl bg-gradient-to-br from-slate-50 to-blue-50/30">
          <CardHeader className="text-center pb-8">
            <div className="mb-6">
              <div className="text-8xl mb-4 animate-bounce">
                {bombExploded ? "💥" : score >= 150 ? "🏆" : score >= 100 ? "🥈" : score >= 60 ? "🥉" : "💣"}
              </div>
              <CardTitle className="text-4xl font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-transparent">
                {bombExploded ? "GAME OVER" : "Jogo Finalizado!"}
              </CardTitle>
              <p className="text-lg text-slate-600 mt-2">
                {bombExploded ? "A bomba explodiu!" : "Parabéns pela performance!"}
              </p>
            </div>
          </CardHeader>

<CardContent className="space-y-8">
            {/* Estatísticas principais */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              <Card className="border-0 shadow-md bg-gradient-to-br from-emerald-50 to-emerald-100">
                <CardContent className="p-6 text-center">
                  <Trophy className="h-8 w-8 text-emerald-600 mx-auto mb-2" />
                  <div className="text-3xl font-bold text-emerald-700">{score}</div>
                  <div className="text-sm text-emerald-600 font-medium">Pontuação Final</div>
                </CardContent>
              </Card>

<Card className="border-0 shadow-md bg-gradient-to-br from-blue-50 to-blue-100">
                <CardContent className="p-6 text-center">
                  <Clock className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                  <div className="text-3xl font-bold text-blue-700">
                    {Math.floor(gameStats.totalTime / 60)}:{(gameStats.totalTime % 60).toString().padStart(2, "0")}
                  </div>
                  <div className="text-sm text-blue-600 font-medium">Tempo Total</div>
                </CardContent>
              </Card>

<Card className="border-0 shadow-md bg-gradient-to-br from-purple-50 to-purple-100">
                <CardContent className="p-6 text-center">
                  <Zap className="h-8 w-8 text-purple-600 mx-auto mb-2" />
                  <div className="text-3xl font-bold text-purple-700">{gameStats.maxStreak}</div>
                  <div className="text-sm text-purple-600 font-medium">Maior Sequência</div>
                </CardContent>
              </Card>

<Card className="border-0 shadow-md bg-gradient-to-br from-orange-50 to-orange-100">
                <CardContent className="p-6 text-center">
                  <Target className="h-8 w-8 text-orange-600 mx-auto mb-2" />
                  <div className="text-3xl font-bold text-orange-700">{round - 1}</div>
                  <div className="text-sm text-orange-600 font-medium">Rodadas Jogadas</div>
                </CardContent>
              </Card>
            </div>

{/* Estatísticas detalhadas */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <Card className="border-0 shadow-md bg-white">
                <CardContent className="p-6 text-center">
                  <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <div className="text-2xl">✅</div>
                  </div>
                  <div className="text-2xl font-bold text-emerald-600">{gameStats.correctAnswers}</div>
                  <div className="text-sm text-slate-600 font-medium">Respostas Corretas</div>
                </CardContent>
              </Card>

<Card className="border-0 shadow-md bg-white">
                <CardContent className="p-6 text-center">
                  <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <div className="text-2xl">❌</div>
                  </div>
                  <div className="text-2xl font-bold text-red-600">{gameStats.wrongAnswers}</div>
                  <div className="text-sm text-slate-600 font-medium">Respostas Erradas</div>
                </CardContent>
              </Card>

<Card className="border-0 shadow-md bg-white">
                <CardContent className="p-6 text-center">
                  <div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <Clock className="h-6 w-6 text-slate-600" />
                  </div>
                  <div className="text-2xl font-bold text-slate-600">{gameStats.averageTime}s</div>
                  <div className="text-sm text-slate-600 font-medium">Tempo Médio/Rodada</div>
                </CardContent>
              </Card>
            </div>

{/* Avaliação de performance */}
            <Card className="border-0 shadow-md bg-gradient-to-r from-slate-50 to-blue-50">
              <CardContent className="p-6 text-center">
                <Award className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                <div className="text-xl font-semibold text-slate-700 mb-2">
                  {bombExploded
                    ? "Continue praticando!"
                    : score >= 150
                      ? "Especialista em Equipamentos!"
                      : score >= 100
                        ? "Muito bom desempenho!"
                        : score >= 60
                          ? "Bom trabalho!"
                          : "Continue estudando!"}
                </div>
                <p className="text-slate-600">
                  {bombExploded
                    ? "Estude mais os equipamentos odontológicos e tente novamente."
                    : score >= 150
                      ? "Você domina completamente os equipamentos odontológicos!"
                      : score >= 100
                        ? "Continue praticando para se tornar um especialista!"
                        : score >= 60
                          ? "Você está no caminho certo, continue melhorando!"
                          : "Dedique mais tempo ao estudo dos equipamentos!"}
                </p>
              </CardContent>
            </Card>

{/* Botões de ação */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Button
                onClick={resetGame}
                className="text-lg px-8 py-4 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 shadow-lg"
              >
                <RotateCcw className="h-5 w-5 mr-2" />
                Jogar Novamente
              </Button>

<Button
                onClick={goToGamesPage}
                variant="outline"
                className="text-lg px-8 py-4 border-slate-300 hover:bg-slate-50 shadow-lg bg-transparent"
              >
                <Home className="h-5 w-5 mr-2" />
                Voltar aos Jogos
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games/card-manager.tsx" isMerged="true"
"use client"

import { useState } from "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 { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, Save, X } from "lucide-react"

interface Equipment {
  id: number
  name: string
  image: string
  alternatives: string[]
  category: string
}

interface CardManagerProps {
  equipments: Equipment[]
  onUpdate: (equipments: Equipment[]) => void
}

export function CardManager({ equipments, onUpdate }: CardManagerProps) {
  const [editingEquipment, setEditingEquipment] = useState<Equipment | null>(null)
  const [isCreating, setIsCreating] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    image: "",
    alternatives: "",
    category: "",
  })

const categories = [
    "Instrumentos Rotatórios",
    "Instrumentos de Exame",
    "Instrumentos de Preensão",
    "Equipamentos de Aspiração",
    "Equipamentos de Irrigação",
    "Equipamentos de Polimerização",
    "Equipamentos de Preparo",
    "Equipamentos de Esterilização",
    "Equipamentos de Limpeza",
    "Mobiliário Clínico",
    "Outros",
  ]

const resetForm = () => {
    setFormData({
      name: "",
      image: "",
      alternatives: "",
      category: "",
    })
    setEditingEquipment(null)
    setIsCreating(false)
  }

const handleEdit = (equipment: Equipment) => {
    setEditingEquipment(equipment)
    setFormData({
      name: equipment.name,
      image: equipment.image,
      alternatives: equipment.alternatives.join(", "),
      category: equipment.category,
    })
    setIsCreating(false)
  }

const handleCreate = () => {
    setIsCreating(true)
    setEditingEquipment(null)
    resetForm()
  }

const handleSave = () => {
    if (!formData.name.trim() || !formData.category.trim()) return

const alternativesArray = formData.alternatives
      .split(",")
      .map((alt) => alt.trim())
      .filter((alt) => alt.length > 0)

if (isCreating) {
      const newEquipment: Equipment = {
        id: Math.max(...equipments.map((e) => e.id)) + 1,
        name: formData.name.trim(),
        image:
          formData.image.trim() || `/placeholder.svg?height=200&width=200&query=${encodeURIComponent(formData.name)}`,
        alternatives: alternativesArray,
        category: formData.category.trim(),
      }
      onUpdate([...equipments, newEquipment])
    } else if (editingEquipment) {
      const updatedEquipments = equipments.map((eq) =>
        eq.id === editingEquipment.id
          ? {
              ...eq,
              name: formData.name.trim(),
              image: formData.image.trim() || eq.image,
              alternatives: alternativesArray,
              category: formData.category.trim(),
            }
          : eq,
      )
      onUpdate(updatedEquipments)
    }

resetForm()
  }

const handleDelete = (id: number) => {
    if (confirm("Tem certeza que deseja excluir este equipamento?")) {
      onUpdate(equipments.filter((eq) => eq.id !== id))
    }
  }

return (
    <div className="space-y-6">
      {/* Formulário de criação/edição */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle>
              {isCreating
                ? "Criar Novo Equipamento"
                : editingEquipment
                  ? "Editar Equipamento"
                  : "Gerenciar Equipamentos"}
            </CardTitle>
            {!isCreating && !editingEquipment && (
              <Button onClick={handleCreate}>
                <Plus className="h-4 w-4 mr-2" />
                Novo Equipamento
              </Button>
            )}
          </div>
        </CardHeader>

{(isCreating || editingEquipment) && (
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome do Equipamento</Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="Ex: Turbina Odontológica"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="category">Categoria</Label>
                <select
                  id="category"
                  value={formData.category}
                  onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                  className="w-full p-2 border rounded-md"
                >
                  <option value="">Selecione uma categoria</option>
                  {categories.map((cat) => (
                    <option key={cat} value={cat}>
                      {cat}
                    </option>
                  ))}
                </select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="image">URL da Imagem (opcional)</Label>
              <Input
                id="image"
                value={formData.image}
                onChange={(e) => setFormData({ ...formData, image: e.target.value })}
                placeholder="Se vazio, será gerada automaticamente"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="alternatives">Alternativas de Resposta</Label>
              <Textarea
                id="alternatives"
                value={formData.alternatives}
                onChange={(e) => setFormData({ ...formData, alternatives: e.target.value })}
                placeholder="Separe as alternativas por vírgula. Ex: turbina, alta rotação, caneta de alta"
                rows={3}
              />
              <p className="text-xs text-muted-foreground">
                Digite diferentes formas de nomear este equipamento, separadas por vírgula
              </p>
            </div>