/* Wood OS — Root App + Router */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "density": "comfortable",
  "glassIntensity": 18,
  "sidebarStyle": "labels",
  "theme": "dark"
}/*EDITMODE-END*/;

const PAGE_META = {
  dashboard: { title: "Painel Geral", subtitle: "Operacional" },
  requests: { title: "Solicitações", subtitle: "Operacional" },
  "new-request": { title: "Nova Solicitação", subtitle: "Operacional" },
  projects: { title: "Obras", subtitle: "Produção" },
  teams: { title: "Equipes", subtitle: "Produção" },
  inventory: { title: "Almoxarifado", subtitle: "Produção" },
  vehicles: { title: "Veículos", subtitle: "Logística" },
  logistics: { title: "Carga e Descarga", subtitle: "Logística" },
  history: { title: "Histórico", subtitle: "Operacional" },
  admin: { title: "Painel Admin SaaS", subtitle: "Sistema" },
  settings: { title: "Configurações", subtitle: "Sistema" },
};

const ACCENT_MAP = {
  amber:   { primary: "#10B981", bright: "#34D399", deep: "#047857" },
  copper:  { primary: "#C97B4A", bright: "#E29063", deep: "#A05E2F" },
  steel:   { primary: "#8FA6BD", bright: "#B3C3D6", deep: "#5C7188" },
  ember:   { primary: "#E15B3E", bright: "#F0775B", deep: "#B53E25" },
};

