// Dashboard — LIGHT enterprise theme. SOLUCERSA + SOFIA branding.

function DashboardScreen({ onNavigate, onOpenAssistant }) {
  const sparkData = {
    blue:   [4, 6, 5, 7, 6, 9, 8, 11, 10, 13],
    violet: [38, 42, 51, 47, 55, 62, 64, 71, 68, 74],
    amber:  [12, 11, 13, 15, 14, 18, 17, 19, 22, 24],
    down:   [9.2, 8.7, 8.4, 8.0, 7.6, 7.1, 6.8, 6.5, 6.2, 5.9],
    emerald:[68, 72, 70, 75, 79, 82, 85, 88, 91, 94],
  };

  return (
    <Page id="dashboard">
      <div className="flex items-end justify-between mb-7">
        <div>
          <div className="text-[11px] uppercase tracking-[0.18em] text-ink-500 mb-1.5 flex items-center gap-2 font-medium">
            <Icon.Dashboard size={12} /> Workspace
          </div>
          <h1 className="text-[28px] font-semibold tracking-tight text-ink-900">
            Buen día, <span className="gradient-text">Marisol</span>
          </h1>
          <p className="text-sm text-ink-500 mt-1.5">
            SOLUCERSA tiene <b className="text-ink-900">7 vacantes activas</b> con sus clientes · <b className="text-ink-900">94 candidatos</b> en pipeline · <b className="text-ink-900">3 acciones</b> recomendadas por SOFIA.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="default" icon={<Icon.Plus size={14} />}>Nueva vacante</Button>
          <Button variant="primary" icon={<Icon.SofiaMark size={14} />} onClick={onOpenAssistant}>
            Preguntar a SOFIA
          </Button>
        </div>
      </div>

      {/* KPI row */}
      <div className="grid grid-cols-5 gap-4 mb-6">
        <KpiCard label="Vacantes activas" value="7" sub="+2 esta semana"
          icon={<Icon.Briefcase size={14} />} trend={{ dir: 'up', value: '+29%' }}
          accent="radial-gradient(circle, #4f46e5, transparent 70%)" />
        <KpiCard label="Candidatos nuevos hoy" value="74" sub="vía Portal SOFIA"
          icon={<Icon.UserPlus size={14} />} trend={{ dir: 'up', value: '+12' }}
          accent="radial-gradient(circle, #7c3aed, transparent 70%)" />
        <KpiCard label="En pipeline" value="318" sub="94 con shortlist activa"
          icon={<Icon.Workflow size={14} />} trend={{ dir: 'up', value: '+8%' }}
          accent="radial-gradient(circle, #a855f7, transparent 70%)" />
        <KpiCard label="Tiempo a shortlist" value="5.9d" sub="meta: 7 días"
          icon={<Icon.Clock size={14} />} trend={{ dir: 'down', value: '−1.4d' }}
          accent="radial-gradient(circle, #d97706, transparent 70%)" />
        <KpiCard label="Screenings AI · sem" value="142" sub="94% precisión"
          icon={<Icon.PhoneCall size={14} />} trend={{ dir: 'up', value: '+22' }}
          accent="radial-gradient(circle, #10b981, transparent 70%)" />
      </div>

      {/* Main grid */}
      <div className="grid grid-cols-12 gap-5">
        {/* Funnel */}
        <Card className="col-span-7 p-6">
          <div className="flex items-center justify-between mb-5">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 mb-1 font-medium">Pipeline · últimos 30 días</div>
              <h3 className="text-base font-semibold text-ink-900">Funnel de reclutamiento</h3>
            </div>
            <Tabs
              value="30d" onChange={() => {}}
              tabs={[{ id: '7d', label: '7d' }, { id: '30d', label: '30d' }, { id: '90d', label: '90d' }]}
            />
          </div>
          <Funnel data={DATA.FUNNEL} />
          <Divider className="my-4" />
          <div className="grid grid-cols-3 text-xs">
            <div>
              <div className="text-ink-500">Conversión global</div>
              <div className="text-lg font-semibold tabular text-ink-900 mt-0.5">3.0%</div>
            </div>
            <div>
              <div className="text-ink-500">Adopción AI Screening</div>
              <div className="text-lg font-semibold tabular text-ink-900 mt-0.5">59%</div>
            </div>
            <div>
              <div className="text-ink-500">Submitidos a cliente</div>
              <div className="text-lg font-semibold tabular text-ink-900 mt-0.5">94</div>
            </div>
          </div>
        </Card>

        {/* AI Insights */}
        <Card className="col-span-5 p-5 relative overflow-hidden border-ai-200 ai-soft">
          <div className="absolute -top-16 -right-16 h-40 w-40 rounded-full bg-ai-200/40 blur-3xl pointer-events-none" />
          <div className="flex items-center justify-between mb-3 relative">
            <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-ai-700 font-semibold">
              <Icon.Sparkles size={12} /> SOFIA AI Insights
            </div>
            <Pill tone="amber" size="sm">3 nuevas</Pill>
          </div>
          <div className="space-y-3 relative">
            {DATA.AI_INSIGHTS.map((i) => (
              <div key={i.id} className="p-3 rounded-lg bg-white border border-line hover:border-ai-300 transition-colors">
                <div className="text-sm text-ink-900 font-medium">{i.title}</div>
                <div className="text-xs text-ink-500 mt-1 leading-relaxed">{i.body}</div>
                <button
                  onClick={() => onNavigate(i.targetRoute)}
                  className="text-[11px] mt-2 text-ai-700 hover:text-ai-800 inline-flex items-center gap-1 font-semibold"
                >
                  {i.action} <Icon.ArrowRight size={11} />
                </button>
              </div>
            ))}
          </div>
        </Card>

        {/* Activity */}
        <Card className="col-span-7 p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 mb-1 font-medium">Tiempo real</div>
              <h3 className="text-base font-semibold text-ink-900">Actividad reciente</h3>
            </div>
            <button className="text-xs text-ink-500 hover:text-ink-900 flex items-center gap-1">Ver todo <Icon.ChevronRight size={12} /></button>
          </div>
          <div className="space-y-1">
            {DATA.ACTIVITY.map((a) => {
              const I = Icon[a.icon] || Icon.Dot;
              const tones = {
                amber:   'bg-ai-50 text-ai-700 border-ai-100',
                brand:   'bg-brand-50 text-brand-600 border-brand-100',
                emerald: 'bg-emerald-50 text-emerald-700 border-emerald-100',
                sky:     'bg-sky-50 text-sky-700 border-sky-100',
                slate:   'bg-ink-50 text-ink-700 border-line',
              };
              return (
                <div key={a.id} className="flex items-start gap-3 py-2.5 px-1 border-b border-line2 last:border-0">
                  <div className={`h-7 w-7 rounded-lg flex items-center justify-center border ${tones[a.tone]} shrink-0`}>
                    <I size={13} />
                  </div>
                  <div className="flex-1 min-w-0 text-sm text-ink-700">
                    {a.text}
                  </div>
                  <span className="text-[11px] text-ink-500 shrink-0">{a.t}</span>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Open requisitions quick view */}
        <Card className="col-span-5 p-6">
          <div className="flex items-center justify-between mb-4">
            <div>
              <div className="text-[10px] uppercase tracking-[0.18em] text-ink-500 mb-1 font-medium">Por revisar</div>
              <h3 className="text-base font-semibold text-ink-900">Vacantes prioritarias</h3>
            </div>
            <Button size="sm" variant="ghost" onClick={() => onNavigate('requisitions')} iconRight={<Icon.ArrowRight size={12} />}>Abrir</Button>
          </div>
          <div className="space-y-2.5">
            {DATA.REQUISITIONS.filter((r) => r.status === 'Active').slice(0, 4).map((r) => {
              const client = DATA.CLIENTS.find((c) => c.id === r.clientId);
              return (
                <button
                  key={r.id}
                  onClick={() => onNavigate('requisitions')}
                  className="w-full flex items-center gap-3 p-3 rounded-lg border border-line hover:border-brand-200 hover:bg-brand-50/30 hover-lift text-left"
                >
                  <div className={`h-9 w-9 rounded-lg bg-gradient-to-br ${client.logoBg} flex items-center justify-center text-white text-[11px] font-bold shrink-0`}>
                    {client.monogram}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-ink-900 truncate">{r.title}</div>
                    <div className="text-[11px] text-ink-500 flex items-center gap-2 mt-0.5">
                      <span>{r.client}</span>
                      <span className="h-0.5 w-0.5 rounded-full bg-ink-300" />
                      <span>{r.openings} plazas</span>
                    </div>
                  </div>
                  <div className="text-right shrink-0">
                    <PriorityBadge value={r.priority} />
                    <div className="text-[11px] tabular text-ink-500 mt-1">{r.matched} matches</div>
                  </div>
                </button>
              );
            })}
          </div>
        </Card>
      </div>
    </Page>
  );
}

window.DashboardScreen = DashboardScreen;