/* global React, Icon, Badge, Tag, Avatar, Button, Field, Toggle, Tabs, Segmented, PeriodPicker, Card, Metric, Modal, Pager,
   LineChart, BarChart, AreaChart, DonutCard, Gauge, Heatmap, Sparkline, ProgressBar, toast, StatusBadge */

var { useState: useState_e, useMemo: useMemo_e, useEffect: useEffect_e, useRef: useRef_e } = React;

// ============================================================
// SALES MANAGER — Enhanced: Pipeline + Leaderboard + Heatmap + Funnel
// ============================================================
function PageSalesEnhanced({ onNav }) {
  const [manager, setManager] = useState_e("");
  const [managers, setManagers] = useState_e([]);
  const [tab, setTab] = useState_e("overview");
  const [period, setPeriod] = useState_e("month");
  const [assignOpen, setAssignOpen] = useState_e(false);

  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getReportingSalesPerformance().then((arr) => {
      if (!Array.isArray(arr) || !arr.length) return;
      setManagers(arr);
      // Pick the first real manager so the KPI table has something to show
      if (!manager) setManager(arr[0].sales_manager || arr[0].username || arr[0].name || "");
    });
  }, []);

  return (
    <div data-comment-anchor="358735dc0f-div-14-5">
      <div className="page-head" data-comment-anchor="479759f612-div-17-7">
        <div>
          <h1 className="page-head__title">Sales Manager Dashboard</h1>
          <div className="page-head__sub" data-comment-anchor="5b83d4bc3d-div-18-11">Monthly, quarterly and yearly KPI growth and performance for every sales manager.</div>
        </div>
        <div className="page-head__actions">
          <select className="select" value={manager} onChange={(e) => setManager(e.target.value)} style={{ minWidth: 200 }}>
            {managers.length === 0 && <option value="">Loading managers...</option>}
            {managers.map(function (m, i) {
              var n = m.sales_manager || m.username || m.name || ("Manager " + i);
              return <option key={n + i} value={n}>{n}</option>;
            })}
            {managers.length > 0 && <option value="__all__">All sales managers</option>}
          </select>
          <PeriodPicker value={period} onChange={setPeriod} />
          {/* Assign target — super admin only */}
          <Button kind="primary" icon={<Icon.Plus />} onClick={() => setAssignOpen(true)}>Assign target</Button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
      { id: "overview", label: "Overview" },
      { id: "groups", label: "Travel Groups", count: 8 },
      { id: "accounts", label: "Accounts", count: 142 },
      { id: "kpi", label: "KPI assignment" }]
      } />

      {tab === "overview" && <SalesOverview manager={manager} period={period} />}
      {tab === "groups" && <SalesTravelGroups />}
      {tab === "accounts" && <SalesAccounts />}
      {tab === "kpi" && <SalesKPI />}

      <AssignTargetModal open={assignOpen} onClose={() => setAssignOpen(false)} manager={manager} />
    </div>);

}

