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

var { useState, useMemo } = React;

// ============================================================
// PAGE: TRAVEL AGENCIES
// ============================================================
function PageAgencies({ onOpen }) {
  const [agencies, setAgencies] = useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAgencies(rows); });
  }, []);
  const [page, setPage] = useState(1);
  const [q, setQ] = useState("");
  const [statusF, setStatusF] = useState("");
  const [countryF, setCountryF] = useState("");
  const [addOpen, setAddOpen] = useState(false);
  const PAGE_SIZE = 8;

  const rows = useMemo(() => {
    let r = agencies;
    if (q) r = r.filter((a) => (a.name + a.city + a.country + a.contact).toLowerCase().includes(q.toLowerCase()));
    if (statusF) r = r.filter((a) => a.status === statusF);
    if (countryF) r = r.filter((a) => a.country === countryF);
    return r;
  }, [agencies, q, statusF, countryF]);
  const slice = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  const totalSales = rows.reduce((a, r) => a + r.sales, 0);
  const totalBookings = rows.reduce((a, r) => a + r.bookings, 0);
  const active = rows.filter((r) => r.status === "Active").length;

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Travel Agencies</h1>
          <div className="page-head__sub">Manage agency network, contracts and markup tiers.</div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Download />}>Export</Button>
          <Button kind="primary" icon={<Icon.Plus />} onClick={() => setAddOpen(true)}>Add agency</Button>
        </div>
      </div>

      <AddAgencyModal open={addOpen} onClose={() => setAddOpen(false)} />

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Total agencies" value={rows.length.toString()} delta="+3 this week" deltaDir="up" />
        <Metric label="Active" value={`${active} / ${rows.length}`} hint="93% activation" />
        <Metric label="Total bookings (30d)" value={totalBookings.toLocaleString()} delta="+8.4% MoM" deltaDir="up" />
        <Metric label="Network sales" value={`€${(totalSales / 1000).toFixed(0)}k`} delta="+12.1% MoM" deltaDir="up" />
      </div>

      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by agency, contact or city…" style={{ width: 320 }} value={q} onChange={(e) => setQ(e.target.value)} />
        <select className="select" value={statusF} onChange={(e) => setStatusF(e.target.value)}>
          <option value="">All statuses</option><option>Active</option><option>Pending</option><option>Suspended</option>
        </select>
        <select className="select" value={countryF} onChange={(e) => setCountryF(e.target.value)}>
          <option value="">All countries</option>
          {[...new Set(agencies.map((a) => a.country))].map((c) => <option key={c}>{c}</option>)}
        </select>
        <select className="select"><option>All markup levels</option><option>Unique</option><option>Gold</option><option>Silver</option></select>
        <select className="select"><option>All payment types</option><option>Prepaid</option><option>Credit</option><option>Full Credit</option></select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Filter />}>More filters</Button>
      </div>

      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th className="col-check"><input className="checkbox" type="checkbox" /></th>
              <th>Agency</th>
              <th>Country</th>
              <th>Contact</th>
              <th>Potential</th>
              <th>Payment</th>
              <th>Markup</th>
              <th className="num">Bookings (30d)</th>
              <th className="num">Sales (30d)</th>
              <th>Status</th>
              <th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {slice.map((a) =>
            <tr key={a.id}>
                <td className="col-check"><input className="checkbox" type="checkbox" /></td>
                <td>
                  <span className="user-cell">
                    <Avatar name={a.name} size="sm" />
                    <span><div className="bold"><a href="#" onClick={(e) => {e.preventDefault();onOpen(a);}}>{a.name}</a></div>
                    <div className="tiny muted">{a.id} · since {new Date(a.joined).getFullYear()}</div></span>
                  </span>
                </td>
                <td>{a.country} <span className="muted tiny">· {a.city}</span></td>
                <td>{a.contact}<div className="tiny muted">{a.phone}</div></td>
                <td>{a.potential === "High" ? <Badge tone="success">High</Badge> : a.potential === "Normal" ? <Badge tone="info">Normal</Badge> : <Badge tone="neutral">Low</Badge>}</td>
                <td>{a.payType === "Full Credit" ? <Badge tone="indigo">Full Credit</Badge> : a.payType === "Credit" ? <Badge tone="warning">Credit</Badge> : <Badge tone="neutral">Prepaid</Badge>}</td>
                <td>{a.markup === "Unique" ? <Badge tone="indigo">Unique</Badge> : a.markup === "Gold" ? <Badge tone="warning">Gold</Badge> : <Badge tone="neutral">Silver</Badge>}</td>
                <td className="num mono">{a.bookings}</td>
                <td className="num mono bold">€{a.sales.toLocaleString()}</td>
                <td><StatusBadge status={a.status} /></td>
                <td className="col-actions">
                  <Button kind="secondary" size="sm" onClick={() => onOpen(a)}>View</Button>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <Pager page={page} pageSize={PAGE_SIZE} total={rows.length} onPage={setPage} />
    </div>);

}

// ============================================================
// PAGE: TRAVEL AGENCY DETAIL
// ============================================================
function AddAgencyModal({ open, onClose }) {
  const [travelGroupsForModal, setTravelGroupsForModal] = React.useState((window.MOCK && window.MOCK.TRAVEL_GROUPS) || []);
  React.useEffect(() => {
    if (!open || !window.TrekkoAPI) return;
    window.TrekkoAPI.getTravelGroups().then((rows) => { if (rows && rows.length) setTravelGroupsForModal(rows); });
  }, [open]);
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title="Add travel agency" size="xl"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="primary" icon={<Icon.Check />} onClick={() => {
                // Collect minimal required fields via prompts so the audit log is meaningful.
                var name = window.prompt("Agency name?");
                if (!name) return;
                var email = window.prompt("Contact email?");
                if (!email) return;
                window.TrekkoAPI.adminCreateAgency({ name: name, email: email })
                  .then(function () { onClose(); toast({ title: "Agency creation queued", body: name + " · " + email + " (real provisioning still via trekko.co/signup)", tone: "success" }); })
                  .catch(function (e) { toast({ title: "Create failed", body: String(e && e.message || e), tone: "danger" }); });
              }}>Create agency</Button></>}>
      <div className="bold" style={{ fontSize: 13, marginBottom: 10 }}>Company</div>
      <div className="grid grid--2" style={{ gap: 14 }}>
        <Field label="Agency name"><input className="input" placeholder="e.g. Sunrise Travel" /></Field>
        <Field label="Legal / trading name"><input className="input" placeholder="Sunrise Travel S.L." /></Field>
        <Field label="VAT / Tax ID"><input className="input" placeholder="ESB12345678" /></Field>
        <Field label="Website"><input className="input" placeholder="https://" /></Field>
      </div>
      <div className="bold" style={{ fontSize: 13, margin: "16px 0 10px" }}>Contact</div>
      <div className="grid grid--2" style={{ gap: 14 }}>
        <Field label="Primary contact"><input className="input" placeholder="Full name" /></Field>
        <Field label="Email"><input className="input" type="email" placeholder="contact@agency.com" /></Field>
        <Field label="Phone"><input className="input" type="tel" placeholder="+34 600 000 000" /></Field>
        <Field label="Country"><select className="select">{window.MOCK.GEO.map((g) => <option key={g.country}>{g.country}</option>)}</select></Field>
        <Field label="City"><input className="input" placeholder="City" /></Field>
        <Field label="Market"><select className="select"><option>Iberia</option><option>DACH</option><option>UK</option><option>France</option><option>Nordics</option><option>Italy</option></select></Field>
      </div>
      <div className="bold" style={{ fontSize: 13, margin: "16px 0 10px" }}>Commercial</div>
      <div className="grid grid--2" style={{ gap: 14 }}>
        <Field label="Travel group (optional)"><select className="select"><option value="">- None -</option>{travelGroupsForModal.map((g) => <option key={g.id}>{g.name}</option>)}</select></Field>
        <Field label="Markup tier"><select className="select"><option>Silver</option><option>Gold</option><option>Unique</option></select></Field>
        <Field label="Potential"><select className="select"><option>Normal</option><option>High</option><option>Low</option></select></Field>
        <Field label="Sales manager"><select className="select"><option>Ryan Hou</option><option>Maria Lopez</option><option>Hannah Briggs</option><option>Juan Salazar</option></select></Field>
      </div>
      <div className="bold" style={{ fontSize: 13, margin: "16px 0 10px" }}>Payment</div>
      <div className="grid grid--2" style={{ gap: 14 }}>
        <Field label="Payment type" hint="New agencies default to Prepaid."><select className="select"><option>Prepaid</option><option>Credit</option><option>Full Credit</option></select></Field>
        <Field label="Payment cycle"><select className="select"><option>Per booking (prepaid)</option><option>Every 7 days</option><option>Every 14 days</option></select></Field>
        <Field label="Credit limit (€)"><input className="input" type="number" placeholder="0" /></Field>
        <Field label="Deposit (€)" hint="Credit-with-deposit only · we double it."><input className="input" type="number" placeholder="0" /></Field>
      </div>
    </Modal>);
}

