// Partner App — three partner types, cycles via topbar chip.

const PARTNERS = [
  {
    type: "fulfillment", typeLabel: "Fulfillment partner", flag: "🇨🇳",
    name: "Yiwu Logistics Co", subtitle: "3PL · Yiwu DC",
    user: "Wei Chen", userRole: "Shift lead", initial: "W",
    integrationId: "fp_5fa8…3b21",
  },
  {
    type: "logistics", typeLabel: "Logistics partner", flag: "🇨🇳",
    name: "BEST Express", subtitle: "Carrier · CN national",
    user: "Liu Han", userRole: "Dispatch supervisor", initial: "L",
    integrationId: "lp_8c2d…4f17",
  },
  {
    type: "distributor", typeLabel: "Distributor", flag: "🇨🇳",
    name: "Shanghai East regional", subtitle: "Reseller · 12 brands",
    user: "Zhang Wen", userRole: "Regional manager", initial: "Z",
    integrationId: "dp_2a91…7e08",
  },
];

const DEFAULT_SECTION = { fulfillment: "ops", logistics: "ops", distributor: "ops" };

function PartnerApp() {
  const [partnerIdx, setPartnerIdx] = React.useState(0);
  const partner = PARTNERS[partnerIdx];
  const [sections, setSections] = React.useState({ fulfillment: "ops", logistics: "ops", distributor: "ops" });
  const section = sections[partner.type];
  const setSection = (s) => setSections(prev => ({ ...prev, [partner.type]: s }));

  const cyclePartner = () => setPartnerIdx(i => (i + 1) % PARTNERS.length);

  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-partner-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("thaihao-partner-theme", theme); } catch {}
  }, [theme]);

  const crumbs = ["Partner", partner.name, section === "ops" ? "Operations" : section[0].toUpperCase() + section.slice(1)];

  return (
    <div className="workspace">
      <PartnerSidebar partner={partner} section={section} setSection={setSection} />
      <div className="main">
        <PartnerTopbar crumbs={crumbs} partner={partner} onCyclePartner={cyclePartner} theme={theme} onToggleTheme={() => setTheme(t => t==="dark"?"light":"dark")} />
        <div className="content" key={partner.type + "-" + section}>
          {section === "ops"      && <OpsDashboard partner={partner} />}
          {section === "picks"    && <PickList />}
          {section === "dispatch" && <DispatchBoard />}
          {section === "catalog"  && <DistributorCatalog />}
          {!["ops","picks","dispatch","catalog"].includes(section) && <PartnerPlaceholder section={section} />}
        </div>
      </div>
    </div>
  );
}

function PartnerPlaceholder({ section }) {
  return (
    <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:10, padding:"64px 0", color:"var(--on-surface-variant)"}}>
      <i className="ti ti-package" style={{fontSize:48}}></i>
      <h2 style={{fontFamily:"var(--font-display)", fontSize:18, color:"var(--on-surface)", margin:0}}>{section}</h2>
      <p style={{maxWidth:480, textAlign:"center", margin:0, fontSize:13}}>Coming in Phase 3.</p>
      <span style={{fontSize:11, fontFamily:"var(--font-mono)"}}>UI kit · prototype</span>
    </div>
  );
}

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