import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { decryptCpf } from "@/lib/crypto";
import { getClienteAdmin, maskCpf, whatsappLink } from "@/lib/admin-service";
import { MostrarCpf } from "./mostrar-cpf";

export default async function ClienteAdminDetalhePage({ params }: { params: { id: string } }) {
  const cliente = await getClienteAdmin(params.id);
  const cpfMascarado = maskCpf(decryptCpf(cliente.cpfCifrado));

  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>
          <Badge variant="muted">{cliente.tipo}</Badge>
          <h1 className="mt-3 text-3xl font-semibold">{cliente.nomeCompleto}</h1>
          <p className="mt-2 text-sm text-muted-foreground">{cliente.user.email}</p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin/clientes">Voltar</Link>
        </Button>
      </div>

      <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
        <Card>
          <CardHeader>
            <CardTitle>Dados cadastrais</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4 text-sm">
            <div>
              <p className="font-medium">CPF</p>
              <p className="text-muted-foreground">{cpfMascarado}</p>
              <div className="mt-2">
                <MostrarCpf clienteId={cliente.id} />
              </div>
            </div>
            <div>
              <p className="font-medium">WhatsApp</p>
              <a className="text-primary hover:underline" href={whatsappLink(cliente.whatsapp)} target="_blank" rel="noreferrer">
                {cliente.whatsapp}
              </a>
            </div>
            {cliente.razaoSocial ? (
              <div>
                <p className="font-medium">Razao social</p>
                <p className="text-muted-foreground">{cliente.razaoSocial}</p>
              </div>
            ) : null}
            {cliente.cnpj ? (
              <div>
                <p className="font-medium">CNPJ</p>
                <p className="text-muted-foreground">{cliente.cnpj}</p>
              </div>
            ) : null}
            <div>
              <p className="font-medium">Endereco</p>
              <p className="text-muted-foreground">
                {[cliente.logradouro, cliente.numero, cliente.bairro, cliente.cidade, cliente.uf]
                  .filter(Boolean)
                  .join(", ") || "Nao informado"}
              </p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Briefings</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Titulo</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Atualizado</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {cliente.briefings.map((briefing) => (
                  <TableRow key={briefing.id}>
                    <TableCell>
                      <Link className="font-medium text-primary hover:underline" href={`/admin/briefings/${briefing.id}`}>
                        {briefing.titulo}
                      </Link>
                    </TableCell>
                    <TableCell><Badge variant="muted">{briefing.status}</Badge></TableCell>
                    <TableCell>{briefing.atualizadoEm.toLocaleString("pt-BR")}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </main>
  );
}