/* Viamar Ops — Insights (PostHog-powered funnel & analytics) */

function InsightsScreen() {
  const first = PH_FUNNEL[0].n;
  const last = PH_FUNNEL[PH_FUNNEL.length - 1].n;
  const conv = ((last / first) * 100).toFixed(1);
  // biggest drop-off between consecutive steps
  let dropIdx = 1, dropPct = 0;
  for (let i = 1; i < PH_FUNNEL.length; i++) {
    const d = 1 - PH_FUNNEL[i].n / PH_FUNNEL[i - 1].n;
    if (d > dropPct) { dropPct = d; dropIdx = i; }
  }
  const metrics = [
    { label: 'Quote→book conversion', value: conv + '%', sub: 'last 30 days', tone: T.green },
    { label: 'Quotes started', value: first.toLocaleString(), sub: '+12% WoW', tone: T.navy3 },
    { label: 'Booked & prepaid', value: last.toLocaleString(), sub: '+18% WoW', tone: T.red },
    { label: 'Biggest drop-off', value: PH_FUNNEL[dropIdx].step, sub: Math.round(dropPct * 100) + '% lost here', tone: T.amber, small: true },
  ];
  const maxT = Math.max(...PH_TREND);
  return (
    <div className="vscroll" style={{ height: '100%', overflowY: 'auto' }}>
      <div style={{ padding: '28px 36px 44px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ flex: 1 }}>
            <Display size={22} color={T.ink}>Insights</Display>
            <div style={{ fontFamily: FM, fontSize: 11.5, color: T.muted, marginTop: 4 }}>Booking funnel & product analytics</div>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: '#fff', border: '1px solid ' + T.line2, borderRadius: 999, padding: '7px 13px' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#F54E00' }} />
            <span style={{ fontFamily: FM, fontSize: 11, fontWeight: 700, color: T.body, letterSpacing: 0.3 }}>Powered by PostHog</span>
          </div>
        </div>

        {/* metric cards */}
        <div style={{ display: 'flex', gap: 14 }}>
          {metrics.map((m, i) => (
            <div key={i} style={{ flex: 1, background: '#fff', borderRadius: 16, border: '1px solid ' + T.line2, padding: '16px 18px' }}>
              <div style={{ fontFamily: FD, fontWeight: 800, fontSize: m.small ? 18 : 28, color: T.ink, fontStretch: '115%', lineHeight: 1.05 }}>{m.value}</div>
              <div style={{ fontFamily: FB, fontWeight: 600, fontSize: 12.5, color: T.body, marginTop: 7 }}>{m.label}</div>
              <div style={{ fontFamily: FM, fontSize: 10.5, color: m.tone, marginTop: 3 }}>{m.sub}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24, alignItems: 'start' }}>
          {/* funnel */}
          <div>
            <SectionHead title="Quote → booking funnel" action="Last 30 days" />
            <Card>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {PH_FUNNEL.map((f, i) => {
                  const pctOfFirst = f.n / first;
                  const stepConv = i === 0 ? 100 : Math.round((f.n / PH_FUNNEL[i - 1].n) * 100);
                  const isDrop = i === dropIdx;
                  return (
                    <div key={i}>
                      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
                        <span style={{ fontFamily: FB, fontWeight: 600, fontSize: 13, color: T.ink }}>{i + 1}. {f.step}</span>
                        <span style={{ fontFamily: FM, fontSize: 11.5, color: T.muted }}>{f.n.toLocaleString()} · <span style={{ color: isDrop ? T.amber : T.green, fontWeight: 700 }}>{stepConv}%</span></span>
                      </div>
                      <div style={{ height: 22, borderRadius: 7, background: T.line2, overflow: 'hidden' }}>
                        <div style={{ width: (pctOfFirst * 100) + '%', height: '100%', background: isDrop ? T.amber : T.red, borderRadius: 7, transition: 'width .5s' }} />
                      </div>
                    </div>
                  );
                })}
              </div>
              <div style={{ fontFamily: FB, fontSize: 11.5, color: T.muted, lineHeight: 1.5, marginTop: 16, paddingTop: 14, borderTop: '1px solid ' + T.line2 }}>
                Biggest leak is at <span style={{ color: T.ink, fontWeight: 700 }}>{PH_FUNNEL[dropIdx].step}</span> — {Math.round(dropPct * 100)}% drop. Worth an experiment: pre-fill consignee details and simplify the document upload.
              </div>
            </Card>
          </div>

          {/* trend + events */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <SectionHead title="Bookings · 12 wks" />
              <Card>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 90 }}>
                  {PH_TREND.map((v, i) => (
                    <div key={i} style={{ flex: 1, height: Math.max(6, (v / maxT) * 80), background: i === PH_TREND.length - 1 ? T.red : T.navy3, borderRadius: 4, opacity: i === PH_TREND.length - 1 ? 1 : 0.55 }} />
                  ))}
                </div>
              </Card>
            </div>
            <div>
              <SectionHead title="Live events" action="Stream" />
              <Card pad={0} style={{ overflow: 'hidden' }}>
                {PH_EVENTS.map((e, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 15px', borderTop: i ? '1px solid ' + T.line2 : 'none' }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: e.ev === 'quote_abandoned' ? T.amber : T.green, flexShrink: 0 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: FM, fontSize: 11.5, fontWeight: 700, color: T.ink }}>{e.ev}</div>
                      <div style={{ fontFamily: FM, fontSize: 10, color: T.muted, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.props}</div>
                    </div>
                    <span style={{ fontFamily: FM, fontSize: 9.5, color: T.faint, flexShrink: 0 }}>{e.time}</span>
                  </div>
                ))}
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InsightsScreen });