// flow-dashboard.jsx — Control tower dashboard

const { SHIPMENTS, ALERTS, ACTIVE_CLOCKS } = window.FLOW_DATA;

// ---------- Mini Europe map (stylized) for control tower ----------
const dashStops = [
  { id: 's1', x: 132, y: 130, status: 'in_transit', size: 8 },
  { id: 's2', x: 178, y: 145, status: 'in_transit', size: 9 },
  { id: 's3', x: 222, y: 168, status: 'delayed', size: 11 },
  { id: 's4', x: 268, y: 192, status: 'in_transit', size: 8 },
  { id: 's5', x: 314, y: 210, status: 'at_destination', size: 12 },
  { id: 's6', x: 96,  y: 96,  status: 'planned', size: 7 },
  { id: 's7', x: 280, y: 252, status: 'blocked', size: 10 },
  { id: 's8', x: 198, y: 90,  status: 'in_transit', size: 7 },
  { id: 's9', x: 246, y: 110, status: 'delivered', size: 6 },
];
const STATUS_FILL = {
  in_transit: 'hsl(220 70% 35%)',
  delayed:    'hsl(40 85% 55%)',
  blocked:    'hsl(0 70% 55%)',
  delivered:  'hsl(160 60% 40%)',
  at_destination: 'hsl(160 60% 40%)',
  planned:    'hsl(215 15% 50%)',
};

const ControlTowerMap = ({ onPin }) => (
  <svg viewBox="0 0 420 320" style={{ width: '100%', height: '100%', display: 'block' }}>
    <defs>
      <linearGradient id="mapBg" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="hsl(220 50% 97%)" />
        <stop offset="1" stopColor="hsl(220 35% 94%)" />
      </linearGradient>
      <pattern id="mapGrid" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="hsl(220 25% 88%)" strokeWidth="0.5" />
      </pattern>
    </defs>
    <rect width="420" height="320" fill="url(#mapBg)" />
    <rect width="420" height="320" fill="url(#mapGrid)" />
    {/* Stylised landmass paths — abstract Europe */}
    <path d="M30,140 Q70,80 130,90 Q190,60 250,70 Q300,80 340,100 L370,140 Q380,180 360,210 L320,250 Q260,280 200,280 Q140,280 100,250 Q60,220 40,180 Z"
          fill="hsl(220 30% 93%)" stroke="hsl(220 25% 80%)" strokeWidth="1" />
    <path d="M250,80 Q310,100 350,140 Q370,180 350,210 L310,230 Q260,220 240,180 Q230,130 250,80 Z"
          fill="hsl(220 30% 93%)" stroke="hsl(220 25% 80%)" strokeWidth="1" />
    {/* lane lines */}
    <path d="M132,130 Q175,140 222,168" stroke="hsl(220 60% 50%)" strokeWidth="1.4" strokeDasharray="3 3" fill="none" opacity="0.6" />
    <path d="M222,168 Q260,180 268,192" stroke="hsl(220 60% 50%)" strokeWidth="1.4" strokeDasharray="3 3" fill="none" opacity="0.6" />
    <path d="M280,252 Q260,200 268,192" stroke="hsl(0 70% 55%)" strokeWidth="1.4" strokeDasharray="3 3" fill="none" opacity="0.6" />
    {/* pins */}
    {dashStops.map((s) => (
      <g key={s.id} style={{ cursor: 'pointer' }} onClick={() => onPin?.(s)}>
        <circle cx={s.x} cy={s.y} r={s.size + 4} fill={STATUS_FILL[s.status]} opacity="0.18" />
        <circle cx={s.x} cy={s.y} r={s.size} fill={STATUS_FILL[s.status]} stroke="white" strokeWidth="1.5" />
      </g>
    ))}
  </svg>
);

