import type { LucideIcon } from "lucide-react";
import { PanelLeftClose, PanelLeftOpen, Search } from "lucide-react";
import type { PropsWithChildren } from "react";
import { useState } from "react";

export interface NavigationItem<Id extends string = string> {
  id: Id;
  label: string;
  icon: LucideIcon;
}

interface ShellProps<Id extends string> extends PropsWithChildren {
  activeView: Id;
  navigationItems: Array<NavigationItem<Id>>;
  onNavigate: (id: Id) => void;
}

export function Shell<Id extends string>({ activeView, navigationItems, onNavigate, children }: ShellProps<Id>) {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  return (
    <div className={`app-shell ${isSidebarCollapsed ? "sidebar-collapsed" : ""}`}>
      <aside className="sidebar" aria-label="Primary navigation">
        <div className="brand">
          <div className="brand-mark">R</div>
          <div className="brand-copy">
            <h1 className="brand-title">RPKI Explorer</h1>
            <div className="brand-subtitle">Validation Intelligence</div>
          </div>
        </div>
        <nav className="nav-list">
          {navigationItems.map((item) => (
            <button
              aria-current={activeView === item.id ? "page" : undefined}
              aria-label={isSidebarCollapsed ? item.label : undefined}
              className={`nav-item ${activeView === item.id ? "active" : ""}`}
              key={item.id}
              onClick={() => onNavigate(item.id)}
              title={isSidebarCollapsed ? item.label : undefined}
              type="button"
            >
              <item.icon aria-hidden="true" size={18} />
              <span>{item.label}</span>
            </button>
          ))}
        </nav>
        <button
          aria-expanded={!isSidebarCollapsed}
          aria-label={isSidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
          className="sidebar-toggle"
          onClick={() => setIsSidebarCollapsed((collapsed) => !collapsed)}
          title={isSidebarCollapsed ? "Expand navigation" : "Collapse navigation"}
          type="button"
        >
          {isSidebarCollapsed ? <PanelLeftOpen aria-hidden="true" size={18} /> : <PanelLeftClose aria-hidden="true" size={18} />}
          <span>{isSidebarCollapsed ? "Expand" : "Collapse"}</span>
        </button>
      </aside>
      <main className="main-panel">
        <header className="topbar">
          <div className="run-selector readonly-run" aria-label="Current run">
            <span>Run</span>
            <strong>latest indexed run</strong>
          </div>
          <div className="topbar-actions">
            <label className="search-box">
              <Search aria-hidden="true" size={18} />
              <span className="sr-only">Exact object URI search is not active yet</span>
              <input disabled placeholder="Exact URI lookup planned in M2" />
            </label>
            <div className="ready-pill"><span /> UI Ready</div>
          </div>
        </header>
        {children}
      </main>
    </div>
  );
}
