import { PageShell } from "@/components/app/page-shell";
import { Accordion } from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { requireOnboardedUser } from "@/lib/auth/user";
import { getManualContentSnapshot } from "@/lib/content-pages";

export default async function ManualPage() {
  await requireOnboardedUser();
  const contentSnapshot = await getManualContentSnapshot();

  return (
    <PageShell
      title="Manual y FAQ"
      description="Guia operativa, preguntas frecuentes y soporte para usuarios de la plataforma."
      action={<Button variant="secondary">Descargar manual (PDF)</Button>}
    >
      {contentSnapshot.manualItems.length > 0 ? (
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold text-[#1f2a40]">Manual operativo</h2>
          </CardHeader>
          <CardContent>
            <Accordion items={contentSnapshot.manualItems} />
          </CardContent>
        </Card>
      ) : null}

      {contentSnapshot.faqItems.length > 0 ? (
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold text-[#1f2a40]">Preguntas frecuentes</h2>
          </CardHeader>
          <CardContent>
            <Accordion items={contentSnapshot.faqItems} />
          </CardContent>
        </Card>
      ) : null}

      {contentSnapshot.manualItems.length === 0 && contentSnapshot.faqItems.length === 0 ? (
        <Card>
          <CardHeader>
            <h2 className="text-lg font-semibold text-[#1f2a40]">Sin contenido publicado</h2>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-[#64718a]">No hay entradas de manual o FAQ en la base de datos para mostrar en esta seccion.</p>
          </CardContent>
        </Card>
      ) : null}
    </PageShell>
  );
}
