import { useEffect, useState } from "react"
import { Activity, Code, Bookmark, Wrench, ArrowLeft, type LucideIcon } from "lucide-react"
import { ConnectView } from "@/views/ConnectView"
import { MemoryView } from "@/views/MemoryView"
import { SystemDrawer } from "@/components/SystemDrawer"
import { useHealth } from "@/lib/queries"
import { cn } from "@/lib/utils"
import { Mc3Start } from "./Mc3Start"
import { Mc3Maschinenraum } from "./Mc3Maschinenraum"

// MC3-Prototyp-Schale. Läuft nicht-destruktiv unter #mc3, das produktive MC2 bleibt
// unangetastet. Vier Türen; Innereien sind bewusst die bestehenden, bewährten Views.
type Door = "start" | "vibe" | "konstitution" | "maschinenraum"

const DOORS: { id: Door; label: string; icon: LucideIcon }[] = [
  { id: "start", label: "Start", icon: Activity },
  { id: "vibe", label: "Vibe-Coding", icon: Code },
  { id: "konstitution", label: "Konstitution", icon: Bookmark },
  { id: "maschinenraum", label: "Maschinenraum", icon: Wrench },
]

export function Mc3App() {
  const [door, setDoor] = useState<Door>("start")
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [drawerTab, setDrawerTab] = useState<"maintenance" | "logs">("maintenance")
  const { data: health } = useHealth()

  useEffect(() => {
    const onOpen = (e: Event) => {
      setDrawerTab(((e as CustomEvent).detail?.tab as "maintenance" | "logs") || "maintenance")
      setDrawerOpen(true)
    }
    window.addEventListener("open-system-drawer", onOpen)
    return () => window.removeEventListener("open-system-drawer", onOpen)
  }, [])

  const boxOk = health && health.engine_reachable && (health.brain ? health.brain.ready : true)

  return (
    <div className="flex h-full relative">
      <div className="fixed inset-0 -z-50 pointer-events-none overflow-hidden bg-[hsl(224,30%,6%)]">
        <div className="absolute inset-0 opacity-30 animate-aurora bg-gradient-to-tr from-teal-500/15 via-indigo-500/10 to-purple-500/15 blur-[130px]" />
      </div>

      <SystemDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} defaultTab={drawerTab} />

      {/* Sidebar — 4 Türen */}
      <aside className="flex w-56 shrink-0 flex-col border-r border-border/40 bg-card/45 backdrop-blur-md">
        <div className="flex items-center gap-2 px-5 py-4 border-b border-border/40">
          <div className="h-7 w-7 rounded-lg bg-primary shadow-md shadow-primary/20" />
          <div className="leading-tight">
            <div className="text-sm font-semibold tracking-wide font-space">Mission Control</div>
            <div className="text-[10px] text-muted-foreground">3 · Prototyp</div>
          </div>
        </div>

        <nav className="flex-1 space-y-1 px-3 py-4">
          {DOORS.map((d) => (
            <button key={d.id} onClick={() => setDoor(d.id)}
              className={cn(
                "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-all cursor-pointer",
                door === d.id ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
              )}>
              <d.icon className="h-4.5 w-4.5 shrink-0" /> {d.label}
            </button>
          ))}
        </nav>

        <div className="px-3 py-3 border-t border-border/40 space-y-2">
          <div className="flex items-center gap-2 px-2 text-xs text-muted-foreground">
            <span className={cn("h-2 w-2 rounded-full", boxOk ? "bg-emerald-500 animate-pulse" : "bg-amber-500")} />
            {boxOk ? "Box läuft" : "prüfen"}
          </div>
          <a href="#dashboard"
            className="flex items-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors">
            <ArrowLeft className="h-3.5 w-3.5" /> zurück zu MC2
          </a>
        </div>
      </aside>

      {/* Main */}
      <main className="flex-1 min-w-0 overflow-y-auto p-6 scrollbar-thin">
        {door === "start" && <Mc3Start />}
        {door === "vibe" && <ConnectView />}
        {door === "konstitution" && <MemoryView />}
        {door === "maschinenraum" && <Mc3Maschinenraum />}
      </main>
    </div>
  )
}