const { useState, useEffect, useCallback } = React;

// ---- API layer ----

const TOKEN_KEY = "admin_token";
const ADMIN_KEY = "admin_info";

const getToken = (): string => sessionStorage.getItem(TOKEN_KEY) ?? "";
const getAdmin = (): any => JSON.parse(sessionStorage.getItem(ADMIN_KEY) ?? "null");

async function apiRequest<T = any>(path: string, options: RequestInit = {}): Promise<T> {
  const headers = new Headers(options.headers);
  headers.set("Authorization", `Bearer ${getToken()}`);
  if (!(options.body instanceof FormData)) headers.set("Content-Type", "application/json");

  const res = await fetch(path, { ...options, headers });
  if (res.status === 401) {
    sessionStorage.clear();
    window.location.reload();
    throw new Error("unauthenticated");
  }
  const body = await res.json();
  if (!res.ok) throw new Error(body.message ?? `HTTP ${res.status}`);
  return body;
}

interface ListOpts {
  sort?: string;
  dir?: "asc" | "desc";
  q?: string;
  filters?: Record<string, string>;
}
const listApi = (endpoint: string, page: number, opts: ListOpts = {}, perPage = 25) => {
  const params = new URLSearchParams({ page: String(page), per_page: String(perPage) });
  if (opts.sort) params.set("sort", opts.sort);
  if (opts.dir) params.set("dir", opts.dir);
  if (opts.q) params.set("q", opts.q);
  for (const [key, value] of Object.entries(opts.filters ?? {}))
    if (value !== "") params.set(key, value);
  return apiRequest(`${endpoint}?${params.toString()}`);
};

// Friendly labels for the SwapOperation status codes (SwapOperationResource
// rendered "In Progress" / "Completed" / "Failed (Billable)" / "Failed").
const STATUS_LABELS: Record<string, string> = {
  in_progress: "In Progress",
  completed: "Completed",
  failed: "Failed",
  failed_billable: "Failed (Billable)",
};
const statusLabel = (value: unknown): string => STATUS_LABELS[String(value)] ?? String(value);

// Badge coloring matching the Filament status/target badges.
function badgeClass(kind: string, value: unknown): string {
  const v = String(value);
  if (kind === "status") {
    if (v === "completed" || v === "approved") return "ok";
    if (v === "failed" || v === "rejected") return "bad";
    return "warn"; // in_progress, failed_billable, pending
  }
  if (kind === "target") return v === "All Stations" ? "info" : "warn";
  return "neutral";
}
const postApi = (endpoint: string, payload: unknown) =>
  apiRequest(endpoint, { method: "POST", body: JSON.stringify(payload) });
const putApi = (endpoint: string, payload: unknown) =>
  apiRequest(endpoint, { method: "PUT", body: JSON.stringify(payload) });
const patchApi = (endpoint: string, payload: unknown) =>
  apiRequest(endpoint, { method: "PATCH", body: JSON.stringify(payload) });
const deleteApi = (endpoint: string) => apiRequest(endpoint, { method: "DELETE" });
const uploadApi = (endpoint: string, form: FormData) =>
  apiRequest(endpoint, { method: "POST", body: form });

