/* Dashboard — KPI tiles + Funnel + Recent activity. */
function Dashboard({ leads, activity }) {
  const total = leads.length;
  const qualified = leads.filter(l => l.status === 'qualified').length;
  const converted = leads.filter(l => l.status === 'converted').length;
  const noOwner = leads.filter(l => !l.owner).length;
  const overdue = leads.filter(l => l.nextStep && new Date(l.nextStep.due) < window.MonolitData.NOW).length;

  const kpis = [
    { lbl: 'Open leads',           val: total - converted, delta: '+12', up: true },
    { lbl: 'Qualified (this week)', val: qualified,         delta: '+3',  up: true },
    { lbl: 'Conversion rate',      val: '24%',             delta: '−2%', up: false },
    { lbl: 'Avg response time',    val: '4h 12m',          delta: '−18m', up: true },
  ];

  const funnel = [
    { lbl: 'New',           n: 18, pct: 100, color: 'var(--secondary-low-down)' },
    { lbl: 'In progress',   n: 12, pct: 67,  color: 'var(--primary-low-down)' },
    { lbl: 'Qualified',     n:  7, pct: 39,  color: 'var(--success-main)' },
    { lbl: 'Converted',     n:  4, pct: 22,  color: 'var(--success-down)' },
    { lbl: 'Disqualified',  n:  3, pct: 17,  color: 'var(--bg-4)' },
  ];

  return (
    <React.Fragment>
      <div className="mn-page-h">
        <div className="mn-page-title">
          <h1 className="title-1">Dashboard</h1>
          <span className="mn-page-count">Acme · Trading EU</span>
        </div>
        <div className="mn-page-actions">
          <Button variant="ghost" size="md" icon="calendar">This week</Button>
          <Button variant="ghost" size="md" icon="download">Export</Button>
        </div>
      </div>

      <div className="mn-kpi-grid">
        {kpis.map((k) => (
          <div className="mn-kpi" key={k.lbl}>
            <div className="mn-kpi-lbl">{k.lbl}</div>
            <div className="mn-kpi-val">{k.val}</div>
            <div className={'mn-kpi-delta ' + (k.up ? 'mn-kpi-delta--up' : 'mn-kpi-delta--down')}>
              <Icon name={k.up ? 'trending-up' : 'trending-down'} size="xs" stroke="2" />
              {k.delta} vs last week
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, padding: '12px 24px 24px' }}>
        <Card title="Pipeline funnel" eyebrow="Last 30 days" action={<Button variant="quiet" size="sm" iconRight="external-link">Open report</Button>}>
          <div className="mn-funnel">
            {funnel.map((f) => (
              <div className="mn-funnel-row" key={f.lbl}>
                <span className="lbl">{f.lbl}</span>
                <span className="mn-funnel-bar"><span style={{ width: `${f.pct}%`, background: f.color }} /></span>
                <span className="mn-funnel-num">{f.n}</span>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Queue health" eyebrow="Action needed" action={<Button variant="quiet" size="sm">View all</Button>}>
          <div className="mn-stack">
            <HealthRow icon="user-x" tone="warning" label="No owner" value={noOwner} desc="Leads waiting to be assigned" />
            <HealthRow icon="clock" tone="error" label="Overdue next step" value={overdue} desc="Past due in tenant timezone" />
            <HealthRow icon="alert-triangle" tone="error" label="Problem leads" value={leads.filter(l => l.problem).length} desc="Overdue · no activity · low score · no owner" />
            <HealthRow icon="circle" tone="secondary" label="New leads (24h)" value={leads.filter(l => l.isNew).length} desc="Created in the last day" />
          </div>
        </Card>
      </div>

      <div style={{ padding: '0 24px 24px' }}>
        <Card title="Recent activity" eyebrow="Across team" action={<Button variant="quiet" size="sm">Open feed</Button>}>
          <div className="mn-feed">
            {activity.slice(0, 5).map((a) => <FeedItem key={a.id} a={a} />)}
          </div>
        </Card>
      </div>
    </React.Fragment>
  );
}

function HealthRow({ icon, tone, label, value, desc }) {
  return (
    <div className="mn-row" style={{ padding: '6px 0', gap: 12 }}>
      <span className={`mn-feed-icon mn-feed-icon--${tone === 'error' ? 'meeting' : tone === 'warning' ? 'meeting' : 'email'}`} style={{ width: 32, height: 32 }}>
        <Icon name={icon} size="sm" color={tone} />
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ font: 'var(--font-weight-strong) 13px/18px var(--font-sans)', color: 'var(--text-1)' }}>{label}</div>
        <div style={{ font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: 'var(--text-3)' }}>{desc}</div>
      </div>
      <span style={{ font: 'var(--font-weight-heavy) 18px/24px var(--font-sans)', color: 'var(--text-1)' }}>{value}</span>
    </div>
  );
}

const FEED_ICONS = { call: 'phone', email: 'mail', meeting: 'calendar', note: 'file-text', status: 'check-circle-2', created: 'plus' };
function FeedItem({ a }) {
  const at = new Date(a.at);
  const rel = relTime(at);
  return (
    <div className="mn-feed-item">
      <span className={`mn-feed-icon mn-feed-icon--${a.type}`}><Icon name={FEED_ICONS[a.type] || 'circle'} size="sm" /></span>
      <div>
        <div className="mn-feed-h">
          <span className="mn-feed-who">{a.who.name}</span>
          <span className="mn-feed-at">· {a.type} · {rel}</span>
        </div>
        <div className="mn-feed-body">{a.summary}</div>
      </div>
    </div>
  );
}

function relTime(d) {
  const diff = (window.MonolitData.NOW - d) / 1000;
  if (diff < 60) return 'just now';
  if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)} h ago`;
  const days = Math.floor(diff / 86400);
  if (days === 1) return 'yesterday';
  if (days < 30) return `${days} d ago`;
  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
}

Object.assign(window, { Dashboard, FeedItem, relTime });