import Link from "next/link";
import { PageShell } from "@/components/app/page-shell";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { requireOnboardedUser } from "@/lib/auth/user";
import { getRecommendationsForUser } from "@/lib/recommendations";

export default async function RecommendationsPage() {
  const user = await requireOnboardedUser();
  const recommendationSnapshot = await getRecommendationsForUser(user.id);

  return (
    <PageShell
      title="Recomendaciones"
      description="Lista priorizada de acciones sugeridas en funcion del diagnostico."
      action={<Button variant="secondary">Descargar reporte (PDF - Proximamente)</Button>}
    >
      <Card>
        <CardContent className="py-4">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <p className="text-sm font-semibold text-[#4f5d77]">Puntaje global actual: {Math.round(recommendationSnapshot.overallScore)}%</p>
            <p className="text-sm text-[#5f6d86]">
              Modulos priorizados: {recommendationSnapshot.targetedModuleCount} (umbral: {recommendationSnapshot.lowScoreThreshold}%)
            </p>
          </div>
        </CardContent>
      </Card>

      {recommendationSnapshot.recommendations.length === 0 ? (
        <Card>
          <CardHeader>
            <h3 className="text-base font-semibold text-[#22314b]">No hay recomendaciones disponibles</h3>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-[#64718a]">Completa el diagnostico o carga recomendaciones en la base de datos para generar sugerencias.</p>
            <Link href="/diagnostic">
              <Button>Ir al diagnostico</Button>
            </Link>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {recommendationSnapshot.recommendations.map((recommendation) => (
            <Card key={recommendation.id}>
              <CardHeader className="flex flex-row items-start justify-between gap-2">
                <div className="space-y-1">
                  <p className="text-xs font-semibold uppercase text-[#65718b]">{recommendation.moduleLabel}</p>
                  <h3 className="text-base font-semibold text-[#22314b]">{recommendation.title}</h3>
                </div>
                <Badge variant={recommendation.priorityVariant}>{recommendation.priorityLabel}</Badge>
              </CardHeader>

              <CardContent className="flex items-center justify-between gap-3">
                <div className="space-y-2">
                  <p className="text-sm text-[#64718a]">{recommendation.detail}</p>
                  {recommendation.scoreHint ? <p className="text-xs font-semibold text-[#4f5d77]">{recommendation.scoreHint}</p> : null}
                </div>

                <Dialog
                  triggerLabel="Ver detalle"
                  title={recommendation.title}
                  description={`Recomendacion ${recommendation.source === "module" ? "priorizada" : "general"}`}
                >
                  <p className="text-sm text-[#5f6b84]">{recommendation.detail}</p>
                  {recommendation.scoreHint ? <p className="mt-2 text-xs font-semibold text-[#4f5d77]">{recommendation.scoreHint}</p> : null}
                </Dialog>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </PageShell>
  );
}
