import Image from "next/image";
import type { NavItem } from "@/lib/overview";
import { deltaClass, fmtCurrency, fmtPct } from "@/lib/format";
import { watchlistSubtitle } from "@/lib/overview";
import type { WatchlistResponse } from "@/types/api";

type Props = {
  navItems: NavItem[];
  selectedKey: string;
  currentTicker: string;
  watchlist: WatchlistResponse;
  watchlistError: string | null;
  onSelectTicker: (symbol: string) => void;
  onRemoveTicker: (symbol: string) => void;
  onSelectTab: (key: string) => void;
};

export function Sidebar({
  navItems,
  selectedKey,
  currentTicker,
  watchlist,
  watchlistError,
  onSelectTicker,
  onRemoveTicker,
  onSelectTab
}: Props) {
  return (
    <aside className="psm-side">
      <div className="psm-brand">
        <Image className="psm-brand-mark" src="/design-system/logo-monogram.svg" alt="" width={34} height={34} />
        <div className="psm-brand-copy">
          <div className="psm-brand-name">Prism</div>
          <div className="psm-brand-sub">Market Workbench</div>
        </div>
      </div>

      <div className="psm-side-section">
        <div className="psm-side-label">Workspace</div>
      </div>

      <nav className="psm-nav" aria-label="Primary">
        {navItems.map((item) => {
          const active = item.key === selectedKey;
          return (
            <button
              key={item.key}
              type="button"
              className={`psm-nav-item${active ? " active" : ""}${item.disabled ? " disabled" : ""}`}
              disabled={item.disabled}
              onClick={item.disabled ? undefined : () => onSelectTab(item.key)}
            >
              <span className={`psm-icon icon-${item.icon}`} aria-hidden />
              <span className="psm-nav-copy">
                <span>{item.label}</span>
                {item.disabled ? <span className="psm-nav-coming">Soon</span> : null}
              </span>
            </button>
          );
        })}
      </nav>

      <div className="psm-side-section">
        <div className="psm-side-label">Watchlist</div>
      </div>

      <div className="psm-watch">
        <div className="psm-watch-toolbar">
          <div className="psm-watch-limit">
            {watchlist.items.length}/{watchlist.limit}
          </div>
        </div>

        {watchlist.items.length === 0 ? <div className="psm-watch-empty">Saved tickers will appear here.</div> : null}

        {watchlist.items.map((item) => {
          const active = item.symbol === currentTicker;
          return (
            <div key={item.symbol} className={`psm-watch-row${active ? " active" : ""}`}>
              <button type="button" className="psm-watch-select" onClick={() => onSelectTicker(item.symbol)}>
                <span className="psm-watch-cell psm-watch-main">
                  <span className="psm-watch-symbol">{item.symbol}</span>
                  <span className="psm-watch-date">{watchlistSubtitle(item)}</span>
                </span>
                <span className="psm-watch-cell psm-watch-price">{fmtCurrency(item.quote?.price)}</span>
                <span className={`psm-watch-cell psm-watch-change ${deltaClass(item.quote?.change_pct)}`}>{fmtPct(item.quote?.change_pct, 2, true)}</span>
              </button>
              <button
                type="button"
                aria-label={`Remove ${item.symbol} from watchlist`}
                className="psm-watch-remove"
                onClick={() => onRemoveTicker(item.symbol)}
              >
                ×
              </button>
            </div>
          );
        })}

        {watchlistError ? <p className="psm-muted-copy psm-error-copy">{watchlistError}</p> : null}
      </div>
    </aside>
  );
}