// EzClaim — App shell, router, tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "density": "regular",
  "headlineVariant": "rising_assessment_warm",
  "demoScenario": "happy"
}/*EDITMODE-END*/;

function App() {
  const { route, segs, nav } = useHashRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [session, setSession] = useSessionState("ez.session.v2", {});

  // Apply palette + density to body
  useEffect(() => {
    document.body.className = "";
    if (tweaks.palette && tweaks.palette !== "navy") document.body.classList.add("palette-" + tweaks.palette);
    if (tweaks.density === "compact") document.body.classList.add("density-compact");
  }, [tweaks.palette, tweaks.density]);

  // Default route → lookup
  useEffect(() => {
    if (!route || route === "/" || route === "") { /* OK */ }
  }, [route]);

  const top = segs[0] || "";
  const layout =
    top === "" ? "wide" :
    top === "results" ? "medium" :
    top === "status" ? "medium" :
    ["help","privacy","terms","refund"].includes(top) ? "medium" :
    "narrow";

  const showHeader = true;
  const showFooter = top !== "submitting";

  return (
    <div className={"app shell-bg"}>
      {showHeader ? <Header nav={nav} top={top}/> : null}

      <main className={"main " + (layout === "wide" ? "" : layout === "medium" ? "medium" : "narrow")}>
        {(top === "" || top === "lookup") && <LookupScreen nav={nav} setSession={(s) => setSession({ ...session, ...s })}/>}
        {top === "disambiguate" && <DisambiguateScreen nav={nav} session={session} setSession={setSession}/>}
        {top === "no-match" && <NoMatchScreen nav={nav} session={session}/>}
        {top === "results" && <ResultsScreen nav={nav} session={session} setSession={setSession} tweaks={tweaks}/>}
        {top === "sdat" && <SdatScreen nav={nav}/>}
        {top === "wizard" && <WizardScreen nav={nav} segs={segs} session={session} setSession={setSession}/>}
        {top === "review" && <ReviewScreen nav={nav} session={session} setSession={setSession}/>}
        {top === "checkout" && <CheckoutScreen nav={nav} session={session} setSession={setSession}/>}
        {top === "secure-details" && <SecureDetailsScreen nav={nav} session={session} setSession={setSession}/>}
        {top === "submitting" && <SubmittingScreen nav={nav} session={session} setSession={setSession}/>}
        {top === "submitted" && <SubmittedScreen nav={nav} session={session}/>}
        {top === "status" && <StatusScreen nav={nav} session={session} setSession={setSession} scenario={tweaks.demoScenario}/>}
        {top === "help" && <FaqScreen nav={nav}/>}
        {top === "privacy" && <PrivacyScreen/>}
        {top === "terms" && <TermsScreen/>}
        {top === "refund" && <RefundScreen/>}
      </main>

      {showFooter ? <Footer/> : null}

      <Tweaks tweaks={tweaks} setTweak={setTweak} nav={nav} session={session} setSession={setSession}/>
    </div>
  );
}

