/* ============================================================
   AfricaMart Admin — App router & global state
   ============================================================ */
const { useState: useS, useEffect: useE, useRef: useR } = React;

function AdminApp({ adminProfile, onSignOut }) {
  const [route, setRoute] = useS(() => (location.hash || "#overview").slice(1));
  const [search, setSearch] = useS("");
  const [toasts, setToasts] = useS([]);
  const [confirmData, setConfirmData] = useS(null);
  const toastSeq = useR(0);

  // mutable copies of seed data for live state
  const [buyers, setBuyers] = useS(() => window.ADM.BUYERS.map(b => ({ ...b })));
  const [supplierStatus, setSupplierStatus] = useS(() => ({ ...window.ADM.SUPPLIER_ADMIN }));
  const [suppliers, setSuppliers] = useS(() => window.AM.SUPPLIERS.filter(s => s.kind !== "service").map(s => ({ ...s })));
  const [listings, setListings] = useS(() => window.ADM.LISTINGS.map(l => ({ ...l })));
  const [verification, setVerificationState] = useS(() => window.ADM.VERIFICATION.map(v => ({ ...v })));
  const [disputes, setDisputes] = useS(() => window.ADM.DISPUTES.map(d => ({ ...d })));
  const [orders, setOrders] = useS(() => window.ADM.ORDERS.map(o => ({ ...o })));

  useE(() => {
    const onHash = () => { setRoute((location.hash || "#overview").slice(1)); setSearch(""); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const nav = id => { location.hash = id; };
  const toast = (msg, danger) => {
    const id = ++toastSeq.current;
    setToasts(t => [...t, { id, msg, danger, icon: danger ? "alert-triangle" : "check-circle" }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2600);
  };
  const confirm = cfg => setConfirmData(cfg);

  // ---- mutations ----
  const setBuyerStatus = (id, status, patch = {}) => setBuyers(bs => bs.map(b => b.id === id ? { ...b, status, ...patch } : b));
  const setSupplierStatusFn = (id, status, patch = {}) => {
    setSupplierStatus(ss => ({ ...ss, [id]: { ...ss[id], status } }));
    if (Object.keys(patch).length) setSuppliers(s => s.map(x => x.id === id ? { ...x, ...patch } : x));
  };
  // unify supplier admin overlay into ADM so drawers read fresh status
  useE(() => { window.ADM.SUPPLIER_ADMIN = supplierStatus; }, [supplierStatus]);

  // Load live data from Supabase (falls back to seed data above on error)
  useE(() => {
    let cancelled = false;
    (async () => {
      try {
        const [liveBuyers, liveSuppliers, liveOrders, liveDisputes, liveVerification, liveActivity, kpis] = await Promise.all([
          window.DB.admin.getBuyers(),
          window.DB.admin.getSuppliers(),
          window.DB.admin.getOrders(),
          window.DB.admin.getDisputes(),
          window.DB.admin.getVerificationQueue(),
          window.DB.admin.getActivity(10),
          window.DB.admin.getOverviewKPIs(),
        ]);
        if (cancelled) return;
        const overlay = {};
        const baseSuppliers = liveSuppliers.map(({ status, risk, payoutHold, gmv, orders, flags, kyc, joined, ...base }) => {
          overlay[base.id] = { status, risk, payoutHold, gmv, orders, flags, kyc, joined };
          return base;
        });
        setBuyers(liveBuyers);
        setSuppliers(baseSuppliers);
        setSupplierStatus(overlay);
        setOrders(liveOrders);
        setDisputes(liveDisputes);
        setVerificationState(liveVerification);
        window.ADM.ORDERS = liveOrders;
        window.ADM.DISPUTES = liveDisputes;
        window.ADM.VERIFICATION = liveVerification;
        window.ADM.ACTIVITY = liveActivity;
        window.ADM.buyerById = Object.fromEntries(liveBuyers.map(b => [b.id, b]));
        Object.assign(window.ADM.KPIS, kpis);
      } catch (e) {
        console.error("[admin] failed to load live data", e);
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const setListing = (id, status) => setListings(ls => status === "removed" ? ls.filter(l => l.id !== id) : ls.map(l => l.id === id ? { ...l, status, flags: status === "live" ? 0 : l.flags } : l));
  const setVerification = (id, status) => {
    setVerificationState(vs => vs.map(v => v.id === id ? { ...v, status } : v));
    window.DB.admin.setVerificationStatus(id, status).catch(e => { console.error("[admin] failed to update verification", e); toast("Failed to save verification status", true); });
  };
  const setDispute = (id, status) => {
    setDisputes(ds => ds.map(d => d.id === id ? { ...d, status } : d));
    window.DB.admin.setDisputeStatus(id, status).catch(e => { console.error("[admin] failed to update dispute", e); toast("Failed to save dispute status", true); });
  };

  let view;
  switch (route) {
    case "buyers": view = React.createElement(BuyersModule, { accounts: buyers, setStatus: setBuyerStatus, toast, confirm, search }); break;
    case "suppliers": view = React.createElement(SuppliersModule, { accounts: suppliers, setStatus: setSupplierStatusFn, toast, confirm, search }); break;
    case "verification": view = React.createElement(VerificationModule, { verification, setVerification, toast, confirm }); break;
    case "listings": view = React.createElement(ListingsModule, { listings, setListing, toast, confirm, search }); break;
    case "rfqs": view = React.createElement(RfqModule, { toast, search }); break;
    case "orders": view = React.createElement(OrdersModule, { orders, toast, search }); break;
    case "disputes": view = React.createElement(DisputesModule, { disputes, setDispute, toast, confirm, search }); break;
    case "analytics": view = React.createElement(AnalyticsModule, { toast }); break;
    case "activity": view = React.createElement(ActivityModule, { search }); break;
    case "team": view = React.createElement(TeamModule, { toast, confirm }); break;
    case "settings": view = React.createElement(SettingsModule, { toast }); break;
    default: view = React.createElement(OverviewModule, { nav, toast });
  }

  return React.createElement("div", { style: { display: "flex", height: "100vh", overflow: "hidden", background: "#F7F4F0" } },
    React.createElement(AdminSidebar, { active: route, onChange: nav }),
    React.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%" } },
      React.createElement(AdminTopBar, { module: route, search, setSearch, onCommand: () => nav("activity"), adminProfile, onSignOut }),
      React.createElement("div", { style: { flex: 1, overflowY: "auto", padding: 24 } },
        React.createElement("div", { key: route, style: { maxWidth: 1180, margin: "0 auto" } }, view))),
    React.createElement(ToastHost, { toasts }),
    React.createElement(Confirm, { data: confirmData, onClose: () => setConfirmData(null), onConfirm: () => confirmData && confirmData.onConfirm && confirmData.onConfirm() }));
}

Object.assign(window, { AdminApp });