import Link from "next/link";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { getAberturaBriefing } from "@/lib/briefing-service";
import { CabecalhoBriefingForm } from "./cabecalho-briefing-form";

function asStringArray(value: unknown) {
  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
}

export default async function AberturaBriefingPage({ params }: { params: { id: string } }) {
  const { briefing, progresso, comoPreencher, avisoSenhas } = await getAberturaBriefing(params.id);
  const totalPerguntas = progresso.reduce((sum, secao) => sum + secao.total, 0);
  const totalRespondidas = progresso.reduce((sum, secao) => sum + secao.respondidas, 0);
  const percentual = totalPerguntas > 0 ? Math.round((totalRespondidas / totalPerguntas) * 100) : 0;
  const primeiraPendente = progresso.find((secao) => secao.respondidas < secao.total) ?? progresso[0];

  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">{briefing.status.replace("_", " ")}</Badge>
          <h1 className="mt-3 text-3xl font-semibold">{briefing.titulo}</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            Revise as orientacoes e continue pela secao indicada.
          </p>
        </div>
        {primeiraPendente ? (
          <Button asChild>
            <Link href={`/briefings/${briefing.id}/${primeiraPendente.ordem}`}>Continuar de onde parei</Link>
          </Button>
        ) : null}
      </div>

      <div className="mb-6 space-y-2">
        <div className="flex items-center justify-between text-sm">
          <span className="font-medium">Progresso geral</span>
          <span className="text-muted-foreground">{totalRespondidas}/{totalPerguntas}</span>
        </div>
        <Progress value={percentual} />
      </div>

      <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
        <div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Cabecalho do briefing</CardTitle>
            </CardHeader>
            <CardContent>
              <CabecalhoBriefingForm
                empresaMarca={briefing.cliente.razaoSocial ?? briefing.cliente.nomeCompleto}
                responsavel={briefing.cliente.nomeCompleto}
                contato={`${briefing.cliente.user.email} | ${briefing.cliente.whatsapp}`}
                data={new Date().toISOString().slice(0, 10)}
              />
            </CardContent>
          </Card>

          {avisoSenhas ? (
            <Alert>
              <AlertTitle>Aviso importante</AlertTitle>
              <AlertDescription>{String(avisoSenhas)}</AlertDescription>
            </Alert>
          ) : null}
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Como preencher</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-3 text-sm leading-6 text-muted-foreground">
                {asStringArray(comoPreencher).map((item) => (
                  <li key={item} className="rounded-md bg-muted p-3">{item}</li>
                ))}
              </ul>
            </CardContent>
          </Card>

          <div className="grid gap-3">
            {progresso.map((secao) => {
              const secaoPercentual = secao.total > 0 ? Math.round((secao.respondidas / secao.total) * 100) : 0;

              return (
                <Link
                  key={secao.id}
                  href={`/briefings/${briefing.id}/${secao.ordem}`}
                  className="rounded-lg border bg-card p-4 transition hover:border-primary"
                >
                  <div className="mb-3 flex items-start justify-between gap-3">
                    <div>
                      <p className="font-medium">{secao.ordem}. {secao.titulo}</p>
                      {secao.descricao ? <p className="mt-1 text-sm text-muted-foreground">{secao.descricao}</p> : null}
                    </div>
                    <Badge variant="muted">{secao.respondidas}/{secao.total}</Badge>
                  </div>
                  <Progress value={secaoPercentual} />
                </Link>
              );
            })}
          </div>
        </div>
      </div>
    </main>
  );
}