// ============================================================
// Main app — state machine, router, demo controls chip, tweaks
// ============================================================

// Flow definitions
const WARM_SCREENS = ["offer", "plaid", "business", "owner", "review", "decision", "agreement", "funded", "dashboard", "howitworks"];
const COLD_SCREENS = ["marketing", "business", "owner", "review", "plaid", "decision", "agreement", "funded", "dashboard", "howitworks"];

const SCREEN_LABELS = {
  offer: "Pre-qualified offer",
  plaid: "Connect bank",
  business: "Business info",
  owner: "Owner info",
  review: "Review & consent",
  decision: "Decision",
  agreement: "Sign agreement",
  funded: "Funded",
  dashboard: "Dashboard",
  marketing: "Marketing landing",
  howitworks: "How it works"
};

function App() {
  // -------------- Tweaks --------------
  const [tweaks, setTweaksState] = React.useState(window.TWEAK_DEFAULTS);

  const setTweak = (k, v) => {
    let edits;
    if (typeof k === "object") edits = k;else
    edits = { [k]: v };
    const next = { ...tweaks, ...edits };
    setTweaksState(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  // -------------- Routing / state machine --------------
  const [showLauncher, setShowLauncher] = React.useState(true);
  const [section, setSection] = React.useState("capital");
  const [screenIdx, setScreenIdx] = React.useState(0);
  const [drawAmount, setDrawAmount] = React.useState(tweaks.selectedDraw);
  const [selectedOffer, setSelectedOffer] = React.useState(null);

  // Full-screen takeovers
  const [cashDrawOpen, setCashDrawOpen] = React.useState(false);
  const [payNowOpen, setPayNowOpen] = React.useState(false);

  const isWarm = tweaks.flow === "warm";
  const screens = isWarm ? WARM_SCREENS : COLD_SCREENS;
  const currentScreen = showLauncher ? "launcher" : screens[screenIdx];

  React.useEffect(() => {
    if (tweaks.selectedDraw && drawAmount !== tweaks.selectedDraw) {
      setDrawAmount(tweaks.selectedDraw);
    }
  }, [tweaks.selectedDraw]);

  const pickFlow = (id) => {
    setShowLauncher(false);
    if (id === "warm") {setTweak({ flow: "warm" });setScreenIdx(0);setSection("capital");} else
    if (id === "cold") {setTweak({ flow: "cold" });setScreenIdx(0);setSection("capital");} else
    if (id === "dashboard") {
      setTweak({ flow: "warm" });
      setScreenIdx(WARM_SCREENS.indexOf("dashboard"));
      setSection("capital");
    }
  };

  const goBack = () => {if (screenIdx > 0) setScreenIdx(screenIdx - 1);};
  const restartFlow = (flow) => {
    setTweak({ flow });
    setScreenIdx(0);
    setSection("capital");
    setShowLauncher(false);
  };
  const openLauncher = () => setShowLauncher(true);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === "Escape") {
        if (cashDrawOpen) setCashDrawOpen(false);else
        if (payNowOpen) setPayNowOpen(false);else
        if (!showLauncher) openLauncher();
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [showLauncher, cashDrawOpen, payNowOpen]);

  const handleNavigate = (s) => setSection(s);

  const renderCapital = () => {
    const baseProps = { tweaks, ownerName: "Sarah Chen" };

    if (isWarm) {
      const total = 5;
      switch (currentScreen) {
        case "offer":return <ScreenOffer {...baseProps} onContinue={() => setScreenIdx(1)} onBack={openLauncher} />;
        case "plaid":return <ScreenPlaid {...baseProps} step={1} total={total} onContinue={() => setScreenIdx(2)} onBack={goBack} />;
        case "business":return <ScreenBusiness {...baseProps} step={2} total={total} isPrefilled={true} onContinue={() => setScreenIdx(3)} onBack={goBack} />;
        case "owner":return <ScreenOwner {...baseProps} step={3} total={total} isPrefilled={true} onContinue={() => setScreenIdx(4)} onBack={goBack} />;
        case "review":return <ScreenReview {...baseProps} step={4} total={total} draw={drawAmount} hasOffer={true} onSubmit={() => setScreenIdx(5)} onBack={goBack} />;
        case "decision":return <ScreenDecision {...baseProps} draw={drawAmount} setDraw={setDrawAmount} onSelectOffer={setSelectedOffer} hasOffer={true} onContinue={() => setScreenIdx(6)} onBack={goBack} />;
        case "agreement":return <ScreenAgreement {...baseProps} draw={drawAmount} selectedOffer={selectedOffer} onSign={() => setScreenIdx(7)} onBack={goBack} />;
        case "funded":return <ScreenFunded {...baseProps} draw={drawAmount} selectedOffer={selectedOffer} onContinue={() => setScreenIdx(8)} />;
        case "dashboard":return <FlexDashboard tweaks={tweaks} selectedOffer={selectedOffer} onDraw={() => setCashDrawOpen(true)} onPayNow={() => setPayNowOpen(true)} />;
        case "howitworks":return <ScreenHowItWorks tweaks={tweaks} onApply={() => {setTweak({ flow: "cold" });setScreenIdx(COLD_SCREENS.indexOf("business"));}} onBack={() => {setTweak({ flow: "cold" });setScreenIdx(0);}} />;
      }
    } else {
      const total = 6;
      switch (currentScreen) {
        case "marketing":return <ScreenMarketing tweaks={tweaks} onApply={() => setScreenIdx(1)} onSeeHowItWorks={() => jumpToScreen("howitworks")} />;
        case "business":return <ScreenBusiness tweaks={tweaks} step={1} total={total} isPrefilled={false} onContinue={() => setScreenIdx(2)} onBack={goBack} />;
        case "owner":return <ScreenOwner tweaks={tweaks} step={2} total={total} isPrefilled={false} onContinue={() => setScreenIdx(3)} onBack={goBack} />;
        case "review":return <ScreenReview tweaks={tweaks} step={3} total={total} draw={null} hasOffer={false} onSubmit={() => setScreenIdx(4)} onBack={goBack} />;
        case "plaid":return <ScreenPlaid tweaks={tweaks} step={4} total={total} onContinue={() => setScreenIdx(5)} onBack={goBack} />;
        case "decision":return <ScreenDecision tweaks={tweaks} draw={drawAmount} setDraw={setDrawAmount} onSelectOffer={setSelectedOffer} hasOffer={false} onContinue={() => setScreenIdx(6)} onBack={goBack} />;
        case "agreement":return <ScreenAgreement tweaks={tweaks} draw={drawAmount} selectedOffer={selectedOffer} onSign={() => setScreenIdx(7)} onBack={goBack} />;
        case "funded":return <ScreenFunded tweaks={tweaks} draw={drawAmount} selectedOffer={selectedOffer} onContinue={() => setScreenIdx(8)} />;
        case "dashboard":return <FlexDashboard tweaks={tweaks} selectedOffer={selectedOffer} onDraw={() => setCashDrawOpen(true)} onPayNow={() => setPayNowOpen(true)} />;
        case "howitworks":return <ScreenHowItWorks tweaks={tweaks} onApply={() => setScreenIdx(COLD_SCREENS.indexOf("business"))} onBack={() => setScreenIdx(0)} />;
      }
    }
    return null;
  };

  // Jump-to-screen helper for demo chip
  const jumpToScreen = (key) => {
    const i = screens.indexOf(key);
    if (i >= 0) {
      setScreenIdx(i);
      setShowLauncher(false);
      setCashDrawOpen(false);
      setPayNowOpen(false);
      setSection("capital");
    }
  };

  // Demo controls chip
  const [jumpOpen, setJumpOpen] = React.useState(false);
  const jumpRef = React.useRef(null);
  React.useEffect(() => {
    if (!jumpOpen) return;
    const handler = (e) => {
      if (jumpRef.current && !jumpRef.current.contains(e.target)) setJumpOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [jumpOpen]);

  const currentLabel = showLauncher ? "Launcher" : SCREEN_LABELS[currentScreen] || currentScreen;
  const currentIdx = showLauncher ? -1 : screenIdx;
  // On mobile, start the demo chip collapsed so it doesn't overlay content.
  const [chipCollapsed, setChipCollapsed] = React.useState(() =>
    typeof window !== "undefined" && window.matchMedia && window.matchMedia("(max-width: 540px)").matches
  );

  const DemoChip = () => chipCollapsed ?
    <button
      className="demo-chip demo-chip-collapsed"
      onClick={() => setChipCollapsed(false)}
      title="Show demo controls">
      <span className="demo-chip-label">Demo</span>
      <Icon name="chevron-up" size={12} />
    </button> :
    <div className="demo-chip demo-chip-expanded">
      <span className="demo-chip-label">Demo</span>
      <button className={"demo-chip-btn " + (isWarm && !showLauncher ? "active" : "")}
        onClick={() => restartFlow("warm")}>Warm</button>
      <button className={"demo-chip-btn " + (!isWarm && !showLauncher ? "active" : "")}
        onClick={() => restartFlow("cold")}>Cold</button>

      <span className="demo-chip-divider" />

      <div className="demo-chip-jump" ref={jumpRef}>
        <button
          className={"demo-chip-btn demo-chip-jump-btn " + (jumpOpen ? "active" : "")}
          onClick={() => setJumpOpen((v) => !v)}
          title="Jump to any screen in this flow">
          <span style={{ opacity: 0.6, marginRight: 6, fontWeight: 500 }}>
            {currentIdx >= 0 ? `${currentIdx + 1}/${screens.length}` : ""}
          </span>
          <span>{currentLabel}</span>
          <Icon name={jumpOpen ? "chevron-down" : "chevron-up"} size={12} />
        </button>
        {jumpOpen &&
          <div className="demo-chip-menu" role="menu">
            <div className="demo-chip-menu-header">
              {isWarm ? "Warm flow" : "Cold flow"} · jump to screen
            </div>
            {screens.map((s, i) => {
              const active = i === currentIdx && !showLauncher;
              return (
                <button
                  key={s}
                  className={"demo-chip-menu-item " + (active ? "active" : "")}
                  role="menuitem"
                  onClick={() => { jumpToScreen(s); setJumpOpen(false); }}>
                  <span className="demo-chip-menu-idx">{String(i + 1).padStart(2, "0")}</span>
                  <span className="demo-chip-menu-label">{SCREEN_LABELS[s] || s}</span>
                  {active && <Icon name="check" size={13} color="var(--funding-pool)" strokeWidth={3} />}
                </button>);
            })}
          </div>}
      </div>

      <span className="demo-chip-divider" />
      <button className="demo-chip-btn" onClick={openLauncher} title="Restart">
        <Icon name="rotate-ccw" size={12} />
      </button>
      <button
        className="demo-chip-btn demo-chip-collapse"
        onClick={() => setChipCollapsed(true)}
        title="Hide demo controls">
        <Icon name="chevron-down" size={12} />
      </button>
    </div>;


  return (
    <>
      <div className="mv-app">
        <Sidebar
          activeSection={section}
          onNavigate={handleNavigate}
          partnerName={tweaks.partnerName}
          hasOffer={isWarm} />
        
        <div className="mv-main">
          <TopBar section={section} partnerName={tweaks.partnerName} onHome={openLauncher} />
          <div className="mv-work" style={{ position: "relative" }}>
            {renderCapital()}

            {cashDrawOpen &&
            <CashDrawTakeover
              tweaks={tweaks}
              onClose={() => setCashDrawOpen(false)}
              onConfirm={() => setCashDrawOpen(false)} />

            }

            {payNowOpen &&
            <PayNowTakeover
              tweaks={tweaks}
              onClose={() => setPayNowOpen(false)}
              onConfirm={() => setPayNowOpen(false)} />

            }
          </div>
        </div>
      </div>

      {showLauncher && <Launcher onPick={pickFlow} partnerName={tweaks.partnerName} />}

      <DemoChip />

      {/* TweaksPanel manages its own open/close via host messages */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Demo flow" />
        <TweakRadio
          label="Active flow"
          value={tweaks.flow}
          onChange={(v) => restartFlow(v)}
          options={[
          { value: "warm", label: "Warm" },
          { value: "cold", label: "Cold" }]
          } />
        

        <TweakSection label="Partner brand" />
        <TweakText
          label="Partner name"
          value={tweaks.partnerName}
          onChange={(v) => setTweak({ partnerName: v })} />
        
        <TweakSelect
          label="Powered-by"
          value={tweaks.revenuedAttribution}
          onChange={(v) => setTweak({ revenuedAttribution: v })}
          options={[
          { value: "discreet", label: "Discreet" },
          { value: "equal", label: "Equal cobrand" },
          { value: "hidden", label: "Hidden" }]
          } />
        

        <TweakSection label="Offer terms" />
        <TweakSlider
          label="Flex Line size"
          value={tweaks.offerAmount}
          min={10000} max={250000} step={5000}
          unit=""
          onChange={(v) => setTweak({ offerAmount: v })} />
        
        <TweakSlider
          label="Factor rate"
          value={Math.round(tweaks.factorRate * 100)}
          min={110} max={150} step={1}
          unit="×/100"
          onChange={(v) => setTweak({ factorRate: v / 100 })} />
        
        <TweakSlider
          label="Selected draw"
          value={drawAmount}
          min={1000} max={tweaks.offerAmount} step={1000}
          unit=""
          onChange={(v) => {setDrawAmount(v);setTweak({ selectedDraw: v });}} />
        
      </TweaksPanel>
    </>);

}

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