import Link from "next/link";
import { irParaClientes } from "@/app/(admin)/admin/actions";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { listarClientesAdmin, maskCpf } from "@/lib/admin-service";
import { decryptCpf } from "@/lib/crypto";

export default async function ClientesAdminPage({
  searchParams
}: {
  searchParams: { busca?: string; tipo?: "PF" | "PJ" };
}) {
  const clientes = await listarClientesAdmin({
    busca: searchParams.busca,
    tipo: searchParams.tipo
  });

  return (
    <main className="container py-8">
      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-3xl font-semibold">Clientes</h1>
          <p className="mt-2 text-sm text-muted-foreground">Busque clientes e acompanhe seus briefings.</p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin">Voltar</Link>
        </Button>
      </div>

      <Card className="mb-6">
        <CardContent className="p-4">
          <form action={irParaClientes} className="grid gap-4 sm:grid-cols-[1fr_160px_auto] sm:items-end">
            <div className="space-y-2">
              <Label htmlFor="busca">Busca</Label>
              <Input id="busca" name="busca" defaultValue={searchParams.busca ?? ""} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="tipo">Tipo</Label>
              <select id="tipo" name="tipo" defaultValue={searchParams.tipo ?? ""} className="h-10 w-full rounded-md border bg-background px-3 text-sm">
                <option value="">Todos</option>
                <option value="PF">PF</option>
                <option value="PJ">PJ</option>
              </select>
            </div>
            <Button type="submit">Filtrar</Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>{clientes.length} cliente(s)</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nome</TableHead>
                <TableHead>E-mail</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>CPF</TableHead>
                <TableHead>Briefings</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {clientes.map((cliente) => (
                <TableRow key={cliente.id}>
                  <TableCell>
                    <Link href={`/admin/clientes/${cliente.id}`} className="font-medium text-primary hover:underline">
                      {cliente.nomeCompleto}
                    </Link>
                  </TableCell>
                  <TableCell>{cliente.user.email}</TableCell>
                  <TableCell><Badge variant="muted">{cliente.tipo}</Badge></TableCell>
                  <TableCell>{maskCpf(decryptCpf(cliente.cpfCifrado))}</TableCell>
                  <TableCell>{cliente.briefings.length}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </main>
  );
}