import React, { useState, useEffect } from 'react';
import { 
  Plus, 
  Trash2, 
  Download, 
  Settings, 
  User, 
  Monitor, 
  ClipboardCheck, 
  Stethoscope, 
  Wrench, 
  DollarSign, 
  ShieldCheck,
  MapPin,
  Mail,
  Phone,
  Loader2,
  RotateCcw
} from 'lucide-react';

const App = () => {
  const [isGenerating, setIsGenerating] = useState(false);
  const [isPreview, setIsPreview] = useState(false);
  const [showResetConfirm, setShowResetConfirm] = useState(false);
  
  // Función para crear la estructura base de un nuevo equipo
  const createNewEquipment = () => ({
    id: Date.now() + Math.random(),
    info: { type: '', brandModel: '', serialNumber: '' },
    reception: { hasCharger: false, physicalState: '', password: '' },
    diagnosis: { reportedFailure: '', findings: '', hardwareStatus: '', softwareStatus: '' },
    works: [{ id: Date.now() + 1, description: '' }],
    costs: { labor: 0, partsTotal: 0, partsDetails: '' }
  });

  // Datos iniciales para el formulario
  const getInitialData = () => ({
    orderNumber: 'OT-' + Math.floor(Math.random() * 1000000),
    date: new Date().toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' }),
    client: { name: '', id: '', phone: '', email: '' },
    equipments: [createNewEquipment()], 
    recommendations: [
      { id: 1, description: 'Realizar un mantenimiento preventivo cada 6 meses.' },
      { id: 2, description: 'Utilizar un regulador de voltaje o protector de picos.' }
    ],
    warrantyDays: 30,
    technicianName: 'ING. IVÁN BOLAGAY',
    technicianTitle: 'Gerente General'
  });

  const [data, setData] = useState(getInitialData());

  // Carga dinámica de la librería para exportar a PDF
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js';
    script.async = true;
    document.body.appendChild(script);
    return () => { if (document.body.contains(script)) document.body.removeChild(script); };
  }, []);

  const handleGlobalChange = (section, field, value) => {
    setData(prev => ({
      ...prev,
      [section]: typeof prev[section] === 'object' ? { ...prev[section], [field]: value } : value
    }));
  };

  const handleEquipChange = (equipId, section, field, value) => {
    setData(prev => ({
      ...prev,
      equipments: prev.equipments.map(e => {
        if (e.id !== equipId) return e;
        return {
          ...e,
          [section]: typeof e[section] === 'object' ? { ...e[section], [field]: value } : value
        };
      })
    }));
  };

  const addEquipment = () => {
    setData(prev => ({ ...prev, equipments: [...prev.equipments, createNewEquipment()] }));
  };

  const removeEquipment = (id) => {
    if (data.equipments.length > 1) {
      setData(prev => ({ ...prev, equipments: prev.equipments.filter(e => e.id !== id) }));
    }
  };

  const handleWorkChange = (equipId, workId, value) => {
    setData(prev => ({
      ...prev,
      equipments: prev.equipments.map(e => {
        if (e.id !== equipId) return e;
        return {
          ...e,
          works: e.works.map(w => w.id === workId ? { ...w, description: value } : w)
        };
      })
    }));
  };

  const addWork = (equipId) => {
    setData(prev => ({
      ...prev,
      equipments: prev.equipments.map(e => {
        if (e.id !== equipId) return e;
        return { ...e, works: [...e.works, { id: Date.now(), description: '' }] };
      })
    }));
  };

  const removeWork = (equipId, workId) => {
    setData(prev => ({
      ...prev,
      equipments: prev.equipments.map(e => {
        if (e.id !== equipId) return e;
        if (e.works.length <= 1) return e;
        return { ...e, works: e.works.filter(w => w.id !== workId) };
      })
    }));
  };

  // Función para resetear el formulario a su estado original
  const handleResetForm = () => {
    setData(getInitialData());
    setShowResetConfirm(false);
    setIsPreview(false);
  };

  // Lógica para descargar el documento PDF
  const handleDownloadPDF = async () => {
    if (isGenerating) return;
    const wasPreview = isPreview;
    if (!wasPreview) setIsPreview(true);
    setIsGenerating(true);

    setTimeout(() => {
      const element = document.getElementById('report-document');
      const opt = {
        margin: [10, 10, 10, 10],
        filename: `Informe_${data.orderNumber}_${data.client.name.replace(/\s+/g, '_')}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true, letterRendering: true, scrollY: 0 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };

      if (window.html2pdf) {
        window.html2pdf().from(element).set(opt).save().then(() => {
          setIsGenerating(false);
          if (!wasPreview) setIsPreview(false);
        });
      } else {
        setIsGenerating(false);
      }
    }, 600);
  };

  const totalLabor = data.equipments.reduce((acc, e) => acc + parseFloat(e.costs.labor || 0), 0);
  const totalParts = data.equipments.reduce((acc, e) => acc + parseFloat(e.costs.partsTotal || 0), 0);
  const grandTotal = totalLabor + totalParts;

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-20">
      {/* Header Interactivo */}
      <header className="bg-white border-b sticky top-0 z-30 print:hidden shadow-sm">
        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold shadow-md">CS</div>
            <h1 className="font-bold text-lg hidden sm:block tracking-tight text-slate-800 uppercase">CompuServer <span className="text-blue-600">Pro</span></h1>
          </div>
          <div className="flex gap-2 items-center">
            {/* Botón de Limpiar Formulario */}
            {!isPreview && (
              <div className="relative">
                <button 
                  onClick={() => setShowResetConfirm(!showResetConfirm)}
                  className="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 font-bold text-[10px] transition-all"
                  title="Borrar todo el contenido"
                >
                  <RotateCcw size={16} />
                  <span className="hidden lg:inline">LIMPIAR TODO</span>
                </button>
                
                {/* Modal de Confirmación */}
                {showResetConfirm && (
                  <div className="absolute top-full right-0 mt-2 w-48 bg-white border border-slate-200 shadow-2xl rounded-xl p-4 z-50 animate-in fade-in zoom-in-95 duration-200">
                    <p className="text-[10px] font-bold text-slate-500 uppercase mb-3 text-center leading-tight">¿Deseas vaciar todos los campos del formulario?</p>
                    <div className="flex gap-2">
                      <button 
                        onClick={handleResetForm}
                        className="flex-1 py-1.5 bg-red-500 text-white rounded-lg text-[9px] font-black uppercase"
                      >
                        Sí, Borrar
                      </button>
                      <button 
                        onClick={() => setShowResetConfirm(false)}
                        className="flex-1 py-1.5 bg-slate-100 text-slate-600 rounded-lg text-[9px] font-black uppercase"
                      >
                        No
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}

            <button onClick={() => setIsPreview(!isPreview)} className="flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-200 hover:bg-slate-50 font-bold text-xs transition-all uppercase tracking-tight">
              <Settings size={16} /> {isPreview ? 'Modo Edición' : 'Vista Previa'}
            </button>
            <button onClick={handleDownloadPDF} disabled={isGenerating} className="flex items-center gap-2 px-5 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold text-xs shadow-lg disabled:opacity-50 transition-all active:scale-95 uppercase tracking-tight">
              {isGenerating ? <Loader2 size={16} className="animate-spin" /> : <Download size={16} />}
              {isGenerating ? 'Generando...' : 'Descargar PDF'}
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-4 mt-8">
        {!isPreview ? (
          /* PESTAÑA DE EDICIÓN (FORMULARIO) */
          <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <section className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <h2 className="text-blue-600 font-black uppercase text-[10px] tracking-widest mb-4 flex items-center gap-2">
                  <ClipboardCheck size={16} /> Identificación de Servicio
                </h2>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-1">
                    <label className="text-[9px] font-black text-slate-400 uppercase">N° Orden</label>
                    <input type="text" value={data.orderNumber} onChange={(e) => handleGlobalChange('orderNumber', null, e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg font-mono font-bold text-blue-700 outline-none focus:ring-1 focus:ring-blue-500" />
                  </div>
                  <div className="space-y-1">
                    <label className="text-[9px] font-black text-slate-400 uppercase">Fecha</label>
                    <input type="text" value={data.date} onChange={(e) => handleGlobalChange('date', null, e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg outline-none focus:ring-1 focus:ring-blue-500" />
                  </div>
                </div>
              </section>

              <section className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <h2 className="text-blue-600 font-black uppercase text-[10px] tracking-widest mb-4 flex items-center gap-2">
                  <User size={16} /> Información del Cliente
                </h2>
                <div className="space-y-3">
                  <input placeholder="Nombre completo" type="text" value={data.client.name} onChange={(e) => handleGlobalChange('client', 'name', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-500" />
                  <div className="grid grid-cols-2 gap-3">
                    <input placeholder="C.I. / RUC" type="text" value={data.client.id} onChange={(e) => handleGlobalChange('client', 'id', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-500" />
                    <input placeholder="Teléfono" type="text" value={data.client.phone} onChange={(e) => handleGlobalChange('client', 'phone', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-500" />
                  </div>
                </div>
              </section>
            </div>

            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h2 className="font-black text-xl text-slate-800">Equipos Registrados ({data.equipments.length})</h2>
                <button onClick={addEquipment} className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-xl font-bold text-xs hover:bg-green-700 shadow-md transition-all active:scale-95 uppercase">
                  <Plus size={16} /> Añadir Equipo
                </button>
              </div>

              {data.equipments.map((equip, index) => (
                <div key={equip.id} className="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden border-t-4 border-t-slate-800">
                  <div className="bg-slate-800 text-white px-6 py-3 flex justify-between items-center">
                    <span className="font-black text-xs uppercase tracking-widest">Equipo #{index + 1}</span>
                    {data.equipments.length > 1 && (
                      <button onClick={() => removeEquipment(equip.id)} className="text-red-400 hover:text-red-300 flex items-center gap-1 text-[10px] font-bold uppercase transition-colors">
                        <Trash2 size={14} /> Quitar
                      </button>
                    )}
                  </div>
                  
                  <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div className="space-y-4">
                      <h4 className="text-blue-600 font-black text-[10px] uppercase flex items-center gap-2 tracking-widest"><Monitor size={14}/> Datos Técnicos</h4>
                      <input placeholder="Tipo (Laptop, Clon, etc)" value={equip.info.type} onChange={(e) => handleEquipChange(equip.id, 'info', 'type', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-500" />
                      <input placeholder="Marca y Modelo" value={equip.info.brandModel} onChange={(e) => handleEquipChange(equip.id, 'info', 'brandModel', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm outline-none focus:ring-1 focus:ring-blue-500" />
                      <input placeholder="N/S (Serial Number)" value={equip.info.serialNumber} onChange={(e) => handleEquipChange(equip.id, 'info', 'serialNumber', e.target.value)} className="w-full p-2 bg-slate-50 border-none rounded-lg text-sm font-mono outline-none focus:ring-1 focus:ring-blue-500" />
                      <label className="flex items-center gap-2 p-3 bg-blue-50 rounded-xl cursor-pointer hover:bg-blue-100 transition-colors">
                        <input type="checkbox" checked={equip.reception.hasCharger} onChange={(e) => handleEquipChange(equip.id, 'reception', 'hasCharger', e.target.checked)} className="w-4 h-4 rounded text-blue-600 border-blue-300" />
                        <span className="text-[10px] font-black text-blue-900 uppercase">¿Incluye cargador/cables?</span>
                      </label>
                    </div>

                    <div className="space-y-4 md:col-span-2">
                      <h4 className="text-blue-600 font-black text-[10px] uppercase flex items-center gap-2 tracking-widest"><Stethoscope size={14}/> Análisis y Trabajos</h4>
                      <div className="grid grid-cols-1 gap-4">
                        <div>
                          <label className="text-[9px] font-black text-slate-400 uppercase block mb-1">Falla Reportada por Cliente</label>
                          <textarea placeholder="Ej: No enciende, se apaga solo..." value={equip.diagnosis.reportedFailure} onChange={(e) => handleEquipChange(equip.id, 'diagnosis', 'reportedFailure', e.target.value)} rows="2" className="w-full p-2.5 bg-slate-50 border-none rounded-xl text-xs italic outline-none focus:ring-1 focus:ring-blue-500" />
                        </div>
                        <div>
                          <label className="text-[9px] font-black text-blue-600 uppercase block mb-1">Hallazgos Técnicos (Importante para PDF)</label>
                          <textarea placeholder="Describe el estado interno, errores detectados, componentes dañados..." value={equip.diagnosis.findings} onChange={(e) => handleEquipChange(equip.id, 'diagnosis', 'findings', e.target.value)} rows="3" className="w-full p-2.5 bg-slate-50 border-none rounded-xl text-xs font-semibold outline-none focus:ring-1 focus:ring-blue-500" />
                        </div>
                      </div>
                      
                      <div className="space-y-3 pt-2">
                        <div className="flex items-center justify-between">
                          <h5 className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Acciones Realizadas</h5>
                          <button onClick={() => addWork(equip.id)} className="text-blue-600 font-black text-[10px] uppercase hover:text-blue-800 transition-colors tracking-tighter">+ Añadir Trabajo</button>
                        </div>
                        <div className="space-y-2">
                          {equip.works.map((work, idx) => (
                            <div key={work.id} className="flex gap-2 group">
                              <div className="w-6 h-8 bg-slate-100 rounded-lg flex items-center justify-center text-[10px] font-bold text-slate-400">
                                {idx + 1}
                              </div>
                              <input value={work.description} onChange={(e) => handleWorkChange(equip.id, work.id, e.target.value)} placeholder={`Tarea realizada #${idx+1}`} className="flex-1 p-2 bg-slate-50 border-none rounded-lg text-xs outline-none focus:ring-1 focus:ring-blue-500" />
                              <button onClick={() => removeWork(equip.id, work.id)} className="p-2 text-slate-300 hover:text-red-500 transition-opacity"><Trash2 size={14}/></button>
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="pt-4 grid grid-cols-2 gap-4">
                        <div className="bg-slate-50 p-3 rounded-2xl border border-slate-100">
                          <label className="block text-[9px] font-black text-slate-400 mb-1 uppercase tracking-tighter">Mano de Obra ($)</label>
                          <input type="number" value={equip.costs.labor} onChange={(e) => handleEquipChange(equip.id, 'costs', 'labor', e.target.value)} className="w-full bg-transparent border-none font-black text-sm text-slate-800 outline-none" />
                        </div>
                        <div className="bg-slate-50 p-3 rounded-2xl border border-slate-100">
                          <label className="block text-[9px] font-black text-slate-400 mb-1 uppercase tracking-tighter">Costo Repuestos ($)</label>
                          <input type="number" value={equip.costs.partsTotal} onChange={(e) => handleEquipChange(equip.id, 'costs', 'partsTotal', e.target.value)} className="w-full bg-transparent border-none font-black text-sm text-slate-800 outline-none" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Cuadro de Resumen General */}
            <section className="bg-blue-600 p-8 rounded-[2.5rem] text-white shadow-xl flex flex-col md:flex-row justify-between items-center gap-6 border-4 border-white">
              <div>
                <h3 className="text-xl font-black uppercase tracking-widest">Resumen de Orden</h3>
                <p className="opacity-70 text-sm font-medium">Acumulado total de {data.equipments.length} equipo(s)</p>
              </div>
              <div className="flex gap-8 items-center">
                 <div className="text-right">
                    <p className="text-[10px] font-black opacity-60 uppercase tracking-widest">M. de Obra</p>
                    <p className="font-mono font-bold text-lg">${totalLabor.toFixed(2)}</p>
                 </div>
                 <div className="text-right">
                    <p className="text-[10px] font-black opacity-60 uppercase tracking-widest">Insumos</p>
                    <p className="font-mono font-bold text-lg">${totalParts.toFixed(2)}</p>
                 </div>
                 <div className="bg-white/20 h-12 w-px"></div>
                 <div className="text-right">
                    <p className="text-[10px] font-black opacity-80 uppercase tracking-widest text-blue-200 leading-none mb-1">Gran Total</p>
                    <p className="text-4xl font-black font-mono tracking-tighter leading-none">${grandTotal.toFixed(2)}</p>
                 </div>
              </div>
            </section>
          </div>
        ) : (
          /* PESTAÑA DE VISTA PREVIA (DOCUMENTO FINAL) */
          <div id="report-document" className="bg-white w-full max-w-[800px] mx-auto shadow-2xl p-8 min-h-[1100px] border relative overflow-hidden flex flex-col text-slate-900 animate-in zoom-in-95 duration-300">
            
            {/* Header del Documento */}
            <div className="flex justify-between items-start mb-6 border-b-4 border-slate-900 pb-6 relative z-10">
              <div className="flex gap-5">
                <div className="w-16 h-16 border-[4px] border-slate-900 rounded-xl flex items-center justify-center text-3xl font-black shadow-lg shadow-slate-100">CS</div>
                <div>
                  <h1 className="text-2xl font-black text-slate-900 leading-none mb-1 uppercase tracking-tighter">COMPUSERVER</h1>
                  <p className="text-blue-600 font-black tracking-[0.25em] text-[10px]">SOLUCIONES TECNOLÓGICAS</p>
                  <div className="mt-4 space-y-0.5 text-[8px] text-slate-500 font-bold uppercase tracking-tight">
                    <p className="flex items-center gap-1.5"><MapPin size={10} className="text-blue-500"/> Av. Luis Cordero 407 / Pichincha 212 y Colombia</p>
                    <p className="flex items-center gap-1.5"><Mail size={10} className="text-blue-500"/> compuserver@gmail.com | alexbolagay@gmail.com</p>
                    <p className="flex items-center gap-1.5"><Phone size={10} className="text-blue-500"/> +593 998 375 496 | +593 996 847 316</p>
                  </div>
                </div>
              </div>
              <div className="text-right">
                <div className="bg-slate-900 text-white px-5 py-3 rounded-xl mb-1 shadow-md">
                  <p className="text-[8px] uppercase font-black opacity-50 tracking-widest mb-1">Número de Orden</p>
                  <p className="text-xl font-mono font-black tracking-tighter">#{data.orderNumber}</p>
                </div>
                <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{data.date}</p>
              </div>
            </div>

            <h2 className="text-center text-lg font-black uppercase tracking-[0.4em] text-slate-800 mb-6 bg-slate-50 py-3 rounded-xl border border-slate-100">Informe Técnico de Servicio</h2>

            {/* Datos del Cliente Consolidados */}
            <div className="mb-6 grid grid-cols-2 gap-4 border border-slate-200 p-4 rounded-xl bg-white shadow-sm">
               <div className="text-[10px] space-y-2">
                 <p className="flex justify-between border-b border-slate-50 pb-1"><span className="text-slate-400 font-bold uppercase">Nombre Cliente:</span> <span className="font-black text-slate-800 uppercase text-right">{data.client.name || '---'}</span></p>
                 <p className="flex justify-between border-b border-slate-50 pb-1"><span className="text-slate-400 font-bold uppercase">Identificación/RUC:</span> <span className="font-bold text-slate-800 text-right">{data.client.id || '---'}</span></p>
               </div>
               <div className="text-[10px] space-y-2 text-right pl-6">
                 <p className="flex justify-between border-b border-slate-50 pb-1"><span className="text-slate-400 font-bold uppercase">Teléfono Contacto:</span> <span className="font-bold text-slate-800">{data.client.phone || '---'}</span></p>
                 <p className="flex justify-between border-b border-slate-50 pb-1"><span className="text-slate-400 font-bold uppercase">Técnico Asignado:</span> <span className="font-black text-blue-600 uppercase tracking-tighter">{data.technicianName}</span></p>
               </div>
            </div>

            {/* Mapeo de Equipos en el PDF */}
            <div className="space-y-6 flex-1">
              {data.equipments.map((e, idx) => (
                <div key={e.id} className="border border-slate-200 rounded-2xl overflow-hidden page-break-inside-avoid shadow-sm bg-white">
                  <div className="bg-slate-900 text-white px-5 py-2 flex justify-between items-center">
                    <span className="text-[10px] font-black uppercase tracking-widest">Equipo #{idx+1}: {e.info.type || 'N/A'}</span>
                    <span className="text-[8px] font-mono font-bold opacity-60 uppercase">Serie: {e.info.serialNumber || 'No Identificado'}</span>
                  </div>
                  
                  <div className="p-5 grid grid-cols-[1fr_2.5fr] gap-8">
                    {/* Lateral Izquierdo Info Equipo */}
                    <div className="space-y-4">
                      <div className="bg-blue-50/50 p-3 rounded-xl border border-blue-100/50">
                        <p className="text-[8px] font-black text-blue-400 uppercase mb-1 tracking-tighter">Marca / Modelo:</p>
                        <p className="text-[11px] font-black text-blue-900 uppercase leading-tight">{e.info.brandModel || '---'}</p>
                      </div>
                      <div className="text-[9px] px-1 space-y-1.5 border-l-2 border-slate-100 pl-3">
                        <p className="font-black text-slate-400 uppercase text-[7px] tracking-widest">Accesorios:</p>
                        <p className="font-black text-slate-700 leading-none">{e.reception.hasCharger ? '✓ INCLUYE CARGADOR' : '✗ SIN CARGADOR'}</p>
                      </div>
                      <div className="text-[9px] px-1 space-y-1.5 border-l-2 border-slate-100 pl-3">
                        <p className="font-black text-slate-400 uppercase text-[7px] tracking-widest">Falla Reportada:</p>
                        <p className="italic text-slate-500 leading-tight">"{e.diagnosis.reportedFailure || 'No detallada'}"</p>
                      </div>
                    </div>

                    {/* Contenido Técnico: HALLAZGOS Y TRABAJOS */}
                    <div className="space-y-4 border-l border-slate-100 pl-6">
                      {/* SECCIÓN DE HALLAZGOS TÉCNICOS DESTACADA */}
                      <div className="bg-slate-50 p-4 rounded-xl border-l-4 border-blue-600 shadow-sm shadow-blue-50">
                        <h4 className="text-[9px] font-black text-blue-600 uppercase mb-2 tracking-widest flex items-center gap-2">
                           <Stethoscope size={10} /> Hallazgos Técnicos (Diagnóstico)
                        </h4>
                        <p className="text-[11px] text-slate-800 leading-relaxed text-justify font-medium">
                          {e.diagnosis.findings || 'No se han detallado hallazgos específicos para este equipo.'}
                        </p>
                      </div>

                      <div className="space-y-3">
                        <h4 className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5 pl-1">Trabajos Realizados:</h4>
                        <div className="grid grid-cols-1 gap-1.5">
                          {e.works.map((w, wIdx) => w.description && (
                            <div key={w.id} className="text-[10px] flex items-start gap-3 text-slate-700 bg-slate-50/50 p-1.5 rounded-lg border border-slate-100/50">
                              <span className="w-4 h-4 bg-slate-900 text-white flex items-center justify-center rounded-md mt-0.5 flex-none font-black text-[8px]">{wIdx+1}</span>
                              <span className="font-semibold">{w.description}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Desglose de costo por equipo */}
                  <div className="bg-slate-50 px-5 py-1.5 flex justify-end text-[10px] font-black border-t border-slate-100 shadow-inner">
                    <span className="text-slate-400 uppercase tracking-tighter mr-4">Total Equipo #{idx+1}:</span>
                    <span className="text-slate-900 font-mono tracking-tighter font-black">${(parseFloat(e.costs.labor || 0) + parseFloat(e.costs.partsTotal || 0)).toFixed(2)}</span>
                  </div>
                </div>
              ))}
            </div>

            {/* Recomendaciones y Liquidación Final (Optimizado) */}
            <div className="mt-8 border-t-2 border-slate-900 pt-6 grid grid-cols-[1.3fr_1fr] gap-10 items-start page-break-inside-avoid">
              <div className="space-y-4">
                <h4 className="text-[10px] font-black uppercase text-slate-800 flex items-center gap-2 mb-3 tracking-widest">
                  <ShieldCheck size={14} className="text-green-600" /> Recomendaciones Técnicas
                </h4>
                <div className="grid grid-cols-1 gap-2.5">
                  {data.recommendations.map(r => (
                    <div key={r.id} className="text-[9px] text-slate-500 leading-tight border-l-2 border-slate-200 pl-3 py-1.5 bg-slate-50/20 rounded-r-lg">
                      {r.description}
                    </div>
                  ))}
                </div>
              </div>

              {/* CUADRO DE LIQUIDACIÓN RE-ESTILIZADO (Llamativo pero ligero) */}
              <div className="bg-blue-50/40 rounded-3xl border-2 border-blue-100 p-6 relative overflow-hidden shadow-sm shadow-blue-50">
                <div className="absolute top-0 right-0 w-24 h-24 bg-blue-100 opacity-20 -mr-12 -mt-12 rounded-full"></div>
                
                <h4 className="text-[9px] font-black text-blue-600 uppercase mb-4 tracking-[0.25em] flex items-center gap-2">
                   <DollarSign size={10} /> Liquidación Final
                </h4>
                
                <div className="space-y-2.5 text-[11px]">
                  <div className="flex justify-between text-slate-500 font-bold pb-1.5 border-b border-blue-100/50">
                    <span className="uppercase text-[9px] tracking-tight">Servicio Técnico</span>
                    <span className="font-mono text-slate-700">${totalLabor.toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between text-slate-500 font-bold pb-1.5 border-b border-blue-100/50">
                    <span className="uppercase text-[9px] tracking-tight">Partes y Repuestos</span>
                    <span className="font-mono text-slate-700">${totalParts.toFixed(2)}</span>
                  </div>
                  
                  <div className="pt-4 flex justify-between items-end">
                    <div className="flex flex-col">
                      <span className="font-black text-blue-800 uppercase text-[9px] tracking-widest leading-none mb-1">Gran Total:</span>
                      <span className="text-[7px] text-blue-400 font-black uppercase leading-none italic">Cobro en efectivo/transf*</span>
                    </div>
                    <span className="text-3xl font-black font-mono text-blue-700 tracking-tighter leading-none">${grandTotal.toFixed(2)}</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Bloque de Firmas Final */}
            <div className="mt-12 flex justify-between items-end px-6">
               <div className="space-y-2">
                 <div className="w-56 h-[1.5px] bg-slate-900 opacity-40"></div>
                 <div>
                   <p className="text-[11px] font-black text-slate-800 uppercase leading-none mb-0.5 tracking-tight">{data.technicianName}</p>
                   <p className="text-[8px] font-black text-blue-600 uppercase tracking-widest">{data.technicianTitle}</p>
                 </div>
                 <p className="text-[7px] font-mono text-slate-300">Validado por CompuServer Tech Intelligence</p>
               </div>
               <div className="text-center space-y-2.5">
                 <div className="w-64 h-24 border-2 border-slate-100 border-dashed rounded-[2.5rem] flex flex-col items-center justify-center bg-slate-50/50">
                    <span className="text-[7px] font-black text-slate-200 uppercase tracking-[0.3em] italic">Firma de Conformidad</span>
                 </div>
                 <p className="text-[10px] font-black text-slate-900 uppercase tracking-tighter">{data.client.name || 'CLIENTE'}</p>
               </div>
            </div>

            {/* Pie de Página */}
            <div className="mt-auto pt-10 text-center relative">
               <div className="absolute top-1/2 left-0 right-0 h-px bg-slate-100 -z-10"></div>
               <p className="bg-white px-8 inline-block text-[7px] font-mono text-slate-300 uppercase tracking-[0.6em]">CompuServer • Ingeniería y Excelencia al Servicio de su Tecnología • 2026</p>
            </div>
          </div>
        )}
      </main>

      {/* Reglas de Impresión y Estilos */}
      <style dangerouslySetInnerHTML={{ __html: `
        .page-break-inside-avoid {
          page-break-inside: avoid;
        }
        @media print {
          #report-document {
            box-shadow: none !important;
            border: none !important;
            padding: 8mm !important;
            margin: 0 !important;
          }
          header, button, .print\\:hidden { display: none !important; }
        }
      `}} />
    </div>
  );
};

export default App;