import Link from "next/link";
import { hasModuleAccess } from "@/lib/auth/module-access";
import { requireOnboardedUser } from "@/lib/auth/user";
import { getM7DatasetForUser } from "@/lib/compliance/server";
import { ComplianceAlertsView } from "@/components/app/compliance-alerts-view";
import { PageShell } from "@/components/app/page-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default async function ComplianceAlertsPage() {
  const user = await requireOnboardedUser();
  const hasPaidModulesAccess = await hasModuleAccess(user, 7);

  if (!hasPaidModulesAccess) {
    return (
      <PageShell
        title="Modulo 7: Alertas de Cumplimiento"
        description="Este modulo esta protegido por suscripcion de pago."
        action={<span className="rounded-full border border-[#d5ddec] bg-[#edf2fb] px-4 py-1 text-sm font-semibold text-[#5a6a87]">Bloqueado</span>}
      >
        <Card>
          <CardContent className="space-y-3 py-6">
            <h2 className="text-2xl font-semibold text-[#1f2a40]">Acceso restringido</h2>
            <p className="text-sm text-[#64718a]">Modulo 7 forma parte de la ruta premium de modulos pagados.</p>
            <div className="flex flex-wrap gap-2">
              <Link href="/dashboard#modulos">
                <Button>Ver modulos y planes</Button>
              </Link>
              <Link href="/gestion-licitaciones">
                <Button variant="secondary">Ir a Modulo 5</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </PageShell>
    );
  }

  const dataset = await getM7DatasetForUser(user.id);

  return (
    <PageShell
      title="Modulo 7: Alertas de Cumplimiento"
      headerMode="module"
      headerBackHref="/dashboard"
      headerBackLabel="Volver al Dashboard"
      headerNextHref="/gestion-contratos"
      headerNextLabel="M8: Contratos"
      headerShowManual
      headerPlanBadgeLabel="Plan Premium"
      showPageHeading={false}
      contentWidth="wide"
      className="space-y-6"
    >
      <section className="flex items-start gap-4">
        <span className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-[#dce5f2] text-3xl text-[#274676]">◨</span>
        <div>
          <h1 className="text-4xl font-semibold text-[#132549] [font-family:var(--font-display)] md:text-5xl">Modulo 7: Alertas de Cumplimiento</h1>
          <p className="mt-2 text-xl text-[#4f6588] md:text-2xl">Monitorea plazos, riesgos, checklist y vigencia normativa desde una sola vista</p>
        </div>
      </section>

      <ComplianceAlertsView dataset={dataset} />
    </PageShell>
  );
}
