/* global React, Icon, Pill, SrcChip, TV */
const { useState, useEffect } = React;

function LeadershipView() {
  return (
    <div className="tv" style={{ padding: 24 }}>
      <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "#8EA7C4", fontWeight: 700 }}>Sea Containers NZ · Leadership</div>
          <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>Operations board — Friday 24 Apr 2026</div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <span style={{ fontSize: 11, color: "#8EA7C4", fontFamily: "var(--font-mono)" }}>LIVE</span>
          <span style={{ width: 8, height: 8, borderRadius: 4, background: "#3FD69A", boxShadow: "0 0 0 4px rgba(63,214,154,0.2)" }} />
        </div>
      </div>

      {/* Left column (2fr) */}
      <div style={{ display: "grid", gap: 16 }}>
        {/* In-flight */}
        <div className="tv-card">
          <h4>In-flight deliveries · today</h4>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 8 }}>
            <TvStat big v={TV.inflightToday} label="Today" delta="+3 vs yesterday" up />
            <TvStat big v={TV.inflightWeek} label="This week" delta="+12% vs last wk" up />
            <TvStat big v={TV.exceptions} label="Exceptions" delta="2 with CS now" err />
            <TvStat big v="94%" label="On-time rate" delta="target 95%" />
          </div>
          <div style={{ marginTop: 14 }}>
            <DeliveriesStrip />
          </div>
        </div>

        {/* Quote funnel */}
        <div className="tv-card">
          <h4>Quote funnel · this week</h4>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 8 }}>
            <TvStat big v={TV.quotesIn} label="Inbound" delta="+8 vs last wk" up />
            <TvStat big v={TV.quotesOut} label="Responded" delta="91% coverage" />
            <TvStat big v={TV.converted} label="Converted" delta="47% rate" up />
            <TvStat big v={TV.avgResponse} label="Avg response" delta={`target ${TV.targetResponse}`} err />
          </div>

          <div style={{ marginTop: 14 }}>
            <div style={{ fontSize: 11, color: "#8EA7C4", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 700, marginBottom: 8 }}>Response time by rep</div>
            <RepBars />
          </div>
        </div>
      </div>

      {/* Right column (1fr) */}
      <div style={{ display: "grid", gap: 16 }}>
        <div className="tv-card">
          <h4>GP · April MTD</h4>
          <div className="tv-big" style={{ color: "#3FD69A" }}>{TV.gpMonth}</div>
          <div style={{ color: "#8EA7C4", fontSize: 12, marginTop: 2 }}>
            <span className="tv-delta-up">▲ {TV.gpDelta}</span> vs March
          </div>
          <div style={{ height: 64, marginTop: 14 }}>
            <SparkLine />
          </div>
        </div>

        <div className="tv-card">
          <h4>Transport GP this month</h4>
          <div style={{ display: "grid", gap: 8, marginTop: 6 }}>
            <GpRow vendor="Lion Crane" gp="+$8,420" pct="22%" />
            <GpRow vendor="Morgan Crane" gp="+$5,180" pct="18%" />
            <GpRow vendor="A Crane" gp="+$2,030" pct="8%" warn />
            <GpRow vendor="Hiab Ops" gp="+$3,900" pct="16%" />
            <GpRow vendor="Swift Haulage" gp="+$4,410" pct="20%" />
          </div>
        </div>

        <div className="tv-card">
          <h4>Exceptions needing attention</h4>
          <div style={{ display: "grid", gap: 8, marginTop: 6, fontSize: 12.5 }}>
            <ExRow what="Off-hire detected · TGA" who="Kiwi Kiwifruit Co-op" sev="err" />
            <ExRow what="3 on hire / 2 repeating" who="Go Logistics NZ" sev="warn" />
            <ExRow what="POA postcode · 7910" who="Timaru Harbour Services" sev="warn" />
            <ExRow what="Driver silent · 24h" who="A Crane · DJ-20388" sev="err" />
            <ExRow what="Hire agreement unsigned" who="Selwyn Build Co." sev="warn" />
          </div>
        </div>
      </div>
    </div>
  );
}

function TvStat({ v, label, delta, up, err, big }) {
  return (
    <div>
      <div className="tv-big" style={{ fontSize: big ? 40 : 28 }}>{v}</div>
      <div style={{ fontSize: 11, color: "#8EA7C4", fontWeight: 600, letterSpacing: "0.04em" }}>{label}</div>
      <div style={{ fontSize: 11, marginTop: 2, color: err ? "#FF7A7A" : up ? "#3FD69A" : "#8EA7C4", fontWeight: 600 }}>{delta}</div>
    </div>
  );
}