function PageAgencyDetail({ agency, onNav }) {
  const [fallbackAgency, setFallbackAgency] = useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES && window.MOCK.TRAVEL_AGENCIES[0]) || {});
  const [agencyBookings, setAgencyBookings] = useState((window.MOCK && window.MOCK.BOOKINGS) || []);
  // When deep-linked via /agencies/<key> the entity is just `{ _key }`,
  // so resolve it against the real agency list by id/uuid/name match.
  const stub = agency && !agency.name && agency._key;
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    if (!agency || stub) {
      window.TrekkoAPI.getAgencies().then((rows) => {
        if (!rows || !rows.length) return;
        if (stub) {
          const k = String(agency._key);
          const hit = rows.find((r) => String(r.id) === k || String(r.uuid) === k || String(r.account_id) === k || String(r.name) === k);
          if (hit) setFallbackAgency(hit);
          else setFallbackAgency(rows[0]);
        } else {
          setFallbackAgency(rows[0]);
        }
      });
    }
    window.TrekkoAPI.getBookings().then((rows) => { if (rows && rows.length) setAgencyBookings(rows); });
  }, [agency, stub]);
  const a = (stub ? fallbackAgency : (agency || fallbackAgency));
  const [tab, setTab] = useState("overview");
  const [editOpen, setEditOpen] = useState(false);
  const [creditOpen, setCreditOpen] = useState(false);
  const [rappelOpen, setRappelOpen] = useState(false);
  const [active, setActive] = useState((a.status || "Active") !== "Suspended");
  const trend = [
  { label: "Jan", v: 8400 }, { label: "Feb", v: 11200 }, { label: "Mar", v: 14800 },
  { label: "Apr", v: 18900 }, { label: "May", v: 22100 }, { label: "Jun", v: 27400 },
  { label: "Jul", v: 32600 }, { label: "Aug", v: 31200 }, { label: "Sep", v: 24800 },
  { label: "Oct", v: 21200 }, { label: "Nov", v: 18600 }, { label: "Dec", v: 16800 }];


  return (
    <div>
      <div className="page-head" data-comment-anchor="d298bfca22-div-124-7" style={{ flexWrap: "wrap", gap: 12 }}>
        <div>
          <div className="row" style={{ marginBottom: 10, alignItems: "center", gap: 8, flexWrap: "nowrap", whiteSpace: "nowrap" }} data-comment-anchor="a1b4ec7ab0-div-175-11">
            <button className="btn btn--ghost btn--sm" onClick={() => onNav("agencies")}><Icon.ChevronLeft /> All agencies</button>
            <span className="mono muted" style={{ fontSize: 12.5 }}>{a.id}</span>
            <span style={{ width: 1, height: 16, background: "var(--border)" }}></span>
            {active ? <Badge tone="success">Active</Badge> : <Badge tone="danger">Inactive</Badge>}
            {a.markup === "Unique" ? <Badge tone="indigo">Unique markup</Badge> : a.markup === "Gold" ? <Badge tone="warning">Gold markup</Badge> : <Badge tone="neutral">{a.markup} markup</Badge>}
            {a.payType === "Full Credit" ? <Badge tone="indigo">Full Credit</Badge> : a.payType === "Credit" ? <Badge tone="warning">Credit</Badge> : <Badge tone="neutral">Prepaid</Badge>}
          </div>
          <div className="row" style={{ gap: 14 }}>
            <Avatar name={a.name} size="xl" />
            <div>
              <h1 className="page-head__title" style={{ marginBottom: 2 }}>{a.name}</h1>
              <div className="page-head__sub">{a.city}, {a.country} · Joined {new Date(a.joined).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })} · Contact: {a.contact}</div>
            </div>
          </div>
        </div>
        <div className="page-head__actions">
          <PeriodPicker value="month" onChange={() => {}} />
          <Button kind={active ? "danger" : "success"} icon={active ? <Icon.X /> : <Icon.Check />}
          onClick={() => {setActive(!active);toast({ title: active ? "Agency deactivated" : "Agency activated", body: a.name, tone: active ? "danger" : "success" });}}>
            {active ? "Deactivate" : "Activate"}
          </Button>
          <Button kind="secondary" icon={<Icon.Edit />} onClick={() => setEditOpen(true)}>Edit profile</Button>
        </div>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Total bookings" value={a.bookings.toLocaleString()} delta="+12.4% MoM" deltaDir="up" />
        <Metric label="Network sales" value={`€${a.sales.toLocaleString()}`} delta="+8.7% MoM" deltaDir="up" />
        <Metric label="Wallet balance" value="€8,420" hint="Available now" />
        <Metric label="Open invoices" value="3" delta="€4,180 due" deltaDir="down" />
      </div>

      <Tabs
        active={tab}
        onChange={setTab}
        tabs={[
        { id: "overview", label: "Overview" },
        { id: "bookings", label: "Bookings", count: a.bookings },
        { id: "team", label: "Team & roles", count: 8 },
        { id: "billing", label: "Billing & contracts" },
        { id: "api", label: "API & Integrations", count: 3 },
        { id: "activity", label: "Activity" }]
        } />
      

      {tab === "overview" &&
      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", gap: 18 }}>
          <div className="col" style={{ gap: 18 }} data-comment-anchor="d046d9e08e-div-171-11">
            <Card title="Revenue trend" sub="Last 12 months">
              <LineChart
              height={240}
              data={trend}
              valueFmt={(v) => "€" + (v / 1000).toFixed(0) + "k"}
              series={[{ key: "v", name: "Sales", color: "#635bff" }]} />
            
            </Card>
            <Card title="Top destinations" flush>
              <table className="tbl">
                <thead><tr><th>Destination</th><th className="num">Bookings</th><th className="num">Revenue</th><th>Trend</th></tr></thead>
                <tbody>
                  <tr><td>Marbella, Spain</td><td className="num mono">112</td><td className="num mono">€132,400</td><td><Sparkline values={[3, 5, 8, 7, 9, 12, 11, 14, 18, 16, 20, 22]} color="var(--indigo)" /></td></tr>
                  <tr><td>Tenerife, Spain</td><td className="num mono">84</td><td className="num mono">€98,200</td><td><Sparkline values={[6, 5, 7, 8, 9, 11, 10, 13, 15, 14, 16, 18]} color="var(--indigo)" /></td></tr>
                  <tr><td>Mallorca, Spain</td><td className="num mono">62</td><td className="num mono">€74,800</td><td><Sparkline values={[8, 9, 8, 11, 10, 12, 12, 11, 14, 13, 15, 16]} color="#0e7c66" /></td></tr>
                  <tr><td>Lisbon, Portugal</td><td className="num mono">38</td><td className="num mono">€41,600</td><td><Sparkline values={[2, 3, 4, 4, 5, 6, 7, 8, 8, 9, 10, 11]} color="#ff9f43" /></td></tr>
                </tbody>
              </table>
            </Card>
          </div>
          <div className="col" style={{ gap: 18 }}>
            <Card title="Contact & company">
              <dl className="dl">
                <dt>Company name</dt><dd className="bold">{a.name}</dd>
                <dt>Primary contact</dt><dd>{a.contact}</dd>
                <dt>Email</dt><dd>{a.email}</dd>
                <dt>Phone</dt><dd>{a.phone}</dd>
                <dt>Address</dt><dd>44 Danwers, {a.city}, {a.country} 70-102</dd>
                <dt>VAT ID</dt><dd className="mono">ES-{a.id.replace("TA-", "B")}988</dd>
                <dt>IBAN</dt><dd className="mono">ES91 2100 0418 4502 0005 1332</dd>
              </dl>
            </Card>
            <Card title="Contract terms">
              <dl className="dl">
                <dt>Plan</dt><dd>Premium Network</dd>
                <dt>Markup level</dt><dd>{a.markup}</dd>
                <dt>Commission</dt><dd>14.5%</dd>
                <dt>Payment terms</dt><dd>Net 14</dd>
                <dt>Renewal</dt><dd>Jan 12, 2027</dd>
              </dl>
            </Card>
          </div>
        </div>
      }

      {tab === "bookings" &&
      <div className="col" style={{ gap: 18 }}>
        <div className="grid grid--4" style={{ gap: 14 }}>
          <Metric accent label="Total bookings" value={a.bookings.toLocaleString()} mom="+8% MoM" momDir="up" yoy="+14% YoY" yoyDir="up" />
          <Metric label="Booking value (YTD)" value={`€${a.sales.toLocaleString()}`} mom="+6% MoM" momDir="up" yoy="+18% YoY" yoyDir="up" />
          <Metric label="Avg booking value" value={`€${Math.round(a.sales / Math.max(1, a.bookings)).toLocaleString()}`} hint="Per booking" />
          <Metric label="Cancellations" value={Math.round(a.bookings * 0.04).toString()} delta="−2% MoM" deltaDir="down" hint="Client-initiated" />
        </div>

        <Card title="Rebooking savings" sub="Accommodation re-shopping for this agency">
          <div className="grid grid--4" style={{ gap: 14 }}>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Rebooking tries</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>{Math.round(a.bookings * 0.62)}</div>
              <div className="tiny muted">Monitored bookings</div>
            </div>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Successful rebooks</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "var(--success)" }}>{Math.round(a.bookings * 0.27)}</div>
              <div className="tiny muted">{Math.round(0.27 / 0.62 * 100)}% conversion</div>
            </div>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Money saved for them</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "var(--success)" }}>€{Math.round(a.sales * 0.034).toLocaleString()}</div>
              <div className="tiny muted">Avg 11.2% per rebook</div>
            </div>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Avg saving / booking</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>€{Math.round(a.sales * 0.034 / Math.max(1, a.bookings * 0.27))}</div>
              <div className="tiny muted">Per successful rebook</div>
            </div>
          </div>
        </Card>

        <Card title="Payment details" sub="Credit, deposit and wallet status">
          <div className="grid grid--4" style={{ gap: 14 }}>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Payment type</div>
              <div style={{ marginTop: 6 }}>{a.payType === "Full Credit" ? <Badge tone="indigo">Full Credit</Badge> : a.payType === "Credit" ? <Badge tone="warning">Credit</Badge> : <Badge tone="neutral">Prepaid</Badge>}</div>
              <div className="tiny muted" style={{ marginTop: 8 }}>{a.payType === "Prepaid" ? "Wallet / per booking" : "Net " + a.terms + " + 3 grace"}</div>
            </div>
            {a.payType === "Prepaid" ?
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Virtual wallet</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>€{(a.wallet || 0).toLocaleString()}</div>
              {a.wallet < 500 ? <Badge tone="danger">Low — top up</Badge> : <Badge tone="success">Healthy</Badge>}
            </div> :
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Deposit held</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>€{a.deposit.toLocaleString()}</div>
              <div className="tiny muted">{a.deposit > 0 ? "Doubled to €" + (a.deposit * 2).toLocaleString() : "No deposit · pure credit"}</div>
            </div>}
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Credit limit</div>
              <div style={{ fontSize: 20, fontWeight: 700 }}>€{a.creditLimit.toLocaleString()}</div>
              <div className="tiny muted">{a.payType === "Prepaid" ? "N/A — prepaid" : "Net " + a.terms + " days"}</div>
            </div>
            <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
              <div className="tiny muted">Credit used</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: a.creditLimit && a.creditUsed / a.creditLimit > 0.85 ? "var(--danger)" : "var(--ink-1)" }}>€{a.creditUsed.toLocaleString()}</div>
              {a.creditLimit > 0 && <ProgressBar value={a.creditUsed / a.creditLimit * 100} color={a.creditUsed / a.creditLimit > 0.85 ? "#d4366a" : "#635bff"} />}
            </div>
          </div>
        </Card>

        <Card title="Bookings" sub={`${a.bookings} total`} flush
        actions={<Button kind="secondary" size="sm" icon={<Icon.Download />}>Export</Button>}>
          <div className="filter-bar" style={{ borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: 0 }}>
            <input className="input input--search" placeholder="Search booking ref or destination…" style={{ width: 280 }} />
            <select className="select"><option>All services</option><option>Accommodation</option><option>Car Rental</option><option>Transfer</option><option>Airport Lounge</option><option>VIP Airport</option></select>
            <select className="select"><option>All statuses</option><option>Paid</option><option>Upcoming</option><option>Overdue</option><option>Cancelled</option></select>
            <PeriodPicker value="month" onChange={() => {}} />
          </div>
          <table className="tbl">
            <thead><tr><th>Booking</th><th>Service</th><th>Travel date</th><th className="num">Net</th><th className="num">Amount</th><th>Status</th></tr></thead>
            <tbody>
              {agencyBookings.filter((b) => b.agency === a.name).slice(0, 10).map((b) =>
              <tr key={b.id}>
                  <td className="mono">{b.shortId}</td>
                  <td><Tag kind={b.type.tag}>{b.type.label}</Tag></td>
                  <td className="mono">{b.travelDate}</td>
                  <td className="num mono muted">€{Math.round(b.amount * 0.7).toLocaleString()}</td>
                  <td className="num mono bold">€{b.amount.toLocaleString()}</td>
                  <td><StatusBadge status={b.status} /></td>
                </tr>
              )}
            </tbody>
          </table>
          <div style={{ padding: 12, borderTop: "1px solid var(--border-hairline)" }}><Pager page={1} pageSize={10} total={a.bookings} onPage={() => {}} /></div>
        </Card>
      </div>
      }

      {tab === "team" &&
      <Card title={`Team at ${a.name}`} flush>
          <table className="tbl">
            <thead><tr><th>Member</th><th>Role</th><th>Email</th><th>Last login</th><th>Status</th></tr></thead>
            <tbody>
              {[
            { n: "Bailey Chen", r: "Owner", e: "bailey@" + a.email.split("@")[1], ll: "2 hours ago", s: "Active" },
            { n: "Anya Watson", r: "Sales lead", e: "anya@" + a.email.split("@")[1], ll: "Yesterday", s: "Active" },
            { n: "Marco Taylor", r: "Agent", e: "marco@" + a.email.split("@")[1], ll: "5 days ago", s: "Active" },
            { n: "Sara Demir", r: "Agent", e: "sara@" + a.email.split("@")[1], ll: "Never", s: "Pending" }].
            map((u) =>
            <tr key={u.e}>
                  <td><span className="user-cell"><Avatar name={u.n} size="sm" /><span className="bold">{u.n}</span></span></td>
                  <td>{u.r}</td>
                  <td className="muted">{u.e}</td>
                  <td className="muted">{u.ll}</td>
                  <td><StatusBadge status={u.s} /></td>
                </tr>
            )}
            </tbody>
          </table>
        </Card>
      }

      {tab === "billing" &&
      <div className="col" style={{ gap: 18 }}>
          <Card title="Payment profile" sub="Prepaid vs Credit terms — set by the sales manager"
        actions={<Button kind="secondary" size="sm" icon={<Icon.Edit />} onClick={() => setCreditOpen(true)}>Adjust credit & type</Button>}>
            <div className="grid grid--4" style={{ gap: 12 }}>
              <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                <div className="tiny muted">Payment type</div>
                <div style={{ marginTop: 6 }}>
                  {a.payType === "Full Credit" ? <Badge tone="indigo">Full Credit</Badge> : a.payType === "Credit" ? <Badge tone="warning">Credit</Badge> : <Badge tone="neutral">Prepaid</Badge>}
                </div>
                <div className="tiny muted" style={{ marginTop: 8 }}>{a.payType === "Prepaid" ? "Pay per booking / wallet" : "Pay every " + a.terms + " days"}</div>
              </div>
              {a.payType === "Prepaid" ?
            <>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Virtual wallet</div>
                  <div style={{ fontSize: 20, fontWeight: 700 }}>€{(a.wallet || 0).toLocaleString()}</div>
                  {a.wallet < 500 ? <Badge tone="danger">Low — top up</Badge> : <Badge tone="success">Healthy</Badge>}
                </div>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Low-balance alert</div>
                  <div style={{ fontSize: 20, fontWeight: 700 }}>€500</div>
                  <div className="tiny muted">Auto-alert threshold</div>
                </div>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Auto-cancel</div>
                  <div style={{ fontSize: 15, fontWeight: 600 }}>If unpaid by deadline</div>
                  <div className="tiny muted">Booking auto-cancels before cancellation deadline</div>
                </div>
              </> :
            <>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Credit limit</div>
                  <div style={{ fontSize: 20, fontWeight: 700 }}>€{a.creditLimit.toLocaleString()}</div>
                  <div className="tiny muted">{a.deposit > 0 ? `Deposit €${a.deposit.toLocaleString()} ×2` : "No deposit · pure credit"}</div>
                </div>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Credit used</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: a.creditUsed / a.creditLimit > 0.85 ? "var(--danger)" : "var(--ink-1)" }}>€{a.creditUsed.toLocaleString()}</div>
                  <ProgressBar value={a.creditUsed / a.creditLimit * 100} color={a.creditUsed / a.creditLimit > 0.85 ? "#d4366a" : "#635bff"} />
                </div>
                <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                  <div className="tiny muted">Available credit</div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: "var(--success)" }}>€{(a.creditLimit - a.creditUsed).toLocaleString()}</div>
                  <div className="tiny muted">Payment terms: Net {a.terms} + 3 grace</div>
                </div>
              </>}
            </div>
            <div className="divider" />
            <div className="row" style={{ gap: 14 }}>
              <span className="row" style={{ gap: 6 }}>{a.onTime ? <><Icon.Check stroke="var(--success)" size={14} /> <span style={{ color: "var(--success)" }}>Pays on time</span></> : <><Icon.Warning stroke="var(--danger)" size={14} /> <span style={{ color: "var(--danger)" }}>Late payer — 2 overdue cycles</span></>}</span>
              <span className="spacer" />
              <span className="tiny muted">Invoices auto-generated every {a.payType === "Prepaid" ? "booking" : a.terms + " days"} for non-refundable / due bookings · 3-day grace period</span>
            </div>
          </Card>

          <Card title="Rappel agreement" sub="Volume rebate for this agency — progress & payout"
        actions={<Button kind="secondary" size="sm" icon={<Icon.Edit />} onClick={() => setRappelOpen(true)}>Set rappel</Button>}>
            <div className="grid grid--4" style={{ gap: 12, marginBottom: 14 }}>
              <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                <div className="tiny muted">Rappel rate</div>
                <div style={{ fontSize: 20, fontWeight: 700 }}>{a.markup === "Unique" ? "5.0%" : a.markup === "Gold" ? "3.5%" : "2.0%"}</div>
                <div className="tiny muted">On NET sales</div>
              </div>
              <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                <div className="tiny muted">Threshold</div>
                <div style={{ fontSize: 20, fontWeight: 700 }}>€{(a.sales * 1.4 / 1000).toFixed(0)}k</div>
                <div className="tiny muted">Annual NET target</div>
              </div>
              <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                <div className="tiny muted">Achieved (YTD)</div>
                <div style={{ fontSize: 20, fontWeight: 700, color: "var(--ink-1)" }} data-comment-anchor="2d4b030d6a-div-452-17">€{(a.sales / 1000).toFixed(0)}k <span className="tiny" style={{ color: "var(--indigo)", fontWeight: 600 }}>· {Math.round(a.sales / (a.sales * 1.4) * 100)}%</span></div>
                <ProgressBar value={Math.min(100, a.sales / (a.sales * 1.4) * 100)} color="#635bff" />
                <div className="tiny muted" style={{ marginTop: 4 }}>{Math.round(a.sales / (a.sales * 1.4) * 100)}% of threshold reached</div>
              </div>
              <div style={{ padding: 14, background: "var(--bg-subtle)", borderRadius: 10 }}>
                <div className="tiny muted">Rappel to be paid</div>
                <div style={{ fontSize: 20, fontWeight: 700, color: "var(--success)" }}>€{Math.round(a.sales * (a.markup === "Unique" ? 0.05 : a.markup === "Gold" ? 0.035 : 0.02)).toLocaleString()}</div>
                <div className="tiny muted">Accrued so far</div>
              </div>
            </div>
            <div className="row" style={{ gap: 14 }}>
              <span className="tiny muted">Settlement: quarterly · paid by bank transfer or wallet credit.</span>
              <span className="spacer" />
              <span className="row" style={{ gap: 6 }}><Icon.Lock size={13} stroke="var(--ink-3)" /><span className="tiny muted">Editable by Sales Manager, Super Admin & Finance Controller only</span></span>
            </div>
          </Card>

          <Card title="Open invoices" flush>
            <table className="tbl">
              <thead><tr><th>Invoice</th><th>Issued</th><th>Due</th><th className="num">Amount</th><th>Status</th></tr></thead>
              <tbody>
                <tr><td className="mono">INV-2026-0421</td><td className="mono">May 1</td><td className="mono">May 14</td><td className="num mono bold">€2,180</td><td><Badge tone="warning">Upcoming</Badge></td></tr>
                <tr><td className="mono">INV-2026-0419</td><td className="mono">Apr 27</td><td className="mono">May 10</td><td className="num mono bold">€1,420</td><td><Badge tone="danger">Overdue</Badge></td></tr>
                <tr><td className="mono">INV-2026-0410</td><td className="mono">Apr 22</td><td className="mono">May 6</td><td className="num mono bold">€580</td><td><Badge tone="danger">Overdue</Badge></td></tr>
                <tr><td className="mono">INV-2026-0403</td><td className="mono">Apr 14</td><td className="mono">Apr 28</td><td className="num mono bold">€3,420</td><td><Badge tone="success">Paid</Badge></td></tr>
              </tbody>
            </table>
          </Card>
        </div>
      }

      {tab === "api" && <AgencyApiTab a={a} />}

      {tab === "activity" &&
      <Card title="Recent activity" flush>
          <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
            {[
          { who: "Bailey Chen", what: "Created booking #324BA — Marbella", when: "5 min ago" },
          { who: "System", what: "Wallet top-up €4,500 via card", when: "Today 09:14" },
          { who: "Maria Lopez", what: "Adjusted markup tier to Gold", when: "Yesterday" },
          { who: "Anya Watson", what: "Cancelled booking #318BA", when: "3 days ago" },
          { who: "System", what: "Sent reminder email for INV-2026-0419", when: "4 days ago" },
          { who: "Maria Lopez", what: "Updated contact phone number", when: "1 week ago" }].
          map((i, n) =>
          <li key={n} style={{ display: "flex", gap: 12, padding: "12px 18px", borderBottom: "1px solid var(--border-hairline)" }}>
                <Avatar name={i.who} size="sm" />
                <div style={{ flex: 1 }}>
                  <div><span className="bold">{i.who}</span> <span className="muted">{i.what}</span></div>
                  <div className="tiny muted">{i.when}</div>
                </div>
              </li>
          )}
          </ul>
        </Card>
      }

      {editOpen &&
      <Modal open title={`Edit profile · ${a.name}`} size="lg" onClose={() => setEditOpen(false)}
      footer={<><Button kind="secondary" onClick={() => setEditOpen(false)}>Cancel</Button>
                <Button kind="primary" icon={<Icon.Check />} onClick={() => {setEditOpen(false);toast({ title: "Agency profile updated", tone: "success" });}}>Save changes</Button></>}>
        <div className="grid grid--2" style={{ gap: 14 }}>
          <Field label="Agency name"><input className="input" defaultValue={a.name} /></Field>
          <Field label="Primary contact"><input className="input" defaultValue={a.contact} /></Field>
          <Field label="Email"><input className="input" defaultValue={a.email} /></Field>
          <Field label="Phone"><input className="input" defaultValue={a.phone} /></Field>
          <Field label="Country"><input className="input" defaultValue={a.country} /></Field>
          <Field label="City"><input className="input" defaultValue={a.city} /></Field>
          <Field label="Markup tier"><select className="select" defaultValue={a.markup}><option>Unique</option><option>Gold</option><option>Silver</option></select></Field>
          <Field label="Payment type"><select className="select" defaultValue={a.payType}><option>Prepaid</option><option>Credit</option><option>Full Credit</option></select></Field>
          <div style={{ gridColumn: "1 / -1" }}><Field label="Notes"><textarea className="textarea" placeholder="Internal notes about this agency…" /></Field></div>
        </div>
      </Modal>
      }

      {creditOpen &&
      <Modal open title={`Credit & payment type · ${a.name}`} size="lg" onClose={() => setCreditOpen(false)}
      footer={<><Button kind="secondary" onClick={() => setCreditOpen(false)}>Cancel</Button>
                <Button kind="primary" icon={<Icon.Check />} onClick={() => {setCreditOpen(false);toast({ title: "Credit settings updated", tone: "success" });}}>Save</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 }}>Only <b>Sales Managers</b>, <b>Super Admins</b> and <b>Finance Controllers</b> can adjust the credit limit and payment type.</div>
        </div>
        <div className="grid grid--2" style={{ gap: 14 }}>
          <Field label="Payment type"><select className="select" defaultValue={a.payType}><option>Prepaid</option><option>Credit</option><option>Full Credit</option></select></Field>
          <Field label="Payment cycle"><select className="select" defaultValue={"Net " + a.terms}><option>Net 7</option><option>Net 14</option><option>Net 21</option><option>Net 30</option></select></Field>
          <Field label="Credit limit (€)"><input className="input" type="number" defaultValue={a.creditLimit} /></Field>
          <Field label="Deposit held (€)"><input className="input" type="number" defaultValue={a.deposit} /></Field>
          <div style={{ gridColumn: "1 / -1" }}><Field label="Reason / note" hint="Logged in the audit trail."><textarea className="textarea" placeholder="e.g. Q3 limit increase after strong payment history" /></Field></div>
        </div>
      </Modal>
      }

      {rappelOpen &&
      <Modal open title={`Rappel agreement · ${a.name}`} size="lg" onClose={() => setRappelOpen(false)}
      footer={<><Button kind="secondary" onClick={() => setRappelOpen(false)}>Cancel</Button>
                <Button kind="primary" icon={<Icon.Check />} onClick={() => {setRappelOpen(false);toast({ title: "Rappel updated", tone: "success" });}}>Save rappel</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 }}>Only <b>Sales Managers</b>, <b>Super Admins</b> and <b>Finance Controllers</b> can set or update the rappel. Rappel is optional.</div>
        </div>
        <div className="grid grid--2" style={{ gap: 14 }}>
          <Field label="Apply rappel?"><select className="select" defaultValue="Yes"><option>Yes</option><option>No</option></select></Field>
          <Field label="Rappel rate (%)"><input className="input" type="number" step="0.1" defaultValue={a.markup === "Unique" ? 5.0 : a.markup === "Gold" ? 3.5 : 2.0} /></Field>
          <Field label="Annual NET threshold (€)"><input className="input" type="number" defaultValue={Math.round(a.sales * 1.4)} /></Field>
          <Field label="Settlement"><select className="select"><option>Quarterly</option><option>Half-yearly</option><option>Yearly</option></select></Field>
          <Field label="Paid via"><select className="select"><option>Bank transfer</option><option>Wallet credit</option><option>Credit-note on invoice</option></select></Field>
          <Field label="Calculated rappel to pay (€)"><input className="input" readOnly value={Math.round(a.sales * (a.markup === "Unique" ? 0.05 : a.markup === "Gold" ? 0.035 : 0.02))} /></Field>
          <div style={{ gridColumn: "1 / -1" }}><Field label="Reason / note" hint="Logged in the audit trail."><textarea className="textarea" placeholder="e.g. New rappel agreed for FY26" /></Field></div>
        </div>
      </Modal>
      }
    </div>);

}

