import { useState } from 'react';
import { Settings, X } from 'lucide-react';
import type { TabCustomization } from '@/types';

interface ComponentSettingsProps {
  customization?: TabCustomization;
  onUpdate: (customization: TabCustomization) => void;
  availableSettings?: {
    refreshRate?: boolean;
    autoRefresh?: boolean;
    displayMode?: string[];
    filters?: Record<string, any>;
    theme?: boolean;
  };
}

export default function ComponentSettings({
  customization = {},
  onUpdate,
  availableSettings = {},
}: ComponentSettingsProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [localSettings, setLocalSettings] = useState<TabCustomization>(customization);

  const handleSave = () => {
    onUpdate(localSettings);
    setIsOpen(false);
  };

  const handleCancel = () => {
    setLocalSettings(customization);
    setIsOpen(false);
  };

  if (!isOpen) {
    return (
      <button
        onClick={() => setIsOpen(true)}
        className="p-1.5 hover:bg-dark-hover rounded transition-colors opacity-0 group-hover:opacity-100"
        title="Component Settings"
      >
        <Settings className="w-4 h-4 text-gray-400" />
      </button>
    );
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-dark-card rounded-lg shadow-xl max-w-md w-full">
        {/* Header */}
        <div className="p-4 border-b border-gray-700 flex items-center justify-between">
          <h3 className="text-lg font-semibold">Component Settings</h3>
          <button onClick={handleCancel} className="text-gray-400 hover:text-white">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Settings */}
        <div className="p-4 space-y-4">
          {availableSettings.autoRefresh && (
            <div className="flex items-center justify-between">
              <label className="text-sm font-medium">Auto Refresh</label>
              <input
                type="checkbox"
                checked={localSettings.autoRefresh || false}
                onChange={(e) =>
                  setLocalSettings({ ...localSettings, autoRefresh: e.target.checked })
                }
                className="rounded"
              />
            </div>
          )}

          {availableSettings.refreshRate && localSettings.autoRefresh && (
            <div>
              <label className="text-sm font-medium block mb-2">
                Refresh Rate (seconds)
              </label>
              <input
                type="number"
                min={10}
                max={3600}
                value={localSettings.refreshRate || 60}
                onChange={(e) =>
                  setLocalSettings({ ...localSettings, refreshRate: Number(e.target.value) })
                }
                className="w-full px-3 py-2 bg-dark-bg border border-gray-700 rounded-lg"
              />
            </div>
          )}

          {availableSettings.displayMode && availableSettings.displayMode.length > 0 && (
            <div>
              <label className="text-sm font-medium block mb-2">Display Mode</label>
              <select
                value={localSettings.displayMode || 'default'}
                onChange={(e) =>
                  setLocalSettings({ ...localSettings, displayMode: e.target.value })
                }
                className="w-full px-3 py-2 bg-dark-bg border border-gray-700 rounded-lg"
              >
                {availableSettings.displayMode.map((mode) => (
                  <option key={mode} value={mode}>
                    {mode.charAt(0).toUpperCase() + mode.slice(1)}
                  </option>
                ))}
              </select>
            </div>
          )}

          {availableSettings.theme && (
            <div>
              <label className="text-sm font-medium block mb-2">Theme</label>
              <select
                value={localSettings.theme || 'default'}
                onChange={(e) =>
                  setLocalSettings({
                    ...localSettings,
                    theme: e.target.value as 'default' | 'compact' | 'detailed',
                  })
                }
                className="w-full px-3 py-2 bg-dark-bg border border-gray-700 rounded-lg"
              >
                <option value="default">Default</option>
                <option value="compact">Compact</option>
                <option value="detailed">Detailed</option>
              </select>
            </div>
          )}

          {availableSettings.filters && Object.keys(availableSettings.filters).length > 0 && (
            <div className="border-t border-gray-700 pt-4">
              <label className="text-sm font-medium block mb-2">Filters</label>
              {Object.entries(availableSettings.filters).map(([key, options]) => (
                <div key={key} className="mb-3">
                  <label className="text-xs text-gray-400 block mb-1">
                    {key.charAt(0).toUpperCase() + key.slice(1)}
                  </label>
                  {Array.isArray(options) ? (
                    <select
                      value={localSettings.filters?.[key] || options[0]}
                      onChange={(e) =>
                        setLocalSettings({
                          ...localSettings,
                          filters: { ...localSettings.filters, [key]: e.target.value },
                        })
                      }
                      className="w-full px-3 py-2 bg-dark-bg border border-gray-700 rounded-lg text-sm"
                    >
                      {options.map((opt: string) => (
                        <option key={opt} value={opt}>
                          {opt}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <input
                      type="text"
                      value={localSettings.filters?.[key] || ''}
                      onChange={(e) =>
                        setLocalSettings({
                          ...localSettings,
                          filters: { ...localSettings.filters, [key]: e.target.value },
                        })
                      }
                      className="w-full px-3 py-2 bg-dark-bg border border-gray-700 rounded-lg text-sm"
                    />
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-gray-700 flex items-center justify-end gap-2">
          <button onClick={handleCancel} className="btn-secondary">
            Cancel
          </button>
          <button onClick={handleSave} className="btn-primary">
            Save
          </button>
        </div>
      </div>
    </div>
  );
}
