import { useState } from "react";
import { EpisodesIcon, FilterIcon, ListIcon, PaletteIcon, RenameIcon, SfvIcon, SubtitlesIcon } from "./Icons";
import SettingsModal from "./SettingsModal";

export interface PanelDef {
  id: string;
  name: string;
  icon: () => JSX.Element;
}

// Same panel set, same order, as the original's PanelBuilder.defaultSequence().
export const PANELS: PanelDef[] = [
  { id: "rename", name: "Rename", icon: RenameIcon },
  { id: "episodes", name: "Episodes", icon: EpisodesIcon },
  { id: "subtitles", name: "Subtitles", icon: SubtitlesIcon },
  { id: "sfv", name: "SFV", icon: SfvIcon },
  { id: "filter", name: "Filter", icon: FilterIcon },
  { id: "list", name: "List", icon: ListIcon },
];

const APP_VERSION = "0.1.0";

export default function Sidebar({
  selected,
  onSelect,
}: {
  selected: string;
  onSelect: (id: string) => void;
}) {
  const [settingsOpen, setSettingsOpen] = useState(false);

  return (
    <nav className="sidebar">
      <ul className="sidebar-list">
        {PANELS.map((panel) => {
          const Icon = panel.icon;
          const isSelected = panel.id === selected;
          return (
            <li key={panel.id}>
              <button
                className={`sidebar-item${isSelected ? " selected" : ""}`}
                onClick={() => onSelect(panel.id)}
              >
                {isSelected && <span className="sidebar-item-accent" />}
                <Icon />
                <span>{panel.name}</span>
              </button>
            </li>
          );
        })}
      </ul>

      <div className="sidebar-footer">
        <button
          className="sidebar-settings-button"
          title="Settings (theme)"
          onClick={() => setSettingsOpen(true)}
        >
          <PaletteIcon />
        </button>
        <span className="sidebar-wordmark">Aurora Curator</span>
        <span className="sidebar-version">v{APP_VERSION}</span>
      </div>

      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </nav>
  );
}