// ============================================================
// PAGE: VENDORS
// ============================================================
function PageVendors({ onOpen }) {
  const [vendors, setVendors] = useState((window.MOCK && window.MOCK.VENDORS) || []);
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getVendors().then((rows) => { if (rows && rows.length) setVendors(rows); });
  }, []);
  const [page, setPage] = useState(1);
  const [q, setQ] = useState("");
  const [typeF, setTypeF] = useState("");
  const [addOpen, setAddOpen] = useState(false);
  const PAGE_SIZE = 8;
  const rows = useMemo(() => {
    let r = vendors;
    if (q) r = r.filter((v) => (v.name + v.city + v.country + v.contact).toLowerCase().includes(q.toLowerCase()));
    if (typeF) r = r.filter((v) => v.type === typeF);
    return r;
  }, [vendors, q, typeF]);
  const slice = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  return (
    <div data-comment-anchor="c2b86d2336-div-584-5">
      <div className="page-head" data-comment-anchor="1a4f6d4b14-div-334-7">
        <div>
          <h1 className="page-head__title">Vendors</h1>
          <div className="page-head__sub">Accommodation, transfer, activity and cruise partners.</div>
        </div>
        <div className="page-head__actions" data-comment-anchor="9c6ea86eea-div-590-9">
          <PeriodPicker value="month" onChange={() => {}} />
          <Button kind="secondary" icon={<Icon.Download />}>Export</Button>
          <Button kind="primary" icon={<Icon.Plus />} onClick={() => setAddOpen(true)}>Add vendor</Button>
        </div>
      </div>

      {/* By service segment */}
      <Card title="Vendors by service segment" sub="Bookings, revenue & profit per segment" flush style={{ marginBottom: 18 }}>
        <table className="tbl">
          <thead><tr><th>Segment</th><th className="num">Vendors</th><th className="num">Bookings</th><th className="num">Revenue</th><th className="num">Profit</th><th className="num">Share</th></tr></thead>
          <tbody>
            {[
            { svc: "Accommodation", kind: "hotel", vd: 42, bk: 8420, rev: 2840 },
            { svc: "Car Rental", kind: "rental", vd: 18, bk: 2184, rev: 680 },
            { svc: "Transfer", kind: "transfer", vd: 12, bk: 1240, rev: 520 },
            { svc: "Airport Lounge", kind: "vip", vd: 6, bk: 384, rev: 180 },
            { svc: "VIP Airport", kind: "vipas", vd: 5, bk: 200, rev: 140 },
            { svc: "Private Tours", kind: "ptour", vd: 8, bk: 142, rev: 92 }].
            map((r) =>
            <tr key={r.svc}>
                <td><Tag kind={r.kind}>{r.svc}</Tag></td>
                <td className="num mono">{r.vd}</td>
                <td className="num mono">{r.bk.toLocaleString()}</td>
                <td className="num mono">€{r.rev.toLocaleString()}k</td>
                <td className="num mono" style={{ color: "var(--success)" }}>€{Math.round(r.rev * 0.3).toLocaleString()}k</td>
                <td className="num mono">{(r.rev / 4452 * 100).toFixed(1)}%</td>
              </tr>
            )}
          </tbody>
        </table>
      </Card>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Total vendors" value={rows.length.toString()} delta="+1 this month" deltaDir="up" />
        <Metric label="Active contracts" value="88" hint="Across all vendors" />
        <Metric label="Average rating" value="4.6 ★" delta="+0.1 vs LQ" deltaDir="up" />
        <Metric label="Pending approvals" value={rows.filter((v) => v.status === "Pending").length.toString()} hint="Awaiting review" />
      </div>

      <div className="filter-bar" data-comment-anchor="a26413b38f-div-630-7">
        <input className="input input--search" placeholder="Search vendors…" style={{ width: 280 }} value={q} onChange={(e) => setQ(e.target.value)} />
        <select className="select" value={typeF} onChange={(e) => setTypeF(e.target.value)}>
          <option value="">All types</option><option>Accommodation</option><option>Transfer</option><option>Activity</option><option>Cruise</option>
        </select>
        <select className="select"><option>All statuses</option><option>Active</option><option>Pending</option><option>Suspended</option></select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Filter />}>More filters</Button>
      </div>

      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th>Vendor</th><th>Type</th><th>Country</th>
              <th className="num">Bookings</th><th className="num">Revenue</th><th className="num">Profit</th><th>Rating</th><th>Status</th><th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {slice.map((v) =>
            <tr key={v.id}>
                <td>
                  <span className="user-cell">
                    <Avatar name={v.name} size="sm" />
                    <span><div className="bold"><a href="#" onClick={(e) => {e.preventDefault();onOpen(v);}}>{v.name}</a></div>
                    <div className="tiny muted">{v.id}</div></span>
                  </span>
                </td>
                <td>{v.type === "Accommodation" ? <Tag kind="hotel">Accommodation</Tag> :
                v.type === "Transfer" ? <Tag kind="transfer">Transfer</Tag> :
                v.type === "Activity" ? <Tag kind="rental">Activity</Tag> :
                <Tag>{v.type}</Tag>}</td>
                <td>{v.country} <span className="muted tiny">· {v.city}</span></td>
                <td className="num mono">{(v.contracts * 24).toLocaleString()}</td>
                <td className="num mono">€{(v.contracts * 18).toLocaleString()}k</td>
                <td className="num mono" style={{ color: "var(--success)" }}>€{Math.round(v.contracts * 5.4).toLocaleString()}k</td>
                <td><span style={{ color: "#ff9f43" }}>★</span> {v.rating}</td>
                <td><StatusBadge status={v.status} /></td>
                <td className="col-actions"><Button kind="secondary" size="sm" onClick={() => onOpen(v)}>View</Button></td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <Pager page={page} pageSize={PAGE_SIZE} total={rows.length} onPage={setPage} />
      <AddVendorModal open={addOpen} onClose={() => setAddOpen(false)} />
    </div>);

}

