[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/BankTrakerPro%20%28BT%29-5qABryWktVCwZ0mKoG8zpIiU7az2yK.png" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#FFD700", foreground: "#1C1C1C", }, secondary: { DEFAULT: "#2A2A2A", foreground: "#FFD700", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "#2A2A2A", foreground: "#A0A0A0", }, accent: { DEFAULT: "#FFD700", foreground: "#1C1C1C", }, popover: { DEFAULT: "#1C1C1C", foreground: "#FFFFFF", }, card: { DEFAULT: "#1C1C1C", foreground: "#FFFFFF", }, gold: { DEFAULT: "#FFD700", 50: "#FFFEF7", 100: "#FFFAEB", 200: "#FFF2C7", 300: "#FFE99F", 400: "#FFD700", 500: "#E6C200", 600: "#B8A000", 700: "#8A7700", 800: "#5C4F00", 900: "#2E2700", }, dark: { DEFAULT: "#1C1C1C", 50: "#F5F5F5", 100: "#E0E0E0", 200: "#BDBDBD", 300: "#9E9E9E", 400: "#757575", 500: "#616161", 600: "#424242", 700: "#303030", 800: "#212121", 900: "#1C1C1C", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, "fade-in": { from: { opacity: "0", transform: "translateY(10px)" }, to: { opacity: "1", transform: "translateY(0)" }, }, "slide-in": { from: { transform: "translateX(-100%)" }, to: { transform: "translateX(0)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in": "fade-in 0.3s ease-out", "slide-in": "slide-in 0.3s ease-out", }, fontFamily: { sans: [ "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", ], display: [ "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif", ], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]sql:file="scripts/create-tables.sql" type="inline-sql" transaction="true" name="create-banktracker-tables.sql" isMerged="true" -- Criar tabela de usuários CREATE TABLE IF NOT EXISTS users ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, nickname VARCHAR(100), avatar TEXT, logo TEXT, initial_bankroll DECIMAL(10,2) DEFAULT 0, current_bankroll DECIMAL(10,2) DEFAULT 0, total_profit DECIMAL(10,2) DEFAULT 0, roi DECIMAL(5,2) DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Criar tabela de apostas CREATE TABLE IF NOT EXISTS bets ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID REFERENCES users(id) ON DELETE CASCADE, date DATE NOT NULL, sport VARCHAR(100) NOT NULL, league VARCHAR(255) NOT NULL, match VARCHAR(500) NOT NULL, market VARCHAR(255) NOT NULL, odd DECIMAL(6,2) NOT NULL, stake DECIMAL(10,2) NOT NULL, result VARCHAR(10) CHECK (result IN ('win', 'loss', 'push')), profit DECIMAL(10,2), notes TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Criar índices para melhor performance CREATE INDEX IF NOT EXISTS idx_users_email ON users(email); CREATE INDEX IF NOT EXISTS idx_bets_user_id ON bets(user_id); CREATE INDEX IF NOT EXISTS idx_bets_date ON bets(date); CREATE INDEX IF NOT EXISTS idx_bets_sport ON bets(sport); -- Criar função para atualizar updated_at automaticamente CREATE OR REPLACE FUNCTION update_updated_at_column() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ language 'plpgsql'; -- Criar triggers para atualizar updated_at CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); CREATE TRIGGER update_bets_updated_at BEFORE UPDATE ON bets FOR EACH ROW EXECUTE FUNCTION update_updated_at_column(); -- Habilitar RLS (Row Level Security) ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE bets ENABLE ROW LEVEL SECURITY; -- Políticas de segurança - usuários podem ver apenas seus próprios dados CREATE POLICY "Users can view own profile" ON users FOR SELECT USING (auth.uid()::text = id::text); CREATE POLICY "Users can update own profile" ON users FOR UPDATE USING (auth.uid()::text = id::text); CREATE POLICY "Users can insert own profile" ON users FOR INSERT WITH CHECK (auth.uid()::text = id::text); CREATE POLICY "Users can view own bets" ON bets FOR SELECT USING (auth.uid()::text = user_id::text); CREATE POLICY "Users can insert own bets" ON bets FOR INSERT WITH CHECK (auth.uid()::text = user_id::text); CREATE POLICY "Users can update own bets" ON bets FOR UPDATE USING (auth.uid()::text = user_id::text); CREATE POLICY "Users can delete own bets" ON bets FOR DELETE USING (auth.uid()::text = user_id::text); [V0_FILE]typescriptreact:file="components/bets/bet-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useAuth } from "@/contexts/auth-context" import { BetsService, type BetFormData } from "@/lib/services/bets" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Plus, Calculator } from "lucide-react" import { toast } from "sonner" export function BetForm() { const { user } = useAuth() const [isSubmitting, setIsSubmitting] = useState(false) const [formData, setFormData] = useState({ date: new Date().toISOString().split("T")[0], sport: "", league: "", match: "", market: "", odd: 0, stake: 0, notes: "", }) const [potentialReturn, setPotentialReturn] = useState(0) const sports = [ "Futebol", "Basquete", "Tênis", "Vôlei", "Futebol Americano", "Baseball", "Hockey", "MMA", "Boxe", "E-sports", ] const markets = [ "Moneyline", "Over/Under", "Handicap", "Ambas Marcam", "Dupla Chance", "Primeiro Tempo", "Escanteios", "Cartões", ] const handleOddChange = (value: string) => { const odd = Number.parseFloat(value) || 0 setFormData((prev) => ({ ...prev, odd })) setPotentialReturn(odd * formData.stake) } const handleStakeChange = (value: string) => { const stake = Number.parseFloat(value) || 0 setFormData((prev) => ({ ...prev, stake })) setPotentialReturn(formData.odd * stake) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!user) { toast.error("Você precisa estar logado para registrar apostas") return } setIsSubmitting(true) try { const bet = await BetsService.createBet(user.id, formData) if (bet) { toast.success("Aposta registrada com sucesso!") // Reset form setFormData({ date: new Date().toISOString().split("T")[0], sport: "", league: "", match: "", market: "", odd: 0, stake: 0, notes: "", }) setPotentialReturn(0) } else { toast.error("Erro ao registrar aposta") } } catch (error) { console.error("Erro ao registrar aposta:", error) toast.error("Erro inesperado ao registrar aposta") } finally { setIsSubmitting(false) } } return (

Nova Aposta

{/* Formulário */}

Registrar Aposta Preencha os dados da sua aposta para análise

Data setFormData((prev) => ({ ...prev, date: e.target.value }))} className="bg-dark-800 border-dark-700 focus:border-gold-400" required />

Esporte

Campeonato/Liga setFormData((prev) => ({ ...prev, league: e.target.value }))} className="bg-dark-800 border-dark-700 focus:border-gold-400" required />

Jogo setFormData((prev) => ({ ...prev, match: e.target.value }))} className="bg-dark-800 border-dark-700 focus:border-gold-400" required />

Mercado

Odd handleOddChange(e.target.value)} className="bg-dark-800 border-dark-700 focus:border-gold-400" required />

Valor (R$) handleStakeChange(e.target.value)} className="bg-dark-800 border-dark-700 focus:border-gold-400" required />

Observações

setFormData((prev) => ({ ...prev, notes: e.target.value }))}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400 min-h-[100px]"
                  />
                </div>

<Button
                  type="submit"
                  className="w-full gradient-gold text-dark-900 font-semibold hover:opacity-90"
                  disabled={isSubmitting}
                >
                  {isSubmitting ? "Registrando..." : "Registrar Aposta"}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>

