// Root shell: header, tab switching, global state context, tweaks panel.

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

const SEED_APPLIANCES = [
  { id: "a1", brand: "Haier", model: "HSU-18HFTEX T3", category: "Cooling",
    type: "AC 1.5 Ton Inverter", wattage: 1100, start: "22:00", end: "06:00" },
  { id: "a2", brand: "Haier", model: "HRF-368IBS", category: "Kitchen",
    type: "Refrigerator 13 cu ft", wattage: 165, start: "00:00", end: "23:59" },
  { id: "a3", brand: "Royal", model: 'Deluxe Ceiling 56"', category: "Cooling",
    type: "Ceiling Fan ×3", wattage: 225, start: "20:00", end: "08:00" },
  { id: "a4", brand: "Philips", model: "Essential LED 9W", category: "Lighting",
    type: "LED Bulbs ×6", wattage: 54, start: "18:30", end: "23:30" },
];

const DEFAULT_SLABS = [
  { upTo: 100, rate: 14 },
  { upTo: 200, rate: 22 },
  { upTo: 300, rate: 32 },
  { upTo: 700, rate: 40 },
  { upTo: null, rate: 48 },
];

const AppContext = React.createContext(null);

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = React.useState(
    window.SITE_CONFIG?.defaultTab || "bill"
  );
  const [appliances, setAppliances] = React.useState(SEED_APPLIANCES);
  const [rate, setRate] = React.useState({
    mode: "flat", flat: 42, slabs: DEFAULT_SLABS,
  });
  const [solarInput, setSolarInput] = React.useState({
    source: "appliances", period: "monthly", billAmount: 18000,
  });

  const ctx = {
    appliances, setAppliances,
    rate, setRate,
    solarInput, setSolarInput,
    tweaks, setTweak,
    goSolar: () => setTab("solar"),
    goBill:  () => setTab("bill"),
  };

  return (
    <AppContext.Provider value={ctx}>
      <Header tab={tab} onTab={setTab} />
      {tab === "bill"  && <BillCalculator/>}
      {tab === "solar" && <SolarROI/>}
      {tab === "gas"   && <GasBill/>}
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Regional">
          <TweakText label="Currency" value={tweaks.currencySymbol}
                     onChange={(v) => setTweak("currencySymbol", v)} />
          <TweakSlider label="Irradiance" value={tweaks.irradiance}
                       min={3.5} max={6.5} step={0.1} unit=" kWh/m²/d"
                       onChange={(v) => setTweak("irradiance", v)} />
          <TweakSlider label="Perf. ratio" value={tweaks.performanceRatio}
                       min={0.55} max={0.9} step={0.01}
                       onChange={(v) => setTweak("performanceRatio", v)} />
        </TweakSection>
        <TweakSection label="Install cost (PKR / kW)">
          <TweakNumber label="Low" value={tweaks.installCostLow}
                       min={50000} max={400000} step={5000}
                       onChange={(v) => setTweak("installCostLow", v)} />
          <TweakNumber label="High" value={tweaks.installCostHigh}
                       min={50000} max={400000} step={5000}
                       onChange={(v) => setTweak("installCostHigh", v)} />
        </TweakSection>
        <TweakSection label="UI">
          <TweakToggle label="Compact cards" value={tweaks.compactCards}
                       onChange={(v) => setTweak("compactCards", v)} />
          <TweakToggle label="Show tips" value={tweaks.showTips}
                       onChange={(v) => setTweak("showTips", v)} />
        </TweakSection>
      </TweaksPanel>
    </AppContext.Provider>
  );
}

// ---- Top header ---------------------------------------------------------

function Header({ tab, onTab }) {
  return (
    <header className="app-header">
      <div className="app-shell app-header__inner">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
            width: 34, height: 34, borderRadius: 10,
            background: "var(--fg)", color: "var(--surface)",
            display: "grid", placeItems: "center",
            boxShadow: "inset 0 0 0 1px oklch(0.3 0.018 55)",
          }}>
            <IconBolt size={18} stroke={2} />
          </div>
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1 }}>
              Pak Bill Calculator
            </div>
            <div className="mono" style={{
              fontSize: 10, color: "var(--muted-2)",
              textTransform: "uppercase", letterSpacing: "0.1em", marginTop: 3,
            }}>vcstudios.co</div>
          </div>
        </div>

        <nav style={{ display: "flex", gap: 4 }}>
          <TabButton active={tab === "bill"}  onClick={() => onTab("bill")}
                     label="Bill Calculator" icon={<IconCalculator size={15} />} />
          <TabButton active={tab === "gas"}   onClick={() => onTab("gas")}
                     label="Gas Bill" icon={<IconFlame size={15} />} />
          <TabButton active={tab === "solar"} onClick={() => onTab("solar")}
                     label="Solar ROI" icon={<IconSun size={15} />} />
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button className="hide-sm" aria-label="Share" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "8px 14px", borderRadius: 999,
            border: "1px solid var(--border)", color: "var(--fg-2)",
            background: "var(--surface)", fontSize: 13, fontWeight: 500,
          }}>
            <IconShare size={13}/> Share
          </button>
          <button aria-label="Info" style={{
            width: 36, height: 36, borderRadius: 999,
            color: "var(--muted)", background: "var(--bg-2)",
            display: "grid", placeItems: "center",
            border: "1px solid var(--border-soft)",
          }}>
            <IconInfo size={16} />
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 640px) {
          .hide-sm { display: none !important; }
        }
      `}</style>
    </header>
  );
}

function TabButton({ active, onClick, label, icon }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 7,
      padding: "9px 14px",
      fontSize: 13.5,
      fontWeight: active ? 600 : 500,
      color: active ? "var(--fg)" : "var(--muted)",
      borderRadius: 999,
      background: active ? "var(--surface)" : "transparent",
      border: active ? "1px solid var(--border)" : "1px solid transparent",
      boxShadow: active ? "var(--shadow-sm)" : "none",
      transition: "all .15s ease",
      whiteSpace: "nowrap",
    }}>
      {icon}<span className="hide-xs">{label}</span>
      <span className="show-xs" style={{ display: "none" }}>
        {label.split(" ")[0]}
      </span>
      <style>{`
        @media (max-width: 480px) {
          .hide-xs { display: none !important; }
          .show-xs { display: inline !important; }
        }
      `}</style>
    </button>
  );
}

function Footer() {
  return (
    <footer className="app-footer">
      <div className="app-shell app-footer__inner">
        <span className="mono" style={{ textTransform: "uppercase", letterSpacing: "0.08em" }}>
          vcstudios.co
        </span>
        <span>Built for Pakistan · Free forever · Estimates only</span>
        <nav style={{ display: "flex", gap: 12, fontSize: 12 }}>
          <a href="/about.html" style={{ color: "var(--muted)", textDecoration: "none" }}>About</a>
          <a href="/privacy.html" style={{ color: "var(--muted)", textDecoration: "none" }}>Privacy</a>
          <a href="/contact.html" style={{ color: "var(--muted)", textDecoration: "none" }}>Contact</a>
        </nav>
      </div>
    </footer>
  );
}

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