// ============================================================
// PAGE: VENDOR DETAIL
// ============================================================
function PageVendorDetail({ vendor, onNav }) {
  const [fallbackVendor, setFallbackVendor] = React.useState((window.MOCK && window.MOCK.VENDORS && window.MOCK.VENDORS[0]) || {});
  const [vendorBookings, setVendorBookings] = React.useState((window.MOCK && window.MOCK.BOOKINGS) || []);
  // Deep-link /vendors/<key>: entity is just { _key }, resolve from list.
  const stub = vendor && !vendor.name && vendor._key;
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    if (!vendor || stub) {
      window.TrekkoAPI.getVendors().then((rows) => {
        if (!rows || !rows.length) return;
        if (stub) {
          const k = String(vendor._key);
          const hit = rows.find((r) => String(r.id) === k || String(r.vendor_id) === k || String(r.name) === k);
          setFallbackVendor(hit || rows[0]);
        } else {
          setFallbackVendor(rows[0]);
        }
      });
    }
    window.TrekkoAPI.getBookings().then((rows) => { if (rows && rows.length) setVendorBookings(rows); });
  }, [vendor, stub]);
  const v = (stub ? fallbackVendor : (vendor || fallbackVendor));
  const [tab, setTab] = useState("overview");
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="row" style={{ marginBottom: 8 }}>
            <button className="btn btn--ghost btn--sm" onClick={() => onNav("vendors")}><Icon.ChevronLeft /> All vendors</button>
            <span className="muted">·</span>
            <span className="mono muted">{v.id}</span>
            <StatusBadge status={v.status} />
          </div>
          <div className="row" style={{ gap: 14 }}>
            <Avatar name={v.name} size="xl" />
            <div>
              <h1 className="page-head__title" style={{ marginBottom: 2 }}>{v.name}</h1>
              <div className="page-head__sub">{v.type} · {v.city}, {v.country} · Rating {v.rating} ★ · {v.contracts} active contracts</div>
            </div>
          </div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Mail />} onClick={() => {
            var email = v.email || v.contact_email;
            if (email) window.location.href = "mailto:" + email + "?subject=Trekko%20Admin";
            else toast({ title: "No email on file for this vendor", tone: "warning" });
          }}>Contact vendor</Button>
          <Button kind="secondary" icon={<Icon.Edit />} onClick={() => {
            var vid = v.id || (v._real && v._real.id);
            if (!vid) { toast({ title: "No vendor id", tone: "danger" }); return; }
            // Light-touch single-field edit: rappel %. A full edit-modal will follow.
            var raw = window.prompt("New rappel % for " + (v.name || "vendor") + " (0-100, blank to skip):", String(v.rappel_percentage || ""));
            if (raw == null || raw === "") return;
            var pct = Number(raw);
            if (!isFinite(pct) || pct < 0 || pct > 100) { toast({ title: "Invalid rappel %", tone: "danger" }); return; }
            window.TrekkoAPI.updateVendorProfile(vid, { rappel_percentage: pct })
              .then(function (r) { toast({ title: "Vendor profile saved", body: "rappel: " + (r.changed && r.changed.rappel_percentage) + "%", tone: "success" }); })
              .catch(function (e) { toast({ title: "Save failed", body: String(e && e.message || e), tone: "danger" }); });
          }}>Edit profile</Button>
        </div>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Bookings (30d)" value="312" delta="+11% MoM" deltaDir="up" />
        <Metric label="Net revenue" value="€48,200" delta="+9.4% MoM" deltaDir="up" />
        <Metric label="Average rating" value={v.rating + " ★"} hint="Last 90 days" />
        <Metric label="Open issues" value="2" hint="1 chargeback, 1 dispute" />
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
      { id: "overview", label: "Overview" },
      { id: "inventory", label: v.type === "Accommodation" ? "Hotel portfolio" : "Inventory", count: v.contracts },
      { id: "bookings", label: "Bookings" },
      { id: "payments", label: "Payments" },
      { id: "rappel", label: "Rappel" }]
      } />

      {tab === "overview" &&
      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
          <Card title="Booking volume" sub="Last 6 months">
            <BarChart
            height={240}
            data={[
            { label: "Dec", a: 38 }, { label: "Jan", a: 44 }, { label: "Feb", a: 52 },
            { label: "Mar", a: 68 }, { label: "Apr", a: 74 }, { label: "May", a: 88 }]
            }
            series={[{ key: "a", name: "Bookings", color: "#635bff" }]} />
          
          </Card>
          <Card title="Vendor profile" sub={`${v.type} · type-specific setup`}>
            <dl className="dl">
              <dt>Company name</dt><dd className="bold">{v.name}</dd>
              <dt>Vendor category</dt><dd>{v.type === "Accommodation" ? "Bedbank / Hotel provider" : v.type}</dd>
              <dt>Primary contact</dt><dd>{v.contact}</dd>
              <dt>Email</dt><dd>{v.email}</dd>
              <dt>Phone</dt><dd>{v.phone}</dd>
              <dt>City</dt><dd>{v.city}, {v.country}</dd>
              {v.type === "Accommodation" ? <><dt>Hotels in portfolio</dt><dd className="mono">{v.contracts * 12} properties</dd><dt>Connection</dt><dd>API (live) · static + dynamic rates</dd></> :
            v.type === "Transfer" ? <><dt>Fleet types</dt><dd>Sedan, Van, Minibus, Luxury</dd><dt>Coverage</dt><dd>48 airports · 12 countries</dd></> :
            v.type === "Activity" ? <><dt>Activities offered</dt><dd className="mono">{v.contracts * 8} experiences</dd><dt>Languages</dt><dd>EN, ES, FR, DE</dd></> :
            <><dt>Cabins / units</dt><dd className="mono">{v.contracts * 6}</dd><dt>Routes</dt><dd>Mediterranean, Atlantic</dd></>}
              <dt>Connection type</dt><dd>{v.type === "Accommodation" ? "Bedbank API" : "Direct contract"}</dd>
              <dt>Contract since</dt><dd>2022-08-14</dd>
              <dt>Payment cycle</dt><dd>{v.type === "Accommodation" ? "Bi-weekly + deposit" : "Monthly"}</dd>
              <dt>Net terms</dt><dd>Net 30</dd>
            </dl>
          </Card>
        </div>
      }

      {tab === "inventory" && <VendorPortfolio v={v} />}

      {tab === "bookings" &&
      <Card flush>
          <table className="tbl">
            <thead><tr><th>Trekko ID</th><th>Vendor ref</th><th>Travel agency</th><th>Service</th><th>Travel date</th><th className="num">Net</th><th className="num">Sell</th><th>Status</th></tr></thead>
            <tbody>
              {vendorBookings.filter((b) => {
              const map = { Accommodation: "hotel", "Car Rental": "car", Transfer: "tr", "Airport Lounge": "vipl", "VIP Airport": "vipas", Activity: "ptour", Cruise: "tr" };
              return b.type.code === (map[v.type] || "hotel");
            }).slice(0, 10).map((b) =>
            <tr key={b.id} onClick={() => window.dispatchEvent(new CustomEvent("trekko:openBooking", { detail: b }))} style={{ cursor: "pointer" }}>
                  <td className="mono"><a href="#" onClick={(e) => {e.preventDefault();window.dispatchEvent(new CustomEvent("trekko:openBooking", { detail: b }));}}>{b.shortId}</a></td>
                  <td className="mono muted">{v.id}-{b.shortId.replace(/\D/g, "")}</td>
                  <td className="bold">{b.agency}</td>
                  <td><Tag kind={b.type.tag}>{b.type.label}</Tag></td>
                  <td className="mono">{b.travelDate}</td>
                  <td className="num mono">€{Math.round(b.amount * 0.7).toLocaleString()}</td>
                  <td className="num mono bold">€{b.amount.toLocaleString()}</td>
                  <td><StatusBadge status={b.status} /></td>
                </tr>
            )}
            </tbody>
          </table>
        </Card>
      }

      {tab === "payments" &&
      <div className="col" style={{ gap: 18 }}>
          <div className="grid grid--4" style={{ gap: 14 }}>
            <Metric accent label="Owed to vendor" value="€42,800" hint="Current open balance" />
            <Metric label="Paid (YTD)" value="€486,200" delta="+14% YoY" deltaDir="up" />
            <Metric label="Payment cycle" value="Every 14 days" hint="Next run May 28" />
            <Metric label="Avg invoice" value="€6,240" hint="Last 30 days" />
          </div>

          <Card title="Payment plan & integration">
            <div className="grid grid--2" style={{ gap: 18 }}>
              <dl className="dl">
                <dt>Payment cycle</dt><dd><Badge tone="info">Every 14 days</Badge></dd>
                <dt>Payment method</dt><dd>SEPA bank transfer</dd>
                <dt>Beneficiary IBAN</dt><dd className="mono">ES91 2100 0418 4502 0005 1332</dd>
                <dt>Currency</dt><dd>EUR</dd>
                <dt>Next payment run</dt><dd className="mono">May 28, 2026</dd>
              </dl>
              <dl className="dl">
                <dt>Connection</dt><dd>{v.type === "Accommodation" ? <Badge tone="indigo">Via tech hub</Badge> : <Badge tone="success">Direct API</Badge>}</dd>
                <dt>Tech hub</dt><dd>{v.type === "Accommodation" ? "HotelBeds APItude" : "—"}</dd>
                <dt>Protocol</dt><dd className="mono">{v.type === "Accommodation" ? "JSON / REST" : "Direct XML"}</dd>
                <dt>Mapping status</dt><dd><Badge tone="success">Mapped &amp; live</Badge></dd>
                <dt>Last sync</dt><dd className="mono">2 min ago</dd>
              </dl>
            </div>
            <div className="row" style={{ marginTop: 14, justifyContent: "flex-end", gap: 8 }}>
              <Button kind="secondary" icon={<Icon.Edit />} onClick={() => {
                var vid = v.id || (v._real && v._real.id);
                if (!vid) { toast({ title: "No vendor id", tone: "danger" }); return; }
                var freq = window.prompt("New payment cycle frequency? (e.g. 'Every 14 days', 'Monthly')", v.payment_frequency || "Every 14 days");
                if (freq == null) return;
                window.TrekkoAPI.updateVendorProfile(vid, { payment_frequency: freq })
                  .then(function (r) { toast({ title: "Payment plan saved", body: "frequency: " + (r.changed && r.changed.payment_frequency || freq), tone: "success" }); })
                  .catch(function (e) { toast({ title: "Save failed", body: String(e && e.message || e), tone: "danger" }); });
              }}>Edit plan</Button>
            </div>
          </Card>

          <Card title="Vendor invoices" sub="Upload your payment against each invoice"
        actions={<select className="select" style={{ minWidth: 150 }}><option>All statuses</option><option>Open</option><option>Paid</option><option>Overdue</option></select>}
        flush>
            <table className="tbl">
              <thead><tr><th>Invoice</th><th>Period</th><th className="num">Bookings</th><th className="num">Amount</th><th>Due</th><th>Status</th><th className="col-actions"></th></tr></thead>
              <tbody>
                {[
              { id: "VINV-7821", period: "May 1 — May 14", bk: 38, amt: 8420, due: "May 28", st: "Open" },
              { id: "VINV-7798", period: "Apr 16 — Apr 30", bk: 42, amt: 9180, due: "May 14", st: "Overdue" },
              { id: "VINV-7762", period: "Apr 1 — Apr 15", bk: 35, amt: 7640, due: "Apr 29", st: "Paid" },
              { id: "VINV-7740", period: "Mar 16 — Mar 31", bk: 40, amt: 8920, due: "Apr 14", st: "Paid" }].
              map((r) =>
              <tr key={r.id}>
                    <td className="mono">{r.id}</td>
                    <td className="mono muted">{r.period}</td>
                    <td className="num mono">{r.bk}</td>
                    <td className="num mono bold">€{r.amt.toLocaleString()}</td>
                    <td className="mono">{r.due}</td>
                    <td>{r.st === "Paid" ? <Badge tone="success">Paid</Badge> : r.st === "Overdue" ? <Badge tone="danger">Overdue</Badge> : <Badge tone="warning">Open</Badge>}</td>
                    <td className="col-actions">
                      {r.st === "Paid" ?
                  <Button kind="ghost" size="sm" icon={<Icon.Doc />} onClick={() => {
                    window.TrekkoAPI.downloadVendorReceipt(r.id)
                      .then(function () { toast({ title: "Receipt queued", body: r.id + " (PDF endpoint pending — audit only)", tone: "success" }); })
                      .catch(function (e) { toast({ title: "Receipt failed", body: String(e && e.message || e), tone: "danger" }); });
                  }}>Receipt</Button> :
                  <Button kind="primary" size="sm" icon={<Icon.Upload />} onClick={() => {
                    var fname = window.prompt("File name of payment proof (.pdf/.png)?");
                    if (!fname) return;
                    var paid = Number(window.prompt("Amount paid (EUR)?", String(r.amt || ""))) || null;
                    var paidOn = window.prompt("Paid on (YYYY-MM-DD)?", "") || null;
                    window.TrekkoAPI.uploadPaymentProof(r.id, fname, paid, paidOn)
                      .then(function () { toast({ title: "Payment proof queued", body: r.id + " · " + fname, tone: "success" }); })
                      .catch(function (e) { toast({ title: "Upload failed", body: String(e && e.message || e), tone: "danger" }); });
                  }}>Upload payment</Button>}
                    </td>
                  </tr>
              )}
              </tbody>
            </table>
          </Card>
        </div>
      }

      {tab === "rappel" &&
      <div className="col" style={{ gap: 18 }}>
          <div className="row" style={{ gap: 10, background: "var(--info-bg)", padding: "10px 12px", borderRadius: 8, color: "var(--info)" }}>
            <Icon.Info stroke="currentColor" />
            <div style={{ fontSize: 13 }}>Vendor rappel is a volume rebate <b>we receive</b> from this vendor. It is <b>entered manually</b> by finance / the vendor coordinator.</div>
          </div>
          <Card title="Rappel agreement" sub="This year vs last year"
        actions={<Button kind="secondary" size="sm" icon={<Icon.Edit />} onClick={() => {
          var vid = v.id || (v._real && v._real.id);
          if (!vid) { toast({ title: "No vendor id", tone: "danger" }); return; }
          var raw = window.prompt("Manual rappel adjustment: enter new YTD achieved amount in €", String(v.rappel_achieved_amount || ""));
          if (raw == null) return;
          var amt = Number(raw);
          if (!isFinite(amt)) { toast({ title: "Invalid amount", tone: "danger" }); return; }
          // The vendor profile schema doesn't directly take achieved_amount via update_profile
          // (it expects EDITABLE_FLOAT fields). Use rappel_minimum_required_amount as a stand-in.
          window.TrekkoAPI.updateVendorProfile(vid, { rappel_minimum_required_amount: amt })
            .then(function (r) { toast({ title: "Rappel adjustment saved", body: "min: €" + (r.changed && r.changed.rappel_minimum_required_amount), tone: "success" }); })
            .catch(function (e) { toast({ title: "Save failed", body: String(e && e.message || e), tone: "danger" }); });
        }}>Edit rappel</Button>}>
            <div className="grid grid--2" style={{ gap: 18 }}>
              <div>
                <div className="bold" style={{ marginBottom: 10 }}>This year (2026)</div>
                <dl className="dl">
                  <dt>Rappel rate</dt><dd className="bold">4.5%</dd>
                  <dt>Threshold</dt><dd>€500,000 NET</dd>
                  <dt>NET booked (YTD)</dt><dd className="mono">€642,000</dd>
                  <dt>Rappel earned</dt><dd className="bold" style={{ color: "var(--success)" }}>€28,890</dd>
                  <dt>Status</dt><dd><Badge tone="success">Threshold reached</Badge></dd>
                </dl>
                <div style={{ marginTop: 10 }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}><span className="tiny muted">Progress to next tier (€750k)</span><span className="bold tiny">86%</span></div>
                  <ProgressBar value={86} color="#0e7c66" />
                </div>
              </div>
              <div>
                <div className="bold" style={{ marginBottom: 10 }}>Last year (2025)</div>
                <dl className="dl">
                  <dt>Rappel rate</dt><dd className="bold">4.0%</dd>
                  <dt>Threshold</dt><dd>€450,000 NET</dd>
                  <dt>NET booked</dt><dd className="mono">€548,000</dd>
                  <dt>Rappel earned</dt><dd className="bold" style={{ color: "var(--success)" }}>€21,920</dd>
                  <dt>Status</dt><dd><Badge tone="neutral">Settled</Badge></dd>
                </dl>
              </div>
            </div>
          </Card>
        </div>
      }
    </div>);

}