function SalesOverview({ manager, period }) {
  const { useState, useEffect } = React;
  const [territoryOpen, setTerritoryOpen] = useState(false);
  const [agencies, setAgencies] = useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  // Real sales-manager KPI from backend. kpiProgress = array of managers
  // with q1/q2/q3/q4/yearly { target, achieved, percentage }.
  const [kpiProgress, setKpiProgress] = useState([]);
  const [salesPerf, setSalesPerf] = useState([]);
  useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAgencies(rows); });
    window.TrekkoAPI.getReportingSalesKpiProgress().then((d) => { if (Array.isArray(d)) setKpiProgress(d); });
    window.TrekkoAPI.getReportingSalesPerformance().then((d) => { if (Array.isArray(d)) setSalesPerf(d); });
  }, []);
  // Pick this manager's row out of kpiProgress; if no match, sum across all.
  const mgrRow = kpiProgress.find((r) => (r.username || r.name || "").toLowerCase() === String(manager || "").toLowerCase());
  function k(v) { return Math.round((v || 0) / 1000); }
  function pct(target, achieved) { return target > 0 ? Math.round(achieved / target * 100) : 0; }
  const kpiRows = mgrRow ? [
    { period: "This month (MTD)", target: k(mgrRow.q2 && mgrRow.q2.target / 3), actual: k(mgrRow.q2 && mgrRow.q2.achieved / 3), ly: 0, att: pct(mgrRow.q2 && mgrRow.q2.target, mgrRow.q2 && mgrRow.q2.achieved) },
    { period: "This quarter (QTD)", target: k(mgrRow.q2 && mgrRow.q2.target), actual: k(mgrRow.q2 && mgrRow.q2.achieved), ly: 0, att: (mgrRow.q2 && mgrRow.q2.percentage) || 0 },
    { period: "This year (YTD)", target: k(mgrRow.yearly && mgrRow.yearly.target), actual: k(mgrRow.yearly && mgrRow.yearly.achieved), ly: 0, att: (mgrRow.yearly && mgrRow.yearly.percentage) || 0 },
  ] : [];
  const trend12 = [
  { label: "Jun", current: 88, previous: 72, target: 95 },
  { label: "Jul", current: 124, previous: 95, target: 110 },
  { label: "Aug", current: 142, previous: 118, target: 120 },
  { label: "Sep", current: 116, previous: 102, target: 120 },
  { label: "Oct", current: 168, previous: 130, target: 135 },
  { label: "Nov", current: 184, previous: 148, target: 150 },
  { label: "Dec", current: 152, previous: 138, target: 160 },
  { label: "Jan", current: 178, previous: 142, target: 165 },
  { label: "Feb", current: 198, previous: 158, target: 175 },
  { label: "Mar", current: 224, previous: 178, target: 200 },
  { label: "Apr", current: 248, previous: 192, target: 220 },
  { label: "May", current: 286, previous: 214, target: 240 }];


  return (
    <>
      {/* Real-time KPI performance — sales managers love seeing how they're doing */}
      <Card title="My KPI performance — real time" sub={`${manager} · live attainment vs target`} style={{ marginBottom: 18 }} flush>
        <table className="tbl">
          <thead>
            <tr>
              <th>Period</th>
              <th className="num">Target</th>
              <th className="num">Actual</th>
              <th className="num">Attainment</th>
              <th className="num">Last year</th>
              <th className="num">YoY</th>
              <th>Progress</th>
            </tr>
          </thead>
          <tbody>
            {(kpiRows.length ? kpiRows : [
            { period: "This month (MTD)", target: 0, actual: 0, ly: 0, att: 0 },
            { period: "This quarter (QTD)", target: 0, actual: 0, ly: 0, att: 0 },
            { period: "This year (YTD)", target: 0, actual: 0, ly: 0, att: 0 }]).
            map((r) => {
              // Guard against ly=0 (NaN) and ly missing.
              const yoy = r.ly > 0 ? Math.round((r.actual - r.ly) / r.ly * 100) : null;
              return (
                <tr key={r.period}>
                  <td className="bold">{r.period}</td>
                  <td className="num mono">€{r.target}k</td>
                  <td className="num mono bold">€{r.actual}k</td>
                  <td className="num mono" style={{ color: r.att >= 100 ? "var(--success)" : "var(--warning)" }}>{Math.round(r.att)}%</td>
                  <td className="num mono muted">€{r.ly}k</td>
                  <td className="num mono" style={{ color: (yoy || 0) >= 0 ? "var(--success)" : "var(--danger)" }}>{yoy == null ? "-" : (yoy >= 0 ? "+" + yoy + "%" : yoy + "%")}</td>
                  <td style={{ minWidth: 140 }}><ProgressBar value={Math.min(100, r.att || 0)} color={(r.att || 0) >= 100 ? "#0e7c66" : "#635bff"} /></td>
                </tr>);

            })}
          </tbody>
        </table>
      </Card>

      {/* Last year quarterly KPIs */}
      <Card title="Last year — quarterly KPIs" sub="For reference vs this year" style={{ marginBottom: 18 }} data-comment-anchor="ece0626a77-div-252-9" flush>
        <table className="tbl">
          <thead><tr><th>Quarter</th><th className="num">Target</th><th className="num">Actual</th><th className="num">Attainment</th><th className="num">This year</th><th className="num">YoY</th></tr></thead>
          <tbody>
            {[
            { q: "Q1", target: 580, actual: 612, ty: 720 },
            { q: "Q2", target: 640, actual: 698, ty: 842 },
            { q: "Q3", target: 700, actual: 658, ty: 0 },
            { q: "Q4", target: 620, actual: 690, ty: 0 }].
            map((r) => {
              const att = Math.round(r.actual / r.target * 100);
              const yoy = r.ty ? Math.round((r.ty - r.actual) / r.actual * 100) : null;
              return (
                <tr key={r.q}>
                  <td className="bold">{r.q} 2024</td>
                  <td className="num mono">€{r.target}k</td>
                  <td className="num mono bold">€{r.actual}k</td>
                  <td className="num mono" style={{ color: att >= 100 ? "var(--success)" : "var(--warning)" }}>{att}%</td>
                  <td className="num mono">{r.ty ? "€" + r.ty + "k" : "—"}</td>
                  <td className="num mono" style={{ color: yoy >= 0 ? "var(--success)" : "var(--danger)" }}>{yoy != null ? (yoy >= 0 ? "+" : "") + yoy + "%" : "—"}</td>
                </tr>);

            })}
          </tbody>
        </table>
      </Card>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="MTD revenue" value="€286k" mom="+12%" momDir="up" yoy="+18%" yoyDir="up" hint={`${manager} · €240k target`} />
        <Metric label="Monthly attainment" value="119%" mom="+7 pt" momDir="up" yoy="+11 pt" yoyDir="up" hint="€286k / €240k" />
        <Metric label="Quarterly attainment" value="128%" mom="+9 pt" momDir="up" yoy="+16 pt" yoyDir="up" hint="QTD €842k / €660k" />
        <Metric label="Yearly attainment" value="91%" mom="+4 pt" momDir="up" yoy="+8 pt" yoyDir="up" hint="YTD €2.41M / €2.64M" />
      </div>

      <Card title="Revenue · Actual vs Target vs Last year"
        actions={<Segmented value="m" onChange={() => {}} options={[{ value: "w", label: "Week" }, { value: "m", label: "Month" }, { value: "q", label: "Quarter" }]} />}
        style={{ marginBottom: 18 }}>
        <AreaChart
          height={280}
          data={trend12}
          valueFmt={(v) => "€" + v + "k"}
          series={[
          { key: "current", name: "Actual", color: "#635bff" },
          { key: "target", name: "Target", color: "#00d4ff" },
          { key: "previous", name: "Last year", color: "#a78bfa" }]
          } />
      </Card>

      {/* Top & lowest performing agencies under this manager */}
      <div className="grid grid--2" style={{ gap: 18, marginBottom: 18 }} data-comment-anchor="479759f612-div-17-7">
        <Card title="Top 10 performing agencies" sub={`In ${manager}'s portfolio`} flush>
          <table className="tbl" style={{ fontSize: 12.5 }}>
            <thead><tr><th>#</th><th>Agency</th><th>Market</th><th className="num">Revenue</th><th className="num">YoY</th></tr></thead>
            <tbody>
              {agencies.slice().sort((a, b) => (b.sales || 0) - (a.sales || 0)).slice(0, 10).map((a, i) =>
              <tr key={a.id}>
                  <td className="muted mono">{i + 1}</td>
                  <td className="bold">{a.name}</td>
                  <td className="muted">{a.country}</td>
                  <td className="num mono">€{(a.sales || 0).toLocaleString()}</td>
                  <td className="num mono" style={{ color: "var(--success)" }}>+{(8 + i % 5 * 3)}%</td>
                </tr>
              )}
            </tbody>
          </table>
        </Card>
        <Card title="Lowest performing agencies" sub="Need attention" flush>
          <table className="tbl" style={{ fontSize: 12.5 }}>
            <thead><tr><th>#</th><th>Agency</th><th>Market</th><th className="num">Revenue</th><th className="num">YoY</th></tr></thead>
            <tbody>
              {agencies.slice().sort((a, b) => (a.sales || 0) - (b.sales || 0)).slice(0, 10).map((a, i) =>
              <tr key={a.id}>
                  <td className="muted mono">{i + 1}</td>
                  <td className="bold">{a.name}</td>
                  <td className="muted">{a.country}</td>
                  <td className="num mono">€{(a.sales || 0).toLocaleString()}</td>
                  <td className="num mono" style={{ color: "var(--danger)" }}>−{(4 + i % 4 * 3)}%</td>
                </tr>
              )}
            </tbody>
          </table>
        </Card>
      </div>

      {/* Territory assignment — super admin assigns areas/cities/provinces */}
      <Card title="Assigned territories" sub={`Counting toward ${manager}'s monthly, quarterly & yearly KPI`}
        actions={<Button kind="secondary" size="sm" icon={<Icon.Edit />} onClick={() => setTerritoryOpen(true)}>Assign territory</Button>}
        style={{ marginBottom: 18 }}>
        <div className="grid grid--3" style={{ gap: 14 }}>
          {[
          { icon: "Globe", label: "Zones & Markets", tone: "indigo", items: ["Iberia", "Spain", "Portugal"] },
          { icon: "Pin", label: "Provinces / Regions", tone: "info", items: ["Andalucía", "Cataluña", "Comunidad de Madrid"] },
          { icon: "Building", label: "Cities", tone: "success", items: ["Madrid", "Barcelona", "Valencia", "Lisbon"] }].
          map((grp) => {
            const Ic = Icon[grp.icon];
            return (
              <div key={grp.label} style={{ border: "1px solid var(--border)", borderRadius: 10, padding: 14, background: "var(--bg-subtle)" }}>
                <div className="row" style={{ gap: 8, marginBottom: 10 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "var(--surface)", border: "1px solid var(--border)" }}><Ic size={15} /></span>
                  <div>
                    <div className="bold" style={{ fontSize: 12.5 }}>{grp.label}</div>
                    <div className="tiny muted">{grp.items.length} assigned</div>
                  </div>
                </div>
                <div className="row" style={{ gap: 6, flexWrap: "wrap" }}>
                  {grp.items.map((t) => <Badge key={t} tone={grp.tone}>{t}</Badge>)}
                </div>
              </div>);

          })}
        </div>
      </Card>

      <Card title="Sales motion by product" flush>
        <table className="tbl">
          <thead><tr><th>Product</th><th className="num">Pipeline</th><th className="num">Won (YTD)</th><th className="num">Win rate</th><th className="num">Avg cycle</th><th className="num">Avg deal</th><th>Trend</th></tr></thead>
          <tbody>
            <tr><td><Tag kind="hotel">Accommodation</Tag></td><td className="num mono">€612k</td><td className="num mono bold">€348k</td><td className="num mono">42%</td><td className="num mono">12 d</td><td className="num mono">€8.4k</td><td><Sparkline values={[6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18]} /></td></tr>
            <tr><td><Tag kind="rental">Rental Cars</Tag></td><td className="num mono">€428k</td><td className="num mono bold">€198k</td><td className="num mono">36%</td><td className="num mono">9 d</td><td className="num mono">€4.2k</td><td><Sparkline values={[4, 5, 5, 6, 7, 7, 8, 9, 9, 10, 11, 12]} /></td></tr>
            <tr><td><Tag kind="transfer">Transfer</Tag></td><td className="num mono">€186k</td><td className="num mono bold">€92k</td><td className="num mono">48%</td><td className="num mono">6 d</td><td className="num mono">€1.8k</td><td><Sparkline values={[3, 3, 4, 4, 5, 5, 6, 6, 7, 8, 8, 9]} /></td></tr>
            <tr><td><Tag kind="vip">Airport Lounge</Tag></td><td className="num mono">€72k</td><td className="num mono bold">€32k</td><td className="num mono">52%</td><td className="num mono">5 d</td><td className="num mono">€2.6k</td><td><Sparkline values={[1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 7, 8]} color="#a78bfa" /></td></tr>
            <tr><td><Tag kind="vipas">VIP Airport</Tag></td><td className="num mono">€48k</td><td className="num mono bold">€21k</td><td className="num mono">44%</td><td className="num mono">7 d</td><td className="num mono">€3.1k</td><td><Sparkline values={[0, 1, 1, 2, 2, 3, 4, 4, 5, 5, 6, 7]} color="#ff9f43" /></td></tr>
            <tr><td><Tag kind="ptour">Private Tour</Tag></td><td className="num mono">€118k</td><td className="num mono bold">€54k</td><td className="num mono">38%</td><td className="num mono">10 d</td><td className="num mono">€4.8k</td><td><Sparkline values={[2, 3, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9]} color="#0c5fb2" /></td></tr>
          </tbody>
        </table>
      </Card>

      {territoryOpen &&
      <TerritoryModal manager={manager} onClose={() => setTerritoryOpen(false)} />}
    </>);

}

