[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]json:file=".vscode/settings.json" {} [V0_FILE]markdown:file="README.md" # Marketplace creation *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/rodrigo-tannus-projects/v0-marketplace-creation) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/dJursW0CAAQ) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/rodrigo-tannus-projects/v0-marketplace-creation](https://vercel.com/rodrigo-tannus-projects/v0-marketplace-creation)** ## Build your app Continue building your app on: **[https://v0.app/chat/dJursW0CAAQ](https://v0.app/chat/dJursW0CAAQ)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/actions/orderbumps.ts" "use server" import { createClient } from "@/lib/supabase/server" import { getOrderbumpCourses, addUserCourseAccess, removeUserCourseAccess } from "@/lib/courses-api" export async function getUserOrderbumps(userId: string) { try { console.log("[v0] getUserOrderbumps - userId:", userId) const supabase = await createClient() // Buscar orderbumps do usuário const { data: userOrderbumps, error } = await supabase .from("user_course_access") .select(` *, course:courses(id, title, slug) `) .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) { console.error("[v0] Erro ao buscar orderbumps do usuário:", error) return { success: false, error: error.message } } // Buscar cursos disponíveis como orderbump const courses = await getOrderbumpCourses() console.log("[v0] getUserOrderbumps - Orderbumps:", userOrderbumps?.length || 0) console.log("[v0] getUserOrderbumps - Cursos disponíveis:", courses.length) return { success: true, userOrderbumps: userOrderbumps || [], courses, } } catch (error) { console.error("[v0] Erro em getUserOrderbumps:", error) return { success: false, error: String(error) } } } export async function addOrderbump(userId: string, courseId: string, notes: string) { try { console.log("[v0] addOrderbump - userId:", userId, "courseId:", courseId) const success = await addUserCourseAccess(userId, courseId, "manual", notes) return { success } } catch (error) { console.error("[v0] Erro em addOrderbump:", error) return { success: false, error: String(error) } } } export async function removeOrderbump(userId: string, courseId: string) { try { console.log("[v0] removeOrderbump - userId:", userId, "courseId:", courseId) const success = await removeUserCourseAccess(userId, courseId) return { success } } catch (error) { console.error("[v0] Erro em removeOrderbump:", error) return { success: false, error: String(error) } } } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/admin/page.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" // Import Link import { AdminGuard } from "@/components/admin-guard" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { createClient } from "@/lib/supabase/client" import { createBrowserClient } from "@supabase/ssr" // Import added for Supabase client in announcements import { addProductToDb, updateProductInDb, deleteProductFromDb } from "@/lib/products-api" import type { Product } from "@/lib/products-data" import type { Affiliate } from "@/lib/types" import { CoursesAdmin } from "@/components/admin/courses-admin" import { UserOrderbumps } from "@/components/admin/user-orderbumps" import { NovidadesAdmin } from "@/components/admin/novidades-admin" import { Plus, Edit2, Trash2, Save, X, Check, Pause, Play, UserX, Trophy, Megaphone, Users, Package, Loader2, GraduationCap, Crown, Pencil, RefreshCw, Flame, Sparkles, KeyRound, Zap, Eye, EyeOff, DollarSign, Link2, Copy, TrendingUp, Info, Clock, Search, CheckCircle, ChevronUp, ChevronDown, GripVertical, ArrowLeft, Download, Newspaper, } from "lucide-react" import type React from "react" // Import React for JSXElement[] import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" // Import Card components import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Import Select components import { Dashboard } from "@/components/admin/dashboard" // Import Dashboard component export default function AdminPage() { return (

Painel Admin

Gerencie sua plataforma

Afiliados Produtos Cursos Ranking Avisos Novidades Dashboard

{/*

*/}

) } function ProductsAdmin() { const [products, setProducts] = useState([]) const [loading, setLoading] = useState(true) const [saving, setSaving] = useState(false) const [isAdding, setIsAdding] = useState(false) const [editingId, setEditingId] = useState(null) const [errorMessage, setErrorMessage] = useState(null) const moveProduct = async (index: number, direction: "up" | "down") => { const newProducts = [...products] const targetIndex = direction === "up" ? index - 1 : index + 1 if (targetIndex < 0 || targetIndex >= newProducts.length) return // Trocar posições ;[newProducts[index], newProducts[targetIndex]] = [newProducts[targetIndex], newProducts[index]] setProducts(newProducts) // Atualizar no banco await updateProductOrder(newProducts) } const updateProductOrder = async (orderedProducts: Product[]) => { const supabase = createClient() const updates = orderedProducts.map((product, index) => ({ id: product.id, display_order: index + 1, // Começar de 1 ao invés de 0 })) console.log( "[v0] Atualizando ordem dos produtos:", updates.map((u) => ({ id: u.id, display_order: u.display_order })), ) for (const update of updates) { await supabase.from("marketplace_products").update({ display_order: update.display_order }).eq("id", update.id) } console.log("[v0] Ordem atualizada com sucesso!") } const emptyProduct: Omit = { title: "", image: "", nicho: "", comissao: "", ticket: "", affiliateUrl: "", hotmartUrl: "", driveUrl: "", vendas: 0, rating: 5, orderbumps: 0, upsellStatus: "nao", releaseDate: "", estrategia: "", badge: undefined, tag: undefined, validation_status: "disponivel", metrics: { cpcMedio: "", checkout: "", cpaAlvo: "", }, vipOnly: false, // Corrigido vip_only para vipOnly (camelCase conforme tipo Product) display_order: 0, // Campo para reordenação comingSoon: false, // novo campo comingSoon // Novos campos adicionados ao tipo Product plataforma: undefined, formato: undefined, aulas: [], category: "", tagLabel: undefined, } const [newProduct, setNewProduct] = useState>(emptyProduct) const [editProduct, setEditProduct] = useState(null) // Carregar produtos do Supabase useEffect(() => { loadProducts() }, []) async function loadProducts() { setLoading(true) const supabase = createClient() const { data, error } = await supabase .from("marketplace_products") .select("*") .order("display_order", { ascending: true }) // Ordenar por display_order if (error) { console.error("Erro ao carregar produtos:", error) setLoading(false) return } const mappedProducts: Product[] = (data || []).map((product: any) => ({ id: product.id, title: product.title || "", image: product.image || "", nicho: product.nicho || "", comissao: product.comissao || "", ticket: product.ticket || "", affiliateUrl: product.affiliate_url || "", hotmartUrl: product.hotmart_url || "", driveUrl: product.drive_url || "", // Corrigido de drive_link para drive_url vendas: product.vendas || 0, rating: product.rating || 5, orderbumps: product.orderbumps || 0, upsellStatus: product.upsell_status || "nao", releaseDate: product.release_date || "", estrategia: product.estrategia || "", badge: product.badge, tag: product.tag, plataforma: product.plataforma, formato: product.formato, aulas: product.aulas || [], category: product.category, tagLabel: product.tag_label, validation_status: product.coming_soon ? "em-breve" : "disponivel", metrics: { cpcMedio: product.cpc_medio || "", // Corrigido de avg_cpc para cpc_medio checkout: product.checkout || "", // Mantido checkout cpaAlvo: product.cpa_alvo || "", // Corrigido de target_cpa para cpa_alvo }, vipOnly: product.vip_only || false, display_order: product.display_order || 0, comingSoon: product.coming_soon || false, })) console.log( "[v0] Produtos carregados do banco:", mappedProducts.map((p) => ({ id: p.id, title: p.title, comingSoon: p.comingSoon, vipOnly: p.vipOnly, cpc: p.metrics?.cpcMedio, })), ) setProducts(mappedProducts) setLoading(false) } const handleAdd = async () => { if (!newProduct.title) { setErrorMessage("O título do produto é obrigatório") return } setErrorMessage(null) setSaving(true) console.log("[v0] Salvando produto:", { title: newProduct.title, comingSoon: newProduct.comingSoon, }) const productToAdd = { ...newProduct } const added = await addProductToDb(productToAdd) if (added) { console.log("[v0] Produto adicionado com sucesso:", added) setProducts([added, ...products]) setNewProduct(emptyProduct) setIsAdding(false) } else { console.error("[v0] Falha ao adicionar produto") setErrorMessage("Erro ao adicionar produto. Verifique o console para mais detalhes.") } setSaving(false) } const handleUpdate = async () => { if (!editProduct) return setErrorMessage(null) setSaving(true) console.log("[v0] Atualizando produto:", { id: editProduct.id, title: editProduct.title, comingSoon: editProduct.comingSoon, }) const updated = await updateProductInDb(editProduct.id, editProduct) if (updated) { console.log("[v0] Produto atualizado com sucesso:", updated) setProducts(products.map((p) => (p.id === updated.id ? updated : p))) setEditingId(null) setEditProduct(null) } else { console.error("[v0] Falha ao atualizar produto") setErrorMessage("Erro ao atualizar produto. Verifique o console para mais detalhes.") } setSaving(false) } const handleDelete = async (id: string) => { if (!confirm("Tem certeza que deseja excluir este produto?")) return setErrorMessage(null) const deleted = await deleteProductFromDb(id) if (deleted) { const remainingProducts = products.filter((p) => p.id !== id) setProducts(remainingProducts) // Reordenar os produtos restantes após a exclusão await updateProductOrder(remainingProducts) } else { setErrorMessage("Erro ao deletar produto. Verifique o console para mais detalhes.") } } const productsValidados = products.filter((p) => !p.comingSoon).length const productsEmBreve = products.filter((p) => p.comingSoon).length const productsEmValidacao = 0 // Remover contagem de validação já que não usamos mais if (loading) { return (

) } return (

{errorMessage && (

{errorMessage}

)}

Produtos Validados

{productsValidados}

Em Breve

{productsEmBreve}

Em Validação

{productsEmValidacao}

{!isAdding && ( )} {isAdding && (

Novo Produto

Título setNewProduct({ ...newProduct, title: e.target.value })} placeholder="Nome do produto" className="text-sm" />

URL da Imagem setNewProduct({ ...newProduct, image: e.target.value })} placeholder="https://..." className="text-sm" />

Nicho setNewProduct({ ...newProduct, nicho: e.target.value })} placeholder="Ex: Relacionamento" className="text-sm" />

Comissão setNewProduct({ ...newProduct, comissao: e.target.value })} placeholder="Ex: 75% - 80%" className="text-sm" />

Ticket setNewProduct({ ...newProduct, ticket: e.target.value })} placeholder="R$ 17,00" className="text-sm" />

Vendas setNewProduct({ ...newProduct, vendas: Number.parseInt(e.target.value) || 0 })} placeholder="0" className="text-sm" />

Link de Afiliação (Celetus) setNewProduct({ ...newProduct, affiliateUrl: e.target.value })} placeholder="https://celetus.com/..." className="text-sm" />

Link de Afiliação (Hotmart) setNewProduct({ ...newProduct, hotmartUrl: e.target.value })} placeholder="https://hotmart.com/..." className="text-sm" />

Link do Drive setNewProduct({ ...newProduct, driveUrl: e.target.value })} placeholder="https://drive.google.com/..." className="text-sm" />

Métricas

CPC Médio setNewProduct({ ...newProduct, metrics: { ...newProduct.metrics!, cpcMedio: e.target.value }, }) } placeholder="R$ 0,75" className="text-sm" />

Checkout setNewProduct({ ...newProduct, metrics: { ...newProduct.metrics!, checkout: e.target.value }, }) } placeholder="R$ 3,47" className="text-sm" />

CPA Alvo setNewProduct({ ...newProduct, metrics: { ...newProduct.metrics!, cpaAlvo: e.target.value }, }) } placeholder="R$ 11,00" className="text-sm" />

Funil

Número de Orderbumps setNewProduct({ ...newProduct, orderbumps: Number.parseInt(e.target.value) || 0 })} placeholder="0" className="text-sm" />

Upsell

Estratégia Recomendada

Texto da Estratégia

setNewProduct({ ...newProduct, estrategia: e.target.value })}
                placeholder="Descreva a estratégia recomendada para vender este produto..."
                className="w-full min-h-[80px] md:min-h-[100px] rounded-lg border border-border bg-background px-3 py-2 text-xs md:text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
              />
              <p className="mt-1 text-xs text-muted-foreground">
                Este texto aparecerá no popup "Estratégia Recomendada" do produto.
              </p>
            </div>
          </div>

<div className="mt-4 border-t border-border pt-4">
            <h4 className="mb-3 text-xs md:text-sm font-medium text-muted-foreground">Status do Produto</h4>
            <div className="flex flex-wrap items-center gap-2">
              <Button
                type="button"
                size="sm"
                variant={!newProduct.comingSoon ? "default" : "outline"}
                onClick={() => setNewProduct({ ...newProduct, comingSoon: false })}
                className="text-xs"
              >
                Ativo
              </Button>
              <Button
                type="button"
                size="sm"
                variant={newProduct.comingSoon ? "default" : "outline"}
                className={newProduct.comingSoon ? "bg-yellow-600 hover:bg-yellow-700 text-xs" : "text-xs"}
                onClick={() => setNewProduct({ ...newProduct, comingSoon: true })}
              >
                Em Breve
              </Button>
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              Produtos "Em Breve" aparecem na vitrine mas não podem ser acessados ainda.
            </p>
          </div>

<div className="mt-4 border-t border-border pt-4">
            <h4 className="mb-3 text-xs md:text-sm font-medium text-muted-foreground">Faixa de Destaque</h4>
            <div className="flex flex-wrap items-center gap-2">
              <Button
                type="button"
                size="sm"
                variant={!newProduct.badge ? "default" : "outline"}
                onClick={() => setNewProduct({ ...newProduct, badge: undefined })}
                className="text-xs"
              >
                Nenhuma
              </Button>
              <Button
                type="button"
                size="sm"
                variant={newProduct.badge === "bestseller" ? "default" : "outline"}
                className={
                  newProduct.badge === "bestseller"
                    ? "bg-gradient-to-r from-amber-500 to-orange-500 border-0 text-xs"
                    : "text-xs"
                }
                onClick={() => setNewProduct({ ...newProduct, badge: "bestseller" })}
              >
                <Crown className="h-3 w-3 mr-1" />
                <span className="hidden sm:inline">Mais Vendido</span>
                <span className="sm:hidden">Vendido</span>
              </Button>
              <Button
                type="button"
                size="sm"
                variant={newProduct.badge === "trending" ? "default" : "outline"}
                className={
                  newProduct.badge === "trending"
                    ? "bg-gradient-to-r from-rose-500 to-pink-500 border-0 text-xs"
                    : "text-xs"
                }
                onClick={() => setNewProduct({ ...newProduct, badge: "trending" })}
              >
                <Flame className="h-3 w-3 mr-1" />
                Em Alta
              </Button>
              <Button
                type="button"
                size="sm"
                variant={newProduct.badge === "novo" ? "default" : "outline"}
                className={
                  newProduct.badge === "novo"
                    ? "bg-gradient-to-r from-emerald-500 to-green-500 border-0 text-xs"
                    : "text-xs"
                }
                onClick={() => setNewProduct({ ...newProduct, badge: "novo" })}
              >
                <Sparkles className="h-3 w-3 mr-1" />
                Novo
              </Button>
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              A faixa aparece no canto superior esquerdo do card do produto.
            </p>
          </div>

<div className="mt-4 border-t border-border pt-4">
            <h4 className="mb-3 text-xs md:text-sm font-medium text-muted-foreground">Liberação</h4>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Data de Liberação</Label>
              <Input
                type="date"
                value={newProduct.releaseDate || ""}
                onChange={(e) => setNewProduct({ ...newProduct, releaseDate: e.target.value })}
                className="text-sm"
              />
              <p className="mt-1 text-xs text-muted-foreground">
                Deixe em branco para liberar imediatamente. Produtos com data futura não aparecem para os usuários.
              </p>
            </div>

<div className="flex items-center gap-3 mt-4">
              <input
                type="checkbox"
                id="new-vip-only"
                checked={newProduct.vipOnly} // Corrigido para usar vipOnly ao invés de vip_only
                onChange={(e) => setNewProduct({ ...newProduct, vipOnly: e.target.checked })}
                className="h-4 w-4 md:h-5 md:w-5 rounded border-border text-primary focus:ring-primary"
              />
              <Label htmlFor="new-vip-only" className="text-xs md:text-sm font-medium cursor-pointer">
                Produto exclusivo para VIP
              </Label>
            </div>
          </div>

<div className="mt-4 flex flex-col-reverse sm:flex-row justify-end gap-2">
            <Button variant="outline" onClick={() => setIsAdding(false)} className="w-full sm:w-auto">
              Cancelar
            </Button>
            <Button onClick={handleAdd} disabled={saving} className="gap-2 w-full sm:w-auto">
              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
              Salvar
            </Button>
          </div>
        </div>
      )}

<div className="space-y-3">
        {products.map((product, index) => (
          <div key={product.id} className="rounded-lg border bg-card p-3 md:p-4">
            {editingId === product.id && editProduct ? (
              <div className="space-y-3 md:space-y-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
                  <Input
                    value={editProduct.title}
                    onChange={(e) => setEditProduct({ ...editProduct, title: e.target.value })}
                    placeholder="Título"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.image}
                    onChange={(e) => setEditProduct({ ...editProduct, image: e.target.value })}
                    placeholder="URL da Imagem"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.nicho}
                    onChange={(e) => setEditProduct({ ...editProduct, nicho: e.target.value })}
                    placeholder="Nicho"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.comissao}
                    onChange={(e) => setEditProduct({ ...editProduct, comissao: e.target.value })}
                    placeholder="Comissão"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.ticket}
                    onChange={(e) => setEditProduct({ ...editProduct, ticket: e.target.value })}
                    placeholder="Ticket"
                    className="text-sm"
                  />
                  <Input
                    type="number"
                    value={editProduct.vendas || 0}
                    onChange={(e) => setEditProduct({ ...editProduct, vendas: Number.parseInt(e.target.value) || 0 })}
                    placeholder="Vendas"
                    className="text-sm"
                  />
                </div>
                <div className="sm:col-span-2">
                  <Label className="mb-1 block text-xs text-muted-foreground">Link Celetus</Label>
                  <Input
                    value={editProduct.affiliateUrl}
                    onChange={(e) => setEditProduct({ ...editProduct, affiliateUrl: e.target.value })}
                    placeholder="Link Afiliação Celetus"
                    className="text-sm"
                  />
                </div>
                <div className="sm:col-span-2">
                  <Label className="mb-1 block text-xs text-muted-foreground">Link Hotmart</Label>
                  <Input
                    value={editProduct.hotmartUrl || ""}
                    onChange={(e) => setEditProduct({ ...editProduct, hotmartUrl: e.target.value })}
                    placeholder="Link Afiliação Hotmart"
                    className="text-sm"
                  />
                </div>
                <div className="sm:col-span-2">
                  <Input
                    value={editProduct.driveUrl || ""}
                    onChange={(e) => setEditProduct({ ...editProduct, driveUrl: e.target.value })}
                    placeholder="Link Drive"
                    className="text-sm"
                  />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
                  <Input
                    value={editProduct.metrics?.cpcMedio || ""}
                    onChange={(e) =>
                      setEditProduct({
                        ...editProduct,
                        metrics: { ...editProduct.metrics!, cpcMedio: e.target.value },
                      })
                    }
                    placeholder="CPC Médio"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.metrics?.checkout || ""}
                    onChange={(e) =>
                      setEditProduct({
                        ...editProduct,
                        metrics: { ...editProduct.metrics!, checkout: e.target.value },
                      })
                    }
                    placeholder="Checkout"
                    className="text-sm"
                  />
                  <Input
                    value={editProduct.metrics?.cpaAlvo || ""}
                    onChange={(e) =>
                      setEditProduct({
                        ...editProduct,
                        metrics: { ...editProduct.metrics!, cpaAlvo: e.target.value },
                      })
                    }
                    placeholder="CPA Alvo"
                    className="text-sm"
                  />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
                  <div>
                    <Label className="mb-1 block text-xs md:text-sm">Orderbumps</Label>
                    <Input
                      type="number"
                      min={0}
                      value={editProduct.orderbumps || 0}
                      onChange={(e) =>
                        setEditProduct({ ...editProduct, orderbumps: Number.parseInt(e.target.value) || 0 })
                      }
                      className="text-sm"
                    />
                  </div>
                  <div>
                    <Label className="mb-2 block text-xs md:text-sm">Upsell</Label>
                    <div className="flex items-center gap-2 flex-wrap">
                      <Button
                        type="button"
                        size="sm"
                        variant={editProduct.upsellStatus === "sim" ? "default" : "outline"}
                        onClick={() => setEditProduct({ ...editProduct, upsellStatus: "sim" })}
                        className="text-xs"
                      >
                        Sim
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        variant={
                          editProduct.upsellStatus === "nao" || !editProduct.upsellStatus ? "default" : "outline"
                        }
                        onClick={() => setEditProduct({ ...editProduct, upsellStatus: "nao" })}
                        className="text-xs"
                      >
                        Não
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        variant={editProduct.upsellStatus === "em-breve" ? "default" : "outline"}
                        className={
                          editProduct.upsellStatus === "em-breve" ? "bg-blue-600 hover:bg-blue-700 text-xs" : "text-xs"
                        }
                        onClick={() => setEditProduct({ ...editProduct, upsellStatus: "em-breve" })}
                      >
                        Em Breve
                      </Button>
                    </div>
                  </div>
                  <div>
                    <Label className="mb-2 block text-xs md:text-sm">Faixa de Destaque</Label>
                    <div className="flex flex-wrap items-center gap-2">
                      <Button
                        type="button"
                        size="sm"
                        variant={!editProduct.badge ? "default" : "outline"}
                        onClick={() => setEditProduct({ ...editProduct, badge: undefined })}
                        className="text-xs"
                      >
                        Nenhuma
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        variant={editProduct.badge === "bestseller" ? "default" : "outline"}
                        className={
                          editProduct.badge === "bestseller"
                            ? "bg-gradient-to-r from-amber-500 to-orange-500 border-0 text-xs"
                            : "text-xs"
                        }
                        onClick={() => setEditProduct({ ...editProduct, badge: "bestseller" })}
                      >
                        <Crown className="h-3 w-3 mr-1" />
                        <span className="hidden sm:inline">Mais Vendido</span>
                        <span className="sm:hidden">Vendido</span>
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        variant={editProduct.badge === "trending" ? "default" : "outline"}
                        className={
                          editProduct.badge === "trending"
                            ? "bg-gradient-to-r from-rose-500 to-pink-500 border-0 text-xs"
                            : "text-xs"
                        }
                        onClick={() => setEditProduct({ ...editProduct, badge: "trending" })}
                      >
                        <Flame className="h-3 w-3 mr-1" />
                        Em Alta
                      </Button>
                      <Button
                        type="button"
                        size="sm"
                        variant={editProduct.badge === "novo" ? "default" : "outline"}
                        className={
                          editProduct.badge === "novo"
                            ? "bg-gradient-to-r from-emerald-500 to-green-500 border-0 text-xs"
                            : "text-xs"
                        }
                        onClick={() => setEditProduct({ ...editProduct, badge: "novo" })}
                      >
                        <Sparkles className="h-3 w-3 mr-1" />
                        Novo
                      </Button>
                    </div>
                  </div>
                </div>

<div className="col-span-2">
                  <Label className="mb-2 block text-xs md:text-sm">Status de Validação</Label>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Button
                      type="button"
                      size="sm"
                      variant={
                        !editProduct.validation_status || editProduct.validation_status === "disponivel"
                          ? "default"
                          : "outline"
                      }
                      className={
                        !editProduct.validation_status || editProduct.validation_status === "disponivel"
                          ? "bg-green-600 hover:bg-green-700 text-xs"
                          : "text-xs"
                      }
                      onClick={() => setEditProduct({ ...editProduct, validation_status: "disponivel" })}
                    >
                      <CheckCircle className="h-3 w-3 mr-1" />
                      Disponível
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      variant={editProduct.validation_status === "em-breve" ? "default" : "outline"}
                      className={
                        editProduct.validation_status === "em-breve"
                          ? "bg-yellow-600 hover:bg-yellow-700 text-xs"
                          : "text-xs"
                      }
                      onClick={() => setEditProduct({ ...editProduct, validation_status: "em-breve" })}
                    >
                      <Clock className="h-3 w-3 mr-1" />
                      Em Breve
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      variant={editProduct.validation_status === "em-validacao" ? "default" : "outline"}
                      className={
                        editProduct.validation_status === "em-validacao"
                          ? "bg-blue-600 hover:bg-blue-700 text-xs"
                          : "text-xs"
                      }
                      onClick={() => setEditProduct({ ...editProduct, validation_status: "em-validacao" })}
                    >
                      <Loader2 className="h-3 w-3 mr-1" />
                      Em Validação
                    </Button>
                  </div>
                </div>

<div className="col-span-2">
                  <Label className="mb-1 block text-xs md:text-sm">Estratégia Recomendada</Label>
                  <textarea
                    value={editProduct.estrategia || ""}
                    onChange={(e) => setEditProduct({ ...editProduct, estrategia: e.target.value })}
                    placeholder="Descreva a estratégia recomendada..."
                    className="w-full min-h-[80px] rounded-lg border border-border bg-background px-3 py-2 text-xs md:text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  />
                </div>
                <div>
                  <Label className="mb-2 block text-xs md:text-sm">Status</Label>
                  <div className="flex items-center gap-2">
                    <Button
                      type="button"
                      size="sm"
                      variant={!editProduct.comingSoon ? "default" : "outline"}
                      onClick={() => setEditProduct({ ...editProduct, comingSoon: false })}
                      className="text-xs"
                    >
                      Ativo
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      variant={editProduct.comingSoon ? "default" : "outline"}
                      className={editProduct.comingSoon ? "bg-yellow-600 hover:bg-yellow-700 text-xs" : "text-xs"}
                      onClick={() => setEditProduct({ ...editProduct, comingSoon: true })}
                    >
                      Em Breve
                    </Button>
                  </div>
                </div>

<div className="flex items-center gap-3 col-span-full mt-2">
                  <input
                    type="checkbox"
                    id="edit-vip-only"
                    checked={editProduct.vipOnly || false} // Corrigido para usar vipOnly ao invés de vip_only
                    onChange={(e) => setEditProduct({ ...editProduct, vipOnly: e.target.checked })}
                    className="h-4 w-4 md:h-5 md:w-5 rounded border-border text-primary focus:ring-primary"
                  />
                  <Label htmlFor="edit-vip-only" className="text-xs md:text-sm font-medium cursor-pointer">
                    Produto exclusivo para VIP
                  </Label>
                </div>

<div className="mt-4 flex flex-col-reverse sm:flex-row justify-end gap-2 col-span-full">
                  <Button variant="outline" onClick={() => setEditingId(null)} className="w-full sm:w-auto">
                    Cancelar
                  </Button>
                  <Button onClick={handleUpdate} disabled={saving} className="gap-2 w-full sm:w-auto">
                    {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
                    Salvar
                  </Button>
                </div>
              </div>
            ) : (
              <div className="flex items-center gap-3">
                <div className="flex flex-col gap-1 items-center">
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-7 w-7"
                    onClick={() => moveProduct(index, "up")}
                    disabled={index === 0}
                  >
                    <ChevronUp className="h-4 w-4" />
                  </Button>
                  <GripVertical className="h-4 w-4 text-muted-foreground cursor-move" />
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-7 w-7"
                    onClick={() => moveProduct(index, "down")}
                    disabled={index === products.length - 1}
                  >
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                </div>

{product.badge && (
                  <div className="absolute top-2 left-2 z-10">
                    {product.badge === "bestseller" && (
                      <Badge className="bg-gradient-to-r from-amber-500 to-orange-500 border-0 text-black text-xs">
                        <Crown className="h-3.5 w-3.5 mr-1" /> Mais Vendido
                      </Badge>
                    )}
                    {product.badge === "trending" && (
                      <Badge className="bg-gradient-to-r from-rose-500 to-pink-500 border-0 text-black text-xs">
                        <Flame className="h-3.5 w-3.5 mr-1" /> Em Alta
                      </Badge>
                    )}
                    {product.badge === "novo" && (
                      <Badge className="bg-gradient-to-r from-emerald-500 to-green-500 border-0 text-black text-xs">
                        <Sparkles className="h-3.5 w-3.5 mr-1" /> Novo
                      </Badge>
                    )}
                  </div>
                )}
                <img
                  src={product.image || "/placeholder.svg"}
                  alt={product.title}
                  className="h-16 w-16 rounded-lg object-cover"
                />
                <div className="flex-1">
                  <p className="font-medium">{product.title}</p>
                  <p className="text-xs text-muted-foreground">
                    {product.nicho} • {product.comissao} • {product.ticket}
                  </p>
                  <div className="mt-1 flex flex-wrap gap-2 text-xs">
                    {product.metrics && (
                      <>
                        <span className="text-blue-400">CPC: {product.metrics.cpcMedio}</span>
                        <span className="text-green-400">Checkout: {product.metrics.checkout}</span>
                        <span className="text-amber-400">CPA: {product.metrics.cpaAlvo}</span>
                      </>
                    )}
                    {product.orderbumps !== undefined && product.orderbumps > 0 && (
                      <span className="text-orange-400">Orderbumps: {product.orderbumps}</span>
                    )}
                    {product.upsellStatus === "sim" && <span className="text-pink-400">Upsell Ativo</span>}
                    {product.upsellStatus === "em-breve" && <span className="text-blue-400">Upsell Em Breve</span>}
                    {product.releaseDate && (
                      <span className="text-purple-400">
                        Liberação: {new Date(product.releaseDate).toLocaleDateString("pt-BR")}
                      </span>
                    )}
                    {product.comingSoon && <Badge className="bg-yellow-600 text-black">Em Breve</Badge>}
                    {product.vipOnly && <Badge className="bg-indigo-600">VIP</Badge>}{" "}
                    {/* Corrigido para usar vipOnly */}
                    {product.validation_status === "em-breve" && (
                      <Badge className="bg-yellow-600 text-black">Em Breve</Badge>
                    )}
                    {product.validation_status === "em-validacao" && (
                      <Badge className="bg-blue-600">Em Validação</Badge>
                    )}
                    {(!product.validation_status || product.validation_status === "disponivel") && (
                      <Badge className="bg-green-600">Disponível</Badge>
                    )}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="icon"
                    variant="ghost"
                    onClick={() => {
                      setEditingId(product.id)
                      setEditProduct({ ...product })
                    }}
                  >
                    <Edit2 className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="text-destructive"
                    onClick={() => handleDelete(product.id)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function UsersAdmin() {
  const PAGE_SIZE = 20
  const [affiliates, setAffiliates] = useState<Affiliate[]>([])
  const [avatars, setAvatars] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [vipFilter, setVipFilter] = useState<string>("all")
  const [searchQuery, setSearchQuery] = useState<string>("") // Campo de busca
  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState<string>("")
  const [currentPage, setCurrentPage] = useState(1)
  const [totalAffiliatesCount, setTotalAffiliatesCount] = useState(0)
  const [editingUser, setEditingUser] = useState<Affiliate | null>(null)
  const [editForm, setEditForm] = useState({ name: "", email: "", nome_celetus: "" })
  const [editDialogOpen, setEditDialogOpen] = useState(false)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [userToDelete, setUserToDelete] = useState<Affiliate | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [resetPasswordDialogOpen, setResetPasswordDialogOpen] = useState(false)
  const [userToResetPassword, setUserToResetPassword] = useState<Affiliate | null>(null)
  const [newPassword, setNewPassword] = useState("")
  const [resettingPassword, setResettingPassword] = useState(false)

useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedSearchQuery(searchQuery.trim())
      setCurrentPage(1)
    }, 300)

return () => clearTimeout(timeout)
  }, [searchQuery])

async function fetchAffiliates() {
    setLoading(true)
    const supabase = createClient()
    const from = (currentPage - 1) * PAGE_SIZE
    const to = from + PAGE_SIZE - 1

let query = supabase
      .from("affiliates")
      .select("*", { count: "exact" })
      .order("created_at", { ascending: false })

if (statusFilter !== "all") {
      query = query.eq("status", statusFilter)
    }

if (vipFilter === "yes") {
      query = query.eq("is_vip", true)
    } else if (vipFilter === "no") {
      query = query.eq("is_vip", false)
    }

if (debouncedSearchQuery) {
      query = query.or(`email.ilike.%${debouncedSearchQuery}%,name.ilike.%${debouncedSearchQuery}%`)
    }

const { data, error, count } = await query.range(from, to)

if (!error && data) {
      setAffiliates(data)
      setTotalAffiliatesCount(count || 0)
    }
    setLoading(false)
  }

useEffect(() => {
    fetchAffiliates()
  }, [currentPage, statusFilter, vipFilter, debouncedSearchQuery])

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

async function fetchAvatars() {
    const supabase = createClient()
    const { data } = await supabase.from("avatars").select("*").eq("is_used", false).limit(30)
    if (data) {
      setAvatars(data)
    }
  }

async function updateStatus(id: string, status: string) {
    const supabase = createClient()
    const { error } = await supabase.from("affiliates").update({ status }).eq("id", id)

if (!error) {
      setAffiliates(affiliates.map((a) => (a.id === id ? { ...a, status } : a)))
    }
  }

async function toggleVip(id: string, currentVip: boolean) {
    const supabase = createClient()
    const { error } = await supabase.from("affiliates").update({ is_vip: !currentVip }).eq("id", id)

if (!error) {
      setAffiliates(affiliates.map((a) => (a.id === id ? { ...a, is_vip: !currentVip } : a)))
    }
  }

async function assignRandomAvatar(affiliateId: string) {
    if (avatars.length === 0) return

const randomAvatar = avatars[Math.floor(Math.random() * avatars.length)]
    const supabase = createClient()

// Atualizar o afiliado com a foto do avatar
    const { error: updateError } = await supabase
      .from("affiliates")
      .update({ photo_url: randomAvatar.image_url, avatar_id: randomAvatar.id })
      .eq("id", affiliateId)

if (!updateError) {
      // Marcar avatar como usado
      await supabase.from("avatars").update({ is_used: true, used_by: affiliateId }).eq("id", randomAvatar.id)

// Atualizar estado local
      setAffiliates(
        affiliates.map((a) =>
          a.id === affiliateId ? { ...a, photo_url: randomAvatar.image_url, avatar_id: randomAvatar.id } : a,
        ),
      )
      setAvatars(avatars.filter((av) => av.id !== randomAvatar.id))
    }
  }

async function updateUserInfo(id: string) {
    const supabase = createClient()
    const { error } = await supabase
      .from("affiliates")
      .update({
        name: editForm.name,
        email: editForm.email,
        nome_celetus: editForm.nome_celetus || null,
      })
      .eq("id", id)

if (!error) {
      setAffiliates(
        affiliates.map((a) =>
          a.id === id ? { ...a, name: editForm.name, email: editForm.email, nome_celetus: editForm.nome_celetus } : a,
        ),
      )
      setEditDialogOpen(false)
      setEditingUser(null)
    }
  }

async function deleteUser(id: string) {
    setDeleting(true)
    const supabase = createClient()

// Liberar avatar se o usuário tinha um
    const user = affiliates.find((a) => a.id === id)
    if (user?.avatar_id) {
      await supabase.from("avatars").update({ is_used: false, used_by: null }).eq("id", user.avatar_id)
    }

const { error } = await supabase.from("affiliates").delete().eq("id", id)

if (!error) {
      setAffiliates(affiliates.filter((a) => a.id !== id))
      setDeleteDialogOpen(false)
      setUserToDelete(null)
    }
    setDeleting(false)
  }

async function resetPassword(affiliateId: string, customPassword?: string) {
    setResettingPassword(true)
    try {
      const response = await fetch("/api/admin/reset-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          affiliateId,
          newPassword: customPassword || "123456",
        }),
      })

const data = await response.json()
      if (response.ok) {
        alert("Senha resetada com sucesso! A nova senha é: 123456")
        setResettingPassword(false)
        setResetPasswordDialogOpen(false)
        setUserToResetPassword(null)
      } else {
        alert(`Erro ao resetar senha: ${data.error}`)
        setResettingPassword(false)
      }
    } catch (error) {
      alert("Erro de rede ao resetar senha.")
      setResettingPassword(false)
    }
  }

const openEditDialog = (affiliate: Affiliate) => {
    setEditingUser(affiliate)
    setEditForm({
      name: affiliate.name || "",
      email: affiliate.email || "",
      nome_celetus: affiliate.nome_celetus || "",
    })
    setEditDialogOpen(true)
  }

const openResetPasswordDialog = (affiliate: Affiliate) => {
    setUserToResetPassword(affiliate)
    setResetPasswordDialogOpen(true)
  }

const totalUsers = totalAffiliatesCount
  const totalVip = affiliates.filter((a) => a.is_vip).length
  const totalPages = Math.max(1, Math.ceil(totalAffiliatesCount / PAGE_SIZE))

const exportToCSV = () => {
    console.log("[v0] Iniciando exportação CSV de usuários")
    
    // Cabeçalhos do CSV
    const headers = [
      "Nome",
      "Email",
      "WhatsApp",
      "Status",
      "VIP",
      "Plano",
      "Nome Celetus",
      "Data de Cadastro",
      "Primeira Venda",
      "Total de Comissões",
      "Onboarding Completo"
    ]
    
    // Dados dos afiliados
    const rows = affiliates.map((affiliate) => [
      affiliate.name || "",
      affiliate.email || "",
      affiliate.whatsapp || "",
      affiliate.status || "",
      affiliate.is_vip ? "Sim" : "Não",
      affiliate.plan_purchased || "",
      affiliate.nome_celetus || "",
      affiliate.created_at ? new Date(affiliate.created_at).toLocaleDateString("pt-BR") : "",
      affiliate.first_sale_date ? new Date(affiliate.first_sale_date).toLocaleDateString("pt-BR") : "",
      affiliate.total_commissions ? `R$ ${Number(affiliate.total_commissions).toFixed(2)}` : "R$ 0,00",
      affiliate.onboarding_completed ? "Sim" : "Não"
    ])
    
    // Criar conteúdo CSV
    const csvContent = [
      headers.join(","),
      ...rows.map(row => row.map(cell => `"${cell}"`).join(","))
    ].join("\n")
    
    // Criar blob e fazer download
    const blob = new Blob(["\uFEFF" + csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    const url = URL.createObjectURL(blob)
    
    link.setAttribute("href", url)
    link.setAttribute("download", `afiliados_${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    console.log("[v0] Exportação CSV concluída:", rows.length, "usuários")
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div>
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="text-xl font-semibold">Gerenciar Usuários</h2>
          <div className="flex items-center gap-4 mt-1 text-sm text-muted-foreground">
            <span className="flex items-center gap-1">
              <Users className="h-4 w-4" />
              <strong className="text-foreground">{totalUsers}</strong> cadastrados
            </span>
            <span className="flex items-center gap-1">
              <Crown className="h-4 w-4 text-yellow-500" />
              <strong className="text-yellow-500">{totalVip}</strong> VIP na página
            </span>
          </div>
        </div>
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <Button onClick={exportToCSV} variant="outline" className="gap-2 w-full sm:w-auto">
            <Download className="h-4 w-4" />
            Exportar Página ({affiliates.length})
          </Button>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="Buscar por email ou nome..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9 w-full sm:w-64 text-sm"
            />
          </div>
          <select
            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
            value={statusFilter}
            onChange={(e) => {
              setStatusFilter(e.target.value)
              setCurrentPage(1)
            }}
          >
            <option value="all">Todos os Status</option>
            <option value="approved">Aprovados</option>
            <option value="pending">Pendentes</option>
            <option value="rejected">Rejeitados</option>
            <option value="paused">Pausados</option>
          </select>
          <select
            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
            value={vipFilter}
            onChange={(e) => {
              setVipFilter(e.target.value)
              setCurrentPage(1)
            }}
          >
            <option value="all">Todos os VIPs</option>
            <option value="yes">VIPs</option>
            <option value="no">Não VIPs</option>
          </select>
        </div>
      </div>

{/* Dialog de Edição */}
      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Editar Usuário: {editingUser?.name}</DialogTitle>
            <DialogDescription>Modifique as informações do usuário abaixo.</DialogDescription>
          </DialogHeader>
          
          <Tabs defaultValue="info" className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="info">Informações</TabsTrigger>
              <TabsTrigger value="orderbumps">Orderbumps</TabsTrigger>
            </TabsList>
            
            <TabsContent value="info" className="space-y-4 py-4">
              <div>
                <Label htmlFor="edit-name" className="mb-1 block text-sm">
                  Nome
                </Label>
                <Input
                  id="edit-name"
                  value={editForm.name}
                  onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                  className="text-sm"
                />
              </div>
              <div>
                <Label htmlFor="edit-email" className="mb-1 block text-sm">
                  Email
                </Label>
                <Input
                  id="edit-email"
                  type="email"
                  value={editForm.email}
                  onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                  className="text-sm"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="edit-nome-celetus" className="text-sm">
                  Nome no Checkout Celetus
                </Label>
                <Input
                  id="edit-nome-celetus"
                  value={editForm.nome_celetus}
                  onChange={(e) => setEditForm({ ...editForm, nome_celetus: e.target.value })}
                  placeholder="Ex: JSM MARKETING"
                  className="text-sm"
                />
                <p className="text-xs text-muted-foreground">
                  ⚠️ Copie <strong>EXATAMENTE</strong> o nome que aparece nas vendas da Celetus. Isso vincula as comissões
                  automaticamente.
                </p>
              </div>
              
              <div className="flex justify-end gap-2 pt-4">
                <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button onClick={() => editingUser && updateUserInfo(editingUser.id)}>
                  <Save className="mr-2 h-4 w-4" />
                  Salvar
                </Button>
              </div>
            </TabsContent>
            
            <TabsContent value="orderbumps" className="py-4">
              {editingUser && <UserOrderbumps userId={editingUser.id} />}
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>

{/* Dialog de Confirmação de Exclusão */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar Exclusão</DialogTitle>
            <DialogDescription>
              Tem certeza que deseja excluir o usuário "{userToDelete?.name}"? Esta ação não pode ser desfeita.
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2 mt-4">
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              Cancelar
            </Button>
            <Button
              variant="destructive"
              onClick={() => userToDelete && deleteUser(userToDelete.id)}
              disabled={deleting}
            >
              {deleting ? <Loader2 className="h-4 w-4 animate-spin" /> : "Excluir"}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Dialog de Resetar Senha */}
      <Dialog open={resetPasswordDialogOpen} onOpenChange={setResetPasswordDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Resetar Senha</DialogTitle>
            <DialogDescription>
              Você deseja resetar a senha do usuário "{userToResetPassword?.name}"? A nova senha será "123456".
            </DialogDescription>
          </DialogHeader>
          <div className="flex justify-end gap-2 mt-4">
            <Button variant="outline" onClick={() => setResetPasswordDialogOpen(false)}>
              Cancelar
            </Button>
            <Button
              onClick={() => userToResetPassword && resetPassword(userToResetPassword.id)}
              disabled={resettingPassword}
            >
              {resettingPassword ? <Loader2 className="h-4 w-4 animate-spin" /> : "Resetar Senha"}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

<div className="space-y-4">
        {affiliates.map((affiliate) => (
          <div key={affiliate.id} className="rounded-xl border border-border bg-card p-4">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div className="flex items-start gap-3">
                {/* Avatar */}
                <div className="relative">
                  <div className="h-12 w-12 rounded-full overflow-hidden bg-secondary border-2 border-border">
                    {affiliate.photo_url ? (
                      <img
                        src={affiliate.photo_url || "/placeholder.svg"}
                        alt={affiliate.name}
                        className="h-full w-full object-cover"
                      />
                    ) : (
                      <div className="h-full w-full flex items-center justify-center text-lg font-bold text-muted-foreground">
                        {affiliate.name.charAt(0)}
                      </div>
                    )}
                  </div>
                  {affiliate.is_vip && (
                    <div className="absolute -top-1 -right-1 rounded-full bg-amber-500 p-1">
                      <Crown className="h-3 w-3 text-black" />
                    </div>
                  )}
                </div>

<div>
                  <div className="flex items-center gap-2">
                    <p className="font-medium">{affiliate.name}</p>
                    {affiliate.is_vip && <Badge className="bg-amber-500 text-black text-xs">VIP</Badge>}
                  </div>
                  <p className="text-xs text-muted-foreground">{affiliate.email}</p>
                  <p className="text-xs text-muted-foreground">WhatsApp: {affiliate.whatsapp}</p>
                  {affiliate.nome_celetus && (
                    <p className="text-xs text-muted-foreground">Celetus: {affiliate.nome_celetus}</p>
                  )}
                </div>
              </div>

<div className="flex flex-wrap items-center gap-2">
                {/* Botão Editar */}
                <Button size="sm" variant="outline" onClick={() => openEditDialog(affiliate)}>
                  <Pencil className="h-4 w-4" />
                </Button>

<Button
                  size="sm"
                  variant="outline"
                  className="text-red-500 hover:text-red-600 hover:bg-red-500/10 bg-transparent"
                  onClick={() => {
                    setUserToDelete(affiliate)
                    setDeleteDialogOpen(true)
                  }}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>

{/* Botão Atribuir Avatar */}
                {!affiliate.photo_url && avatars.length > 0 && (
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => assignRandomAvatar(affiliate.id)}
                    title="Atribuir avatar aleatório"
                  >
                    <RefreshCw className="h-4 w-4" />
                  </Button>
                )}

{/* VIP Toggle */}
                <div className="flex items-center gap-2 mr-2 px-3 py-1.5 rounded-lg bg-secondary/50">
                  <Crown className={`h-4 w-4 ${affiliate.is_vip ? "text-amber-500" : "text-muted-foreground"}`} />
                  <span className="text-sm font-medium">VIP</span>
                  <Switch
                    checked={affiliate.is_vip || false}
                    onCheckedChange={() => toggleVip(affiliate.id, affiliate.is_vip || false)}
                    className="data-[state=checked]:bg-amber-500"
                  />
                </div>

<Badge
                  variant={
                    affiliate.status === "approved"
                      ? "default"
                      : affiliate.status === "pending"
                        ? "secondary"
                        : affiliate.status === "paused"
                          ? "outline"
                          : "destructive"
                  }
                >
                  {affiliate.status === "approved"
                    ? "Aprovado"
                    : affiliate.status === "pending"
                      ? "Pendente"
                      : affiliate.status === "paused"
                        ? "Pausado"
                        : "Rejeitado"}
                </Badge>
                {affiliate.status === "pending" && (
                  <>
                    <Button size="sm" variant="default" onClick={() => updateStatus(affiliate.id, "approved")}>
                      <Check className="mr-1 h-4 w-4" />
                      Aprovar
                    </Button>
                    <Button size="sm" variant="destructive" onClick={() => updateStatus(affiliate.id, "rejected")}>
                      <UserX className="mr-1 h-4 w-4" />
                      Rejeitar
                    </Button>
                  </>
                )}
                {affiliate.status === "approved" && (
                  <Button size="sm" variant="outline" onClick={() => updateStatus(affiliate.id, "paused")}>
                    <Pause className="mr-1 h-4 w-4" />
                    Pausar
                  </Button>
                )}
                {affiliate.status === "paused" && (
                  <Button size="sm" variant="default" onClick={() => updateStatus(affiliate.id, "approved")}>
                    <Play className="mr-1 h-4 w-4" />
                    Reativar
                  </Button>
                )}
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => openResetPasswordDialog(affiliate)}
                  className="border-amber-500/50 text-amber-500 hover:bg-amber-500/10"
                  title="Resetar Senha"
                >
                  <KeyRound className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>

{affiliates.length === 0 && (
        <div className="text-center py-8 text-muted-foreground">
          Nenhum usuário encontrado com os filtros selecionados.
        </div>
      )}

{totalAffiliatesCount > PAGE_SIZE && (
        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-muted-foreground">
            Página {currentPage} de {totalPages} • {totalAffiliatesCount} usuários
          </p>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
              disabled={currentPage === 1 || loading}
            >
              Anterior
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
              disabled={currentPage === totalPages || loading}
            >
              Próxima
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

function RankingAdmin() {
  const [rankings, setRankings] = useState<any[]>([])
  const [affiliates, setAffiliates] = useState<Affiliate[]>([])
  const [isAdding, setIsAdding] = useState(false)
  const [selectedUserId, setSelectedUserId] = useState("")
  const [salesCount, setSalesCount] = useState(0)
  const [addPositionChange, setAddPositionChange] = useState<"up" | "down" | "same">("same")
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1)
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear())
  const [editingId, setEditingId] = useState<string | null>(null)
  const [editSales, setEditSales] = useState(0)
  const [editPositionChange, setEditPositionChange] = useState<"up" | "down" | "same">("same")
  const [loading, setLoading] = useState(true)
  const [prizes, setPrizes] = useState<{ position: number; prize_description: string }[]>([])
  const [showPrizes, setShowPrizes] = useState(false)
  const [newPrizes, setNewPrizes] = useState<{ [key: number]: string }>({
    1: "",
    2: "",
    3: "",
    4: "",
    5: "",
  })
  const [searchTerm, setSearchTerm] = useState("")
  const [addMonth, setAddMonth] = useState(new Date().getMonth() + 1)
  const [addYear, setAddYear] = useState(new Date().getFullYear())

const monthNames = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ]

useEffect(() => {
    fetchData()
  }, [selectedMonth, selectedYear])

async function fetchData() {
    setLoading(true)
    const supabase = createClient()

// Buscar afiliados aprovados
    const { data: affiliatesData } = await supabase.from("affiliates").select("*").eq("status", "approved")

if (affiliatesData) setAffiliates(affiliatesData)

// Buscar ranking do mês selecionado
    const { data: rankingData } = await supabase
      .from("monthly_rankings")
      .select(`
        *,
        affiliates (
          id,
          name,
          email,
          photo_url
        )
      `)
      .eq("month", selectedMonth)
      .eq("year", selectedYear)
      .order("sales_count", { ascending: false })

if (rankingData) setRankings(rankingData)

const { data: prizesData } = await supabase
      .from("ranking_prizes")
      .select("*")
      .eq("month", selectedMonth)
      .eq("year", selectedYear)
      .order("position", { ascending: true })

if (prizesData) {
      setPrizes(prizesData)
      const prizeMap: { [key: number]: string } = { 1: "", 2: "", 3: "", 4: "", 5: "" }
      prizesData.forEach((p) => {
        prizeMap[p.position] = p.prize_description
      })
      setNewPrizes(prizeMap)
    } else {
      setNewPrizes({ 1: "", 2: "", 3: "", 4: "", 5: "" })
    }

setLoading(false)
  }

const handleSavePrizes = async () => {
    const supabase = createClient()

for (const position of [1, 2, 3, 4, 5]) {
      const description = newPrizes[position]
      if (description.trim()) {
        await supabase.from("ranking_prizes").upsert(
          {
            month: selectedMonth,
            year: selectedYear,
            position,
            prize_description: description.trim(),
            updated_at: new Date().toISOString(),
          },
          { onConflict: "month,year,position" },
        )
      } else {
        // Remove se estiver vazio
        await supabase
          .from("ranking_prizes")
          .delete()
          .eq("month", selectedMonth)
          .eq("year", selectedYear)
          .eq("position", position)
      }
    }

fetchData()
    setShowPrizes(false)
  }

const availableAffiliates = affiliates.filter((a) => {
    const matchesSearch =
      searchTerm === "" ||
      a.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      a.email?.toLowerCase().includes(searchTerm.toLowerCase())
    const notInRanking = !rankings.some((r) => r.affiliate_id === a.id)
    return matchesSearch && notInRanking
  })

const handleAdd = async () => {
    if (!selectedUserId) return

const supabase = createClient()
    const { error } = await supabase.from("monthly_rankings").insert({
      affiliate_id: selectedUserId,
      month: addMonth,
      year: addYear,
      sales_count: salesCount,
      sales_value: 0, // Assuming sales_value and points might be added later
      points: salesCount * 10,
      position: rankings.length + 1, // This might need adjustment after fetch
      position_change: addPositionChange,
    })

if (!error) {
      fetchData() // Re-fetch to update rankings and availableAffiliates
      setSelectedUserId("")
      setSalesCount(0)
      setSearchTerm("") // Resetar termo de busca
      setIsAdding(false)
      setAddPositionChange("same") // Resetar o estado
    }
  }

const handleUpdateSales = async (id: string) => {
    const supabase = createClient()
    await supabase
      .from("monthly_rankings")
      .update({
        sales_count: editSales,
        points: editSales * 10, // Update points based on new sales count
        position_change: editPositionChange,
      })
      .eq("id", id)

fetchData() // Re-fetch to get updated data
    setEditingId(null)
    setEditPositionChange("same") // Resetar o estado
  }

const handleRemove = async (id: string) => {
    const supabase = createClient()
    await supabase.from("monthly_rankings").delete().eq("id", id)
    fetchData() // Re-fetch to update rankings
  }

// Gerar opções de meses (últimos 12 meses)
  const monthOptions = []
  for (let i = 0; i < 12; i++) {
    const date = new Date()
    date.setMonth(date.getMonth() - i)
    monthOptions.push({
      month: date.getMonth() + 1,
      year: date.getFullYear(),
      label: `${monthNames[date.getMonth()]} ${date.getFullYear()}`,
    })
  }

return (
    <div>
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h2 className="text-xl font-semibold">Ranking Mensal</h2>
        <div className="flex items-center gap-3">
          <select
            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
            value={`${selectedMonth}-${selectedYear}`}
            onChange={(e) => {
              const [m, y] = e.target.value.split("-")
              setSelectedMonth(Number.parseInt(m))
              setSelectedYear(Number.parseInt(y))
            }}
          >
            {monthOptions.map((opt) => (
              <option key={`${opt.month}-${opt.year}`} value={`${opt.month}-${opt.year}`}>
                {opt.label}
              </option>
            ))}
          </select>
          <Button variant="outline" onClick={() => setShowPrizes(!showPrizes)} className="gap-2">
            <Trophy className="h-4 w-4" />
            Premiações
          </Button>
          <Button onClick={() => setIsAdding(!isAdding)} className="gap-2">
            <Plus className="h-4 w-4" />
            Adicionar
          </Button>
        </div>
      </div>

{showPrizes && (
        <div className="mb-6 rounded-xl border border-yellow-500/30 bg-gradient-to-r from-yellow-500/10 to-amber-500/10 p-6">
          <div className="mb-4 flex items-center gap-2">
            <Trophy className="h-5 w-5 text-yellow-500" />
            <h3 className="font-medium">
              Premiações de {monthNames[selectedMonth - 1]} {selectedYear}
            </h3>
          </div>
          <div className="space-y-3">
            {[1, 2, 3, 4, 5].map((position) => (
              <div key={position} className="flex items-center gap-3">
                <div
                  className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
                    position === 1
                      ? "bg-yellow-500 text-black"
                      : position === 2
                        ? "bg-gray-400 text-black"
                        : position === 3
                          ? "bg-amber-700 text-white"
                          : "bg-secondary text-foreground"
                  }`}
                >
                  {position}º
                </div>
                <Input
                  className="flex-1 text-sm"
                  placeholder={`Prêmio para o ${position}º lugar (ex: R$ 500,00, iPhone 15, etc.)`}
                  value={newPrizes[position]}
                  onChange={(e) => setNewPrizes({ ...newPrizes, [position]: e.target.value })}
                />
              </div>
            ))}
          </div>
          <div className="mt-4 flex justify-end gap-2">
            <Button variant="outline" onClick={() => setShowPrizes(false)}>
              Cancelar
            </Button>
            <Button onClick={handleSavePrizes} className="gap-2 bg-yellow-600 hover:bg-yellow-700">
              <Save className="h-4 w-4" />
              Salvar Premiações
            </Button>
          </div>
        </div>
      )}

{isAdding && (
        <div className="mb-6 rounded-xl border border-primary/30 bg-card p-6">
          <h3 className="mb-4 font-medium text-base md:text-lg">Adicionar ao Ranking</h3>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
              <Label className="mb-1 block text-xs md:text-sm">Buscar Usuário (nome ou email)</Label>
              <Input
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Digite o nome ou email..."
                className="mb-2 text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Usuário</Label>
              <select
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                value={selectedUserId}
                onChange={(e) => setSelectedUserId(e.target.value)}
              >
                <option value="">Selecione um usuário</option>
                {availableAffiliates.map((a) => (
                  <option key={a.id} value={a.id}>
                    {a.name} ({a.email})
                  </option>
                ))}
              </select>
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Número de Vendas</Label>
              <Input
                type="number"
                min={0}
                value={salesCount}
                onChange={(e) => setSalesCount(Number.parseInt(e.target.value) || 0)}
                placeholder="0"
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Mês</Label>
              <select
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                value={addMonth}
                onChange={(e) => setAddMonth(Number.parseInt(e.target.value))}
              >
                {monthNames.map((name, index) => (
                  <option key={index} value={index + 1}>
                    {name}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Ano</Label>
              <select
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                value={addYear}
                onChange={(e) => setAddYear(Number.parseInt(e.target.value))}
              >
                {[2024, 2025, 2026].map((year) => (
                  <option key={year} value={year}>
                    {year}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <Label className="mb-2 block text-xs md:text-sm">Mudança de Posição</Label>
              <div className="flex items-center gap-2">
                <Button
                  type="button"
                  size="sm"
                  variant={addPositionChange === "up" ? "default" : "outline"}
                  onClick={() => setAddPositionChange("up")}
                  className={addPositionChange === "up" ? "bg-green-600 hover:bg-green-700" : ""}
                >
                  <TrendingUp className="h-4 w-4" /> Subiu
                </Button>
                <Button
                  type="button"
                  size="sm"
                  variant={addPositionChange === "down" ? "default" : "outline"}
                  onClick={() => setAddPositionChange("down")}
                  className={addPositionChange === "down" ? "bg-red-600 hover:bg-red-700" : ""}
                >
                  <TrendingUp className="h-4 w-4 rotate-180" /> Desceu
                </Button>
                <Button
                  type="button"
                  size="sm"
                  variant={addPositionChange === "same" ? "default" : "outline"}
                  onClick={() => setAddPositionChange("same")}
                >
                  <Flame className="h-4 w-4" /> Sem Mudança
                </Button>
              </div>
            </div>
          </div>
          <div className="mt-4 flex justify-end gap-2">
            <Button variant="outline" onClick={() => setIsAdding(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAdd} disabled={!selectedUserId}>
              <Save className="mr-1 h-4 w-4" />
              Salvar
            </Button>
          </div>
        </div>
      )}

{loading ? (
        <div className="py-8 text-center text-muted-foreground">Carregando...</div>
      ) : rankings.length === 0 ? (
        <div className="py-8 text-center text-muted-foreground">
          Nenhum afiliado no ranking de {monthNames[selectedMonth - 1]} {selectedYear}
        </div>
      ) : (
        <div className="space-y-4">
          {rankings.map((member, index) => (
            <div key={member.id} className="rounded-xl border border-border bg-card p-4">
              <div className="flex items-center gap-4">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-full font-bold ${
                    index === 0
                      ? "bg-yellow-500 text-black"
                      : index === 1
                        ? "bg-gray-400 text-black"
                        : index === 2
                          ? "bg-amber-700 text-white"
                          : "bg-secondary text-foreground"
                  }`}
                >
                  {index + 1}º
                </div>
                <img
                  src={member.affiliates?.photo_url || "/placeholder.svg?height=48&width=48&query=avatar"}
                  alt={member.affiliates?.name || "Afiliado"}
                  className="h-12 w-12 rounded-full object-cover"
                />
                <div className="flex-1">
                  <p className="font-medium">{member.affiliates?.name || "Usuário"}</p>
                  <p className="text-xs text-muted-foreground">
                    {monthNames[selectedMonth - 1]} {selectedYear}
                  </p>
                </div>
                {editingId === member.id ? (
                  <div className="flex items-center gap-2">
                    <Input
                      type="number"
                      className="w-20 text-sm"
                      value={editSales}
                      onChange={(e) => setEditSales(Number.parseInt(e.target.value) || 0)}
                    />
                    <select
                      className="rounded-md border border-input bg-background px-2 py-1.5 text-sm"
                      value={editPositionChange}
                      onChange={(e) => setEditPositionChange(e.target.value as "up" | "down" | "same")}
                    >
                      <option value="same">= Manteve</option>
                      <option value="up">↑ Subiu</option>
                      <option value="down">↓ Desceu</option>
                    </select>
                    <Button size="sm" onClick={() => handleUpdateSales(member.id)}>
                      <Save className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="outline" onClick={() => setEditingId(null)}>
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center gap-2">
                    {member.position_change === "up" && <span className="text-green-500 font-bold">↑</span>}
                    {member.position_change === "down" && <span className="text-red-500 font-bold">↓</span>}
                    {member.position_change === "same" && <span className="text-muted-foreground">-</span>}
                    <span className="font-semibold text-primary">{member.sales_count} vendas</span>
                    <Button
                      size="icon"
                      variant="ghost"
                      onClick={() => {
                        setEditingId(member.id)
                        setEditSales(member.sales_count)
                        setEditPositionChange(member.position_change || "same")
                      }}
                    >
                      <Edit2 className="h-4 w-4" />
                    </Button>
                    <Button
                      size="icon"
                      variant="ghost"
                      className="text-destructive"
                      onClick={() => handleRemove(member.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function AnnouncementsAdmin() {
  type PublicationStatus = "draft" | "published"

const formatDateTimeLocal = (value: Date) => {
    const offset = value.getTimezoneOffset()
    const localDate = new Date(value.getTime() - offset * 60 * 1000)
    return localDate.toISOString().slice(0, 16)
  }

const slugifyAnnouncement = (value: string) =>
    value
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "")
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)+/g, "")

const [announcements, setAnnouncements] = useState<any[]>([])
  const [isAdding, setIsAdding] = useState(false)
  const [loading, setLoading] = useState(true)
  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false)
  const [formError, setFormError] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const [savedPostSlug, setSavedPostSlug] = useState<string | null>(null)
  const [savedPublicationStatus, setSavedPublicationStatus] = useState<PublicationStatus | null>(null)
  const [newAnnouncement, setNewAnnouncement] = useState({
    title: "",
    message: "",
    excerpt: "",
    content: "",
    coverUrl: "",
    linkUrl: "",
    slug: "",
    type: "info" as "info" | "promo" | "update" | "alert",
    publicationStatus: "draft" as PublicationStatus,
    publishedAt: formatDateTimeLocal(new Date()),
    active: true,
  })

const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

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

useEffect(() => {
    if (slugManuallyEdited) return

setNewAnnouncement((prev) => ({
      ...prev,
      slug: slugifyAnnouncement(prev.title),
    }))
  }, [newAnnouncement.title, slugManuallyEdited])

const fetchAnnouncements = async () => {
    setLoading(true)
    const { data, error } = await supabase.from("announcements").select("*").order("created_at", { ascending: false })

if (!error && data) {
      setAnnouncements(data)
    }
    setLoading(false)
  }

const handleAdd = async () => {
    if (!newAnnouncement.title && !newAnnouncement.message && !newAnnouncement.content) return

const textFallback = newAnnouncement.message || newAnnouncement.excerpt || newAnnouncement.title

const { error } = await supabase.from("announcements").insert({
      title: newAnnouncement.title || null,
      text: textFallback,
      excerpt: newAnnouncement.excerpt || null,
      content: newAnnouncement.content || null,
      cover_url: newAnnouncement.coverUrl || null,
      link_url: newAnnouncement.linkUrl || null,
      slug: newAnnouncement.slug || null,
      type: newAnnouncement.type,
      publication_status: newAnnouncement.publicationStatus,
      published_at: publishedAt,
      active: newAnnouncement.active,
    })

if (!error) {
      setNewAnnouncement({
        title: "",
        message: "",
        excerpt: "",
        content: "",
        coverUrl: "",
        linkUrl: "",
        slug: "",
        type: "info",
        active: true,
      })
      setIsAdding(false)
      fetchAnnouncements()
    } else {
      setFormError(error.message)
    }

setSaving(false)
  }

const handleToggleActive = async (id: string, currentActive: boolean) => {
    const { error } = await supabase.from("announcements").update({ active: !currentActive }).eq("id", id)

if (!error) {
      fetchAnnouncements()
    }
  }

const handleDelete = async (id: string) => {
    const { error } = await supabase.from("announcements").delete().eq("id", id)

if (!error) {
      fetchAnnouncements()
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    )
  }

return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <h2 className="text-xl font-semibold">Gerenciar Avisos</h2>
        <Button
          onClick={() => {
            setIsAdding(!isAdding)
            setFormError(null)
          }}
          className="gap-2"
        >
          <Plus className="h-4 w-4" />
          Novo Aviso
        </Button>
      </div>

{savedPostSlug && savedPublicationStatus === "published" && (
        <div className="mb-4 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-3">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm text-emerald-200">Post salvo com sucesso.</p>
            <Link href={`/avisos/${savedPostSlug}`} target="_blank" rel="noreferrer">
              <Button size="sm" variant="outline" className="gap-2 bg-transparent">
                <Eye className="h-4 w-4" />
                Visualizar no blog
              </Button>
            </Link>
          </div>
        </div>
      )}

{isAdding && (
        <div className="mb-6 rounded-xl border border-primary/30 bg-card p-6">
          <h3 className="mb-4 font-medium text-base md:text-lg">Novo Aviso</h3>
          <div className="grid gap-6 lg:grid-cols-[1.3fr_1fr]">
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Título do Post</Label>
              <Input
                value={newAnnouncement.title}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, title: e.target.value })}
                placeholder="Ex: Nova atualização no ranking de afiliados"
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Mensagem curta (banner)</Label>
              <Input
                value={newAnnouncement.message}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, message: e.target.value })}
                placeholder="Ex: 5 CRIATIVOS ADICIONADOS NO PRODUTO TAL"
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Resumo</Label>
              <Input
                value={newAnnouncement.excerpt}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, excerpt: e.target.value })}
                placeholder="Uma chamada curta para a listagem do blog."
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Slug (opcional)</Label>
              <Input
                value={newAnnouncement.slug}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, slug: e.target.value })}
                placeholder="ex: manifesto-afilia360"
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Imagem de capa URL</Label>
              <Input
                value={newAnnouncement.coverUrl}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, coverUrl: e.target.value })}
                placeholder="https://..."
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-1 block text-xs md:text-sm">Link externo (opcional)</Label>
              <Input
                value={newAnnouncement.linkUrl}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, linkUrl: e.target.value })}
                placeholder="https://..."
                className="text-sm"
              />
            </div>
            <div>
              <Label className="mb-2 block text-xs md:text-sm">Tipo</Label>
              <div className="flex gap-2 flex-wrap">
                {(["info", "promo", "update", "alert"] as const).map((type) => (
                  <Button
                    key={type}
                    size="sm"
                    variant={newAnnouncement.type === type ? "default" : "outline"}
                    onClick={() => setNewAnnouncement({ ...newAnnouncement, type })}
                    className={
                      newAnnouncement.type === type
                        ? type === "info"
                          ? "bg-blue-600"
                          : type === "promo"
                            ? "bg-green-600"
                            : type === "update"
                              ? "bg-yellow-600"
                              : "bg-red-600"
                        : ""
                    }
                  >
                    {type === "info" ? "Info" : type === "promo" ? "Promoção" : type === "update" ? "Atualização" : "Alerta"}
                  </Button>
                ))}
              </div>
            </div>
            <div className="mt-4">
              <Label className="mb-1 block text-xs md:text-sm">Conteúdo completo do artigo *</Label>
              <textarea
                value={newAnnouncement.content}
                onChange={(e) => setNewAnnouncement({ ...newAnnouncement, content: e.target.value })}
                placeholder="Escreva aqui o conteúdo do artigo..."
                className="min-h-[180px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
              />
            </div>
            {formError && <p className="mt-3 text-sm text-destructive">{formError}</p>}
            <div className="mt-4 flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsAdding(false)}>
                Cancelar
              </Button>
              <Button onClick={handleAdd} disabled={saving}>
                {saving ? <Loader2 className="mr-1 h-4 w-4 animate-spin" /> : <Save className="mr-1 h-4 w-4" />}
                Salvar
              </Button>
            </div>
          </div>

<div className="space-y-4 rounded-lg border border-border/60 bg-background/30 p-4">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Preview em tempo real</p>
              <div className="rounded-lg border border-border bg-card p-3">
                <p className="text-xs text-muted-foreground">Card/lista</p>
                <p className="mt-1 font-medium">{newAnnouncement.title || "Título do aviso"}</p>
                <p className="mt-1 text-xs text-muted-foreground">
                  {newAnnouncement.excerpt || "Resumo exibido na listagem do blog."}
                </p>
                <p className="mt-2 text-[11px] text-muted-foreground">
                  {newAnnouncement.publicationStatus === "draft" ? "Rascunho" : "Publicado"} •{" "}
                  {newAnnouncement.publishedAt ? new Date(newAnnouncement.publishedAt).toLocaleDateString("pt-BR") : "Sem data"}
                </p>
              </div>
              <div className="rounded-lg border border-border bg-card p-3">
                <p className="text-xs text-muted-foreground">Detalhe</p>
                <p className="mt-1 text-lg font-semibold">{newAnnouncement.title || "Título do aviso"}</p>
                <p className="mt-2 whitespace-pre-line text-sm text-muted-foreground">
                  {newAnnouncement.content || "Conteúdo completo aparecerá aqui em tempo real."}
                </p>
                <p className="mt-3 text-[11px] text-muted-foreground">{"URL final: /avisos/"}{newAnnouncement.slug || "slug-do-post"}</p>
              </div>
            </div>
          </div>
        </div>
      )}

<div className="space-y-4">
        {announcements.length === 0 ? (
          <div className="rounded-xl border border-dashed border-border p-8 text-center text-muted-foreground">
            Nenhum aviso cadastrado
          </div>
        ) : (
          announcements.map((announcement) => (
            <div key={announcement.id} className="rounded-xl border border-border bg-card p-4">
              <div className="flex items-start justify-between gap-4">
                <div className="flex items-start gap-3">
                  {announcement.cover_url && (
                    <img
                      src={announcement.cover_url || "/placeholder.jpg"}
                      alt={announcement.title || announcement.text || "Aviso"}
                      className="h-16 w-24 rounded-md border border-border object-cover"
                    />
                  )}
                  <div>
                    <p className={`font-medium ${announcement.active ? "" : "text-muted-foreground line-through"}`}>
                      {announcement.title || "Sem título"}
                    </p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {announcement.excerpt || announcement.text}
                    </p>
                    <p className="mt-2 text-xs text-muted-foreground">
                      {announcement.created_at ? new Date(announcement.created_at).toLocaleDateString("pt-BR") : ""}
                    </p>
                  </div>
                  <Badge
                    variant="outline"
                    className={
                      announcement.type === "info"
                        ? "border-blue-500 text-blue-500"
                        : announcement.type === "promo"
                          ? "border-green-500 text-green-500"
                          : announcement.type === "update"
                            ? "border-amber-500 text-amber-500"
                            : "border-red-500 text-red-500"
                    }
                  >
                    {announcement.type === "info"
                      ? "Info"
                      : announcement.type === "promo"
                        ? "Promo"
                        : announcement.type === "update"
                          ? "Update"
                          : "Alerta"}
                  </Badge>
                </div>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant={announcement.active ? "default" : "outline"}
                    onClick={() => handleToggleActive(announcement.id, announcement.active)}
                  >
                    {announcement.active ? "Ativo" : "Inativo"}
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="text-destructive"
                    onClick={() => handleDelete(announcement.id)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}

function CeletusAdmin() {
  const [apiKey, setApiKey] = useState("")
  const [savedKey, setSavedKey] = useState(false)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")
  const [syncing, setSyncing] = useState(false)
  const [syncResult, setSyncResult] = useState<any>(null)
  const [sales, setSales] = useState<any[]>([])
  const [loadingSales, setLoadingSales] = useState(false)
  const [copied, setCopied] = useState(false)
  const [dashboardMonth, setDashboardMonth] = useState(new Date().getMonth() + 1)
  const [dashboardYear, setDashboardYear] = useState(new Date().getFullYear())
  const [monthlyStats, setMonthlyStats] = useState<{
    currentMonth: number
    currentYear: number
    totalSales: number
    totalValue: number
    isRecord: boolean
    previousRecord: number
    previousRecordMonth: string
    // Comissão Afiliados
    faturamentoTotal: number
    comissaoAfiliado: number
    comissaoAfilia360: number
    qtdVendaPrincipal: number
    qtdOrderbump: number
    // Vendas App Afilia
    vendasBasic: number
    vendasPro: number
    faturamentoBasic: number
    faturamentoPro: number
    faturamentoAppTotal: number
  } | null>(null)

const webhookUrl = "https://app.afilia360.com.br/api/celetus/webhook"
  const monthNames = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ]

useEffect(() => {
    loadConfig()
    loadSales()
  }, [])

useEffect(() => {
    loadMonthlyStats(dashboardMonth, dashboardYear)
  }, [dashboardMonth, dashboardYear])

const loadMonthlyStats = async (month: number, year: number) => {
    const supabase = createClient()

// Buscar total de vendas dos afiliados no mês selecionado (do ranking manual)
    const { data: currentRanking } = await supabase
      .from("monthly_rankings")
      .select("sales_count")
      .eq("month", month)
      .eq("year", year)

const totalSales = currentRanking?.reduce((sum, r) => sum + (r.sales_count || 0), 0) || 0

// Buscar vendas da Celetus do mês selecionado
    const startOfMonth = new Date(year, month - 1, 1).toISOString()
    const endOfMonth = new Date(year, month, 0, 23, 59, 59).toISOString()

const { data: celetusSales } = await supabase
      .from("celetus_sales")
      .select("total_value, raw_data")
      .gte("sale_date", startOfMonth)
      .lte("sale_date", endOfMonth)

let faturamentoTotal = 0
    let comissaoAfiliado = 0
    let comissaoAfilia360 = 0
    let qtdVendaPrincipal = 0
    let qtdOrderbump = 0

let vendasBasic = 0
    let vendasPro = 0
    let faturamentoBasic = 0
    let faturamentoPro = 0

const AFILIA_BASIC_CODE = "FYGCVIHI"
    const AFILIA_PRO_CODE = "ZOXLWXI9"

celetusSales?.forEach((sale) => {
      const rawData = sale.raw_data as any
      const commission = rawData?.commission
      const items = rawData?.items || []

if (commission) {
        const affiliatedArray = commission.affiliated
        const isAffiliateSale = Array.isArray(affiliatedArray) && affiliatedArray.length > 0

// Só considerar vendas que vieram de afiliados para comissões
        if (isAffiliateSale) {
          faturamentoTotal += Number(commission.totalPrice) || 0
          comissaoAfilia360 += Number(commission.userCommission) || 0

affiliatedArray.forEach((aff: any) => {
            comissaoAfiliado += Number(aff.commissionValue) || 0
          })

items.forEach((item: any) => {
            if (item.item_type === "Principal") {
              qtdVendaPrincipal++
            } else if (item.item_type === "Orderbump") {
              qtdOrderbump++
            }
          })
        }
      }

let isAfiliaBasic = false
      let isAfiliaPro = false

items.forEach((item: any) => {
        const itemCode = item.code || ""
        if (itemCode === AFILIA_BASIC_CODE) {
          isAfiliaBasic = true
        } else if (itemCode === AFILIA_PRO_CODE) {
          isAfiliaPro = true
        }
      })

const totalVenda = Number(commission?.totalPrice) || 0
      if (isAfiliaBasic) {
        vendasBasic++
        faturamentoBasic += totalVenda
      } else if (isAfiliaPro) {
        vendasPro++
        faturamentoPro += totalVenda
      }
    })

// Buscar todos os meses anteriores para comparar
    const { data: allMonths } = await supabase
      .from("monthly_rankings")
      .select("month, year, sales_count")
      .or(`year.lt.${year},and(year.eq.${year},month.lt.${month})`)

// Agrupar por mês/ano e somar
    const monthlyTotals: { [key: string]: { total: number; month: number; year: number } } = {}
    allMonths?.forEach((r) => {
      const key = `${r.year}-${r.month}`
      if (!monthlyTotals[key]) {
        monthlyTotals[key] = { total: 0, month: r.month, year: r.year }
      }
      monthlyTotals[key].total += r.sales_count || 0
    })

// Encontrar o recorde anterior
    let previousRecord = 0
    let previousRecordMonth = ""
    const shortMonthNames = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]

Object.values(monthlyTotals).forEach((m) => {
      if (m.total > previousRecord) {
        previousRecord = m.total
        previousRecordMonth = `${shortMonthNames[m.month - 1]}/${m.year}`
      }
    })

setMonthlyStats({
      currentMonth: month,
      currentYear: year,
      totalSales,
      totalValue: faturamentoTotal,
      isRecord: totalSales > previousRecord && totalSales > 0,
      previousRecord,
      previousRecordMonth,
      faturamentoTotal,
      comissaoAfiliado,
      comissaoAfilia360,
      qtdVendaPrincipal,
      qtdOrderbump,
      // Vendas App Afilia
      vendasBasic,
      vendasPro,
      faturamentoBasic,
      faturamentoPro,
      faturamentoAppTotal: faturamentoBasic + faturamentoPro,
    })
  }

const loadConfig = async () => {
    setLoading(true)
    try {
      const res = await fetch("/api/celetus/config")
      const data = await res.json()
      if (data.config) {
        setSavedKey(true)
      }
    } catch (err) {
      console.error("Erro ao carregar config:", err)
    } finally {
      setLoading(false)
    }
  }

const loadSales = async () => {
    setLoadingSales(true)
    try {
      const res = await fetch("/api/celetus/sales")
      const data = await res.json()
      if (data.sales) {
        setSales(data.sales)
      }
    } catch (err) {
      console.error("Erro ao carregar vendas:", err)
    } finally {
      setLoadingSales(false)
    }
  }

const saveApiKey = async () => {
    if (!apiKey.trim()) {
      setError("Insira uma API Key válida")
      return
    }

setLoading(true)
    setError("")
    try {
      const res = await fetch("/api/celetus/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ apiKey: apiKey.trim() }),
      })

if (res.ok) {
        setSavedKey(true)
        setApiKey("")
        setError("")
      } else {
        const data = await res.json()
        setError(data.error || "Erro ao salvar")
      }
    } catch (err) {
      setError("Erro ao salvar API Key")
    } finally {
      setLoading(false)
    }
  }

const testSync = async () => {
    setSyncing(true)
    setSyncResult(null)
    setError("")
    try {
      const res = await fetch("/api/celetus/sync", { method: "POST" })
      const data = await res.json()

if (res.ok) {
        setSyncResult(data)
        loadSales()
        loadMonthlyStats(dashboardMonth, dashboardYear) // Reload stats after sync
      } else {
        setError(data.error || "Erro na sincronização")
        if (data.details) {
          setSyncResult({ error_details: data.details })
        }
      }
    } catch (err) {
      setError("Erro ao conectar com a API")
    } finally {
      setSyncing(false)
    }
  }

const copyWebhookUrl = () => {
    navigator.clipboard.writeText(webhookUrl)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

const renderJsonAsRows = (obj: any, prefix = ""): React.ReactNode[] => {
    const rows: React.ReactNode[] = []

const processValue = (key: string, value: any, fullPath: string) => {
      if (value === null || value === undefined) {
        rows.push(
          <tr key={fullPath} className="border-b border-border/30 hover:bg-secondary/30">
            <td className="py-2 px-3 font-mono text-xs text-primary">{fullPath}</td>
            <td className="py-2 px-3 text-muted-foreground italic">null</td>
          </tr>,
        )
      } else if (typeof value === "object" && !Array.isArray(value)) {
        rows.push(
          <tr key={fullPath} className="border-b border-border/30 bg-secondary/40">
            <td colSpan={2} className="py-2 px-3 font-mono text-xs font-bold text-primary">
              {fullPath} (objeto)
            </td>
          </tr>,
        )
        Object.entries(value).forEach(([k, v]) => {
          processValue(k, v, `${fullPath}.${k}`)
        })
      } else if (Array.isArray(value)) {
        rows.push(
          <tr key={fullPath} className="border-b border-border/30 bg-secondary/40">
            <td colSpan={2} className="py-2 px-3 font-mono text-xs font-bold text-primary">
              {fullPath} (array com {value.length} itens)
            </td>
          </tr>,
        )
        value.forEach((item, idx) => {
          if (typeof item === "object" && item !== null) {
            Object.entries(item).forEach(([k, v]) => {
              processValue(k, v, `${fullPath}[${idx}].${k}`)
            })
          } else {
            rows.push(
              <tr key={`${fullPath}[${idx}]`} className="border-b border-border/30 hover:bg-secondary/30">
                <td className="py-2 px-3 font-mono text-xs text-primary">{`${fullPath}[${idx}]`}</td>
                <td className="py-2 px-3 break-all">
                  {typeof item === "boolean" ? (
                    <Badge variant={item ? "default" : "secondary"}>{String(item)}</Badge>
                  ) : (
                    String(item)
                  )}
                </td>
              </tr>,
            )
          }
        })
      } else {
        rows.push(
          <tr key={fullPath} className="border-b border-border/30 hover:bg-secondary/30">
            <td className="py-2 px-3 font-mono text-xs text-primary">{fullPath}</td>
            <td className="py-2 px-3 break-all">
              {typeof value === "boolean" ? (
                <Badge variant={value ? "default" : "secondary"}>{String(value)}</Badge>
              ) : (
                String(value)
              )}
            </td>
          </tr>,
        )
      }
    }

Object.entries(obj).forEach(([key, value]) => {
      processValue(key, value, prefix ? `${prefix}.${key}` : key)
    })

return rows
  }

if (loading && !savedKey) {
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Card Dashboard de Vendas */}
      <Card className="border-primary/20">
        <CardHeader>
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5 text-primary" />
                Dashboard de Vendas
              </CardTitle>
              <CardDescription>Resumo das vendas e comissões</CardDescription>
            </div>
            <div className="flex items-center gap-2">
              <Select value={dashboardMonth.toString()} onValueChange={(v) => setDashboardMonth(Number(v))}>
                <SelectTrigger className="w-[140px] text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {monthNames.map((name, idx) => (
                    <SelectItem key={idx + 1} value={(idx + 1).toString()} className="text-sm">
                      {name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Select value={dashboardYear.toString()} onValueChange={(v) => setDashboardYear(Number(v))}>
                <SelectTrigger className="w-[100px] text-sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="2024" className="text-sm">
                    2024
                  </SelectItem>
                  <SelectItem value="2025" className="text-sm">
                    2025
                  </SelectItem>
                  <SelectItem value="2026" className="text-sm">
                    2026
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {monthlyStats ? (
            <Tabs defaultValue="comissao" className="w-full">
              <TabsList className="grid grid-cols-2 mb-6">
                <TabsTrigger value="comissao" className="text-xs sm:text-sm">
                  Comissão Afiliados
                </TabsTrigger>
                <TabsTrigger value="vendas-app" className="text-xs sm:text-sm">
                  Vendas App Afilia
                </TabsTrigger>
              </TabsList>

{/* Aba Comissão Afiliados */}
              <TabsContent value="comissao" className="space-y-6">
                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                  {/* Faturamento Total */}
                  <div className="rounded-lg bg-background/80 border border-border/50 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Faturamento Total</p>
                    <p className="text-2xl font-bold text-yellow-500 mt-1">
                      R$ {monthlyStats.faturamentoTotal.toFixed(2)}
                    </p>
                    <p className="text-xs text-muted-foreground">bruto das vendas</p>
                  </div>

{/* Comissão Afiliados */}
                  <div className="rounded-lg bg-background/80 border border-border/50 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Comissão Afiliados</p>
                    <p className="text-2xl font-bold text-blue-500 mt-1">
                      R$ {monthlyStats.comissaoAfiliado.toFixed(2)}
                    </p>
                    <p className="text-xs text-muted-foreground">distribuído p/ afiliados</p>
                  </div>

{/* Comissão Afilia360 */}
                  <div className="rounded-lg bg-background/80 border border-border/50 p-4 text-center">
                    <DollarSign className="h-5 w-5 text-green-500 mx-auto mb-1" />
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Comissão Afilia360</p>
                    <p className="text-2xl font-bold text-green-500 mt-1">
                      R$ {monthlyStats.comissaoAfilia360.toFixed(2)}
                    </p>
                    <p className="text-xs text-muted-foreground">nosso lucro</p>
                  </div>

{/* Qtd Venda Principal */}
                  <div className="rounded-lg bg-background/80 border border-border/50 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Vendas Principais</p>
                    <p className="text-3xl font-bold text-primary mt-1">{monthlyStats.qtdVendaPrincipal}</p>
                    <p className="text-xs text-muted-foreground">produtos principais</p>
                  </div>

{/* Qtd Orderbump */}
                  <div className="rounded-lg bg-background/80 border border-border/50 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Orderbumps</p>
                    <p className="text-3xl font-bold text-orange-500 mt-1">{monthlyStats.qtdOrderbump}</p>
                    <p className="text-xs text-muted-foreground">vendas adicionais</p>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="vendas-app" className="space-y-6">
                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                  {/* Vendas Basic */}
                  <div className="rounded-lg bg-background/80 border border-blue-500/30 p-4 text-center">
                    <div className="inline-flex items-center gap-1 bg-blue-500/10 text-blue-500 px-2 py-0.5 rounded text-xs font-medium mb-2">
                      BASIC
                    </div>
                    <p className="text-3xl font-bold text-blue-500">{monthlyStats.vendasBasic}</p>
                    <p className="text-xs text-muted-foreground">vendas (R$17)</p>
                    <p className="text-lg font-semibold text-blue-400 mt-1">
                      R$ {monthlyStats.faturamentoBasic.toFixed(2)}
                    </p>
                  </div>

{/* Vendas Pro */}
                  <div className="rounded-lg bg-background/80 border border-purple-500/30 p-4 text-center">
                    <div className="inline-flex items-center gap-1 bg-purple-500/10 text-purple-500 px-2 py-0.5 rounded text-xs font-medium mb-2">
                      PRO
                    </div>
                    <p className="text-3xl font-bold text-purple-500">{monthlyStats.vendasPro}</p>
                    <p className="text-xs text-muted-foreground">vendas (R$97)</p>
                    <p className="text-lg font-semibold text-purple-400 mt-1">
                      R$ {monthlyStats.faturamentoPro.toFixed(2)}
                    </p>
                  </div>

{/* Faturamento App */}
                  <div className="rounded-lg bg-background/80 border border-primary/30 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide mb-2">Faturamento App</p>
                    <p className="text-2xl font-bold text-primary">R$ {monthlyStats.faturamentoAppTotal.toFixed(2)}</p>
                    <p className="text-xs text-muted-foreground">vendas da plataforma</p>
                  </div>

{/* Comissão Afilia360 */}
                  <div className="rounded-lg bg-background/80 border border-green-500/30 p-4 text-center">
                    <p className="text-xs text-muted-foreground uppercase tracking-wide mb-2">Comissão Afilia360</p>
                    <p className="text-2xl font-bold text-green-500">R$ {monthlyStats.comissaoAfilia360.toFixed(2)}</p>
                    <p className="text-xs text-muted-foreground">comissão dos afiliados</p>
                  </div>

{/* Lucro Total */}
                  <div className="rounded-lg bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/50 p-4 text-center">
                    <DollarSign className="h-5 w-5 text-green-500 mx-auto mb-1" />
                    <p className="text-xs text-muted-foreground uppercase tracking-wide">Lucro Total</p>
                    <p className="text-2xl font-bold text-green-500 mt-1">
                      R$ {(monthlyStats.faturamentoAppTotal + monthlyStats.comissaoAfilia360).toFixed(2)}
                    </p>
                    <p className="text-xs text-muted-foreground">app + comissões</p>
                  </div>
                </div>

{/* Resumo do Lucro */}
                <div className="rounded-lg bg-secondary/30 p-4">
                  <p className="text-sm font-medium mb-3 text-green-500">
                    Composição do Lucro - {monthNames[monthlyStats.currentMonth - 1]}/{monthlyStats.currentYear}
                  </p>
                  <div className="grid grid-cols-3 gap-4 text-center">
                    <div>
                      <p className="text-xs text-muted-foreground">Vendas App</p>
                      <p className="text-lg font-bold">R$ {monthlyStats.faturamentoAppTotal.toFixed(2)}</p>
                    </div>
                    <div className="flex items-center justify-center">
                      <span className="text-2xl text-muted-foreground">+</span>
                    </div>
                    <div>
                      <p className="text-xs text-muted-foreground">Comissões</p>
                      <p className="text-lg font-bold">R$ {monthlyStats.comissaoAfilia360.toFixed(2)}</p>
                    </div>
                  </div>
                  <div className="border-t border-green-500/30 mt-3 pt-3 text-center">
                    <p className="text-xs text-muted-foreground">Total Afilia360</p>
                    <p className="text-2xl font-bold text-green-500">
                      R$ {(monthlyStats.faturamentoAppTotal + monthlyStats.comissaoAfilia360).toFixed(2)}
                    </p>
                  </div>
                </div>

{/* Distribuição por plano */}
                <div className="rounded-lg bg-secondary/30 p-4">
                  <p className="text-sm font-medium mb-3">Distribuição por Plano</p>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Basic (R$17)</span>
                      <div className="flex items-center gap-2">
                        <div className="w-32 h-2 bg-secondary rounded-full overflow-hidden">
                          <div
                            className="h-full bg-blue-500 rounded-full"
                            style={{
                              width: `${
                                monthlyStats.vendasBasic + monthlyStats.vendasPro > 0
                                  ? (monthlyStats.vendasBasic / (monthlyStats.vendasBasic + monthlyStats.vendasPro)) *
                                    100
                                  : 0
                              }%`,
                            }}
                          />
                        </div>
                        <span className="text-sm font-medium w-12 text-right">
                          {monthlyStats.vendasBasic + monthlyStats.vendasPro > 0
                            ? (
                                (monthlyStats.vendasBasic / (monthlyStats.vendasBasic + monthlyStats.vendasPro)) *
                                100
                              ).toFixed(0)
                            : 0}
                          %
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">Pro (R$97)</span>
                      <div className="flex items-center gap-2">
                        <div className="w-32 h-2 bg-secondary rounded-full overflow-hidden">
                          <div
                            className="h-full bg-purple-500 rounded-full"
                            style={{
                              width: `${
                                monthlyStats.vendasBasic + monthlyStats.vendasPro > 0
                                  ? (monthlyStats.vendasPro / (monthlyStats.vendasBasic + monthlyStats.vendasPro)) * 100
                                  : 0
                              }%`,
                            }}
                          />
                        </div>
                        <span className="text-sm font-medium w-12 text-right">
                          {monthlyStats.vendasBasic + monthlyStats.vendasPro > 0
                            ? (
                                (monthlyStats.vendasPro / (monthlyStats.vendasBasic + monthlyStats.vendasPro)) *
                                100
                              ).toFixed(0)
                            : 0}
                          %
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </TabsContent>

{/* Recorde - aparece em ambas as abas */}
              <div className="flex items-center justify-between pt-4 border-t border-border/50 mt-6">
                <div>
                  {monthlyStats.isRecord ? (
                    <div className="flex items-center gap-3">
                      <div className="flex items-center justify-center w-12 h-12 rounded-full bg-yellow-500/10 border border-yellow-500/30">
                        <Trophy className="h-6 w-6 text-yellow-500" />
                      </div>
                      <div>
                        <p className="font-semibold text-yellow-600">NOVO RECORDE!</p>
                        <p className="text-sm text-muted-foreground">
                          Recorde anterior: {monthlyStats.previousRecord} vendas em {monthlyStats.previousRecordMonth}
                        </p>
                      </div>
                    </div>
                  ) : monthlyStats.previousRecord > 0 ? (
                    <div>
                      <p className="text-sm text-muted-foreground">
                        Recorde atual: <span className="font-semibold">{monthlyStats.previousRecord} vendas</span> em{" "}
                        {monthlyStats.previousRecordMonth}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Faltam{" "}
                        <span className="font-semibold text-primary">
                          {monthlyStats.previousRecord - monthlyStats.totalSales + 1}
                        </span>{" "}
                        vendas para bater o recorde
                      </p>
                    </div>
                  ) : (
                    <p className="text-sm text-muted-foreground">Primeiro mês de registro</p>
                  )}
                </div>

<Button
                  variant="outline"
                  size="sm"
                  onClick={() => loadMonthlyStats(dashboardMonth, dashboardYear)}
                  className="bg-transparent"
                >
                  <RefreshCw className="h-4 w-4 mr-2" />
                  Atualizar
                </Button>
              </div>
            </Tabs>
          ) : (
            <div className="flex items-center justify-center h-32">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          )}
        </CardContent>
      </Card>

{/* Webhook URL */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2">
            <Link2 className="h-5 w-5" />
            Webhook URL
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground">
            Configure esta URL no painel da Celetus para receber as vendas automaticamente em tempo real. Vá em{" "}
            <strong>Celetus → Configurações → Webhooks</strong> e adicione esta URL.
          </p>

<div className="flex gap-2">
            <Input value={webhookUrl} readOnly className="font-mono text-sm bg-background" />
            <Button onClick={copyWebhookUrl} variant="outline">
              {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
              <span className="ml-2 hidden sm:inline">{copied ? "Copiado!" : "Copiar"}</span>
            </Button>
          </div>

<div className="text-xs text-muted-foreground space-y-1">
            <p>
              • Método: <code className="bg-muted px-1 rounded">POST</code>
            </p>
            <p>• As vendas serão salvas automaticamente quando realizadas na Celetus</p>
          </div>
        </CardContent>
      </Card>

{/* Card de Configuração */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2">
            <Zap className="h-5 w-5" />
            API Key do Produtor
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-sm text-muted-foreground">
            Insira sua API Key de produtor da Celetus para sincronizar as vendas dos seus afiliados. Você pode encontrar
            sua API Key no painel da Celetus em Configurações > API.
          </p>

<div className="flex gap-2">
            <div className="relative flex-1">
              <Input
                type={savedKey ? "password" : "text"} // Use password if key is saved, text otherwise
                placeholder={savedKey ? "••••••••••••••••" : "Cole sua API Key aqui"}
                value={apiKey}
                onChange={(e) => setApiKey(e.target.value)}
                className="pr-10 text-sm"
              />
              <button
                type="button"
                onClick={() => setSavedKey(!savedKey)} // Toggle savedKey to show/hide
                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
              >
                {savedKey ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
              </button>
            </div>
            <Button onClick={saveApiKey} disabled={loading || !apiKey.trim()} className="hidden sm:inline-flex">
              {loading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Save className="h-4 w-4 mr-2" />}
              Salvar
            </Button>
            <Button onClick={saveApiKey} disabled={loading || !apiKey.trim()} size="icon" className="sm:hidden">
              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
            </Button>
          </div>

{error && <p className="text-sm text-red-500">{error}</p>}

{savedKey && (
            <p className="text-xs text-muted-foreground">
              API Key configurada. Clique no ícone de olho para exibir/ocultar.
            </p>
          )}
        </CardContent>
      </Card>

{/* Card de Teste */}
      {savedKey && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2">
              <RefreshCw className="h-5 w-5" />
              Sincronizar Vendas
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-muted-foreground">
              Clique para buscar as vendas da Celetus. As vendas serão exibidas na tabela abaixo.
            </p>

<Button onClick={testSync} disabled={syncing} variant="outline" className="w-full bg-transparent">
              {syncing ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
                  Sincronizando...
                </>
              ) : (
                <>
                  <RefreshCw className="h-4 w-4 mr-2" />
                  Sincronizar Agora
                </>
              )}
            </Button>

{syncResult && (
              <div className="mt-4 space-y-2">
                <h4 className="font-medium text-sm">Resposta da API (Debug):</h4>
                <pre className="bg-secondary/50 p-4 rounded-lg text-xs overflow-auto max-h-48 whitespace-pre-wrap">
                  {JSON.stringify(syncResult, null, 2)}
                </pre>
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* Instruções */}
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2">
            <Info className="h-5 w-5" />
            Como funciona a integração
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
            <li>Configure sua API Key de produtor da Celetus acima</li>
            <li>Configure o Webhook URL na Celetus para receber vendas em tempo real</li>
            <li>As vendas dos afiliados serão contabilizadas automaticamente no Dashboard</li>
            <li>O ranking de afiliados continua sendo alimentado manualmente</li>
          </ol>
        </CardContent>
      </Card>
    </div>
  )
}

// Helper para obter semana do ano
declare global {
  interface Date {
    getWeek(): number
  }
}

Date.prototype.getWeek = function () {
  const d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()))
  const dayNum = d.getUTCDay() || 7
  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
}
[V0_FILE]typescript:file="app/api/admin/reset-password/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import bcrypt from "bcryptjs"

export async function POST(request: Request) {
  try {
    const { affiliateId, newPassword } = await request.json()

if (!affiliateId) {
      return NextResponse.json({ error: "ID do usuário é obrigatório" }, { status: 400 })
    }

const supabase = await createClient()

// Senha padrão ou nova senha fornecida
    const password = newPassword || "123456"

// Hash da senha
    const hashedPassword = await bcrypt.hash(password, 10)

// Atualizar senha do usuário
    const { error: updateError } = await supabase
      .from("affiliates")
      .update({ password: hashedPassword })
      .eq("id", affiliateId)

if (updateError) {
      console.error("Erro ao resetar senha:", updateError)
      return NextResponse.json({ error: "Erro ao resetar senha" }, { status: 500 })
    }

return NextResponse.json({
      success: true,
      message: `Senha alterada para: ${password}`,
    })
  } catch (error) {
    console.error("Erro ao resetar senha:", error)
    return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/business-metrics/charts/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  try {
    const supabase = await createClient()
    const { searchParams } = new URL(request.url)
    const months = Number.parseInt(searchParams.get("months") || "6")

// Buscar métricas mensais dos últimos N meses
    const { data: metricsData, error: metricsError } = await supabase
      .from("monthly_metrics")
      .select("*")
      .order("month", { ascending: true })
      .limit(months)

if (metricsError) throw metricsError

// Buscar distribuição de custos do mês atual
    const currentMonth = new Date().toISOString().slice(0, 7) // formato: 2025-12
    const { data: costsData, error: costsError } = await supabase
      .from("monthly_costs")
      .select("category, amount")
      .eq("month", currentMonth)

if (costsError) throw costsError

// Agregar custos por categoria
    const costsByCategory = costsData?.reduce((acc: any, cost) => {
      if (!acc[cost.category]) {
        acc[cost.category] = 0
      }
      acc[cost.category] += Number.parseFloat(cost.amount)
      return acc
    }, {})

return NextResponse.json({
      monthlyMetrics: metricsData || [],
      costsByCategory: costsByCategory || {},
    })
  } catch (error: any) {
    console.error("Error fetching chart data:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/business-metrics/costs/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  const supabase = await createClient()
  const body = await request.json()

const { data, error } = await supabase.from("monthly_costs").insert([body]).select().single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

// Atualizar total_costs e profit na monthly_metrics
  await updateMonthlyMetrics(supabase, body.month)

return NextResponse.json(data)
}

export async function PUT(request: Request) {
  const supabase = await createClient()
  const body = await request.json()
  const { id, ...updates } = body

const { data, error } = await supabase.from("monthly_costs").update(updates).eq("id", id).select().single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

// Atualizar total_costs e profit na monthly_metrics
  await updateMonthlyMetrics(supabase, data.month)

return NextResponse.json(data)
}

export async function DELETE(request: Request) {
  const supabase = await createClient()
  const { searchParams } = new URL(request.url)
  const id = searchParams.get("id")
  const month = searchParams.get("month")

if (!id || !month) {
    return NextResponse.json({ error: "ID e mês são obrigatórios" }, { status: 400 })
  }

const { error } = await supabase.from("monthly_costs").delete().eq("id", id)

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

// Atualizar total_costs e profit na monthly_metrics
  await updateMonthlyMetrics(supabase, month)

return NextResponse.json({ success: true })
}

async function updateMonthlyMetrics(supabase: any, month: string) {
  // Calcular total de custos
  const { data: costs } = await supabase.from("monthly_costs").select("amount").eq("month", month)

const totalCosts = costs?.reduce((sum: number, cost: any) => sum + Number.parseFloat(cost.amount), 0) || 0

// Buscar receitas
  const { data: metrics } = await supabase
    .from("monthly_metrics")
    .select("revenue_app, revenue_commissions")
    .eq("month", month)
    .single()

if (metrics) {
    const profit = Number.parseFloat(metrics.revenue_app) + Number.parseFloat(metrics.revenue_commissions) - totalCosts

await supabase.from("monthly_metrics").update({ total_costs: totalCosts, profit }).eq("month", month)
  }
}
[V0_FILE]typescript:file="app/api/business-metrics/ltv/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const month = searchParams.get("month") || "2025-12"

const supabase = await createClient()

// Buscar todos os afiliados com dados de ativação
  const { data: affiliates, error: affiliatesError } = await supabase
    .from("affiliates")
    .select("id, name, email, is_active, total_commissions, plan_purchased, first_sale_date")

if (affiliatesError) {
    return NextResponse.json({ error: affiliatesError.message }, { status: 500 })
  }

// Calcular segmentação
  const totalAffiliates = affiliates?.length || 0
  const activeAffiliates = affiliates?.filter((a) => a.is_active).length || 0
  const inactiveAffiliates = totalAffiliates - activeAffiliates

// Segmentar por plano e atividade
  const basicInactive = affiliates?.filter((a) => a.plan_purchased === "basic" && !a.is_active).length || 0
  const basicActive = affiliates?.filter((a) => a.plan_purchased === "basic" && a.is_active).length || 0
  const proInactive = affiliates?.filter((a) => a.plan_purchased === "pro" && !a.is_active).length || 0
  const proActive = affiliates?.filter((a) => a.plan_purchased === "pro" && a.is_active).length || 0

// Calcular LTV médio por segmento
  const activeAffiliatesData = affiliates?.filter((a) => a.is_active) || []
  const avgCommissionPerActive =
    activeAffiliatesData.length > 0
      ? activeAffiliatesData.reduce((sum, a) => sum + Number(a.total_commissions || 0), 0) / activeAffiliatesData.length
      : 0

const basicActiveLTV = 17 + avgCommissionPerActive
  const proActiveLTV = 97 + avgCommissionPerActive

// Calcular LTV médio ponderado
  const ltvWeighted =
    (basicInactive * 17 + basicActive * basicActiveLTV + proInactive * 97 + proActive * proActiveLTV) /
    (totalAffiliates || 1)

// Taxa de ativação
  const activationRate = totalAffiliates > 0 ? (activeAffiliates / totalAffiliates) * 100 : 0

// Buscar métricas do mês para calcular CAC
  const { data: metrics } = await supabase.from("monthly_metrics").select("*").eq("month", month).single()

// Buscar custos de marketing
  const { data: marketingCosts } = await supabase
    .from("monthly_costs")
    .select("amount")
    .eq("month", month)
    .eq("category", "marketing")

const totalMarketingCost = marketingCosts?.reduce((sum, cost) => sum + Number(cost.amount), 0) || 0

// CAC = Custo de Marketing / Novos Clientes
  // Para simplificar, vamos usar sales_count como proxy
  const newCustomers = metrics?.basic_sales + metrics?.pro_sales || 1
  const cac = totalMarketingCost / newCustomers

// ROI = (LTV - CAC) / CAC * 100
  const roi = cac > 0 ? ((ltvWeighted - cac) / cac) * 100 : 0

// Payback em meses (assumindo receita mensal média)
  const avgMonthlyRevenue = ltvWeighted / 6 // Assumindo 6 meses de vida média
  const paybackMonths = cac > 0 ? cac / avgMonthlyRevenue : 0

return NextResponse.json({
    overview: {
      totalAffiliates,
      activeAffiliates,
      inactiveAffiliates,
      activationRate: activationRate.toFixed(1),
      avgLTV: ltvWeighted.toFixed(2),
      cac: cac.toFixed(2),
      roi: roi.toFixed(1),
      paybackMonths: paybackMonths.toFixed(1),
    },
    segmentation: [
      {
        segment: "Basic Inativo",
        count: basicInactive,
        percentage: totalAffiliates > 0 ? ((basicInactive / totalAffiliates) * 100).toFixed(1) : 0,
        ltv: 17,
        roi: cac > 0 ? (((17 - cac) / cac) * 100).toFixed(1) : 0,
      },
      {
        segment: "Basic Ativo",
        count: basicActive,
        percentage: totalAffiliates > 0 ? ((basicActive / totalAffiliates) * 100).toFixed(1) : 0,
        ltv: basicActiveLTV.toFixed(2),
        roi: cac > 0 ? (((basicActiveLTV - cac) / cac) * 100).toFixed(1) : 0,
      },
      {
        segment: "Pro Inativo",
        count: proInactive,
        percentage: totalAffiliates > 0 ? ((proInactive / totalAffiliates) * 100).toFixed(1) : 0,
        ltv: 97,
        roi: cac > 0 ? (((97 - cac) / cac) * 100).toFixed(1) : 0,
      },
      {
        segment: "Pro Ativo",
        count: proActive,
        percentage: totalAffiliates > 0 ? ((proActive / totalAffiliates) * 100).toFixed(1) : 0,
        ltv: proActiveLTV.toFixed(2),
        roi: cac > 0 ? (((proActiveLTV - cac) / cac) * 100).toFixed(1) : 0,
      },
    ],
  })
}
[V0_FILE]typescript:file="app/api/business-metrics/populate-ltv/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

// Endpoint para popular customer_ltv de todos os afiliados baseado no histórico
export async function POST(req: Request) {
  try {
    const { month } = await req.json()

if (!month) {
      return NextResponse.json({ error: "Mês é obrigatório (formato: 2025-12)" }, { status: 400 })
    }

const supabase = await createClient()

// Buscar todos os afiliados
    const { data: affiliates, error: affiliatesError } = await supabase
      .from("affiliates")
      .select("id, email, nome_celetus, plan_purchased, total_commissions")

if (affiliatesError || !affiliates) {
      return NextResponse.json({ error: "Erro ao buscar afiliados" }, { status: 500 })
    }

let processed = 0
    const [year, monthNum] = month.split("-").map(Number)
    const startDate = `${month}-01`
    const endDate = `${year}-${String(monthNum + 1).padStart(2, "0")}-01`

for (const affiliate of affiliates) {
      let planRevenue = 0
      let upgradeRevenue = 0
      let commissionRevenue = 0

// Buscar vendas do afiliado no mês (compras de planos)
      const { data: purchases } = await supabase
        .from("celetus_sales")
        .select("raw_data, sale_date")
        .eq("customer_email", affiliate.email)
        .gte("sale_date", startDate)
        .lt("sale_date", endDate)

if (purchases) {
        for (const purchase of purchases) {
          const items = purchase.raw_data?.items || []
          const hasBasic = items.some((item: any) => item.code === "FYGCVIHI")
          const hasPro = items.some((item: any) => item.code === "ZOXLWXI9")

if (hasBasic) planRevenue += 17
          if (hasPro) {
            if (affiliate.plan_purchased === "basic") {
              upgradeRevenue += 80
            } else {
              planRevenue += 97
            }
          }
        }
      }

// Buscar comissões do afiliado no mês
      const { data: sales } = await supabase
        .from("celetus_sales")
        .select("raw_data")
        .gte("sale_date", startDate)
        .lt("sale_date", endDate)

if (sales) {
        for (const sale of sales) {
          const affiliated = sale.raw_data?.commission?.affiliated || []

for (const aff of affiliated) {
            if (aff.type === "Principal" && aff.name === affiliate.nome_celetus) {
              commissionRevenue += Number.parseFloat(aff.value || 0)
            }
          }
        }
      }

// Calcular LTV acumulado até este mês
      const { data: previousLtv } = await supabase
        .from("customer_ltv")
        .select("total_ltv")
        .eq("affiliate_id", affiliate.id)
        .lt("month", month)
        .order("month", { ascending: false })
        .limit(1)
        .single()

const previousTotal = Number.parseFloat(previousLtv?.total_ltv || 0)
      const totalLtv = previousTotal + planRevenue + upgradeRevenue + commissionRevenue

// Inserir ou atualizar customer_ltv
      const { error: ltvError } = await supabase.from("customer_ltv").upsert(
        {
          affiliate_id: affiliate.id,
          month,
          plan_revenue: planRevenue.toFixed(2),
          upgrade_revenue: upgradeRevenue.toFixed(2),
          commission_revenue: commissionRevenue.toFixed(2),
          total_ltv: totalLtv.toFixed(2),
        },
        {
          onConflict: "affiliate_id,month",
        },
      )

if (!ltvError) {
        processed++
      }
    }

return NextResponse.json({
      success: true,
      message: `LTV populado para ${processed} afiliados no mês ${month}`,
      processed,
      total: affiliates.length,
    })
  } catch (error) {
    console.error("Erro ao popular LTV:", error)
    return NextResponse.json({ error: "Erro ao processar" }, { status: 500 })
  }
}

export async function GET() {
  return NextResponse.json({
    message: "Endpoint para popular customer_ltv de um mês específico",
    method: "POST",
    body: {
      month: "2025-12 (formato: YYYY-MM)",
    },
    example: {
      month: "2025-12",
    },
  })
}
[V0_FILE]typescript:file="app/api/business-metrics/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const month = searchParams.get("month") || "2025-12"

const supabase = await createClient()

const { data: metrics, error: metricsError } = await supabase
    .from("monthly_metrics")
    .select("*")
    .eq("month", month)
    .maybeSingle()

if (metricsError) {
    return NextResponse.json({ error: metricsError.message }, { status: 500 })
  }

// Buscar custos do mês
  const { data: costs, error: costsError } = await supabase
    .from("monthly_costs")
    .select("*")
    .eq("month", month)
    .order("category", { ascending: true })

if (costsError) {
    return NextResponse.json({ error: costsError.message }, { status: 500 })
  }

// Buscar métricas dos últimos 6 meses para gráfico
  const currentDate = new Date(month + "-01")
  const sixMonthsAgo = new Date(currentDate)
  sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 5)

const { data: historicalMetrics, error: historicalError } = await supabase
    .from("monthly_metrics")
    .select("*")
    .gte("month", sixMonthsAgo.toISOString().slice(0, 7))
    .lte("month", month)
    .order("month", { ascending: true })

return NextResponse.json({
    metrics: metrics || {
      month,
      revenue_app: 0,
      revenue_commissions: 0,
      total_costs: 0,
      profit: 0,
      sales_count: 0,
      basic_sales: 0,
      pro_sales: 0,
    },
    costs: costs || [],
    historicalMetrics: historicalMetrics || [],
  })
}
[V0_FILE]typescript:file="app/api/business-metrics/sync-affiliates/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function POST() {
  const supabase = await createClient()

try {
    // 1. Buscar todas as vendas do webhook
    const { data: sales, error: salesError } = await supabase.from("celetus_sales").select("*")

if (salesError) throw salesError

console.log(`[v0] Processando ${sales.length} vendas do webhook`)

// 2. Processar vendas do AFILIA360 (quem comprou o app) - VINCULAR POR EMAIL
    for (const sale of sales) {
      const items = sale.raw_data?.items || []
      const customer = sale.raw_data?.customer
      const customerEmail = customer?.email
      const customerName = customer?.name

if (!customerEmail) continue

// Verificar se tem AFILIA360 nos items
      const hasBasic = items.some((item: any) => item.code === "FYGCVIHI")
      const hasPro = items.some((item: any) => item.code === "ZOXLWXI9")

if (hasBasic || hasPro) {
        const planPurchased = hasPro ? "pro" : "basic"

console.log(`[v0] Cliente ${customerName} (${customerEmail}) comprou ${planPurchased}`)

// Buscar ou criar afiliado por email
        const { data: existingAffiliate } = await supabase
          .from("affiliates")
          .select("*")
          .eq("email", customerEmail)
          .maybeSingle()

if (existingAffiliate) {
          // Atualizar afiliado existente
          await supabase
            .from("affiliates")
            .update({
              plan_purchased: planPurchased,
              updated_at: new Date().toISOString(),
            })
            .eq("id", existingAffiliate.id)

console.log(`[v0] Afiliado ${existingAffiliate.id} atualizado com plano ${planPurchased}`)
        }
      }
    }

for (const sale of sales) {
      const affiliated = sale.raw_data?.commission?.affiliated

if (!Array.isArray(affiliated) || affiliated.length === 0) continue

for (const aff of affiliated) {
        const affName = aff.name
        const commissionValue = Number.parseFloat(aff.commissionValue || "0")

if (!affName || commissionValue <= 0) continue

console.log(`[v0] Processando comissão de ${affName}: R$ ${commissionValue}`)

const { data: affiliate } = await supabase
          .from("affiliates")
          .select("*")
          .eq("nome_celetus", affName.trim())
          .maybeSingle()

if (affiliate) {
          // Atualizar comissões e marcar como ativo
          const newTotalCommissions = (affiliate.total_commissions || 0) + commissionValue
          const firstSaleDate = affiliate.first_sale_date || sale.sale_date

await supabase
            .from("affiliates")
            .update({
              is_active: true,
              total_commissions: newTotalCommissions,
              first_sale_date: firstSaleDate,
              updated_at: new Date().toISOString(),
            })
            .eq("id", affiliate.id)

console.log(`[v0] Afiliado ${affiliate.id} atualizado: total_commissions=${newTotalCommissions}`)
        } else {
          console.log(`[v0] Afiliado "${affName}" não encontrado na tabela - não criamos sem email`)
        }
      }
    }

// 4. Calcular estatísticas finais
    const { data: stats } = await supabase.from("affiliates").select("plan_purchased, is_active, total_commissions")

const totalAfiliados = stats?.length || 0
    const comBasic = stats?.filter((a) => a.plan_purchased === "basic").length || 0
    const comPro = stats?.filter((a) => a.plan_purchased === "pro").length || 0
    const ativos = stats?.filter((a) => a.is_active).length || 0
    const totalComissoes = stats?.reduce((sum, a) => sum + (a.total_commissions || 0), 0) || 0

return NextResponse.json({
      success: true,
      message: "Sincronização concluída com sucesso",
      stats: {
        total_afiliados: totalAfiliados,
        com_basic: comBasic,
        com_pro: comPro,
        ativos: ativos,
        total_comissoes: totalComissoes.toFixed(2),
      },
    })
  } catch (error: any) {
    console.error("[v0] Erro na sincronização:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/celetus/config/route.ts"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

// GET - Buscar configuração atual
export async function GET() {
  try {
    const supabase = await createClient()

const { data, error } = await supabase
      .from("celetus_config")
      .select("id, last_sync, is_active, created_at")
      .maybeSingle()

if (error) {
      throw error
    }

return NextResponse.json({ config: data })
  } catch (error) {
    console.error("[v0] Config GET error:", error)
    return NextResponse.json({ error: "Erro ao buscar configuração" }, { status: 500 })
  }
}

// POST - Salvar API Key
export async function POST(req: Request) {
  try {
    const { apiKey } = await req.json()

if (!apiKey) {
      return NextResponse.json({ error: "API Key é obrigatória" }, { status: 400 })
    }

const supabase = await createClient()

const { data: existing } = await supabase.from("celetus_config").select("id").maybeSingle()

if (existing) {
      // Atualizar
      const { error } = await supabase
        .from("celetus_config")
        .update({ api_key: apiKey, is_active: true })
        .eq("id", existing.id)

if (error) throw error
    } else {
      // Inserir
      const { error } = await supabase.from("celetus_config").insert({ api_key: apiKey, is_active: true })

if (error) throw error
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("[v0] Config POST error:", error)
    return NextResponse.json({ error: "Erro ao salvar configuração" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/celetus/sales/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const supabase = await createClient()

const { data: sales, error } = await supabase
      .from("celetus_sales")
      .select("*")
      .order("sale_date", { ascending: false })
      .limit(100)

if (error) {
      console.error("Erro ao buscar vendas:", error)
      return NextResponse.json({ error: "Erro ao buscar vendas" }, { status: 500 })
    }

return NextResponse.json({ sales: sales || [] })
  } catch (error) {
    console.error("Erro:", error)
    return NextResponse.json({ error: "Erro interno" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/celetus/sync/route.ts"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function POST(req: Request) {
  try {
    const supabase = await createClient()

// Buscar API Key configurada
    const { data: config } = await supabase.from("celetus_config").select("*").eq("is_active", true).single()

if (!config?.api_key) {
      return NextResponse.json({ error: "API Key não configurada" }, { status: 400 })
    }

// Buscar vendas da Celetus
    const response = await fetch("https://api.celetus.com/api/sales?rowsPerPage=100&pageNumber=1", {
      headers: {
        "X-api-key": config.api_key,
        "Content-Type": "application/json",
      },
    })

if (!response.ok) {
      const errorText = await response.text()
      console.log("[v0] Celetus API error:", response.status, errorText)
      return NextResponse.json(
        { error: `Erro na API Celetus: ${response.status}`, details: errorText },
        { status: response.status },
      )
    }

const data = await response.json()
    console.log("[v0] Celetus raw response:", JSON.stringify(data, null, 2))

// Retornar dados brutos para análise
    return NextResponse.json({
      success: true,
      raw_response: data,
      message: "Dados recebidos da Celetus - verifique a estrutura no console",
    })
  } catch (error) {
    console.error("[v0] Sync error:", error)
    return NextResponse.json({ error: "Erro ao sincronizar", details: String(error) }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/celetus/webhook/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import { isTestSale, isAFILIA360Product } from "@/lib/products"

// Token de segurança da Celetus
const CELETUS_TOKEN = "EZC8J2034G9"

// Webhook para receber vendas da Celetus em tempo real
export async function POST(req: Request) {
  try {
    const authHeader = req.headers.get("authorization")
    const token = authHeader?.replace("Bearer ", "") || req.headers.get("x-celetus-token")

if (token !== CELETUS_TOKEN) {
      console.log("[v0] Token inválido recebido:", token)
      return NextResponse.json({ success: false, error: "Token inválido" }, { status: 401 })
    }

const body = await req.json()

console.log("[v0] Webhook Celetus recebido:", JSON.stringify(body, null, 2))

const items = body.items || []
    const firstItem = items[0] || {}
    const productCode = firstItem.code
    const productName = firstItem.name

if (isTestSale(productCode, productName)) {
      console.log(`[v0] ⚠️ Venda de TESTE ignorada: ${productCode} - ${productName}`)
      return NextResponse.json({
        success: true,
        message: "Venda de teste ignorada",
        test_sale: true,
      })
    }

const supabase = await createClient()

const commission = body.commission || {}
    const customer = body.customer || {}

const affiliated = commission.affiliated || []
    const affiliateName = affiliated.length > 0 ? affiliated[0].name : null

// Salvar os dados brutos para análise
    const saleData = {
      celetus_sale_id: body.id || body.order_id || `webhook_${Date.now()}`,
      seller_name: affiliateName || body.seller || null,
      seller_email: null,
      customer_name: customer.name || null,
      customer_email: customer.email || null,
      customer_phone: customer.phone || null,
      product_id: productCode || null,
      product_name: productName || null,
      total_value: Number.parseFloat(commission.userCommission || commission.totalPrice || 0),
      status: body.order_status || body.charge?.status || "approved",
      sale_date: body.approved_date || body.created_date || new Date().toISOString(),
      raw_data: body,
    }

console.log("[v0] ✅ Dados extraídos (venda válida):", {
      id: saleData.celetus_sale_id,
      afiliado: saleData.seller_name,
      produto: saleData.product_name,
      codigo: productCode,
      valor: saleData.total_value,
      cliente: saleData.customer_email,
      isAFILIA360: isAFILIA360Product(productCode),
    })

const { error } = await supabase.from("celetus_sales").upsert(saleData, {
      onConflict: "celetus_sale_id",
      ignoreDuplicates: false,
    })

if (error) {
      console.error("[v0] Erro ao salvar venda:", error)
      return NextResponse.json({ success: false, error: error.message }, { status: 500 })
    }

await processAffiliateLTV(supabase, body, saleData.sale_date)

console.log("[v0] Venda salva com sucesso:", saleData.celetus_sale_id)

return NextResponse.json({
      success: true,
      message: "Venda recebida e salva com sucesso",
      sale_id: saleData.celetus_sale_id,
    })
  } catch (error) {
    console.error("[v0] Erro no webhook:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Erro ao processar webhook",
      },
      { status: 500 },
    )
  }
}

async function processAffiliateLTV(supabase: any, webhookData: any, saleDate: string) {
  try {
    const items = webhookData.items || []
    const commission = webhookData.commission || {}
    const affiliated = commission.affiliated || []
    const totalPrice = Number.parseFloat(commission.totalPrice || 0)

// Identificar se é venda do AFILIA360
    const isAfiliaBasic = items.some((item: any) => item.code === "FYGCVIHI")
    const isAfiliaPro = items.some((item: any) => item.code === "ZOXLWXI9")
    const isAfiliaSale = isAfiliaBasic || isAfiliaPro

if (isAfiliaSale) {
      const customerEmail = webhookData.customer?.email || webhookData.cliente?.email

if (customerEmail) {
        // Buscar se o comprador é um afiliado cadastrado
        const { data: affiliate } = await supabase
          .from("affiliates")
          .select("id, plan_purchased, nome_celetus")
          .eq("email", customerEmail)
          .maybeSingle()

if (affiliate) {
          const planPurchased = isAfiliaPro ? "pro" : "basic"
          const isUpgrade = affiliate.plan_purchased === "basic" && isAfiliaPro

// Atualizar plano do afiliado
          await supabase
            .from("affiliates")
            .update({
              plan_purchased: planPurchased,
              upgraded_at: isUpgrade ? new Date().toISOString() : null,
            })
            .eq("id", affiliate.id)

// Registrar no customer_ltv
          const month = saleDate.substring(0, 7) // formato: 2025-12
          const planRevenue = isUpgrade ? 80 : isAfiliaPro ? 97 : 17

await supabase.from("customer_ltv").upsert(
            {
              affiliate_id: affiliate.id,
              month,
              plan_revenue: planRevenue,
              upgrade_revenue: isUpgrade ? 80 : 0,
            },
            {
              onConflict: "affiliate_id,month",
            },
          )

console.log(
            `[v0] Afiliado ${affiliate.nome_celetus || customerEmail} comprou ${planPurchased}${isUpgrade ? " (upgrade)" : ""}`,
          )
        } else {
          console.log(`[v0] Comprador ${customerEmail} não é afiliado cadastrado`)
        }
      }
    }

if (Array.isArray(affiliated) && affiliated.length > 0) {
      for (const aff of affiliated) {
        const affiliateName = aff.name // Campo correto do webhook
        const commissionValue = Number.parseFloat(aff.commissionValue || 0) // Campo correto

if (!affiliateName || commissionValue <= 0) continue

// Normalizar nome para busca (remover espaços extras, maiúsculas)
        const normalizedName = affiliateName.trim()

// Buscar afiliado pelo nome da Celetus
        const { data: affiliate } = await supabase
          .from("affiliates")
          .select("id, is_active, first_sale_date, total_commissions, nome_celetus, email")
          .eq("nome_celetus", normalizedName)
          .maybeSingle()

if (affiliate) {
          const isFirstSale = !affiliate.is_active
          const newTotalCommissions = (Number.parseFloat(affiliate.total_commissions || 0) + commissionValue).toFixed(2)

// Atualizar status e comissões do afiliado
          await supabase
            .from("affiliates")
            .update({
              is_active: true,
              first_sale_date: isFirstSale ? saleDate : affiliate.first_sale_date,
              total_commissions: newTotalCommissions,
            })
            .eq("id", affiliate.id)

// Registrar comissão no customer_ltv
          const month = saleDate.substring(0, 7)

// Buscar LTV existente do mês
          const { data: existingLtv } = await supabase
            .from("customer_ltv")
            .select("commission_revenue")
            .eq("affiliate_id", affiliate.id)
            .eq("month", month)
            .maybeSingle()

const currentCommissions = Number.parseFloat(existingLtv?.commission_revenue || 0)
          const newCommissionRevenue = (currentCommissions + commissionValue).toFixed(2)

await supabase.from("customer_ltv").upsert(
            {
              affiliate_id: affiliate.id,
              month,
              commission_revenue: newCommissionRevenue,
            },
            {
              onConflict: "affiliate_id,month",
            },
          )

console.log(
            `[v0] Afiliado ${affiliate.nome_celetus} ${isFirstSale ? "ativado" : "atualizou comissões"}: +R$${commissionValue}`,
          )
        } else {
          console.log(`[v0] Afiliado "${normalizedName}" não encontrado na tabela affiliates`)
        }
      }
    }

// Atualizar métricas mensais
    await updateMonthlyMetrics(supabase, saleDate)
  } catch (error) {
    console.error("[v0] Erro ao processar LTV:", error)
  }
}

async function updateMonthlyMetrics(supabase: any, saleDate: string) {
  try {
    const month = saleDate.substring(0, 7)
    const [year, monthNum] = month.split("-").map(Number)

// Calcular receitas do mês baseado nas vendas
    const { data: salesRaw } = await supabase
      .from("celetus_sales")
      .select("raw_data, sale_date")
      .gte("sale_date", `${month}-01`)
      .lt("sale_date", `${year}-${String(monthNum + 1).padStart(2, "0")}-01`)

if (!salesRaw) return

const uniqueMap = new Map()
    for (const sale of salesRaw) {
      const email = sale.raw_data?.customer?.email
      const userCommission = sale.raw_data?.commission?.userCommission
      const firstItemCode = sale.raw_data?.items?.[0]?.code
      const saleMinute = new Date(sale.sale_date).toISOString().substring(0, 16)
      const key = `${email}_${saleMinute}_${userCommission}_${firstItemCode}`

if (!uniqueMap.has(key)) {
        uniqueMap.set(key, sale)
      }
    }
    const sales = Array.from(uniqueMap.values())

let revenueApp = 0
    let revenueCommissions = 0
    let basicSales = 0
    let proSales = 0

for (const sale of sales) {
      const items = sale.raw_data?.items || []
      const commission = sale.raw_data?.commission || {}
      const userCommission = Number.parseFloat(commission.userCommission || 0)
      const affiliated = commission.affiliated || []

const hasBasic = items.some((item: any) => item.code === "FYGCVIHI")
      const hasPro = items.some((item: any) => item.code === "ZOXLWXI9")
      const isAfiliaProduct = hasBasic || hasPro
      const hasAffiliate = Array.isArray(affiliated) && affiliated.length > 0

if (hasAffiliate) {
        revenueCommissions += userCommission
      } else if (isAfiliaProduct) {
        revenueApp += userCommission
        if (hasBasic) basicSales++
        if (hasPro) proSales++
      }
    }

// Buscar custos do mês
    const { data: costs } = await supabase.from("monthly_costs").select("amount").eq("month", month)

const totalCosts = costs?.reduce((sum: number, cost: any) => sum + Number.parseFloat(cost.amount || 0), 0) || 0
    const profit = revenueApp + revenueCommissions - totalCosts

// Atualizar métricas
    await supabase.from("monthly_metrics").upsert(
      {
        month,
        revenue_app: revenueApp.toFixed(2),
        revenue_commissions: revenueCommissions.toFixed(2),
        total_costs: totalCosts.toFixed(2),
        profit: profit.toFixed(2),
        sales_count: sales.length,
        basic_sales: basicSales,
        pro_sales: proSales,
      },
      {
        onConflict: "month",
      },
    )

console.log(`[v0] Métricas atualizadas para ${month}`)
  } catch (error) {
    console.error("[v0] Erro ao atualizar métricas:", error)
  }
}

// Permitir GET para verificar se o webhook está funcionando
export async function GET() {
  return NextResponse.json({
    status: "online",
    message: "Webhook Celetus ativo com rastreamento automático de LTV",
    endpoint: "/api/celetus/webhook",
    method: "POST",
    features: [
      "Rastreamento de vendas AFILIA360 (Basic e Pro)",
      "Detecção automática de upgrades",
      "Ativação de afiliados na primeira venda",
      "Cálculo automático de comissões",
      "Atualização de LTV por afiliado",
      "Métricas mensais em tempo real",
    ],
  })
}
[V0_FILE]typescript:file="app/api/dashboard/manual/route.ts"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"
import { subDays, startOfDay, endOfDay, eachDayOfInterval, format } from "date-fns"

export async function GET(request: NextRequest) {
  try {
    const supabase = await createClient()
    const { searchParams } = new URL(request.url)
    const period = searchParams.get("period") || "today"
    const startDateParam = searchParams.get("startDate")
    const endDateParam = searchParams.get("endDate")

let startDate: Date
    let endDate: Date = new Date()

// Calculate date range based on period
    switch (period) {
      case "today":
        startDate = startOfDay(new Date())
        endDate = endOfDay(new Date())
        break
      case "yesterday":
        startDate = startOfDay(subDays(new Date(), 1))
        endDate = endOfDay(subDays(new Date(), 1))
        break
      case "7days":
        startDate = startOfDay(subDays(new Date(), 6))
        endDate = endOfDay(new Date())
        break
      case "15days":
        startDate = startOfDay(subDays(new Date(), 14))
        endDate = endOfDay(new Date())
        break
      case "custom":
        if (!startDateParam || !endDateParam) {
          return NextResponse.json({ error: "Start and end dates required for custom period" }, { status: 400 })
        }
        startDate = startOfDay(new Date(startDateParam))
        endDate = endOfDay(new Date(endDateParam))
        break
      default:
        startDate = startOfDay(new Date())
        endDate = endOfDay(new Date())
    }

// Fetch manual metrics from database
    const { data: metrics, error } = await supabase
      .from("daily_metrics_manual")
      .select("*")
      .gte("date", format(startDate, "yyyy-MM-dd"))
      .lte("date", format(endDate, "yyyy-MM-dd"))
      .order("date", { ascending: true })

if (error) {
      console.error("[v0] Error fetching manual metrics:", error)
      throw error
    }

const totalMetrics = (metrics || []).reduce(
      (acc, day) => ({
        totalVendas:
          acc.totalVendas + (day.afilia_basic_qty || 0) + (day.afilia_pro_qty || 0) + (day.affiliate_qty || 0),
        receitaTotal:
          acc.receitaTotal +
          Number(day.afilia_basic_revenue || 0) +
          Number(day.afilia_pro_revenue || 0) +
          Number(day.affiliate_revenue || 0),
        receitaAfiliaBasic: acc.receitaAfiliaBasic + Number(day.afilia_basic_revenue || 0),
        receitaAfiliaPro: acc.receitaAfiliaPro + Number(day.afilia_pro_revenue || 0),
        receitaAfiliados: acc.receitaAfiliados + Number(day.affiliate_revenue || 0),
        vendasAfiliaBasic: acc.vendasAfiliaBasic + (day.afilia_basic_qty || 0),
        vendasAfiliaPro: acc.vendasAfiliaPro + (day.afilia_pro_qty || 0),
        vendasAfiliados: acc.vendasAfiliados + (day.affiliate_qty || 0),
        despesasTotal: acc.despesasTotal + Number(day.daily_expenses || 0),
      }),
      {
        totalVendas: 0,
        receitaTotal: 0,
        receitaAfiliaBasic: 0,
        receitaAfiliaPro: 0,
        receitaAfiliados: 0,
        vendasAfiliaBasic: 0,
        vendasAfiliaPro: 0,
        vendasAfiliados: 0,
        despesasTotal: 0,
      },
    )

const allDays = eachDayOfInterval({ start: startDate, end: endDate })
    const dailyData = allDays.map((day) => {
      const dayStr = format(day, "yyyy-MM-dd")
      const dayMetrics = metrics?.find((m) => m.date === dayStr)

const basicRevenue = Number(dayMetrics?.afilia_basic_revenue || 0)
      const proRevenue = Number(dayMetrics?.afilia_pro_revenue || 0)
      const affiliateRevenue = Number(dayMetrics?.affiliate_revenue || 0)
      const expenses = Number(dayMetrics?.daily_expenses || 0)
      const totalRevenue = basicRevenue + proRevenue + affiliateRevenue

return {
        date: dayStr,
        afiliaBasic: basicRevenue,
        afiliaPro: proRevenue,
        afiliados: affiliateRevenue,
        despesas: expenses,
        lucroLiquido: totalRevenue - expenses,
      }
    })

const lucroLiquido = totalMetrics.receitaTotal - totalMetrics.despesasTotal

return NextResponse.json({
      totalVendas: totalMetrics.totalVendas,
      receitaTotal: totalMetrics.receitaTotal,
      receitaAfiliaBasic: totalMetrics.receitaAfiliaBasic,
      receitaAfiliaPro: totalMetrics.receitaAfiliaPro,
      receitaAfiliados: totalMetrics.receitaAfiliados,
      vendasAfiliaBasic: totalMetrics.vendasAfiliaBasic,
      vendasAfiliaPro: totalMetrics.vendasAfiliaPro,
      vendasAfiliados: totalMetrics.vendasAfiliados,
      despesasTotal: totalMetrics.despesasTotal,
      lucroLiquido: lucroLiquido,
      dailyData,
      productBreakdown: [
        {
          name: "AFILIA360 BÁSICO",
          vendas: totalMetrics.vendasAfiliaBasic,
          receita: totalMetrics.receitaAfiliaBasic,
        },
        {
          name: "AFILIA360 PRO",
          vendas: totalMetrics.vendasAfiliaPro,
          receita: totalMetrics.receitaAfiliaPro,
        },
        {
          name: "Vendas de Afiliados",
          vendas: totalMetrics.vendasAfiliados,
          receita: totalMetrics.receitaAfiliados,
        },
      ].filter((p) => p.vendas > 0),
    })
  } catch (error) {
    console.error("[v0] Error in dashboard manual API:", error)
    return NextResponse.json({ error: "Failed to fetch dashboard data" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/login/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import bcrypt from "bcryptjs"

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

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

const supabase = await createClient()

const { data: affiliate, error: affiliateError } = await supabase
      .from("affiliates")
      .select("*")
      .eq("email", email)
      .maybeSingle()

if (affiliateError) {
      console.error("Erro ao buscar afiliado:", affiliateError)
      return NextResponse.json({ error: "Erro ao verificar email. Tente novamente." }, { status: 500 })
    }

if (!affiliate) {
      return NextResponse.json({ error: "Email não encontrado. Faça seu cadastro primeiro." }, { status: 404 })
    }

if (affiliate.status === "pending") {
      return NextResponse.json(
        { error: "Seu cadastro ainda está aguardando aprovação do administrador." },
        { status: 403 },
      )
    }

if (affiliate.status === "rejected") {
      return NextResponse.json({ error: "Seu cadastro foi recusado. Entre em contato com o suporte." }, { status: 403 })
    }

if (affiliate.status === "paused") {
      return NextResponse.json(
        { error: "Sua conta foi pausada temporariamente. Entre em contato com o suporte." },
        { status: 403 },
      )
    }

const storedPassword = affiliate.password || affiliate.password_hash
    if (!storedPassword) {
      return NextResponse.json({ error: "Erro no cadastro. Entre em contato com o suporte." }, { status: 500 })
    }

let passwordMatch = false

if (storedPassword.startsWith("$2b$") || storedPassword.startsWith("$2a$")) {
      // Senha hasheada com bcrypt - comparar com bcrypt
      passwordMatch = await bcrypt.compare(password, storedPassword)
    } else {
      // Senha em texto puro - comparação direta
      passwordMatch = storedPassword === password
    }

if (!passwordMatch) {
      return NextResponse.json({ error: "Senha incorreta." }, { status: 401 })
    }

return NextResponse.json({
      success: true,
      user: {
        id: affiliate.id,
        name: affiliate.name,
        email: affiliate.email,
        isAdmin: affiliate.is_admin || false,
        photoUrl: affiliate.photo_url || null,
        onboardingCompleted: affiliate.onboarding_completed || false,
      },
    })
  } catch (err) {
    console.error("Erro no login:", err)
    return NextResponse.json({ error: "Erro ao fazer login" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/metrics/manual/list/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const supabase = await createClient()

const { data, error } = await supabase
      .from("daily_metrics_manual")
      .select("*")
      .order("date", { ascending: false })
      .limit(30)

if (error) throw error

return NextResponse.json({ data: data || [] })
  } catch (error) {
    console.error("[v0] Error listing manual metrics:", error)
    return NextResponse.json({ error: "Failed to list metrics" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/metrics/manual/route.ts"
import { createClient } from "@/lib/supabase/server"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    const supabase = await createClient()
    const { searchParams } = new URL(request.url)
    const date = searchParams.get("date") || new Date().toISOString().split("T")[0]

const { data, error } = await supabase.from("daily_metrics_manual").select("*").eq("date", date)

if (error) {
      console.error("[v0] Error fetching manual metrics:", error)
      throw error
    }

return NextResponse.json({
      data:
        data && data.length > 0
          ? data[0]
          : {
              date,
              afilia_basic_qty: 0,
              afilia_basic_revenue: 0,
              afilia_pro_qty: 0,
              afilia_pro_revenue: 0,
              affiliate_qty: 0,
              affiliate_revenue: 0,
              daily_expenses: 0,
            },
    })
  } catch (error) {
    console.error("[v0] Error fetching manual metrics:", error)
    return NextResponse.json({ error: "Failed to fetch metrics" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const supabase = await createClient()
    const body = await request.json()

console.log("[v0] Salvando métricas:", {
      date: body.date,
      expenses: body.expenses,
      daily_expenses: body.daily_expenses,
    })

const { data, error } = await supabase
      .from("daily_metrics_manual")
      .upsert({
        date: body.date,
        afilia_basic_qty: body.afilia_basic_qty || 0,
        afilia_basic_revenue: body.afilia_basic_revenue || 0,
        afilia_pro_qty: body.afilia_pro_qty || 0,
        afilia_pro_revenue: body.afilia_pro_revenue || 0,
        affiliate_qty: body.affiliate_qty || 0,
        affiliate_revenue: body.affiliate_revenue || 0,
        daily_expenses: body.expenses || body.daily_expenses || 0,
        updated_at: new Date().toISOString(),
      })
      .select()
      .single()

if (error) throw error

console.log("[v0] Métricas salvas com sucesso:", data)

return NextResponse.json({ data })
  } catch (error) {
    console.error("[v0] Error saving manual metrics:", error)
    return NextResponse.json({ error: "Failed to save metrics" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest) {
  try {
    const supabase = await createClient()
    const { searchParams } = new URL(request.url)
    const date = searchParams.get("date")

if (!date) {
      return NextResponse.json({ error: "Date parameter required" }, { status: 400 })
    }

const { error } = await supabase.from("daily_metrics_manual").delete().eq("date", date)

if (error) throw error

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("[v0] Error deleting manual metrics:", error)
    return NextResponse.json({ error: "Failed to delete metrics" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/monthly-sales/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const supabase = await createClient()
  const { searchParams } = new URL(request.url)
  const month = searchParams.get("month")
  const year = searchParams.get("year")

if (month && year) {
    // Buscar vendas de um mês específico
    const { data, error } = await supabase
      .from("monthly_total_sales")
      .select("*")
      .eq("month", Number.parseInt(month))
      .eq("year", Number.parseInt(year))
      .single()

if (error && error.code !== "PGRST116") {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }

return NextResponse.json(data || { total_sales: 0 })
  }

// Buscar histórico completo
  const { data, error } = await supabase
    .from("monthly_total_sales")
    .select("*")
    .order("year", { ascending: false })
    .order("month", { ascending: false })

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json(data || [])
}

export async function POST(request: Request) {
  const supabase = await createClient()
  const { month, year, total_sales } = await request.json()

const { data, error } = await supabase
    .from("monthly_total_sales")
    .upsert({ month, year, total_sales, updated_at: new Date().toISOString() }, { onConflict: "month,year" })
    .select()
    .single()

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json(data)
}

export async function DELETE(request: Request) {
  const supabase = await createClient()
  const { searchParams } = new URL(request.url)
  const id = searchParams.get("id")

if (!id) {
    return NextResponse.json({ error: "ID is required" }, { status: 400 })
  }

const { error } = await supabase.from("monthly_total_sales").delete().eq("id", Number.parseInt(id))

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ success: true })
}
[V0_FILE]typescript:file="app/api/onboarding/complete/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

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

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

const supabase = await createClient()

const { error } = await supabase.from("affiliates").update({ onboarding_completed: true }).eq("id", affiliateId)

if (error) {
      console.error("Erro ao atualizar onboarding:", error)
      return NextResponse.json({ error: "Erro ao completar onboarding" }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (err) {
    console.error("Erro no onboarding:", err)
    return NextResponse.json({ error: "Erro ao processar requisição" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/orderbumps/route.ts"
import { NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"
import {
  getUserCourseAccessList,
  addUserCourseAccess,
  removeUserCourseAccess,
  getUsers,
  getOrderbumpCourses,
  getCourses, // Declared the getCourses function here
} from "@/lib/courses-api"

export async function GET(request: Request) {
  try {
    console.log("[v0] API Orderbumps GET - Iniciando")
    const supabase = await createClient()
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()

console.log("[v0] API Orderbumps GET - User:", user?.id, "Error:", authError)

if (!user) {
      console.log("[v0] API Orderbumps GET - Usuário não autenticado")
      return NextResponse.json({ error: "Não autenticado" }, { status: 401 })
    }

// Verificar se é admin
    const { data: affiliate } = await supabase.from("affiliates").select("is_admin").eq("id", user.id).single()

if (!affiliate?.is_admin) {
      return NextResponse.json({ error: "Não autorizado" }, { status: 403 })
    }

const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")

// Se userId foi fornecido, buscar apenas os orderbumps daquele usuário
    if (userId) {
      const { data: userOrderbumps, error } = await supabase
        .from("user_course_access")
        .select(`
          *,
          course:courses(id, title)
        `)
        .eq("user_id", userId)
        .order("created_at", { ascending: false })

const courses = await getOrderbumpCourses()

console.log("[v0] API Orderbumps - Orderbumps do usuário:", userOrderbumps?.length || 0)
      console.log("[v0] API Orderbumps - Cursos disponíveis:", courses.length)

return NextResponse.json({
        userOrderbumps: userOrderbumps || [],
        courses,
      })
    }

// Caso contrário, buscar todos os orderbumps (para listagem geral)
    const orderbumps = await getUserCourseAccessList()
    const users = await getUsers()
    const courses = await getOrderbumpCourses()

console.log("[v0] API Orderbumps - Usuários:", users.length)
    console.log("[v0] API Orderbumps - Cursos:", courses.length)
    console.log("[v0] API Orderbumps - Orderbumps ativos:", orderbumps.length)

return NextResponse.json({ orderbumps, users, courses })
  } catch (error) {
    console.error("Erro ao buscar orderbumps:", error)
    return NextResponse.json({ error: "Erro ao buscar orderbumps" }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const supabase = await createClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

if (!user) {
      return NextResponse.json({ error: "Não autenticado" }, { status: 401 })
    }

// Verificar se é admin
    const { data: affiliate } = await supabase.from("affiliates").select("is_admin").eq("id", user.id).single()

if (!affiliate?.is_admin) {
      return NextResponse.json({ error: "Não autorizado" }, { status: 403 })
    }

const { userId, courseId, notes } = await request.json()

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

const success = await addUserCourseAccess(userId, courseId, "manual", notes || "")

if (!success) {
      return NextResponse.json({ error: "Erro ao adicionar orderbump" }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Erro ao adicionar orderbump:", error)
    return NextResponse.json({ error: "Erro ao adicionar orderbump" }, { status: 500 })
  }
}

export async function DELETE(request: Request) {
  try {
    const supabase = await createClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

if (!user) {
      return NextResponse.json({ error: "Não autenticado" }, { status: 401 })
    }

// Verificar se é admin
    const { data: affiliate } = await supabase.from("affiliates").select("is_admin").eq("id", user.id).single()

if (!affiliate?.is_admin) {
      return NextResponse.json({ error: "Não autorizado" }, { status: 403 })
    }

const { searchParams } = new URL(request.url)
    const userId = searchParams.get("userId")
    const courseId = searchParams.get("courseId")

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

const success = await removeUserCourseAccess(userId, courseId)

if (!success) {
      return NextResponse.json({ error: "Erro ao remover orderbump" }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Erro ao remover orderbump:", error)
    return NextResponse.json({ error: "Erro ao remover orderbump" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/recuperar-senha/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import crypto from "crypto"

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

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

const supabase = await createClient()

// Verificar se o email existe
    const { data: affiliate, error: affiliateError } = await supabase
      .from("affiliates")
      .select("id, name, email")
      .eq("email", email.toLowerCase().trim())
      .single()

if (affiliateError || !affiliate) {
      // Retornar sucesso mesmo se email não existe (segurança)
      return NextResponse.json({
        success: true,
        message: "Se o email existir, você receberá instruções de recuperação",
      })
    }

// Gerar token único
    const token = crypto.randomBytes(32).toString("hex")
    const expiresAt = new Date(Date.now() + 60 * 60 * 1000) // 1 hora

// Deletar tokens antigos do usuário
    await supabase.from("password_reset_tokens").delete().eq("affiliate_id", affiliate.id)

// Salvar novo token
    const { error: tokenError } = await supabase.from("password_reset_tokens").insert({
      affiliate_id: affiliate.id,
      token,
      expires_at: expiresAt.toISOString(),
    })

if (tokenError) {
      console.error("Erro ao salvar token:", tokenError)
      return NextResponse.json({ error: "Erro ao processar solicitação" }, { status: 500 })
    }

// Em produção, aqui enviaria o email com o link
    // Por enquanto, vamos retornar o token para teste
    const resetLink = `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/redefinir-senha?token=${token}`

console.log(`[Recuperar Senha] Link para ${email}: ${resetLink}`)

return NextResponse.json({
      success: true,
      message: "Se o email existir, você receberá instruções de recuperação",
      // Remover em produção - apenas para teste
      debug: { resetLink },
    })
  } catch (error) {
    console.error("Erro na recuperação de senha:", error)
    return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/redefinir-senha/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"
import bcrypt from "bcryptjs"

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

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

if (password.length < 6) {
      return NextResponse.json({ error: "A senha deve ter pelo menos 6 caracteres" }, { status: 400 })
    }

const supabase = await createClient()

// Verificar token
    const { data: tokenData, error: tokenError } = await supabase
      .from("password_reset_tokens")
      .select("affiliate_id, expires_at")
      .eq("token", token)
      .single()

if (tokenError || !tokenData) {
      return NextResponse.json({ error: "Token inválido ou expirado" }, { status: 400 })
    }

// Verificar se token expirou
    if (new Date(tokenData.expires_at) < new Date()) {
      // Deletar token expirado
      await supabase.from("password_reset_tokens").delete().eq("token", token)

return NextResponse.json({ error: "Token expirado. Solicite uma nova recuperação." }, { status: 400 })
    }

// Hash da nova senha
    const hashedPassword = await bcrypt.hash(password, 10)

// Atualizar senha do usuário
    const { error: updateError } = await supabase
      .from("affiliates")
      .update({ password: hashedPassword })
      .eq("id", tokenData.affiliate_id)

if (updateError) {
      console.error("Erro ao atualizar senha:", updateError)
      return NextResponse.json({ error: "Erro ao atualizar senha" }, { status: 500 })
    }

// Deletar token usado
    await supabase.from("password_reset_tokens").delete().eq("token", token)

return NextResponse.json({
      success: true,
      message: "Senha alterada com sucesso!",
    })
  } catch (error) {
    console.error("Erro na redefinição de senha:", error)
    return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/settings/total-sales/route.ts"
import { createClient } from "@/lib/supabase/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const supabase = await createClient()

const { data, error } = await supabase.from("system_settings").select("total_sales_count").eq("id", 1).single()

if (error) throw error

return NextResponse.json({ totalSales: data?.total_sales_count || 0 })
  } catch (error) {
    console.error("Error fetching total sales:", error)
    return NextResponse.json({ totalSales: 0 }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const { totalSales } = await request.json()
    const supabase = await createClient()

const { error } = await supabase
      .from("system_settings")
      .update({
        total_sales_count: totalSales,
        updated_at: new Date().toISOString(),
      })
      .eq("id", 1)

if (error) throw error

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating total sales:", error)
    return NextResponse.json({ success: false, error }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/upload/route.ts"
import { createClient } from "@supabase/supabase-js"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
    const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!supabaseUrl || !serviceRoleKey) {
      return NextResponse.json(
        { error: "Configuração do Supabase ausente. Defina NEXT_PUBLIC_SUPABASE_URL e SUPABASE_SERVICE_ROLE_KEY." },
        { status: 500 },
      )
    }

const supabase = createClient(supabaseUrl, serviceRoleKey)

const formData = await request.formData()
    const file = formData.get("file") as File

if (!file) {
      return NextResponse.json({ error: "Nenhum arquivo enviado" }, { status: 400 })
    }

// Verificar tipo de arquivo
    const allowedTypes = [
      "application/pdf",
      "image/jpeg",
      "image/png",
      "image/gif",
      "image/webp",
      "application/zip",
      "application/x-zip-compressed",
      "application/x-zip",
    ]
    if (!allowedTypes.includes(file.type)) {
      return NextResponse.json({ error: "Tipo de arquivo não permitido. Use PDF, ZIP ou imagens." }, { status: 400 })
    }

// Gerar nome único para o arquivo
    const timestamp = Date.now()
    const extension = file.name.split(".").pop()
    const fileName = `${timestamp}-${Math.random().toString(36).substring(7)}.${extension}`
    const filePath = `uploads/${fileName}`

// Converter File para ArrayBuffer
    const arrayBuffer = await file.arrayBuffer()
    const buffer = new Uint8Array(arrayBuffer)

// Upload para Supabase Storage
    const { data, error } = await supabase.storage.from("attachments").upload(filePath, buffer, {
      contentType: file.type,
      upsert: false,
    })

if (error) {
      console.error("Erro no upload:", error)
      return NextResponse.json({ error: "Erro ao fazer upload: " + error.message }, { status: 500 })
    }

// Obter URL pública do arquivo
    const { data: urlData } = supabase.storage.from("attachments").getPublicUrl(filePath)

return NextResponse.json({
      url: urlData.publicUrl,
      fileName: file.name,
      fileType: file.type,
      fileSize: file.size,
    })
  } catch (error) {
    console.error("Erro no upload:", error)
    return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/aula-gratuita/page.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Zap, CheckCircle2, Star, Sparkles, Shield, Clock } from "lucide-react"

export default function AulaGratuitaPage() {
  const [showOffer, setShowOffer] = useState(false)
  const [timeLeft, setTimeLeft] = useState(600) // 10 minutos em segundos

useEffect(() => {
    const timer = setTimeout(() => {
      setShowOffer(true)
    }, 10000)
    return () => clearTimeout(timer)
  }, [])

useEffect(() => {
    if (showOffer && timeLeft > 0) {
      const interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1)
      }, 1000)
      return () => clearInterval(interval)
    }
  }, [showOffer, timeLeft])

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="min-h-screen bg-gradient-to-b from-background via-background to-emerald-950/10">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-3 md:py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2 text-foreground hover:text-emerald-500 transition-colors">
            <ArrowLeft className="w-4 h-4 md:w-5 md:h-5" />
            <span className="text-sm md:text-base font-semibold">Voltar</span>
          </Link>
          <Link href="/" className="text-xl md:text-2xl font-bold">
            <span className="text-primary">AFILIA</span>
            <span className="text-emerald-500">360</span>
          </Link>
          <div className="w-12 md:w-20" />
        </div>
      </header>

<div className="container mx-auto px-4 py-6 md:py-8 max-w-6xl">
        {/* Hero com CTA urgente */}
        <div className="text-center space-y-4 md:space-y-6 py-6 md:py-12 mb-8 md:mb-12">
          <div className="inline-flex items-center gap-2 px-4 md:px-6 py-2 md:py-3 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border-2 border-red-500/50 text-red-500 font-bold text-sm md:text-lg mb-4 animate-pulse shadow-lg shadow-red-500/20">
            <Sparkles className="w-4 h-4 md:w-5 md:h-5" />
            DISPONÍVEL AGORA
          </div>
          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-balance leading-tight px-2">
            <span className="bg-gradient-to-r from-red-500 via-orange-500 to-red-600 bg-clip-text text-transparent">
              ASSISTA ANTES
              <br />
              QUE SAIA DO AR
            </span>
          </h1>
          <p className="text-base md:text-xl lg:text-2xl text-muted-foreground max-w-3xl mx-auto text-balance font-medium px-4">
            Descubra o método exato para começar no marketing de afiliados mesmo sendo iniciante
          </p>
        </div>

{/* Video Player */}
        <div className="max-w-5xl mx-auto mb-8 md:mb-12">
          <Card className="overflow-hidden border-2 md:border-4 border-emerald-500 shadow-2xl shadow-emerald-500/20">
            <div className="aspect-video">
              <iframe
                width="100%"
                height="100%"
                src="https://www.youtube.com/embed/N74yXWo_h7E?autoplay=1"
                title="Aula Gratuita AFILIA360"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className="w-full h-full"
              />
            </div>
          </Card>
        </div>

{/* Offer Section - Appears after 10 seconds */}
        {showOffer && (
          <div className="max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-1000">
            <Card className="p-4 sm:p-6 md:p-8 lg:p-12 border-2 md:border-4 border-emerald-500 bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-background shadow-2xl shadow-emerald-500/20">
              <div className="text-center space-y-4 md:space-y-6">
                <div className="inline-flex items-center gap-2 md:gap-3 px-4 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl bg-gradient-to-r from-orange-500 to-red-500 text-white font-bold text-sm md:text-xl shadow-lg animate-pulse">
                  <Clock className="w-4 h-4 md:w-6 md:h-6" />
                  <span className="whitespace-nowrap">Expira em: {formatTime(timeLeft)}</span>
                </div>

<div className="inline-flex items-center gap-2 px-3 md:px-4 py-1.5 md:py-2 rounded-full bg-emerald-500/20 border border-emerald-500 text-emerald-500 text-xs md:text-sm font-bold">
                  <Star className="w-3 h-3 md:w-4 md:h-4" />
                  OFERTA ESPECIAL EXCLUSIVA
                </div>

<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-black text-balance px-2">
                  Acesso Completo ao{" "}
                  <span className="bg-gradient-to-r from-emerald-400 to-emerald-600 bg-clip-text text-transparent">
                    AFILIA360
                  </span>
                </h2>

<p className="text-sm md:text-xl text-muted-foreground max-w-2xl mx-auto font-medium px-4">
                  Entre agora e tenha acesso imediato a produtos validados, comunidade exclusiva e todo suporte para
                  começar hoje mesmo
                </p>

{/* Price - Destaque maior */}
                <div className="py-4 md:py-8 relative">
                  <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/10 via-emerald-500/5 to-emerald-500/10 rounded-3xl blur-2xl" />
                  <div className="relative">
                    <div className="text-muted-foreground line-through text-lg md:text-2xl mb-2">De R$ 97,00</div>
                    <div className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black bg-gradient-to-r from-emerald-400 to-emerald-600 bg-clip-text text-transparent mb-2">
                      R$ 17
                    </div>
                    <div className="text-xs md:text-lg text-muted-foreground font-semibold px-4">
                      Apenas para quem assistiu a aula completa
                    </div>
                  </div>
                </div>

{/* Benefits com cores */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 text-left max-w-2xl mx-auto">
                  {[
                    "Acesso vitalício à plataforma",
                    "Produtos validados diariamente",
                    "Comunidade exclusiva de afiliados",
                    "Materiais de divulgação prontos",
                    "Suporte especializado em vendas",
                    "Atualizações semanais de produtos",
                  ].map((benefit, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 md:gap-3 p-2 md:p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/20"
                    >
                      <CheckCircle2 className="w-4 h-4 md:w-5 md:h-5 text-emerald-500 flex-shrink-0" />
                      <span className="text-sm md:text-base font-medium">{benefit}</span>
                    </div>
                  ))}
                </div>

{/* CTA pulsante */}
                <div className="space-y-3 md:space-y-4 pt-4 md:pt-6">
                  <Link href="/cadastro" className="block">
                    <Button
                      size="lg"
                      className="w-full bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-700 hover:to-emerald-600 text-white text-base sm:text-lg md:text-xl lg:text-2xl font-black px-6 sm:px-8 md:px-16 py-6 md:py-10 shadow-2xl shadow-emerald-500/30 hover:scale-105 transition-transform"
                    >
                      <Zap className="w-5 h-5 md:w-7 md:h-7 mr-2 md:mr-3 flex-shrink-0" />
                      <span className="leading-tight">COMEÇAR AGORA POR R$ 17</span>
                    </Button>
                  </Link>
                  <div className="flex items-center justify-center gap-2 text-xs md:text-sm text-muted-foreground px-4">
                    <Shield className="w-3 h-3 md:w-4 md:h-4 text-emerald-500 flex-shrink-0" />
                    <span className="font-medium">Pagamento 100% seguro • Garantia de 7 dias</span>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        )}

{/* Testimonials com mais cor */}
        <div className="max-w-4xl mx-auto mt-12 md:mt-16">
          <h3 className="text-2xl md:text-3xl font-bold text-center mb-6 md:mb-8 px-4">O que nossos membros dizem</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
            <Card className="p-4 md:p-6 border-2 border-emerald-500/30 bg-gradient-to-br from-emerald-500/5 to-background hover:border-emerald-500 transition-all hover:scale-105">
              <div className="flex gap-1 mb-3 md:mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 md:w-5 md:h-5 fill-yellow-500 text-yellow-500" />
                ))}
              </div>
              <p className="text-sm md:text-base text-muted-foreground mb-3 md:mb-4 leading-relaxed">
                "Melhor investimento que fiz! Em 2 semanas consegui minhas primeiras vendas. Os produtos são realmente
                validados e a plataforma funciona!"
              </p>
              <div className="text-sm md:text-base font-bold text-emerald-500">— Julia Martins, SP</div>
            </Card>

<Card className="p-4 md:p-6 border-2 border-emerald-500/30 bg-gradient-to-br from-emerald-500/5 to-background hover:border-emerald-500 transition-all hover:scale-105">
              <div className="flex gap-1 mb-3 md:mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 md:w-5 md:h-5 fill-yellow-500 text-yellow-500" />
                ))}
              </div>
              <p className="text-sm md:text-base text-muted-foreground mb-3 md:mb-4 leading-relaxed">
                "Finalmente uma plataforma séria! Os R$ 17 são ridículos perto do valor que recebi. Já recuperei o
                investimento na primeira venda!"
              </p>
              <div className="text-sm md:text-base font-bold text-emerald-500">— Pedro Costa, RJ</div>
            </Card>
          </div>
        </div>
      </div>

{/* Footer */}
      <footer className="border-t border-border py-6 md:py-8 px-4 mt-12 md:mt-20 bg-card/30">
        <div className="container mx-auto text-center text-xs md:text-sm text-muted-foreground">
          <p>© 2025 AFILIA360. Todos os direitos reservados.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/avisos/[slug]/page.tsx"
import { redirect } from "next/navigation"

export default function AvisoDetalhePage() {
  redirect("/novidades")
}
[V0_FILE]typescriptreact:file="app/avisos/page.tsx"
import { redirect } from "next/navigation"

export default function AvisosPage() {
  redirect("/novidades")
}
[V0_FILE]typescriptreact:file="app/bem-vindo/loading.tsx"
import { Loader2 } from "lucide-react"

export default function Loading() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <Loader2 className="h-8 w-8 animate-spin text-primary" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bem-vindo/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Rocket, GraduationCap, ArrowRight, Play, CheckCircle, Sparkles, Target, Zap } from "lucide-react"
import { Header } from "@/components/header"
import { getSession, setSession } from "@/lib/auth"
import { createClient } from "@/lib/supabase/client"

export default function WelcomePage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [showVideo, setShowVideo] = useState(false)
  const [videoWatched, setVideoWatched] = useState(false)
  const [introVideoUrl, setIntroVideoUrl] = useState<string | null>(null)
  const router = useRouter()

useEffect(() => {
    async function loadConfig() {
      const supabase = createClient()
      const { data } = await supabase.from("site_config").select("value").eq("key", "intro_video_url").single()

if (data?.value) {
        setIntroVideoUrl(data.value)
      }
    }
    loadConfig()
  }, [])

const handlePathChoice = async (path: "iniciante" | "experiente") => {
    const session = getSession()
    if (session) {
      // Marcar que o usuário já viu o guia
      const supabase = createClient()
      await supabase.from("affiliates").update({ onboarding_completed: true }).eq("id", session.id)

// Atualizar sessão local
      setSession({ ...session, onboarding_completed: true })
    }

if (path === "iniciante") {
      router.push("/cursos/metodo-afilia360")
    } else {
      router.push("/")
    }
  }

const getVideoEmbedUrl = (url: string) => {
    if (url.includes("youtube.com") || url.includes("youtu.be")) {
      const videoId = url.includes("youtu.be") ? url.split("/").pop() : new URL(url).searchParams.get("v")
      return `https://www.youtube.com/embed/${videoId}?autoplay=1`
    }
    if (url.includes("pandavideo")) {
      return url
    }
    return url
  }

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

<div className="mx-auto max-w-4xl px-4 py-8 md:py-12">
        {/* Header de Boas-vindas */}
        <div className="text-center mb-8 md:mb-12">
          <div className="mx-auto mb-4 flex h-16 w-16 md:h-20 md:w-20 items-center justify-center rounded-full bg-gradient-to-br from-primary/30 to-amber-500/30 border-2 border-primary/50">
            <Sparkles className="h-8 w-8 md:h-10 md:w-10 text-primary" />
          </div>
          <h1 className="text-2xl md:text-4xl font-bold text-foreground mb-2">Bem-vindo ao AFILIA360!</h1>
          <p className="text-muted-foreground text-sm md:text-base max-w-2xl mx-auto">
            Estamos muito felizes em ter você aqui. Antes de começar, assista o vídeo de boas-vindas e escolha a trilha
            ideal para o seu nível de experiência.
          </p>
        </div>

{/* Vídeo de Boas-vindas */}
        <div className="mb-8 md:mb-12">
          <div className="rounded-xl border border-primary/30 bg-gradient-to-br from-primary/5 to-amber-500/5 p-4 md:p-6">
            <div className="flex items-center gap-2 mb-4">
              <Play className="h-5 w-5 text-primary" />
              <h2 className="text-lg font-semibold">Vídeo de Boas-vindas</h2>
              {videoWatched && (
                <span className="ml-auto flex items-center gap-1 text-emerald-500 text-sm">
                  <CheckCircle className="h-4 w-4" />
                  Assistido
                </span>
              )}
            </div>

{!showVideo ? (
              <button
                onClick={() => {
                  setShowVideo(true)
                  setTimeout(() => setVideoWatched(true), 5000) // Marca como assistido após 5s
                }}
                className="relative w-full aspect-video rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-900 overflow-hidden group"
              >
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="flex flex-col items-center gap-3">
                    <div className="h-16 w-16 md:h-20 md:w-20 rounded-full bg-primary/20 flex items-center justify-center group-hover:bg-primary/30 transition-colors">
                      <Play className="h-8 w-8 md:h-10 md:w-10 text-primary fill-primary" />
                    </div>
                    <span className="text-sm text-muted-foreground">Clique para assistir</span>
                  </div>
                </div>
              </button>
            ) : (
              <div className="w-full aspect-video rounded-lg overflow-hidden bg-black">
                {introVideoUrl && (
                  <iframe
                    src={getVideoEmbedUrl(introVideoUrl)}
                    className="w-full h-full"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                )}
              </div>
            )}
          </div>
        </div>

{/* Escolha de Trilha */}
        <div className="mb-8">
          <h2 className="text-xl md:text-2xl font-bold text-center mb-2">Escolha sua Trilha</h2>
          <p className="text-center text-muted-foreground text-sm mb-6">
            Selecione o caminho que melhor se encaixa no seu momento atual
          </p>

<div className="grid md:grid-cols-2 gap-4 md:gap-6">
            {/* Opção Iniciante */}
            <button
              onClick={() => handlePathChoice("iniciante")}
              className="group relative rounded-xl border-2 border-emerald-500/30 bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 p-6 text-left transition-all hover:border-emerald-500/60 hover:shadow-lg hover:shadow-emerald-500/10"
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/20">
                  <GraduationCap className="h-6 w-6 text-emerald-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-foreground">Estou Começando do Zero</h3>
                  <p className="text-xs text-emerald-400">Curso: Método AFILIA360</p>
                </div>
              </div>

<ul className="space-y-2 mb-4 text-sm text-muted-foreground">
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-emerald-500 flex-shrink-0" />
                  Nunca trabalhei com tráfego pago
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-emerald-500 flex-shrink-0" />
                  Não tenho conta em plataformas
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-emerald-500 flex-shrink-0" />
                  Preciso aprender desde o básico
                </li>
              </ul>

<div className="flex items-center gap-2 text-emerald-400 font-medium group-hover:gap-3 transition-all">
                Começar do Zero
                <ArrowRight className="h-4 w-4" />
              </div>
            </button>

{/* Opção Experiente */}
            <button
              onClick={() => handlePathChoice("experiente")}
              className="group relative rounded-xl border-2 border-amber-500/30 bg-gradient-to-br from-amber-500/10 to-orange-600/5 p-6 text-left transition-all hover:border-amber-500/60 hover:shadow-lg hover:shadow-amber-500/10"
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/20">
                  <Rocket className="h-6 w-6 text-amber-400" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-foreground">Já Tenho Experiência</h3>
                  <p className="text-xs text-amber-400">Ir para o Marketplace</p>
                </div>
              </div>

<ul className="space-y-2 mb-4 text-sm text-muted-foreground">
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-amber-500 flex-shrink-0" />
                  Já tenho BM ou conta de anúncios
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-amber-500 flex-shrink-0" />
                  Entendo o básico de hospedagem
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle className="h-4 w-4 text-amber-500 flex-shrink-0" />
                  Quero ir direto para as campanhas
                </li>
              </ul>

<div className="flex items-center gap-2 text-amber-400 font-medium group-hover:gap-3 transition-all">
                Ir para Campanhas
                <ArrowRight className="h-4 w-4" />
              </div>
            </button>
          </div>
        </div>

{/* Info adicional */}
        <div className="grid md:grid-cols-3 gap-4 mb-8">
          <div className="rounded-lg border border-border bg-card p-4 text-center">
            <Target className="h-6 w-6 text-primary mx-auto mb-2" />
            <h4 className="font-semibold text-sm mb-1">Produtos Validados</h4>
            <p className="text-xs text-muted-foreground">Acesse produtos testados e aprovados</p>
          </div>
          <div className="rounded-lg border border-border bg-card p-4 text-center">
            <Zap className="h-6 w-6 text-amber-500 mx-auto mb-2" />
            <h4 className="font-semibold text-sm mb-1">Estratégias Prontas</h4>
            <p className="text-xs text-muted-foreground">Receba estratégias para cada produto</p>
          </div>
          <div className="rounded-lg border border-border bg-card p-4 text-center">
            <GraduationCap className="h-6 w-6 text-emerald-500 mx-auto mb-2" />
            <h4 className="font-semibold text-sm mb-1">Cursos Completos</h4>
            <p className="text-xs text-muted-foreground">Aprenda passo a passo do zero</p>
          </div>
        </div>

{/* Botão para pular */}
        <div className="text-center">
          <button
            onClick={() => router.push("/")}
            className="text-sm text-muted-foreground hover:text-foreground transition-colors underline"
          >
            Pular e ir para o Marketplace
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cadastro/page.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, Loader2, User, Mail, Phone, Lock, Eye, EyeOff } from "lucide-react"
import Link from "next/link"

export default function CadastroPage() {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [whatsapp, setWhatsapp] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

const formatWhatsapp = (value: string) => {
    const numbers = value.replace(/\D/g, "")
    if (numbers.length <= 2) return numbers
    if (numbers.length <= 7) return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`
    if (numbers.length <= 11) return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7)}`
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7, 11)}`
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

if (password.length < 6) {
      setError("A senha deve ter pelo menos 6 caracteres.")
      setIsLoading(false)
      return
    }

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

const supabase = createClient()

try {
      const { data: existing, error: checkError } = await supabase
        .from("affiliates")
        .select("id, status")
        .eq("email", email)
        .maybeSingle()

if (checkError) {
        console.error("Erro ao verificar email:", checkError)
      }

if (existing) {
        if (existing.status === "pending") {
          setError("Este email já está cadastrado e aguardando aprovação.")
        } else if (existing.status === "approved") {
          setError("Este email já está aprovado. Faça login para acessar.")
        } else {
          setError("Este email foi recusado anteriormente.")
        }
        setIsLoading(false)
        return
      }

const { error: insertError } = await supabase.from("affiliates").insert({
        name,
        email,
        whatsapp: whatsapp.replace(/\D/g, ""),
        password,
        status: "pending",
        plan_id: "80f64075-29b4-4fec-b824-1826bf5cc8fa",
        is_vip: false,
      })

if (insertError) {
        console.error("Erro ao inserir afiliado:", insertError)
        throw insertError
      }

setSuccess(true)
    } catch (err) {
      console.error("Erro no cadastro:", err)
      setError(err instanceof Error ? err.message : "Erro ao cadastrar")
    } finally {
      setIsLoading(false)
    }
  }

if (success) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <Card className="w-full max-w-md border-emerald-500/30">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <div className="mx-auto w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center">
                <CheckCircle className="w-8 h-8 text-emerald-500" />
              </div>
              <h2 className="text-2xl font-bold text-foreground">Cadastro Realizado!</h2>
              <p className="text-muted-foreground">
                Seu cadastro foi recebido com sucesso. Aguarde a aprovação do administrador. Você será notificado por
                email quando sua conta for liberada.
              </p>
              <Link href="/login">
                <Button variant="outline" className="mt-4 bg-transparent">
                  Ir para Login
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4">
            <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
              AFILIA360
            </span>
          </div>
          <CardTitle className="text-xl">Cadastro de Afiliado</CardTitle>
          <CardDescription>
            Preencha seus dados para solicitar acesso ao marketplace de produtos validados
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nome Completo</Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="name"
                  type="text"
                  placeholder="Seu nome completo"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="email"
                  type="email"
                  placeholder="seu@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="whatsapp">WhatsApp</Label>
              <div className="relative">
                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="whatsapp"
                  type="tel"
                  placeholder="(00) 00000-0000"
                  value={whatsapp}
                  onChange={(e) => setWhatsapp(formatWhatsapp(e.target.value))}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Mínimo 6 caracteres"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirmar Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="confirmPassword"
                  type={showConfirmPassword ? "text" : "password"}
                  placeholder="Repita a senha"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>

{error && <p className="text-sm text-red-500 bg-red-500/10 p-3 rounded-lg">{error}</p>}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Cadastrando...
                </>
              ) : (
                "Solicitar Acesso"
              )}
            </Button>

<p className="text-xs text-center text-muted-foreground">
              Ao se cadastrar, você concorda com nossos termos de uso e política de privacidade.
            </p>

<p className="text-sm text-center text-muted-foreground">
              Já tem conta?{" "}
              <Link href="/login" className="text-emerald-400 hover:underline">
                Faça login
              </Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cursos/[slug]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import Link from "next/link"
import Image from "next/image"
import { Header } from "@/components/header"
import { VideoPlayer } from "@/components/courses/video-player"
import { LessonList } from "@/components/courses/lesson-list"
import { LessonContent } from "@/components/courses/lesson-content"
import { LessonProgressButton } from "@/components/courses/lesson-progress-button"
import { UpgradeModal } from "@/components/courses/upgrade-modal"
import { useUserPlan } from "@/hooks/use-user-plan"
import {
  getCourseBySlug,
  getCourseLessons,
  getUserCourseProgress,
  saveLessonProgress,
  type Course,
  type CourseLesson,
  type UserLessonProgress,
} from "@/lib/courses-api"
import { getSession } from "@/lib/auth"
import { Loader2, Clock, BookOpen, User, ChevronRight, Lock, ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function CourseDetailPage() {
  const params = useParams()
  const slug = params.slug as string
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [course, setCourse] = useState<Course | null>(null)
  const [lessons, setLessons] = useState<CourseLesson[]>([])
  const [currentLesson, setCurrentLesson] = useState<CourseLesson | null>(null)
  const [progress, setProgress] = useState<UserLessonProgress[]>([])
  const [loading, setLoading] = useState(true)
  const [hasAccess, setHasAccess] = useState(false)
  const [upgradeModalOpen, setUpgradeModalOpen] = useState(false)

const { plan, hasAccess: checkAccess, isVip, loading: planLoading } = useUserPlan()

useEffect(() => {
    async function loadCourse() {
      try {
        const courseData = await getCourseBySlug(slug)
        if (!courseData) {
          router.push("/cursos")
          return
        }

setCourse(courseData)

const lessonsData = await getCourseLessons(courseData.id)
        setLessons(lessonsData)

if (lessonsData.length > 0) {
          setCurrentLesson(lessonsData[0])
        }

const session = getSession()
        if (session?.id) {
          const progressData = await getUserCourseProgress(session.id, courseData.id)
          setProgress(progressData)
        }
      } catch (error) {
        console.error("Erro ao carregar curso:", error)
      } finally {
        setLoading(false)
      }
    }

loadCourse()
  }, [slug, router])

useEffect(() => {
    async function verifyAccess() {
      if (planLoading || !course) return

if (isVip) {
        setHasAccess(true)
        return
      }

const access = await checkAccess(course.id)
      setHasAccess(access)
    }

verifyAccess()
  }, [course, planLoading, isVip, checkAccess])

const handleSelectLesson = (lesson: CourseLesson) => {
    setCurrentLesson(lesson)
    window.scrollTo({ top: 0, behavior: "smooth" })
  }

const handleLessonProgress = async (percent: number) => {
    const session = getSession()
    if (!session?.id || !currentLesson || !course) return

const isAutoComplete = percent >= 70
    await saveLessonProgress(session.id, currentLesson.id, course.id, Math.round(percent), isAutoComplete)

if (isAutoComplete) {
      setProgress((prev) => {
        const existing = prev.find((p) => p.lesson_id === currentLesson.id)
        if (existing) {
          return prev.map((p) =>
            p.lesson_id === currentLesson.id ? { ...p, completed: true, progress_percent: Math.round(percent) } : p,
          )
        }
        return [
          ...prev,
          {
            id: crypto.randomUUID(),
            user_id: session.id,
            lesson_id: currentLesson.id,
            course_id: course.id,
            completed: true,
            progress_percent: Math.round(percent),
            last_watched_at: new Date().toISOString(),
            completed_at: new Date().toISOString(),
          },
        ]
      })
    }
  }

const goToNextLesson = () => {
    if (!currentLesson) return
    const currentIndex = lessons.findIndex((l) => l.id === currentLesson.id)
    if (currentIndex < lessons.length - 1) {
      const nextLesson = lessons[currentIndex + 1]
      setCurrentLesson(nextLesson)
      window.scrollTo({ top: 0, behavior: "smooth" })
    }
  }

const handleMarkComplete = async () => {
    const session = getSession()
    if (!session?.id || !currentLesson || !course) return

await saveLessonProgress(session.id, currentLesson.id, course.id, 100, true)

setProgress((prev) => {
      const existing = prev.find((p) => p.lesson_id === currentLesson.id)
      if (existing) {
        return prev.map((p) =>
          p.lesson_id === currentLesson.id ? { ...p, completed: true, progress_percent: 100 } : p,
        )
      }
      return [
        ...prev,
        {
          id: crypto.randomUUID(),
          user_id: session.id,
          lesson_id: currentLesson.id,
          course_id: course.id,
          completed: true,
          progress_percent: 100,
          last_watched_at: new Date().toISOString(),
          completed_at: new Date().toISOString(),
        },
      ]
    })

setTimeout(() => goToNextLesson(), 500)
  }

const handleLessonComplete = async () => {
    const session = getSession()
    if (!session?.id || !currentLesson || !course) return

await saveLessonProgress(session.id, currentLesson.id, course.id, 100, true)

const currentIndex = lessons.findIndex((l) => l.id === currentLesson.id)
    if (currentIndex < lessons.length - 1) {
      setCurrentLesson(lessons[currentIndex + 1])
    }
  }

const completedLessons = progress.filter((p) => p.completed).length
  const overallProgress = lessons.length > 0 ? Math.round((completedLessons / lessons.length) * 100) : 0
  const currentLessonProgress = progress.find((p) => p.lesson_id === currentLesson?.id)

const currentIndex = currentLesson ? lessons.findIndex((l) => l.id === currentLesson.id) : -1
  const hasNextLesson = currentIndex >= 0 && currentIndex < lessons.length - 1

if (loading || planLoading) {
    return (
      <div className="min-h-screen bg-background">
        <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />
        <div className="flex items-center justify-center py-20">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      </div>
    )
  }

if (!course) {
    return null
  }

if (!hasAccess) {
    return (
      <div className="min-h-screen bg-background">
        <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

<div className="border-b border-border bg-card/50">
          <div className="mx-auto max-w-7xl px-4 py-3">
            <div className="flex items-center gap-2 text-sm">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.back()}
                className="gap-1 text-muted-foreground hover:text-foreground -ml-2"
              >
                <ArrowLeft className="h-4 w-4" />
                Voltar
              </Button>
              <ChevronRight className="h-4 w-4 text-muted-foreground" />
              <Link href="/cursos" className="text-muted-foreground hover:text-foreground transition-colors">
                Cursos
              </Link>
              <ChevronRight className="h-4 w-4 text-muted-foreground" />
              <span className="text-foreground font-medium truncate">{course.title}</span>
            </div>
          </div>
        </div>

<h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text">
              {course.title}
            </h1>

<p className="text-foreground/80 text-lg mb-8 max-w-2xl mx-auto leading-relaxed">
              {course.description || "Este curso está disponível apenas para membros Super VIP"}
            </p>

{course.cover_image && (
              <div className="relative aspect-video max-w-2xl mx-auto mb-8 rounded-xl overflow-hidden opacity-60 border-2 border-border">
                <Image
                  src={course.cover_image || "/placeholder.svg"}
                  alt={course.title}
                  fill
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              </div>
            )}

<div className="flex items-center justify-center gap-6 text-base mb-10 flex-wrap">
              {course.instructor && (
                <span className="flex items-center gap-2 text-foreground/90 bg-card/50 px-4 py-2 rounded-full border border-border">
                  <User className="h-5 w-5 text-blue-500" />
                  <span className="font-medium">{course.instructor}</span>
                </span>
              )}
              {course.duration_hours > 0 && (
                <span className="flex items-center gap-2 text-foreground/90 bg-card/50 px-4 py-2 rounded-full border border-border">
                  <Clock className="h-5 w-5 text-green-500" />
                  <span className="font-medium">{course.duration_hours}h</span>
                </span>
              )}
              {course.lessons_count > 0 && (
                <span className="flex items-center gap-2 text-foreground/90 bg-card/50 px-4 py-2 rounded-full border border-border">
                  <BookOpen className="h-5 w-5 text-purple-500" />
                  <span className="font-medium">{course.lessons_count} aulas</span>
                </span>
              )}
            </div>

<Button
              size="lg"
              onClick={() => setUpgradeModalOpen(true)}
              className="bg-red-600 hover:bg-red-700 text-white font-bold text-lg px-8 py-6 h-auto shadow-lg hover:shadow-xl transition-all hover:scale-105"
            >
              Fazer Upgrade para Acessar
            </Button>

<p className="mt-4 text-sm text-muted-foreground">Desbloqueie agora e comece a aprender em segundos</p>
          </div>
        </main>

<UpgradeModal
          open={upgradeModalOpen}
          onOpenChange={setUpgradeModalOpen}
          currentPlan={plan}
          lockedCourseTitle={course.title}
        />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

<div className="border-b border-border bg-card/50">
        <div className="mx-auto max-w-7xl px-4 py-3">
          <div className="flex items-center gap-2 text-sm">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => router.back()}
              className="gap-1 text-muted-foreground hover:text-foreground -ml-2"
            >
              <ArrowLeft className="h-4 w-4" />
              Voltar
            </Button>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
            <Link href="/cursos" className="text-muted-foreground hover:text-foreground transition-colors">
              Cursos
            </Link>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
            <span className="text-foreground font-medium truncate">{course.title}</span>
          </div>
        </div>
      </div>

<main className="mx-auto max-w-7xl px-4 py-6">
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="lg:col-span-2 space-y-4">
            {currentLesson && (
              <div className="rounded-xl border border-border bg-card p-4">
                <h1 className="text-lg md:text-xl font-bold">{currentLesson.title}</h1>
              </div>
            )}

{currentLesson?.video_url ? (
              <VideoPlayer
                videoUrl={currentLesson.video_url}
                videoType={currentLesson.video_type as any}
                title={currentLesson.title}
                onProgress={handleLessonProgress}
                onComplete={handleLessonComplete}
              />
            ) : (
              <div className="aspect-video rounded-xl bg-card border border-border flex items-center justify-center">
                <div className="text-center">
                  <BookOpen className="h-12 w-12 text-muted-foreground/50 mx-auto mb-3" />
                  <p className="text-muted-foreground">Selecione uma aula para começar</p>
                </div>
              </div>
            )}

{currentLesson && (
              <div className="rounded-xl border border-border bg-card p-4 md:p-6 space-y-4">
                <div className="flex items-center justify-between gap-3 flex-wrap">
                  <h3 className="text-sm font-semibold text-muted-foreground">Descrição da Aula</h3>
                  <div className="flex items-center gap-2">
                    <LessonProgressButton
                      isCompleted={currentLessonProgress?.completed || false}
                      progressPercent={currentLessonProgress?.progress_percent}
                      onMarkComplete={handleMarkComplete}
                    />
                    {hasNextLesson && (
                      <Button variant="outline" size="sm" onClick={goToNextLesson} className="gap-1 bg-transparent">
                        Próxima
                        <ChevronRight className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                </div>
                {currentLesson.description && (
                  <div
                    className="text-sm md:text-base text-muted-foreground prose prose-sm max-w-none break-words overflow-hidden [&_a]:text-primary [&_a]:underline [&_a]:cursor-pointer [&_a]:pointer-events-auto [&_a]:hover:text-primary/80 [&_a]:transition-colors"
                    dangerouslySetInnerHTML={{ __html: currentLesson.description }}
                    onClick={(e) => {
                      const target = e.target as HTMLElement
                      if (target.tagName === "A") {
                        const href = target.getAttribute("href")
                        if (href) {
                          e.preventDefault()
                          window.open(href, "_blank", "noopener,noreferrer")
                        }
                      }
                    }}
                  />
                )}
              </div>
            )}

{currentLesson && (
              <LessonContent
                content={(currentLesson as any).content_text}
                contentHtml={(currentLesson as any).content_html}
                attachments={currentLesson.attachments}
              />
            )}
          </div>

<div className="space-y-6">
            <div className="rounded-xl border border-border bg-card overflow-hidden p-4">
              <h2 className="font-semibold mb-4">{course.title}</h2>

<div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                {course.instructor && (
                  <span className="flex items-center gap-1">
                    <User className="h-4 w-4" />
                    {course.instructor}
                  </span>
                )}
                {course.duration_hours > 0 && (
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    {course.duration_hours}h
                  </span>
                )}
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Progresso</span>
                  <span className="font-medium">{overallProgress}%</span>
                </div>
                <div className="h-2 rounded-full bg-secondary">
                  <div
                    className="h-full rounded-full bg-gradient-to-r from-green-500 to-emerald-500 transition-all"
                    style={{ width: `${overallProgress}%` }}
                  />
                </div>
                <p className="text-xs text-muted-foreground">
                  {completedLessons} de {lessons.length} aulas concluídas
                </p>
              </div>
            </div>

<LessonList
              lessons={lessons}
              currentLessonId={currentLesson?.id}
              progress={progress}
              hasAccess={isVip || hasAccess}
              onSelectLesson={handleSelectLesson}
            />
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/cursos/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Header } from "@/components/header"
import { CoursesHeader } from "@/components/courses/courses-header"
import { CourseCarousel } from "@/components/courses/course-carousel"
import { UpgradeModal } from "@/components/courses/upgrade-modal"
import { RankingBanner } from "@/components/ranking/ranking-banner"
import { IntroVideoModal } from "@/components/courses/intro-video-modal"
import { useUserPlan } from "@/hooks/use-user-plan"
import { getCoursesGroupedByCategory, type Course, type CourseCategory } from "@/lib/courses-api"
import { Loader2, BookOpen } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function CursosPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [courseGroups, setCourseGroups] = useState<{ category: CourseCategory; courses: Course[] }[]>([])
  const [loading, setLoading] = useState(true)
  const [upgradeModalOpen, setUpgradeModalOpen] = useState(false)
  const [lockedCourse, setLockedCourse] = useState<string>()
  const [introModalOpen, setIntroModalOpen] = useState(false)
  const [hasSeenIntro, setHasSeenIntro] = useState(true)

const { plan, loading: planLoading } = useUserPlan()

useEffect(() => {
    async function loadData() {
      try {
        const groupsData = await getCoursesGroupedByCategory()
        setCourseGroups(groupsData)
      } catch (error) {
        console.error("Erro ao carregar dados:", error)
      } finally {
        setLoading(false)
      }
    }

loadData()
  }, [])

useEffect(() => {
    const introSeen = localStorage.getItem("afilia360_intro_seen")
    if (!introSeen) {
      setHasSeenIntro(false)
      setIntroModalOpen(true)
    }
  }, [])

const handleLockedCourse = (courseTitle: string) => {
    setLockedCourse(courseTitle)
    setUpgradeModalOpen(true)
  }

const handleIntroComplete = () => {
    setHasSeenIntro(true)
  }

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />
      <RankingBanner />

<main className="py-8 space-y-8">
        {loading || planLoading ? (
          <div className="flex items-center justify-center py-20">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        ) : courseGroups.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20 text-center">
            <BookOpen className="h-16 w-16 text-muted-foreground/50 mb-4" />
            <h2 className="text-xl font-semibold mb-2">Nenhum curso disponível</h2>
            <p className="text-muted-foreground mb-6">Os cursos estão sendo preparados. Volte em breve!</p>
            <Link href="/">
              <Button>Voltar ao Marketplace</Button>
            </Link>
          </div>
        ) : (
          // Carrosséis por categoria (trilha)
          courseGroups.map((group) => (
            <CourseCarousel
              key={group.category.id}
              category={group.category}
              courses={group.courses}
              userPlan={plan}
              onLockedCourse={handleLockedCourse}
            />
          ))
        )}
      </main>

<IntroVideoModal open={introModalOpen} onOpenChange={setIntroModalOpen} onComplete={handleIntroComplete} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/enviar-produto/page.tsx"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { Button } from "@/components/ui/button"
import {
  Package,
  CheckCircle2,
  XCircle,
  MessageCircle,
  TrendingUp,
  Shield,
  Clock,
  AlertTriangle,
  ExternalLink,
} from "lucide-react"

const requirements = [
  {
    icon: TrendingUp,
    title: "Produto Validado",
    description: "O produto precisa estar vendendo todos os dias com lucro no tráfego pago ou orgânico",
    required: true,
  },
  {
    icon: Clock,
    title: "Histórico de Vendas",
    description: "Mínimo de 30 dias de vendas consistentes para comprovar a validação",
    required: true,
  },
  {
    icon: Shield,
    title: "Qualidade do Produto",
    description: "Produto de qualidade com boas avaliações e baixo índice de reembolso",
    required: true,
  },
]

const notAccepted = [
  "Produtos recém criados sem validação",
  "Produtos sem histórico de vendas comprovado",
  "Produtos com alto índice de reembolso",
  "Produtos que violam políticas de plataformas",
]

export default function EnviarProdutoPage() {
  const [searchQuery, setSearchQuery] = useState("")

const whatsappNumber = "5562981614462"
  const whatsappMessage = encodeURIComponent(
    "Olá Rodrigo! Gostaria de submeter meu produto para análise no AFILIA360. O produto está validado e vendendo diariamente.",
  )
  const whatsappLink = `https://wa.me/${whatsappNumber}?text=${whatsappMessage}`

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

<div className="max-w-4xl mx-auto px-4 py-12">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 border-2 border-green-500/30">
            <Package className="h-10 w-10 text-green-500" />
          </div>
          <h1 className="text-4xl font-bold mb-4">Envie seu Produto</h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Tem um produto validado que está vendendo bem? Submeta para análise e faça parte do catálogo AFILIA360
          </p>
        </div>

{/* Requirements */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
            <CheckCircle2 className="h-6 w-6 text-green-500" />
            Requisitos Obrigatórios
          </h2>

<div className="grid gap-4">
            {requirements.map((req, index) => (
              <div
                key={index}
                className="flex items-start gap-4 p-4 rounded-xl border border-green-500/30 bg-green-500/5"
              >
                <div className="h-10 w-10 rounded-lg bg-green-500/20 flex items-center justify-center flex-shrink-0">
                  <req.icon className="h-5 w-5 text-green-500" />
                </div>
                <div>
                  <h3 className="font-semibold mb-1">{req.title}</h3>
                  <p className="text-sm text-muted-foreground">{req.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

{/* Not Accepted */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
            <XCircle className="h-6 w-6 text-red-500" />
            Não Aceitamos
          </h2>

<div className="p-6 rounded-xl border border-red-500/30 bg-red-500/5">
            <ul className="space-y-3">
              {notAccepted.map((item, index) => (
                <li key={index} className="flex items-center gap-3">
                  <XCircle className="h-5 w-5 text-red-500 flex-shrink-0" />
                  <span className="text-foreground/90">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

{/* Process */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-6">Como Funciona</h2>

<div className="grid md:grid-cols-3 gap-4">
            <div className="text-center p-6 rounded-xl border border-border bg-card">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <span className="text-xl font-bold text-primary">1</span>
              </div>
              <h3 className="font-semibold mb-2">Entre em Contato</h3>
              <p className="text-sm text-muted-foreground">Envie uma mensagem pelo WhatsApp com os dados do produto</p>
            </div>

<div className="text-center p-6 rounded-xl border border-border bg-card">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <span className="text-xl font-bold text-primary">2</span>
              </div>
              <h3 className="font-semibold mb-2">Análise Detalhada</h3>
              <p className="text-sm text-muted-foreground">
                Rodrigo Tannus irá analisar se o produto se encaixa no perfil
              </p>
            </div>

<div className="text-center p-6 rounded-xl border border-border bg-card">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <span className="text-xl font-bold text-primary">3</span>
              </div>
              <h3 className="font-semibold mb-2">Aprovação</h3>
              <p className="text-sm text-muted-foreground">Se aprovado, seu produto entra no catálogo exclusivo</p>
            </div>
          </div>
        </div>

{/* Warning */}
        <div className="mb-12 p-6 rounded-xl border border-yellow-500/30 bg-yellow-500/5">
          <div className="flex items-start gap-4">
            <AlertTriangle className="h-6 w-6 text-yellow-500 flex-shrink-0 mt-0.5" />
            <div>
              <h3 className="font-semibold mb-2 text-yellow-500">Importante</h3>
              <p className="text-sm text-muted-foreground">
                Todos os produtos passam por uma análise criteriosa. Apenas produtos com histórico comprovado de vendas
                e validação real serão aceitos. Isso garante a qualidade do catálogo para todos os afiliados.
              </p>
            </div>
          </div>
        </div>

{/* CTA */}
        <div className="text-center">
          <a href={whatsappLink} target="_blank" rel="noopener noreferrer">
            <Button
              size="lg"
              className="bg-green-600 hover:bg-green-700 text-white font-bold text-lg px-10 py-6 h-auto shadow-lg hover:shadow-xl transition-all hover:scale-105"
            >
              <MessageCircle className="h-5 w-5 mr-2" />
              Enviar Produto via WhatsApp
              <ExternalLink className="h-4 w-4 ml-2" />
            </Button>
          </a>

<p className="mt-4 text-sm text-muted-foreground">
            Você será redirecionado para o WhatsApp de Rodrigo Tannus
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.17 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.21 0 0);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.21 0 0);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.95 0 0);
  --primary-foreground: oklch(0.17 0 0);
  --secondary: oklch(0.27 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.27 0 0);
  --muted-foreground: oklch(0.60 0 0);
  --accent: oklch(0.65 0.18 264);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.60 0.14 38);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.30 0 0);
  --input: oklch(0.27 0 0);
  --ring: oklch(0.65 0.18 264);
  --radius: 0.75rem;
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --radius-premium: 1.1rem;
  --shadow-lux-sm: 0 10px 30px -18px rgba(129, 140, 248, 0.55);
  --shadow-lux-md: 0 22px 60px -30px rgba(99, 102, 241, 0.45);
  --shadow-lux-lg: 0 35px 90px -42px rgba(14, 165, 233, 0.42);
  --gradient-surface-premium:
    linear-gradient(145deg, rgba(24, 24, 27, 0.94) 0%, rgba(22, 28, 49, 0.9) 52%, rgba(30, 27, 62, 0.88) 100%);
  --gradient-hero-premium:
    radial-gradient(circle at 10% 0%, rgba(129, 140, 248, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 90% 5%, rgba(14, 165, 233, 0.2) 0%, transparent 40%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.96) 0%, rgba(30, 41, 59, 0.92) 55%, rgba(49, 46, 129, 0.88) 100%);
  --title-content-hero: clamp(1.9rem, 1.6rem + 1.1vw, 2.7rem);
  --title-content-section: clamp(1.45rem, 1.25rem + 0.55vw, 1.95rem);
  --title-content-card: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  --shadow-lux-sm: 0 10px 30px -16px rgba(99, 102, 241, 0.4);
  --shadow-lux-md: 0 22px 60px -28px rgba(79, 70, 229, 0.38);
  --shadow-lux-lg: 0 35px 90px -40px rgba(14, 165, 233, 0.32);
  --gradient-surface-premium:
    linear-gradient(145deg, rgba(9, 9, 11, 0.95) 0%, rgba(15, 23, 42, 0.91) 52%, rgba(30, 27, 62, 0.86) 100%);
  --gradient-hero-premium:
    radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 90% 5%, rgba(8, 145, 178, 0.25) 0%, transparent 40%),
    linear-gradient(135deg, rgba(3, 7, 18, 0.98) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(30, 27, 75, 0.92) 100%);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 34%),
      radial-gradient(circle at 90% 12%, rgba(14, 165, 233, 0.1) 0%, transparent 30%),
      radial-gradient(circle at 50% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 30%);
    background-attachment: fixed;
  }
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Adicionando animação do ticker para a faixa de avisos */
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.33%);
  }
}

@layer utilities {
  .premium-surface {
    background: var(--gradient-surface-premium);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-lux-md);
    backdrop-filter: blur(14px);
  }

.premium-hero {
    background: var(--gradient-hero-premium);
    border-radius: calc(var(--radius-premium) + 0.25rem);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-lux-lg);
  }

.premium-title-hero {
    font-size: var(--title-content-hero);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
  }

.premium-title-section {
    font-size: var(--title-content-section);
    line-height: 1.16;
    letter-spacing: -0.015em;
    font-weight: 650;
  }

.premium-title-card {
    font-size: var(--title-content-card);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 600;
  }

.brand-surface {
    background: linear-gradient(140deg, rgba(24, 24, 27, 0.86), rgba(15, 23, 42, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

.brand-highlight {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(14, 165, 233, 0.28), rgba(168, 85, 247, 0.24));
  }

/* Velocidade 1s no mobile (era 2.5s) */
  .animate-ticker {
    animation: ticker 1s linear infinite;
  }

@media (min-width: 768px) {
    .animate-ticker {
      animation: ticker 10s linear infinite;
    }
  }
}

@layer utilities {
  .prose-editorial {
    max-width: 70ch;
    margin-inline: auto;
    color: rgba(244, 244, 245, 0.92);
    line-height: 1.9;
    font-size: 1.04rem;
    letter-spacing: 0.005em;
  }

.prose-editorial :where(p, li) {
    color: rgba(228, 228, 231, 0.9);
    margin-top: 1.15em;
    margin-bottom: 1.15em;
  }

.prose-editorial :where(h2, h3, h4) {
    color: rgba(250, 250, 250, 0.98);
    letter-spacing: -0.015em;
    margin-top: 1.75em;
    margin-bottom: 0.65em;
  }

.prose-editorial h2 {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
  }

.prose-editorial h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  }

.prose-editorial :where(a) {
    color: rgb(103 232 249 / 95%);
    text-decoration-color: rgb(103 232 249 / 55%);
    text-decoration-thickness: 1.5px;
    transition: color 150ms ease, text-decoration-color 150ms ease;
  }

.prose-editorial :where(a:hover) {
    color: rgb(196 181 253 / 95%);
    text-decoration-color: rgb(196 181 253 / 70%);
  }

.prose-editorial :where(strong) {
    color: rgb(250 250 250 / 98%);
    font-weight: 650;
  }

.prose-editorial :where(blockquote) {
    border-left: 2px solid rgb(148 163 184 / 35%);
    color: rgb(228 228 231 / 85%);
    background: linear-gradient(90deg, rgb(255 255 255 / 3%), transparent 70%);
    padding: 0.3rem 0 0.3rem 1rem;
    margin-inline: 0;
  }

.prose-editorial :where(code) {
    color: rgb(250 250 250 / 98%);
    background-color: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: 0.45rem;
    padding: 0.1rem 0.35rem;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Analytics } from "@vercel/analytics/next"
import { AuthGuard } from "@/components/auth-guard"
import "./globals.css"

export const metadata: Metadata = {
  title: "AFILIA360 | Marketplace de Produtos Validados",
  description:
    "Marketplace de produtos validados para afiliados. Encontre os melhores produtos com métricas reais e comissões atrativas.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt-BR" className="dark">
      <body className="antialiased">
        <AuthGuard>{children}</AuthGuard>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Mail, Lock, AlertCircle, ArrowLeft, CheckCircle, Eye, EyeOff } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [showForgotPassword, setShowForgotPassword] = useState(false)
  const [forgotEmail, setForgotEmail] = useState("")
  const [forgotSuccess, setForgotSuccess] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const router = useRouter()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

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

const data = await response.json()

if (!response.ok) {
        setError(data.error || "Erro ao fazer login")
        setIsLoading(false)
        return
      }

localStorage.setItem(
        "affiliate_session",
        JSON.stringify({
          id: data.user.id,
          name: data.user.name,
          email: data.user.email,
          loggedIn: true,
          isAdmin: data.user.isAdmin,
          photoUrl: data.user.photoUrl,
          onboardingCompleted: data.user.onboardingCompleted,
        }),
      )

if (!data.user.onboardingCompleted) {
        router.push("/bem-vindo")
      } else {
        router.push("/")
      }
      router.refresh()
    } catch (err) {
      console.error("Erro no login:", err)
      setError("Erro ao fazer login. Tente novamente.")
    } finally {
      setIsLoading(false)
    }
  }

const handleForgotPassword = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

const supabase = createClient()

try {
      // Verificar se o email existe no sistema
      const { data: affiliate, error: affiliateError } = await supabase
        .from("affiliates")
        .select("id, email, name")
        .eq("email", forgotEmail)
        .maybeSingle()

if (affiliateError) {
        setError("Erro ao verificar email. Tente novamente.")
        setIsLoading(false)
        return
      }

if (!affiliate) {
        setError("Email não encontrado no sistema.")
        setIsLoading(false)
        return
      }

// Gerar token de recuperação
      const token = crypto.randomUUID()
      const expiresAt = new Date()
      expiresAt.setHours(expiresAt.getHours() + 1) // Token válido por 1 hora

// Salvar token no banco
      const { error: tokenError } = await supabase.from("password_reset_tokens").upsert(
        {
          affiliate_id: affiliate.id,
          token,
          expires_at: expiresAt.toISOString(),
        },
        { onConflict: "affiliate_id" },
      )

if (tokenError) {
        console.error("Erro ao criar token:", tokenError)
        setError("Erro ao processar solicitação. Tente novamente.")
        setIsLoading(false)
        return
      }

// Mostrar mensagem de sucesso com o link
      setForgotSuccess(true)

// Em produção, aqui enviaria um email com o link
      // Por enquanto, exibe o link para o usuário copiar
      console.log(`Link de recuperação: /recuperar-senha?token=${token}`)
    } catch (err) {
      console.error("Erro ao recuperar senha:", err)
      setError("Erro ao processar solicitação. Tente novamente.")
    } finally {
      setIsLoading(false)
    }
  }

if (showForgotPassword) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4">
              <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
                AFILIA360
              </span>
            </div>
            <CardTitle className="text-xl">Recuperar Senha</CardTitle>
            <CardDescription>
              {forgotSuccess ? "Instruções enviadas com sucesso!" : "Digite seu email para recuperar a senha"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {forgotSuccess ? (
              <div className="space-y-4">
                <div className="flex items-center gap-2 text-sm text-emerald-500 bg-emerald-500/10 p-4 rounded-lg">
                  <CheckCircle className="h-5 w-5 flex-shrink-0" />
                  <div>
                    <p className="font-medium">Email enviado!</p>
                    <p className="text-muted-foreground mt-1">
                      Se o email estiver cadastrado, você receberá um link para redefinir sua senha. Verifique também a
                      caixa de spam.
                    </p>
                  </div>
                </div>
                <Button
                  variant="outline"
                  className="w-full bg-transparent"
                  onClick={() => {
                    setShowForgotPassword(false)
                    setForgotSuccess(false)
                    setForgotEmail("")
                  }}
                >
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Voltar ao login
                </Button>
              </div>
            ) : (
              <form onSubmit={handleForgotPassword} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="forgot-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="forgot-email"
                      type="email"
                      placeholder="seu@email.com"
                      value={forgotEmail}
                      onChange={(e) => setForgotEmail(e.target.value)}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>

{error && (
                  <div className="flex items-center gap-2 text-sm text-red-500 bg-red-500/10 p-3 rounded-lg">
                    <AlertCircle className="h-4 w-4 flex-shrink-0" />
                    {error}
                  </div>
                )}

<Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Enviando...
                    </>
                  ) : (
                    "Enviar link de recuperação"
                  )}
                </Button>

<Button
                  type="button"
                  variant="ghost"
                  className="w-full"
                  onClick={() => {
                    setShowForgotPassword(false)
                    setError(null)
                  }}
                >
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Voltar ao login
                </Button>
              </form>
            )}
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4">
            <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
              AFILIA360
            </span>
          </div>
          <CardTitle className="text-xl">Entrar na sua conta</CardTitle>
          <CardDescription>Acesse o marketplace de produtos validados</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="email"
                  type="email"
                  placeholder="seu@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="password">Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  placeholder="Sua senha"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="pl-10 pr-10"
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
              <div className="text-right">
                <button
                  type="button"
                  onClick={() => {
                    setShowForgotPassword(true)
                    setError(null)
                  }}
                  className="text-sm text-primary hover:underline"
                >
                  Esqueci minha senha
                </button>
              </div>
            </div>

{error && (
              <div className="flex items-center gap-2 text-sm text-red-500 bg-red-500/10 p-3 rounded-lg">
                <AlertCircle className="h-4 w-4 flex-shrink-0" />
                {error}
              </div>
            )}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Entrando...
                </>
              ) : (
                "Entrar"
              )}
            </Button>

<div className="text-center space-y-2">
              <p className="text-sm text-muted-foreground">
                Ainda não tem conta?{" "}
                <Link href="/cadastro" className="text-primary hover:underline">
                  Cadastre-se
                </Link>
              </p>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/[id]/news-detail-client.tsx"
"use client"

import { useEffect, useState } from "react"
import type { NewsPost } from "@/components/news-card"
import { isFullHtml } from "@/components/news-card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ArrowLeft, BookOpen, Megaphone, Palette, CalendarDays, Tag, Maximize2, PlayCircle } from "lucide-react"
import Link from "next/link"

const categoryConfig = {
  update: {
    label: "Atualização",
    icon: Megaphone,
    gradient: "from-blue-950 to-zinc-900",
    badge: "border-blue-500/40 bg-blue-500/15 text-blue-400",
    bar: "bg-blue-500",
  },
  lesson: {
    label: "Nova Aula",
    icon: PlayCircle,
    gradient: "from-violet-950 to-zinc-900",
    badge: "border-violet-500/40 bg-violet-500/15 text-violet-400",
    bar: "bg-violet-500",
  },
  creative: {
    label: "Criativo",
    icon: Palette,
    gradient: "from-amber-950 to-zinc-900",
    badge: "border-amber-500/40 bg-amber-500/15 text-amber-400",
    bar: "bg-amber-500",
  },
}

export function NewsDetailClient({ post }: { post: NewsPost }) {
  const cfg = categoryConfig[post.category]
  const Icon = cfg.icon
  const isHtml = isFullHtml(post.content)
  const [fullscreen, setFullscreen] = useState(false)

// Scroll to top ao montar
  useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }) }, [])

// Fecha fullscreen com Escape
  useEffect(() => {
    if (!fullscreen) return
    function onKey(e: KeyboardEvent) { if (e.key === "Escape") setFullscreen(false) }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [fullscreen])

// Se for HTML completo e fullscreen estiver ativo
  if (fullscreen && isHtml && post.content) {
    return (
      <div className="fixed inset-0 z-[100] flex flex-col bg-black" role="dialog" aria-modal="true" aria-label={post.title}>
        <div className="flex shrink-0 items-center justify-between border-b border-white/10 bg-black/80 px-4 py-2.5 backdrop-blur-sm">
          <div className="flex items-center gap-3">
            <Badge variant="outline" className={`px-2 py-0.5 text-[10px] font-semibold ${cfg.badge}`}>
              {cfg.label}
            </Badge>
            <span className="max-w-xs truncate text-sm font-medium text-white/80">{post.title}</span>
          </div>
          <button
            onClick={() => setFullscreen(false)}
            className="flex h-8 w-8 items-center justify-center rounded-md text-white/50 transition-colors hover:bg-white/10 hover:text-white"
            aria-label="Fechar fullscreen"
          >
            <ArrowLeft className="h-4 w-4" />
          </button>
        </div>
        <iframe
          srcDoc={post.content}
          title={post.title}
          className="h-full w-full flex-1 border-0"
          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
        />
      </div>
    )
  }

return (
    <main className="mx-auto max-w-3xl px-4 py-8 sm:px-6">
      {/* Voltar */}
      <Link
        href="/novidades"
        className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
      >
        <ArrowLeft className="h-4 w-4" />
        Voltar para Novidades
      </Link>

{/* Capa */}
      <div className="relative mb-8 w-full overflow-hidden rounded-2xl border border-border bg-secondary" style={{ aspectRatio: "16/9" }}>
        {post.cover_image ? (
          <img src={post.cover_image} alt={post.title} className="h-full w-full object-cover" />
        ) : (
          <div className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${cfg.gradient}`}>
            <Icon className="h-24 w-24 text-white/10" />
          </div>
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
        {/* Accent bar */}
        <div className={`absolute left-0 top-0 h-full w-1 ${cfg.bar}`} />
      </div>

{/* Meta */}
      <div className="mb-5 flex flex-wrap items-center gap-3">
        <Badge variant="outline" className={`gap-1.5 px-2.5 py-1 text-xs font-medium ${cfg.badge}`}>
          <Icon className="h-3 w-3" />
          {cfg.label}
        </Badge>
        <span className="flex items-center gap-1 text-xs text-muted-foreground">
          <CalendarDays className="h-3 w-3" />
          {new Date(post.created_at).toLocaleDateString("pt-BR", { day: "2-digit", month: "long", year: "numeric" })}
        </span>
        {isHtml && (
          <Badge variant="outline" className="border-white/15 bg-secondary px-2 py-0.5 text-[10px] font-semibold text-muted-foreground">
            Conteúdo HTML
          </Badge>
        )}
      </div>

{/* Título */}
      <h1 className="mb-3 text-3xl font-bold leading-snug text-foreground text-pretty">{post.title}</h1>

{/* Descrição */}
      {post.description && (
        <p className="mb-6 text-base leading-relaxed text-muted-foreground">{post.description}</p>
      )}

{/* Tags */}
      {post.tags && post.tags.length > 0 && (
        <div className="mb-8 flex flex-wrap items-center gap-2">
          <Tag className="h-3.5 w-3.5 text-muted-foreground/60" />
          {post.tags.map((tag) => (
            <span key={tag} className="rounded-full bg-secondary px-3 py-1 text-xs text-muted-foreground">
              #{tag}
            </span>
          ))}
        </div>
      )}

{/* Botão abrir fullscreen para HTML completo */}
      {isHtml && post.content && (
        <div className="mb-8 overflow-hidden rounded-xl border border-border bg-card">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/15">
                <PlayCircle className="h-4.5 w-4.5 text-violet-400" />
              </div>
              <div>
                <p className="text-sm font-medium">Esta aula contém conteúdo interativo</p>
                <p className="text-xs text-muted-foreground">Abre em tela cheia para melhor experiência</p>
              </div>
            </div>
            <Button
              size="sm"
              className="gap-2"
              onClick={() => setFullscreen(true)}
            >
              <Maximize2 className="h-3.5 w-3.5" />
              Abrir Aula
            </Button>
          </div>

{/* Preview compacto */}
          <div className="border-t border-border">
            <iframe
              srcDoc={post.content}
              title={post.title}
              className="h-64 w-full border-0 sm:h-80"
              sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
            />
          </div>
        </div>
      )}

{/* Conteúdo HTML de blog (não fullscreen) */}
      {post.content && !isHtml && (
        <div
          className="prose prose-invert prose-sm max-w-none leading-relaxed text-foreground/90 [&_h2]:mb-3 [&_h2]:mt-8 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mb-2 [&_h3]:mt-6 [&_h3]:text-base [&_h3]:font-medium [&_p]:mb-4 [&_p]:leading-7 [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:mb-1.5 [&_a]:text-primary [&_a]:underline [&_blockquote]:my-6 [&_blockquote]:border-l-4 [&_blockquote]:border-primary/40 [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_code]:rounded [&_code]:bg-secondary [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-xs [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-secondary [&_pre]:p-4 [&_hr]:my-8 [&_hr]:border-border [&_img]:rounded-xl [&_table]:w-full [&_th]:border [&_th]:border-border [&_th]:p-2 [&_th]:text-left [&_td]:border [&_td]:border-border [&_td]:p-2"
          dangerouslySetInnerHTML={{ __html: post.content }}
        />
      )}

<div className="mt-12 border-t border-border pt-6">
        <Link href="/novidades">
          <Button variant="outline" className="gap-2">
            <ArrowLeft className="h-4 w-4" />
            Ver mais novidades
          </Button>
        </Link>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/[id]/page.tsx"
import { getNewsPost } from "@/lib/novidades-api"
import { notFound } from "next/navigation"
import { Header } from "@/components/header"
import { AuthGuard } from "@/components/auth-guard"
import { NewsDetailClient } from "./news-detail-client"

export default async function NewsDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const post = await getNewsPost(id)
  if (!post) notFound()

return (
    <AuthGuard>
      <div className="min-h-screen bg-background">
        <Header searchQuery="" onSearchChange={() => {}} />
        <NewsDetailClient post={post} />
      </div>
    </AuthGuard>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/live/[id]/live-detail-client.tsx"
"use client"

import { useState } from "react"
import type { Live, LiveMaterial } from "@/components/live-card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ArrowLeft, Radio, CalendarDays, ExternalLink, FileText, Globe, Link2, Download, X } from "lucide-react"
import Link from "next/link"

const statusConfig = {
  upcoming: { label: "Em Breve", badgeClass: "border-amber-500/40 bg-amber-500/15 text-amber-400", dotClass: "bg-amber-500", pulse: false },
  live: { label: "Ao Vivo", badgeClass: "border-red-500/40 bg-red-500/20 text-red-400", dotClass: "bg-red-500", pulse: true },
  ended: { label: "Encerrada", badgeClass: "border-zinc-500/40 bg-zinc-500/10 text-zinc-400", dotClass: "bg-zinc-500", pulse: false },
}

const materialIcon = { pdf: FileText, html: Globe, link: Link2 }
const materialLabel = { pdf: "PDF", html: "Página Web", link: "Link Externo" }
const materialColor = {
  pdf: "border-red-500/30 bg-red-500/10 text-red-400",
  html: "border-blue-500/30 bg-blue-500/10 text-blue-400",
  link: "border-zinc-500/30 bg-zinc-500/10 text-zinc-400",
}

export function LiveDetailClient({ live }: { live: Live }) {
  const cfg = statusConfig[live.status]
  const [htmlContent, setHtmlContent] = useState<{ name: string; url: string } | null>(null)

const handleOpenMaterial = (mat: LiveMaterial) => {
    if (mat.type === "html") {
      setHtmlContent({ name: mat.name, url: mat.url })
    } else {
      window.open(mat.url, "_blank", "noopener,noreferrer")
    }
  }

return (
    <main className="mx-auto max-w-4xl px-4 py-8 sm:px-6">
      {/* Back */}
      <Link href="/novidades?tab=lives" className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
        <ArrowLeft className="h-4 w-4" />
        Voltar para Novidades
      </Link>

{/* Hero cover */}
      <div className="relative mb-8 overflow-hidden rounded-2xl border border-border bg-secondary">
        <div className="relative h-72 w-full sm:h-96">
          {live.cover_image ? (
            <img src={live.cover_image} alt={live.title} className="h-full w-full object-cover" />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-red-900/60 to-zinc-900 flex items-center justify-center">
              <Radio className="h-24 w-24 text-white/10" />
            </div>
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />

{/* Status */}
          <div className="absolute left-5 top-5">
            <Badge variant="outline" className={`gap-1.5 px-3 py-1 text-sm font-semibold ${cfg.badgeClass}`}>
              <span className="relative flex h-2 w-2">
                {cfg.pulse && <span className={`absolute inline-flex h-full w-full animate-ping rounded-full ${cfg.dotClass} opacity-75`} />}
                <span className={`relative inline-flex h-2 w-2 rounded-full ${cfg.dotClass}`} />
              </span>
              {cfg.label}
            </Badge>
          </div>

{/* Title + CTA over image */}
          <div className="absolute bottom-0 left-0 right-0 p-6">
            <h1 className="mb-2 text-2xl font-bold text-white sm:text-3xl text-balance">{live.title}</h1>
            {live.scheduled_at && (
              <p className="mb-4 flex items-center gap-1.5 text-sm text-white/60">
                <CalendarDays className="h-4 w-4" />
                {new Date(live.scheduled_at).toLocaleString("pt-BR", { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" })}
              </p>
            )}
            {live.stream_url && live.status !== "upcoming" && (
              <a href={live.stream_url} target="_blank" rel="noopener noreferrer">
                <Button className={`gap-2 ${live.status === "live" ? "bg-red-600 hover:bg-red-700 text-white" : ""}`}>
                  {live.status === "live"
                    ? <><Radio className="h-4 w-4 animate-pulse" /> Assistir Agora</>
                    : <><ExternalLink className="h-4 w-4" /> Ver Gravação</>
                  }
                </Button>
              </a>
            )}
            {live.status === "upcoming" && live.stream_url && (
              <a href={live.stream_url} target="_blank" rel="noopener noreferrer">
                <Button variant="outline" className="gap-2 border-white/20 bg-white/10 text-white hover:bg-white/20">
                  <ExternalLink className="h-4 w-4" />
                  Acessar Link da Live
                </Button>
              </a>
            )}
          </div>
        </div>
      </div>

{/* Description */}
      {live.description && (
        <p className="mb-8 text-base leading-relaxed text-muted-foreground">{live.description}</p>
      )}

{/* Materials */}
      {live.materials.length > 0 && (
        <section>
          <div className="mb-4 flex items-center gap-2">
            <FileText className="h-4 w-4 text-primary/70" />
            <h2 className="text-lg font-semibold">Materiais Complementares</h2>
            <span className="rounded-full bg-secondary px-2 py-0.5 text-xs text-muted-foreground">
              {live.materials.length}
            </span>
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            {live.materials.map((mat) => {
              const MatIcon = materialIcon[mat.type] ?? Link2
              return (
                <button
                  key={mat.id}
                  onClick={() => handleOpenMaterial(mat)}
                  className={`group flex items-center gap-4 rounded-xl border p-4 text-left transition-all hover:brightness-110 hover:-translate-y-0.5 ${materialColor[mat.type]}`}
                >
                  <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border ${materialColor[mat.type]}`}>
                    <MatIcon className="h-5 w-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-medium text-foreground line-clamp-1">{mat.name}</p>
                    <p className="text-xs text-muted-foreground">{materialLabel[mat.type]}</p>
                  </div>
                  {mat.type === "pdf" ? (
                    <Download className="h-4 w-4 shrink-0 opacity-60 group-hover:opacity-100" />
                  ) : (
                    <ExternalLink className="h-4 w-4 shrink-0 opacity-60 group-hover:opacity-100" />
                  )}
                </button>
              )
            })}
          </div>
        </section>
      )}

{live.materials.length === 0 && (
        <div className="flex flex-col items-center justify-center rounded-xl border border-border py-12 text-center">
          <FileText className="mb-3 h-10 w-10 text-muted-foreground/30" />
          <p className="text-sm text-muted-foreground">Nenhum material disponível para esta live</p>
        </div>
      )}

{/* HTML Material Modal */}
      <Dialog open={!!htmlContent} onOpenChange={() => setHtmlContent(null)}>
        <DialogContent className="max-w-4xl h-[85vh] p-0 overflow-hidden flex flex-col">
          <DialogHeader className="flex flex-row items-center justify-between border-b border-border px-5 py-3">
            <DialogTitle className="flex items-center gap-2 text-sm font-medium">
              <Globe className="h-4 w-4 text-blue-400" />
              {htmlContent?.name}
            </DialogTitle>
          </DialogHeader>
          {htmlContent && (
            <iframe
              src={htmlContent.url}
              className="flex-1 w-full border-0 bg-white"
              title={htmlContent.name}
              sandbox="allow-scripts allow-same-origin"
            />
          )}
        </DialogContent>
      </Dialog>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/live/[id]/page.tsx"
import { getLive } from "@/lib/novidades-api"
import { notFound } from "next/navigation"
import { Header } from "@/components/header"
import { AuthGuard } from "@/components/auth-guard"
import { LiveDetailClient } from "./live-detail-client"

export default async function LiveDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const live = await getLive(id)
  if (!live) notFound()

return (
    <AuthGuard>
      <div className="min-h-screen bg-background">
        <Header searchQuery="" onSearchChange={() => {}} />
        <LiveDetailClient live={live} />
      </div>
    </AuthGuard>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/novidades-client.tsx"
"use client"

import { useState, useEffect, useCallback } from "react"
import type { NewsPost } from "@/components/news-card"
import { isFullHtml } from "@/components/news-card"
import type { Live } from "@/components/live-card"
import { NewsCard } from "@/components/news-card"
import { LiveCard } from "@/components/live-card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  BookOpen, Megaphone, Palette, Radio, Sparkles,
  LayoutGrid, X, Maximize2, Radio as RadioIcon,
  PlayCircle, ArrowRight,
} from "lucide-react"
import Link from "next/link"

type Tab = "todos" | "update" | "lesson" | "creative" | "lives"

const tabs: { key: Tab; label: string; icon: React.ElementType }[] = [
  { key: "todos", label: "Todos", icon: LayoutGrid },
  { key: "update", label: "Atualizações", icon: Megaphone },
  { key: "lesson", label: "Novas Aulas", icon: BookOpen },
  { key: "creative", label: "Criativos", icon: Palette },
  { key: "lives", label: "Lives", icon: Radio },
]

interface Props {
  initialPosts: NewsPost[]
  initialLives: Live[]
}

// ── Modal HTML fullscreen ─────────────────────────────────────────────────────

function HtmlModal({ post, onClose }: { post: NewsPost; onClose: () => void }) {
  // Fecha ao pressionar Escape
  useEffect(() => {
    function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose() }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [onClose])

// Cria blob URL a partir do conteúdo HTML
  const srcDoc = post.content ?? ""

return (
    <div
      className="fixed inset-0 z-[100] flex flex-col bg-black"
      role="dialog"
      aria-modal="true"
      aria-label={post.title}
    >
      {/* Barra superior */}
      <div className="flex shrink-0 items-center justify-between border-b border-white/10 bg-black/80 px-4 py-2.5 backdrop-blur-sm">
        <div className="flex items-center gap-3">
          <Badge variant="outline" className="border-violet-500/40 bg-violet-500/15 px-2 py-0.5 text-[10px] font-semibold text-violet-400">
            {post.category === "lesson" ? "Aula" : post.category === "creative" ? "Criativo" : "Post"}
          </Badge>
          <span className="max-w-xs truncate text-sm font-medium text-white/80">{post.title}</span>
        </div>
        <div className="flex items-center gap-2">
          <a
            href={`/novidades/${post.id}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white"
          >
            <Maximize2 className="h-3.5 w-3.5" />
            Abrir em nova aba
          </a>
          <button
            onClick={onClose}
            className="flex h-8 w-8 items-center justify-center rounded-md text-white/50 transition-colors hover:bg-white/10 hover:text-white"
            aria-label="Fechar"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>

{/* iframe fullscreen */}
      <iframe
        srcDoc={srcDoc}
        title={post.title}
        className="h-full w-full flex-1 border-0"
        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
      />
    </div>
  )
}

// ── Hero card (primeiro post em destaque) ─────────────────────────────────────

function HeroPost({ post, onOpenHtml }: { post: NewsPost; onOpenHtml: (p: NewsPost) => void }) {
  const isHtml = isFullHtml(post.content)
  const isLesson = post.category === "lesson"

const categoryStyles = {
    update: { badge: "border-blue-500/40 bg-blue-500/15 text-blue-400", bar: "bg-blue-500", icon: Megaphone, label: "Atualização" },
    lesson: { badge: "border-violet-500/40 bg-violet-500/15 text-violet-400", bar: "bg-violet-500", icon: PlayCircle, label: "Nova Aula" },
    creative: { badge: "border-amber-500/40 bg-amber-500/15 text-amber-400", bar: "bg-amber-500", icon: Palette, label: "Criativo" },
  }
  const cfg = categoryStyles[post.category]
  const CatIcon = cfg.icon

function handleClick(e: React.MouseEvent) {
    if (isHtml && onOpenHtml) {
      e.preventDefault()
      onOpenHtml(post)
    }
  }

return (
    <Link href={`/novidades/${post.id}`} onClick={handleClick} className="group block">
      <article className="relative overflow-hidden rounded-2xl border border-border bg-card ring-1 ring-transparent transition-all duration-300 hover:ring-white/10">
        {/* Capa fullwidth */}
        <div className="relative h-[340px] w-full overflow-hidden sm:h-[420px]">
          {post.cover_image ? (
            <img
              src={post.cover_image}
              alt={post.title}
              className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
            />
          ) : (
            <div className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${
              post.category === "lesson" ? "from-violet-950 via-violet-900/50 to-zinc-900"
              : post.category === "creative" ? "from-amber-950 via-amber-900/50 to-zinc-900"
              : "from-blue-950 via-blue-900/50 to-zinc-900"
            }`}>
              <CatIcon className="h-24 w-24 text-white/5" />
            </div>
          )}

{/* Gradiente esquerda → direita estilo editorial */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/95 via-black/50 to-transparent" />
          {/* Gradiente extra bottom */}
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />

{/* Conteúdo sobre a capa */}
          <div className="absolute inset-0 flex flex-col justify-end p-6 sm:justify-center sm:p-10">
            <div className="max-w-lg">
              <div className="mb-4 flex items-center gap-2">
                <Badge variant="outline" className={`gap-1.5 px-2.5 py-1 text-[11px] font-semibold ${cfg.badge}`}>
                  <CatIcon className="h-3 w-3" />
                  {cfg.label}
                </Badge>
                {isHtml && (
                  <Badge variant="outline" className="border-white/15 bg-white/10 px-2 py-0.5 text-[10px] font-semibold text-white/60">
                    HTML
                  </Badge>
                )}
              </div>

<h2 className="mb-3 text-2xl font-bold leading-tight text-white text-balance sm:text-3xl">
                {post.title}
              </h2>
              {post.description && (
                <p className="mb-5 text-sm leading-relaxed text-white/60 line-clamp-2 sm:text-base">
                  {post.description}
                </p>
              )}

<div className="flex items-center gap-3">
                <Button
                  size="sm"
                  className="gap-2 bg-white text-black hover:bg-white/90"
                >
                  {isLesson && isHtml ? (
                    <><PlayCircle className="h-3.5 w-3.5" /> Abrir Aula</>
                  ) : (
                    <><ArrowRight className="h-3.5 w-3.5" /> Ler agora</>
                  )}
                </Button>
                {post.tags && post.tags.length > 0 && (
                  <span className="text-xs text-white/40">
                    {post.tags.slice(0, 2).map(t => `#${t}`).join("  ")}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </article>
    </Link>
  )
}

// ── Main component ────────────────────────────────────────────────────────────

export function NovidadesClient({ initialPosts, initialLives }: Props) {
  const [activeTab, setActiveTab] = useState<Tab>("todos")
  const [htmlModal, setHtmlModal] = useState<NewsPost | null>(null)

const handleOpenHtml = useCallback((post: NewsPost) => setHtmlModal(post), [])
  const handleCloseModal = useCallback(() => setHtmlModal(null), [])

const liveLive = initialLives.find((l) => l.status === "live")
  const upcomingLives = initialLives.filter((l) => l.status === "upcoming")
  const endedLives = initialLives.filter((l) => l.status === "ended")

const filteredPosts =
    activeTab === "todos" || activeTab === "lives"
      ? initialPosts
      : initialPosts.filter((p) => p.category === activeTab)

const showLives = activeTab === "todos" || activeTab === "lives"
  const showPosts = activeTab !== "lives"

const heroPost = filteredPosts[0]
  const gridPosts = filteredPosts.slice(1, 5)
  const restPosts = filteredPosts.slice(5)

return (
    <>
      {/* Modal HTML fullscreen */}
      {htmlModal && <HtmlModal post={htmlModal} onClose={handleCloseModal} />}

{/* ── Page header ── */}
        <div className="mb-8 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-muted-foreground">Canal de</p>
            <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Novidades</h1>
            <p className="mt-1 text-sm text-muted-foreground">
              Aulas, criativos validados, transmissões e atualizações da plataforma
            </p>
          </div>
          {initialLives.some((l) => l.status === "live") && (
            <div className="mt-3 flex items-center gap-1.5 rounded-full border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-sm text-red-400 sm:mt-0">
              <span className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500" />
              </span>
              Live ao vivo agora
            </div>
          )}
        </div>

{/* ── Active live banner ── */}
        {liveLive && (
          <div className="relative mb-8 overflow-hidden rounded-2xl border border-red-500/25 bg-card">
            <div className="relative h-64 w-full overflow-hidden sm:h-72">
              {liveLive.cover_image ? (
                <img src={liveLive.cover_image} alt={liveLive.title} className="h-full w-full object-cover" />
              ) : (
                <div className="h-full w-full bg-gradient-to-br from-red-950 to-zinc-900" />
              )}
              <div className="absolute inset-0 bg-gradient-to-r from-black/95 via-black/60 to-transparent" />
            </div>
            <div className="absolute inset-0 flex flex-col justify-end p-6 sm:justify-center sm:p-10">
              <Badge
                variant="outline"
                className="mb-4 w-fit gap-2 border-red-500/40 bg-red-500/15 px-3 py-1 text-xs font-semibold text-red-400"
              >
                <span className="relative flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500" />
                </span>
                Ao Vivo Agora
              </Badge>
              <h2 className="mb-2 max-w-xl text-2xl font-bold leading-tight text-white text-balance sm:text-3xl">
                {liveLive.title}
              </h2>
              {liveLive.description && (
                <p className="mb-5 max-w-md text-sm leading-relaxed text-white/60 line-clamp-2">
                  {liveLive.description}
                </p>
              )}
              <div className="flex flex-wrap items-center gap-2">
                {liveLive.stream_url && (
                  <a href={liveLive.stream_url} target="_blank" rel="noopener noreferrer">
                    <Button size="sm" className="gap-2 bg-red-600 text-white hover:bg-red-700">
                      <RadioIcon className="h-3.5 w-3.5 animate-pulse" />
                      Assistir Agora
                    </Button>
                  </a>
                )}
                <Link href={`/novidades/live/${liveLive.id}`}>
                  <Button
                    size="sm"
                    variant="outline"
                    className="gap-2 border-white/15 bg-white/8 text-white/80 hover:bg-white/15 hover:text-white"
                  >
                    Materiais & Detalhes
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        )}

{/* ── Tabs ── */}
        <div className="mb-8 flex items-center gap-1 overflow-x-auto rounded-xl border border-border bg-card/60 p-1 no-scrollbar">
          {tabs.map(({ key, label, icon: Icon }) => (
            <button
              key={key}
              onClick={() => setActiveTab(key)}
              className={`flex shrink-0 items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-150 ${
                activeTab === key
                  ? "bg-background text-foreground shadow-sm"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              <Icon className="h-3.5 w-3.5 shrink-0" />
              <span>{label}</span>
              {key === "lives" && initialLives.length > 0 && (
                <span className="flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-red-500/20 px-1 text-[10px] font-bold text-red-400">
                  {initialLives.length}
                </span>
              )}
            </button>
          ))}
        </div>

{/* ── Lives section ── */}
        {showLives && initialLives.length > 0 && (
          <section className="mb-12">
            <div className="mb-5 flex items-center gap-2.5">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/15">
                <Radio className="h-3.5 w-3.5 text-red-400" />
              </div>
              <h2 className="text-base font-semibold">Transmissões</h2>
              <span className="text-sm text-muted-foreground">({initialLives.length})</span>
            </div>

{upcomingLives.length > 0 && (
              <div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {upcomingLives.map((live) => (
                  <LiveCard key={live.id} live={live} featured />
                ))}
              </div>
            )}

{endedLives.length > 0 && (
              <div>
                <p className="mb-3 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/60">
                  Anteriores
                </p>
                <div className="space-y-2">
                  {endedLives.slice(0, 5).map((live) => (
                    <LiveCard key={live.id} live={live} />
                  ))}
                </div>
              </div>
            )}
          </section>
        )}

{/* ── Empty state ── */}
        {showPosts && filteredPosts.length === 0 && (
          <div className="flex flex-col items-center justify-center py-24 text-center">
            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-card">
              <Sparkles className="h-8 w-8 text-muted-foreground/30" />
            </div>
            <p className="text-base font-medium text-muted-foreground">Nenhum conteúdo publicado ainda</p>
            <p className="mt-1.5 text-sm text-muted-foreground/50">Em breve novidades por aqui!</p>
          </div>
        )}

{/* ── Posts section ── */}
        {showPosts && filteredPosts.length > 0 && (
          <section>
            <div className="mb-6 flex items-center gap-2.5">
              <div className="flex h-7 w-7 items-center justify-center rounded-md bg-secondary">
                <Sparkles className="h-3.5 w-3.5 text-muted-foreground" />
              </div>
              <h2 className="text-base font-semibold">
                {activeTab === "todos"
                  ? "Todas as Novidades"
                  : activeTab === "update"
                  ? "Atualizações"
                  : activeTab === "lesson"
                  ? "Novas Aulas"
                  : "Criativos"}
              </h2>
              <span className="text-sm text-muted-foreground">({filteredPosts.length})</span>
            </div>

{/* Hero — primeiro post em destaque fullwidth */}
            {heroPost && (
              <div className="mb-6">
                <HeroPost post={heroPost} onOpenHtml={handleOpenHtml} />
              </div>
            )}

{/* Grid 2 colunas — próximos 4 posts */}
            {gridPosts.length > 0 && (
              <div className="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                {gridPosts.map((post) => (
                  <NewsCard key={post.id} post={post} featured onOpenHtml={handleOpenHtml} />
                ))}
              </div>
            )}

{/* Resto em lista compacta */}
            {restPosts.length > 0 && (
              <>
                <p className="mb-3 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/60">
                  Mais novidades
                </p>
                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                  {restPosts.map((post) => (
                    <NewsCard key={post.id} post={post} onOpenHtml={handleOpenHtml} />
                  ))}
                </div>
              </>
            )}
          </section>
        )}
      </main>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/novidades/page.tsx"
import { Suspense } from "react"
import { getNewsPosts } from "@/lib/novidades-api"
import { getLives } from "@/lib/novidades-api"
import { NovidadesClient } from "./novidades-client"
import { Header } from "@/components/header"
import { AuthGuard } from "@/components/auth-guard"

export const metadata = {
  title: "Novidades | Afilia360",
  description: "Atualizações, novas aulas, criativos e transmissões ao vivo da Afilia360",
}

export default async function NovidadesPage() {
  const [posts, lives] = await Promise.all([getNewsPosts(), getLives()])

return (
    <AuthGuard>
      <div className="min-h-screen bg-background">
        <Header searchQuery="" onSearchChange={() => {}} />
        <Suspense fallback={<div className="flex h-96 items-center justify-center text-muted-foreground">Carregando...</div>}>
          <NovidadesClient initialPosts={posts} initialLives={lives} />
        </Suspense>
      </div>
    </AuthGuard>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { Sidebar } from "@/components/sidebar"
import { ProductsGrid } from "@/components/products-grid"
import { AnnouncementsBanner } from "@/components/announcements-banner"
import { RankingBanner } from "@/components/ranking/ranking-banner"

export type SortOption = "relevancia" | "mais-vendidos" | "mais-recentes" | "maior-comissao" | "melhor-avaliados"

export default function HomePage() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState<SortOption>("relevancia")

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />
      <AnnouncementsBanner />
      <RankingBanner />

<div className="mx-auto max-w-7xl px-6 py-8">
        <div className="flex gap-8">
          <Sidebar
            selectedCategory={selectedCategory}
            onCategoryChange={setSelectedCategory}
            searchQuery={searchQuery}
            onSearchChange={setSearchQuery}
          />
          <ProductsGrid
            selectedCategory={selectedCategory}
            searchQuery={searchQuery}
            sortBy={sortBy}
            onSortChange={setSortBy}
          />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/perfil/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect, useRef, useCallback } from "react"
import Link from "next/link"
import Image from "next/image"
import { useRouter } from "next/navigation"
import {
  ArrowLeft,
  User,
  Mail,
  Phone,
  Lock,
  Eye,
  EyeOff,
  Save,
  Loader2,
  Camera,
  Check,
  ZoomIn,
  ZoomOut,
  Move,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { createClient } from "@/lib/supabase/client"
import { getUser, setUser } from "@/lib/auth"

export default function PerfilPage() {
  const router = useRouter()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [successMessage, setSuccessMessage] = useState("")
  const [errorMessage, setErrorMessage] = useState("")
  const [userId, setUserId] = useState<string | null>(null)

const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [whatsapp, setWhatsapp] = useState("")
  const [photoUrl, setPhotoUrl] = useState("")
  const [photoPreview, setPhotoPreview] = useState("")

const [zoom, setZoom] = useState(1)
  const [position, setPosition] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const [showPhotoEditor, setShowPhotoEditor] = useState(false)
  const [tempPhoto, setTempPhoto] = useState("")

const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [passwordError, setPasswordError] = useState("")
  const [isChangingPassword, setIsChangingPassword] = useState(false)

const supabase = createClient()

useEffect(() => {
    const user = getUser()
    if (!user) {
      router.push("/login")
      return
    }

const fetchProfile = async () => {
      const { data, error } = await supabase.from("affiliates").select("*").eq("email", user.email).single()

if (!error && data) {
        setUserId(data.id)
        setName(data.name)
        setEmail(data.email)
        setWhatsapp(data.whatsapp || "")
        setPhotoUrl(data.photo_url || "")
        setPhotoPreview(data.photo_url || "")
      }
      setIsLoading(false)
    }

fetchProfile()
  }, [router, supabase])

const formatWhatsapp = (value: string) => {
    const numbers = value.replace(/\D/g, "")
    if (numbers.length <= 2) return numbers
    if (numbers.length <= 7) return `(${numbers.slice(0, 2)}) ${numbers.slice(2)}`
    return `(${numbers.slice(0, 2)}) ${numbers.slice(2, 7)}-${numbers.slice(7, 11)}`
  }

const handleWhatsappChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatWhatsapp(e.target.value)
    setWhatsapp(formatted)
  }

const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        const base64 = reader.result as string
        setTempPhoto(base64)
        setZoom(1)
        setPosition({ x: 0, y: 0 })
        setShowPhotoEditor(true)
      }
      reader.readAsDataURL(file)
    }
  }

const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true)
    setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y })
  }

const handleMouseMove = useCallback(
    (e: React.MouseEvent) => {
      if (!isDragging) return
      const maxOffset = (zoom - 1) * 50
      const newX = Math.max(-maxOffset, Math.min(maxOffset, e.clientX - dragStart.x))
      const newY = Math.max(-maxOffset, Math.min(maxOffset, e.clientY - dragStart.y))
      setPosition({ x: newX, y: newY })
    },
    [isDragging, dragStart, zoom],
  )

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

const handleSavePhoto = () => {
    setPhotoPreview(tempPhoto)
    setShowPhotoEditor(false)
  }

const handleCancelPhoto = () => {
    setTempPhoto("")
    setShowPhotoEditor(false)
    setZoom(1)
    setPosition({ x: 0, y: 0 })
  }

const handleSaveProfile = async () => {
    setIsSaving(true)
    setSuccessMessage("")
    setErrorMessage("")

const user = getUser()
    if (!user || !userId) {
      setErrorMessage("Usuário não encontrado")
      setIsSaving(false)
      return
    }

const whatsappNumbers = whatsapp.replace(/\D/g, "")

const { error } = await supabase
      .from("affiliates")
      .update({
        name,
        whatsapp: whatsappNumbers,
        photo_url: photoPreview || null,
      })
      .eq("id", userId)

if (!error) {
      setUser({ ...user, name, photoUrl: photoPreview })
      setSuccessMessage("Perfil atualizado com sucesso!")
      setTimeout(() => setSuccessMessage(""), 3000)
    } else {
      setErrorMessage("Erro ao salvar: " + error.message)
    }

setIsSaving(false)
  }

const handleChangePassword = async () => {
    setPasswordError("")

if (!currentPassword) {
      setPasswordError("Digite sua senha atual")
      return
    }

if (newPassword.length < 6) {
      setPasswordError("A nova senha deve ter pelo menos 6 caracteres")
      return
    }

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

setIsChangingPassword(true)

const user = getUser()
    if (!user || !userId) return

const { data: userData } = await supabase.from("affiliates").select("password").eq("id", userId).single()

if (userData?.password !== currentPassword) {
      setPasswordError("Senha atual incorreta")
      setIsChangingPassword(false)
      return
    }

const { error } = await supabase.from("affiliates").update({ password: newPassword }).eq("id", userId)

if (!error) {
      setCurrentPassword("")
      setNewPassword("")
      setConfirmPassword("")
      setSuccessMessage("Senha alterada com sucesso!")
      setTimeout(() => setSuccessMessage(""), 3000)
    } else {
      setPasswordError("Erro ao alterar senha")
    }

setIsChangingPassword(false)
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card">
        <div className="mx-auto flex h-16 max-w-2xl items-center justify-between px-6">
          <div className="flex items-center gap-4">
            <Link href="/" className="flex items-center gap-2 text-muted-foreground hover:text-foreground">
              <ArrowLeft className="h-4 w-4" />
              Voltar
            </Link>
            <div className="h-6 w-px bg-border" />
            <h1 className="text-lg font-semibold">Meu Perfil</h1>
          </div>
        </div>
      </header>

<div className="mx-auto max-w-2xl px-6 py-8">
        {/* Mensagem de sucesso */}
        {successMessage && (
          <div className="mb-6 flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-emerald-400">
            <Check className="h-5 w-5" />
            {successMessage}
          </div>
        )}

{/* Mensagem de erro */}
        {errorMessage && (
          <div className="mb-6 flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-red-400">
            {errorMessage}
          </div>
        )}

{/* Foto de Perfil */}
        <div className="mb-8 flex flex-col items-center">
          <div className="relative">
            <div className="h-24 w-24 overflow-hidden rounded-full border-2 border-border bg-muted">
              {photoPreview ? (
                <Image
                  src={photoPreview || "/placeholder.svg"}
                  alt="Foto de perfil"
                  width={96}
                  height={96}
                  className="h-full w-full object-cover"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center">
                  <User className="h-12 w-12 text-muted-foreground" />
                </div>
              )}
            </div>
            <button
              onClick={() => fileInputRef.current?.click()}
              className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-card text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
            >
              <Camera className="h-4 w-4" />
            </button>
            <input ref={fileInputRef} type="file" accept="image/*" onChange={handlePhotoChange} className="hidden" />
          </div>
          <p className="mt-2 text-sm text-muted-foreground">Clique no ícone para alterar a foto</p>
        </div>

{showPhotoEditor && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
            <div className="w-full max-w-md rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold mb-4 text-center">Ajustar Foto</h3>

{/* Preview com zoom */}
              <div
                className="relative mx-auto mb-4 h-48 w-48 overflow-hidden rounded-full border-2 border-primary bg-muted cursor-move"
                onMouseDown={handleMouseDown}
                onMouseMove={handleMouseMove}
                onMouseUp={handleMouseUp}
                onMouseLeave={handleMouseUp}
              >
                <img
                  src={tempPhoto || "/placeholder.svg"}
                  alt="Preview"
                  className="absolute h-full w-full object-cover transition-transform"
                  style={{
                    transform: `scale(${zoom}) translate(${position.x / zoom}px, ${position.y / zoom}px)`,
                  }}
                  draggable={false}
                />
              </div>

<p className="text-xs text-muted-foreground text-center mb-4 flex items-center justify-center gap-1">
                <Move className="h-3 w-3" />
                Arraste para reposicionar
              </p>

{/* Controle de Zoom */}
              <div className="mb-6">
                <div className="flex items-center gap-3">
                  <ZoomOut className="h-4 w-4 text-muted-foreground" />
                  <Slider
                    value={[zoom]}
                    onValueChange={(value) => setZoom(value[0])}
                    min={1}
                    max={3}
                    step={0.1}
                    className="flex-1"
                  />
                  <ZoomIn className="h-4 w-4 text-muted-foreground" />
                </div>
                <p className="text-xs text-muted-foreground text-center mt-2">Zoom: {Math.round(zoom * 100)}%</p>
              </div>

{/* Botões */}
              <div className="flex gap-3">
                <Button variant="outline" onClick={handleCancelPhoto} className="flex-1 bg-transparent">
                  Cancelar
                </Button>
                <Button onClick={handleSavePhoto} className="flex-1">
                  Aplicar
                </Button>
              </div>
            </div>
          </div>
        )}

{/* Informações do Perfil */}
        <div className="rounded-xl border border-border bg-card p-6 mb-6">
          <h2 className="text-lg font-semibold mb-4">Informações Pessoais</h2>

<div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nome</Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="pl-10"
                  placeholder="Seu nome"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input id="email" value={email} disabled className="pl-10 opacity-50" />
              </div>
              <p className="text-xs text-muted-foreground">O email não pode ser alterado</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="whatsapp">WhatsApp</Label>
              <div className="relative">
                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="whatsapp"
                  value={whatsapp}
                  onChange={handleWhatsappChange}
                  className="pl-10"
                  placeholder="(00) 00000-0000"
                />
              </div>
            </div>

<Button onClick={handleSaveProfile} disabled={isSaving} className="w-full gap-2">
              {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
              Salvar Alterações
            </Button>
          </div>
        </div>

{/* Alterar Senha */}
        <div className="rounded-xl border border-border bg-card p-6">
          <h2 className="text-lg font-semibold mb-4">Alterar Senha</h2>

<div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="currentPassword">Senha Atual</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="currentPassword"
                  type={showCurrentPassword ? "text" : "password"}
                  value={currentPassword}
                  onChange={(e) => setCurrentPassword(e.target.value)}
                  className="pl-10 pr-10"
                  placeholder="Digite sua senha atual"
                />
                <button
                  type="button"
                  onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {showCurrentPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="newPassword">Nova Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="newPassword"
                  type={showNewPassword ? "text" : "password"}
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  className="pl-10 pr-10"
                  placeholder="Digite a nova senha"
                />
                <button
                  type="button"
                  onClick={() => setShowNewPassword(!showNewPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                >
                  {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">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="confirmPassword"
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10"
                  placeholder="Confirme a nova senha"
                />
              </div>
            </div>

{passwordError && <p className="text-sm text-red-400">{passwordError}</p>}

<Button
              onClick={handleChangePassword}
              disabled={isChangingPassword || !currentPassword || !newPassword || !confirmPassword}
              variant="outline"
              className="w-full gap-2 bg-transparent"
            >
              {isChangingPassword ? <Loader2 className="h-4 w-4 animate-spin" /> : <Lock className="h-4 w-4" />}
              Alterar Senha
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ranking/page.tsx"
"use client"

import { useState, useEffect } from "react"
import {
  Trophy,
  Medal,
  Crown,
  Calendar,
  Star,
  Gift,
  ChevronDown,
  ChevronUp,
  TrendingUp,
  TrendingDown,
  Minus,
} from "lucide-react"
import { Header } from "@/components/header"
import { createClient } from "@/lib/supabase/client"
import { getSession } from "@/lib/auth"

interface RankingUser {
  id: string
  affiliate_id: string
  name: string
  photo_url: string | null
  sales_count: number
  position: number
  previousPosition: number | null
  positionChange: "up" | "down" | "same" | "new" | null
}

interface Prize {
  position: number
  prize_description: string
}

export default function RankingPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [ranking, setRanking] = useState<RankingUser[]>([])
  const [prizes, setPrizes] = useState<Prize[]>([])
  const [loading, setLoading] = useState(true)
  const [currentUserPosition, setCurrentUserPosition] = useState<number | null>(null)
  const [totalSales, setTotalSales] = useState(0)
  const [showPrizes, setShowPrizes] = useState(false)
  const [selectedMonth, setSelectedMonth] = useState(() => {
    const now = new Date()
    return { month: now.getMonth() + 1, year: now.getFullYear() }
  })

const monthNames = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ]

const formatName = (fullName: string) => {
    const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()

const parts = fullName
      .trim()
      .split(" ")
      .filter((p) => p.length > 0)
    if (parts.length === 0) return "Afiliado"
    if (parts.length === 1) return capitalize(parts[0])

const firstName = capitalize(parts[0])
    const lastName = capitalize(parts[parts.length - 1])
    return `${firstName} ${lastName}`
  }

useEffect(() => {
    async function loadRanking() {
      setLoading(true)
      const supabase = createClient()

const startOfMonth = new Date(selectedMonth.year, selectedMonth.month - 1, 1).toISOString()
      const endOfMonth = new Date(selectedMonth.year, selectedMonth.month, 0, 23, 59, 59).toISOString()

const prevMonth = selectedMonth.month === 1 ? 12 : selectedMonth.month - 1
      const prevYear = selectedMonth.month === 1 ? selectedMonth.year - 1 : selectedMonth.year

const [rankingResult, previousRankingResult, prizesResult, monthlySalesResult] = await Promise.all([
        supabase
          .from("monthly_rankings")
          .select(`
            *,
            affiliates (id, name, photo_url)
          `)
          .eq("month", selectedMonth.month)
          .eq("year", selectedMonth.year)
          .order("sales_count", { ascending: false }),
        supabase
          .from("monthly_rankings")
          .select("affiliate_id, sales_count")
          .eq("month", prevMonth)
          .eq("year", prevYear)
          .order("sales_count", { ascending: false }),
        supabase
          .from("ranking_prizes")
          .select("position, prize_description")
          .eq("month", selectedMonth.month)
          .eq("year", selectedMonth.year)
          .order("position", { ascending: true }),
        supabase
          .from("monthly_total_sales")
          .select("total_sales")
          .eq("month", selectedMonth.month)
          .eq("year", selectedMonth.year)
          .maybeSingle(),
      ])

const previousPositions = new Map<string, number>()
      if (!previousRankingResult.error && previousRankingResult.data) {
        previousRankingResult.data.forEach((r: any, index: number) => {
          previousPositions.set(r.affiliate_id, index + 1)
        })
      }

if (!rankingResult.error && rankingResult.data) {
        const formattedRanking = rankingResult.data.map((r: any, index: number) => {
          const currentPosition = index + 1
          const prevPosition = previousPositions.get(r.affiliates?.id || r.affiliate_id) || null

let positionChange: "up" | "down" | "same" | "new" | null = null
          if (prevPosition !== null) {
            if (prevPosition > currentPosition) {
              positionChange = "up"
            } else if (prevPosition < currentPosition) {
              positionChange = "down"
            } else {
              positionChange = "same"
            }
          }

return {
            id: r.id,
            affiliate_id: r.affiliates?.id || r.affiliate_id,
            name: formatName(r.affiliates?.name || "Afiliado"),
            photo_url: r.affiliates?.photo_url,
            sales_count: r.sales_count,
            position: currentPosition,
            previousPosition: prevPosition,
            positionChange: r.position_change || positionChange,
          }
        })
        setRanking(formattedRanking)

const session = getSession()
        if (session?.id) {
          const userRank = formattedRanking.find((r) => r.affiliate_id === session.id)
          setCurrentUserPosition(userRank?.position || null)
        }
      }

if (!prizesResult.error && prizesResult.data) {
        setPrizes(prizesResult.data)
      }

const totalManual = monthlySalesResult.data?.total_sales || 0
      setTotalSales(totalManual)
      setLoading(false)
    }

loadRanking()
  }, [selectedMonth])

const getPositionStyle = (position: number) => {
    switch (position) {
      case 1:
        return {
          bg: "bg-gradient-to-r from-yellow-500/20 via-yellow-400/10 to-transparent",
          border: "border-yellow-500/50",
          icon: <Crown className="h-5 w-5 md:h-8 md:w-8 text-yellow-400" />,
          badge: "bg-gradient-to-r from-yellow-500 to-yellow-600 text-black",
        }
      case 2:
        return {
          bg: "bg-gradient-to-r from-gray-400/20 via-gray-300/10 to-transparent",
          border: "border-gray-400/50",
          icon: <Medal className="h-5 w-5 md:h-7 md:w-7 text-gray-300" />,
          badge: "bg-gradient-to-r from-gray-400 to-gray-500 text-black",
        }
      case 3:
        return {
          bg: "bg-gradient-to-r from-amber-600/20 via-amber-500/10 to-transparent",
          border: "border-amber-600/50",
          icon: <Medal className="h-5 w-5 md:h-6 md:w-6 text-amber-600" />,
          badge: "bg-gradient-to-r from-amber-600 to-amber-700 text-black",
        }
      default:
        return {
          bg: "bg-card",
          border: "border-border",
          icon: null,
          badge: "bg-secondary text-foreground",
        }
    }
  }

const getPrizeForPosition = (position: number): string | null => {
    const prize = prizes.find((p) => p.position === position)
    return prize?.prize_description || null
  }

const monthLabel = `${monthNames[selectedMonth.month - 1]} ${selectedMonth.year}`

const renderPositionChange = (user: RankingUser) => {
    if (!user.positionChange || user.positionChange === "same") {
      return (
        <div className="flex items-center text-muted-foreground" title="Manteve posição">
          <Minus className="h-3 w-3 md:h-4 md:w-4" />
        </div>
      )
    }

if (user.positionChange === "up") {
      return (
        <div className="flex items-center gap-0.5 text-green-500" title="Subiu posições">
          <TrendingUp className="h-3 w-3 md:h-4 md:w-4" />
        </div>
      )
    }

if (user.positionChange === "down") {
      return (
        <div className="flex items-center gap-0.5 text-red-500" title="Desceu posições">
          <TrendingDown className="h-3 w-3 md:h-4 md:w-4" />
        </div>
      )
    }

return null
  }

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

<div className="mx-auto max-w-4xl px-3 md:px-4 py-6 md:py-8">
        <div className="mb-6 md:mb-8 text-center">
          <div className="mx-auto mb-3 md:mb-4 flex h-14 w-14 md:h-20 md:w-20 items-center justify-center rounded-full bg-gradient-to-br from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50">
            <Trophy className="h-7 w-7 md:h-10 md:w-10 text-yellow-400" />
          </div>
          <h1 className="text-2xl md:text-4xl font-bold bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 bg-clip-text text-transparent">
            Ranking Mensal
          </h1>
          <p className="mt-1 md:mt-2 text-sm text-muted-foreground flex items-center justify-center gap-2">
            <Calendar className="h-3.5 w-3.5 md:h-4 md:w-4" />
            <span>{monthLabel}</span>
          </p>
        </div>

<div className="mb-6 md:mb-8 p-4 md:p-6 rounded-xl border border-primary/50 bg-gradient-to-r from-primary/10 to-primary/5 text-center">
          <p className="text-xs md:text-sm text-muted-foreground mb-1">Total de Vendas no Mês</p>
          <p className="text-3xl md:text-5xl font-bold text-primary">{totalSales.toLocaleString("pt-BR")}</p>
        </div>

{prizes.length > 0 && (
          <div className="mb-6 md:mb-8 rounded-xl border border-yellow-500/30 bg-gradient-to-r from-yellow-500/10 to-amber-500/10 overflow-hidden">
            <button
              onClick={() => setShowPrizes(!showPrizes)}
              className="w-full flex items-center justify-between p-3 md:p-4 hover:bg-yellow-500/5 transition-colors"
            >
              <div className="flex items-center gap-2">
                <Gift className="h-4 w-4 md:h-5 md:w-5 text-yellow-500" />
                <span className="font-bold text-sm md:text-base text-yellow-500">Premiações do Mês</span>
                <span className="text-xs md:text-sm text-muted-foreground">({prizes.length} prêmios)</span>
              </div>
              {showPrizes ? (
                <ChevronUp className="h-4 w-4 md:h-5 md:w-5 text-yellow-500" />
              ) : (
                <ChevronDown className="h-4 w-4 md:h-5 md:w-5 text-yellow-500" />
              )}
            </button>

{showPrizes && (
              <div className="px-3 md:px-4 pb-3 md:pb-4 space-y-2 border-t border-yellow-500/20 pt-3 md:pt-4">
                {prizes.map((prize) => (
                  <div
                    key={prize.position}
                    className={`flex items-center gap-2 md:gap-3 p-2 md:p-3 rounded-lg ${
                      prize.position === 1
                        ? "bg-yellow-500/20 border border-yellow-500/30"
                        : prize.position === 2
                          ? "bg-gray-400/20 border border-gray-400/30"
                          : prize.position === 3
                            ? "bg-amber-600/20 border border-amber-600/30"
                            : "bg-secondary/50 border border-border"
                    }`}
                  >
                    <div
                      className={`flex h-8 w-8 md:h-10 md:w-10 items-center justify-center rounded-full font-bold text-xs md:text-sm flex-shrink-0 ${
                        prize.position === 1
                          ? "bg-yellow-500 text-black"
                          : prize.position === 2
                            ? "bg-gray-400 text-black"
                            : prize.position === 3
                              ? "bg-amber-700 text-white"
                              : "bg-secondary text-foreground"
                      }`}
                    >
                      {prize.position}º
                    </div>
                    <p className="font-medium text-xs md:text-sm">{prize.prize_description}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

{currentUserPosition && (
          <div className="mb-4 md:mb-6 p-3 md:p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 text-center">
            <p className="text-xs md:text-sm text-muted-foreground">Sua posição no ranking</p>
            <p className="text-2xl md:text-3xl font-bold text-yellow-500">
              TOP {String(currentUserPosition).padStart(2, "0")}
            </p>
          </div>
        )}

{loading ? (
          <div className="space-y-3 md:space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="h-16 md:h-20 rounded-xl bg-card animate-pulse" />
            ))}
          </div>
        ) : ranking.length === 0 ? (
          <div className="rounded-xl border border-border bg-card p-8 md:p-12 text-center">
            <Trophy className="mx-auto mb-4 h-10 w-10 md:h-12 md:w-12 text-muted-foreground" />
            <h3 className="text-base md:text-lg font-medium">Ranking ainda não disponível</h3>
            <p className="mt-1 text-xs md:text-sm text-muted-foreground">
              O ranking será atualizado conforme as vendas forem realizadas
            </p>
          </div>
        ) : (
          <div className="space-y-2 md:space-y-3">
            {ranking.slice(0, 5).map((user) => {
              const style = getPositionStyle(user.position)
              const prize = getPrizeForPosition(user.position)
              return (
                <div
                  key={user.id}
                  className={`flex items-center gap-2 md:gap-4 rounded-xl border ${style.border} ${style.bg} p-2 md:p-4 transition-all hover:scale-[1.01]`}
                >
                  <div className="flex flex-col items-center gap-0.5 flex-shrink-0">
                    <div
                      className={`px-2 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-bold ${style.badge} min-w-[55px] md:min-w-[80px] text-center`}
                    >
                      TOP {String(user.position).padStart(2, "0")}
                    </div>
                    {renderPositionChange(user)}
                  </div>

<div className="hidden sm:flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-full bg-secondary/50 flex-shrink-0">
                    {style.icon || (
                      <span className="text-lg md:text-xl font-bold text-muted-foreground">{user.position}</span>
                    )}
                  </div>

<div className="relative flex-shrink-0">
                    <div className="h-10 w-10 md:h-14 md:w-14 rounded-full overflow-hidden border-2 border-border bg-secondary">
                      {user.photo_url ? (
                        <img
                          src={user.photo_url || "/placeholder.svg"}
                          alt={user.name}
                          className="h-full w-full object-cover"
                        />
                      ) : (
                        <div className="h-full w-full flex items-center justify-center text-sm md:text-lg font-bold">
                          {user.name.charAt(0)}
                        </div>
                      )}
                    </div>
                    {user.position <= 3 && (
                      <div className="absolute -bottom-1 -right-1 h-5 w-5 md:h-6 md:w-6 rounded-full bg-background flex items-center justify-center">
                        <Star className="h-3 w-3 md:h-4 md:w-4 text-yellow-500 fill-yellow-500" />
                      </div>
                    )}
                  </div>

<div className="flex-1 min-w-0 overflow-hidden">
                    <p className="text-sm md:text-lg font-semibold truncate">{formatName(user.name)}</p>
                    {prize && (
                      <p className="text-xs md:text-sm text-yellow-500 flex items-center gap-1 mt-0.5">
                        <Gift className="h-3 w-3 flex-shrink-0" />
                        <span className="truncate">{prize}</span>
                      </p>
                    )}
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/recuperar-senha/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/recuperar-senha/page.tsx"
"use client"

import type React from "react"
import { useState, useEffect, Suspense } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Loader2, Lock, AlertCircle, CheckCircle, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useSearchParams, useRouter } from "next/navigation"

function RecuperarSenhaContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const token = searchParams.get("token")

const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [isValidating, setIsValidating] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [affiliateId, setAffiliateId] = useState<string | null>(null)

// Validar token ao carregar a página
  useEffect(() => {
    const validateToken = async () => {
      if (!token) {
        setError("Link de recuperação inválido.")
        setIsValidating(false)
        return
      }

const supabase = createClient()

const { data: tokenData, error: tokenError } = await supabase
        .from("password_reset_tokens")
        .select("affiliate_id, expires_at")
        .eq("token", token)
        .maybeSingle()

if (tokenError || !tokenData) {
        setError("Link de recuperação inválido ou expirado.")
        setIsValidating(false)
        return
      }

// Verificar se o token expirou
      if (new Date(tokenData.expires_at) < new Date()) {
        setError("Este link de recuperação expirou. Solicite um novo.")
        setIsValidating(false)
        return
      }

setAffiliateId(tokenData.affiliate_id)
      setIsValidating(false)
    }

validateToken()
  }, [token])

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

if (newPassword.length < 6) {
      setError("A senha deve ter pelo menos 6 caracteres.")
      return
    }

if (newPassword !== confirmPassword) {
      setError("As senhas não coincidem.")
      return
    }

setIsLoading(true)

const supabase = createClient()

try {
      // Atualizar a senha do afiliado
      const { error: updateError } = await supabase
        .from("affiliates")
        .update({ password: newPassword })
        .eq("id", affiliateId)

if (updateError) {
        setError("Erro ao atualizar senha. Tente novamente.")
        setIsLoading(false)
        return
      }

// Remover o token usado
      await supabase.from("password_reset_tokens").delete().eq("token", token)

setSuccess(true)
    } catch (err) {
      console.error("Erro ao redefinir senha:", err)
      setError("Erro ao redefinir senha. Tente novamente.")
    } finally {
      setIsLoading(false)
    }
  }

if (isValidating) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <Card className="w-full max-w-md">
          <CardContent className="pt-6">
            <div className="flex flex-col items-center gap-4">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
              <p className="text-muted-foreground">Validando link de recuperação...</p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (error && !affiliateId) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4">
              <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
                AFILIA360
              </span>
            </div>
            <CardTitle className="text-xl">Link Inválido</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2 text-sm text-red-500 bg-red-500/10 p-4 rounded-lg">
              <AlertCircle className="h-5 w-5 flex-shrink-0" />
              <p>{error}</p>
            </div>
            <Button asChild className="w-full">
              <Link href="/login">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Voltar ao login
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

if (success) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <div className="mx-auto mb-4">
              <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
                AFILIA360
              </span>
            </div>
            <CardTitle className="text-xl">Senha Redefinida!</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center gap-2 text-sm text-emerald-500 bg-emerald-500/10 p-4 rounded-lg">
              <CheckCircle className="h-5 w-5 flex-shrink-0" />
              <p>Sua senha foi alterada com sucesso. Agora você pode fazer login com a nova senha.</p>
            </div>
            <Button asChild className="w-full">
              <Link href="/login">Ir para o login</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4">
            <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
              AFILIA360
            </span>
          </div>
          <CardTitle className="text-xl">Redefinir Senha</CardTitle>
          <CardDescription>Digite sua nova senha</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="new-password">Nova Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="new-password"
                  type="password"
                  placeholder="Mínimo 6 caracteres"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  className="pl-10"
                  required
                  minLength={6}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="confirm-password">Confirmar Nova Senha</Label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  id="confirm-password"
                  type="password"
                  placeholder="Repita a senha"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  className="pl-10"
                  required
                />
              </div>
            </div>

{error && (
              <div className="flex items-center gap-2 text-sm text-red-500 bg-red-500/10 p-3 rounded-lg">
                <AlertCircle className="h-4 w-4 flex-shrink-0" />
                {error}
              </div>
            )}

<Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Salvando...
                </>
              ) : (
                "Redefinir Senha"
              )}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

export default function RecuperarSenhaPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-background flex items-center justify-center p-6">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      }
    >
      <RecuperarSenhaContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/redefinir-senha/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/redefinir-senha/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect, Suspense } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Lock, Eye, EyeOff, CheckCircle, AlertCircle, ArrowLeft } from "lucide-react"
import Link from "next/link"

function RedefinirSenhaContent() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const token = searchParams.get("token")

const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState("")

useEffect(() => {
    if (!token) {
      setError("Token não fornecido. Solicite uma nova recuperação de senha.")
    }
  }, [token])

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

if (password.length < 6) {
      setError("A senha deve ter pelo menos 6 caracteres")
      return
    }

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

setLoading(true)

try {
      const response = await fetch("/api/redefinir-senha", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, password }),
      })

const data = await response.json()

if (!response.ok) {
        setError(data.error || "Erro ao redefinir senha")
        return
      }

setSuccess(true)
      setTimeout(() => {
        router.push("/login")
      }, 3000)
    } catch (err) {
      setError("Erro ao conectar com o servidor")
    } finally {
      setLoading(false)
    }
  }

if (success) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <Card className="w-full max-w-md border-green-500/30 bg-green-500/5">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto">
                <CheckCircle className="w-8 h-8 text-green-500" />
              </div>
              <h2 className="text-xl font-bold text-foreground">Senha Alterada!</h2>
              <p className="text-muted-foreground">
                Sua senha foi redefinida com sucesso. Você será redirecionado para o login...
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md border-primary/20">
        <CardHeader className="text-center">
          <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
            <Lock className="w-6 h-6 text-primary" />
          </div>
          <CardTitle className="text-2xl">Redefinir Senha</CardTitle>
          <CardDescription>Digite sua nova senha abaixo</CardDescription>
        </CardHeader>
        <CardContent>
          {error && (
            <div className="mb-4 p-3 bg-destructive/10 border border-destructive/30 rounded-lg flex items-center gap-2 text-destructive text-sm">
              <AlertCircle className="w-4 h-4 flex-shrink-0" />
              {error}
            </div>
          )}

{!token ? (
            <div className="text-center space-y-4">
              <p className="text-muted-foreground">Token inválido ou não fornecido.</p>
              <Link href="/recuperar-senha">
                <Button variant="outline" className="w-full bg-transparent">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Solicitar Nova Recuperação
                </Button>
              </Link>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="password">Nova Senha</Label>
                <div className="relative">
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="Mínimo 6 caracteres"
                    required
                    minLength={6}
                    className="pr-10"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-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={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    placeholder="Digite novamente"
                    required
                    minLength={6}
                    className="pr-10"
                  />
                  <button
                    type="button"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                  >
                    {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>

<Button type="submit" className="w-full bg-primary hover:bg-primary/90" disabled={loading}>
                {loading ? "Redefinindo..." : "Redefinir Senha"}
              </Button>

<div className="text-center">
                <Link href="/login" className="text-sm text-muted-foreground hover:text-primary">
                  <ArrowLeft className="w-4 h-4 inline mr-1" />
                  Voltar ao Login
                </Link>
              </div>
            </form>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

export default function RedefinirSenhaPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen bg-background flex items-center justify-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </div>
      }
    >
      <RedefinirSenhaContent />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/seja-vip/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Header } from "@/components/header"
import { Button } from "@/components/ui/button"
import {
  Crown,
  Percent,
  Bot,
  MessageCircle,
  Package,
  CheckCircle2,
  Zap,
  Shield,
  Star,
  ArrowRight,
  Sparkles,
} from "lucide-react"
import { useUserPlan } from "@/hooks/use-user-plan"
import { useRouter } from "next/navigation"

const benefits = [
  {
    icon: Percent,
    title: "+5% de Comissão",
    description: "Ganhe 5% a mais em todas as suas vendas como afiliado VIP",
    highlight: true,
  },
  {
    icon: Bot,
    title: "Agentes IA Exclusivos",
    description: "Acesso a ferramentas de IA para criar copies, anúncios e estratégias",
    highlight: false,
  },
  {
    icon: MessageCircle,
    title: "Grupo WhatsApp VIP",
    description: "Networking exclusivo com os melhores afiliados e suporte direto",
    highlight: false,
  },
  {
    icon: Package,
    title: "Produtos Exclusivos",
    description: "Acesso antecipado a produtos validados de alta conversão",
    highlight: false,
  },
  {
    icon: Zap,
    title: "Cursos Premium",
    description: "Todos os cursos e treinamentos liberados sem restrição",
    highlight: false,
  },
  {
    icon: Shield,
    title: "Suporte Prioritário",
    description: "Atendimento prioritário para dúvidas e problemas",
    highlight: false,
  },
]

export default function SejaVipPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const { isVip, loading } = useUserPlan()
  const router = useRouter()

// Se já é VIP, redirecionar
  useEffect(() => {
    if (!loading && isVip) {
      router.push("/cursos")
    }
  }, [isVip, loading, router])

if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />
        <div className="flex items-center justify-center py-20">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
        </div>
      </div>
    )
  }

if (isVip) {
    return null
  }

return (
    <div className="min-h-screen bg-background">
      <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />

{/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-orange-500/5 to-red-500/10" />
        <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-500/20 rounded-full blur-3xl" />
        <div className="absolute bottom-10 right-10 w-96 h-96 bg-orange-500/20 rounded-full blur-3xl" />

<div className="relative max-w-4xl mx-auto px-4 py-16 text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-yellow-500/20 border border-yellow-500/30 text-yellow-500 text-sm font-medium mb-6">
            <Sparkles className="h-4 w-4" />
            Oferta Especial para Afiliados
          </div>

<h1 className="text-4xl md:text-6xl font-bold mb-6">
            Ganhe{" "}
            <span className="bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 bg-clip-text text-transparent">
              +5% de Comissão
            </span>
            <br />
            em Todas as Vendas
          </h1>

<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            Torne-se um afiliado VIP e desbloqueie benefícios exclusivos que vão acelerar seus resultados no marketing
            digital
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-black font-bold text-lg px-8 py-6 h-auto shadow-lg hover:shadow-xl transition-all hover:scale-105"
              onClick={() => window.open("https://pay.celetus.com/ZOXLWXI9", "_blank")}
            >
              <Crown className="h-5 w-5 mr-2" />
              Quero ser VIP Agora
              <ArrowRight className="h-5 w-5 ml-2" />
            </Button>
          </div>
        </div>
      </section>

{/* Benefits Grid */}
      <section className="max-w-6xl mx-auto px-4 py-16">
        <h2 className="text-3xl font-bold text-center mb-12">
          Benefícios <span className="text-yellow-500">Exclusivos</span> para VIPs
        </h2>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className={`rounded-2xl border p-6 transition-all hover:scale-105 ${
                benefit.highlight
                  ? "border-yellow-500/50 bg-gradient-to-br from-yellow-500/10 to-orange-500/5"
                  : "border-border bg-card"
              }`}
            >
              <div
                className={`h-12 w-12 rounded-xl flex items-center justify-center mb-4 ${
                  benefit.highlight
                    ? "bg-gradient-to-br from-yellow-500 to-orange-500 text-black"
                    : "bg-primary/10 text-primary"
                }`}
              >
                <benefit.icon className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold mb-2">{benefit.title}</h3>
              <p className="text-muted-foreground">{benefit.description}</p>
              {benefit.highlight && (
                <div className="mt-4 flex items-center gap-2 text-yellow-500 text-sm font-medium">
                  <Star className="h-4 w-4 fill-yellow-500" />
                  Benefício Principal
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

{/* CTA Section */}
      <section className="bg-gradient-to-r from-yellow-500/10 via-orange-500/10 to-red-500/10 border-y border-border">
        <div className="max-w-4xl mx-auto px-4 py-16 text-center">
          <Crown className="h-16 w-16 mx-auto mb-6 text-yellow-500" />
          <h2 className="text-3xl font-bold mb-4">Pronto para Aumentar seus Ganhos?</h2>
          <p className="text-lg text-muted-foreground mb-8">
            Entre agora para o grupo exclusivo de afiliados VIP e comece a ganhar mais
          </p>

<div className="flex flex-col items-center gap-4">
            <Button
              size="lg"
              className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-black font-bold text-lg px-10 py-6 h-auto"
              onClick={() => window.open("https://pay.celetus.com/ZOXLWXI9", "_blank")}
            >
              <Crown className="h-5 w-5 mr-2" />
              Ativar Meu VIP
            </Button>

<div className="flex items-center gap-6 text-sm text-muted-foreground">
              <span className="flex items-center gap-1">
                <CheckCircle2 className="h-4 w-4 text-green-500" />
                Acesso imediato
              </span>
              <span className="flex items-center gap-1">
                <CheckCircle2 className="h-4 w-4 text-green-500" />
                Cancele quando quiser
              </span>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sobre/page.tsx"
"use client"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft, Target, Heart, Lightbulb, Shield, Users, CheckCircle2, Sparkles, Quote } from "lucide-react"

export default function SobrePage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2 text-foreground hover:text-primary transition-colors">
            <ArrowLeft className="w-5 h-5" />
            <span className="font-semibold">Voltar</span>
          </Link>
          <Link href="/" className="text-2xl font-bold text-primary">
            AFILIA<span className="text-emerald-500">360</span>
          </Link>
          <Link href="/cadastro">
            <Button size="sm" className="bg-emerald-600 hover:bg-emerald-700">
              Começar Agora
            </Button>
          </Link>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-20 md:py-32 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center space-y-6 mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-sm font-medium mb-4">
              <Sparkles className="w-4 h-4" />
              Nossa História
            </div>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-balance leading-tight">
              Transformando sonhos em <span className="text-emerald-500">realidade digital</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto text-balance">
              O AFILIA360 nasceu de um sonho: democratizar o acesso ao marketing de afiliados e ajudar pessoas comuns a
              construírem uma vida extraordinária pela internet.
            </p>
          </div>
        </div>
      </section>

{/* Vision & Mission */}
      <section className="py-20 px-4 bg-card/30">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-2 gap-12 items-center mb-20">
            <div className="space-y-6">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 text-sm font-medium">
                <Target className="w-4 h-4" />
                Nossa Visão
              </div>
              <h2 className="text-3xl md:text-5xl font-bold text-balance">
                Um mundo onde todos podem viver da internet
              </h2>
              <p className="text-lg text-muted-foreground leading-relaxed">
                Acreditamos que a internet é a maior oportunidade de democratização de renda da história. Mas também
                sabemos que sem orientação, estrutura e produtos validados, é fácil se perder no caminho.
              </p>
              <p className="text-lg text-muted-foreground leading-relaxed">
                Por isso criamos o AFILIA360: uma plataforma completa que conecta afiliados iniciantes e experientes com
                produtos validados, métricas transparentes e todo o suporte necessário para prosperar.
              </p>
            </div>
            <div className="space-y-4">
              <Card className="p-6 border-2 hover:border-emerald-500/50 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-lg bg-emerald-500/10">
                    <Heart className="w-6 h-6 text-emerald-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Paixão por Ensinar</h3>
                    <p className="text-sm text-muted-foreground">
                      Cada afiliado que cresce conosco é uma prova de que estamos no caminho certo
                    </p>
                  </div>
                </div>
              </Card>
              <Card className="p-6 border-2 hover:border-emerald-500/50 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-lg bg-emerald-500/10">
                    <Lightbulb className="w-6 h-6 text-emerald-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Inovação Constante</h3>
                    <p className="text-sm text-muted-foreground">
                      Buscamos sempre as melhores estratégias e ferramentas para nossos afiliados
                    </p>
                  </div>
                </div>
              </Card>
              <Card className="p-6 border-2 hover:border-emerald-500/50 transition-colors">
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-lg bg-emerald-500/10">
                    <Users className="w-6 h-6 text-emerald-500" />
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Crescimento Coletivo</h3>
                    <p className="text-sm text-muted-foreground">
                      Quando um afiliado cresce, toda a comunidade se fortalece
                    </p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Platform Features */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center space-y-4 mb-16">
            <h2 className="text-3xl md:text-5xl font-bold">O que é o AFILIA360</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Mais do que uma plataforma, somos um ecossistema completo para afiliados
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <Card className="p-8 border-2 hover:border-emerald-500/50 transition-all hover:scale-105">
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 flex items-center justify-center mb-6">
                <Shield className="w-8 h-8 text-emerald-500" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Produtos Validados</h3>
              <p className="text-muted-foreground">
                Cada produto passa por análise rigorosa. Você vê métricas reais de conversão, ticket médio e comissões
                antes de promover.
              </p>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-all hover:scale-105">
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 flex items-center justify-center mb-6">
                <Users className="w-8 h-8 text-emerald-500" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Comunidade Ativa</h3>
              <p className="text-muted-foreground">
                Conecte-se com outros afiliados, compartilhe estratégias e cresça junto com pessoas que têm os mesmos
                objetivos que você.
              </p>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-all hover:scale-105">
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 flex items-center justify-center mb-6">
                <Target className="w-8 h-8 text-emerald-500" />
              </div>
              <h3 className="text-xl font-semibold mb-3">Múltiplas Estratégias</h3>
              <p className="text-muted-foreground">
                Trabalhe com tráfego pago, orgânico, TikTok Shop, Instagram, YouTube ou qualquer canal que você dominar.
                Nós te apoiamos.
              </p>
            </Card>
          </div>
        </div>
      </section>

<section className="py-20 px-4 bg-gradient-to-br from-primary/5 via-emerald-500/5 to-background">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center space-y-6 mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium">
              <Sparkles className="w-4 h-4" />
              Para Empresas
            </div>
            <h2 className="text-3xl md:text-5xl font-bold text-balance">
              Leve seu produto validado para <span className="text-emerald-500">milhares de afiliados</span>
            </h2>
            <p className="text-lg text-muted-foreground max-w-3xl mx-auto text-balance">
              Se você tem um produto digital validado e quer escalar suas vendas com uma rede de afiliados qualificados,
              o AFILIA360 é a parceria ideal.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-12 items-center mb-12">
            <div className="space-y-6">
              <h3 className="text-2xl font-bold">Por que fazer parceria conosco?</h3>
              <div className="space-y-4">
                <div className="flex items-start gap-4 p-4 rounded-lg border border-emerald-500/30 bg-emerald-500/5">
                  <CheckCircle2 className="w-6 h-6 text-emerald-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="font-semibold mb-1">Afiliados Qualificados</h4>
                    <p className="text-sm text-muted-foreground">
                      Nossa rede é formada por afiliados treinados em tráfego pago, orgânico e TikTok Shop
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4 p-4 rounded-lg border border-emerald-500/30 bg-emerald-500/5">
                  <CheckCircle2 className="w-6 h-6 text-emerald-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="font-semibold mb-1">Escala Rápida</h4>
                    <p className="text-sm text-muted-foreground">
                      Centenas de afiliados prontos para promover produtos validados imediatamente
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4 p-4 rounded-lg border border-emerald-500/30 bg-emerald-500/5">
                  <CheckCircle2 className="w-6 h-6 text-emerald-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="font-semibold mb-1">Transparência Total</h4>
                    <p className="text-sm text-muted-foreground">
                      Compartilhamos métricas reais com os afiliados, o que aumenta a confiança e as vendas
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4 p-4 rounded-lg border border-emerald-500/30 bg-emerald-500/5">
                  <CheckCircle2 className="w-6 h-6 text-emerald-500 flex-shrink-0 mt-1" />
                  <div>
                    <h4 className="font-semibold mb-1">Curadoria Rigorosa</h4>
                    <p className="text-sm text-muted-foreground">
                      Só aceitamos produtos validados, protegendo a reputação de todos os parceiros
                    </p>
                  </div>
                </div>
              </div>
            </div>

<Card className="p-8 border-2 border-primary/50 bg-gradient-to-br from-primary/10 to-transparent">
              <h3 className="text-xl font-bold mb-4">Requisitos para Parceria</h3>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start gap-3">
                  <Shield className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Produto validado com histórico de vendas comprovado</span>
                </li>
                <li className="flex items-start gap-3">
                  <Shield className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Mínimo 30 dias de vendas consistentes</span>
                </li>
                <li className="flex items-start gap-3">
                  <Shield className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Produto de qualidade com boas avaliações</span>
                </li>
                <li className="flex items-start gap-3">
                  <Shield className="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
                  <span className="text-sm">Comissões competitivas para afiliados</span>
                </li>
              </ul>
              <Link href="/enviar-produto" className="block">
                <Button size="lg" className="w-full bg-emerald-600 hover:bg-emerald-700 text-lg">
                  Enviar Meu Produto para Análise
                </Button>
              </Link>
            </Card>
          </div>

<div className="text-center p-8 rounded-xl border-2 border-dashed border-emerald-500/50 bg-emerald-500/5">
            <p className="text-lg text-muted-foreground mb-4">
              Tem um produto validado? Envie para análise e faça parte do catálogo exclusivo do AFILIA360
            </p>
            <Link href="/enviar-produto">
              <Button
                variant="outline"
                size="lg"
                className="border-emerald-500 text-emerald-500 hover:bg-emerald-500 hover:text-white bg-transparent"
              >
                Saiba Mais Sobre Parcerias
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Testimonials */}
      <section className="py-20 px-4 bg-card/30">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center space-y-4 mb-16">
            <h2 className="text-3xl md:text-5xl font-bold">Histórias que nos inspiram</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Veja o que alguns dos nossos afiliados têm a dizer
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            <Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Quote className="w-10 h-10 text-emerald-500/30 mb-4" />
              <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
                "O AFILIA360 mudou minha vida. Em 3 meses saí de zero para fazer minha primeira venda, e hoje já consigo
                pagar minhas contas com as comissões. A transparência das métricas me deu segurança para começar."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center">
                  <Users className="w-6 h-6 text-emerald-500" />
                </div>
                <div>
                  <div className="font-semibold">Maria Clara</div>
                  <div className="text-sm text-muted-foreground">Afiliada desde 2024</div>
                </div>
              </div>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Quote className="w-10 h-10 text-emerald-500/30 mb-4" />
              <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
                "Depois de tentar várias plataformas e perder tempo com produtos ruins, encontrei o AFILIA360. A
                curadoria de produtos é excepcional e o suporte da comunidade fez toda a diferença no meu crescimento."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center">
                  <Users className="w-6 h-6 text-emerald-500" />
                </div>
                <div>
                  <div className="font-semibold">Roberto Silva</div>
                  <div className="text-sm text-muted-foreground">Afiliado desde 2023</div>
                </div>
              </div>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Quote className="w-10 h-10 text-emerald-500/30 mb-4" />
              <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
                "Como mãe de dois filhos, eu precisava de algo flexível. O AFILIA360 me permitiu trabalhar nos meus
                horários e construir uma renda extra sem sair de casa. Hoje já penso em largar meu emprego!"
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center">
                  <Users className="w-6 h-6 text-emerald-500" />
                </div>
                <div>
                  <div className="font-semibold">Ana Paula</div>
                  <div className="text-sm text-muted-foreground">Afiliada desde 2024</div>
                </div>
              </div>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Quote className="w-10 h-10 text-emerald-500/30 mb-4" />
              <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
                "Já trabalhava com tráfego pago, mas faltava bons produtos para promover. No AFILIA360 encontrei
                produtos com conversão real e métricas transparentes. Meu ROI aumentou significativamente."
              </p>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-emerald-500/10 flex items-center justify-center">
                  <Users className="w-6 h-6 text-emerald-500" />
                </div>
                <div>
                  <div className="font-semibold">Carlos Eduardo</div>
                  <div className="text-sm text-muted-foreground">Afiliado desde 2023</div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </section>

{/* Values */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center space-y-4 mb-16">
            <h2 className="text-3xl md:text-5xl font-bold">Nossos Pilares</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Os valores que guiam cada decisão que tomamos
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            <Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <CheckCircle2 className="w-8 h-8 text-emerald-500 mb-4" />
              <h3 className="text-xl font-semibold mb-3">Transparência Radical</h3>
              <p className="text-muted-foreground">
                Todas as métricas são reais. Sem números inflados, sem promessas vazias. Você vê exatamente o que
                esperar de cada produto.
              </p>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Shield className="w-8 h-8 text-emerald-500 mb-4" />
              <h3 className="text-xl font-semibold mb-3">Qualidade Acima de Tudo</h3>
              <p className="text-muted-foreground">
                Só trabalhamos com produtos e empresas sérias que realmente entregam valor aos clientes finais.
              </p>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Heart className="w-8 h-8 text-emerald-500 mb-4" />
              <h3 className="text-xl font-semibold mb-3">Crescimento Sustentável</h3>
              <p className="text-muted-foreground">
                Não acreditamos em fórmulas mágicas. Focamos em estratégias comprovadas para resultados de longo prazo.
              </p>
            </Card>

<Card className="p-8 border-2 hover:border-emerald-500/50 transition-colors">
              <Users className="w-8 h-8 text-emerald-500 mb-4" />
              <h3 className="text-xl font-semibold mb-3">Comunidade Forte</h3>
              <p className="text-muted-foreground">
                Construímos uma rede de apoio onde todos crescem juntos, compartilhando conhecimento e experiências.
              </p>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-4xl">
          <Card className="p-12 text-center border-2 border-emerald-500/50 bg-gradient-to-br from-emerald-500/5 to-transparent">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Pronto para escrever sua própria história?</h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Junte-se a centenas de afiliados que escolheram transformar suas vidas com o AFILIA360
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/cadastro">
                <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-lg px-8 py-6">
                  Começar Agora
                </Button>
              </Link>
              <Link href="/aula-gratuita">
                <Button size="lg" variant="outline" className="text-lg px-8 py-6 bg-transparent">
                  Assistir Aula Gratuita
                </Button>
              </Link>
            </div>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="border-t border-border py-8 px-4">
        <div className="container mx-auto text-center text-sm text-muted-foreground">
          <p>© 2025 AFILIA360. Todos os direitos reservados.</p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vip-benefits/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { createClient } from "@/lib/supabase/client"
import {
  Crown,
  GraduationCap,
  Percent,
  Sparkles,
  Zap,
  TrendingUp,
  ArrowLeft,
  Check,
  Star,
  Rocket,
  Award,
  Users,
  Lock,
  ChevronRight,
} from "lucide-react"

export default function VipBenefitsPage() {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [isVip, setIsVip] = useState(false)

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

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

if (user) {
      const { data } = await supabase.from("affiliates").select("is_vip").eq("user_id", user.id).single()

if (data?.is_vip) {
        setIsVip(true)
        router.push("/") // Redirecionar para home se já for VIP
      }
    }

setLoading(false)
  }

if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-amber-950/5 to-background">
      <div className="container mx-auto px-4 py-8 max-w-7xl">
        <div className="flex items-center justify-between mb-8">
          <Button variant="ghost" onClick={() => router.push("/")} className="gap-2">
            <ArrowLeft className="h-4 w-4" />
            Voltar
          </Button>
        </div>

<div className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full px-6 py-2 mb-6 shadow-lg shadow-amber-500/20">
            <Crown className="h-5 w-5 text-black" />
            <span className="text-sm font-bold text-black tracking-wide">PLANO VIP</span>
          </div>

<h1 className="text-5xl md:text-7xl font-black mb-6 bg-gradient-to-r from-amber-500 via-yellow-400 to-amber-500 bg-clip-text text-transparent leading-tight">
            Desbloqueie as Funções
            <br />
            VIP da Plataforma
          </h1>

<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto mb-4 leading-relaxed">
            Desbloqueie todos os recursos premium, aumente suas comissões em{" "}
            <strong className="text-amber-500">+5%</strong> e tenha acesso exclusivo às ferramentas que os afiliados de
            elite utilizam
          </p>

<div className="flex items-center justify-center gap-3 mb-8">
            <div className="flex -space-x-2">
              {[1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-yellow-600 border-2 border-background flex items-center justify-center"
                >
                  <Users className="h-5 w-5 text-black" />
                </div>
              ))}
            </div>
            <p className="text-sm text-muted-foreground">
              <strong className="text-foreground">127 afiliados</strong> já são VIP
            </p>
          </div>
        </div>

<div className="grid lg:grid-cols-2 gap-6 mb-16">
          {/* Cursos Liberados */}
          <Card className="border-2 border-amber-500/30 bg-gradient-to-br from-card via-amber-500/5 to-card hover:border-amber-500/50 hover:shadow-2xl hover:shadow-amber-500/20 transition-all duration-300 group">
            <CardContent className="p-8">
              <div className="flex items-start gap-6">
                <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-yellow-600 flex items-center justify-center shadow-lg shadow-amber-500/30 group-hover:scale-110 transition-transform">
                  <GraduationCap className="h-8 w-8 text-black" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-bold mb-3">Todos os Cursos Liberados</h3>
                  <p className="text-muted-foreground mb-4 text-base leading-relaxed">
                    Acesso completo e vitalício à toda biblioteca de cursos sobre tráfego pago, copywriting, vendas e
                    estratégias avançadas de marketing digital
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 hover:bg-amber-500/30">
                      <Check className="h-3 w-3 mr-1" />
                      Tráfego Pago
                    </Badge>
                    <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 hover:bg-amber-500/30">
                      <Check className="h-3 w-3 mr-1" />
                      Copywriting
                    </Badge>
                    <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 hover:bg-amber-500/30">
                      <Check className="h-3 w-3 mr-1" />
                      Funis de Venda
                    </Badge>
                    <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 hover:bg-amber-500/30">
                      <Check className="h-3 w-3 mr-1" />
                      Estratégias
                    </Badge>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* +5% de Comissão */}
          <Card className="border-2 border-green-500/30 bg-gradient-to-br from-card via-green-500/5 to-card hover:border-green-500/50 hover:shadow-2xl hover:shadow-green-500/20 transition-all duration-300 group">
            <CardContent className="p-8">
              <div className="flex items-start gap-6">
                <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-lg shadow-green-500/30 group-hover:scale-110 transition-transform">
                  <Percent className="h-8 w-8 text-black" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-bold mb-3">+5% de Comissão Extra</h3>
                  <p className="text-muted-foreground mb-4 text-base leading-relaxed">
                    Ganhe 5% a mais em TODAS as vendas dos produtos validados. Quanto mais você vende, mais você lucra!
                  </p>
                  <div className="bg-gradient-to-r from-green-500/10 to-emerald-500/10 border-2 border-green-500/30 rounded-xl p-4 backdrop-blur-sm">
                    <p className="text-sm font-bold text-green-500 mb-2">💰 Exemplo Prático:</p>
                    <div className="space-y-1">
                      <p className="text-sm text-muted-foreground">
                        Comissão normal: <span className="line-through">R$ 100,00</span>
                      </p>
                      <p className="text-lg font-bold text-green-500">
                        Comissão VIP: R$ 105,00 <span className="text-xs">🔥</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Ferramentas e IA */}
          <Card className="border-2 border-blue-500/30 bg-gradient-to-br from-card via-blue-500/5 to-card hover:border-blue-500/50 hover:shadow-2xl hover:shadow-blue-500/20 transition-all duration-300 group">
            <CardContent className="p-8">
              <div className="flex items-start gap-6">
                <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform">
                  <Sparkles className="h-8 w-8 text-black" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-bold mb-3">Todas as Ferramentas e IAs</h3>
                  <p className="text-muted-foreground mb-4 text-base leading-relaxed">
                    Acesso ilimitado aos geradores de copy, criativos, análise de campanhas e todos os agentes de IA da
                    plataforma
                  </p>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2 text-sm">
                      <div className="h-1.5 w-1.5 rounded-full bg-blue-500" />
                      <span className="text-muted-foreground">Gerador de Copy com IA</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <div className="h-1.5 w-1.5 rounded-full bg-blue-500" />
                      <span className="text-muted-foreground">Análise de Campanhas Automática</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <div className="h-1.5 w-1.5 rounded-full bg-blue-500" />
                      <span className="text-muted-foreground">Criação de Criativos Ilimitada</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <div className="h-1.5 w-1.5 rounded-full bg-blue-500" />
                      <span className="text-muted-foreground">Agentes IA Especializados</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Prioridade Novos Produtos */}
          <Card className="border-2 border-purple-500/30 bg-gradient-to-br from-card via-purple-500/5 to-card hover:border-purple-500/50 hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300 group">
            <CardContent className="p-8">
              <div className="flex items-start gap-6">
                <div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center shadow-lg shadow-purple-500/30 group-hover:scale-110 transition-transform">
                  <Rocket className="h-8 w-8 text-black" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl font-bold mb-3">Prioridade em Novos Produtos</h3>
                  <p className="text-muted-foreground mb-4 text-base leading-relaxed">
                    Seja o primeiro a afiliar novos produtos validados e pegue o melhor do tráfego antes dos outros
                    afiliados
                  </p>
                  <div className="bg-gradient-to-r from-purple-500/10 to-pink-500/10 border-2 border-purple-500/30 rounded-xl p-4 backdrop-blur-sm">
                    <div className="flex items-center gap-3">
                      <Award className="h-6 w-6 text-purple-500" />
                      <div>
                        <p className="text-sm font-bold text-purple-500">Acesso Antecipado</p>
                        <p className="text-xs text-muted-foreground">Antes de todos os outros</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

<div className="grid md:grid-cols-3 gap-6 mb-16">
          <Card className="border-amber-500/20 bg-gradient-to-br from-amber-500/10 to-yellow-500/10 text-center p-8 hover:scale-105 transition-transform">
            <Star className="h-12 w-12 text-amber-500 mx-auto mb-4" />
            <p className="text-4xl font-black mb-2 bg-gradient-to-r from-amber-500 to-yellow-500 bg-clip-text text-transparent">
              Acesso Total
            </p>
            <p className="text-sm text-muted-foreground">Biblioteca Completa de Cursos</p>
          </Card>
          <Card className="border-green-500/20 bg-gradient-to-br from-green-500/10 to-emerald-500/10 text-center p-8 hover:scale-105 transition-transform">
            <TrendingUp className="h-12 w-12 text-green-500 mx-auto mb-4" />
            <p className="text-4xl font-black mb-2 bg-gradient-to-r from-green-500 to-emerald-500 bg-clip-text text-transparent">
              +5%
            </p>
            <p className="text-sm text-muted-foreground">Comissão Extra Sempre</p>
          </Card>
          <Card className="border-blue-500/20 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 text-center p-8 hover:scale-105 transition-transform">
            <Zap className="h-12 w-12 text-blue-500 mx-auto mb-4" />
            <p className="text-4xl font-black mb-2 bg-gradient-to-r from-blue-500 to-cyan-500 bg-clip-text text-transparent">
              ∞
            </p>
            <p className="text-sm text-muted-foreground">Ferramentas IA Ilimitadas</p>
          </Card>
        </div>

<Card className="border-2 border-border mb-16 overflow-hidden">
          <CardContent className="p-0">
            <div className="grid md:grid-cols-2">
              {/* Plano Gratuito */}
              <div className="p-8 bg-muted/30">
                <div className="flex items-center gap-2 mb-6">
                  <Lock className="h-5 w-5 text-muted-foreground" />
                  <h3 className="text-xl font-bold text-muted-foreground">Plano Gratuito</h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-3 text-muted-foreground">
                    <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs">✕</span>
                    </div>
                    <span className="text-sm line-through">Cursos Premium</span>
                  </li>
                  <li className="flex items-start gap-3 text-muted-foreground">
                    <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs">✕</span>
                    </div>
                    <span className="text-sm line-through">Comissão Extra +5%</span>
                  </li>
                  <li className="flex items-start gap-3 text-muted-foreground">
                    <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs">✕</span>
                    </div>
                    <span className="text-sm line-through">Ferramentas IA Premium</span>
                  </li>
                  <li className="flex items-start gap-3 text-muted-foreground">
                    <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-xs">✕</span>
                    </div>
                    <span className="text-sm line-through">Acesso Prioritário</span>
                  </li>
                </ul>
              </div>

{/* Plano VIP */}
              <div className="p-8 bg-gradient-to-br from-amber-500/10 via-yellow-500/10 to-amber-500/10 border-l-2 border-amber-500/30">
                <div className="flex items-center gap-2 mb-6">
                  <Crown className="h-5 w-5 text-amber-500" />
                  <h3 className="text-xl font-bold text-amber-500">Plano VIP</h3>
                </div>
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <div className="h-5 w-5 rounded-full bg-gradient-to-br from-amber-500 to-yellow-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Check className="h-3 w-3 text-black" />
                    </div>
                    <span className="text-sm font-medium">Todos os Cursos Liberados</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="h-5 w-5 rounded-full bg-gradient-to-br from-amber-500 to-yellow-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Check className="h-3 w-3 text-black" />
                    </div>
                    <span className="text-sm font-medium">+5% de Comissão Extra</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="h-5 w-5 rounded-full bg-gradient-to-br from-amber-500 to-yellow-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Check className="h-3 w-3 text-black" />
                    </div>
                    <span className="text-sm font-medium">Todas as Ferramentas IA</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="h-5 w-5 rounded-full bg-gradient-to-br from-amber-500 to-yellow-500 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Check className="h-3 w-3 text-black" />
                    </div>
                    <span className="text-sm font-medium">Prioridade em Novos Produtos</span>
                  </li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="border-4 border-amber-500/50 bg-gradient-to-r from-amber-500/20 via-yellow-500/20 to-amber-500/20 shadow-2xl shadow-amber-500/20 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-amber-500/5 via-yellow-500/10 to-amber-500/5 blur-3xl" />
          <CardContent className="p-12 text-center relative z-10">
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-red-500 to-orange-500 rounded-full px-4 py-1.5 mb-6 shadow-lg shadow-red-500/30">
              <span className="text-xs font-bold text-white tracking-wide animate-pulse">🔥 OFERTA ESPECIAL</span>
            </div>

<h2 className="text-4xl md:text-5xl font-black mb-4 bg-gradient-to-r from-amber-500 via-yellow-400 to-amber-500 bg-clip-text text-transparent">
              Faça Upgrade Para VIP
            </h2>

<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Comece a lucrar mais hoje mesmo com acesso total aos cursos, +5% de comissão e todas as ferramentas
              premium desbloqueadas
            </p>

<div className="mb-8">
              <div className="flex items-center justify-center gap-4 mb-4">
                <span className="text-2xl text-muted-foreground line-through">De R$ 197</span>
                <Badge className="bg-red-500 text-white border-0 px-3 py-1">-51% OFF</Badge>
              </div>
              <div className="flex items-center justify-center gap-3 mb-2">
                <span className="text-6xl font-black bg-gradient-to-r from-amber-500 to-yellow-500 bg-clip-text text-transparent">
                  R$ 97
                </span>
                <span className="text-2xl text-muted-foreground">/ano</span>
              </div>
              <p className="text-sm text-muted-foreground">
                ou <strong className="text-foreground">12x de R$ 9,70</strong> sem juros
              </p>
            </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center mb-6">
              <Button
                size="lg"
                className="bg-gradient-to-r from-amber-500 to-yellow-600 hover:from-amber-600 hover:to-yellow-700 text-black font-bold text-lg px-8 py-6 shadow-xl shadow-amber-500/30 hover:shadow-2xl hover:shadow-amber-500/40 transition-all hover:scale-105 gap-3"
                onClick={() => window.open("https://pay.celetus.com/ZOXLWXI9", "_blank")}
              >
                <Crown className="h-5 w-5 mr-2" />
                Ativar Plano VIP Agora
                <ChevronRight className="h-5 w-5 ml-2" />
              </Button>
            </div>

<div className="flex items-center justify-center gap-6 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <Check className="h-4 w-4 text-green-500" />
                <span>Ativação Imediata</span>
              </div>
              <div className="flex items-center gap-2">
                <Check className="h-4 w-4 text-green-500" />
                <span>Acesso Vitalício</span>
              </div>
              <div className="flex items-center gap-2">
                <Check className="h-4 w-4 text-green-500" />
                <span>Cancele Quando Quiser</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/admin-guard.tsx"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { getSession, getAdminEmail } from "@/lib/auth"
import { Loader2, ShieldX } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

interface AdminGuardProps {
  children: React.ReactNode
}

export function AdminGuard({ children }: AdminGuardProps) {
  const [status, setStatus] = useState<"loading" | "authorized" | "unauthorized">("loading")
  const router = useRouter()

useEffect(() => {
    const session = getSession()

if (!session?.loggedIn) {
      router.push("/login")
      return
    }

if (session.email !== getAdminEmail()) {
      setStatus("unauthorized")
      return
    }

setStatus("authorized")
  }, [router])

if (status === "loading") {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

if (status === "unauthorized") {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-6">
        <div className="text-center space-y-4">
          <div className="mx-auto w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center">
            <ShieldX className="h-8 w-8 text-red-500" />
          </div>
          <h1 className="text-2xl font-bold">Acesso Negado</h1>
          <p className="text-muted-foreground max-w-md">
            Você não tem permissão para acessar esta página. Apenas administradores podem acessar o painel de
            administração.
          </p>
          <Link href="/">
            <Button>Voltar ao Marketplace</Button>
          </Link>
        </div>
      </div>
    )
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/admin/courses-admin.tsx"
"use client"

import type React from "react"

import { useState, useEffect } 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 { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Plus,
  Pencil,
  Trash2,
  Video,
  BookOpen,
  GraduationCap,
  Users,
  ChevronUp,
  ChevronDown,
  ChevronRight,
  GripVertical,
  LayoutGrid,
  Layers,
  Eye,
  EyeOff,
  Star,
  Move,
  Crown,
  FolderTree,
  PlayCircle,
  Settings,
  Save,
  CheckCircle,
  FolderOpen,
} from "lucide-react"
import {
  getCourses,
  getCategories,
  createCourse,
  updateCourse,
  deleteCourse,
  createCategory,
  updateCategory,
  deleteCategory,
  createLesson,
  updateLesson,
  deleteLesson,
  getPlans,
  getPlanCourseAccess,
  updatePlanCourseAccess,
} from "@/lib/courses-api"
import { createClient } from "@/lib/supabase/client"

// Assuming getLessonsByCourse is defined in "@/lib/courses-api" or a similar utility file.
// If not, you would need to define it or import it.
// For now, let's assume it's available.
import { getLessonsByCourse } from "@/lib/courses-api"
import { RichTextEditor } from "./rich-text-editor"

interface Category {
  id: string
  name: string
  slug: string
  description: string | null
  sort_order: number
  is_active: boolean
}

// Interface for Course defined locally, but the API returns a type named Course.
// Renamed the local interface to avoid redeclaration.
interface LocalCourse {
  id: string
  title: string
  slug: string
  description: string | null
  cover_image: string | null
  category_id: string | null
  instructor: string | null
  duration_hours: number
  lessons_count: number
  is_published: boolean
  is_featured: boolean
  sort_order: number
  is_orderbump?: boolean
  orderbump_price?: number
  orderbump_description?: string
  category?: Category
}

interface Lesson {
  id: string
  course_id: string
  title: string
  description: string | null
  video_url: string | null
  video_type: string
  duration_minutes: number
  sort_order: number
  is_free: boolean
  is_published: boolean
  attachments: any[]
}

interface Plan {
  id: string
  name: string
  slug: string
  description: string | null
  price: number
  features: string[]
}

function ConfigTab() {
  const [introVideoUrl, setIntroVideoUrl] = useState("")
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)

if (data?.value) {
        setIntroVideoUrl(data.value)
      }
      setLoading(false)
    }
    loadConfig()
  }, [])

const handleSave = async () => {
    setSaving(true)
    const supabase = createClient()

// Tenta atualizar, se não existir, insere
    const { error } = await supabase.from("site_config").upsert(
      {
        key: "intro_video_url",
        value: introVideoUrl,
      },
      {
        onConflict: "key",
      },
    )

if (!error) {
      setSaved(true)
      setTimeout(() => setSaved(false), 3000)
    }
    setSaving(false)
  }

if (loading) {
    return <div className="text-center py-8 text-muted-foreground">Carregando...</div>
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <PlayCircle className="h-5 w-5" />
            Vídeo de Introdução
          </CardTitle>
          <CardDescription>
            Configure o vídeo que aparece para novos usuários ao acessar a área de cursos pela primeira vez.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="intro-video">URL do Vídeo (YouTube)</Label>
            <Input
              id="intro-video"
              value={introVideoUrl}
              onChange={(e) => setIntroVideoUrl(e.target.value)}
              placeholder="https://www.youtube.com/watch?v=..."
            />
            <p className="text-xs text-muted-foreground">
              Cole o link do YouTube. Aceita formatos: youtube.com/watch?v=..., youtu.be/... ou link de embed.
            </p>
          </div>

{introVideoUrl && (
            <div className="space-y-2">
              <Label>Pré-visualização</Label>
              <div className="aspect-video bg-black rounded-lg overflow-hidden max-w-md">
                <iframe
                  src={
                    introVideoUrl.includes("youtube.com/watch")
                      ? `https://www.youtube-nocookie.com/embed/${introVideoUrl.split("v=")[1]?.split("&")[0]}`
                      : introVideoUrl.includes("youtu.be/")
                        ? `https://www.youtube-nocookie.com/embed/${introVideoUrl.split("youtu.be/")[1]?.split("?")[0]}`
                        : introVideoUrl
                  }
                  className="w-full h-full"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
            </div>
          )}

<Button onClick={handleSave} disabled={saving} className="gap-2">
            {saved ? (
              <>
                <CheckCircle className="h-4 w-4" />
                Salvo!
              </>
            ) : (
              <>
                <Save className="h-4 w-4" />
                {saving ? "Salvando..." : "Salvar Configuração"}
              </>
            )}
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

export function CoursesAdmin() {
  return (
    <Tabs defaultValue="organizar" className="space-y-6">
      <TabsList className="grid w-full grid-cols-7">
        <TabsTrigger value="organizar">
          <FolderTree className="h-4 w-4 mr-2" />
          Organizar
        </TabsTrigger>
        <TabsTrigger value="vitrines">
          <LayoutGrid className="h-4 w-4 mr-2" />
          Vitrines
        </TabsTrigger>
        <TabsTrigger value="courses">
          <Video className="h-4 w-4 mr-2" />
          Cursos
        </TabsTrigger>
        <TabsTrigger value="categories">
          <Layers className="h-4 w-4 mr-2" />
          Trilhas
        </TabsTrigger>
        <TabsTrigger value="lessons">
          <GraduationCap className="h-4 w-4 mr-2" />
          Aulas
        </TabsTrigger>
        <TabsTrigger value="plans">
          <Users className="h-4 w-4 mr-2" />
          Planos
        </TabsTrigger>
        <TabsTrigger value="config">
          <Settings className="h-4 w-4 mr-2" />
          Configurações
        </TabsTrigger>
      </TabsList>

<TabsContent value="config">
        <ConfigTab />
      </TabsContent>
    </Tabs>
  )
}

function OrganizarTab() {
  const [courses, setCourses] = useState<LocalCourse[]>([]) // Used LocalCourse interface here
  const [categories, setCategories] = useState<Category[]>([])
  const [lessons, setLessons] = useState<{ [courseId: string]: Lesson[] }>({})
  const [loading, setLoading] = useState(false)
  const [expandedCategories, setExpandedCategories] = useState<string[]>([])
  const [expandedCourses, setExpandedCourses] = useState<string[]>([])
  const [movingCourse, setMovingCourse] = useState<LocalCourse | null>(null) // Used LocalCourse interface here

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

async function loadData() {
    setLoading(true)
    const [coursesData, categoriesData] = await Promise.all([getCourses(), getCategories()])
    setCourses(coursesData)
    setCategories(categoriesData.sort((a: Category, b: Category) => a.sort_order - b.sort_order))
    setLoading(false)
  }

async function loadLessonsForCourse(courseId: string) {
    if (lessons[courseId]) return
    // Fixed: Call getLessonsByCourse correctly
    const lessonsData = await getLessonsByCourse(courseId)
    setLessons((prev) => ({
      ...prev,
      [courseId]: lessonsData.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order),
    }))
  }

function toggleCategory(categoryId: string) {
    setExpandedCategories((prev) =>
      prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId],
    )
  }

function toggleCourse(courseId: string) {
    if (!expandedCourses.includes(courseId)) {
      loadLessonsForCourse(courseId)
    }
    setExpandedCourses((prev) => (prev.includes(courseId) ? prev.filter((id) => id !== courseId) : [...prev, courseId]))
  }

function getCoursesByCategory(categoryId: string) {
    return courses.filter((c) => c.category_id === categoryId).sort((a, b) => a.sort_order - b.sort_order)
  }

function getUncategorizedCourses() {
    return courses.filter((c) => !c.category_id).sort((a, b) => a.sort_order - b.sort_order)
  }

// Funções de ordenação de TRILHAS
  async function moveCategoryUp(category: Category) {
    const currentIndex = categories.findIndex((c) => c.id === category.id)
    if (currentIndex <= 0) return
    const newOrder = categories[currentIndex - 1].sort_order
    const prevOrder = category.sort_order
    await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(categories[currentIndex - 1].id, { sort_order: prevOrder })
    await loadData()
  }

async function moveCategoryDown(category: Category) {
    const currentIndex = categories.findIndex((c) => c.id === category.id)
    if (currentIndex >= categories.length - 1) return
    const newOrder = categories[currentIndex + 1].sort_order
    const nextOrder = category.sort_order
    await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(categories[currentIndex + 1].id, { sort_order: nextOrder })
    await loadData()
  }

async function toggleCategoryActive(category: Category) {
    await updateCategory(category.id, { is_active: !category.is_active })
    await loadData()
  }

// Funções de ordenação de CURSOS
  async function moveCourseUp(course: LocalCourse) {
    // Used LocalCourse interface here
    const categoryCourses = course.category_id ? getCoursesByCategory(course.category_id) : getUncategorizedCourses()
    const currentIndex = categoryCourses.findIndex((c) => c.id === course.id)
    if (currentIndex <= 0) return
    const newOrder = categoryCourses[currentIndex - 1].sort_order
    const prevOrder = course.sort_order
    await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(categoryCourses[currentIndex - 1].id, { sort_order: prevOrder })
    await loadData()
  }

async function moveCourseDown(course: LocalCourse) {
    // Used LocalCourse interface here
    const categoryCourses = course.category_id ? getCoursesByCategory(course.category_id) : getUncategorizedCourses()
    const currentIndex = categoryCourses.findIndex((c) => c.id === course.id)
    if (currentIndex >= categoryCourses.length - 1) return
    const newOrder = categoryCourses[currentIndex + 1].sort_order
    const nextOrder = course.sort_order
    await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(categoryCourses[currentIndex + 1].id, { sort_order: nextOrder })
    await loadData()
  }

async function toggleCoursePublished(course: LocalCourse) {
    // Used LocalCourse interface here
    await updateCourse(course.id, { is_published: !course.is_published })
    await loadData()
  }

async function toggleCourseFeatured(course: LocalCourse) {
    // Used LocalCourse interface here
    await updateCourse(course.id, { is_featured: !course.is_featured })
    await loadData()
  }

async function moveCourseToCategory(course: LocalCourse, newCategoryId: string | null) {
    // Used LocalCourse interface here
    const coursesInNewCategory = newCategoryId ? getCoursesByCategory(newCategoryId) : getUncategorizedCourses()
    const newSortOrder =
      coursesInNewCategory.length > 0 ? Math.max(...coursesInNewCategory.map((c) => c.sort_order)) + 1 : 1
    await updateCourse(course.id, { category_id: newCategoryId, sort_order: newSortOrder })
    setMovingCourse(null)
    await loadData()
  }

// Funções de ordenação de AULAS
  async function moveLessonUp(lesson: Lesson) {
    const courseLessons = lessons[lesson.course_id] || []
    const currentIndex = courseLessons.findIndex((l) => l.id === lesson.id)
    if (currentIndex <= 0) return
    const newOrder = courseLessons[currentIndex - 1].sort_order
    const prevOrder = lesson.sort_order
    await updateLesson(lesson.id, { sort_order: newOrder })
    await updateLesson(courseLessons[currentIndex - 1].id, { sort_order: prevOrder })
    const lessonsData = await getLessonsByCourse(lesson.course_id)
    setLessons((prev) => ({
      ...prev,
      [lesson.course_id]: lessonsData.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order),
    }))
  }

async function moveLessonDown(lesson: Lesson) {
    const courseLessons = lessons[lesson.course_id] || []
    const currentIndex = courseLessons.findIndex((l) => l.id === lesson.id)
    if (currentIndex >= courseLessons.length - 1) return
    const newOrder = courseLessons[currentIndex + 1].sort_order
    const nextOrder = lesson.sort_order
    await updateLesson(lesson.id, { sort_order: newOrder })
    await updateLesson(courseLessons[currentIndex + 1].id, { sort_order: nextOrder })
    const lessonsData = await getLessonsByCourse(lesson.course_id)
    setLessons((prev) => ({
      ...prev,
      [lesson.course_id]: lessonsData.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order),
    }))
  }

async function toggleLessonPublished(lesson: Lesson) {
    await updateLesson(lesson.id, { is_published: !lesson.is_published })
    const lessonsData = await getLessonsByCourse(lesson.course_id)
    setLessons((prev) => ({
      ...prev,
      [lesson.course_id]: lessonsData.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order),
    }))
  }

async function toggleLessonFree(lesson: Lesson) {
    await updateLesson(lesson.id, { is_free: !lesson.is_free })
    const lessonsData = await getLessonsByCourse(lesson.course_id)
    setLessons((prev) => ({
      ...prev,
      [lesson.course_id]: lessonsData.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order),
    }))
  }

if (loading) {
    return (
      <Card>
        <CardContent className="py-12 text-center">
          <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto"></div>
          <p className="mt-4 text-muted-foreground">Carregando...</p>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-4">
      <Card className="border-dashed border-2 border-emerald-500/30 bg-emerald-500/5">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-emerald-400">
            <FolderTree className="h-5 w-5" />
            Organizar Trilhas, Cursos e Aulas
          </CardTitle>
          <CardDescription>Clique nas trilhas e cursos para expandir. Use as setas para reordenar.</CardDescription>
        </CardHeader>
      </Card>

{/* Modal para mover curso */}
      {movingCourse && (
        <Dialog open={!!movingCourse} onOpenChange={() => setMovingCourse(null)}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Mover Curso</DialogTitle>
              <DialogDescription>Escolha para qual trilha deseja mover "{movingCourse.title}"</DialogDescription>
            </DialogHeader>
            <div className="space-y-2 mt-4">
              <Button
                variant="outline"
                className="w-full justify-start bg-transparent"
                onClick={() => moveCourseToCategory(movingCourse, null)}
              >
                <BookOpen className="h-4 w-4 mr-2 text-muted-foreground" />
                Sem Trilha
              </Button>
              {categories.map((cat) => (
                <Button
                  key={cat.id}
                  variant="outline"
                  className={`w-full justify-start ${movingCourse.category_id === cat.id ? "border-primary" : ""}`}
                  onClick={() => moveCourseToCategory(movingCourse, cat.id)}
                  disabled={movingCourse.category_id === cat.id}
                >
                  <Layers className="h-4 w-4 mr-2 text-primary" />
                  {cat.name}
                </Button>
              ))}
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* Trilhas */}
      <div className="space-y-2">
        {categories.map((category, catIndex) => {
          const categoryCourses = getCoursesByCategory(category.id)
          const isExpanded = expandedCategories.includes(category.id)

return (
            <Card key={category.id} className={`${!category.is_active ? "opacity-50" : ""}`}>
              <div
                className="flex items-center gap-2 p-4 cursor-pointer hover:bg-accent/50 transition-colors"
                onClick={() => toggleCategory(category.id)}
              >
                <ChevronRight className={`h-5 w-5 transition-transform ${isExpanded ? "rotate-90" : ""}`} />
                <Layers className="h-5 w-5 text-primary" />
                <span className="font-semibold flex-1">{category.name}</span>
                <Badge variant="secondary">{categoryCourses.length} cursos</Badge>

{/* Controles da Trilha */}
                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8"
                    onClick={() => moveCategoryUp(category)}
                    disabled={catIndex === 0}
                  >
                    <ChevronUp className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-8 w-8"
                    onClick={() => moveCategoryDown(category)}
                    disabled={catIndex === categories.length - 1}
                  >
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant={category.is_active ? "default" : "outline"}
                    className={`h-8 w-8 ${category.is_active ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
                    onClick={() => toggleCategoryActive(category)}
                  >
                    {category.is_active ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
                  </Button>
                </div>
              </div>

{isExpanded && (
                <div className="border-t border-border">
                  {categoryCourses.length === 0 ? (
                    <p className="p-4 text-sm text-muted-foreground text-center">Nenhum curso nesta trilha</p>
                  ) : (
                    <div className="p-2 space-y-1">
                      {categoryCourses.map((course, courseIndex) => {
                        const courseLessons = lessons[course.id] || []
                        const isCourseExpanded = expandedCourses.includes(course.id)

return (
                          <div
                            key={course.id}
                            className={`rounded-lg border ${!course.is_published ? "opacity-50" : ""}`}
                          >
                            <div
                              className="flex items-center gap-2 p-3 cursor-pointer hover:bg-accent/30 transition-colors"
                              onClick={() => toggleCourse(course.id)}
                            >
                              <ChevronRight
                                className={`h-4 w-4 transition-transform ${isCourseExpanded ? "rotate-90" : ""}`}
                              />
                              <Video className="h-4 w-4 text-blue-400" />
                              <span className="flex-1 text-sm">{course.title}</span>

{course.is_featured && <Crown className="h-4 w-4 text-yellow-500" />}

{/* Controles do Curso */}
                              <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                                <Button
                                  size="icon"
                                  variant="ghost"
                                  className="h-7 w-7"
                                  onClick={() => moveCourseUp(course)}
                                  disabled={courseIndex === 0}
                                >
                                  <ChevronUp className="h-3 w-3" />
                                </Button>
                                <Button
                                  size="icon"
                                  variant="ghost"
                                  className="h-7 w-7"
                                  onClick={() => moveCourseDown(course)}
                                  disabled={courseIndex === categoryCourses.length - 1}
                                >
                                  <ChevronDown className="h-3 w-3" />
                                </Button>
                                <Button
                                  size="icon"
                                  variant={course.is_published ? "default" : "outline"}
                                  className={`h-7 w-7 ${course.is_published ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
                                  onClick={() => toggleCoursePublished(course)}
                                >
                                  {course.is_published ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                                </Button>
                                <Button
                                  size="icon"
                                  variant={course.is_featured ? "default" : "outline"}
                                  className={`h-7 w-7 ${course.is_featured ? "bg-yellow-600 hover:bg-yellow-700" : ""}`}
                                  onClick={() => toggleCourseFeatured(course)}
                                >
                                  <Crown className="h-3 w-3" />
                                </Button>
                                <Button
                                  size="icon"
                                  variant="outline"
                                  className="h-7 w-7 bg-transparent"
                                  onClick={() => setMovingCourse(course)}
                                >
                                  <Move className="h-3 w-3" />
                                </Button>
                              </div>
                            </div>

{isCourseExpanded && (
                              <div className="border-t border-border bg-accent/20 p-2 space-y-1">
                                {courseLessons.length === 0 ? (
                                  <p className="text-xs text-muted-foreground text-center py-2">
                                    Nenhuma aula neste curso
                                  </p>
                                ) : (
                                  courseLessons.map((lesson, lessonIndex) => (
                                    <div
                                      key={lesson.id}
                                      className={`flex items-center gap-2 p-2 rounded bg-background/50 ${!lesson.is_published ? "opacity-50" : ""}`}
                                    >
                                      <PlayCircle className="h-4 w-4 text-purple-400" />
                                      <span className="flex-1 text-xs">{lesson.title}</span>

{lesson.is_free && (
                                        <Badge variant="secondary" className="text-xs bg-blue-500/20 text-blue-400">
                                          Grátis
                                        </Badge>
                                      )}

{/* Controles da Aula */}
                                      <div className="flex items-center gap-1">
                                        <Button
                                          size="icon"
                                          variant="ghost"
                                          className="h-6 w-6"
                                          onClick={() => moveLessonUp(lesson)}
                                          disabled={lessonIndex === 0}
                                        >
                                          <ChevronUp className="h-3 w-3" />
                                        </Button>
                                        <Button
                                          size="icon"
                                          variant="ghost"
                                          className="h-6 w-6"
                                          onClick={() => moveLessonDown(lesson)}
                                          disabled={lessonIndex === courseLessons.length - 1}
                                        >
                                          <ChevronDown className="h-3 w-3" />
                                        </Button>
                                        <Button
                                          size="icon"
                                          variant={lesson.is_published ? "default" : "outline"}
                                          className={`h-6 w-6 ${lesson.is_published ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
                                          onClick={() => toggleLessonPublished(lesson)}
                                        >
                                          {lesson.is_published ? (
                                            <Eye className="h-3 w-3" />
                                          ) : (
                                            <EyeOff className="h-3 w-3" />
                                          )}
                                        </Button>
                                        <Button
                                          size="icon"
                                          variant={lesson.is_free ? "default" : "outline"}
                                          className={`h-6 w-6 ${lesson.is_free ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                                          onClick={() => toggleLessonFree(lesson)}
                                        >
                                          <Star className="h-3 w-3" />
                                        </Button>
                                      </div>
                                    </div>
                                  ))
                                )}
                              </div>
                            )}
                          </div>
                        )
                      })}
                    </div>
                  )}
                </div>
              )}
            </Card>
          )
        })}

{/* Cursos sem trilha */}
        {getUncategorizedCourses().length > 0 && (
          <Card className="border-dashed">
            <div
              className="flex items-center gap-2 p-4 cursor-pointer hover:bg-accent/50 transition-colors"
              onClick={() => toggleCategory("uncategorized")}
            >
              <ChevronRight
                className={`h-5 w-5 transition-transform ${expandedCategories.includes("uncategorized") ? "rotate-90" : ""}`}
              />
              <BookOpen className="h-5 w-5 text-muted-foreground" />
              <span className="font-semibold flex-1 text-muted-foreground">Sem Trilha</span>
              <Badge variant="outline">{getUncategorizedCourses().length} cursos</Badge>
            </div>

{expandedCategories.includes("uncategorized") && (
              <div className="border-t border-border p-2 space-y-1">
                {getUncategorizedCourses().map((course, courseIndex) => {
                  const courseLessons = lessons[course.id] || []
                  const isCourseExpanded = expandedCourses.includes(course.id)
                  const uncatCourses = getUncategorizedCourses()

return (
                    <div key={course.id} className={`rounded-lg border ${!course.is_published ? "opacity-50" : ""}`}>
                      <div
                        className="flex items-center gap-2 p-3 cursor-pointer hover:bg-accent/30 transition-colors"
                        onClick={() => toggleCourse(course.id)}
                      >
                        <ChevronRight
                          className={`h-4 w-4 transition-transform ${isCourseExpanded ? "rotate-90" : ""}`}
                        />
                        <Video className="h-4 w-4 text-blue-400" />
                        <span className="flex-1 text-sm">{course.title}</span>

{course.is_featured && <Crown className="h-4 w-4 text-yellow-500" />}

{/* Controles do Curso */}
                        <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                          <Button
                            size="icon"
                            variant="ghost"
                            className="h-7 w-7"
                            onClick={() => moveCourseUp(course)}
                            disabled={courseIndex === 0}
                          >
                            <ChevronUp className="h-3 w-3" />
                          </Button>
                          <Button
                            size="icon"
                            variant="ghost"
                            className="h-7 w-7"
                            onClick={() => moveCourseDown(course)}
                            disabled={courseIndex === uncatCourses.length - 1}
                          >
                            <ChevronDown className="h-3 w-3" />
                          </Button>
                          <Button
                            size="icon"
                            variant={course.is_published ? "default" : "outline"}
                            className={`h-7 w-7 ${course.is_published ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
                            onClick={() => toggleCoursePublished(course)}
                          >
                            {course.is_published ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                          </Button>
                          <Button
                            size="icon"
                            variant={course.is_featured ? "default" : "outline"}
                            className={`h-7 w-7 ${course.is_featured ? "bg-yellow-600 hover:bg-yellow-700" : ""}`}
                            onClick={() => toggleCourseFeatured(course)}
                          >
                            <Crown className="h-3 w-3" />
                          </Button>
                          <Button
                            size="icon"
                            variant="outline"
                            className="h-7 w-7 bg-transparent"
                            onClick={() => setMovingCourse(course)}
                          >
                            <Move className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>

{isCourseExpanded && (
                        <div className="border-t border-border bg-accent/20 p-2 space-y-1">
                          {courseLessons.length === 0 ? (
                            <p className="text-xs text-muted-foreground text-center py-2">Nenhuma aula neste curso</p>
                          ) : (
                            courseLessons.map((lesson, lessonIndex) => (
                              <div
                                key={lesson.id}
                                className={`flex items-center gap-2 p-2 rounded bg-background/50 ${!lesson.is_published ? "opacity-50" : ""}`}
                              >
                                <PlayCircle className="h-4 w-4 text-purple-400" />
                                <span className="flex-1 text-xs">{lesson.title}</span>

{lesson.is_free && (
                                  <Badge variant="secondary" className="text-xs bg-blue-500/20 text-blue-400">
                                    Grátis
                                  </Badge>
                                )}

{/* Controles da Aula */}
                                <div className="flex items-center gap-1">
                                  <Button
                                    size="icon"
                                    variant="ghost"
                                    className="h-6 w-6"
                                    onClick={() => moveLessonUp(lesson)}
                                    disabled={lessonIndex === 0}
                                  >
                                    <ChevronUp className="h-3 w-3" />
                                  </Button>
                                  <Button
                                    size="icon"
                                    variant="ghost"
                                    className="h-6 w-6"
                                    onClick={() => moveLessonDown(lesson)}
                                    disabled={lessonIndex === courseLessons.length - 1}
                                  >
                                    <ChevronDown className="h-3 w-3" />
                                  </Button>
                                  <Button
                                    size="icon"
                                    variant={lesson.is_published ? "default" : "outline"}
                                    className={`h-6 w-6 ${lesson.is_published ? "bg-emerald-600 hover:bg-emerald-700" : ""}`}
                                    onClick={() => toggleLessonPublished(lesson)}
                                  >
                                    {lesson.is_published ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
                                  </Button>
                                  <Button
                                    size="icon"
                                    variant={lesson.is_free ? "default" : "outline"}
                                    className={`h-6 w-6 ${lesson.is_free ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                                    onClick={() => toggleLessonFree(lesson)}
                                  >
                                    <Star className="h-3 w-3" />
                                  </Button>
                                </div>
                              </div>
                            ))
                          )}
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            )}
          </Card>
        )}
      </div>
    </div>
  )
}

function VitrinesTab() {
  const [courses, setCourses] = useState<LocalCourse[]>([]) // Used LocalCourse interface here
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(false)
  const [movingCourse, setMovingCourse] = useState<LocalCourse | null>(null) // Used LocalCourse interface here

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

function getCoursesByCategory(categoryId: string) {
    return courses.filter((c) => c.category_id === categoryId).sort((a, b) => a.sort_order - b.sort_order)
  }

function getUncategorizedCourses() {
    return courses.filter((c) => !c.category_id).sort((a, b) => a.sort_order - b.sort_order)
  }

async function moveCourseUp(course: LocalCourse) {
    // Used LocalCourse interface here
    const categoryCourses = getCoursesByCategory(course.category_id || "")
    const currentIndex = categoryCourses.findIndex((c) => c.id === course.id)
    if (currentIndex <= 0) return

const newOrder = categoryCourses[currentIndex - 1].sort_order
    const prevOrder = course.sort_order

await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(categoryCourses[currentIndex - 1].id, { sort_order: prevOrder })
    await loadData()
  }

async function moveCourseDown(course: LocalCourse) {
    // Used LocalCourse interface here
    const categoryCourses = getCoursesByCategory(course.category_id || "")
    const currentIndex = categoryCourses.findIndex((c) => c.id === course.id)
    if (currentIndex >= categoryCourses.length - 1) return

const newOrder = categoryCourses[currentIndex + 1].sort_order
    const nextOrder = course.sort_order

await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(categoryCourses[currentIndex + 1].id, { sort_order: nextOrder })
    await loadData()
  }

async function moveCategoryUp(category: Category) {
    const currentIndex = categories.findIndex((c) => c.id === category.id)
    if (currentIndex <= 0) return

const newOrder = categories[currentIndex - 1].sort_order
    const prevOrder = category.sort_order

await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(categories[currentIndex - 1].id, { sort_order: prevOrder })
    await loadData()
  }

async function moveCategoryDown(category: Category) {
    const currentIndex = categories.findIndex((c) => c.id === category.id)
    if (currentIndex >= categories.length - 1) return

const newOrder = categories[currentIndex + 1].sort_order
    const nextOrder = category.sort_order

await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(categories[currentIndex + 1].id, { sort_order: nextOrder })
    await loadData()
  }

await updateCourse(course.id, {
      category_id: newCategoryId,
      sort_order: newSortOrder,
    })
    setMovingCourse(null)
    await loadData()
  }

async function togglePublished(course: LocalCourse) {
    // Used LocalCourse interface here
    await updateCourse(course.id, { is_published: !course.is_published })
    await loadData()
  }

async function toggleFeatured(course: LocalCourse) {
    // Used LocalCourse interface here
    await updateCourse(course.id, { is_featured: !course.is_featured })
    await loadData()
  }

return (
    <div className="space-y-6">
      <Card className="border-dashed border-2 border-primary/30 bg-primary/5">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-primary">
            <LayoutGrid className="h-5 w-5" />
            Organize suas Vitrines
          </CardTitle>
          <CardDescription>
            Arraste e organize os cursos em cada vitrine/trilha. Use as setas para reordenar.
          </CardDescription>
        </CardHeader>
      </Card>

{/* Move Course Modal */}
      {movingCourse && (
        <Dialog open={!!movingCourse} onOpenChange={() => setMovingCourse(null)}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Mover Curso</DialogTitle>
              <DialogDescription>Escolha para qual trilha deseja mover "{movingCourse.title}"</DialogDescription>
            </DialogHeader>
            <div className="space-y-2 mt-4">
              <Button
                variant="outline"
                className="w-full justify-start bg-transparent"
                onClick={() => moveCourseToCategory(movingCourse, null)}
              >
                <BookOpen className="h-4 w-4 mr-2 text-muted-foreground" />
                Sem Trilha (Não categorizado)
              </Button>
              {categories.map((cat) => (
                <Button
                  key={cat.id}
                  variant={movingCourse.category_id === cat.id ? "secondary" : "outline"}
                  className="w-full justify-start"
                  onClick={() => moveCourseToCategory(movingCourse, cat.id)}
                  disabled={movingCourse.category_id === cat.id}
                >
                  <Layers className="h-4 w-4 mr-2 text-blue-500" />
                  {cat.name}
                  {movingCourse.category_id === cat.id && (
                    <Badge className="ml-auto" variant="secondary">
                      Atual
                    </Badge>
                  )}
                </Button>
              ))}
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* Categories/Vitrines */}
      {categories.map((category, catIndex) => (
        <Card key={category.id} className={!category.is_active ? "opacity-60" : ""}>
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex flex-col gap-1">
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-6 w-6"
                    onClick={() => moveCategoryUp(category)}
                    disabled={catIndex === 0}
                  >
                    <ChevronUp className="h-4 w-4" />
                  </Button>
                  <Button
                    size="icon"
                    variant="ghost"
                    className="h-6 w-6"
                    onClick={() => moveCategoryDown(category)}
                    disabled={catIndex === categories.length - 1}
                  >
                    <ChevronDown className="h-4 w-4" />
                  </Button>
                </div>
                <div>
                  <CardTitle className="flex items-center gap-2">
                    <Layers className="h-5 w-5 text-blue-500" />
                    {category.name}
                    {!category.is_active && <Badge variant="secondary">Inativa</Badge>}
                  </CardTitle>
                  <CardDescription className="mt-1">
                    {getCoursesByCategory(category.id).length} curso(s) • Ordem: {category.sort_order}
                  </CardDescription>
                </div>
              </div>
              <Badge variant="outline" className="text-xs">
                Vitrine #{catIndex + 1}
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            {getCoursesByCategory(category.id).length === 0 ? (
              <div className="border-2 border-dashed rounded-lg p-8 text-center text-muted-foreground">
                <BookOpen className="h-8 w-8 mx-auto mb-2 opacity-50" />
                <p>Nenhum curso nesta trilha</p>
                <p className="text-sm">Mova cursos para cá usando o botão de mover</p>
              </div>
            ) : (
              <div className="grid gap-3">
                {getCoursesByCategory(category.id).map((course, index) => (
                  <CourseCard
                    key={course.id}
                    course={course}
                    index={index}
                    total={getCoursesByCategory(category.id).length}
                    onMoveUp={() => moveCourseUp(course)}
                    onMoveDown={() => moveCourseDown(course)}
                    onMove={() => setMovingCourse(course)}
                    onTogglePublished={() => togglePublished(course)}
                    onToggleFeatured={() => toggleFeatured(course)}
                  />
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      ))}

{/* Uncategorized Courses */}
      {getUncategorizedCourses().length > 0 && (
        <Card className="border-yellow-500/30 bg-yellow-500/5">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-yellow-600">
              <BookOpen className="h-5 w-5" />
              Cursos Sem Trilha
            </CardTitle>
            <CardDescription>Estes cursos não estão em nenhuma trilha. Mova-os para uma vitrine.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3">
              {getUncategorizedCourses().map((course, index) => (
                <CourseCard
                  key={course.id}
                  course={course}
                  index={index}
                  total={getUncategorizedCourses().length}
                  onMoveUp={() => moveCourseUp(course)}
                  onMoveDown={() => moveCourseDown(course)}
                  onMove={() => setMovingCourse(course)}
                  onTogglePublished={() => togglePublished(course)}
                  onToggleFeatured={() => toggleFeatured(course)}
                />
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}

function CourseCard({
  course,
  index,
  total,
  onMoveUp,
  onMoveDown,
  onMove,
  onTogglePublished,
  onToggleFeatured,
}: {
  course: LocalCourse // Used LocalCourse interface here
  index: number
  total: number
  onMoveUp: () => void
  onMoveDown: () => void
  onMove: () => void
  onTogglePublished: () => void
  onToggleFeatured: () => void
}) {
  return (
    <div
      className={`flex items-center gap-3 p-3 rounded-lg border bg-card transition-all hover:shadow-md ${
        !course.is_published ? "opacity-60 bg-muted/30" : ""
      } ${course.is_featured ? "border-yellow-500/50 bg-yellow-500/5" : ""}`}
    >
      {/* Reorder controls */}
      <div className="flex flex-col gap-0.5">
        <Button size="icon" variant="ghost" className="h-6 w-6" onClick={onMoveUp} disabled={index === 0}>
          <ChevronUp className="h-3 w-3" />
        </Button>
        <div className="flex items-center justify-center h-6 w-6">
          <GripVertical className="h-4 w-4 text-muted-foreground" />
        </div>
        <Button size="icon" variant="ghost" className="h-6 w-6" onClick={onMoveDown} disabled={index === total - 1}>
          <ChevronDown className="h-3 w-3" />
        </Button>
      </div>

{/* Cover image */}
      {course.cover_image ? (
        <img
          src={course.cover_image || "/placeholder.svg"}
          alt={course.title}
          className="w-12 h-16 object-cover rounded"
        />
      ) : (
        <div className="w-12 h-16 bg-muted rounded flex items-center justify-center">
          <Video className="h-5 w-5 text-muted-foreground" />
        </div>
      )}

{/* Course info */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <h3 className="font-medium truncate">{course.title}</h3>
          {course.is_featured && <Star className="h-4 w-4 text-yellow-500 fill-yellow-500 flex-shrink-0" />}
        </div>
        <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
          <span>{course.lessons_count} aulas</span>
          <span>•</span>
          <span>{course.duration_hours}h</span>
          <span>•</span>
          <span>Ordem: {course.sort_order}</span>
        </div>
      </div>

{/* Status badges */}
      <div className="flex items-center gap-2 flex-shrink-0">
        <Button
          size="sm"
          variant={course.is_published ? "default" : "outline"}
          className={`h-8 ${course.is_published ? "bg-green-600 hover:bg-green-700" : ""}`}
          onClick={onTogglePublished}
        >
          {course.is_published ? (
            <>
              <Eye className="h-3 w-3 mr-1" />
              Visível
            </>
          ) : (
            <>
              <EyeOff className="h-3 w-3 mr-1" />
              Oculto
            </>
          )}
        </Button>
        <Button
          size="sm"
          variant={course.is_featured ? "default" : "outline"}
          className={`h-8 ${course.is_featured ? "bg-yellow-600 hover:bg-yellow-700" : ""}`}
          onClick={onToggleFeatured}
        >
          <Star className={`h-3 w-3 ${course.is_featured ? "fill-white" : ""}`} />
        </Button>
        <Button size="sm" variant="outline" className="h-8 bg-transparent" onClick={onMove}>
          <Move className="h-3 w-3 mr-1" />
          Mover
        </Button>
      </div>
    </div>
  )
}

function CoursesTab() {
  const [courses, setCourses] = useState<LocalCourse[]>([])
  const [categories, setCategories] = useState<Category[]>([])
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingCourse, setEditingCourse] = useState<LocalCourse | null>(null)
  const [loading, setLoading] = useState(false)
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())

const [formData, setFormData] = useState({
    title: "",
    slug: "",
    description: "",
    cover_image: "",
    category_id: "",
    instructor: "",
    duration_hours: 0,
    is_published: false,
    is_featured: false,
    is_orderbump: false,
    orderbump_price: 0,
    orderbump_description: "",
    sort_order: 0,
  })

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

async function loadData() {
    const [coursesData, categoriesData] = await Promise.all([getCourses(), getCategories()])
    setCourses(coursesData)
    setCategories(categoriesData)
  }

function getCoursesByCategory(categoryId: string) {
    return courses.filter((c) => c.category_id === categoryId).sort((a, b) => a.sort_order - b.sort_order)
  }

function getCoursesWithoutCategory() {
    return courses.filter((c) => !c.category_id).sort((a, b) => a.sort_order - b.sort_order)
  }

function toggleCategory(categoryId: string) {
    const newExpanded = new Set(expandedCategories)
    if (newExpanded.has(categoryId)) {
      newExpanded.delete(categoryId)
    } else {
      newExpanded.add(categoryId)
    }
    setExpandedCategories(newExpanded)
  }

async function moveCourseUp(course: LocalCourse, categoryCourses: LocalCourse[], index: number) {
    if (index <= 0) return
    const prevCourse = categoryCourses[index - 1]
    const newOrder = prevCourse.sort_order
    const prevOrder = course.sort_order

await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(prevCourse.id, { sort_order: prevOrder })
    await loadData()
  }

async function moveCourseDown(course: LocalCourse, categoryCourses: LocalCourse[], index: number) {
    if (index >= categoryCourses.length - 1) return
    const nextCourse = categoryCourses[index + 1]
    const newOrder = nextCourse.sort_order
    const nextOrder = course.sort_order

await updateCourse(course.id, { sort_order: newOrder })
    await updateCourse(nextCourse.id, { sort_order: nextOrder })
    await loadData()
  }

// ... existing code for togglePublished, toggleFeatured, openDialog, handleSubmit, handleDelete ...

async function togglePublished(course: LocalCourse) {
    await updateCourse(course.id, { is_published: !course.is_published })
    await loadData()
  }

async function toggleFeatured(course: LocalCourse) {
    await updateCourse(course.id, { is_featured: !course.is_featured })
    await loadData()
  }

function openDialog(course?: LocalCourse) {
    if (course) {
      setEditingCourse(course)
      setFormData({
        title: course.title,
        slug: course.slug,
        description: course.description || "",
        cover_image: course.cover_image || "",
        category_id: course.category_id || "",
        instructor: course.instructor || "",
        duration_hours: course.duration_hours || 0,
        is_published: course.is_published,
        is_featured: course.is_featured || false,
        is_orderbump: course.is_orderbump || false,
        orderbump_price: course.orderbump_price || 0,
        orderbump_description: course.orderbump_description || "",
        sort_order: course.sort_order,
      })
    } else {
      setEditingCourse(null)
      setFormData({
        title: "",
        slug: "",
        description: "",
        cover_image: "",
        category_id: "",
        instructor: "",
        duration_hours: 0,
        is_published: false,
        is_featured: false,
        is_orderbump: false,
        orderbump_price: 0,
        orderbump_description: "",
        sort_order: courses.length,
      })
    }
    setIsDialogOpen(true)
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    if (editingCourse) {
      await updateCourse(editingCourse.id, formData)
    } else {
      await createCourse(formData)
    }
    await loadData()
    setIsDialogOpen(false)
    setLoading(false)
  }

async function handleDelete(id: string) {
    if (confirm("Tem certeza que deseja excluir este curso?")) {
      await deleteCourse(id)
      await loadData()
    }
  }

function CourseItem({
    course,
    categoryCourses,
    index,
  }: { course: LocalCourse; categoryCourses: LocalCourse[]; index: number }) {
    return (
      <div
        className={`flex items-center gap-3 p-3 rounded-lg border transition-all hover:shadow-md ${
          !course.is_published ? "opacity-60 bg-muted/30" : ""
        } ${course.is_featured ? "border-yellow-500/50 bg-yellow-500/5" : ""}`}
      >
        <div className="flex flex-col gap-0.5">
          <Button
            size="icon"
            variant="ghost"
            className="h-6 w-6"
            onClick={() => moveCourseUp(course, categoryCourses, index)}
            disabled={index === 0}
          >
            <ChevronUp className="h-3 w-3" />
          </Button>
          <div className="flex items-center justify-center h-6 w-6 text-xs font-medium text-muted-foreground">
            {index + 1}
          </div>
          <Button
            size="icon"
            variant="ghost"
            className="h-6 w-6"
            onClick={() => moveCourseDown(course, categoryCourses, index)}
            disabled={index === categoryCourses.length - 1}
          >
            <ChevronDown className="h-3 w-3" />
          </Button>
        </div>

{course.cover_image ? (
          <img
            src={course.cover_image || "/placeholder.svg"}
            alt={course.title}
            className="w-12 h-16 object-cover rounded"
          />
        ) : (
          <div className="w-12 h-16 bg-muted rounded flex items-center justify-center">
            <Video className="h-5 w-5 text-muted-foreground" />
          </div>
        )}

<div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="font-medium truncate">{course.title}</h3>
            {course.is_featured && <Crown className="h-4 w-4 text-yellow-500 flex-shrink-0" />}
          </div>
        </div>

<div className="flex items-center gap-2 flex-shrink-0">
          <Button
            size="sm"
            variant={course.is_published ? "default" : "outline"}
            className={`h-8 ${course.is_published ? "bg-green-600 hover:bg-green-700" : ""}`}
            onClick={() => togglePublished(course)}
          >
            {course.is_published ? (
              <>
                <Eye className="h-3 w-3 mr-1" />
                Visível
              </>
            ) : (
              <>
                <EyeOff className="h-3 w-3 mr-1" />
                Oculto
              </>
            )}
          </Button>
          <Button
            size="sm"
            variant={course.is_featured ? "default" : "outline"}
            className={`h-8 ${course.is_featured ? "bg-yellow-600 hover:bg-yellow-700" : ""}`}
            onClick={() => toggleFeatured(course)}
            title={course.is_featured ? "Somente VIP" : "Para todos"}
          >
            <Crown className={`h-3 w-3 ${course.is_featured ? "fill-white" : ""}`} />
          </Button>
          <Button size="sm" variant="outline" className="h-8 bg-transparent" onClick={() => openDialog(course)}>
            <Pencil className="h-3 w-3" />
          </Button>
          <Button
            size="sm"
            variant="outline"
            className="h-8 text-red-500 hover:text-red-600 bg-transparent"
            onClick={() => handleDelete(course.id)}
          >
            <Trash2 className="h-3 w-3" />
          </Button>
        </div>
      </div>
    )
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <CardTitle>Cursos</CardTitle>
          <CardDescription>Organize seus cursos dentro de cada trilha</CardDescription>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button onClick={() => openDialog()}>
              <Plus className="h-4 w-4 mr-2" />
              Novo Curso
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>{editingCourse ? "Editar Curso" : "Novo Curso"}</DialogTitle>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="title">Título</Label>
                  <Input
                    id="title"
                    value={formData.title}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        title: e.target.value,
                        slug: e.target.value
                          .toLowerCase()
                          .replace(/\s+/g, "-")
                          .replace(/[^a-z0-9-]/g, ""),
                      })
                    }
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="category_id">Trilha</Label>
                  <select
                    id="category_id"
                    className="w-full h-10 rounded-md border border-input bg-background px-3 py-2"
                    value={formData.category_id}
                    onChange={(e) => setFormData({ ...formData, category_id: e.target.value })}
                  >
                    <option value="">Sem trilha</option>
                    {categories.map((cat) => (
                      <option key={cat.id} value={cat.id}>
                        {cat.name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="cover_image">URL da Capa</Label>
                <Input
                  id="cover_image"
                  value={formData.cover_image}
                  onChange={(e) => setFormData({ ...formData, cover_image: e.target.value })}
                  placeholder="https://..."
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="description">Descrição / Links</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  rows={5}
                  placeholder="Adicione a descrição e links (ex: Link de afiliação: https://...)
Cada link em uma linha nova será clicável"
                />
                <p className="text-xs text-muted-foreground">Links serão automaticamente clicáveis na página da aula</p>
              </div>

<div className="flex gap-6">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="is_published"
                    checked={formData.is_published}
                    onCheckedChange={(checked) => setFormData({ ...formData, is_published: checked })}
                  />
                  <Label htmlFor="is_published">Publicado</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Switch
                    id="is_featured"
                    checked={formData.is_featured}
                    onCheckedChange={(checked) => setFormData({ ...formData, is_featured: checked })}
                  />
                  <Label htmlFor="is_featured">Somente VIP</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <Switch
                    id="is_orderbump"
                    checked={formData.is_orderbump}
                    onCheckedChange={(checked) => setFormData({ ...formData, is_orderbump: checked })}
                  />
                  <Label htmlFor="is_orderbump" className="flex items-center gap-1">
                    <Crown className="h-3 w-3 text-yellow-500" />
                    Orderbump
                  </Label>
                </div>
              </div>

{formData.is_orderbump && (
                <div className="p-4 border-2 border-yellow-500/30 bg-yellow-500/5 rounded-lg space-y-4">
                  <p className="text-sm text-yellow-700 dark:text-yellow-400 font-medium">
                    Configurações de Orderbump - Este curso será vendido separadamente
                  </p>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="orderbump_price">Preço (R$)</Label>
                      <Input
                        id="orderbump_price"
                        type="number"
                        step="0.01"
                        value={formData.orderbump_price}
                        onChange={(e) => setFormData({ ...formData, orderbump_price: parseFloat(e.target.value) || 0 })}
                        placeholder="97.00"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="orderbump_description">Descrição do Orderbump</Label>
                      <Input
                        id="orderbump_description"
                        value={formData.orderbump_description}
                        onChange={(e) => setFormData({ ...formData, orderbump_description: e.target.value })}
                        placeholder="Ex: Bônus especial"
                      />
                    </div>
                  </div>
                </div>
              )}

<div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={loading}>
                  {loading ? "Salvando..." : "Salvar"}
                </Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* Trilhas com cursos */}
          {categories.map((category) => {
            const categoryCourses = getCoursesByCategory(category.id)
            const isExpanded = expandedCategories.has(category.id)

return (
              <div key={category.id} className="border rounded-lg overflow-hidden">
                {/* Header da trilha - clicável */}
                <button
                  onClick={() => toggleCategory(category.id)}
                  className="w-full flex items-center gap-3 p-4 bg-muted/50 hover:bg-muted transition-colors text-left"
                >
                  <div className={`transition-transform ${isExpanded ? "rotate-90" : ""}`}>
                    <ChevronRight className="h-5 w-5" />
                  </div>
                  <FolderOpen className="h-5 w-5 text-primary" />
                  <div className="flex-1">
                    <h3 className="font-semibold">{category.name}</h3>
                    <p className="text-sm text-muted-foreground">
                      {categoryCourses.length} {categoryCourses.length === 1 ? "curso" : "cursos"}
                    </p>
                  </div>
                  {!category.is_active && (
                    <span className="text-xs bg-yellow-500/20 text-yellow-600 px-2 py-1 rounded">Oculta</span>
                  )}
                </button>

{/* Lista de cursos dentro da trilha */}
                {isExpanded && (
                  <div className="p-3 space-y-2 bg-background">
                    {categoryCourses.length > 0 ? (
                      categoryCourses.map((course, index) => (
                        <CourseItem key={course.id} course={course} categoryCourses={categoryCourses} index={index} />
                      ))
                    ) : (
                      <p className="text-center text-muted-foreground py-4">Nenhum curso nesta trilha</p>
                    )}
                  </div>
                )}
              </div>
            )
          })}

{/* Cursos sem trilha */}
          {getCoursesWithoutCategory().length > 0 && (
            <div className="border rounded-lg overflow-hidden">
              <button
                onClick={() => toggleCategory("no-category")}
                className="w-full flex items-center gap-3 p-4 bg-muted/50 hover:bg-muted transition-colors text-left"
              >
                <div className={`transition-transform ${expandedCategories.has("no-category") ? "rotate-90" : ""}`}>
                  <ChevronRight className="h-5 w-5" />
                </div>
                <FolderOpen className="h-5 w-5 text-muted-foreground" />
                <div className="flex-1">
                  <h3 className="font-semibold text-muted-foreground">Sem Trilha</h3>
                  <p className="text-sm text-muted-foreground">
                    {getCoursesWithoutCategory().length} {getCoursesWithoutCategory().length === 1 ? "curso" : "cursos"}
                  </p>
                </div>
              </button>

{expandedCategories.has("no-category") && (
                <div className="p-3 space-y-2 bg-background">
                  {getCoursesWithoutCategory().map((course, index) => (
                    <CourseItem
                      key={course.id}
                      course={course}
                      categoryCourses={getCoursesWithoutCategory()}
                      index={index}
                    />
                  ))}
                </div>
              )}
            </div>
          )}

{courses.length === 0 && categories.length === 0 && (
            <p className="text-center text-muted-foreground py-8">Crie uma trilha primeiro e depois adicione cursos</p>
          )}
        </div>
      </CardContent>
    </Card>
  )
}

function CategoriesTab() {
  const [categories, setCategories] = useState<Category[]>([])
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
  const [loading, setLoading] = useState(false)

const [formData, setFormData] = useState({
    name: "",
    slug: "",
    description: "",
    sort_order: 0,
    is_active: true,
  })

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

async function loadCategories() {
    const data = await getCategories()
    setCategories(data.sort((a: Category, b: Category) => a.sort_order - b.sort_order))
  }

async function moveCategoryUp(category: Category, index: number) {
    if (index <= 0) return
    const prevCategory = categories[index - 1]
    const newOrder = prevCategory.sort_order
    const prevOrder = category.sort_order

await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(prevCategory.id, { sort_order: prevOrder })
    await loadCategories()
  }

async function moveCategoryDown(category: Category, index: number) {
    if (index >= categories.length - 1) return
    const nextCategory = categories[index + 1]
    const newOrder = nextCategory.sort_order
    const nextOrder = category.sort_order

await updateCategory(category.id, { sort_order: newOrder })
    await updateCategory(nextCategory.id, { sort_order: nextOrder })
    await loadCategories()
  }

async function toggleActive(category: Category) {
    await updateCategory(category.id, { is_active: !category.is_active })
    await loadCategories()
  }

function openDialog(category?: Category) {
    if (category) {
      setEditingCategory(category)
      setFormData({
        name: category.name,
        slug: category.slug,
        description: category.description || "",
        sort_order: category.sort_order,
        is_active: category.is_active,
      })
    } else {
      setEditingCategory(null)
      setFormData({
        name: "",
        slug: "",
        description: "",
        sort_order: categories.length + 1,
        is_active: true,
      })
    }
    setIsDialogOpen(true)
  }

function handleNameChange(name: string) {
    const slug = name
      .toLowerCase()
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "")
      .replace(/[^a-z0-9]+/g, "-")
      .replace(/(^-|-$)/g, "")
    setFormData({ ...formData, name, slug })
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)

try {
      if (editingCategory) {
        await updateCategory(editingCategory.id, formData)
      } else {
        await createCategory(formData)
      }
      await loadCategories()
      setIsDialogOpen(false)
    } catch (error) {
      console.error("Erro ao salvar trilha:", error)
    } finally {
      setLoading(false)
    }
  }

async function handleDelete(id: string) {
    if (!confirm("Tem certeza que deseja excluir esta trilha? Os cursos vinculados ficarão sem categoria.")) return
    setLoading(true)
    try {
      await deleteCategory(id)
      await loadCategories()
    } catch (error) {
      console.error("Erro ao excluir trilha:", error)
    } finally {
      setLoading(false)
    }
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <CardTitle>Gerenciar Trilhas/Vitrines</CardTitle>
          <CardDescription>Crie trilhas para organizar seus cursos em seções</CardDescription>
        </div>
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button onClick={() => openDialog()}>
              <Plus className="h-4 w-4 mr-2" />
              Nova Trilha
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>{editingCategory ? "Editar Trilha" : "Nova Trilha"}</DialogTitle>
              <DialogDescription>
                Trilhas são como seções na área de cursos (ex: "Trilha do 0 a 10K", "Agentes IA", "Imersões")
              </DialogDescription>
            </DialogHeader>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome da Trilha</Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => handleNameChange(e.target.value)}
                  placeholder="Ex: Trilha do 0 a 10K"
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="slug">Slug (URL)</Label>
                <Input
                  id="slug"
                  value={formData.slug}
                  onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="description">Descrição (opcional)</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Breve descrição da trilha"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="sort_order">Posição na Página</Label>
                <Input
                  id="sort_order"
                  type="number"
                  value={formData.sort_order}
                  onChange={(e) => setFormData({ ...formData, sort_order: Number.parseInt(e.target.value) || 0 })}
                />
                <p className="text-xs text-muted-foreground">Trilhas com número menor aparecem primeiro</p>
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id="is_active"
                  checked={formData.is_active}
                  onCheckedChange={(checked) => setFormData({ ...formData, is_active: checked })}
                />
                <Label htmlFor="is_active">Trilha Ativa</Label>
              </div>
              <div className="flex justify-end gap-2">
                <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={loading}>
                  {loading ? "Salvando..." : "Salvar"}
                </Button>
              </div>
            </form>
          </DialogContent>
        </Dialog>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {categories.map((category, index) => (
            <div
              key={category.id}
              className={`flex items-center gap-3 p-3 rounded-lg border transition-all hover:shadow-md ${
                !category.is_active ? "opacity-60 bg-muted/30" : ""
              }`}
            >
              <div className="flex flex-col gap-0.5">
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-6 w-6"
                  onClick={() => moveCategoryUp(category, index)}
                  disabled={index === 0}
                >
                  <ChevronUp className="h-3 w-3" />
                </Button>
                <div className="flex items-center justify-center h-6 w-6">
                  <GripVertical className="h-4 w-4 text-muted-foreground" />
                </div>
                <Button
                  size="icon"
                  variant="ghost"
                  className="h-6 w-6"
                  onClick={() => moveCategoryDown(category, index)}
                  disabled={index === categories.length - 1}
                >
                  <ChevronDown className="h-3 w-3" />
                </Button>
              </div>

<div className="flex-1 min-w-0">
                <h3 className="font-medium truncate">{category.name}</h3>
                <p className="text-sm text-muted-foreground truncate">{category.description || "Sem descrição"}</p>
              </div>

<div className="flex items-center gap-2 flex-shrink-0">
                <Button
                  size="sm"
                  variant={category.is_active ? "default" : "outline"}
                  className={`h-8 ${category.is_active ? "bg-green-600 hover:bg-green-700" : ""}`}
                  onClick={() => toggleActive(category)}
                >
                  {category.is_active ? (
                    <>
                      <Eye className="h-3 w-3 mr-1" />
                      Visível
                    </>
                  ) : (
                    <>
                      <EyeOff className="h-3 w-3 mr-1" />
                      Oculta
                    </>
                  )}
                </Button>
                <Button size="sm" variant="outline" className="h-8 bg-transparent" onClick={() => openDialog(category)}>
                  <Pencil className="h-3 w-3" />
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="h-8 text-red-500 hover:text-red-600 bg-transparent"
                  onClick={() => handleDelete(category.id)}
                >
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
            </div>
          ))}
          {categories.length === 0 && (
            <div className="text-center py-8 text-muted-foreground">
              <Layers className="h-12 w-12 mx-auto mb-3 opacity-30" />
              <p>Nenhuma trilha criada</p>
              <p className="text-sm">Crie trilhas para organizar seus cursos em seções</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}

function LessonsTab() {
  const [courses, setCourses] = useState<LocalCourse[]>([]) // Used LocalCourse interface here
  const [selectedCourse, setSelectedCourse] = useState<string>("")
  const [lessons, setLessons] = useState<Lesson[]>([])
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingLesson, setEditingLesson] = useState<Lesson | null>(null)
  const [loading, setLoading] = useState(false)

// Removed the links state and related functions as per the update
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    video_url: "",
    video_type: "youtube",
    duration_minutes: 0,
    sort_order: 1,
    is_free: false,
    is_published: true,
  })

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

useEffect(() => {
    if (selectedCourse) {
      loadLessons()
    }
  }, [selectedCourse])

async function loadCourses() {
    const data = await getCourses()
    setCourses(data)
  }

async function loadLessons() {
    if (!selectedCourse) return
    // Fixed: Call getLessonsByCourse correctly
    const data = await getLessonsByCourse(selectedCourse)
    setLessons(data.sort((a: Lesson, b: Lesson) => a.sort_order - b.sort_order))
  }

async function moveLessonUp(lesson: Lesson, index: number) {
    if (index <= 0) return
    const prevLesson = lessons[index - 1]
    const newOrder = prevLesson.sort_order
    const prevOrder = lesson.sort_order

await updateLesson(lesson.id, { sort_order: newOrder })
    await updateLesson(prevLesson.id, { sort_order: prevOrder })
    await loadLessons()
  }

async function moveLessonDown(lesson: Lesson, index: number) {
    if (index >= lessons.length - 1) return
    const nextLesson = lessons[index + 1]
    const newOrder = nextLesson.sort_order
    const nextOrder = lesson.sort_order

await updateLesson(lesson.id, { sort_order: newOrder })
    await updateLesson(nextLesson.id, { sort_order: nextOrder })
    await loadLessons()
  }

async function togglePublished(lesson: Lesson) {
    await updateLesson(lesson.id, { is_published: !lesson.is_published })
    await loadLessons()
  }

async function toggleFree(lesson: Lesson) {
    await updateLesson(lesson.id, { is_free: !lesson.is_free })
    await loadLessons()
  }

function openDialog(lesson?: Lesson) {
    if (lesson) {
      setEditingLesson(lesson)
      setFormData({
        title: lesson.title,
        description: lesson.description || "",
        video_url: lesson.video_url || "",
        video_type: lesson.video_type,
        duration_minutes: lesson.duration_minutes,
        sort_order: lesson.sort_order,
        is_free: lesson.is_free,
        is_published: lesson.is_published,
      })
      // Removed link initialization
    } else {
      setEditingLesson(null)
      setFormData({
        title: "",
        description: "",
        video_url: "",
        video_type: "youtube",
        duration_minutes: 0,
        sort_order: lessons.length + 1,
        is_free: false,
        is_published: true,
      })
      // Removed link initialization
    }
    setIsDialogOpen(true)
  }

// Removed addLink, removeLink functions

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)

try {
      // Removed attachments logic
      const dataToSave = {
        ...formData,
      }

if (editingLesson) {
        await updateLesson(editingLesson.id, dataToSave)
      } else {
        await createLesson(selectedCourse, dataToSave)
      }
      await loadLessons()
      setIsDialogOpen(false)
    } catch (error) {
      console.error("Erro ao salvar aula:", error)
    } finally {
      setLoading(false)
    }
  }

async function handleDelete(id: string) {
    if (!confirm("Tem certeza que deseja excluir esta aula?")) return
    setLoading(true)
    try {
      await deleteLesson(id)
      await loadLessons()
    } catch (error) {
      console.error("Erro ao excluir aula:", error)
    } finally {
      setLoading(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <CardTitle>Gerenciar Aulas</CardTitle>
            <CardDescription>Selecione um curso e gerencie suas aulas</CardDescription>
          </div>
          <Select value={selectedCourse} onValueChange={setSelectedCourse}>
            <SelectTrigger className="w-full md:w-[300px]">
              <SelectValue placeholder="Selecione um curso..." />
            </SelectTrigger>
            <SelectContent>
              {courses.map((course) => (
                <SelectItem key={course.id} value={course.id}>
                  {course.title}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </CardHeader>
      <CardContent>
        {!selectedCourse ? (
          <div className="text-center py-12 text-muted-foreground">
            <GraduationCap className="h-12 w-12 mx-auto mb-3 opacity-30" />
            <p>Selecione um curso para gerenciar suas aulas</p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex justify-end">
              <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                <DialogTrigger asChild>
                  <Button onClick={() => openDialog()}>
                    <Plus className="h-4 w-4 mr-2" />
                    Nova Aula
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                  <DialogHeader>
                    <DialogTitle>{editingLesson ? "Editar Aula" : "Nova Aula"}</DialogTitle>
                    <DialogDescription>Preencha os dados da aula</DialogDescription>
                  </DialogHeader>
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="title">Título</Label>
                      <Input
                        id="title"
                        value={formData.title}
                        onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                        required
                      />
                    </div>

{/* Substituir textarea por RichTextEditor no formulário de aulas */}
                    <div className="space-y-2">
                      <Label>Descrição</Label>
                      <RichTextEditor
                        value={formData.description}
                        onChange={(value) => setFormData({ ...formData, description: value })}
                        placeholder="Digite a descrição da aula. Selecione texto para formatar ou adicionar links..."
                      />
                    </div>

{/* Remover a seção de Links (Afiliação, Drive, etc.) que foi adicionada anteriormente */}

<div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="video_url">URL do Vídeo</Label>
                        <Input
                          id="video_url"
                          value={formData.video_url}
                          onChange={(e) => setFormData({ ...formData, video_url: e.target.value })}
                          placeholder="https://youtube.com/watch?v=..."
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="video_type">Tipo de Vídeo</Label>
                        <Select
                          value={formData.video_type}
                          onValueChange={(value) => setFormData({ ...formData, video_type: value })}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="youtube">YouTube</SelectItem>
                            <SelectItem value="vimeo">Vimeo</SelectItem>
                            <SelectItem value="panda">Panda Video</SelectItem>
                            <SelectItem value="external">Outro</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="duration_minutes">Duração (minutos)</Label>
                        <Input
                          id="duration_minutes"
                          type="number"
                          value={formData.duration_minutes}
                          onChange={(e) =>
                            setFormData({ ...formData, duration_minutes: Number.parseInt(e.target.value) || 0 })
                          }
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="sort_order">Ordem</Label>
                        <Input
                          id="sort_order"
                          type="number"
                          value={formData.sort_order}
                          onChange={(e) =>
                            setFormData({ ...formData, sort_order: Number.parseInt(e.target.value) || 0 })
                          }
                        />
                      </div>
                    </div>

<div className="space-y-2">
              {lessons.map((lesson, index) => (
                <div
                  key={lesson.id}
                  className={`flex items-center gap-3 p-3 rounded-lg border transition-all hover:shadow-md ${
                    !lesson.is_published ? "opacity-60 bg-muted/30" : ""
                  } ${lesson.is_free ? "border-green-500/50 bg-green-500/5" : ""}`}
                >
                  <div className="flex flex-col gap-0.5">
                    <Button
                      size="icon"
                      variant="ghost"
                      className="h-6 w-6"
                      onClick={() => moveLessonUp(lesson, index)}
                      disabled={index === 0}
                    >
                      <ChevronUp className="h-3 w-3" />
                    </Button>
                    <div className="flex items-center justify-center h-6 w-6">
                      <GripVertical className="h-4 w-4 text-muted-foreground" />
                    </div>
                    <Button
                      size="icon"
                      variant="ghost"
                      className="h-6 w-6"
                      onClick={() => moveLessonDown(lesson, index)}
                      disabled={index === lessons.length - 1}
                    >
                      <ChevronDown className="h-3 w-3" />
                    </Button>
                  </div>

<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-sm font-bold">
                    {index + 1}
                  </div>

<div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <h3 className="font-medium truncate">{lesson.title}</h3>
                      {lesson.is_free && <Badge className="bg-green-600 text-xs">Grátis</Badge>}
                    </div>
                    <p className="text-sm text-muted-foreground">{lesson.duration_minutes} min</p>
                  </div>

<div className="flex items-center gap-2 flex-shrink-0">
                    <Button
                      size="sm"
                      variant={lesson.is_published ? "default" : "outline"}
                      className={`h-8 ${lesson.is_published ? "bg-green-600 hover:bg-green-700" : ""}`}
                      onClick={() => togglePublished(lesson)}
                    >
                      {lesson.is_published ? (
                        <>
                          <Eye className="h-3 w-3 mr-1" />
                          Visível
                        </>
                      ) : (
                        <>
                          <EyeOff className="h-3 w-3 mr-1" />
                          Oculta
                        </>
                      )}
                    </Button>
                    <Button
                      size="sm"
                      variant={lesson.is_free ? "default" : "outline"}
                      className={`h-8 ${lesson.is_free ? "bg-blue-600 hover:bg-blue-700" : ""}`}
                      onClick={() => toggleFree(lesson)}
                      title={lesson.is_free ? "Aula Gratuita" : "Aula Paga"}
                    >
                      <Star className={`h-3 w-3 ${lesson.is_free ? "fill-white" : ""}`} />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      className="h-8 bg-transparent"
                      onClick={() => openDialog(lesson)}
                    >
                      <Pencil className="h-3 w-3" />
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      className="h-8 text-red-500 hover:text-red-600 bg-transparent"
                      onClick={() => handleDelete(lesson.id)}
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              ))}
              {lessons.length === 0 && (
                <div className="text-center py-8 text-muted-foreground">
                  <Video className="h-12 w-12 mx-auto mb-3 opacity-30" />
                  <p>Nenhuma aula cadastrada</p>
                  <p className="text-sm">Clique em "Nova Aula" para adicionar</p>
                </div>
              )}
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

function PlansTab() {
  const [plans, setPlans] = useState<Plan[]>([]) // Used LocalCourse interface here
  const [courses, setCourses] = useState<LocalCourse[]>([]) // Used LocalCourse interface here
  const [selectedPlan, setSelectedPlan] = useState<string>("")
  const [planAccess, setPlanAccess] = useState<string[]>([])
  const [loading, setLoading] = useState(false)

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

useEffect(() => {
    if (selectedPlan) {
      loadPlanAccess()
    }
  }, [selectedPlan])

async function loadData() {
    const [plansData, coursesData] = await Promise.all([getPlans(), getCourses()])
    setPlans(plansData)
    setCourses(coursesData)
  }

async function loadPlanAccess() {
    if (!selectedPlan) return
    const access = await getPlanCourseAccess(selectedPlan)
    setPlanAccess(access.map((a: any) => a.course_id))
  }

async function toggleCourseAccess(courseId: string) {
    setLoading(true)
    const newAccess = planAccess.includes(courseId)
      ? planAccess.filter((id) => id !== courseId)
      : [...planAccess, courseId]

await updatePlanCourseAccess(selectedPlan, newAccess)
    setPlanAccess(newAccess)
    setLoading(false)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Acesso por Plano</CardTitle>
        <CardDescription>Configure quais cursos cada plano pode acessar</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <Select value={selectedPlan} onValueChange={setSelectedPlan}>
          <SelectTrigger className="w-full md:w-96">
            <SelectValue placeholder="Selecione um plano..." />
          </SelectTrigger>
          <SelectContent>
            {plans.map((plan) => (
              <SelectItem key={plan.id} value={plan.id}>
                {plan.name} - R${plan.price}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

{selectedPlan && (
          <div className="space-y-2">
            {courses.map((course) => (
              <div
                key={course.id}
                className={`flex items-center justify-between p-4 border rounded-lg cursor-pointer transition-colors ${
                  planAccess.includes(course.id) ? "border-green-500/50 bg-green-500/5" : "hover:bg-muted/50"
                }`}
                onClick={() => toggleCourseAccess(course.id)}
              >
                <div className="flex items-center gap-3">
                  <Switch checked={planAccess.includes(course.id)} disabled={loading} />
                  <div>
                    <h4 className="font-medium">{course.title}</h4>
                    <p className="text-sm text-muted-foreground">{course.category?.name || "Sem trilha"}</p>
                  </div>
                </div>
                {planAccess.includes(course.id) && (
                  <Badge className="bg-green-500/10 text-green-500 border-green-500/30">Liberado</Badge>
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/dashboard.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
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 { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CalendarIcon, TrendingUp, DollarSign, ShoppingCart, Users, TrendingDown, Wallet } from "lucide-react"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { cn } from "@/lib/utils"
import { ManualMetricsForm } from "./manual-metrics-form"
import { MetricsList } from "./metrics-list"

type Period = "today" | "yesterday" | "7days" | "15days" | "custom"

type DashboardData = {
  totalVendas: number
  receitaTotal: number
  receitaAfiliaBasic: number
  receitaAfiliaPro: number
  receitaAfiliados: number
  vendasAfiliaBasic: number
  vendasAfiliaPro: number
  vendasAfiliados: number
  despesasTotal: number
  lucroLiquido: number
  dailyData: Array<{
    date: string
    afiliaBasic: number
    afiliaPro: number
    afiliados: number
    despesas: number
    lucroLiquido: number
  }>
  productBreakdown?: Array<{ name: string; vendas: number; receita: number }>
}

export function Dashboard() {
  const [period, setPeriod] = useState<Period>("today")
  const [startDate, setStartDate] = useState<Date>()
  const [endDate, setEndDate] = useState<Date>()
  const [data, setData] = useState<DashboardData | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    fetchData()
  }, [period, startDate, endDate])

const fetchData = async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams({ period })
      if (period === "custom" && startDate && endDate) {
        params.set("startDate", format(startDate, "yyyy-MM-dd"))
        params.set("endDate", format(endDate, "yyyy-MM-dd"))
      }

const response = await fetch(`/api/dashboard/manual?${params}`)
      const result = await response.json()
      setData(result)
    } catch (error) {
      console.error("Error fetching dashboard data:", error)
    } finally {
      setLoading(false)
    }
  }

const chartData = (data?.dailyData || []).map((item) => ({
    label: format(new Date(item.date), "dd/MM", { locale: ptBR }),
    "AFILIA360 BÁSICO": Number(item.afiliaBasic) || 0,
    "AFILIA360 PRO": Number(item.afiliaPro) || 0,
    Afiliados: Number(item.afiliados) || 0,
    Despesas: Number(item.despesas) || 0,
    "Lucro Líquido": Number(item.lucroLiquido) || 0,
    total: (Number(item.afiliaBasic) || 0) + (Number(item.afiliaPro) || 0) + (Number(item.afiliados) || 0),
  }))

const handleEditDate = (date: string) => {
    const event = new CustomEvent("loadMetricsDate", { detail: { date } })
    window.dispatchEvent(event)

// Aguarda um pouco e muda para a aba
    setTimeout(() => {
      const tabTrigger = document.querySelector('[value="add-data"]') as HTMLButtonElement
      if (tabTrigger) {
        tabTrigger.click()
      }
    }, 100)
  }

return (
    <Tabs defaultValue="metrics" className="space-y-6">
      <TabsList>
        <TabsTrigger value="metrics">Métricas</TabsTrigger>
        <TabsTrigger value="history">Histórico</TabsTrigger>
        <TabsTrigger value="add-data">Adicionar Dados</TabsTrigger>
      </TabsList>

<TabsContent value="metrics" className="space-y-6">
        {/* Period Selector */}
        <Card>
          <CardHeader>
            <CardTitle className="text-xl">Período de Análise</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-4">
              <Select value={period} onValueChange={(value) => setPeriod(value as Period)}>
                <SelectTrigger className="w-[200px]">
                  <SelectValue placeholder="Selecione o período" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="today">Hoje</SelectItem>
                  <SelectItem value="yesterday">Ontem</SelectItem>
                  <SelectItem value="7days">Últimos 7 dias</SelectItem>
                  <SelectItem value="15days">Últimos 15 dias</SelectItem>
                  <SelectItem value="custom">Personalizado</SelectItem>
                </SelectContent>
              </Select>

{period === "custom" && (
                <div className="flex gap-2">
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button variant="outline" className={cn("w-[200px] justify-start text-left font-normal")}>
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {startDate ? format(startDate, "dd/MM/yyyy") : "Data inicial"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar mode="single" selected={startDate} onSelect={setStartDate} initialFocus />
                    </PopoverContent>
                  </Popover>

<Popover>
                    <PopoverTrigger asChild>
                      <Button variant="outline" className={cn("w-[200px] justify-start text-left font-normal")}>
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {endDate ? format(endDate, "dd/MM/yyyy") : "Data final"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0">
                      <Calendar mode="single" selected={endDate} onSelect={setEndDate} initialFocus />
                    </PopoverContent>
                  </Popover>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{loading ? (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
            <p className="mt-4 text-muted-foreground">Carregando dados...</p>
          </div>
        ) : (
          <>
            {/* Metric Cards */}
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Receita Total</CardTitle>
                  <DollarSign className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-green-500">R$ {(data?.receitaTotal || 0).toFixed(2)}</div>
                  <p className="text-xs text-muted-foreground mt-1">{data?.totalVendas || 0} vendas no período</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">AFILIA360 BÁSICO</CardTitle>
                  <ShoppingCart className="h-4 w-4 text-blue-500" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-blue-500">
                    R$ {(data?.receitaAfiliaBasic || 0).toFixed(2)}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">{data?.vendasAfiliaBasic || 0} vendas</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">AFILIA360 PRO</CardTitle>
                  <TrendingUp className="h-4 w-4 text-purple-500" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-purple-500">
                    R$ {(data?.receitaAfiliaPro || 0).toFixed(2)}
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">{data?.vendasAfiliaPro || 0} vendas</p>
                </CardContent>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Vendas de Afiliados</CardTitle>
                  <Users className="h-4 w-4 text-green-500" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-green-500">R$ {(data?.receitaAfiliados || 0).toFixed(2)}</div>
                  <p className="text-xs text-muted-foreground mt-1">{data?.vendasAfiliados || 0} vendas</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 do Período</CardTitle>
                  <TrendingDown className="h-4 w-4 text-red-500" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold text-red-500">R$ {(data?.despesasTotal || 0).toFixed(2)}</div>
                  <p className="text-xs text-muted-foreground mt-1">Marketing, IA, Hospedagem...</p>
                </CardContent>
              </Card>
            </div>

{/* Profit Card */}
            <Card className="border-2 border-green-500/20 bg-green-500/5">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-lg font-bold">💰 Lucro Líquido do Período</CardTitle>
                <Wallet className="h-6 w-6 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-4xl font-bold text-green-500">R$ {(data?.lucroLiquido || 0).toFixed(2)}</div>
                <p className="text-sm text-muted-foreground mt-2">
                  Receita Total: R$ {(data?.receitaTotal || 0).toFixed(2)} - Despesas: R${" "}
                  {(data?.despesasTotal || 0).toFixed(2)}
                </p>
                <div className="mt-3 flex items-center gap-2">
                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-green-500"
                      style={{
                        width: `${Math.min(100, ((data?.lucroLiquido || 0) / (data?.receitaTotal || 1)) * 100)}%`,
                      }}
                    />
                  </div>
                  <span className="text-xs font-medium text-muted-foreground">
                    {(((data?.lucroLiquido || 0) / (data?.receitaTotal || 1)) * 100 || 0).toFixed(1)}% margem
                  </span>
                </div>
              </CardContent>
            </Card>

{/* Charts */}
            {chartData.length > 0 ? (
              <div className="grid gap-4 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>Evolução de Receita</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <AreaChart data={chartData}>
                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                        <XAxis dataKey="label" className="text-xs" />
                        <YAxis className="text-xs" />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "hsl(var(--background))",
                            border: "1px solid hsl(var(--border))",
                          }}
                        />
                        <Legend />
                        <Area
                          type="monotone"
                          dataKey="AFILIA360 BÁSICO"
                          stackId="1"
                          stroke="#3b82f6"
                          fill="#3b82f6"
                          name="AFILIA360 BÁSICO"
                        />
                        <Area
                          type="monotone"
                          dataKey="AFILIA360 PRO"
                          stackId="1"
                          stroke="#a855f7"
                          fill="#a855f7"
                          name="AFILIA360 PRO"
                        />
                        <Area
                          type="monotone"
                          dataKey="Afiliados"
                          stackId="1"
                          stroke="#22c55e"
                          fill="#22c55e"
                          name="Afiliados"
                        />
                      </AreaChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Lucro Líquido vs Despesas</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={chartData}>
                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                        <XAxis dataKey="label" className="text-xs" />
                        <YAxis className="text-xs" />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "hsl(var(--background))",
                            border: "1px solid hsl(var(--border))",
                          }}
                        />
                        <Legend />
                        <Bar dataKey="Lucro Líquido" fill="#22c55e" name="Lucro Líquido" />
                        <Bar dataKey="Despesas" fill="#ef4444" name="Despesas" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </div>
            ) : (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">Nenhuma venda no período selecionado</p>
                </CardContent>
              </Card>
            )}

{/* Product Breakdown */}
            {data?.productBreakdown && data.productBreakdown.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Vendas por Produto</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {data.productBreakdown.map((product, index) => (
                      <div key={index} className="flex items-center justify-between p-4 rounded-lg bg-muted/50">
                        <div className="flex-1">
                          <p className="font-medium">{product.name}</p>
                          <p className="text-sm text-muted-foreground">{product.vendas} vendas</p>
                        </div>
                        <div className="text-right">
                          <p className="text-lg font-bold text-green-500">R$ {product.receita.toFixed(2)}</p>
                          <p className="text-xs text-muted-foreground">
                            Média: R$ {(product.receita / product.vendas).toFixed(2)}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

{/* Relatório Detalhado de Lançamentos */}
            {chartData.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Relatório Detalhado de Lançamentos</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {data.dailyData.map((day) => {
                      const dayRevenue = day.afiliaBasic + day.afiliaPro + day.afiliados
                      if (dayRevenue === 0 && day.despesas === 0) return null

return (
                        <details key={day.date} className="group border rounded-lg overflow-hidden">
                          <summary className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/50 transition-colors">
                            <div className="flex items-center gap-4">
                              <span className="font-medium">
                                {format(new Date(day.date), "dd/MM/yyyy", { locale: ptBR })}
                              </span>
                              <span className="text-sm text-muted-foreground">
                                {format(new Date(day.date), "EEEE", { locale: ptBR })}
                              </span>
                            </div>
                            <div className="flex items-center gap-6">
                              <div className="text-right">
                                <p className="text-sm font-medium text-green-500">R$ {dayRevenue.toFixed(2)}</p>
                                <p className="text-xs text-muted-foreground">Receita</p>
                              </div>
                              {day.despesas > 0 && (
                                <div className="text-right">
                                  <p className="text-sm font-medium text-red-500">R$ {day.despesas.toFixed(2)}</p>
                                  <p className="text-xs text-muted-foreground">Despesas</p>
                                </div>
                              )}
                              <div className="text-right">
                                <p className="text-sm font-bold text-blue-500">R$ {day.lucroLiquido.toFixed(2)}</p>
                                <p className="text-xs text-muted-foreground">Lucro</p>
                              </div>
                            </div>
                          </summary>
                          <div className="p-4 bg-muted/30 border-t space-y-3">
                            {day.afiliaBasic > 0 && (
                              <div className="flex justify-between items-center">
                                <span className="text-sm text-muted-foreground">AFILIA360 BÁSICO</span>
                                <span className="font-medium text-blue-500">R$ {day.afiliaBasic.toFixed(2)}</span>
                              </div>
                            )}
                            {day.afiliaPro > 0 && (
                              <div className="flex justify-between items-center">
                                <span className="text-sm text-muted-foreground">AFILIA360 PRO</span>
                                <span className="font-medium text-purple-500">R$ {day.afiliaPro.toFixed(2)}</span>
                              </div>
                            )}
                            {day.afiliados > 0 && (
                              <div className="flex justify-between items-center">
                                <span className="text-sm text-muted-foreground">Vendas de Afiliados</span>
                                <span className="font-medium text-green-500">R$ {day.afiliados.toFixed(2)}</span>
                              </div>
                            )}
                            {day.despesas > 0 && (
                              <div className="flex justify-between items-center pt-2 border-t">
                                <span className="text-sm font-medium text-red-500">Despesas do Dia</span>
                                <span className="font-medium text-red-500">- R$ {day.despesas.toFixed(2)}</span>
                              </div>
                            )}
                            <div className="flex justify-between items-center pt-2 border-t">
                              <span className="text-sm font-bold">Lucro Líquido</span>
                              <span className="font-bold text-blue-500">R$ {day.lucroLiquido.toFixed(2)}</span>
                            </div>
                          </div>
                        </details>
                      )
                    })}
                  </div>
                </CardContent>
              </Card>
            )}
          </>
        )}
      </TabsContent>

<TabsContent value="add-data" className="space-y-6">
        <ManualMetricsForm onSave={fetchData} />
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/admin/growth-simulator.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Calculator, TrendingUp, DollarSign, Users, Target } from "lucide-react"

interface SimulatorInputs {
  marketingBudget: number
  expectedCAC: number
  growthPercentage: number
}

interface SimulatorResults {
  newAffiliates: number
  inactiveAffiliates: number
  activeAffiliates: number
  revenueFromPlans: number
  revenueFromCommissions: number
  totalRevenue: number
  totalCosts: number
  profit: number
  roi: number
}

export default function GrowthSimulator() {
  const [inputs, setInputs] = useState<SimulatorInputs>({
    marketingBudget: 5000,
    expectedCAC: 50,
    growthPercentage: 30,
  })

const [historicalData, setHistoricalData] = useState({
    activationRate: 15, // 15% dos afiliados ficam ativos
    avgCommissionPerActive: 300,
    avgBasicRevenue: 17,
    avgProRevenue: 97,
    proConversionRate: 20, // 20% compram Pro, 80% Basic
  })

const [results, setResults] = useState<SimulatorResults | null>(null)

useEffect(() => {
    // Buscar dados históricos reais da API
    fetch("/api/business-metrics/ltv")
      .then((res) => res.json())
      .then((data) => {
        if (data.segments) {
          const totalActive = data.segments.reduce(
            (sum: number, seg: any) => (seg.segment.includes("Ativo") ? sum + seg.count : sum),
            0,
          )
          const totalInactive = data.segments.reduce(
            (sum: number, seg: any) => (seg.segment.includes("Inativo") ? sum + seg.count : sum),
            0,
          )
          const total = totalActive + totalInactive

if (total > 0) {
            setHistoricalData((prev) => ({
              ...prev,
              activationRate: Math.round((totalActive / total) * 100),
              avgCommissionPerActive: data.metrics?.avgCommissionPerActive || 300,
            }))
          }
        }
      })
      .catch(console.error)
  }, [])

const calculateProjection = () => {
    const newAffiliates = Math.floor(inputs.marketingBudget / inputs.expectedCAC)
    const activeAffiliates = Math.floor(newAffiliates * (historicalData.activationRate / 100))
    const inactiveAffiliates = newAffiliates - activeAffiliates

// Receita dos planos
    const basicAffiliates = Math.floor(inactiveAffiliates * 0.8) // 80% Basic
    const proAffiliates = Math.floor(inactiveAffiliates * 0.2) // 20% Pro
    const revenueFromPlans =
      basicAffiliates * historicalData.avgBasicRevenue + proAffiliates * historicalData.avgProRevenue

// Receita de comissões dos ativos
    const revenueFromCommissions = activeAffiliates * historicalData.avgCommissionPerActive

const totalRevenue = revenueFromPlans + revenueFromCommissions
    const totalCosts = inputs.marketingBudget
    const profit = totalRevenue - totalCosts
    const roi = totalCosts > 0 ? (profit / totalCosts) * 100 : 0

setResults({
      newAffiliates,
      inactiveAffiliates,
      activeAffiliates,
      revenueFromPlans,
      revenueFromCommissions,
      totalRevenue,
      totalCosts,
      profit,
      roi,
    })
  }

useEffect(() => {
    calculateProjection()
  }, [inputs, historicalData])

return (
    <div className="space-y-6">
      <div className="grid gap-6 md:grid-cols-2">
        {/* Inputs */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Calculator className="h-5 w-5" />
              Parâmetros da Simulação
            </CardTitle>
            <CardDescription>Ajuste os valores para simular diferentes cenários</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="budget">Investimento em Marketing</Label>
              <Input
                id="budget"
                type="number"
                value={inputs.marketingBudget}
                onChange={(e) => setInputs({ ...inputs, marketingBudget: Number(e.target.value) })}
                className="text-lg"
              />
              <p className="text-sm text-muted-foreground">R$ {inputs.marketingBudget.toLocaleString("pt-BR")}</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="cac">CAC Esperado (Custo por Afiliado)</Label>
              <Input
                id="cac"
                type="number"
                value={inputs.expectedCAC}
                onChange={(e) => setInputs({ ...inputs, expectedCAC: Number(e.target.value) })}
                className="text-lg"
              />
              <p className="text-sm text-muted-foreground">R$ {inputs.expectedCAC.toLocaleString("pt-BR")}</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="growth">Cenário de Crescimento</Label>
              <Slider
                id="growth"
                value={[inputs.growthPercentage]}
                onValueChange={(value) => setInputs({ ...inputs, growthPercentage: value[0] })}
                min={-50}
                max={100}
                step={5}
                className="my-4"
              />
              <p className="text-sm text-muted-foreground">
                {inputs.growthPercentage > 0 ? "+" : ""}
                {inputs.growthPercentage}% sobre métricas atuais
              </p>
            </div>

<Button onClick={calculateProjection} className="w-full">
              <Calculator className="mr-2 h-4 w-4" />
              Recalcular Projeção
            </Button>
          </CardContent>
        </Card>

{/* Dados Históricos */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="h-5 w-5" />
              Dados Históricos
            </CardTitle>
            <CardDescription>Baseado no desempenho real da plataforma</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between items-center p-3 bg-muted rounded-lg">
              <span className="text-sm font-medium">Taxa de Ativação</span>
              <span className="text-lg font-bold">{historicalData.activationRate}%</span>
            </div>
            <div className="flex justify-between items-center p-3 bg-muted rounded-lg">
              <span className="text-sm font-medium">Comissão Média (Ativo)</span>
              <span className="text-lg font-bold">R$ {historicalData.avgCommissionPerActive}</span>
            </div>
            <div className="flex justify-between items-center p-3 bg-muted rounded-lg">
              <span className="text-sm font-medium">Valor Plano Basic</span>
              <span className="text-lg font-bold">R$ {historicalData.avgBasicRevenue}</span>
            </div>
            <div className="flex justify-between items-center p-3 bg-muted rounded-lg">
              <span className="text-sm font-medium">Valor Plano Pro</span>
              <span className="text-lg font-bold">R$ {historicalData.avgProRevenue}</span>
            </div>
            <div className="flex justify-between items-center p-3 bg-muted rounded-lg">
              <span className="text-sm font-medium">Conversão Pro</span>
              <span className="text-lg font-bold">{historicalData.proConversionRate}%</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Results */}
      {results && (
        <div className="space-y-6">
          <div className="grid gap-4 md:grid-cols-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <Users className="h-4 w-4" />
                  Novos Afiliados
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{results.newAffiliates}</div>
                <p className="text-xs text-muted-foreground mt-1">
                  {results.activeAffiliates} ativos, {results.inactiveAffiliates} inativos
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <DollarSign className="h-4 w-4" />
                  Receita Total
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  R$ {results.totalRevenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
                <p className="text-xs text-muted-foreground mt-1">Planos + Comissões</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <TrendingUp className="h-4 w-4" />
                  Lucro Projetado
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-2xl font-bold ${results.profit >= 0 ? "text-green-600" : "text-red-600"}`}>
                  R$ {results.profit.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </div>
                <p className="text-xs text-muted-foreground mt-1">ROI: {results.roi.toFixed(1)}%</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium">ROI</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={`text-2xl font-bold ${results.roi >= 0 ? "text-green-600" : "text-red-600"}`}>
                  {results.roi > 0 ? "+" : ""}
                  {results.roi.toFixed(1)}%
                </div>
                <p className="text-xs text-muted-foreground mt-1">Retorno sobre investimento</p>
              </CardContent>
            </Card>
          </div>

{/* Breakdown */}
          <Card>
            <CardHeader>
              <CardTitle>Detalhamento da Projeção</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Investimento em Marketing</span>
                    <span className="font-medium">
                      R$ {results.totalCosts.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">CAC por Afiliado</span>
                    <span className="font-medium">
                      R$ {inputs.expectedCAC.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Novos Afiliados Adquiridos</span>
                    <span className="font-medium">{results.newAffiliates}</span>
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Receita dos Planos (Inativos)</span>
                    <span className="font-medium text-green-600">
                      + R$ {results.revenueFromPlans.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">Receita de Comissões (Ativos)</span>
                    <span className="font-medium text-green-600">
                      + R$ {results.revenueFromCommissions.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm font-semibold">
                    <span>Receita Total</span>
                    <span className="text-green-600">
                      R$ {results.totalRevenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                    </span>
                  </div>
                </div>

<div className="flex justify-between text-lg font-bold">
                  <span>Lucro Líquido</span>
                  <span className={results.profit >= 0 ? "text-green-600" : "text-red-600"}>
                    R$ {results.profit.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Insights */}
          <Card className="border-blue-200 bg-blue-50/50">
            <CardHeader>
              <CardTitle className="text-blue-900">Insights da Simulação</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-sm text-blue-900">
              <p>
                • A cada <strong>R$ 100</strong> investidos em marketing, você pode esperar adquirir{" "}
                <strong>{Math.floor(100 / inputs.expectedCAC)}</strong> novos afiliados.
              </p>
              <p>
                • Desses, aproximadamente{" "}
                <strong>{Math.floor((100 / inputs.expectedCAC) * (historicalData.activationRate / 100))}</strong> (
                {historicalData.activationRate}%) se tornarão ativos e gerarão comissões.
              </p>
              <p>
                • Baseado no histórico, cada afiliado ativo gera em média{" "}
                <strong>R$ {historicalData.avgCommissionPerActive}</strong> em comissões.
              </p>
              <p>
                • Com um investimento de <strong>R$ {inputs.marketingBudget.toLocaleString("pt-BR")}</strong>, seu ROI
                esperado é de{" "}
                <strong>
                  {results.roi > 0 ? "+" : ""}
                  {results.roi.toFixed(1)}%
                </strong>
                .
              </p>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/ltv-analysis.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Users, TrendingUp, DollarSign, Target, Clock } from "lucide-react"

interface LTVOverview {
  totalAffiliates: number
  activeAffiliates: number
  inactiveAffiliates: number
  activationRate: string
  avgLTV: string
  cac: string
  roi: string
  paybackMonths: string
}

interface Segment {
  segment: string
  count: number
  percentage: string
  ltv: string | number
  roi: string
}

interface LTVAnalysisProps {
  selectedMonth: string
}

export function LTVAnalysis({ selectedMonth }: LTVAnalysisProps) {
  const [data, setData] = useState<{
    overview: LTVOverview
    segmentation: Segment[]
  } | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    loadData()
  }, [selectedMonth])

const loadData = async () => {
    setLoading(true)
    const res = await fetch(`/api/business-metrics/ltv?month=${selectedMonth}`)
    const result = await res.json()
    setData(result)
    setLoading(false)
  }

if (loading) {
    return <div className="p-8">Carregando análise de LTV...</div>
  }

const { overview, segmentation } = data!

return (
    <div className="space-y-6">
      {/* Cards de KPIs */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">LTV Médio</p>
              <p className="text-2xl font-bold">R$ {overview.avgLTV}</p>
            </div>
            <div className="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
              <DollarSign className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
        </Card>

<Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Taxa de Ativação</p>
              <p className="text-2xl font-bold">{overview.activationRate}%</p>
              <p className="text-xs text-muted-foreground mt-1">
                {overview.activeAffiliates}/{overview.totalAffiliates} ativos
              </p>
            </div>
            <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
              <Users className="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </Card>

<Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">CAC</p>
              <p className="text-2xl font-bold">R$ {overview.cac}</p>
              <p className="text-xs text-muted-foreground mt-1">Custo de aquisição</p>
            </div>
            <div className="h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center">
              <Target className="h-6 w-6 text-orange-600 dark:text-orange-400" />
            </div>
          </div>
        </Card>

<Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">ROI</p>
              <p className="text-2xl font-bold text-green-600">{overview.roi}%</p>
              <p className="text-xs text-muted-foreground mt-1">Retorno sobre CAC</p>
            </div>
            <div className="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
              <TrendingUp className="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
        </Card>

<Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-muted-foreground">Payback</p>
              <p className="text-2xl font-bold">{overview.paybackMonths} meses</p>
              <p className="text-xs text-muted-foreground mt-1">Tempo para recuperar CAC</p>
            </div>
            <div className="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
              <Clock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
          </div>
        </Card>
      </div>

{/* Tabela de Segmentação */}
      <Card className="p-6">
        <h3 className="text-lg font-semibold mb-4">Segmentação de Clientes</h3>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b">
                <th className="text-left py-3 px-4 font-semibold">Segmento</th>
                <th className="text-right py-3 px-4 font-semibold">Quantidade</th>
                <th className="text-right py-3 px-4 font-semibold">%</th>
                <th className="text-right py-3 px-4 font-semibold">LTV Médio</th>
                <th className="text-right py-3 px-4 font-semibold">ROI</th>
              </tr>
            </thead>
            <tbody>
              {segmentation.map((seg) => (
                <tr key={seg.segment} className="border-b hover:bg-muted/50">
                  <td className="py-3 px-4 font-medium">{seg.segment}</td>
                  <td className="text-right py-3 px-4">{seg.count}</td>
                  <td className="text-right py-3 px-4">{seg.percentage}%</td>
                  <td className="text-right py-3 px-4">R$ {seg.ltv}</td>
                  <td className="text-right py-3 px-4">
                    <span className={`font-semibold ${Number(seg.roi) > 0 ? "text-green-600" : "text-red-600"}`}>
                      {seg.roi}%
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

{/* Insights */}
      <Card className="p-6 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
        <h3 className="text-lg font-semibold mb-3">Insights</h3>
        <div className="space-y-2 text-sm">
          <p>
            <strong>A cada 100 afiliados adquiridos:</strong>
          </p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              ~{Math.round((Number(segmentation[0].percentage) / 100) * 100)} serão Basic Inativos (receita: R${" "}
              {(Math.round((Number(segmentation[0].percentage) / 100) * 100) * 17).toFixed(2)})
            </li>
            <li>
              ~{Math.round((Number(segmentation[1].percentage) / 100) * 100)} serão Basic Ativos (receita: R${" "}
              {(Math.round((Number(segmentation[1].percentage) / 100) * 100) * Number(segmentation[1].ltv)).toFixed(2)})
            </li>
            <li>
              ~{Math.round((Number(segmentation[2].percentage) / 100) * 100)} serão Pro Inativos (receita: R${" "}
              {(Math.round((Number(segmentation[2].percentage) / 100) * 100) * 97).toFixed(2)})
            </li>
            <li>
              ~{Math.round((Number(segmentation[3].percentage) / 100) * 100)} serão Pro Ativos (receita: R${" "}
              {(Math.round((Number(segmentation[3].percentage) / 100) * 100) * Number(segmentation[3].ltv)).toFixed(2)})
            </li>
          </ul>
          <p className="pt-2 font-semibold">
            Receita Total Esperada: R${" "}
            {(
              Math.round((Number(segmentation[0].percentage) / 100) * 100) * 17 +
              Math.round((Number(segmentation[1].percentage) / 100) * 100) * Number(segmentation[1].ltv) +
              Math.round((Number(segmentation[2].percentage) / 100) * 100) * 97 +
              Math.round((Number(segmentation[3].percentage) / 100) * 100) * Number(segmentation[3].ltv)
            ).toFixed(2)}
          </p>
          <p>
            Custo de Aquisição: R$ {(100 * Number(overview.cac)).toFixed(2)} | Lucro: R${" "}
            {(
              Math.round((Number(segmentation[0].percentage) / 100) * 100) * 17 +
              Math.round((Number(segmentation[1].percentage) / 100) * 100) * Number(segmentation[1].ltv) +
              Math.round((Number(segmentation[2].percentage) / 100) * 100) * 97 +
              Math.round((Number(segmentation[3].percentage) / 100) * 100) * Number(segmentation[3].ltv) -
              100 * Number(overview.cac)
            ).toFixed(2)}
          </p>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/manual-metrics-form.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, Save } from "lucide-react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { useToast } from "@/hooks/use-toast"

interface ManualMetricsFormProps {
  onSave: () => void
}

export function ManualMetricsForm({ onSave }: ManualMetricsFormProps) {
  const { toast } = useToast()
  const [date, setDate] = useState<Date>(new Date())
  const [loading, setLoading] = useState(false)

const [metrics, setMetrics] = useState({
    afilia_basic_qty: 0,
    afilia_basic_revenue: 0,
    afilia_pro_qty: 0,
    afilia_pro_revenue: 0,
    affiliate_qty: 0,
    affiliate_revenue: 0,
    expenses: 0,
  })

useEffect(() => {
    const handleLoadDate = (event: CustomEvent) => {
      const { date: dateStr } = event.detail
      console.log("[v0] Loading metrics for date:", dateStr)
      const newDate = new Date(dateStr + "T00:00:00")
      setDate(newDate)
      loadMetrics(newDate)
    }

window.addEventListener("loadMetricsDate", handleLoadDate as EventListener)
    return () => window.removeEventListener("loadMetricsDate", handleLoadDate as EventListener)
  }, [])

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

try {
      const response = await fetch("/api/metrics/manual", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          date: format(date, "yyyy-MM-dd"),
          ...metrics,
        }),
      })

if (!response.ok) throw new Error("Failed to save")

toast({
        title: "Métricas salvas!",
        description: `Dados de ${format(date, "dd/MM/yyyy", { locale: ptBR })} salvos com sucesso.`,
      })

onSave()
    } catch (error) {
      toast({
        title: "Erro ao salvar",
        description: "Não foi possível salvar as métricas. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const loadMetrics = async (selectedDate: Date) => {
    try {
      const response = await fetch(`/api/metrics/manual?date=${format(selectedDate, "yyyy-MM-dd")}`)
      const result = await response.json()

if (result.data) {
        setMetrics({
          afilia_basic_qty: result.data.afilia_basic_qty || 0,
          afilia_basic_revenue: Number(result.data.afilia_basic_revenue) || 0,
          afilia_pro_qty: result.data.afilia_pro_qty || 0,
          afilia_pro_revenue: Number(result.data.afilia_pro_revenue) || 0,
          affiliate_qty: result.data.affiliate_qty || 0,
          affiliate_revenue: Number(result.data.affiliate_revenue) || 0,
          expenses: Number(result.data.daily_expenses) || Number(result.data.expenses) || 0,
        })
      }
    } catch (error) {
      console.error("[v0] Error loading metrics:", error)
    }
  }

const handleDateChange = (newDate: Date | undefined) => {
    if (newDate) {
      setDate(newDate)
      loadMetrics(newDate)
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Adicionar Métricas Manualmente</CardTitle>
        <CardDescription>Insira as vendas do dia para gerar o dashboard</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Data */}
          <div className="space-y-2">
            <Label>Data</Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" className="w-full justify-start bg-transparent">
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {format(date, "dd/MM/yyyy", { locale: ptBR })}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0">
                <Calendar mode="single" selected={date} onSelect={handleDateChange} locale={ptBR} />
              </PopoverContent>
            </Popover>
          </div>

{/* AFILIA360 BÁSICO */}
          <div className="space-y-4 p-4 border rounded-lg">
            <h3 className="font-semibold text-blue-600">AFILIA360 BÁSICO</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="afilia_basic_qty">Quantidade de Vendas</Label>
                <Input
                  id="afilia_basic_qty"
                  type="number"
                  min="0"
                  value={metrics.afilia_basic_qty}
                  onChange={(e) => setMetrics({ ...metrics, afilia_basic_qty: Number(e.target.value) })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="afilia_basic_revenue">Faturamento (R$)</Label>
                <Input
                  id="afilia_basic_revenue"
                  type="number"
                  min="0"
                  step="0.01"
                  value={metrics.afilia_basic_revenue}
                  onChange={(e) => setMetrics({ ...metrics, afilia_basic_revenue: Number(e.target.value) })}
                />
              </div>
            </div>
          </div>

{/* AFILIA360 PRO */}
          <div className="space-y-4 p-4 border rounded-lg">
            <h3 className="font-semibold text-purple-600">AFILIA360 PRO</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="afilia_pro_qty">Quantidade de Vendas</Label>
                <Input
                  id="afilia_pro_qty"
                  type="number"
                  min="0"
                  value={metrics.afilia_pro_qty}
                  onChange={(e) => setMetrics({ ...metrics, afilia_pro_qty: Number(e.target.value) })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="afilia_pro_revenue">Faturamento (R$)</Label>
                <Input
                  id="afilia_pro_revenue"
                  type="number"
                  min="0"
                  step="0.01"
                  value={metrics.afilia_pro_revenue}
                  onChange={(e) => setMetrics({ ...metrics, afilia_pro_revenue: Number(e.target.value) })}
                />
              </div>
            </div>
          </div>

{/* AFILIADOS */}
          <div className="space-y-4 p-4 border rounded-lg">
            <h3 className="font-semibold text-green-600">VENDAS DE AFILIADOS</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="affiliate_qty">Quantidade de Vendas</Label>
                <Input
                  id="affiliate_qty"
                  type="number"
                  min="0"
                  value={metrics.affiliate_qty}
                  onChange={(e) => setMetrics({ ...metrics, affiliate_qty: Number(e.target.value) })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="affiliate_revenue">Faturamento (R$)</Label>
                <Input
                  id="affiliate_revenue"
                  type="number"
                  min="0"
                  step="0.01"
                  value={metrics.affiliate_revenue}
                  onChange={(e) => setMetrics({ ...metrics, affiliate_revenue: Number(e.target.value) })}
                />
              </div>
            </div>
          </div>

{/* DESPESAS DO DIA */}
          <div className="space-y-4 p-4 border rounded-lg border-red-500/30 bg-red-500/5">
            <h3 className="font-semibold text-red-600">DESPESAS DO DIA</h3>
            <div className="space-y-2">
              <Label htmlFor="expenses">Total de Despesas (R$)</Label>
              <Input
                id="expenses"
                type="number"
                min="0"
                step="0.01"
                value={metrics.expenses}
                onChange={(e) => setMetrics({ ...metrics, expenses: Number(e.target.value) })}
                placeholder="Marketing, IA, Hospedagem, Contador, etc"
              />
              <p className="text-xs text-muted-foreground">
                Inclua: marketing, IA, hospedagem, contador e outras despesas operacionais
              </p>
            </div>
          </div>

<Button type="submit" className="w-full" disabled={loading}>
            <Save className="mr-2 h-4 w-4" />
            {loading ? "Salvando..." : "Salvar Métricas"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/metrics-charts.tsx"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts"
import { TrendingUp, TrendingDown } from "lucide-react"

const CATEGORY_COLORS: Record<string, string> = {
  hospedagem: "#3b82f6",
  ia: "#8b5cf6",
  marketing: "#f59e0b",
  ferramentas: "#10b981",
  outros: "#6b7280",
}

const CATEGORY_LABELS: Record<string, string> = {
  hospedagem: "Hospedagem",
  ia: "IA & APIs",
  marketing: "Marketing",
  ferramentas: "Ferramentas",
  outros: "Outros",
}

export function MetricsCharts() {
  const [chartData, setChartData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

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

const fetchChartData = async () => {
    try {
      const res = await fetch("/api/business-metrics/charts?months=6")
      const data = await res.json()
      setChartData(data)
    } catch (error) {
      console.error("Error fetching chart data:", error)
    } finally {
      setLoading(false)
    }
  }

if (loading) {
    return <div className="text-center py-8">Carregando gráficos...</div>
  }

if (!chartData) {
    return <div className="text-center py-8">Erro ao carregar dados</div>
  }

const monthlyData = chartData.monthlyMetrics.map((m: any) => ({
    month: m.month,
    "Receita Total": Number.parseFloat(m.revenue_app || 0) + Number.parseFloat(m.revenue_commissions || 0),
    "Receita App": Number.parseFloat(m.revenue_app || 0),
    Comissões: Number.parseFloat(m.revenue_commissions || 0),
    Custos: Number.parseFloat(m.total_costs || 0),
    Lucro: Number.parseFloat(m.profit || 0),
  }))

const costsDistribution = Object.entries(chartData.costsByCategory).map(([category, amount]) => ({
    name: CATEGORY_LABELS[category] || category,
    value: Number.parseFloat(amount as string),
    color: CATEGORY_COLORS[category] || "#6b7280",
  }))

// Calcular crescimento mês a mês
  const calculateGrowth = () => {
    if (monthlyData.length < 2) return null
    const current = monthlyData[monthlyData.length - 1]
    const previous = monthlyData[monthlyData.length - 2]
    const growth = ((current.Lucro - previous.Lucro) / Math.abs(previous.Lucro)) * 100
    return {
      value: growth,
      isPositive: growth >= 0,
    }
  }

const growth = calculateGrowth()

return (
    <div className="space-y-6">
      {/* Indicador de Crescimento */}
      {growth && (
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-center gap-3">
              {growth.isPositive ? (
                <TrendingUp className="h-8 w-8 text-green-500" />
              ) : (
                <TrendingDown className="h-8 w-8 text-red-500" />
              )}
              <div>
                <p className="text-sm text-muted-foreground">Crescimento vs Mês Anterior</p>
                <p className={`text-2xl font-bold ${growth.isPositive ? "text-green-500" : "text-red-500"}`}>
                  {growth.isPositive ? "+" : ""}
                  {growth.value.toFixed(1)}%
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Gráfico de Evolução Financeira (Últimos 6 Meses) */}
      <Card>
        <CardHeader>
          <CardTitle>Evolução Financeira (Últimos 6 Meses)</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={350}>
            <AreaChart data={monthlyData}>
              <defs>
                <linearGradient id="colorLucro" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8} />
                  <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.1} />
                </linearGradient>
                <linearGradient id="colorReceita" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
                  <stop offset="95%" stopColor="#10b981" stopOpacity={0.1} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
              <XAxis
                dataKey="month"
                tick={{ fill: "#6b7280", fontSize: 12 }}
                tickFormatter={(value) => {
                  const [year, month] = value.split("-")
                  return `${month}/${year.slice(2)}`
                }}
              />
              <YAxis tick={{ fill: "#6b7280", fontSize: 12 }} />
              <Tooltip
                contentStyle={{
                  backgroundColor: "#fff",
                  border: "1px solid #e5e7eb",
                  borderRadius: "8px",
                  padding: "12px",
                }}
                formatter={(value: number) => [`R$ ${value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`, ""]}
                labelFormatter={(label) => {
                  const [year, month] = label.split("-")
                  const monthNames = [
                    "Jan",
                    "Fev",
                    "Mar",
                    "Abr",
                    "Mai",
                    "Jun",
                    "Jul",
                    "Ago",
                    "Set",
                    "Out",
                    "Nov",
                    "Dez",
                  ]
                  return `${monthNames[Number.parseInt(month) - 1]}/${year}`
                }}
              />
              <Legend wrapperStyle={{ paddingTop: "20px" }} />
              <Area
                type="monotone"
                dataKey="Lucro"
                stroke="#8b5cf6"
                strokeWidth={3}
                fillOpacity={1}
                fill="url(#colorLucro)"
              />
              <Area
                type="monotone"
                dataKey="Receita Total"
                stroke="#10b981"
                strokeWidth={2}
                fillOpacity={1}
                fill="url(#colorReceita)"
              />
            </AreaChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

<div className="grid gap-6 md:grid-cols-2">
        {/* Gráfico de Barras: Composição da Receita */}
        <Card>
          <CardHeader>
            <CardTitle>Composição da Receita</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={monthlyData}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                <XAxis
                  dataKey="month"
                  tick={{ fill: "#6b7280", fontSize: 12 }}
                  tickFormatter={(value) => {
                    const [year, month] = value.split("-")
                    return `${month}/${year.slice(2)}`
                  }}
                />
                <YAxis tick={{ fill: "#6b7280", fontSize: 12 }} />
                <Tooltip
                  contentStyle={{
                    backgroundColor: "#fff",
                    border: "1px solid #e5e7eb",
                    borderRadius: "8px",
                    padding: "12px",
                  }}
                  formatter={(value: number) => [
                    `R$ ${value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`,
                    "",
                  ]}
                />
                <Legend />
                <Bar dataKey="Receita App" stackId="a" fill="#3b82f6" radius={[0, 0, 4, 4]} />
                <Bar dataKey="Comissões" stackId="a" fill="#10b981" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Custos por Categoria</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {costsDistribution.map((item, index) => {
                const total = costsDistribution.reduce((sum, i) => sum + i.value, 0)
                const percentage = (item.value / total) * 100

return (
                  <div key={item.name} className="space-y-2">
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full" style={{ backgroundColor: item.color }} />
                        <span className="font-medium">{item.name}</span>
                      </div>
                      <span className="text-muted-foreground">
                        R$ {item.value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                      </span>
                    </div>
                    <div className="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all"
                        style={{
                          width: `${percentage}%`,
                          backgroundColor: item.color,
                        }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
            <div className="mt-4 pt-4 border-t">
              <div className="flex items-center justify-between text-sm font-medium">
                <span>Total de Custos</span>
                <span>
                  R${" "}
                  {costsDistribution
                    .reduce((sum, i) => sum + i.value, 0)
                    .toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/metrics-list.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Edit, Trash2, ChevronDown, ChevronUp } from "lucide-react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

type MetricEntry = {
  date: string
  afilia_basic_qty: number
  afilia_basic_revenue: number
  afilia_pro_qty: number
  afilia_pro_revenue: number
  affiliate_qty: number
  affiliate_revenue: number
  expenses: number
}

export function MetricsList({ onEdit }: { onEdit: (date: string) => void }) {
  const [entries, setEntries] = useState<MetricEntry[]>([])
  const [loading, setLoading] = useState(true)
  const [expandedDates, setExpandedDates] = useState<Set<string>>(new Set())
  const [deleteDate, setDeleteDate] = useState<string | null>(null)

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

const loadEntries = async () => {
    try {
      const response = await fetch("/api/metrics/manual/list")
      const result = await response.json()
      setEntries(result.data || [])
    } catch (error) {
      console.error("Error loading entries:", error)
    } finally {
      setLoading(false)
    }
  }

const handleDelete = async () => {
    if (!deleteDate) return

try {
      const response = await fetch(`/api/metrics/manual?date=${deleteDate}`, {
        method: "DELETE",
      })

if (response.ok) {
        await loadEntries()
        setDeleteDate(null)
      }
    } catch (error) {
      console.error("Error deleting entry:", error)
    }
  }

const toggleExpanded = (date: string) => {
    const newExpanded = new Set(expandedDates)
    if (newExpanded.has(date)) {
      newExpanded.delete(date)
    } else {
      newExpanded.add(date)
    }
    setExpandedDates(newExpanded)
  }

const calculateTotal = (entry: MetricEntry) => {
    return (
      Number(entry.afilia_basic_revenue || 0) +
      Number(entry.afilia_pro_revenue || 0) +
      Number(entry.affiliate_revenue || 0)
    )
  }

const calculateProfit = (entry: MetricEntry) => {
    return calculateTotal(entry) - Number(entry.expenses || 0)
  }

if (loading) {
    return (
      <Card>
        <CardContent className="py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
          <p className="text-center mt-4 text-muted-foreground">Carregando lançamentos...</p>
        </CardContent>
      </Card>
    )
  }

return (
    <>
      <Card>
        <CardHeader>
          <CardTitle>Histórico de Lançamentos</CardTitle>
        </CardHeader>
        <CardContent>
          {entries.length === 0 ? (
            <p className="text-center text-muted-foreground py-8">Nenhum lançamento encontrado</p>
          ) : (
            <div className="space-y-2">
              {entries.map((entry) => (
                <div key={entry.date} className="border rounded-lg overflow-hidden">
                  <div className="flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors">
                    <div className="flex items-center gap-4">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => toggleExpanded(entry.date)}
                        className="h-8 w-8 p-0"
                      >
                        {expandedDates.has(entry.date) ? (
                          <ChevronUp className="h-4 w-4" />
                        ) : (
                          <ChevronDown className="h-4 w-4" />
                        )}
                      </Button>
                      <div>
                        <p className="font-medium">
                          {format(new Date(entry.date + "T00:00:00"), "dd 'de' MMMM 'de' yyyy", { locale: ptBR })}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {(entry.afilia_basic_qty || 0) + (entry.afilia_pro_qty || 0) + (entry.affiliate_qty || 0)}{" "}
                          vendas
                        </p>
                      </div>
                    </div>

<div className="flex items-center gap-6">
                      <div className="text-right">
                        <p className="text-sm text-muted-foreground">Receita</p>
                        <p className="font-bold text-green-500">R$ {calculateTotal(entry).toFixed(2)}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm text-muted-foreground">Lucro</p>
                        <p className="font-bold text-blue-500">R$ {calculateProfit(entry).toFixed(2)}</p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm" onClick={() => onEdit(entry.date)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm" onClick={() => setDeleteDate(entry.date)}>
                          <Trash2 className="h-4 w-4 text-red-500" />
                        </Button>
                      </div>
                    </div>
                  </div>

{expandedDates.has(entry.date) && (
                    <div className="p-4 bg-background border-t space-y-3">
                      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <div className="p-3 bg-blue-500/10 rounded-lg">
                          <p className="text-xs text-muted-foreground mb-1">AFILIA360 BÁSICO</p>
                          <p className="font-semibold">{entry.afilia_basic_qty || 0} vendas</p>
                          <p className="text-sm text-blue-500">
                            R$ {Number(entry.afilia_basic_revenue || 0).toFixed(2)}
                          </p>
                        </div>

<div className="p-3 bg-purple-500/10 rounded-lg">
                          <p className="text-xs text-muted-foreground mb-1">AFILIA360 PRO</p>
                          <p className="font-semibold">{entry.afilia_pro_qty || 0} vendas</p>
                          <p className="text-sm text-purple-500">
                            R$ {Number(entry.afilia_pro_revenue || 0).toFixed(2)}
                          </p>
                        </div>

<div className="p-3 bg-green-500/10 rounded-lg">
                          <p className="text-xs text-muted-foreground mb-1">Afiliados</p>
                          <p className="font-semibold">{entry.affiliate_qty || 0} vendas</p>
                          <p className="text-sm text-green-500">R$ {Number(entry.affiliate_revenue || 0).toFixed(2)}</p>
                        </div>

<div className="p-3 bg-red-500/10 rounded-lg">
                          <p className="text-xs text-muted-foreground mb-1">Despesas</p>
                          <p className="text-sm text-red-500">R$ {Number(entry.expenses || 0).toFixed(2)}</p>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

<AlertDialog open={!!deleteDate} onOpenChange={() => setDeleteDate(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
            <AlertDialogDescription>
              Tem certeza que deseja excluir o lançamento do dia{" "}
              {deleteDate && format(new Date(deleteDate + "T00:00:00"), "dd/MM/yyyy")}? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/admin/monthly-sales-manager.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, 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 { AlertCircle, Plus, Trash2, TrendingUp } from "lucide-react"

const MONTHS = [
  "Janeiro",
  "Fevereiro",
  "Março",
  "Abril",
  "Maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro",
]

interface MonthlySale {
  id: number
  month: number
  year: number
  total_sales: number
  created_at: string
  updated_at: string
}

export default function MonthlySalesManager() {
  const [history, setHistory] = useState<MonthlySale[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [showForm, setShowForm] = useState(false)

const currentDate = new Date()
  const [formData, setFormData] = useState({
    month: currentDate.getMonth() + 1,
    year: currentDate.getFullYear(),
    total_sales: 0,
  })

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

const loadHistory = async () => {
    try {
      const res = await fetch("/api/monthly-sales")
      const data = await res.json()
      setHistory(data)
    } catch (error) {
      console.error("Erro ao carregar histórico:", error)
    } finally {
      setLoading(false)
    }
  }

const handleSave = async () => {
    setSaving(true)
    try {
      const res = await fetch("/api/monthly-sales", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (res.ok) {
        await loadHistory()
        setShowForm(false)
        setFormData({
          month: currentDate.getMonth() + 1,
          year: currentDate.getFullYear(),
          total_sales: 0,
        })
      }
    } catch (error) {
      console.error("Erro ao salvar:", error)
    } finally {
      setSaving(false)
    }
  }

const handleDelete = async (id: number) => {
    if (!confirm("Deseja realmente excluir este registro?")) return

try {
      await fetch(`/api/monthly-sales?id=${id}`, { method: "DELETE" })
      await loadHistory()
    } catch (error) {
      console.error("Erro ao excluir:", error)
    }
  }

if (loading) {
    return <div className="text-center py-8">Carregando...</div>
  }

return (
    <div className="space-y-6">
      {/* Botão para adicionar/editar vendas */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <TrendingUp className="h-5 w-5" />
              Vendas Totais do Mês
            </CardTitle>
            <Button onClick={() => setShowForm(!showForm)} variant={showForm ? "outline" : "default"}>
              {showForm ? (
                "Cancelar"
              ) : (
                <>
                  <Plus className="h-4 w-4 mr-2" /> Adicionar/Atualizar
                </>
              )}
            </Button>
          </div>
        </CardHeader>

{showForm && (
          <CardContent className="space-y-4">
            <div className="grid grid-cols-3 gap-4">
              <div>
                <Label htmlFor="month">Mês</Label>
                <select
                  id="month"
                  value={formData.month}
                  onChange={(e) => setFormData({ ...formData, month: Number.parseInt(e.target.value) })}
                  className="w-full mt-1 rounded-md border border-input bg-background px-3 py-2"
                >
                  {MONTHS.map((name, idx) => (
                    <option key={idx} value={idx + 1}>
                      {name}
                    </option>
                  ))}
                </select>
              </div>

<div>
                <Label htmlFor="year">Ano</Label>
                <Input
                  id="year"
                  type="number"
                  value={formData.year}
                  onChange={(e) => setFormData({ ...formData, year: Number.parseInt(e.target.value) })}
                  min={2020}
                  max={2100}
                />
              </div>

<div>
                <Label htmlFor="total_sales">Total de Vendas</Label>
                <Input
                  id="total_sales"
                  type="number"
                  value={formData.total_sales}
                  onChange={(e) => setFormData({ ...formData, total_sales: Number.parseInt(e.target.value) })}
                  min={0}
                />
              </div>
            </div>

<Button onClick={handleSave} disabled={saving} className="w-full">
              {saving ? "Salvando..." : "Salvar"}
            </Button>
          </CardContent>
        )}
      </Card>

{/* Histórico */}
      <Card>
        <CardHeader>
          <CardTitle>Histórico de Vendas</CardTitle>
        </CardHeader>
        <CardContent>
          {history.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              <AlertCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
              <p>Nenhum registro encontrado</p>
            </div>
          ) : (
            <div className="space-y-2">
              {history.map((record) => (
                <div
                  key={record.id}
                  className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
                >
                  <div>
                    <p className="font-semibold">
                      {MONTHS[record.month - 1]} {record.year}
                    </p>
                    <p className="text-2xl font-bold text-primary">
                      {record.total_sales.toLocaleString("pt-BR")} vendas
                    </p>
                    <p className="text-xs text-muted-foreground">
                      Atualizado em: {new Date(record.updated_at).toLocaleString("pt-BR")}
                    </p>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDelete(record.id)}
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/novidades-admin.tsx"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { Card, CardContent, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import {
  Plus, Pencil, Trash2, Radio, BookOpen, Megaphone, Palette,
  Save, Eye, EyeOff, FileText, Globe, Link2, Upload, X, CheckCircle,
  Maximize2, SplitSquareHorizontal, Code2, PlayCircle
} from "lucide-react"
import {
  getAllNewsPostsAdmin, upsertNewsPost, deleteNewsPost,
  getLives, upsertLive, deleteLive,
} from "@/lib/novidades-api"
import type { NewsPost } from "@/components/news-card"
import { isFullHtml } from "@/components/news-card"
import type { Live, LiveMaterial } from "@/components/live-card"

const categoryOptions = [
  { value: "update", label: "Atualização", icon: Megaphone },
  { value: "lesson", label: "Nova Aula", icon: BookOpen },
  { value: "creative", label: "Criativo", icon: Palette },
]
const statusOptions = [
  { value: "upcoming", label: "Em Breve" },
  { value: "live", label: "Ao Vivo" },
  { value: "ended", label: "Encerrada" },
]
const categoryBadge: Record<string, string> = {
  update: "border-blue-500/30 bg-blue-500/10 text-blue-400",
  lesson: "border-violet-500/30 bg-violet-500/10 text-violet-400",
  creative: "border-amber-500/30 bg-amber-500/10 text-amber-400",
}
const statusBadge: Record<string, string> = {
  upcoming: "border-amber-500/30 bg-amber-500/10 text-amber-400",
  live: "border-red-500/30 bg-red-500/10 text-red-400",
  ended: "border-zinc-500/30 bg-zinc-500/10 text-zinc-400",
}

// ── Helpers ──────────────────────────────────────────────────────────────────

function emptyPost(): Partial<NewsPost> {
  return { title: "", description: "", content: "", cover_image: "", category: "update", tags: [], published: false }
}
function emptyLive(): Partial<Live> {
  return { title: "", description: "", cover_image: "", stream_url: "", status: "upcoming", scheduled_at: "", materials: [] }
}

// ── HTML Preview Fullscreen ──────────────────────────────────────────────────

function HtmlPreviewFullscreen({ content, title, onClose }: { content: string; title: string; onClose: () => void }) {
  useEffect(() => {
    function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose() }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [onClose])

return (
    <div className="fixed inset-0 z-[200] flex flex-col bg-black" role="dialog" aria-modal="true">
      <div className="flex shrink-0 items-center justify-between border-b border-white/10 bg-black/80 px-4 py-2.5">
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="border-violet-500/40 bg-violet-500/15 px-2 py-0.5 text-[10px] text-violet-400">
            Preview
          </Badge>
          <span className="text-sm text-white/60">{title || "Sem título"}</span>
        </div>
        <button
          onClick={onClose}
          className="flex h-8 w-8 items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white"
          aria-label="Fechar preview"
        >
          <X className="h-4 w-4" />
        </button>
      </div>
      <iframe
        srcDoc={content}
        title="Preview fullscreen"
        className="h-full w-full flex-1 border-0"
        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
      />
    </div>
  )
}

// ── Content Editor com split-view ────────────────────────────────────────────

function ContentEditor({
  value,
  onChange,
  title,
}: {
  value: string
  onChange: (v: string) => void
  title: string
}) {
  const [mode, setMode] = useState<"code" | "split" | "preview">("code")
  const [fullscreenPreview, setFullscreenPreview] = useState(false)
  const isHtml = isFullHtml(value)

return (
    <div className="col-span-2 space-y-2">
      <div className="flex items-center justify-between">
        <Label className="text-xs text-muted-foreground">
          Conteúdo
          {isHtml && (
            <Badge variant="outline" className="ml-2 border-violet-500/30 bg-violet-500/10 px-1.5 py-0 text-[10px] text-violet-400">
              HTML completo detectado
            </Badge>
          )}
        </Label>
        <div className="flex items-center gap-1">
          {/* Botões de modo */}
          <button
            type="button"
            onClick={() => setMode("code")}
            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ${
              mode === "code" ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Code2 className="h-3 w-3" />
            Código
          </button>
          <button
            type="button"
            onClick={() => setMode("split")}
            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ${
              mode === "split" ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <SplitSquareHorizontal className="h-3 w-3" />
            Split
          </button>
          <button
            type="button"
            onClick={() => setMode("preview")}
            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors ${
              mode === "preview" ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Eye className="h-3 w-3" />
            Preview
          </button>
          {value && (
            <button
              type="button"
              onClick={() => setFullscreenPreview(true)}
              className="ml-1 flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
              title="Preview fullscreen"
            >
              <Maximize2 className="h-3 w-3" />
              Fullscreen
            </button>
          )}
        </div>
      </div>

{/* Editor area */}
      <div
        className={`overflow-hidden rounded-lg border border-border ${
          mode === "split" ? "grid grid-cols-2 divide-x divide-border" : ""
        }`}
      >
        {/* Code panel */}
        {(mode === "code" || mode === "split") && (
          <Textarea
            rows={mode === "split" ? 16 : 12}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder={`<p>Conteúdo do post em HTML...</p>\n\nOu cole um documento HTML completo:\n<!DOCTYPE html>\n<html lang="pt-BR">...`}
            className="resize-none rounded-none border-0 font-mono text-xs focus-visible:ring-0 focus-visible:ring-offset-0"
          />
        )}

{/* Preview panel */}
        {(mode === "preview" || mode === "split") && (
          <div className={`${mode === "preview" ? "h-64 sm:h-80" : "h-64"} overflow-hidden bg-white`}>
            {value ? (
              isHtml ? (
                <iframe
                  srcDoc={value}
                  title="Preview"
                  className="h-full w-full border-0"
                  sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
                />
              ) : (
                <div
                  className="h-full overflow-y-auto bg-white p-4 text-sm text-zinc-900"
                  dangerouslySetInnerHTML={{ __html: value }}
                />
              )
            ) : (
              <div className="flex h-full items-center justify-center text-sm text-zinc-400">
                Prévia aparece aqui
              </div>
            )}
          </div>
        )}
      </div>

{/* Dica de HTML */}
      {!isHtml && (
        <p className="text-[11px] text-muted-foreground/60">
          Para criar uma aula com estilo Netflix (HTML completo), inicie com{" "}
          <code className="rounded bg-secondary px-1 py-0.5 text-[10px]">{"<!DOCTYPE html>"}</code> ou{" "}
          <code className="rounded bg-secondary px-1 py-0.5 text-[10px]">{"<html"}</code>
        </p>
      )}

{fullscreenPreview && (
        <HtmlPreviewFullscreen
          content={value}
          title={title}
          onClose={() => setFullscreenPreview(false)}
        />
      )}
    </div>
  )
}

// ── News Posts Admin ─────────────────────────────────────────────────────────

function NewsPostsAdmin() {
  const [posts, setPosts] = useState<NewsPost[]>([])
  const [editing, setEditing] = useState<Partial<NewsPost> | null>(null)
  const [saving, setSaving] = useState(false)
  const [toast, setToast] = useState<string | null>(null)
  const fileRef = useRef<HTMLInputElement>(null)

const loadPosts = async () => {
    const data = await getAllNewsPostsAdmin()
    setPosts(data)
  }

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

const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(null), 3000) }

const handleSave = async () => {
    if (!editing?.title) return
    setSaving(true)
    const saved = await upsertNewsPost(editing as NewsPost & { title: string })
    setSaving(false)
    if (saved) { setEditing(null); loadPosts(); showToast("Post salvo com sucesso!") }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Excluir este post?")) return
    await deleteNewsPost(id)
    loadPosts()
    showToast("Post excluído.")
  }

const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file || !editing) return
    const fd = new FormData(); fd.append("file", file)
    const res = await fetch("/api/upload", { method: "POST", body: fd })
    const json = await res.json()
    if (json.url) setEditing({ ...editing, cover_image: json.url })
  }

<div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">{posts.length} posts no total</p>
        <Button size="sm" className="gap-2" onClick={() => setEditing(emptyPost())}>
          <Plus className="h-4 w-4" /> Novo Post
        </Button>
      </div>

{/* List */}
      <div className="space-y-2">
        {posts.map((post) => (
          <div key={post.id} className="flex items-center gap-4 rounded-lg border border-border bg-card p-4">
            {post.cover_image && (
              <img src={post.cover_image} alt="" className="h-12 w-16 shrink-0 rounded object-cover" />
            )}
            <div className="min-w-0 flex-1">
              <div className="mb-1 flex flex-wrap items-center gap-2">
                <Badge variant="outline" className={`px-1.5 py-0 text-[10px] ${categoryBadge[post.category]}`}>
                  {categoryOptions.find(c => c.value === post.category)?.label}
                </Badge>
                {post.published
                  ? <Badge variant="outline" className="border-emerald-500/30 bg-emerald-500/10 px-1.5 py-0 text-[10px] text-emerald-400"><Eye className="mr-1 h-2.5 w-2.5" />Publicado</Badge>
                  : <Badge variant="outline" className="border-zinc-500/30 bg-zinc-500/10 px-1.5 py-0 text-[10px] text-zinc-400"><EyeOff className="mr-1 h-2.5 w-2.5" />Rascunho</Badge>
                }
                {isFullHtml(post.content) && (
                  <Badge variant="outline" className="border-violet-500/30 bg-violet-500/10 px-1.5 py-0 text-[10px] text-violet-400">
                    <PlayCircle className="mr-1 h-2.5 w-2.5" />HTML
                  </Badge>
                )}
              </div>
              <p className="truncate text-sm font-medium text-foreground">{post.title}</p>
              {post.description && <p className="truncate text-xs text-muted-foreground">{post.description}</p>}
            </div>
            <div className="flex shrink-0 gap-2">
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setEditing(post)}>
                <Pencil className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive-foreground hover:text-red-400" onClick={() => handleDelete(post.id)}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          </div>
        ))}
        {posts.length === 0 && (
          <div className="rounded-lg border border-dashed border-border py-10 text-center text-sm text-muted-foreground">
            Nenhum post criado ainda
          </div>
        )}
      </div>

{/* Edit Dialog — largura máxima extendida para split view */}
      <Dialog open={!!editing} onOpenChange={(open) => !open && setEditing(null)}>
        <DialogContent className="max-h-[92vh] max-w-4xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editing?.id ? "Editar Post" : "Novo Post"}</DialogTitle>
          </DialogHeader>
          {editing && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Título *</Label>
                  <Input
                    value={editing.title ?? ""}
                    onChange={(e) => setEditing({ ...editing, title: e.target.value })}
                    placeholder="Título do post"
                  />
                </div>
                <div>
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Categoria</Label>
                  <Select
                    value={editing.category}
                    onValueChange={(v) => setEditing({ ...editing, category: v as NewsPost["category"] })}
                  >
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      {categoryOptions.map(c => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex items-center justify-between rounded-lg border border-border p-3">
                  <div>
                    <p className="text-sm font-medium">Publicado</p>
                    <p className="text-xs text-muted-foreground">Visível para afiliados</p>
                  </div>
                  <Switch
                    checked={editing.published ?? false}
                    onCheckedChange={(v) => setEditing({ ...editing, published: v })}
                  />
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Descrição</Label>
                  <Textarea
                    rows={2}
                    value={editing.description ?? ""}
                    onChange={(e) => setEditing({ ...editing, description: e.target.value })}
                    placeholder="Resumo breve do post"
                  />
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Imagem de Capa</Label>
                  <div className="flex gap-2">
                    <Input
                      value={editing.cover_image ?? ""}
                      onChange={(e) => setEditing({ ...editing, cover_image: e.target.value })}
                      placeholder="URL da imagem"
                    />
                    <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleUpload} />
                    <Button variant="outline" size="icon" onClick={() => fileRef.current?.click()} title="Upload de imagem">
                      <Upload className="h-4 w-4" />
                    </Button>
                  </div>
                  {editing.cover_image && (
                    <img src={editing.cover_image} alt="" className="mt-2 h-24 w-full rounded-md object-cover" />
                  )}
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Tags (separadas por vírgula)</Label>
                  <Input
                    value={(editing.tags ?? []).join(", ")}
                    onChange={(e) => setEditing({ ...editing, tags: e.target.value.split(",").map(t => t.trim()).filter(Boolean) })}
                    placeholder="ex: tráfego pago, copywriting, leads"
                  />
                </div>

{/* Editor com split-view e preview */}
                <ContentEditor
                  value={editing.content ?? ""}
                  onChange={(v) => setEditing({ ...editing, content: v })}
                  title={editing.title ?? ""}
                />
              </div>
              <div className="flex justify-end gap-3 border-t border-border pt-4">
                <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
                <Button onClick={handleSave} disabled={saving} className="gap-2">
                  <Save className="h-4 w-4" />
                  {saving ? "Salvando..." : "Salvar Post"}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}

// ── Lives Admin ───────────────────────────────────────────────────────────────

function LivesAdmin() {
  const [lives, setLives] = useState<Live[]>([])
  const [editing, setEditing] = useState<Partial<Live> | null>(null)
  const [saving, setSaving] = useState(false)
  const [toast, setToast] = useState<string | null>(null)
  const [newMat, setNewMat] = useState<{ name: string; url: string; type: "pdf" | "html" | "link" }>({ name: "", url: "", type: "link" })
  const [uploadingMat, setUploadingMat] = useState(false)
  const coverRef = useRef<HTMLInputElement>(null)
  const matFileRef = useRef<HTMLInputElement>(null)

const loadLives = async () => { setLives(await getLives()) }
  useEffect(() => { loadLives() }, [])

const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(null), 3000) }

const handleSave = async () => {
    if (!editing?.title) return
    setSaving(true)
    const saved = await upsertLive(editing as Live & { title: string })
    setSaving(false)
    if (saved) { setEditing(null); loadLives(); showToast("Live salva!") }
  }

const handleDelete = async (id: string) => {
    if (!confirm("Excluir esta live?")) return
    await deleteLive(id); loadLives(); showToast("Live excluída.")
  }

const handleCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]; if (!file || !editing) return
    const fd = new FormData(); fd.append("file", file)
    const res = await fetch("/api/upload", { method: "POST", body: fd })
    const json = await res.json()
    if (json.url) setEditing({ ...editing, cover_image: json.url })
  }

const handleMatFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]; if (!file) return
    setUploadingMat(true)
    const fd = new FormData(); fd.append("file", file)
    const res = await fetch("/api/upload", { method: "POST", body: fd })
    const json = await res.json()
    setUploadingMat(false)
    if (json.url) {
      const type = file.name.endsWith(".pdf") ? "pdf" : file.name.endsWith(".html") || file.name.endsWith(".htm") ? "html" : "link"
      setNewMat({ name: file.name.replace(/\.[^.]+$/, ""), url: json.url, type })
    }
  }

const addMaterial = () => {
    if (!editing || !newMat.name || !newMat.url) return
    const mat: LiveMaterial = { id: crypto.randomUUID(), ...newMat }
    setEditing({ ...editing, materials: [...(editing.materials ?? []), mat] })
    setNewMat({ name: "", url: "", type: "link" })
  }

const removeMaterial = (id: string) => {
    if (!editing) return
    setEditing({ ...editing, materials: (editing.materials ?? []).filter((m) => m.id !== id) })
  }

return (
    <div className="space-y-4">
      {toast && (
        <div className="flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">
          <CheckCircle className="h-4 w-4" /> {toast}
        </div>
      )}
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">{lives.length} lives registradas</p>
        <Button size="sm" className="gap-2" onClick={() => setEditing(emptyLive())}>
          <Plus className="h-4 w-4" /> Nova Live
        </Button>
      </div>

<div className="space-y-2">
        {lives.map((live) => (
          <div key={live.id} className="flex items-center gap-4 rounded-lg border border-border bg-card p-4">
            {live.cover_image && (
              <img src={live.cover_image} alt="" className="h-12 w-16 shrink-0 rounded object-cover" />
            )}
            <div className="min-w-0 flex-1">
              <div className="mb-1 flex flex-wrap gap-2">
                <Badge variant="outline" className={`px-1.5 py-0 text-[10px] ${statusBadge[live.status]}`}>
                  {statusOptions.find(s => s.value === live.status)?.label}
                </Badge>
                {live.materials.length > 0 && (
                  <Badge variant="outline" className="border-zinc-500/30 bg-zinc-500/10 px-1.5 py-0 text-[10px] text-zinc-400">
                    {live.materials.length} {live.materials.length === 1 ? "material" : "materiais"}
                  </Badge>
                )}
              </div>
              <p className="truncate text-sm font-medium text-foreground">{live.title}</p>
              {live.scheduled_at && (
                <p className="text-xs text-muted-foreground">
                  {new Date(live.scheduled_at).toLocaleString("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
                </p>
              )}
            </div>
            <div className="flex shrink-0 gap-2">
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setEditing(live)}>
                <Pencil className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive-foreground hover:text-red-400" onClick={() => handleDelete(live.id)}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          </div>
        ))}
        {lives.length === 0 && (
          <div className="rounded-lg border border-dashed border-border py-10 text-center text-sm text-muted-foreground">
            Nenhuma live criada ainda
          </div>
        )}
      </div>

{/* Live Edit Dialog */}
      <Dialog open={!!editing} onOpenChange={(open) => !open && setEditing(null)}>
        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editing?.id ? "Editar Live" : "Nova Live"}</DialogTitle>
          </DialogHeader>
          {editing && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Título *</Label>
                  <Input value={editing.title ?? ""} onChange={(e) => setEditing({ ...editing, title: e.target.value })} placeholder="Nome da transmissão" />
                </div>
                <div>
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Status</Label>
                  <Select value={editing.status} onValueChange={(v) => setEditing({ ...editing, status: v as Live["status"] })}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      {statusOptions.map(s => <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Data e Hora</Label>
                  <Input
                    type="datetime-local"
                    value={editing.scheduled_at ? editing.scheduled_at.slice(0, 16) : ""}
                    onChange={(e) => setEditing({ ...editing, scheduled_at: e.target.value ? new Date(e.target.value).toISOString() : "" })}
                  />
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Link da Transmissão</Label>
                  <Input value={editing.stream_url ?? ""} onChange={(e) => setEditing({ ...editing, stream_url: e.target.value })} placeholder="https://youtube.com/live/..." />
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Descrição</Label>
                  <Textarea rows={3} value={editing.description ?? ""} onChange={(e) => setEditing({ ...editing, description: e.target.value })} placeholder="Sobre o que será esta live..." />
                </div>
                <div className="col-span-2">
                  <Label className="mb-1.5 block text-xs text-muted-foreground">Capa</Label>
                  <div className="flex gap-2">
                    <Input value={editing.cover_image ?? ""} onChange={(e) => setEditing({ ...editing, cover_image: e.target.value })} placeholder="URL da imagem de capa" />
                    <input ref={coverRef} type="file" accept="image/*" className="hidden" onChange={handleCoverUpload} />
                    <Button variant="outline" size="icon" onClick={() => coverRef.current?.click()} title="Upload da capa">
                      <Upload className="h-4 w-4" />
                    </Button>
                  </div>
                  {editing.cover_image && <img src={editing.cover_image} alt="" className="mt-2 h-24 w-full rounded-md object-cover" />}
                </div>
              </div>

{/* Materials */}
              <div className="border-t border-border pt-4">
                <Label className="mb-3 block text-sm font-medium">Materiais Complementares</Label>
                <div className="mb-3 space-y-2">
                  {(editing.materials ?? []).map((mat) => {
                    const MatIcon = mat.type === "pdf" ? FileText : mat.type === "html" ? Globe : Link2
                    return (
                      <div key={mat.id} className="flex items-center gap-3 rounded-lg border border-border bg-secondary/50 px-3 py-2">
                        <MatIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
                        <div className="min-w-0 flex-1">
                          <p className="truncate text-sm">{mat.name}</p>
                          <p className="text-xs uppercase text-muted-foreground">{mat.type}</p>
                        </div>
                        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-red-400" onClick={() => removeMaterial(mat.id)}>
                          <X className="h-3.5 w-3.5" />
                        </Button>
                      </div>
                    )
                  })}
                </div>

{/* Add material */}
                <div className="space-y-3 rounded-lg border border-dashed border-border p-3">
                  <p className="text-xs font-medium text-muted-foreground">Adicionar material</p>
                  <div className="grid grid-cols-3 gap-2">
                    <Input
                      className="col-span-2"
                      value={newMat.name}
                      onChange={(e) => setNewMat({ ...newMat, name: e.target.value })}
                      placeholder="Nome do material"
                    />
                    <Select value={newMat.type} onValueChange={(v) => setNewMat({ ...newMat, type: v as "pdf" | "html" | "link" })}>
                      <SelectTrigger><SelectValue /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="pdf">PDF</SelectItem>
                        <SelectItem value="html">HTML</SelectItem>
                        <SelectItem value="link">Link</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex gap-2">
                    <Input
                      value={newMat.url}
                      onChange={(e) => setNewMat({ ...newMat, url: e.target.value })}
                      placeholder="URL do material"
                    />
                    <input ref={matFileRef} type="file" accept=".pdf,.html,.htm" className="hidden" onChange={handleMatFileUpload} />
                    <Button variant="outline" size="icon" onClick={() => matFileRef.current?.click()} disabled={uploadingMat} title="Upload de arquivo">
                      <Upload className="h-4 w-4" />
                    </Button>
                    <Button size="icon" onClick={addMaterial} disabled={!newMat.name || !newMat.url}>
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                  {uploadingMat && <p className="animate-pulse text-xs text-muted-foreground">Enviando arquivo...</p>}
                </div>
              </div>

<div className="flex justify-end gap-3 border-t border-border pt-4">
                <Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
                <Button onClick={handleSave} disabled={saving} className="gap-2">
                  <Save className="h-4 w-4" />
                  {saving ? "Salvando..." : "Salvar Live"}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}

// ── Main Export ───────────────────────────────────────────────────────────────

export function NovidadesAdmin() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-semibold">Gerenciar Novidades</h2>
        <p className="text-sm text-muted-foreground">
          Crie posts, aulas em HTML, criativos validados e gerencie transmissões ao vivo
        </p>
      </div>
      <Tabs defaultValue="posts">
        <TabsList className="mb-4">
          <TabsTrigger value="posts" className="gap-2">
            <BookOpen className="h-3.5 w-3.5" /> Posts & Aulas
          </TabsTrigger>
          <TabsTrigger value="lives" className="gap-2">
            <Radio className="h-3.5 w-3.5" /> Lives
          </TabsTrigger>
        </TabsList>
        <TabsContent value="posts"><NewsPostsAdmin /></TabsContent>
        <TabsContent value="lives"><LivesAdmin /></TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/orderbumps-manager.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/hooks/use-toast"
import { Trash2, Plus, Users, Search } from "lucide-react"

interface Orderbump {
  id: string
  user_id: string
  course_id: string
  granted_by: string
  notes: string
  created_at: string
  user: { id: string; name: string; email: string }
  course: { id: string; title: string; slug: string }
}

interface User {
  id: string
  name: string
  email: string
}

interface Course {
  id: string
  title: string
  slug: string
}

export function OrderbumpsManager() {
  const [orderbumps, setOrderbumps] = useState<Orderbump[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [courses, setCourses] = useState<Course[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedUser, setSelectedUser] = useState("")
  const [selectedCourse, setSelectedCourse] = useState("")
  const [notes, setNotes] = useState("")
  const [saving, setSaving] = useState(false)
  const [userSearch, setUserSearch] = useState("")

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

async function loadData() {
    try {
      const response = await fetch("/api/orderbumps")
      const data = await response.json()
      
      console.log("[v0] Dados recebidos da API:", {
        orderbumps: data.orderbumps?.length || 0,
        users: data.users?.length || 0,
        courses: data.courses?.length || 0,
      })
      
      setOrderbumps(data.orderbumps || [])
      setUsers(data.users || [])
      setCourses(data.courses || [])
    } catch (error) {
      console.error("[v0] Erro ao carregar orderbumps:", error)
      toast({
        title: "Erro",
        description: "Erro ao carregar orderbumps",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

async function handleAdd() {
    if (!selectedUser || !selectedCourse) {
      toast({
        title: "Atenção",
        description: "Selecione um usuário e um curso",
        variant: "destructive",
      })
      return
    }

setSaving(true)
    try {
      const response = await fetch("/api/orderbumps", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId: selectedUser,
          courseId: selectedCourse,
          notes: notes,
        }),
      })

if (response.ok) {
        toast({
          title: "Sucesso",
          description: "Orderbump adicionado com sucesso",
        })
        setSelectedUser("")
        setSelectedCourse("")
        setNotes("")
        loadData()
      } else {
        const error = await response.json()
        toast({
          title: "Erro",
          description: error.error || "Erro ao adicionar orderbump",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Erro ao adicionar orderbump:", error)
      toast({
        title: "Erro",
        description: "Erro ao adicionar orderbump",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

async function handleRemove(userId: string, courseId: string) {
    if (!confirm("Tem certeza que deseja remover este orderbump?")) return

try {
      const response = await fetch(`/api/orderbumps?userId=${userId}&courseId=${courseId}`, {
        method: "DELETE",
      })

if (response.ok) {
        toast({
          title: "Sucesso",
          description: "Orderbump removido com sucesso",
        })
        loadData()
      } else {
        const error = await response.json()
        toast({
          title: "Erro",
          description: error.error || "Erro ao remover orderbump",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("Erro ao remover orderbump:", error)
      toast({
        title: "Erro",
        description: "Erro ao remover orderbump",
        variant: "destructive",
      })
    }
  }

// Filtrar usuários com base na busca
  const filteredUsers = users.filter(
    (user) =>
      user.name.toLowerCase().includes(userSearch.toLowerCase()) ||
      user.email.toLowerCase().includes(userSearch.toLowerCase()),
  )

if (loading) {
    return <div className="p-6">Carregando...</div>
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Plus className="h-5 w-5" />
            Adicionar Orderbump
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="user">Usuário ({filteredUsers.length} encontrados)</Label>
              <div className="relative mb-2">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder="Buscar por nome ou email..."
                  value={userSearch}
                  onChange={(e) => setUserSearch(e.target.value)}
                  className="pl-9"
                />
              </div>
              <Select value={selectedUser} onValueChange={setSelectedUser}>
                <SelectTrigger id="user">
                  <SelectValue placeholder="Selecione um usuário" />
                </SelectTrigger>
                <SelectContent className="max-h-[300px]">
                  {filteredUsers.length === 0 ? (
                    <div className="py-6 text-center text-sm text-muted-foreground">Nenhum usuário encontrado</div>
                  ) : (
                    filteredUsers.map((user) => (
                      <SelectItem key={user.id} value={user.id}>
                        {user.name} ({user.email})
                      </SelectItem>
                    ))
                  )}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="course">Curso</Label>
              <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                <SelectTrigger id="course">
                  <SelectValue placeholder="Selecione um curso" />
                </SelectTrigger>
                <SelectContent>
                  {courses.map((course) => (
                    <SelectItem key={course.id} value={course.id}>
                      {course.title}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="notes">Anotações (opcional)</Label>
            <Textarea
              id="notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Ex: Comprou orderbump no checkout"
              rows={3}
            />
          </div>

<Button onClick={handleAdd} disabled={saving} className="w-full md:w-auto">
            {saving ? "Salvando..." : "Adicionar Orderbump"}
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Orderbumps Ativos ({orderbumps.length})
          </CardTitle>
        </CardHeader>
        <CardContent>
          {orderbumps.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">Nenhum orderbump cadastrado</div>
          ) : (
            <div className="space-y-4">
              {orderbumps.map((orderbump) => (
                <div key={orderbump.id} className="flex items-center justify-between border rounded-lg p-4">
                  <div className="flex-1">
                    <div className="font-medium">{orderbump.user.name}</div>
                    <div className="text-sm text-muted-foreground">{orderbump.user.email}</div>
                    <div className="text-sm font-medium text-primary mt-1">{orderbump.course.title}</div>
                    {orderbump.notes && (
                      <div className="text-xs text-muted-foreground mt-1">📝 {orderbump.notes}</div>
                    )}
                    <div className="text-xs text-muted-foreground mt-1">
                      Adicionado em {new Date(orderbump.created_at).toLocaleDateString("pt-BR")}
                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleRemove(orderbump.user_id, orderbump.course_id)}
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/rich-text-editor.tsx"
"use client"

import type React from "react"

import { useState, useRef, useCallback, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Bold, Italic, Link, List, ListOrdered, Undo, Redo, FileText, Loader2, Archive, Palette } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface RichTextEditorProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
}

export function RichTextEditor({ value, onChange, placeholder }: RichTextEditorProps) {
  const editorRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const zipInputRef = useRef<HTMLInputElement>(null)
  const [linkUrl, setLinkUrl] = useState("")
  const [showLinkPopover, setShowLinkPopover] = useState(false)
  const [showColorPopover, setShowColorPopover] = useState(false)
  const [uploading, setUploading] = useState(false)
  const [uploadingZip, setUploadingZip] = useState(false)
  const initializedRef = useRef(false)
  const savedSelectionRef = useRef<Range | null>(null)

useEffect(() => {
    if (editorRef.current && !initializedRef.current && value) {
      editorRef.current.innerHTML = value
      initializedRef.current = true
    }
  }, [value])

useEffect(() => {
    if (editorRef.current && !initializedRef.current) {
      editorRef.current.innerHTML = value || ""
      initializedRef.current = true
    }
  }, [])

const execCommand = useCallback(
    (command: string, value?: string) => {
      document.execCommand(command, false, value)
      if (editorRef.current) {
        onChange(editorRef.current.innerHTML)
      }
      editorRef.current?.focus()
    },
    [onChange],
  )

const handleBold = () => execCommand("bold")
  const handleItalic = () => execCommand("italic")
  const handleUnorderedList = () => execCommand("insertUnorderedList")
  const handleOrderedList = () => execCommand("insertOrderedList")
  const handleUndo = () => execCommand("undo")
  const handleRedo = () => execCommand("redo")

const handleLinkPopoverOpen = (open: boolean) => {
    if (open) {
      const selection = window.getSelection()
      if (selection && selection.rangeCount > 0) {
        savedSelectionRef.current = selection.getRangeAt(0).cloneRange()
      }
    }
    setShowLinkPopover(open)
  }

const handleLink = () => {
    if (linkUrl && savedSelectionRef.current) {
      const selection = window.getSelection()
      if (selection) {
        selection.removeAllRanges()
        selection.addRange(savedSelectionRef.current)
      }

const selectedText = savedSelectionRef.current.toString()
      if (selectedText) {
        document.execCommand("delete", false)
        const linkHtml = `<a href="${linkUrl}" target="_blank" rel="noopener noreferrer" class="text-primary underline">${selectedText}</a>`
        document.execCommand("insertHTML", false, linkHtml)
      } else {
        const linkHtml = `<a href="${linkUrl}" target="_blank" rel="noopener noreferrer" class="text-primary underline">${linkUrl}</a>`
        document.execCommand("insertHTML", false, linkHtml)
      }

if (editorRef.current) {
        onChange(editorRef.current.innerHTML)
      }

setLinkUrl("")
      setShowLinkPopover(false)
      savedSelectionRef.current = null
      editorRef.current?.focus()
    }
  }

const handleInput = () => {
    if (editorRef.current) {
      onChange(editorRef.current.innerHTML)
    }
  }

const handlePdfUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

if (file.type !== "application/pdf") {
      alert("Por favor, selecione um arquivo PDF")
      return
    }

setUploading(true)
    try {
      const formData = new FormData()
      formData.append("file", file)

const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Erro ao fazer upload")
      }

const data = await response.json()

const pdfHtml = `<a href="${data.url}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-3 py-2 bg-primary/10 text-primary rounded-md hover:bg-primary/20 transition-colors">📄 ${file.name}</a> `

editorRef.current?.focus()
      document.execCommand("insertHTML", false, pdfHtml)

if (editorRef.current) {
        onChange(editorRef.current.innerHTML)
      }
    } catch (error) {
      console.error("Erro no upload:", error)
      alert(error instanceof Error ? error.message : "Erro ao fazer upload do PDF")
    } finally {
      setUploading(false)
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
  }

const handleZipUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

const validTypes = ["application/zip", "application/x-zip-compressed", "application/x-zip"]
    if (!validTypes.includes(file.type) && !file.name.endsWith(".zip")) {
      alert("Por favor, selecione um arquivo ZIP")
      return
    }

setUploadingZip(true)
    try {
      const formData = new FormData()
      formData.append("file", file)

const response = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Erro ao fazer upload")
      }

const data = await response.json()

const zipHtml = `<a href="${data.url}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-3 py-2 bg-green-500/10 text-green-500 rounded-md hover:bg-green-500/20 transition-colors">📦 ${file.name}</a> `

editorRef.current?.focus()
      document.execCommand("insertHTML", false, zipHtml)

if (editorRef.current) {
        onChange(editorRef.current.innerHTML)
      }
    } catch (error) {
      console.error("Erro no upload:", error)
      alert(error instanceof Error ? error.message : "Erro ao fazer upload do ZIP")
    } finally {
      setUploadingZip(false)
      if (zipInputRef.current) {
        zipInputRef.current.value = ""
      }
    }
  }

const handleColorChange = (color: string) => {
    editorRef.current?.focus()
    document.execCommand("foreColor", false, color)
    if (editorRef.current) {
      onChange(editorRef.current.innerHTML)
    }
    setShowColorPopover(false)
  }

const colors = [
    { name: "Branco", value: "#FFFFFF" },
    { name: "Preto", value: "#000000" },
    { name: "Cinza", value: "#6B7280" },
    { name: "Vermelho", value: "#EF4444" },
    { name: "Laranja", value: "#F97316" },
    { name: "Amarelo", value: "#EAB308" },
    { name: "Verde", value: "#22C55E" },
    { name: "Azul", value: "#3B82F6" },
    { name: "Roxo", value: "#8B5CF6" },
    { name: "Rosa", value: "#EC4899" },
    { name: "Dourado", value: "#D4A03C" },
    { name: "Ciano", value: "#06B6D4" },
  ]

return (
    <div className="border border-border rounded-md overflow-hidden">
      <div className="flex items-center gap-1 p-2 border-b border-border bg-muted/50 flex-wrap">
        <Button type="button" variant="ghost" size="sm" onClick={handleBold} className="h-8 w-8 p-0" title="Negrito">
          <Bold className="h-4 w-4" />
        </Button>
        <Button type="button" variant="ghost" size="sm" onClick={handleItalic} className="h-8 w-8 p-0" title="Itálico">
          <Italic className="h-4 w-4" />
        </Button>

<Popover open={showColorPopover} onOpenChange={setShowColorPopover}>
          <PopoverTrigger asChild>
            <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" title="Cor do Texto">
              <Palette className="h-4 w-4" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-48 p-2">
            <div className="grid grid-cols-4 gap-1">
              {colors.map((color) => (
                <button
                  key={color.value}
                  type="button"
                  className="w-8 h-8 rounded border border-border hover:scale-110 transition-transform"
                  style={{ backgroundColor: color.value }}
                  onClick={() => handleColorChange(color.value)}
                  title={color.name}
                />
              ))}
            </div>
          </PopoverContent>
        </Popover>

<Popover open={showLinkPopover} onOpenChange={handleLinkPopoverOpen}>
          <PopoverTrigger asChild>
            <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" title="Inserir Link">
              <Link className="h-4 w-4" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-80 p-3">
            <div className="space-y-2">
              <p className="text-sm text-muted-foreground">Selecione o texto primeiro, depois cole a URL:</p>
              <Input
                placeholder="https://exemplo.com"
                value={linkUrl}
                onChange={(e) => setLinkUrl(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && handleLink()}
              />
              <Button size="sm" onClick={handleLink} className="w-full">
                Inserir Link
              </Button>
            </div>
          </PopoverContent>
        </Popover>

<Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-8 w-8 p-0"
          title="Inserir PDF"
          onClick={() => fileInputRef.current?.click()}
          disabled={uploading}
        >
          {uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileText className="h-4 w-4" />}
        </Button>
        <input
          ref={fileInputRef}
          type="file"
          accept=".pdf,application/pdf"
          className="hidden"
          onChange={handlePdfUpload}
        />

<Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-8 w-8 p-0"
          title="Inserir ZIP"
          onClick={() => zipInputRef.current?.click()}
          disabled={uploadingZip}
        >
          {uploadingZip ? <Loader2 className="h-4 w-4 animate-spin" /> : <Archive className="h-4 w-4" />}
        </Button>
        <input
          ref={zipInputRef}
          type="file"
          accept=".zip,application/zip,application/x-zip-compressed"
          className="hidden"
          onChange={handleZipUpload}
        />

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { TrendingUp, Save, RefreshCw } from "lucide-react"

export function TotalSalesSettings() {
  const [totalSales, setTotalSales] = useState<number>(0)
  const [isLoading, setIsLoading] = useState(false)
  const [isSaving, setIsSaving] = useState(false)

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

const loadTotalSales = async () => {
    setIsLoading(true)
    try {
      const res = await fetch("/api/settings/total-sales")
      const data = await res.json()
      setTotalSales(data.totalSales)
    } catch (error) {
      console.error("Error loading total sales:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSave = async () => {
    setIsSaving(true)
    try {
      const res = await fetch("/api/settings/total-sales", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ totalSales }),
      })

if (res.ok) {
        alert("Total de vendas atualizado com sucesso!")
      }
    } catch (error) {
      console.error("Error saving total sales:", error)
      alert("Erro ao salvar. Tente novamente.")
    } finally {
      setIsSaving(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          <TrendingUp className="h-5 w-5 text-blue-600" />
          <CardTitle>Vendas Totais do Ranking</CardTitle>
        </div>
        <CardDescription>Defina manualmente o número total de vendas que aparece no ranking</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-end gap-4">
          <div className="flex-1">
            <label htmlFor="totalSales" className="block text-sm font-medium mb-2">
              Total de Vendas
            </label>
            <Input
              id="totalSales"
              type="number"
              value={totalSales}
              onChange={(e) => setTotalSales(Number.parseInt(e.target.value) || 0)}
              disabled={isLoading}
              className="text-lg"
              min="0"
            />
          </div>
          <Button onClick={handleSave} disabled={isSaving} className="bg-blue-600 hover:bg-blue-700">
            {isSaving ? (
              <>
                <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                Salvando...
              </>
            ) : (
              <>
                <Save className="mr-2 h-4 w-4" />
                Salvar
              </>
            )}
          </Button>
        </div>
        <p className="text-sm text-muted-foreground mt-3">
          Este valor será exibido no banner do ranking e na página de ranking
        </p>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/admin/user-orderbumps.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/hooks/use-toast"
import { Plus, Trash2, BookOpen, Loader2 } from "lucide-react"
import { getUserOrderbumps, addOrderbump as addOrderbumpAction, removeOrderbump as removeOrderbumpAction } from "@/app/actions/orderbumps"

interface Course {
  id: string
  title: string
}

interface UserOrderbump {
  id: string
  course_id: string
  notes: string
  created_at: string
  course: Course
}

interface UserOrderbumpsProps {
  userId: string
}

export function UserOrderbumps({ userId }: UserOrderbumpsProps) {
  const [loading, setLoading] = useState(true)
  const [courses, setCourses] = useState<Course[]>([])
  const [userOrderbumps, setUserOrderbumps] = useState<UserOrderbump[]>([])
  const [selectedCourse, setSelectedCourse] = useState("")
  const [notes, setNotes] = useState("")
  const [saving, setSaving] = useState(false)

useEffect(() => {
    loadData()
  }, [userId])

async function loadData() {
    try {
      const result = await getUserOrderbumps(userId)
      
      console.log("[v0] UserOrderbumps - Dados recebidos:", result)
      
      if (result.success) {
        setCourses(result.courses || [])
        setUserOrderbumps(result.userOrderbumps || [])
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao carregar orderbumps",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("[v0] Erro ao carregar orderbumps:", error)
      toast({
        title: "Erro",
        description: "Erro ao carregar orderbumps do usuário",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

async function addOrderbump() {
    if (!selectedCourse) {
      toast({
        title: "Atenção",
        description: "Selecione um curso para liberar",
        variant: "destructive",
      })
      return
    }

setSaving(true)
    try {
      const result = await addOrderbumpAction(userId, selectedCourse, notes)

if (result.success) {
        toast({
          title: "Sucesso",
          description: "Orderbump liberado com sucesso!",
        })
        setSelectedCourse("")
        setNotes("")
        loadData()
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao adicionar orderbump",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("[v0] Erro ao adicionar orderbump:", error)
      toast({
        title: "Erro",
        description: "Erro ao adicionar orderbump",
        variant: "destructive",
      })
    } finally {
      setSaving(false)
    }
  }

async function removeOrderbump(courseId: string) {
    try {
      const result = await removeOrderbumpAction(userId, courseId)

if (result.success) {
        toast({
          title: "Sucesso",
          description: "Orderbump removido com sucesso!",
        })
        loadData()
      } else {
        toast({
          title: "Erro",
          description: result.error || "Erro ao remover orderbump",
          variant: "destructive",
        })
      }
    } catch (error) {
      console.error("[v0] Erro ao remover orderbump:", error)
      toast({
        title: "Erro",
        description: "Erro ao remover orderbump",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

const availableCourses = courses.filter(
    (course) => !userOrderbumps.some((ob) => ob.course_id === course.id),
  )

return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <BookOpen className="h-4 w-4" />
        <span>Orderbumps Liberados: {userOrderbumps.length}</span>
      </div>

{/* Lista de Orderbumps Ativos */}
      {userOrderbumps.length > 0 && (
        <div className="space-y-2">
          <Label className="text-xs text-muted-foreground">Cursos com Acesso:</Label>
          <div className="space-y-2">
            {userOrderbumps.map((ob) => (
              <div key={ob.id} className="flex items-center justify-between rounded-lg border p-3">
                <div className="flex-1">
                  <p className="font-medium text-sm">{ob.course?.title || "Curso"}</p>
                  {ob.notes && <p className="text-xs text-muted-foreground mt-1">{ob.notes}</p>}
                  <p className="text-xs text-muted-foreground mt-1">
                    Liberado em: {new Date(ob.created_at).toLocaleDateString()}
                  </p>
                </div>
                <Button
                  size="sm"
                  variant="ghost"
                  className="text-red-500 hover:text-red-600 hover:bg-red-500/10"
                  onClick={() => removeOrderbump(ob.course_id)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}

{/* Formulário para Adicionar Novo Orderbump */}
      {availableCourses.length > 0 ? (
        <div className="space-y-3 rounded-lg border-2 border-dashed border-primary/30 bg-primary/5 p-4">
          <Label className="text-sm font-medium">Liberar Novo Orderbump</Label>
          
          <div className="space-y-2">
            <Label htmlFor="course-select" className="text-xs">
              Selecionar Curso ({availableCourses.length} disponíveis)
            </Label>
            <Select value={selectedCourse} onValueChange={setSelectedCourse}>
              <SelectTrigger id="course-select">
                <SelectValue placeholder="Escolha um curso orderbump" />
              </SelectTrigger>
              <SelectContent>
                {availableCourses.map((course) => (
                  <SelectItem key={course.id} value={course.id}>
                    {course.title}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="notes" className="text-xs">
              Anotações (opcional)
            </Label>
            <Textarea
              id="notes"
              placeholder="Ex: Comprou orderbump no checkout em 20/01/2025"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              className="text-sm h-20"
            />
          </div>

<Button onClick={addOrderbump} disabled={!selectedCourse || saving} className="w-full" size="sm">
            {saving ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <>
                <Plus className="mr-2 h-4 w-4" />
                Liberar Curso
              </>
            )}
          </Button>
        </div>
      ) : (
        <div className="rounded-lg border-2 border-dashed p-6 text-center">
          <p className="text-sm text-muted-foreground">
            {courses.length === 0
              ? "Nenhum curso marcado como orderbump. Crie cursos orderbumps na aba Cursos."
              : "Todos os orderbumps disponíveis já foram liberados para este usuário."}
          </p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/announcements-banner.tsx"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Megaphone, Gift, Sparkles, AlertTriangle, X, Bell } from "lucide-react"
import { createBrowserClient } from "@supabase/ssr"
import { Badge } from "@/components/ui/badge"

const supabase = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
)

type Announcement = {
  id: string
  text: string
  type: "info" | "promo" | "update" | "alert"
  active: boolean
  created_at: string
}

const typeConfig = {
  info: {
    icon: Megaphone,
    label: "Informação",
    badgeClass: "border-blue-500/40 bg-blue-500/10 text-blue-400",
    barClass: "bg-blue-500",
    glowClass: "shadow-blue-500/10",
  },
  promo: {
    icon: Gift,
    label: "Promoção",
    badgeClass: "border-emerald-500/40 bg-emerald-500/10 text-emerald-400",
    barClass: "bg-emerald-500",
    glowClass: "shadow-emerald-500/10",
  },
  update: {
    icon: Sparkles,
    label: "Novidade",
    badgeClass: "border-amber-500/40 bg-amber-500/10 text-amber-400",
    barClass: "bg-amber-500",
    glowClass: "shadow-amber-500/10",
  },
  alert: {
    icon: AlertTriangle,
    label: "Alerta",
    badgeClass: "border-red-500/40 bg-red-500/10 text-red-400",
    barClass: "bg-red-500",
    glowClass: "shadow-red-500/10",
  },
}

const STORAGE_KEY = "afilia360_announcements_dismissed"

async function fetchFromSupabase() {
  const { data } = await supabase
    .from("announcements")
    .select("*")
    .eq("active", true)
    .order("created_at", { ascending: false })
  return data ?? []
}

export function AnnouncementsBanner() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([])
  const [dismissed, setDismissed] = useState(false)
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    fetchFromSupabase().then((data) => {
      setAnnouncements(data)
      const stored = sessionStorage.getItem(STORAGE_KEY)
      if (stored) {
        const lastDismissed = new Date(stored)
        const hasNew = data.some((a: Announcement) => new Date(a.created_at) > lastDismissed)
        if (!hasNew) setDismissed(true)
      }
    })
  }, [])

const handleDismiss = () => {
    sessionStorage.setItem(STORAGE_KEY, new Date().toISOString())
    setDismissed(true)
  }

if (!mounted || announcements.length === 0 || dismissed) return null

return (
    <div className="premium-surface rounded-none border-x-0 border-t-0 border-b border-border/60 shadow-[var(--shadow-lux-sm)]">
      <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6">
        {/* Cabeçalho */}
        <div className="mb-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/15 ring-1 ring-primary/30">
              <Bell className="h-3 w-3 text-primary" />
            </div>
            <span className="premium-title-section text-xs uppercase text-primary">
              Novidades
            </span>
            <span className="flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
              {announcements.length}
            </span>
          </div>
          <div className="flex items-center gap-2">
            <Link
              href="/avisos"
              className="rounded px-2 py-0.5 text-xs text-primary transition-colors hover:text-primary/80"
            >
              Ver blog de avisos
            </Link>
            <button
              onClick={handleDismiss}
              className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
              aria-label="Dispensar"
            >
              <X className="h-3 w-3" />
              Fechar
            </button>
          </div>
        </div>

{/* Grid de avisos */}
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
          {announcements.map((announcement) => {
            const config = typeConfig[announcement.type]
            const Icon = config.icon
            return (
              <div
                key={announcement.id}
                className={`relative flex items-start gap-3 overflow-hidden rounded-[var(--radius-premium)] border border-border bg-[image:var(--gradient-surface-premium)] px-4 py-3 shadow-[var(--shadow-lux-sm)] ${config.glowClass}`}
              >
                <div className={`absolute inset-y-0 left-0 w-0.5 rounded-full ${config.barClass}`} />
                <div className={`brand-highlight absolute inset-x-0 top-0 h-[2px] opacity-60`} />
                <div className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${config.badgeClass}`}>
                  <Icon className="h-3.5 w-3.5" />
                </div>
                <div className="min-w-0 flex-1">
                  <Badge
                    variant="outline"
                    className={`mb-1.5 px-1.5 py-0 text-[10px] font-medium ${config.badgeClass}`}
                  >
                    {config.label}
                  </Badge>
                  <p className="text-xs leading-relaxed text-foreground/90">{announcement.text}</p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export function useAnnouncements() {
  const [count, setCount] = useState(0)
  const [announcements, setAnnouncements] = useState<Announcement[]>([])
  const [hasNew, setHasNew] = useState(false)

useEffect(() => {
    fetchFromSupabase().then((data) => {
      setAnnouncements(data)
      setCount(data.length)
      const stored = sessionStorage.getItem(STORAGE_KEY)
      if (!stored) {
        setHasNew(data.length > 0)
      } else {
        const lastDismissed = new Date(stored)
        setHasNew(data.some((a: Announcement) => new Date(a.created_at) > lastDismissed))
      }
    })
  }, [])

return { count, announcements, hasNew }
}
[V0_FILE]typescriptreact:file="components/announcements-ticker.tsx"
"use client"

import { useEffect, useState } from "react"
import { Megaphone, Gift, Sparkles, AlertTriangle } from "lucide-react"
import { createBrowserClient } from "@supabase/ssr"

const supabase = createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)

type Announcement = {
  id: string
  text: string
  type: "info" | "promo" | "update" | "alert"
  active: boolean
}

const typeConfig = {
  info: { icon: Megaphone, color: "text-blue-400" },
  promo: { icon: Gift, color: "text-emerald-400" },
  update: { icon: Sparkles, color: "text-amber-400" },
  alert: { icon: AlertTriangle, color: "text-red-400" },
}

export function AnnouncementsTicker() {
  const [announcements, setAnnouncements] = useState<Announcement[]>([])
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    fetchAnnouncements()
  }, [])

const fetchAnnouncements = async () => {
    const { data, error } = await supabase
      .from("announcements")
      .select("*")
      .eq("active", true)
      .order("created_at", { ascending: false })

if (!error && data) {
      setAnnouncements(data)
    }
  }

if (!mounted) return null

if (announcements.length === 0) return null

return (
    <div className="relative overflow-hidden border-b border-border bg-card/50 backdrop-blur-sm">
      <div className="flex items-center">
        {/* Label fixo */}
        <div className="z-10 flex shrink-0 items-center gap-2 border-r border-border bg-primary px-4 py-2">
          <Megaphone className="h-4 w-4 text-primary-foreground" />
          <span className="text-xs font-semibold uppercase tracking-wider text-primary-foreground">Avisos</span>
        </div>

<div className="relative flex-1 overflow-hidden py-2">
          <div
            className="flex gap-12 whitespace-nowrap"
            style={{
              animation: "ticker 30s linear infinite",
            }}
          >
            {/* Duplicar para criar loop infinito */}
            {[...announcements, ...announcements, ...announcements].map((announcement, index) => {
              const config = typeConfig[announcement.type]
              const Icon = config.icon
              return (
                <div key={`${announcement.id}-${index}`} className="flex shrink-0 items-center gap-2">
                  <Icon className={`h-4 w-4 ${config.color}`} />
                  <span className="text-sm text-foreground">{announcement.text}</span>
                  <span className="text-muted-foreground">•</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>

import type React from "react"

import { useEffect, useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import { getSession } from "@/lib/auth"
import { Loader2 } from "lucide-react"

const publicRoutes = ["/login", "/cadastro", "/admin", "/aula-gratuita", "/sobre", "/enviar-produto", "/avisos"]

export function AuthGuard({ children }: { children: React.ReactNode }) {
  const [isChecking, setIsChecking] = useState(true)
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const router = useRouter()
  const pathname = usePathname()

useEffect(() => {
    const session = getSession()
    const isPublicRoute = publicRoutes.some((route) => pathname.startsWith(route))

if (!session?.loggedIn && !isPublicRoute) {
      router.push("/login")
    } else if (session?.loggedIn && (pathname === "/login" || pathname === "/cadastro")) {
      router.push("/")
    } else {
      setIsAuthenticated(true)
    }

setIsChecking(false)
  }, [pathname, router])

if (isChecking) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="flex flex-col items-center gap-4">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
          <p className="text-muted-foreground">Verificando acesso...</p>
        </div>
      </div>
    )
  }

const isPublicRoute = publicRoutes.some((route) => pathname.startsWith(route))
  if (!isAuthenticated && !isPublicRoute) {
    return null
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="components/courses/course-card.tsx"
"use client"

import type React from "react"

import Image from "next/image"
import Link from "next/link"
import { Play, Lock } from "lucide-react"
import { cn } from "@/lib/utils"
import type { Course } from "@/lib/courses-api"

interface CourseCardProps {
  course: Course
  hasAccess?: boolean
  progress?: number
  onLockedClick?: () => void
}

export function CourseCard({ course, hasAccess = true, progress = 0, onLockedClick }: CourseCardProps) {
  const handleClick = (e: React.MouseEvent) => {
    if (!hasAccess) {
      e.preventDefault()
      onLockedClick?.()
    }
  }

return (
    <Link
      href={hasAccess ? `/cursos/${course.slug}` : "#"}
      onClick={handleClick}
      className={cn(
        "group relative block aspect-[3/4] w-[60vw] max-w-[200px] md:w-[180px] flex-shrink-0 overflow-hidden rounded-lg transition-all duration-300",
        hasAccess ? "cursor-pointer hover:scale-105 hover:z-10" : "cursor-not-allowed opacity-70",
      )}
    >
      {/* Cover Image */}
      <div className="absolute inset-0">
        {course.cover_image ? (
          <Image
            src={course.cover_image || "/placeholder.svg"}
            alt={course.title}
            fill
            className="object-contain bg-black/20"
            sizes="(max-width: 768px) 60vw, 180px"
          />
        ) : (
          <div className="h-full w-full bg-gradient-to-br from-primary/20 to-accent/20" />
        )}
      </div>

{/* Lock Overlay with more vibrant red gradient */}
      {!hasAccess && (
        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-red-950/80 to-black/80">
          <div className="rounded-full bg-red-600/30 p-4 backdrop-blur-sm border-2 border-red-500/50">
            <Lock className="h-7 w-7 text-red-400" />
          </div>
        </div>
      )}

{/* Progress Bar with more vibrant color */}
      {hasAccess && progress > 0 && (
        <div className="absolute bottom-0 left-0 right-0 h-1.5 bg-muted/50">
          <div
            className="h-full bg-gradient-to-r from-green-500 to-emerald-500 transition-all shadow-lg shadow-green-500/50"
            style={{ width: `${progress}%` }}
          />
        </div>
      )}

{/* Play Button with more vibrant color */}
      {hasAccess && (
        <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100">
          <div className="rounded-full bg-gradient-to-br from-red-600 to-red-700 p-4 shadow-xl shadow-red-600/50">
            <Play className="h-6 w-6 fill-white text-white" />
          </div>
        </div>
      )}
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/courses/course-carousel.tsx"
"use client"

import { useRef } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { CourseCard } from "./course-card"
import type { Course, CourseCategory, MemberPlan } from "@/lib/courses-api"

interface CourseCarouselProps {
  category: CourseCategory
  courses: Course[]
  userPlan?: MemberPlan | null
  onLockedCourse?: (courseTitle: string) => void
}

export function CourseCarousel({ category, courses, userPlan, onLockedCourse }: CourseCarouselProps) {
  const scrollRef = useRef<HTMLDivElement>(null)

const scroll = (direction: "left" | "right") => {
    if (scrollRef.current) {
      const scrollAmount = 400
      scrollRef.current.scrollBy({
        left: direction === "left" ? -scrollAmount : scrollAmount,
        behavior: "smooth",
      })
    }
  }

if (courses.length === 0) return null

return (
    <section className="relative group">
      {/* Header */}
      <div className="mb-4 flex items-center justify-between px-4 md:px-8">
        <div>
          <h2 className="text-xl font-bold text-foreground">{category.name}</h2>
          {category.description && <p className="text-sm text-muted-foreground">{category.description}</p>}
        </div>
      </div>

{/* Carousel Container */}
      <div className="relative">
        {/* Left Arrow */}
        <Button
          variant="ghost"
          size="icon"
          className="absolute left-0 top-1/2 z-10 hidden h-full w-12 -translate-y-1/2 rounded-none bg-gradient-to-r from-background to-transparent opacity-0 transition-opacity group-hover:opacity-100 md:flex"
          onClick={() => scroll("left")}
        >
          <ChevronLeft className="h-8 w-8" />
        </Button>

{/* Scrollable Area */}
        <div
          ref={scrollRef}
          className="flex gap-3 overflow-x-auto px-4 pb-4 scrollbar-hide md:px-8"
          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
        >
          {courses.map((course) => (
            <CourseCard
              key={course.id}
              course={course}
              hasAccess={true}
              onLockedClick={() => onLockedCourse?.(course.title)}
            />
          ))}
        </div>

{/* Right Arrow */}
        <Button
          variant="ghost"
          size="icon"
          className="absolute right-0 top-1/2 z-10 hidden h-full w-12 -translate-y-1/2 rounded-none bg-gradient-to-l from-background to-transparent opacity-0 transition-opacity group-hover:opacity-100 md:flex"
          onClick={() => scroll("right")}
        >
          <ChevronRight className="h-8 w-8" />
        </Button>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/courses/courses-header.tsx"
"use client"

import Link from "next/link"
import { Crown, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { MemberPlan } from "@/lib/courses-api"

interface CoursesHeaderProps {
  userPlan?: MemberPlan | null
}

export function CoursesHeader({ userPlan }: CoursesHeaderProps) {
  const isVip = userPlan?.slug === "super-vip"

if (!userPlan) {
    return null
  }

return (
    <div className="border-b border-border bg-card">
      <div className="mx-auto max-w-7xl px-4 py-4 md:px-8">
        <div className="flex items-center justify-end gap-3">
          {/* Plan Badge */}
          <div className="flex items-center gap-3">
            <div
              className={`flex items-center gap-2 rounded-full px-4 py-2 ${
                isVip
                  ? "bg-gradient-to-r from-amber-500/20 to-yellow-500/20 text-amber-400"
                  : "bg-primary/10 text-primary"
              }`}
            >
              {isVip ? <Crown className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
              <span className="font-semibold">{userPlan.name}</span>
            </div>

{!isVip && (
              <Link href="#upgrade">
                <Button
                  variant="outline"
                  size="sm"
                  className="gap-2 border-amber-500/50 text-amber-400 hover:bg-amber-500/10 bg-transparent"
                >
                  <Crown className="h-4 w-4" />
                  Upgrade VIP
                </Button>
              </Link>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/courses/intro-video-modal.tsx"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { GraduationCap, Play, Rocket, BookOpen, Trophy, Users } from "lucide-react"
import { createClient } from "@/lib/supabase/client"

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

export function IntroVideoModal({ open, onOpenChange, onComplete }: IntroVideoModalProps) {
  const [showVideo, setShowVideo] = useState(false)
  const [videoUrl, setVideoUrl] = useState("https://www.youtube-nocookie.com/embed/Q1qxV19v5nE")

if (data?.value) {
        setVideoUrl(data.value)
      }
    }
    loadConfig()
  }, [])

const handleStartVideo = () => {
    setShowVideo(true)
  }

const handleComplete = () => {
    localStorage.setItem("afilia360_intro_seen", "true")
    onComplete()
    onOpenChange(false)
  }

const handleSkip = () => {
    localStorage.setItem("afilia360_intro_seen", "true")
    onComplete()
    onOpenChange(false)
  }

// Converte URL do YouTube para embed
  const getEmbedUrl = (url: string) => {
    if (url.includes("youtube.com/watch")) {
      const videoId = url.split("v=")[1]?.split("&")[0]
      return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&modestbranding=1&rel=0`
    }
    if (url.includes("youtu.be/")) {
      const videoId = url.split("youtu.be/")[1]?.split("?")[0]
      return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&modestbranding=1&rel=0`
    }
    if (url.includes("youtube-nocookie.com/embed") || url.includes("youtube.com/embed")) {
      return url.includes("?") ? url + "&autoplay=1" : url + "?autoplay=1&modestbranding=1&rel=0"
    }
    return url
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-xl text-white">
            <GraduationCap className="h-6 w-6 text-primary" />
            Bem-vindo à Área de Cursos!
          </DialogTitle>
        </DialogHeader>

<div className="mt-4">
          {!showVideo ? (
            <div className="text-center py-4">
              {/* Ícone principal */}
              <div className="mb-6">
                <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 border-2 border-primary/30 mb-4">
                  <Rocket className="h-10 w-10 text-primary" />
                </div>
                <h3 className="text-lg font-semibold mb-2 text-white">Antes de começar...</h3>
                <p className="text-gray-400 max-w-md mx-auto">
                  Assista este vídeo rápido de introdução para entender como aproveitar ao máximo nossos cursos e
                  trilhas de aprendizado.
                </p>
              </div>

{/* Benefícios */}
              <div className="grid grid-cols-3 gap-4 mb-6 px-4">
                <div className="flex flex-col items-center gap-2 p-3 rounded-lg bg-zinc-800/50 border border-zinc-700">
                  <BookOpen className="h-6 w-6 text-blue-400" />
                  <span className="text-xs text-gray-300 text-center">Cursos Exclusivos</span>
                </div>
                <div className="flex flex-col items-center gap-2 p-3 rounded-lg bg-zinc-800/50 border border-zinc-700">
                  <Trophy className="h-6 w-6 text-yellow-400" />
                  <span className="text-xs text-gray-300 text-center">Certificados</span>
                </div>
                <div className="flex flex-col items-center gap-2 p-3 rounded-lg bg-zinc-800/50 border border-zinc-700">
                  <Users className="h-6 w-6 text-emerald-400" />
                  <span className="text-xs text-gray-300 text-center">Comunidade</span>
                </div>
              </div>

<div className="space-y-3">
                <Button size="lg" onClick={handleStartVideo} className="gap-2 bg-primary hover:bg-primary/90">
                  <Play className="h-5 w-5" />
                  Assistir Introdução
                </Button>
                <div>
                  <Button variant="ghost" size="sm" onClick={handleSkip} className="text-gray-500 hover:text-gray-300">
                    Pular por agora
                  </Button>
                </div>
              </div>
            </div>
          ) : (
            <div>
              <div className="aspect-video bg-black rounded-lg overflow-hidden mb-4">
                <iframe
                  src={getEmbedUrl(videoUrl)}
                  className="w-full h-full"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
              <div className="flex justify-between items-center">
                <p className="text-sm text-gray-400">Você pode assistir novamente na página de configurações.</p>
                <Button onClick={handleComplete} className="gap-2 bg-emerald-600 hover:bg-emerald-700">
                  Entendi, vamos começar!
                </Button>
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/courses/lesson-content.tsx"
"use client"

import { FileText, Download, ExternalLink, FileImage, FileArchive, File, LinkIcon } from "lucide-react"

interface Attachment {
  name: string
  url: string
  type: string
}

interface LessonContentProps {
  content?: string
  contentHtml?: string
  attachments?: Attachment[]
}

export function LessonContent({ content, contentHtml, attachments = [] }: LessonContentProps) {
  const links = attachments.filter((a) => a.type === "link")
  const files = attachments.filter((a) => a.type !== "link")

if (!content && !contentHtml && attachments.length === 0) {
    return null
  }

const getFileIcon = (type: string) => {
    if (type.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />
    if (type.includes("image")) return <FileImage className="h-5 w-5 text-blue-500" />
    if (type.includes("zip") || type.includes("rar")) return <FileArchive className="h-5 w-5 text-yellow-500" />
    return <File className="h-5 w-5 text-gray-500" />
  }

return (
    <div className="rounded-xl border border-border bg-card p-6 space-y-6">
      {/* Texto da Aula / Resumo */}
      {(content || contentHtml) && (
        <div className="space-y-3">
          <h3 className="text-lg font-semibold flex items-center gap-2">
            <FileText className="h-5 w-5 text-primary" />
            Resumo da Aula
          </h3>
          {contentHtml ? (
            <div
              className="prose prose-invert max-w-none text-foreground/90 leading-relaxed"
              dangerouslySetInnerHTML={{ __html: contentHtml }}
            />
          ) : (
            <p className="text-foreground/90 leading-relaxed whitespace-pre-wrap">{content}</p>
          )}
        </div>
      )}

{links.length > 0 && (
        <div className="space-y-3">
          <h3 className="text-lg font-semibold flex items-center gap-2">
            <LinkIcon className="h-5 w-5 text-blue-500" />
            Links Importantes
          </h3>
          <div className="grid gap-3 sm:grid-cols-2">
            {links.map((link, index) => (
              <a
                key={index}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 p-4 rounded-lg border border-blue-500/30 bg-blue-500/10 hover:bg-blue-500/20 transition-all group"
              >
                <LinkIcon className="h-5 w-5 text-blue-500" />
                <div className="flex-1 min-w-0">
                  <p className="font-medium truncate group-hover:text-blue-400 transition-colors">{link.name}</p>
                  <p className="text-xs text-muted-foreground truncate">{link.url}</p>
                </div>
                <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-blue-400 transition-colors" />
              </a>
            ))}
          </div>
        </div>
      )}

{/* Materiais para Download */}
      {files.length > 0 && (
        <div className="space-y-3">
          <h3 className="text-lg font-semibold flex items-center gap-2">
            <Download className="h-5 w-5 text-green-500" />
            Materiais de Apoio
          </h3>
          <div className="grid gap-3 sm:grid-cols-2">
            {files.map((attachment, index) => (
              <a
                key={index}
                href={attachment.url}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 p-4 rounded-lg border border-border bg-secondary/30 hover:bg-secondary/50 transition-all group"
              >
                {getFileIcon(attachment.type)}
                <div className="flex-1 min-w-0">
                  <p className="font-medium truncate group-hover:text-primary transition-colors">{attachment.name}</p>
                  <p className="text-xs text-muted-foreground uppercase">{attachment.type.split("/").pop()}</p>
                </div>
                <ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/courses/lesson-list.tsx"
"use client"

import { Play, CheckCircle2, Lock, Clock, FileText } from "lucide-react"
import { cn } from "@/lib/utils"
import type { CourseLesson, UserLessonProgress } from "@/lib/courses-api"

interface LessonListProps {
  lessons: CourseLesson[]
  currentLessonId?: string
  progress?: UserLessonProgress[]
  hasAccess?: boolean
  onSelectLesson: (lesson: CourseLesson) => void
}

export function LessonList({
  lessons,
  currentLessonId,
  progress = [],
  hasAccess = true,
  onSelectLesson,
}: LessonListProps) {
  const getLessonProgress = (lessonId: string) => {
    return progress.find((p) => p.lesson_id === lessonId)
  }

const formatDuration = (minutes: number) => {
    if (minutes < 60) return `${minutes}min`
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return mins > 0 ? `${hours}h ${mins}min` : `${hours}h`
  }

return (
    <div className="rounded-xl border border-border bg-card">
      <div className="border-b border-border p-4 bg-gradient-to-r from-card to-card/50">
        <h3 className="font-semibold text-foreground">Conteúdo do Curso</h3>
        <p className="text-sm text-muted-foreground">{lessons.length} aulas</p>
      </div>

<div className="divide-y divide-border">
        {lessons.map((lesson, index) => {
          const lessonProgress = getLessonProgress(lesson.id)
          const isCompleted = lessonProgress?.completed
          const isCurrent = lesson.id === currentLessonId
          const canAccess = hasAccess || lesson.is_free

return (
            <button
              key={lesson.id}
              onClick={() => canAccess && onSelectLesson(lesson)}
              disabled={!canAccess}
              className={cn(
                "flex w-full items-start gap-3 p-4 text-left transition-colors",
                isCurrent && "bg-primary/10",
                canAccess && !isCurrent && "hover:bg-secondary/50",
                !canAccess && "cursor-not-allowed opacity-50",
              )}
            >
              {/* Number / Status Icon */}
              <div
                className={cn(
                  "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-sm font-medium",
                  isCompleted
                    ? "bg-green-500/20 text-green-500 border border-green-500/30"
                    : isCurrent
                      ? "bg-gradient-to-br from-red-600 to-red-700 text-white shadow-md"
                      : !canAccess
                        ? "bg-red-500/10 text-red-500 border border-red-500/20"
                        : "bg-secondary text-muted-foreground",
                )}
              >
                {isCompleted ? (
                  <CheckCircle2 className="h-4 w-4" />
                ) : !canAccess ? (
                  <Lock className="h-4 w-4" />
                ) : isCurrent ? (
                  <Play className="h-4 w-4" />
                ) : (
                  index + 1
                )}
              </div>

{/* Content */}
              <div className="flex-1 min-w-0">
                <div className="flex items-start justify-between gap-2">
                  <h4
                    className={cn(
                      "text-sm font-medium line-clamp-2",
                      isCurrent && "text-primary font-semibold",
                      !canAccess && "text-muted-foreground",
                    )}
                  >
                    {lesson.title}
                  </h4>
                  {/* Badge "Grátis" */}
                  {lesson.is_free && !hasAccess && (
                    <span className="flex-shrink-0 rounded-full bg-green-500/20 px-2.5 py-1 text-xs font-bold text-green-500 border border-green-500/30">
                      Grátis
                    </span>
                  )}
                </div>

{/* Meta */}
                <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                  {lesson.duration_minutes > 0 && (
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3 text-blue-500" />
                      {formatDuration(lesson.duration_minutes)}
                    </span>
                  )}
                  {lesson.attachments && lesson.attachments.length > 0 && (
                    <span className="flex items-center gap-1">
                      <FileText className="h-3 w-3 text-purple-500" />
                      {lesson.attachments.length} anexo(s)
                    </span>
                  )}
                </div>

{/* Progress Bar */}
                {lessonProgress && !isCompleted && lessonProgress.progress_percent > 0 && (
                  <div className="mt-2 h-1.5 w-full rounded-full bg-secondary">
                    <div
                      className="h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all shadow-sm"
                      style={{ width: `${lessonProgress.progress_percent}%` }}
                    />
                  </div>
                )}
              </div>
            </button>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/courses/lesson-progress-button.tsx"
"use client"

import { useState } from "react"
import { CheckCircle2, Circle, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface LessonProgressButtonProps {
  isCompleted: boolean
  progressPercent?: number
  onMarkComplete: () => Promise<void>
  onMarkIncomplete?: () => Promise<void>
}

export function LessonProgressButton({
  isCompleted,
  progressPercent = 0,
  onMarkComplete,
  onMarkIncomplete,
}: LessonProgressButtonProps) {
  const [loading, setLoading] = useState(false)

const handleClick = async () => {
    setLoading(true)
    try {
      if (isCompleted && onMarkIncomplete) {
        await onMarkIncomplete()
      } else {
        await onMarkComplete()
      }
    } finally {
      setLoading(false)
    }
  }

return (
    <Button
      variant={isCompleted ? "outline" : "default"}
      onClick={handleClick}
      disabled={loading}
      className={cn(
        "gap-2 transition-all",
        isCompleted
          ? "border-green-500/50 text-green-500 hover:bg-green-500/10 hover:text-green-400"
          : "bg-green-600 hover:bg-green-700 text-white",
      )}
    >
      {loading ? (
        <Loader2 className="h-4 w-4 animate-spin" />
      ) : isCompleted ? (
        <CheckCircle2 className="h-4 w-4" />
      ) : (
        <Circle className="h-4 w-4" />
      )}
      {isCompleted ? "Aula Concluída" : "Marcar como Concluída"}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/courses/upgrade-modal.tsx"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Check, Crown, Lock, Zap } from "lucide-react"
import type { MemberPlan } from "@/lib/courses-api"

interface UpgradeModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  currentPlan?: MemberPlan | null
  lockedCourseTitle?: string
}

export function UpgradeModal({ open, onOpenChange, currentPlan, lockedCourseTitle }: UpgradeModalProps) {
  const [loading, setLoading] = useState(false)

const handleUpgrade = async () => {
    setLoading(true)
    window.open("https://pay.celetus.com/ZOXLWXI9", "_blank")
    setTimeout(() => {
      setLoading(false)
      onOpenChange(false)
    }, 500)
  }

const superVipFeatures = [
    "Acesso a TODOS os cursos",
    "TODOS os produtos validados",
    "Agentes IA exclusivos",
    "Imersões gravadas completas",
    "Mentoria Sala de Guerra",
    "Suporte prioritário",
    "Novos cursos adicionados mensalmente",
    "Comunidade exclusiva",
  ]

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 shadow-lg">
            <Crown className="h-10 w-10 text-white drop-shadow-md" />
          </div>
          <DialogTitle className="text-center text-2xl">
            {lockedCourseTitle ? `Desbloqueie "${lockedCourseTitle}"` : "Upgrade para Super VIP"}
          </DialogTitle>
          <DialogDescription className="text-center text-base">
            {currentPlan ? (
              <>
                Você está no plano <span className="font-semibold text-foreground">{currentPlan.name}</span>. Faça
                upgrade para acessar todos os cursos!
              </>
            ) : (
              "Escolha um plano para começar a aprender"
            )}
          </DialogDescription>
        </DialogHeader>

<div className="space-y-4">
          <div className="rounded-lg border-2 border-primary bg-gradient-to-br from-primary/10 via-primary/5 to-accent/10 p-6 shadow-lg">
            <div className="mb-4 flex items-center justify-between">
              <div>
                <div className="flex items-center gap-2">
                  <h3 className="text-2xl font-bold text-foreground">Super VIP</h3>
                  <Zap className="h-5 w-5 text-yellow-500" />
                </div>
                <p className="text-sm text-foreground/70 font-medium">Acesso completo ilimitado</p>
              </div>
              <div className="text-right">
                <div className="text-4xl font-bold text-primary">R$ 97</div>
                <div className="text-xs text-muted-foreground font-medium">por ano</div>
              </div>
            </div>

<ul className="mb-6 space-y-2.5">
              {superVipFeatures.map((feature, index) => (
                <li key={index} className="flex items-start gap-2 text-sm">
                  <Check className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                  <span className="text-foreground/90">{feature}</span>
                </li>
              ))}
            </ul>

<Button
              onClick={handleUpgrade}
              disabled={loading}
              className="w-full bg-red-600 hover:bg-red-700 text-white font-bold shadow-lg hover:shadow-xl transition-all hover:scale-105"
              size="lg"
            >
              {loading ? "Processando..." : "🔥 Fazer Upgrade Agora"}
            </Button>
          </div>

<p className="text-center text-sm text-foreground/70 flex items-center justify-center gap-2">
            <Lock className="h-4 w-4 text-green-500" />
            <span className="font-medium">Pagamento 100% seguro. Cancele quando quiser.</span>
          </p>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/courses/video-player.tsx"
"use client"

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

interface VideoPlayerProps {
  videoUrl: string
  videoType: "youtube" | "vimeo" | "panda" | "external"
  title: string
  onProgress?: (percent: number) => void
  onComplete?: () => void
}

export function VideoPlayer({ videoUrl, videoType, title, onProgress, onComplete }: VideoPlayerProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [showOverlay, setShowOverlay] = useState(true)
  const containerRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const container = containerRef.current
    if (!container) return

const handleContextMenu = (e: MouseEvent) => {
      e.preventDefault()
      return false
    }

const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey && (e.key === "s" || e.key === "u")) || e.key === "F12") {
        e.preventDefault()
        return false
      }
    }

container.addEventListener("contextmenu", handleContextMenu)
    document.addEventListener("keydown", handleKeyDown)

return () => {
      container.removeEventListener("contextmenu", handleContextMenu)
      document.removeEventListener("keydown", handleKeyDown)
    }
  }, [])

const getYouTubeId = (url: string) => {
    if (/^[a-zA-Z0-9_-]{11}$/.test(url)) {
      return url
    }
    const regex = /(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?/\s]{11})/
    const match = url.match(regex)
    return match ? match[1] : null
  }

const getVimeoId = (url: string) => {
    if (/^\d+$/.test(url)) {
      return url
    }
    const regex = /vimeo\.com\/(?:video\/)?(\d+)/
    const match = url.match(regex)
    return match ? match[1] : null
  }

const getPandaUrl = (url: string) => {
    if (url.includes("pandavideo.com") && url.includes("embed")) {
      return url
    }

if (url.includes("pandavideo.com")) {
      const playerMatch = url.match(/(player-vz-[a-z0-9-]+\.tv\.pandavideo\.com\.br)/)
      const videoIdMatch = url.match(/[?&]v=([^&]+)/)

if (playerMatch && videoIdMatch) {
        return `https://${playerMatch[1]}/embed/?v=${videoIdMatch[1]}`
      }

return url
    }

return `https://player-vz-7b5a8f1e-d88.tv.pandavideo.com.br/embed/?v=${url}`
  }

const handlePlay = () => {
    setIsPlaying(true)
    setShowOverlay(false)
  }

const renderEmbed = () => {
    if (videoType === "panda" || videoUrl.includes("pandavideo")) {
      const pandaUrl = getPandaUrl(videoUrl)

return (
        <iframe
          src={pandaUrl}
          title={title}
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowFullScreen={true}
          className="h-full w-full"
          style={{ border: "none", position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
        />
      )
    }

if (
      videoType === "youtube" ||
      videoUrl.includes("youtube") ||
      videoUrl.includes("youtu.be") ||
      /^[a-zA-Z0-9_-]{11}$/.test(videoUrl)
    ) {
      const videoId = getYouTubeId(videoUrl)
      if (!videoId) {
        return <div className="flex h-full items-center justify-center text-red-400">URL de vídeo inválida</div>
      }

const params = new URLSearchParams({
        rel: "0",
        modestbranding: "1",
        showinfo: "0",
        iv_load_policy: "3",
        disablekb: "0",
        fs: "1",
        playsinline: "1",
        autoplay: isPlaying ? "1" : "0",
      })

return (
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${videoId}?${params.toString()}`}
          title={title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowFullScreen={true}
          className="h-full w-full"
          style={{ border: "none", position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
        />
      )
    }

if (videoType === "vimeo" || videoUrl.includes("vimeo") || /^\d+$/.test(videoUrl)) {
      const videoId = getVimeoId(videoUrl)
      if (!videoId) {
        return <div className="flex h-full items-center justify-center text-red-400">URL de vídeo inválida</div>
      }

return (
        <iframe
          src={`https://player.vimeo.com/video/${videoId}?title=0&byline=0&portrait=0`}
          title={title}
          allow="autoplay; fullscreen; picture-in-picture"
          allowFullScreen={true}
          className="h-full w-full"
          style={{ border: "none", position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
        />
      )
    }

return (
      <video
        src={videoUrl}
        controls
        controlsList="nodownload"
        className="h-full w-full"
        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
        onTimeUpdate={(e) => {
          const video = e.target as HTMLVideoElement
          const percent = (video.currentTime / video.duration) * 100
          onProgress?.(percent)
        }}
        onEnded={() => onComplete?.()}
      />
    )
  }

return (
    <div
      ref={containerRef}
      className="relative overflow-hidden rounded-xl bg-black select-none"
      onContextMenu={(e) => e.preventDefault()}
    >
      <div className="aspect-video w-full relative">{renderEmbed()}</div>

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import {
  Search,
  Bell,
  Settings,
  UserPlus,
  LogOut,
  User,
  GraduationCap,
  Menu,
  Package,
  Trophy,
  HelpCircle,
  Megaphone,
  Gift,
  Sparkles,
  AlertTriangle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Badge } from "@/components/ui/badge"
import { getSession, logout, getAdminEmail, type AffiliateSession } from "@/lib/auth"
import { useAnnouncements } from "@/components/announcements-banner"

const typeConfig = {
  info: { icon: Megaphone, label: "Informação", badgeClass: "border-blue-500/40 bg-blue-500/10 text-blue-400", barClass: "bg-blue-500" },
  promo: { icon: Gift, label: "Promoção", badgeClass: "border-emerald-500/40 bg-emerald-500/10 text-emerald-400", barClass: "bg-emerald-500" },
  update: { icon: Sparkles, label: "Novidade", badgeClass: "border-amber-500/40 bg-amber-500/10 text-amber-400", barClass: "bg-amber-500" },
  alert: { icon: AlertTriangle, label: "Alerta", badgeClass: "border-red-500/40 bg-red-500/10 text-red-400", barClass: "bg-red-500" },
}

interface HeaderProps {
  searchQuery: string
  onSearchChange: (value: string) => void
}

export function Header({ searchQuery, onSearchChange }: HeaderProps) {
  const [session, setSession] = useState<AffiliateSession | null>(null)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { count, announcements, hasNew } = useAnnouncements()

useEffect(() => {
    setSession(getSession())
  }, [])

const isAdminUser = session?.email === getAdminEmail()

return (
    <header className="brand-surface sticky top-0 z-50 border-b border-border/70">
      <div className="flex h-16 items-center justify-between px-4 md:px-6">
        <div className="flex items-center gap-4 md:gap-8">
          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
            <SheetTrigger asChild className="md:hidden">
              <Button variant="ghost" size="icon">
                <Menu className="h-5 w-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 p-0">
              <div className="flex flex-col h-full">
                <div className="p-6 border-b border-border">
                  <Link href="/" className="flex items-center gap-2" onClick={() => setMobileMenuOpen(false)}>
                    <div className="brand-highlight flex h-8 w-8 items-center justify-center rounded-lg">
                      <span className="text-sm font-bold text-primary-foreground">A</span>
                    </div>
                    <span className="text-lg font-semibold tracking-tight">AFILIA360</span>
                  </Link>
                </div>
                <nav className="flex flex-col gap-1 p-4">
                  <Link href="/" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-foreground hover:bg-secondary transition-colors" onClick={() => setMobileMenuOpen(false)}>
                    <Package className="h-4 w-4" />
                    Marketplace
                  </Link>
                  <Link href="/cursos" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors" onClick={() => setMobileMenuOpen(false)}>
                    <GraduationCap className="h-4 w-4" />
                    Cursos
                  </Link>
                  <Link href="/ranking" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors" onClick={() => setMobileMenuOpen(false)}>
                    <Trophy className="h-4 w-4" />
                    Ranking
                  </Link>
                  <Link href="/novidades" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors" onClick={() => setMobileMenuOpen(false)}>
                    Novidades
                  </Link>
                  <a href="#" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors">
                    <HelpCircle className="h-4 w-4" />
                    Suporte
                  </a>
                  {isAdminUser && (
                    <Link href="/admin" className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors" onClick={() => setMobileMenuOpen(false)}>
                      <Settings className="h-4 w-4" />
                      Admin
                    </Link>
                  )}
                </nav>
              </div>
            </SheetContent>
          </Sheet>

<Link href="/" className="flex items-center gap-2">
            <div className="brand-highlight flex h-8 w-8 items-center justify-center rounded-lg">
              <span className="text-sm font-bold text-primary-foreground">A</span>
            </div>
            <span className="text-lg font-semibold tracking-tight">AFILIA360</span>
          </Link>

<nav className="hidden items-center gap-6 md:flex">
            <Link href="/" className="text-sm font-medium text-foreground">Marketplace</Link>
            <Link href="/cursos" className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
              <GraduationCap className="h-3.5 w-3.5" />
              Cursos
            </Link>
            <Link href="/ranking" className="text-sm text-muted-foreground transition-colors hover:text-foreground">Ranking</Link>
            <Link href="/novidades" className="text-sm text-muted-foreground transition-colors hover:text-foreground">
              Novidades
            </Link>
            <a href="#" className="text-sm text-muted-foreground transition-colors hover:text-foreground">Suporte</a>
            {isAdminUser && (
              <Link href="/admin" className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
                <Settings className="h-3.5 w-3.5" />
                Admin
              </Link>
            )}
          </nav>
        </div>

<div className="flex items-center gap-2 md:gap-4">
          <div className="relative hidden w-64 lg:block">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Buscar produtos..."
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              className="h-9 border-border bg-secondary pl-9 text-sm placeholder:text-muted-foreground"
            />
          </div>

{/* Sino com avisos */}
          {count > 0 ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="relative h-9 w-9 text-muted-foreground hover:text-foreground">
                  <Bell className="h-4 w-4" />
                  {hasNew && (
                    <span className="absolute right-1.5 top-1.5 flex h-2 w-2">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
                      <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
                    </span>
                  )}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-80 p-0">
                <div className="flex items-center justify-between border-b border-border px-4 py-3">
                  <div className="flex items-center gap-2">
                    <Bell className="h-4 w-4 text-primary" />
                    <span className="text-sm font-semibold">Novidades</span>
                  </div>
                  <Badge variant="outline" className="border-primary/30 bg-primary/10 text-primary text-[10px]">
                    {count} {count === 1 ? "aviso" : "avisos"}
                  </Badge>
                </div>
                <div className="max-h-72 overflow-y-auto py-1">
                  {announcements.map((a) => {
                    const cfg = typeConfig[a.type]
                    const Icon = cfg.icon
                    return (
                      <div key={a.id} className="relative flex items-start gap-3 px-4 py-3 hover:bg-muted/50 transition-colors">
                        <div className={`absolute inset-y-2 left-0 w-0.5 rounded-full ${cfg.barClass}`} />
                        <div className={`mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border ${cfg.badgeClass}`}>
                          <Icon className="h-3 w-3" />
                        </div>
                        <div>
                          <p className={`mb-0.5 text-[10px] font-semibold uppercase tracking-wide ${cfg.badgeClass.split(" ").find((c) => c.startsWith("text-"))}`}>
                            {cfg.label}
                          </p>
                          <p className="text-xs leading-relaxed text-foreground/90">{a.text}</p>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground">
              <Bell className="h-4 w-4" />
            </Button>
          )}

{session?.loggedIn ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" className="gap-2 bg-transparent">
                  <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-primary text-xs font-semibold text-primary-foreground">
                    {session.photoUrl ? (
                      <Image src={session.photoUrl || "/placeholder.svg"} alt={session.name} width={24} height={24} className="h-full w-full object-cover" />
                    ) : (
                      session.name.charAt(0).toUpperCase()
                    )}
                  </div>
                  <span className="hidden sm:inline">{session.name.split(" ")[0]}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <div className="px-2 py-1.5">
                  <p className="text-sm font-medium">{session.name}</p>
                  <p className="text-xs text-muted-foreground">{session.email}</p>
                  {isAdminUser && (
                    <span className="inline-block mt-1 text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">
                      Administrador
                    </span>
                  )}
                </div>
                <DropdownMenuSeparator />
                <Link href="/perfil">
                  <DropdownMenuItem className="gap-2 cursor-pointer">
                    <User className="h-4 w-4" />
                    Meu Perfil
                  </DropdownMenuItem>
                </Link>
                <Link href="/cursos">
                  <DropdownMenuItem className="gap-2 cursor-pointer">
                    <GraduationCap className="h-4 w-4" />
                    Meus Cursos
                  </DropdownMenuItem>
                </Link>
                {isAdminUser && (
                  <Link href="/admin">
                    <DropdownMenuItem className="gap-2 cursor-pointer">
                      <Settings className="h-4 w-4" />
                      Administração
                    </DropdownMenuItem>
                  </Link>
                )}
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={logout} className="gap-2 text-red-400 focus:text-red-400 cursor-pointer">
                  <LogOut className="h-4 w-4" />
                  Sair
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <div className="flex items-center gap-2">
              <Link href="/login">
                <Button variant="ghost" className="hidden sm:flex">Entrar</Button>
              </Link>
              <Link href="/cadastro">
                <Button className="gap-2">
                  <UserPlus className="h-4 w-4" />
                  <span className="hidden sm:inline">Cadastrar</span>
                </Button>
              </Link>
            </div>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/hostinger-banner.tsx"
"use client"

import { ExternalLink, Server, Copy, Check } from "lucide-react"
import { useState } from "react"

export function HostingerBanner() {
  const [copied, setCopied] = useState(false)

const handleCopyCoupon = () => {
    navigator.clipboard.writeText("TANNUS10")
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

return (
    <div className="rounded-xl border border-emerald-500/30 bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 p-5">
      <div className="mb-3 flex items-center gap-2">
        <Server className="h-5 w-5 text-emerald-400" />
        <span className="text-sm font-semibold text-emerald-400">Parceiro</span>
      </div>
      <h4 className="mb-2 font-semibold text-foreground">Hospedagem Hostinger</h4>
      <p className="mb-3 text-xs text-muted-foreground">
        Até 75% OFF + Domínio Grátis. A melhor hospedagem para suas landing pages e estruturas próprias.
      </p>

<div className="mb-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-3">
        <p className="text-xs text-muted-foreground mb-2">Use o cupom na hora de pagar:</p>
        <div className="flex items-center gap-2">
          <div className="flex-1 rounded-md bg-background/50 px-3 py-2 text-center">
            <span className="font-bold text-emerald-400 tracking-wider">TANNUS10</span>
          </div>
          <button
            onClick={handleCopyCoupon}
            className={`flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-medium transition-all ${
              copied ? "bg-emerald-500 text-white" : "bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30"
            }`}
          >
            {copied ? (
              <>
                <Check className="h-3.5 w-3.5" />
                Copiado!
              </>
            ) : (
              <>
                <Copy className="h-3.5 w-3.5" />
                Copiar
              </>
            )}
          </button>
        </div>
      </div>

<a
        href="https://hostinger.com.br/tannus10"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center justify-center gap-2 rounded-lg bg-emerald-500 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
      >
        Aproveitar Oferta
        <ExternalLink className="h-3.5 w-3.5" />
      </a>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/live-card.tsx"
"use client"

import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Radio, CalendarDays, ExternalLink, FileText, PlayCircle, ArrowUpRight } from "lucide-react"

export type Live = {
  id: string
  title: string
  description: string | null
  cover_image: string | null
  stream_url: string | null
  scheduled_at: string | null
  status: "upcoming" | "live" | "ended"
  materials: LiveMaterial[]
  created_at: string
}

export type LiveMaterial = {
  id: string
  name: string
  url: string
  type: "pdf" | "html" | "link"
}

const statusConfig = {
  upcoming: {
    label: "Em Breve",
    badgeClass: "border-amber-500/30 bg-amber-500/10 text-amber-400",
    dotClass: "bg-amber-500",
    pulse: false,
  },
  live: {
    label: "Ao Vivo",
    badgeClass: "border-red-500/30 bg-red-500/15 text-red-400",
    dotClass: "bg-red-500",
    pulse: true,
  },
  ended: {
    label: "Encerrada",
    badgeClass: "border-zinc-600/30 bg-zinc-700/20 text-zinc-500",
    dotClass: "bg-zinc-500",
    pulse: false,
  },
}

function formatDateTime(iso: string | null) {
  if (!iso) return null
  return new Date(iso).toLocaleString("pt-BR", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })
}

interface LiveCardProps {
  live: Live
  featured?: boolean
}

export function LiveCard({ live, featured = false }: LiveCardProps) {
  const cfg = statusConfig[live.status]

if (featured) {
    return (
      <article className="group relative overflow-hidden rounded-xl border border-border bg-card transition-all duration-200 hover:border-white/15 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-black/30">
        {/* Cover */}
        <div className="relative h-52 w-full overflow-hidden bg-secondary">
          {live.cover_image ? (
            <img
              src={live.cover_image}
              alt={live.title}
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
            />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-red-950 to-zinc-900 flex items-center justify-center">
              <Radio className="h-16 w-16 text-white/10" />
            </div>
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />

{/* Status badge */}
          <div className="absolute left-4 top-4">
            <Badge
              variant="outline"
              className={`gap-1.5 px-2.5 py-1 text-[11px] font-semibold ${cfg.badgeClass}`}
            >
              <span className="relative flex h-2 w-2">
                {cfg.pulse && (
                  <span className={`absolute inline-flex h-full w-full animate-ping rounded-full ${cfg.dotClass} opacity-75`} />
                )}
                <span className={`relative inline-flex h-2 w-2 rounded-full ${cfg.dotClass}`} />
              </span>
              {cfg.label}
            </Badge>
          </div>

{/* Title overlay */}
          <div className="absolute bottom-0 left-0 right-0 p-5">
            <h3 className="text-lg font-bold leading-snug text-white line-clamp-2 text-balance">
              {live.title}
            </h3>
            {live.scheduled_at && (
              <p className="mt-1 flex items-center gap-1.5 text-xs text-white/50">
                <CalendarDays className="h-3 w-3" />
                {formatDateTime(live.scheduled_at)}
              </p>
            )}
          </div>
        </div>

{/* Body */}
        <div className="p-5">
          {live.description && (
            <p className="mb-4 text-sm leading-relaxed text-muted-foreground line-clamp-2">
              {live.description}
            </p>
          )}
          <div className="flex flex-wrap items-center gap-2">
            {live.stream_url && live.status !== "upcoming" ? (
              <a href={live.stream_url} target="_blank" rel="noopener noreferrer" className="flex-1">
                <Button size="sm" className="w-full gap-2">
                  {live.status === "live" ? (
                    <>
                      <Radio className="h-3.5 w-3.5 animate-pulse" />
                      Assistir Agora
                    </>
                  ) : (
                    <>
                      <PlayCircle className="h-3.5 w-3.5" />
                      Ver Gravação
                    </>
                  )}
                </Button>
              </a>
            ) : live.status === "upcoming" ? (
              <Button variant="outline" size="sm" className="flex-1 gap-2" disabled>
                <CalendarDays className="h-3.5 w-3.5" />
                Em breve
              </Button>
            ) : null}

<Link href={`/novidades/live/${live.id}`}>
              <Button variant="outline" size="sm" className="gap-1.5 text-muted-foreground hover:text-foreground">
                {live.materials.length > 0 ? (
                  <>
                    <FileText className="h-3.5 w-3.5" />
                    {live.materials.length} {live.materials.length === 1 ? "material" : "materiais"}
                  </>
                ) : (
                  <>
                    <ExternalLink className="h-3.5 w-3.5" />
                    Detalhes
                  </>
                )}
              </Button>
            </Link>
          </div>
        </div>
      </article>
    )
  }

// Compact card
  return (
    <div className="group relative overflow-hidden rounded-lg border border-border bg-card/70 transition-all duration-150 hover:border-white/12 hover:bg-card">
      <div className="flex items-center gap-4 p-4">
        {/* Accent bar */}
        <div className={`absolute inset-y-0 left-0 w-[3px] rounded-r-full ${cfg.dotClass} opacity-40`} />

{/* Thumbnail */}
        <div className="relative ml-1.5 h-14 w-20 shrink-0 overflow-hidden rounded-lg bg-secondary">
          {live.cover_image ? (
            <img src={live.cover_image} alt={live.title} className="h-full w-full object-cover" />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-red-950 to-zinc-900 flex items-center justify-center">
              <Radio className="h-5 w-5 text-white/20" />
            </div>
          )}
        </div>

<div className="flex-1 min-w-0">
          <div className="mb-1 flex items-center gap-2">
            <Badge
              variant="outline"
              className={`gap-1 px-1.5 py-0 text-[10px] ${cfg.badgeClass}`}
            >
              {cfg.label}
            </Badge>
            {live.scheduled_at && (
              <span className="text-[10px] text-muted-foreground/60">{formatDateTime(live.scheduled_at)}</span>
            )}
          </div>
          <p className="text-sm font-medium text-foreground transition-colors group-hover:text-white line-clamp-1">
            {live.title}
          </p>
          {live.materials.length > 0 && (
            <p className="mt-0.5 text-xs text-muted-foreground/60">
              {live.materials.length} {live.materials.length === 1 ? "material" : "materiais"}
            </p>
          )}
        </div>

<Link href={`/novidades/live/${live.id}`} className="shrink-0" onClick={(e) => e.stopPropagation()}>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground/40 hover:text-muted-foreground">
            <ArrowUpRight className="h-4 w-4" />
          </Button>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/news-card.tsx"
"use client"

import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BookOpen, Palette, Megaphone, CalendarDays, PlayCircle, ArrowUpRight } from "lucide-react"

export type NewsPost = {
  id: string
  title: string
  description: string | null
  content: string | null
  cover_image: string | null
  category: "update" | "lesson" | "creative"
  tags: string[] | null
  published: boolean
  created_at: string
}

/** Retorna true se o conteúdo for HTML completo (aula/Netflix) */
export function isFullHtml(content: string | null): boolean {
  if (!content) return false
  const trimmed = content.trimStart().toLowerCase()
  return trimmed.startsWith("<!doctype") || trimmed.startsWith("<html")
}

const categoryConfig = {
  update: {
    label: "Atualização",
    icon: Megaphone,
    accentBg: "bg-blue-500/10",
    accentText: "text-blue-400",
    accentBorder: "border-blue-500/25",
    bar: "bg-blue-500",
    placeholder: "from-blue-950 to-zinc-900",
    hoverRing: "group-hover:ring-blue-500/30",
  },
  lesson: {
    label: "Nova Aula",
    icon: PlayCircle,
    accentBg: "bg-violet-500/10",
    accentText: "text-violet-400",
    accentBorder: "border-violet-500/25",
    bar: "bg-violet-500",
    placeholder: "from-violet-950 to-zinc-900",
    hoverRing: "group-hover:ring-violet-500/30",
  },
  creative: {
    label: "Criativos",
    icon: Palette,
    accentBg: "bg-amber-500/10",
    accentText: "text-amber-400",
    accentBorder: "border-amber-500/25",
    bar: "bg-amber-500",
    placeholder: "from-amber-950 to-zinc-900",
    hoverRing: "group-hover:ring-amber-500/30",
  },
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  })
}

interface NewsCardProps {
  post: NewsPost
  featured?: boolean
  /** Chamado quando o post tem HTML completo e deve abrir em modal */
  onOpenHtml?: (post: NewsPost) => void
}

export function NewsCard({ post, featured = false, onOpenHtml }: NewsCardProps) {
  const cfg = categoryConfig[post.category]
  const Icon = cfg.icon
  const isHtml = isFullHtml(post.content)
  const isLesson = post.category === "lesson"

function handleClick(e: React.MouseEvent) {
    if (isHtml && onOpenHtml) {
      e.preventDefault()
      onOpenHtml(post)
    }
  }

if (featured) {
    return (
      <Link href={`/novidades/${post.id}`} onClick={handleClick} className="group block">
        <article
          className={`relative overflow-hidden rounded-xl border border-border bg-card ring-1 ring-transparent transition-all duration-200 hover:border-white/15 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-black/30 ${cfg.hoverRing}`}
        >
          {/* Cover */}
          <div className="relative aspect-video w-full overflow-hidden bg-secondary">
            {post.cover_image ? (
              <img
                src={post.cover_image}
                alt={post.title}
                className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
              />
            ) : (
              <div className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${cfg.placeholder}`}>
                <Icon className="h-16 w-16 text-white/10" />
              </div>
            )}

{/* Overlay escuro on hover para lessons */}
            {isLesson && (
              <div className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-300 group-hover:bg-black/50">
                <div className="flex scale-75 flex-col items-center gap-2 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100">
                  <div className="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 ring-2 ring-white/40 backdrop-blur-sm">
                    <PlayCircle className="h-7 w-7 text-white" />
                  </div>
                  {isHtml ? (
                    <span className="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white backdrop-blur-sm">
                      Abrir Aula
                    </span>
                  ) : null}
                </div>
              </div>
            )}

{/* Left accent bar */}
            <div className={`absolute left-0 top-0 h-full w-[3px] ${cfg.bar}`} />

{/* Category badge */}
            <div className="absolute left-4 top-4 flex items-center gap-2">
              <Badge
                variant="outline"
                className={`gap-1.5 border px-2 py-0.5 text-[11px] font-semibold ${cfg.accentBorder} ${cfg.accentBg} ${cfg.accentText}`}
              >
                <Icon className="h-3 w-3" />
                {cfg.label}
              </Badge>
              {isHtml && (
                <Badge variant="outline" className="border-white/15 bg-black/40 px-2 py-0.5 text-[10px] font-semibold text-white/70 backdrop-blur-sm">
                  HTML
                </Badge>
              )}
            </div>
          </div>

{/* Body */}
          <div className="p-5">
            <h3 className="mb-1.5 line-clamp-2 text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-white text-balance">
              {post.title}
            </h3>
            {post.description && (
              <p className="mb-3 line-clamp-2 text-sm leading-relaxed text-muted-foreground">{post.description}</p>
            )}
            <div className="flex items-center justify-between">
              <span className="flex items-center gap-1.5 text-xs text-muted-foreground/70">
                <CalendarDays className="h-3 w-3" />
                {formatDate(post.created_at)}
              </span>
              <span className={`flex items-center gap-1 text-xs font-medium opacity-0 transition-opacity group-hover:opacity-100 ${cfg.accentText}`}>
                {isLesson && isHtml ? "Abrir Aula" : "Ler mais"} <ArrowUpRight className="h-3 w-3" />
              </span>
            </div>
            {post.tags && post.tags.length > 0 && (
              <div className="mt-3 flex flex-wrap gap-1">
                {post.tags.slice(0, 3).map((tag) => (
                  <span key={tag} className="rounded-full bg-secondary px-2 py-0.5 text-[10px] text-muted-foreground">
                    #{tag}
                  </span>
                ))}
              </div>
            )}
          </div>
        </article>
      </Link>
    )
  }

// Compact horizontal card
  return (
    <Link href={`/novidades/${post.id}`} onClick={handleClick} className="group block">
      <article className="relative flex items-center gap-4 overflow-hidden rounded-lg border border-border bg-card/70 p-4 transition-all duration-150 hover:border-white/12 hover:bg-card">
        {/* Accent bar */}
        <div className={`absolute inset-y-0 left-0 w-[3px] rounded-r-full opacity-60 ${cfg.bar}`} />

{/* Thumbnail */}
        <div className="relative ml-1.5 h-14 w-20 shrink-0 overflow-hidden rounded-lg bg-secondary">
          {post.cover_image ? (
            <img src={post.cover_image} alt={post.title} className="h-full w-full object-cover" />
          ) : (
            <div className={`flex h-full w-full items-center justify-center bg-gradient-to-br ${cfg.placeholder}`}>
              {isLesson ? (
                <PlayCircle className="h-5 w-5 text-white/30" />
              ) : (
                <Icon className="h-5 w-5 text-white/20" />
              )}
            </div>
          )}
        </div>

<div className="min-w-0 flex-1">
          <div className="mb-1 flex items-center gap-2">
            <span className={`text-[10px] font-semibold uppercase tracking-wide ${cfg.accentText}`}>
              {cfg.label}
            </span>
            <span className="text-[10px] text-muted-foreground/60">{formatDate(post.created_at)}</span>
            {isHtml && (
              <span className="rounded bg-secondary px-1 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-muted-foreground/50">
                HTML
              </span>
            )}
          </div>
          <p className="line-clamp-1 text-sm font-medium leading-snug text-foreground transition-colors group-hover:text-white">
            {post.title}
          </p>
          {post.description && (
            <p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">{post.description}</p>
          )}
        </div>

<ArrowUpRight className="h-4 w-4 shrink-0 text-muted-foreground/30 transition-all group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
      </article>
    </Link>
  )
}
[V0_FILE]typescriptreact:file="components/product-card.tsx"
"use client"

import {
  ExternalLink,
  Star,
  Sparkles,
  FolderOpen,
  ShoppingBag,
  Zap,
  Clock,
  Lightbulb,
  Flame,
  Crown,
  UserPlus,
  Link2,
  PlayCircle,
  Lock,
  Store,
} from "lucide-react"
import type { Product } from "@/lib/products-data"
import { cn } from "@/lib/utils"
import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface ProductCardProps {
  product: Product
}

export function ProductCard({ product }: ProductCardProps) {
  const isPerfectpay = product.tag === "perfectpay"
  const isComingSoon = product.comingSoon === true
  const isVipOnly = product.vipOnly === true
  const [strategyOpen, setStrategyOpen] = useState(false)
  const [affiliatePopupOpen, setAffiliatePopupOpen] = useState(false)

const renderBadge = () => {
    if (isComingSoon) return null

const badgeConfig = {
      bestseller: {
        bg: "bg-gradient-to-r from-amber-500 to-orange-500",
        text: "text-white",
        icon: Crown,
        label: "MAIS VENDIDO",
      },
      novo: {
        bg: "bg-gradient-to-r from-emerald-500 to-green-500",
        text: "text-white",
        icon: Sparkles,
        label: "NOVO",
      },
      trending: {
        bg: "bg-gradient-to-r from-rose-500 to-pink-500",
        text: "text-white",
        icon: Flame,
        label: "EM ALTA",
      },
    }

const config = badgeConfig[product.badge as keyof typeof badgeConfig]
    if (config) {
      const Icon = config.icon
      return (
        <div
          className={cn(
            "absolute -left-1 top-4 z-10 flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold shadow-lg",
            config.bg,
            config.text,
          )}
          style={{
            clipPath: "polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%)",
          }}
        >
          <Icon className="h-3.5 w-3.5" />
          <span>{config.label}</span>
        </div>
      )
    }

if (isPerfectpay) {
      return (
        <div
          className="absolute -left-1 top-4 z-10 flex items-center gap-1.5 bg-gradient-to-r from-purple-600 to-violet-500 px-3 py-1.5 text-xs font-bold text-white shadow-lg"
          style={{
            clipPath: "polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%)",
          }}
        >
          <Sparkles className="h-3.5 w-3.5" />
          <span>PERFECTPAY</span>
        </div>
      )
    }

return null
  }

if (isComingSoon) {
    return (
      <div className="group relative flex flex-col overflow-hidden rounded-xl border-2 border-dashed border-amber-500/50 bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900">
        {/* Badge EM BREVE piscante */}
        <div className="absolute -left-1 top-4 z-10">
          <div
            className="flex items-center gap-1.5 bg-gradient-to-r from-amber-500 to-orange-500 px-3 py-1.5 text-xs font-bold text-white shadow-lg animate-pulse"
            style={{
              clipPath: "polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%)",
            }}
          >
            <Clock className="h-3.5 w-3.5" />
            <span>EM BREVE</span>
          </div>
        </div>

{/* Área central com cadeado e mensagem */}
        <div
          className="relative w-full flex flex-col items-center justify-center gap-6 bg-gradient-to-br from-zinc-800/80 to-zinc-900/80 border-b border-amber-500/20"
          style={{ aspectRatio: "4/5" }}
        >
          {/* Cadeado animado */}
          <div className="relative">
            <div className="absolute inset-0 animate-ping rounded-full bg-amber-500/20" />
            <div className="relative rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/20 p-8 backdrop-blur-sm">
              <Lock className="h-20 w-20 text-amber-400" />
            </div>
          </div>

{/* Mensagem EM BREVE */}
          <div className="text-center px-6">
            <h3 className="text-3xl font-bold text-amber-400 mb-3 animate-pulse">EM BREVE</h3>
            <p className="text-sm text-amber-300/70 uppercase tracking-wider">Novo Produto Chegando</p>
          </div>
        </div>

{/* Conteúdo com apenas o NICHO */}
        <div className="flex flex-1 flex-col p-6 items-center justify-center text-center">
          <span className="mb-4 w-fit rounded-full bg-amber-500/20 border border-amber-500/40 px-4 py-2 text-sm font-semibold text-amber-400 uppercase tracking-wider">
            {product.nicho}
          </span>

<p className="text-xs text-amber-300/50 italic max-w-[200px]">
            Aguarde... algo incrível está por vir neste nicho!
          </p>
        </div>
      </div>
    )
  }

return (
    <>
      <div
        className={cn(
          "group relative flex flex-col overflow-hidden rounded-xl border border-border bg-card transition-all duration-300 hover:border-accent/50 hover:shadow-lg hover:shadow-accent/5",
          isComingSoon && "opacity-80 border-dashed border-yellow-500/50",
        )}
      >
        {renderBadge()}

{/* VIP badge ribbon */}
        {isVipOnly && (
          <div className="absolute right-0 top-0 z-10">
            <div
              className="relative flex items-center gap-1.5 bg-gradient-to-r from-amber-500 via-yellow-500 to-amber-600 px-4 py-1.5 pr-6 text-xs font-bold text-white shadow-xl"
              style={{
                clipPath: "polygon(0 0, 100% 0, 100% 100%, 8% 100%)",
              }}
            >
              <Crown className="h-3.5 w-3.5" />
              <span>EXCLUSIVO VIP</span>
            </div>
          </div>
        )}

{/* Image Container */}
        <div
          className="relative w-full overflow-hidden bg-secondary flex items-center justify-center"
          style={{ aspectRatio: "4/5" }}
        >
          {/* VIP diagonal ribbon overlay */}

{isComingSoon && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/60">
              <div className="flex flex-col items-center gap-2 text-center">
                <Clock className="h-10 w-10 text-yellow-400 animate-pulse" />
                <span className="text-xl font-bold text-yellow-400">EM BREVE</span>
                <span className="text-sm text-white/80">Aguarde novidades!</span>
              </div>
            </div>
          )}

{/* Badges de plataforma na capa */}
          {!isComingSoon && (product.affiliateUrl || product.hotmartUrl) && (
            <div className="absolute bottom-2 left-2 flex flex-wrap gap-1">
              {product.affiliateUrl && (
                <span className="flex items-center gap-1 rounded-full bg-black/70 backdrop-blur-sm border border-emerald-500/50 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
                  <Store className="h-2.5 w-2.5" />
                  Celetus
                </span>
              )}
              {product.hotmartUrl && (
                <span className="flex items-center gap-1 rounded-full bg-black/70 backdrop-blur-sm border border-red-500/50 px-2 py-0.5 text-[10px] font-semibold text-red-400">
                  <Store className="h-2.5 w-2.5" />
                  Hotmart
                </span>
              )}
            </div>
          )}

{/* Content */}
        <div className="flex flex-1 flex-col p-4">
          <span className="mb-2 w-fit rounded-md bg-secondary px-2 py-0.5 text-xs text-muted-foreground">
            {product.nicho}
          </span>

<h3 className="mb-3 line-clamp-2 text-base font-semibold leading-tight text-foreground">{product.title}</h3>

{product.metrics && !isComingSoon && (
            <div className="mb-3 rounded-lg border border-border bg-secondary/50 p-3">
              <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-accent">Live Metrics</div>
              <div className="grid grid-cols-3 gap-2 text-center">
                <div>
                  <div className="text-[10px] text-muted-foreground">CPC</div>
                  <div className="text-sm font-semibold text-foreground">{product.metrics.cpcMedio}</div>
                </div>
                <div className="border-x border-border">
                  <div className="text-[10px] text-muted-foreground">Checkout</div>
                  <div className="text-sm font-semibold text-foreground">{product.metrics.checkout}</div>
                </div>
                <div>
                  <div className="text-[10px] text-muted-foreground">CPA</div>
                  <div className="text-sm font-semibold text-amber-400">{product.metrics.cpaAlvo}</div>
                </div>
              </div>
            </div>
          )}

{product.estrategia && !isComingSoon && (
            <button
              onClick={() => setStrategyOpen(true)}
              className="mb-3 w-full rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-2.5 text-left transition-all hover:bg-emerald-500/20 hover:border-emerald-500/50"
            >
              <div className="flex items-center gap-2">
                <Lightbulb className="h-4 w-4 text-emerald-400" />
                <span className="text-xs font-medium text-emerald-400 uppercase tracking-wider">
                  Estratégia Recomendada
                </span>
              </div>
              <p className="mt-1 text-xs text-emerald-300/70 line-clamp-1">Clique para ver a estratégia completa</p>
            </button>
          )}

{(product.orderbumps !== undefined && product.orderbumps > 0) ||
          product.upsellStatus === "sim" ||
          product.upsellStatus === "em-breve" ? (
            <div className="mb-3 flex flex-wrap gap-2">
              {product.orderbumps !== undefined && product.orderbumps > 0 && (
                <span className="flex items-center gap-1 rounded-full bg-orange-500/10 px-2 py-1 text-xs text-orange-400">
                  <ShoppingBag className="h-3 w-3" />
                  {product.orderbumps} Orderbump{product.orderbumps > 1 ? "s" : ""}
                </span>
              )}
              {product.upsellStatus === "sim" && (
                <span className="flex items-center gap-1 rounded-full bg-pink-500/10 px-2 py-1 text-xs text-pink-400">
                  <Zap className="h-3 w-3" />
                  Upsell Ativo
                </span>
              )}
              {product.upsellStatus === "em-breve" && (
                <span className="flex items-center gap-1 rounded-full bg-blue-500/10 px-2 py-1 text-xs text-blue-400">
                  <Clock className="h-3 w-3" />
                  Upsell Em Breve
                </span>
              )}
            </div>
          ) : null}

{isPerfectpay && !product.metrics && !isComingSoon && (
            <div className="mb-3 rounded-lg border border-purple-500/30 bg-purple-500/5 p-3 text-center">
              <div className="text-xs text-purple-400">Métricas em coleta...</div>
              <div className="mt-1 text-[11px] text-muted-foreground">Nova oportunidade</div>
            </div>
          )}

{!isComingSoon && (
            <div className="mb-3 flex items-center gap-4 text-sm">
              {product.rating && (
                <div className="flex items-center gap-1">
                  <Star className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
                  <span className="font-medium text-foreground">{product.rating}</span>
                </div>
              )}
              {product.vendas && (
                <span className="text-muted-foreground">{product.vendas.toLocaleString("pt-BR")} vendas</span>
              )}
            </div>
          )}

{/* Price & Commission */}
          <div className="mt-auto flex items-end justify-between border-t border-border pt-4">
            <div>
              <span className="block text-xs text-muted-foreground">Ticket</span>
              <span className="text-lg font-bold text-foreground">{product.ticket}</span>
            </div>
            <div className="text-right">
              <span className="block text-xs text-muted-foreground">Comissão</span>
              <span className="text-lg font-bold text-emerald-400">{product.comissao}</span>
            </div>
          </div>

{isComingSoon ? (
            <div className="mt-4 flex items-center justify-center gap-2 rounded-lg bg-yellow-500/10 py-3 text-sm font-medium text-yellow-400">
              <Clock className="h-4 w-4" />
              Em breve disponível
            </div>
          ) : (
            <div className="mt-4">
              <button
                onClick={() => setAffiliatePopupOpen(true)}
                className={cn(
                  "flex w-full items-center justify-center gap-2 rounded-lg py-2.5 text-sm font-medium transition-all hover:opacity-90",
                  isPerfectpay ? "bg-purple-500 text-white" : "bg-primary text-primary-foreground",
                )}
              >
                Divulgar Agora
                <ExternalLink className="h-3.5 w-3.5" />
              </button>
            </div>
          )}
        </div>
      </div>

{/* Dialog da Estratégia */}
      <Dialog open={strategyOpen} onOpenChange={setStrategyOpen}>
        <DialogContent className="max-w-lg bg-zinc-900 border-zinc-700">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-white">
              <Lightbulb className="h-5 w-5 text-emerald-400" />
              Estratégia Recomendada
            </DialogTitle>
          </DialogHeader>
          <div className="mt-4">
            <div className="mb-4 flex items-center gap-3">
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.title}
                className="h-16 w-16 rounded-lg object-cover"
              />
              <div>
                <h4 className="font-semibold text-white">{product.title}</h4>
                <p className="text-sm text-gray-400">{product.nicho}</p>
              </div>
            </div>
            <div className="rounded-lg bg-zinc-800/50 p-4 border border-zinc-700">
              <p className="text-sm text-white whitespace-pre-wrap leading-relaxed">
                {product.estrategia || "Nenhuma estratégia definida."}
              </p>
            </div>
            <div className="mt-4 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
              <p className="text-xs text-emerald-400">
                Dica: Siga esta estratégia para maximizar suas conversões com este produto.
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<Dialog open={affiliatePopupOpen} onOpenChange={setAffiliatePopupOpen}>
        <DialogContent className="max-w-md bg-zinc-900 border-zinc-700">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-white">
              <UserPlus className="h-5 w-5 text-primary" />
              Afiliar-se a {product.title}
            </DialogTitle>
          </DialogHeader>

<div className="mt-4 space-y-3">
            {/* Opção 1: Criar conta */}
            <a
              href="https://dash.celetus.com/signup?inid=EZC8J2034G9"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 transition-all hover:bg-emerald-500/20 hover:border-emerald-500/50"
            >
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/20">
                <UserPlus className="h-5 w-5 text-emerald-400" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-white">Não tem conta na Celetus?</h4>
                <p className="text-sm text-gray-400">Crie sua conta gratuita aqui</p>
              </div>
              <ExternalLink className="h-4 w-4 text-emerald-400" />
            </a>

{/* Opção 2: Já tem conta Celetus - afiliar */}
            <a
              href={product.affiliateUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 rounded-lg border border-primary/30 bg-primary/10 p-4 transition-all hover:bg-primary/20 hover:border-primary/50"
            >
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/20">
                <Link2 className="h-5 w-5 text-primary" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-white">Já tem conta na Celetus?</h4>
                <p className="text-sm text-gray-400">Afiliar-se ao produto agora!</p>
              </div>
              <ExternalLink className="h-4 w-4 text-primary" />
            </a>

{/* Opção Hotmart - só aparece se tiver link */}
            {product.hotmartUrl && (
              <a
                href={product.hotmartUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-4 rounded-lg border border-red-500/30 bg-red-500/10 p-4 transition-all hover:bg-red-500/20 hover:border-red-500/50"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-500/20">
                  <Store className="h-5 w-5 text-red-400" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-white">Afiliar pela Hotmart</h4>
                  <p className="text-sm text-gray-400">Afiliar-se ao produto na Hotmart</p>
                </div>
                <ExternalLink className="h-4 w-4 text-red-400" />
              </a>
            )}

{/* Divisor */}
            <div className="relative py-2">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-zinc-700"></div>
              </div>
              <div className="relative flex justify-center">
                <span className="bg-zinc-900 px-3 text-xs text-gray-500">MATERIAIS</span>
              </div>
            </div>

{/* Opção 3: Drive criativos */}
            {product.driveUrl && (
              <a
                href={product.driveUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-4 rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 transition-all hover:bg-amber-500/20 hover:border-amber-500/50"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/20">
                  <FolderOpen className="h-5 w-5 text-amber-400" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-white">Drive de Criativos</h4>
                  <p className="text-sm text-gray-400">Acesse criativos e página de vendas</p>
                </div>
                <ExternalLink className="h-4 w-4 text-amber-400" />
              </a>
            )}

{/* Opção 4: Aula passo a passo */}
            <a
              href="/cursos/como-subir-campanha"
              className="flex items-center gap-4 rounded-lg border border-blue-500/30 bg-blue-500/10 p-4 transition-all hover:bg-blue-500/20 hover:border-blue-500/50"
            >
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20">
                <PlayCircle className="h-5 w-5 text-blue-400" />
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-white">Aula Passo a Passo</h4>
                <p className="text-sm text-gray-400">Aprenda a subir sua campanha</p>
              </div>
            </a>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/products-grid.tsx"
"use client"

import { useMemo, useEffect, useState } from "react"
import { ProductCard } from "./product-card"
import type { SortOption } from "@/app/page"
import type { Product } from "@/lib/products-data"
import { fetchProducts } from "@/lib/products-api"
import { ChevronDown, Loader2 } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

interface ProductsGridProps {
  selectedCategory: string
  searchQuery: string
  sortBy: SortOption
  onSortChange: (sort: SortOption) => void
}

const sortOptions: { value: SortOption; label: string }[] = [
  { value: "relevancia", label: "Relevância" },
  { value: "mais-vendidos", label: "Mais Vendidos" },
  { value: "mais-recentes", label: "Mais Recentes" },
  { value: "maior-comissao", label: "Maior Comissão" },
  { value: "melhor-avaliados", label: "Melhor Avaliados" },
]

export function ProductsGrid({ selectedCategory, searchQuery, sortBy, onSortChange }: ProductsGridProps) {
  const [products, setProducts] = useState<Product[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function loadProducts() {
      setLoading(true)
      const data = await fetchProducts()
      setProducts(data)
      setLoading(false)
    }
    loadProducts()
  }, [])

const filteredProducts = useMemo(() => {
    let result = products

const today = new Date().toISOString().split("T")[0]
    result = result.filter((p) => !p.releaseDate || p.releaseDate <= today)

// Filtrar por categoria
    if (selectedCategory !== "all") {
      result = result.filter(
        (p) => p.category === selectedCategory || p.nicho.toLowerCase() === selectedCategory.toLowerCase(),
      )
    }

// Filtrar por busca
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      result = result.filter((p) => p.title.toLowerCase().includes(query) || p.nicho.toLowerCase().includes(query))
    }

if (sortBy !== "relevancia") {
      result = [...result].sort((a, b) => {
        switch (sortBy) {
          case "mais-vendidos":
            return (b.vendas || 0) - (a.vendas || 0)
          case "mais-recentes":
            const aIsNew = a.tag === "new" || a.badge === "novo" ? 1 : 0
            const bIsNew = b.tag === "new" || b.badge === "novo" ? 1 : 0
            return bIsNew - aIsNew
          case "maior-comissao":
            const getMaxComissao = (comissao: string) => {
              const matches = comissao.match(/\d+/g)
              if (matches) {
                return Math.max(...matches.map(Number))
              }
              return 0
            }
            return getMaxComissao(b.comissao) - getMaxComissao(a.comissao)
          case "melhor-avaliados":
            return (b.rating || 0) - (a.rating || 0)
          default:
            return 0
        }
      })
    }
    return result
  }, [products, selectedCategory, searchQuery, sortBy])

const currentSortLabel = sortOptions.find((opt) => opt.value === sortBy)?.label || "Relevância"

if (loading) {
    return (
      <div className="flex flex-1 items-center justify-center py-16">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

return (
    <div className="flex-1">
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Produtos Validados</h1>
          <p className="mt-1 text-sm text-muted-foreground">Encontre os melhores produtos para promover</p>
        </div>

<div className="flex items-center gap-3">
          <span className="text-sm text-muted-foreground">Ordenar por:</span>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="min-w-[160px] justify-between bg-transparent">
                {currentSortLabel}
                <ChevronDown className="ml-2 h-4 w-4 opacity-50" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[160px]">
              {sortOptions.map((option) => (
                <DropdownMenuItem
                  key={option.value}
                  onClick={() => onSortChange(option.value)}
                  className={sortBy === option.value ? "bg-accent" : ""}
                >
                  {option.label}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

<span className="rounded-full bg-secondary px-3 py-1 text-sm text-muted-foreground">
            {filteredProducts.length} produtos
          </span>
        </div>
      </div>

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
        {filteredProducts.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>

{filteredProducts.length === 0 && (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <div className="mb-4 rounded-full bg-secondary p-4">
            <svg className="h-8 w-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </div>
          <h3 className="text-lg font-medium text-foreground">Nenhum produto encontrado</h3>
          <p className="mt-1 text-sm text-muted-foreground">Tente ajustar os filtros ou a busca</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ranking-section.tsx"
"use client"

import { useState, useEffect } from "react"
import { Trophy, Medal, Award } from "lucide-react"
import { createClient } from "@/lib/supabase/client"

interface RankingAffiliate {
  id: string
  name: string
  photo: string | null
  sales: number
}

export function RankingSection() {
  const [topAffiliates, setTopAffiliates] = useState<RankingAffiliate[]>([])
  const [loading, setLoading] = useState(true)

const formatName = (fullName: string) => {
    const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()

const parts = fullName
      .trim()
      .split(" ")
      .filter((p) => p.length > 0)
    if (parts.length === 0) return "Afiliado"
    if (parts.length === 1) return capitalize(parts[0])

const firstName = capitalize(parts[0])
    const lastName = capitalize(parts[parts.length - 1])
    return `${firstName} ${lastName}`
  }

useEffect(() => {
    async function fetchRanking() {
      try {
        const supabase = createClient()
        const now = new Date()
        const currentMonth = now.getMonth() + 1
        const currentYear = now.getFullYear()

// Buscar ranking do mês atual
        const { data: rankingData } = await supabase
          .from("affiliate_ranking")
          .select(`
            affiliate_id,
            sales_count,
            affiliates (
              id,
              name,
              photo
            )
          `)
          .eq("month", currentMonth)
          .eq("year", currentYear)
          .order("sales_count", { ascending: false })
          .limit(5)

if (rankingData && rankingData.length > 0) {
          const affiliates = rankingData.map((item: any) => ({
            id: item.affiliate_id,
            name: formatName(item.affiliates?.name || "Afiliado"),
            photo: item.affiliates?.photo || null,
            sales: item.sales_count || 0,
          }))
          setTopAffiliates(affiliates)
        }
      } catch (error) {
        console.error("Erro ao buscar ranking:", error)
      } finally {
        setLoading(false)
      }
    }

fetchRanking()
  }, [])

// Não mostrar se não há dados ou está carregando
  if (loading || topAffiliates.length === 0) return null

const now = new Date()
  const monthNames = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ]
  const currentMonth = monthNames[now.getMonth()]

return (
    <div className="rounded-xl border border-border bg-card p-5">
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Trophy className="h-5 w-5 text-amber-400" />
          <h3 className="font-semibold text-foreground">Top 5 Afiliados</h3>
        </div>
        <span className="text-xs text-muted-foreground">{currentMonth}</span>
      </div>

<div className="space-y-3">
        {topAffiliates.map((member, index) => {
          const position = index + 1
          return (
            <div
              key={member.id}
              className="flex items-center gap-3 rounded-lg border border-border bg-secondary/30 p-3"
            >
              <div className="relative">
                <img
                  src={member.photo || "/placeholder.svg?height=40&width=40&query=avatar"}
                  alt={member.name}
                  className="h-10 w-10 rounded-full object-cover"
                />
                <div className="absolute -bottom-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-background border border-border">
                  {position === 1 && <Trophy className="h-3 w-3 text-amber-400" />}
                  {position === 2 && <Medal className="h-3 w-3 text-gray-400" />}
                  {position === 3 && <Award className="h-3 w-3 text-amber-600" />}
                  {position > 3 && <span className="text-[10px] font-bold text-muted-foreground">{position}</span>}
                </div>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-foreground truncate">{formatName(member.name)}</p>
                <p className="text-xs text-muted-foreground">#{position} do mês</p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ranking/ranking-banner.tsx"
"use client"
import { Trophy, Medal, Crown, ChevronRight } from "lucide-react"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"
import { useEffect, useState } from "react"

interface RankingUser {
  id: string
  name: string
  photo_url: string | null
  position: number
  sales_count: number
}

export function RankingBanner() {
  const [topUsers, setTopUsers] = useState<RankingUser[]>([])
  const [totalSales, setTotalSales] = useState(0)
  const [month, setMonth] = useState(new Date().getMonth() + 1)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    async function fetchRanking() {
      const supabase = createClient()
      const now = new Date()
      const currentMonth = now.getMonth() + 1
      const year = now.getFullYear()

const startOfMonth = new Date(year, currentMonth - 1, 1).toISOString()
      const endOfMonth = new Date(year, currentMonth, 0, 23, 59, 59).toISOString()

const [rankingResult, monthlySalesResult] = await Promise.all([
        supabase
          .from("monthly_rankings")
          .select(`
            *,
            affiliates (id, name, photo_url)
          `)
          .eq("month", currentMonth)
          .eq("year", year)
          .order("sales_count", { ascending: false })
          .limit(5),
        supabase
          .from("monthly_total_sales")
          .select("total_sales")
          .eq("month", currentMonth)
          .eq("year", year)
          .maybeSingle(),
      ])

if (rankingResult.error || !rankingResult.data || rankingResult.data.length === 0) {
        setTopUsers([])
        setTotalSales(0)
        setMonth(currentMonth)
        setIsLoading(false)
        return
      }

const users = rankingResult.data.map((r: any, index: number) => ({
        id: r.affiliates?.id || r.affiliate_id,
        name: r.affiliates?.name || "Afiliado",
        photo_url: r.affiliates?.photo_url || null,
        position: index + 1,
        sales_count: r.sales_count || 0,
      }))

const totalManual = monthlySalesResult.data?.total_sales || 0

setTopUsers(users)
      setTotalSales(totalManual)
      setMonth(currentMonth)
      setIsLoading(false)
    }

fetchRanking()
  }, [])

const monthNames = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ]
  const monthName = monthNames[month - 1]

const getPositionIcon = (position: number) => {
    switch (position) {
      case 1:
        return <Crown className="h-4 w-4 text-yellow-400" />
      case 2:
        return <Medal className="h-4 w-4 text-gray-300" />
      case 3:
        return <Medal className="h-4 w-4 text-amber-600" />
      default:
        return null
    }
  }

const getPositionColor = (position: number) => {
    switch (position) {
      case 1:
        return "border-yellow-500/50 bg-yellow-500/10"
      case 2:
        return "border-gray-400/50 bg-gray-400/10"
      case 3:
        return "border-amber-600/50 bg-amber-600/10"
      default:
        return "border-border bg-secondary/30"
    }
  }

if (isLoading) return null
  if (topUsers.length === 0) return null

return (
    <div className="bg-gradient-to-r from-card via-card/95 to-card border-y border-border py-3 sm:py-4 overflow-hidden">
      <div className="max-w-7xl mx-auto px-3 sm:px-4">
        <div className="flex flex-col gap-3">
          {/* Header do ranking com total de vendas */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-1.5 sm:p-2 rounded-lg bg-gradient-to-br from-yellow-500/20 to-orange-500/20 border border-yellow-500/30">
                <Trophy className="h-4 w-4 sm:h-5 sm:w-5 text-yellow-500" />
              </div>
              <div>
                <p className="text-[10px] sm:text-xs text-muted-foreground uppercase tracking-wider">
                  Ranking de {monthName}
                </p>
                <p className="text-sm sm:text-base font-bold">
                  <span className="text-primary">{totalSales.toLocaleString("pt-BR")}</span>
                  <span className="text-muted-foreground font-normal text-xs ml-1">vendas no mês</span>
                </p>
              </div>
            </div>

<Link
              href="/ranking"
              className="flex items-center gap-1 px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary/10 hover:bg-primary/20 border border-primary/30 text-primary text-xs sm:text-sm font-medium transition-all"
            >
              <span className="hidden sm:inline">Ver Ranking</span>
              <span className="sm:hidden">Ver</span>
              <ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
            </Link>
          </div>

<div className="grid grid-cols-5 gap-2">
            {topUsers.slice(0, 5).map((user) => (
              <div
                key={user.id}
                className={`flex flex-col items-center gap-1 px-2 py-2 rounded-lg border ${getPositionColor(user.position)}`}
              >
                {/* Posição */}
                <div className="flex items-center gap-1">
                  {getPositionIcon(user.position)}
                  <span className="text-[10px] sm:text-xs font-bold">TOP {String(user.position).padStart(2, "0")}</span>
                </div>

{/* Avatar */}
                <div className="h-8 w-8 sm:h-10 sm:w-10 rounded-full overflow-hidden bg-secondary border-2 border-border">
                  {user.photo_url ? (
                    <img
                      src={user.photo_url || "/placeholder.svg"}
                      alt={user.name}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <div className="h-full w-full flex items-center justify-center text-xs font-bold">
                      {user.name.charAt(0)}
                    </div>
                  )}
                </div>

{/* Nome */}
                <p className="text-[9px] sm:text-xs font-medium truncate max-w-full text-center">
                  {user.name.split(" ")[0]}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/sidebar.tsx"
"use client"

import { cn } from "@/lib/utils"
import { categories } from "@/lib/products-data"
import { Search, Crown, Package, Trophy } from "lucide-react"
import { Input } from "@/components/ui/input"
import { RankingSection } from "@/components/ranking-section"
import { HostingerBanner } from "@/components/hostinger-banner"
import Link from "next/link"
import { useUserPlan } from "@/hooks/use-user-plan"

interface SidebarProps {
  selectedCategory: string
  onCategoryChange: (category: string) => void
  searchQuery: string
  onSearchChange: (value: string) => void
}

export function Sidebar({ selectedCategory, onCategoryChange, searchQuery, onSearchChange }: SidebarProps) {
  const { isVip } = useUserPlan()

return (
    <aside className="sticky top-20 hidden h-fit w-72 shrink-0 space-y-6 lg:block">
      {/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          type="text"
          placeholder="Buscar..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="h-10 border-border bg-card pl-9 text-sm placeholder:text-muted-foreground"
        />
      </div>

{!isVip && (
        <Link href="/seja-vip">
          <div className="rounded-xl border border-yellow-500/30 bg-gradient-to-br from-yellow-500/10 to-orange-500/5 p-4 hover:border-yellow-500/50 transition-all cursor-pointer group">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center">
                <Crown className="h-5 w-5 text-black" />
              </div>
              <div>
                <h4 className="font-semibold text-yellow-500 group-hover:text-yellow-400 transition-colors">
                  Ganhe +5% de Comissão
                </h4>
                <p className="text-xs text-muted-foreground">Torne-se VIP agora</p>
              </div>
            </div>
          </div>
        </Link>
      )}

{/* Categories */}
      <div className="rounded-xl border border-border bg-card p-4">
        <h3 className="mb-3 text-sm font-medium text-muted-foreground">Categorias</h3>
        <nav className="space-y-1">
          {categories.map((category) => (
            <button
              key={category.id}
              onClick={() => onCategoryChange(category.id)}
              className={cn(
                "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors",
                selectedCategory === category.id
                  ? "bg-primary/10 text-primary"
                  : "text-muted-foreground hover:bg-secondary hover:text-foreground",
              )}
            >
              <span>{category.label}</span>
              <span className="rounded-full bg-secondary px-2 py-0.5 text-xs">{category.count}</span>
            </button>
          ))}
        </nav>
      </div>

{/* Ranking */}
      <RankingSection />

<Link href="/ranking">
        <div className="rounded-xl border border-border bg-card p-4 hover:border-primary/50 transition-all cursor-pointer">
          <div className="flex items-center gap-3">
            <Trophy className="h-5 w-5 text-yellow-500" />
            <div>
              <h4 className="font-medium text-sm">Ver Ranking Completo</h4>
              <p className="text-xs text-muted-foreground">Confira sua posição</p>
            </div>
          </div>
        </div>
      </Link>

{/* Hostinger Banner */}
      <HostingerBanner />

<Link href="/enviar-produto">
        <div className="rounded-xl border border-border bg-card p-4 hover:border-green-500/50 transition-all cursor-pointer">
          <div className="flex items-center gap-3 mb-3">
            <div className="h-8 w-8 rounded-lg bg-green-500/20 flex items-center justify-center">
              <Package className="h-4 w-4 text-green-500" />
            </div>
            <h4 className="text-sm font-medium">Quer listar seu produto?</h4>
          </div>
          <p className="text-xs text-muted-foreground mb-3">
            Junte-se ao marketplace e alcance milhares de afiliados qualificados.
          </p>
          <div className="w-full rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white text-center hover:bg-green-700 transition-colors">
            Enviar Produto
          </div>
        </div>
      </Link>
    </aside>
  )
}
[V0_FILE]typescriptreact:file="components/site-header-shell.tsx"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"

export function SiteHeaderShell() {
  const [searchQuery, setSearchQuery] = useState("")

return <Header searchQuery={searchQuery} onSearchChange={setSearchQuery} />
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn('text-lg font-semibold', className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: 'outline' }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
'use client'

import * as React from 'react'
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from 'lucide-react'
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'

import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = 'label',
  buttonVariant = 'ghost',
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
  const defaultClassNames = getDefaultClassNames()

return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        'bg-background group/calendar p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className,
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString('default', { month: 'short' }),
        ...formatters,
      }}
      classNames={{
        root: cn('w-fit', defaultClassNames.root),
        months: cn(
          'flex gap-4 flex-col md:flex-row relative',
          defaultClassNames.months,
        ),
        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
        nav: cn(
          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
          defaultClassNames.nav,
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-8 aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_previous,
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          'size-8 aria-disabled:opacity-50 p-0 select-none',
          defaultClassNames.button_next,
        ),
        month_caption: cn(
          'flex items-center justify-center h-8 w-full px-8',
          defaultClassNames.month_caption,
        ),
        dropdowns: cn(
          'w-full flex items-center text-sm font-medium justify-center h-8 gap-1.5',
          defaultClassNames.dropdowns,
        ),
        dropdown_root: cn(
          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
          defaultClassNames.dropdown_root,
        ),
        dropdown: cn(
          'absolute bg-popover inset-0 opacity-0',
          defaultClassNames.dropdown,
        ),
        caption_label: cn(
          'select-none font-medium',
          captionLayout === 'label'
            ? 'text-sm'
            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
          defaultClassNames.caption_label,
        ),
        table: 'w-full border-collapse',
        weekdays: cn('flex', defaultClassNames.weekdays),
        weekday: cn(
          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
          defaultClassNames.weekday,
        ),
        week: cn('flex w-full mt-2', defaultClassNames.week),
        week_number_header: cn(
          'select-none w-8',
          defaultClassNames.week_number_header,
        ),
        week_number: cn(
          'text-[0.8rem] select-none text-muted-foreground',
          defaultClassNames.week_number,
        ),
        day: cn(
          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
          defaultClassNames.day,
        ),
        range_start: cn(
          'rounded-l-md bg-accent',
          defaultClassNames.range_start,
        ),
        range_middle: cn('rounded-none', defaultClassNames.range_middle),
        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
        today: cn(
          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
          defaultClassNames.today,
        ),
        outside: cn(
          'text-muted-foreground aria-selected:text-muted-foreground',
          defaultClassNames.outside,
        ),
        disabled: cn(
          'text-muted-foreground opacity-50',
          defaultClassNames.disabled,
        ),
        hidden: cn('invisible', defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === 'left') {
            return (
              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
            )
          }

if (orientation === 'right') {
            return (
              <ChevronRightIcon
                className={cn('size-4', className)}
                {...props}
              />
            )
          }

return (
            <ChevronDownIcon className={cn('size-4', className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-8 items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-8 flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
        defaultClassNames.day,
        className,
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

import { cn } from '@/lib/utils'

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = 'default',
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: 'sm' | 'default'
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = 'popper',
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          className,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        'flex cursor-default items-center justify-center py-1',
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
'use client'

import * as React from 'react'
import * as SheetPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = 'right',
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: 'top' | 'right' | 'bottom' | 'left'
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
          side === 'right' &&
            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-header"
      className={cn('flex flex-col gap-1.5 p-4', className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'

import { cn } from '@/lib/utils'

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  )

return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={
          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
        }
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={
            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
          }
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

import { cn } from '@/lib/utils'

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
        }
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
'use client'

import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn('text-sm font-semibold', className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn('text-sm opacity-90', className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
'use client'

// Inspired by react-hot-toast library
import * as React from 'react'

import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: 'ADD_TOAST',
  UPDATE_TOAST: 'UPDATE_TOAST',
  DISMISS_TOAST: 'DISMISS_TOAST',
  REMOVE_TOAST: 'REMOVE_TOAST',
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType['ADD_TOAST']
      toast: ToasterToast
    }
  | {
      type: ActionType['UPDATE_TOAST']
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType['DISMISS_TOAST']
      toastId?: ToasterToast['id']
    }
  | {
      type: ActionType['REMOVE_TOAST']
      toastId?: ToasterToast['id']
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: 'REMOVE_TOAST',
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'ADD_TOAST':
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case 'UPDATE_TOAST':
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t,
        ),
      }

case 'DISMISS_TOAST': {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case 'REMOVE_TOAST':
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: 'UPDATE_TOAST',
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
    type: 'ADD_TOAST',
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="hooks/use-user-plan.ts"
"use client"

import { useEffect, useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { getUser } from "@/lib/auth"
import type { MemberPlan } from "@/lib/courses-api"

const BASIC_PLAN_ID = "80f64075-29b4-4fec-b824-1826bf5cc8fa"

interface UserPlan {
  plan: MemberPlan | null
  loading: boolean
  hasAccess: (courseId: string) => Promise<boolean>
  isExpired: boolean
  isVip: boolean
}

const accessCache: Record<string, boolean> = {}

export function useUserPlan(): UserPlan {
  const [plan, setPlan] = useState<MemberPlan | null>(null)
  const [loading, setLoading] = useState(true)
  const [planExpiresAt, setPlanExpiresAt] = useState<Date | null>(null)
  const [isVip, setIsVip] = useState(false)

useEffect(() => {
    async function loadUserPlan() {
      const user = getUser()
      if (!user) {
        setLoading(false)
        return
      }

const supabase = createClient()

const { data: userData } = await supabase
        .from("affiliates")
        .select("plan_id, plan_expires_at, is_vip")
        .eq("id", user.id)
        .single()

if (userData?.is_vip) {
        setIsVip(true)
        setLoading(false)
        return
      }

const planIdToUse = userData?.plan_id || BASIC_PLAN_ID

// Buscar detalhes do plano
      const { data: planData } = await supabase.from("member_plans").select("*").eq("id", planIdToUse).single()

setPlan(planData)
      setPlanExpiresAt(userData?.plan_expires_at ? new Date(userData.plan_expires_at) : null)
      setLoading(false)
    }

loadUserPlan()
  }, [])

const hasAccess = async (courseId: string): Promise<boolean> => {
    if (isVip) {
      return true
    }

if (accessCache[courseId] !== undefined) {
      return accessCache[courseId]
    }

const user = getUser()
    if (!user) {
      return false
    }

const supabase = createClient()

// PRIMEIRO: Verificar se tem acesso individual via orderbump
    const { data: orderbumpAccess } = await supabase
      .from("user_course_access")
      .select("id")
      .eq("user_id", user.id)
      .eq("course_id", courseId)
      .maybeSingle()

if (orderbumpAccess) {
      console.log("[v0] Usuário tem acesso via orderbump ao curso:", courseId)
      accessCache[courseId] = true
      return true
    }

const planIdToCheck = plan?.id || BASIC_PLAN_ID

// Verificar se o plano expirou
    if (planExpiresAt && planExpiresAt < new Date()) {
      return false
    }

// SEGUNDO: Verificar se o plano tem acesso ao curso
    const { data: access } = await supabase
      .from("plan_course_access")
      .select("id")
      .eq("plan_id", planIdToCheck)
      .eq("course_id", courseId)
      .maybeSingle()

const hasAccess = !!access
    accessCache[courseId] = hasAccess
    return hasAccess
  }

const isExpired = planExpiresAt ? planExpiresAt < new Date() : false

return { plan, loading, hasAccess, isExpired, isVip }
}
[V0_FILE]typescript:file="lib/announcements-blog.ts"
import { createClient } from "@/lib/supabase/server"

export type NoticePost = {
  id: string
  slug: string
  title: string
  excerpt: string
  content: string
  category: "info" | "promo" | "update" | "alert"
  publishedAt: string
  coverImage: string | null
  externalUrl: string | null
}

function slugify(value: string) {
  return value
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)+/g, "")
}

function mapNoticePost(row: any): NoticePost {
  const title = row.title || row.text || "Aviso"
  const content = row.content || row.body || row.text || ""
  const excerpt = row.excerpt || row.summary || row.text || content.slice(0, 160)
  const publishedAt = row.published_at || row.created_at || new Date().toISOString()

return {
    id: String(row.id),
    slug: row.slug || `${slugify(title)}-${String(row.id).slice(0, 8)}`,
    title,
    excerpt,
    content,
    category: row.type || "info",
    publishedAt,
    coverImage: row.cover_url || row.image_url || null,
    externalUrl: row.link_url || row.cta_url || null,
  }
}

export async function fetchNoticePosts(limit = 50): Promise<NoticePost[]> {
  const supabase = await createClient()
  const { data, error } = await supabase
    .from("announcements")
    .select("*")
    .eq("active", true)
    .order("created_at", { ascending: false })
    .limit(limit)

if (error || !data) {
    return []
  }

return data.map(mapNoticePost)
}

export async function fetchNoticePostBySlug(slug: string): Promise<NoticePost | null> {
  const posts = await fetchNoticePosts(200)
  return posts.find((post) => post.slug === slug) ?? null
}
[V0_FILE]typescript:file="lib/auth.ts"
"use client"

const ADMIN_EMAIL = "rtmacedo2@hotmail.com"

export interface AffiliateSession {
  id: string
  name: string
  email: string
  loggedIn: boolean
  isAdmin: boolean
  photoUrl?: string
}

export function getSession(): AffiliateSession | null {
  if (typeof window === "undefined") return null

const session = localStorage.getItem("affiliate_session")
  if (!session) return null

try {
    return JSON.parse(session) as AffiliateSession
  } catch {
    return null
  }
}

export function getUser(): AffiliateSession | null {
  return getSession()
}

export function setUser(user: AffiliateSession) {
  if (typeof window === "undefined") return
  localStorage.setItem("affiliate_session", JSON.stringify(user))
}

export function setSession(session: AffiliateSession) {
  setUser(session)
}

export function logout() {
  if (typeof window === "undefined") return
  localStorage.removeItem("affiliate_session")
  window.location.href = "/login"
}

export function isLoggedIn(): boolean {
  const session = getSession()
  return session?.loggedIn === true
}

export function isAdmin(): boolean {
  const session = getSession()
  return session?.email === ADMIN_EMAIL
}

export function getAdminEmail(): string {
  return ADMIN_EMAIL
}
[V0_FILE]typescript:file="lib/courses-api.ts"
import { createClient } from "@/lib/supabase/client"

export interface Course {
  id: string
  title: string
  slug: string
  description: string | null
  cover_image: string | null
  category_id: string | null
  instructor: string | null
  duration_hours: number
  lessons_count: number
  is_published: boolean
  is_featured: boolean
  sort_order: number
  created_at: string
  category?: CourseCategory
}

export interface CourseCategory {
  id: string
  name: string
  slug: string
  description: string | null
  sort_order: number
  is_active: boolean
}

export interface CourseLesson {
  id: string
  course_id: string
  title: string
  description: string | null
  video_url: string | null
  video_type: string
  duration_minutes: number
  sort_order: number
  is_free: boolean
  is_published: boolean
  attachments: { name: string; url: string; type: string }[]
}

export interface MemberPlan {
  id: string
  name: string
  slug: string
  description: string | null
  price: number
  features: string[]
  is_active: boolean
  sort_order: number
}

export interface UserLessonProgress {
  id: string
  user_id: string
  lesson_id: string
  course_id: string
  completed: boolean
  progress_percent: number
  last_watched_at: string
  completed_at: string | null
}

// Buscar todas as categorias
export async function getCategories(): Promise<CourseCategory[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("course_categories")
    .select("*")
    .eq("is_active", true)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar categorias:", error)
    return []
  }
  return data || []
}

// Buscar cursos por categoria
export async function getCoursesByCategory(categorySlug?: string): Promise<Course[]> {
  const supabase = createClient()
  let query = supabase
    .from("courses")
    .select(`
      *,
      category:course_categories(*)
    `)
    .eq("is_published", true)
    .order("sort_order", { ascending: true })

if (categorySlug) {
    const { data: category, error: catError } = await supabase
      .from("course_categories")
      .select("id")
      .eq("slug", categorySlug)
      .maybeSingle()

if (catError) {
      console.error("Erro ao buscar categoria:", catError)
    } else if (category) {
      query = query.eq("category_id", category.id)
    }
  }

const { data, error } = await query

if (error) {
    console.error("Erro ao buscar cursos:", error)
    return []
  }
  return data || []
}

// Buscar cursos agrupados por categoria
export async function getCoursesGroupedByCategory(): Promise<{ category: CourseCategory; courses: Course[] }[]> {
  const categories = await getCategories()
  const supabase = createClient()

const { data: allCourses, error } = await supabase
    .from("courses")
    .select(`
      *,
      category:course_categories(*)
    `)
    .eq("is_published", true)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar cursos:", error)
    return []
  }

return categories
    .map((category) => ({
      category,
      courses: (allCourses || [])
        .filter((course) => course.category_id === category.id)
        .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0)),
    }))
    .filter((group) => group.courses.length > 0)
}

// Buscar curso por slug
export async function getCourseBySlug(slug: string): Promise<Course | null> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("courses")
    .select(`
      *,
      category:course_categories(*)
    `)
    .eq("slug", slug)
    .single()

if (error) {
    console.error("Erro ao buscar curso:", error)
    return null
  }
  return data
}

// Buscar aulas de um curso
export async function getCourseLessons(courseId: string): Promise<CourseLesson[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("course_lessons")
    .select("*")
    .eq("course_id", courseId)
    .eq("is_published", true)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar aulas:", error)
    return []
  }
  return data || []
}

// Buscar planos
export async function getPlans(): Promise<MemberPlan[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("member_plans")
    .select("*")
    .eq("is_active", true)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar planos:", error)
    return []
  }
  return data || []
}

// Verificar acesso do usuário a um curso
export async function checkCourseAccess(userId: string, courseId: string): Promise<boolean> {
  const supabase = createClient()

// Primeiro verifica se tem acesso individual (orderbump)
  const { data: individualAccess, error: individualError } = await supabase
    .from("user_course_access")
    .select("id")
    .eq("user_id", userId)
    .eq("course_id", courseId)
    .maybeSingle()

if (individualError) {
    console.error("Erro ao verificar acesso individual:", individualError)
  }

// Se tem acesso individual, retorna true
  if (individualAccess) return true

// Caso contrário, verifica acesso por plano
  const { data: user, error: userError } = await supabase
    .from("affiliates")
    .select("plan_id")
    .eq("id", userId)
    .maybeSingle()

if (userError) {
    console.error("Erro ao buscar usuário:", userError)
    return false
  }

if (!user?.plan_id) return false

const { data: access, error: accessError } = await supabase
    .from("plan_course_access")
    .select("id")
    .eq("plan_id", user.plan_id)
    .eq("course_id", courseId)
    .maybeSingle()

if (accessError) {
    console.error("Erro ao verificar acesso:", accessError)
    return false
  }

return !!access
}

// Salvar progresso da aula
export async function saveLessonProgress(
  userId: string,
  lessonId: string,
  courseId: string,
  progressPercent: number,
  completed: boolean,
): Promise<void> {
  const supabase = createClient()

const { error } = await supabase.from("user_lesson_progress").upsert(
    {
      user_id: userId,
      lesson_id: lessonId,
      course_id: courseId,
      progress_percent: progressPercent,
      completed,
      completed_at: completed ? new Date().toISOString() : null,
      last_watched_at: new Date().toISOString(),
    },
    {
      onConflict: "user_id,lesson_id",
    },
  )

if (error) {
    console.error("Erro ao salvar progresso:", error)
  }
}

// Buscar progresso do usuário em um curso
export async function getUserCourseProgress(userId: string, courseId: string): Promise<UserLessonProgress[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("user_lesson_progress")
    .select("*")
    .eq("user_id", userId)
    .eq("course_id", courseId)

if (error) {
    console.error("Erro ao buscar progresso:", error)
    return []
  }
  return data || []
}

// Admin: Adicionar curso
export async function addCourse(course: Partial<Course>): Promise<Course | null> {
  const supabase = createClient()
  const { data, error } = await supabase.from("courses").insert([course]).select().single()

if (error) {
    console.error("Erro ao adicionar curso:", error)
    return null
  }
  return data
}

// Admin: Atualizar curso
export async function updateCourse(id: string, course: Partial<Course>): Promise<Course | null> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("courses")
    .update({ ...course, updated_at: new Date().toISOString() })
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("Erro ao atualizar curso:", error)
    return null
  }
  return data
}

// Admin: Deletar curso
export async function deleteCourse(id: string): Promise<boolean> {
  const supabase = createClient()
  const { error } = await supabase.from("courses").delete().eq("id", id)

if (error) {
    console.error("Erro ao deletar curso:", error)
    return false
  }
  return true
}

// Admin: Adicionar aula
export async function addLesson(lesson: Partial<CourseLesson>): Promise<CourseLesson | null> {
  const supabase = createClient()
  const { data, error } = await supabase.from("course_lessons").insert([lesson]).select().single()

if (error) {
    console.error("Erro ao adicionar aula:", error)
    return null
  }
  return data
}

// Admin: Atualizar aula
export async function updateLesson(id: string, lesson: Partial<CourseLesson>): Promise<CourseLesson | null> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("course_lessons")
    .update({ ...lesson, updated_at: new Date().toISOString() })
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("Erro ao atualizar aula:", error)
    return null
  }
  return data
}

// Admin: Deletar aula
export async function deleteLesson(id: string): Promise<boolean> {
  const supabase = createClient()
  const { error } = await supabase.from("course_lessons").delete().eq("id", id)

if (error) {
    console.error("Erro ao deletar aula:", error)
    return false
  }
  return true
}

// Admin: Buscar todos os cursos (incluindo não publicados)
export async function getCourses(): Promise<Course[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("courses")
    .select(`
      *,
      category:course_categories(*)
    `)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar cursos:", error)
    return []
  }
  return data || []
}

// Admin: Buscar cursos marcados como orderbump
export async function getOrderbumpCourses(): Promise<Course[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("courses")
    .select(`
      *,
      category:course_categories(*)
    `)
    .eq("is_orderbump", true)
    .order("title", { ascending: true })

if (error) {
    console.error("[v0] Erro ao buscar cursos orderbump:", error)
    return []
  }
  
  console.log("[v0] Cursos orderbump encontrados:", data?.length || 0)
  return data || []
}

// Admin: Criar curso
export async function createCourse(course: Partial<Course>): Promise<Course | null> {
  const supabase = createClient()
  const { data, error } = await supabase.from("courses").insert([course]).select().single()

if (error) {
    console.error("Erro ao criar curso:", error)
    return null
  }
  return data
}

// Admin: Criar categoria
export async function createCategory(category: Partial<CourseCategory>): Promise<CourseCategory | null> {
  const supabase = createClient()
  const { data, error } = await supabase.from("course_categories").insert([category]).select().single()

if (error) {
    console.error("Erro ao criar categoria:", error)
    return null
  }
  return data
}

// Admin: Atualizar categoria
export async function updateCategory(id: string, category: Partial<CourseCategory>): Promise<CourseCategory | null> {
  const supabase = createClient()
  const { data, error } = await supabase.from("course_categories").update(category).eq("id", id).select().single()

if (error) {
    console.error("Erro ao atualizar categoria:", error)
    return null
  }
  return data
}

// Admin: Deletar categoria
export async function deleteCategory(id: string): Promise<boolean> {
  const supabase = createClient()
  const { error } = await supabase.from("course_categories").delete().eq("id", id)

if (error) {
    console.error("Erro ao deletar categoria:", error)
    return false
  }
  return true
}

// Admin: Buscar aulas por curso (incluindo não publicadas)
export async function getLessonsByCourse(courseId: string): Promise<CourseLesson[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("course_lessons")
    .select("*")
    .eq("course_id", courseId)
    .order("sort_order", { ascending: true })

if (error) {
    console.error("Erro ao buscar aulas:", error)
    return []
  }
  return data || []
}

// Admin: Criar aula
export async function createLesson(courseId: string, lesson: Partial<CourseLesson>): Promise<CourseLesson | null> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("course_lessons")
    .insert([{ ...lesson, course_id: courseId }])
    .select()
    .single()

if (error) {
    console.error("Erro ao criar aula:", error)
    return null
  }
  return data
}

// Admin: Buscar acessos de um plano
export async function getPlanCourseAccess(planId: string): Promise<any[]> {
  const supabase = createClient()
  const { data, error } = await supabase.from("plan_course_access").select("*").eq("plan_id", planId)

if (error) {
    console.error("Erro ao buscar acessos do plano:", error)
    return []
  }
  return data || []
}

// Admin: Atualizar acessos de um plano
export async function updatePlanCourseAccess(planId: string, courseIds: string[]): Promise<boolean> {
  const supabase = createClient()

// Deletar acessos antigos
  await supabase.from("plan_course_access").delete().eq("plan_id", planId)

// Inserir novos acessos
  if (courseIds.length > 0) {
    const { error } = await supabase
      .from("plan_course_access")
      .insert(courseIds.map((courseId) => ({ plan_id: planId, course_id: courseId })))

if (error) {
      console.error("Erro ao atualizar acessos:", error)
      return false
    }
  }

return true
}

// Admin: Listar todos os orderbumps (acessos individuais)
export async function getUserCourseAccessList(): Promise<any[]> {
  const supabase = createClient()
  const { data, error } = await supabase
    .from("user_course_access")
    .select(`
      *,
      user:affiliates(id, name, email),
      course:courses(id, title, slug)
    `)
    .order("created_at", { ascending: false })

if (error) {
    console.error("Erro ao buscar orderbumps:", error)
    return []
  }
  return data || []
}

// Admin: Adicionar orderbump (liberar curso para usuário)
export async function addUserCourseAccess(
  userId: string,
  courseId: string,
  grantedBy: string = "manual",
  notes: string = "",
): Promise<boolean> {
  const supabase = createClient()
  const { error } = await supabase.from("user_course_access").insert([
    {
      user_id: userId,
      course_id: courseId,
      granted_by: grantedBy,
      notes: notes,
    },
  ])

if (error) {
    console.error("Erro ao adicionar orderbump:", error)
    return false
  }
  return true
}

// Admin: Remover orderbump (remover acesso individual)
export async function removeUserCourseAccess(userId: string, courseId: string): Promise<boolean> {
  const supabase = createClient()
  const { error } = await supabase
    .from("user_course_access")
    .delete()
    .eq("user_id", userId)
    .eq("course_id", courseId)

if (error) {
    console.error("Erro ao remover orderbump:", error)
    return false
  }
  return true
}

// Admin: Buscar todos os usuários
export async function getUsers(): Promise<any[]> {
  const supabase = createClient()
  const { data, error } = await supabase.from("affiliates").select("id, name, email, plan_id").order("name")

if (error) {
    console.error("Erro ao buscar usuários:", error)
    return []
  }
  return data || []
}
[V0_FILE]typescript:file="lib/novidades-api.ts"
import { createClient } from "@supabase/supabase-js"
import type { NewsPost } from "@/components/news-card"
import type { Live } from "@/components/live-card"

function getClient() {
  return createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY ?? process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

// ── News Posts ──────────────────────────────────────────────────────────────

export async function getNewsPosts(category?: string): Promise<NewsPost[]> {
  const supabase = getClient()
  let query = supabase
    .from("news_posts")
    .select("*")
    .eq("published", true)
    .order("created_at", { ascending: false })
  if (category) query = query.eq("category", category)
  const { data, error } = await query
  if (error) { console.error("[novidades-api] getNewsPosts:", error); return [] }
  return (data ?? []) as NewsPost[]
}

export async function getNewsPost(id: string): Promise<NewsPost | null> {
  const supabase = getClient()
  const { data, error } = await supabase
    .from("news_posts")
    .select("*")
    .eq("id", id)
    .single()
  if (error) return null
  return data as NewsPost
}

export async function getAllNewsPostsAdmin(): Promise<NewsPost[]> {
  const supabase = getClient()
  const { data } = await supabase
    .from("news_posts")
    .select("*")
    .order("created_at", { ascending: false })
  return (data ?? []) as NewsPost[]
}

export async function upsertNewsPost(post: Partial<NewsPost> & { title: string }): Promise<NewsPost | null> {
  const supabase = getClient()
  const payload = { ...post, updated_at: new Date().toISOString() }
  const { data, error } = post.id
    ? await supabase.from("news_posts").update(payload).eq("id", post.id).select().single()
    : await supabase.from("news_posts").insert(payload).select().single()
  if (error) { console.error("[novidades-api] upsertNewsPost:", error); return null }
  return data as NewsPost
}

export async function deleteNewsPost(id: string): Promise<boolean> {
  const supabase = getClient()
  const { error } = await supabase.from("news_posts").delete().eq("id", id)
  return !error
}

// ── Lives ───────────────────────────────────────────────────────────────────

export async function getLives(): Promise<Live[]> {
  const supabase = getClient()
  const { data, error } = await supabase
    .from("lives")
    .select("*")
    .order("scheduled_at", { ascending: false })
  if (error) { console.error("[novidades-api] getLives:", error); return [] }
  return (data ?? []) as Live[]
}

export async function getLive(id: string): Promise<Live | null> {
  const supabase = getClient()
  const { data, error } = await supabase
    .from("lives")
    .select("*")
    .eq("id", id)
    .single()
  if (error) return null
  return data as Live
}

export async function upsertLive(live: Partial<Live> & { title: string }): Promise<Live | null> {
  const supabase = getClient()
  const payload = { ...live, updated_at: new Date().toISOString() }
  const { data, error } = live.id
    ? await supabase.from("lives").update(payload).eq("id", live.id).select().single()
    : await supabase.from("lives").insert(payload).select().single()
  if (error) { console.error("[novidades-api] upsertLive:", error); return null }
  return data as Live
}

export async function deleteLive(id: string): Promise<boolean> {
  const supabase = getClient()
  const { error } = await supabase.from("lives").delete().eq("id", id)
  return !error
}
[V0_FILE]typescript:file="lib/products-api.ts"
import { createClient } from "@/lib/supabase/client"
import type { Product } from "@/lib/products-data"

const isDev = process.env.NODE_ENV !== "production"

function debugLog(...args: unknown[]) {
  if (isDev) {
    console.log(...args)
  }
}

// Converte do formato do banco para o formato do app
function dbToProduct(row: any): Product {
  return {
    id: row.id,
    title: row.title,
    image: row.image,
    tag: row.tag,
    tagLabel: row.tag_label,
    nicho: row.nicho,
    comissao: row.comissao,
    ticket: row.ticket,
    estrategia: row.estrategia,
    plataforma: row.plataforma,
    formato: row.formato,
    aulas: row.aulas || [],
    vendas: row.vendas,
    rating: Number(row.rating) || 0,
    badge: row.badge,
    affiliateUrl: row.affiliate_url,
    hotmartUrl: row.hotmart_url || undefined,
    driveUrl: row.drive_url,
    category: row.category,
    orderbumps: row.orderbumps || 0,
    upsellStatus: row.upsell_status || "nao",
    releaseDate: row.release_date,
    metrics: {
      cpcMedio: row.cpc_medio || "",
      checkout: row.checkout || "",
      cpaAlvo: row.cpa_alvo || "",
    },
    vipOnly: row.vip_only || false,
    comingSoon: row.coming_soon || false,
  }
}

// Converte do formato do app para o formato do banco
function productToDb(product: Omit<Product, "id"> & { id?: string }) {
  return {
    title: product.title,
    image: product.image,
    tag: product.tag || null,
    tag_label: product.tagLabel || null,
    nicho: product.nicho,
    comissao: product.comissao,
    ticket: product.ticket,
    estrategia: product.estrategia || null,
    plataforma: product.plataforma || null,
    formato: product.formato || null,
    aulas: product.aulas || [],
    vendas: product.vendas || 0,
    rating: product.rating || 0,
    badge: product.badge || null,
    affiliate_url: product.affiliateUrl,
    hotmart_url: product.hotmartUrl || null,
    drive_url: product.driveUrl || null,
    category: product.category || null,
    orderbumps: product.orderbumps || 0,
    upsell_status: product.upsellStatus || "nao",
    release_date: product.releaseDate || null,
    cpc_medio: product.metrics?.cpcMedio || null,
    checkout: product.metrics?.checkout || null,
    cpa_alvo: product.metrics?.cpaAlvo || null,
    vip_only: product.vipOnly || false,
    coming_soon: product.comingSoon || false,
    validated: true, // Define como validado por padrão
  }
}

// Cache de produtos em memória (5 minutos)
let productsCache: { data: Product[]; timestamp: number } | null = null
const CACHE_DURATION = 5 * 60 * 1000 // 5 minutos

export async function fetchProducts(): Promise<Product[]> {
  // Verificar cache
  if (productsCache && Date.now() - productsCache.timestamp < CACHE_DURATION) {
    debugLog("[v0] Usando produtos do cache")
    return productsCache.data
  }

const supabase = createClient()
  
  // Selecionar apenas os campos necessários para reduzir egress
  const { data, error } = await supabase
    .from("marketplace_products")
    .select(`
      id,
      title,
      image,
      tag,
      tag_label,
      nicho,
      comissao,
      ticket,
      estrategia,
      plataforma,
      formato,
      aulas,
      vendas,
      rating,
      badge,
      affiliate_url,
      hotmart_url,
      drive_url,
      category,
      orderbumps,
      upsell_status,
      release_date,
      cpc_medio,
      checkout,
      cpa_alvo,
      vip_only,
      coming_soon,
      display_order
    `)
    .eq("validated", true)
    .order("display_order", { ascending: true })
    .order("created_at", { ascending: true })

if (error) {
    console.error("Erro ao buscar produtos:", error.message)
    // Retornar cache antigo se disponível
    if (productsCache) {
      debugLog("[v0] Usando cache antigo devido ao erro")
      return productsCache.data
    }
    return []
  }

const products = data.map(dbToProduct)
  
  // Atualizar cache
  productsCache = {
    data: products,
    timestamp: Date.now()
  }

debugLog("[v0] Produtos carregados do banco:", products.length)

return products
}

export async function addProductToDb(product: Omit<Product, "id">): Promise<Product | null> {
  debugLog("[v0] Tentando adicionar produto:", product.title)
  const supabase = createClient()
  const productData = productToDb(product)
  debugLog("[v0] Dados do produto convertidos para DB:", productData)
  
  const { data, error } = await supabase.from("marketplace_products").insert(productData).select().single()

if (error) {
    console.error("[v0] Erro ao adicionar produto:", error)
    console.error("[v0] Detalhes do erro:", JSON.stringify(error, null, 2))
    return null
  }

debugLog("[v0] Produto adicionado com sucesso!")
  return dbToProduct(data)
}

export async function updateProductInDb(id: string, product: Partial<Product>): Promise<Product | null> {
  debugLog("[v0] Tentando atualizar produto:", id, product.title)
  const supabase = createClient()
  const productData = productToDb(product as Product)
  debugLog("[v0] Dados do produto convertidos para atualização:", productData)
  
  const { data, error } = await supabase
    .from("marketplace_products")
    .update(productData)
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("[v0] Erro ao atualizar produto:", error)
    console.error("[v0] Detalhes do erro:", JSON.stringify(error, null, 2))
    return null
  }

debugLog("[v0] Produto atualizado com sucesso!")
  return dbToProduct(data)
}

export async function deleteProductFromDb(id: string): Promise<boolean> {
  debugLog("[v0] Tentando deletar produto:", id)
  const supabase = createClient()
  const { error } = await supabase.from("marketplace_products").delete().eq("id", id)

if (error) {
    console.error("[v0] Erro ao deletar produto:", error)
    console.error("[v0] Detalhes do erro:", JSON.stringify(error, null, 2))
    return false
  }

debugLog("[v0] Produto deletado com sucesso!")
  return true
}
[V0_FILE]typescript:file="lib/products-data.ts"
export interface Product {
  id: string
  title: string
  image: string
  tag?: "top" | "new" | "hot" | "opportunity" | "perfectpay" | "coming-soon"
  tagLabel?: string
  metrics?: {
    cpcMedio: string
    checkout: string
    cpaAlvo: string
  }
  nicho: string
  comissao: string
  ticket: string
  estrategia?: string
  plataforma?: string
  formato?: string
  aulas?: {
    title: string
    url: string
  }[]
  vendas?: number
  rating?: number
  badge?: "bestseller" | "novo" | "trending"
  affiliateUrl: string
  hotmartUrl?: string
  driveUrl?: string
  category?: string
  orderbumps?: number
  upsellStatus?: "sim" | "nao" | "em-breve"
  releaseDate?: string // formato ISO: "2025-01-15"
  vipOnly?: boolean // campo para produtos exclusivos VIP
  comingSoon?: boolean // campo para marcar produtos "em breve" com design de suspense
}

export interface RankingMember {
  id: string
  affiliateId: string // ID do usuário na tabela affiliates
  affiliateName?: string // Cache do nome para exibição
  affiliatePhoto?: string // Cache da foto para exibição
  sales: number
  week: string
}

export const products: Product[] = []

export const categories = [{ id: "all", label: "Todos", count: 0 }]

export const initialRanking: RankingMember[] = []
[V0_FILE]typescript:file="lib/products.ts"
// Mapeamento de produtos conhecidos
export const PRODUCTS = {
  // AFILIA360
  AFILIA360_BASIC: {
    code: "FYGCVIHI",
    name: "AFILIA 360 - Basic",
    category: "AFILIA360",
  },
  AFILIA360_PRO: {
    code: "ZOXLWXI9",
    name: "AFILIA 360 - Pro",
    category: "AFILIA360",
  },
  // Livros
  LIVRO_ENQUANTO_TE_ESCOLHIA: {
    code: "JF3XMLU5", // Corrigido de JF5KMLVS para JF3XMLU5 (código correto do webhook)
    name: "Livro: Enquanto te escolhia me esqueci",
    category: "Livros",
  },
  LIVRO_CASADO_SOZINHO: {
    code: "PO4DW6TQ",
    name: "Livro: Casado e Sozinho",
    category: "Livros",
  },
  LIVRO_ME_LEMBRA: {
    code: "SEQF6JKB",
    name: "Livro: Me Lembra Quem Eu Sou",
    category: "Livros",
  },
  LIVRO_PESO_CAMA: {
    code: "GIGTIA6U",
    name: "Livro: O Peso da Cama Feita",
    category: "Livros",
  },
  LIVRO_FUGAS: {
    code: "HO2X7F4X",
    name: "Livro: Fugas Emocionais",
    category: "Livros",
  },
  // Infoprodutos
  ANGULOS_COPY: {
    code: "5YGV9ACL",
    name: "ÂNGULOS ILEGAIS DE COPY",
    category: "Infoprodutos",
  },
  MANUAL_PROMESSA: {
    code: "PNEWUY4V",
    name: "O MANUAL DA PROMESSA IRRESISTÍVEL",
    category: "Infoprodutos",
  },
  IMERSAO_COPY: {
    code: "NVPXX68S",
    name: "Imersão Copy Guerrilha",
    category: "Infoprodutos",
  },
  GRAVACAO_IMERSAO: {
    code: "7V6V04RN",
    name: "Gravação Imersão",
    category: "Infoprodutos",
  },
} as const

export const PRODUCT_CODES = Object.values(PRODUCTS).map((p) => p.code)

export function getProductByCode(code: string) {
  return Object.values(PRODUCTS).find((p) => p.code === code)
}

export function getProductFromCode(code: string) {
  return getProductByCode(code)
}

export function getProductFromWebhook(rawData: any): { code: string; name: string } | null {
  try {
    const firstItem = rawData?.items?.[0]
    if (!firstItem) return null

const code = firstItem.code
    const name = firstItem.name

if (!code || !name) return null

return { code, name }
  } catch (error) {
    return null
  }
}

export function isAFILIA360Product(code: string) {
  return code === "FYGCVIHI" || code === "ZOXLWXI9"
}

export function isTestSale(productCode: string, productName?: string) {
  // Filtrar vendas de teste
  if (!productCode || !productName) return true

// Produtos genéricos de teste
  if (productName.includes("Produto 1") || productName.includes("Produto 2") || productName.includes("Produto 3")) {
    return true
  }

// Códigos não conhecidos (possivelmente testes)
  const knownCodes = PRODUCT_CODES
  return !knownCodes.includes(productCode)
}
[V0_FILE]typescript:file="lib/store.ts"
"use client"

import { create } from "zustand"
import { persist } from "zustand/middleware"
import type { Product, RankingMember } from "./products-data"
import { products as initialProducts, initialRanking } from "./products-data"

export interface Announcement {
  id: string
  text: string
  type: "info" | "promo" | "update" | "alert"
  active: boolean
  createdAt: string
}

const initialAnnouncements: Announcement[] = [
  {
    id: "1",
    text: "5 NOVOS CRIATIVOS adicionados no Gerador de Criativos IA",
    type: "update",
    active: true,
    createdAt: new Date().toISOString(),
  },
  {
    id: "2",
    text: "FINAL DE SEMANA com 10% a mais de comissão em todos os produtos!",
    type: "promo",
    active: true,
    createdAt: new Date().toISOString(),
  },
  {
    id: "3",
    text: "Nova página de vendas disponível no Recreador - Confira o Drive!",
    type: "update",
    active: true,
    createdAt: new Date().toISOString(),
  },
  {
    id: "4",
    text: "SORTEIO PIX R$500 para os top 3 afiliados da semana!",
    type: "alert",
    active: true,
    createdAt: new Date().toISOString(),
  },
]

interface StoreState {
  products: Product[]
  ranking: RankingMember[]
  announcements: Announcement[]
  _version: number
  addProduct: (product: Product) => void
  updateProduct: (id: string, product: Partial<Product>) => void
  deleteProduct: (id: string) => void
  addRankingMember: (member: RankingMember) => void
  updateRankingMember: (id: string, member: Partial<RankingMember>) => void
  deleteRankingMember: (id: string) => void
  reorderRanking: (members: RankingMember[]) => void
  addAnnouncement: (announcement: Announcement) => void
  updateAnnouncement: (id: string, announcement: Partial<Announcement>) => void
  deleteAnnouncement: (id: string) => void
}

const CURRENT_VERSION = 5

export const useStore = create<StoreState>()(
  persist(
    (set) => ({
      products: initialProducts,
      ranking: initialRanking,
      announcements: initialAnnouncements,
      _version: CURRENT_VERSION,
      addProduct: (product) => set((state) => ({ products: [...state.products, product] })),
      updateProduct: (id, updatedProduct) =>
        set((state) => ({
          products: state.products.map((p) => (p.id === id ? { ...p, ...updatedProduct } : p)),
        })),
      deleteProduct: (id) =>
        set((state) => ({
          products: state.products.filter((p) => p.id !== id),
        })),
      addRankingMember: (member) => set((state) => ({ ranking: [...state.ranking, member] })),
      updateRankingMember: (id, updatedMember) =>
        set((state) => ({
          ranking: state.ranking.map((m) => (m.id === id ? { ...m, ...updatedMember } : m)),
        })),
      deleteRankingMember: (id) =>
        set((state) => ({
          ranking: state.ranking.filter((m) => m.id !== id),
        })),
      reorderRanking: (members) => set({ ranking: members }),
      addAnnouncement: (announcement) => set((state) => ({ announcements: [...state.announcements, announcement] })),
      updateAnnouncement: (id, updatedAnnouncement) =>
        set((state) => ({
          announcements: state.announcements.map((a) => (a.id === id ? { ...a, ...updatedAnnouncement } : a)),
        })),
      deleteAnnouncement: (id) =>
        set((state) => ({
          announcements: state.announcements.filter((a) => a.id !== id),
        })),
    }),
    {
      name: "afilia360-storage",
      version: CURRENT_VERSION,
      migrate: (persistedState: any, version: number) => {
        if (version < CURRENT_VERSION) {
          return {
            products: initialProducts,
            ranking: initialRanking,
            announcements: initialAnnouncements,
            _version: CURRENT_VERSION,
          }
        }
        return persistedState as StoreState
      },
    },
  ),
)
[V0_FILE]typescript:file="lib/supabase/client.ts"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

if (!supabaseUrl || !supabaseAnonKey) {
    console.error("[v0] Erro: Variáveis de ambiente do Supabase não configuradas")
    console.error("[v0] NEXT_PUBLIC_SUPABASE_URL:", supabaseUrl ? "definida" : "não definida")
    console.error("[v0] NEXT_PUBLIC_SUPABASE_ANON_KEY:", supabaseAnonKey ? "definida" : "não definida")
    throw new Error("Variáveis de ambiente do Supabase não configuradas")
  }

return createBrowserClient(supabaseUrl, supabaseAnonKey)
}
[V0_FILE]typescript:file="lib/supabase/server.ts"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await 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 {
          // Ignore errors from Server Components
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/types.ts"
export interface Affiliate {
  id: string
  name: string
  email: string
  whatsapp: string
  status: "pending" | "approved" | "rejected" | "paused"
  photo_url?: string
  created_at: string
  approved_at?: string
  approved_by?: string
  is_vip?: boolean
  plan_id?: string
  nome_celetus?: string
  first_sale_date?: string
  total_commissions: number
  is_active: boolean
  plan_purchased?: "basic" | "pro"
  upgraded_at?: string
}

export interface MarketplaceProduct {
  id: string
  name: string
  niche: string
  image_url?: string
  affiliate_link?: string
  drive_link?: string
  commission: string
  platform: string
  sales: number
  cpc?: string
  checkout?: string
  cpa?: string
  strategy?: string
  badge?: string
  badge_color: string
  lessons: { title: string; url: string }[]
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface AffiliateRanking {
  id: string
  name: string
  image_url?: string
  position: number
  week: string
  created_at: string
}

export interface MonthlyCost {
  id: string
  month: string
  category: "hospedagem" | "ia" | "marketing" | "ferramentas" | "outros"
  description: string
  amount: number
  is_recurring: boolean
  created_at: string
  updated_at: string
}

export interface MonthlyMetrics {
  id: string
  month: string
  revenue_app: number
  revenue_commissions: number
  total_costs: number
  profit: number
  sales_count: number
  basic_sales: number
  pro_sales: number
  created_at: string
  updated_at: string
}

export interface CustomerLTV {
  id: string
  affiliate_id: string
  month: string
  plan_revenue: number
  upgrade_revenue: number
  commission_revenue: number
  total_ltv: number
  created_at: string
  updated_at: string
}

export interface AffiliateExtended extends Affiliate {
  first_sale_date?: string
  total_commissions: number
  is_active: boolean
  plan_purchased?: "basic" | "pro"
  upgraded_at?: string
}
[V0_FILE]typescriptreact:file="lib/utils.tsx"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function linkify(text: string): string {
  const urlRegex = /(https?:\/\/[^\s]+)/g
  return text.replace(
    urlRegex,
    '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">$1</a>',
  )
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@supabase/ssr": "0.8.0",
    "@supabase/supabase-js": "2.87.0",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "bcryptjs": "3.0.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "immer": "latest",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "swr": "2.3.7",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "use-sync-external-store": "latest",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "zustand": "5.0.9"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]sql:file="scripts/001_create_affiliates_table.sql"
-- Tabela de afiliados pendentes de aprovação
CREATE TABLE IF NOT EXISTS public.affiliates (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  whatsapp TEXT NOT NULL,
  -- Adicionar campos password, is_admin e password_hash
  password TEXT,
  password_hash TEXT,
  is_admin BOOLEAN DEFAULT false,
  status TEXT NOT NULL DEFAULT 'pending',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  approved_at TIMESTAMP WITH TIME ZONE,
  approved_by UUID
);

-- Habilitar RLS
ALTER TABLE public.affiliates ENABLE ROW LEVEL SECURITY;

-- Políticas para affiliates
DROP POLICY IF EXISTS "Anyone can insert affiliate registration" ON public.affiliates;
CREATE POLICY "Anyone can insert affiliate registration" ON public.affiliates
  FOR INSERT WITH CHECK (true);

DROP POLICY IF EXISTS "Anyone can view affiliates" ON public.affiliates;
CREATE POLICY "Anyone can view affiliates" ON public.affiliates
  FOR SELECT USING (true);

DROP POLICY IF EXISTS "Anyone can update affiliates" ON public.affiliates;
CREATE POLICY "Anyone can update affiliates" ON public.affiliates
  FOR UPDATE USING (true);

DROP POLICY IF EXISTS "Anyone can delete affiliates" ON public.affiliates;
CREATE POLICY "Anyone can delete affiliates" ON public.affiliates
  FOR DELETE USING (true);

-- Inserir usuário administrador
INSERT INTO public.affiliates (name, email, whatsapp, password, status, is_admin)
VALUES (
  'Administrador',
  'rtmacedo2@hotmail.com',
  '',
  'Prego4188!',
  'approved',
  true
)
ON CONFLICT (email) 
DO UPDATE SET 
  password = 'Prego4188!',
  status = 'approved',
  is_admin = true;
[V0_FILE]sql:file="scripts/002_add_password_to_affiliates.sql"
-- Adicionar campo de senha para autenticação
ALTER TABLE public.affiliates ADD COLUMN IF NOT EXISTS password_hash TEXT;
[V0_FILE]sql:file="scripts/003_create_admin_user.sql"
-- Inserir usuário administrador
-- Email: rtmacedo2@hotmail.com
-- Senha: Prego4188!

INSERT INTO affiliates (name, email, whatsapp, password, status, is_admin, created_at)
VALUES (
  'Administrador',
  'rtmacedo2@hotmail.com',
  '',
  'Prego4188!',
  'approved',
  true,
  NOW()
)
ON CONFLICT (email) 
DO UPDATE SET 
  password = 'Prego4188!',
  status = 'approved',
  is_admin = true;
[V0_FILE]sql:file="scripts/004_extend_announcements_for_blog.sql"
-- Expande a tabela announcements para suportar posts longos estilo blog/WordPress
ALTER TABLE announcements
ADD COLUMN IF NOT EXISTS title TEXT,
ADD COLUMN IF NOT EXISTS excerpt TEXT,
ADD COLUMN IF NOT EXISTS content TEXT,
ADD COLUMN IF NOT EXISTS cover_url TEXT,
ADD COLUMN IF NOT EXISTS link_url TEXT,
ADD COLUMN IF NOT EXISTS slug TEXT UNIQUE;

-- Índice para facilitar busca por slug na página de detalhe
CREATE INDEX IF NOT EXISTS idx_announcements_slug ON announcements(slug);
[V0_FILE]sql:file="scripts/005_add_publication_fields_to_announcements.sql"
-- Adiciona controle editorial para posts do blog de avisos
ALTER TABLE announcements
ADD COLUMN IF NOT EXISTS publication_status TEXT NOT NULL DEFAULT 'draft',
ADD COLUMN IF NOT EXISTS published_at TIMESTAMPTZ;

-- Garante integridade dos status permitidos
DO $$
BEGIN
  IF NOT EXISTS (
    SELECT 1
    FROM pg_constraint
    WHERE conname = 'announcements_publication_status_check'
  ) THEN
    ALTER TABLE announcements
    ADD CONSTRAINT announcements_publication_status_check
    CHECK (publication_status IN ('draft', 'published'));
  END IF;
END $$;

-- Backfill incremental para não esconder posts já existentes
UPDATE announcements
SET
  publication_status = 'published',
  published_at = COALESCE(published_at, created_at, NOW())
WHERE publication_status IS NULL
   OR publication_status = '';

CREATE INDEX IF NOT EXISTS idx_announcements_publication_status ON announcements(publication_status);
CREATE INDEX IF NOT EXISTS idx_announcements_published_at ON announcements(published_at DESC);
[V0_FILE]sql:file="scripts/add-expenses-and-validation-fields.sql"
-- Adicionar coluna de despesas na tabela de métricas manuais
ALTER TABLE daily_metrics_manual 
ADD COLUMN IF NOT EXISTS expenses NUMERIC(10, 2) DEFAULT 0;

-- Adicionar coluna de status de validação na tabela de produtos
ALTER TABLE products 
ADD COLUMN IF NOT EXISTS validation_status TEXT DEFAULT 'disponivel' 
CHECK (validation_status IN ('disponivel', 'em-breve', 'em-validacao'));

-- Comentário para descrever os campos
COMMENT ON COLUMN daily_metrics_manual.expenses IS 'Despesas operacionais do dia (marketing, IA, hospedagem, contador, etc)';
COMMENT ON COLUMN products.validation_status IS 'Status de validação do produto: disponivel, em-breve, em-validacao';
[V0_FILE]sql:file="scripts/create-manual-metrics-table.sql"
-- Criar tabela para métricas manuais diárias
CREATE TABLE IF NOT EXISTS daily_metrics_manual (
  id BIGSERIAL PRIMARY KEY,
  date DATE NOT NULL UNIQUE,
  
  -- Vendas AFILIA360
  afilia_basic_qty INTEGER DEFAULT 0,
  afilia_basic_revenue NUMERIC(10,2) DEFAULT 0,
  afilia_pro_qty INTEGER DEFAULT 0,
  afilia_pro_revenue NUMERIC(10,2) DEFAULT 0,
  
  -- Vendas de Afiliados
  affiliate_qty INTEGER DEFAULT 0,
  affiliate_revenue NUMERIC(10,2) DEFAULT 0,
  
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Índice para busca por data
CREATE INDEX IF NOT EXISTS idx_daily_metrics_manual_date ON daily_metrics_manual(date);

-- Comentários
COMMENT ON TABLE daily_metrics_manual IS 'Métricas diárias inseridas manualmente';
COMMENT ON COLUMN daily_metrics_manual.afilia_basic_qty IS 'Quantidade de vendas AFILIA360 BÁSICO';
COMMENT ON COLUMN daily_metrics_manual.afilia_basic_revenue IS 'Faturamento AFILIA360 BÁSICO';
COMMENT ON COLUMN daily_metrics_manual.afilia_pro_qty IS 'Quantidade de vendas AFILIA360 PRO';
COMMENT ON COLUMN daily_metrics_manual.afilia_pro_revenue IS 'Faturamento AFILIA360 PRO';
COMMENT ON COLUMN daily_metrics_manual.affiliate_qty IS 'Quantidade de vendas de afiliados';
COMMENT ON COLUMN daily_metrics_manual.affiliate_revenue IS 'Faturamento de afiliados';
[V0_FILE]css:file="styles/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
[V0_FILE]jpg:file="public/ai-creative-generator-tool-dark-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/L1MajfUgsg6rbFCUPEC9Jm/public/ai-creative-generator-tool-dark-interface.jpg"
[V0_FILE]jpg:file="public/ai-creative-generator-tool-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/NyCU43WRox_Sn5x9BFVyWE/public/ai-creative-generator-tool-interface.jpg"
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png"
[V0_FILE]jpg:file="public/copywriting-templates-and-scripts.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/OnGep1ekZV5UKt99a2CUsU/public/copywriting-templates-and-scripts.jpg"
[V0_FILE]jpg:file="public/copywriting-templates-dark-modern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/VaF2fqQqIG7S95McDn-cRI/public/copywriting-templates-dark-modern.jpg"
[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/1qflLrmC4Tiq3GP54oqgmz/public/diverse-avatars.png"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg"
[V0_FILE]jpg:file="public/kids-educational-activity-book-colorful.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/dw1mq9aPqiuf-IOgSR0uY0/public/kids-educational-activity-book-colorful.jpg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]png:file="public/professional-man-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/3Z_-_nDwCVX4mTONACWX-5/public/professional-man-avatar.png"
[V0_FILE]png:file="public/professional-man-smiling.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/LaRzzxuexYvjqTKS_Ou556/public/professional-man-smiling.png"
[V0_FILE]jpg:file="public/professional-man-young.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/DhkZdutWyhE0Xm-x36ohOz/public/professional-man-young.jpg"
[V0_FILE]png:file="public/professional-woman-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/WhuSYcgzyzf1w-kgohAyDv/public/professional-woman-avatar.png"
[V0_FILE]jpg:file="public/professional-woman-brunette.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/hgJLwnHdj3EgAM9_2j6DDd/public/professional-woman-brunette.jpg"
[V0_FILE]png:file="public/video-course-thumbnail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_plx5jK2FAAP0btZXfyKu1W3UNDhO/sBvP_tu9K7Mvnv8cm3PeDw/public/video-course-thumbnail.png"</article></body></html>