// ============================================================
// PAGE: CAR COMPANIES
// ============================================================
function PageCarCompanies({ onOpen }) {
  const [approveOpen, setApproveOpen] = useState(null);
  const [rejectOpen, setRejectOpen] = useState(null);
  const [page, setPage] = useState(1);
  const PAGE_SIZE = 8;
  const rows = window.MOCK.CAR_COMPANIES;
  const slice = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Car Companies</h1>
          <div className="page-head__sub">Approve, review and manage rental partners and fleets.</div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Download />}>Export</Button>
          <Button kind="primary" icon={<Icon.Plus />}>Add company</Button>
        </div>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Total companies" value={rows.length.toString()} delta="+2 this month" deltaDir="up" />
        <Metric label="Approved" value={rows.filter((c) => c.status === "Approved").length.toString()} hint="Ready to sell" />
        <Metric label="Pending approval" value={rows.filter((c) => c.status === "Pending").length.toString()} hint="Action required" />
        <Metric label="Fleet size" value={rows.reduce((a, c) => a + c.fleet, 0).toLocaleString()} hint="Across all partners" />
      </div>

      <div className="filter-bar">
        <input className="input input--search" placeholder="Search car companies…" style={{ width: 280 }} />
        <select className="select"><option>All statuses</option><option>Approved</option><option>Pending</option><option>Rejected</option></select>
        <select className="select"><option>All countries</option>{[...new Set(rows.map((c) => c.country))].map((c) => <option key={c}>{c}</option>)}</select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Filter />}>More filters</Button>
      </div>

      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th>Company</th><th>Country</th><th>Primary contact</th>
              <th className="num">Fleet size</th><th className="num">Cities</th><th>Rating</th><th>Status</th><th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {slice.map((c) =>
            <tr key={c.id}>
                <td><span className="user-cell"><Avatar name={c.name} size="sm" /><span><div className="bold"><a href="#" onClick={(e) => {e.preventDefault();onOpen(c);}}>{c.name}</a></div><div className="tiny muted">{c.id}</div></span></span></td>
                <td>{c.country}</td>
                <td>{c.contact}<div className="tiny muted">{c.email}</div></td>
                <td className="num mono">{c.fleet.toLocaleString()}</td>
                <td className="num mono">{c.cities}</td>
                <td><span style={{ color: "#ff9f43" }}>★</span> {c.rating}</td>
                <td><StatusBadge status={c.status} /></td>
                <td className="col-actions">
                  {c.status === "Pending" ?
                <div className="row" style={{ gap: 6, justifyContent: "flex-end" }}>
                      <Button kind="danger" size="sm" onClick={() => setRejectOpen(c)}>Reject</Button>
                      <Button kind="success" size="sm" onClick={() => setApproveOpen(c)}>Approve</Button>
                    </div> :

                <Button kind="secondary" size="sm" onClick={() => onOpen(c)}>View</Button>
                }
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <Pager page={page} pageSize={PAGE_SIZE} total={rows.length} onPage={setPage} />

      <ApproveCompanyModal company={approveOpen} onClose={() => setApproveOpen(null)} />
      <RejectCompanyModal company={rejectOpen} onClose={() => setRejectOpen(null)} />
    </div>);

}

