import { useState } from "react"
import { cn } from "@/lib/utils"
import { JobsBar } from "@/components/models/JobsBar"
import { Cockpit } from "./models/Cockpit"
import { Discover } from "./models/Discover"

export function ModelsView() {
  const [tab, setTab] = useState<"cockpit" | "discover">("cockpit")
  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">
            Verwalte deine Modelle und passe das Gateway-Routing live über das interaktive Cockpit an.
          </p>
        </div>

        <div className="flex rounded-xl border border-border/60 bg-card/45 backdrop-blur-md p-1 self-start">
          {(["cockpit", "discover"] as const).map((t) => (
            <button
              key={t}
              onClick={() => setTab(t)}
              className={cn(
                "rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
                tab === t
                  ? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {t === "cockpit" ? "Cockpit" : "Modelle finden"}
            </button>
          ))}
        </div>
      </div>

      <JobsBar />

      <div className="transition-all duration-300">
        {tab === "cockpit" ? <Cockpit /> : <Discover />}
      </div>
    </div>
  )
}