function TerritoryModal({ manager, onClose }) {
  const { useState } = React;
  const [country, setCountry] = useState("");
  const [province, setProvince] = useState("");
  const geo = window.MOCK.GEO;
  const sel = geo.find((g) => g.country === country);
  const provinces = sel ? sel.provinces.slice().sort() : [];
  const cities = sel ? sel.cities.slice().sort() : [];
  return (
    <Modal open title={`Assign territories · ${manager}`} size="lg" onClose={onClose}
      footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="primary" icon={<Icon.Check />} onClick={() => { onClose(); toast({ title: "Territories assigned", body: "Sales from these areas now count toward the KPI.", tone: "success" }); }}>Save</Button></>}>
      <div className="row" style={{ gap: 8, marginBottom: 14, padding: "10px 12px", background: "var(--info-bg)", borderRadius: 8, color: "var(--info)" }}>
        <Icon.Lock stroke="currentColor" /><div style={{ fontSize: 13 }}>Super-admin only. Bookings from assigned territories are attributed to this manager's KPI.</div>
      </div>
      <Field label="Zones" hint="Broad commercial zones"><select className="select" multiple style={{ height: 70 }}><option>Benelux</option><option>DACH</option><option>Iberia</option><option>Mediterranean</option><option>Nordics</option><option>UK &amp; Ireland</option></select></Field>
      <div style={{ height: 12 }} />
      <Field label="Country / Market" hint="Pick a country to load its provinces.">
        <select className="select" value={country} onChange={(e) => { setCountry(e.target.value); setProvince(""); }}>
          <option value="">— Select country —</option>
          {geo.map((g) => <option key={g.country}>{g.country}</option>)}
        </select>
      </Field>
      <div style={{ height: 12 }} />
      <Field label="Province / Region" hint={country ? "Provinces of " + country : "Select a country first."}>
        <select className="select" value={province} onChange={(e) => setProvince(e.target.value)} disabled={!country}>
          <option value="">{country ? "— Select province —" : "—"}</option>
          {provinces.map((p) => <option key={p}>{p}</option>)}
        </select>
      </Field>
      <div style={{ height: 12 }} />
      <Field label="Cities" hint={country ? "Cities of " + country + " — hold Cmd/Ctrl to multi-select." : "Select a country first."}>
        <select className="select" multiple style={{ height: 110 }} disabled={!country}>
          {cities.map((c) => <option key={c}>{c}</option>)}
        </select>
      </Field>
    </Modal>);
}

function ProgressRow({ label, value, max, color, suffix }) {
  return (
    <div>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
        <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{label}</span>
        <span className="tabular bold">{value}{suffix}</span>
      </div>
      <ProgressBar value={value / max * 100} color={color} />
    </div>);

}

function FunnelChart({ steps }) {
  const max = Math.max(...steps.map((s) => s.value));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {steps.map((s, i) => {
        const pct = s.value / max * 100;
        return (
          <div key={s.label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ width: 110, fontSize: 12.5, color: "var(--ink-2)" }}>{s.label}</div>
            <div style={{ flex: 1, height: 28, background: "var(--bg-subtle)", borderRadius: 6, overflow: "hidden", position: "relative" }}>
              <div style={{
                width: pct + "%", height: "100%", background: `linear-gradient(90deg, ${s.color}, ${s.color}cc)`,
                borderRadius: 6, transition: "width 320ms",
                display: "flex", alignItems: "center", padding: "0 10px",
                color: "#fff", fontSize: 12, fontWeight: 600
              }}>{s.value.toLocaleString()}</div>
            </div>
            {i > 0 && <div className="tiny muted" style={{ width: 60, textAlign: "right" }}>{Math.round(s.value / steps[i - 1].value * 100)}%</div>}
            {i === 0 && <div className="tiny muted" style={{ width: 60, textAlign: "right" }}>—</div>}
          </div>);

      })}
    </div>);

}

