import Link from "next/link";
import { ModuleCard } from "@/components/app/module-card";
import { PageShell } from "@/components/app/page-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { requireOnboardedUser } from "@/lib/auth/user";
import { getDiagnosticOverview } from "@/lib/diagnostic";

export default async function DiagnosticPage() {
  const user = await requireOnboardedUser();
  const overview = await getDiagnosticOverview(user.id);

  return (
    <PageShell
      title="Diagnostico"
      description="Selecciona un modulo para iniciar o reanudar el cuestionario."
      action={
        overview.resumeHref ? (
          <Link href={overview.resumeHref}>
            <Button>Continuar ultimo modulo</Button>
          </Link>
        ) : undefined
      }
    >
      <Card>
        <CardHeader>
          <h2 className="text-lg font-semibold text-[#1f2a40]">Estado general</h2>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-4">
          <div className="rounded-xl bg-[#edf2fa] p-4">
            <p className="text-xs font-semibold uppercase text-[#5f6d86]">Modulos</p>
            <p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.modules}</p>
          </div>
          <div className="rounded-xl bg-[#edf2fa] p-4">
            <p className="text-xs font-semibold uppercase text-[#5f6d86]">Completados</p>
            <p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.completedModules}</p>
          </div>
          <div className="rounded-xl bg-[#edf2fa] p-4">
            <p className="text-xs font-semibold uppercase text-[#5f6d86]">Progreso total</p>
            <p className="mt-1 text-2xl font-bold text-[#1e2b45]">{overview.stats.overallCompletion}%</p>
          </div>
          <div className="rounded-xl bg-[#edf2fa] p-4">
            <p className="text-xs font-semibold uppercase text-[#5f6d86]">Respuestas</p>
            <p className="mt-1 text-2xl font-bold text-[#1e2b45]">
              {overview.stats.answeredQuestions}/{overview.stats.totalQuestions}
            </p>
          </div>
        </CardContent>
      </Card>

      {overview.modules.length === 0 ? (
        <Card>
          <CardHeader>
            <h3 className="text-base font-semibold text-[#22314b]">No hay modulos configurados</h3>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-[#64718a]">
              Ejecuta el seed de base de datos para cargar modulos, preguntas y opciones antes de iniciar el diagnostico.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2">
          {overview.modules.map((module) => (
            <ModuleCard
              key={module.key}
              name={module.name}
              completion={module.completion}
              status={module.status}
              href={`/diagnostic/${module.key}?q=${module.resumeQuestionIndex}`}
              answeredQuestions={module.answeredQuestions}
              totalQuestions={module.totalQuestions}
            />
          ))}
        </div>
      )}
    </PageShell>
  );
}