"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import {
  Settings,
  Upload,
  User,
  Mail,
  MessageSquare,
  Webhook,
  Bot,
  BarChart3,
  Globe,
  Mic,
  MessageCircle,
  FileText,
  Download,
  TestTube,
  Save,
  Eye,
  Edit,
  Trash2,
  Copy,
  Play,
  Calendar,
  Users,
  TrendingUp,
  Activity,
} from "lucide-react"

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("dashboard")

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Painel Administrativo</h1>
          <p className="text-gray-600 mt-2">Gerencie todas as configurações do seu chatbot</p>
        </div>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-8 lg:w-auto lg:inline-grid">
            <TabsTrigger value="dashboard" className="flex items-center gap-2">
              <BarChart3 className="w-4 h-4" />
              Dashboard
            </TabsTrigger>
            <TabsTrigger value="general" className="flex items-center gap-2">
              <Settings className="w-4 h-4" />
              Geral
            </TabsTrigger>
            <TabsTrigger value="flows" className="flex items-center gap-2">
              <MessageSquare className="w-4 h-4" />
              Fluxos
            </TabsTrigger>
            <TabsTrigger value="upload" className="flex items-center gap-2">
              <Upload className="w-4 h-4" />
              Upload
            </TabsTrigger>
            <TabsTrigger value="attendant" className="flex items-center gap-2">
              <User className="w-4 h-4" />
              Atendente
            </TabsTrigger>
            <TabsTrigger value="email" className="flex items-center gap-2">
              <Mail className="w-4 h-4" />
              Email
            </TabsTrigger>
            <TabsTrigger value="webhook" className="flex items-center gap-2">
              <Webhook className="w-4 h-4" />
              Webhook
            </TabsTrigger>
            <TabsTrigger value="agents" className="flex items-center gap-2">
              <Bot className="w-4 h-4" />
              AI Agents
            </TabsTrigger>
          </TabsList>

          {/* Dashboard Tab */}
          <TabsContent value="dashboard" className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total de Conversas</CardTitle>
                  <MessageCircle className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">62</div>
                  <p className="text-xs text-muted-foreground">Fluxos criados</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total de Mensagens</CardTitle>
                  <Mail className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">207</div>
                  <p className="text-xs text-muted-foreground">Todas as mensagens</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Taxa de Conclusão</CardTitle>
                  <TrendingUp className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">61.3%</div>
                  <p className="text-xs text-muted-foreground">Fluxos Concluídos</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Mensagem por Conversa</CardTitle>
                  <Activity className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">3.3</div>
                  <p className="text-xs text-muted-foreground">Média por conversa</p>
                </CardContent>
              </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle>Métricas de Uso</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center p-4 bg-blue-50 rounded-lg">
                      <div className="text-2xl font-bold text-blue-600">129.650</div>
                      <div className="text-sm text-gray-600">Total Tokens Used</div>
                    </div>
                    <div className="text-center p-4 bg-green-50 rounded-lg">
                      <div className="text-2xl font-bold text-green-600">3.813,2</div>
                      <div className="text-sm text-gray-600">Average Tokens per Conversation</div>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center p-4 bg-purple-50 rounded-lg">
                      <div className="text-2xl font-bold text-purple-600">36</div>
                      <div className="text-sm text-gray-600">AI Conversations</div>
                    </div>
                    <div className="text-center p-4 bg-orange-50 rounded-lg">
                      <div className="text-2xl font-bold text-orange-600">$0.1080</div>
                      <div className="text-sm text-gray-600">Cost per Conversation</div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Histórico de Conversas</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {[
                      { date: "18/08/2025", user: "Bia para Google Sheets", status: "Concluída" },
                      { date: "17/08/2025", user: "Fluxo de Teste 2025-08-17", status: "Ativa" },
                      { date: "16/08/2025", user: "Teste", status: "Concluída" },
                    ].map((conv, i) => (
                      <div key={i} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                          <div className="font-medium">{conv.user}</div>
                          <div className="text-sm text-gray-500">{conv.date}</div>
                        </div>
                        <Badge variant={conv.status === "Ativa" ? "default" : "secondary"}>{conv.status}</Badge>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* General Settings Tab */}
          <TabsContent value="general" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Settings className="w-5 h-5" />
                  Configurações Gerais
                </CardTitle>
                <CardDescription>Configure as opções e recursos gerais do plugin.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card className="p-4">
                    <div className="flex items-center gap-3">
                      <Globe className="w-8 h-8 text-blue-500" />
                      <div>
                        <div className="font-medium">Language</div>
                        <div className="text-sm text-green-600">Português</div>
                      </div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="flex items-center gap-3">
                      <Bot className="w-8 h-8 text-green-500" />
                      <div>
                        <div className="font-medium">ChatGPT</div>
                        <div className="text-sm text-green-600">Ativo</div>
                      </div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="flex items-center gap-3">
                      <Mic className="w-8 h-8 text-blue-500" />
                      <div>
                        <div className="font-medium">Voz</div>
                        <div className="text-sm text-green-600">Ativo</div>
                      </div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="flex items-center gap-3">
                      <MessageCircle className="w-8 h-8 text-green-500" />
                      <div>
                        <div className="font-medium">Mensagem de Boas-vindas</div>
                        <div className="text-sm text-green-600">Ativo</div>
                      </div>
                    </div>
                  </Card>
                </div>

                <div className="space-y-4">
                  <div>
                    <Label htmlFor="language">Idioma do Plugin</Label>
                    <Select defaultValue="pt-br">
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="pt-br">Portuguese (BR)</SelectItem>
                        <SelectItem value="en">English</SelectItem>
                        <SelectItem value="es">Español</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <Label>Mensagem de Boas-vindas</Label>
                      <p className="text-sm text-muted-foreground">
                        Ativar para exibir a mensagem de boas-vindas ao lado do ícone do chat quando a página carregar.
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="text-lg font-semibold">Integrações</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Card className="p-4">
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-3">
                          <Bot className="w-8 h-8 text-green-500" />
                          <div>
                            <div className="font-medium">ChatGPT</div>
                            <div className="text-sm text-muted-foreground">
                              Ativar para habilitar a integração com o Chat GPT.
                            </div>
                          </div>
                        </div>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-muted-foreground">
                        Connect with OpenAI ChatGPT for intelligent responses.
                      </p>
                    </Card>

                    <Card className="p-4">
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-3">
                          <Mic className="w-8 h-8 text-blue-500" />
                          <div>
                            <div className="font-medium">Google Voice</div>
                            <div className="text-sm text-muted-foreground">
                              Enable voice synthesis for chat messages.
                            </div>
                          </div>
                        </div>
                        <Switch defaultChecked />
                      </div>
                      <p className="text-sm text-muted-foreground">Enable voice synthesis for chat messages.</p>
                    </Card>
                  </div>
                </div>

                <Button className="w-full">
                  <Save className="w-4 h-4 mr-2" />
                  Salvar Alterações
                </Button>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Flows Tab */}
          <TabsContent value="flows" className="space-y-6">
            <div className="flex justify-between items-center">
              <div>
                <h2 className="text-2xl font-bold">Fluxos de Conversa</h2>
                <p className="text-muted-foreground">
                  Gerencie seus fluxos de conversa. Apenas um fluxo pode estar ativo por vez.
                </p>
              </div>
              <Button>
                <MessageSquare className="w-4 h-4 mr-2" />
                Criar Novo Fluxo
              </Button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total de Fluxos</CardTitle>
                  <BarChart3 className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">2</div>
                  <p className="text-xs text-muted-foreground">Fluxos criados</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Fluxos Ativos</CardTitle>
                  <Activity className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">1</div>
                  <p className="text-xs text-muted-foreground">Em execução</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Total de Leads</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">62</div>
                  <p className="text-xs text-muted-foreground">Gerados pelos fluxos</p>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Atualizados Recentemente</CardTitle>
                  <Calendar className="h-4 w-4 text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">2</div>
                  <p className="text-xs text-muted-foreground">Últimos 7 dias</p>
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Fluxos Disponíveis</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                        <span className="text-blue-600 font-bold">#740</span>
                      </div>
                      <div>
                        <div className="font-medium">Teste</div>
                        <div className="text-sm text-muted-foreground">Publico</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <Switch defaultChecked />
                      <Badge>61 leads</Badge>
                      <div className="text-sm text-muted-foreground">Fluxo-740.json</div>
                      <div className="text-sm text-muted-foreground">3 pages</div>
                      <div className="text-sm text-muted-foreground">18/08/2025 03:04</div>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline">
                          <Eye className="w-4 h-4" />
                        </Button>
                        <Button size="sm" variant="outline">
                          <Edit className="w-4 h-4" />
                        </Button>
                        <Button size="sm" variant="outline">
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                        <span className="text-gray-600 font-bold">#737</span>
                      </div>
                      <div>
                        <div className="font-medium">Fluxo de Teste 2025-08-17 13:49:31</div>
                        <div className="text-sm text-muted-foreground">Publico</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <Switch />
                      <Badge variant="secondary">1 leads</Badge>
                      <div className="text-sm text-muted-foreground">Fluxo-737.json</div>
                      <div className="text-sm text-muted-foreground">3 pages</div>
                      <div className="text-sm text-muted-foreground">17/08/2025 13:49</div>
                      <div className="flex gap-2">
                        <Button size="sm" variant="outline">
                          <Eye className="w-4 h-4" />
                        </Button>
                        <Button size="sm" variant="outline">
                          <Edit className="w-4 h-4" />
                        </Button>
                        <Button size="sm" variant="outline">
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Upload Tab */}
          <TabsContent value="upload" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Upload className="w-5 h-5" />
                  Upload and Backup Flow
                </CardTitle>
                <CardDescription>Gerencie seus fluxos através de upload, download e testes.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card className="p-4 text-center">
                    <Upload className="w-8 h-8 text-red-500 mx-auto mb-2" />
                    <div className="font-medium">Upload JSON</div>
                    <div className="text-sm text-muted-foreground">Import custom flows</div>
                  </Card>

                  <Card className="p-4 text-center">
                    <Download className="w-8 h-8 text-green-500 mx-auto mb-2" />
                    <div className="font-medium">Download Template</div>
                    <div className="text-sm text-muted-foreground">Get flow template</div>
                  </Card>

                  <Card className="p-4 text-center">
                    <TestTube className="w-8 h-8 text-blue-500 mx-auto mb-2" />
                    <div className="font-medium">Test Flow</div>
                    <div className="text-sm text-muted-foreground">Generate demo flow</div>
                  </Card>

                  <Card className="p-4 text-center">
                    <Save className="w-8 h-8 text-purple-500 mx-auto mb-2" />
                    <div className="font-medium">Export Current</div>
                    <div className="text-sm text-muted-foreground">Backup your flow</div>
                  </Card>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Upload JSON File</CardTitle>
                    <CardDescription>
                      Here you can upload your own .json flow file. You can create it manually or ask ChatGPT to
                      generate one for you using the provided template.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                      <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                      <h3 className="text-lg font-medium mb-2">Select JSON File</h3>
                      <p className="text-muted-foreground mb-4">
                        Choose a .json file containing your chatbot flow configuration
                      </p>
                      <div className="flex gap-2 justify-center">
                        <Button variant="outline">Choose JSON File</Button>
                        <Button variant="outline">Browse</Button>
                      </div>
                      <Button className="mt-4">
                        <Upload className="w-4 h-4 mr-2" />
                        Upload JSON
                      </Button>
                    </div>
                  </CardContent>
                </Card>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <FileText className="w-5 h-5" />
                        Flow Template
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground mb-4">
                        Download the .json template file to edit manually or with ChatGPT assistance.
                      </p>
                      <Button variant="outline" className="w-full bg-transparent">
                        <Download className="w-4 h-4 mr-2" />
                        Download Flow Template
                      </Button>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <TestTube className="w-5 h-5" />
                        Test Flow
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground mb-4">
                        Click here to generate an initial flow just to test the chat.
                      </p>
                      <Button className="w-full">
                        <Play className="w-4 h-4 mr-2" />
                        Generate Test Flow
                      </Button>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Save className="w-5 h-5" />
                        Export Current Flow
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground mb-4">
                        Click here to export the current flow for backup or editing.
                      </p>
                      <Button variant="outline" className="w-full bg-transparent">
                        <Download className="w-4 h-4 mr-2" />
                        Export Current Flow
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Attendant Tab */}
          <TabsContent value="attendant" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <User className="w-5 h-5" />
                    Configurações do Atendente
                  </CardTitle>
                  <CardDescription>Personalize a aparência e o comportamento do seu atendente do chat</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div>
                    <Label htmlFor="attendant-name">Nome do Atendente</Label>
                    <Input id="attendant-name" defaultValue="Atendentes" />
                    <p className="text-sm text-muted-foreground mt-1">
                      Digite o nome do atendente que será exibido no chat.
                    </p>
                  </div>

                  <div>
                    <Label>Attendant Icon (Image/Video)</Label>
                    <div className="flex items-center gap-4 mt-2">
                      <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
                        <img
                          src="/placeholder.svg?height=64&width=64"
                          alt="Attendant"
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div className="space-y-2">
                        <div className="flex gap-2">
                          <Button size="sm" variant="outline">
                            Enviar Mídia
                          </Button>
                          <Button size="sm" variant="outline">
                            Remover Mídia
                          </Button>
                        </div>
                        <div className="flex items-center gap-4 text-sm">
                          <label className="flex items-center gap-2">
                            <input type="radio" name="media-type" defaultChecked />
                            Imagem
                          </label>
                          <label className="flex items-center gap-2">
                            <input type="radio" name="media-type" />
                            Vídeo
                          </label>
                        </div>
                        <div className="grid grid-cols-3 gap-2 text-xs">
                          <div>
                            <Label>Chat Icon Size (px):</Label>
                            <Input defaultValue="60" size="sm" />
                          </div>
                          <div>
                            <Label>Header Icon Size (px):</Label>
                            <Input defaultValue="40" size="sm" />
                          </div>
                          <div>
                            <Label>Bot Icon Size (px):</Label>
                            <Input defaultValue="30" size="sm" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label>Teaser</Label>
                    <div className="grid grid-cols-2 gap-4 mt-2">
                      <div>
                        <Label htmlFor="teaser-text-color">Teaser Text Color</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-black rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="teaser-bg-color">Teaser Background</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-white border rounded"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                    </div>
                    <div className="mt-2">
                      <Label htmlFor="teaser-subtitle">Teaser Subtitle</Label>
                      <Input id="teaser-subtitle" defaultValue="Clique para conversar" />
                      <p className="text-sm text-muted-foreground mt-1">Subtitle shown in the chat teaser.</p>
                    </div>
                  </div>

                  <div>
                    <Label>Header</Label>
                    <div className="grid grid-cols-2 gap-4 mt-2">
                      <div>
                        <Label>Header Text Color</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-black rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label>Header Background</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-blue-500 rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label>User Messages</Label>
                    <div className="grid grid-cols-2 gap-4 mt-2">
                      <div>
                        <Label>User Bubble Background</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-black rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label>User Bubble Text</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-white border rounded"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label>Bot Messages</Label>
                    <div className="grid grid-cols-3 gap-4 mt-2">
                      <div>
                        <Label>Bot Text Color</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-black rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label>Cor do Chat</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-green-500 rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                      <div>
                        <Label>Option Hover</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-yellow-400 rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div>
                    <Label>Messages & Send Button</Label>
                    <div className="grid grid-cols-2 gap-4 mt-2">
                      <div>
                        <Label htmlFor="message-font-size">Messages Font Size</Label>
                        <Input id="message-font-size" defaultValue="14px" />
                        <p className="text-sm text-muted-foreground mt-1">
                          Set the font size for messages inside the chat window.
                        </p>
                      </div>
                      <div>
                        <Label htmlFor="welcome-font-size">Welcome Font Size</Label>
                        <Input id="welcome-font-size" defaultValue="13px" />
                        <p className="text-sm text-muted-foreground mt-1">
                          Define o tamanho da fonte da mensagem de boas-vindas.
                        </p>
                      </div>
                    </div>
                    <div className="mt-4">
                      <Label>Ícone do Botão Enviar</Label>
                      <div className="flex gap-2 mt-2">
                        <Button size="sm" variant="outline">
                          Selecionar Ícone
                        </Button>
                        <Button size="sm" variant="outline">
                          Remover Ícone
                        </Button>
                      </div>
                      <div className="mt-2">
                        <Label>Send Icon Color</Label>
                        <div className="flex gap-2">
                          <div className="w-8 h-8 bg-black rounded border"></div>
                          <Button size="sm" variant="outline">
                            Selecionar cor
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <Button className="w-full">
                    <Save className="w-4 h-4 mr-2" />
                    Salvar Alterações
                  </Button>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Eye className="w-5 h-5" />
                    Pré-visualização ao Vivo do Chat
                  </CardTitle>
                  <CardDescription>Clique para conversar</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="bg-blue-500 text-white p-4 rounded-t-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
                        <User className="w-4 h-4" />
                      </div>
                      <span className="font-medium">Atendentes</span>
                    </div>
                  </div>
                  <div className="border border-t-0 rounded-b-lg p-4 bg-white min-h-[200px]">
                    <div className="flex items-center gap-2 mb-4">
                      <div className="w-6 h-6 rounded-full bg-gray-200"></div>
                      <div className="bg-green-500 text-white px-3 py-2 rounded-lg text-sm">
                        Olá! Como posso ajudar?
                      </div>
                    </div>
                    <div className="text-center text-gray-500 text-sm">Preciso de informações</div>
                    <div className="mt-4 flex gap-2">
                      <Input placeholder="Digite sua mensagem..." className="flex-1" />
                      <Button size="sm">
                        <MessageCircle className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Email Tab */}
          <TabsContent value="email" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Mail className="w-5 h-5" />
                  Configurações de Email
                </CardTitle>
                <CardDescription>
                  Configure as configurações de email para envio de dados de conversas e notificações dos fluxos do seu
                  chatbot.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card className="p-4">
                    <div className="text-center">
                      <div className="text-sm text-muted-foreground">Endereço de Email</div>
                      <div className="font-medium text-green-600">Configurada</div>
                      <div className="text-xs text-muted-foreground">maiainmoretto@gmail.com</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <div className="text-sm text-muted-foreground">Assunto do Email</div>
                      <div className="font-medium text-green-600">Configurada</div>
                      <div className="text-xs text-muted-foreground">Chats</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <div className="text-sm text-muted-foreground">Mensagens Coletadas</div>
                      <div className="font-medium text-2xl">62</div>
                      <div className="text-xs text-muted-foreground">Total de mensagens no banco de dados</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <div className="text-sm text-muted-foreground">Sistema de Email</div>
                      <div className="font-medium text-green-600">Ativo</div>
                      <div className="text-xs text-muted-foreground">Função de email do WordPress</div>
                    </div>
                  </Card>
                </div>

                <div className="space-y-4">
                  <div>
                    <Label htmlFor="email-destination">Endereço de Email do Destinatário</Label>
                    <p className="text-sm text-muted-foreground mb-2">Configure where messages should be sent.</p>
                    <div className="flex gap-2">
                      <Input id="email-destination" defaultValue="maiainmoretto@gmail.com" className="flex-1" />
                      <Button variant="outline">Validar</Button>
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">
                      Digite o endereço de email para onde os dados das conversas e envios de formulário serão enviados.
                      Deve ser um endereço de email válido que você verifica com frequência.
                    </p>
                  </div>

                  <div>
                    <Label htmlFor="email-subject">Linha de Assunto do Email</Label>
                    <p className="text-sm text-muted-foreground mb-2">Customize the subject for notification emails.</p>
                    <Input id="email-subject" defaultValue="Chats" placeholder="0/100" />
                    <p className="text-sm text-muted-foreground mt-1">
                      Customize the subject line for emails sent from your chatbot. Leave empty to use the default
                      subject.
                    </p>
                    <div className="flex gap-2 mt-2">
                      <Badge variant="secondary">{`{site_name}`}</Badge>
                      <Badge variant="secondary">{`{user_name}`}</Badge>
                      <Badge variant="secondary">{`{date}`}</Badge>
                      <Badge variant="secondary">{`{time}`}</Badge>
                    </div>
                  </div>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Teste de Email</CardTitle>
                    <CardDescription>Test your email configuration.</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-4">
                      Envie um email de teste para verificar se sua configuração está funcionando corretamente.
                      Certifique-se de salvar suas configurações primeiro.
                    </p>
                    <Button>
                      <Mail className="w-4 h-4 mr-2" />
                      Enviar Email de Teste
                    </Button>
                  </CardContent>
                </Card>

                <Button className="w-full">
                  <Save className="w-4 h-4 mr-2" />
                  Salvar Alterações
                </Button>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Webhook Tab */}
          <TabsContent value="webhook" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Webhook className="w-5 h-5" />
                  Configurações de Webhook
                </CardTitle>
                <CardDescription>
                  Configure integrações de webhook para enviar dados de conversas para sistemas externos.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <Card className="p-4">
                    <div className="text-center">
                      <Webhook className="w-8 h-8 text-blue-500 mx-auto mb-2" />
                      <div className="text-sm text-muted-foreground">Status do Webhook</div>
                      <div className="font-medium text-blue-600">Inativo</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <Globe className="w-8 h-8 text-gray-500 mx-auto mb-2" />
                      <div className="text-sm text-muted-foreground">URL do Webhook</div>
                      <div className="font-medium text-gray-600">Não Configurada</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <div className="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span className="text-orange-600 text-xs">🔑</span>
                      </div>
                      <div className="text-sm text-muted-foreground">Segurança</div>
                      <div className="font-medium text-orange-600">Sem Chave</div>
                    </div>
                  </Card>

                  <Card className="p-4">
                    <div className="text-center">
                      <Settings className="w-8 h-8 text-gray-500 mx-auto mb-2" />
                      <div className="text-sm text-muted-foreground">Campos Personalizados</div>
                      <div className="font-medium text-gray-600">Nenhum</div>
                    </div>
                  </Card>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label>Ativar Webhook</Label>
                      <p className="text-sm text-muted-foreground">Ativar envio de dados via webhook</p>
                    </div>
                    <Switch />
                  </div>

                  <div>
                    <Label htmlFor="webhook-url">URL do Webhook</Label>
                    <Input id="webhook-url" placeholder="https://example.com/webhook" defaultValue="" />
                    <p className="text-sm text-muted-foreground mt-1">URL para onde os dados serão enviados.</p>
                  </div>

                  <div>
                    <Label htmlFor="webhook-secret">Chave Secreta</Label>
                    <div className="flex gap-2">
                      <Input
                        id="webhook-secret"
                        type="password"
                        placeholder="Chave secreta para autenticar o webhook"
                      />
                      <Button variant="outline">Gerar Chave Aleatória</Button>
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">
                      Chave secreta para autenticar o webhook. Será enviada no cabeçalho X-WP-Flow-Signature.
                    </p>
                  </div>

                  <div>
                    <Label htmlFor="custom-fields">Campos Personalizados</Label>
                    <Textarea
                      id="custom-fields"
                      placeholder='Adicione campos personalizados no formato JSON para serem incluídos na carga útil do webhook. Exemplo:
{"site_name": "My Site", "department": "Support"}'
                      rows={4}
                    />
                    <p className="text-sm text-muted-foreground mt-1">
                      Adicione campos personalizados no formato JSON para serem incluídos na carga útil do webhook.
                      Exemplo: {`{"site_name": "My Site", "department": "Support"}`}
                    </p>
                  </div>
                </div>

                <Button className="w-full">
                  <Save className="w-4 h-4 mr-2" />
                  Salvar Alterações
                </Button>

                <Card>
                  <CardHeader>
                    <CardTitle>Testar Webhook</CardTitle>
                    <CardDescription>
                      Clique no botão abaixo para enviar um payload de teste para o webhook configurado.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Button>
                      <Play className="w-4 h-4 mr-2" />
                      Enviar Teste
                    </Button>
                  </CardContent>
                </Card>
              </CardContent>
            </Card>
          </TabsContent>

          {/* AI Agents Tab */}
          <TabsContent value="agents" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Bot className="w-5 h-5" />
                  AI Agents Overview
                </CardTitle>
                <CardDescription>
                  Manage your AI agents. Each agent can be embedded anywhere using its shortcode.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">TOTAL AGENTS</CardTitle>
                      <Bot className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">1</div>
                      <p className="text-xs text-muted-foreground">Created agents</p>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">ACTIVE AGENTS</CardTitle>
                      <Activity className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">1</div>
                      <p className="text-xs text-muted-foreground">Ready to chat</p>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">TOTAL INTERACTIONS</CardTitle>
                      <MessageCircle className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">42</div>
                      <p className="text-xs text-muted-foreground">User conversations</p>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">ATUALIZADOS RECENTEMENTE</CardTitle>
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">0</div>
                      <p className="text-xs text-muted-foreground">Últimos 7 dias</p>
                    </CardContent>
                  </Card>
                </div>

                <Card>
                  <CardHeader>
                    <CardTitle>Available Agents</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between p-4 border rounded-lg">
                        <div className="flex items-center gap-4">
                          <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <span className="text-green-600 font-bold">#496</span>
                          </div>
                          <div>
                            <div className="font-medium">Jonatan</div>
                            <div className="text-sm text-green-600">✓ Ativo</div>
                          </div>
                        </div>
                        <div className="flex items-center gap-4">
                          <div className="text-sm text-muted-foreground">gpt-4</div>
                          <div className="text-sm text-muted-foreground">[wpflow_agent id="496"]</div>
                          <Button size="sm" variant="outline">
                            <Copy className="w-4 h-4" />
                          </Button>
                          <div className="text-sm text-muted-foreground">42</div>
                          <div className="text-sm text-muted-foreground">11/08/2025 14:03</div>
                          <div className="flex gap-2">
                            <Button size="sm" variant="outline">
                              <Edit className="w-4 h-4" />
                              Editar
                            </Button>
                            <Button size="sm" variant="outline">
                              <Eye className="w-4 h-4" />
                              Desativar
                            </Button>
                            <Button size="sm" variant="outline">
                              <Trash2 className="w-4 h-4" />
                              Excluir
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}