// Main app — routes between List, Builder, Viewer + wires Tweaks

const { useState, useEffect } = React;

// ---------- Deep-link router ----------
// Maps app state ↔ URL hash. Examples:
//   #/journeys                 → Active Journeys list
//   #/journeys/templates       → All Templates
//   #/journeys/templates/:id   → Template detail
//   #/journeys/new             → AI Builder
//   #/journeys/:id             → Journey viewer (e.g. #/journeys/j-1)
//   #/smartsend                → SmartSend Queue
//   #/smartsend/:pkgId         → Review package (e.g. #/smartsend/ss-acme)

function stateToHash({ tab, route, openedJourneyId, openedTemplateId, openedSSPkgId, openedQuoteId }) {
  if (tab === "Quotes" || route === "quotes" || route === "quoteDetail") {
    if (route === "quoteDetail") return `#/quotes/${openedQuoteId || "Q-982712"}`;
    return "#/quotes";
  }
  if (tab === "Opportunities" || route === "opportunities") return "#/opportunities";
  if (tab === "SmartSend" || route === "smartsend") return "#/smartsend";
  if (route === "smartsendReview") return `#/smartsend/${openedSSPkgId || "ss-acme"}`;
  if (route === "templates") return "#/journeys/templates";
  if (route === "templateDetail") return `#/journeys/templates/${openedTemplateId || "tpl-quote"}`;
  if (route === "new") return "#/journeys/new";
  if (route === "viewer") return `#/journeys/${openedJourneyId || "j-1"}`;
  return "#/journeys";
}