// ---------- KPI card ----------
const Kpi = ({ label, value, sub, tone, spark, accent }) => (
  <Card style={{ padding: '14px 16px', minWidth: 0 }}>
    <div className="row gap-2" style={{ alignItems: 'flex-start' }}>
      <div className="col flex-1 gap-1" style={{ minWidth: 0 }}>
        <div className="text-xs text-muted fw-500" style={{ textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: 10.5 }}>{label}</div>
        <div className="row gap-2" style={{ alignItems: 'baseline' }}>
          <div className="text-3xl fw-700 num" style={{ color: accent || 'var(--ink)' }}>{value}</div>
          {sub && <div className={`text-xs fw-500 ${tone === 'up' ? 'text-muted' : ''}`} style={{ color: tone === 'danger' ? 'var(--danger-700)' : tone === 'warning' ? 'var(--warning-700)' : 'var(--muted)' }}>{sub}</div>}
        </div>
      </div>
      {spark && <div style={{ paddingTop: 14 }}>{spark}</div>}
    </div>
  </Card>
);

// ---------- Alert row ----------
const AlertItem = ({ alert, onJump }) => {
  const Ic = ({ name }) => {
    const Comp = window.I[name];
    return <Comp size={16} />;
  };
  const tone = alert.sev;
  return (
    <div className={`alert-row ${tone}`} onClick={() => onJump?.(alert)}>
      <div />
      <div className="row gap-3" style={{ alignItems: 'flex-start', minWidth: 0 }}>
        <div style={{
          width: 30, height: 30, flex: '0 0 auto', borderRadius: 8, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
          background: tone === 'danger' ? 'var(--danger-50)' : tone === 'warning' ? 'var(--warning-50)' : tone === 'success' ? 'var(--success-50)' : 'var(--primary-50)',
          color:      tone === 'danger' ? 'var(--danger-700)' : tone === 'warning' ? 'var(--warning-700)' : tone === 'success' ? 'var(--success)' : 'var(--primary-700)',
        }}>
          <Ic name={alert.icon} />
        </div>
        <div className="col gap-1 flex-1" style={{ minWidth: 0 }}>
          <div className="row gap-2" style={{ alignItems: 'center' }}>
            <div className="text-sm fw-600">{alert.title}</div>
            <span className="badge badge-ghost text-xs mono">{alert.shipment}</span>
            <span className="text-xs text-muted">· {alert.age}</span>
          </div>
          <div className="text-sm text-muted" style={{ lineHeight: 1.45 }}>{alert.body}</div>
        </div>
      </div>
      <div className="row gap-2" style={{ alignItems: 'center', flex: '0 0 auto' }}>
        <button className="btn btn-sm">{alert.cta}</button>
      </div>
    </div>
  );
};

const TodaysChecklist = () => {
  const items = [
    { id: 1, text: 'Dispatch FL-2026-04804 (Milan → Sofia)', meta: 'pickup 06:00', tag: 'Dispatch' },
    { id: 2, text: 'Confirm POD on FL-2026-04806 (Köln → Sofia)', meta: 'expected today 16:00', tag: 'POD' },
    { id: 3, text: 'Match Maersk INV-2026-44128 (€8,420)', meta: 'variance 27%', tag: 'Reconcile' },
    { id: 4, text: 'Issue eCMR for FL-2026-04805 (Warsaw → Varna)', meta: 'pickup in 2 d', tag: 'Docs' },
  ];
  return (
    <Card style={{ padding: 16 }}>
      <div className="row gap-2" style={{ marginBottom: 12, alignItems: 'center' }}>
        <div className="text-sm fw-600">Today's checklist</div>
        <span className="badge badge-neutral">{items.length}</span>
        <div className="flex-1" />
        <button className="btn btn-ghost btn-sm">View all</button>
      </div>
      <div className="col">
        {items.map((it) => (
          <div key={it.id} className="row gap-3" style={{ alignItems: 'center', padding: '10px 4px', borderTop: '1px solid var(--border)' }}>
            <div style={{ width: 16, height: 16, border: '1.5px solid var(--border-strong)', borderRadius: 4 }} />
            <div className="col flex-1 gap-1" style={{ minWidth: 0 }}>
              <div className="text-sm">{it.text}</div>
              <div className="text-xs text-muted">{it.meta}</div>
            </div>
            <span className="badge badge-outline">{it.tag}</span>
          </div>
        ))}
      </div>
    </Card>
  );
};