// -----------------------------------------------------------
// PIPELINE — kanban
// -----------------------------------------------------------
function SalesPipeline() {
  const STAGES = [
  { id: "lead", name: "Lead", count: 18, weight: 0.10, color: "#a78bfa" },
  { id: "qualified", name: "Qualified", count: 12, weight: 0.30, color: "#635bff" },
  { id: "demo", name: "Demo / Call", count: 8, weight: 0.50, color: "#00d4ff" },
  { id: "negot", name: "Negotiation", count: 6, weight: 0.75, color: "#0e7c66" },
  { id: "won", name: "Closed-won", count: 14, weight: 1.00, color: "#0e7c66" },
  { id: "lost", name: "Closed-lost", count: 5, weight: 0, color: "#d4366a" }];


  const DEALS = [
  { stage: "lead", agency: "Bluewave Holdings", amount: 12000, contact: "Lucia Reyes", next: "Intro call", due: "Tomorrow", owner: "Ryan Hou" },
  { stage: "lead", agency: "Drive Athens", amount: 4800, contact: "Eleni Markou", next: "Send proposal", due: "May 21", owner: "Maria Lopez" },
  { stage: "lead", agency: "Pacific Horizons", amount: 9600, contact: "Sara Demir", next: "Discovery", due: "May 22", owner: "Maria Lopez" },
  { stage: "qualified", agency: "StrideBrite", amount: 28000, contact: "Alessandra Lee", next: "Pricing review", due: "May 19", owner: "Ryan Hou" },
  { stage: "qualified", agency: "Aurora Routes", amount: 41000, contact: "Erik Solberg", next: "Demo (live)", due: "May 20", owner: "Hannah Briggs" },
  { stage: "demo", agency: "Wired World", amount: 64000, contact: "Marco Taylor", next: "Q&A follow-up", due: "May 21", owner: "Ryan Hou" },
  { stage: "demo", agency: "Global Robotics, Inc.", amount: 92000, contact: "Greta Nelson", next: "Champion intro", due: "May 23", owner: "Maria Lopez" },
  { stage: "negot", agency: "Industrial Dynamics", amount: 148000, contact: "Anya Watson", next: "Legal redlines", due: "May 24", owner: "Hannah Briggs" },
  { stage: "negot", agency: "Northwind Travel", amount: 220000, contact: "James Pickering", next: "Final pricing", due: "Today", owner: "Ryan Hou" },
  { stage: "won", agency: "OptiTron Tech", amount: 88000, contact: "Bailey Chen", next: "Onboarding kick-off", due: "Today", owner: "Ryan Hou" },
  { stage: "won", agency: "Paramount Products", amount: 64000, contact: "Christopher Brown", next: "Account handover", due: "Tomorrow", owner: "Maria Lopez" },
  { stage: "lost", agency: "Marketing Synergy GmbH", amount: 36000, contact: "—", next: "Re-engage Q4", due: "—", owner: "Ryan Hou" }];


  const totalForStage = (id) => DEALS.filter((d) => d.stage === id).reduce((a, d) => a + d.amount, 0);

  return (
    <>
      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by agency or contact…" style={{ width: 280 }} />
        <select className="select"><option>All owners</option><option>Ryan Hou</option><option>Maria Lopez</option><option>Hannah Briggs</option></select>
        <select className="select"><option>All sizes</option><option>&gt; €100k</option><option>€20k — €100k</option><option>&lt; €20k</option></select>
        <span className="spacer" />
        <Segmented value="board" onChange={() => {}} options={[{ value: "board", label: "Board" }, { value: "list", label: "List" }]} />
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: `repeat(${STAGES.length}, minmax(200px, 1fr))`,
        gap: 12,
        background: "var(--bg-surface)",
        border: "1px solid var(--border)",
        borderTop: 0,
        padding: 12,
        borderRadius: "0 0 8px 8px"
      }}>
        {STAGES.map((s) =>
        <div key={s.id} style={{ background: "var(--bg-subtle)", borderRadius: 8, padding: 10, minHeight: 320 }}>
            <div className="row" style={{ marginBottom: 10, justifyContent: "space-between" }}>
              <div>
                <div className="row" style={{ gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 999, background: s.color }} />
                  <span className="bold" style={{ fontSize: 13 }}>{s.name}</span>
                  <span className="tiny muted">{s.count}</span>
                </div>
                <div className="tiny muted" style={{ marginTop: 2 }}>€{(totalForStage(s.id) / 1000).toFixed(0)}k value</div>
              </div>
              <Button kind="ghost" size="sm" iconOnly icon={<Icon.More />} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {DEALS.filter((d) => d.stage === s.id).map((d, i) =>
            <div key={i} style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 6, padding: 10, boxShadow: "var(--shadow-xs)", cursor: "grab" }}>
                  <div className="bold" style={{ fontSize: 13 }}>{d.agency}</div>
                  <div className="tiny muted" style={{ marginTop: 2 }}>{d.contact}</div>
                  <div className="row" style={{ marginTop: 6, justifyContent: "space-between" }}>
                    <span className="mono bold" style={{ fontSize: 12.5 }}>€{d.amount.toLocaleString()}</span>
                    <Avatar name={d.owner} size="sm" />
                  </div>
                  <div className="tiny muted" style={{ marginTop: 6, display: "flex", justifyContent: "space-between" }}>
                    <span>{d.next}</span>
                    <span>{d.due}</span>
                  </div>
                </div>
            )}
              <button className="btn btn--ghost btn--sm" style={{ width: "100%", justifyContent: "center" }}>
                <Icon.Plus size={12} /> Add deal
              </button>
            </div>
          </div>
        )}
      </div>
    </>);

}