function DeliveriesStrip() {
  const jobs = [
    { id: "DJ-20418", who: "Rangitata Orchards", state: "booked",   rep: "JH", trans: "Lion Crane" },
    { id: "DJ-20412", who: "Selwyn Build Co.",    state: "transit", rep: "JH", trans: "Lion Crane" },
    { id: "DJ-20399", who: "Timaru Harbour",      state: "booked",   rep: "JH", trans: "Lion Crane" },
    { id: "DJ-20388", who: "Kiwi Kiwifruit",      state: "stuck",    rep: "HB", trans: "A Crane" },
    { id: "DJ-20376", who: "AddictionFoods",      state: "delivered",rep: "CP", trans: "Morgan Crane" },
    { id: "DJ-20351", who: "Cromwell Wines",      state: "transit",  rep: "KJ", trans: "Swift Haulage" },
    { id: "DJ-20344", who: "Go Logistics",        state: "delivered",rep: "CP", trans: "Lion Crane" },
  ];
  const colors = { booked: "#1FA7E6", transit: "#FFB72B", stuck: "#FF7A7A", delivered: "#3FD69A" };
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8 }}>
      {jobs.map(j => (
        <div key={j.id} style={{ background: "#081324", borderRadius: 8, padding: 10, border: `1px solid ${colors[j.state]}33` }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: colors[j.state] }} />
            <span style={{ fontSize: 10, color: "#8EA7C4", textTransform: "uppercase", fontWeight: 700, letterSpacing: "0.04em" }}>{j.state}</span>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#8EA7C4", marginTop: 6 }}>{j.id}</div>
          <div style={{ fontSize: 12, fontWeight: 700, marginTop: 2 }}>{j.who}</div>
          <div style={{ fontSize: 10.5, color: "#8EA7C4", marginTop: 2 }}>{j.rep} · {j.trans}</div>
        </div>
      ))}
    </div>
  );
}

function RepBars() {
  const reps = [
    { n: "Hayden",  v: 0.9,  target: false },
    { n: "Chris",   v: 1.1,  target: false },
    { n: "John",    v: 1.3,  target: true  },
    { n: "Kiri",    v: 1.4,  target: true  },
    { n: "Dean",    v: 1.5,  target: true  },
    { n: "Mere",    v: 1.8,  target: true  },
    { n: "Sam",     v: 2.1,  target: true  },
  ];
  const max = 2.5;
  return (
    <div style={{ display: "grid", gap: 5 }}>
      {reps.map(r => (
        <div key={r.n} style={{ display: "grid", gridTemplateColumns: "70px 1fr 46px", gap: 10, alignItems: "center" }}>
          <div style={{ fontSize: 12, color: "#C8D2DE" }}>{r.n}</div>
          <div style={{ height: 12, background: "#081324", borderRadius: 6, position: "relative", overflow: "hidden" }}>
            <div style={{ width: `${(r.v / max) * 100}%`, height: "100%", background: r.v <= 1 ? "#3FD69A" : r.v <= 1.5 ? "#FFB72B" : "#FF7A7A", borderRadius: 6 }} />
            <div style={{ position: "absolute", left: `${(0.5 / max) * 100}%`, top: 0, bottom: 0, width: 1, background: "#5AC8FA", opacity: 0.6 }} />
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "#C8D2DE", textAlign: "right" }}>{r.v}d</div>
        </div>
      ))}
      <div style={{ fontSize: 10.5, color: "#8EA7C4", marginTop: 4 }}>target same-day · <span style={{ color: "#5AC8FA" }}>0.5d</span></div>
    </div>
  );
}

function SparkLine() {
  const d = [52,60,58,65,70,68,75,82,79,85,92,96,101,108,115,120,128,135,138,142,148];
  const max = 150, min = 48;
  const pts = d.map((v, i) => `${(i / (d.length - 1)) * 100},${100 - ((v - min) / (max - min)) * 100}`).join(" ");
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
      <defs>
        <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#3FD69A" stopOpacity="0.35" />
          <stop offset="1" stopColor="#3FD69A" stopOpacity="0" />
        </linearGradient>
      </defs>
      <polygon points={`0,100 ${pts} 100,100`} fill="url(#sparkFill)" />
      <polyline points={pts} fill="none" stroke="#3FD69A" strokeWidth="1.4" />
    </svg>
  );
}

function GpRow({ vendor, gp, pct, warn }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 10, alignItems: "center", fontSize: 12.5 }}>
      <span>{vendor}</span>
      <span style={{ fontFamily: "var(--font-mono)", color: warn ? "#FFB72B" : "#C8D2DE" }}>{gp}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: warn ? "#FFB72B" : "#3FD69A", fontWeight: 700 }}>{pct}</span>
    </div>
  );
}

function ExRow({ what, who, sev }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 8, padding: "6px 0", borderBottom: "1px solid #1B3450" }}>
      <div>
        <div style={{ fontWeight: 600 }}>{what}</div>
        <div style={{ fontSize: 11, color: "#8EA7C4" }}>{who}</div>
      </div>
      <span style={{ fontSize: 10.5, padding: "2px 7px", borderRadius: 999, background: sev === "err" ? "#3A1714" : "#2E2414", color: sev === "err" ? "#FF7A7A" : "#FFB72B", fontWeight: 700 }}>{sev === "err" ? "urgent" : "watch"}</span>
    </div>
  );
}

window.LeadershipView = LeadershipView;