import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { getSecaoBriefing } from "@/lib/briefing-service";
import { SecaoForm } from "./secao-form";

export default async function SecaoBriefingPage({
  params
}: {
  params: { id: string; secao: string };
}) {
  const ordemSecao = Number(params.secao);
  const { briefing, secao, secoes, progressoGeral, anterior, proxima } = await getSecaoBriefing(
    params.id,
    ordemSecao
  );
  const percentual =
    progressoGeral.total > 0 ? Math.round((progressoGeral.respondidas / progressoGeral.total) * 100) : 0;

  return (
    <main className="container py-8">
      <div className="mb-6">
        <Button asChild variant="ghost" className="mb-4 px-0">
          <Link href={`/briefings/${briefing.id}`}>
            <ChevronLeft className="mr-2 h-4 w-4" />
            Voltar para abertura
          </Link>
        </Button>
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <Badge variant="muted">Secao {secao.ordem} de {secoes.length}</Badge>
            <h1 className="mt-3 text-3xl font-semibold">{secao.titulo}</h1>
            {secao.descricao ? <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">{secao.descricao}</p> : null}
          </div>
          <div className="min-w-56 space-y-2">
            <div className="flex justify-between text-sm">
              <span className="font-medium">Progresso geral</span>
              <span className="text-muted-foreground">{progressoGeral.respondidas}/{progressoGeral.total}</span>
            </div>
            <Progress value={percentual} />
          </div>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-[280px_1fr]">
        <aside className="lg:sticky lg:top-6 lg:self-start">
          <Card>
            <CardContent className="p-3">
              <nav aria-label="Secoes do briefing" className="grid gap-1">
                {secoes.map((item) => (
                  <Link
                    key={item.id}
                    href={`/briefings/${briefing.id}/${item.ordem}`}
                    className={`rounded-md px-3 py-2 text-sm transition ${
                      item.ordem === secao.ordem
                        ? "bg-primary text-primary-foreground"
                        : "hover:bg-muted"
                    }`}
                  >
                    <span className="block font-medium">{item.ordem}. {item.titulo}</span>
                    <span className={item.ordem === secao.ordem ? "text-primary-foreground/80" : "text-muted-foreground"}>
                      {item.respondidas}/{item.total} respondidas
                    </span>
                  </Link>
                ))}
              </nav>
            </CardContent>
          </Card>
        </aside>

        <div className="space-y-6">
          <SecaoForm
            briefingId={briefing.id}
            secaoId={secao.id}
            perguntas={secao.perguntas}
            readOnly={briefing.status !== "RASCUNHO"}
          />

          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
            {anterior ? (
              <Button asChild variant="outline">
                <Link href={`/briefings/${briefing.id}/${anterior.ordem}`}>
                  <ChevronLeft className="mr-2 h-4 w-4" />
                  Secao anterior
                </Link>
              </Button>
            ) : <span />}
            {proxima ? (
              <Button asChild>
                <Link href={`/briefings/${briefing.id}/${proxima.ordem}`}>
                  Proxima secao
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            ) : (
              <Button asChild>
                <Link href={`/briefings/${briefing.id}/revisao`}>Ir para revisao</Link>
              </Button>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}