/* VCP app: state, router, login, toast. */

const DEFAULT_STATE = { door: null, route: "login", companyId: null, period: "25Q2", dark: false };
function loadState() {
  try { const s = JSON.parse(localStorage.getItem("vcp_state")); if (s && typeof s === "object") return { ...DEFAULT_STATE, ...s }; } catch (e) {}
  return { ...DEFAULT_STATE };
}

function Login({ go }) {
  const [loading, setLoading] = useState(null);
  const signIn = (door) => {
    setLoading(door);
    setTimeout(() => go(door === "firm" ? { door: "firm", route: "portfolio", companyId: null } : { door: "portco", route: "pc-company", companyId: "helios" }), 650);
  };
  return <div style={{ height: "100%", display: "flex", background: "var(--surface)" }}>
    <div style={{ flex: "0 0 46%", maxWidth: 560, background: "var(--surface-warm)", borderRight: "1px solid var(--line)", padding: "56px 56px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
      <Brand />
      <div>
        <div className="micro" style={{ marginBottom: 14 }}>Value Creation Platform</div>
        <h1 style={{ fontSize: 34, fontWeight: 800, letterSpacing: "-0.025em", lineHeight: 1.12, margin: 0, maxWidth: 420 }}>One model for the whole portfolio.</h1>
        <p style={{ color: "var(--ink-muted)", fontSize: 14, marginTop: 16, maxWidth: 400, lineHeight: 1.55 }}>
          The firm runs every company's value, structure, and improvement plan in one place. Each company logs into its own slice of the same model.
        </p>
        <div style={{ display: "flex", gap: 22, marginTop: 28 }}>
          {[["Investments", "Know the portfolio"], ["Value Creation", "Improve, measurably"], ["Collaboration", "Run the work"]].map(([t, s]) => <div key={t} style={{ borderLeft: "2px solid var(--accent-line)", paddingLeft: 11 }}>
            <div style={{ fontWeight: 700, fontSize: 13 }}>{t}</div><div style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{s}</div>
          </div>)}
        </div>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-faint)" }}>Northbridge Capital · demo environment</div>
    </div>
    <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
      <div style={{ width: 360 }}>
        <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: "-0.01em" }}>Sign in</h2>
        <p style={{ color: "var(--ink-soft)", fontSize: 13, marginTop: 6 }}>Authenticate with your organisation account. Your view is set by your email domain.</p>
        <button onClick={() => signIn("firm")} disabled={loading} style={{
          width: "100%", marginTop: 22, display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          padding: "13px", borderRadius: 10, border: "1px solid var(--line)", background: "var(--surface-card)", fontWeight: 600, fontSize: 14,
        }}>
          {loading === "firm" ? <Icon name="refresh" size={17} /> : <Icon name="microsoft" size={17} />}
          Sign in with Microsoft
        </button>
        <div style={{ fontSize: 11.5, color: "var(--ink-faint)", textAlign: "center", marginTop: 8 }}>Firm user · @northbridge.capital</div>

        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "22px 0", color: "var(--ink-faint)", fontSize: 11 }}>
          <div style={{ flex: 1, height: 1, background: "var(--line)" }} /> OR <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
        </div>
        <button onClick={() => signIn("portco")} disabled={loading} style={{
          width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          padding: "12px", borderRadius: 10, border: "1px solid var(--line)", background: "transparent", fontWeight: 600, fontSize: 13.5, color: "var(--ink-muted)",
        }}>
          {loading === "portco" ? <Icon name="refresh" size={16} /> : <Icon name="building" size={16} />}
          Continue as portfolio company
        </button>
        <div style={{ fontSize: 11.5, color: "var(--ink-faint)", textAlign: "center", marginTop: 8 }}>Portco user · Helios Software</div>

        <div style={{ marginTop: 30, padding: 12, background: "var(--surface-deep)", borderRadius: 9, display: "flex", gap: 9, alignItems: "flex-start" }}>
          <Icon name="shield" size={15} color="var(--ink-soft)" style={{ marginTop: 1 }} />
          <div style={{ fontSize: 11.5, color: "var(--ink-soft)", lineHeight: 1.5 }}>Secured by Microsoft EntraID. Single sign-on with MFA. Role is derived at login, not stored.</div>
        </div>
      </div>
    </div>
  </div>;
}

function Placeholder({ title }) {
  return <div style={{ padding: 40 }}><EmptyState icon="layers" title={title} sub="This screen is part of the demo build." /></div>;
}

function Toast() {
  const [msg, setMsg] = useState(null);
  useEffect(() => {
    window.vcpToast = (m) => { setMsg(m); clearTimeout(window._vcpT); window._vcpT = setTimeout(() => setMsg(null), 2600); };
  }, []);
  if (!msg) return null;
  return <div style={{ position: "fixed", bottom: 22, left: "50%", transform: "translateX(-50%)", zIndex: 200, background: "var(--ink)", color: "var(--surface-card)", padding: "10px 16px", borderRadius: 10, fontSize: 13, fontWeight: 600, boxShadow: "var(--shadow-pop)", display: "flex", alignItems: "center", gap: 8, animation: "vcpFade 150ms ease" }}>
    <Icon name="check" size={15} />{msg}
  </div>;
}

function renderScreen(state, go) {
  const C = window;
  const map = {
    "portfolio": C.FundCockpit, "value-creation": C.ValueCreationFirm, "collaboration": C.CollaborationFirm, "admin": C.AdminScreen,
    "co-overview": C.CompanyOverview, "co-oversight": C.CompanyOversight, "co-valuecreation": C.CompanyValueCreation, "co-collaboration": C.CompanyCollaboration,
    "pc-company": C.PortcoHome, "pc-assessment": C.Assessment, "pc-playbooks": C.PlaybooksRead,
  };
  const Comp = map[state.route];
  if (!Comp) return <Placeholder title={ROUTE_TITLES[state.route] || "Screen"} />;
  return <Comp state={state} go={go} />;
}

function App() {
  const [state, setState] = useState(loadState);
  useEffect(() => { localStorage.setItem("vcp_state", JSON.stringify(state)); }, [state]);
  useEffect(() => { document.documentElement.classList.toggle("dark", !!state.dark); }, [state.dark]);
  const go = useCallback((patch) => setState(s => ({ ...s, ...patch })), []);
  const toggleDark = useCallback(() => setState(s => ({ ...s, dark: !s.dark })), []);

  if (!state.door) return <><Login go={go} /><Toast /></>;

  return <div style={{ height: "100%", display: "flex", overflow: "hidden" }}>
    <Sidebar state={state} go={go} />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, height: "100%" }}>
      <TopBar state={state} go={go} toggleDark={toggleDark} />
      <main className="scroll-y" style={{ flex: 1, background: "var(--surface)" }}>
        {renderScreen(state, go)}
      </main>
    </div>
    <Toast />
  </div>;
}

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