/* global React, ReactDOM, SUPPLIERS, PENDING_APPROVALS, MY_BILLS,
   BILLING_STATUS_META, fmtTHB,
   IconSearch, IconUsers, IconList, IconCheckCirc, IconStar, IconReceipt,
   IconUpload, IconBell, IconSettings, IconBuilding, IconShield, IconClock,
   IconChart, IconLogout, IconFile, IconChevronDn, IconChevron,
   Avatar, StatusPill,
   ScreenDatabase, ScreenDetail, ScreenRegister, ScreenApproval, ScreenQuality,
   ScreenLogin, ScreenSubmit, ScreenPortalBilling,
   ScreenCompliance, ScreenAudit, ScreenReports,
   ScreenBillingInbox, ScreenCompanyProfile, ScreenDocuments, ScreenSettings,
   Popover, NotificationsMenu, SettingsMenu,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor
*/
const { useState: useStateApp, useEffect: useEffectApp } = React;

const INTERNAL_NAV = [
  { id: "database", label: "Suppliers",         icon: IconUsers,    count: SUPPLIERS.length },
  { id: "approval", label: "Approval queue",    icon: IconCheckCirc, count: PENDING_APPROVALS.length, badge: true },
  { id: "quality",  label: "Quality reviews",   icon: IconStar      },
  { id: "billing",  label: "Billing inbox",     icon: IconReceipt,  count: 12 },
];
const INTERNAL_NAV_2 = [
  { id: "compliance", label: "Compliance",     icon: IconShield },
  { id: "audit",      label: "Audit log",      icon: IconClock  },
  { id: "reports",    label: "Reports",        icon: IconChart  },
];

const PORTAL_NAV = [
  { id: "p-dashboard", label: "Dashboard",     icon: IconChart  },
  { id: "p-submit",    label: "Submit invoice",icon: IconUpload },
  { id: "p-billing",   label: "My billing",    icon: IconReceipt, count: MY_BILLS.length },
];
const PORTAL_NAV_2 = [
  { id: "p-profile",   label: "Company profile",icon: IconBuilding },
  { id: "p-docs",      label: "Documents",     icon: IconFile },
  { id: "p-settings",  label: "Settings",      icon: IconSettings },
];

const SCREEN_TITLE = {
  database: "Suppliers",
  detail:   "Supplier detail",
  register: "Register supplier",
  approval: "Approval queue",
  quality:  "Quality reviews",
  billing:  "Billing inbox",
  compliance: "Compliance",
  audit:    "Audit log",
  reports:  "Reports",
  "p-dashboard": "Dashboard",
  "p-submit":   "Submit invoice",
  "p-billing":  "My billing",
  "p-profile":  "Company profile",
  "p-docs":     "Documents",
  "p-settings": "Settings",
};

