// ==================== App root ====================

function App() {
  const [view, setView] = React.useState(() => localStorage.getItem("view") || "inbox");
  const [openLeadId, setOpenLeadId] = React.useState(null);
  const [selected, setSelected] = React.useState([]);
  const [filterState, setFilterState] = React.useState({ minScore: 0 });
  const [savedView, setSavedView] = React.useState("all");
  const [toast, setToast] = React.useState(null);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // Tweaks
  const TWEAKS = /*EDITMODE-BEGIN*/{
    "density": "standard",
    "accentWarmth": "gold",
    "showSaved": true
  }/*EDITMODE-END*/;
  const [tweaks, setTweaks] = React.useState(TWEAKS);

  React.useEffect(() => { localStorage.setItem("view", view); }, [view]);
  React.useEffect(() => { document.body.setAttribute("data-density", tweaks.density); }, [tweaks.density]);
  React.useEffect(() => {
    if (tweaks.accentWarmth === "cool") {
      document.documentElement.style.setProperty("--gold-600", "#2d4f7e");
      document.documentElement.style.setProperty("--gold-400", "#4f7ab0");
      document.documentElement.style.setProperty("--gold-050", "#e8eef6");
      document.documentElement.style.setProperty("--gold-100", "#d3deed");
      document.documentElement.style.setProperty("--gold-700", "#1c365a");
    } else if (tweaks.accentWarmth === "sage") {
      document.documentElement.style.setProperty("--gold-600", "#5e7a54");
      document.documentElement.style.setProperty("--gold-400", "#89a380");
      document.documentElement.style.setProperty("--gold-050", "#ecf0e7");
      document.documentElement.style.setProperty("--gold-100", "#d8e1d1");
      document.documentElement.style.setProperty("--gold-700", "#3f5439");
    } else {
      document.documentElement.style.setProperty("--gold-600", "#b8922a");
      document.documentElement.style.setProperty("--gold-400", "#d4ab4e");
      document.documentElement.style.setProperty("--gold-050", "#faf2da");
      document.documentElement.style.setProperty("--gold-100", "#f3e7c3");
      document.documentElement.style.setProperty("--gold-700", "#8a6d1f");
    }
  }, [tweaks.accentWarmth]);

  // Edit-mode protocol
  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode")   setTweaksOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const updateTweak = (k, v) => {
    setTweaks(t => ({ ...t, [k]: v }));
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*"); } catch {}
  };

  // Filter pipeline
  const filteredLeads = React.useMemo(() => {
    return APP_DATA.LEADS.filter(l => {
      if (filterState.outcome && l.outcome !== filterState.outcome) return false;
      if (filterState.minScore && l.score < filterState.minScore) return false;
      if (filterState.redFlags && l.flagCount === 0) return false;
      if (filterState.assignee && l.assignee?.id !== filterState.assignee) return false;
      if (filterState.status === "new" && l.status !== "New") return false;
      if (filterState.status === "review" && l.status !== "In Review") return false;
      if (filterState.status === "contacted" && l.status !== "Contacted") return false;
      if (filterState.status === "closed" && !["Closed Won","Closed Lost","Rejected","Qualified"].includes(l.status)) return false;

      // saved view
      if (savedView === "hot" && !(l.outcome === "candidate" && l.score >= 65 && l.submittedHoursAgo < 168)) return false;
      if (savedView === "unassigned" && !(l.outcome === "candidate" && !l.assignee)) return false;
      if (savedView === "redflags" && l.flagCount < 2) return false;
      if (savedView === "mine" && l.assignee?.id !== "u_mr") return false;
      if (savedView === "stale" && l.submittedHoursAgo < 72) return false;

      return true;
    });
  }, [filterState, savedView]);

  const counts = React.useMemo(() => ({
    inbox: APP_DATA.LEADS.length,
    hot: APP_DATA.LEADS.filter(l => l.outcome === "candidate" && l.score >= 65 && l.submittedHoursAgo < 168).length,
    unassigned: APP_DATA.LEADS.filter(l => l.outcome === "candidate" && !l.assignee).length,
    redflags: APP_DATA.LEADS.filter(l => l.flagCount >= 2).length,
    mine: APP_DATA.LEADS.filter(l => l.assignee?.id === "u_mr").length,
    stale: APP_DATA.LEADS.filter(l => l.submittedHoursAgo >= 72).length,
  }), []);

  const openLead = APP_DATA.LEADS.find(l => l.id === openLeadId);

  // Keyboard
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.matches("input, textarea")) return;
      if (e.key === "Escape") setOpenLeadId(null);
      if (e.key === "j" || e.key === "ArrowDown") {
        e.preventDefault();
        if (openLeadId) {
          const idx = filteredLeads.findIndex(l => l.id === openLeadId);
          if (idx < filteredLeads.length - 1) setOpenLeadId(filteredLeads[idx+1].id);
        }
      }
      if (e.key === "k" || e.key === "ArrowUp") {
        e.preventDefault();
        if (openLeadId) {
          const idx = filteredLeads.findIndex(l => l.id === openLeadId);
          if (idx > 0) setOpenLeadId(filteredLeads[idx-1].id);
        }
      }
      if (e.key === "g") {
        setTimeout(() => {
          const next = (e2) => {
            if (e2.key === "i") setView("inbox");
            if (e2.key === "a") setView("analytics");
            if (e2.key === "k") setView("kanban");
            if (e2.key === "s") setView("settings");
            window.removeEventListener("keydown", next);
          };
          window.addEventListener("keydown", next, { once: true });
        }, 10);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [openLeadId, filteredLeads]);

  const crumbs =
    view === "inbox" ? ["SL Tech", "Lead Inbox", savedView === "all" ? "All leads" : (savedView === "hot" ? "Hot — this week" : savedView === "unassigned" ? "Unassigned candidates" : savedView === "redflags" ? "Red-flag review queue" : savedView === "mine" ? "Assigned to me" : "Stale > 72h")] :
    view === "analytics" ? ["SL Tech", "Analytics"] :
    view === "kanban" ? ["SL Tech", "Attorney capacity"] :
    view === "askdb" ? ["SL Tech", "Ask the database"] :
    ["SL Tech", "Settings"];

  const openIdx = openLeadId ? filteredLeads.findIndex(l => l.id === openLeadId) : -1;
  const nextLead = () => openIdx >= 0 && openIdx < filteredLeads.length - 1 && setOpenLeadId(filteredLeads[openIdx+1].id);
  const prevLead = () => openIdx > 0 && setOpenLeadId(filteredLeads[openIdx-1].id);

  return (
    <div className="app">
      <TopBar crumbs={crumbs} onShortcuts={() => setToast("Keyboard: g+i inbox · g+a analytics · g+k kanban · j/k navigate · esc close · ⌘K search")} />
      <Sidebar view={view} onNavigate={v => { setView(v); setOpenLeadId(null); setSavedView("all"); }}
               savedView={savedView} onSavedView={(v) => { setSavedView(v); setView("inbox"); }}
               counts={counts} />
      <main className="main">
        {view === "inbox" && (
          <Inbox leads={filteredLeads}
                 onOpen={setOpenLeadId}
                 filterState={filterState}
                 setFilterState={setFilterState}
                 selected={selected}
                 setSelected={setSelected}
                 savedView={savedView}
                 onSavedView={setSavedView}/>
        )}
        {view === "analytics" && <Analytics leads={APP_DATA.LEADS}/>}
        {view === "kanban" && <Kanban leads={APP_DATA.LEADS} onOpen={setOpenLeadId}/>}
        {view === "askdb" && <AskDb leads={APP_DATA.LEADS} onOpen={setOpenLeadId}/>}
        {view === "settings" && <Settings/>}

        {openLead && (
          <LeadDetail lead={openLead}
                      onClose={() => setOpenLeadId(null)}
                      onNext={nextLead}
                      onPrev={prevLead}/>
        )}
      </main>

      {toast && (
        <div className="toast" onClick={() => setToast(null)}>{toast}</div>
      )}

      {tweaksOpen && (
        <div className="tweaks">
          <div className="tweaks__title">Tweaks</div>
          <div className="tweaks__row">
            <label>Density</label>
            <div className="tweaks__seg">
              {["compact","standard","relaxed"].map(v => (
                <button key={v} className={tweaks.density === v ? "on" : ""} onClick={() => updateTweak("density", v)}>{v}</button>
              ))}
            </div>
          </div>
          <div className="tweaks__row">
            <label>Accent</label>
            <div className="tweaks__seg">
              {[["gold","gold"],["cool","navy"],["sage","sage"]].map(([v,l]) => (
                <button key={v} className={tweaks.accentWarmth === v ? "on" : ""} onClick={() => updateTweak("accentWarmth", v)}>{l}</button>
              ))}
            </div>
          </div>
          <div style={{fontSize:11, color:"var(--ink-400)", marginTop:10, lineHeight:1.5}}>
            Try <Kbd>g</Kbd> then <Kbd>i</Kbd> to jump to inbox, <Kbd>j</Kbd>/<Kbd>k</Kbd> in a drawer to page leads, <Kbd>esc</Kbd> to close.
          </div>
        </div>
      )}

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

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