import Link from "next/link";
import { PageShell } from "@/components/app/page-shell";
import { ScoreCard } from "@/components/app/score-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { requireOnboardedUser } from "@/lib/auth/user";
import { recomputeAssessmentResults } from "@/lib/scoring";

export default async function ResultsPage() {
  const user = await requireOnboardedUser();
  const snapshot = await recomputeAssessmentResults(user.id);

  if (!snapshot.moduleScores.length || snapshot.answeredQuestions === 0) {
    return (
      <PageShell title="Resultados" description="Vista general del puntaje consolidado y hallazgos clave.">
        <Card>
          <CardHeader>
            <h3 className="text-base font-semibold text-[#22314b]">Aun no hay resultados calculables</h3>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-[#64718a]">
              Responde preguntas de al menos un modulo para generar puntajes y visualizar fortalezas/debilidades.
            </p>
            <Link href="/diagnostic">
              <Button>Ir al diagnostico</Button>
            </Link>
          </CardContent>
        </Card>
      </PageShell>
    );
  }

  const strongest = snapshot.strongestModule;
  const weakest = snapshot.weakestModule;

  const highlights = [
    {
      title: "Fortaleza",
      description: strongest
        ? `${strongest.moduleName} lidera con ${Math.round(strongest.score)}% de madurez y ${Math.round(strongest.completion)}% de avance.`
        : "No hay suficientes datos para identificar fortalezas.",
      kind: "success" as const,
      label: "Positivo",
    },
    {
      title: "Oportunidad",
      description: weakest
        ? `${weakest.moduleName} muestra ${Math.round(weakest.score)}%. Prioriza este frente para elevar el puntaje global.`
        : "No hay suficientes datos para identificar oportunidades.",
      kind: "warning" as const,
      label: "Atencion",
    },
  ];

  return (
    <PageShell title="Resultados" description="Vista general del puntaje consolidado y hallazgos clave.">
      <ScoreCard score={Math.round(snapshot.overallScore)} />

      <div className="grid gap-4 md:grid-cols-2">
        {highlights.map((item) => (
          <Card key={item.title}>
            <CardHeader className="flex flex-row items-center justify-between">
              <h3 className="text-base font-semibold text-[#20304a]">{item.title}</h3>
              <Badge variant={item.kind}>{item.label}</Badge>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-[#617089]">{item.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <h3 className="text-base font-semibold text-[#20304a]">Siguiente paso recomendado</h3>
        </CardHeader>
        <CardContent className="flex flex-wrap items-center justify-between gap-3">
          <p className="text-sm text-[#617089]">Revisa la seccion Modulos para desbloquear la ruta premium y continuar tu madurez.</p>
          <Link href="/dashboard#modulos">
            <Button>Ver modulos</Button>
          </Link>
        </CardContent>
      </Card>
    </PageShell>
  );
}
