import { useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { useSettingsStore } from '../../store/settingsStore';
import { MODULES } from '../../config/modules.config';
import { Card } from '../../components/ui/card';
import Switch from '../../components/form/switch/Switch';

export default function ModuleSettings() {
  const toast = useToast();
  const {
    moduleEnableSettings,
    loadModuleEnableSettings,
    updateModuleEnableSettings,
    loading,
  } = useSettingsStore();

  useEffect(() => {
    loadModuleEnableSettings();
  }, [loadModuleEnableSettings]);

  const handleToggle = async (moduleName: string, enabled: boolean) => {
    try {
      const enabledKey = `${moduleName}_enabled` as keyof typeof moduleEnableSettings;
      await updateModuleEnableSettings({
        [enabledKey]: enabled,
      } as any);
      toast.success(`${MODULES[moduleName]?.name || moduleName} ${enabled ? 'enabled' : 'disabled'}`);
    } catch (error: any) {
      toast.error(`Failed to update module: ${error.message}`);
    }
  };

  const getModuleEnabled = (moduleName: string): boolean => {
    if (!moduleEnableSettings) return true; // Default to enabled
    const enabledKey = `${moduleName}_enabled` as keyof typeof moduleEnableSettings;
    return moduleEnableSettings[enabledKey] !== false;
  };

  return (
    <div className="p-6">
      <PageMeta title="Module Settings" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Module Settings</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">Enable or disable modules for your account</p>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading...</div>
        </div>
      ) : (
        <Card className="p-6">
          <div className="space-y-6">
            {Object.entries(MODULES).map(([key, module]) => (
              <div
                key={key}
                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div className="text-2xl">{module.icon}</div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                      {module.name}
                    </h3>
                    {module.description && (
                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                        {module.description}
                      </p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-gray-600 dark:text-gray-400">
                    {getModuleEnabled(key) ? 'Enabled' : 'Disabled'}
                  </span>
                  <Switch
                    label=""
                    checked={getModuleEnabled(key)}
                    onChange={(enabled) => handleToggle(key, enabled)}
                  />
                </div>
              </div>
            ))}
          </div>
        </Card>
      )}
    </div>
  );
}