// Main Folfem POC app: role switcher, global state, toasts, tweaks
const { useState, useMemo, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "driverLayout": "default",
  "otpFlow": "driver-types",
  "confirmGesture": "slide",
  "skipAuth": false
}/*EDITMODE-END*/;

// Layout options: default (route + map below), map-first (big map on top), list-compact (no map)
// OTP flow: driver-types (SMS to recipient, driver enters) | recipient-types (recipient types on driver phone)
// Confirm gesture: slide | two-tap | single

const seed = window.FOLFEM_DATA;

// Persona is determined by the route (set in each route's index.html), not a tab switcher.
const ROLE_META = {
  client: { label: "Sender portal", sub: "Book & track" },
  admin: { label: "Operations console", sub: "Freight & customs" },
  driver: { label: "Last-mile app", sub: "On the road" },
};

const App = () => {
  const [jobs, setJobs] = useState(seed.jobs);
  const [drivers, setDrivers] = useState(seed.drivers);
  const [messages, setMessages] = useState(seed.messages);
  const [toasts, setToasts] = useState([]);
  const role = window.FOLFEM_ROLE || "client";
  const [activeDriverId, setActiveDriverId] = useState("DR-01");
  const [currentClient, setCurrentClient] = useState("Aduke & Sons (UK) Ltd");
  // Client portal internal page + service pre-selection from the Services page
  const [clientPage, setClientPage] = useState("book");
  const [pendingService, setPendingService] = useState(null);
  const goBook = useCallback((svc) => { setPendingService(svc || null); setClientPage("book"); }, []);

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authed, setAuthed] = useState({ client: false, admin: false, driver: false });

  const pushToast = useCallback((t) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(ts => [...ts, { id, ...t }]);
    setTimeout(() => setToasts(ts => ts.filter(x => x.id !== id)), 4200);
  }, []);

  const sendMessage = useCallback((msg) => {
    const t = new Date().toTimeString().slice(0, 5);
    setMessages(ms => [{ id: Date.now(), t, ...msg }, ...ms]);
    pushToast({
      title: msg.channel === "sms" ? "SMS sent" : "Email sent",
      desc: `${msg.to} · ${msg.subject}`,
    });
  }, [pushToast]);

  const genOTP = () => String(Math.floor(100000 + Math.random() * 900000));

  const addJob = useCallback((j) => {
    setJobs(js => [j, ...js]);
    pushToast({ title: "Shipment booked", desc: `${j.id} · awaiting UK collection` });
    sendMessage({
      channel: "email",
      to: "ops@folfem.co.uk",
      subject: `New booking ${j.id}`,
      body: `${j.client} booked a ${j.service} shipment from ${j.origin.addr} to ${j.delivery.name}, ${j.delivery.addr}.`,
      jobId: j.id,
    });
  }, [pushToast, sendMessage]);

  const assignDriver = useCallback((jobId, driverId) => {
    setJobs(js => js.map(j => {
      if (j.id !== jobId) return j;
      const driver = driverId ? drivers.find(d => d.id === driverId) : null;
      const t = new Date().toTimeString().slice(0, 5);
      if (!driverId) {
        return { ...j, driverId: null, status: "Pending", stage: "Customs", events: [...j.events, { t, k: "Customs", text: "Last-mile unassigned — back to clearance queue" }] };
      }
      return {
        ...j,
        driverId,
        status: "Assigned",
        stage: "OutForDelivery",
        otp: j.otp || genOTP(),
        events: [...j.events, { t, k: "Assigned", text: `Last-mile assigned to ${driver.name}` }],
      };
    }));
    if (driverId) {
      const driver = drivers.find(d => d.id === driverId);
      const job = jobs.find(j => j.id === jobId);
      pushToast({ title: "Driver assigned", desc: `${driver.name} → ${jobId}` });
      sendMessage({
        channel: "sms",
        to: driver.phone,
        subject: "New last-mile job",
        body: `You've been assigned ${jobId} — ${job.service} from ${job.client}, deliver to ${job.delivery.name}. Open the app to accept.`,
        jobId,
      });
    }
  }, [drivers, jobs, pushToast, sendMessage]);

  const advance = useCallback((jobId, nextStatus, note) => {
    const t = new Date().toTimeString().slice(0, 5);
    setJobs(js => js.map(j => j.id === jobId ? { ...j, status: nextStatus, events: [...j.events, { t, k: nextStatus, text: note }] } : j));
    const job = jobs.find(j => j.id === jobId);
    if (nextStatus === "Accepted") {
      pushToast({ title: "Job accepted", desc: `${jobId}` });
      sendMessage({ channel: "sms", to: job.delivery.phone, subject: "Out for delivery soon", body: `${drivers.find(d => d.id === job.driverId).name} will deliver your Folfem shipment ${jobId} (${job.delivery.time}).`, jobId });
    } else if (nextStatus === "InTransit") {
      pushToast({ title: "Out for delivery", desc: `${jobId} en route` });
      sendMessage({ channel: "sms", to: job.delivery.phone, subject: "Out for delivery", body: `Your Folfem shipment ${jobId} is out for delivery. ETA ${job.delivery.time}.`, jobId });
    }
  }, [drivers, jobs, pushToast, sendMessage]);

  const complete = useCallback((jobId) => {
    const t = new Date().toTimeString().slice(0, 5);
    setJobs(js => js.map(j => j.id === jobId ? { ...j, status: "Delivered", stage: "Delivered", otpDelivered: true, events: [...j.events, { t, k: "Delivered", text: `OTP verified, delivered to ${j.delivery.contact}` }] } : j));
    const job = jobs.find(j => j.id === jobId);
    pushToast({ title: "Delivered ✓", desc: `${jobId} · OTP verified` });
    sendMessage({ channel: "sms", to: job.delivery.phone, subject: "Delivered", body: `${jobId} delivered to ${job.delivery.name}. Thanks for shipping with Folfem.`, jobId });
    sendMessage({ channel: "email", to: "ops@folfem.co.uk", subject: `${jobId} delivered`, body: `Proof of delivery captured: OTP verified by ${drivers.find(d => d.id === job.driverId).name}.`, jobId });
  }, [drivers, jobs, pushToast, sendMessage]);

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <span className="brand-mark" />
          Folfem
          <span className="brand-sub">UK → Nigeria</span>
        </div>

        <span className="persona-pill">
          <span className="role-dot" />
          {ROLE_META[role].label}
        </span>

        <div className="topbar-spacer" />
        <div className="topbar-meta">
          {authed[role] && (
            <button className="sign-out-btn" onClick={() => setAuthed(a => ({ ...a, [role]: false }))}>
              Sign out
            </button>
          )}
          <a className="portal-switch" href="../index.html">Switch portal</a>
          <span className="live">Sandbox live</span>
          <span>v0.1 · POC</span>
        </div>
      </header>

      <div className="workspace">
        {!tweaks.skipAuth && !authed[role] ? (
          <AuthFlow key={role} role={role} onAuthed={(opts) => {
            if (opts && opts.newClient) setCurrentClient(opts.newClient);
            setAuthed(a => ({ ...a, [role]: true }));
          }} />
        ) : (
          <>
            {role === "client" && (
              <div className="client-portal">
                <nav className="client-subnav">
                  <div className="client-subnav-inner">
                    <button className={clientPage === "book" ? "active" : ""} onClick={() => setClientPage("book")}>
                      <FFIcon name="box" size={15} /> Book a shipment
                    </button>
                    <button className={clientPage === "services" ? "active" : ""} onClick={() => setClientPage("services")}>
                      <FFIcon name="globe" size={15} /> Services
                    </button>
                  </div>
                </nav>
                {clientPage === "services" ? (
                  <ClientServices onBook={goBook} />
                ) : (
                  <ClientView key={pendingService || "book"} jobs={jobs} addJob={addJob} currentClient={currentClient} initialService={pendingService} />
                )}
              </div>
            )}
            {role === "admin" && (
              <AdminView jobs={jobs} drivers={drivers} messages={messages} assignDriver={assignDriver} sendMessage={sendMessage} />
            )}
            {role === "driver" && (
              <DriverView
                jobs={jobs}
                drivers={drivers}
                statusVariant={tweaks.driverLayout}
                otpVariant={tweaks.otpFlow}
                confirmVariant={tweaks.confirmGesture}
                activeDriverId={activeDriverId}
                setActiveDriverId={setActiveDriverId}
                advance={advance}
                complete={complete}
                sendMessage={sendMessage}
                pushToast={pushToast}
              />
            )}
          </>
        )}
      </div>

      <div className="toasts">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            <span className="icon"><FFIcon name="check" size={11} stroke={2.4} /></span>
            <div className="body">
              <div className="t">{t.title}</div>
              <div className="d">{t.desc}</div>
            </div>
          </div>
        ))}
      </div>

      <TweaksPanel title="Tweaks">
        {role === "driver" && (
        <TweakSection label="Driver UI">
          <TweakRadio
            label="Mobile layout"
            value={tweaks.driverLayout}
            options={[
              { value: "default", label: "Default" },
              { value: "map-first", label: "Map-first" },
              { value: "list-compact", label: "Compact" },
            ]}
            onChange={(v) => setTweak("driverLayout", v)}
          />
          <TweakRadio
            label="OTP flow"
            value={tweaks.otpFlow}
            options={[
              { value: "driver-types", label: "Driver enters" },
              { value: "recipient-types", label: "Recipient enters" },
            ]}
            onChange={(v) => setTweak("otpFlow", v)}
          />
          <TweakSelect
            label="Status-update gesture"
            value={tweaks.confirmGesture}
            options={[
              { value: "single", label: "Single tap" },
              { value: "two-tap", label: "Two-tap (armed) confirm" },
              { value: "slide", label: "Slide-to-confirm" },
            ]}
            onChange={(v) => setTweak("confirmGesture", v)}
          />
        </TweakSection>
        )}
        <TweakSection label="Quick actions">
          <TweakToggle
            label="Skip auth (jump to app)"
            value={tweaks.skipAuth}
            onChange={(v) => setTweak("skipAuth", v)}
          />
          <TweakButton label="Sign out of all roles" onClick={() => setAuthed({ client: false, admin: false, driver: false })} />
          <TweakButton label="Reset sample data" onClick={() => {
            setJobs(seed.jobs);
            setMessages(seed.messages);
            pushToast({ title: "Reset", desc: "Sample data restored" });
          }} />
          <div style={{ fontSize: 11, color: "var(--muted)", lineHeight: 1.45, marginTop: 8, padding: "0 4px" }}>
            Each role has its own login. Use <strong>Autofill</strong> on a login screen, or enable Skip auth to bypass.
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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