import Link from "next/link";
import { solicitarExclusao } from "@/app/(cliente)/minha-conta/actions";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { getClienteConta } from "@/lib/account-service";
import { ContaForm } from "./conta-form";

export default async function MinhaContaPage() {
  const cliente = await getClienteConta();

  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">Minha conta</h1>
          <p className="mt-2 text-sm text-muted-foreground">Gerencie seus dados e direitos LGPD.</p>
        </div>
        <Button asChild variant="outline">
          <Link href="/briefings">Voltar</Link>
        </Button>
      </div>

      <div className="grid gap-6 lg:grid-cols-[1fr_360px]">
        <Card>
          <CardHeader>
            <CardTitle>Dados cadastrais</CardTitle>
          </CardHeader>
          <CardContent>
            <ContaForm cliente={cliente} />
          </CardContent>
        </Card>

        <aside className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Meus dados</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm leading-6 text-muted-foreground">
                Baixe uma copia em JSON dos dados associados a sua conta.
              </p>
              <Button asChild>
                <a href="/api/minha-conta/exportar">Baixar JSON</a>
              </Button>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Solicitar exclusao</CardTitle>
            </CardHeader>
            <CardContent>
              <form action={solicitarExclusao} className="space-y-3">
                <div className="space-y-2">
                  <Label htmlFor="motivo">Motivo opcional</Label>
                  <Textarea id="motivo" name="motivo" />
                </div>
                <Button type="submit" variant="outline">Solicitar exclusao</Button>
              </form>
              {cliente.solicitacoesExclusao.length > 0 ? (
                <div className="mt-4 space-y-2">
                  {cliente.solicitacoesExclusao.map((solicitacao) => (
                    <p key={solicitacao.id} className="text-sm text-muted-foreground">
                      {solicitacao.status} em {solicitacao.criadoEm.toLocaleDateString("pt-BR")}
                    </p>
                  ))}
                </div>
              ) : null}
            </CardContent>
          </Card>
        </aside>
      </div>
    </main>
  );
}