const App = () => {
  const initial = () => {
    const h = (window.location.hash || "").replace("#", "");
    return h || "landing";
  };
  const [route, setRoute] = useStateApp(initial);
  const [sidebarCollapsed, setSidebarCollapsed] = useStateApp(false);
  const [mobileOpen, setMobileOpen] = useStateApp(false);
  const [cmdOpen, setCmdOpen] = useStateApp(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + accent
  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    const a = ACCENT_MAP[t.accent] || ACCENT_MAP.amber;
    document.documentElement.style.setProperty("--amber", a.primary);
    document.documentElement.style.setProperty("--amber-bright", a.bright);
    document.documentElement.style.setProperty("--amber-deep", a.deep);
    document.documentElement.style.setProperty("--glass-blur", `${t.glassIntensity}px`);
  }, [t]);

  // Hash routing
  useEffectApp(() => {
    const onHash = () => setRoute((window.location.hash || "#landing").replace("#", "") || "landing");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    window.location.hash = "#" + r;
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // ⌘K
  useEffectApp(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setCmdOpen(true); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const tweaksUI = (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Aparência" />
      <TweakRadio
        label="Tema"
        value={t.theme}
        options={["dark", "light"]}
        onChange={v => setTweak("theme", v)}
      />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={["amber", "copper", "steel", "ember"]}
        onChange={v => setTweak("accent", v)}
      />
      <TweakSection label="Layout" />
      <TweakSelect
        label="Densidade"
        value={t.density}
        options={[
          { value: "compact", label: "Compacta" },
          { value: "comfortable", label: "Confortável" },
          { value: "spacious", label: "Espaçada" }
        ]}
        onChange={v => setTweak("density", v)}
      />
      <TweakRadio
        label="Sidebar"
        value={t.sidebarStyle}
        options={[
          { value: "labels", label: "Labels" },
          { value: "icons", label: "Só ícones" }
        ]}
        onChange={v => setTweak("sidebarStyle", v)}
      />
      <TweakSlider
        label="Glass blur"
        value={t.glassIntensity}
        min={4} max={32} step={2} unit="px"
        onChange={v => setTweak("glassIntensity", v)}
      />
    </TweaksPanel>
  );

  // Map accent option strings to colors for swatches
  // (we monkey-patch the panel's option color via CSS variables; the panel inspects value text)
  // The TweakColor component uses strings as both value and the swatch color when starting with #.
  // Since our options are names, we render a tiny key/swatch indicator above.

  /* Landing & Login don't use the layout */
  if (route === "landing") return (<>{tweaksUI}<Landing navigate={navigate} /></>);
  if (route === "login") return (<>{tweaksUI}<Login navigate={navigate} /></>);

  const meta = PAGE_META[route] || { title: "Wood OS", subtitle: "" };

  return (
    <div className="wood-page">
      <AnimatedBackground intensity="high" variant={route === "dashboard" || route === "admin" ? "blueprint" : "default"} />

      <div className="flex" style={{ minHeight: "100vh", position: "relative", zIndex: 1 }}>
        <Sidebar
          route={route}
          navigate={navigate}
          collapsed={sidebarCollapsed}
          setCollapsed={setSidebarCollapsed}
          mobileOpen={mobileOpen}
          setMobileOpen={setMobileOpen}
          sidebarStyle={t.sidebarStyle}
        />

        <div className="flex flex-col flex-1" style={{ minWidth: 0 }}>
          <Header
            title={meta.title}
            subtitle={meta.subtitle}
            onSearch={() => setCmdOpen(true)}
            onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")}
            theme={t.theme}
            onOpenMobile={() => setMobileOpen(true)}
            route={route}
            navigate={navigate}
          />

          <main
            key={route}
            className="flex-1 fade-in"
            style={{
              padding: t.density === "compact" ? "20px 24px" : t.density === "spacious" ? "40px 48px" : "28px 32px",
              maxWidth: 1640, margin: "0 auto", width: "100%"
            }}
          >
            <RouteSwitch route={route} navigate={navigate} />
          </main>
        </div>
      </div>

      <CommandSearch open={cmdOpen} onClose={() => setCmdOpen(false)} onNavigate={navigate} />
      {tweaksUI}
    </div>
  );
};

const RouteSwitch = ({ route, navigate }) => {
  switch (route) {
    case "dashboard": return <Dashboard navigate={navigate} />;
    case "requests": return <RequestsPage navigate={navigate} />;
    case "new-request": return <NewRequestPage navigate={navigate} />;
    case "projects": return <ProjectsPage navigate={navigate} />;
    case "teams": return <TeamsPage navigate={navigate} />;
    case "inventory": return <InventoryPage navigate={navigate} />;
    case "vehicles": return <VehiclesPage navigate={navigate} />;
    case "logistics": return <LogisticsPage navigate={navigate} />;
    case "history": return <HistoryPage navigate={navigate} />;
    case "admin": return <AdminPanel navigate={navigate} />;
    case "settings": return <SettingsPage navigate={navigate} />;
    default: return <Dashboard navigate={navigate} />;
  }
};

const SettingsPage = ({ navigate }) => (
  <>
    <PageHeader kicker="Sistema" title="Configurações" subtitle="Preferências da sua marcenaria, perfil, equipe, integrações e segurança." />
    <div className="grid grid-cols-3 gap-4">
      {[
        { icon: "users", title: "Perfil & equipe", desc: "Dados pessoais, equipe, papéis e convites." },
        { icon: "building", title: "Sua marcenaria", desc: "Dados da empresa, endereço, fiscais." },
        { icon: "credit-card", title: "Plano & cobrança", desc: "Plano atual, faturas e método de pagamento." },
        { icon: "bell", title: "Notificações", desc: "Como e quando você é avisado." },
        { icon: "shield", title: "Segurança", desc: "Senha, 2FA, sessões ativas." },
        { icon: "globe", title: "Integrações", desc: "WhatsApp, Stripe, Drive, contábil." },
      ].map((s, i) => (
        <div key={i} className="wood-card wood-card-hover p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }}>
          <div className="flex items-start gap-3">
            <div style={{
              width: 40, height: 40, borderRadius: 11,
              background: "rgba(16, 185, 129,0.12)", color: "var(--amber-bright)",
              border: "1px solid var(--wood-border)",
              display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
            }}>
              <Icon name={s.icon} size={17} />
            </div>
            <div className="flex-1">
              <div className="text-md font-semibold tracking-tight mb-1">{s.title}</div>
              <div className="text-sm text-3 text-pretty">{s.desc}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </>
);

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