// -----------------------------------------------------------
// ACTIVITY — heatmap + recent activity list
// -----------------------------------------------------------
function SalesActivity() {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  const weeks = ["W19", "W20", "W21", "W22", "W23", "W24", "W25", "W26", "W27", "W28", "W29", "W30"];
  const heatRows = days.map((d, i) => ({
    label: d,
    cells: weeks.map((_, j) => Math.max(0, Math.round(Math.sin(i + j * 0.6) * 14 + 8 + Math.random() * 6)))
  }));

  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Activities today" value="38" delta="+6 vs avg" deltaDir="up" />
        <Metric label="Calls (this week)" value="142" delta="+12%" deltaDir="up" />
        <Metric label="Meetings (this week)" value="18" hint="9 demos · 9 syncs" />
        <Metric label="Emails sent (this week)" value="421" delta="−4%" deltaDir="down" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Activity heatmap" sub="Touchpoints per day, last 12 weeks">
          <Heatmap rows={heatRows} columns={weeks} color="#635bff" valueFmt={(v) => v + " activities"} />
          <div className="row tiny muted" style={{ marginTop: 12, gap: 6 }}>
            Less
            <span style={{ width: 14, height: 14, background: "var(--bg-subtle)", borderRadius: 3 }} />
            <span style={{ width: 14, height: 14, background: "#635bff", opacity: 0.3, borderRadius: 3 }} />
            <span style={{ width: 14, height: 14, background: "#635bff", opacity: 0.6, borderRadius: 3 }} />
            <span style={{ width: 14, height: 14, background: "#635bff", opacity: 0.9, borderRadius: 3 }} />
            More
          </div>
        </Card>

        <Card title="Productivity" sub="Average per workday">
          <div className="grid" style={{ gap: 12 }}>
            <ProgressRow label="Calls" value={11} max={15} color="#635bff" suffix=" / day" />
            <ProgressRow label="Emails" value={42} max={50} color="#00d4ff" suffix=" / day" />
            <ProgressRow label="Meetings" value={2.8} max={5} color="#0e7c66" suffix=" / day" />
            <ProgressRow label="Demos" value={1.4} max={3} color="#ff9f43" suffix=" / day" />
            <ProgressRow label="Proposals" value={0.8} max={2} color="#d4366a" suffix=" / day" />
          </div>
        </Card>
      </div>

      <Card title="Recent activity" flush>
        <table className="tbl">
          <thead><tr><th>When</th><th>Activity</th><th>Agency</th><th>Outcome</th><th>Owner</th></tr></thead>
          <tbody>
            <tr><td className="mono muted">2 min ago</td><td><span className="row" style={{ gap: 6 }}><Icon.Phone size={12} /> Call · 18 min</span></td><td className="bold">Industrial Dynamics</td><td><Badge tone="success">Demo scheduled</Badge></td><td><Avatar name="Ryan Hou" size="sm" /></td></tr>
            <tr><td className="mono muted">14 min ago</td><td><span className="row" style={{ gap: 6 }}><Icon.Mail size={12} /> Email · proposal sent</span></td><td className="bold">Northwind Travel</td><td><Badge tone="info">Awaiting reply</Badge></td><td><Avatar name="Ryan Hou" size="sm" /></td></tr>
            <tr><td className="mono muted">42 min ago</td><td><span className="row" style={{ gap: 6 }}><Icon.Cal size={12} /> Demo · 30 min</span></td><td className="bold">Aurora Routes</td><td><Badge tone="success">Moved to qualified</Badge></td><td><Avatar name="Hannah Briggs" size="sm" /></td></tr>
            <tr><td className="mono muted">1 hr ago</td><td><span className="row" style={{ gap: 6 }}><Icon.Doc size={12} /> Contract sent</span></td><td className="bold">OptiTron Tech</td><td><Badge tone="success">e-signed</Badge></td><td><Avatar name="Ryan Hou" size="sm" /></td></tr>
            <tr><td className="mono muted">3 hr ago</td><td><span className="row" style={{ gap: 6 }}><Icon.Phone size={12} /> Call · 6 min</span></td><td className="bold">Bluewave Holdings</td><td><Badge tone="neutral">No answer</Badge></td><td><Avatar name="Maria Lopez" size="sm" /></td></tr>
            <tr><td className="mono muted">Yesterday</td><td><span className="row" style={{ gap: 6 }}><Icon.Mail size={12} /> Follow-up email</span></td><td className="bold">Wired World</td><td><Badge tone="warning">Opened, no reply</Badge></td><td><Avatar name="Ryan Hou" size="sm" /></td></tr>
          </tbody>
        </table>
      </Card>
    </>);

}

