"use client";

import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { X, Settings as SettingsIcon } from 'lucide-react';
import { useSettingsStore } from '@/stores/settings-store';
import type { SettingsTab } from '@/stores/settings-store';

const settingsTabs = [
  { id: 'config' as SettingsTab, label: 'Configuration', icon: SettingsIcon },
];

const SettingsModal = () => {
  const { isOpen, activeTab, eventCatalogPath, setModalOpen, setActiveTab } = useSettingsStore();

  const handleClose = () => {
    setModalOpen(false);
  };

  const renderTabContent = () => {
    switch (activeTab) {
      case 'config':
        return (
          <div className="space-y-4">
            <div>
              <h3 className="text-lg font-medium text-gray-900 mb-4">Configuration</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    EventCatalog Path
                  </label>
                  <input
                    type="text"
                    value={eventCatalogPath}
                    readOnly
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 text-gray-600 cursor-not-allowed focus:outline-none"
                  />
                  <p className="text-xs text-gray-500 mt-1">
                    Path to your EventCatalog instance
                  </p>
                </div>
              </div>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <Dialog.Root open={isOpen} onOpenChange={setModalOpen}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-[90vw] max-w-4xl h-[600px] -translate-x-1/2 -translate-y-1/2 transform rounded-lg bg-white shadow-xl z-50 flex overflow-hidden">
          {/* Left Panel */}
          <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col">
            {/* Header */}
            <div className="p-4 border-b border-gray-200">
              <Dialog.Title className="text-lg font-semibold text-gray-900">
                Settings
              </Dialog.Title>
            </div>
            
            {/* Navigation */}
            <div className="flex-1 p-2">
              <nav className="space-y-1">
                {settingsTabs.map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`w-full flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                        activeTab === tab.id
                          ? 'bg-blue-100 text-blue-700'
                          : 'text-gray-700 hover:bg-gray-100'
                      }`}
                    >
                      <Icon className="w-4 h-4 mr-3" />
                      {tab.label}
                    </button>
                  );
                })}
              </nav>
            </div>
          </div>

          {/* Right Panel */}
          <div className="flex-1 flex flex-col">
            {/* Header with close button */}
            <div className="p-4 border-b border-gray-200 flex justify-end">
              <Dialog.Close asChild>
                <button
                  className="p-2 rounded-md hover:bg-gray-100 transition-colors"
                  onClick={handleClose}
                  aria-label="Close"
                >
                  <X className="h-5 w-5 text-gray-500" />
                </button>
              </Dialog.Close>
            </div>

            {/* Content */}
            <div className="flex-1 p-6 overflow-y-auto">
              {renderTabContent()}
            </div>

            {/* Footer */}
            <div className="p-4 border-t border-gray-200 bg-gray-50">
              <div className="flex justify-end">
                <button
                  onClick={handleClose}
                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default SettingsModal;