function hashToState(hash) {
  const parts = (hash || "").replace(/^#\/?/, "").split("/").filter(Boolean);
  if (parts[0] === "quotes") {
    if (parts[1]) return { tab: "Quotes", route: "quoteDetail", openedQuoteId: parts[1] };
    return { tab: "Quotes", route: "quotes" };
  }
  if (parts[0] === "opportunities") return { tab: "Opportunities", route: "opportunities" };
  if (parts[0] === "smartsend") {
    if (parts[1]) return { tab: "SmartSend", route: "smartsendReview", openedSSPkgId: parts[1] };
    return { tab: "SmartSend", route: "smartsend" };
  }
  if (parts[0] === "journeys") {
    if (parts[1] === "templates" && parts[2]) return { tab: "Journeys", route: "templateDetail", openedTemplateId: parts[2] };
    if (parts[1] === "templates")              return { tab: "Journeys", route: "templates" };
    if (parts[1] === "new")                    return { tab: "Journeys", route: "new" };
    if (parts[1])                              return { tab: "Journeys", route: "viewer", openedJourneyId: parts[1] };
    return { tab: "Journeys", route: "active" };
  }
  return null;
}

function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "streamSpeed": "fast",
    "journeyState": "midflight",
    "examplePrompt": "0",
    "vizMode": "timeline"
  }/*EDITMODE-END*/);

  // routes: 'active' | 'templates' | 'new' | 'viewer' | 'smartsend' | 'smartsendReview'
  const [route, setRoute] = useState("active");
  const [openedJourneyId, setOpenedJourneyId] = useState(null);
  const [openedTemplateId, setOpenedTemplateId] = useState(null);
  const [openedSSPkgId, setOpenedSSPkgId] = useState(null);
  const [openedQuoteId, setOpenedQuoteId] = useState(null);

  const [tab, setTab] = useState("Journeys");

  // --- Deep-link sync ---
  // On mount + on hashchange, push hash into state.
  useEffect(() => {
    const apply = () => {
      const s = hashToState(window.location.hash);
      if (!s) return;
      if (s.tab) setTab(s.tab);
      if (s.route) setRoute(s.route);
      if (s.openedJourneyId !== undefined)  setOpenedJourneyId(s.openedJourneyId);
      if (s.openedTemplateId !== undefined) setOpenedTemplateId(s.openedTemplateId);
      if (s.openedSSPkgId !== undefined)    setOpenedSSPkgId(s.openedSSPkgId);
      if (s.openedQuoteId !== undefined)    setOpenedQuoteId(s.openedQuoteId);
    };
    apply();
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  // On state change, push state into hash (without firing a hashchange loop).
  useEffect(() => {
    const desired = stateToHash({ tab, route, openedJourneyId, openedTemplateId, openedSSPkgId, openedQuoteId });
    if (desired && window.location.hash !== desired) {
      history.replaceState(null, "", desired);
    }
  }, [tab, route, openedJourneyId, openedTemplateId, openedSSPkgId, openedQuoteId]);

  const counts = {
    all: JOURNEY_LIST.length,
    active: JOURNEY_LIST.filter((j) => j.status === "Active").length,
    paused: JOURNEY_LIST.filter((j) => j.status === "Paused").length,
    completed: JOURNEY_LIST.filter((j) => j.status === "Completed").length,
  };

  const openJourney = (j) => {
    setOpenedJourneyId(j.id);
    setRoute("viewer");
  };

  const openedJourney = JOURNEY_LIST.find((j) => j.id === openedJourneyId) || JOURNEY_LIST[0];

  // The journey's state comes from data when opened, but the demo / activated journey
  // (j-1) is governed by the journeyState tweak so users can flip through scenarios.
  const viewerStateKey = openedJourney?.state && openedJourney.id !== "j-1"
    ? openedJourney.state
    : t.journeyState;

  return (
    <div style={{ minHeight: "100vh", background: "var(--mw-bg)" }}>
      <TopBar
        deepLinks={[
          { label: "Journeys",      hash: "#/journeys"      },
          { label: "Opportunities", hash: "#/opportunities" },
          { label: "Quotes",        hash: "#/quotes"        },
          { label: "SmartSend",     hash: "#/smartsend"     },
        ]}
      />
      <SecondaryNav activeTab={tab} onTab={(name) => {
        setTab(name);
        if (name === "SmartSend") setRoute("smartsend");
        else if (name === "Opportunities") setRoute("opportunities");
        else if (name === "Quotes") setRoute("quotes");
        else if (name === "Journeys") setRoute("active");
      }} />
      <div style={{ display: "flex" }}>
        {tab !== "SmartSend" && tab !== "Opportunities" && tab !== "Quotes" && <Sidebar
          current={route === "templates" ? "templates" : route === "active" ? "active" : route}
          counts={counts}
          tplCount={TEMPLATES.length}
          onNav={(id) => {
            if (id === "new") setRoute("new");
            else if (typeof id === "string" && id.startsWith("tpl:")) {
              setOpenedTemplateId(id.slice(4));
              setRoute("templateDetail");
            }
            else if (id === "templates") setRoute("templates");
            else setRoute("active");
          }}
        />}
        <main style={{ flex: 1, minWidth: 0, minHeight: "calc(100vh - 100px)" }}>
          {route === "active" && (
            <JourneysListPage
              list={JOURNEY_LIST}
              onOpen={openJourney}
              onNew={() => setRoute("templates")}
            />
          )}
          {route === "templates" && (
            <TemplatesListPage
              onNew={() => setRoute("new")}
              onOpen={(tpl) => { setOpenedTemplateId(tpl.id); setRoute("templateDetail"); }}
            />
          )}
          {route === "templateDetail" && (
            <TemplateDetailPage
              template={TEMPLATES.find(t => t.id === openedTemplateId) || TEMPLATES.find(t => t.id === "tpl-quote")}
              onBack={() => setRoute("templates")}
              onEdit={() => setRoute("new")}
              onOpenInstance={(j) => { setOpenedJourneyId(j.id); setRoute("viewer"); }}
            />
          )}
          {route === "new" && (
            <AIBuilderPage
              streamSpeed={t.streamSpeed}
              examplePromptIdx={Number(t.examplePrompt) || 0}
              onCancel={() => setRoute("templates")}
              onActivate={() => {
                setOpenedJourneyId("j-1");
                setRoute("viewer");
              }}
            />
          )}
          {route === "opportunities" && (
            <OpportunitiesListPage />
          )}
          {route === "quotes" && (
            <QuotesListPage onOpen={(q) => { setOpenedQuoteId(q.id); setRoute("quoteDetail"); }} />
          )}
          {route === "quoteDetail" && (
            <QuoteDetailPage
              quote={QUOTES.find((q) => q.id === openedQuoteId) || QUOTES[0]}
              onBack={() => setRoute("quotes")}
              onOpenPackage={(pkgId) => { setTab("SmartSend"); setOpenedSSPkgId(pkgId); setRoute("smartsendReview"); }}
            />
          )}
          {route === "smartsend" && (
            <SmartSendQueuePage
              onOpen={(p) => { setOpenedSSPkgId(p.id); setRoute("smartsendReview"); }}
            />
          )}
          {route === "smartsendReview" && (
            <SmartSendReviewPage
              pkg={SS_PACKAGES.find((p) => p.id === openedSSPkgId) || SS_PACKAGES[0]}
              onBack={() => setRoute("smartsend")}
            />
          )}
          {route === "viewer" && (
            <JourneyViewerPage
              stateKey={viewerStateKey}
              vizMode={t.vizMode}
              onVizChange={(v) => setTweak("vizMode", v)}
              onBack={() => setRoute("active")}
              journey={openedJourney}
            />
          )}
        </main>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="AI Builder">
          <TweakRadio
            label="Speed"
            value={t.streamSpeed}
            onChange={(v) => setTweak("streamSpeed", v)}
            options={[
              { value: "instant",  label: "Instant" },
              { value: "fast",     label: "Fast" },
              { value: "dramatic", label: "Dramatic" },
            ]}
          />
          <TweakSelect
            label="Example prompt"
            value={t.examplePrompt}
            onChange={(v) => setTweak("examplePrompt", v)}
            options={EXAMPLE_PROMPTS.map((p, i) => ({ value: String(i), label: `${i + 1}. ${p.slice(0, 50)}…` }))}
          />
        </TweakSection>

        <TweakSection label="Journey Viewer">
          <TweakSelect
            label="State"
            value={t.journeyState}
            onChange={(v) => setTweak("journeyState", v)}
            options={[
              { value: "fresh",     label: "Just started" },
              { value: "midflight", label: "Mid-flight (with skips)" },
              { value: "paused",    label: "Paused by user" },
              { value: "ended",     label: "Completed — accepted" },
            ]}
          />
          <TweakRadio
            label="View"
            value={t.vizMode}
            onChange={(v) => setTweak("vizMode", v)}
            options={[
              { value: "timeline",  label: "Time" },
              { value: "vertical",  label: "Vert" },
              { value: "branching", label: "Branch" },
              { value: "calendar",  label: "Cal" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Jump to screen">
          <TweakButton label="Active Journeys"  onClick={() => setRoute("active")} />
          <TweakButton label="Templates"        onClick={() => setRoute("templates")} />
          <TweakButton label="Template Detail"  onClick={() => { setOpenedTemplateId("tpl-quote"); setRoute("templateDetail"); }} />
          <TweakButton label="AI Template Builder" onClick={() => setRoute("new")} />
          <TweakButton label="Active Journey Detail" onClick={() => { setOpenedJourneyId("j-1"); setRoute("viewer"); }} />
          <TweakButton label="SmartSend Queue"      onClick={() => { setTab("SmartSend"); setRoute("smartsend"); }} />
          <TweakButton label="SmartSend Review"     onClick={() => { setTab("SmartSend"); setOpenedSSPkgId("ss-acme"); setRoute("smartsendReview"); }} />
          <TweakButton label="Opportunities"        onClick={() => { setTab("Opportunities"); setRoute("opportunities"); }} />
          <TweakButton label="Quotes List"          onClick={() => { setTab("Quotes"); setRoute("quotes"); }} />
          <TweakButton label="Quote Detail"         onClick={() => { setTab("Quotes"); setOpenedQuoteId("Q-982712"); setRoute("quoteDetail"); }} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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