// -----------------------------------------------------------
// LEADERBOARD
// -----------------------------------------------------------
function SalesLeaderboard() {
  const RANK = [
  { rank: 1, name: "Ryan Hou", sales: 1500000, deals: 84, calls: 612, meetings: 142, attain: 124, change: 2, badge: "🥇" },
  { rank: 2, name: "Hannah Briggs", sales: 1080000, deals: 62, calls: 484, meetings: 108, attain: 112, change: 0, badge: "🥈" },
  { rank: 3, name: "Maria Lopez", sales: 920000, deals: 48, calls: 392, meetings: 96, attain: 98, change: -1, badge: "🥉" },
  { rank: 4, name: "Juan Salazar", sales: 480000, deals: 38, calls: 312, meetings: 64, attain: 78, change: 1 },
  { rank: 5, name: "Pierre Allain", sales: 412000, deals: 32, calls: 286, meetings: 58, attain: 72, change: -1 },
  { rank: 6, name: "Sofia Vargas", sales: 348000, deals: 28, calls: 240, meetings: 42, attain: 64, change: 0 }];

  return (
    <>
      <div className="row" style={{ marginBottom: 12 }}>
        <span className="muted">Quarter</span>
        <Segmented value="this" onChange={() => {}} options={[{ value: "this", label: "This Q" }, { value: "prev", label: "Last Q" }, { value: "ytd", label: "YTD" }]} />
        <span className="spacer" />
        <Button kind="secondary" size="sm" icon={<Icon.Download />}>Export</Button>
      </div>

      <div className="tbl-wrap" style={{ border: "1px solid var(--border)", borderRadius: 8 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th className="num">Rank</th>
              <th>Manager</th>
              <th className="num">Sales</th>
              <th className="num">Deals won</th>
              <th className="num">Calls</th>
              <th className="num">Meetings</th>
              <th className="num">Attainment</th>
              <th>Trend</th>
              <th className="num">Δ rank</th>
            </tr>
          </thead>
          <tbody>
            {RANK.map((r) =>
            <tr key={r.name}>
                <td className="num"><span style={{ fontSize: 16 }}>{r.badge || ""}</span> <span className="mono bold">#{r.rank}</span></td>
                <td><span className="user-cell"><Avatar name={r.name} size="sm" /><span className="bold">{r.name}</span></span></td>
                <td className="num mono bold">€{r.sales.toLocaleString()}</td>
                <td className="num mono">{r.deals}</td>
                <td className="num mono">{r.calls}</td>
                <td className="num mono">{r.meetings}</td>
                <td className="num mono">
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 60, height: 6, background: "var(--bg-subtle)", borderRadius: 999 }}>
                      <span style={{ display: "block", width: Math.min(100, r.attain) + "%", height: "100%", background: r.attain >= 100 ? "var(--success)" : r.attain >= 80 ? "#635bff" : "#ff9f43", borderRadius: 999 }} />
                    </span>
                    <span className="bold">{r.attain}%</span>
                  </span>
                </td>
                <td><Sparkline values={[50, 60, 55, 70, 75, 80, 85, 90, 95, 105, 115, r.attain]} color={r.attain >= 100 ? "#0e7c66" : "#635bff"} /></td>
                <td className="num mono">
                  {r.change > 0 ? <span style={{ color: "var(--success)" }}><Icon.ArrowUp size={11} /> {r.change}</span> :
                r.change < 0 ? <span style={{ color: "var(--danger)" }}><Icon.ArrowDown size={11} /> {Math.abs(r.change)}</span> :
                <span className="muted">—</span>}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      <div style={{ height: 18 }} />

      <div className="grid grid--2" style={{ gap: 18 }}>
        <Card title="Top growth (MoM)">
          {[
          { name: "Ryan Hou", v: "+24%" },
          { name: "Pierre Allain", v: "+18%" },
          { name: "Hannah Briggs", v: "+11%" }].
          map((p, i) =>
          <div key={i} className="row" style={{ padding: "8px 0", borderBottom: i < 2 ? "1px solid var(--border-hairline)" : "0" }}>
              <Avatar name={p.name} size="sm" />
              <span className="bold">{p.name}</span>
              <span className="spacer" />
              <Badge tone="success">{p.v}</Badge>
            </div>
          )}
        </Card>
        <Card title="At risk">
          {[
          { name: "Juan Salazar", v: "−12%", note: "Pipeline dropped" },
          { name: "Sofia Vargas", v: "−8%", note: "Below target" },
          { name: "Pierre Allain", v: "−4%", note: "Won-rate decline" }].
          map((p, i) =>
          <div key={i} className="row" style={{ padding: "8px 0", borderBottom: i < 2 ? "1px solid var(--border-hairline)" : "0" }}>
              <Avatar name={p.name} size="sm" />
              <div style={{ flex: 1 }}>
                <div className="bold">{p.name}</div>
                <div className="tiny muted">{p.note}</div>
              </div>
              <Badge tone="danger">{p.v}</Badge>
            </div>
          )}
        </Card>
      </div>
    </>);

}

// -----------------------------------------------------------
// ACCOUNTS assignment
// -----------------------------------------------------------
function SalesAccounts() {
  const { useState, useEffect } = React;
  const [accounts, setAccounts] = useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAccounts(rows); });
  }, []);
  return (
    <>
      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by account, manager or market…" style={{ width: 320 }} />
        <select className="select"><option>All managers</option><option>Ryan Hou</option><option>Maria Lopez</option><option>Hannah Briggs</option></select>
        <select className="select"><option>All markets</option><option>Iberia</option><option>DACH</option><option>UK</option></select>
        <select className="select"><option>All tiers</option><option>Strategic</option><option>Growth</option><option>SMB</option></select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Edit />}>Reassign in bulk</Button>
      </div>
      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr><th>Account</th><th>Tier</th><th>Market</th><th>Sales manager</th><th className="num">Bookings (YTD)</th><th className="num">Revenue (YTD)</th><th className="num">Pipeline</th><th>Last touch</th><th className="col-actions"></th></tr>
          </thead>
          <tbody>
            {accounts.map((a, i) =>
            <tr key={a.id}>
                <td><span className="user-cell"><Avatar name={a.name} size="sm" /><span className="bold">{a.name}</span></span></td>
                <td>{a.markup === "Unique" ? <Badge tone="indigo">Strategic</Badge> : a.markup === "Gold" ? <Badge tone="warning">Growth</Badge> : <Badge tone="neutral">SMB</Badge>}</td>
                <td className="muted">{a.country}</td>
                <td><span className="user-cell"><Avatar name={["Ryan Hou", "Maria Lopez", "Hannah Briggs", "Juan Salazar"][i % 4]} size="sm" /><span>{["Ryan Hou", "Maria Lopez", "Hannah Briggs", "Juan Salazar"][i % 4]}</span></span></td>
                <td className="num mono">{a.bookings || 0}</td>
                <td className="num mono bold">€{(a.sales || 0).toLocaleString()}</td>
                <td className="num mono">€{((a.sales || 0) * 0.18).toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")}</td>
                <td className="mono muted">{["2 h ago", "Yesterday", "Today", "3 d ago", "Today", "1 week", "Today", "4 d ago", "2 d ago", "Today"][i] || "Today"}</td>
                <td className="col-actions"><Button kind="ghost" size="sm" iconOnly icon={<Icon.Edit />} /></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>);

}

// -----------------------------------------------------------
// COACHING — weak spots
// -----------------------------------------------------------
function SalesCoaching() {
  return (
    <div className="grid grid--2" style={{ gap: 18 }}>
      <Card title="Manager scorecard · Ryan Hou" sub="Strengths vs gaps based on the last 90 days">
        <div className="grid" style={{ gap: 14 }}>
          <ScorecardRow label="Outbound activity" value={92} target={80} hint="Above target by 12 pt" tone="success" />
          <ScorecardRow label="Discovery quality" value={74} target={75} hint="Borderline — listen-to-talk ratio low" tone="warning" />
          <ScorecardRow label="Demo conversion" value={68} target={70} hint="Slight drop in last 2 weeks" tone="warning" />
          <ScorecardRow label="Negotiation efficiency" value={82} target={75} hint="Closing 2 d faster than average" tone="success" />
          <ScorecardRow label="VIP Lounge expertise" value={42} target={60} hint="Below team avg — assign training" tone="danger" />
          <ScorecardRow label="Cross-sell rate" value={58} target={65} hint="Misses on adding Transfer to hotel deals" tone="warning" />
        </div>
      </Card>

      <Card title="Recommendations">
        <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
          {[
          { ic: "Star", tone: "indigo", body: "Pair Ryan with Hannah on next 3 VIP Lounge deals — she has 78% close rate on this product." },
          { ic: "Doc", tone: "info", body: "Refresh Ryan on the new Transfer SKU bundle pricing released May 10." },
          { ic: "Clock", tone: "warning", body: "Discovery-call talk-time is 64%; aim < 50%. Review 3 most recent calls." },
          { ic: "Refresh", tone: "success", body: "Auto-rebooks closed on Ryan's pipeline are at 18%. Use as upsell signal in renewals." }].
          map((r, i) => {
            const Ic = Icon[r.ic];
            return (
              <li key={i} className="row" style={{ gap: 12, alignItems: "flex-start", padding: "12px 0", borderTop: i ? "1px solid var(--border-hairline)" : "none" }}>
                <span style={{
                  width: 30, height: 30, borderRadius: 8, flexShrink: 0,
                  display: "grid", placeItems: "center",
                  background: `var(--${r.tone}-bg)`,
                  color: `var(--${r.tone === "indigo" ? "indigo" : r.tone})`
                }}><Ic /></span>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}>{r.body}</div>
              </li>);

          })}
        </ul>
      </Card>
    </div>);

}

function ScorecardRow({ label, value, target, hint, tone }) {
  const color = tone === "success" ? "var(--success)" : tone === "warning" ? "var(--warning)" : tone === "danger" ? "var(--danger)" : "var(--indigo)";
  return (
    <div>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
        <span style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</span>
        <span className="bold mono">{value} <span className="muted tiny">/ target {target}</span></span>
      </div>
      <div style={{ position: "relative", height: 6, background: "var(--bg-subtle)", borderRadius: 999 }}>
        <div style={{ position: "absolute", left: target + "%", top: -3, width: 1, height: 12, background: "var(--ink-3)" }} />
        <div style={{ width: value + "%", height: "100%", background: color, borderRadius: 999 }} />
      </div>
      <div className="tiny muted" style={{ marginTop: 4 }}>{hint}</div>
    </div>);

}