// downloadBinary fetches a binary endpoint with the auth header and triggers a
// browser save (a plain <a href> can't carry the bearer token).
async function downloadBinary(endpoint: string, filename: string) {
  const res = await fetch(endpoint, { headers: { Authorization: `Bearer ${getToken()}` } });
  if (!res.ok) {
    window.alert("Download failed");
    return;
  }
  const blob = await res.blob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

// ---- toasts ----
// Generic, app-wide toast notifications. Call `toast(message, kind)` from
// any event handler, anywhere in the app — no props or context wiring
// needed — to surface a transient result for an action (e.g. "request
// sent" vs "request failed"). Not tied to any one feature; reuse this for
// future one-off action feedback instead of a bespoke inline message.
//
// Deliberately separate from the persistent, backend-backed Notifications
// bell (NotificationBell/admin_notifications): that one is a durable log of
// server-side events (like an OTA's eventual outcome); this one is
// ephemeral, client-only feedback for "did the button click itself work."
type ToastKind = "success" | "error" | "info";
interface ToastItem {
  id: number;
  kind: ToastKind;
  message: string;
}
let toastItems: ToastItem[] = [];
let toastListeners: ((items: ToastItem[]) => void)[] = [];
let toastSeq = 0;

function dismissToast(id: number) {
  toastItems = toastItems.filter((t) => t.id !== id);
  toastListeners.forEach((listen) => listen(toastItems));
}

function toast(message: string, kind: ToastKind = "info") {
  const item: ToastItem = { id: ++toastSeq, kind, message };
  toastItems = [...toastItems, item];
  toastListeners.forEach((listen) => listen(toastItems));
  setTimeout(() => dismissToast(item.id), 5000);
}

function ToastContainer() {
  const [items, setItems] = useState<ToastItem[]>(toastItems);
  useEffect(() => {
    toastListeners.push(setItems);
    return () => {
      toastListeners = toastListeners.filter((listen) => listen !== setItems);
    };
  }, []);

  if (items.length === 0) return null;
  return (
    <div className="toast-stack">
      {items.map((t) => (
        <div key={t.id} className={`toast toast-${t.kind}`} onClick={() => dismissToast(t.id)}>
          {t.message}
        </div>
      ))}
    </div>
  );
}

// ---- routing ----
// Client-side routing over the History API so every page has its own URL
// (mirrors the Filament panel: /admin/stations, /admin/users/1/edit, …).
// The Go SPA handler serves index.html for any /admin/* path, so deep links
// and reloads work.
const BASE = "/admin";

const TAB_SLUGS: Record<string, string> = {
  Dashboard: "dashboard",
  Monitoring: "monitoring",
  Stations: "stations",
  Users: "users",
  Companies: "companies",
  Representatives: "representatives",
  Batteries: "batteries",
  "Battery Requests": "battery-requests",
  "User Requests": "user-requests",
  Swaps: "swaps",
  "Event Logs": "event-logs",
  Firmware: "firmware",
  Settings: "settings",
  Admins: "admins",
  Technicians: "technicians",
  "Key Access Log": "key-access-log",
};
const SLUG_TABS: Record<string, string> = Object.fromEntries(
  Object.entries(TAB_SLUGS).map(([tab, slug]) => [slug, tab]),
);

// navigate pushes a new URL and notifies listeners (useRoute) to re-render.
function navigate(path: string) {
  if (path !== window.location.pathname) {
    window.history.pushState({}, "", path);
    window.dispatchEvent(new PopStateEvent("popstate"));
  }
}

// useRoute returns the path segments below /admin, updating on nav/back/forward.
function useRoute(): string[] {
  const [path, setPath] = useState(() => window.location.pathname);
  useEffect(() => {
    const onPop = () => setPath(window.location.pathname);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  const rel = path.replace(/^\/admin\/?/, "").replace(/\/+$/, "");
  return rel === "" ? [] : rel.split("/");
}

// ---- shared presentation ----

interface Field {
  name: string;
  label: string;
  // "password-confirm" renders two password inputs (new + confirm) under one
  // logical field: both blank means "leave unchanged", both must match to
  // submit, and only the new-password value is sent (keyed by `name`).
  type?: "text" | "number" | "password" | "password-confirm" | "checkbox" | "select" | "readonly";
  required?: boolean;
  options?: { value: string; label: string }[];
  source?: "companies" | "stations"; // relationship dropdown for select fields
}

function formatCell(value: unknown): any {
  if (value === null || value === undefined) return <span className="muted">—</span>;
  if (typeof value === "boolean")
    return <span className={`badge ${value ? "ok" : "bad"}`}>{value ? "yes" : "no"}</span>;
  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
    const date = new Date(value);
    if (!Number.isNaN(date.getTime())) {
      return date.toLocaleString(undefined, {
        year: "2-digit",
        month: "numeric",
        day: "numeric",
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
      });
    }
    return value.replace("T", " ").replace(/\.\d+Z$/, "");
  }
  return String(value);
}

function Modal(props: { title: string; onClose: () => void; children: any }) {
  return (
    <div className="modal-backdrop" onClick={props.onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h3>{props.title}</h3>
        {props.children}
      </div>
    </div>
  );
}

// FormField renders one field. Kept as its own component so a select with a
// relationship `source` can use the useFilterOptions hook.
function FormField(props: {
  field: Field;
  value: any;
  onChange: (value: any) => void;
}) {
  const { field: f } = props;
  const dynamic = useFilterOptions(f.type === "select" ? f.source : undefined);
  const options = f.options ?? dynamic;

  if (f.type === "readonly") {
    return (
      <div className="settings-field">
        <label>{f.label}</label>
        <div className="readonly-value">{formatCell(props.value)}</div>
      </div>
    );
  }

  if (f.type === "password-confirm") {
    const v = props.value ?? { password: "", confirm: "" };
    return (
      <>
        <div>
          <label htmlFor={`f-${f.name}`}>{f.label}</label>
          <input
            id={`f-${f.name}`}
            type="password"
            value={v.password}
            onChange={(e) => props.onChange({ ...v, password: e.target.value })}
          />
        </div>
        <div>
          <label htmlFor={`f-${f.name}-confirm`}>Confirm {f.label.replace(/\s*\(.*\)\s*$/, "").toLowerCase()}</label>
          <input
            id={`f-${f.name}-confirm`}
            type="password"
            value={v.confirm}
            onChange={(e) => props.onChange({ ...v, confirm: e.target.value })}
          />
        </div>
      </>
    );
  }

  return (
    <div>
      <label htmlFor={`f-${f.name}`}>{f.label}</label>
      {f.type === "checkbox" ? (
        <input
          id={`f-${f.name}`}
          type="checkbox"
          style={{ width: "auto" }}
          checked={Boolean(props.value)}
          onChange={(e) => props.onChange(e.target.checked)}
        />
      ) : f.type === "select" ? (
        <select
          id={`f-${f.name}`}
          value={String(props.value ?? "")}
          onChange={(e) => props.onChange(e.target.value)}
        >
          <option value="">—</option>
          {options.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
      ) : (
        <input
          id={`f-${f.name}`}
          type={f.type ?? "text"}
          value={String(props.value ?? "")}
          onChange={(e) => props.onChange(e.target.value)}
        />
      )}
    </div>
  );
}

function ResourceForm(props: {
  fields: Field[];
  initial?: Record<string, any>;
  submitLabel: string;
  onSubmit: (values: Record<string, any>) => Promise<void>;
}) {
  const seed: Record<string, any> = {};
  for (const f of props.fields) {
    const raw = props.initial?.[f.name];
    // Coerce checkbox seeds to real booleans — list rows return tinyints (1/0)
    // which would otherwise be submitted as numbers and rejected by the API.
    if (f.type === "checkbox") seed[f.name] = Boolean(raw) && raw !== "0";
    else if (f.type === "password-confirm") seed[f.name] = { password: "", confirm: "" };
    else seed[f.name] = raw ?? "";
  }
  const [values, setValues] = useState<Record<string, any>>(seed);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const setField = (name: string, value: any) => setValues((v) => ({ ...v, [name]: value }));

  const submit = async () => {
    for (const f of props.fields) {
      if (f.type === "password-confirm") {
        const v = values[f.name];
        if (v.password !== v.confirm) return setError("Passwords do not match.");
        continue;
      }
      if (f.required && (values[f.name] === "" || values[f.name] == null))
        return setError(`${f.label} is required.`);
    }
    const payload: Record<string, any> = {};
    for (const f of props.fields) {
      if (f.type === "readonly") continue;
      const v = values[f.name];
      if (f.type === "checkbox") {
        payload[f.name] = Boolean(v);
        continue;
      }
      if (f.type === "password-confirm") {
        if (v.password !== "") payload[f.name] = v.password;
        continue;
      }
      if (v === "" || v == null) continue;
      if (f.type === "number") payload[f.name] = Number(v);
      else if (f.type === "select") payload[f.name] = /^\d+$/.test(String(v)) ? Number(v) : v;
      else payload[f.name] = v;
    }
    setBusy(true);
    setError("");
    try {
      await props.onSubmit(payload);
    } catch (e: any) {
      setError(e.message ?? "Request failed");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <div className="form-grid">
        {props.fields.map((f) => (
          <FormField key={f.name} field={f} value={values[f.name]} onChange={(value) => setField(f.name, value)} />
        ))}
      </div>
      <div className="error">{error}</div>
      <button type="button" className="primary" disabled={busy} onClick={submit}>
        {busy ? "Saving…" : props.submitLabel}
      </button>
    </div>
  );
}

interface Column {
  key: string;
  label: string;
  sortable?: boolean;
  badge?: "status" | "target" | "online" | "check";
  format?: "filesize";
}

// Filters mirror the Filament table filters. Static filters carry their own
// options; relationship filters name a `source` list endpoint (companies /
// stations) whose rows populate an id -> name dropdown.
interface FilterDef {
  param: string;
  label: string;
  options?: { value: string; label: string }[];
  source?: "companies" | "stations";
  defaultValue?: string;
}

// Relationship-filter options are fetched once per source and shared.
const optionCache: Record<string, { value: string; label: string }[]> = {};
function useFilterOptions(source?: "companies" | "stations") {
  const [options, setOptions] = useState<{ value: string; label: string }[]>(
    source ? optionCache[source] ?? [] : [],
  );
  useEffect(() => {
    if (!source || optionCache[source]) return;
    listApi(`/api/admin/${source}`, 1, { sort: "name", dir: "asc" }, 200)
      .then((b: any) => {
        const opts = (b.data ?? []).map((row: any) => ({
          value: String(row.id),
          label: row.name ?? `#${row.id}`,
        }));
        optionCache[source] = opts;
        setOptions(opts);
      })
      .catch(() => setOptions([]));
  }, [source]);
  return options;
}

function FilterControl(props: {
  def: FilterDef;
  value: string;
  onChange: (value: string) => void;
}) {
  const dynamic = useFilterOptions(props.def.source);
  const options = props.def.options ?? dynamic;
  return (
    <span className="filter-control">
      <label>{props.def.label}</label>
      <select value={props.value} onChange={(e) => props.onChange(e.target.value)}>
        <option value="">All</option>
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </span>
  );
}

function ResourceView(props: {
  endpoint: string;
  columns: Column[];
  createFields?: Field[];
  editFields?: Field[];
  canDelete?: boolean;
  searchable?: boolean;
  filters?: FilterDef[];
  defaultSort?: string;
  defaultDir?: "asc" | "desc";
  extraRowActions?: (row: any, reload: () => void) => any;
  headerExtra?: (reload: () => void) => any;
}) {
  const [rows, setRows] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [error, setError] = useState("");
  const [sort, setSort] = useState(props.defaultSort ?? "");
  const [dir, setDir] = useState<"asc" | "desc">(props.defaultDir ?? "asc");
  const [query, setQuery] = useState("");
  const [search, setSearch] = useState("");
  const [filterValues, setFilterValues] = useState<Record<string, string>>(() => {
    const seed: Record<string, string> = {};
    for (const f of props.filters ?? []) seed[f.param] = f.defaultValue ?? "";
    return seed;
  });
  const filterKey = JSON.stringify(filterValues);

  const reload = useCallback(() => {
    setLoading(true);
    setError("");
    listApi(props.endpoint, page, { sort, dir, q: search, filters: filterValues })
      .then((b: any) => {
        setRows(b.data ?? []);
        setTotal(b.total ?? 0);
      })
      .catch((e: any) => setError(e.message ?? "Load failed"))
      .finally(() => setLoading(false));
  }, [props.endpoint, page, sort, dir, search, filterKey]);

  useEffect(reload, [reload]);

  const toggleSort = (key: string) => {
    setPage(1);
    if (sort === key) {
      setDir(dir === "asc" ? "desc" : "asc");
    } else {
      setSort(key);
      setDir("asc");
    }
  };

  const remove = async (row: any) => {
    if (!window.confirm(`Delete record #${row.id}? This cannot be undone.`)) return;
    try {
      await deleteApi(`${props.endpoint}/${row.id}`);
      reload();
    } catch (e: any) {
      window.alert(e.message ?? "Delete failed");
    }
  };

  const renderCell = (c: Column, row: any) => {
    if (c.badge === "check") {
      const yes = row[c.key] === true || Number(row[c.key]) === 1;
      return (
        <span className={`icon-bool ${yes ? "ok" : "bad"}`} title={yes ? "yes" : "no"}>
          {yes ? "✓" : "✗"}
        </span>
      );
    }
    if (c.badge === "online") {
      const on = Number(row[c.key]) === 1;
      return <span className={`badge ${on ? "ok" : "bad"}`}>{on ? "online" : "offline"}</span>;
    }
    if (c.badge && row[c.key] != null) {
      const text = c.badge === "status" ? statusLabel(row[c.key]) : String(row[c.key]);
      return <span className={`badge ${badgeClass(c.badge, row[c.key])}`}>{text}</span>;
    }
    if (c.format === "filesize") {
      const bytes = Number(row[c.key]);
      return row[c.key] == null ? <span className="muted">—</span> : `${(bytes / 1024).toFixed(1)} KB`;
    }
    return formatCell(row[c.key]);
  };

  const hasActions = props.canDelete || props.editFields || props.extraRowActions;
  const totalPages = Math.max(1, Math.ceil(total / 25));

  return (
    <>
      <div className="panel">
        <div className="row">
          {props.createFields && (
            <button type="button" className="primary" onClick={() => setCreating(true)}>
              + New
            </button>
          )}
          {props.headerExtra?.(reload)}
          {props.searchable && (
            <span className="row" style={{ gap: "0.3rem" }}>
              <input
                placeholder="Search…"
                value={query}
                style={{ width: "220px" }}
                onChange={(e) => setQuery(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    setPage(1);
                    setSearch(query);
                  }
                }}
              />
              <button
                className="small"
                onClick={() => {
                  setPage(1);
                  setSearch(query);
                }}
              >
                Search
              </button>
              {search && (
                <button
                  className="small"
                  onClick={() => {
                    setQuery("");
                    setSearch("");
                    setPage(1);
                  }}
                >
                  Clear
                </button>
              )}
            </span>
          )}
          {(props.filters ?? []).map((f) => (
            <FilterControl
              key={f.param}
              def={f}
              value={filterValues[f.param] ?? ""}
              onChange={(value) => {
                setPage(1);
                setFilterValues({ ...filterValues, [f.param]: value });
              }}
            />
          ))}
          <span className="error">{error}</span>
        </div>
      </div>
      <div className="panel scroll">
        {loading ? (
          <p className="muted">Loading…</p>
        ) : rows.length === 0 ? (
          <p className="muted">No records.</p>
        ) : (
          <table>
            <thead>
              <tr>
                {props.columns.map((c) => (
                  <th
                    key={c.key}
                    onClick={c.sortable ? () => toggleSort(c.key) : undefined}
                    className={c.sortable ? "sortable" : ""}
                  >
                    {c.label}
                    {c.sortable && sort === c.key ? (dir === "asc" ? " ▲" : " ▼") : ""}
                  </th>
                ))}
                {hasActions && <th className="row-actions">Actions</th>}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr key={row.id ?? i}>
                  {props.columns.map((c) => (
                    <td key={c.key}>{renderCell(c, row)}</td>
                  ))}
                  {hasActions && (
                    <td className="row-actions">
                      {props.extraRowActions?.(row, reload)}
                      {props.editFields && (
                        <button type="button" className="small" onClick={() => setEditing(row)}>
                          Edit
                        </button>
                      )}
                      {props.canDelete && (
                        <button type="button" className="small danger" onClick={() => remove(row)}>
                          Delete
                        </button>
                      )}
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        )}
        <div className="pager">
          <button type="button" className="small" disabled={page <= 1} onClick={() => setPage(page - 1)}>
            ‹ Prev
          </button>
          <span>
            Page {page} / {totalPages} ({total} rows)
          </span>
          <button type="button" className="small" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
            Next ›
          </button>
        </div>
      </div>

      {creating && props.createFields && (
        <Modal title="Create" onClose={() => setCreating(false)}>
          <ResourceForm
            fields={props.createFields}
            submitLabel="Create"
            onSubmit={async (v) => {
              await postApi(props.endpoint, v);
              setCreating(false);
              reload();
            }}
          />
        </Modal>
      )}

      {editing && props.editFields && (
        <Modal title={`Edit #${editing.id}`} onClose={() => setEditing(null)}>
          <ResourceForm
            fields={props.editFields}
            initial={editing}
            submitLabel="Save"
            onSubmit={async (v) => {
              await putApi(`${props.endpoint}/${editing.id}`, v);
              setEditing(null);
              reload();
            }}
          />
        </Modal>
      )}
    </>
  );
}

// ---- specialized views ----

function UsersView() {
  return (
    <ResourceView
      endpoint="/api/admin/users"
      searchable
      defaultSort="id"
      filters={[
        { param: "company_id", label: "Company", source: "companies" },
        {
          param: "phone_verified",
          label: "Phone verified",
          options: [
            { value: "1", label: "Verified" },
            { value: "0", label: "Not verified" },
          ],
        },
        {
          param: "email_verified",
          label: "Email verified",
          options: [
            { value: "1", label: "Verified" },
            { value: "0", label: "Not verified" },
          ],
        },
      ]}
      columns={[
        { key: "id", label: "ID", sortable: true },
        { key: "email", label: "Email", sortable: true },
        { key: "name", label: "Name", sortable: true },
        { key: "phone_number", label: "Phone Number" },
        { key: "phone_verified", label: "Phone Verified", badge: "check" },
        { key: "email_verified", label: "Email Verified", badge: "check" },
        { key: "company_name", label: "Company" },
        { key: "reservation_count", label: "Reservation Count", sortable: true },
        { key: "swap_count", label: "Swap Count", sortable: true },
      ]}
      createFields={[
        { name: "email", label: "Email", required: true },
        { name: "password", label: "Password", type: "password", required: true },
        { name: "name", label: "Name (blank = \"user\")" },
        { name: "phone_number", label: "Phone number (local, e.g. 01xxxxxxxxx)" },
        { name: "company_id", label: "Company", type: "select", source: "companies" },
        { name: "location", label: "Location" },
      ]}
      canDelete
      extraRowActions={(row) => (
        <button type="button" className="small" onClick={() => navigate(`${BASE}/users/${row.id}/edit`)}>
          Edit
        </button>
      )}
    />
  );
}

// Fields for the dedicated user edit page (parity with the Filament form:
// User Information, Verification, and read-only Usage Statistics).
const USER_EDIT_FIELDS: Field[] = [
  { name: "name", label: "Name" },
  { name: "email", label: "Email" },
  { name: "phone_number", label: "Phone number (local, e.g. 01xxxxxxxxx)" },
  { name: "password", label: "New password (leave both blank to keep unchanged)", type: "password-confirm" },
  { name: "company_id", label: "Company", type: "select", source: "companies" },
  { name: "location", label: "Location" },
  { name: "phone_verified", label: "Phone verified", type: "checkbox" },
  { name: "email_verified", label: "Email verified", type: "checkbox" },
  { name: "reservation_count", label: "Reservation count", type: "readonly" },
  { name: "sign_in_count", label: "Sign-in count", type: "readonly" },
  { name: "swap_count", label: "Swap count", type: "readonly" },
  { name: "total_kilometers", label: "Total kilometers", type: "readonly" },
  { name: "last_successful_login", label: "Last successful login", type: "readonly" },
  { name: "last_verified_phone", label: "Last verified phone", type: "readonly" },
  { name: "last_verified_email", label: "Last verified email", type: "readonly" },
];

// Related-record tables shown under the user edit form (Filament relation
// managers: Reservations, Swap Operations, Logs).
interface RelatedTab {
  key: string;
  label: string;
  endpoint: string;
  columns: Column[];
}
const USER_RELATED_TABS: RelatedTab[] = [
  {
    key: "reservations",
    label: "Reservations",
    endpoint: "reservations",
    columns: [
      { key: "station_name", label: "Station" },
      { key: "slot_number", label: "Slot" },
      { key: "timeout", label: "Timeout (s)" },
      { key: "expires_at", label: "Expires At" },
      { key: "ended_at", label: "Ended At" },
      { key: "created_at", label: "Created At" },
    ],
  },
  {
    key: "swaps",
    label: "Swap Operations",
    endpoint: "swap-operations",
    columns: [
      { key: "id", label: "ID" },
      { key: "swap_time", label: "Swap Time" },
      { key: "swap_finish_time", label: "Finish Time" },
      { key: "old_battery_percentage", label: "Old %" },
      { key: "current_battery_percentage", label: "New %" },
      { key: "successful", label: "Successful", badge: "check" },
    ],
  },
  {
    key: "logs",
    label: "Logs",
    endpoint: "logs",
    columns: [
      { key: "created_at", label: "Time" },
      { key: "type", label: "Event", badge: "status" },
      { key: "ip", label: "IP" },
      { key: "device_name", label: "Device" },
      { key: "user_agent", label: "User Agent" },
    ],
  },
];

function UserRelated(props: { userId: string | number }) {
  const [active, setActive] = useState(USER_RELATED_TABS[0].key);
  const [rows, setRows] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const tab = USER_RELATED_TABS.find((t) => t.key === active) ?? USER_RELATED_TABS[0];

  useEffect(() => {
    setLoading(true);
    apiRequest(`/api/admin/users/${props.userId}/${tab.endpoint}`)
      .then((b: any) => setRows(b.data ?? []))
      .catch(() => setRows([]))
      .finally(() => setLoading(false));
  }, [props.userId, active]);

  const cell = (c: Column, row: any) => {
    if (c.badge === "check") {
      const yes = row[c.key] === true || Number(row[c.key]) === 1;
      return <span className={`icon-bool ${yes ? "ok" : "bad"}`}>{yes ? "✓" : "✗"}</span>;
    }
    if (c.badge === "status" && row[c.key] != null)
      return <span className={`badge ${badgeClass("status", row[c.key])}`}>{String(row[c.key])}</span>;
    return formatCell(row[c.key]);
  };

  return (
    <div className="panel">
      <div className="settings-tabs">
        {USER_RELATED_TABS.map((t) => (
          <button type="button" key={t.key} className={t.key === active ? "active" : ""} onClick={() => setActive(t.key)}>
            {t.label}
          </button>
        ))}
      </div>
      <div className="scroll">
        {loading ? (
          <p className="muted">Loading…</p>
        ) : rows.length === 0 ? (
          <p className="muted">No {tab.label.toLowerCase()}.</p>
        ) : (
          <table>
            <thead>
              <tr>
                {tab.columns.map((c) => (
                  <th key={c.key}>{c.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i) => (
                <tr key={row.id ?? i}>
                  {tab.columns.map((c) => (
                    <td key={c.key}>{cell(c, row)}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// UserEditPage is the dedicated edit route (/admin/users/{id}/edit) — a full
// page with the form and related-record tables, mirroring the Filament Edit
// User page rather than a popup.
function UserEditPage(props: { userId: string }) {
  const [user, setUser] = useState<any>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    setError("");
    setUser(null);
    apiRequest(`/api/admin/users/${props.userId}`)
      .then((b: any) => setUser(b.data))
      .catch((e: any) => setError(e.message ?? "Failed to load user"));
  }, [props.userId]);

  const back = () => navigate(`${BASE}/users`);

  if (error)
    return (
      <div className="panel">
        <button type="button" className="small" onClick={back}>
          ← Back to users
        </button>
        <p className="error">{error}</p>
      </div>
    );
  if (!user) return <div className="panel">Loading…</div>;

  return (
    <>
      <div className="page-head">
        <button type="button" className="small" onClick={back}>
          ← Back to users
        </button>
        <h2>Edit user #{user.id}</h2>
      </div>
      <div className="panel">
        <ResourceForm
          fields={USER_EDIT_FIELDS}
          initial={{ ...user, phone_number: String(user.phone_number ?? "").replace(/^\+20/, "0") }}
          submitLabel="Save changes"
          onSubmit={async (v) => {
            await patchApi(`/api/admin/users/${user.id}`, v);
            back();
          }}
        />
      </div>
      <UserRelated userId={user.id} />
    </>
  );
}

// StationsView wraps the Stations ResourceView to add an in-app confirm
// modal for the fleet-wide force-check action (a native window.confirm()
// looks out of place — browser chrome, not the app — for something this
// consequential).
// StationSlotsModal shows live per-slot telemetry (voltage, charging, door
// state, battery percentage) from the station's periodic status heartbeat —
// no swap required, so it also covers idle, already-seated batteries.
function StationSlotsModal(props: { station: any; onClose: () => void }) {
  const [slots, setSlots] = useState<any[] | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    apiRequest(`/api/admin/stations/${props.station.id}/slots`)
      .then((b: any) => setSlots(b.data ?? []))
      .catch((e: any) => setError(e.message ?? "Load failed"));
  }, [props.station.id]);

  return (
    <Modal title={`Slots — ${props.station.name ?? `station #${props.station.id}`}`} onClose={props.onClose}>
      {error ? (
        <p className="muted">{error}</p>
      ) : slots === null ? (
        <p className="muted">Loading…</p>
      ) : slots.length === 0 ? (
        <p className="muted">No slots reported yet.</p>
      ) : (
        <div className="scroll">
          {props.station.empty_slot == null && (
            <p className="muted">
              Empty slot is not set. Set it under Edit — stations with hard-wired chargers can't find it themselves.
            </p>
          )}
          <table>
            <thead>
              <tr>
                <th>Slot</th>
                <th>Battery</th>
                <th>Charging</th>
                <th>Door</th>
                <th>Voltage</th>
                <th>Current</th>
                <th>Last Reported</th>
              </tr>
            </thead>
            <tbody>
              {slots.map((slot) => {
                const hasReading = slot.voltage != null;
                const charging = slot.charging === true;
                const doorOpen = slot.door_open === true;
                const isEmptySlot = props.station.empty_slot != null && slot.slot_number === props.station.empty_slot;
                return (
                  <tr key={slot.id ?? slot.slot_number}>
                    <td>
                      {slot.slot_number}
                      {isEmptySlot && (
                        <>
                          {" "}
                          <span className="badge ok" title="The slot the station opens to receive a rider's battery">
                            empty
                          </span>
                        </>
                      )}
                    </td>
                    <td>{hasReading ? `${slot.percentage ?? 0}%` : <span className="muted">—</span>}</td>
                    <td>
                      <span className={`icon-bool ${charging ? "ok" : "bad"}`} title={charging ? "yes" : "no"}>
                        {charging ? "✓" : "✗"}
                      </span>
                    </td>
                    <td>
                      <span className={`badge ${doorOpen ? "warn" : "ok"}`}>{doorOpen ? "open" : "closed"}</span>
                    </td>
                    <td>{hasReading ? `${slot.voltage}V` : <span className="muted">—</span>}</td>
                    <td>{slot.current != null ? `${slot.current}A` : <span className="muted">—</span>}</td>
                    <td>{formatCell(slot.last_reported_at)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </Modal>
  );
}

function DiagnosticsKeyModal(props: { station: any; onClose: () => void }) {
  const base = `/api/admin/stations/${props.station.id}/diagnostics-key`;
  const [key, setKey] = useState("");
  const [shown, setShown] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  const reveal = async () => {
    setBusy(true);
    setError("");
    try {
      const res = await apiRequest(base);
      setKey(res.key);
      setShown(true);
    } catch (e: any) {
      setError(e.message ?? "Could not load the key.");
    } finally {
      setBusy(false);
    }
  };

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(key);
      toast("Key copied.", "success");
    } catch {
      toast("Copy failed — select the key and copy it manually.", "error");
    }
  };

  const regenerate = async () => {
    setError("");
    setBusy(true);
    try {
      const res = await postApi(`${base}/regenerate`, {});
      setKey(res.key);
      setShown(true);
      setConfirming(false);
      toast("New key generated. The station picks it up on its next config sync.", "success");
    } catch (e: any) {
      toast(e.message ?? "Could not regenerate the key.", "error");
    } finally {
      setBusy(false);
    }
  };

  return (
    <Modal title={`Diagnostics key — ${props.station.name ?? `station #${props.station.id}`}`} onClose={props.onClose}>
      {confirming ? (
        <>
          <p className="muted">
            Regenerating invalidates the current key. Technicians will be refused by this station until it syncs its
            config (usually within a few minutes).
          </p>
          <div className="row" style={{ justifyContent: "flex-end" }}>
            <button className="small" onClick={() => setConfirming(false)}>
              Cancel
            </button>
            <button className="primary" disabled={busy} onClick={regenerate}>
              {busy ? "Regenerating…" : "Regenerate key"}
            </button>
          </div>
        </>
      ) : (
        <>
          <div className="readonly-value" style={{ fontFamily: "monospace", wordBreak: "break-all" }}>
            {shown ? key : "••••••••••••••••••••••••••••••••••••••••••••"}
          </div>
          <div className="error">{error}</div>
          <div className="row" style={{ justifyContent: "flex-end" }}>
            {!shown ? (
              <button className="small" disabled={busy} onClick={reveal}>
                {busy ? "Loading…" : "Reveal"}
              </button>
            ) : (
              <button className="small" onClick={copy}>
                Copy
              </button>
            )}
            <button className="small" onClick={() => setConfirming(true)}>
              Regenerate…
            </button>
            <button className="small" onClick={props.onClose}>
              Close
            </button>
          </div>
        </>
      )}
    </Modal>
  );
}

function StationsView() {
  const [confirmingForceAll, setConfirmingForceAll] = useState(false);
  const [reloadFn, setReloadFn] = useState<(() => void) | null>(null);
  const [busy, setBusy] = useState(false);
  const [viewingSlots, setViewingSlots] = useState<any>(null);
  const [keyStation, setKeyStation] = useState<any>(null);

  return (
    <>
      <ResourceView
        endpoint="/api/admin/stations"
        searchable
        defaultSort="id"
        filters={[
          {
            param: "status",
            label: "Status",
            options: [
              { value: "active", label: "Active" },
              { value: "inactive", label: "Inactive" },
            ],
          },
        ]}
        columns={[
          { key: "id", label: "ID", sortable: true },
          { key: "code", label: "Code", sortable: true },
          { key: "scan_id", label: "Scan ID" },
          { key: "name", label: "Name", sortable: true },
          { key: "location", label: "Location", sortable: true },
          { key: "slot_count", label: "Slot Count", sortable: true },
          { key: "online", label: "Status", badge: "online" },
          { key: "current_firmware_version", label: "Firmware Version" },
          { key: "last_connected", label: "Last Connected", sortable: true },
        ]}
        createFields={STATION_FIELDS}
        editFields={STATION_FIELDS}
        canDelete
        headerExtra={(reload) => (
          <button
            className="small"
            onClick={() => {
              setReloadFn(() => reload);
              setConfirmingForceAll(true);
            }}
          >
            Force OTA check (all stations)
          </button>
        )}
        extraRowActions={(row, reload) => (
          <>
            <button className="small" onClick={() => setViewingSlots(row)}>
              View slots
            </button>
            <button className="small" onClick={() => setKeyStation(row)}>
              Diagnostics key
            </button>
            <button
              className="small"
              onClick={async () => {
                try {
                  await postApi(`/api/admin/stations/${row.id}/ota/force-check`, {});
                  toast(`Force-check sent to ${row.name ?? `station #${row.id}`}.`, "success");
                  reload();
                } catch (e: any) {
                  toast(e.message ?? "Force-check request failed.", "error");
                }
              }}
            >
              Force OTA check
            </button>
          </>
        )}
      />
      {viewingSlots && <StationSlotsModal station={viewingSlots} onClose={() => setViewingSlots(null)} />}
      {keyStation && <DiagnosticsKeyModal station={keyStation} onClose={() => setKeyStation(null)} />}
      {confirmingForceAll && (
        <Modal title="Force OTA check on all stations?" onClose={() => setConfirmingForceAll(false)}>
          <p className="muted">Every station will check for a firmware update on its next config poll.</p>
          <div className="row" style={{ justifyContent: "flex-end" }}>
            <button className="small" onClick={() => setConfirmingForceAll(false)}>
              Cancel
            </button>
            <button
              className="primary"
              disabled={busy}
              onClick={async () => {
                setBusy(true);
                try {
                  await postApi("/api/admin/stations/ota/force-check-all", {});
                  toast("Force-check sent to all stations.", "success");
                  setConfirmingForceAll(false);
                  reloadFn?.();
                } catch (e: any) {
                  toast(e.message ?? "Force-check request failed.", "error");
                } finally {
                  setBusy(false);
                }
              }}
            >
              {busy ? "Forcing…" : "Force check"}
            </button>
          </div>
        </Modal>
      )}
    </>
  );
}

function SwapsView() {
  const [assigning, setAssigning] = useState<any>(null);
  const [reloadFn, setReloadFn] = useState<(() => void) | null>(null);
  return (
    <>
      <ResourceView
        endpoint="/api/admin/swap-operations"
        searchable
        defaultSort="swap_time"
        filters={[
          { param: "station_id", label: "Station", source: "stations" },
          { param: "company_id", label: "Company", source: "companies" },
          {
            param: "status",
            label: "Status",
            options: [
              { value: "in_progress", label: "In Progress" },
              { value: "completed", label: "Completed" },
              { value: "failed", label: "Failed" },
            ],
          },
          {
            param: "battery_errored",
            label: "Battery errored",
            options: [
              { value: "1", label: "Yes" },
              { value: "0", label: "No" },
            ],
          },
          {
            param: "awaiting_slot",
            label: "Awaiting slots",
            options: [{ value: "1", label: "Awaiting assignment" }],
          },
        ]}
        columns={[
          { key: "id", label: "ID", sortable: true },
          { key: "support_reference", label: "Support Ref" },
          { key: "user_email", label: "User", sortable: true },
          { key: "station_name", label: "Station", sortable: true },
          { key: "slot_number", label: "Slot" },
          { key: "status", label: "Status", badge: "status" },
          { key: "esp32_status", label: "ESP32 Status" },
          { key: "failure_category", label: "Failure" },
          { key: "retry_count", label: "Retry Count", sortable: true },
          { key: "swap_time", label: "Swap Time", sortable: true },
          { key: "swap_finish_time", label: "Swap Finish Time", sortable: true },
        ]}
        extraRowActions={(row, reload) =>
          row.failure_category === "hardware_error" && !row.battery_dispensed_at ? (
            <button
              className="small"
              onClick={() => {
                setAssigning(row);
                setReloadFn(() => reload);
              }}
            >
              Assign retry slots
            </button>
          ) : null
        }
      />
      {assigning && (
        <Modal title={`Assign retry slots — swap #${assigning.id}`} onClose={() => setAssigning(null)}>
          <ResourceForm
            fields={[
              { name: "receive_slot", label: "Receive slot number", type: "number", required: true },
              { name: "dispense_slot", label: "Dispense slot number", type: "number", required: true },
            ]}
            submitLabel="Assign & reopen"
            onSubmit={async (v) => {
              await postApi(`/api/admin/swap-operations/${assigning.id}/assign-slots`, v);
              setAssigning(null);
              reloadFn?.();
            }}
          />
        </Modal>
      )}
    </>
  );
}

function FirmwareUpload(props: { onDone: () => void }) {
  const [version, setVersion] = useState("");
  const [title, setTitle] = useState("");
  const [stationID, setStationID] = useState("");
  const [isActive, setIsActive] = useState(true);
  const [file, setFile] = useState<File | null>(null);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async () => {
    if (!version || !file) return setError("Version and a .bin file are required.");
    const form = new FormData();
    form.set("version", version);
    form.set("title", title);
    form.set("is_active", isActive ? "true" : "false");
    if (stationID) form.set("station_id", stationID);
    form.set("firmware", file);
    setBusy(true);
    setError("");
    try {
      await uploadApi("/api/admin/firmware", form);
      props.onDone();
    } catch (e: any) {
      setError(e.message ?? "Upload failed");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <div className="form-grid">
        <div>
          <label>Version</label>
          <input value={version} onChange={(e) => setVersion(e.target.value)} />
        </div>
        <div>
          <label>Title</label>
          <input value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        <div>
          <label>Station ID (blank = all)</label>
          <input type="number" value={stationID} onChange={(e) => setStationID(e.target.value)} />
        </div>
        <div>
          <label>Active immediately</label>
          <input type="checkbox" style={{ width: "auto" }} checked={isActive} onChange={(e) => setIsActive(e.target.checked)} />
        </div>
        <div>
          <label>Firmware .bin</label>
          <input type="file" accept=".bin" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
        </div>
      </div>
      <div className="error">{error}</div>
      <button type="button" className="primary" disabled={busy} onClick={submit}>
        {busy ? "Uploading…" : "Upload firmware"}
      </button>
    </div>
  );
}

function FirmwareView() {
  const [uploading, setUploading] = useState(false);
  const [reloadFn, setReloadFn] = useState<(() => void) | null>(null);
  return (
    <>
      <ResourceView
        endpoint="/api/admin/firmware"
        searchable
        defaultSort="created_at"
        filters={[
          { param: "station_id", label: "Station", source: "stations" },
          {
            param: "is_active",
            label: "Active",
            options: [
              { value: "1", label: "Active only" },
              { value: "0", label: "Inactive only" },
            ],
          },
        ]}
        columns={[
          { key: "id", label: "ID", sortable: true },
          { key: "version", label: "Version", sortable: true },
          { key: "title", label: "Title" },
          { key: "target", label: "Target", badge: "target", sortable: true },
          { key: "file_size", label: "Size", format: "filesize", sortable: true },
          { key: "is_active", label: "Active", badge: "check", sortable: true },
          { key: "rolled_out_at", label: "Rollout", sortable: true },
          { key: "created_at", label: "Created At", sortable: true },
        ]}
        headerExtra={(reload) => (
          <button
            className="primary"
            onClick={() => {
              setUploading(true);
              setReloadFn(() => reload);
            }}
          >
            Upload firmware
          </button>
        )}
        extraRowActions={(row, reload) => (
          <>
            <button
              type="button"
              className="small"
              onClick={() => downloadBinary(`/api/admin/firmware/${row.id}/download`, `firmware_${row.version}.bin`)}
            >
              Download
            </button>
            <button type="button" className="small" onClick={() => navigate(`${BASE}/firmware/${row.id}/edit`)}>
              Edit
            </button>
            <button
              type="button"
              className="small"
              onClick={async () => {
                await patchApi(`/api/admin/firmware/${row.id}`, { is_active: !(Number(row.is_active) === 1) });
                reload();
              }}
            >
              {Number(row.is_active) === 1 ? "Deactivate" : "Activate"}
            </button>
          </>
        )}
      />
      {uploading && (
        <Modal title="Upload firmware" onClose={() => setUploading(false)}>
          <FirmwareUpload
            onDone={() => {
              setUploading(false);
              reloadFn?.();
            }}
          />
        </Modal>
      )}
    </>
  );
}

// FirmwareEditPage is the dedicated edit route (/admin/firmware/{id}/edit),
// mirroring the Filament "Edit Firmware Update" page: Release Information,
// Firmware Binary (with optional replacement), and Targeting & Rollout.
function FirmwareEditPage(props: { firmwareId: string }) {
  const stationOptions = useFilterOptions("stations");
  const [fw, setFw] = useState<any>(null);
  const [form, setForm] = useState<Record<string, any>>({});
  const [file, setFile] = useState<File | null>(null);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    setError("");
    apiRequest(`/api/admin/firmware/${props.firmwareId}`)
      .then((b: any) => {
        const row = b.data;
        setFw(row);
        setForm({
          version: row.version ?? "",
          title: row.title ?? "",
          notes: row.notes ?? "",
          checksum: row.checksum ?? "",
          station_id: row.station_id != null ? String(row.station_id) : "",
          is_active: Number(row.is_active) === 1,
          // MySQL "YYYY-MM-DD HH:MM:SS" -> datetime-local "YYYY-MM-DDTHH:MM".
          rolled_out_at: row.rolled_out_at ? String(row.rolled_out_at).replace(" ", "T").slice(0, 16) : "",
        });
      })
      .catch((e: any) => setError(e.message ?? "Failed to load firmware"));
  }, [props.firmwareId]);

  const back = () => navigate(`${BASE}/firmware`);
  const setField = (k: string, v: any) => setForm((f) => ({ ...f, [k]: v }));

  const save = async () => {
    if (!form.version) return setError("Version is required.");
    setBusy(true);
    setError("");
    try {
      await patchApi(`/api/admin/firmware/${props.firmwareId}`, {
        version: form.version,
        title: form.title,
        notes: form.notes,
        checksum: form.checksum,
        station_id: form.station_id === "" ? null : Number(form.station_id),
        is_active: Boolean(form.is_active),
        rolled_out_at: form.rolled_out_at === "" ? null : form.rolled_out_at,
      });
      if (file) {
        const fd = new FormData();
        fd.set("firmware", file);
        await uploadApi(`/api/admin/firmware/${props.firmwareId}/file`, fd);
      }
      back();
    } catch (e: any) {
      setError(e.message ?? "Save failed");
    } finally {
      setBusy(false);
    }
  };

  if (error && !fw)
    return (
      <div className="panel">
        <button type="button" className="small" onClick={back}>← Back to firmware</button>
        <p className="error">{error}</p>
      </div>
    );
  if (!fw) return <div className="panel">Loading…</div>;

  return (
    <>
      <div className="page-head">
        <button type="button" className="small" onClick={back}>← Back to firmware</button>
        <h2>Edit firmware #{fw.id}</h2>
      </div>

      <div className="panel">
        <h3 style={{ marginTop: 0 }}>Release Information</h3>
        <div className="form-grid">
          <div>
            <label htmlFor="fw-version">Version</label>
            <input id="fw-version" value={form.version ?? ""} onChange={(e) => setField("version", e.target.value)} />
          </div>
          <div>
            <label htmlFor="fw-title">Title</label>
            <input id="fw-title" value={form.title ?? ""} onChange={(e) => setField("title", e.target.value)} />
          </div>
        </div>
        <label htmlFor="fw-notes">Release notes</label>
        <textarea id="fw-notes" rows={3} value={form.notes ?? ""} onChange={(e) => setField("notes", e.target.value)} />
      </div>

      <div className="panel">
        <h3 style={{ marginTop: 0 }}>Firmware Binary</h3>
        <div className="form-grid">
          <div className="settings-field">
            <label>Current file</label>
            <div className="readonly-value">
              {fw.file_path ?? "—"} · {fw.file_size ? `${(Number(fw.file_size) / 1024).toFixed(1)} KB` : "—"}
            </div>
            <button
              type="button"
              className="small"
              style={{ marginTop: "0.4rem" }}
              onClick={() => downloadBinary(`/api/admin/firmware/${fw.id}/download`, `firmware_${fw.version}.bin`)}
            >
              ⬇ Download .bin
            </button>
          </div>
          <div>
            <label htmlFor="fw-checksum">Checksum</label>
            <input id="fw-checksum" value={form.checksum ?? ""} onChange={(e) => setField("checksum", e.target.value)} />
          </div>
          <div>
            <label htmlFor="fw-file">Replace .bin (optional)</label>
            <input id="fw-file" type="file" accept=".bin" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
          </div>
        </div>
      </div>

      <div className="panel">
        <h3 style={{ marginTop: 0 }}>Targeting &amp; Rollout</h3>
        <div className="form-grid">
          <div>
            <label htmlFor="fw-station">Target station</label>
            <select id="fw-station" value={form.station_id ?? ""} onChange={(e) => setField("station_id", e.target.value)}>
              <option value="">All Stations</option>
              {stationOptions.map((o) => (
                <option key={o.value} value={o.value}>{o.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label htmlFor="fw-active">Active</label>
            <input
              id="fw-active"
              type="checkbox"
              style={{ width: "auto" }}
              checked={Boolean(form.is_active)}
              onChange={(e) => setField("is_active", e.target.checked)}
            />
          </div>
          <div>
            <label htmlFor="fw-rollout">Rollout date (blank = immediate)</label>
            <input
              id="fw-rollout"
              type="datetime-local"
              value={form.rolled_out_at ?? ""}
              onChange={(e) => setField("rolled_out_at", e.target.value)}
            />
          </div>
        </div>
        <div className="error">{error}</div>
        <button type="button" className="primary" disabled={busy} onClick={save}>
          {busy ? "Saving…" : "Save changes"}
        </button>
      </div>
    </>
  );
}

// ---- Platform settings: structured, typed, tabbed form (Filament parity) ----

type SettingType = "number" | "text" | "toggle" | "select";
interface SettingField {
  key: string;
  label: string;
  type: SettingType;
  help?: string;
  options?: { value: string; label: string }[];
}
const FEATURE_FLAG_PREFIX = "mobile.feature_flags.";

// Code defaults mirror PlatformSettingsService::defaults so unset keys show a
// sensible value instead of blank.
const SETTINGS_DEFAULTS: Record<string, any> = {
  "reservation.min_minutes": 1,
  "reservation.max_minutes": 1440,
  "reservation.window_minutes": 60,
  "reservation.max_active_per_user": 1,
  "mobile.min_supported_app_version": "",
  "mobile.feature_flags.enable_reservations": true,
  "mobile.feature_flags.enable_swap": true,
  "mobile.feature_flags.enable_admin_assisted_swap_retry": false,
  "swap.door_open_timeout_seconds": 20,
  "swap.door_close_timeout_seconds": 300,
  "swap.remove_battery_timeout_seconds": 600,
  "swap.insert_battery_timeout_seconds": 60,
  "swap.charge_report_interval_seconds": 60,
  "swap.auth_token_ttl_seconds": 180,
  "hardware.batt_present_v": 35,
  "hardware.empty_max_v": 20,
  "hardware.old_batt_max_v": 78,
  "hardware.ready_batt_min_v": 75,
  "hardware.full_batt_v": 87,
  "hardware.full_detection.enabled": false,
  "hardware.full_dwell_hours": 3,
  "hardware.full_dwell_grace_minutes": 15,
  "station.operation_mode": "prod",
  "station.dev.simulate_battery_sensors": true,
  "station.dev.simulate_door_sensors": true,
  "station.dev.simulate_lockers": true,
  "station.dev.step_delay_seconds": 3,
  "station.status_push_interval_seconds": 15,
  "station.ota_check_interval_seconds": 30,
  "station.token_refresh_interval_seconds": 1800,
  "station.auth_token_ttl_seconds": 7200,
  "station.online_timeout_seconds": 45,
  "station.ble_inactivity_timeout_seconds": 120,
  "station.request_timeout_seconds": 30,
  "station.wifi_reconnect_reboot_minutes": 30,
  "station.offline_logging.enabled": false,
  "station.offline_logging.queue_max_records": 2000,
  "station.offline_logging.flush_batch_size": 20,
  "station.offline_logging.status_coalesce_seconds": 60,
  "security.sanctum_expiration_minutes": 60,
  "security.refresh_token_ttl_days": 30,
  "security.password.min_length": 8,
  "security.password.require_uppercase": true,
  "security.password.require_lowercase": true,
  "security.password.require_numbers": true,
  "security.password.require_symbols": true,
  "security.password.allowed_special_characters": "!@#$%^&*()-_=+",
};

const SETTINGS_TABS: { name: string; fields: SettingField[] }[] = [
  {
    name: "Mobile & Reservations",
    fields: [
      { key: "reservation.min_minutes", label: "Min reservation minutes", type: "number", help: "Shortest reservation length a user can choose." },
      { key: "reservation.max_minutes", label: "Max reservation minutes", type: "number", help: "Longest reservation length a user can choose." },
      { key: "reservation.window_minutes", label: "Active window minutes", type: "number", help: "How far back to look when counting active reservations." },
      { key: "reservation.max_active_per_user", label: "Max active per user", type: "number", help: "Max active reservations one user may hold." },
      { key: "mobile.min_supported_app_version", label: "Min supported app version", type: "text", help: "App versions below this are asked to update. Blank disables." },
      { key: "mobile.feature_flags.enable_reservations", label: "Enable reservations", type: "toggle" },
      { key: "mobile.feature_flags.enable_swap", label: "Enable swap", type: "toggle" },
      { key: "mobile.feature_flags.enable_admin_assisted_swap_retry", label: "Enable admin-assisted swap retry", type: "toggle" },
    ],
  },
  {
    name: "Swap & Hardware",
    fields: [
      { key: "swap.door_open_timeout_seconds", label: "Door open timeout (s)", type: "number" },
      { key: "swap.door_close_timeout_seconds", label: "Door close timeout (s)", type: "number" },
      { key: "swap.remove_battery_timeout_seconds", label: "Remove battery timeout (s)", type: "number" },
      { key: "swap.insert_battery_timeout_seconds", label: "Insert battery timeout (s)", type: "number" },
      { key: "swap.charge_report_interval_seconds", label: "Charge report interval (s)", type: "number" },
      { key: "swap.auth_token_ttl_seconds", label: "Swap auth token TTL (s)", type: "number" },
      { key: "hardware.batt_present_v", label: "Battery present ≥ (V)", type: "number" },
      { key: "hardware.empty_max_v", label: "Empty slot < (V)", type: "number" },
      { key: "hardware.old_batt_max_v", label: "Returned battery max (V)", type: "number" },
      { key: "hardware.ready_batt_min_v", label: "Ready battery min (V)", type: "number" },
      { key: "hardware.full_batt_v", label: "Full battery (V)", type: "number" },
      { key: "hardware.full_detection.enabled", label: "Enable full detection (voltage + dwell)", type: "toggle" },
      { key: "hardware.full_dwell_hours", label: "Full dwell hours", type: "number" },
      { key: "hardware.full_dwell_grace_minutes", label: "Full dwell grace (min)", type: "number" },
    ],
  },
  {
    name: "Station Operation",
    fields: [
      { key: "station.operation_mode", label: "Operation mode", type: "select", options: [ { value: "dev", label: "Development" }, { value: "prod", label: "Production" } ], help: "Development enables simulated sensors; production uses real hardware." },
      { key: "station.dev.simulate_battery_sensors", label: "Dev: simulate battery sensors", type: "toggle" },
      { key: "station.dev.simulate_door_sensors", label: "Dev: simulate door sensors", type: "toggle" },
      { key: "station.dev.simulate_lockers", label: "Dev: simulate lockers", type: "toggle" },
      { key: "station.dev.step_delay_seconds", label: "Simulation step delay (s)", type: "number" },
    ],
  },
  {
    name: "Station Connectivity",
    fields: [
      { key: "station.status_push_interval_seconds", label: "Status push interval (s)", type: "number" },
      { key: "station.ota_check_interval_seconds", label: "OTA check interval (s)", type: "number" },
      { key: "station.token_refresh_interval_seconds", label: "Token refresh interval (s)", type: "number" },
      { key: "station.auth_token_ttl_seconds", label: "Station token TTL (s, min 2x refresh)", type: "number" },
      { key: "station.online_timeout_seconds", label: "Online timeout (sec, min 30)", type: "number" },
      { key: "station.ble_inactivity_timeout_seconds", label: "BLE inactivity timeout (s)", type: "number" },
      { key: "station.request_timeout_seconds", label: "Request timeout (s)", type: "number" },
      { key: "station.wifi_reconnect_reboot_minutes", label: "WiFi reconnect reboot (min)", type: "number" },
      { key: "station.offline_logging.enabled", label: "Enable offline logging (SD card)", type: "toggle" },
      { key: "station.offline_logging.queue_max_records", label: "Offline queue max records", type: "number" },
      { key: "station.offline_logging.flush_batch_size", label: "Offline flush batch size", type: "number" },
      { key: "station.offline_logging.status_coalesce_seconds", label: "Offline status coalesce (s)", type: "number" },
    ],
  },
  {
    name: "Security",
    fields: [
      { key: "security.sanctum_expiration_minutes", label: "Access token expiration (min)", type: "number" },
      { key: "security.refresh_token_ttl_days", label: "Refresh token TTL (days)", type: "number" },
      { key: "security.password.min_length", label: "Password minimum length", type: "number" },
      { key: "security.password.require_uppercase", label: "Require uppercase letter", type: "toggle" },
      { key: "security.password.require_lowercase", label: "Require lowercase letter", type: "toggle" },
      { key: "security.password.require_numbers", label: "Require number", type: "toggle" },
      { key: "security.password.require_symbols", label: "Require special character", type: "toggle" },
      { key: "security.password.allowed_special_characters", label: "Allowed special characters", type: "text" },
    ],
  },
];

// Resolve a form field's current value from the stored settings map, falling
// back to code defaults. Feature flags live inside the mobile.feature_flags
// object rather than their own rows.
function resolveSetting(stored: Record<string, any>, key: string): any {
  if (key.startsWith(FEATURE_FLAG_PREFIX)) {
    const flags = stored["mobile.feature_flags"];
    const sub = key.slice(FEATURE_FLAG_PREFIX.length);
    const value = flags && typeof flags === "object" ? flags[sub] : undefined;
    return value ?? SETTINGS_DEFAULTS[key];
  }
  return stored[key] ?? SETTINGS_DEFAULTS[key];
}

function SettingsView() {
  const [values, setValues] = useState<Record<string, any>>({});
  const [initial, setInitial] = useState<Record<string, any>>({});
  const [activeTab, setActiveTab] = useState(SETTINGS_TABS[0].name);
  const [error, setError] = useState("");
  const [notice, setNotice] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  const reload = useCallback(() => {
    setLoading(true);
    apiRequest("/api/admin/platform-settings")
      .then((b: any) => {
        const stored: Record<string, any> = {};
        for (const row of b.data ?? []) stored[row.key] = row.value;
        const seed: Record<string, any> = {};
        for (const tab of SETTINGS_TABS)
          for (const f of tab.fields) seed[f.key] = resolveSetting(stored, f.key);
        setValues(seed);
        setInitial(seed);
      })
      .catch(() => setError("Failed to load settings"))
      .finally(() => setLoading(false));
  }, []);
  useEffect(reload, [reload]);

  const setField = (key: string, value: any) => setValues((v) => ({ ...v, [key]: value }));

  const save = async () => {
    setSaving(true);
    setError("");
    setNotice("");
    try {
      const puts: Promise<any>[] = [];
      const flags: Record<string, boolean> = {};
      let flagsChanged = false;

      for (const tab of SETTINGS_TABS) {
        for (const f of tab.fields) {
          const value = values[f.key];
          if (f.key.startsWith(FEATURE_FLAG_PREFIX)) {
            flags[f.key.slice(FEATURE_FLAG_PREFIX.length)] = Boolean(value);
            if (value !== initial[f.key]) flagsChanged = true;
            continue;
          }
          if (value === initial[f.key]) continue;
          let payload: any = value;
          if (f.type === "number") payload = value === "" ? null : Number(value);
          else if (f.type === "toggle") payload = Boolean(value);
          else payload = value === "" ? null : value; // text / select
          puts.push(putApi(`/api/admin/platform-settings/${encodeURIComponent(f.key)}`, { value: payload }));
        }
      }
      if (flagsChanged)
        puts.push(putApi(`/api/admin/platform-settings/${encodeURIComponent("mobile.feature_flags")}`, { value: flags }));

      if (puts.length === 0) {
        setNotice("No changes to save.");
      } else {
        await Promise.all(puts);
        setNotice("Platform settings saved.");
      }
      reload();
    } catch (e: any) {
      setError(e.message ?? "Save failed");
    } finally {
      setSaving(false);
    }
  };

  if (loading) return <div className="panel">Loading…</div>;
  const tab = SETTINGS_TABS.find((t) => t.name === activeTab) ?? SETTINGS_TABS[0];

  return (
    <div className="panel">
      <div className="settings-tabs">
        {SETTINGS_TABS.map((t) => (
          <button
            type="button"
            key={t.name}
            className={t.name === activeTab ? "active" : ""}
            onClick={() => setActiveTab(t.name)}
          >
            {t.name}
          </button>
        ))}
      </div>
      <div className="form-grid">
        {tab.fields.map((f) => (
          <div key={f.key} className="settings-field">
            <label htmlFor={`set-${f.key}`}>{f.label}</label>
            {f.type === "toggle" ? (
              <input
                id={`set-${f.key}`}
                type="checkbox"
                style={{ width: "auto" }}
                checked={Boolean(values[f.key])}
                onChange={(e) => setField(f.key, e.target.checked)}
              />
            ) : f.type === "select" ? (
              <select id={`set-${f.key}`} value={String(values[f.key] ?? "")} onChange={(e) => setField(f.key, e.target.value)}>
                {f.options?.map((o) => (
                  <option key={o.value} value={o.value}>
                    {o.label}
                  </option>
                ))}
              </select>
            ) : (
              <input
                id={`set-${f.key}`}
                type={f.type === "number" ? "number" : "text"}
                value={values[f.key] ?? ""}
                onChange={(e) => setField(f.key, e.target.value)}
              />
            )}
            {f.help && <div className="field-help">{f.help}</div>}
          </div>
        ))}
      </div>
      <div className="row">
        <button type="button" className="primary" disabled={saving} onClick={save}>
          {saving ? "Saving…" : "Save settings"}
        </button>
        <span className="error">{error}</span>
        <span className="success">{notice}</span>
      </div>
    </div>
  );
}

function AdminsView(props: { canManage: boolean }) {
  const [creating, setCreating] = useState(false);
  return (
    <ResourceView
      endpoint="/api/admin/administrators"
      searchable
      defaultSort="id"
      columns={[
        { key: "id", label: "ID", sortable: true },
        { key: "name", label: "Name", sortable: true },
        { key: "email", label: "Email", sortable: true },
        { key: "created_at", label: "Created At", sortable: true },
      ]}
      canDelete={props.canManage}
      editFields={
        props.canManage
          ? [
              { name: "name", label: "Name" },
              { name: "email", label: "Email" },
              { name: "password", label: "New password (leave both blank to keep unchanged)", type: "password-confirm" },
            ]
          : undefined
      }
      headerExtra={(reload) =>
        !props.canManage ? (
          <span className="muted">Only super-admins can manage administrators.</span>
        ) : (
        <>
          <button type="button" className="primary" onClick={() => setCreating(true)}>
            + New administrator
          </button>
          {creating && (
            <Modal title="Create administrator" onClose={() => setCreating(false)}>
              <ResourceForm
                fields={[
                  { name: "name", label: "Name", required: true },
                  { name: "email", label: "Email", required: true },
                  { name: "password", label: "Password", type: "password", required: true },
                ]}
                submitLabel="Create admin"
                onSubmit={async (v) => {
                  await postApi("/api/admin/administrators", v);
                  setCreating(false);
                  reload();
                }}
              />
            </Modal>
          )}
        </>
      )}
    />
  );
}

function TechniciansView(props: { canManage: boolean }) {
  const [creating, setCreating] = useState(false);
  return (
    <ResourceView
      endpoint="/api/admin/technicians"
      searchable
      defaultSort="id"
      columns={[
        { key: "id", label: "ID", sortable: true },
        { key: "name", label: "Name", sortable: true },
        { key: "email", label: "Email", sortable: true },
        { key: "created_at", label: "Created At", sortable: true },
      ]}
      canDelete={props.canManage}
      headerExtra={(reload) =>
        !props.canManage ? (
          <span className="muted">Only super-admins can manage technicians.</span>
        ) : (
          <>
            <button type="button" className="primary" onClick={() => setCreating(true)}>
              + New technician
            </button>
            {creating && (
              <Modal title="Create technician" onClose={() => setCreating(false)}>
                <ResourceForm
                  fields={[
                    { name: "name", label: "Name", required: true },
                    { name: "email", label: "Email", required: true },
                    { name: "password", label: "Password", type: "password", required: true },
                  ]}
                  submitLabel="Create technician"
                  onSubmit={async (v) => {
                    await postApi("/api/admin/technicians", v);
                    setCreating(false);
                    reload();
                  }}
                />
              </Modal>
            )}
          </>
        )
      }
    />
  );
}

function StatCard(props: { label: string; value: number; sub: string; color: string }) {
  return (
    <div className="stat-card" style={{ borderTopColor: props.color }}>
      <div className="stat-value">{props.value.toLocaleString()}</div>
      <div className="stat-label">{props.label}</div>
      <div className="stat-sub">{props.sub}</div>
    </div>
  );
}

// Chart.js is loaded as a UMD global (window.Chart) from /admin/vendor.
declare const Chart: any;

// useChart mounts a Chart.js instance on a canvas ref and rebuilds it when
// the config changes, cleaning up the previous instance.
function useChart(config: any) {
  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
  const chartRef = React.useRef<any>(null);

  useEffect(() => {
    if (!canvasRef.current || typeof Chart === "undefined") return;
    chartRef.current = new Chart(canvasRef.current, config);
    return () => chartRef.current?.destroy();
  }, [JSON.stringify(config.data), JSON.stringify(config.options)]);

  return canvasRef;
}

function SwapChart(props: { data: { day: string; successful: number; failed: number }[] }) {
  const ref = useChart({
    type: "line",
    data: {
      labels: props.data.map((d) => d.day),
      datasets: [
        {
          label: "Successful Swaps",
          data: props.data.map((d) => d.successful),
          borderColor: "#3b82f6",
          backgroundColor: "#3b82f6",
          tension: 0.3,
          pointRadius: 4,
          pointHoverRadius: 6,
        },
        {
          label: "Failed Swaps",
          data: props.data.map((d) => d.failed),
          borderColor: "#ef4444",
          backgroundColor: "#ef4444",
          tension: 0.3,
          pointRadius: 4,
          pointHoverRadius: 6,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: "index", intersect: false },
      plugins: { legend: { position: "top" }, tooltip: { enabled: true } },
      scales: {
        x: { title: { display: true, text: "Day" } },
        y: {
          title: { display: true, text: "Number of Swaps" },
          beginAtZero: true,
          ticks: { precision: 0 },
        },
      },
    },
  });

  return (
    <div style={{ position: "relative", height: "260px" }}>
      <canvas ref={ref} />
    </div>
  );
}

function StationDonut(props: { active: number; inactive: number }) {
  const ref = useChart({
    type: "doughnut",
    data: {
      labels: ["Active", "Inactive"],
      datasets: [
        {
          data: [props.active, props.inactive],
          backgroundColor: ["#22c55e", "#ef4444"],
          borderWidth: 0,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: "62%",
      plugins: {
        legend: { position: "right" },
        tooltip: {
          callbacks: {
            label: (ctx: any) => {
              const total = props.active + props.inactive || 1;
              const pct = ((ctx.parsed / total) * 100).toFixed(1);
              return ` ${ctx.label}: ${ctx.parsed} (${pct}%)`;
            },
          },
        },
      },
    },
  });

  return (
    <div style={{ position: "relative", height: "220px" }}>
      <canvas ref={ref} />
    </div>
  );
}

function DashboardView() {
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    apiRequest("/api/admin/dashboard")
      .then(setData)
      .catch((e: any) => setError(e.message ?? "Failed to load dashboard"));
  }, []);

  if (error) return <div className="panel error">{error}</div>;
  if (!data) return <div className="panel">Loading…</div>;

  const s = data.stats;
  const activityBadge = (t: string) =>
    t === "login" ? "ok" : t === "logout" ? "neutral" : t === "swap" ? "info" : t === "reservation" ? "warn" : "neutral";

  return (
    <>
      <div className="stat-grid">
        <StatCard
          label="Stations"
          value={s.stations}
          sub={`${s.active_stations} active · ${s.inactive_stations} inactive`}
          color="#2563eb"
        />
        <StatCard label="Batteries" value={s.batteries} sub="In system" color="#16a34a" />
        <StatCard label="Users" value={s.users} sub="Registered app users" color="#0ea5e9" />
        <StatCard label="Companies" value={s.companies} sub="Registered companies" color="#f59e0b" />
        <StatCard label="Billable swaps" value={s.billable_swaps} sub="Battery dispensed" color="#dc2626" />
      </div>

      <div className="dash-two">
        <div className="panel">
          <h3 style={{ marginTop: 0 }}>Battery swaps — last 7 days</h3>
          <SwapChart data={data.swap_chart} />
        </div>
        <div className="panel">
          <h3 style={{ marginTop: 0 }}>Station availability</h3>
          <StationDonut active={s.active_stations} inactive={s.inactive_stations} />
        </div>
      </div>

      <div className="panel scroll">
        <h3 style={{ marginTop: 0 }}>Recent user activity</h3>
        {(!data.recent_activity || data.recent_activity.length === 0) ? (
          <p className="muted">No recent activity.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>time</th>
                <th>user</th>
                <th>event</th>
                <th>device</th>
                <th>ip</th>
                <th>company</th>
              </tr>
            </thead>
            <tbody>
              {data.recent_activity.map((row: any, i: number) => (
                <tr key={i}>
                  <td>{formatCell(row.created_at)}</td>
                  <td>{row.user_email ?? formatCell(row.phone_number)}</td>
                  <td>
                    {row.type ? <span className={`badge ${activityBadge(row.type)}`}>{row.type}</span> : "—"}
                  </td>
                  <td>{formatCell(row.device)}</td>
                  <td>{formatCell(row.ip)}</td>
                  <td>{formatCell(row.company_name)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <div className="panel scroll">
        <h3 style={{ marginTop: 0 }}>Station battery status</h3>
        {(!data.station_battery_status || data.station_battery_status.length === 0) ? (
          <p className="muted">No stations.</p>
        ) : (
          <table>
            <thead>
              <tr>
                <th>station</th>
                <th>location</th>
                <th>slots</th>
                <th>batteries</th>
                <th>occupancy</th>
              </tr>
            </thead>
            <tbody>
              {data.station_battery_status.map((row: any) => {
                const rate = Number(row.occupancy_rate);
                return (
                  <tr key={row.id}>
                    <td>{formatCell(row.name)}</td>
                    <td>{formatCell(row.location)}</td>
                    <td>{row.total_slots}</td>
                    <td>{row.battery_count}</td>
                    <td>
                      <div className="occupancy">
                        <div className="occupancy-track">
                          <div
                            className="occupancy-fill"
                            style={{ width: `${Math.max(0, Math.min(100, rate))}%` }}
                          />
                        </div>
                        <span>{rate}%</span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </>
  );
}

// Battery/User requests share a status (default pending, like Filament) and
// company filter.
const REQUEST_FILTERS: FilterDef[] = [
  {
    param: "status",
    label: "Status",
    defaultValue: "pending",
    options: [
      { value: "pending", label: "Pending" },
      { value: "approved", label: "Approved" },
      { value: "rejected", label: "Rejected" },
    ],
  },
  { param: "company_id", label: "Company", source: "companies" },
];

function RequestsView(props: { endpoint: string; extraCols: Column[] }) {
  const [reason, setReason] = useState("");
  const [rejecting, setRejecting] = useState<any>(null);
  const [reloadFn, setReloadFn] = useState<(() => void) | null>(null);

  const review = async (row: any, decision: string, reload: () => void, why = "") => {
    try {
      await postApi(`${props.endpoint}/${row.id}/review`, { decision, reason: why });
      reload();
    } catch (e: any) {
      window.alert(e.message ?? "Review failed");
    }
  };

  return (
    <>
      <ResourceView
        endpoint={props.endpoint}
        searchable
        defaultSort="created_at"
        filters={REQUEST_FILTERS}
        columns={[
          { key: "id", label: "ID", sortable: true },
          { key: "company_name", label: "Company", sortable: true },
          ...props.extraCols,
          { key: "status", label: "Status", badge: "status", sortable: true },
          { key: "created_at", label: "Created At", sortable: true },
        ]}
        extraRowActions={(row, reload) =>
          row.status === "pending" ? (
            <>
              <button type="button" className="small" onClick={() => review(row, "approve", reload)}>
                Approve
              </button>
              <button
                className="small danger"
                onClick={() => {
                  setRejecting(row);
                  setReason("");
                  setReloadFn(() => reload);
                }}
              >
                Reject
              </button>
            </>
          ) : (
            <span className="muted">{row.status}</span>
          )
        }
      />
      {rejecting && (
        <Modal title={`Reject request #${rejecting.id}`} onClose={() => setRejecting(null)}>
          <label>Rejection reason</label>
          <textarea value={reason} onChange={(e) => setReason(e.target.value)} rows={3} />
          <div style={{ marginTop: "0.7rem" }}>
            <button
              className="primary"
              onClick={async () => {
                await review(rejecting, "reject", reloadFn ?? (() => {}), reason);
                setRejecting(null);
              }}
            >
              Confirm rejection
            </button>
          </div>
        </Modal>
      )}
    </>
  );
}

function MonitoringView() {
  const [rows, setRows] = useState<any[]>([]);
  const [error, setError] = useState("");

  const reload = useCallback(() => {
    apiRequest("/api/admin/station-monitoring")
      .then((b: any) => setRows(b.data ?? []))
      .catch((e: any) => setError(e.message ?? "Failed to load"));
  }, []);
  useEffect(() => {
    reload();
    const timer = setInterval(reload, 15000);
    return () => clearInterval(timer);
  }, [reload]);

  return (
    <div className="panel scroll">
      <div className="row" style={{ marginBottom: "0.6rem" }}>
        <strong>Station monitoring</strong>
        <span className="muted">auto-refreshes every 15s</span>
        <span className="error">{error}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>code</th>
            <th>name</th>
            <th>online</th>
            <th>wifi</th>
            <th>ble</th>
            <th>swap active</th>
            <th>last connected</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((s) => (
            <tr key={s.id}>
              <td>{s.id}</td>
              <td>{s.code}</td>
              <td>{formatCell(s.name)}</td>
              <td>
                <span className={`badge ${s.online ? "ok" : "bad"}`}>{s.online ? "online" : "offline"}</span>
              </td>
              <td>{formatCell(s.wifi_connected)}</td>
              <td>{formatCell(s.ble_connected)}</td>
              <td>{formatCell(s.swap_active)}</td>
              <td>{formatCell(s.last_connected)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ---- shell ----

const STATION_FIELDS: Field[] = [
  { name: "name", label: "Name", required: true },
  { name: "code", label: "Code (blank = auto)" },
  { name: "scan_id", label: "Scan ID (blank = auto)" },
  { name: "location", label: "Location" },
  { name: "latitude", label: "Latitude", type: "number" },
  { name: "longitude", label: "Longitude", type: "number" },
  { name: "slot_count", label: "Slot count", type: "number" },
  { name: "battery_size", label: "Battery size" },
  { name: "empty_slot", label: "Empty slot (1-8)", type: "number" },
  { name: "password", label: "Device password", type: "password" },
];

const TABS = [
  "Dashboard",
  "Monitoring",
  "Stations",
  "Users",
  "Companies",
  "Representatives",
  "Batteries",
  "Battery Requests",
  "User Requests",
  "Swaps",
  "Event Logs",
  "Firmware",
  "Settings",
  "Admins",
  "Technicians",
  "Key Access Log",
] as const;

function LoginView(props: { onLogin: (token: string, admin: any) => void }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const submit = async () => {
    try {
      const res = await fetch("/api/admin/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });
      const body = await res.json();
      if (!res.ok || !body.token) return setError(body.message ?? "Login failed");
      props.onLogin(body.token, body.admin);
    } catch (e: any) {
      setError(e.message ?? "Login failed");
    }
  };

  return (
    <div className="login-box panel">
      <h2>Admin sign in</h2>
      <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && submit()}
      />
      <div className="error">{error}</div>
      <button type="button" className="primary" onClick={submit}>
        Sign in
      </button>
    </div>
  );
}

// ---- Notifications ----

function timeAgo(iso: string): string {
  const diffSec = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000));
  if (diffSec < 60) return "just now";
  const diffMin = Math.floor(diffSec / 60);
  if (diffMin < 60) return `${diffMin}m ago`;
  const diffHour = Math.floor(diffMin / 60);
  if (diffHour < 24) return `${diffHour}h ago`;
  return `${Math.floor(diffHour / 24)}d ago`;
}

// NotificationBell polls the unread count and shows a dropdown with the
// most recent notifications (currently: OTA success/failure), plus quick
// actions to mark read, download the full table as CSV, or open the
// print-friendly report (saved as PDF via the browser's own print dialog —
// no server-side PDF generation).
function NotificationBell() {
  const [open, setOpen] = useState(false);
  const [unread, setUnread] = useState(0);
  const [items, setItems] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const refreshUnread = useCallback(() => {
    apiRequest("/api/admin/notifications/unread-count")
      .then((r: any) => setUnread(r.unread_count ?? 0))
      .catch(() => {});
  }, []);

  useEffect(() => {
    refreshUnread();
    const id = setInterval(refreshUnread, 30000);
    return () => clearInterval(id);
  }, [refreshUnread]);

  const loadList = useCallback(() => {
    setLoading(true);
    apiRequest("/api/admin/notifications?per_page=10")
      .then((r: any) => setItems(r.data ?? []))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    if (open) loadList();
  }, [open, loadList]);

  const markRead = (id: number) => {
    postApi(`/api/admin/notifications/${id}/read`, {}).then(() => {
      loadList();
      refreshUnread();
    });
  };

  const markAllRead = () => {
    postApi("/api/admin/notifications/read-all", {}).then(() => {
      loadList();
      refreshUnread();
    });
  };

  return (
    <div className="notif-bell">
      <button className="small" onClick={() => setOpen((v) => !v)} title="Notifications">
        Notifications{unread > 0 && <span className="notif-badge">{unread > 99 ? "99+" : unread}</span>}
      </button>
      {open && (
        <div className="notif-panel">
          <div className="notif-panel-header">
            <strong>Notifications</strong>
            <div className="notif-panel-actions">
              <button className="small" onClick={markAllRead}>
                Mark all read
              </button>
              <button
                className="small"
                onClick={() => downloadBinary("/api/admin/notifications/export.csv", "notifications.csv")}
              >
                CSV
              </button>
              <button
                className="small"
                onClick={() => {
                  setOpen(false);
                  navigate(`${BASE}/notifications/report`);
                }}
              >
                Report
              </button>
            </div>
          </div>
          <div className="notif-list">
            {loading && <div className="notif-empty">Loading…</div>}
            {!loading && items.length === 0 && <div className="notif-empty">No notifications</div>}
            {!loading &&
              items.map((n) => (
                <div
                  key={n.id}
                  className={`notif-item${n.unread ? " unread" : ""}`}
                  onClick={() => n.unread && markRead(n.id)}
                >
                  <div className="notif-title">{n.title}</div>
                  <div className="notif-message">{n.message}</div>
                  <div className="notif-meta">
                    {n.station_name ?? n.station_code ?? "—"} · {timeAgo(n.created_at)}
                  </div>
                </div>
              ))}
          </div>
        </div>
      )}
    </div>
  );
}

// NotificationReportView is a print-friendly full report (every
// notification, not just the bell's most-recent-10) — "Print / Save as
// PDF" uses the browser's native print dialog rather than a server-side
// PDF export, so there's no font to embed and it reuses this page's own
// CSS via @media print.
function NotificationReportView() {
  const [items, setItems] = useState<any[] | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    apiRequest("/api/admin/notifications/export.json")
      .then((r: any) => setItems(r.data ?? []))
      .catch((e: any) => setError(e.message ?? "Failed to load report"));
  }, []);

  if (error) return <div className="panel error">{error}</div>;
  if (!items) return <div className="panel">Loading…</div>;

  return (
    <div className="notif-report">
      <div className="notif-report-toolbar no-print">
        <button onClick={() => navigate(`${BASE}/dashboard`)}>← Back</button>
        <button className="primary" onClick={() => window.print()}>
          Print / Save as PDF
        </button>
      </div>
      <h1>Notifications Report</h1>
      <p className="muted">
        Generated {new Date().toLocaleString()} · {items.length} notification{items.length === 1 ? "" : "s"}
      </p>
      <table className="notif-report-table">
        <thead>
          <tr>
            <th>Time</th>
            <th>Type</th>
            <th>Station</th>
            <th>Title</th>
            <th>Message</th>
          </tr>
        </thead>
        <tbody>
          {items.map((n) => (
            <tr key={n.id}>
              <td>{new Date(n.created_at).toLocaleString()}</td>
              <td>{n.type}</td>
              <td>{n.station_name ?? n.station_code ?? "—"}</td>
              <td>{n.title}</td>
              <td>{n.message ?? "—"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function App() {
  const [token, setToken] = useState(() => getToken());
  const [admin, setAdmin] = useState<any>(getAdmin());
  const segments = useRoute();

  // Super-admins manage administrators; the server enforces this too. Older
  // sessions predating the flag (undefined) still see the tab and get a 403.
  const canManageAdmins = admin?.is_super_admin !== false;
  const visibleTabs = TABS.filter(
    (name) => (name !== "Admins" && name !== "Technicians") || canManageAdmins,
  );

  // Derive the active view from the URL. /admin -> Dashboard; /admin/users ->
  // Users; /admin/users/{id}/edit -> the dedicated user edit page.
  const slug = segments[0] || "dashboard";
  const tab = SLUG_TABS[slug] ?? "Dashboard";
  const userEditId = segments[0] === "users" && segments[2] === "edit" ? segments[1] : null;
  const firmwareEditId = segments[0] === "firmware" && segments[2] === "edit" ? segments[1] : null;
  const notificationsReport = segments[0] === "notifications" && segments[1] === "report";

  if (!token) {
    return (
      <LoginView
        onLogin={(t, a) => {
          sessionStorage.setItem(TOKEN_KEY, t);
          sessionStorage.setItem(ADMIN_KEY, JSON.stringify(a));
          setToken(t);
          setAdmin(a);
        }}
      />
    );
  }

  return (
    <>
      <header>
        <h1>Neo Kozmo Admin</h1>
        <span className="spacer" />
        <NotificationBell />
        <span className="muted">{admin?.email}</span>
        <button
          className="small"
          onClick={() => {
            sessionStorage.clear();
            setToken("");
            setAdmin(null);
          }}
        >
          Sign out
        </button>
      </header>
      <div className="app-body">
      <nav className="sidebar">
        {visibleTabs.map((name) => (
          <button
            key={name}
            className={name === tab ? "active" : ""}
            onClick={() => navigate(`${BASE}/${TAB_SLUGS[name]}`)}
          >
            {name}
          </button>
        ))}
      </nav>
      <main>
        {userEditId ? (
          <UserEditPage userId={userEditId} />
        ) : firmwareEditId ? (
          <FirmwareEditPage firmwareId={firmwareEditId} />
        ) : notificationsReport ? (
          <NotificationReportView />
        ) : (
          <>
        {tab === "Dashboard" && <DashboardView />}
        {tab === "Monitoring" && <MonitoringView />}
        {tab === "Battery Requests" && (
          <RequestsView
            endpoint="/api/admin/battery-requests"
            extraCols={[
              { key: "quantity", label: "Quantity", sortable: true },
              { key: "requested_by_name", label: "Requested By" },
              { key: "notes", label: "Notes" },
              { key: "batteries_created", label: "Batteries Created" },
              { key: "rejection_reason", label: "Rejection Reason" },
            ]}
          />
        )}
        {tab === "User Requests" && (
          <RequestsView
            endpoint="/api/admin/user-requests"
            extraCols={[
              { key: "name", label: "Name", sortable: true },
              { key: "email", label: "Email", sortable: true },
              { key: "phone_number", label: "Phone Number" },
              { key: "location", label: "Location" },
              { key: "requested_by_name", label: "Requested By" },
              { key: "user_id", label: "User" },
            ]}
          />
        )}
        {tab === "Event Logs" && (
          <ResourceView
            endpoint="/api/admin/station-event-logs"
            searchable
            defaultSort="id"
            filters={[
              { param: "station_id", label: "Station", source: "stations" },
              {
                param: "category",
                label: "Category",
                options: [
                  { value: "swap", label: "Swap" },
                  { value: "door", label: "Door" },
                  { value: "locker", label: "Locker" },
                  { value: "charging", label: "Charging" },
                  { value: "system", label: "System" },
                  { value: "config", label: "Config" },
                ],
              },
              {
                param: "severity",
                label: "Severity",
                options: [
                  { value: "debug", label: "Debug" },
                  { value: "info", label: "Info" },
                  { value: "warning", label: "Warning" },
                  { value: "error", label: "Error" },
                ],
              },
            ]}
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "station_name", label: "Station", sortable: true },
              { key: "slot_id", label: "Slot" },
              { key: "event_type", label: "Event Type", sortable: true },
              { key: "severity", label: "Severity", sortable: true },
              { key: "category", label: "Category" },
              { key: "message", label: "Message" },
              { key: "swap_operation_id", label: "Swap Op" },
              { key: "created_at", label: "Created At", sortable: true },
            ]}
          />
        )}
        {tab === "Stations" && <StationsView />}
        {tab === "Users" && <UsersView />}
        {tab === "Companies" && (
          <ResourceView
            endpoint="/api/admin/companies"
            searchable
            defaultSort="id"
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "name", label: "Name", sortable: true },
              { key: "email", label: "Email" },
              { key: "representative_name", label: "Representative" },
              { key: "users_count", label: "Users" },
              { key: "signin_times", label: "Signin Times", sortable: true },
              { key: "swapping_times", label: "Swapping Times", sortable: true },
              { key: "reservation_count", label: "Reservation Count", sortable: true },
              { key: "created_at", label: "Created At", sortable: true },
            ]}
            createFields={[
              { name: "name", label: "Name", required: true },
              { name: "email", label: "Email (blank = auto)" },
              { name: "representative_id", label: "Representative ID", type: "number" },
            ]}
            editFields={[
              { name: "name", label: "Name" },
              { name: "email", label: "Email" },
              { name: "representative_id", label: "Representative ID", type: "number" },
            ]}
            canDelete
          />
        )}
        {tab === "Representatives" && (
          <ResourceView
            endpoint="/api/admin/representatives"
            searchable
            defaultSort="id"
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "name", label: "Name", sortable: true },
              { key: "email", label: "Email", sortable: true },
              { key: "company_name", label: "Company" },
              { key: "created_at", label: "Created At", sortable: true },
            ]}
            createFields={[
              { name: "name", label: "Name", required: true },
              { name: "email", label: "Email", required: true },
              { name: "password", label: "Password", type: "password", required: true },
              { name: "company_id", label: "Company ID", type: "number", required: true },
            ]}
            canDelete
          />
        )}
        {tab === "Batteries" && (
          <ResourceView
            endpoint="/api/admin/batteries"
            searchable
            defaultSort="id"
            filters={[
              { param: "station_id", label: "Station", source: "stations" },
              { param: "company_id", label: "Company", source: "companies" },
              {
                param: "unassigned",
                label: "Inventory",
                options: [{ value: "1", label: "Unassigned only" }],
              },
              {
                param: "high_usage",
                label: "Usage",
                options: [{ value: "1", label: "High usage (>50)" }],
              },
            ]}
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "station_name", label: "Station", sortable: true },
              { key: "slot_number", label: "Slot", sortable: true },
              { key: "company_name", label: "Company", sortable: true },
              { key: "usage_count", label: "Usage Count", sortable: true },
              { key: "current_carrier", label: "Current Carrier" },
              { key: "created_at", label: "Created At", sortable: true },
            ]}
            createFields={[
              { name: "station_id", label: "Station ID", type: "number" },
              { name: "slot_id", label: "Slot ID", type: "number" },
              { name: "company_id", label: "Company ID", type: "number" },
              { name: "current_carrier", label: "Current carrier" },
            ]}
            canDelete
          />
        )}
        {tab === "Swaps" && <SwapsView />}
        {tab === "Firmware" && <FirmwareView />}
        {tab === "Settings" && <SettingsView />}
        {tab === "Admins" && <AdminsView canManage={canManageAdmins} />}
        {tab === "Technicians" && <TechniciansView canManage={canManageAdmins} />}
        {tab === "Key Access Log" && (
          <ResourceView
            endpoint="/api/admin/diagnostics-key-access-log"
            searchable
            defaultSort="id"
            columns={[
              { key: "id", label: "ID", sortable: true },
              { key: "technician_name", label: "Technician", sortable: true },
              { key: "station_code", label: "Station Code" },
              { key: "station_name", label: "Station" },
              { key: "accessed_at", label: "Accessed At", sortable: true },
            ]}
          />
        )}
          </>
        )}
      </main>
      </div>
      <ToastContainer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);