// Clients — list of B2B clients SOLUCERSA staffs. LIGHT.

function ClientsScreen({ onNavigate }) {
  return (
    <Page id="clients">
      <div className="flex items-end justify-between mb-5">
        <div>
          <div className="text-[11px] uppercase tracking-[0.18em] text-ink-500 mb-1.5 flex items-center gap-2 font-medium">
            <Icon.Building size={12} /> Clientes
          </div>
          <h1 className="text-2xl font-semibold tracking-tight text-ink-900">Clientes de SOLUCERSA</h1>
          <p className="text-sm text-ink-500 mt-1">
            <b className="text-ink-900">{DATA.CLIENTS.length} empresas activas</b> · {DATA.CLIENTS.reduce((a, c) => a + c.openRoles, 0)} vacantes en curso · {DATA.CLIENTS.reduce((a, c) => a + c.candidatesInPipe, 0).toLocaleString()} candidatos en pipeline.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="default" icon={<Icon.Download size={14} />}>Exportar</Button>
          <Button variant="primary" icon={<Icon.Plus size={14} />}>Nuevo cliente</Button>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {DATA.CLIENTS.map((c) => {
          const reqs = DATA.REQUISITIONS.filter((r) => r.clientId === c.id);
          return (
            <Card key={c.id} className="p-5 hover:border-brand-200 hover-lift" interactive>
              <div className="flex items-start gap-3 mb-4">
                <div className={`h-12 w-12 rounded-xl bg-gradient-to-br ${c.logoBg} flex items-center justify-center text-white text-sm font-bold shrink-0`}>
                  {c.monogram}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="text-base font-semibold text-ink-900 truncate">{c.name}</div>
                  <div className="text-[11px] text-ink-500 truncate">{c.industry}</div>
                  <div className="text-[11px] text-ink-500 mt-0.5 flex items-center gap-1">
                    <Icon.MapPin size={10} /> {c.city}, {c.country}
                  </div>
                </div>
                <Pill tone={c.sla === 'Enterprise' ? 'brand' : c.sla === 'Premium' ? 'amber' : 'slate'} size="sm">{c.sla}</Pill>
              </div>

              <div className="grid grid-cols-3 gap-2 mb-4">
                <ClientStat label="Vacantes" value={c.openRoles} />
                <ClientStat label="Pipeline" value={c.candidatesInPipe} />
                <ClientStat label="Desde" value={c.activeSince.split('-').slice().reverse().join('/').slice(0, 7)} />
              </div>

              <div className="space-y-1.5">
                <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 mb-1 font-medium">Vacantes abiertas</div>
                {reqs.length === 0 ? (
                  <div className="text-xs text-ink-500 italic">Sin vacantes activas</div>
                ) : reqs.slice(0, 3).map((r) => (
                  <div key={r.id} className="flex items-center justify-between text-xs">
                    <div className="flex items-center gap-2 text-ink-800 min-w-0">
                      <Icon.Briefcase size={11} className="text-ink-400 shrink-0" />
                      <span className="truncate">{r.title}</span>
                    </div>
                    <span className="tabular text-ink-500">{r.openings}</span>
                  </div>
                ))}
                {reqs.length > 3 && <div className="text-[11px] text-brand-600 font-medium">+{reqs.length - 3} más</div>}
              </div>

              <Divider className="my-4" />

              <div className="flex items-center justify-between">
                <Button size="sm" variant="ghost" onClick={() => onNavigate('requisitions')} iconRight={<Icon.ArrowRight size={11} />}>Ver vacantes</Button>
                <div className="flex gap-1">
                  <IconButton size="sm" variant="default" icon={<Icon.Mail size={12} />} title="Email" />
                  <IconButton size="sm" variant="default" icon={<Icon.External size={12} />} title="Portal cliente" />
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </Page>
  );
}

function ClientStat({ label, value }) {
  return (
    <div className="bg-ink-50 border border-line rounded-md px-2 py-2">
      <div className="text-[9px] uppercase tracking-wider text-ink-500 font-medium">{label}</div>
      <div className="text-sm font-semibold tabular text-ink-900 mt-0.5">{value}</div>
    </div>
  );
}

window.ClientsScreen = ClientsScreen;