import React, { useState } from 'react';
import { 
  HeartPulse, 
  Stethoscope, 
  Accessibility, 
  Home, 
  FileText, 
  UploadCloud, 
  Download, 
  CheckCircle2, 
  AlertCircle,
  FileDigit,
  Building,
  ChevronRight,
  ShieldCheck,
  UserCheck
} from 'lucide-react';

export default function App() {
  const [activeTab, setActiveTab] = useState('informacion'); // 'informacion' o 'sistema'
  const [selectedAidType, setSelectedAidType] = useState('');
  const [fileUploaded, setFileUploaded] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);

  // Datos extraídos del documento para la infografía
  const aidCategories = [
    {
      id: 'medicos',
      title: 'Gastos Médicos',
      icon: <HeartPulse className="w-10 h-10 text-red-500" />,
      color: 'bg-red-50 border-red-200',
      textColor: 'text-red-700',
      items: [
        'Cirugías ambulatorias (cataratas, hernias, etc.)',
        'Insumos médicos para cirugías',
        'Estudios diagnósticos (Tomografías, RM, ecos)',
        'Exámenes de laboratorio',
        'Perfil preoperatorio'
      ]
    },
    {
      id: 'odontologicos',
      title: 'Gastos Odontológicos',
      icon: <Stethoscope className="w-10 h-10 text-blue-500" />,
      color: 'bg-blue-50 border-blue-200',
      textColor: 'text-blue-700',
      items: [
        'Resinas simples y complejas',
        'Cirugías y exodoncias',
        'Fracturas y fisuras dentales',
        'Profilaxis',
        'Aplicación de flúor'
      ]
    },
    {
      id: 'tecnicas',
      title: 'Ayudas Técnicas',
      icon: <Accessibility className="w-10 h-10 text-green-500" />,
      color: 'bg-green-50 border-green-200',
      textColor: 'text-green-700',
      items: [
        'Sillas de ruedas',
        'Andaderas',
        'Muletas',
        'Bastones',
        'Equipos de apoyo motriz'
      ]
    },
    {
      id: 'vivienda',
      title: 'Reparación de Vivienda',
      icon: <Home className="w-10 h-10 text-amber-500" />,
      color: 'bg-amber-50 border-amber-200',
      textColor: 'text-amber-700',
      items: [
        'Cemento, arena, bloques',
        'Griferías y tuberías',
        'Láminas de zinc para techo',
        'Cerámica, pintura, yeso',
        'Reparaciones esenciales y urgentes'
      ]
    }
  ];

  const commonRequirements = [
    "Planilla de solicitud en letra legible y sin enmiendas.",
    "Carta dirigida al Presidente de Fondoefa (exposición de motivos).",
    "Fotocopia de C.I. y carnet del Empleado u Obrero (activo, jubilado o pensionado). O Constancia de trabajo original vigente.",
    "Documento probatorio de filiación (para familiares directos: padres, hijos, cónyuge).",
    "Informe Social elaborado por un Trabajador Social de Fondoefa."
  ];

  const specificRequirements = [
    "Informe médico original firmado y sellado por el médico tratante.",
    "Órdenes médicas para exámenes e insumos.",
    "Presupuesto original (Centro médico, odontológico, laboratorio, farmacia o ferretería) con RIF, firma, sello, fecha y dirección.",
    "Copia de la certificación bancaria de la empresa/institución para el pago.",
    "Para vivienda: Copia del documento de propiedad del inmueble."
  ];

  const handleSimulateUpload = (e) => {
    e.preventDefault();
    if (selectedAidType) {
      setIsSubmitting(true);
      setTimeout(() => {
        setIsSubmitting(false);
        setFileUploaded(true);
        setShowSuccessMessage(true);
        setTimeout(() => setShowSuccessMessage(false), 5000);
      }, 2000);
    } else {
      alert("Por favor, seleccione un tipo de ayuda económica primero.");
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 flex flex-col">
      {/* Header Institucional */}
      <header className="bg-slate-900 text-white shadow-md border-b-4 border-red-600">
        <div className="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center space-x-4">
            <Building className="w-12 h-12 text-slate-300" />
            <div>
              <h1 className="text-2xl font-bold tracking-tight">FONDOEFA</h1>
              <p className="text-sm text-slate-300 font-medium tracking-widest">GERENCIA DE ASISTENCIA SOCIAL</p>
            </div>
          </div>
          <div className="mt-4 md:mt-0 flex space-x-2">
            <button 
              onClick={() => setActiveTab('informacion')}
              className={`px-4 py-2 rounded-md font-medium transition-colors ${activeTab === 'informacion' ? 'bg-red-600 text-white' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'}`}
            >
              Beneficios Sociales
            </button>
            <button 
              onClick={() => setActiveTab('sistema')}
              className={`px-4 py-2 rounded-md font-medium transition-colors flex items-center gap-2 ${activeTab === 'sistema' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'}`}
            >
              <FileDigit className="w-4 h-4" />
              Sistema de Solicitudes
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow container mx-auto px-4 py-8 max-w-6xl">
        
        {/* --- VISTA DE INFORMACIÓN / INFOGRAFÍA --- */}
        {activeTab === 'informacion' && (
          <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
            {/* Hero Section */}
            <section className="text-center space-y-4 max-w-3xl mx-auto">
              <ShieldCheck className="w-16 h-16 text-blue-600 mx-auto mb-4" />
              <h2 className="text-4xl font-extrabold text-slate-900">Bienestar y Asistencia para nuestra FANB</h2>
              <p className="text-lg text-slate-600 leading-relaxed">
                Información detallada sobre los beneficios sociales y ayudas económicas que ofrece 
                <strong className="text-slate-800"> FONDOEFA</strong> a sus afiliados (Empleados y Obreros de la FANB).
              </p>
            </section>

            {/* Grid Infográfico de Ayudas */}
            <section>
              <h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-2 border-b-2 border-slate-200 pb-2">
                <HeartPulse className="w-6 h-6 text-red-600" />
                Tipos de Ayudas Económicas
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                {aidCategories.map((cat, idx) => (
                  <div key={idx} className={`rounded-xl border shadow-sm p-6 flex flex-col items-center text-center transition-transform hover:-translate-y-1 hover:shadow-md ${cat.color}`}>
                    <div className="bg-white p-4 rounded-full shadow-sm mb-4">
                      {cat.icon}
                    </div>
                    <h4 className={`text-lg font-bold mb-3 ${cat.textColor}`}>{cat.title}</h4>
                    <ul className="text-sm text-slate-700 space-y-2 w-full text-left">
                      {cat.items.map((item, i) => (
                        <li key={i} className="flex items-start gap-2">
                          <CheckCircle2 className={`w-4 h-4 mt-0.5 flex-shrink-0 ${cat.textColor}`} />
                          <span className="leading-tight">{item}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </section>

            {/* Sección de Requisitos Esquemática */}
            <section className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="bg-slate-800 px-6 py-4">
                <h3 className="text-xl font-bold text-white flex items-center gap-2">
                  <FileText className="w-5 h-5 text-blue-400" />
                  Requisitos para la Conformación de Solicitudes
                </h3>
              </div>
              <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-slate-200">
                <div className="p-6 md:p-8 space-y-4">
                  <h4 className="font-bold text-slate-800 text-lg flex items-center gap-2">
                    <UserCheck className="w-5 h-5 text-slate-500" />
                    Requisitos Comunes (Todas las solicitudes)
                  </h4>
                  <ul className="space-y-3">
                    {commonRequirements.map((req, i) => (
                      <li key={i} className="flex gap-3 text-slate-600 bg-slate-50 p-3 rounded-lg border border-slate-100">
                        <span className="bg-blue-100 text-blue-700 font-bold rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 text-sm">
                          {i + 1}
                        </span>
                        <span className="text-sm leading-relaxed">{req}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="p-6 md:p-8 space-y-4 bg-blue-50/30">
                  <h4 className="font-bold text-slate-800 text-lg flex items-center gap-2">
                    <AlertCircle className="w-5 h-5 text-blue-500" />
                    Requisitos Específicos (Según el caso)
                  </h4>
                  <ul className="space-y-3">
                    {specificRequirements.map((req, i) => (
                      <li key={i} className="flex gap-3 text-slate-600 bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
                        <ChevronRight className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
                        <span className="text-sm leading-relaxed">{req}</span>
                      </li>
                    ))}
                    <li className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 flex gap-2">
                      <AlertCircle className="w-5 h-5 flex-shrink-0 text-amber-500" />
                      <div>
                        <strong>Importante:</strong> Una vez cancelada la ayuda económica al centro de salud o ferretería, el solicitante deberá entregar la factura correspondiente en la Gerencia.
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </section>
          </div>
        )}

        {/* --- VISTA DEL SISTEMA INFORMÁTICO --- */}
        {activeTab === 'sistema' && (
          <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in zoom-in-95 duration-500">
            
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-slate-900 mb-2">Portal de Solicitudes Digitales</h2>
              <p className="text-slate-600">Sistema automatizado de la Gerencia de Asistencia Social para la recepción y agilización de expedientes.</p>
            </div>

            {/* Paso 1: Descarga de Planilla */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col md:flex-row items-center justify-between gap-6">
              <div className="flex items-center gap-4">
                <div className="bg-blue-100 p-3 rounded-full text-blue-600">
                  <Download className="w-8 h-8" />
                </div>
                <div>
                  <h3 className="font-bold text-lg text-slate-800">Paso 1: Descargar Planilla</h3>
                  <p className="text-sm text-slate-500">Descargue, imprima y llene la planilla de solicitud sin enmiendas.</p>
                </div>
              </div>
              <button className="w-full md:w-auto px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm transition-colors flex items-center justify-center gap-2">
                <FileText className="w-5 h-5" />
                Descargar Planilla (PDF)
              </button>
            </div>

            {/* Paso 2: Formulario de Carga */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="bg-slate-50 px-6 py-4 border-b border-slate-200">
                <h3 className="font-bold text-lg text-slate-800 flex items-center gap-2">
                  <UploadCloud className="w-5 h-5 text-blue-600" />
                  Paso 2: Conformación de Expediente Digital
                </h3>
              </div>
              
              <form className="p-6 space-y-6" onSubmit={handleSimulateUpload}>
                
                {/* Selección de Tipo de Ayuda */}
                <div>
                  <label htmlFor="aidType" className="block text-sm font-bold text-slate-700 mb-2">
                    Seleccione el tipo de ayuda solicitada:
                  </label>
                  <select 
                    id="aidType"
                    value={selectedAidType}
                    onChange={(e) => setSelectedAidType(e.target.value)}
                    className="w-full p-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                    required
                  >
                    <option value="" disabled>-- Seleccione una opción --</option>
                    <option value="medica">Ayuda para Gastos Médicos</option>
                    <option value="odontologica">Ayuda para Gastos Odontológicos</option>
                    <option value="tecnica">Ayuda Técnica (Sillas, andaderas, etc.)</option>
                    <option value="vivienda">Ayuda para Reparación de Vivienda</option>
                  </select>
                </div>

                {/* Instrucciones dinámicas basadas en selección */}
                {selectedAidType && (
                  <div className="bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-800">
                    <p className="font-bold flex items-center gap-2 mb-2">
                      <Info className="w-4 h-4" /> 
                      Documentos a incluir obligatoriamente para esta solicitud:
                    </p>
                    <ul className="list-disc list-inside space-y-1 ml-2 text-blue-700">
                      <li>Planilla firmada, Carta al Presidente, Copia C.I/Carnet, Informe Social.</li>
                      {selectedAidType === 'vivienda' 
                        ? <li>Presupuesto de ferretería original, Certificación bancaria y Copia de propiedad del inmueble.</li>
                        : <li>Informe médico, Órdenes, Presupuesto original y Certificación bancaria.</li>
                      }
                    </ul>
                  </div>
                )}

                {/* Zona de Arrastrar y Soltar */}
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-2">
                    Adjuntar Documentos (Expediente):
                  </label>
                  <div className="border-2 border-dashed border-slate-300 rounded-xl p-8 text-center hover:bg-slate-50 transition-colors cursor-pointer bg-white">
                    <UploadCloud className="w-12 h-12 text-slate-400 mx-auto mb-4" />
                    <p className="text-slate-600 font-medium mb-1">Haga clic o arrastre su archivo aquí</p>
                    <p className="text-sm text-slate-500 mb-4">
                      Por instrucciones de la gerencia, adjunte <strong>todos los documentos en un mismo archivo</strong> (preferiblemente PDF).
                    </p>
                    <input 
                      type="file" 
                      className="hidden" 
                      id="file-upload"
                      onChange={() => setFileUploaded(false)}
                      accept=".pdf,.zip"
                    />
                    <label 
                      htmlFor="file-upload" 
                      className="inline-flex items-center gap-2 px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-800 rounded-lg cursor-pointer transition-colors text-sm font-bold"
                    >
                      Seleccionar Archivo
                    </label>
                  </div>
                </div>

                {/* Mensaje de Éxito */}
                {showSuccessMessage && (
                  <div className="bg-green-50 text-green-800 border border-green-200 p-4 rounded-lg flex items-center gap-3 animate-in fade-in zoom-in">
                    <CheckCircle2 className="w-6 h-6 text-green-500 flex-shrink-0" />
                    <div>
                      <p className="font-bold">¡Expediente enviado con éxito!</p>
                      <p className="text-sm text-green-700">La Gerencia de Asistencia Social ha recibido sus documentos para análisis y aprobación.</p>
                    </div>
                  </div>
                )}

                {/* Botón de Enviar */}
                <div className="pt-4 border-t border-slate-200 flex justify-end">
                  <button 
                    type="submit"
                    disabled={isSubmitting}
                    className="px-8 py-3 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white font-bold rounded-lg shadow-md transition-all flex items-center gap-2"
                  >
                    {isSubmitting ? (
                      <>
                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        Procesando...
                      </>
                    ) : (
                      <>
                        <CheckCircle2 className="w-5 h-5" />
                        Enviar Expediente Digital
                      </>
                    )}
                  </button>
                </div>

              </form>
            </div>
          </div>
        )}

      </main>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-6 text-center text-sm mt-auto border-t border-slate-800">
        <div className="container mx-auto px-4">
          <p>© 2026 FONDOEFA - Ministerio del Poder Popular para la Defensa.</p>
          <p className="mt-1">Gerencia de Asistencia Social. "Independencia y Patria Socialista... Viviremos y Venceremos"</p>
          <p className="mt-4 text-xs text-slate-600 italic">Prototipo web generado a partir de las recomendaciones del Memorándum N° FONDOEFA/GAS-166</p>
        </div>
      </footer>
    </div>
  );
}