import { Cog6ToothIcon, XMarkIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
import { useState } from 'react';

interface IndicatorItem {
  id: string;
  name: string;
  type: 'overlay' | 'panel';
  visible: boolean;
  color?: string;
}

interface IndicatorListProps {
  indicators: IndicatorItem[];
  onRemove: (id: string) => void;
  onToggleVisibility: (id: string) => void;
  onSettings: (id: string) => void;
  onAddIndicator: () => void;
}

export function IndicatorList({ 
  indicators, 
  onRemove, 
  onToggleVisibility, 
  onSettings,
  onAddIndicator 
}: IndicatorListProps) {
  const [hoveredId, setHoveredId] = useState<string | null>(null);

  // Group indicators by type
  const overlayIndicators = indicators.filter(i => i.type === 'overlay');
  const panelIndicators = indicators.filter(i => i.type === 'panel');

  return (
    <div className="w-64 bg-surface-secondary border-r border-border flex flex-col h-full">
      {/* Header */}
      <div className="p-3 border-b border-border">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium text-text-primary">Indicators</h3>
          <button
            onClick={onAddIndicator}
            className="text-xs text-primary-500 hover:text-primary-400 font-medium"
          >
            + Add
          </button>
        </div>
      </div>

      {/* Indicator List */}
      <div className="flex-1 overflow-y-auto">
        {/* Main Chart Section */}
        <div className="p-3">
          <div className="text-xs text-text-secondary mb-2 uppercase tracking-wider">Main Chart</div>
          
          {/* Price Action */}
          <div className="bg-surface-tertiary rounded-md p-2 mb-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                <span className="text-sm text-text-primary">Price</span>
              </div>
              <button className="p-1 hover:bg-surface-secondary rounded">
                <Cog6ToothIcon className="w-3.5 h-3.5 text-text-secondary" />
              </button>
            </div>
          </div>

          {/* Volume */}
          <div className="bg-surface-tertiary rounded-md p-2 mb-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                <span className="text-sm text-text-primary">Volume</span>
              </div>
              <div className="flex items-center gap-1">
                <button className="p-1 hover:bg-surface-secondary rounded">
                  <EyeIcon className="w-3.5 h-3.5 text-text-secondary" />
                </button>
                <button className="p-1 hover:bg-surface-secondary rounded">
                  <Cog6ToothIcon className="w-3.5 h-3.5 text-text-secondary" />
                </button>
              </div>
            </div>
          </div>

          {/* Overlay Indicators */}
          {overlayIndicators.map(indicator => (
            <div
              key={indicator.id}
              className="bg-surface-tertiary rounded-md p-2 mb-2 group"
              onMouseEnter={() => setHoveredId(indicator.id)}
              onMouseLeave={() => setHoveredId(null)}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div 
                    className="w-2 h-2 rounded-full" 
                    style={{ backgroundColor: indicator.color || '#9e9e9e' }}
                  ></div>
                  <span className="text-sm text-text-primary">{indicator.name}</span>
                </div>
                <div className={`flex items-center gap-1 transition-opacity ${
                  hoveredId === indicator.id ? 'opacity-100' : 'opacity-0'
                }`}>
                  <button 
                    onClick={() => onToggleVisibility(indicator.id)}
                    className="p-1 hover:bg-surface-secondary rounded"
                  >
                    {indicator.visible ? 
                      <EyeIcon className="w-3.5 h-3.5 text-text-secondary" /> :
                      <EyeSlashIcon className="w-3.5 h-3.5 text-text-secondary" />
                    }
                  </button>
                  <button 
                    onClick={() => onSettings(indicator.id)}
                    className="p-1 hover:bg-surface-secondary rounded"
                  >
                    <Cog6ToothIcon className="w-3.5 h-3.5 text-text-secondary" />
                  </button>
                  <button 
                    onClick={() => onRemove(indicator.id)}
                    className="p-1 hover:bg-surface-secondary rounded"
                  >
                    <XMarkIcon className="w-3.5 h-3.5 text-text-secondary" />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Panel Indicators */}
        {panelIndicators.length > 0 && (
          <div className="p-3 border-t border-border">
            <div className="text-xs text-text-secondary mb-2 uppercase tracking-wider">Separate Panels</div>
            {panelIndicators.map(indicator => (
              <div
                key={indicator.id}
                className="bg-surface-tertiary rounded-md p-2 mb-2 group"
                onMouseEnter={() => setHoveredId(indicator.id)}
                onMouseLeave={() => setHoveredId(null)}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div 
                      className="w-2 h-2 rounded-full" 
                      style={{ backgroundColor: indicator.color || '#9e9e9e' }}
                    ></div>
                    <span className="text-sm text-text-primary">{indicator.name}</span>
                  </div>
                  <div className={`flex items-center gap-1 transition-opacity ${
                    hoveredId === indicator.id ? 'opacity-100' : 'opacity-0'
                  }`}>
                    <button 
                      onClick={() => onToggleVisibility(indicator.id)}
                      className="p-1 hover:bg-surface-secondary rounded"
                    >
                      {indicator.visible ? 
                        <EyeIcon className="w-3.5 h-3.5 text-text-secondary" /> :
                        <EyeSlashIcon className="w-3.5 h-3.5 text-text-secondary" />
                      }
                    </button>
                    <button 
                      onClick={() => onSettings(indicator.id)}
                      className="p-1 hover:bg-surface-secondary rounded"
                    >
                      <Cog6ToothIcon className="w-3.5 h-3.5 text-text-secondary" />
                    </button>
                    <button 
                      onClick={() => onRemove(indicator.id)}
                      className="p-1 hover:bg-surface-secondary rounded"
                    >
                      <XMarkIcon className="w-3.5 h-3.5 text-text-secondary" />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="p-3 border-t border-border">
        <button
          onClick={onAddIndicator}
          className="w-full px-3 py-2 bg-primary-500/10 text-primary-500 text-sm font-medium rounded-md hover:bg-primary-500/20 transition-colors"
        >
          Add Indicator
        </button>
      </div>
    </div>
  );
}