// Main app — wires sections + results + extras (URL save, compare, confetti, print)

const { useState: aUseState, useEffect: aUseEffect, useMemo: aUseMemo, useCallback: aUseCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "donutThickness": 28,
  "showHeroBanner": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  green: { primary: "#00d9a3", secondary: "#00b8e6", soft: "rgba(0, 217, 163, 0.15)", border: "rgba(0, 217, 163, 0.3)" },
  pink:  { primary: "#f472b6", secondary: "#a78bfa", soft: "rgba(244, 114, 182, 0.15)", border: "rgba(244, 114, 182, 0.3)" },
  amber: { primary: "#fbbf24", secondary: "#ff7849", soft: "rgba(251, 191, 36, 0.15)", border: "rgba(251, 191, 36, 0.3)" },
  blue:  { primary: "#4d8fff", secondary: "#8fb8ff", soft: "rgba(77, 143, 255, 0.15)", border: "rgba(77, 143, 255, 0.3)" },
};

// Encode/decode state to URL
function encodeStateToURL(state) {
  try {
    const json = JSON.stringify(state);
    return btoa(unescape(encodeURIComponent(json)));
  } catch (e) { return ""; }
}
function decodeStateFromURL(s) {
  try {
    const json = decodeURIComponent(escape(atob(s)));
    return JSON.parse(json);
  } catch (e) { return null; }
}

function useURLState(defaultState) {
  const [state, setState] = aUseState(() => {
    const params = new URLSearchParams(window.location.search);
    const s = params.get("s");
    if (s) {
      const decoded = decodeStateFromURL(s);
      if (decoded) return { ...defaultState, ...decoded };
    }
    return defaultState;
  });

  // Update URL on change (debounced)
  aUseEffect(() => {
    const t = setTimeout(() => {
      const encoded = encodeStateToURL(state);
      const url = new URL(window.location.href);
      url.searchParams.set("s", encoded);
      window.history.replaceState(null, "", url.toString());
    }, 400);
    return () => clearTimeout(t);
  }, [state]);

  return [state, setState];
}

// Confetti
function Confetti({ trigger }) {
  const [pieces, setPieces] = aUseState([]);
  aUseEffect(() => {
    if (!trigger) return;
    const colors = ["#00d9a3", "#fbbf24", "#a78bfa", "#f472b6", "#4d8fff", "#ff7849"];
    const arr = Array.from({ length: 80 }, (_, i) => ({
      id: trigger + "-" + i,
      left: Math.random() * 100,
      delay: Math.random() * 0.6,
      duration: 2 + Math.random() * 1.5,
      color: colors[Math.floor(Math.random() * colors.length)],
      rotate: Math.random() * 360,
    }));
    setPieces(arr);
    const t = setTimeout(() => setPieces([]), 4000);
    return () => clearTimeout(t);
  }, [trigger]);
  if (!pieces.length) return null;
  return (
    <div className="confetti">
      {pieces.map(p => (
        <span
          key={p.id}
          className="confetti__piece"
          style={{
            left: p.left + "%",
            background: p.color,
            animationDelay: p.delay + "s",
            animationDuration: p.duration + "s",
            transform: `rotate(${p.rotate}deg)`,
          }}
        />
      ))}
    </div>
  );
}

