import { useState } from "react";
import { Link } from "wouter";
import {
  LayoutGrid, ArrowLeft, Search, Plus, MoreVertical, Globe, Eye,
  Edit2, Copy, Trash2, ExternalLink, Settings, Palette, Code,
  Image, FileText, Layers, Monitor, Smartphone, Tablet
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";

interface Site {
  id: number;
  name: string;
  domain: string;
  status: string;
  template: string;
  pages: number;
  lastPublished: string;
  thumbnail: string;
}

export default function XosSites() {
  const [isNewSiteOpen, setIsNewSiteOpen] = useState(false);
  const [newSiteStep, setNewSiteStep] = useState(1);
  const [selectedTemplate, setSelectedTemplate] = useState("");

  const sites: Site[] = [
    {
      id: 1,
      name: "Landing Page Principal",
      domain: "arcadia.com.br",
      status: "published",
      template: "landing",
      pages: 5,
      lastPublished: new Date(Date.now() - 86400000).toISOString(),
      thumbnail: "/api/placeholder/300/200",
    },
    {
      id: 2,
      name: "Blog Corporativo",
      domain: "blog.arcadia.com.br",
      status: "published",
      template: "blog",
      pages: 12,
      lastPublished: new Date(Date.now() - 172800000).toISOString(),
      thumbnail: "/api/placeholder/300/200",
    },
    {
      id: 3,
      name: "Central de Ajuda",
      domain: "help.arcadia.com.br",
      status: "draft",
      template: "docs",
      pages: 8,
      lastPublished: "",
      thumbnail: "/api/placeholder/300/200",
    },
  ];

  const templates = [
    {
      id: "landing",
      name: "Landing Page",
      description: "Página de captura e conversão",
      icon: Layers,
      color: "from-blue-500 to-cyan-500",
    },
    {
      id: "blog",
      name: "Blog",
      description: "Artigos e conteúdo",
      icon: FileText,
      color: "from-green-500 to-emerald-500",
    },
    {
      id: "docs",
      name: "Documentação",
      description: "Central de ajuda e docs",
      icon: Code,
      color: "from-violet-500 to-purple-500",
    },
    {
      id: "portfolio",
      name: "Portfólio",
      description: "Showcase de trabalhos",
      icon: Image,
      color: "from-orange-500 to-red-500",
    },
    {
      id: "ecommerce",
      name: "E-commerce",
      description: "Loja virtual",
      icon: Globe,
      color: "from-pink-500 to-rose-500",
    },
    {
      id: "blank",
      name: "Em Branco",
      description: "Comece do zero",
      icon: LayoutGrid,
      color: "from-gray-400 to-gray-500",
    },
  ];

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      published: "bg-green-100 text-green-700",
      draft: "bg-yellow-100 text-yellow-700",
      offline: "bg-gray-100 text-gray-700",
    };
    return colors[status] || colors.draft;
  };

  return (
    <div className="min-h-screen bg-slate-50">
      <header className="sticky top-0 z-50 bg-white border-b shadow-sm px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/xos">
              <Button variant="ghost" size="icon" data-testid="button-back">
                <ArrowLeft className="h-5 w-5" />
              </Button>
            </Link>
            <div className="flex items-center gap-2">
              <div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-2 rounded-lg">
                <LayoutGrid className="h-5 w-5 text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-slate-800">Sites</h1>
                <p className="text-xs text-slate-500">Site Builder</p>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
              <Input placeholder="Buscar sites..." className="w-64 pl-10" data-testid="input-search" />
            </div>

            <Dialog open={isNewSiteOpen} onOpenChange={(open) => {
              setIsNewSiteOpen(open);
              if (!open) {
                setNewSiteStep(1);
                setSelectedTemplate("");
              }
            }}>
              <DialogTrigger asChild>
                <Button data-testid="button-new-site">
                  <Plus className="h-4 w-4 mr-2" />
                  Novo Site
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-3xl">
                <DialogHeader>
                  <DialogTitle>Criar Novo Site</DialogTitle>
                </DialogHeader>
                <div className="py-4">
                  {newSiteStep === 1 && (
                    <>
                      <p className="text-sm text-slate-500 mb-4">Escolha um template para começar:</p>
                      <div className="grid grid-cols-3 gap-4">
                        {templates.map((template) => (
                          <Card
                            key={template.id}
                            className={`cursor-pointer transition-all hover:shadow-md ${
                              selectedTemplate === template.id ? "ring-2 ring-cyan-500" : ""
                            }`}
                            onClick={() => setSelectedTemplate(template.id)}
                            data-testid={`template-${template.id}`}
                          >
                            <CardContent className="p-4 text-center">
                              <div className={`mx-auto w-12 h-12 rounded-xl bg-gradient-to-br ${template.color} flex items-center justify-center mb-3`}>
                                <template.icon className="h-6 w-6 text-white" />
                              </div>
                              <p className="font-medium text-slate-800">{template.name}</p>
                              <p className="text-xs text-slate-500 mt-1">{template.description}</p>
                            </CardContent>
                          </Card>
                        ))}
                      </div>
                      {selectedTemplate && (
                        <div className="mt-6 space-y-4">
                          <div className="space-y-2">
                            <Label>Nome do Site</Label>
                            <Input placeholder="Meu Site Incrível" data-testid="input-site-name" />
                          </div>
                          <div className="space-y-2">
                            <Label>Subdomínio</Label>
                            <div className="flex">
                              <Input placeholder="meusite" className="rounded-r-none" data-testid="input-site-subdomain" />
                              <div className="px-3 bg-slate-100 border border-l-0 rounded-r-md flex items-center text-sm text-slate-500">
                                .arcadia.app
                              </div>
                            </div>
                          </div>
                          <Button className="w-full" data-testid="button-create-site">
                            <LayoutGrid className="h-4 w-4 mr-2" />
                            Criar Site
                          </Button>
                        </div>
                      )}
                    </>
                  )}
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </header>

      <main className="p-6">
        <Tabs defaultValue="all" className="mb-6">
          <TabsList>
            <TabsTrigger value="all" data-testid="tab-all">Todos</TabsTrigger>
            <TabsTrigger value="published" data-testid="tab-published">Publicados</TabsTrigger>
            <TabsTrigger value="draft" data-testid="tab-draft">Rascunhos</TabsTrigger>
          </TabsList>
        </Tabs>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {sites.map((site) => (
            <Card key={site.id} className="overflow-hidden hover:shadow-lg transition-shadow" data-testid={`site-${site.id}`}>
              <div className="aspect-video bg-gradient-to-br from-slate-100 to-slate-200 relative">
                <div className="absolute inset-0 flex items-center justify-center">
                  <Globe className="h-12 w-12 text-slate-300" />
                </div>
                <div className="absolute top-2 right-2">
                  <Badge className={getStatusColor(site.status)}>
                    {site.status === "published" ? "Publicado" : "Rascunho"}
                  </Badge>
                </div>
              </div>
              <CardContent className="p-4">
                <div className="flex items-start justify-between mb-2">
                  <div>
                    <h3 className="font-semibold text-slate-800">{site.name}</h3>
                    <p className="text-sm text-slate-500 flex items-center gap-1">
                      <Globe className="h-3 w-3" />
                      {site.domain}
                    </p>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem><Eye className="h-4 w-4 mr-2" /> Visualizar</DropdownMenuItem>
                      <DropdownMenuItem><Edit2 className="h-4 w-4 mr-2" /> Editar</DropdownMenuItem>
                      <DropdownMenuItem><Settings className="h-4 w-4 mr-2" /> Configurações</DropdownMenuItem>
                      <DropdownMenuItem><Copy className="h-4 w-4 mr-2" /> Duplicar</DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-red-600">
                        <Trash2 className="h-4 w-4 mr-2" /> Excluir
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>

                <div className="flex items-center gap-4 text-sm text-slate-500 mb-4">
                  <span>{site.pages} páginas</span>
                  {site.lastPublished && (
                    <span>Atualizado {new Date(site.lastPublished).toLocaleDateString("pt-BR")}</span>
                  )}
                </div>

                <div className="flex gap-2">
                  <Button variant="outline" size="sm" className="flex-1">
                    <Eye className="h-4 w-4 mr-1" />
                    Preview
                  </Button>
                  <Button size="sm" className="flex-1">
                    <Edit2 className="h-4 w-4 mr-1" />
                    Editar
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}

          <Card className="border-dashed border-2 hover:border-cyan-500 hover:bg-cyan-50/50 transition-all cursor-pointer"
                onClick={() => setIsNewSiteOpen(true)}
                data-testid="card-new-site">
            <CardContent className="aspect-[4/3] flex flex-col items-center justify-center text-slate-400 hover:text-cyan-600">
              <Plus className="h-12 w-12 mb-2" />
              <p className="font-medium">Criar Novo Site</p>
            </CardContent>
          </Card>
        </div>

        <Card className="mt-8">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Palette className="h-5 w-5" />
              Importar Site Existente
            </CardTitle>
            <CardDescription>
              Importe um site existente fornecendo a URL ou fazendo upload do HTML
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>URL do Site</Label>
                <div className="flex gap-2">
                  <Input placeholder="https://meusite.com" className="flex-1" data-testid="input-import-url" />
                  <Button variant="outline">
                    <ExternalLink className="h-4 w-4 mr-2" />
                    Importar
                  </Button>
                </div>
              </div>
              <div className="space-y-2">
                <Label>Upload HTML/ZIP</Label>
                <div className="border-2 border-dashed rounded-lg p-4 text-center text-slate-500 hover:border-cyan-500 hover:bg-cyan-50/50 cursor-pointer transition-all">
                  <Code className="h-6 w-6 mx-auto mb-2" />
                  <p className="text-sm">Arraste arquivos ou clique para selecionar</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}