const { useState } = React;

const SpecComponents = window.SpecComponents || {};
const SpecHooks = window.SpecHooks || {};
const { SpecHeader, CardGrid, SplitView, Accordion, FunctionalitiesTabs } = SpecComponents;
const useSpecMetadataSafe = SpecHooks.useSpecMetadata || (() => ({ specMeta: null, navLinks: [], specError: "Spec hooks not loaded" }));
const useFunctionalitiesSafe = SpecHooks.useFunctionalities || (() => ({ functionalities: [], loading: false, error: "Spec hooks not loaded" }));
const useCfrSafe = SpecHooks.useCfr || (() => ({ items: [], loading: false, error: "CFR hooks not loaded" }));

const VIEW_TABS = [
  { id: "cards", label: "Option 1 — Card Grid + Drawer" },
  { id: "split", label: "Option 2 — Split Panel" },
  { id: "accordion", label: "Option 4 — Accordion" },
];

function App() {
  const [tab, setTab] = useState("cards");
  const [activeNav, setActiveNav] = useState("functionalities");
  const { specMeta, navLinks, specError } = useSpecMetadataSafe();
  const { functionalities, loading, error } = useFunctionalitiesSafe(specMeta?.functionalities?.path);
  const { items: cfrItems, loading: cfrLoading, error: cfrError } = useCfrSafe(specMeta?.["cross-functional-requirements"]?.path);

  if (!SpecHeader || !FunctionalitiesTabs || !CardGrid || !SplitView || !Accordion) {
    return (
      <div className="min-h-screen flex items-center justify-center text-sm text-slate-500">
        Loading app assets…
      </div>
    );
  }

  return (
    <div style={{ fontFamily: "'DM Sans', 'Segoe UI', sans-serif" }} className="min-h-screen bg-slate-100 flex flex-col">
      <SpecHeader
        spec={specMeta || { name: "Specification Viewer" }}
        navLinks={navLinks}
        activeNav={activeNav}
        onNavChange={setActiveNav}
        functionalities={functionalities}
      />

      <FunctionalitiesTabs tabs={VIEW_TABS} selected={tab} onChange={setTab} />

      <div className="flex-1 max-w-6xl w-full mx-auto px-6 py-5 overflow-hidden" style={{ height: "calc(100vh - 280px)", minHeight: 380 }}>
        {specError && (
          <div className="mb-3 text-xs text-amber-600">Metadata warning: {specError}</div>
        )}
        {activeNav === "functionalities" && loading && (
          <div className="flex items-center justify-center h-full text-sm text-slate-500">Loading functionality data…</div>
        )}
        {activeNav === "functionalities" && !loading && error && (
          <div className="flex items-center justify-center h-full text-sm text-rose-600">Failed to load data: {error}</div>
        )}
        {activeNav === "functionalities" && !loading && !error && !functionalities.length && (
          <div className="flex items-center justify-center h-full text-sm text-slate-500">No functionality data found.</div>
        )}
        {activeNav === "functionalities" && !loading && !error && functionalities.length > 0 && (
          <>
            {tab === "cards" && <CardGrid functionalities={functionalities} />}
            {tab === "split" && <SplitView functionalities={functionalities} />}
            {tab === "accordion" && <Accordion functionalities={functionalities} />}
          </>
        )}
        {activeNav === "cfr" && cfrLoading && (
          <div className="flex items-center justify-center h-full text-sm text-slate-500">Loading cross-functional requirements…</div>
        )}
        {activeNav === "cfr" && !cfrLoading && cfrError && (
          <div className="flex items-center justify-center h-full text-sm text-rose-600">Failed to load data: {cfrError}</div>
        )}
        {activeNav === "cfr" && !cfrLoading && !cfrError && !cfrItems.length && (
          <div className="flex items-center justify-center h-full text-sm text-slate-500">No cross-functional requirements found.</div>
        )}
        {activeNav === "cfr" && !cfrLoading && !cfrError && cfrItems.length > 0 && (
          <>
            {tab === "cards" && <CardGrid functionalities={cfrItems} />}
            {tab === "split" && <SplitView functionalities={cfrItems} />}
            {tab === "accordion" && <Accordion functionalities={cfrItems} />}
          </>
        )}
      </div>
    </div>
  );
}

window.SpecApp = App;