const FleetStatus = () => {
  const rows = [
    { label: 'Active drivers',   v: 38, total: 52, tone: 'ok' },
    { label: 'On-the-road vehicles', v: 27, total: 41, tone: 'ok' },
    { label: 'ADR-certified',    v: 12, total: 41, tone: 'warn' },
    { label: 'Subcontractor agreements expiring < 30d', v: 3, total: 14, tone: 'warn' },
  ];
  return (
    <Card style={{ padding: 16 }}>
      <div className="row gap-2" style={{ marginBottom: 12, alignItems: 'center' }}>
        <div className="text-sm fw-600">Fleet status</div>
        <div className="flex-1" />
        <button className="btn btn-ghost btn-sm">Carriers</button>
      </div>
      <div className="col gap-3">
        {rows.map((r, i) => {
          const pct = r.v / r.total * 100;
          return (
            <div key={i} className="col gap-1">
              <div className="row gap-2" style={{ alignItems: 'baseline' }}>
                <div className="text-sm flex-1">{r.label}</div>
                <div className="text-sm mono fw-600">{r.v}<span className="text-muted fw-500">/{r.total}</span></div>
              </div>
              <div style={{ height: 6, borderRadius: 999, background: 'var(--slate-100)', overflow: 'hidden' }}>
                <div style={{ width: pct + '%', height: '100%', background: r.tone === 'warn' ? 'var(--warning)' : 'var(--success)' }} />
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
};

const Dashboard = ({ onNav }) => {
  const kpis = [
    { label: 'Active shipments', value: '184', sub: '+12 this week', spark: <Sparkline data={[140,148,151,160,166,171,178,184]} color="hsl(220 70% 35%)" /> },
    { label: 'In transit',       value: '64',  sub: '34% of fleet',  spark: <Sparkline data={[58,61,57,63,66,62,60,64]}    color="hsl(220 70% 35%)" /> },
    { label: 'Delayed',          value: '7',   sub: '3 critical', tone: 'warning', accent: 'var(--warning-700)', spark: <Sparkline data={[3,4,4,5,6,7,7,7]} color="hsl(40 85% 55%)" /> },
    { label: 'Awaiting POD',     value: '12',  sub: '2 over 48h', spark: <Sparkline data={[10,11,9,12,14,12,11,12]} color="hsl(220 70% 35%)" /> },
    { label: 'Free-time at-risk',value: '€4.2k', sub: 'expected 24h burn', tone: 'danger', accent: 'var(--danger-700)', spark: <Sparkline data={[1.2,1.6,2.0,2.4,3.1,3.6,4.0,4.2]} color="hsl(0 70% 55%)" /> },
  ];

  return (
    <div style={{ padding: 24, maxWidth: 1440 }}>
      <SectionHeader
        title="Good morning, Elif"
        subtitle="Tuesday, 9 May 2026 · 14 items need your attention today"
        right={
          <div className="row gap-2">
            <button className="btn btn-sm"><I.upload size={14}/>Upload invoice</button>
            <button className="btn btn-sm"><I.bookmark size={14}/>New booking</button>
            <button className="btn btn-sm btn-primary"><I.plus size={14}/>New shipment</button>
          </div>
        }
      />

      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 12, marginBottom: 16 }}>
        {kpis.map((k, i) => <Kpi key={i} {...k} />)}
      </div>

      {/* Alerts + Map */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16, marginBottom: 16 }}>
        <Card style={{ padding: 16 }}>
          <div className="row gap-2" style={{ alignItems: 'center', marginBottom: 12 }}>
            <div className="text-sm fw-600">Needs attention</div>
            <span className="badge badge-danger"><span className="dot"/>2 critical</span>
            <span className="badge badge-warning"><span className="dot"/>3 at risk</span>
            <div className="flex-1" />
            <div className="row gap-1" style={{ background: 'var(--surface-2)', borderRadius: 8, padding: 2 }}>
              <button className="btn btn-xs btn-ghost" style={{ background: 'white', boxShadow: 'var(--shadow-sm)' }}>By severity</button>
              <button className="btn btn-xs btn-ghost">By age</button>
            </div>
          </div>
          <div className="col gap-2">
            {ALERTS.map((a) => <AlertItem key={a.id} alert={a} onJump={() => onNav?.('shipments/detail')} />)}
          </div>
        </Card>

        <Card style={{ padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div className="row gap-2" style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
            <div className="text-sm fw-600">Live map</div>
            <span className="text-xs text-muted">9 in-transit shipments</span>
            <div className="flex-1" />
            <button className="btn btn-ghost btn-xs" onClick={() => onNav?.('shipments/map')}>Open <I.ext size={12}/></button>
          </div>
          <div style={{ flex: 1, minHeight: 0 }}>
            <ControlTowerMap />
          </div>
          <div className="row gap-3" style={{ padding: '10px 16px', borderTop: '1px solid var(--border)', flexWrap: 'wrap' }}>
            {[
              { c: 'hsl(220 70% 35%)', l: 'In transit' },
              { c: 'hsl(40 85% 55%)',  l: 'Delayed' },
              { c: 'hsl(0 70% 55%)',   l: 'Blocked' },
              { c: 'hsl(160 60% 40%)', l: 'Delivered' },
              { c: 'hsl(215 15% 50%)', l: 'Planned' },
            ].map((x, i) => (
              <div key={i} className="row gap-1" style={{ alignItems: 'center' }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: x.c }} />
                <span className="text-xs text-muted">{x.l}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Bottom row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 16 }}>
        <TodaysChecklist />
        <FleetStatus />
        <Card style={{ padding: 16 }}>
          <div className="row gap-2" style={{ marginBottom: 12, alignItems: 'center' }}>
            <div className="text-sm fw-600">Free-time burn — week to date</div>
            <div className="flex-1" />
            <button className="btn btn-ghost btn-sm" onClick={() => onNav?.('freetime')}>Dashboard <I.arrowRight size={12}/></button>
          </div>
          <div className="row gap-3" style={{ alignItems: 'baseline', marginBottom: 6 }}>
            <div className="text-3xl fw-700 num" style={{ color: 'var(--danger-700)' }}>€3,840</div>
            <div className="text-sm" style={{ color: 'var(--muted)' }}>actual ·</div>
            <div className="text-sm fw-600">€2,200</div>
            <div className="text-sm text-muted">budgeted</div>
          </div>
          <div className="text-xs text-muted" style={{ marginBottom: 14 }}>+74% vs. budget · 6 active clocks</div>
          <BurnChart />
        </Card>
      </div>
    </div>
  );
};

const BurnChart = () => {
  const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const actual = [180, 320, 540, 760, 1240, 580, 220];
  const budget = [314, 314, 314, 314, 314, 314, 314];
  const max = Math.max(...actual, ...budget) * 1.15;
  return (
    <div className="col gap-2">
      <svg viewBox="0 0 320 110" style={{ width: '100%', height: 110 }}>
        {[0.25, 0.5, 0.75].map((g, i) => <line key={i} x1="22" x2="320" y1={110 - g*100} y2={110 - g*100} stroke="var(--border)" strokeDasharray="2 3" />)}
        <line x1="22" x2="320" y1="109" y2="109" stroke="var(--border-strong)" />
        {/* budget line */}
        <line x1="22" x2="320" y1={110 - (314/max)*100} y2={110 - (314/max)*100} stroke="var(--warning)" strokeDasharray="4 3" />
        {actual.map((v, i) => {
          const w = (320 - 28) / 7 * 0.55;
          const x = 28 + i * ((320 - 28) / 7);
          const h = (v / max) * 100;
          const fill = v > 314 ? 'var(--danger)' : 'var(--success)';
          return (<rect key={i} x={x} y={110 - h} width={w} height={h} fill={fill} fillOpacity="0.85" rx="2" />);
        })}
        {days.map((d, i) => {
          const x = 28 + i * ((320 - 28) / 7) + ((320 - 28) / 7 * 0.55) / 2;
          return <text key={i} x={x} y="108" textAnchor="middle" fontSize="9" fill="var(--muted)">{d}</text>;
        })}
      </svg>
      <div className="row gap-3" style={{ alignItems: 'center', fontSize: 11, color: 'var(--muted)' }}>
        <span className="row gap-1" style={{ alignItems: 'center' }}><span style={{ width: 8, height: 8, background: 'var(--danger)', borderRadius: 2 }} />Over budget</span>
        <span className="row gap-1" style={{ alignItems: 'center' }}><span style={{ width: 8, height: 8, background: 'var(--success)', borderRadius: 2 }} />Within</span>
        <span className="row gap-1" style={{ alignItems: 'center' }}><span style={{ width: 14, height: 2, background: 'var(--warning)' }} />Daily budget</span>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;