function Header({ nav, top }) {
  return (
    <header className="app-hd">
      <div className="app-hd-inner">
        <a href="#/" className="brand" style={{ color: "var(--brand-900)" }} onClick={(e) => { e.preventDefault(); nav("/"); }}>
          <span className="brand-mark"><I.Home size={16}/></span>
          <span className="brand-wordmark">Ez<em>Claim</em></span>
        </a>
        <span className="md-flag" style={{ marginLeft: 4 }}>
          <MdGlyph size={11}/> Maryland Homestead
        </span>
        <nav>
          <a href="#/status" onClick={(e) => { e.preventDefault(); nav("/status"); }}>Check status</a>
          <a href="https://sdat.dat.maryland.gov" target="_blank" rel="noreferrer">SDAT <I.ExternalLink size={11} style={{ verticalAlign: "middle", marginLeft: 4 }}/></a>
          <a href="#/help" onClick={(e) => { e.preventDefault(); nav("/help"); }}>Help</a>
        </nav>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="app-ft">
      <div className="app-ft-inner">
        <div>
          <div className="brand mb-2"><span className="brand-mark"><I.Home size={14}/></span><span className="brand-wordmark" style={{ fontSize: 15 }}>Ez<em>Claim</em></span></div>
          <p className="disclaimer">
            <strong>EzClaim is not a government agency.</strong> The Homestead Tax Credit is administered by the Maryland State Department of Assessments &amp; Taxation (SDAT). You can file free directly with SDAT at <a href="https://sdathtc.dat.maryland.gov" target="_blank" rel="noreferrer">sdathtc.dat.maryland.gov</a>. Our $19.99 service fee is for preparation, submission, and tracking — approval is determined by SDAT.
          </p>
        </div>
        <div style={{ minWidth: 160 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-700)", marginBottom: 8, letterSpacing: ".04em", textTransform: "uppercase" }}>Product</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13 }}>
            <a href="#/">Address lookup</a>
            <a href="#/status">Check filing status</a>
            <a href="#/help">FAQ</a>
          </div>
        </div>
        <div style={{ minWidth: 160 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-700)", marginBottom: 8, letterSpacing: ".04em", textTransform: "uppercase" }}>Legal</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13 }}>
            <a href="#/privacy">Privacy &amp; data handling</a>
            <a href="#/terms">Terms</a>
            <a href="#/refund">Refund policy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Tweaks panel
// ─────────────────────────────────────────────────────────────────────────────
function Tweaks({ tweaks, setTweak, nav, session, setSession }) {
  return (
    <TweaksPanel>
      <TweakSection label="Demo navigation"/>
      <DemoJump nav={nav} setSession={setSession}/>

      <TweakSection label="Theme"/>
      <TweakRadio
        label="Palette"
        value={tweaks.palette}
        options={[
          { value: "navy",   label: "Navy" },
          { value: "forest", label: "Forest" },
          { value: "slate",  label: "Slate" },
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakRadio
        label="Density"
        value={tweaks.density}
        options={[
          { value: "regular", label: "Roomy" },
          { value: "compact", label: "Compact" },
        ]}
        onChange={(v) => setTweak("density", v)}
      />

      <TweakSection label="Copy"/>
      <TweakSelect
        label="Results headline"
        value={tweaks.headlineVariant}
        options={[
          { value: "rising_assessment_warm", label: "Rising assessment (warm)" },
          { value: "direct_savings",         label: "Direct savings amount" },
          { value: "new_owner_friendly",     label: "New owner (friendly)" },
        ]}
        onChange={(v) => setTweak("headlineVariant", v)}
      />

      <TweakSection label="Status scenario"/>
      <TweakRadio
        label="Outcome"
        value={tweaks.demoScenario}
        options={[
          { value: "happy",      label: "Pending" },
          { value: "fax_failed", label: "Fax retry" },
          { value: "approved",   label: "Approved" },
          { value: "denied",     label: "Denied" },
        ]}
        onChange={(v) => setTweak("demoScenario", v)}
      />

      <TweakSection label="Session"/>
      <TweakButton onClick={() => {
        sessionStorage.removeItem("ez.session.v2");
        setSession({});
        nav("/");
      }}>Reset demo state</TweakButton>
    </TweaksPanel>
  );
}

// Custom: a jump-to-screen dropdown
function DemoJump({ nav, setSession }) {
  const SCREENS = [
    { value: "/",                  label: "1. Lookup" },
    { value: "/disambiguate",      label: "2. Multiple matches" },
    { value: "/no-match",          label: "  · No match" },
    { value: "/results",           label: "3. Results — eligible" },
    { value: "/results-approved",  label: "  · Already approved" },
    { value: "/sdat",              label: "4. Free w/ SDAT" },
    { value: "/wizard/address",    label: "5. Wizard · Property" },
    { value: "/wizard/identity",   label: "   · Contact" },
    { value: "/wizard/residency",  label: "   · Residency" },
    { value: "/wizard/owners",     label: "   · Co-owners" },
    { value: "/wizard/eligibility",label: "   · Eligibility" },
    { value: "/review",            label: "6. Review" },
    { value: "/checkout",          label: "7. Stripe handoff" },
    { value: "/checkout-failed",   label: "  · Payment failed" },
    { value: "/secure-details",    label: "8. SSN + signature" },
    { value: "/submitting",        label: "9. Submitting" },
    { value: "/submitted",         label: "10. Submitted" },
    { value: "/status",            label: "11. Status page" },
  ];
  const [val, setVal] = useState("");
  return (
    <TweakSelect
      label="Jump to screen"
      value={val}
      options={[{ value: "", label: "—" }, ...SCREENS]}
      onChange={(v) => {
        setVal(v);
        if (!v) return;
        // Seed a representative session for jump targets that need it
        seedSessionFor(v, setSession);
        if (v === "/results-approved") nav("/results");
        else if (v === "/checkout-failed") {
          // mark and jump
          setSession((prev) => ({ ...prev, payment_status: "failed" }));
          nav("/checkout");
        }
        else nav(v);
      }}
    />
  );
}

function seedSessionFor(target, setSession) {
  const props = window.EZ_MOCK.PROPERTIES;
  if (target === "/results-approved") {
    setSession((prev) => ({ ...prev, query: props[1].site_address, lookup: { state: "ok", matches: [props[1]] } }));
    return;
  }
  if (target === "/disambiguate") {
    setSession((prev) => ({ ...prev, query: "200 Charles St N", lookup: { state: "ambiguous", matches: window.EZ_MOCK.MULTI } }));
    return;
  }
  if (target === "/no-match") {
    setSession((prev) => ({ ...prev, query: "nowhere" }));
    return;
  }
  // For everything wizard/checkout/secure/submitting/submitted/status, seed defaults if missing
  if (target.startsWith("/wizard") || ["/review","/checkout","/secure-details","/submitting","/submitted","/status"].includes(target)) {
    setSession((prev) => {
      const base = {
        query: prev.query || props[0].site_address,
        lookup: prev.lookup?.matches?.length ? prev.lookup : { state: "ok", matches: [props[0]] },
        filing: prev.filing || {
          confirm_address: "yes",
          full_name: "Renee A. Whitlock",
          email: "renee.w@example.com",
          phone: "(410) 555-0142",
          is_primary: "yes",
          move_in_date: "2021-04-18",
          voter_reg: "Yes",
          has_coowners: true,
          coowner_name: "Jordan M. Whitlock",
          coowner_rel: "Spouse",
          coowner_primary: "Yes",
          owner_occupant: true,
          no_rental: true,
          no_other_homestead: true,
          tax_credit_acks: true,
        },
      };
      if (["/submitted","/status"].includes(target)) {
        base.payment_status = "paid";
        base.payment = prev.payment || { receipt_id: window.EZ_MOCK.shortId("ch"), paid_at: new Date(Date.now() - 1000*60*60*4).toISOString(), amount: 19.99 };
        base.filing_id = prev.filing_id || window.EZ_MOCK.shortId("hf");
      }
      if (target === "/checkout") {
        base.payment_status = "pending";
      }
      return { ...prev, ...base };
    });
  }
}

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