/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { api } from '@/lib/api';
import { useLanguage } from '@/lib/language-context';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import {
  BookOpen,
  CalendarClock,
  CircleHelp,
  FileText,
  HeartPulse,
  Home,
  ShieldCheck,
  Stethoscope,
  Users,
} from 'lucide-react';

interface ManualContent {
  title: string;
  subtitle: string;
  quickStart: string[];
  menuMap: { name: string; purpose: string }[];
  sections: { id: string; icon: string; title: string; description: string; steps: string[] }[];
  faq: { q: string; a: string }[];
}

const iconMap: Record<string, any> = {
  Home,
  Users,
  Stethoscope,
  CalendarClock,
  FileText,
  ShieldCheck,
  HeartPulse,
};

const DEFAULT_CONTENT: ManualContent = {
  title: 'Manual de Usuario',
  subtitle: 'Esta guia explica, paso a paso, como usar todo el sitio para operar la clinica de forma completa.',
  quickStart: [
    'Inicia sesion con tu correo y contrasena.',
    'Abre Dashboard para revisar alertas y resumen del dia.',
    'Registra o busca al paciente en Pacientes.',
    'Agenda la cita desde Citas y confirma fecha/hora.',
    'Completa nota clinica y receta despues de la consulta.',
    'Revisa la agenda y los pendientes clinicos antes de cerrar la jornada.',
  ],
  menuMap: [
    { name: 'Dashboard', purpose: 'Resumen general, actividad reciente y accesos rapidos.' },
    { name: 'Pacientes', purpose: 'Alta, edicion, busqueda y consulta de expedientes.' },
    { name: 'Doctores', purpose: 'Registro y administracion del personal medico.' },
    { name: 'Citas', purpose: 'Calendario, programacion y seguimiento de consultas.' },
    { name: 'Recetas', purpose: 'Creacion y control de prescripciones medicas.' },
    { name: 'Perfil / Ajustes', purpose: 'Datos de cuenta, preferencias y seguridad.' },
    { name: 'Soporte', purpose: 'Canales de ayuda y envio de reportes.' },
  ],
  sections: [
    {
      id: 'vision-general',
      icon: 'Home',
      title: '1. Vision general del sistema',
      description:
        'MedKlinix centraliza operaciones de clinica: pacientes, doctores, citas, registros clinicos y recetas en una sola plataforma.',
      steps: [
        'Usa el menu lateral para cambiar de modulo.',
        'Usa el buscador para localizar registros rapidamente.',
        'Mantente en Dashboard para monitorear tareas pendientes y actividad.',
      ],
    },
    {
      id: 'pacientes',
      icon: 'Users',
      title: '2. Gestion de pacientes (flujo completo)',
      description: 'Este es el flujo principal para operar el sistema durante atencion diaria.',
      steps: [
        'Ir a Pacientes y hacer clic en Nuevo paciente.',
        'Completar datos obligatorios: nombre, contacto, fecha de nacimiento e identificacion.',
        'Guardar y confirmar que el paciente aparezca en el listado.',
        'Abrir el perfil del paciente para agregar historial clinico y observaciones.',
        'Usar filtros o busqueda por nombre/telefono para consultas futuras.',
      ],
    },
    {
      id: 'doctores',
      icon: 'Stethoscope',
      title: '3. Gestion de doctores',
      description: 'Permite mantener el equipo actualizado para asignaciones correctas de citas.',
      steps: [
        'Ir a Doctores y registrar medico con especialidad y datos de contacto.',
        'Validar que el doctor este activo en el listado.',
        'Actualizar informacion cuando cambie horario, especialidad o estado.',
      ],
    },
    {
      id: 'citas',
      icon: 'CalendarClock',
      title: '4. Citas y agenda',
      description: 'Controla la operacion diaria y evita conflictos de horario.',
      steps: [
        'Entrar en Citas y seleccionar fecha/hora disponible.',
        'Asignar paciente y doctor correctos.',
        'Guardar cita y revisar que aparezca en calendario.',
        'Si hay cambios, reprogramar o cancelar desde la misma vista.',
        'Al finalizar consulta, marcar estado correspondiente para seguimiento.',
      ],
    },
    {
      id: 'clinico-recetas',
      icon: 'FileText',
      title: '5. Registros clinicos y recetas',
      description: 'Documentacion medica clara y trazable por paciente.',
      steps: [
        'Desde el perfil del paciente, crear registro clinico nuevo.',
        'Guardar diagnostico, evolucion y recomendaciones.',
        'Crear receta con indicaciones y dosis exactas.',
        'Verificar que receta quede asociada al paciente correcto.',
      ],
    },
    {
      id: 'seguridad',
      icon: 'ShieldCheck',
      title: '6. Seguridad y buenas practicas',
      description: 'Proteccion de datos clinicos y acceso responsable.',
      steps: [
        'No compartir usuarios ni contrasenas.',
        'Cerrar sesion al terminar o al usar equipos compartidos.',
        'Actualizar credenciales periodicamente.',
        'Revisar permisos del equipo solo con personal autorizado.',
      ],
    },
    {
      id: 'soporte',
      icon: 'HeartPulse',
      title: '7. Soporte y resolucion de problemas',
      description: 'Pasos recomendados antes de escalar incidentes.',
      steps: [
        'Refrescar pagina si una vista no carga correctamente.',
        'Cerrar sesion e iniciar sesion otra vez si hay errores de acceso.',
        'Verificar conexion a internet y volver a intentar.',
        'Si persiste, abrir Soporte y enviar detalle del problema con modulo afectado.',
      ],
    },
  ],
  faq: [
    {
      q: 'No encuentro un paciente en busqueda.',
      a: 'Confirma ortografia, telefono o identificacion. Si no existe, registralo como nuevo paciente.',
    },
    {
      q: 'Una cita no aparece en calendario.',
      a: 'Revisa fecha, hora y estado de la cita. Refresca la pagina y valida filtros activos.',
    },
    {
      q: 'No puedo guardar una receta.',
      a: 'Verifica que el paciente este seleccionado y que los campos obligatorios esten completos.',
    },
  ],
};

