import { useMemo, useState, useEffect } from "react";
import { TopNav } from "../components/TopNav";
import { useActiveSection } from "../hooks/useActiveSection";
import { useViewMode } from "../context/ViewModeContext";
import { deriveMetrics } from "../lib/deriveMetrics";
import type { AllData } from "../types/data";

import { HeroSection } from "./sections/HeroSection";
import { InsightsSection } from "./sections/InsightsSection";
import { SessionArcsSection } from "./sections/SessionArcsSection";
import { ProductivitySection } from "./sections/ProductivitySection";
import { AiEffectivenessSection } from "./sections/AiEffectivenessSection";
import { ToolProfileSection } from "./sections/ToolProfileSection";
import { PromptQualitySection } from "./sections/PromptQualitySection";
import { WorkflowPatternsSection } from "./sections/WorkflowPatternsSection";
import { WeeklyTrendsSection } from "./sections/WeeklyTrendsSection";
import { ActivityHeatmapSection } from "./sections/ActivityHeatmapSection";
import { SessionExplorerSection } from "./sections/SessionExplorerSection";

const ALL_SECTIONS = [
  { id: "hero", label: "Overview" },
  { id: "insights", label: "Insights" },
  { id: "session-arcs", label: "Session Arcs" },
  { id: "productivity", label: "Productivity" },
  { id: "ai-effectiveness", label: "AI Effectiveness" },
  { id: "tool-profile", label: "Tool Profile" },
  { id: "prompt-quality", label: "Prompt Quality" },
  { id: "workflow-patterns", label: "Workflow" },
  { id: "weekly-trends", label: "Trends" },
  { id: "activity", label: "Activity" },
  { id: "session-explorer", label: "Explorer", devOnly: true as const },
];

export function Dashboard({ data }: { data: AllData }) {
  const { mode } = useViewMode();
  const derived = useMemo(() => deriveMetrics(data), [data]);

  const sections = useMemo(
    () => ALL_SECTIONS.filter((s) => !("devOnly" in s) || mode === "dev"),
    [mode]
  );
  const sectionIds = useMemo(() => sections.map((s) => s.id), [sections]);
  const activeSection = useActiveSection(sectionIds);

  const [scrollProgress, setScrollProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const pct = (h.scrollTop / (h.scrollHeight - h.clientHeight)) * 100;
      setScrollProgress(Math.min(100, pct));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="min-h-screen bg-white">
      <TopNav activeSection={activeSection} sections={sections} scrollProgress={scrollProgress} />
      <main className="pt-16 pb-24 max-w-[1200px] mx-auto px-6 space-y-10">
        <HeroSection data={data} derived={derived} />
        <InsightsSection derived={derived} />
        <SessionArcsSection derived={derived} />
        <ProductivitySection data={data} derived={derived} />
        <AiEffectivenessSection data={data} />
        <ToolProfileSection data={data} derived={derived} />
        <PromptQualitySection data={data} />
        <WorkflowPatternsSection data={data} />
        <WeeklyTrendsSection data={data} />
        <ActivityHeatmapSection data={data} />
        {mode === "dev" && <SessionExplorerSection data={data} />}
      </main>
    </div>
  );
}
