/* BENEFICIARIES — manage family covered by the employee's benefit
   Hydrated: recibe { user, onNavigate, onLogout } desde MainApp.
   Carga beneficiarios reales desde GET /api/employees/me/beneficiaries */

const ELIGIBILITY = [
  { ok:true,  label:'Conyuge legal o companero(a) permanente' },
  { ok:true,  label:'Hijos hasta los 18 anos' },
  { ok:true,  label:'Hijos hasta los 25 anos si estudian a tiempo completo' },
  { ok:true,  label:'Padres dependientes economicamente' },
  { ok:false, label:'Hermanos y otros familiares no aplican' },
];

const RELATION_TONE = {
  'Conyuge':   'midnight',
  'Hijo':      'mint',
  'Hija':      'mint',
  'Padre':     'midnight',
  'Madre':     'midnight',
};

const GRADIENTS = [
  'from-pink-300 to-rose-400',
  'from-sky-300 to-indigo-400',
  'from-amber-200 to-orange-400',
  'from-mint-300 to-mint-500',
  'from-midnight-300 to-midnight-500',
];

function getInitials(name) {
  return name.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase();
}

function getStatusTone(status) {
  if (!status) return 'slate';
  const s = status.toLowerCase();
  if (s === 'activo' || s === 'active') return 'mint';
  if (s === 'pendiente' || s === 'en verificacion' || s === 'pending') return 'amber';
  return 'slate';
}

function formatDate(dateStr) {
  if (!dateStr) return 'Sin visitas';
  const d = new Date(dateStr);
  return d.toLocaleDateString('es-CO', { day:'2-digit', month:'short', year:'numeric' });
}