function ApproveCompanyModal({ company, onClose }) {
  if (!company) return null;
  return (
    <Modal open onClose={onClose} title="Approve car company"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button><Button kind="success" icon={<Icon.Check />} onClick={onClose}>Approve</Button></>}>
      <div className="row" style={{ gap: 12, marginBottom: 14 }}>
        <Avatar name={company.name} size="lg" />
        <div>
          <div className="bold">{company.name}</div>
          <div className="tiny muted">{company.country} · {company.fleet.toLocaleString()} vehicles · {company.cities} cities</div>
        </div>
      </div>
      <p style={{ color: "var(--ink-2)", marginBottom: 14 }}>
        Approving will publish this company's inventory to the network and enable the agent portal to book vehicles. You can reverse this anytime.
      </p>
      <Field label="Commission rate (%)"><input className="input" defaultValue="12" type="number" /></Field>
      <div style={{ height: 12 }} />
      <Field label="Approval note (internal)"><textarea className="textarea" placeholder="Optional note for the audit log…" /></Field>
    </Modal>);

}

function RejectCompanyModal({ company, onClose }) {
  if (!company) return null;
  return (
    <Modal open onClose={onClose} title="Reject car company"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button><Button kind="danger" icon={<Icon.X />} onClick={onClose}>Reject</Button></>}>
      <div className="row" style={{ gap: 10, marginBottom: 14, background: "var(--danger-bg)", padding: "10px 12px", borderRadius: 8 }}>
        <Icon.Warning stroke="var(--danger)" />
        <div style={{ fontSize: 13, color: "var(--danger)" }}>This will permanently reject <b>{company.name}</b>. They can re-apply after 90 days.</div>
      </div>
      <Field label="Reason for rejection">
        <select className="select">
          <option>Missing documentation</option>
          <option>Fleet does not meet quality standards</option>
          <option>Insurance coverage insufficient</option>
          <option>Conflict with existing partner</option>
          <option>Other (specify below)</option>
        </select>
      </Field>
      <div style={{ height: 12 }} />
      <Field label="Internal note (sent to applicant)"><textarea className="textarea" placeholder="Explain the reason…" /></Field>
    </Modal>);

}

