import React from 'react';
import { CompanyList } from './CompanyList';
import { PortfolioSummary } from './PortfolioSummary';
import { useMockData } from '../../hooks/useMockData';

interface SidebarProps {
  onCommand: (command: string) => void;
  isOpen: boolean;
  onToggle: () => void;
}

type SidebarState = 'closed' | 'minimized' | 'open';

export const Sidebar: React.FC<SidebarProps> = ({ onCommand, isOpen, onToggle }) => {
  const { getAllCompanies, getPortfolio } = useMockData();
  const companies = getAllCompanies();
  const portfolio = getPortfolio();

  const handleCompanyClick = (symbol: string) => {
    onCommand(`/search ${symbol}`);
  };

  // Cycle through states: closed -> minimized -> open -> closed
  const cycleState = (): SidebarState => {
    if (!isOpen) return 'minimized';
    return 'open';
  };

  const state = cycleState();

  // Closed state - small collapsed sidebar with just toggle button
  if (state === 'closed') {
    return (
      <div className="w-8 bg-[#0a0a0a] border-r border-[#2a2a2a] flex flex-col items-center py-4">
        <button
          onClick={onToggle}
          className="text-[#888888] hover:text-[#e0e0e0] p-1 rounded hover:bg-[#1a1a1a] transition-colors"
          title="Show sidebar (Cmd+B)"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    );
  }

  // Minimized state - show icons only
  if (state === 'minimized') {
    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)"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
            </svg>
          </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"
          >
            <span className="text-2xl">💼</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">
              Portfolio
            </span>
          </button>

          {/* Company tickers */}
          {companies.slice(0, 7).map((company) => {
            const isPositive = company.change >= 0;
            return (
              <button
                key={company.symbol}
                onClick={() => handleCompanyClick(company.symbol)}
                className="w-full aspect-square bg-[#1a1a1a] hover:bg-[#2a2a2a] rounded flex items-center justify-center transition-colors group relative"
                title={company.name}
              >
                <span className={`text-xs font-mono font-bold ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
                  {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">
                  {company.symbol}
                </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)"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
            </svg>
          </button>
        </div>
      </div>

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

        {/* Company List */}
        <CompanyList companies={companies.slice(0, 7)} onCompanyClick={handleCompanyClick} />
      </div>

      {/* Footer */}
      <div className="p-4 border-t border-[#2a2a2a]">
        <div className="text-[10px] text-[#888888] font-mono text-center">
          Press <kbd className="px-1.5 py-0.5 bg-[#1a1a1a] rounded text-[#e0e0e0]">Cmd+B</kbd> to toggle
        </div>
      </div>
    </div>
  );
};