const ACCENTS = {
  "#9437FF": { dark: "#9437FF", light: "#5B2D9A", text: "#fff" }, // brand purple
  "#73FDFF": { dark: "#73FDFF", light: "#007A8C", text: "#000" }, // ice cyan
  "#22D389": { dark: "#22D389", light: "#0D9D5F", text: "#000" }, // emerald
  "#FFB547": { dark: "#FFB547", light: "#B87B14", text: "#000" }, // amber
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "comfortable",
  "accent": "#9437FF"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [ctx, setCtx] = useStateApp("internal");
  const [screen, setScreen] = useStateApp("database");
  const [openSupplier, setOpenSupplier] = useStateApp(null);
  const [showLogin, setShowLogin] = useStateApp(false);
  const [menu, setMenu] = useStateApp({ type: null, anchor: null });

  const bellRef = React.useRef(null);
  const gearTopRef = React.useRef(null);
  const gearSideRef = React.useRef(null);

  const openMenu = (type, anchor) => setMenu({ type, anchor });
  const closeMenu = () => setMenu({ type: null, anchor: null });

  // Apply theme/density/accent at root
  useEffectApp(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", tweaks.theme);
    root.setAttribute("data-density", tweaks.density);
    const a = ACCENTS[tweaks.accent] || ACCENTS["#9437FF"];
    root.style.setProperty("--accent", tweaks.theme === "light" ? a.light : a.dark);
    root.style.setProperty("--accent-text", a.text);
  }, [tweaks.theme, tweaks.density, tweaks.accent]);

  const isPortal = ctx === "portal";

  // Login standalone overlay
  if (isPortal && showLogin) {
    return (
      <>
        <ScreenLogin onLogin={() => setShowLogin(false)}/>
        <TweaksPanel title="Tweaks">
          <TweakSection label="Appearance">
            <TweakRadio label="Theme"   value={tweaks.theme}   options={[{value:"dark",label:"Dark"},{value:"light",label:"Light"}]} onChange={v => setTweak("theme", v)}/>
            <TweakRadio label="Density" value={tweaks.density} options={[{value:"compact",label:"Compact"},{value:"comfortable",label:"Comfy"}]} onChange={v => setTweak("density", v)}/>
            <TweakColor label="Accent"  value={tweaks.accent}  options={Object.keys(ACCENTS)} onChange={v => setTweak("accent", v)}/>
          </TweakSection>
          <TweakSection label="Demo">
            <button className="btn btn-secondary btn-sm" style={{width:"100%"}} onClick={() => setShowLogin(false)}>Skip login →</button>
          </TweakSection>
        </TweaksPanel>
      </>
    );
  }

  const sidebarNav = isPortal ? PORTAL_NAV : INTERNAL_NAV;
  const sidebarNav2 = isPortal ? PORTAL_NAV_2 : INTERNAL_NAV_2;

  const onPickScreen = (id) => {
    setOpenSupplier(null);
    setScreen(id);
  };

  // Render current screen
  let body;
  if (!isPortal) {
    if (openSupplier) {
      body = <ScreenDetail supplier={openSupplier} onBack={() => setOpenSupplier(null)}/>;
    } else if (screen === "database") {
      body = <ScreenDatabase
        onOpenSupplier={s => setOpenSupplier(s)}
        onNewSupplier={() => setScreen("register")}/>;
    } else if (screen === "register") {
      body = <ScreenRegister onCancel={() => setScreen("database")}/>;
    } else if (screen === "approval") {
      body = <ScreenApproval/>;
    } else if (screen === "quality") {
      body = <ScreenQuality/>;
    } else if (screen === "compliance") {
      body = <ScreenCompliance/>;
    } else if (screen === "audit") {
      body = <ScreenAudit/>;
    } else if (screen === "reports") {
      body = <ScreenReports/>;
    } else if (screen === "billing") {
      body = <ScreenBillingInbox/>;
    } else {
      body = <PlaceholderScreen label={SCREEN_TITLE[screen] || screen}/>;
    }
  } else {
    if (screen === "p-submit") {
      body = <ScreenSubmit onCancel={() => setScreen("p-billing")} onSubmit={() => setScreen("p-billing")}/>;
    } else if (screen === "p-billing") {
      body = <ScreenPortalBilling onSubmit={() => setScreen("p-submit")}/>;
    } else if (screen === "p-dashboard") {
      body = <PortalDashboard onSubmit={() => setScreen("p-submit")} onBilling={() => setScreen("p-billing")}/>;
    } else if (screen === "p-profile") {
      body = <ScreenCompanyProfile/>;
    } else if (screen === "p-docs") {
      body = <ScreenDocuments/>;
    } else if (screen === "p-settings") {
      body = <ScreenSettings/>;
    } else {
      body = <PlaceholderScreen label={SCREEN_TITLE[screen] || screen}/>;
    }
  }

  return (
    <div className="app">
      <aside className="sidebar">
        <div className="brand-lockup">
          <img src={tweaks.theme === "light" ? "assets/logo-color.png" : "assets/logo-white.png"} alt="MotionReach"/>
          <div className="divider-v"></div>
          <img className="brandstorm-mark"
            src={tweaks.theme === "light" ? "assets/brandstorm-color.png" : "assets/brandstorm-white.png"}
            alt="Brandstorm"/>
        </div>
        <div className="brand-sublabel">Vendor OS · v0.4</div>

        <div className="ctx-switcher">
          <button className={ctx === "internal" ? "active" : ""}
            onClick={() => { setCtx("internal"); setScreen("database"); setOpenSupplier(null); }}>
            Internal
          </button>
          <button className={ctx === "portal" ? "active" : ""}
            onClick={() => { setCtx("portal"); setScreen("p-billing"); }}>
            Supplier
          </button>
        </div>

        <div className="nav-section">
          {sidebarNav.map(n => (
            <NavItem key={n.id} item={n}
              active={screen === n.id || (n.id === "database" && openSupplier)}
              onClick={() => onPickScreen(n.id)}/>
          ))}
        </div>

        <div className="nav-section">
          <div className="nav-section-title">{isPortal ? "Account" : "Tools"}</div>
          {sidebarNav2.map(n => (
            <NavItem key={n.id} item={n}
              active={screen === n.id}
              onClick={() => onPickScreen(n.id)}/>
          ))}
        </div>

        {isPortal && (
          <div className="nav-section">
            <button className="btn btn-ghost btn-sm" style={{justifyContent:"flex-start", padding: "7px 10px"}}
              onClick={() => setShowLogin(true)}>
              <IconLogout size={14}/> Sign out
            </button>
          </div>
        )}

        <div className="sidebar-footer">
          {isPortal ? (
            <>
              <Avatar name="Tinker Post Bangkok" size="sm"/>
              <div className="user-meta">
                <span className="name">Tinker Post Bangkok</span>
                <span className="role">Vendor · VND-1042</span>
              </div>
            </>
          ) : (
            <>
              <Avatar name="Ploy Veerasakul" size="sm"/>
              <div className="user-meta">
                <span className="name">Ploy Veerasakul</span>
                <span className="role">Project Manager</span>
              </div>
            </>
          )}
          <button ref={gearSideRef} className="icon-btn" title="Settings"
            onClick={() => menu.type === "settings-side" ? closeMenu() : openMenu("settings-side", gearSideRef.current)}>
            <IconSettings size={14}/>
          </button>
        </div>
      </aside>

      <main className="main">
        <div className="topbar">
          <div className="breadcrumb">
            {isPortal
              ? <><span>Supplier portal</span><span className="sep">/</span><span className="cur">{SCREEN_TITLE[screen] || screen}</span></>
              : openSupplier
                ? <><span style={{cursor:"pointer"}} onClick={() => setOpenSupplier(null)}>Suppliers</span><span className="sep">/</span><span className="cur">{openSupplier.name}</span></>
                : <><span>Procurement</span><span className="sep">/</span><span className="cur">{SCREEN_TITLE[screen] || screen}</span></>
            }
          </div>

          <div className="topbar-spacer"></div>

          <div className="topbar-search">
            <IconSearch size={14} className="icon"/>
            <input placeholder={isPortal ? "Search invoices, projects…" : "Search suppliers, invoices, contacts…"}/>
            <span className="kbd" style={{position:"absolute", right: 8, top: "50%", transform:"translateY(-50%)"}}>⌘K</span>
          </div>

          <div className="topbar-actions">
            <button ref={bellRef} className="icon-btn"
              onClick={() => menu.type === "notifs" ? closeMenu() : openMenu("notifs", bellRef.current)}
              style={{position: "relative"}}>
              <IconBell size={16}/>
              <span style={{
                position: "absolute", top: 4, right: 4,
                width: 8, height: 8, borderRadius: "50%",
                background: "var(--danger)",
                border: "2px solid var(--bg-primary)",
              }}></span>
            </button>
            <button ref={gearTopRef} className="icon-btn"
              onClick={() => menu.type === "settings-top" ? closeMenu() : openMenu("settings-top", gearTopRef.current)}>
              <IconSettings size={16}/>
            </button>
          </div>
        </div>

        {body}
      </main>

      <Popover open={menu.type === "notifs"} anchor={menu.anchor} onClose={closeMenu} width={400}>
        <NotificationsMenu onClose={closeMenu}/>
      </Popover>
      <Popover open={menu.type === "settings-top"} anchor={menu.anchor} onClose={closeMenu} width={300}>
        <SettingsMenu theme={tweaks.theme} density={tweaks.density} accent={tweaks.accent}
          onTheme={v => setTweak("theme", v)}
          onDensity={v => setTweak("density", v)}
          onAccent={v => setTweak("accent", v)}
          isPortal={isPortal}
          onClose={closeMenu}/>
      </Popover>
      <Popover open={menu.type === "settings-side"} anchor={menu.anchor} onClose={closeMenu} align="bottom-left" width={300}>
        <SettingsMenu theme={tweaks.theme} density={tweaks.density} accent={tweaks.accent}
          onTheme={v => setTweak("theme", v)}
          onDensity={v => setTweak("density", v)}
          onAccent={v => setTweak("accent", v)}
          isPortal={isPortal}
          onClose={closeMenu}/>
      </Popover>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance">
          <TweakRadio label="Theme"
            value={tweaks.theme}
            options={[{value:"dark",label:"Dark"},{value:"light",label:"Light"}]}
            onChange={v => setTweak("theme", v)}/>
          <TweakRadio label="Density"
            value={tweaks.density}
            options={[{value:"compact",label:"Compact"},{value:"comfortable",label:"Comfy"}]}
            onChange={v => setTweak("density", v)}/>
          <TweakColor label="Accent"
            value={tweaks.accent}
            options={Object.keys(ACCENTS)}
            onChange={v => setTweak("accent", v)}/>
        </TweakSection>
        <TweakSection label="Demo navigation">
          <div style={{display:"flex", flexDirection:"column", gap: 6}}>
            <button className="btn btn-secondary btn-sm" onClick={() => { setCtx("portal"); setScreen("p-billing"); setShowLogin(true); }}>
              Show supplier login →
            </button>
            <button className="btn btn-secondary btn-sm" onClick={() => { setCtx("internal"); setScreen("database"); setOpenSupplier(SUPPLIERS[0]); }}>
              Open supplier detail →
            </button>
            <button className="btn btn-secondary btn-sm" onClick={() => { setCtx("internal"); setScreen("register"); }}>
              Open registration flow →
            </button>
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function NavItem({ item, active, onClick }) {
  const I = item.icon;
  return (
    <div className={"nav-item " + (active ? "active" : "")} onClick={onClick}>
      <I className="nav-icon" size={15}/>
      <span>{item.label}</span>
      {item.count !== undefined && <span className="nav-count">{item.count}</span>}
    </div>
  );
}

function PlaceholderScreen({ label }) {
  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>{label}</h1>
          <div className="sub">Screen scaffold — wire up next iteration</div>
        </div>
      </div>
      <div style={{padding: 24, display:"grid", placeItems:"center", flex:1, color:"var(--text-tertiary)"}}>
        Coming next — {label}
      </div>
    </div>
  );
}