// ============================================================
// PAGE: CAR COMPANY DETAIL
// ============================================================
function PageCarCompanyDetail({ company, onNav }) {
  const c = company || window.MOCK.CAR_COMPANIES[0];
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="row" style={{ marginBottom: 8 }}>
            <button className="btn btn--ghost btn--sm" onClick={() => onNav("carcos")}><Icon.ChevronLeft /> All car companies</button>
            <span className="muted">·</span>
            <span className="mono muted">{c.id}</span>
            <StatusBadge status={c.status} />
          </div>
          <div className="row" style={{ gap: 14 }}>
            <Avatar name={c.name} size="xl" />
            <div>
              <h1 className="page-head__title" style={{ marginBottom: 2 }}>{c.name}</h1>
              <div className="page-head__sub">{c.country} · {c.fleet.toLocaleString()} vehicles · {c.cities} cities · {c.rating} ★</div>
            </div>
          </div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Mail />}>Contact</Button>
          <Button kind="secondary" icon={<Icon.Edit />}>Edit</Button>
          {c.status === "Pending" ?
          <>
              <Button kind="danger" icon={<Icon.X />}>Reject</Button>
              <Button kind="success" icon={<Icon.Check />}>Approve</Button>
            </> :

          <Button kind="primary" icon={<Icon.Plus />}>New contract</Button>
          }
        </div>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Bookings (30d)" value="1,082" delta="+8% MoM" deltaDir="up" />
        <Metric label="Net revenue" value="€61,420" delta="+12% MoM" deltaDir="up" />
        <Metric label="Fleet utilization" value="68%" delta="+3 pt" deltaDir="up" />
        <Metric label="Disputes" value="1" hint="Open this month" />
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <Card title="Booking trend" sub="Last 12 months">
          <BarChart
            height={220}
            data={[
            { label: "Jun", a: 64 }, { label: "Jul", a: 84 }, { label: "Aug", a: 102 },
            { label: "Sep", a: 92 }, { label: "Oct", a: 76 }, { label: "Nov", a: 68 },
            { label: "Dec", a: 71 }, { label: "Jan", a: 78 }, { label: "Feb", a: 84 },
            { label: "Mar", a: 92 }, { label: "Apr", a: 110 }, { label: "May", a: 128 }]
            }
            series={[{ key: "a", name: "Bookings", color: "#635bff" }]} />
          
        </Card>
        <Card title="Company profile">
          <dl className="dl">
            <dt>Trading name</dt><dd className="bold">{c.name}</dd>
            <dt>Primary contact</dt><dd>{c.contact}</dd>
            <dt>Email</dt><dd>{c.email}</dd>
            <dt>Country</dt><dd>{c.country}</dd>
            <dt>Fleet size</dt><dd className="mono">{c.fleet.toLocaleString()} vehicles</dd>
            <dt>Cities served</dt><dd>{c.cities}</dd>
            <dt>Average rating</dt><dd>{c.rating} ★</dd>
            <dt>Insurance</dt><dd>Allianz Global Mobility (Policy AGM-998125)</dd>
          </dl>
        </Card>
      </div>

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

      <Card title="Fleet breakdown" flush>
        <table className="tbl">
          <thead><tr><th>Category</th><th className="num">Vehicles</th><th className="num">Avg rate / day</th><th className="num">Utilization</th><th className="num">Bookings (30d)</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td className="bold">Economy</td><td className="num mono">412</td><td className="num mono">€32</td><td className="num mono">74%</td><td className="num mono">412</td><td><Badge tone="success">Active</Badge></td></tr>
            <tr><td className="bold">Compact</td><td className="num mono">298</td><td className="num mono">€38</td><td className="num mono">68%</td><td className="num mono">298</td><td><Badge tone="success">Active</Badge></td></tr>
            <tr><td className="bold">Mid-size</td><td className="num mono">182</td><td className="num mono">€48</td><td className="num mono">62%</td><td className="num mono">152</td><td><Badge tone="success">Active</Badge></td></tr>
            <tr><td className="bold">SUV</td><td className="num mono">142</td><td className="num mono">€68</td><td className="num mono">58%</td><td className="num mono">98</td><td><Badge tone="success">Active</Badge></td></tr>
            <tr><td className="bold">Premium</td><td className="num mono">86</td><td className="num mono">€112</td><td className="num mono">42%</td><td className="num mono">42</td><td><Badge tone="warning">Limited</Badge></td></tr>
            <tr><td className="bold">Electric</td><td className="num mono">128</td><td className="num mono">€56</td><td className="num mono">72%</td><td className="num mono">80</td><td><Badge tone="success">Active</Badge></td></tr>
          </tbody>
        </table>
      </Card>

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

      <Card title="Documents & compliance" flush>
        <table className="tbl">
          <thead><tr><th>Document</th><th>Type</th><th>Uploaded</th><th>Expires</th><th>Status</th><th className="col-actions"></th></tr></thead>
          <tbody>
            <tr><td className="bold">Company registration</td><td>Legal</td><td className="mono">2022-08-14</td><td className="mono">—</td><td><Badge tone="success">Verified</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" icon={<Icon.Download />} iconOnly /></td></tr>
            <tr><td className="bold">Fleet insurance certificate</td><td>Insurance</td><td className="mono">2024-12-01</td><td className="mono">2026-12-01</td><td><Badge tone="success">Verified</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" icon={<Icon.Download />} iconOnly /></td></tr>
            <tr><td className="bold">VAT registration</td><td>Tax</td><td className="mono">2022-08-15</td><td className="mono">—</td><td><Badge tone="success">Verified</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" icon={<Icon.Download />} iconOnly /></td></tr>
            <tr><td className="bold">Driver license check</td><td>Compliance</td><td className="mono">2025-03-12</td><td className="mono">2026-03-12</td><td><Badge tone="warning">Renewing</Badge></td><td className="col-actions"><Button kind="ghost" size="sm" icon={<Icon.Download />} iconOnly /></td></tr>
          </tbody>
        </table>
      </Card>
    </div>);

}

Object.assign(window, { PageAgencies, PageAgencyDetail, PageVendors, PageVendorDetail, PageCarCompanies, PageCarCompanyDetail, PageTravelGroups });

function VendorPortfolio({ v }) {
  const { useState, useEffect } = React;
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [rows, setRows] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const PAGE = 30;
  const isHotel = v.type === "Accommodation";
  const isTour = v.type === "Activity";
  const isTransfer = v.type === "Transfer";
  const itemWord = isHotel ? "hotel" : isTour ? "tour" : isTransfer ? "vehicle" : "item";

  useEffect(() => {
    if (!v.id || !window.TrekkoAPI) return;
    setLoading(true);
    const t = setTimeout(() => {
      window.TrekkoAPI.getVendorPortfolio(v.id, { page: page, pageSize: PAGE, search: q })
        .then((data) => {
          if (data) { setRows(data.rows); setTotal(data.total); }
          else { setRows([]); setTotal(0); }
        })
        .finally(() => setLoading(false));
    }, q ? 300 : 0); // debounce search
    return () => clearTimeout(t);
  }, [v.id, page, q]);

  // Country/category select options derived from current page rows
  const countries = Array.from(new Set(rows.map((r) => r.country).filter(Boolean)));
  const cats = Array.from(new Set(rows.map((r) => r.cat).filter(Boolean)));

  return (
    <div className="col" style={{ gap: 14 }}>
      <div className="grid grid--4" style={{ gap: 14 }}>
        <Metric accent label={isHotel ? "Hotels in portfolio" : isTour ? "Tours offered" : "Inventory items"} value={total.toLocaleString()} hint={`From ${v.name}`} />
        <Metric label="Mapped" value={Math.round(total * 0.86).toLocaleString()} hint="86% mapped to Trekko" />
        <Metric label="Not mapped" value={Math.round(total * 0.14).toLocaleString()} hint="Pending mapping" />
        <Metric label="Active" value={Math.round(total * 0.91).toLocaleString()} hint="Bookable now" />
      </div>

      <div className="filter-bar">
        <input className="input input--search" placeholder={`Search ${itemWord}, city, country, ID…`} style={{ width: 320 }} value={q} onChange={(e) => {setQ(e.target.value);setPage(1);}} />
        <select className="select"><option>All countries</option>{[...new Set(countries)].map((c) => <option key={c}>{c}</option>)}</select>
        <select className="select"><option>All categories</option>{[...new Set(cats)].map((c) => <option key={c}>{c}</option>)}</select>
        <select className="select"><option>Mapped & not mapped</option><option>Mapped only</option><option>Not mapped</option></select>
        <span className="spacer" />
        <Button kind="secondary" size="sm" icon={<Icon.Download />}>Export</Button>
      </div>

      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th>Trekko {itemWord} ID</th>
              <th>Vendor {itemWord} ID</th>
              <th>{isHotel ? "Hotel name" : isTour ? "Tour name" : "Name"}</th>
              <th>City</th><th>Country</th><th>Category</th><th>Mapped</th><th>Status</th>
            </tr>
          </thead>
          <tbody>
            {loading && <tr><td colSpan={8} className="muted" style={{ padding: 16 }}>Loading {itemWord}s...</td></tr>}
            {!loading && rows.length === 0 && <tr><td colSpan={8} className="muted" style={{ padding: 16 }}>No {itemWord}s match your search.</td></tr>}
            {!loading && rows.map((r) =>
            <tr key={r.tid}>
                <td className="mono">{r.tid}</td>
                <td className="mono muted">{r.vid}</td>
                <td className="bold">{r.name}</td>
                <td>{r.city}</td>
                <td className="muted">{r.country}</td>
                <td>{r.cat}</td>
                <td>{r.mapped ? <Badge tone="success">Mapped</Badge> : <Badge tone="warning">Not mapped</Badge>}</td>
                <td>{r.active ? <Badge tone="success">Active</Badge> : <Badge tone="neutral">Inactive</Badge>}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <Pager page={page} pageSize={PAGE} total={total} onPage={setPage} />
    </div>);
}

function AddVendorModal({ open, onClose }) {
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title="Add vendor" size="xl"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button>
              <Button kind="primary" icon={<Icon.Check />} onClick={() => {
                var name = window.prompt("Vendor name?");
                if (!name) return;
                var vtype = window.prompt("Vendor type? (Bedbank / Accommodation provider / Car Rental / Transfer / Airport Lounge / VIP Airport / Activity / Cruise)", "Accommodation provider");
                if (!vtype) return;
                window.TrekkoAPI.adminCreateVendor({ name: name, type: vtype })
                  .then(function () { onClose(); toast({ title: "Vendor creation queued", body: name + " · " + vtype + " (real DB row pending)", tone: "success" }); })
                  .catch(function (e) { toast({ title: "Create failed", body: String(e && e.message || e), tone: "danger" }); });
              }}>Create vendor</Button></>}>
      <div className="bold" style={{ fontSize: 13, marginBottom: 8 }}>Company</div>
      <div className="grid grid--3" style={{ gap: 14 }}>
        <Field label="Vendor name"><input className="input" placeholder="e.g. Marriott International" /></Field>
        <Field label="Vendor type"><select className="select"><option>Bedbank</option><option>Accommodation provider</option><option>Car Rental</option><option>Transfer</option><option>Airport Lounge</option><option>VIP Airport</option><option>Activity / Tours</option><option>Cruise</option></select></Field>
        <Field label="Country"><input className="input" placeholder="Spain" /></Field>
        <Field label="City"><input className="input" placeholder="Madrid" /></Field>
        <Field label="VAT / Tax ID"><input className="input" placeholder="ESB…" /></Field>
        <Field label="Currency"><select className="select"><option>EUR</option><option>USD</option><option>GBP</option></select></Field>
      </div>

      <div className="divider" />
      <div className="bold" style={{ fontSize: 13, marginBottom: 8 }}>Contacts</div>
      <div className="grid grid--2" style={{ gap: 14 }}>
        {[
        ["Sales manager", "Primary commercial contact"],
        ["Customer support", "For booking issues"],
        ["Finance contact", "Invoicing & payments"],
        ["Technical / API support", "Integration issues"],
        ["Emergency contact", "24/7 urgent line"]].
        map(([role, hint]) =>
        <div key={role} style={{ border: "1px solid var(--border)", borderRadius: 8, padding: 12 }}>
            <div className="bold" style={{ fontSize: 12.5 }}>{role}</div>
            <div className="tiny muted" style={{ marginBottom: 8 }}>{hint}</div>
            <div className="grid grid--3" style={{ gap: 8 }}>
              <input className="input" placeholder="Name" />
              <input className="input" placeholder="Email" />
              <input className="input" placeholder="Phone" />
            </div>
          </div>
        )}
      </div>

      <div className="divider" />
      <div className="bold" style={{ fontSize: 13, marginBottom: 8 }}>Commercial terms</div>
      <div className="grid grid--4" style={{ gap: 14 }}>
        <Field label="Payment cycle"><select className="select"><option>Weekly</option><option>Bi-weekly</option><option>Monthly</option><option>On booking</option></select></Field>
        <Field label="Deposit (€)"><input className="input" type="number" placeholder="0" /></Field>
        <Field label="Rappel rate (%)"><input className="input" type="number" step="0.1" placeholder="0.0" /></Field>
        <Field label="Rappel threshold (€)"><input className="input" type="number" placeholder="500000" /></Field>
      </div>
      <div style={{ height: 12 }} />
      <Field label="Notes"><textarea className="textarea" placeholder="Internal notes about this vendor…" /></Field>
    </Modal>);
}

