import { useState } from "react"
import { cn } from "@/lib/utils"
import { JobsBar } from "@/components/models/JobsBar"
import { LaneEditor } from "@/components/models/LaneEditor"
import { WarmSetManager } from "@/components/models/WarmSetManager"
import { ModelsWorkbench } from "./models/werkbank/ModelsWorkbench"
import { Discover } from "./models/Discover"

// Modell-Manager: Werkbank (verwalten) · Routing & Warm-Set (Lanes-Policy + Immer-bereit-Set,
// vorher im toten Alt-Cockpit verwaist und damit UNERREICHBAR — Review 15.07.) · Entdecken.
const TABS = [
  { id: "werkbank", label: "Werkbank" },
  { id: "routing", label: "Routing & Warm-Set" },
  { id: "discover", label: "Modelle finden" },
] as const
type TabId = (typeof TABS)[number]["id"]

export function ModelsView() {
  const [tab, setTab] = useState<TabId>("werkbank")
  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
            Modell-Manager
          </h1>
          <p className="text-sm text-muted-foreground">
            Modelle verwalten, das Lane-Routing einstellen und Neues von HuggingFace holen.
          </p>
        </div>

        <div className="flex mc-card-sm p-1 self-start">
          {TABS.map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={cn(
                "rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
                tab === t.id
                  ? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {t.label}
            </button>
          ))}
        </div>
      </div>

      <JobsBar />

      <div className="transition-all duration-300">
        {tab === "werkbank" && <ModelsWorkbench />}
        {tab === "routing" && (
          <div className="space-y-5">
            <LaneEditor />
            <WarmSetManager />
          </div>
        )}
        {tab === "discover" && <Discover />}
      </div>
    </div>
  )
}
