import { auth } from "@/auth";
import { sair } from "@/app/(auth)/actions";
import { iniciarBriefing } from "@/app/(cliente)/briefings/actions";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { listarBriefingsDoCliente } from "@/lib/briefing-service";
import Link from "next/link";

export default async function BriefingsPage() {
  const session = await auth();
  const briefings = await listarBriefingsDoCliente();

  return (
    <main className="container py-8">
      <header className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-semibold">Meus briefings</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            {session?.user.email} pode iniciar um briefing e continuar depois.
          </p>
        </div>
        <form action={sair}>
          <div className="flex gap-2">
            <Button asChild variant="outline">
              <Link href="/minha-conta">Minha conta</Link>
            </Button>
            <Button variant="outline" type="submit">
              Sair
            </Button>
          </div>
        </form>
      </header>

      <form action={iniciarBriefing} className="mb-6">
        <Button type="submit">Iniciar meu briefing</Button>
      </form>

      {briefings.length === 0 ? (
        <Card>
          <CardHeader>
            <CardTitle>Nenhum briefing iniciado</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm leading-6 text-muted-foreground">
              Inicie seu primeiro briefing para organizar as informacoes do projeto.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4">
          {briefings.map((briefing) => (
            <Card key={briefing.id}>
              <CardHeader className="gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <CardTitle className="text-lg">{briefing.titulo}</CardTitle>
                  <p className="mt-2 text-sm text-muted-foreground">
                    Atualizado em {briefing.atualizadoEm.toLocaleDateString("pt-BR")}
                  </p>
                </div>
                <Badge variant="muted">{briefing.status.replace("_", " ")}</Badge>
              </CardHeader>
              <CardContent>
                <Button asChild variant="outline">
                  <Link href={`/briefings/${briefing.id}`}>Abrir briefing</Link>
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </main>
  );
}