function PortalDashboard({ onSubmit, onBilling }) {
  const pending = MY_BILLS.filter(b => ["pm-review","finance-verify"].includes(b.status));
  const upcoming = MY_BILLS.filter(b => ["approved-payment","scheduled"].includes(b.status));
  const needs = MY_BILLS.filter(b => ["disputed","rejected"].includes(b.status));

  return (
    <div className="page">
      <div className="page-header">
        <div className="page-title-group">
          <h1>Hello, Tinker Post 👋</h1>
          <div className="sub">Today is Sun, May 17, 2026 · 8 active invoices · next payment Jun 02</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary btn-sm" onClick={onBilling}>View all invoices</button>
          <button className="btn btn-primary btn-sm" onClick={onSubmit}><IconUpload size={14}/> Submit new invoice</button>
        </div>
      </div>

      <div className="stat-row">
        <div className="stat-tile">
          <div className="label">Next payment</div>
          <div className="val tnum" style={{color: "var(--text-accent)"}}>{fmtTHB(184000)}</div>
          <div className="delta">Jun 02 · INV-2026-0418</div>
        </div>
        <div className="stat-tile">
          <div className="label">In review</div>
          <div className="val tnum">{fmtTHB(pending.reduce((a,b)=>a+b.amount, 0))}</div>
          <div className="delta">{pending.length} invoices</div>
        </div>
        <div className="stat-tile">
          <div className="label">Paid YTD</div>
          <div className="val tnum">{fmtTHB(2840000)}</div>
          <div className="delta">+18% vs last year</div>
        </div>
        <div className="stat-tile">
          <div className="label">Avg days to pay</div>
          <div className="val tnum">3.4<span style={{fontSize:18, color:"var(--text-tertiary)"}}>d</span></div>
          <div className="delta">Better than NET 45 terms</div>
        </div>
      </div>

      <div style={{padding: "0 24px 24px", display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16}}>
        <div className="section">
          <div className="section-head"><h3>Needs your attention</h3>
            <span className="muted" style={{fontSize:12}}>{needs.length} items</span>
          </div>
          <div>
            {needs.map(b => (
              <div key={b.id} className="approval-row">
                <div className="approval-meta">
                  <div className="approval-title">
                    <span className="mono">{b.id}</span> · {b.project}
                  </div>
                  <div className="approval-sub">{fmtTHB(b.amount)} · submitted {b.submitted}</div>
                  <div className="approval-chips">
                    <StatusPill meta={BILLING_STATUS_META[b.status]}/>
                  </div>
                </div>
                <div className="approval-actions">
                  <button className="btn btn-secondary btn-sm" onClick={onBilling}>Open</button>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="section">
          <div className="section-head"><h3>Upcoming payments</h3></div>
          <div className="section-body" style={{display:"flex", flexDirection:"column", gap: 14}}>
            {upcoming.map(b => (
              <div key={b.id} style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start"}}>
                <div>
                  <div style={{fontSize: 13}}>{b.project}</div>
                  <div className="muted" style={{fontSize: 11, marginTop: 2, fontFamily: "var(--font-mono)"}}>{b.id} · pay by {b.due}</div>
                </div>
                <div style={{fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 500, fontVariantNumeric: "tabular-nums"}}>{fmtTHB(b.amount)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

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