/* global React */
/* Dashboard — role-aware command center */

window.Dashboard = function Dashboard({ role, onNavigate }) {
  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 12) return 'Good morning';
    if (h < 18) return 'Good afternoon';
    return 'Good evening';
  })();
  const name = role === 'leadership' ? 'Rohan' : 'Priya';

  const opsKpis = [
    { label: 'Open RFQs needing review', value: 12, sub: '+3 vs yesterday', trend: 'up', trendKind: 'flat', spark: [4,6,5,7,8,9,11,12], color: 'var(--brand-600)' },
    { label: 'Quotes awaiting customer', value: 28, sub: '4 nearing expiry', trend: '—', trendKind: 'flat', spark: [22,24,23,26,27,28,28,28], color: 'var(--brand-600)' },
    { label: 'Shipments in transit', value: 47, sub: '2 customs holds', trend: '+2', trendKind: 'up', spark: [44,45,46,46,47,47,46,47], color: 'var(--brand-600)' },
    { label: 'Documents pending extraction', value: 6, sub: 'Avg 2m to extract', trend: '-3', trendKind: 'down', spark: [12,11,10,9,9,8,7,6], color: 'var(--brand-600)' },
  ];
  const leadKpis = [
    { label: 'Win rate this month', value: '34.2%', sub: '+2.1 pts vs Apr', trend: '+2.1', trendKind: 'up', spark: [28,29,30,31,32,33,34,34.2], color: 'var(--success-500)' },
    { label: 'Avg markup %', value: '8.0%', sub: 'Target 8.5%', trend: '-0.3', trendKind: 'down', spark: [8.5,8.4,8.3,8.2,8.1,8.0,8.0,8.0], color: 'var(--warning-500)' },
    { label: 'Lanes below benchmark', value: 5, sub: 'of 47 active lanes', trend: '+1', trendKind: 'down', spark: [3,4,4,4,5,5,5,5], color: 'var(--danger-500)' },
    { label: 'Revenue booked vs forecast', value: '$3.42M', sub: '94% of May target', trend: '+12%', trendKind: 'up', spark: [2.1,2.4,2.7,2.9,3.0,3.1,3.3,3.42], color: 'var(--success-500)' },
  ];
  const kpis = role === 'leadership' ? leadKpis : opsKpis;

  /* Module cards — order changes per role */
  const moduleCards = {
    demand: {
      title: 'Demand',
      icon: 'demand',
      headline: '47 open RFQs',
      sub: '12 need your attention',
      mini: <window.Sparkline data={[12,18,15,22,28,24,30,32,35,38,42,47]} color="#1659CB" w={140} h={32}/>,
      agentLine: 'Drafted 8 quotes, sent 3 clarification emails',
      target: 'demand',
    },
    supply: {
      title: 'Supply',
      icon: 'supply',
      headline: '186 active rates',
      sub: '23 expiring this week',
      mini: (
        <div style={{ display: 'flex', gap: 2, height: 32, alignItems: 'flex-end' }}>
          {[18,22,24,21,28,30,26,32,28,30,26,24].map((v, i) => (
            <div key={i} style={{ flex: 1, height: `${v}px`, background: 'var(--brand-300)', borderRadius: 2 }}/>
          ))}
        </div>
      ),
      agentLine: 'Sent 4 rate requests, ingested 28 spot rates',
      target: 'supply',
    },
    planning: {
      title: 'Profiling',
      icon: 'planning',
      headline: '6 insights',
      sub: '3 actions recommended',
      mini: (
        <div style={{ display: 'flex', gap: 4 }}>
          <span className="badge b-success" style={{ fontSize: 10 }}>2 wins</span>
          <span className="badge b-warning" style={{ fontSize: 10 }}>3 alerts</span>
          <span className="badge b-agent" style={{ fontSize: 10 }}>1 new</span>
        </div>
      ),
      agentLine: 'Recalibrated markup for 2 customers',
      target: 'planning',
    },
    operations: {
      title: 'Operations',
      icon: 'operations',
      headline: '47 active shipments',
      sub: '2 customs holds, 6 docs pending',
      mini: (
        <div className="mini-bar">
          <div style={{ width: '12%', background: 'var(--brand-300)' }}/>
          <div style={{ width: '28%', background: 'var(--brand-500)' }}/>
          <div style={{ width: '40%', background: 'var(--brand-700)' }}/>
          <div style={{ width: '16%', background: 'var(--success-500)' }}/>
          <div style={{ width: '4%',  background: 'var(--warning-500)' }}/>
        </div>
      ),
      agentLine: 'Extracted 23 fields from 4 documents',
      target: 'operations',
    },
  };
  const moduleOrder = role === 'leadership'
    ? ['planning', 'demand', 'supply', 'operations']
    : ['demand', 'supply', 'operations', 'planning'];

  /* For your attention */
  const attention = role === 'leadership'
    ? [
        { priority: 'warning', title: 'Avg markup down 0.3 pts this week', body: 'Largest drop on HKG → LAX lane. 3 customers under-pricing.', cta: 'Open Demand Profiling', target: 'planning' },
        { priority: 'agent', title: 'SIN → RTM rates outperform benchmark by 4%', body: 'Agent suggests holding markup at 9.5% next 30 days.', cta: 'Review', target: 'supply' },
        { priority: 'danger', title: 'Helios Solar conversion dropped to 21%', body: 'Lost to competitor on 3 of last 5 RFQs.', cta: 'Recalibrate', target: 'planning' },
        { priority: 'warning', title: '5 lanes priced above market', body: 'Combined: $4.8M annual volume at risk.', cta: 'Investigate', target: 'planning' },
      ]
    : [
        { priority: 'agent', title: 'Customer counter-offer on RFQ-2039', body: 'Reduces markup from 8.0% → 6.2%. Agent suggests countering at 7.0%.', cta: 'Review', target: 'demand', meta: 'Bharat Industries · NSA → JEB' },
        { priority: 'warning', title: 'Rates on SIN → RTM expire tomorrow', body: '3 of 7 rates from Spot API expire May 12. Agent has drafted refresh emails.', cta: 'Refresh', target: 'supply' },
        { priority: 'agent', title: 'RFQ-2041 needs your signoff', body: 'Agent has drafted quote at 8.0% markup. Ready to send to Acme Logistics.', cta: 'Open RFQ', target: 'demand', meta: 'SIN → RTM · 1× 40ft HC' },
        { priority: 'warning', title: 'Document missing on SHP-104822', body: 'Bill of Entry pending — vessel arrives Rotterdam in 5 days.', cta: 'Upload', target: 'operations' },
        { priority: 'agent', title: '4 new RFQs auto-parsed from inbox', body: 'Agent extracted all fields, awaiting your review before fetching rates.', cta: 'Review', target: 'demand' },
      ];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
      {/* Greeting + role indicator */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{greeting}, {name}.</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="agent-dot pulse"/>
            <span>Agent has been busy. <strong style={{ color: 'var(--fg-1)' }}>34 actions</strong> taken today across {role === 'leadership' ? '7 modules' : '5 modules'}.</span>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{role === 'leadership' ? 'Leadership view' : 'Operations view'} · </span>
          <span className="badge b-neutral" style={{ fontSize: 11 }}>
            <window.Icon name="inbox" size={11} color="#667085"/>
            4 emails parsed today
          </span>
        </div>
      </div>

      {/* KPI tiles */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {kpis.map((k, i) => (
          <div key={i} className="kpi">
            <div className="kpi-label">{k.label}</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
              <div className="kpi-value tnum">{k.value}</div>
              <window.Sparkline data={k.spark} color={k.color} w={70} h={28}/>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span className={`kpi-trend ${k.trendKind || 'flat'}`}>
                {k.trendKind === 'up' && <window.Icon name="trend-up" size={11}/>}
                {k.trendKind === 'down' && <window.Icon name="trend-down" size={11}/>}
                {k.trend}
              </span>
              <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>· {k.sub}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Module cards 2x2 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {moduleOrder.map(id => {
          const m = moduleCards[id];
          return (
            <div key={id} className="module-card" onClick={() => onNavigate(m.target)}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--brand-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--brand-700)' }}>
                    <window.Icon name={m.icon} size={16}/>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{m.title}</div>
                </div>
                <window.Icon name="arrow-r" size={14} color="#98A2B3"/>
              </div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{m.headline}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{m.sub}</div>
              </div>
              <div style={{ padding: '4px 0' }}>{m.mini}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--agent-700)', borderTop: '1px solid var(--n-75)', paddingTop: 8 }}>
                <window.Icon name="sparkles" size={11} color="#7C5CFF"/>
                <span>{m.agentLine}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* For your attention */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <window.Icon name="lightbulb" size={15} color="#7C5CFF"/>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>For your attention</div>
            <span className="agent-chip">Agent-surfaced</span>
          </div>
          <button className="btn btn-sm btn-ghost">View all <window.Icon name="arrow-r" size={11}/></button>
        </div>
        <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4 }}>
          {attention.map((a, i) => (
            <div key={i} className={`attn-card priority-${a.priority}`} style={{ minWidth: 280, flex: '0 0 280px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className={`badge b-${a.priority === 'agent' ? 'agent' : a.priority}`}>
                  {a.priority === 'agent' && <window.Icon name="sparkles" size={10}/>}
                  {a.priority === 'warning' && <window.Icon name="alert" size={10}/>}
                  {a.priority === 'danger' && <window.Icon name="alert" size={10}/>}
                  {a.priority === 'agent' ? 'Agent' : a.priority === 'warning' ? 'Attention' : 'Urgent'}
                </span>
                {a.meta && <span style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>{a.meta}</span>}
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.35 }}>{a.title}</div>
              <div style={{ fontSize: 11.5, color: 'var(--fg-3)', lineHeight: 1.5 }}>{a.body}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 'auto' }}>
                <button className="btn btn-sm btn-primary" onClick={() => onNavigate(a.target)}>{a.cta}</button>
                <button className="btn btn-sm btn-ghost">Dismiss</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};