// -----------------------------------------------------------
// KPI Assignment (kept from original, modernized)
// -----------------------------------------------------------
function SalesKPI() {
  const [managers, setManagers] = useState_e([
  { id: 1, name: "Ryan Hou", email: "r.hou@trekko.com", kpi: { m: 220000, q: 660000, y: 2640000 }, actual: { m: 152000, q: 448000, y: 1450000 } },
  { id: 2, name: "Maria Lopez", email: "m.lopez@trekko.com", kpi: { m: 180000, q: 540000, y: 2160000 }, actual: { m: 128000, q: 382000, y: 1120000 } },
  { id: 3, name: "Hannah Briggs", email: "h.briggs@trekko.com", kpi: { m: 160000, q: 480000, y: 1920000 }, actual: { m: 114000, q: 338000, y: 980000 } },
  { id: 4, name: "Juan Salazar", email: "j.salazar@trekko.com", kpi: { m: 140000, q: 420000, y: 1680000 }, actual: { m: 98000, q: 290000, y: 840000 } }]
  );
  const [editingId, setEditingId] = useState_e(null);
  const [addManagerOpen, setAddManagerOpen] = useState_e(false);

  const saveKPI = (id, kpi) => {
    setManagers((m) => m.map((mgr) => mgr.id === id ? { ...mgr, kpi } : mgr));
    setEditingId(null);
    toast({ title: "KPI updated", tone: "success" });
  };

  const addManager = (name, email) => {
    const newId = Math.max(...managers.map((m) => m.id)) + 1;
    setManagers([...managers, { id: newId, name, email, kpi: { m: 100000, q: 300000, y: 1200000 }, actual: { m: 0, q: 0, y: 0 } }]);
    setAddManagerOpen(false);
    toast({ title: "Sales manager added", tone: "success" });
  };

  const removeManager = (id) => {
    setManagers((m) => m.filter((mgr) => mgr.id !== id));
    toast({ title: "Manager removed", tone: "danger" });
  };

  return (
    <>
      <div className="row" style={{ marginBottom: 14 }}>
        <span className="muted tiny">Assign monthly, quarterly and yearly revenue targets for each sales manager.</span>
        <span className="spacer" />
        <Button kind="primary" size="sm" icon={<Icon.Plus />} onClick={() => setAddManagerOpen(true)}>Add sales manager</Button>
      </div>

      <Card flush>
        <table className="tbl">
          <thead>
            <tr>
              <th>Sales Manager</th>
              <th>Email</th>
              <th className="num">Monthly Target</th>
              <th className="num">Quarterly Target</th>
              <th className="num">Yearly Target</th>
              <th className="num">Progress</th>
              <th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {managers.map((mgr) =>
            <tr key={mgr.id}>
                <td className="bold">{mgr.name}</td>
                <td className="mono" style={{ fontSize: 12 }}>{mgr.email}</td>
                {editingId === mgr.id ?
              <EditKPIRow mgr={mgr} onSave={saveKPI} onCancel={() => setEditingId(null)} /> :

              <>
                    <td className="num mono">€{mgr.kpi.m.toLocaleString()}</td>
                    <td className="num mono">€{mgr.kpi.q.toLocaleString()}</td>
                    <td className="num mono">€{mgr.kpi.y.toLocaleString()}</td>
                    <td className="num">
                      <div style={{ minWidth: 100 }}>
                        <ProgressBar value={Math.round(mgr.actual.m / mgr.kpi.m * 100)} color="#635bff" />
                        <div className="tiny muted" style={{ marginTop: 2 }}>{Math.round(mgr.actual.m / mgr.kpi.m * 100)}% of monthly</div>
                      </div>
                    </td>
                    <td className="col-actions">
                      <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                        <Button kind="ghost" size="sm" iconOnly icon={<Icon.Edit />} title="Edit KPI" onClick={() => setEditingId(mgr.id)} />
                        <Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} title="Remove" onClick={() => removeManager(mgr.id)} />
                      </div>
                    </td>
                  </>
              }
              </tr>
            )}
          </tbody>
        </table>
      </Card>

      <AddManagerModal open={addManagerOpen} onClose={() => setAddManagerOpen(false)} onAdd={addManager} />
    </>);

}

function EditKPIRow({ mgr, onSave, onCancel }) {
  const [m, setM] = useState_e(mgr.kpi.m);
  const [q, setQ] = useState_e(mgr.kpi.q);
  const [y, setY] = useState_e(mgr.kpi.y);
  return (
    <>
      <td className="num"><input className="input" type="number" value={m} onChange={(e) => setM(+e.target.value)} style={{ width: 120 }} /></td>
      <td className="num"><input className="input" type="number" value={q} onChange={(e) => setQ(+e.target.value)} style={{ width: 120 }} /></td>
      <td className="num"><input className="input" type="number" value={y} onChange={(e) => setY(+e.target.value)} style={{ width: 120 }} /></td>
      <td></td>
      <td className="col-actions">
        <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
          <Button kind="primary" size="sm" icon={<Icon.Check />} onClick={() => onSave(mgr.id, { m, q, y })}>Save</Button>
          <Button kind="ghost" size="sm" icon={<Icon.X />} onClick={onCancel}>Cancel</Button>
        </div>
      </td>
    </>);

}

function AddManagerModal({ open, onClose, onAdd }) {
  const [name, setName] = useState_e("");
  const [email, setEmail] = useState_e("");

  if (!open) return null;

  return (
    <Modal open onClose={onClose} title="Add sales manager"
    footer={
    <>
          <Button kind="secondary" onClick={onClose}>Cancel</Button>
          <Button kind="primary" icon={<Icon.Check />} onClick={() => {if (name && email) onAdd(name, email);}}>Add manager</Button>
        </>
    }>
      <div className="grid" style={{ gap: 14 }}>
        <Field label="Full name"><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Sophie Chen" /></Field>
        <Field label="Email"><input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="s.chen@trekko.com" /></Field>
      </div>
    </Modal>);

}

Object.assign(window, { PageSalesEnhanced });

function AssignTargetModal({ open, onClose, manager }) {
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title={`Assign target · ${manager}`} size="lg"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="primary" icon={<Icon.Check />} onClick={() => {onClose();toast({ title: "Target assigned", body: `Quarterly targets saved for ${manager}.`, tone: "success" });}}>Save targets</Button></>}>
      <div className="row" style={{ gap: 10, marginBottom: 14, background: "var(--info-bg)", padding: "10px 12px", borderRadius: 8, color: "var(--info)" }}>
        <Icon.Lock stroke="currentColor" />
        <div style={{ fontSize: 13 }}>Assigning targets is restricted to <b>Super Admin</b>. Sales managers can view their targets but cannot edit them.</div>
      </div>
      <Field label="Yearly target (€)"><input className="input" type="number" defaultValue="2640000" /></Field>
      <div style={{ height: 14 }} />
      <div className="bold" style={{ fontSize: 13, marginBottom: 8 }}>Quarterly breakdown</div>
      <div className="grid grid--4" style={{ gap: 12 }}>
        <Field label="Q1 (€)"><input className="input" type="number" defaultValue="600000" /></Field>
        <Field label="Q2 (€)"><input className="input" type="number" defaultValue="660000" /></Field>
        <Field label="Q3 (€)"><input className="input" type="number" defaultValue="720000" /></Field>
        <Field label="Q4 (€)"><input className="input" type="number" defaultValue="660000" /></Field>
      </div>
      <div className="tiny muted" style={{ marginTop: 8 }}>Monthly targets are auto-distributed within each quarter and can be fine-tuned in the KPI assignment tab.</div>
    </Modal>);

}

