"use client";

import { useState, useEffect } from "react";
import Hero from "@/components/Hero";
import AttentionExplorer from "@/components/AttentionExplorer";
import PromptDiff from "@/components/PromptDiff";
import ConfidenceMeter from "@/components/ConfidenceMeter";
import TokenFlowVisualizer from "@/components/TokenFlowVisualizer";
import CodeGenerationTracker from "@/components/CodeGenerationTracker";
import ModelInspector from "@/components/ModelInspector";
import Navigation from "@/components/Navigation";
// import WebSocketTest from "@/components/WebSocketTest"; // Removed - test component
import ClientOnly from "@/components/ClientOnly";

export default function Home() {
  const [activeView, setActiveView] = useState<"explorer" | "diff" | "confidence" | "flow" | "generation" | "inspector">("explorer");

  // Dispatch event when view changes
  useEffect(() => {
    window.dispatchEvent(new CustomEvent('viewChanged', { detail: { view: activeView } }));
  }, [activeView]);

  return (
    <div className="min-h-screen">
      <Navigation />
      <Hero />
      
      <main className="container mx-auto px-4 py-8">
        <div className="flex justify-center gap-4 mb-8">
          <button
            onClick={() => setActiveView("explorer")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "explorer"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Attention Explorer
          </button>
          <button
            onClick={() => setActiveView("diff")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "diff"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Prompt Diff
          </button>
          <button
            onClick={() => setActiveView("confidence")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "confidence"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Confidence Meter
          </button>
          <button
            onClick={() => setActiveView("flow")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "flow"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Token Flow
          </button>
          <button
            onClick={() => setActiveView("generation")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "generation"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Generation
          </button>
          <button
            onClick={() => setActiveView("inspector")}
            className={`px-6 py-3 rounded-lg font-medium transition-all ${
              activeView === "inspector"
                ? "bg-blue-600 text-white"
                : "bg-gray-800 text-gray-300 hover:bg-gray-700"
            }`}
          >
            Model Inspector
          </button>
        </div>

        <div className="bg-gray-900 rounded-xl p-6 min-h-[600px]">
          {activeView === "explorer" && <AttentionExplorer />}
          {activeView === "diff" && <PromptDiff />}
          {activeView === "confidence" && <ConfidenceMeter />}
          {activeView === "flow" && <TokenFlowVisualizer />}
          {activeView === "generation" && <CodeGenerationTracker />}
          {activeView === "inspector" && <ModelInspector />}
        </div>
      </main>
    </div>
  );
}