{/* Calculadora */}
        <div>
          <Card className="card-premium">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Calculator className="w-5 h-5 text-gold-400" />
                Calculadora
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Stake:</span>
                  <span className="font-medium">R$ {formData.stake.toFixed(2)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Odd:</span>
                  <span className="font-medium">{formData.odd.toFixed(2)}</span>
                </div>
                <div className="border-t border-dark-700 pt-2">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Retorno Potencial:</span>
                    <span className="font-bold text-gold-400">R$ {potentialReturn.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Lucro Potencial:</span>
                    <span className="font-bold text-green-400">R$ {(potentialReturn - formData.stake).toFixed(2)}</span>
                  </div>
                </div>
              </div>

{formData.stake > 0 && formData.odd > 0 && (
                <div className="space-y-2 pt-4 border-t border-dark-700">
                  <h4 className="font-medium">Sugestões de Stake:</h4>
                  <div className="space-y-1 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Conservador (1%):</span>
                      <span>R$ {(user?.currentBankroll ? user.currentBankroll * 0.01 : 10).toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Moderado (2%):</span>
                      <span>R$ {(user?.currentBankroll ? user.currentBankroll * 0.02 : 20).toFixed(2)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Agressivo (5%):</span>
                      <span>R$ {(user?.currentBankroll ? user.currentBankroll * 0.05 : 50).toFixed(2)}</span>
                    </div>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/analytics/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/bets/bet-history.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { BetsService, type Bet } from "@/lib/services/bets"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { History, Filter, Edit, Trash2, TrendingUp, TrendingDown } from "lucide-react"
import { toast } from "sonner"

export function BetHistory() {
  const { user } = useAuth()
  const [bets, setBets] = useState<Bet[]>([])
  const [filteredBets, setFilteredBets] = useState<Bet[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [editingBet, setEditingBet] = useState<Bet | null>(null)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)

// Filtros
  const [filters, setFilters] = useState({
    sport: "",
    result: "",
    dateFrom: "",
    dateTo: "",
    search: "",
  })

useEffect(() => {
    if (user) {
      loadBets()
    }
  }, [user])

useEffect(() => {
    applyFilters()
  }, [bets, filters])

const loadBets = async () => {
    if (!user) return

setIsLoading(true)
    try {
      const userBets = await BetsService.getUserBets(user.id)
      setBets(userBets)
    } catch (error) {
      console.error("Erro ao carregar apostas:", error)
      toast.error("Erro ao carregar histórico")
    } finally {
      setIsLoading(false)
    }
  }

const applyFilters = () => {
    let filtered = [...bets]

if (filters.sport) {
      filtered = filtered.filter((bet) => bet.sport === filters.sport)
    }

if (filters.result) {
      filtered = filtered.filter((bet) => bet.result === filters.result)
    }

if (filters.dateFrom) {
      filtered = filtered.filter((bet) => bet.date >= filters.dateFrom)
    }

if (filters.dateTo) {
      filtered = filtered.filter((bet) => bet.date <= filters.dateTo)
    }

if (filters.search) {
      const searchLower = filters.search.toLowerCase()
      filtered = filtered.filter(
        (bet) =>
          bet.match.toLowerCase().includes(searchLower) ||
          bet.league.toLowerCase().includes(searchLower) ||
          bet.market.toLowerCase().includes(searchLower),
      )
    }

setFilteredBets(filtered)
  }

const handleUpdateResult = async (betId: string, result: "win" | "loss" | "push") => {
    if (!user) return

const bet = bets.find((b) => b.id === betId)
    if (!bet) return

const profit = result === "win" ? bet.odd * bet.stake - bet.stake : result === "loss" ? -bet.stake : 0

const success = await BetsService.updateBet(betId, user.id, { result, profit })

if (success) {
      toast.success("Resultado atualizado!")
      loadBets()
    } else {
      toast.error("Erro ao atualizar resultado")
    }
  }

const handleEditBet = (bet: Bet) => {
    setEditingBet(bet)
    setIsEditDialogOpen(true)
  }

const handleSaveEdit = async () => {
    if (!editingBet || !user) return

const success = await BetsService.updateBet(editingBet.id, user.id, editingBet)

if (success) {
      toast.success("Aposta atualizada!")
      setIsEditDialogOpen(false)
      setEditingBet(null)
      loadBets()
    } else {
      toast.error("Erro ao atualizar aposta")
    }
  }

const handleDeleteBet = async (betId: string) => {
    if (!user) return

if (confirm("Tem certeza que deseja excluir esta aposta?")) {
      const success = await BetsService.deleteBet(betId, user.id)

if (success) {
        toast.success("Aposta excluída!")
        loadBets()
      } else {
        toast.error("Erro ao excluir aposta")
      }
    }
  }

const clearFilters = () => {
    setFilters({
      sport: "",
      result: "",
      dateFrom: "",
      dateTo: "",
      search: "",
    })
  }

const sports = [...new Set(bets.map((bet) => bet.sport))].filter(Boolean)

if (isLoading) {
    return (
      <div className="space-y-6 p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-dark-800 rounded w-48 mb-4"></div>
          <div className="space-y-4">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="h-24 bg-dark-800 rounded-xl"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-2">
        <History className="w-6 h-6 text-gold-400" />
        <h1 className="text-3xl font-display font-bold text-gradient">Histórico de Apostas</h1>
      </div>

{/* Filtros */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Filter className="w-5 h-5 text-gold-400" />
            Filtros
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div className="space-y-2">
              <Label>Buscar</Label>
              <Input
                placeholder="Jogo, liga, mercado..."
                value={filters.search}
                onChange={(e) => setFilters((prev) => ({ ...prev, search: e.target.value }))}
                className="bg-dark-800 border-dark-700 focus:border-gold-400"
              />
            </div>
            <div className="space-y-2">
              <Label>Esporte</Label>
              <Select
                value={filters.sport}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, sport: value }))}
              >
                <SelectTrigger className="bg-dark-800 border-dark-700 focus:border-gold-400">
                  <SelectValue placeholder="Todos" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  {sports.map((sport) => (
                    <SelectItem key={sport} value={sport}>
                      {sport}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Resultado</Label>
              <Select
                value={filters.result}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, result: value }))}
              >
                <SelectTrigger className="bg-dark-800 border-dark-700 focus:border-gold-400">
                  <SelectValue placeholder="Todos" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todos</SelectItem>
                  <SelectItem value="win">Vitória</SelectItem>
                  <SelectItem value="loss">Derrota</SelectItem>
                  <SelectItem value="push">Empate</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Data Inicial</Label>
              <Input
                type="date"
                value={filters.dateFrom}
                onChange={(e) => setFilters((prev) => ({ ...prev, dateFrom: e.target.value }))}
                className="bg-dark-800 border-dark-700 focus:border-gold-400"
              />
            </div>
            <div className="space-y-2">
              <Label>Data Final</Label>
              <Input
                type="date"
                value={filters.dateTo}
                onChange={(e) => setFilters((prev) => ({ ...prev, dateTo: e.target.value }))}
                className="bg-dark-800 border-dark-700 focus:border-gold-400"
              />
            </div>
          </div>
          <div className="flex gap-2 mt-4">
            <Button onClick={clearFilters} variant="outline" size="sm">
              Limpar Filtros
            </Button>
            <Badge variant="outline">{filteredBets.length} apostas encontradas</Badge>
          </div>
        </CardContent>
      </Card>

{/* Lista de Apostas */}
      <div className="space-y-4">
        {filteredBets.length === 0 ? (
          <Card className="card-premium">
            <CardContent className="text-center py-8">
              <p className="text-muted-foreground">Nenhuma aposta encontrada com os filtros aplicados.</p>
            </CardContent>
          </Card>
        ) : (
          filteredBets.map((bet) => (
            <Card key={bet.id} className="card-premium">
              <CardContent className="p-6">
                <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <Badge variant="outline">{bet.sport}</Badge>
                      <span className="text-sm text-muted-foreground">{bet.date}</span>
                    </div>
                    <h3 className="font-semibold text-lg">{bet.match}</h3>
                    <p className="text-muted-foreground">{bet.league}</p>
                    <p className="text-sm text-muted-foreground">{bet.market}</p>
                    {bet.notes && <p className="text-sm text-muted-foreground mt-2 italic">"{bet.notes}"</p>}
                  </div>

<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                    <div className="text-right">
                      <p className="text-sm text-muted-foreground">Odd: {bet.odd}</p>
                      <p className="text-sm text-muted-foreground">Stake: R$ {bet.stake}</p>
                      <p className="text-sm text-muted-foreground">Retorno: R$ {(bet.odd * bet.stake).toFixed(2)}</p>
                    </div>

<div className="flex flex-col items-center gap-2">
                      {bet.result ? (
                        <>
                          <Badge
                            variant={bet.result === "win" ? "default" : "destructive"}
                            className={
                              bet.result === "win" ? "bg-green-600" : bet.result === "push" ? "bg-yellow-600" : ""
                            }
                          >
                            {bet.result === "win" ? "VITÓRIA" : bet.result === "loss" ? "DERROTA" : "EMPATE"}
                          </Badge>
                          <div className="flex items-center gap-1">
                            {(bet.profit || 0) > 0 ? (
                              <TrendingUp className="w-4 h-4 text-green-400" />
                            ) : (
                              <TrendingDown className="w-4 h-4 text-red-400" />
                            )}
                            <span className={`font-bold ${(bet.profit || 0) > 0 ? "text-green-400" : "text-red-400"}`}>
                              {(bet.profit || 0) > 0 ? "+" : ""}R$ {(bet.profit || 0).toFixed(2)}
                            </span>
                          </div>
                        </>
                      ) : (
                        <div className="space-y-2">
                          <Badge variant="outline">PENDENTE</Badge>
                          <div className="flex gap-1">
                            <Button
                              size="sm"
                              onClick={() => handleUpdateResult(bet.id, "win")}
                              className="bg-green-600 hover:bg-green-700 text-white"
                            >
                              Win
                            </Button>
                            <Button
                              size="sm"
                              onClick={() => handleUpdateResult(bet.id, "loss")}
                              className="bg-red-600 hover:bg-red-700 text-white"
                            >
                              Loss
                            </Button>
                            <Button
                              size="sm"
                              onClick={() => handleUpdateResult(bet.id, "push")}
                              className="bg-yellow-600 hover:bg-yellow-700 text-white"
                            >
                              Push
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>

<div className="flex gap-2">
                      <Button size="sm" variant="outline" onClick={() => handleEditBet(bet)}>
                        <Edit className="w-4 h-4" />
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleDeleteBet(bet.id)}
                        className="text-red-400 hover:text-red-300"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

{/* Dialog de Edição */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="bg-dark-900 border-dark-700">
          <DialogHeader>
            <DialogTitle>Editar Aposta</DialogTitle>
            <DialogDescription>Faça as alterações necessárias na aposta</DialogDescription>
          </DialogHeader>
          {editingBet && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Data</Label>
                  <Input
                    type="date"
                    value={editingBet.date}
                    onChange={(e) => setEditingBet({ ...editingBet, date: e.target.value })}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Esporte</Label>
                  <Input
                    value={editingBet.sport}
                    onChange={(e) => setEditingBet({ ...editingBet, sport: e.target.value })}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Liga</Label>
                <Input
                  value={editingBet.league}
                  onChange={(e) => setEditingBet({ ...editingBet, league: e.target.value })}
                  className="bg-dark-800 border-dark-700 focus:border-gold-400"
                />
              </div>
              <div className="space-y-2">
                <Label>Jogo</Label>
                <Input
                  value={editingBet.match}
                  onChange={(e) => setEditingBet({ ...editingBet, match: e.target.value })}
                  className="bg-dark-800 border-dark-700 focus:border-gold-400"
                />
              </div>
              <div className="space-y-2">
                <Label>Mercado</Label>
                <Input
                  value={editingBet.market}
                  onChange={(e) => setEditingBet({ ...editingBet, market: e.target.value })}
                  className="bg-dark-800 border-dark-700 focus:border-gold-400"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Odd</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={editingBet.odd}
                    onChange={(e) => setEditingBet({ ...editingBet, odd: Number.parseFloat(e.target.value) })}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Stake (R$)</Label>
                  <Input
                    type="number"
                    step="0.01"
                    value={editingBet.stake}
                    onChange={(e) => setEditingBet({ ...editingBet, stake: Number.parseFloat(e.target.value) })}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Observações</Label>
                <Textarea
                  value={editingBet.notes || ""}
                  onChange={(e) => setEditingBet({ ...editingBet, notes: e.target.value })}
                  className="bg-dark-800 border-dark-700 focus:border-gold-400"
                />
              </div>
              <div className="flex gap-2 pt-4">
                <Button onClick={handleSaveEdit} className="gradient-gold text-dark-900">
                  Salvar Alterações
                </Button>
                <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
                  Cancelar
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/analytics/analytics.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { BetsService, type Bet } from "@/lib/services/bets"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { BarChart3, TrendingUp, Target, PieChart, Activity } from "lucide-react"

export function Analytics() {
  const { user } = useAuth()
  const [bets, setBets] = useState<Bet[]>([])
  const [timeframe, setTimeframe] = useState("all")
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (user) {
      loadBets()
    }
  }, [user])

const loadBets = async () => {
    if (!user) return

setIsLoading(true)
    try {
      const userBets = await BetsService.getUserBets(user.id)
      setBets(userBets)
    } catch (error) {
      console.error("Erro ao carregar apostas:", error)
    } finally {
      setIsLoading(false)
    }
  }

const getFilteredBets = () => {
    const now = new Date()
    const startDate = new Date()

switch (timeframe) {
      case "week":
        startDate.setDate(now.getDate() - 7)
        break
      case "month":
        startDate.setMonth(now.getMonth() - 1)
        break
      case "3months":
        startDate.setMonth(now.getMonth() - 3)
        break
      case "year":
        startDate.setFullYear(now.getFullYear() - 1)
        break
      default:
        return bets
    }

return bets.filter((bet) => new Date(bet.date) >= startDate)
  }

const filteredBets = getFilteredBets()
  const completedBets = filteredBets.filter((bet) => bet.result)

// Estatísticas gerais
  const totalBets = completedBets.length
  const winningBets = completedBets.filter((bet) => bet.result === "win").length
  const losingBets = completedBets.filter((bet) => bet.result === "loss").length
  const pushBets = completedBets.filter((bet) => bet.result === "push").length
  const winRate = totalBets > 0 ? (winningBets / totalBets) * 100 : 0
  const totalStaked = completedBets.reduce((sum, bet) => sum + bet.stake, 0)
  const totalProfit = completedBets.reduce((sum, bet) => sum + (bet.profit || 0), 0)
  const roi = totalStaked > 0 ? (totalProfit / totalStaked) * 100 : 0
  const avgOdd = totalBets > 0 ? completedBets.reduce((sum, bet) => sum + bet.odd, 0) / totalBets : 0
  const avgStake = totalBets > 0 ? totalStaked / totalBets : 0

// Análise por esporte
  const sportStats = completedBets.reduce(
    (acc, bet) => {
      if (!acc[bet.sport]) {
        acc[bet.sport] = { total: 0, wins: 0, profit: 0, staked: 0 }
      }
      acc[bet.sport].total++
      if (bet.result === "win") acc[bet.sport].wins++
      acc[bet.sport].profit += bet.profit || 0
      acc[bet.sport].staked += bet.stake
      return acc
    },
    {} as Record<string, { total: number; wins: number; profit: number; staked: number }>,
  )

// Análise por mercado
  const marketStats = completedBets.reduce(
    (acc, bet) => {
      if (!acc[bet.market]) {
        acc[bet.market] = { total: 0, wins: 0, profit: 0 }
      }
      acc[bet.market].total++
      if (bet.result === "win") acc[bet.market].wins++
      acc[bet.market].profit += bet.profit || 0
      return acc
    },
    {} as Record<string, { total: number; wins: number; profit: number }>,
  )

// Análise por faixa de odd
  const oddRanges = {
    "1.01-1.50": completedBets.filter((bet) => bet.odd >= 1.01 && bet.odd <= 1.5),
    "1.51-2.00": completedBets.filter((bet) => bet.odd >= 1.51 && bet.odd <= 2.0),
    "2.01-3.00": completedBets.filter((bet) => bet.odd >= 2.01 && bet.odd <= 3.0),
    "3.01+": completedBets.filter((bet) => bet.odd >= 3.01),
  }

const oddRangeStats = Object.entries(oddRanges).map(([range, bets]) => ({
    range,
    total: bets.length,
    wins: bets.filter((bet) => bet.result === "win").length,
    winRate: bets.length > 0 ? (bets.filter((bet) => bet.result === "win").length / bets.length) * 100 : 0,
    profit: bets.reduce((sum, bet) => sum + (bet.profit || 0), 0),
  }))

// Evolução mensal
  const monthlyStats = completedBets.reduce(
    (acc, bet) => {
      const month = bet.date.substring(0, 7) // YYYY-MM
      if (!acc[month]) {
        acc[month] = { profit: 0, bets: 0, wins: 0 }
      }
      acc[month].profit += bet.profit || 0
      acc[month].bets++
      if (bet.result === "win") acc[month].wins++
      return acc
    },
    {} as Record<string, { profit: number; bets: number; wins: number }>,
  )

const monthlyData = Object.entries(monthlyStats)
    .sort(([a], [b]) => a.localeCompare(b))
    .slice(-6) // Últimos 6 meses

if (isLoading) {
    return (
      <div className="space-y-6 p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-dark-800 rounded w-48 mb-4"></div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="h-32 bg-dark-800 rounded-xl"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div className="flex items-center gap-2">
          <BarChart3 className="w-6 h-6 text-gold-400" />
          <h1 className="text-3xl font-display font-bold text-gradient">Análises Avançadas</h1>
        </div>
        <Select value={timeframe} onValueChange={setTimeframe}>
          <SelectTrigger className="w-48 bg-dark-800 border-dark-700 focus:border-gold-400">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Todo o período</SelectItem>
            <SelectItem value="week">Últimos 7 dias</SelectItem>
            <SelectItem value="month">Último mês</SelectItem>
            <SelectItem value="3months">Últimos 3 meses</SelectItem>
            <SelectItem value="year">Último ano</SelectItem>
          </SelectContent>
        </Select>
      </div>

{/* Estatísticas Principais */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total de Apostas</p>
                <p className="text-2xl font-bold">{totalBets}</p>
                <p className="text-sm text-muted-foreground">
                  {winningBets}W / {losingBets}L / {pushBets}P
                </p>
              </div>
              <Activity className="w-8 h-8 text-blue-400" />
            </div>
          </CardContent>
        </Card>

<Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Taxa de Acerto</p>
                <p className="text-2xl font-bold">{winRate.toFixed(1)}%</p>
                <p className="text-sm text-muted-foreground">{winRate >= 50 ? "Acima da média" : "Abaixo da média"}</p>
              </div>
              <Target className="w-8 h-8 text-green-400" />
            </div>
          </CardContent>
        </Card>

<Card className="card-premium">
          <CardContent 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 ${roi >= 0 ? "text-green-400" : "text-red-400"}`}>
                  {roi.toFixed(1)}%
                </p>
                <p className="text-sm text-muted-foreground">R$ {totalProfit.toFixed(2)} de lucro</p>
              </div>
              <TrendingUp className={`w-8 h-8 ${roi >= 0 ? "text-green-400" : "text-red-400"}`} />
            </div>
          </CardContent>
        </Card>

<Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Odd Média</p>
                <p className="text-2xl font-bold">{avgOdd.toFixed(2)}</p>
                <p className="text-sm text-muted-foreground">Stake médio: R$ {avgStake.toFixed(2)}</p>
              </div>
              <PieChart className="w-8 h-8 text-purple-400" />
            </div>
          </CardContent>
        </Card>
      </div>

{/* Análise por Esporte */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle>Performance por Esporte</CardTitle>
          <CardDescription>Análise detalhada de cada modalidade esportiva</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Object.entries(sportStats).map(([sport, stats]) => {
              const sportWinRate = (stats.wins / stats.total) * 100
              const sportROI = stats.staked > 0 ? (stats.profit / stats.staked) * 100 : 0

return (
                <div key={sport} className="flex items-center justify-between p-4 bg-dark-800 rounded-lg">
                  <div className="flex-1">
                    <h3 className="font-semibold">{sport}</h3>
                    <p className="text-sm text-muted-foreground">
                      {stats.total} apostas • {stats.wins} vitórias
                    </p>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <p className="text-sm font-medium">{sportWinRate.toFixed(1)}%</p>
                      <p className="text-xs text-muted-foreground">Taxa de acerto</p>
                    </div>
                    <div className="text-right">
                      <p className={`text-sm font-medium ${sportROI >= 0 ? "text-green-400" : "text-red-400"}`}>
                        {sportROI.toFixed(1)}%
                      </p>
                      <p className="text-xs text-muted-foreground">ROI</p>
                    </div>
                    <div className="text-right">
                      <p className={`text-sm font-medium ${stats.profit >= 0 ? "text-green-400" : "text-red-400"}`}>
                        R$ {stats.profit.toFixed(2)}
                      </p>
                      <p className="text-xs text-muted-foreground">Lucro</p>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

{/* Análise por Mercado */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle>Performance por Mercado</CardTitle>
          <CardDescription>Seus mercados mais lucrativos</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Object.entries(marketStats)
              .sort(([, a], [, b]) => b.profit - a.profit)
              .slice(0, 10)
              .map(([market, stats]) => {
                const marketWinRate = (stats.wins / stats.total) * 100

return (
                  <div key={market} className="flex items-center justify-between p-4 bg-dark-800 rounded-lg">
                    <div className="flex-1">
                      <h3 className="font-semibold">{market}</h3>
                      <p className="text-sm text-muted-foreground">
                        {stats.total} apostas • {stats.wins} vitórias
                      </p>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="text-sm font-medium">{marketWinRate.toFixed(1)}%</p>
                        <p className="text-xs text-muted-foreground">Taxa de acerto</p>
                      </div>
                      <div className="text-right">
                        <p className={`text-sm font-medium ${stats.profit >= 0 ? "text-green-400" : "text-red-400"}`}>
                          R$ {stats.profit.toFixed(2)}
                        </p>
                        <p className="text-xs text-muted-foreground">Lucro</p>
                      </div>
                    </div>
                  </div>
                )
              })}
          </div>
        </CardContent>
      </Card>

{/* Análise por Faixa de Odd */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle>Performance por Faixa de Odd</CardTitle>
          <CardDescription>Como você se sai em diferentes níveis de risco</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {oddRangeStats.map((range) => (
              <div key={range.range} className="p-4 bg-dark-800 rounded-lg">
                <h3 className="font-semibold mb-2">{range.range}</h3>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Apostas:</span>
                    <span className="text-sm font-medium">{range.total}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Vitórias:</span>
                    <span className="text-sm font-medium">{range.wins}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Taxa:</span>
                    <span className="text-sm font-medium">{range.winRate.toFixed(1)}%</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">Lucro:</span>
                    <span className={`text-sm font-medium ${range.profit >= 0 ? "text-green-400" : "text-red-400"}`}>
                      R$ {range.profit.toFixed(2)}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Evolução Mensal */}
      {monthlyData.length > 0 && (
        <Card className="card-premium">
          <CardHeader>
            <CardTitle>Evolução Mensal</CardTitle>
            <CardDescription>Seu progresso ao longo dos meses</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {monthlyData.map(([month, stats]) => {
                const monthWinRate = stats.bets > 0 ? (stats.wins / stats.bets) * 100 : 0

return (
                  <div key={month} className="flex items-center justify-between p-4 bg-dark-800 rounded-lg">
                    <div className="flex-1">
                      <h3 className="font-semibold">
                        {new Date(month + "-01").toLocaleDateString("pt-BR", {
                          month: "long",
                          year: "numeric",
                        })}
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        {stats.bets} apostas • {stats.wins} vitórias
                      </p>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="text-sm font-medium">{monthWinRate.toFixed(1)}%</p>
                        <p className="text-xs text-muted-foreground">Taxa de acerto</p>
                      </div>
                      <div className="text-right">
                        <p className={`text-sm font-medium ${stats.profit >= 0 ? "text-green-400" : "text-red-400"}`}>
                          R$ {stats.profit.toFixed(2)}
                        </p>
                        <p className="text-xs text-muted-foreground">Lucro</p>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}

{/* Recomendações */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle>Recomendações Inteligentes</CardTitle>
          <CardDescription>Insights baseados na sua performance</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {winRate < 50 && (
              <div className="p-4 bg-yellow-900/20 border border-yellow-700 rounded-lg">
                <h4 className="font-semibold text-yellow-400 mb-2">⚠️ Taxa de Acerto Baixa</h4>
                <p className="text-sm text-muted-foreground">
                  Sua taxa de acerto está em {winRate.toFixed(1)}%. Considere ser mais seletivo nas apostas e focar em
                  mercados onde você tem melhor performance.
                </p>
              </div>
            )}

{roi < 0 && (
              <div className="p-4 bg-red-900/20 border border-red-700 rounded-lg">
                <h4 className="font-semibold text-red-400 mb-2">📉 ROI Negativo</h4>
                <p className="text-sm text-muted-foreground">
                  Seu ROI está negativo em {roi.toFixed(1)}%. Revise sua estratégia de gestão de banca e considere
                  reduzir o valor das apostas.
                </p>
              </div>
            )}

{avgOdd > 3 && winRate < 40 && (
              <div className="p-4 bg-blue-900/20 border border-blue-700 rounded-lg">
                <h4 className="font-semibold text-blue-400 mb-2">🎯 Odds Muito Altas</h4>
                <p className="text-sm text-muted-foreground">
                  Você está apostando em odds muito altas (média {avgOdd.toFixed(2)}). Considere apostar em odds mais
                  baixas para aumentar a consistência.
                </p>
              </div>
            )}

{roi > 10 && winRate > 55 && (
              <div className="p-4 bg-green-900/20 border border-green-700 rounded-lg">
                <h4 className="font-semibold text-green-400 mb-2">🚀 Excelente Performance!</h4>
                <p className="text-sm text-muted-foreground">
                  Parabéns! Você está com ROI de {roi.toFixed(1)}% e taxa de acerto de {winRate.toFixed(1)}%. Continue
                  com essa estratégia!
                </p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/bankroll/bankroll-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Target, TrendingUp, TrendingDown, DollarSign, AlertTriangle, Plus } from "lucide-react"
import { toast } from "sonner"

interface BankrollTransaction {
  id: string
  type: "deposit" | "withdrawal"
  amount: number
  description: string
  date: string
}

export function BankrollManagement() {
  const { user, updateUser } = useAuth()
  const [transactions, setTransactions] = useState<BankrollTransaction[]>([])
  const [isTransactionDialogOpen, setIsTransactionDialogOpen] = useState(false)
  const [transactionForm, setTransactionForm] = useState({
    type: "deposit" as "deposit" | "withdrawal",
    amount: 0,
    description: "",
  })
  const [stakeCalculator, setStakeCalculator] = useState({
    percentage: 2,
    customAmount: 0,
    confidence: "medium" as "low" | "medium" | "high",
  })

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

const loadTransactions = () => {
    if (!user) return

const saved = localStorage.getItem(`bankroll_transactions_${user.id}`)
    if (saved) {
      setTransactions(JSON.parse(saved))
    }
  }

const saveTransactions = (newTransactions: BankrollTransaction[]) => {
    if (!user) return

localStorage.setItem(`bankroll_transactions_${user.id}`, JSON.stringify(newTransactions))
    setTransactions(newTransactions)
  }

const handleTransaction = async () => {
    if (!user || transactionForm.amount <= 0) return

const newTransaction: BankrollTransaction = {
      id: Date.now().toString(),
      type: transactionForm.type,
      amount: transactionForm.amount,
      description: transactionForm.description || (transactionForm.type === "deposit" ? "Depósito" : "Saque"),
      date: new Date().toISOString().split("T")[0],
    }

const newTransactions = [newTransaction, ...transactions]
    saveTransactions(newTransactions)

// Atualizar banca do usuário
    const newBankroll =
      transactionForm.type === "deposit"
        ? user.currentBankroll + transactionForm.amount
        : user.currentBankroll - transactionForm.amount

await updateUser({ currentBankroll: newBankroll })

toast.success(`${transactionForm.type === "deposit" ? "Depósito" : "Saque"} realizado com sucesso!`)

setIsTransactionDialogOpen(false)
    setTransactionForm({
      type: "deposit",
      amount: 0,
      description: "",
    })
  }

const getRecommendedStake = () => {
    if (!user) return 0

const basePercentage = stakeCalculator.percentage / 100
    let multiplier = 1

switch (stakeCalculator.confidence) {
      case "low":
        multiplier = 0.5
        break
      case "medium":
        multiplier = 1
        break
      case "high":
        multiplier = 1.5
        break
    }

return user.currentBankroll * basePercentage * multiplier
  }

const getBankrollStatus = () => {
    if (!user) return { status: "neutral", message: "" }

const currentRatio = user.currentBankroll / user.initialBankroll

if (currentRatio >= 1.5) {
      return { status: "excellent", message: "Excelente! Sua banca cresceu significativamente." }
    } else if (currentRatio >= 1.1) {
      return { status: "good", message: "Boa performance! Sua banca está crescendo." }
    } else if (currentRatio >= 0.9) {
      return { status: "neutral", message: "Banca estável. Continue focado na estratégia." }
    } else if (currentRatio >= 0.7) {
      return { status: "warning", message: "Atenção! Sua banca diminuiu. Revise sua estratégia." }
    } else {
      return { status: "danger", message: "Alerta! Banca muito baixa. Considere parar e reavaliar." }
    }
  }

const bankrollStatus = getBankrollStatus()
  const recommendedStake = getRecommendedStake()

if (!user) return null

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-2">
        <Target className="w-6 h-6 text-gold-400" />
        <h1 className="text-3xl font-display font-bold text-gradient">Gestão de Banca</h1>
      </div>

{/* Status da Banca */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Banca Atual</p>
                <p className="text-2xl font-bold">R$ {user.currentBankroll.toLocaleString()}</p>
                <div className="flex items-center mt-2">
                  {user.currentBankroll >= user.initialBankroll ? (
                    <TrendingUp className="w-4 h-4 text-green-400 mr-1" />
                  ) : (
                    <TrendingDown className="w-4 h-4 text-red-400 mr-1" />
                  )}
                  <span
                    className={`text-sm ${user.currentBankroll >= user.initialBankroll ? "text-green-400" : "text-red-400"}`}
                  >
                    {((user.currentBankroll / user.initialBankroll - 1) * 100).toFixed(1)}%
                  </span>
                </div>
              </div>
              <DollarSign className="w-8 h-8 text-gold-400" />
            </div>
          </CardContent>
        </Card>

<Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Banca Inicial</p>
                <p className="text-2xl font-bold">R$ {user.initialBankroll.toLocaleString()}</p>
                <p className="text-sm text-muted-foreground mt-2">Valor de referência</p>
              </div>
              <Target className="w-8 h-8 text-blue-400" />
            </div>
          </CardContent>
        </Card>

<Card className="card-premium">
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Lucro/Prejuízo</p>
                <p className={`text-2xl font-bold ${user.totalProfit >= 0 ? "text-green-400" : "text-red-400"}`}>
                  {user.totalProfit >= 0 ? "+" : ""}R$ {user.totalProfit.toLocaleString()}
                </p>
                <p className="text-sm text-muted-foreground mt-2">ROI: {user.roi.toFixed(1)}%</p>
              </div>
              {user.totalProfit >= 0 ? (
                <TrendingUp className="w-8 h-8 text-green-400" />
              ) : (
                <TrendingDown className="w-8 h-8 text-red-400" />
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Status Alert */}
      <Card
        className={`card-premium border-l-4 ${
          bankrollStatus.status === "excellent"
            ? "border-l-green-400"
            : bankrollStatus.status === "good"
              ? "border-l-blue-400"
              : bankrollStatus.status === "warning"
                ? "border-l-yellow-400"
                : bankrollStatus.status === "danger"
                  ? "border-l-red-400"
                  : "border-l-gray-400"
        }`}
      >
        <CardContent className="p-6">
          <div className="flex items-center gap-3">
            {bankrollStatus.status === "danger" || bankrollStatus.status === "warning" ? (
              <AlertTriangle
                className={`w-6 h-6 ${bankrollStatus.status === "danger" ? "text-red-400" : "text-yellow-400"}`}
              />
            ) : (
              <TrendingUp className="w-6 h-6 text-green-400" />
            )}
            <div>
              <h3 className="font-semibold">Status da Banca</h3>
              <p className="text-muted-foreground">{bankrollStatus.message}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Calculadora de Stake */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle>Calculadora de Stake</CardTitle>
          <CardDescription>Calcule o valor ideal para suas apostas baseado na gestão de banca</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label>Percentual da Banca (%)</Label>
              <Select
                value={stakeCalculator.percentage.toString()}
                onValueChange={(value) =>
                  setStakeCalculator((prev) => ({ ...prev, percentage: Number.parseFloat(value) }))
                }
              >
                <SelectTrigger className="bg-dark-800 border-dark-700 focus:border-gold-400">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0.5">0.5% - Ultra Conservador</SelectItem>
                  <SelectItem value="1">1% - Conservador</SelectItem>
                  <SelectItem value="2">2% - Moderado</SelectItem>
                  <SelectItem value="3">3% - Agressivo</SelectItem>
                  <SelectItem value="5">5% - Muito Agressivo</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Nível de Confiança</Label>
              <Select
                value={stakeCalculator.confidence}
                onValueChange={(value: "low" | "medium" | "high") =>
                  setStakeCalculator((prev) => ({ ...prev, confidence: value }))
                }
              >
                <SelectTrigger className="bg-dark-800 border-dark-700 focus:border-gold-400">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Baixa (50% do stake)</SelectItem>
                  <SelectItem value="medium">Média (100% do stake)</SelectItem>
                  <SelectItem value="high">Alta (150% do stake)</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Stake Recomendado</Label>
              <div className="p-3 bg-dark-800 rounded-lg border border-dark-700">
                <p className="text-2xl font-bold text-gold-400">R$ {recommendedStake.toFixed(2)}</p>
              </div>
            </div>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4 border-t border-dark-700">
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Conservador (1%)</p>
              <p className="font-semibold">R$ {(user.currentBankroll * 0.01).toFixed(2)}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Moderado (2%)</p>
              <p className="font-semibold">R$ {(user.currentBankroll * 0.02).toFixed(2)}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Agressivo (3%)</p>
              <p className="font-semibold">R$ {(user.currentBankroll * 0.03).toFixed(2)}</p>
            </div>
            <div className="text-center">
              <p className="text-sm text-muted-foreground">Muito Agressivo (5%)</p>
              <p className="font-semibold">R$ {(user.currentBankroll * 0.05).toFixed(2)}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Transações */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2">
          <Card className="card-premium">
            <CardHeader>
              <div className="flex justify-between items-center">
                <div>
                  <CardTitle>Histórico de Transações</CardTitle>
                  <CardDescription>Depósitos e saques da sua banca</CardDescription>
                </div>
                <Dialog open={isTransactionDialogOpen} onOpenChange={setIsTransactionDialogOpen}>
                  <DialogTrigger asChild>
                    <Button className="gradient-gold text-dark-900">
                      <Plus className="w-4 h-4 mr-2" />
                      Nova Transação
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="bg-dark-900 border-dark-700">
                    <DialogHeader>
                      <DialogTitle>Nova Transação</DialogTitle>
                      <DialogDescription>Registre um depósito ou saque na sua banca</DialogDescription>
                    </DialogHeader>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label>Tipo de Transação</Label>
                        <Select
                          value={transactionForm.type}
                          onValueChange={(value: "deposit" | "withdrawal") =>
                            setTransactionForm((prev) => ({ ...prev, type: value }))
                          }
                        >
                          <SelectTrigger className="bg-dark-800 border-dark-700 focus:border-gold-400">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="deposit">Depósito</SelectItem>
                            <SelectItem value="withdrawal">Saque</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label>Valor (R$)</Label>
                        <Input
                          type="number"
                          step="0.01"
                          min="0.01"
                          value={transactionForm.amount || ""}
                          onChange={(e) =>
                            setTransactionForm((prev) => ({ ...prev, amount: Number.parseFloat(e.target.value) || 0 }))
                          }
                          className="bg-dark-800 border-dark-700 focus:border-gold-400"
                          placeholder="0.00"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label>Descrição (opcional)</Label>
                        <Input
                          value={transactionForm.description}
                          onChange={(e) => setTransactionForm((prev) => ({ ...prev, description: e.target.value }))}
                          className="bg-dark-800 border-dark-700 focus:border-gold-400"
                          placeholder="Ex: Depósito inicial, Saque de lucros..."
                        />
                      </div>
                      <div className="flex gap-2 pt-4">
                        <Button onClick={handleTransaction} className="gradient-gold text-dark-900">
                          Confirmar Transação
                        </Button>
                        <Button variant="outline" onClick={() => setIsTransactionDialogOpen(false)}>
                          Cancelar
                        </Button>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>
              </div>
            </CardHeader>
            <CardContent>
              {transactions.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-muted-foreground">Nenhuma transação registrada ainda.</p>
                  <p className="text-sm text-muted-foreground mt-2">
                    Registre depósitos e saques para controlar sua banca.
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {transactions.slice(0, 10).map((transaction) => (
                    <div key={transaction.id} className="flex items-center justify-between p-3 bg-dark-800 rounded-lg">
                      <div className="flex items-center gap-3">
                        <div
                          className={`w-3 h-3 rounded-full ${transaction.type === "deposit" ? "bg-green-400" : "bg-red-400"}`}
                        />
                        <div>
                          <p className="font-medium">{transaction.description}</p>
                          <p className="text-sm text-muted-foreground">{transaction.date}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p
                          className={`font-semibold ${transaction.type === "deposit" ? "text-green-400" : "text-red-400"}`}
                        >
                          {transaction.type === "deposit" ? "+" : "-"}R$ {transaction.amount.toFixed(2)}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {transaction.type === "deposit" ? "Depósito" : "Saque"}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

{/* Regras de Gestão */}
        <div>
          <Card className="card-premium">
            <CardHeader>
              <CardTitle>📋 Regras de Gestão</CardTitle>
              <CardDescription>Princípios fundamentais para proteger sua banca</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-gold-400 rounded-full mt-2" />
                  <div>
                    <h4 className="font-semibold text-sm">Nunca aposte mais de 5% da banca</h4>
                    <p className="text-xs text-muted-foreground">Protege contra perdas devastadoras</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-gold-400 rounded-full mt-2" />
                  <div>
                    <h4 className="font-semibold text-sm">Defina stop-loss</h4>
                    <p className="text-xs text-muted-foreground">Pare quando perder 20% da banca</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-gold-400 rounded-full mt-2" />
                  <div>
                    <h4 className="font-semibold text-sm">Seja consistente</h4>
                    <p className="text-xs text-muted-foreground">Mantenha o mesmo percentual sempre</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-2 h-2 bg-gold-400 rounded-full mt-2" />
                  <div>
                    <h4 className="font-semibold text-sm">Registre tudo</h4>
                    <p className="text-xs text-muted-foreground">Controle total das movimentações</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/contexts/auth-context"
import { BetsService } from "@/lib/services/bets"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, TrendingDown, DollarSign, Target, Calendar, Activity } from "lucide-react"

export function Dashboard() {
  const { user } = useAuth()
  const [timeframe, setTimeframe] = useState("month")
  const [stats, setStats] = useState({
    totalBets: 0,
    totalProfit: 0,
    winRate: 0,
    avgOdd: 0,
    totalStaked: 0,
  })
  const [allTimeStats, setAllTimeStats] = useState({
    totalBets: 0,
    totalProfit: 0,
    winRate: 0,
    avgOdd: 0,
    totalStaked: 0,
  })
  const [recentBets, setRecentBets] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    if (user) {
      loadDashboardData()
    }
  }, [user]) // Apenas quando o ID do usuário mudar

useEffect(() => {
    if (user && allTimeStats.totalBets > 0) {
      // Recalcular stats do período quando timeframe mudar
      loadFilteredStats()
    }
  }, [timeframe, allTimeStats]) // Separar a lógica de filtro

const loadDashboardData = async () => {
    if (!user) return

setIsLoading(true)
    try {
      // Carregar todas as apostas do usuário
      const allBets = await BetsService.getUserBets(user.id)

// Calcular estatísticas de todo o período
      const allStats = calculateStats(allBets)
      setAllTimeStats(allStats)

// Calcular estatísticas do período selecionado
      const filteredBets = getFilteredBets(allBets)
      const periodStats = calculateStats(filteredBets)
      setStats(periodStats)

// Carregar apostas recentes
      const bets = await BetsService.getUserBets(user.id, 5)
      setRecentBets(bets)
    } catch (error) {
      console.error("Erro ao carregar dados do dashboard:", error)
    } finally {
      setIsLoading(false)
    }
  }

const loadFilteredStats = async () => {
    if (!user) return

try {
      const allBets = await BetsService.getUserBets(user.id)
      const filteredBets = getFilteredBets(allBets)
      const periodStats = calculateStats(filteredBets)
      setStats(periodStats)
    } catch (error) {
      console.error("Erro ao carregar stats filtradas:", error)
    }
  }

const getFilteredBets = (bets: any[]) => {
    if (timeframe === "all") return bets

const now = new Date()
    const startDate = new Date()

switch (timeframe) {
      case "week":
        startDate.setDate(now.getDate() - 7)
        break
      case "month":
        startDate.setMonth(now.getMonth() - 1)
        break
      case "year":
        startDate.setFullYear(now.getFullYear() - 1)
        break
      default:
        return bets
    }

return bets.filter((bet) => new Date(bet.date) >= startDate)
  }

const calculateStats = (bets: any[]) => {
    // Filtrar apenas apostas com resultado definido
    const completedBets = bets.filter((bet) => bet.result !== null)

const totalBets = completedBets.length
    const totalProfit = completedBets.reduce((sum, bet) => sum + (bet.profit || 0), 0)
    const winningBets = completedBets.filter((bet) => bet.result === "win").length
    const winRate = totalBets > 0 ? (winningBets / totalBets) * 100 : 0
    const avgOdd = totalBets > 0 ? completedBets.reduce((sum, bet) => sum + bet.odd, 0) / totalBets : 0
    const totalStaked = completedBets.reduce((sum, bet) => sum + bet.stake, 0)

return {
      totalBets,
      totalProfit,
      winRate,
      avgOdd,
      totalStaked,
    }
  }

// Usar stats do período selecionado para exibição, mas allTimeStats para cálculos de banca
  const currentBankroll = user ? user.initialBankroll + allTimeStats.totalProfit : 0
  const roi = user && user.initialBankroll > 0 ? (allTimeStats.totalProfit / user.initialBankroll) * 100 : 0
  const bankrollChange = user && user.initialBankroll > 0 ? (currentBankroll / user.initialBankroll - 1) * 100 : 0

// Para exibição, usar stats do período selecionado
  const displayStats = timeframe === "all" ? allTimeStats : stats
  const displayROI =
    timeframe === "all"
      ? roi
      : user && user.initialBankroll > 0
        ? (displayStats.totalProfit / user.initialBankroll) * 100
        : 0

const kpis = [
    {
      title: "Banca Atual",
      value: `R$ ${currentBankroll.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
      change: `${bankrollChange >= 0 ? "+" : ""}${bankrollChange.toFixed(1)}%`,
      trend: bankrollChange >= 0 ? "up" : "down",
      icon: DollarSign,
      color: "text-gold-400",
      description: `Base: R$ ${user?.initialBankroll.toLocaleString("pt-BR", { minimumFractionDigits: 2 }) || "0"}`,
    },
    {
      title: "Lucro Total",
      value: `${displayStats.totalProfit >= 0 ? "+" : ""}R$ ${Math.abs(displayStats.totalProfit).toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
      change: `${displayStats.totalStaked > 0 ? `R$ ${displayStats.totalStaked.toFixed(2)} apostado` : "Sem apostas"}`,
      trend: displayStats.totalProfit >= 0 ? "up" : "down",
      icon: TrendingUp,
      color: displayStats.totalProfit >= 0 ? "text-green-400" : "text-red-400",
      description: `${displayStats.totalBets} apostas finalizadas`,
    },
    {
      title: "ROI",
      value: `${displayROI >= 0 ? "+" : ""}${displayROI.toFixed(1)}%`,
      change: `${timeframe === "week" ? "7 dias" : timeframe === "month" ? "30 dias" : timeframe === "year" ? "1 ano" : "Total"}`,
      trend: displayROI >= 0 ? "up" : "down",
      icon: Target,
      color: displayROI >= 0 ? "text-blue-400" : "text-red-400",
      description: `Retorno sobre investimento`,
    },
    {
      title: "Taxa de Acerto",
      value: `${displayStats.winRate.toFixed(1)}%`,
      change: `${displayStats.totalBets > 0 ? `${displayStats.totalBets} apostas` : "Sem dados"}`,
      trend: displayStats.winRate >= 50 ? "up" : "down",
      icon: Activity,
      color: displayStats.winRate >= 50 ? "text-purple-400" : "text-orange-400",
      description: `${displayStats.totalBets > 0 ? `Odd média: ${displayStats.avgOdd.toFixed(2)}` : "Faça sua primeira aposta"}`,
    },
  ]

if (isLoading) {
    return (
      <div className="space-y-6 p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-dark-800 rounded w-48 mb-4"></div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-32 bg-dark-800 rounded-xl"></div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-3xl font-display font-bold text-gradient">Dashboard</h1>
          <p className="text-muted-foreground">Bem-vindo de volta, {user?.name}</p>
        </div>
        <div className="flex gap-2">
          <Button
            variant={timeframe === "week" ? "default" : "outline"}
            size="sm"
            onClick={() => setTimeframe("week")}
            className={timeframe === "week" ? "gradient-gold text-dark-900" : ""}
          >
            7 dias
          </Button>
          <Button
            variant={timeframe === "month" ? "default" : "outline"}
            size="sm"
            onClick={() => setTimeframe("month")}
            className={timeframe === "month" ? "gradient-gold text-dark-900" : ""}
          >
            30 dias
          </Button>
          <Button
            variant={timeframe === "year" ? "default" : "outline"}
            size="sm"
            onClick={() => setTimeframe("year")}
            className={timeframe === "year" ? "gradient-gold text-dark-900" : ""}
          >
            1 ano
          </Button>
          <Button
            variant={timeframe === "all" ? "default" : "outline"}
            size="sm"
            onClick={() => setTimeframe("all")}
            className={timeframe === "all" ? "gradient-gold text-dark-900" : ""}
          >
            Total
          </Button>
        </div>
      </div>

{/* Alerta se não há apostas */}
      {allTimeStats.totalBets === 0 && (
        <Card className="card-premium border-l-4 border-l-yellow-400">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <Activity className="w-6 h-6 text-yellow-400" />
              <div>
                <h3 className="font-semibold">Comece a apostar!</h3>
                <p className="text-muted-foreground">Registre sua primeira aposta para ver suas estatísticas aqui.</p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* KPIs Dinâmicos */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {kpis.map((kpi, index) => (
          <Card key={index} className="card-premium">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <p className="text-sm font-medium text-muted-foreground">{kpi.title}</p>
                  <p className={`text-2xl font-bold mt-2 ${kpi.color}`}>{kpi.value}</p>
                  <div className="flex items-center mt-2">
                    {kpi.trend === "up" ? (
                      <TrendingUp className="w-4 h-4 text-green-400 mr-1" />
                    ) : (
                      <TrendingDown className="w-4 h-4 text-red-400 mr-1" />
                    )}
                    <span className={`text-sm ${kpi.trend === "up" ? "text-green-400" : "text-red-400"}`}>
                      {kpi.change}
                    </span>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">{kpi.description}</p>
                </div>
                <div className={`p-3 rounded-lg bg-dark-800`}>
                  <kpi.icon className={`w-6 h-6 ${kpi.color}`} />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Resumo do Período */}
      {displayStats.totalBets > 0 && (
        <Card className="card-premium">
          <CardHeader>
            <CardTitle>Resumo do Período</CardTitle>
            <CardDescription>
              Estatísticas para{" "}
              {timeframe === "week"
                ? "últimos 7 dias"
                : timeframe === "month"
                  ? "último mês"
                  : timeframe === "year"
                    ? "último ano"
                    : "todo o período"}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="text-center p-4 bg-dark-800 rounded-lg">
                <p className="text-2xl font-bold text-blue-400">{displayStats.totalBets}</p>
                <p className="text-sm text-muted-foreground">Apostas</p>
              </div>
              <div className="text-center p-4 bg-dark-800 rounded-lg">
                <p className="text-2xl font-bold text-green-400">
                  {displayStats.totalBets > 0 ? Math.round((displayStats.winRate / 100) * displayStats.totalBets) : 0}
                </p>
                <p className="text-sm text-muted-foreground">Vitórias</p>
              </div>
              <div className="text-center p-4 bg-dark-800 rounded-lg">
                <p className="text-2xl font-bold text-red-400">
                  {displayStats.totalBets > 0
                    ? displayStats.totalBets - Math.round((displayStats.winRate / 100) * displayStats.totalBets)
                    : 0}
                </p>
                <p className="text-sm text-muted-foreground">Derrotas</p>
              </div>
              <div className="text-center p-4 bg-dark-800 rounded-lg">
                <p className="text-2xl font-bold text-purple-400">{displayStats.avgOdd.toFixed(2)}</p>
                <p className="text-sm text-muted-foreground">Odd Média</p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Apostas Recentes */}
      <Card className="card-premium">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="w-5 h-5 text-gold-400" />
            Apostas Recentes
          </CardTitle>
          <CardDescription>Suas últimas apostas registradas</CardDescription>
        </CardHeader>
        <CardContent>
          {recentBets.length === 0 ? (
            <div className="text-center py-8">
              <p className="text-muted-foreground">Nenhuma aposta registrada ainda.</p>
              <p className="text-sm text-muted-foreground mt-2">Comece registrando sua primeira aposta!</p>
            </div>
          ) : (
            <div className="space-y-4">
              {recentBets.map((bet) => (
                <div key={bet.id} className="flex items-center justify-between p-4 bg-dark-800 rounded-lg">
                  <div className="flex-1">
                    <p className="font-medium">{bet.match}</p>
                    <p className="text-sm text-muted-foreground">{bet.market}</p>
                    <p className="text-xs text-muted-foreground">
                      {bet.sport} • {bet.league} • {bet.date}
                    </p>
                  </div>
                  <div className="text-right mr-4">
                    <p className="text-sm text-muted-foreground">Odd: {bet.odd}</p>
                    <p className="text-sm text-muted-foreground">Stake: R$ {bet.stake.toFixed(2)}</p>
                    <p className="text-sm text-muted-foreground">Retorno: R$ {(bet.odd * bet.stake).toFixed(2)}</p>
                  </div>
                  <div className="ml-4">
                    {bet.result ? (
                      <>
                        <Badge
                          variant={bet.result === "win" ? "default" : "destructive"}
                          className={
                            bet.result === "win" ? "bg-green-600" : bet.result === "push" ? "bg-yellow-600" : ""
                          }
                        >
                          {bet.result === "win" ? "WIN" : bet.result === "loss" ? "LOSS" : "PUSH"}
                        </Badge>
                        <p
                          className={`text-sm font-medium mt-1 ${(bet.profit || 0) > 0 ? "text-green-400" : "text-red-400"}`}
                        >
                          {(bet.profit || 0) > 0 ? "+" : ""}R$ {(bet.profit || 0).toFixed(2)}
                        </p>
                      </>
                    ) : (
                      <Badge variant="outline">PENDENTE</Badge>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

{/* Dicas Baseadas na Performance */}
      {allTimeStats.totalBets >= 5 && (
        <Card className="card-premium">
          <CardHeader>
            <CardTitle>💡 Insights Inteligentes</CardTitle>
            <CardDescription>Recomendações baseadas na sua performance</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {allTimeStats.winRate < 45 && (
                <div className="p-4 bg-red-900/20 border border-red-700 rounded-lg">
                  <p className="text-sm">
                    <strong>⚠️ Taxa de acerto baixa:</strong> Sua taxa está em {allTimeStats.winRate.toFixed(1)}%.
                    Considere ser mais seletivo nas apostas e focar em mercados que você conhece melhor.
                  </p>
                </div>
              )}

{roi < -10 && (
                <div className="p-4 bg-red-900/20 border border-red-700 rounded-lg">
                  <p className="text-sm">
                    <strong>📉 ROI muito negativo:</strong> Seu ROI está em {roi.toFixed(1)}%. Considere reduzir o valor
                    das apostas e revisar sua estratégia.
                  </p>
                </div>
              )}

{allTimeStats.avgOdd > 4 && allTimeStats.winRate < 30 && (
                <div className="p-4 bg-yellow-900/20 border border-yellow-700 rounded-lg">
                  <p className="text-sm">
                    <strong>🎯 Odds muito altas:</strong> Odd média de {allTimeStats.avgOdd.toFixed(2)} com baixa taxa
                    de acerto. Tente apostar em odds mais baixas para aumentar a consistência.
                  </p>
                </div>
              )}

{roi > 15 && allTimeStats.winRate > 55 && (
                <div className="p-4 bg-green-900/20 border border-green-700 rounded-lg">
                  <p className="text-sm">
                    <strong>🚀 Performance excepcional!</strong> ROI de {roi.toFixed(1)}% e{" "}
                    {allTimeStats.winRate.toFixed(1)}% de acerto. Continue com essa estratégia!
                  </p>
                </div>
              )}

{allTimeStats.totalBets >= 10 && allTimeStats.winRate >= 50 && roi > 5 && (
                <div className="p-4 bg-blue-900/20 border border-blue-700 rounded-lg">
                  <p className="text-sm">
                    <strong>📈 Consistência comprovada:</strong> Com {allTimeStats.totalBets} apostas, você mantém boa
                    performance. Considere aumentar gradualmente o valor das apostas.
                  </p>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/bets/layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { redirect } from "next/navigation"
import { useEffect } from "react"

export default function BetsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()

useEffect(() => {
    if (!user && !isLoading) {
      redirect("/")
    }
  }, [user, isLoading])

if (isLoading) {
    return (
      <div className="min-h-screen bg-dark-900 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-gold-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gold-400 font-medium">Carregando...</p>
        </div>
      </div>
    )
  }

if (!user) {
    return null
  }

return <AppLayout>{children}</AppLayout>
}
[V0_FILE]typescriptreact:file="app/analytics/layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { redirect } from "next/navigation"
import { useEffect } from "react"

export default function AnalyticsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()

useEffect(() => {
    if (!user && !isLoading) {
      redirect("/")
    }
  }, [user, isLoading])

if (!user) {
    return null
  }

return <AppLayout>{children}</AppLayout>
}
[V0_FILE]typescriptreact:file="app/bankroll/layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { redirect } from "next/navigation"
import { useEffect } from "react"

export default function BankrollLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()

useEffect(() => {
    if (!user && !isLoading) {
      redirect("/")
    }
  }, [user, isLoading])

if (!user) {
    return null
  }

return <AppLayout>{children}</AppLayout>
}
[V0_FILE]typescriptreact:file="app/profile/layout.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { redirect } from "next/navigation"
import { useEffect } from "react"

export default function ProfileLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()

useEffect(() => {
    if (!user && !isLoading) {
      redirect("/")
    }
  }, [user, isLoading])

if (!user) {
    return null
  }

return <AppLayout>{children}</AppLayout>
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Dashboard } from "@/components/dashboard/dashboard"

export default function DashboardPage() {
  return <Dashboard />
}
[V0_FILE]typescriptreact:file="app/bets/new/page.tsx" isEdit="true" isMerged="true"
"use client"

import { BetForm } from "@/components/bets/bet-form"

export default function NewBetPage() {
  return <BetForm />
}
[V0_FILE]typescriptreact:file="app/bets/history/page.tsx" isEdit="true" isMerged="true"
"use client"

import { BetHistory } from "@/components/bets/bet-history"

export default function BetHistoryPage() {
  return <BetHistory />
}
[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Analytics } from "@/components/analytics/analytics"

export default function AnalyticsPage() {
  return <Analytics />
}
[V0_FILE]typescriptreact:file="app/bankroll/page.tsx" isEdit="true" isMerged="true"
"use client"

import { BankrollManagement } from "@/components/bankroll/bankroll-management"

export default function BankrollPage() {
  return <BankrollManagement />
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true"
"use client"

import { UserProfile } from "@/components/profile/user-profile"

export default function ProfilePage() {
  return <UserProfile />
}
[V0_FILE]typescriptreact:file="components/profile/user-profile.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
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 { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { User, Calendar, TrendingUp, Target, Award, Settings } from "lucide-react"
import { toast } from "sonner"

export function UserProfile() {
  const { user, updateUser } = useAuth()
  const [isEditing, setIsEditing] = useState(false)
  const [formData, setFormData] = useState({
    name: user?.name || "",
    nickname: user?.nickname || "",
    initialBankroll: user?.initialBankroll || 0,
  })

const handleSave = async () => {
    if (!user) return

try {
      await updateUser({
        name: formData.name,
        nickname: formData.nickname,
        initialBankroll: formData.initialBankroll,
      })
      setIsEditing(false)
      toast.success("Perfil atualizado com sucesso!")
    } catch (error) {
      toast.error("Erro ao atualizar perfil")
    }
  }

const handleCancel = () => {
    setFormData({
      name: user?.name || "",
      nickname: user?.nickname || "",
      initialBankroll: user?.initialBankroll || 0,
    })
    setIsEditing(false)
  }

const getProfileLevel = () => {
    if (!user) return { level: "Iniciante", color: "bg-gray-600" }

const roi = user.roi
    if (roi >= 20) return { level: "Lenda", color: "bg-purple-600" }
    if (roi >= 15) return { level: "Expert", color: "bg-gold-400" }
    if (roi >= 10) return { level: "Avançado", color: "bg-blue-600" }
    if (roi >= 5) return { level: "Intermediário", color: "bg-green-600" }
    if (roi >= 0) return { level: "Iniciante", color: "bg-gray-600" }
    return { level: "Aprendiz", color: "bg-red-600" }
  }

const getAchievements = () => {
    if (!user) return []

const achievements = []

if (user.totalProfit > 0) {
      achievements.push({ name: "Primeiro Lucro", description: "Obteve seu primeiro lucro", icon: "💰" })
    }

if (user.roi >= 10) {
      achievements.push({ name: "ROI Master", description: "Alcançou ROI de 10%+", icon: "📈" })
    }

if (user.currentBankroll >= user.initialBankroll * 2) {
      achievements.push({ name: "Dobrou a Banca", description: "Dobrou o valor inicial", icon: "🚀" })
    }

if (user.roi >= 5 && user.totalProfit > 1000) {
      achievements.push({ name: "Trader Consistente", description: "ROI positivo com lucro significativo", icon: "🎯" })
    }

return achievements
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((word) => word.charAt(0))
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

const profileLevel = getProfileLevel()
  const achievements = getAchievements()

if (!user) return null

return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-2">
        <User className="w-6 h-6 text-gold-400" />
        <h1 className="text-3xl font-display font-bold text-gradient">Meu Perfil</h1>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Perfil Principal */}
        <div className="lg:col-span-2 space-y-6">
          <Card className="card-premium">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Settings className="w-5 h-5 text-gold-400" />
                Informações Pessoais
              </CardTitle>
              <CardDescription>Gerencie suas informações de perfil</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Avatar e Info Básica */}
              <div className="flex items-center gap-6">
                <div className="relative">
                  <Avatar className="w-24 h-24">
                    <AvatarFallback className="bg-gold-400 text-dark-900 text-2xl font-bold">
                      {getInitials(user.name)}
                    </AvatarFallback>
                  </Avatar>
                </div>
                <div className="flex-1">
                  <h2 className="text-2xl font-bold">{user.name}</h2>
                  {user.nickname && <p className="text-muted-foreground">@{user.nickname}</p>}
                  <div className="flex items-center gap-2 mt-2">
                    <Badge className={`${profileLevel.color} text-white`}>{profileLevel.level}</Badge>
                    <Badge variant="outline">
                      <Calendar className="w-3 h-3 mr-1" />
                      Membro desde {user.createdAt.toLocaleDateString()}
                    </Badge>
                  </div>
                </div>
              </div>

{/* Formulário de Edição */}
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold">Dados do Perfil</h3>
                  {!isEditing ? (
                    <Button onClick={() => setIsEditing(true)} variant="outline">
                      Editar Perfil
                    </Button>
                  ) : (
                    <div className="flex gap-2">
                      <Button onClick={handleSave} className="gradient-gold text-dark-900">
                        Salvar
                      </Button>
                      <Button onClick={handleCancel} variant="outline">
                        Cancelar
                      </Button>
                    </div>
                  )}
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Nome Completo</Label>
                    <Input
                      id="name"
                      value={isEditing ? formData.name : user.name}
                      onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                      disabled={!isEditing}
                      className="bg-dark-800 border-dark-700 focus:border-gold-400"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="nickname">Apelido</Label>
                    <Input
                      id="nickname"
                      value={isEditing ? formData.nickname : user.nickname || ""}
                      onChange={(e) => setFormData((prev) => ({ ...prev, nickname: e.target.value }))}
                      disabled={!isEditing}
                      placeholder="Seu apelido"
                      className="bg-dark-800 border-dark-700 focus:border-gold-400"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="email">E-mail</Label>
                  <Input id="email" value={user.email} disabled className="bg-dark-800 border-dark-700 opacity-50" />
                  <p className="text-xs text-muted-foreground">O e-mail não pode ser alterado</p>
                </div>

<div className="space-y-2">
                  <Label htmlFor="initialBankroll">Banca Inicial (R$)</Label>
                  <Input
                    id="initialBankroll"
                    type="number"
                    step="0.01"
                    value={isEditing ? formData.initialBankroll : user.initialBankroll}
                    onChange={(e) =>
                      setFormData((prev) => ({ ...prev, initialBankroll: Number.parseFloat(e.target.value) || 0 }))
                    }
                    disabled={!isEditing}
                    className="bg-dark-800 border-dark-700 focus:border-gold-400"
                  />
                  <p className="text-xs text-muted-foreground">Valor usado como referência para cálculos de ROI</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Conquistas */}
          <Card className="card-premium">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Award className="w-5 h-5 text-gold-400" />
                Conquistas
              </CardTitle>
              <CardDescription>Suas conquistas e marcos alcançados</CardDescription>
            </CardHeader>
            <CardContent>
              {achievements.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-muted-foreground">Nenhuma conquista ainda.</p>
                  <p className="text-sm text-muted-foreground mt-2">Continue apostando para desbloquear conquistas!</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {achievements.map((achievement, index) => (
                    <div key={index} className="flex items-center gap-3 p-4 bg-dark-800 rounded-lg">
                      <div className="text-2xl">{achievement.icon}</div>
                      <div>
                        <h4 className="font-semibold">{achievement.name}</h4>
                        <p className="text-sm text-muted-foreground">{achievement.description}</p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

{/* Sidebar com Estatísticas */}
        <div className="space-y-6">
          {/* Avatar Grande */}
          <Card className="card-premium">
            <CardContent className="p-6 text-center">
              <Avatar className="w-32 h-32 mx-auto mb-4">
                <AvatarFallback className="bg-gradient-to-br from-gold-400 to-gold-600 text-dark-900 text-4xl font-bold">
                  {getInitials(user.name)}
                </AvatarFallback>
              </Avatar>
              <h2 className="text-xl font-bold">{user.name}</h2>
              {user.nickname && <p className="text-muted-foreground">@{user.nickname}</p>}
              <Badge className={`${profileLevel.color} text-white mt-2`}>{profileLevel.level}</Badge>
            </CardContent>
          </Card>

{/* Estatísticas Rápidas */}
          <Card className="card-premium">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="w-5 h-5 text-gold-400" />
                Estatísticas
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Banca Atual:</span>
                  <span className="font-semibold">R$ {user.currentBankroll.toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Banca Inicial:</span>
                  <span className="font-semibold">R$ {user.initialBankroll.toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Lucro Total:</span>
                  <span className={`font-semibold ${user.totalProfit >= 0 ? "text-green-400" : "text-red-400"}`}>
                    {user.totalProfit >= 0 ? "+" : ""}R$ {user.totalProfit.toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">ROI:</span>
                  <span className={`font-semibold ${user.roi >= 0 ? "text-green-400" : "text-red-400"}`}>
                    {user.roi.toFixed(1)}%
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Nível e Progresso */}
          <Card className="card-premium">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Target className="w-5 h-5 text-gold-400" />
                Nível do Trader
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center space-y-4">
                <div
                  className={`w-20 h-20 rounded-full ${profileLevel.color} flex items-center justify-center mx-auto`}
                >
                  <span className="text-2xl font-bold text-white">{profileLevel.level.charAt(0)}</span>
                </div>
                <div>
                  <h3 className="text-xl font-bold">{profileLevel.level}</h3>
                  <p className="text-sm text-muted-foreground">
                    {profileLevel.level === "Lenda"
                      ? "Você é uma lenda!"
                      : profileLevel.level === "Expert"
                        ? "Continue assim!"
                        : profileLevel.level === "Avançado"
                          ? "Quase um expert!"
                          : profileLevel.level === "Intermediário"
                            ? "Progredindo bem!"
                            : profileLevel.level === "Iniciante"
                              ? "Bom começo!"
                              : "Continue praticando!"}
                  </p>
                </div>
              </div>

<div className="mt-6 space-y-2">
                <h4 className="font-semibold text-sm">Próximo Nível:</h4>
                <div className="space-y-1">
                  {profileLevel.level === "Aprendiz" && (
                    <p className="text-xs text-muted-foreground">ROI positivo para Iniciante</p>
                  )}
                  {profileLevel.level === "Iniciante" && (
                    <p className="text-xs text-muted-foreground">ROI de 5%+ para Intermediário</p>
                  )}
                  {profileLevel.level === "Intermediário" && (
                    <p className="text-xs text-muted-foreground">ROI de 10%+ para Avançado</p>
                  )}
                  {profileLevel.level === "Avançado" && (
                    <p className="text-xs text-muted-foreground">ROI de 15%+ para Expert</p>
                  )}
                  {profileLevel.level === "Expert" && (
                    <p className="text-xs text-muted-foreground">ROI de 20%+ para Lenda</p>
                  )}
                  {profileLevel.level === "Lenda" && (
                    <p className="text-xs text-muted-foreground">Você já é o máximo! 🏆</p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>

{/* Dicas Personalizadas */}
          <Card className="card-premium">
            <CardHeader>
              <CardTitle>💡 Dica Personalizada</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {user.roi < 0 ? (
                  <p className="text-sm text-muted-foreground">
                    Seu ROI está negativo. Considere revisar sua estratégia e reduzir o valor das apostas até encontrar
                    consistência.
                  </p>
                ) : user.roi < 5 ? (
                  <p className="text-sm text-muted-foreground">
                    Você está no caminho certo! Mantenha a disciplina e foque em apostas de valor para melhorar seu ROI.
                  </p>
                ) : user.roi < 10 ? (
                  <p className="text-sm text-muted-foreground">
                    Excelente performance! Continue com sua estratégia atual e considere aumentar gradualmente sua
                    banca.
                  </p>
                ) : (
                  <p className="text-sm text-muted-foreground">
                    Performance excepcional! Você está entre os melhores traders. Continue assim e considere
                    compartilhar suas estratégias.
                  </p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/layout/app-layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { BarChart3, Plus, History, User, Settings, LogOut, Menu, X, TrendingUp, Target, HelpCircle } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"

interface AppLayoutProps {
  children: React.ReactNode
}

export function AppLayout({ children }: AppLayoutProps) {
  const { user, logout } = useAuth()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const pathname = usePathname()

const navigation = [
    { name: "Dashboard", href: "/dashboard", icon: BarChart3 },
    { name: "Nova Aposta", href: "/bets/new", icon: Plus },
    { name: "Histórico", href: "/bets/history", icon: History },
    { name: "Análises", href: "/analytics", icon: TrendingUp },
    { name: "Gestão de Banca", href: "/bankroll", icon: Target },
    { name: "Perfil", href: "/profile", icon: User },
  ]

const isActive = (href: string) => pathname === href

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((word) => word.charAt(0))
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

return (
    <div className="min-h-screen bg-dark-900 flex">
      {/* Sidebar Desktop */}
      <div className="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0">
        <div className="flex flex-col flex-grow bg-dark-800 border-r border-dark-700">
          {/* Logo */}
          <div className="flex items-center h-16 px-4 border-b border-dark-700">
            <Image src="/logo.png" alt="BankTracker Pro" width={40} height={40} className="rounded-full" />
            <span className="ml-3 text-xl font-display font-bold text-gradient">BANKTRACKER PRO</span>
          </div>

{/* Navigation */}
          <nav className="flex-1 px-4 py-6 space-y-2">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
                  isActive(item.href)
                    ? "bg-gold-400 text-dark-900"
                    : "text-gray-300 hover:bg-dark-700 hover:text-gold-400"
                }`}
              >
                <item.icon className="w-5 h-5 mr-3" />
                {item.name}
              </Link>
            ))}
          </nav>

{/* User Menu */}
          <div className="p-4 border-t border-dark-700">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="w-full justify-start p-2">
                  <Avatar className="w-8 h-8 mr-3">
                    <AvatarFallback className="bg-gold-400 text-dark-900 font-bold">
                      {user ? getInitials(user.name) : "U"}
                    </AvatarFallback>
                  </Avatar>
                  <div className="text-left">
                    <p className="text-sm font-medium">{user?.name}</p>
                    <p className="text-xs text-muted-foreground">{user?.email}</p>
                  </div>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                  <Link href="/profile" className="flex items-center">
                    <User className="w-4 h-4 mr-2" />
                    Perfil
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Settings className="w-4 h-4 mr-2" />
                  Configurações
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <HelpCircle className="w-4 h-4 mr-2" />
                  Ajuda
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={logout} className="text-red-400">
                  <LogOut className="w-4 h-4 mr-2" />
                  Sair
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </div>

{/* Mobile Sidebar */}
      {sidebarOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div className="fixed inset-0 bg-black/50" onClick={() => setSidebarOpen(false)} />
          <div className="fixed inset-y-0 left-0 w-64 bg-dark-800 border-r border-dark-700">
            <div className="flex items-center justify-between h-16 px-4 border-b border-dark-700">
              <div className="flex items-center">
                <Image src="/logo.png" alt="BankTracker Pro" width={32} height={32} className="rounded-full" />
                <span className="ml-2 text-lg font-display font-bold text-gradient">BANKTRACKER PRO</span>
              </div>
              <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)}>
                <X className="w-5 h-5" />
              </Button>
            </div>
            <nav className="flex-1 px-4 py-6 space-y-2">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  onClick={() => setSidebarOpen(false)}
                  className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
                    isActive(item.href)
                      ? "bg-gold-400 text-dark-900"
                      : "text-gray-300 hover:bg-dark-700 hover:text-gold-400"
                  }`}
                >
                  <item.icon className="w-5 h-5 mr-3" />
                  {item.name}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      )}

{/* Main Content */}
      <div className="flex-1 lg:pl-64">
        {/* Mobile Header */}
        <div className="lg:hidden flex items-center justify-between h-16 px-4 bg-dark-800 border-b border-dark-700">
          <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(true)}>
            <Menu className="w-5 h-5" />
          </Button>
          <div className="flex items-center">
            <Image src="/logo.png" alt="BankTracker Pro" width={32} height={32} className="rounded-full" />
            <span className="ml-2 text-lg font-display font-bold text-gradient">BT PRO</span>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <Avatar className="w-8 h-8">
                  <AvatarFallback className="bg-gold-400 text-dark-900 font-bold">
                    {user ? getInitials(user.name) : "U"}
                  </AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Minha Conta</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem asChild>
                <Link href="/profile" className="flex items-center">
                  <User className="w-4 h-4 mr-2" />
                  Perfil
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem onClick={logout} className="text-red-400">
                <LogOut className="w-4 h-4 mr-2" />
                Sair
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

{/* Page Content */}
        <main className="flex-1">{children}</main>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/disable-email-confirmation.sql" isMerged="true"
-- Desabilitar confirmação de email no Supabase
-- Este script deve ser executado no painel do Supabase ou via SQL Editor

-- Atualizar configurações de autenticação
UPDATE auth.config 
SET 
  enable_signup = true,
  enable_email_confirmations = false,
  enable_email_change_confirmations = false
WHERE id = 1;

-- Se a tabela config não existir, usar as configurações do projeto
-- Estas configurações devem ser definidas no painel do Supabase:
-- Authentication > Settings > Email Auth
-- - Enable email confirmations: OFF
-- - Enable email change confirmations: OFF

-- Alternativa: Confirmar todos os usuários existentes automaticamente
UPDATE auth.users 
SET 
  email_confirmed_at = NOW(),
  confirmed_at = NOW()
WHERE email_confirmed_at IS NULL;
[V0_FILE]sql:file="scripts/setup-auth.sql" isMerged="true"
-- Configurar autenticação no Supabase
-- Execute este script no SQL Editor do Supabase

-- 1. Desabilitar confirmação de email
UPDATE auth.config 
SET 
  enable_signup = true,
  enable_email_confirmations = false,
  enable_email_change_confirmations = false,
  enable_phone_confirmations = false
WHERE true;

-- 2. Confirmar todos os usuários existentes
UPDATE auth.users 
SET 
  email_confirmed_at = NOW(),
  phone_confirmed_at = NOW(),
  confirmed_at = NOW()
WHERE email_confirmed_at IS NULL OR confirmed_at IS NULL;

-- 3. Recriar tabela users com estrutura correta
DROP TABLE IF EXISTS public.users CASCADE;

CREATE TABLE public.users (
  id UUID REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL,
  nickname TEXT,
  avatar TEXT,
  logo TEXT,
  initial_bankroll DECIMAL(12,2) DEFAULT 1000.00,
  current_bankroll DECIMAL(12,2) DEFAULT 1000.00,
  total_profit DECIMAL(12,2) DEFAULT 0.00,
  roi DECIMAL(8,2) DEFAULT 0.00,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 4. Recriar tabela bets
DROP TABLE IF EXISTS public.bets CASCADE;

CREATE TABLE public.bets (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES public.users(id) ON DELETE CASCADE NOT NULL,
  date DATE NOT NULL,
  sport TEXT NOT NULL,
  league TEXT NOT NULL,
  match TEXT NOT NULL,
  market TEXT NOT NULL,
  odd DECIMAL(8,2) NOT NULL,
  stake DECIMAL(12,2) NOT NULL,
  result TEXT CHECK (result IN ('win', 'loss', 'push')),
  profit DECIMAL(12,2),
  notes TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 5. Criar índices
CREATE INDEX idx_users_email ON public.users(email);
CREATE INDEX idx_bets_user_id ON public.bets(user_id);
CREATE INDEX idx_bets_date ON public.bets(date);
CREATE INDEX idx_bets_result ON public.bets(result);

-- 6. Função para atualizar updated_at
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

-- 7. Triggers para updated_at
DROP TRIGGER IF EXISTS update_users_updated_at ON public.users;
CREATE TRIGGER update_users_updated_at 
    BEFORE UPDATE ON public.users
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

DROP TRIGGER IF EXISTS update_bets_updated_at ON public.bets;
CREATE TRIGGER update_bets_updated_at 
    BEFORE UPDATE ON public.bets
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();

-- 8. Habilitar RLS
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.bets ENABLE ROW LEVEL SECURITY;

-- 9. Políticas RLS para users
DROP POLICY IF EXISTS "Users can view own profile" ON public.users;
CREATE POLICY "Users can view own profile" ON public.users
    FOR SELECT USING (auth.uid() = id);

DROP POLICY IF EXISTS "Users can update own profile" ON public.users;
CREATE POLICY "Users can update own profile" ON public.users
    FOR UPDATE USING (auth.uid() = id);

DROP POLICY IF EXISTS "Users can insert own profile" ON public.users;
CREATE POLICY "Users can insert own profile" ON public.users
    FOR INSERT WITH CHECK (auth.uid() = id);

-- 10. Políticas RLS para bets
DROP POLICY IF EXISTS "Users can view own bets" ON public.bets;
CREATE POLICY "Users can view own bets" ON public.bets
    FOR SELECT USING (auth.uid() = user_id);

DROP POLICY IF EXISTS "Users can insert own bets" ON public.bets;
CREATE POLICY "Users can insert own bets" ON public.bets
    FOR INSERT WITH CHECK (auth.uid() = user_id);

DROP POLICY IF EXISTS "Users can update own bets" ON public.bets;
CREATE POLICY "Users can update own bets" ON public.bets
    FOR UPDATE USING (auth.uid() = user_id);

DROP POLICY IF EXISTS "Users can delete own bets" ON public.bets;
CREATE POLICY "Users can delete own bets" ON public.bets
    FOR DELETE USING (auth.uid() = user_id);

-- 11. Função para criar perfil automaticamente
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.users (id, name, email, nickname, initial_bankroll, current_bankroll, total_profit, roi)
  VALUES (
    NEW.id,
    COALESCE(NEW.raw_user_meta_data->>'name', 'Usuário'),
    NEW.email,
    '',
    1000.00,
    1000.00,
    0.00,
    0.00
  );
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- 12. Trigger para criar perfil automaticamente
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- 13. Função para calcular estatísticas do usuário
CREATE OR REPLACE FUNCTION public.update_user_stats(user_uuid UUID)
RETURNS VOID AS $$
DECLARE
  total_profit_calc DECIMAL(12,2);
  initial_bank DECIMAL(12,2);
  roi_calc DECIMAL(8,2);
BEGIN
  -- Buscar banca inicial
  SELECT initial_bankroll INTO initial_bank
  FROM public.users
  WHERE id = user_uuid;
  
  -- Calcular lucro total
  SELECT COALESCE(SUM(profit), 0) INTO total_profit_calc
  FROM public.bets
  WHERE user_id = user_uuid AND result IS NOT NULL;
  
  -- Calcular ROI
  IF initial_bank > 0 THEN
    roi_calc := (total_profit_calc / initial_bank) * 100;
  ELSE
    roi_calc := 0;
  END IF;
  
  -- Atualizar usuário
  UPDATE public.users
  SET 
    total_profit = total_profit_calc,
    current_bankroll = initial_bankroll + total_profit_calc,
    roi = roi_calc,
    updated_at = NOW()
  WHERE id = user_uuid;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- 14. Trigger para atualizar stats quando bet muda
CREATE OR REPLACE FUNCTION public.update_stats_on_bet_change()
RETURNS TRIGGER AS $$
BEGIN
  -- Atualizar stats do usuário
  IF TG_OP = 'DELETE' THEN
    PERFORM public.update_user_stats(OLD.user_id);
    RETURN OLD;
  ELSE
    PERFORM public.update_user_stats(NEW.user_id);
    RETURN NEW;
  END IF;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

DROP TRIGGER IF EXISTS update_user_stats_on_bet_change ON public.bets;
CREATE TRIGGER update_user_stats_on_bet_change
  AFTER INSERT OR UPDATE OR DELETE ON public.bets
  FOR EACH ROW EXECUTE FUNCTION public.update_stats_on_bet_change();
[V0_FILE]typescript:file="lib/services/bets.ts" isEdit="true" isMerged="true"
import { supabase } from "@/lib/supabase/client"

export interface BetFormData {
  date: string
  sport: string
  league: string
  match: string
  market: string
  odd: number
  stake: number
  result?: "win" | "loss" | "push"
  notes?: string
}

export interface Bet {
  id: string
  user_id: string
  date: string
  sport: string
  league: string
  match: string
  market: string
  odd: number
  stake: number
  result: "win" | "loss" | "push" | null
  profit: number | null
  notes: string | null
  created_at: string
  updated_at: string
}

export class BetsService {
  static async createBet(userId: string, betData: BetFormData): Promise<Bet | null> {
    try {
      const profit =
        betData.result === "win"
          ? betData.odd * betData.stake - betData.stake
          : betData.result === "loss"
            ? -betData.stake
            : 0

const { data, error } = await supabase
        .from("bets")
        .insert({
          user_id: userId,
          date: betData.date,
          sport: betData.sport,
          league: betData.league,
          match: betData.match,
          market: betData.market,
          odd: betData.odd,
          stake: betData.stake,
          result: betData.result || null,
          profit: betData.result ? profit : null,
          notes: betData.notes || null,
        })
        .select()
        .single()

if (error) {
        console.error("Erro ao criar aposta:", error)
        return null
      }

return data
    } catch (error) {
      console.error("Erro inesperado ao criar aposta:", error)
      return null
    }
  }

static async getUserBets(userId: string, limit?: number): Promise<Bet[]> {
    try {
      let query = supabase.from("bets").select("*").eq("user_id", userId).order("created_at", { ascending: false })

if (limit) {
        query = query.limit(limit)
      }

const { data, error } = await query

if (error) {
        console.error("Erro ao buscar apostas:", error)
        return []
      }

return data || []
    } catch (error) {
      console.error("Erro inesperado ao buscar apostas:", error)
      return []
    }
  }

static async updateBet(betId: string, userId: string, updates: Partial<Bet>): Promise<boolean> {
    try {
      // Calcular lucro se resultado foi atualizado
      if (updates.result && updates.odd && updates.stake) {
        updates.profit =
          updates.result === "win"
            ? updates.odd * updates.stake - updates.stake
            : updates.result === "loss"
              ? -updates.stake
              : 0
      }

const { error } = await supabase.from("bets").update(updates).eq("id", betId).eq("user_id", userId)

if (error) {
        console.error("Erro ao atualizar aposta:", error)
        return false
      }

return true
    } catch (error) {
      console.error("Erro inesperado ao atualizar aposta:", error)
      return false
    }
  }

static async deleteBet(betId: string, userId: string): Promise<boolean> {
    try {
      const { error } = await supabase.from("bets").delete().eq("id", betId).eq("user_id", userId)

if (error) {
        console.error("Erro ao deletar aposta:", error)
        return false
      }

return true
    } catch (error) {
      console.error("Erro inesperado ao deletar aposta:", error)
      return false
    }
  }

static async getBetsByDateRange(userId: string, startDate: string, endDate: string): Promise<Bet[]> {
    try {
      const { data, error } = await supabase
        .from("bets")
        .select("*")
        .eq("user_id", userId)
        .gte("date", startDate)
        .lte("date", endDate)
        .order("date", { ascending: false })

if (error) {
        console.error("Erro ao buscar apostas por período:", error)
        return []
      }

return data || []
    } catch (error) {
      console.error("Erro inesperado ao buscar apostas por período:", error)
      return []
    }
  }

static async getBetsBySport(userId: string, sport: string): Promise<Bet[]> {
    try {
      const { data, error } = await supabase
        .from("bets")
        .select("*")
        .eq("user_id", userId)
        .eq("sport", sport)
        .order("created_at", { ascending: false })

if (error) {
        console.error("Erro ao buscar apostas por esporte:", error)
        return []
      }

return data || []
    } catch (error) {
      console.error("Erro inesperado ao buscar apostas por esporte:", error)
      return []
    }
  }

static async getUserStats(userId: string): Promise<{
    totalBets: number
    totalProfit: number
    winRate: number
    avgOdd: number
    totalStaked: number
  }> {
    try {
      const bets = await this.getUserBets(userId)
      const completedBets = bets.filter((bet) => bet.result !== null)

const totalBets = completedBets.length
      const totalProfit = completedBets.reduce((sum, bet) => sum + (bet.profit || 0), 0)
      const winningBets = completedBets.filter((bet) => bet.result === "win").length
      const winRate = totalBets > 0 ? (winningBets / totalBets) * 100 : 0
      const avgOdd = totalBets > 0 ? completedBets.reduce((sum, bet) => sum + bet.odd, 0) / totalBets : 0
      const totalStaked = completedBets.reduce((sum, bet) => sum + bet.stake, 0)

return {
        totalBets,
        totalProfit,
        winRate,
        avgOdd,
        totalStaked,
      }
    } catch (error) {
      console.error("Erro ao calcular estatísticas:", error)
      return {
        totalBets: 0,
        totalProfit: 0,
        winRate: 0,
        avgOdd: 0,
        totalStaked: 0,
      }
    }
  }
}
[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/contexts/auth-context"
import { AppLayout } from "@/components/layout/app-layout"
import { redirect } from "next/navigation"
import { useEffect } from "react"

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { user, isLoading } = useAuth()

useEffect(() => {
    if (!user && !isLoading) {
      redirect("/")
    }
  }, [user, isLoading])

if (!user) {
    return null
  }

return <AppLayout>{children}</AppLayout>
}
[V0_FILE]typescriptreact:file="components/layout/remove-v0watermark.tsx" url="https://blobs.vusercontent.net/blob/remove-v0watermark-siOTNRCyNuIvYu8gEwZav4Zx9lJm54.tsx" isMerged="true"
[V0_FILE]typescriptreact:file="components/layout/watermark-remover.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"

export function WatermarkRemover() {
  useEffect(() => {
    const removeV0Watermark = () => {
      if (typeof document === "undefined") return

try {
        // Versão mais agressiva - procura divs com position: fixed + bottom
        document.querySelectorAll('div[style*="position: fixed"][style*="bottom"]').forEach((el) => {
          const element = el as HTMLElement
          if (element.innerHTML.includes("Built") || element.innerHTML.includes("v0")) {
            element.remove()
          }
        })

// Backup adicional - qualquer div fixa no canto inferior direito
        document.querySelectorAll('div[style*="position: fixed"][style*="right"]').forEach((el) => {
          const element = el as HTMLElement
          if (
            element.innerHTML.includes("Built") ||
            element.innerHTML.includes("v0") ||
            element.innerHTML.includes("V0")
          ) {
            element.remove()
          }
        })

// Backup genérico para outros casos
        document.querySelectorAll("div, a, span").forEach((el) => {
          const element = el as HTMLElement
          if (
            element.innerText &&
            (element.innerText.includes("Built with V0") ||
              element.innerText.includes("Built with v0") ||
              (element.innerText.includes("Built with") && element.innerText.includes("v0")))
          ) {
            element.remove()
          }
        })
      } catch (error) {
        // Ignorar erros silenciosamente
      }
    }

// Executar imediatamente
    removeV0Watermark()

// Observar mudanças no DOM (caso reapareça)
    let observer: MutationObserver | null = null

try {
      observer = new MutationObserver(removeV0Watermark)
      observer.observe(document.body, { childList: true, subtree: true })
    } catch (error) {
      // Ignorar erros do observer
    }

// Executar periodicamente como backup
    const interval = setInterval(removeV0Watermark, 300)

// Cleanup
    return () => {
      clearInterval(interval)
      observer?.disconnect()
    }
  }, [])

return null
}
[V0_FILE]typescriptreact:file="components/layout/inline-watermark-script.tsx" isEdit="true" isMerged="true"
"use client"

import Script from "next/script"

export function InlineWatermarkScript() {
  return (
    <Script id="remove-v0-watermark" strategy="beforeInteractive">
      {`
        (function() {
          const removeV0Watermark = () => {
            try {
              // Versão mais agressiva - position: fixed + bottom
              document.querySelectorAll('div[style*="position: fixed"][style*="bottom"]').forEach(el => {
                if (el.innerHTML.includes("Built") || el.innerHTML.includes("v0") || el.innerHTML.includes("V0")) {
                  el.remove();
                }
              });
              
              // Backup - position: fixed + right (canto inferior direito)
              document.querySelectorAll('div[style*="position: fixed"][style*="right"]').forEach(el => {
                if (el.innerHTML.includes("Built") || el.innerHTML.includes("v0") || el.innerHTML.includes("V0")) {
                  el.remove();
                }
              });
              
              // Backup genérico
              document.querySelectorAll('div, a, span').forEach(el => {
                if (el.innerText && (
                  el.innerText.includes("Built with V0") ||
                  el.innerText.includes("Built with v0") ||
                  (el.innerText.includes("Built with") && el.innerText.includes("v0"))
                )) {
                  el.remove();
                }
              });
            } catch (e) {
              // Ignorar erros
            }
          };
          
          // Executar imediatamente
          removeV0Watermark();
          
          // Observar mudanças no DOM
          if (typeof MutationObserver !== 'undefined') {
            const observer = new MutationObserver(removeV0Watermark);
            observer.observe(document.body, { childList: true, subtree: true });
          }
          
          // Backup com interval mais rápido
          setInterval(removeV0Watermark, 200);
        })();
      `}
    </Script>
  )
}
[V0_FILE]typescriptreact:file="components/layout/body-end-script.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"

export function BodyEndScript() {
  useEffect(() => {
    // Adicionar script no final do body
    const script = document.createElement("script")
    script.innerHTML = `
      const removeV0Watermark = () => {
        // Versão mais agressiva - position: fixed + bottom
        document.querySelectorAll('div[style*="position: fixed"][style*="bottom"]').forEach(el => {
          if (el.innerHTML.includes("Built") || el.innerHTML.includes("v0") || el.innerHTML.includes("V0")) {
            el.remove();
          }
        });
        
        // Backup - qualquer div fixa pequena no canto inferior direito
        document.querySelectorAll('div[style*="position: fixed"][style*="right"][style*="bottom"]').forEach(el => {
          // Remove qualquer div pequena no canto (provável marca d'água)
          const rect = el.getBoundingClientRect();
          if (rect.width < 200 && rect.height < 100) {
            el.remove();
          }
        });
      };
      
      // executa já no load
      removeV0Watermark();
      
      // observa mudanças no DOM (caso reapareça)
      const observer = new MutationObserver(removeV0Watermark);
      observer.observe(document.body, { childList: true, subtree: true });
    `

document.body.appendChild(script)

return () => {
      // Cleanup
      if (script.parentNode) {
        script.parentNode.removeChild(script)
      }
    }
  }, [])

return null
}
[V0_FILE]typescriptreact:file="components/layout/aggressive-watermark-remover.tsx" isMerged="true"
"use client"

import { useEffect } from "react"

export function AggressiveWatermarkRemover() {
  useEffect(() => {
    const removeAnyFixedBottomDiv = () => {
      if (typeof document === "undefined") return

try {
        // Versão ultra-agressiva - remove qualquer div pequena fixa no canto
        document.querySelectorAll('div[style*="position: fixed"]').forEach((el) => {
          const element = el as HTMLElement
          const style = element.style

// Verificar se está no canto inferior direito
          if (style.position === "fixed" && (style.bottom || style.right)) {
            const rect = element.getBoundingClientRect()

// Se é pequena (provável marca d'água) e está no canto
            if (rect.width < 200 && rect.height < 100 && rect.right > window.innerWidth - 200) {
              element.remove()
            }
          }

// Verificar por z-index muito alto (típico de marca d'água)
          if (style.zIndex && Number.parseInt(style.zIndex) > 999999) {
            element.remove()
          }
        })
      } catch (error) {
        // Ignorar erros
      }
    }

// Executar após um delay para pegar elementos que aparecem depois
    const timeout = setTimeout(removeAnyFixedBottomDiv, 1000)

// Executar periodicamente
    const interval = setInterval(removeAnyFixedBottomDiv, 2000)

return () => {
      clearTimeout(timeout)
      clearInterval(interval)
    }
  }, [])

return null
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 28 28 28;
    --foreground: 255 255 255;
    --card: 28 28 28;
    --card-foreground: 255 255 255;
    --popover: 28 28 28;
    --popover-foreground: 255 255 255;
    --primary: 255 215 0;
    --primary-foreground: 28 28 28;
    --secondary: 42 42 42;
    --secondary-foreground: 255 215 0;
    --muted: 42 42 42;
    --muted-foreground: 160 160 160;
    --accent: 255 215 0;
    --accent-foreground: 28 28 28;
    --destructive: 239 68 68;
    --destructive-foreground: 255 255 255;
    --border: 42 42 42;
    --input: 42 42 42;
    --ring: 255 215 0;
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-dark-900 text-foreground font-sans;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display;
  }
}

@layer components {
  .gradient-gold {
    background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
  }

.text-gradient {
    background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

.glass-effect {
    background: rgba(28, 28, 28, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.1);
  }

.card-premium {
    @apply bg-dark-900 border border-dark-700 rounded-xl shadow-2xl;
    background: linear-gradient(145deg, #1c1c1c 0%, #2a2a2a 100%);
  }
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #1c1c1c;
}

::-webkit-scrollbar-thumb {
  background: #ffd700;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e6c200;
}

/* Ocultar marca d'água e elementos indesejados */
[data-v0],
.v0-watermark,
iframe[src*="v0.dev"],
div[style*="Built with"],
*[href*="v0.dev"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ocultar elementos flutuantes suspeitos */
div[style*="position: fixed"][style*="bottom"][style*="right"][style*="z-index"] {
  display: none !important;
}

/* Ocultar especificamente elementos com z-index muito alto */
*[style*="z-index: 2147483647"],
*[style*="z-index: 999999"],
*[style*="z-index: 9999"] {
  display: none !important;
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import { useAuth } from "@/contexts/auth-context"
import { AuthForm } from "@/components/auth/auth-form"
import { useRouter } from "next/navigation"
import { useEffect } from "react"

export default function Home() {
  const { user, isLoading } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (user && !isLoading) {
      router.push("/dashboard")
    }
  }, [user, isLoading, router])

if (!user) {
    return <AuthForm />
  }

// Mostrar loading enquanto redireciona
  return (
    <div className="min-h-screen bg-dark-900 flex items-center justify-center">
      <div className="text-center">
        <div className="w-16 h-16 border-4 border-gold-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
        <p className="text-gold-400 font-medium">Redirecionando...</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isEdit="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import { toast } from "sonner"
import { supabase } from "@/lib/supabase/client"
import type { User as SupabaseUser } from "@supabase/supabase-js"

interface User {
  id: string
  name: string
  email: string
  nickname?: string
  avatar?: string
  logo?: string
  initialBankroll: number
  currentBankroll: number
  totalProfit: number
  roi: number
  createdAt: Date
}

interface AuthContextType {
  user: User | null
  login: (email: string, password: string) => Promise<boolean>
  register: (name: string, email: string, password: string) => Promise<boolean>
  logout: () => Promise<void>
  updateUser: (userData: Partial<User>) => Promise<void>
  isLoading: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

// Função para buscar perfil do usuário
  const fetchUserProfile = async (authUser: SupabaseUser): Promise<User | null> => {
    try {
      const { data: profile, error } = await supabase.from("users").select("*").eq("id", authUser.id).single()

if (error) {
        console.error("Erro ao buscar perfil:", error)
        return null
      }

if (!profile) {
        console.error("Perfil não encontrado")
        return null
      }

return {
        id: profile.id,
        name: profile.name,
        email: profile.email,
        nickname: profile.nickname || "",
        avatar: profile.avatar || "",
        logo: profile.logo || "",
        initialBankroll: Number(profile.initial_bankroll),
        currentBankroll: Number(profile.current_bankroll),
        totalProfit: Number(profile.total_profit),
        roi: Number(profile.roi),
        createdAt: new Date(profile.created_at),
      }
    } catch (error) {
      console.error("Erro inesperado ao buscar perfil:", error)
      return null
    }
  }

// Inicializar sessão
  useEffect(() => {
    let mounted = true

const initializeAuth = async () => {
      try {
        // Verificar sessão atual
        const {
          data: { session },
          error,
        } = await supabase.auth.getSession()

if (error) {
          console.error("Erro ao obter sessão:", error)
          if (mounted) setIsLoading(false)
          return
        }

if (session?.user) {
          const profile = await fetchUserProfile(session.user)
          if (mounted && profile) {
            setUser(profile)
          }
        }
      } catch (error) {
        console.error("Erro na inicialização:", error)
      } finally {
        if (mounted) setIsLoading(false)
      }
    }

initializeAuth()

// Listener para mudanças de autenticação
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange(async (event, session) => {
      console.log("Auth state changed:", event, session?.user?.email)

if (event === "SIGNED_IN" && session?.user) {
        const profile = await fetchUserProfile(session.user)
        if (mounted && profile) {
          setUser(profile)
        }
      } else if (event === "SIGNED_OUT") {
        if (mounted) setUser(null)
      }
    })

return () => {
      mounted = false
      subscription.unsubscribe()
    }
  }, [])

const register = async (name: string, email: string, password: string): Promise<boolean> => {
    setIsLoading(true)
    try {
      console.log("Iniciando registro para:", email)

// 1. Criar usuário no Supabase Auth
      const { data: authData, error: authError } = await supabase.auth.signUp({
        email,
        password,
        options: {
          data: {
            name: name,
          },
        },
      })

if (authError) {
        console.error("Erro no registro:", authError)
        toast.error(authError.message)
        setIsLoading(false)
        return false
      }

if (!authData.user) {
        toast.error("Erro ao criar usuário")
        setIsLoading(false)
        return false
      }

console.log("Usuário criado no auth:", authData.user.id)

// 2. Aguardar um pouco para o trigger criar o perfil
      await new Promise((resolve) => setTimeout(resolve, 1000))

// 3. Verificar se o perfil foi criado pelo trigger
      let profile = await fetchUserProfile(authData.user)

// 4. Se não foi criado pelo trigger, criar manualmente
      if (!profile) {
        console.log("Criando perfil manualmente...")
        const { error: profileError } = await supabase.from("users").insert({
          id: authData.user.id,
          name,
          email,
          nickname: "",
          avatar: "",
          logo: "",
          initial_bankroll: 1000,
          current_bankroll: 1000,
          total_profit: 0,
          roi: 0,
        })

if (profileError) {
          console.error("Erro ao criar perfil:", profileError)
          toast.error("Erro ao criar perfil do usuário")
          setIsLoading(false)
          return false
        }

// Buscar perfil novamente
        profile = await fetchUserProfile(authData.user)
      }

if (!profile) {
        toast.error("Erro ao carregar perfil do usuário")
        setIsLoading(false)
        return false
      }

// 5. Se há sessão, definir usuário
      if (authData.session) {
        setUser(profile)
        toast.success("Conta criada com sucesso! Bem-vindo!")
      } else {
        // 6. Se não há sessão, fazer login
        console.log("Fazendo login após registro...")
        const loginSuccess = await login(email, password)
        if (!loginSuccess) {
          toast.error("Conta criada, mas erro no login. Tente fazer login manualmente.")
          setIsLoading(false)
          return false
        }
      }

setIsLoading(false)
      return true
    } catch (error) {
      console.error("Erro inesperado no registro:", error)
      toast.error("Erro inesperado ao criar conta")
      setIsLoading(false)
      return false
    }
  }

const login = async (email: string, password: string): Promise<boolean> => {
    setIsLoading(true)
    try {
      console.log("Iniciando login para:", email)

const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })

if (error) {
        console.error("Erro no login:", error)
        toast.error("E-mail ou senha inválidos")
        setIsLoading(false)
        return false
      }

if (!data.user || !data.session) {
        toast.error("Erro na autenticação")
        setIsLoading(false)
        return false
      }

console.log("Login bem-sucedido:", data.user.id)

const profile = await fetchUserProfile(data.user)
      if (!profile) {
        toast.error("Erro ao carregar perfil do usuário")
        setIsLoading(false)
        return false
      }

setUser(profile)
      toast.success("Login realizado com sucesso!")
      setIsLoading(false)
      return true
    } catch (error) {
      console.error("Erro inesperado no login:", error)
      toast.error("Erro inesperado no login")
      setIsLoading(false)
      return false
    }
  }

const logout = async () => {
    try {
      const { error } = await supabase.auth.signOut()
      if (error) {
        console.error("Erro no logout:", error)
        toast.error("Erro ao fazer logout")
        return
      }

setUser(null)
      toast.success("Logout realizado com sucesso!")
    } catch (error) {
      console.error("Erro inesperado no logout:", error)
      toast.error("Erro inesperado no logout")
    }
  }

const updateUser = async (userData: Partial<User>) => {
    if (!user) return

try {
      const updateData: any = {}

if (userData.name !== undefined) updateData.name = userData.name
      if (userData.nickname !== undefined) updateData.nickname = userData.nickname
      if (userData.initialBankroll !== undefined) updateData.initial_bankroll = userData.initialBankroll
      if (userData.currentBankroll !== undefined) updateData.current_bankroll = userData.currentBankroll
      if (userData.totalProfit !== undefined) updateData.total_profit = userData.totalProfit
      if (userData.roi !== undefined) updateData.roi = userData.roi

const { error } = await supabase.from("users").update(updateData).eq("id", user.id)

if (error) {
        console.error("Erro ao atualizar usuário:", error)
        toast.error("Erro ao atualizar perfil")
        return
      }

const updatedUser = { ...user, ...userData }
      setUser(updatedUser)
    } catch (error) {
      console.error("Erro inesperado ao atualizar usuário:", error)
      toast.error("Erro inesperado ao atualizar perfil")
    }
  }

return (
    <AuthContext.Provider
      value={{
        user,
        login,
        register,
        logout,
        updateUser,
        isLoading,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

// Verificar se as variáveis de ambiente estão definidas
if (!supabaseUrl || !supabaseAnonKey) {
  console.error("Variáveis de ambiente do Supabase não encontradas!")
  console.error("NEXT_PUBLIC_SUPABASE_URL:", supabaseUrl ? "✓" : "✗")
  console.error("NEXT_PUBLIC_SUPABASE_ANON_KEY:", supabaseAnonKey ? "✓" : "✗")
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
    flowType: "pkce",
  },
})

export type Database = {
  public: {
    Tables: {
      users: {
        Row: {
          id: string
          name: string
          email: string
          nickname: string | null
          avatar: string | null
          logo: string | null
          initial_bankroll: number
          current_bankroll: number
          total_profit: number
          roi: number
          created_at: string
          updated_at: string
        }
        Insert: {
          id: string
          name: string
          email: string
          nickname?: string | null
          avatar?: string | null
          logo?: string | null
          initial_bankroll?: number
          current_bankroll?: number
          total_profit?: number
          roi?: number
          created_at?: string
          updated_at?: string
        }
        Update: {
          id?: string
          name?: string
          email?: string
          nickname?: string | null
          avatar?: string | null
          logo?: string | null
          initial_bankroll?: number
          current_bankroll?: number
          total_profit?: number
          roi?: number
          updated_at?: string
        }
      }
      bets: {
        Row: {
          id: string
          user_id: string
          date: string
          sport: string
          league: string
          match: string
          market: string
          odd: number
          stake: number
          result: "win" | "loss" | "push" | null
          profit: number | null
          notes: string | null
          created_at: string
          updated_at: string
        }
        Insert: {
          id?: string
          user_id: string
          date: string
          sport: string
          league: string
          match: string
          market: string
          odd: number
          stake: number
          result?: "win" | "loss" | "push" | null
          profit?: number | null
          notes?: string | null
          created_at?: string
          updated_at?: string
        }
        Update: {
          id?: string
          user_id?: string
          date?: string
          sport?: string
          league?: string
          match?: string
          market?: string
          odd?: number
          stake?: number
          result?: "win" | "loss" | "push" | null
          profit?: number | null
          notes?: string | null
          updated_at?: string
        }
      }
    }
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { AuthProvider } from "@/contexts/auth-context"
import { WatermarkRemover } from "@/components/layout/watermark-remover"
import { InlineWatermarkScript } from "@/components/layout/inline-watermark-script"
import { BodyEndScript } from "@/components/layout/body-end-script"
import { AggressiveWatermarkRemover } from "@/components/layout/aggressive-watermark-remover"
import { Toaster } from "sonner"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "BankTracker Pro - Gestão Profissional de Apostas Esportivas",
  description: "Controle, analise e escale seus lucros com apostas esportivas de forma profissional",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="pt-BR" className="dark">
      <body className={inter.className}>
        <AuthProvider>
          {children}
          <WatermarkRemover />
          <InlineWatermarkScript />
          <BodyEndScript />
          <AggressiveWatermarkRemover />
          <Toaster
            theme="dark"
            position="top-right"
            toastOptions={{
              style: {
                background: "#1C1C1C",
                border: "1px solid #FFD700",
                color: "#FFFFFF",
              },
            }}
          />
        </AuthProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/auth/auth-form.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Eye, EyeOff, Mail, Lock, User, TrendingUp, Zap } from "lucide-react"

export function AuthForm() {
  const { login, register, isLoading } = useAuth()
  const [showPassword, setShowPassword] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  })

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    await login(formData.email, formData.password)
  }

const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault()
    const success = await register(formData.name, formData.email, formData.password)
    if (success) {
      // Limpar formulário após sucesso
      setFormData({
        name: "",
        email: "",
        password: "",
      })
    }
  }

// Função de acesso rápido para demonstração
  const handleQuickAccess = async () => {
    const demoEmail = "demo@banktracker.com"
    const demoPassword = "123456"
    const demoName = "Usuário Demo"

// Primeiro tentar fazer login
    const loginSuccess = await login(demoEmail, demoPassword)

if (!loginSuccess) {
      // Se login falhar, registrar usuário demo
      await register(demoName, demoEmail, demoPassword)
    }
  }

return (
    <div className="min-h-screen bg-dark-900 flex items-center justify-center p-4">
      <div className="w-full max-w-md space-y-8">
        {/* Logo e Header */}
        <div className="text-center space-y-4">
          <div className="flex justify-center">
            <div className="w-20 h-20 bg-gradient-to-br from-gold-400 to-gold-600 rounded-full flex items-center justify-center">
              <span className="text-2xl font-bold text-dark-900">BT</span>
            </div>
          </div>
          <div>
            <h1 className="text-3xl font-display font-bold text-gradient">BANKTRACKER PRO</h1>
            <p className="text-muted-foreground mt-2">Controle profissional de apostas esportivas</p>
          </div>
        </div>

{/* Acesso Rápido */}
        <Card className="card-premium border-gold-400/30">
          <CardContent className="p-4">
            <Button
              onClick={handleQuickAccess}
              disabled={isLoading}
              className="w-full gradient-gold text-dark-900 font-semibold hover:opacity-90 mb-2"
            >
              <Zap className="w-4 h-4 mr-2" />
              {isLoading ? "Entrando..." : "🚀 Acesso Rápido - Entrar Agora"}
            </Button>
            <p className="text-xs text-center text-muted-foreground">
              Clique para entrar imediatamente com uma conta de demonstração
            </p>
          </CardContent>
        </Card>

{/* Formulário */}
        <Card className="card-premium">
          <CardHeader className="space-y-1">
            <div className="flex items-center gap-2 text-gold-400">
              <TrendingUp className="w-5 h-5" />
              <CardTitle className="text-xl">Acesse sua conta</CardTitle>
            </div>
            <CardDescription>Entre ou crie sua conta para começar a lucrar</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs defaultValue="login" className="space-y-4">
              <TabsList className="grid w-full grid-cols-2 bg-dark-800">
                <TabsTrigger
                  value="login"
                  className="data-[state=active]:bg-gold-400 data-[state=active]:text-dark-900"
                >
                  Entrar
                </TabsTrigger>
                <TabsTrigger
                  value="register"
                  className="data-[state=active]:bg-gold-400 data-[state=active]:text-dark-900"
                >
                  Cadastrar
                </TabsTrigger>
              </TabsList>

<TabsContent value="login">
                <form onSubmit={handleLogin} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="email">E-mail</Label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="email"
                        type="email"
                        placeholder="seu@email.com"
                        className="pl-10 bg-dark-800 border-dark-700 focus:border-gold-400"
                        value={formData.email}
                        onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="password">Senha</Label>
                    <div className="relative">
                      <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="password"
                        type={showPassword ? "text" : "password"}
                        placeholder="••••••••"
                        className="pl-10 pr-10 bg-dark-800 border-dark-700 focus:border-gold-400"
                        value={formData.password}
                        onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
                        required
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-3 text-muted-foreground hover:text-gold-400"
                      >
                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                  </div>
                  <Button
                    type="submit"
                    className="w-full gradient-gold text-dark-900 font-semibold hover:opacity-90"
                    disabled={isLoading}
                  >
                    {isLoading ? "Entrando..." : "Entrar"}
                  </Button>
                </form>
              </TabsContent>

<TabsContent value="register">
                <form onSubmit={handleRegister} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="name">Nome completo</Label>
                    <div className="relative">
                      <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="name"
                        type="text"
                        placeholder="Seu nome"
                        className="pl-10 bg-dark-800 border-dark-700 focus:border-gold-400"
                        value={formData.name}
                        onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email-register">E-mail</Label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="email-register"
                        type="email"
                        placeholder="seu@email.com"
                        className="pl-10 bg-dark-800 border-dark-700 focus:border-gold-400"
                        value={formData.email}
                        onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
                        required
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="password-register">Senha</Label>
                    <div className="relative">
                      <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                      <Input
                        id="password-register"
                        type={showPassword ? "text" : "password"}
                        placeholder="••••••••"
                        className="pl-10 pr-10 bg-dark-800 border-dark-700 focus:border-gold-400"
                        value={formData.password}
                        onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
                        required
                        minLength={6}
                      />
                      <button
                        type="button"
                        onClick={() => setShowPassword(!showPassword)}
                        className="absolute right-3 top-3 text-muted-foreground hover:text-gold-400"
                      >
                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      </button>
                    </div>
                    <p className="text-xs text-muted-foreground">Mínimo 6 caracteres</p>
                  </div>
                  <Button
                    type="submit"
                    className="w-full gradient-gold text-dark-900 font-semibold hover:opacity-90"
                    disabled={isLoading}
                  >
                    {isLoading ? "Criando conta..." : "Criar conta e entrar"}
                  </Button>
                  <p className="text-xs text-center text-muted-foreground">
                    Ao criar sua conta, você entra automaticamente na plataforma
                  </p>
                </form>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

{/* Features */}
        <div className="grid grid-cols-3 gap-4 text-center">
          <div className="space-y-2">
            <div className="w-12 h-12 bg-gold-400/10 rounded-lg flex items-center justify-center mx-auto">
              <TrendingUp className="w-6 h-6 text-gold-400" />
            </div>
            <p className="text-sm text-muted-foreground">Análise Avançada</p>
          </div>
          <div className="space-y-2">
            <div className="w-12 h-12 bg-gold-400/10 rounded-lg flex items-center justify-center mx-auto">
              <User className="w-6 h-6 text-gold-400" />
            </div>
            <p className="text-sm text-muted-foreground">Perfil Pro</p>
          </div>
          <div className="space-y-2">
            <div className="w-12 h-12 bg-gold-400/10 rounded-lg flex items-center justify-center mx-auto">
              <Zap className="w-6 h-6 text-gold-400" />
            </div>
            <p className="text-sm text-muted-foreground">Acesso Imediato</p>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="package.json"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "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",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@supabase/supabase-js": "2.57.4"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}</article></body></html>