import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Pencil, Mail, Phone, Plus, Globe } from "lucide-react";

import { PageHeader } from "@/components/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useClients, type ClientRecord } from "@/lib/store/clients-store";
import { ClientFormDialog } from "@/components/client-form-dialog";

export const Route = createFileRoute("/_admin/clientes")({
  component: ClientesPage,
});

function ClientesPage() {
  const clients = useClients();
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<ClientRecord | null>(null);

  const filtered = clients.filter((c) =>
    `${c.name} ${c.tradeName ?? ""} ${c.email ?? ""} ${c.contactName ?? ""}`
      .toLowerCase()
      .includes(q.toLowerCase()),
  );

  const handleNew = () => {
    setEditing(null);
    setOpen(true);
  };
  const handleEdit = (c: ClientRecord) => {
    setEditing(c);
    setOpen(true);
  };

  return (
    <div className="space-y-8">
      <PageHeader
        title="Clientes"
        description="Cadastre e gerencie os clientes da X3 Sites."
        actions={
          <Button
            onClick={handleNew}
            className="bg-gradient-brand text-white shadow-soft"
          >
            <Plus className="h-4 w-4" /> Adicionar cliente
          </Button>
        }
      />

      <Input
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder="Buscar cliente por nome ou e-mail..."
        className="max-w-sm"
      />

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {filtered.map((c) => (
          <Card key={c.id} className="border-border/60 shadow-soft transition hover:-translate-y-0.5 hover:shadow-glow">
            <CardContent className="space-y-3 p-5">
              <div className="flex items-start justify-between">
                <div>
                  <div className="font-display font-semibold">{c.name}</div>
                  {c.contactName && (
                    <div className="text-xs text-muted-foreground">
                      {c.contactName}
                    </div>
                  )}
                  {!c.contactName && c.tradeName && (
                    <div className="text-xs text-muted-foreground">{c.tradeName}</div>
                  )}
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8"
                  onClick={() => handleEdit(c)}
                  title="Editar cliente"
                >
                  <Pencil className="h-4 w-4" />
                </Button>
              </div>
              <div className="space-y-1.5 text-sm text-muted-foreground">
                {c.email && (
                  <div className="flex items-center gap-2">
                    <Mail className="h-3.5 w-3.5" /> {c.email}
                  </div>
                )}
                {c.phone && (
                  <div className="flex items-center gap-2">
                    <Phone className="h-3.5 w-3.5" /> {c.phone}
                  </div>
                )}
                {c.website && (
                  <div className="flex items-center gap-2 truncate">
                    <Globe className="h-3.5 w-3.5 shrink-0" />
                    <span className="truncate">{c.website}</span>
                  </div>
                )}
                {c.city && <div className="text-xs">{c.city}</div>}
              </div>
            </CardContent>
          </Card>
        ))}
        {filtered.length === 0 && (
          <div className="col-span-full rounded-lg border border-dashed border-border/60 p-10 text-center text-sm text-muted-foreground">
            Nenhum cliente encontrado.
          </div>
        )}
      </div>

      <ClientFormDialog open={open} onOpenChange={setOpen} client={editing} />
    </div>
  );
}