// Main prototype shell — router + frames + tweaks
// Renders into #app-root inside the case study page

const { useState: uS, useEffect: uE, useRef: uR, useMemo: uM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "teal",
  "secondary": null,
  "scenario": "mid"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────
// Scaling wrapper — fits any fixed-size frame into a fluid container
// ─────────────────────────────────────────────────────────────
function FrameScaler({ width, height, children, maxScale = 1 }) {
  const wrapRef = uR(null);
  const [scale, setScale] = uS(maxScale);

  uE(() => {
    if (!wrapRef.current) return;
    const ro = new ResizeObserver(() => {
      const w = wrapRef.current?.offsetWidth || 0;
      const newScale = Math.min(maxScale, w / width);
      setScale(newScale);
    });
    ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, [width, maxScale]);

  return (
    <div ref={wrapRef} style={{ width: "100%", display: "flex", justifyContent: "center" }}>
      <div style={{
        width: width * scale,
        height: height * scale,
        position: "relative",
      }}>
        <div style={{
          width, height,
          transform: `scale(${scale})`,
          transformOrigin: "top left",
          position: "absolute", top: 0, left: 0,
        }}>{children}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MAIN APP
// ─────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = uS("customer"); // customer | admin | super

  const [customerScreen, setCustomerScreen] = uS("cek-pesanan");
  const [adminScreen, setAdminScreen] = uS("admin-dashboard");
  const [adminCtx, setAdminCtx] = uS({ orderId: "ORD-260526-001" });
  const [superScreen, setSuperScreen] = uS("super-dashboard");

  const preset = BRAND_PRESETS.find((p) => p.id === t.brand) || BRAND_PRESETS[0];
  const theme = {
    primary: preset.primary,
    secondary: t.secondary || preset.secondary,
    bg: preset.bg,
  };

  // Customer navigator
  const navCustomer = (screen) => setCustomerScreen(screen);
  // Admin navigator
  const navAdmin = (screen, orderId) => {
    if (orderId) setAdminCtx({ orderId });
    setAdminScreen(screen);
  };
  // Super navigator
  const navSuper = (screen) => setSuperScreen(screen);

  // ── Customer body ──
  const customerBody = (
    customerScreen === "cek-pesanan"
      ? <CekPesananScreen navigate={navCustomer} theme={theme} />
      : <TrackingScreen   navigate={navCustomer} theme={theme} scenario={t.scenario} />
  );

  // ── Admin body ──
  const adminPageTitles = {
    "admin-dashboard":   "Dashboard",
    "admin-baru":        "Pesanan Baru",
    "admin-daftar":      "Daftar Pesanan",
    "admin-detail":      "Detail Pesanan",
    "admin-pengaturan":  "Pengaturan",
  };
  const adminInner = (() => {
    switch (adminScreen) {
      case "admin-dashboard":  return <AdminDashboard   navigate={navAdmin} theme={theme} />;
      case "admin-baru":       return <AdminBaru        navigate={navAdmin} theme={theme} />;
      case "admin-daftar":     return <AdminDaftar      navigate={navAdmin} theme={theme} />;
      case "admin-detail":     return <AdminDetail      navigate={navAdmin} theme={theme} orderId={adminCtx.orderId} />;
      case "admin-pengaturan": return <AdminPengaturan  theme={theme} />;
      default: return null;
    }
  })();

  // ── Super body ──
  const superPageTitles = {
    "super-dashboard": "System Overview",
    "super-branding":  "Branding & Tema",
  };
  const superInner = superScreen === "super-dashboard"
    ? <SuperDashboard theme={theme} />
    : <SuperBranding  theme={theme}
        setBrandPreset={(id) => setTweak("brand", id)}
        brandPresetId={t.brand}
        setSecondary={(v) => setTweak("secondary", v)}
        customSecondary={t.secondary}
      />;

  // ── Frame configuration per view ──
  const FRAME_SIZES = {
    customer: { width: 402, height: 820 },
    admin:    { width: 1200, height: 740 },
    super:    { width: 1200, height: 740 },
  };

  const VIEW_TABS = [
    { id: "customer", label: "Customer",     icon: "smartphone" },
    { id: "admin",    label: "Admin",        icon: "admin_panel_settings" },
    { id: "super",    label: "Super Admin",  icon: "shield_person" },
  ];

  // Screen pickers per view
  const customerScreens = [
    { id: "cek-pesanan", label: "Cek Pesanan", icon: "search" },
    { id: "tracking",    label: "Tracking",    icon: "timeline" },
  ];
  const adminScreens = [
    { id: "admin-dashboard",  label: "Dashboard",      icon: "dashboard" },
    { id: "admin-baru",       label: "Pesanan Baru",   icon: "add_circle" },
    { id: "admin-daftar",     label: "Daftar Pesanan", icon: "receipt_long" },
    { id: "admin-detail",     label: "Order Detail",   icon: "edit_square" },
    { id: "admin-pengaturan", label: "Pengaturan",     icon: "settings" },
  ];
  const superScreens = [
    { id: "super-dashboard", label: "System Overview", icon: "dashboard" },
    { id: "super-branding",  label: "Branding & Tema", icon: "palette" },
  ];

  const screenList = view === "customer" ? customerScreens : view === "admin" ? adminScreens : superScreens;
  const activeScreenId = view === "customer" ? customerScreen : view === "admin" ? adminScreen : superScreen;
  const setActiveScreen = (id) => {
    if (view === "customer") setCustomerScreen(id);
    else if (view === "admin") setAdminScreen(id);
    else setSuperScreen(id);
  };

  return (
    <>
      {/* Top view tabs */}
      <div className="pt-tabs">
        {VIEW_TABS.map((tab) => (
          <button key={tab.id} className={`pt-tab ${view === tab.id ? "active" : ""}`}
            onClick={() => setView(tab.id)}>
            <MI name={tab.icon} size={16} />
            {tab.label}
          </button>
        ))}
      </div>

      {/* Screen picker pills */}
      <div className="pt-screens">
        {screenList.map((s) => (
          <button key={s.id} className={`pt-screen ${activeScreenId === s.id ? "active" : ""}`}
            onClick={() => setActiveScreen(s.id)}
            style={activeScreenId === s.id ? { background: theme.primary, color: "white", borderColor: theme.primary } : {}}>
            <MI name={s.icon} size={14} />
            {s.label}
          </button>
        ))}
      </div>

      {/* Frame stage */}
      <div className="pt-stage">
        {view === "customer" && (
          <FrameScaler width={402} height={820}>
            <IOSDevice width={402} height={820}>
              {customerBody}
            </IOSDevice>
          </FrameScaler>
        )}
        {view === "admin" && (
          <FrameScaler width={1200} height={740}>
            <ChromeWindow width={1200} height={740}
              tabs={[{ title: "Damelkeun · Admin Dashboard" }]}
              url={`admin.damelkeun.id${adminScreen === "admin-detail" ? `/daftar-pesanan/${adminCtx.orderId}` : adminScreen.replace("admin-", "/")}`}>
              <AdminShell activeScreen={adminScreen} navigate={navAdmin} theme={theme} pageTitle={adminPageTitles[adminScreen]}>
                {adminInner}
              </AdminShell>
            </ChromeWindow>
          </FrameScaler>
        )}
        {view === "super" && (
          <FrameScaler width={1200} height={740}>
            <ChromeWindow width={1200} height={740}
              tabs={[{ title: "Damelkeun · Super Admin" }]}
              url={`super.damelkeun.id/${superScreen.replace("super-", "")}`}>
              <SuperShell activeScreen={superScreen} navigate={navSuper} theme={theme} pageTitle={superPageTitles[superScreen]}>
                {superInner}
              </SuperShell>
            </ChromeWindow>
          </FrameScaler>
        )}
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand color" />
        <TweakColor
          label="Preset"
          value={t.brand}
          options={BRAND_PRESETS.map((p) => p.primary)}
          onChange={(hex) => {
            const found = BRAND_PRESETS.find((p) => p.primary === hex);
            if (found) setTweak("brand", found.id);
          }}
        />
        <p className="pt-tweak-meta">
          Active: <strong>{preset.name}</strong>
        </p>

        <TweakSection label="Demo state — Tracking" />
        <TweakSelect
          label="Skenario"
          value={t.scenario}
          options={Object.keys(DEMO_SCENARIOS).map((k) => ({ value: k, label: DEMO_SCENARIOS[k].label }))}
          onChange={(v) => setTweak("scenario", v)}
        />
        <p className="pt-tweak-meta">
          Hanya berlaku di screen <em>Tracking</em> (customer view).
        </p>
      </TweaksPanel>
    </>
  );
}

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