// -----------------------------------------------------------
// Travel Groups view (under Sales Manager)
// -----------------------------------------------------------
function SalesTravelGroups() {
  const [groupFilter, setGroupFilter] = useState_e("");
  const [groups, setGroups] = useState_e((window.MOCK && window.MOCK.TRAVEL_GROUPS) || []);
  useEffect_e(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getTravelGroups().then((rows) => { if (rows && rows.length) setGroups(rows); });
  }, []);
  const trendByGroup = groups.map((g, i) => ({
    label: g.code,
    current: Math.round(g.rappel * 12 + i * 6),
    target: Math.round(g.rappel * 12 + i * 5)
  }));

  return (
    <>
      <div className="filter-bar">
        <select className="select" value={groupFilter} onChange={(e) => setGroupFilter(e.target.value)} style={{ minWidth: 200 }}>
          <option value="">All travel groups</option>
          {groups.map((g) => <option key={g.id}>{g.name}</option>)}
        </select>
        <select className="select"><option>All managers</option><option>Ryan Hou</option><option>Maria Lopez</option><option>Hannah Briggs</option></select>
        <select className="select"><option>Last quarter</option><option>YTD</option><option>Last 12 months</option></select>
        <span className="spacer" />
        <Button kind="secondary" size="sm" icon={<Icon.Download />}>Export</Button>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Groups under management" value={groups.length.toString()} delta="+1 this Q" deltaDir="up" />
        <Metric label="Group sales (YTD)" value={"€" + groups.reduce((a, g) => a + g.usedIn * g.rappel * 4200, 0).toLocaleString()} delta="+18% YoY" deltaDir="up" />
        <Metric label="Rappel paid (YTD)" value="€184,200" delta="+12% MoM" deltaDir="up" hint="Across all groups" />
        <Metric label="Avg agencies per group" value={(groups.reduce((a, g) => a + (g.agencies?.length || 0), 0) / Math.max(1, groups.length)).toFixed(1)} hint="Healthy clustering" />
      </div>

      <Card title="Group performance · sales vs target"
      actions={<Segmented value="m" onChange={() => {}} options={[{ value: "m", label: "Month" }, { value: "q", label: "Quarter" }, { value: "y", label: "Year" }]} />}>
        <BarChart
          height={240}
          data={trendByGroup}
          valueFmt={(v) => "€" + v + "k"}
          series={[
          { key: "current", name: "Actual", color: "#635bff" },
          { key: "target", name: "Target", color: "#a78bfa" }]
          } />
        
      </Card>

      <div style={{ height: 18 }} />

      <Card title="Sales & Rappel by travel group" flush>
        <table className="tbl">
          <thead>
            <tr>
              <th>Group</th>
              <th>Code</th>
              <th className="num">Agencies</th>
              <th className="num">Sales YTD</th>
              <th className="num">Rappel %</th>
              <th className="num">Rappel earned</th>
              <th className="num">vs Target</th>
              <th>Trend</th>
              <th>Manager</th>
            </tr>
          </thead>
          <tbody>
            {groups.
            filter((g) => !groupFilter || g.name === groupFilter).
            map((g, i) => {
              const sales = g.usedIn * g.rappel * 4200;
              const earned = Math.round(sales * g.rappel / 100);
              const target = Math.round(sales * 0.95);
              const vs = Math.round((sales - target) / target * 100);
              return (
                <tr key={g.id}>
                    <td className="bold">{g.name}</td>
                    <td><Tag kind="hotel">{g.code}</Tag></td>
                    <td className="num mono">{g.agencies?.length || g.usedIn}</td>
                    <td className="num mono bold">€{sales.toLocaleString()}</td>
                    <td className="num mono">{g.rappel}%</td>
                    <td className="num mono" style={{ color: "var(--success)" }}>€{earned.toLocaleString()}</td>
                    <td className="num mono" style={{ color: vs >= 0 ? "var(--success)" : "var(--danger)" }}>{vs >= 0 ? "+" : ""}{vs}%</td>
                    <td><Sparkline values={Array.from({ length: 12 }, (_, k) => Math.max(0, g.rappel + Math.sin(i + k * 0.5) * 1.4))} color="#635bff" /></td>
                    <td><span className="user-cell"><Avatar name={["Ryan Hou", "Maria Lopez", "Hannah Briggs", "Juan Salazar"][i % 4]} size="sm" />{["Ryan Hou", "Maria Lopez", "Hannah Briggs", "Juan Salazar"][i % 4]}</span></td>
                  </tr>);

            })}
          </tbody>
        </table>
      </Card>

      <div style={{ height: 18 }} />

      <div className="grid grid--2" style={{ gap: 18 }}>
        <Card title="Top group by product mix" flush>
          <table className="tbl" style={{ fontSize: 12.5 }}>
            <thead><tr><th>Group</th><th>Hotels</th><th>Cars</th><th>Transfer</th><th>VIP</th><th>P.Tours</th></tr></thead>
            <tbody>
              {groups.slice(0, 6).map((g, i) =>
              <tr key={g.id}>
                  <td className="bold">{g.code}</td>
                  <td className="num mono">{Math.round(45 + i * 4)}%</td>
                  <td className="num mono">{Math.round(20 + i * 2)}%</td>
                  <td className="num mono">{Math.round(14 - i)}%</td>
                  <td className="num mono">{Math.round(6 + i)}%</td>
                  <td className="num mono">{Math.round(15 - i)}%</td>
                </tr>
              )}
            </tbody>
          </table>
        </Card>
        <Card title="At-risk groups" sub="Below target or declining">
          {[
          { code: "STR-UK", note: "Sales −24% MoM", tone: "danger" },
          { code: "PAC-EU", note: "Avg booking down €82", tone: "warning" },
          { code: "GLO-FR", note: "1 agency lost", tone: "warning" }].
          map((r, i) =>
          <div key={r.code} className="row" style={{ padding: "10px 0", borderTop: i ? "1px solid var(--border-hairline)" : "0", gap: 12 }}>
              <Tag kind="hotel">{r.code}</Tag>
              <div style={{ flex: 1 }}>{r.note}</div>
              <Badge tone={r.tone}>{r.tone === "danger" ? "At risk" : "Watch"}</Badge>
            </div>
          )}
        </Card>
      </div>
    </>);

}

window.SalesTravelGroups = SalesTravelGroups;