const BenefCard = ({ b, gradient }) => {
  const initials = getInitials(b.name);
  const statusTone = getStatusTone(b.status);
  const relationTone = RELATION_TONE[b.relation] || 'midnight';
  const statusLabel = b.status || 'Activo';
  const age = b.age != null ? b.age : '';

  return (
    <div className="bg-white rounded-2xl ring-1 ring-line p-5 shadow-card flex flex-col">
      <div className="flex items-start gap-3">
        <div className={`h-12 w-12 rounded-2xl bg-gradient-to-br ${gradient} grid place-items-center text-white text-[15px] font-semibold shrink-0`}>
          {initials}
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-[14px] font-semibold text-midnight-900 leading-tight">{b.name}</div>
          <div className="mt-1.5 flex items-center gap-1.5 flex-wrap">
            <Badge tone={relationTone}>{b.relation}</Badge>
            {age && <span className="text-[11.5px] text-slate-500 tnum">{age} anos</span>}
          </div>
        </div>
        <button className="text-slate-400 hover:text-midnight-700 -mr-1"><I.more className="h-4 w-4"/></button>
      </div>

      <div className="mt-4 pt-4 border-t border-line space-y-2 text-[12px]">
        <div className="flex items-center justify-between">
          <span className="text-slate-400">Documento</span>
          <span className="text-midnight-800 tnum">{b.doc_type || 'N/A'} {b.doc_num ? `· ${b.doc_num}` : ''}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-slate-400">Cobertura</span>
          <span className="text-midnight-800">{b.coverage || 'Plan corporativo'}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-slate-400">Estado</span>
          <span className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium ring-1 ring-inset
            ${statusTone==='mint'  ? 'bg-mint-50 text-mint-700 ring-mint-200' :
              statusTone==='amber' ? 'bg-amber-50 text-amber-700 ring-amber-200' :
                                     'bg-slate-50 text-slate-600 ring-slate-200'}`}>
            <StatusDot tone={statusTone}/>{statusLabel}
          </span>
        </div>
        {b.date_of_birth && (
          <div className="flex items-center justify-between">
            <span className="text-slate-400">Nacimiento</span>
            <span className="text-midnight-800 tnum">{formatDate(b.date_of_birth)}</span>
          </div>
        )}
      </div>

      <div className="mt-5 pt-4 border-t border-line flex items-center justify-end">
        <div className="flex items-center gap-1.5">
          <button className="h-8 px-2.5 rounded-lg ring-1 ring-line text-[11.5px] text-midnight-800 hover:bg-paper">Historial</button>
          <button className="h-8 px-2.5 rounded-lg bg-midnight-900 text-white text-[11.5px] font-medium hover:bg-midnight-800 inline-flex items-center gap-1">
            <I.plus className="h-3 w-3"/>Reservar
          </button>
        </div>
      </div>
    </div>
  );
};

const AddBenefCard = () => (
  <button className="rounded-2xl border-2 border-dashed border-line bg-white/60 hover:bg-white hover:border-midnight-300 transition p-5 flex flex-col items-center justify-center text-center gap-3 group min-h-[280px]">
    <div className="h-12 w-12 rounded-2xl bg-paper text-midnight-700 group-hover:bg-midnight-900 group-hover:text-white grid place-items-center transition">
      <I.plus className="h-5 w-5"/>
    </div>
    <div>
      <div className="text-[13.5px] font-semibold text-midnight-900">Agregar beneficiario</div>
      <div className="text-[11.5px] text-slate-500 mt-1 max-w-[180px]">Conyuge, hijos o padres dependientes. Requiere verificacion de RR.HH.</div>
    </div>
  </button>
);

function BeneficiariesView({ user, onNavigate, onLogout }) {
  const u = user || { full_name:'Empleado Demo', code:'0-0000', role:'user' };
  const firstName = u.full_name.split(' ')[0];

  const [beneficiaries, setBeneficiaries] = React.useState([]);
  const [recentAppts, setRecentAppts]     = React.useState([]);
  const [total, setTotal]                 = React.useState(0);
  const [loading, setLoading]             = React.useState(true);
  const [filter, setFilter]               = React.useState('all'); // all | active | pending

  /* Cargar datos al montar */
  React.useEffect(() => {
    if (!window.apiFetch) { setLoading(false); return; }
    window.apiFetch('/api/employees/me/beneficiaries')
      .then(r => r.ok ? r.json() : { beneficiaries:[], recent_appointments:[], total:0 })
      .then(data => {
        setBeneficiaries(data.beneficiaries || []);
        setRecentAppts(data.recent_appointments || []);
        setTotal(data.total || 0);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  /* Filtro local */
  const filtered = filter === 'all' ? beneficiaries :
    filter === 'active' ? beneficiaries.filter(b => (b.status || 'activo').toLowerCase() === 'activo' || (b.status || 'active').toLowerCase() === 'active') :
    beneficiaries.filter(b => {
      const s = (b.status || '').toLowerCase();
      return s === 'pendiente' || s === 'en verificacion' || s === 'pending';
    });

  const activeCount = beneficiaries.filter(b => {
    const s = (b.status || 'activo').toLowerCase();
    return s === 'activo' || s === 'active';
  }).length;

  const pendingCount = beneficiaries.filter(b => {
    const s = (b.status || '').toLowerCase();
    return s === 'pendiente' || s === 'en verificacion' || s === 'pending';
  }).length;

  /* Stats derivados */
  const stats = [
    { l:'Cupos usados',    v:`${total} / 5`,    h:`${5 - total} disponibles` },
    { l:'Citas del ano',   v: String(recentAppts.length), h:'de beneficiarios' },
    { l:'Activos',         v: String(activeCount),         h:'con cobertura' },
    { l:'En verificacion', v: String(pendingCount),        h:'tramite RR.HH.' },
  ];

  return (
    <div className="bg-paper min-h-full font-sans text-ink">
      <TopNav user={u} currentView="beneficiaries" onNavigate={onNavigate} onLogout={onLogout}/>

      {/* HERO */}
      <section className="max-w-[1200px] mx-auto px-10 pt-10 pb-6">
        <div className="flex items-end justify-between">
          <div>
            <div className="text-[12px] font-medium text-mint-600 uppercase tracking-[0.14em]">Tu nucleo familiar</div>
            <h1 className="text-[32px] font-semibold tracking-tight text-midnight-900 mt-2 leading-[1.1]">
              Beneficiarios cubiertos por la empresa.
            </h1>
            <p className="text-[14px] text-slate-500 mt-2 max-w-[560px]">
              Agrega a tu familia para que tambien accedan a la clinica interna. Cada empleado puede tener hasta <span className="text-midnight-800 font-medium">5 beneficiarios activos</span>.
            </p>
          </div>
          <button className="inline-flex items-center gap-2 h-11 px-5 rounded-xl bg-midnight-900 text-white text-[13.5px] font-semibold hover:bg-midnight-800">
            <I.plus className="h-4 w-4"/>Agregar beneficiario
          </button>
        </div>

        {/* stats row */}
        <div className="mt-7 grid grid-cols-4 gap-3">
          {stats.map((s,i) => (
            <div key={i} className="bg-white rounded-2xl ring-1 ring-line p-4 shadow-card">
              <div className="text-[11.5px] text-slate-500 font-medium">{s.l}</div>
              <div className="text-[20px] font-semibold text-midnight-900 mt-1.5 tnum tracking-tight">{s.v}</div>
              <div className="text-[11px] text-slate-400 mt-0.5">{s.h}</div>
            </div>
          ))}
        </div>
      </section>

      {/* BODY GRID */}
      <section className="max-w-[1200px] mx-auto px-10 pb-16">
        <div className="grid grid-cols-12 gap-6">

          {/* LEFT — beneficiary cards + recent appts */}
          <div className="col-span-8 space-y-6">

            {/* CARDS */}
            <div>
              <div className="flex items-center justify-between mb-4">
                <div className="text-[15px] font-semibold text-midnight-900">Mis beneficiarios</div>
                <div className="inline-flex rounded-lg ring-1 ring-line text-[11.5px] bg-white overflow-hidden">
                  <button onClick={() => setFilter('active')}
                    className={`px-2.5 h-8 ${filter==='active' ? 'bg-midnight-900 text-white font-medium' : 'text-slate-600 hover:bg-paper'}`}>
                    Activos · {activeCount}
                  </button>
                  <button onClick={() => setFilter('pending')}
                    className={`px-2.5 h-8 ${filter==='pending' ? 'bg-midnight-900 text-white font-medium' : 'text-slate-600 hover:bg-paper'}`}>
                    Pendientes · {pendingCount}
                  </button>
                  <button onClick={() => setFilter('all')}
                    className={`px-2.5 h-8 ${filter==='all' ? 'bg-midnight-900 text-white font-medium' : 'text-slate-600 hover:bg-paper'}`}>
                    Todos
                  </button>
                </div>
              </div>

              {loading ? (
                <div className="grid grid-cols-2 gap-4">
                  {[0,1].map(i => (
                    <div key={i} className="bg-white rounded-2xl ring-1 ring-line p-5 shadow-card h-[280px] animate-pulse">
                      <div className="flex items-start gap-3">
                        <div className="h-12 w-12 rounded-2xl bg-slate-200"/>
                        <div className="flex-1 space-y-2">
                          <div className="h-4 w-32 bg-slate-200 rounded"/>
                          <div className="h-3 w-20 bg-slate-100 rounded"/>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="grid grid-cols-2 gap-4">
                  {filtered.map((b, i) => <BenefCard key={b.id} b={b} gradient={GRADIENTS[i % GRADIENTS.length]}/>)}
                  {total < 5 && <AddBenefCard/>}
                </div>
              )}

              {!loading && filtered.length === 0 && beneficiaries.length > 0 && (
                <div className="text-center py-8 text-[13px] text-slate-400">
                  No hay beneficiarios con ese filtro.
                </div>
              )}
              {!loading && beneficiaries.length === 0 && (
                <div className="bg-white rounded-2xl ring-1 ring-line p-10 shadow-card text-center">
                  <div className="text-[15px] font-semibold text-midnight-900">No tienes beneficiarios registrados</div>
                  <div className="text-[13px] text-slate-500 mt-2">Agrega a tu conyuge, hijos o padres dependientes.</div>
                </div>
              )}
            </div>

            {/* RECENT APPOINTMENTS TABLE */}
            <div className="bg-white rounded-2xl ring-1 ring-line shadow-card overflow-hidden">
              <div className="px-6 py-5 border-b border-line flex items-center justify-between">
                <div>
                  <div className="text-[15px] font-semibold text-midnight-900">Citas recientes de beneficiarios</div>
                  <div className="text-[12px] text-slate-500 mt-0.5">Trazabilidad consolidada del nucleo familiar.</div>
                </div>
              </div>

              <table className="w-full text-left">
                <thead>
                  <tr className="text-[10.5px] uppercase tracking-wider text-slate-500 bg-paper/50">
                    <th className="font-medium px-6 py-3">Beneficiario</th>
                    <th className="font-medium px-3 py-3">Fecha</th>
                    <th className="font-medium px-3 py-3">Especialidad</th>
                    <th className="font-medium px-3 py-3">Profesional</th>
                    <th className="font-medium px-3 py-3">Estado</th>
                  </tr>
                </thead>
                <tbody>
                  {recentAppts.length === 0 && !loading && (
                    <tr><td colSpan={5} className="px-6 py-8 text-center text-[13px] text-slate-400">Sin citas de beneficiarios</td></tr>
                  )}
                  {recentAppts.map((a, i) => {
                    const startDate = new Date(a.start_at);
                    const dateStr = startDate.toLocaleDateString('es-CO', { day:'2-digit', month:'short' });
                    const timeStr = startDate.toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit', hour12:false });
                    const statusMap = { confirmed:'Confirmada', completed:'Atendida', cancelled:'Cancelada', in_progress:'En consulta', no_show:'No asistio' };
                    const toneMap = { confirmed:'mint', completed:'slate', cancelled:'rose', in_progress:'midnight', no_show:'rose' };
                    const tone = toneMap[a.status] || 'slate';

                    return (
                      <tr key={a.id} className={`text-[12.5px] ${i!==recentAppts.length-1 ? 'border-b border-line' : ''} hover:bg-paper/50 transition`}>
                        <td className="px-6 py-3.5">
                          <div className="text-midnight-900 font-medium">{a.beneficiary?.name || 'Beneficiario'}</div>
                          <div className="text-slate-400 text-[11px]">{a.beneficiary?.relation || ''}</div>
                        </td>
                        <td className="px-3 py-3.5 text-midnight-800 tnum">{dateStr} · {timeStr}</td>
                        <td className="px-3 py-3.5"><Badge tone="midnight">{a.specialty?.name || 'Consulta'}</Badge></td>
                        <td className="px-3 py-3.5 text-slate-700">{a.professional?.full_name || ''}</td>
                        <td className="px-3 py-3.5">
                          <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium ring-1 ring-inset
                            ${tone==='mint'  ? 'bg-mint-50 text-mint-700 ring-mint-200' :
                              tone==='rose'  ? 'bg-rose-50 text-rose-700 ring-rose-200' :
                                               'bg-slate-50 text-slate-600 ring-slate-200'}`}>
                            <StatusDot tone={tone}/>{statusMap[a.status] || a.status}
                          </span>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>

          {/* RIGHT — eligibility + tips */}
          <div className="col-span-4 space-y-4">

            {/* ELIGIBILITY */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-6 shadow-card">
              <div className="flex items-start gap-3">
                <div className="h-9 w-9 rounded-lg bg-mint-100 text-mint-700 grid place-items-center shrink-0">
                  <I.shield className="h-4 w-4"/>
                </div>
                <div>
                  <div className="text-[14px] font-semibold text-midnight-900">Quien puede ser beneficiario?</div>
                  <div className="text-[12px] text-slate-500 mt-1">Politica corporativa de cobertura familiar.</div>
                </div>
              </div>
              <div className="mt-5 space-y-2.5">
                {ELIGIBILITY.map((e,i) => (
                  <div key={i} className="flex items-start gap-2.5 text-[12.5px]">
                    {e.ok ? (
                      <span className="h-4 w-4 rounded-full bg-mint-100 text-mint-700 grid place-items-center shrink-0 mt-0.5">
                        <I.check className="h-3 w-3"/>
                      </span>
                    ) : (
                      <span className="h-4 w-4 rounded-full bg-slate-100 text-slate-400 grid place-items-center shrink-0 mt-0.5 text-[10px] font-bold">x</span>
                    )}
                    <span className={e.ok ? 'text-midnight-800' : 'text-slate-400 line-through'}>{e.label}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* PENDING VERIF */}
            {pendingCount > 0 && (
              <div className="bg-midnight-900 text-white rounded-2xl p-6 shadow-pop overflow-hidden relative">
                <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-amber-400/15 blur-2xl"/>
                <div className="text-[11px] uppercase tracking-[0.16em] text-amber-300 font-medium inline-flex items-center gap-1.5">
                  <I.clock className="h-3.5 w-3.5"/>{pendingCount} tramite{pendingCount > 1 ? 's' : ''} pendiente{pendingCount > 1 ? 's' : ''}
                </div>
                <div className="text-[12px] text-white/60 mt-3">
                  Hay beneficiarios esperando verificacion de RR.HH.
                </div>
              </div>
            )}

            {/* TIPS */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-5 shadow-card">
              <div className="flex items-start gap-3">
                <div className="h-8 w-8 rounded-lg bg-midnight-50 text-midnight-700 grid place-items-center shrink-0">
                  <I.bell className="h-4 w-4"/>
                </div>
                <div>
                  <div className="text-[13px] font-semibold text-midnight-900">Recordatorio</div>
                  <div className="text-[12px] text-slate-500 mt-1 leading-relaxed">
                    Mantene actualizados los documentos de tus beneficiarios para asegurar su cobertura medica.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.BeneficiariesView = BeneficiariesView;