/* ============================================================
   HQ Setup / Admin — manage Drivers, Vehicles, Locations
   ============================================================ */

const LICENSE_CLASSES = ["Class C", "CDL-C", "CDL-B", "CDL-A"];
const VEHICLE_TYPES = [["van", "Van"], ["car", "Car"], ["bus", "Minibus"], ["suv", "SUV"]];
const LOC_KINDS = [["airport", "Airport"], ["hotel", "Hotel"], ["venue", "Venue"], ["other", "Other"]];

function Toggle({ on, onChange }) {
  return (
    <button type="button" className={"toggle" + (on ? " on" : "")} onClick={() => onChange(!on)}>
      <span className="knob" />
    </button>
  );
}

function Field({ label, children }) {
  return <div><label className="lbl">{label}</label>{children}</div>;
}

/* ---------- Driver form ---------- */
function DriverForm({ state, driver, onClose }) {
  const [f, setF] = useState(driver
    ? { ...driver }
    : { name: "", phone: "", licenseClass: "Class C", license: "", licenseExp: "", vehicleId: null });
  const set = (k) => (e) => { const v = e.target.value; setF((s) => ({ ...s, [k]: v })); };
  const save = () => {
    if (!f.name.trim()) return;
    if (driver) Store.updateDriver(driver.id, f);
    else Store.addDriver(f);
    onClose();
  };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>{driver ? "Edit driver" : "Add driver"}</h3><div className="x" onClick={onClose}>✕</div></div>
        <div className="modal-b" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Full name"><input className="field" value={f.name} onChange={set("name")} placeholder="e.g. Marcus Bell" autoFocus /></Field>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <Field label="Phone"><input className="field" value={f.phone} onChange={set("phone")} placeholder="555-0100" /></Field>
            <Field label="License class">
              <select className="field" value={f.licenseClass} onChange={set("licenseClass")}>
                {LICENSE_CLASSES.map((c) => <option key={c} value={c}>{c}</option>)}
              </select>
            </Field>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12 }}>
            <Field label="License number"><input className="field mono" value={f.license} onChange={set("license")} placeholder="D-0000000" /></Field>
            <Field label="Expires"><input className="field" type="month" value={f.licenseExp} onChange={set("licenseExp")} /></Field>
          </div>
          <Field label="Assigned vehicle">
            <select className="field" value={f.vehicleId || ""} onChange={(e) => { const v = e.target.value || null; setF((s) => ({ ...s, vehicleId: v })); }}>
              <option value="">— Unassigned —</option>
              {state.vehicles.map((v) => {
                const holder = state.drivers.find((d) => d.vehicleId === v.id && (!driver || d.id !== driver.id));
                return <option key={v.id} value={v.id}>{v.name} · {v.plate}{holder ? ` (currently ${holder.name.split(" ")[0]})` : ""}</option>;
              })}
            </select>
          </Field>
          <div className="faint" style={{ fontSize: 11.5, display: "flex", alignItems: "center", gap: 6 }}><Icon name="schedule" style={{ width: 13, height: 13 }} /> Set this driver’s availability on the Schedule → Driver roster.</div>
          <div style={{ display: "flex", gap: 9, justifyContent: "space-between", marginTop: 4 }}>
            {driver
              ? <button className="btn btn-ghost" style={{ color: "var(--rose)" }} onClick={() => { if (confirm("Remove " + driver.name + "?")) { Store.removeDriver(driver.id); onClose(); } }}><Icon name="trash" style={{ width: 15, height: 15 }} /> Remove</button>
              : <span />}
            <div style={{ display: "flex", gap: 9 }}>
              <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" onClick={save}><Icon name="check" style={{ width: 16, height: 16 }} /> {driver ? "Save" : "Add driver"}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Vehicle form ---------- */
