import {
  Map,
  User,
  Swords,
  Dice5,
  ScrollText,
  Volume2,
  Settings,
  ChevronDown,
} from "lucide-react";
import { useState } from "react";
import { Dashboard } from "./components/Dashboard";
import { SettingsPanel } from "./components/SettingsPanel";

type View = "dashboard" | "settings";

const navItems = [
  { icon: Map, label: "World" },
  { icon: User, label: "NPCs" },
  { icon: Swords, label: "Encounter" },
  { icon: Dice5, label: "Dice" },
  { icon: ScrollText, label: "Session" },
  { icon: Volume2, label: "Sound" },
];

export default function App() {
  const [view, setView] = useState<View>("dashboard");
  const [activeNav, setActiveNav] = useState(0);

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg-deep)]">
      {/* Left Rail */}
      <nav className="flex flex-col items-center w-14 bg-[var(--color-bg-surface)] border-r border-[var(--color-border-subtle)] py-3 gap-1 shrink-0">
        {/* App Logo */}
        <button
          onClick={() => setView("dashboard")}
          className="w-8 h-8 rounded-lg bg-[var(--color-gold-bright)] flex items-center justify-center mb-4 text-[var(--color-bg-deep)] font-heading font-bold text-lg cursor-pointer"
          title="DM-Pal"
        >
          ⚔
        </button>

        {navItems.map((item, i) => (
          <button
            key={item.label}
            onClick={() => {
              setActiveNav(i);
              setView("dashboard");
            }}
            className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
              i === activeNav && view === "dashboard"
                ? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
                : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
            }`}
            title={item.label}
          >
            <item.icon size={18} />
          </button>
        ))}

        {/* Spacer */}
        <div className="flex-1" />

        {/* Settings at bottom */}
        <button
          onClick={() => setView(view === "settings" ? "dashboard" : "settings")}
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
            view === "settings"
              ? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
              : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
          }`}
          title="Settings"
        >
          <Settings size={18} />
        </button>
      </nav>

      {/* Main Content Area */}
      <div className="flex flex-col flex-1 overflow-hidden">
        {/* Title Bar */}
        <header
          className="flex items-center h-10 px-4 bg-[var(--color-bg-surface)] border-b border-[var(--color-border-subtle)] shrink-0"
          data-tauri-drag-region
        >
          <span className="font-heading text-[var(--color-gold-bright)] text-base font-bold tracking-wider">
            DM-Pal
          </span>
          <div className="ml-4 flex items-center gap-1 text-[var(--color-text-secondary)] text-xs cursor-pointer hover:text-[var(--color-text-primary)] transition-colors">
            <ChevronDown size={12} />
            <span>My Campaign</span>
          </div>
        </header>

        {/* Main Content */}
        <main className="flex-1 overflow-auto">
          {view === "dashboard" ? <Dashboard /> : <SettingsPanel />}
        </main>
      </div>
    </div>
  );
}