// Shared light/dark theme system for the reseller/customer-facing portal
// ONLY (ResellerShell + every page that renders inside/around it —
// dashboard, quotes, support, login/signup/forgot/reset-password, the
// portal-mode Ask Solo AI widget, and unit-management-page.jsx's outer
// wrapper). The staff admin area (AdminShell + its 12+ content pages)
// is explicitly out of scope and untouched — see admin-shell.jsx, which
// stays permanently light.
//
// WHY CSS VARIABLES (not React context / prop-threading):
// This codebase has no bundler — every site/*.jsx file is a standalone
// global <script type="text/babel"> tag (see index.html), so there's no
// module system to share a React Context import across files, and
// prop-threading a `theme` value through every one of these ~10 files'
// component trees would be invasive and easy to miss a spot in. CSS
// custom properties cascade through the DOM regardless of React
// component boundaries, so ONE root element (ResellerShell's outer
// <section>, or each standalone pre-auth page's own <section> for
// login/signup/forgot/reset-password, which render outside
// ResellerShell) sets `data-portal-theme="light"|"dark"` and every
// descendant — including nested pages and the floating AI widget —
// automatically repaints correctly, no prop drilling needed.
//
// Defaults: `:root` carries the LIGHT values globally, so anything that
// forgets to opt in (or renders under AdminShell, e.g.
// unit-management-page.jsx when viewed by admin staff) safely falls
// back to light. `[data-portal-theme="dark"]` overrides those tokens
// for its subtree only.
//
// Persistence: localStorage key "solo-portal-theme", read once on
// mount by usePortalTheme() — defaults to "light" per the explicit
// instruction that the portal should default to the white theme, with
// dark available as an opt-in toggle.

const PORTAL_THEME_STORAGE_KEY = "solo-portal-theme";

const PORTAL_THEME_CSS = `
:root {
  --pt-bg: #fff;
  --pt-fg: #000;
  --pt-fg-2: rgba(0,0,0,0.85);
  --pt-fg-3: rgba(0,0,0,0.75);
  --pt-fg-4: rgba(0,0,0,0.7);
  --pt-fg-dim: rgba(0,0,0,0.55);
  --pt-fg-dimmer: rgba(0,0,0,0.5);
  --pt-fg-faint: rgba(0,0,0,0.42);
  --pt-fg-faint2: rgba(0,0,0,0.4);
  --pt-fg-disabled: rgba(0,0,0,0.45);

  --pt-border: rgba(0,0,0,0.1);
  --pt-border-2: rgba(0,0,0,0.12);
  --pt-border-3: rgba(0,0,0,0.14);
  --pt-border-strong: rgba(0,0,0,0.25);
  --pt-border-subtle: rgba(0,0,0,0.18);

  --pt-surface: rgba(0,0,0,0.02);
  --pt-surface-2: rgba(0,0,0,0.03);
  --pt-surface-3: rgba(0,0,0,0.04);
  --pt-surface-strong: rgba(0,0,0,0.06);

  --pt-accent-bg: #000;
  --pt-accent-fg: #fff;
  --pt-accent-bg-disabled: rgba(0,0,0,0.12);
  --pt-accent-fg-disabled: rgba(0,0,0,0.45);

  --pt-contrast-bg: #000;
  --pt-contrast-fg: #fff;
  --pt-contrast-fg-dim: rgba(255,255,255,0.75);
  --pt-contrast-fg-dimmer: rgba(255,255,255,0.55);

  --pt-error-bg: rgba(255,80,80,0.12);
  --pt-error-border: rgba(255,80,80,0.4);
  --pt-error-text: #8a1f1f;

  --pt-success-text: rgba(20,140,60,0.95);
  --pt-link: rgba(30,110,190,0.95);

  --pt-status-submitted: rgba(30,110,190,0.95);
  --pt-status-po-requested: rgba(180,110,0,0.95);
  --pt-status-accepted: rgba(20,140,60,0.95);
  --pt-status-rejected: rgba(190,40,40,0.9);
  --pt-status-rejected-bg: rgba(190,40,40,0.06);
  --pt-status-rejected-border: rgba(190,40,40,0.3);

  --pt-warn-bg: rgba(190,40,40,0.08);
  --pt-warn-border: rgba(190,40,40,0.35);
  --pt-warn-text: rgba(140,30,30,0.95);
}

[data-portal-theme="dark"] {
  --pt-bg: #0a0a0a;
  --pt-fg: #fff;
  --pt-fg-2: rgba(255,255,255,0.85);
  --pt-fg-3: rgba(255,255,255,0.8);
  --pt-fg-4: rgba(255,255,255,0.7);
  --pt-fg-dim: rgba(255,255,255,0.55);
  --pt-fg-dimmer: rgba(255,255,255,0.5);
  --pt-fg-faint: rgba(255,255,255,0.42);
  --pt-fg-faint2: rgba(255,255,255,0.4);
  --pt-fg-disabled: rgba(255,255,255,0.5);

  --pt-border: rgba(255,255,255,0.12);
  --pt-border-2: rgba(255,255,255,0.14);
  --pt-border-3: rgba(255,255,255,0.14);
  --pt-border-strong: rgba(255,255,255,0.25);
  --pt-border-subtle: rgba(255,255,255,0.18);

  --pt-surface: rgba(255,255,255,0.04);
  --pt-surface-2: rgba(255,255,255,0.06);
  --pt-surface-3: rgba(255,255,255,0.06);
  --pt-surface-strong: rgba(255,255,255,0.08);

  --pt-accent-bg: #fff;
  --pt-accent-fg: #000;
  --pt-accent-bg-disabled: rgba(255,255,255,0.15);
  --pt-accent-fg-disabled: rgba(255,255,255,0.5);

  --pt-contrast-bg: #fff;
  --pt-contrast-fg: #000;
  --pt-contrast-fg-dim: rgba(0,0,0,0.75);
  --pt-contrast-fg-dimmer: rgba(0,0,0,0.55);

  --pt-error-bg: rgba(255,80,80,0.12);
  --pt-error-border: rgba(255,80,80,0.4);
  --pt-error-text: #ffb3b3;

  --pt-success-text: rgba(110,220,140,0.95);
  --pt-link: rgba(120,170,255,0.95);

  --pt-status-submitted: rgba(120,170,255,0.95);
  --pt-status-po-requested: rgba(255,195,100,0.95);
  --pt-status-accepted: rgba(110,220,140,0.95);
  --pt-status-rejected: rgba(255,120,120,0.95);
  --pt-status-rejected-bg: rgba(255,120,120,0.08);
  --pt-status-rejected-border: rgba(255,120,120,0.3);

  --pt-warn-bg: rgba(255,120,120,0.1);
  --pt-warn-border: rgba(255,120,120,0.35);
  --pt-warn-text: rgba(255,180,170,0.95);
}
`;

