import { useState } from "react";

import { HeroIntro } from "@/components/HeroIntro";
import { OpenEnvExplorerPane } from "@/components/OpenEnvExplorerPane";
import { RunWithLlmPane } from "@/components/RunWithLlmPane";
import { cn } from "@/lib/cn";

type TabId = "run" | "openenv";

interface TabDef {
  id: TabId;
  label: string;
}

const TABS: TabDef[] = [
  { id: "run", label: "Run with LLM" },
  { id: "openenv", label: "OpenEnv API" },
];

export function App(): JSX.Element {
  const [activeTab, setActiveTab] = useState<TabId>("run");

  return (
    <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 py-10">
      <header className="flex flex-col gap-6">
        <div className="flex flex-col gap-2">
          <p className="heading-eyebrow text-primary">PhysiX-Live</p>
          <h1 className="text-3xl font-semibold leading-tight md:text-4xl">
            Discover equations of motion from a noisy trajectory.
          </h1>
          <p className="max-w-3xl text-sm leading-relaxed text-textMuted">
            An OpenEnv RL environment where a language model proposes
            ordinary differential equations and a verifier scores them by
            forward-simulating each proposal and comparing to observation. No
            LLM-as-judge, no hidden side-information — the same scoring
            pipeline drives training, evaluation, and this demo.
          </p>
        </div>

        <HeroIntro />
      </header>

      {/* Tab bar — segmented-control style for unmistakable active state. */}
      <nav aria-label="View">
        <div
          role="tablist"
          className="inline-flex rounded-xl border border-border bg-surfaceMuted p-1"
        >
          {TABS.map((tab) => (
            <button
              key={tab.id}
              type="button"
              role="tab"
              aria-selected={activeTab === tab.id}
              aria-controls={`panel-${tab.id}`}
              id={`tab-${tab.id}`}
              onClick={() => setActiveTab(tab.id)}
              className={cn(
                "rounded-lg px-4 py-2 text-sm font-medium transition",
                activeTab === tab.id
                  ? "bg-primary text-background shadow-sm"
                  : "text-textMuted hover:text-textPrimary",
              )}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </nav>

      <div
        role="tabpanel"
        id={`panel-${activeTab}`}
        aria-labelledby={`tab-${activeTab}`}
      >
        {activeTab === "run" ? <RunWithLlmPane /> : <OpenEnvExplorerPane />}
      </div>
    </main>
  );
}