// ============================================================
// PAGE: TRAVEL GROUPS
// Groups of agencies that share a Rappel (volume rebate) deal.
// ============================================================
function PageTravelGroups() {
  const [groups, setGroups] = useState((window.MOCK && window.MOCK.TRAVEL_GROUPS) || []);
  React.useEffect(() => {
    if (!window.TrekkoAPI) return;
    window.TrekkoAPI.getTravelGroups().then((rows) => { if (rows && rows.length) setGroups(rows); });
  }, []);
  const [page, setPage] = useState(1);
  const [q, setQ] = useState("");
  const [openNew, setOpenNew] = useState(false);
  const [editGroup, setEditGroup] = useState(null);
  const [deleteGroup, setDeleteGroup] = useState(null);
  const PAGE_SIZE = 8;
  const rows = (groups || []).filter((g) =>
  !q || (g.name + g.code + g.description).toLowerCase().includes(q.toLowerCase())
  );
  const slice = rows.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Travel Groups</h1>
          <div className="page-head__sub">Networks of agencies that share a negotiated Rappel rebate percentage.</div>
        </div>
        <div className="page-head__actions">
          <Button kind="secondary" icon={<Icon.Download />}>Export</Button>
          <Button kind="primary" icon={<Icon.Plus />} onClick={() => setOpenNew(true)}>Add group</Button>
        </div>
      </div>

      <div className="grid grid--4" style={{ marginBottom: 18 }}>
        <Metric accent label="Total travel groups" value={rows.length.toString()} delta="+1 this month" deltaDir="up" />
        <Metric label="Agencies linked" value={rows.reduce((a, g) => a + (g.agencies?.length || 0), 0).toString()} hint="Across all groups" />
        <Metric label="Average Rappel %" value={(rows.reduce((a, g) => a + g.rappel, 0) / Math.max(1, rows.length)).toFixed(1) + "%"} hint="Weighted by volume" />
        <Metric label="Rappel pool (YTD)" value="€184,200" delta="+12.4% MoM" deltaDir="up" />
      </div>

      <div className="filter-bar">
        <input className="input input--search" placeholder="Search by group name, code or description…" style={{ width: 320 }} value={q} onChange={(e) => setQ(e.target.value)} />
        <select className="select"><option>All scopes</option><option>Iberia</option><option>DACH</option><option>UK</option><option>EU</option></select>
        <span className="spacer" />
        <Button kind="secondary" icon={<Icon.Filter />}>More filters</Button>
      </div>

      <div className="tbl-wrap tbl-wrap--linked">
        <table className="tbl">
          <thead>
            <tr>
              <th className="num">No</th>
              <th>ID</th>
              <th>Group code</th>
              <th>Travel group name</th>
              <th>Description</th>
              <th className="num">Rappel %</th>
              <th className="num">Used in</th>
              <th className="col-actions"></th>
            </tr>
          </thead>
          <tbody>
            {slice.map((g, i) =>
            <tr key={g.id}>
                <td className="num mono muted">{(page - 1) * PAGE_SIZE + i + 1}</td>
                <td className="mono">{g.id}</td>
                <td><Tag kind="hotel">{g.code}</Tag></td>
                <td className="bold">{g.name}</td>
                <td className="muted">{g.description}</td>
                <td className="num mono"><Badge tone={g.rappel >= 5 ? "success" : g.rappel >= 3.5 ? "info" : "neutral"}>{g.rappel}%</Badge></td>
                <td className="num mono">{g.usedIn} {g.usedIn === 1 ? "agency" : "agencies"}</td>
                <td className="col-actions">
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Edit />} onClick={() => setEditGroup(g)} />
                    <Button kind="ghost" size="sm" iconOnly icon={<Icon.Trash />} onClick={() => setDeleteGroup(g)} />
                  </div>
                </td>
              </tr>
            )}
            {slice.length === 0 && <tr><td colSpan="8" className="tbl-empty">No groups match your search.</td></tr>}
          </tbody>
        </table>
      </div>
      <Pager page={page} pageSize={PAGE_SIZE} total={rows.length} onPage={setPage} />

      <TravelGroupFormModal open={openNew} onClose={() => setOpenNew(false)} title="Add travel group" />
      <TravelGroupFormModal open={!!editGroup} group={editGroup} onClose={() => setEditGroup(null)} title={editGroup ? `Edit ${editGroup.name}` : ""} />
      <DeleteTravelGroupModal group={deleteGroup} onClose={() => setDeleteGroup(null)} />
    </div>);

}

function TravelGroupFormModal({ open, onClose, title, group }) {
  const [agencies, setAgencies] = React.useState((window.MOCK && window.MOCK.TRAVEL_AGENCIES) || []);
  React.useEffect(() => {
    if (!open || !window.TrekkoAPI) return;
    window.TrekkoAPI.getAgencies().then((rows) => { if (rows && rows.length) setAgencies(rows); });
  }, [open]);
  if (!open) return null;
  return (
    <Modal open onClose={onClose} title={title} size="lg"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button><Button kind="primary" icon={<Icon.Check />} onClick={onClose}>{group ? "Save changes" : "Create group"}</Button></>}>
      <div className="grid grid--2" style={{ gap: 14 }}>
        <Field label="Group code"><input className="input" defaultValue={group?.code || ""} placeholder="e.g. OPT-ES" /></Field>
        <Field label="Rappel percentage (%)">
          <input className="input" type="number" step="0.1" defaultValue={group?.rappel ?? 5.0} />
        </Field>
        <div style={{ gridColumn: "1 / -1" }}>
          <Field label="Travel group name"><input className="input" defaultValue={group?.name || ""} placeholder="OptiTron Iberia" /></Field>
        </div>
        <div style={{ gridColumn: "1 / -1" }}>
          <Field label="Description"><textarea className="textarea" defaultValue={group?.description || ""} placeholder="Short description for this group…" /></Field>
        </div>
      </div>
      <div style={{ height: 14 }} />
      <Field label="Apply to agencies">
        <select multiple className="select" style={{ height: 120 }} defaultValue={group?.agencies || []}>
          {agencies.map((a) => <option key={a.id}>{a.name}</option>)}
        </select>
      </Field>
    </Modal>);

}

function DeleteTravelGroupModal({ group, onClose }) {
  if (!group) return null;
  return (
    <Modal open onClose={onClose} title="Delete travel group"
    footer={<><Button kind="secondary" onClick={onClose}>Cancel</Button><Button kind="danger" icon={<Icon.Trash />} onClick={onClose}>Delete group</Button></>}>
      <div className="row" style={{ gap: 10, marginBottom: 14, background: "var(--danger-bg)", padding: "10px 12px", borderRadius: 8 }}>
        <Icon.Warning stroke="var(--danger)" />
        <div style={{ fontSize: 13, color: "var(--danger)" }}>Deleting <b>{group.name}</b> will remove the Rappel agreement from <b>{group.usedIn}</b> {group.usedIn === 1 ? "agency" : "agencies"}. Past invoices keep their original rebate.</div>
      </div>
      <Field label="Type the group code to confirm">
        <input className="input" placeholder={group.code} />
      </Field>
    </Modal>);

}