export default function ManualPage() {
  const { t } = useLanguage();
  const [content, setContent] = useState<ManualContent>(DEFAULT_CONTENT);

  useEffect(() => {
    const load = async () => {
      const res = await api.content.getManual();
      if (res.success && res.data) {
        setContent(res.data as ManualContent);
      }
    };
    void load();
  }, []);

  return (
    <div className="min-h-screen bg-white pt-20">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="mb-8 rounded-2xl border border-cyan-100 bg-cyan-50 p-8">
          <div className="mb-4 inline-flex rounded-lg bg-white p-3 text-cyan-600 shadow-sm">
            <BookOpen className="h-8 w-8" />
          </div>
          <h1 className="text-4xl font-bold text-gray-900">{content.title}</h1>
          <p className="mt-3 text-lg text-gray-700">
            {content.subtitle}
          </p>
        </div>

        <section className="mb-8 rounded-xl border border-gray-200 bg-white p-6">
          <h2 className="mb-4 text-2xl font-semibold text-gray-900">{t('manualPage.quickStart')}</h2>
          <ol className="list-decimal space-y-2 pl-6 text-gray-700">
            {content.quickStart.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ol>
        </section>

        <section className="mb-8 rounded-xl border border-gray-200 bg-white p-6">
          <h2 className="mb-4 text-2xl font-semibold text-gray-900">{t('manualPage.menuMap')}</h2>
          <div className="grid gap-3 md:grid-cols-2">
            {content.menuMap.map((item) => (
              <div key={item.name} className="rounded-lg border border-gray-100 bg-gray-50 p-4">
                <h3 className="font-semibold text-gray-900">{item.name}</h3>
                <p className="text-sm text-gray-700">{item.purpose}</p>
              </div>
            ))}
          </div>
        </section>

        <div className="space-y-4">
          {content.sections.map((section) => {
            const Icon = iconMap[section.icon] || FileText;
            return (
              <article key={section.id} id={section.id} className="rounded-xl border border-gray-200 bg-white p-6">
                <div className="mb-3 flex items-center gap-3">
                  <div className="rounded-lg bg-cyan-100 p-2 text-cyan-700">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h2 className="text-xl font-semibold text-gray-900">{section.title}</h2>
                </div>
                <p className="mb-3 text-gray-700">{section.description}</p>
                <ol className="list-decimal space-y-2 pl-6 text-gray-700">
                  {section.steps.map((step) => (
                    <li key={step}>{step}</li>
                  ))}
                </ol>
              </article>
            );
          })}
        </div>

        <section className="mt-8 rounded-xl border border-gray-200 bg-white p-6">
          <div className="mb-4 flex items-center gap-2">
            <CircleHelp className="h-5 w-5 text-cyan-700" />
            <h2 className="text-2xl font-semibold text-gray-900">{t('manualPage.faq')}</h2>
          </div>
          <div className="space-y-4">
            {content.faq.map((item) => (
              <article key={item.q} className="rounded-lg border border-gray-100 bg-gray-50 p-4">
                <h3 className="font-semibold text-gray-900">{item.q}</h3>
                <p className="mt-1 text-gray-700">{item.a}</p>
              </article>
            ))}
          </div>
        </section>

        <div className="mt-10 flex flex-wrap gap-3">
          <Link
            href="/"
            className="inline-flex items-center rounded-full bg-cyan-600 px-6 py-3 font-medium text-white transition-colors hover:bg-cyan-500"
          >
            {t('manualPage.backHome')}
          </Link>
          <Link
            href="/dashboard"
            className="inline-flex items-center rounded-full border border-gray-300 px-6 py-3 font-medium text-gray-700 transition-colors hover:bg-gray-100"
          >
            {t('manualPage.goDashboard')}
          </Link>
        </div>
      </div>
    </div>
  );
}