// Compare modal
function CompareModal({ scenarioA, scenarioB, onClose, onSwap }) {
  const fmt = window.TaxEngine.formatINR;
  const aTake = scenarioA.monthlyTakeHome;
  const bTake = scenarioB.monthlyTakeHome;
  const diff = bTake - aTake;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <h3 className="modal__title">Compare scenarios</h3>
            <div className="modal__sub">Snapshot A is what you saved earlier · Snapshot B is your current inputs</div>
          </div>
          <button className="modal__close" onClick={onClose}>×</button>
        </div>
        <div className="compare-grid">
          <div className="compare-col">
            <div className="compare-col__head">A · saved snapshot</div>
            <div className="compare-col__amt">{fmt(aTake)}</div>
            <div className="compare-col__per">/month · {fmt(scenarioA.annualTakeHome, { compact: true })}/yr</div>
            <div className="compare-col__line"><span className="compare-col__line-label">Total CTC</span><span className="compare-col__line-val">{fmt(scenarioA.totalCTC, { compact: true })}</span></div>
            <div className="compare-col__line"><span className="compare-col__line-label">Tax (TDS)</span><span className="compare-col__line-val">{fmt(scenarioA.tdsAnnual, { compact: true })}</span></div>
            <div className="compare-col__line"><span className="compare-col__line-label">Regime</span><span className="compare-col__line-val">{scenarioA.regime === "new" ? "New" : "Old"}</span></div>
          </div>
          <div className="compare-col">
            <div className="compare-col__head">B · current</div>
            <div className="compare-col__amt" style={{ color: diff >= 0 ? "var(--accent-green)" : "var(--accent-orange)" }}>{fmt(bTake)}</div>
            <div className="compare-col__per">/month · {fmt(scenarioB.annualTakeHome, { compact: true })}/yr</div>
            <div className="compare-col__line"><span className="compare-col__line-label">Total CTC</span><span className="compare-col__line-val">{fmt(scenarioB.totalCTC, { compact: true })}</span></div>
            <div className="compare-col__line"><span className="compare-col__line-label">Tax (TDS)</span><span className="compare-col__line-val">{fmt(scenarioB.tdsAnnual, { compact: true })}</span></div>
            <div className="compare-col__line"><span className="compare-col__line-label">Regime</span><span className="compare-col__line-val">{scenarioB.regime === "new" ? "New" : "Old"}</span></div>
          </div>
        </div>
        <div className="compare-diff">
          {diff === 0 ? "Identical take-home." : (
            <>{(diff > 0 ? "+" : "−")}{fmt(Math.abs(diff))}/month {diff > 0 ? "more" : "less"} · {(diff > 0 ? "+" : "−")}{fmt(Math.abs(diff * 12), { compact: true })}/yr</>
          )}
        </div>
        <button className="results__action" style={{ marginTop: 16 }} onClick={onSwap}>
          Save current as snapshot A
        </button>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  const [state, setState] = useURLState(window.DEFAULT_STATE);
  const [confettiTrigger, setConfettiTrigger] = aUseState(0);
  const [toast, setToast] = aUseState(null);
  const [snapshot, setSnapshot] = aUseState(null);
  const [compareOpen, setCompareOpen] = aUseState(false);
  const [contributeOpen, setContributeOpen] = aUseState(false);
  const [contributePrefill, setContributePrefill] = aUseState({});

  const result = aUseMemo(() => window.TaxEngine.computeTakeHome(state), [state]);

  // Apply accent
  aUseEffect(() => {
    const accent = ACCENT_PRESETS[tweaks.accent] || ACCENT_PRESETS.green;
    document.documentElement.style.setProperty("--accent-green", accent.primary);
    document.documentElement.style.setProperty("--accent-green-soft", accent.soft);
  }, [tweaks.accent]);

  const fmt = window.TaxEngine.formatINR;

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 2200);
  };

  const handleShare = aUseCallback(() => {
    const url = window.location.href;
    if (navigator.clipboard) navigator.clipboard.writeText(url);
    showToast("Link copied — share to load this exact scenario");
  }, []);

  const handlePrint = () => window.print();

  const handleReset = () => {
    setState(window.DEFAULT_STATE);
    showToast("All inputs reset");
  };

  const handleCompare = () => {
    if (!snapshot) {
      setSnapshot(result);
      showToast("Snapshot A saved — change inputs and open Compare again");
    } else {
      setCompareOpen(true);
    }
  };

  const TP = window.TweaksPanel;
  const TweakSlider = window.TweakSlider;
  const TweakRadio = window.TweakRadio;
  const TweakToggle = window.TweakToggle;
  const TweakSection = window.TweakSection;

  return (
    <div className="app">
      <div className="app__header">
        <div className="app__brand">
          <div className="app__logo">₹</div>
          <div>
            <div className="app__title">myinhand</div>
            <div className="app__sub">India's salary intelligence platform</div>
          </div>
        </div>
        <div className="app__fy-pill">FY 2026-27 · Latest slabs</div>
      </div>

      {tweaks.showHeroBanner && (
        <div className="hero">
          <div className="hero__eyebrow">Free · No sign-up · FY 2026-27</div>
          <h1 className="hero__title">Know exactly what lands in your account.</h1>
          <p className="hero__desc">
            Enter your CTC components. See your real in-hand salary in real time — after tax, PF, and every deduction. Compare New vs Old regime with the latest slabs, including all metros.
          </p>
        </div>
      )}

      <div className="app__layout">
        <main>
          <CTCSection state={state} setState={setState} />
          <OtherDetailsSection
            state={state}
            setState={setState}
            regimeSavings={result.regimeSavings}
            betterRegime={result.betterRegime}
          />
          <ExemptionsSection
            state={state}
            setState={setState}
            hraExemption={result.oldRegime.hraExemption}
          />
          <DeductionsSection
            state={state}
            setState={setState}
            basicAnnual={result.basicAnnual}
            pfEmployeeAnnual={result.pfEmployeeAnnual}
          />
          <OtherIncomeSection state={state} setState={setState} />
          <CompanyBenchmark
            state={state}
            setState={setState}
            result={result}
            onContribute={(prefill) => { setContributePrefill(prefill || {}); setContributeOpen(true); }}
          />
        </main>

        <ResultsPanel
          result={result}
          regime={state.regime}
          onPickRegime={(r) => setState(s => ({ ...s, regime: r }))}
          onCelebrate={() => setConfettiTrigger(t => t + 1)}
          onCompare={handleCompare}
          onPrint={handlePrint}
          onShare={handleShare}
          onReset={handleReset}
          donutThickness={tweaks.donutThickness}
        />
      </div>

      <ComingSoonSection />

      <footer className="app__footer">
        For informational purposes only. Not professional tax advice. Verify with a CA before filing. All exemptions and deductions entered must be legitimate, valid, and in accordance with applicable Indian tax laws and Income Tax Department guidelines. Misrepresentation of exemptions is a legal offence.
      </footer>

      <Confetti trigger={confettiTrigger} />
      {contributeOpen && (
        <ContributeModal
          state={state}
          result={result}
          prefill={contributePrefill}
          onClose={() => setContributeOpen(false)}
          onSubmit={() => { setContributeOpen(false); showToast("Thanks — your anonymous data point is in"); }}
        />
      )}
      {toast && <div className="toast">{toast}</div>}
      {compareOpen && snapshot && (
        <CompareModal
          scenarioA={snapshot}
          scenarioB={result}
          onClose={() => setCompareOpen(false)}
          onSwap={() => { setSnapshot(result); setCompareOpen(false); showToast("Current saved as Snapshot A"); }}
        />
      )}

      {/* Tweaks Panel */}
      {TP && (
        <TP title="Tweaks">
          <TweakSection label="Theme" />
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["green", "pink", "amber", "blue"]}
          />
          <TweakToggle
            label="Hero banner"
            value={tweaks.showHeroBanner}
            onChange={(v) => setTweak("showHeroBanner", v)}
          />
          <TweakSlider
            label="Donut thickness"
            value={tweaks.donutThickness}
            onChange={(v) => setTweak("donutThickness", v)}
            min={12}
            max={50}
            step={2}
            unit="px"
          />
        </TP>
      )}
    </div>
  );
}

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