// Renders the variable definitions above. Cheap + idempotent to include
// on every top-level portal page (each page mounts exactly one of these
// at a time, since App() swaps the whole page component on navigation)
// rather than requiring some other always-mounted file to own it.
function PortalThemeStyles() {
  return <style>{PORTAL_THEME_CSS}</style>;
}

// `theme`: "light" | "dark", persisted to localStorage so it survives
// navigation between pages (each of which independently reads the same
// key on mount) and page reloads. Defaults to "light" per the portal's
// white-theme default.
function usePortalTheme() {
  const [theme, setTheme] = useState(() => {
    try {
      const saved = localStorage.getItem(PORTAL_THEME_STORAGE_KEY);
      return saved === "dark" ? "dark" : "light";
    } catch {
      return "light";
    }
  });

  useEffect(() => {
    try { localStorage.setItem(PORTAL_THEME_STORAGE_KEY, theme); } catch { /* ignore */ }
  }, [theme]);

  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
  return [theme, toggleTheme];
}

function IconSun({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
      <circle cx="12" cy="12" r="4.2" />
      <line x1="12" y1="1.6" x2="12" y2="4.4" />
      <line x1="12" y1="19.6" x2="12" y2="22.4" />
      <line x1="1.6" y1="12" x2="4.4" y2="12" />
      <line x1="19.6" y1="12" x2="22.4" y2="12" />
      <line x1="4.6" y1="4.6" x2="6.6" y2="6.6" />
      <line x1="17.4" y1="17.4" x2="19.4" y2="19.4" />
      <line x1="4.6" y1="19.4" x2="6.6" y2="17.4" />
      <line x1="17.4" y1="6.6" x2="19.4" y2="4.6" />
    </svg>
  );
}

function IconMoon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11Z" />
    </svg>
  );
}

// `compact`: true hides the text label, showing only the icon — used in
// tight spaces (e.g. next to the sidebar's collapsed footer). Reads its
// own colours from the current --pt-* tokens (i.e. it themes itself,
// same as everything else) so no extra wiring is needed wherever it's
// dropped in.
function PortalThemeToggle({ theme, onToggle, compact }) {
  const isDark = theme === "dark";
  return (
    <button
      type="button" onClick={onToggle} data-testid="portal-theme-toggle"
      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
      style={{
        background: "none", border: "1px solid var(--pt-border-strong)",
        color: "var(--pt-fg-3)", cursor: "pointer",
        padding: compact ? "9px 10px" : "10px 14px",
        display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
        fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 500,
        letterSpacing: "0.1em", textTransform: "uppercase",
        transition: "background 140ms, color 140ms, border-color 140ms",
      }}
    >
      {isDark ? <IconSun size={13} /> : <IconMoon size={13} />}
      {!compact && (isDark ? "Light" : "Dark")}
    </button>
  );
}

Object.assign(window, {
  PortalThemeStyles, usePortalTheme, PortalThemeToggle, IconSun, IconMoon,
  PORTAL_THEME_STORAGE_KEY,
});