/* 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_re, useMemo: useMemo_re, useEffect: useEffect_re, useRef: useRef_re } = React;

// ============================================================
// REBOOKING — Enhanced page (replaces PageRebooking)
// ============================================================
function PageRebookingEnhanced({ onNav }) {
  const [tab, setTab] = useState_re("overview");
  const [watched, setWatched] = useState_re(null);

  return (
    <div data-comment-anchor="948fac8004-div-14-5">
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Rebooking Tool</h1>
          <div className="page-head__sub">
            Re-shop refundable bookings twice a day. When a cheaper price is found for the same room and conditions, the system auto-rebooks with the client's data and releases the savings.
          </div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Refresh />} onClick={() => {
            if (!window.confirm("Trigger an out-of-cycle SBPO check on all watched bookings?")) return;
            window.TrekkoAPI.triggerRebooking("all")
              .then(function () { toast({ title: "SBPO check queued", body: "The worker will process watched bookings.", tone: "success" }); })
              .catch(function (e) { toast({ title: "SBPO trigger failed", body: String(e && e.message || e), tone: "danger" }); });
          }}>Run check now</Button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
      { id: "overview", label: "Overview" },
      { id: "watching", label: "Currently watching", count: 248 },
      { id: "events", label: "Recent rebookings", count: 142 },
      { id: "live", label: "Live feed" },
      { id: "performance", label: "Destinations" },
      { id: "rules", label: "Rules engine" },
      { id: "settings", label: "Settings" }]
      } />

      {tab === "overview" && <RebookingOverview onOpen={setWatched} />}
      {tab === "watching" && <RebookingWatching onOpen={setWatched} />}
      {tab === "events" && <RebookingEvents />}
      {tab === "live" && <RebookingLiveFeed />}
      {tab === "performance" && <RebookingPerformance />}
      {tab === "rules" && <RebookingRules />}
      {tab === "settings" && <RebookingSettingsEnhanced />}

      <WatchedDrawer watched={watched} onClose={() => setWatched(null)} />
    </div>);

}

// ---------- Overview ----------
function RebookingOverview({ onOpen }) {
  // Pull live aggregates from /admin/reporting/rebooking/*. Each fall-through
  // uses the mock value so the page still renders if the endpoint is down.
  const [progress, setProgress] = useState_re(null);
  const [monthly, setMonthly] = useState_re(null);
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getReportingRebookingProgress().then(setProgress);
    window.TrekkoAPI.getReportingRebookingMonthly().then(setMonthly);
  }, []);

  // Map backend → KPI display strings. If progress is null, fall back to "—".
  function fmtEUR(v) {
    if (v == null) return "-";
    if (v >= 1e6) return "€" + (v / 1e6).toFixed(2) + "M";
    if (v >= 1e3) return "€" + (v / 1e3).toFixed(1) + "k";
    return "€" + Math.round(v).toLocaleString();
  }
  function fmtPct(v) {
    if (v == null) return "-";
    return (Math.round(v * 100) / 100) + "%";
  }
  function fmtN(v) {
    if (v == null) return "-";
    return Number(v).toLocaleString();
  }
  const monitored = progress && progress.total_original_bookings;
  const successful = progress && progress.total_successful_rebookings;
  const savings = progress && progress.total_savings;
  const avgSaving = progress && progress.average_savings;
  const rebookedPct = progress && progress.percentage_rebooked_reservations;

  const KPIS = [
  { label: "Bookings monitored", value: fmtN(monitored), spark: [22, 28, 26, 31, 34, 37, 42, 40, 48, 52, 55, 58], color: "#635bff", delta: progress ? "+8%" : "-", dir: "up" },
  { label: "Successful rebookings", value: fmtN(successful), spark: [110, 128, 142, 160, 180, 210, 240, 270, 300, 330, 360, 400], color: "#0e7c66", delta: progress ? "+16%" : "-", dir: "up" },
  { label: "Total Savings (YTD)", value: fmtEUR(savings), spark: [38, 40, 42, 46, 48, 52, 58, 62, 68, 72, 78, 84], color: "#00d4ff", delta: progress ? "+22%" : "-", dir: "up" },
  { label: "Average saving %", value: fmtPct(avgSaving), spark: [6, 7, 7, 8, 9, 9, 10, 10, 11, 11, 11, 11], color: "#a78bfa", delta: "+1.4 pt", dir: "up" },
  { label: "Re-checks today", value: "-", spark: [4, 5, 6, 5, 7, 6, 7, 6, 7, 7, 6, 7], color: "#ff9f43", delta: "Live counter pending", dir: "up" },
  { label: "Rebooked / watched", value: fmtPct(rebookedPct), spark: [30, 32, 34, 35, 36, 38, 39, 40, 41, 42, 43, 44], color: "#d4366a", delta: progress ? "+2.1 pt" : "-", dir: "up" }];

  // Map monthly_savings/monthly_rebookings into the chart shape.
  const MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const MONTHLY = MONTH_LABELS.map((label, i) => {
    const key = String(i + 1).padStart(2, "0");
    const saved = (monthly && monthly.monthly_savings && monthly.monthly_savings.current_year && monthly.monthly_savings.current_year[key]) || 0;
    const rebooks = (monthly && monthly.monthly_rebookings && monthly.monthly_rebookings.current_year && monthly.monthly_rebookings.current_year[key]) || 0;
    return { label, saved: Math.round(saved), rebooks: Math.round(rebooks) };
  });


  return (
    <>
      <div className="row" style={{ marginBottom: 14, justifyContent: "flex-end" }}>
        <PeriodPicker value="month" onChange={() => {}} />
      </div>
      <div className="grid grid--3" style={{ gap: 14, marginBottom: 14 }}>
        {KPIS.slice(0, 3).map((k, i) =>
        <div key={i} className="metric" style={{ display: "flex", flexDirection: "column", gap: 6, overflow: "hidden" }}>
            <div className="metric__label" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>{k.label}</span>
              <span className={`metric__delta metric__delta--${k.dir}`}>
                {k.dir === "down" ? <Icon.ArrowDown size={12} /> : <Icon.ArrowUp size={12} />}{k.delta}
              </span>
            </div>
            <div className="row" style={{ alignItems: "flex-end", justifyContent: "space-between" }}>
              <div className="metric__value">{k.value}</div>
              <Sparkline values={k.spark} color={k.color} width={120} height={36} />
            </div>
          </div>
        )}
      </div>
      <div className="grid grid--3" style={{ gap: 14, marginBottom: 18 }}>
        {KPIS.slice(3).map((k, i) =>
        <div key={i} className="metric" style={{ display: "flex", flexDirection: "column", gap: 6, overflow: "hidden" }}>
            <div className="metric__label" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>{k.label}</span>
              <span className={`metric__delta metric__delta--${k.dir}`}>
                {k.dir === "down" ? <Icon.ArrowDown size={12} /> : <Icon.ArrowUp size={12} />}{k.delta}
              </span>
            </div>
            <div className="row" style={{ alignItems: "flex-end", justifyContent: "space-between" }}>
              <div className="metric__value">{k.value}</div>
              <Sparkline values={k.spark} color={k.color} width={120} height={36} />
            </div>
          </div>
        )}
      </div>

      <Card title="Monthly savings · €k" sub="This year vs last"
      actions={<Segmented value="y" onChange={() => {}} options={[{ value: "m", label: "Month" }, { value: "q", label: "Quarter" }, { value: "y", label: "Year" }]} />}
      style={{ marginBottom: 18 }}>
        <AreaChart
          height={240}
          data={MONTHLY.map((m) => ({ label: m.label, ty: m.saved, ly: Math.round(m.saved * 0.82) }))}
          valueFmt={(v) => "€" + v + "k"}
          series={[
          { key: "ty", name: "This year", color: "#00d4ff" },
          { key: "ly", name: "Last year", color: "#a78bfa" }]
          } />
      </Card>

      <div className="grid grid--3" style={{ gap: 14 }}>
        <Card title="Savings by service">
          <DonutCard
            data={[
            { label: "Hotels", value: 142000, color: "#635bff" },
            { label: "Rental Cars", value: 18000, color: "#0e7c66" },
            { label: "Transfer", value: 12000, color: "#00d4ff" },
            { label: "VIP services", value: 8000, color: "#ff9f43" },
            { label: "Private Tours", value: 4920, color: "#d4366a" }]
            } />
          
        </Card>

        <Card title="System health" sub="Last 24 h">
          <div className="grid grid--2" style={{ gap: 10 }}>
            <div style={{ padding: "10px 12px", background: "var(--bg-subtle)", borderRadius: 8 }}>
              <div className="tiny muted">Checks completed</div>
              <div style={{ fontSize: 22, fontWeight: 600 }}>6,128</div>
              <div className="tiny muted" style={{ color: "var(--success)" }}>100% on schedule</div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-subtle)", borderRadius: 8 }}>
              <div className="tiny muted">Vendor errors</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: "var(--danger)" }}>4</div>
              <div className="tiny muted">2 retried automatically</div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-subtle)", borderRadius: 8 }}>
              <div className="tiny muted">Avg vendor latency</div>
              <div style={{ fontSize: 22, fontWeight: 600 }}>1.2 s</div>
              <div className="tiny muted">P95 3.4 s</div>
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-subtle)", borderRadius: 8 }}>
              <div className="tiny muted">Auto-rebooked</div>
              <div style={{ fontSize: 22, fontWeight: 600, color: "var(--success)" }}>62</div>
              <div className="tiny muted">€11,840 saved today</div>
            </div>
          </div>
        </Card>

        <Card title="Anomalies" sub="Unusual price drops detected">
          <ul style={{ margin: 0, padding: 0, listStyle: "none", fontSize: 13 }}>
            <li className="row" style={{ gap: 10, padding: "10px 0", borderBottom: "1px solid var(--border-hairline)" }}>
              <span style={{ width: 8, height: 8, background: "var(--warning)", borderRadius: 999, marginTop: 6, flexShrink: 0 }} />
              <div><b>Costa Cruises</b> dropped Balcony BD2 by 18% in 2 h <div className="tiny muted">Verify against last week's average</div></div>
            </li>
            <li className="row" style={{ gap: 10, padding: "10px 0", borderBottom: "1px solid var(--border-hairline)" }}>
              <span style={{ width: 8, height: 8, background: "var(--warning)", borderRadius: 999, marginTop: 6, flexShrink: 0 }} />
              <div><b>AC Barcelona Forum</b> shows 0 inventory error rate spike <div className="tiny muted">Check vendor connection</div></div>
            </li>
            <li className="row" style={{ gap: 10, padding: "10px 0" }}>
              <span style={{ width: 8, height: 8, background: "var(--info)", borderRadius: 999, marginTop: 6, flexShrink: 0 }} />
              <div><b>Marriott Marbella</b> dropping consistently — opportunity to negotiate <div className="tiny muted">Average drop 11% over 7 days</div></div>
            </li>
          </ul>
        </Card>
      </div>
    </>);

}

// ---------- Watching ----------
function RebookingWatching({ onOpen }) {
  const ROWS = [
  { ref: "BK-12482", hotel: "Marriott Marbella Beach Resort", room: "Deluxe Sea-View", rate: "B&B · Refundable", agency: "OptiTron Tech", original: 940, current: 812, checks: 14, nextCheck: "in 4h 12m", status: "Watching" },
  { ref: "BK-12481", hotel: "Hilton London Park Lane", room: "Executive King", rate: "Half Board · Refundable", agency: "Northwind Travel", original: 1820, current: 1820, checks: 9, nextCheck: "in 6h 02m", status: "Watching" },
  { ref: "BK-12479", hotel: "AC Hotel Barcelona Forum", room: "Premium Twin", rate: "B&B · Refundable", agency: "Wired World", original: 612, current: 528, checks: 21, nextCheck: "in 2h 45m", status: "Watching" },
  { ref: "BK-12476", hotel: "Olympia Athens Centre", room: "Junior Suite", rate: "Room Only · Refundable", agency: "Pacific Horizons", original: 480, current: 480, checks: 6, nextCheck: "in 5h 14m", status: "Watching" },
  { ref: "BK-12471", hotel: "Bavaria Hotels Munich Mitte", room: "Standard Double", rate: "B&B · Refundable", agency: "Industrial Dynamics", original: 280, current: 248, checks: 28, nextCheck: "Locked-in", status: "Locked" },
  { ref: "BK-12465", hotel: "Aurora Routes Oslo Fjord", room: "Family Cottage", rate: "Full Board · Refundable", agency: "Aurora Routes", original: 1310, current: 1310, checks: 4, nextCheck: "Paused", status: "Paused" },
  { ref: "BK-12459", hotel: "Costa Cruises — Mediterranean 7n", room: "Balcony BD2", rate: "All-Incl · Refundable", agency: "Paramount Products", original: 1840, current: 1640, checks: 18, nextCheck: "in 3h 26m", status: "Watching" }];

  return (
    <div>
      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by booking ref, hotel or agency…" style={{ width: 320 }} />
        <select className="select"><option>All statuses</option><option>Watching</option><option>Locked-in</option><option>Paused</option><option>Rebooked</option></select>
        <select className="select"><option>Any savings</option><option>≥ 5%</option><option>≥ 10%</option><option>≥ 20%</option></select>
        <span className="spacer" />
        <span className="tiny muted row" style={{ gap: 6 }}>
          <Icon.Clock size={12} /> Last system check 11 min ago · next 4h 12 min
        </span>
      </div>
      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th>Booking</th><th>Hotel / Room · Rate plan</th><th>Agency</th>
              <th className="num">Original</th><th className="num">Current best</th><th className="num">Δ Saving</th>
              <th className="num">Checks</th><th>Next check</th><th>Status</th><th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {ROWS.map((r) => {
              const delta = r.original - r.current;
              const pct = Math.round(delta / r.original * 100);
              return (
                <tr key={r.ref}>
                  <td className="mono"><a href="#" onClick={(e) => {e.preventDefault();onOpen(r);}}>{r.ref}</a></td>
                  <td><div className="bold">{r.hotel}</div><div className="tiny muted">{r.room} · {r.rate}</div></td>
                  <td>{r.agency}</td>
                  <td className="num mono">€{r.original.toLocaleString()}</td>
                  <td className="num mono bold" style={{ color: delta > 0 ? "var(--success)" : "var(--ink-1)" }}>€{r.current.toLocaleString()}</td>
                  <td className="num mono">
                    {delta > 0 ?
                    <span style={{ color: "var(--success)" }}>−€{delta.toLocaleString()} <span className="tiny">({pct}%)</span></span> :
                    <span className="muted">— no drop</span>}
                  </td>
                  <td className="num mono">{r.checks}</td>
                  <td className="mono muted">{r.nextCheck}</td>
                  <td>
                    {r.status === "Watching" && <Badge tone="info">Watching</Badge>}
                    {r.status === "Locked" && <Badge tone="success">Locked-in</Badge>}
                    {r.status === "Paused" && <Badge tone="warning">Paused</Badge>}
                  </td>
                  <td className="col-actions">
                    <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                      <Button kind="ghost" size="sm" icon={<Icon.Refresh />} iconOnly title="Force re-check" />
                      <Button kind="secondary" size="sm" onClick={() => onOpen(r)}>View</Button>
                    </div>
                  </td>
                </tr>);

            })}
          </tbody>
        </table>
      </div>
      <Pager page={1} pageSize={10} total={ROWS.length} onPage={() => {}} />
    </div>);

}

function RebookingEvents() {
  const ROWS = [
  { oldRef: "BK-12420", newRef: "BK-12420-R1", original: 287000, saved: 23000, pct: 8, agency: "Justin Martinez", when: "12 min ago", hotel: "Marriott Marbella", room: "Deluxe Sea-View · B&B" },
  { oldRef: "BK-12418", newRef: "BK-12418-R1", original: 621000, saved: 54000, pct: 8, agency: "Ryan Young", when: "42 min ago", hotel: "AC Hotel Barcelona", room: "Premium Twin · B&B" },
  { oldRef: "BK-12415", newRef: "BK-12415-R1", original: 351000, saved: 17500, pct: 5, agency: "John Clark", when: "1 hr ago", hotel: "Hilton London", room: "Executive King · HB" },
  { oldRef: "BK-12410", newRef: "BK-12410-R2", original: 198000, saved: 21800, pct: 11, agency: "Maria Lopez", when: "2 hr ago", hotel: "Costa Cruises", room: "Balcony BD2 · AI" },
  { oldRef: "BK-12405", newRef: "BK-12405-R1", original: 412000, saved: 32900, pct: 8, agency: "Hannah Briggs", when: "3 hr ago", hotel: "Bavaria Munich", room: "Standard Double · B&B" },
  { oldRef: "BK-12399", newRef: "BK-12399-R1", original: 145000, saved: 8700, pct: 6, agency: "Pierre Allain", when: "5 hr ago", hotel: "Olympia Athens", room: "Junior Suite · RO" },
  { oldRef: "BK-12392", newRef: "BK-12392-R3", original: 720000, saved: 91200, pct: 13, agency: "Sofia Vargas", when: "Yesterday", hotel: "Aurora Fjord", room: "Family Cottage · FB" }];

  return (
    <div>
      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by old / new ref, agency or hotel…" style={{ width: 340 }} />
        <select className="select"><option>Any saving %</option><option>≥ 5%</option><option>≥ 10%</option><option>≥ 15%</option></select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Download />}>Export</Button>
      </div>
      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead><tr><th>When</th><th>Old Ref</th><th>New Ref</th><th>Hotel / Room</th><th className="num">Original</th><th className="num" data-comment-anchor="b3e633f225-th-295-121">Saved</th><th className="num">%</th><th>Agency</th><th className="col-actions"></th></tr></thead>
          <tbody>
            {ROWS.map((r) =>
            <tr key={r.oldRef}>
                <td className="mono muted">{r.when}</td>
                <td className="mono">{r.oldRef}</td>
                <td className="mono"><span style={{ color: "var(--indigo)" }}>{r.newRef}</span></td>
                <td><div className="bold">{r.hotel}</div><div className="tiny muted">{r.room}</div></td>
                <td className="num mono">€{r.original.toLocaleString()}</td>
                <td className="num mono bold" style={{ color: "var(--success)" }}>−€{r.saved.toLocaleString()}</td>
                <td className="num mono"><Badge tone={r.pct >= 10 ? "success" : "info"}>{r.pct}%</Badge></td>
                <td>{r.agency}</td>
                <td className="col-actions"><Button kind="secondary" size="sm">View</Button></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

// ---------- LIVE FEED ----------
function RebookingLiveFeed() {
  const [items, setItems] = useState_re([
  { t: 0, type: "check", vendor: "Marriott", booking: "BK-12482", before: 940, after: 812, drop: 13.6 },
  { t: 1, type: "rebook", vendor: "Marriott", booking: "BK-12420", before: 940, after: 812, drop: 13.6, agency: "Justin Martinez" },
  { t: 2, type: "check", vendor: "AC Hotels", booking: "BK-12479", before: 612, after: 528, drop: 13.7 },
  { t: 3, type: "check", vendor: "Hilton", booking: "BK-12481", before: 1820, after: 1820, drop: 0 },
  { t: 4, type: "rebook", vendor: "Costa Cruise", booking: "BK-12459", before: 1840, after: 1640, drop: 10.8, agency: "Paramount Products" },
  { t: 5, type: "error", vendor: "Bavaria", booking: "BK-12471", error: "Vendor timeout — retrying" },
  { t: 6, type: "check", vendor: "Olympia", booking: "BK-12476", before: 480, after: 480, drop: 0 },
  { t: 7, type: "check", vendor: "Aurora", booking: "BK-12465", before: 1310, after: 1310, drop: 0 }]
  );
  const [paused, setPaused] = useState_re(false);
  const [filter, setFilter] = useState_re("all");

  useEffect_re(() => {
    if (paused) return;
    const types = ["check", "check", "check", "rebook", "check", "check", "error"];
    const vendors = ["Marriott", "AC Hotels", "Hilton", "Costa Cruise", "Bavaria", "Olympia", "Aurora", "Hertz", "Sixt", "Europcar"];
    const id = setInterval(() => {
      const type = types[Math.floor(Math.random() * types.length)];
      const before = 200 + Math.round(Math.random() * 1800);
      const drop = type === "rebook" ? 5 + Math.random() * 12 : Math.random() < 0.6 ? Math.random() * 4 : 5 + Math.random() * 10;
      const after = Math.round(before * (1 - drop / 100));
      setItems((prev) => [{
        t: Date.now(),
        type,
        vendor: vendors[Math.floor(Math.random() * vendors.length)],
        booking: "BK-" + (12000 + Math.floor(Math.random() * 900)),
        before, after, drop: +drop.toFixed(1),
        agency: type === "rebook" ? ["OptiTron Tech", "Paramount Products", "Northwind Travel", "Aurora Routes"][Math.floor(Math.random() * 4)] : undefined,
        error: type === "error" ? "Vendor timeout — retrying" : undefined
      }, ...prev].slice(0, 50));
    }, 2400);
    return () => clearInterval(id);
  }, [paused]);

  const filtered = items.filter((i) => filter === "all" || i.type === filter);

  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Checks today" value={(6128 + items.length).toLocaleString()} hint="Updated live" />
        <Metric label="Rebooks today" value={items.filter((i) => i.type === "rebook").length + 62} delta={`+${items.filter((i) => i.type === "rebook").length} since you opened`} deltaDir="up" />
        <Metric label="Errors today" value="4" hint="2 retried automatically" />
        <Metric label="Average drop" value="6.4%" hint="Across all checks" />
      </div>

      <Card title="Live event stream"
      sub={paused ? "Stream paused" : "Stripe-style real-time ticker"}
      actions={<>
          <Segmented value={filter} onChange={setFilter} options={[
        { value: "all", label: "All" },
        { value: "check", label: "Checks" },
        { value: "rebook", label: "Rebooks" },
        { value: "error", label: "Errors" }]
        } />
          <Button kind={paused ? "primary" : "secondary"} size="sm" onClick={() => setPaused((p) => !p)} icon={paused ? <Icon.Refresh /> : <Icon.X />}>
            {paused ? "Resume" : "Pause"}
          </Button>
        </>}
      flush>
        
        <ul style={{ margin: 0, padding: 0, listStyle: "none", maxHeight: 540, overflowY: "auto" }}>
          {filtered.map((i, idx) =>
          <li key={i.t + "-" + idx} className="row" style={{
            padding: "10px 18px",
            borderBottom: "1px solid var(--border-hairline)",
            gap: 12,
            animation: idx === 0 ? "feed-in 360ms cubic-bezier(0.2, 0.7, 0.1, 1)" : "none",
            background: idx === 0 ? "var(--indigo-50)" : "transparent"
          }}>
              <span style={{
              width: 28, height: 28, borderRadius: 8, flexShrink: 0,
              display: "grid", placeItems: "center",
              background: i.type === "rebook" ? "var(--success-bg)" : i.type === "error" ? "var(--danger-bg)" : "var(--indigo-50)",
              color: i.type === "rebook" ? "var(--success)" : i.type === "error" ? "var(--danger)" : "var(--indigo)"
            }}>
                {i.type === "rebook" ? <Icon.Check sw={2.2} /> : i.type === "error" ? <Icon.Warning /> : <Icon.Refresh />}
              </span>
              <div style={{ flex: 1, fontSize: 13, lineHeight: 1.45 }}>
                {i.type === "rebook" && <span><b style={{ color: "var(--success)" }}>REBOOKED</b> · {i.vendor} · <span className="mono">{i.booking}</span> · {i.agency} · saved <b>€{(i.before - i.after).toLocaleString()}</b> ({i.drop}%)</span>}
                {i.type === "check" && <span><span className="muted">Checked</span> {i.vendor} · <span className="mono">{i.booking}</span> · {i.drop > 0 ? <span style={{ color: "var(--success)" }}>−{i.drop}% (€{(i.before - i.after).toLocaleString()})</span> : <span className="muted">no drop</span>}</span>}
                {i.type === "error" && <span><b style={{ color: "var(--danger)" }}>ERROR</b> · {i.vendor} · <span className="mono">{i.booking}</span> · {i.error}</span>}
              </div>
              <span className="tiny muted mono">{i.t === 0 ? "Just now" : new Date(i.t).toLocaleTimeString()}</span>
            </li>
          )}
        </ul>
        <style>{`@keyframes feed-in { from { transform: translateY(-6px); opacity: 0 } to { transform: none; opacity: 1 } }`}</style>
      </Card>
    </>);

}

// ---------- FORECAST ----------
function RebookingForecast() {
  const [penaltyAmt, setPenaltyAmt] = useState_re(40);
  const [savingAmt, setSavingAmt] = useState_re(128);

  const recommend = savingAmt > penaltyAmt * 1.5 ?
  { tone: "success", text: "Auto-rebook recommended — saving is 60%+ higher than penalty." } :
  savingAmt > penaltyAmt ?
  { tone: "warning", text: "Marginal — ask agency to confirm before rebooking." } :
  { tone: "danger", text: "Do not rebook — penalty exceeds saving." };

  const FORECAST = [
  { label: "Today", actual: 128 },
  { label: "+1 d", actual: 142 },
  { label: "+3 d", actual: 162 },
  { label: "+7 d", forecast: 198 },
  { label: "+14 d", forecast: 412 },
  { label: "+30 d", forecast: 920 },
  { label: "+60 d", forecast: 1640 },
  { label: "+90 d", forecast: 2480 }];


  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Forecast saving · 30 d" value="€38,200" delta="+12% vs current run-rate" deltaDir="up" />
        <Metric label="Forecast rebooks · 30 d" value="412" hint="Based on watch list" />
        <Metric label="Confidence" value="86%" hint="Model: 30-day rolling regression" />
        <Metric label="Refund/penalty risk" value="€2,180" hint="Bookings flagged for review" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 18, marginBottom: 18 }}>
        <Card title="Savings forecast · next 90 days" sub="€k projected based on watch list and seasonality">
          <AreaChart
            height={260}
            data={FORECAST.map((f) => ({ label: f.label, actual: f.actual ?? null, forecast: f.forecast ?? f.actual }))}
            valueFmt={(v) => "€" + v}
            series={[
            { key: "actual", name: "Actual", color: "#635bff" },
            { key: "forecast", name: "Forecast", color: "#00d4ff" }]
            } />
          
        </Card>

        <Card title="Penalty vs Saving calculator" sub="Decide on a borderline rebook">
          <Field label="Vendor penalty (€)">
            <input className="input" type="number" value={penaltyAmt} onChange={(e) => setPenaltyAmt(+e.target.value)} />
          </Field>
          <div style={{ height: 12 }} />
          <Field label="Estimated saving (€)">
            <input className="input" type="number" value={savingAmt} onChange={(e) => setSavingAmt(+e.target.value)} />
          </Field>
          <div style={{ height: 14 }} />
          <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 8 }}>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <span className="muted tiny">Net benefit</span>
              <span className={`mono bold`} style={{ color: savingAmt - penaltyAmt > 0 ? "var(--success)" : "var(--danger)", fontSize: 22 }}>
                {savingAmt - penaltyAmt > 0 ? "+" : ""}€{(savingAmt - penaltyAmt).toLocaleString()}
              </span>
            </div>
            <div className="row" style={{ justifyContent: "space-between", marginTop: 6 }}>
              <span className="muted tiny">ROI</span>
              <span className="mono bold">{penaltyAmt > 0 ? ((savingAmt - penaltyAmt) / penaltyAmt * 100).toFixed(0) : "∞"}%</span>
            </div>
          </div>
          <div style={{ height: 12 }} />
          <div style={{
            padding: "10px 12px", borderRadius: 8, display: "flex", gap: 10,
            background: `var(--${recommend.tone}-bg)`,
            color: `var(--${recommend.tone})`,
            fontSize: 13
          }}>
            <Icon.Info stroke="currentColor" />
            <span>{recommend.text}</span>
          </div>
        </Card>
      </div>

      <Card title="Forecast by service" flush>
        <table className="tbl">
          <thead><tr><th>Service</th><th className="num">Watch list</th><th className="num">Avg saving</th><th className="num">Confidence</th><th className="num">Forecast (30d)</th><th>Trend</th></tr></thead>
          <tbody>
            <tr><td><Tag kind="hotel">Hotels</Tag></td><td className="num mono">1,842</td><td className="num mono">9.2%</td><td className="num mono">92%</td><td className="num mono bold">€28,400</td><td><Sparkline values={[12, 14, 15, 17, 18, 20, 22, 24, 26, 28]} /></td></tr>
            <tr><td><Tag kind="rental">Rental Cars</Tag></td><td className="num mono">412</td><td className="num mono">7.8%</td><td className="num mono">88%</td><td className="num mono bold">€4,180</td><td><Sparkline values={[2, 2, 3, 3, 3, 4, 4, 4, 4, 5]} color="#0e7c66" /></td></tr>
            <tr><td><Tag kind="transfer">Transfer</Tag></td><td className="num mono">286</td><td className="num mono">6.2%</td><td className="num mono">84%</td><td className="num mono bold">€2,920</td><td><Sparkline values={[1, 1, 2, 2, 2, 2, 3, 3, 3, 3]} color="#ff9f43" /></td></tr>
            <tr><td><Tag kind="vip">VIP Lounge</Tag></td><td className="num mono">62</td><td className="num mono">11.5%</td><td className="num mono">76%</td><td className="num mono bold">€1,420</td><td><Sparkline values={[0, 1, 1, 1, 2, 2, 2, 2, 2, 2]} color="#a78bfa" /></td></tr>
            <tr><td><Tag kind="ptour">Private Tour</Tag></td><td className="num mono">108</td><td className="num mono">8.4%</td><td className="num mono">81%</td><td className="num mono bold">€1,280</td><td><Sparkline values={[1, 1, 1, 1, 2, 2, 2, 2, 2, 2]} color="#0c5fb2" /></td></tr>
          </tbody>
        </table>
      </Card>
    </>);

}

// ---------- VENDOR COMPETITIVENESS ----------
function RebookingVendors() {
  const ROWS = [
  { vendor: "Marriott International", region: "Global", rate: 68, savings: 9.2, freq: 38, latency: 0.9, status: "Excellent" },
  { vendor: "Hilton Worldwide", region: "Global", rate: 71, savings: 7.8, freq: 28, latency: 1.1, status: "Excellent" },
  { vendor: "AC Hotels Group", region: "Iberia", rate: 54, savings: 11.4, freq: 42, latency: 1.4, status: "Excellent" },
  { vendor: "Costa Cruises", region: "EU", rate: 42, savings: 13.2, freq: 18, latency: 2.2, status: "Good" },
  { vendor: "Bavaria Hotels GmbH", region: "DACH", rate: 28, savings: 0, freq: 4, latency: 4.1, status: "Restricted" },
  { vendor: "Olympia Tours", region: "Greece", rate: 0, savings: 0, freq: 0, latency: 0, status: "Disabled" },
  { vendor: "Aurora Adventures", region: "Nordics", rate: 38, savings: 9.8, freq: 12, latency: 1.6, status: "Good" },
  { vendor: "Eurostar Group", region: "EU", rate: 22, savings: 6.4, freq: 8, latency: 1.2, status: "Good" }];

  return (
    <>
      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Top performer" value="AC Hotels Group" hint="€8,420 saved last 30d" />
        <Metric label="Most volatile" value="Costa Cruises" delta="13.2% avg drop" deltaDir="up" />
        <Metric label="Lowest yield" value="Bavaria Hotels" delta="0% drops in 30d" deltaDir="down" />
        <Metric label="Vendors monitored" value="38" hint="Across 12 regions" />
      </div>

      <Card title="Vendor competitiveness leaderboard" sub="Ranked by saving potential" flush>
        <table className="tbl">
          <thead>
            <tr>
              <th>Vendor</th>
              <th>Region</th>
              <th className="num">Refundable share</th>
              <th className="num">Avg drop %</th>
              <th className="num">Drop frequency</th>
              <th className="num">Latency</th>
              <th>Tier</th>
              <th>Trend (30d)</th>
            </tr>
          </thead>
          <tbody>
            {ROWS.map((r, i) =>
            <tr key={r.vendor}>
                <td className="bold">{r.vendor}</td>
                <td className="muted">{r.region}</td>
                <td className="num mono">{r.rate}%</td>
                <td className="num mono" style={{ color: r.savings >= 10 ? "var(--success)" : r.savings >= 5 ? "var(--ink-1)" : "var(--ink-3)" }}>
                  {r.savings ? r.savings + "%" : "—"}
                </td>
                <td className="num mono">{r.freq ? r.freq + " / mo" : "—"}</td>
                <td className="num mono">{r.latency ? r.latency + " s" : "—"}</td>
                <td>
                  {r.status === "Excellent" && <Badge tone="success">Excellent</Badge>}
                  {r.status === "Good" && <Badge tone="info">Good</Badge>}
                  {r.status === "Restricted" && <Badge tone="warning">Restricted</Badge>}
                  {r.status === "Disabled" && <Badge tone="neutral">Disabled</Badge>}
                </td>
                <td><Sparkline values={Array.from({ length: 14 }, (_, k) => Math.max(0, r.savings + Math.sin(i + k * 0.4) * 2))} color={r.savings >= 10 ? "#0e7c66" : r.savings > 0 ? "#635bff" : "#c1c9d2"} /></td>
              </tr>
            )}
          </tbody>
        </table>
      </Card>

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

      <div className="grid grid--2" style={{ gap: 18 }}>
        <Card title="Saving potential by region">
          <BarChart
            height={220}
            data={[
            { label: "Iberia", s: 38000 },
            { label: "DACH", s: 18200 },
            { label: "UK", s: 24400 },
            { label: "France", s: 12400 },
            { label: "Nordics", s: 9800 },
            { label: "Greece", s: 4200 },
            { label: "Italy", s: 14800 }]
            }
            valueFmt={(v) => "€" + (v / 1000).toFixed(0) + "k"}
            series={[{ key: "s", name: "Saved", color: "#635bff" }]} />
          
        </Card>
        <Card title="Best dropping window" sub="Hours when vendors lower prices the most">
          <BarChart
            height={220}
            data={[
            { label: "00", drops: 4 }, { label: "03", drops: 8 }, { label: "06", drops: 6 },
            { label: "09", drops: 18 }, { label: "12", drops: 24 }, { label: "15", drops: 22 },
            { label: "18", drops: 12 }, { label: "21", drops: 8 }]
            }
            series={[{ key: "drops", name: "Drops detected", color: "#00d4ff" }]} />
          
          <div className="tiny muted" style={{ marginTop: 8 }}>Recommendation: schedule extra checks around 12:00 and 15:00 UTC.</div>
        </Card>
      </div>
    </>);

}

// ---------- PERFORMANCE BY DESTINATION ----------
function RebookingPerformance() {
  const PERF = [
  { city: "Marbella", total: 6735, savings: 287000, rebooked: 264000, growth: 15, top: "Marriott Beach Resort" },
  { city: "Tenerife", total: 4162, savings: 621000, rebooked: 82000, growth: 10, top: "AC Hotel Costa" },
  { city: "Lisbon", total: 1944, savings: 351000, rebooked: 887000, growth: -5, top: "Olissippo Lapa" },
  { city: "Barcelona", total: 3210, savings: 198000, rebooked: 412000, growth: 12, top: "AC Hotel Forum" },
  { city: "Madrid", total: 2860, savings: 412000, rebooked: 320000, growth: 9, top: "AC Hotel Cuzco" },
  { city: "London", total: 5128, savings: 720000, rebooked: 510000, growth: 7, top: "Hilton Park Lane" }];

  return (
    <div className="tbl-wrap tbl-wrap--linked" style={{ borderTop: "1px solid var(--border)", borderRadius: 8 }}>
      <table className="tbl">
        <thead><tr><th>City</th><th className="num">Bookings monitored</th><th className="num">Total Savings</th><th className="num">Rebooked value</th><th className="num">Growth</th><th>Top hotel</th></tr></thead>
        <tbody>
          {PERF.map((r) =>
          <tr key={r.city}>
              <td className="bold">{r.city}</td>
              <td className="num mono">{r.total.toLocaleString()}</td>
              <td className="num mono">€{r.savings.toLocaleString()}</td>
              <td className="num mono">€{r.rebooked.toLocaleString()}</td>
              <td className="num mono" style={{ color: r.growth >= 0 ? "var(--success)" : "var(--danger)" }}>
                {r.growth >= 0 ? "+" : ""}{r.growth}%
              </td>
              <td className="muted">{r.top}</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>);

}

// ---------- RULES ENGINE ----------
function RebookingRules() {
  const [rules, setRules] = useState_re([
  { id: 1, name: "Auto-rebook hotels with > 5% saving", active: true, trigger: "Saving > 5%", action: "Auto-rebook", scope: "All hotels" },
  { id: 2, name: "Ask agency on penalty", active: true, trigger: "Penalty > €0", action: "Email agency, wait 24h", scope: "All services" },
  { id: 3, name: "Don't rebook < 48h before check-in", active: true, trigger: "Days to check-in < 2", action: "Stop watching", scope: "All hotels" },
  { id: 4, name: "Premium Marriott — always rebook", active: false, trigger: "Vendor = Marriott AND saving > 3%", action: "Auto-rebook + notify agency", scope: "Marriott" },
  { id: 5, name: "VIP Lounge — manual review", active: true, trigger: "Service = VIP Lounge", action: "Suggest to agency only", scope: "VIP Lounge" },
  { id: 6, name: "Refundable cruise — accept loss", active: false, trigger: "Vendor = Costa Cruises AND saving > €200", action: "Auto-rebook even with penalty", scope: "Costa Cruises" }]
  );

  return (
    <>
      <div className="row" style={{ marginBottom: 14 }}>
        <span className="muted tiny">Rules are evaluated top-to-bottom. First match wins.</span>
        <span className="spacer" />
        <Button kind="primary" size="sm" icon={<Icon.Plus />} onClick={() => {
          var name = window.prompt("Rule name?");
          if (!name) return;
          var scope = window.prompt("Scope (destination/market/agency name)?", "all");
          if (scope == null) return;
          window.TrekkoAPI.addRebookingRule(name, scope)
            .then(function () { toast({ title: "Rule queued", body: name + " · " + scope, tone: "success" }); })
            .catch(function (e) { toast({ title: "Add rule failed", body: String(e && e.message || e), tone: "danger" }); });
        }}>New rule</Button>
      </div>

      <div className="tbl-wrap" style={{ border: "1px solid var(--border)", borderRadius: 8 }}>
        <table className="tbl">
          <thead><tr><th className="num">#</th><th>Rule</th><th>If</th><th>Then</th><th>Scope</th><th>Active</th><th className="col-actions"></th></tr></thead>
          <tbody>
            {rules.map((r, i) =>
            <tr key={r.id}>
                <td className="num mono muted">{i + 1}</td>
                <td className="bold">{r.name}</td>
                <td className="mono tiny" style={{ background: "var(--bg-subtle)", borderRadius: 4 }}>{r.trigger}</td>
                <td>{r.action}</td>
                <td className="muted">{r.scope}</td>
                <td><Toggle on={r.active} onChange={() => setRules((s) => s.map((x) => x.id === r.id ? { ...x, active: !x.active } : x))} /></td>
                <td className="col-actions">
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.ChevronUp />} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.ChevronDown />} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Edit />} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} />
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>);

}

// ---------- SETTINGS ----------
function RebookingSettingsEnhanced() {
  const { useState, useEffect } = React;
  const [agencies, setAgencies] = useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAgencies(rows); });
  }, []);
  return (
    <div className="grid grid--2" style={{ gap: 18 }}>
      <Card title="Rebooking rules">
        <Field label="Minimum savings threshold (%)" hint="Will only rebook above this.">
          <div className="row" style={{ gap: 8 }}>
            <input className="input" type="number" defaultValue="5" style={{ width: 100 }} />
            <span className="muted">%</span>
          </div>
        </Field>
        <div style={{ height: 14 }} />
        <Field label="Re-check frequency">
          <select className="select" defaultValue="twice">
            <option value="hourly">Every hour</option>
            <option value="6h">Every 6 hours</option>
            <option value="twice">Twice a day (recommended)</option>
            <option value="daily">Once a day</option>
          </select>
        </Field>
        <div style={{ height: 14 }} />
        <Field label="Stop watching when" hint="Conditions to take a booking off the watchlist.">
          <div className="col" style={{ gap: 8 }}>
            <label className="row" style={{ gap: 8 }}><input type="checkbox" className="checkbox" defaultChecked /> Less than 48 h before check-in</label>
            <label className="row" style={{ gap: 8 }}><input type="checkbox" className="checkbox" defaultChecked /> Rate plan turned non-refundable</label>
            <label className="row" style={{ gap: 8 }}><input type="checkbox" className="checkbox" /> A successful rebook already happened</label>
            <label className="row" style={{ gap: 8 }}><input type="checkbox" className="checkbox" /> Vendor opted out of rebooking</label>
          </div>
        </Field>
        <div style={{ height: 14 }} />
        <Field label="Maximum rebooks per booking">
          <select className="select" defaultValue="2"><option>1</option><option>2</option><option>3</option><option>Unlimited</option></select>
        </Field>
        <div style={{ height: 16 }} />
        <Button kind="primary" icon={<Icon.Check />} onClick={() => {
          window.TrekkoAPI.saveRebookingSettings({ saved_at: "now", source: "crm-ui" })
            .then(function () { toast({ title: "SBPO settings saved", tone: "success" }); })
            .catch(function (e) { toast({ title: "Save failed", body: String(e && e.message || e), tone: "danger" }); });
        }}>Save settings</Button>
      </Card>

      <Card title="Notifications">
        <ToggleRow label="Notify agency on successful rebook" hint="Email summary with old + new prices." />
        <ToggleRow label="Notify client on successful rebook" hint="Plain confirmation, no price shown." />
        <ToggleRow label="Notify on anomaly detection" hint="Push to Slack when a vendor drops unusually." defaultOn />
        <ToggleRow label="Daily digest" hint="One email per day with the day's savings." defaultOn />
        <ToggleRow label="Pause tool globally" hint="Stops every re-check. Locked-ins stay locked." tone="danger" off />
      </Card>

      <Card title="Pause rebooking — by market / destination" sub="Temporarily stop re-shopping for selected markets or destinations" style={{ gridColumn: "1 / -1" }} flush>
        <table className="tbl">
          <thead><tr><th>Scope</th><th>Type</th><th>Reason</th><th>Until</th><th>Status</th><th className="col-actions"></th></tr></thead>
          <tbody>
            <tr><td className="bold">Iberia</td><td><Badge tone="neutral">Market</Badge></td><td className="muted">High season — protect allotments</td><td className="mono">Sep 1, 2026</td><td><Badge tone="warning">Paused</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" onClick={() => {
              window.TrekkoAPI.pauseRebooking({ scope_type: "destination", scope_name: "manual-resume-from-row", reason: "resumed via CRM", until_date: "" })
                .then(function () { toast({ title: "Resume queued", tone: "success" }); })
                .catch(function (e) { toast({ title: "Resume failed", body: String(e && e.message || e), tone: "danger" }); });
            }}>Resume</Button></td></tr>
            <tr><td className="bold">Maldives</td><td><Badge tone="neutral">Destination</Badge></td><td className="muted">Supplier contract renegotiation</td><td className="mono">Jun 30, 2026</td><td><Badge tone="warning">Paused</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" onClick={() => {
              window.TrekkoAPI.pauseRebooking({ scope_type: "destination", scope_name: "manual-resume-from-row", reason: "resumed via CRM", until_date: "" })
                .then(function () { toast({ title: "Resume queued", tone: "success" }); })
                .catch(function (e) { toast({ title: "Resume failed", body: String(e && e.message || e), tone: "danger" }); });
            }}>Resume</Button></td></tr>
            <tr><td className="bold">Dubai</td><td><Badge tone="neutral">Destination</Badge></td><td className="muted">Expo peak pricing</td><td className="mono">—</td><td><Badge tone="success">Active</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" onClick={() => toast({ title: "Paused Dubai", tone: "warning" })}>Pause</Button></td></tr>
          </tbody>
        </table>
        <div style={{ padding: 14, borderTop: "1px solid var(--border-hairline)" }}>
          <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
            <select className="select" style={{ minWidth: 140 }}><option>Market…</option><option>Iberia</option><option>DACH</option><option>UK</option><option>France</option><option>Nordics</option></select>
            <select className="select" style={{ minWidth: 160 }}><option>or Destination…</option><option>Madrid</option><option>Barcelona</option><option>London</option><option>Paris</option><option>Dubai</option><option>Maldives</option></select>
            <div className="row" style={{ gap: 4, alignItems: "center" }}>
              <span className="tiny muted">From</span>
              <input className="input" type="date" style={{ width: 150 }} data-comment-anchor="01bf89777c-input-721-13" />
              <span className="tiny muted">To</span>
              <input className="input" type="date" style={{ width: 150 }} />
            </div>
            <input className="input" placeholder="Reason…" style={{ flex: 1, minWidth: 140 }} />
            <Button kind="primary" icon={<Icon.Plus />} onClick={() => {
              var scope = window.prompt("Scope (destination/market name)?");
              if (!scope) return;
              var until = window.prompt("Pause until (YYYY-MM-DD, empty = indefinite)?") || "";
              var reason = window.prompt("Reason?") || "";
              window.TrekkoAPI.pauseRebooking({ scope_type: "destination", scope_name: scope, until_date: until, reason: reason })
                .then(function () { toast({ title: "Pause queued", body: scope, tone: "success" }); })
                .catch(function (e) { toast({ title: "Pause failed", body: String(e && e.message || e), tone: "danger" }); });
            }}>Add pause</Button>
          </div>
        </div>
      </Card>

      <Card title="Pause rebooking — by travel agency" sub="Stop re-shopping for specific agencies" style={{ gridColumn: "1 / -1" }} flush>
        <table className="tbl">
          <thead><tr><th>Agency</th><th>Market</th><th>Reason</th><th>Until</th><th>Status</th><th className="col-actions"></th></tr></thead>
          <tbody>
            <tr><td className="bold">Northwind Travel</td><td className="muted">UK</td><td className="muted">Agency opted out</td><td className="mono">Permanent</td><td><Badge tone="warning">Paused</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" onClick={() => toast({ title: "Resumed", tone: "success" })}>Resume</Button></td></tr>
            <tr><td className="bold">StrideBrite</td><td className="muted">UK</td><td className="muted">Billing dispute</td><td className="mono">Jul 15, 2026</td><td><Badge tone="warning">Paused</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" onClick={() => toast({ title: "Resumed", tone: "success" })}>Resume</Button></td></tr>
          </tbody>
        </table>
        <div style={{ padding: 14, borderTop: "1px solid var(--border-hairline)" }}>
          <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
            <select className="select" style={{ minWidth: 200 }}><option>Select agency...</option>{agencies.map((a) => <option key={a.id}>{a.name}</option>)}</select>
            <div className="row" style={{ gap: 4, alignItems: "center" }}>
              <span className="tiny muted">From</span>
              <input className="input" type="date" style={{ width: 150 }} data-comment-anchor="01cee411ac-input-739-13" />
              <span className="tiny muted">To</span>
              <input className="input" type="date" style={{ width: 150 }} />
            </div>
            <input className="input" placeholder="Reason…" style={{ flex: 1, minWidth: 140 }} />
            <Button kind="primary" icon={<Icon.Plus />} onClick={() => {
              var ag = window.prompt("Agency name to pause?");
              if (!ag) return;
              var reason = window.prompt("Reason?") || "";
              window.TrekkoAPI.pauseRebooking({ scope_type: "agency", scope_name: ag, reason: reason })
                .then(function () { toast({ title: "Agency pause queued", body: ag, tone: "success" }); })
                .catch(function (e) { toast({ title: "Pause failed", body: String(e && e.message || e), tone: "danger" }); });
            }}>Add pause</Button>
          </div>
        </div>
      </Card>
    </div>);

}

function ToggleRow({ label, hint, defaultOn = true, off, tone }) {
  const [on, setOn] = useState_re(off ? false : defaultOn);
  return (
    <>
      <div className="row" style={{ justifyContent: "space-between", padding: "10px 0" }}>
        <div>
          <div className="bold" style={{ color: tone === "danger" ? "var(--danger)" : "var(--ink-1)" }}>{label}</div>
          <div className="tiny muted">{hint}</div>
        </div>
        <Toggle on={on} onChange={setOn} />
      </div>
      <div className="divider" style={{ margin: 0 }} />
    </>);

}

// ---------- DRAWER ----------
function WatchedDrawer({ watched, onClose }) {
  if (!watched) return null;
  const w = watched;
  const delta = w.original - w.current;
  const pct = (delta / w.original * 100).toFixed(1);
  const history = [];
  let p = w.original;
  for (let i = 12; i >= 0; i--) {
    p = Math.max(w.current, p - 6 - i % 4);
    if (i % 3 === 0) p += 4;
    history.push(Math.round(p));
  }
  history.push(w.current);

  return (
    <>
      <div className="drawer-veil" onClick={onClose} />
      <div className="drawer">
        <div className="modal__head">
          <div>
            <div className="row" style={{ gap: 8 }}>
              <h3 className="modal__title">Watched booking · <span className="mono">{w.ref}</span></h3>
              {w.status === "Watching" && <Badge tone="info">Watching</Badge>}
              {w.status === "Locked" && <Badge tone="success">Locked-in</Badge>}
              {w.status === "Paused" && <Badge tone="warning">Paused</Badge>}
            </div>
            <div className="muted tiny" style={{ marginTop: 2 }}>{w.hotel} — {w.room} · {w.rate}</div>
          </div>
          <button className="modal__close" onClick={onClose}><Icon.X /></button>
        </div>
        <div className="modal__body">
          <div className="grid grid--3" style={{ gap: 12, marginBottom: 16 }}>
            <Metric label="Original price" value={`€${w.original.toLocaleString()}`} hint="Booked rate" />
            <Metric label="Current best" value={`€${w.current.toLocaleString()}`} hint={`Last check ${w.checks * 12}m ago`} accent />
            <Metric label="Potential saving"
            value={delta > 0 ? `€${delta.toLocaleString()}` : "—"}
            delta={delta > 0 ? `${pct}%` : null}
            deltaDir="up"
            hint="Same room · same conditions" />
            
          </div>

          <Card title="Price history" sub={`Re-shopped ${w.checks} times since booking`}>
            <AreaChart
              height={200}
              data={history.map((v, i) => ({ label: `T-${history.length - 1 - i}`, p: v }))}
              valueFmt={(v) => "€" + v}
              series={[{ key: "p", name: "Vendor quote", color: "#635bff" }]} />
            
          </Card>

          <div style={{ height: 14 }} />
          <Card title="Booking details">
            <dl className="dl">
              <dt>Booking ref</dt><dd className="mono">{w.ref}</dd>
              <dt>Agency</dt><dd>{w.agency}</dd>
              <dt>Hotel</dt><dd>{w.hotel}</dd>
              <dt>Room</dt><dd>{w.room}</dd>
              <dt>Rate plan</dt><dd>{w.rate}</dd>
              <dt>Check-in</dt><dd className="mono">Jul 14, 2026 · 14:00</dd>
              <dt>Check-out</dt><dd className="mono">Jul 19, 2026 · 11:00</dd>
              <dt>Lead pax</dt><dd>D. García (DNI 42178890K)</dd>
              <dt>Free cancellation until</dt><dd className="mono">Jul 9, 2026 · 23:59</dd>
              <dt>Next system check</dt><dd className="mono">{w.nextCheck}</dd>
            </dl>
          </Card>
        </div>
        <div className="modal__foot">
          <Button kind="ghost" onClick={onClose}>Pause watch</Button>
          <span className="spacer" />
          <Button kind="secondary" icon={<Icon.Refresh />}>Re-check now</Button>
          {delta > 0 ?
          <Button kind="primary" icon={<Icon.Check />} onClick={() => {onClose();toast({ title: "Rebooked successfully", body: `Saved €${delta.toLocaleString()} on ${w.ref}.`, tone: "success" });}}>Rebook for €{w.current.toLocaleString()} — save €{delta.toLocaleString()}</Button> :
          <Button kind="primary" disabled>No saving yet</Button>}
        </div>
      </div>
    </>);

}

Object.assign(window, { PageRebookingEnhanced });