import React from 'react';
import { Settings, ChevronLeft, Briefcase, TerminalSquare, NotebookPen } from 'lucide-react';
import { PortfolioSummary } from './PortfolioSummary';
import { TickerHistory } from './TickerHistory';
import { Portfolio } from '../../types/financial';
import { TickerHistoryEntry } from '../../types/terminal';

interface SidebarProps {
  onCommand: (command: string) => void;
  onOpenTerminal: () => void;
  onOpenResearch: () => void;
  onOpenSettings: () => void;
  activeView: 'terminal' | 'research' | 'settings';
  isOpen: boolean;
  onToggle: () => void;
  tickerHistory: TickerHistoryEntry[];
  isTickerHistoryLoaded: boolean;
  portfolio: Portfolio | null;
}

export const Sidebar: React.FC<SidebarProps> = ({
  onCommand,
  onOpenTerminal,
  onOpenResearch,
  onOpenSettings,
  activeView,
  isOpen,
  onToggle,
  tickerHistory,
  isTickerHistoryLoaded,
  portfolio,
}) => {
  const handleCompanyClick = (symbol: string) => {
    onCommand(`/search ${symbol}`);
  };

  // Minimized state - show icons only
  if (!isOpen) {
    return (
      <div className="w-16 bg-[#0a0a0a] border-r border-[#2a2a2a] flex flex-col">
        {/* Header with toggle button */}
        <div className="p-3 border-b border-[#2a2a2a] flex justify-center">
          <button
            onClick={onToggle}
            className="text-[#888888] hover:text-[#e0e0e0] p-1 rounded hover:bg-[#1a1a1a] transition-colors"
            title="Expand sidebar (Cmd+B)"
          >
            <ChevronLeft className="w-4 h-4" />
          </button>
        </div>

        {/* Content - Just ticker icons */}
        <div className="flex-1 overflow-y-auto p-2 space-y-2">
          {/* Portfolio icon */}
          <button
            onClick={() => onCommand('/portfolio')}
            className="w-full aspect-square bg-[#1a1a1a] hover:bg-[#2a2a2a] rounded flex items-center justify-center transition-colors group relative"
            title="Portfolio"
          >
            <Briefcase className="h-5 w-5 text-[#888888]" />
            <span className="absolute left-full ml-2 px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-xs text-[#e0e0e0] opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none">
              Portfolio
            </span>
          </button>

          {/* Company tickers */}
          {tickerHistory.slice(0, 7).map((entry) => {
            const isPositive = (entry.company.change ?? 0) >= 0;
            return (
              <button
                key={entry.company.symbol}
                onClick={() => handleCompanyClick(entry.company.symbol)}
                className="w-full aspect-square bg-[#1a1a1a] hover:bg-[#2a2a2a] rounded flex items-center justify-center transition-colors group relative"
                title={entry.company.name}
              >
                <span className={`text-xs font-mono font-bold ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
                  {entry.company.symbol.slice(0, 2)}
                </span>
                <span className="absolute left-full ml-2 px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-xs text-[#e0e0e0] opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none">
                  {entry.company.symbol}
                </span>
              </button>
            );
          })}
        </div>

        <div className="border-t border-[#2a2a2a] p-2">
          <div className="mb-2 flex flex-col gap-2">
            <button
              onClick={onOpenTerminal}
              className={`group relative flex w-full items-center justify-center rounded border px-2 py-3 transition-colors ${
                activeView === 'terminal'
                  ? 'border-[#58a6ff] bg-[#111827] text-[#58a6ff]'
                  : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:text-[#e0e0e0]'
              }`}
              title="Open terminal"
            >
              <TerminalSquare className="h-4 w-4" />
            </button>
            <button
              onClick={onOpenResearch}
              className={`group relative flex w-full items-center justify-center rounded border px-2 py-3 transition-colors ${
                activeView === 'research'
                  ? 'border-[#8dc3ff] bg-[#102032] text-[#8dc3ff]'
                  : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:text-[#e0e0e0]'
              }`}
              title="Open research"
            >
              <NotebookPen className="h-4 w-4" />
            </button>
          </div>
          <button
            onClick={onOpenSettings}
            className={`group relative flex w-full items-center justify-center rounded border px-2 py-3 transition-colors ${
              activeView === 'settings'
                ? 'border-[#58a6ff] bg-[#111827] text-[#58a6ff]'
                : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:text-[#e0e0e0]'
            }`}
            title="Open settings"
          >
            <Settings className="h-4 w-4" />
            <span className="absolute left-full ml-2 px-2 py-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded text-xs text-[#e0e0e0] opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 pointer-events-none">
              Settings
            </span>
          </button>
        </div>
      </div>
    );
  }

  // Open state - full sidebar
  return (
    <div className="w-70 bg-[#0a0a0a] border-r border-[#2a2a2a] flex flex-col">
      {/* Header */}
      <div className="p-4 border-b border-[#2a2a2a]">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-lg font-mono font-bold text-[#e0e0e0]">MosaicIQ</h1>
            <p className="text-[10px] text-[#888888] font-mono">Financial Terminal v1.0</p>
          </div>
          <button
            onClick={onToggle}
            className="text-[#888888] hover:text-[#e0e0e0] p-1 rounded hover:bg-[#1a1a1a] transition-colors"
            title="Minimize sidebar (Cmd+B)"
          >
            <ChevronLeft className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {/* Portfolio Summary */}
        <PortfolioSummary
          portfolio={portfolio}
          onLoadPortfolio={() => onCommand('/portfolio')}
        />

        {/* Ticker History - shows only when loaded */}
        {isTickerHistoryLoaded && (
          <TickerHistory history={tickerHistory} onTickerClick={handleCompanyClick} />
        )}
      </div>

      {/* Footer */}
      <div className="p-4 border-t border-[#2a2a2a]">
        <div className="mb-3 grid grid-cols-3 gap-2">
          <button
            onClick={onOpenTerminal}
            className={`flex items-center justify-center gap-2 rounded border px-3 py-2 text-xs font-mono transition-colors ${
              activeView === 'terminal'
                ? 'border-[#58a6ff] bg-[#111827] text-[#58a6ff]'
                : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:border-[#58a6ff] hover:text-[#e0e0e0]'
            }`}
          >
            <TerminalSquare className="h-4 w-4" />
            <span>Terminal</span>
          </button>
          <button
            onClick={onOpenResearch}
            className={`flex items-center justify-center gap-2 rounded border px-3 py-2 text-xs font-mono transition-colors ${
              activeView === 'research'
                ? 'border-[#8dc3ff] bg-[#102032] text-[#8dc3ff]'
                : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:border-[#8dc3ff] hover:text-[#e0e0e0]'
            }`}
          >
            <NotebookPen className="h-4 w-4" />
            <span>Research</span>
          </button>
          <button
            onClick={onOpenSettings}
            className={`flex items-center gap-2 rounded border px-3 py-2 text-xs font-mono transition-colors ${
              activeView === 'settings'
                ? 'border-[#58a6ff] bg-[#111827] text-[#58a6ff]'
                : 'border-[#2a2a2a] bg-[#111111] text-[#888888] hover:border-[#58a6ff] hover:text-[#e0e0e0]'
            }`}
            title="Open settings"
          >
            <Settings className="h-4 w-4" />
            <span>Settings</span>
          </button>
        </div>

        <div className="flex items-center justify-between gap-3">
          <div className="text-[10px] text-[#888888] font-mono text-right">
            Press <kbd className="px-1.5 py-0.5 bg-[#1a1a1a] rounded text-[#e0e0e0]">Cmd+B</kbd> to toggle
          </div>
        </div>
      </div>
    </div>
  );
};
