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

interface IndicatorInfo {
  id: string;
  name: string;
  value?: number;
  color: string;
  visible?: boolean;
}

interface ChartOverlayProps {
  symbol: string;
  price?: number;
  change?: number;
  changePercent?: number;
  indicators: IndicatorInfo[];
  onIndicatorSettings: (id: string) => void;
  onIndicatorRemove: (id: string) => void;
  onIndicatorToggle?: (id: string) => void;
  onAddIndicator?: () => void;
}

export function ChartOverlay({
  symbol,
  price,
  change,
  changePercent,
  indicators,
  onIndicatorSettings,
  onIndicatorRemove,
  onIndicatorToggle,
  onAddIndicator,
}: ChartOverlayProps) {
  const [showIndicators, setShowIndicators] = useState(true);

  return (
    <div className="absolute top-2 left-2 z-10 pointer-events-none">
      {/* Indicators */}
      {(indicators.length > 0 || true) && (
        <div>
          {/* Indicators Header with Toggle */}
          <div className="bg-surface-secondary/90 backdrop-blur-sm rounded-md px-2 py-0.5 shadow-sm pointer-events-auto flex items-center justify-between mb-0.5">
            <span className="text-xs text-text-secondary">Indicators</span>
            <button
              onClick={() => setShowIndicators(!showIndicators)}
              className="p-0.5 hover:bg-surface-tertiary rounded"
            >
              {showIndicators ? (
                <ChevronUpIcon className="w-3 h-3 text-text-secondary" />
              ) : (
                <ChevronDownIcon className="w-3 h-3 text-text-secondary" />
              )}
            </button>
          </div>

          {/* Indicator List */}
          {showIndicators && (
            <div className="space-y-0.5">
              {indicators.map((indicator) => (
                <div
                  key={indicator.id}
                  className={`bg-surface-secondary/90 backdrop-blur-sm rounded-md px-2 py-0.5 shadow-sm pointer-events-auto group flex items-center gap-1.5 ${
                    indicator.visible === false ? 'opacity-50' : ''
                  }`}
                >
                  {/* Eye icon on the left */}
                  {onIndicatorToggle && (
                    <button
                      onClick={() => onIndicatorToggle(indicator.id)}
                      className="p-0.5 hover:bg-surface-tertiary rounded"
                      title={indicator.visible === false ? "Show indicator" : "Hide indicator"}
                    >
                      {indicator.visible === false ? (
                        <EyeIcon className="w-3 h-3 text-text-secondary" />
                      ) : (
                        <EyeSlashIcon className="w-3 h-3 text-text-secondary" />
                      )}
                    </button>
                  )}
                  
                  {/* Color dot */}
                  <div
                    className="w-1.5 h-1.5 rounded-full flex-shrink-0"
                    style={{ backgroundColor: indicator.color }}
                  />
                  
                  {/* Name and value */}
                  <div className="flex items-center gap-1.5">
                    <span className="text-xs text-text-secondary whitespace-nowrap">
                      {indicator.name}
                    </span>
                    {indicator.value !== undefined && indicator.visible !== false && (
                      <span className="text-xs font-medium text-text-primary">
                        {indicator.value.toFixed(2)}
                      </span>
                    )}
                  </div>
                  
                  {/* Spacer to push buttons to the right */}
                  <div className="flex-1" />
                  
                  {/* Settings and Remove on the right */}
                  <div className="flex items-center gap-0.5">
                    <button
                      onClick={() => onIndicatorSettings(indicator.id)}
                      className="p-0.5 hover:bg-surface-tertiary rounded"
                    >
                      <Cog6ToothIcon className="w-3 h-3 text-text-secondary" />
                    </button>
                    {indicator.id !== 'VOLUME' && (
                      <button
                        onClick={() => onIndicatorRemove(indicator.id)}
                        className="p-0.5 hover:bg-surface-tertiary rounded"
                        title="Remove indicator"
                      >
                        <XMarkIcon className="w-3 h-3 text-text-secondary" />
                      </button>
                    )}
                  </div>
                </div>
              ))}
              
              {/* Add Indicator Button */}
              {onAddIndicator && (
                <button
                  onClick={onAddIndicator}
                  className="bg-surface-secondary/90 backdrop-blur-sm rounded-md px-2 py-0.5 shadow-sm pointer-events-auto flex items-center gap-1.5 w-full hover:bg-surface-tertiary/90 transition-colors"
                  title="Add indicator"
                >
                  <PlusIcon className="w-3 h-3 text-text-secondary" />
                  <span className="text-xs text-text-secondary">Add Indicator</span>
                </button>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}