// ============================================================
// FRAGTA — Dashboard (landing screen)
//   Live overblik: KPI'er, status-fordeling, aktivitet, genveje
// ============================================================

function DashKpi({ ico, tone, n, l, sub, onClick }) {
  const Tag = onClick ? 'button' : 'div';
  return (
    <Tag className={'dk-card tone-' + (tone || 'accent') + (onClick ? ' dk-click' : '')} onClick={onClick} type={onClick ? 'button' : undefined}>
      <div className="dk-top">
        <span className="dk-ico"><Icon n={ico} /></span>
        {sub ? <span className="dk-sub">{sub}</span> : null}
      </div>
      <div className="dk-n"><CountUp value={n} /></div>
      <div className="dk-l">{l}</div>
    </Tag>
  );
}

function Dashboard({ go }) {
  const d = useDemo();
  const reqs = useLiveRequests();
  const by = s => reqs.filter(r => r.status === s).length;
  const counts = { new: by('new'), wait: by('wait'), sent: by('sent'), done: by('done'), err: by('err') };
  const total = reqs.length;
  const answered = reqs.filter(r => r.replies).reduce((a, r) => a + (r.replies || 0), 0);
  const prospectN = useLiveProspects().length;
  const carrierN = (typeof CARRIERS !== 'undefined' && CARRIERS) ? CARRIERS.length : 0;
  const carriers = (typeof CARRIERS !== 'undefined' && CARRIERS) ? CARRIERS : [];
  const topCarriers = [...carriers].sort((a, b) => b.score - a.score).slice(0, 4);
  const avgScore = carriers.length ? Math.round(carriers.reduce((a, c) => a + c.score, 0) / carriers.length) : 0;
  const countries = new Set(carriers.map(c => c.land)).size;

  // travleste ruter
  const routeMap = {};
  reqs.forEach(r => { if (r.route[0] && r.route[0] !== '—') { const k = r.route[0] + ' → ' + r.route[1]; routeMap[k] = (routeMap[k] || 0) + 1; } });
  const topRoutes = Object.entries(routeMap).sort((a, b) => b[1] - a[1]).slice(0, 5);
  const routeMax = topRoutes.length ? topRoutes[0][1] : 1;

  // service-mix (fra AI-analyse)
  const svcMap = {};
  reqs.forEach(r => { const a = (typeof getAnalyse === 'function') ? getAnalyse(r) : null; const s = (a && a.service) || r.service; if (s) svcMap[s] = (svcMap[s] || 0) + 1; });
  const svcMix = Object.entries(svcMap).sort((a, b) => b[1] - a[1]);
  const svcTotal = svcMix.reduce((a, s) => a + s[1], 0) || 1;
  const svcColors = ['var(--accent)', '#2d7dd2', 'var(--warn)', 'var(--good)', 'var(--ink-dim)'];

  // aktivitet denne uge (syntetisk demo-trend)
  const week = [
    ['Man', 4], ['Tir', 7], ['Ons', 5], ['Tor', 9], ['Fre', 6], ['Lør', 2], ['Søn', 1],
  ];
  const weekMax = Math.max(...week.map(w => w[1]));
  const weekTotal = week.reduce((a, w) => a + w[1], 0);

  const segs = [
    ['new', 'Ny', counts.new, 'var(--accent)'],
    ['wait', 'Afventer', counts.wait, 'var(--warn)'],
    ['sent', 'Sendt', counts.sent, '#2d7dd2'],
    ['done', 'Afsluttet', counts.done, 'var(--good)'],
    ['err', 'Fejl', counts.err, 'var(--danger)'],
  ];
  const segTotal = segs.reduce((a, s) => a + s[2], 0) || 1;

  // recent activity, newest first (already roughly date-ordered in data)
  const activity = [
    ...reqs.filter(r => r.status === 'done').slice(0, 2).map(r => ({ ico: 'checkc', tone: 'good', t: <><b>Svar sendt</b> til {r.fromShort}</>, m: `${r.route[0]} → ${r.route[1]} · #${r.id}`, when: r.when, go: () => go('pipeline', r.id) })),
    ...reqs.filter(r => r.status === 'sent').slice(0, 2).map(r => ({ ico: 'send', tone: 'sent', t: <>Forespørgsel <b>sendt</b> · {r.replies || 0} svar</>, m: `${r.fromShort} · ${r.route[0]} → ${r.route[1]}`, when: r.when, go: () => go('pipeline', r.id) })),
    ...reqs.filter(r => r.status === 'new').slice(0, 2).map(r => ({ ico: 'mail', tone: 'accent', t: <><b>Ny forespørgsel</b> fra {r.fromShort}</>, m: `${r.route[0]} → ${r.route[1]} · #${r.id}`, when: r.when, go: () => go('pipeline', r.id) })),
    ...(prospectN ? [{ ico: 'network', tone: 'accent', t: <><b>{prospectN} nye prospects</b> afventer godkendelse</>, m: 'Mødt i indkommende mails', when: 'I dag', go: () => go('prospects') }] : []),
  ].slice(0, 6);

  const hour = new Date().getHours();
  const greet = hour < 10 ? 'Godmorgen' : hour < 17 ? 'God dag' : 'God aften';

  return (
    <div className="page reveal">
      <div className="wrap">
        <div className="page-head">
          <div className="lead-h">
            <span className="eyebrow">Overblik · live</span>
            <h1 className="page-title">{greet}, {d.contactName.split(' ')[0]}.</h1>
            <p className="page-sub">Sådan står det til i {d.workspace}s arbejdsområde lige nu. Fragta læser indbakken, henter tilbud og holder styr på dine vognmænd — du beholder overblikket.</p>
          </div>
          <div className="head-actions">
            <button className="btn btn-ghost btn-sm" onClick={() => go('tender')}><Icon n="catalog" /> Upload udbud</button>
            <button className="btn btn-dark btn-sm" onClick={() => go('pipeline')}><Icon n="plus" /> Ny forespørgsel</button>
          </div>
        </div>

        {/* KPI row */}
        <div className="dash-kpis">
          <DashKpi ico="mail"   tone="accent" n={total}        l="Forespørgsler i alt" sub={counts.new ? '+' + counts.new + ' nye' : null} onClick={() => go('pipeline', null, 'all')} />
          <DashKpi ico="clock"  tone="warn"   n={counts.wait}  l="Afventer dit valg" onClick={() => go('pipeline', null, 'wait')} />
          <DashKpi ico="send"   tone="sent"   n={counts.sent}  l="Sendt til vognmænd" sub={answered + ' svar'} onClick={() => go('pipeline', null, 'sent')} />
          <DashKpi ico="checkc" tone="good"   n={counts.done}  l="Afsluttet" onClick={() => go('pipeline', null, 'done')} />
        </div>

        <div className="dash-grid">
          {/* left: status distribution + quick links */}
          <div className="dash-col">
            <div className="panel">
              <div className="panel-head"><h3>Forespørgsler efter status</h3><span className="oc-cap">{total} i alt</span></div>
              <div className="dash-body">
                <div className="dist-bar">
                  {segs.map(s => s[2] > 0 ? <span key={s[0]} style={{ width: (s[2] / segTotal * 100) + '%', background: s[3] }} title={s[1] + ': ' + s[2]}></span> : null)}
                </div>
                <div className="dist-legend">
                  {segs.map(s => (
                    <button className="dl-item" key={s[0]} onClick={() => go('pipeline', null, s[0])}>
                      <span className="dl-sw" style={{ background: s[3] }}></span>
                      <span className="dl-lab">{s[1]}</span>
                      <span className="dl-n">{s[2]}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><h3>Katalog</h3><span className="oc-cap">{carrierN} vognmænd</span></div>
              <div className="dash-body">
                <div className="cat-mini-stats">
                  <div className="cms"><span className="cms-n"><CountUp value={carrierN} /></span><span className="cms-l">Vognmænd</span></div>
                  <div className="cms"><span className="cms-n"><CountUp value={avgScore} /></span><span className="cms-l">Gns. pålidelighed</span></div>
                  <div className="cms"><span className="cms-n"><CountUp value={countries} /></span><span className="cms-l">Lande</span></div>
                </div>
                <div className="cat-top">
                  <div className="cat-top-cap">Bedst vurderede partnere</div>
                  {topCarriers.map(c => (
                    <button className="cat-top-row" key={c.id} onClick={() => go('katalog')}>
                      <Avatar name={c.nm} />
                      <span className="ctr-main"><span className="ctr-nm">{c.nm}</span><span className="ctr-meta">{c.land} · {c.services.slice(0, 3).join(' · ')}</span></span>
                      <span className="ctr-score"><i style={{ width: c.score + '%' }}></i><b>{c.score}</b></span>
                    </button>
                  ))}
                </div>
                <button className="btn btn-ghost btn-sm" style={{ width: '100%', marginTop: 4 }} onClick={() => go('katalog')}>Se hele kataloget <Icon n="chevR" /></button>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><h3>Travleste ruter</h3><span className="oc-cap">denne måned</span></div>
              <div className="dash-body">
                {topRoutes.length ? topRoutes.map(([rt, n]) => (
                  <div className="route-row" key={rt}>
                    <span className="rr-lane">{rt}</span>
                    <span className="rr-bar"><i style={{ width: (n / routeMax * 100) + '%' }}></i></span>
                    <span className="rr-n">{n}</span>
                  </div>
                )) : <p style={{ color: 'var(--ink-dim)', fontSize: 13 }}>Ingen ruter endnu.</p>}
              </div>
            </div>
          </div>

          {/* right: activity feed */}
          <div className="dash-col">
            <div className="panel">
              <div className="panel-head"><h3>Seneste aktivitet</h3><span className="live"><span className="pulse"></span>Live</span></div>
              <div className="dash-feed">
                {activity.map((a, i) => (
                  <button className="feed-row" key={i} type="button" onClick={a.go}>
                    <span className={'feed-ic tone-' + a.tone}><Icon n={a.ico} /></span>
                    <div className="feed-main"><div className="feed-t">{a.t}</div><div className="feed-m">{a.m}</div></div>
                    <span className="feed-when">{a.when}</span>
                  </button>
                ))}
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><h3>Aktivitet denne uge</h3><span className="oc-cap">{weekTotal} forespørgsler</span></div>
              <div className="dash-body">
                <div className="week-chart">
                  {week.map(([day, n]) => (
                    <div className="wc-col" key={day}>
                      <span className="wc-bar-wrap"><i className="wc-bar" style={{ height: (n / weekMax * 100) + '%' }}><b>{n}</b></i></span>
                      <span className="wc-day">{day}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="panel">
              <div className="panel-head"><h3>Fordeling på service</h3><span className="oc-cap">{reqs.length} i alt</span></div>
              <div className="dash-body">
                <div className="dist-bar">
                  {svcMix.map((s, i) => <span key={s[0]} style={{ width: (s[1] / svcTotal * 100) + '%', background: svcColors[i % svcColors.length] }} title={s[0] + ': ' + s[1]}></span>)}
                </div>
                <div className="svc-legend">
                  {svcMix.map((s, i) => (
                    <div className="svc-item" key={s[0]}>
                      <span className="dl-sw" style={{ background: svcColors[i % svcColors.length] }}></span>
                      <span className="svc-lab">{s[0]}</span>
                      <span className="svc-n">{Math.round(s[1] / svcTotal * 100)}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="panel dash-value">
              <div className="dv-row">
                <div className="dv"><div className="dv-n"><CountUp value="80%" /></div><div className="dv-l">mindre tid på tilbudsarbejde</div></div>
                <div className="dv"><div className="dv-n"><CountUp value="6 min" /></div><div className="dv-l">gns. svartid pr. forespørgsel</div></div>
              </div>
              <p className="dv-note"><Icon n="spark" /> Estimeret for {d.workspace} ud fra de seneste 30 dage.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });