import { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/outline';

interface IndicatorOption {
  id: string;
  name: string;
  description: string;
  category: 'overlay' | 'oscillator';
}

const availableIndicators: IndicatorOption[] = [
  { id: 'SMA20', name: 'SMA 20', description: 'Simple Moving Average (20 periods)', category: 'overlay' },
  { id: 'SMA50', name: 'SMA 50', description: 'Simple Moving Average (50 periods)', category: 'overlay' },
  { id: 'EMA20', name: 'EMA 20', description: 'Exponential Moving Average (20 periods)', category: 'overlay' },
  { id: 'BB', name: 'Bollinger Bands', description: 'Bollinger Bands (20, 2)', category: 'overlay' },
  { id: 'VWAP', name: 'VWAP', description: 'Volume Weighted Average Price', category: 'overlay' },
  { id: 'RSI', name: 'RSI', description: 'Relative Strength Index (14)', category: 'oscillator' },
  { id: 'MACD', name: 'MACD', description: 'Moving Average Convergence Divergence', category: 'oscillator' },
];

interface IndicatorSelectorProps {
  isOpen: boolean;
  onClose: () => void;
  selectedIndicators: string[];
  onIndicatorsChange: (indicators: string[]) => void;
}

export function IndicatorSelector({ isOpen, onClose, selectedIndicators, onIndicatorsChange }: IndicatorSelectorProps) {
  const [selected, setSelected] = useState<Set<string>>(new Set(selectedIndicators.filter(id => id !== 'VOLUME')));

  const handleToggle = (indicatorId: string) => {
    const newSelected = new Set(selected);
    if (newSelected.has(indicatorId)) {
      newSelected.delete(indicatorId);
    } else {
      newSelected.add(indicatorId);
    }
    setSelected(newSelected);
  };

  const handleApply = () => {
    onIndicatorsChange(Array.from(selected));
    onClose();
  };

  const overlayIndicators = availableIndicators.filter(i => i.category === 'overlay');
  const oscillatorIndicators = availableIndicators.filter(i => i.category === 'oscillator');

  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-50" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/50 transition-opacity" />
        </Transition.Child>

        <div className="fixed inset-0 z-10 overflow-y-auto">
          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enterTo="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-secondary text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                <div className="bg-surface-secondary px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                  <div className="flex items-center justify-between mb-4">
                    <Dialog.Title as="h3" className="text-lg font-semibold text-text-primary">
                      Technical Indicators
                    </Dialog.Title>
                    <button
                      onClick={onClose}
                      className="rounded-md text-text-secondary hover:text-text-primary"
                    >
                      <XMarkIcon className="h-5 w-5" />
                    </button>
                  </div>

                  <div className="space-y-6">
                    {/* Overlay Indicators */}
                    <div>
                      <h4 className="text-sm font-medium text-text-primary mb-3">Overlay Indicators</h4>
                      <div className="space-y-2">
                        {overlayIndicators.map(indicator => (
                          <label
                            key={indicator.id}
                            className="flex items-start space-x-3 p-3 rounded-md hover:bg-surface-tertiary cursor-pointer"
                          >
                            <input
                              type="checkbox"
                              checked={selected.has(indicator.id)}
                              onChange={() => handleToggle(indicator.id)}
                              className="mt-0.5 h-4 w-4 rounded border-border text-primary-500 focus:ring-primary-500"
                            />
                            <div className="flex-1">
                              <div className="text-sm font-medium text-text-primary">{indicator.name}</div>
                              <div className="text-xs text-text-secondary">{indicator.description}</div>
                            </div>
                          </label>
                        ))}
                      </div>
                    </div>

                    {/* Oscillator Indicators */}
                    <div>
                      <h4 className="text-sm font-medium text-text-primary mb-3">Oscillators (Coming Soon)</h4>
                      <div className="space-y-2 opacity-50">
                        {oscillatorIndicators.map(indicator => (
                          <label
                            key={indicator.id}
                            className="flex items-start space-x-3 p-3 rounded-md cursor-not-allowed"
                          >
                            <input
                              type="checkbox"
                              disabled
                              checked={false}
                              className="mt-0.5 h-4 w-4 rounded border-border text-primary-500"
                            />
                            <div className="flex-1">
                              <div className="text-sm font-medium text-text-primary">{indicator.name}</div>
                              <div className="text-xs text-text-secondary">{indicator.description}</div>
                            </div>
                          </label>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                <div className="bg-surface-tertiary px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                  <button
                    type="button"
                    className="inline-flex w-full justify-center rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 sm:ml-3 sm:w-auto"
                    onClick={handleApply}
                  >
                    Apply
                  </button>
                  <button
                    type="button"
                    className="mt-3 inline-flex w-full justify-center rounded-md bg-surface-secondary px-4 py-2 text-sm font-medium text-text-primary shadow-sm ring-1 ring-inset ring-border hover:bg-surface-tertiary sm:mt-0 sm:w-auto"
                    onClick={onClose}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
}