import {
  Map,
  User,
  Swords,
  Dice5,
  ScrollText,
  Volume2,
  Settings,
  ChevronDown,
  ChevronLeft,
  Sparkles,
  Timer,
  Calendar,
  Wand2,
} from "lucide-react";
import { useState } from "react";
import { Dashboard } from "./components/Dashboard";
import { SettingsPanel } from "./components/SettingsPanel";
import { NpcGenerator } from "./components/NpcGenerator";
import { DiceRoller } from "./components/DiceRoller";
import { SessionLogger } from "./components/SessionLogger";
import { EncounterBuilder } from "./components/EncounterBuilder";
import { InitiativeTracker } from "./components/InitiativeTracker";
import { RandomTables } from "./components/RandomTables";
import { CalendarWidget } from "./components/CalendarWidget";
import { WorldBuilder } from "./components/WorldBuilder";
import { ItemForge } from "./components/ItemForge";
import { QuestDesigner } from "./components/QuestDesigner";
import { Soundboard } from "./components/Soundboard";
import { ToastContainer } from "./components/Toast";

export type View =
  | "dashboard"
  | "world"
  | "npcs"
  | "encounter"
  | "dice"
  | "session"
  | "sound"
  | "initiative"
  | "tables"
  | "calendar"
  | "quest"
  | "items"
  | "settings";

const navItems: { icon: typeof Map; label: string; view: View }[] = [
  { icon: Map, label: "World", view: "world" },
  { icon: User, label: "NPCs", view: "npcs" },
  { icon: Wand2, label: "Items", view: "items" },
  { icon: Swords, label: "Encounter", view: "encounter" },
  { icon: Dice5, label: "Dice", view: "dice" },
  { icon: ScrollText, label: "Session", view: "session" },
  { icon: Volume2, label: "Sound", view: "sound" },
];

function renderView(view: View): React.ReactNode {
  switch (view) {
    case "npcs":
      return <NpcGenerator />;
    case "dice":
      return <DiceRoller />;
    case "session":
      return <SessionLogger />;
    case "encounter":
      return <EncounterBuilder />;
    case "initiative":
      return <InitiativeTracker />;
    case "tables":
      return <RandomTables />;
    case "calendar":
      return <CalendarWidget />;
    case "settings":
      return <SettingsPanel />;
    case "world":
      return <WorldBuilder />;
    case "quest":
      return <QuestDesigner />;
    case "items":
      return <ItemForge />;
    case "sound":
      return <Soundboard />;
    default:
      return null;
  }
}

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

  const isDetailView = view !== "dashboard" && view !== "settings";

  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 — goes to dashboard */}
        <button
          onClick={() => setView("dashboard")}
          className={`w-8 h-8 rounded-lg flex items-center justify-center mb-4 font-heading font-bold text-lg cursor-pointer transition-colors ${
            view === "dashboard"
              ? "bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)]"
              : "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)] hover:bg-[var(--color-gold-bright)] hover:text-[var(--color-bg-deep)]"
          }`}
          title="Dashboard"
        >
          ⚔
        </button>

        {navItems.map((item) => (
          <button
            key={item.label}
            onClick={() => setView(item.view)}
            className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
              view === item.view
                ? "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" />

        {/* Extra nav items */}
        <button
          onClick={() => setView("initiative")}
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
            view === "initiative"
              ? "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="Initiative"
        >
          <Timer size={18} />
        </button>
        <button
          onClick={() => setView("tables")}
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
            view === "tables"
              ? "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="Random Tables"
        >
          <Sparkles size={18} />
        </button>
        <button
          onClick={() => setView("quest")}
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
            view === "quest"
              ? "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="Quest Designer"
        >
          <Sparkles size={16} />
        </button>
        <button
          onClick={() => setView("calendar")}
          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
            view === "calendar"
              ? "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="Calendar"
        >
          <Calendar size={18} />
        </button>

        <div className="w-6 h-px bg-[var(--color-border-subtle)] my-1" />

        {/* Settings */}
        <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
        >
          {isDetailView && (
            <button
              onClick={() => setView("dashboard")}
              className="mr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-gold-bright)] transition-colors cursor-pointer"
              title="Back to dashboard"
            >
              <ChevronLeft size={18} />
            </button>
          )}
          <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 onNavigate={setView} />
          ) : view === "settings" ? (
            <div className="max-w-lg mx-auto p-6">
              <h2 className="font-heading text-[var(--color-gold-bright)] text-lg font-semibold mb-4">
                Settings
              </h2>
              <SettingsPanel />
            </div>
          ) : isDetailView ? (
            <div className="max-w-2xl mx-auto p-6">
              <div className="glass-card p-6">
                {renderView(view)}
              </div>
            </div>
          ) : null}
        </main>
      </div>

      {/* Toast notifications */}
      <ToastContainer />
    </div>
  );
}