function VehicleForm({ state, vehicle, onClose }) {
  const [f, setF] = useState(vehicle
    ? { ...vehicle, driverId: (state.drivers.find((d) => d.vehicleId === vehicle.id) || {}).id || "" }
    : { name: "", type: "van", plate: "", seats: 13, host: false, driverId: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const guestCap = Math.max(0, Number(f.seats || 1) - 1 - (f.host ? 1 : 0));
  const save = () => {
    if (!f.name.trim()) return;
    const payload = { name: f.name, type: f.type, plate: f.plate, seats: Number(f.seats), host: !!f.host };
    let id = vehicle ? vehicle.id : null;
    if (vehicle) Store.updateVehicle(id, payload);
    else id = Store.addVehicle(payload);
    Store.assignDriverToVehicle(f.driverId, id);
    onClose();
  };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>{vehicle ? "Edit vehicle" : "Add vehicle"}</h3><div className="x" onClick={onClose}>✕</div></div>
        <div className="modal-b" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12 }}>
            <Field label="Name / call sign"><input className="field" value={f.name} onChange={set("name")} placeholder="e.g. Van 8" autoFocus /></Field>
            <Field label="Type">
              <select className="field" value={f.type} onChange={set("type")}>{VEHICLE_TYPES.map(([v, l]) => <option key={v} value={v}>{l}</option>)}</select>
            </Field>
          </div>
          <Field label="License plate"><input className="field mono" value={f.plate} onChange={set("plate")} placeholder="CDX-000" /></Field>

          <div className="seatbox">
            <Field label="Total seats (incl. driver)">
              <input className="field" type="number" min="2" max="60" value={f.seats} onChange={set("seats")} />
            </Field>
            <div className="hostrow">
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Reserve a host seat</div>
                <div className="faint" style={{ fontSize: 11.5 }}>A conference host rides along to escort guests</div>
              </div>
              <Toggle on={!!f.host} onChange={(v) => setF({ ...f, host: v })} />
            </div>
            <div className="seatcalc">
              <div className="sc-item"><span className="mono sc-n">1</span><span>Driver</span></div>
              <span className="sc-op">+</span>
              {f.host && <><div className="sc-item"><span className="mono sc-n">1</span><span>Host</span></div><span className="sc-op">+</span></>}
              <div className="sc-item sc-guest"><span className="mono sc-n">{guestCap}</span><span>Guest seats</span></div>
              <span className="sc-op">=</span>
              <div className="sc-item"><span className="mono sc-n">{f.seats || 0}</span><span>Total</span></div>
            </div>
          </div>

          <Field label="Assigned driver">
            <select className="field" value={f.driverId || ""} onChange={(e) => setF({ ...f, driverId: e.target.value })}>
              <option value="">— Unassigned —</option>
              {state.drivers.map((d) => {
                const otherVeh = d.vehicleId && (!vehicle || d.vehicleId !== vehicle.id);
                const vn = otherVeh ? state.vehicles.find((v) => v.id === d.vehicleId) : null;
                return <option key={d.id} value={d.id}>{d.name}{vn ? ` (on ${vn.name})` : ""}</option>;
              })}
            </select>
          </Field>

          <div style={{ display: "flex", gap: 9, justifyContent: "space-between", marginTop: 4 }}>
            {vehicle
              ? <button className="btn btn-ghost" style={{ color: "var(--rose)" }} onClick={() => { if (confirm("Remove " + vehicle.name + "?")) { Store.removeVehicle(vehicle.id); onClose(); } }}><Icon name="trash" style={{ width: 15, height: 15 }} /> Remove</button>
              : <span />}
            <div style={{ display: "flex", gap: 9 }}>
              <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" onClick={save}><Icon name="check" style={{ width: 16, height: 16 }} /> {vehicle ? "Save" : "Add vehicle"}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Location form ---------- */
function LocationForm({ state, location, onClose }) {
  const [f, setF] = useState(location || { name: "", kind: "hotel", short: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const save = () => {
    if (!f.name.trim()) return;
    const short = (f.short || f.name).replace(/[^A-Za-z0-9]/g, "").slice(0, 3).toUpperCase();
    if (location) Store.updateLocation(location.id, { name: f.name, kind: f.kind, short });
    else Store.addLocation({ name: f.name, kind: f.kind, short });
    onClose();
  };
  const inUse = location && state.rides.some((r) => r.from === location.id || r.to === location.id);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: "min(440px,92%)" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>{location ? "Edit location" : "Add location"}</h3><div className="x" onClick={onClose}>✕</div></div>
        <div className="modal-b" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <Field label="Name"><input className="field" value={f.name} onChange={set("name")} placeholder="e.g. Lakeside Hotel" autoFocus /></Field>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12 }}>
            <Field label="Type">
              <select className="field" value={f.kind} onChange={set("kind")}>{LOC_KINDS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}</select>
            </Field>
            <Field label="Short code"><input className="field mono" value={f.short} onChange={set("short")} placeholder="auto" maxLength="4" /></Field>
          </div>
          {inUse && <div className="warnbox"><Icon name="bell" style={{ width: 14, height: 14, color: "var(--amber)" }} /> This location is used by active rides.</div>}
          <div style={{ display: "flex", gap: 9, justifyContent: "space-between", marginTop: 4 }}>
            {location
              ? <button className="btn btn-ghost" style={{ color: "var(--rose)" }} onClick={() => { if (confirm("Remove " + location.name + "?")) { Store.removeLocation(location.id); onClose(); } }}><Icon name="trash" style={{ width: 15, height: 15 }} /> Remove</button>
              : <span />}
            <div style={{ display: "flex", gap: 9 }}>
              <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
              <button className="btn btn-primary" onClick={save}><Icon name="check" style={{ width: 16, height: 16 }} /> {location ? "Save" : "Add location"}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Setup view ---------- */
const SIGNUP_LINK = "https://shout.equippers.app/signup";

function SignupLinkCard({ onOpenSignup }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    try { navigator.clipboard.writeText(SIGNUP_LINK); } catch (e) {}
    setCopied(true); setTimeout(() => setCopied(false), 1600);
  };
  return (
    <div className="panel signup-card">
      <div className="sc-left">
        <div className="sc-ic"><Icon name="upload" /></div>
        <div>
          <div className="sc-title">Driver sign-up link</div>
          <div className="sc-sub">Send this to volunteers. They add their details, photograph their license, and sign the insurance waiver — no login needed. You set their availability on the roster.</div>
          <div className="sc-linkrow">
            <span className="sc-url mono">{SIGNUP_LINK}</span>
            <button className="btn btn-primary btn-sm" onClick={copy}>
              <Icon name={copied ? "check" : "doc"} style={{ width: 15, height: 15 }} /> {copied ? "Copied!" : "Copy link"}
            </button>
            {onOpenSignup && <button className="btn btn-ghost btn-sm" onClick={onOpenSignup}><Icon name="arrow" style={{ width: 15, height: 15 }} /> Open page</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

function ApplicationReview({ state, app, onClose }) {
  const expSoon = (e) => { if (!e) return false; const d = new Date(e + "-01"); return (d - Date.now()) < 1000 * 60 * 60 * 24 * 90; };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: "min(560px,94%)" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-h"><h3>Review sign-up</h3><div className="x" onClick={onClose}>✕</div></div>
        <div className="modal-b" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar initials={app.name.split(/\s+/).map((w) => w[0]).slice(0, 2).join("")} tone="violet" size={42} />
            <div><div style={{ fontWeight: 700, fontSize: 16 }}>{app.name}</div>
              <div className="faint" style={{ fontSize: 12 }}>Applied {relTime(app.submittedAt)} · {app.email || "no email"}</div></div>
          </div>

          <div className="rev-grid">
            <div><div className="rev-k">Phone</div><div className="mono">{app.phone || "—"}</div></div>
            <div><div className="rev-k">License</div><div className="mono">{app.license || "—"}</div></div>
            <div><div className="rev-k">Class</div><div>{app.licenseClass}</div></div>
            <div><div className="rev-k">Expires</div><div>{app.licenseExp || "—"} {expSoon(app.licenseExp) && <span style={{ color: "var(--amber)" }}>⚠</span>}</div></div>
          </div>

          <div>
            <div className="rev-k">License photos</div>
            <div className="rev-photos">
              {["licenseFront", "licenseBack"].map((k, i) => (
                <div key={k} className="rev-photo">
                  {app[k] ? <img src={app[k]} alt={k} /> : <div className="rev-photo-empty"><Icon name="camera" style={{ width: 18, height: 18 }} /><span>{i === 0 ? "Front" : "Back"}</span><small>demo — no image</small></div>}
                  <span className="rev-photo-tag">{i === 0 ? "Front" : "Back"}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="rev-waiver">
            <Icon name="shield" style={{ width: 16, height: 16, color: "var(--green)" }} />
            <div>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Liability waiver signed</div>
              <div className="faint" style={{ fontSize: 11.5 }}>Signed “{app.signature}”{app.waiverSignedAt ? " · " + fmtTime(app.waiverSignedAt) : ""}</div>
            </div>
          </div>

          <div style={{ display: "flex", gap: 9, justifyContent: "flex-end" }}>
            <button className="btn btn-ghost" style={{ color: "var(--rose)" }} onClick={() => { if (confirm("Decline " + app.name + "’s sign-up?")) { Store.rejectApplication(app.id); onClose(); } }}>Decline</button>
            <button className="btn btn-primary" onClick={() => { Store.approveApplication(app.id); onClose(); }}>
              <Icon name="check" style={{ width: 16, height: 16 }} /> Approve as driver
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PendingApps({ state, onReview }) {
  if (!state.applications.length) return null;
  return (
    <div className="panel" style={{ marginBottom: 16 }}>
      <div className="panel-h"><h3>Pending sign-ups</h3><span className="count">{state.applications.length}</span><div className="spacer" /><span className="faint" style={{ fontSize: 11.5 }}>Review license &amp; waiver before approving</span></div>
      {state.applications.map((a) => (
        <div className="adm-row pending-row" key={a.id} onClick={() => onReview(a)}>
          <div className="adm-name"><Avatar initials={a.name.split(/\s+/).map((w) => w[0]).slice(0, 2).join("")} tone="violet" size={32} /><div><div className="an">{a.name}</div><div className="faint" style={{ fontSize: 11 }}>Applied {relTime(a.submittedAt)}</div></div></div>
          <div className="dim" style={{ fontSize: 12.5 }}>{a.licenseClass} · {a.license}</div>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            <span className="mini-flag"><Icon name="camera" style={{ width: 12, height: 12 }} /> License</span>
            <span className="mini-flag ok"><Icon name="check" style={{ width: 12, height: 12 }} /> Waiver</span>
          </div>
          <button className="btn btn-primary btn-sm" onClick={(e) => { e.stopPropagation(); onReview(a); }}>Review</button>
        </div>
      ))}
    </div>
  );
}

function SetupView({ state, onOpenSignup }) {
  const [tab, setTab] = useState("drivers");
  const [modal, setModal] = useState(null); // {kind, item}

  const open = (kind, item) => setModal({ kind, item });
  const close = () => setModal(null);

  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
        <div className="seg-mini" style={{ width: 380 }}>
          {[["drivers", "Drivers", state.drivers.length], ["vehicles", "Vehicles", state.vehicles.length], ["locations", "Locations", state.locations.length]].map(([id, lb, n]) => (
            <button key={id} className={tab === id ? "active" : ""} onClick={() => setTab(id)}>
              {lb} <span className="mono faint">{n}</span>
              {id === "drivers" && state.applications.length > 0 && <span className="tab-badge">{state.applications.length}</span>}
            </button>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        {tab === "drivers"
          ? <button className="btn btn-ghost" onClick={() => open("driver")}><Icon name="plus" style={{ width: 16, height: 16 }} /> Add manually</button>
          : <button className="btn btn-primary" onClick={() => open(tab === "vehicles" ? "vehicle" : "location")}>
              <Icon name="plus" style={{ width: 16, height: 16 }} /> Add {tab === "vehicles" ? "vehicle" : "location"}
            </button>}
      </div>

      {tab === "drivers" && (
        <>
          <SignupLinkCard onOpenSignup={onOpenSignup} />
          <PendingApps state={state} onReview={(a) => open("review", a)} />
          <DriverTable state={state} onEdit={(d) => open("driver", d)} />
        </>
      )}
      {tab === "vehicles" && <VehicleTable state={state} onEdit={(v) => open("vehicle", v)} />}
      {tab === "locations" && <LocationTable state={state} onEdit={(l) => open("location", l)} />}

      {modal && modal.kind === "driver" && <DriverForm state={state} driver={modal.item} onClose={close} />}
      {modal && modal.kind === "vehicle" && <VehicleForm state={state} vehicle={modal.item} onClose={close} />}
      {modal && modal.kind === "location" && <LocationForm state={state} location={modal.item} onClose={close} />}
      {modal && modal.kind === "review" && <ApplicationReview state={state} app={modal.item} onClose={close} />}
    </>
  );
}

function DriverTable({ state, onEdit }) {
  const expSoon = (e) => { if (!e) return false; const d = new Date(e + "-01"); return (d - Date.now()) < 1000 * 60 * 60 * 24 * 90; };
  return (
    <div className="panel">
      <div className="adm-head adm-driver"><span>Driver</span><span>Phone</span><span>License</span><span>Vehicle</span><span></span></div>
      {state.drivers.map((d) => {
        const v = state.vehicles.find((x) => x.id === d.vehicleId);
        const st = Store.STATUSES[d.status];
        return (
          <div className="adm-row adm-driver" key={d.id}>
            <div className="adm-name"><Avatar initials={d.initials} tone={st.tone} size={32} /><div><div className="an">{d.name}</div><div className="as"><Pill tone={st.tone}>{st.label}</Pill></div></div></div>
            <div className="mono dim">{d.phone || "—"}</div>
            <div><div className="mono" style={{ fontSize: 12.5 }}>{d.license || "—"}</div><div className="faint" style={{ fontSize: 11 }}>{d.licenseClass}{d.licenseExp ? " · exp " + d.licenseExp : ""} {expSoon(d.licenseExp) && <span style={{ color: "var(--amber)" }}>⚠</span>}</div></div>
            <div className="dim" style={{ fontSize: 13 }}>{v ? <span><span className="mono">{v.name}</span> <span className="faint">· {v.plate}</span></span> : <span className="faint">Unassigned</span>}</div>
            <button className="iconbtn" onClick={() => onEdit(d)}><Icon name="edit" style={{ width: 16, height: 16 }} /></button>
          </div>
        );
      })}
    </div>
  );
}

function VehicleTable({ state, onEdit }) {
  return (
    <div className="panel">
      <div className="adm-head adm-veh"><span>Vehicle</span><span>Plate</span><span>Seats</span><span>Capacity</span><span>Driver</span><span></span></div>
      {state.vehicles.map((v) => {
        const d = state.drivers.find((x) => x.id && x.vehicleId === v.id);
        return (
          <div className="adm-row adm-veh" key={v.id}>
            <div className="adm-name"><span className="ride-ic"><Icon name="car2" /></span><div><div className="an">{v.name}</div><div className="faint" style={{ fontSize: 11, textTransform: "capitalize" }}>{v.type}</div></div></div>
            <div className="mono dim">{v.plate}</div>
            <div className="mono">{v.seats}</div>
            <div><span className="mono" style={{ color: "var(--sky)", fontWeight: 600 }}>{v.cap}</span> <span className="faint" style={{ fontSize: 11 }}>guests{v.host ? " · host seat" : ""}</span></div>
            <div className="dim" style={{ fontSize: 13 }}>{d ? d.name : <span className="faint">Unassigned</span>}</div>
            <button className="iconbtn" onClick={() => onEdit(v)}><Icon name="edit" style={{ width: 16, height: 16 }} /></button>
          </div>
        );
      })}
    </div>
  );
}

function LocationTable({ state, onEdit }) {
  const iconFor = (k) => k === "airport" ? "plane" : k === "venue" ? "star" : "home";
  return (
    <div className="panel">
      <div className="adm-head adm-loc"><span>Location</span><span>Type</span><span>Code</span><span>Vehicles here</span><span></span></div>
      {state.locations.map((l) => {
        const here = state.drivers.filter((d) => d.at === l.id).length;
        return (
          <div className="adm-row adm-loc" key={l.id}>
            <div className="adm-name"><span className="ride-ic"><Icon name={iconFor(l.kind)} /></span><div className="an">{l.name}</div></div>
            <div className="dim" style={{ textTransform: "capitalize", fontSize: 13 }}>{l.kind}</div>
            <div className="mono dim">{l.short}</div>
            <div className="dim mono" style={{ fontSize: 13 }}>{here}</div>
            <button className="iconbtn" onClick={() => onEdit(l)}><Icon name="edit" style={{ width: 16, height: 16 }} /></button>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { SetupView });