import React, { useState } from 'react';
import { 
  Save, 
  Database,
  Globe,
  Key,
  AlertCircle,
  Image
} from 'lucide-react';
import { toast } from 'react-toastify';

import { Button, Card, Input, Loading } from '../../components/common';
import { CategoryManager } from '../../components/admin/CategoryManager';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { settingsService } from '../../services/settings.service';
import { useTranslation } from 'react-i18next';

export const SettingsPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'general' | 'storage' | 'security' | 'categories'>('general');
  const queryClient = useQueryClient();
  const { t, i18n } = useTranslation();

  // Fetch settings
  const { data: settings, isLoading } = useQuery({
    queryKey: ['admin-settings'],
    queryFn: () => settingsService.getAllSettings(),
  });

  // Fetch storage info
  const { data: storageInfo } = useQuery({
    queryKey: ['admin-storage-info'],
    queryFn: () => settingsService.getStorageInfo(),
    enabled: activeTab === 'storage'
  });

  // General settings state
  const [generalSettings, setGeneralSettings] = useState({
    site_url: '',
    default_expiration_days: 30,
    max_file_size_mb: 50,
    allowed_file_types: 'jpg,jpeg,png,gif,webp',
    enable_watermark: false,
    enable_analytics: true,
    enable_registration: false,
    maintenance_mode: false,
    default_language: 'en'
  });

  // Security settings state
  const [securitySettings, setSecuritySettings] = useState({
    require_password: true,
    password_min_length: 8,
    enable_2fa: false,
    session_timeout_minutes: 60,
    max_login_attempts: 5,
    enable_recaptcha: false,
    recaptcha_site_key: '',
    recaptcha_secret_key: ''
  });

  React.useEffect(() => {
    if (settings) {
      // Set the language if it's different from current
      if (settings.general_default_language && settings.general_default_language !== i18n.language) {
        i18n.changeLanguage(settings.general_default_language);
      }
      
      // Extract general settings
      setGeneralSettings({
        site_url: settings.general_site_url || '',
        default_expiration_days: settings.general_default_expiration_days || 30,
        max_file_size_mb: settings.general_max_file_size_mb || 50,
        allowed_file_types: settings.general_allowed_file_types || 'jpg,jpeg,png,gif,webp',
        enable_watermark: settings.general_enable_watermark || false,
        enable_analytics: settings.general_enable_analytics || true,
        enable_registration: settings.general_enable_registration || false,
        maintenance_mode: settings.general_maintenance_mode || false,
        default_language: settings.general_default_language || 'en'
      });

      // Extract security settings
      setSecuritySettings({
        require_password: settings.security_require_password || true,
        password_min_length: settings.security_password_min_length || 8,
        enable_2fa: settings.security_enable_2fa || false,
        session_timeout_minutes: settings.security_session_timeout_minutes || 60,
        max_login_attempts: settings.security_max_login_attempts || 5,
        enable_recaptcha: settings.security_enable_recaptcha || false,
        recaptcha_site_key: settings.security_recaptcha_site_key || '',
        recaptcha_secret_key: settings.security_recaptcha_secret_key || ''
      });
    }
  }, [settings]);

  // Save mutations
  const saveGeneralMutation = useMutation({
    mutationFn: async () => {
      // Convert to the format expected by the API
      const settingsData: Record<string, any> = {};
      Object.entries(generalSettings).forEach(([key, value]) => {
        settingsData[`general_${key}`] = value;
      });
      return settingsService.updateSettings(settingsData);
    },
    onSuccess: () => {
      toast.success('General settings saved successfully');
      queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
    },
    onError: () => {
      toast.error('Failed to save general settings');
    }
  });

  const saveSecurityMutation = useMutation({
    mutationFn: async () => {
      // Convert to the format expected by the API
      const settingsData: Record<string, any> = {};
      Object.entries(securitySettings).forEach(([key, value]) => {
        settingsData[`security_${key}`] = value;
      });
      return settingsService.updateSettings(settingsData);
    },
    onSuccess: () => {
      toast.success('Security settings saved successfully');
      queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
    },
    onError: () => {
      toast.error('Failed to save security settings');
    }
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[400px]">
        <Loading size="lg" text="Loading settings..." />
      </div>
    );
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-neutral-900">System Settings</h1>
        <p className="text-neutral-600 mt-1">Configure system-wide settings and preferences</p>
      </div>

      {/* Tab Navigation */}
      <div className="border-b border-neutral-200 mb-6">
        <nav className="-mb-px flex gap-6">
          <button
            onClick={() => setActiveTab('general')}
            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'general'
                ? 'border-primary-600 text-primary-600'
                : 'border-transparent text-neutral-500 hover:text-neutral-700'
            }`}
          >
            General
          </button>
          <button
            onClick={() => setActiveTab('storage')}
            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'storage'
                ? 'border-primary-600 text-primary-600'
                : 'border-transparent text-neutral-500 hover:text-neutral-700'
            }`}
          >
            Storage
          </button>
          <button
            onClick={() => setActiveTab('security')}
            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'security'
                ? 'border-primary-600 text-primary-600'
                : 'border-transparent text-neutral-500 hover:text-neutral-700'
            }`}
          >
            Security
          </button>
          <button
            onClick={() => setActiveTab('categories')}
            className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'categories'
                ? 'border-primary-600 text-primary-600'
                : 'border-transparent text-neutral-500 hover:text-neutral-700'
            }`}
          >
            Categories
          </button>
        </nav>
      </div>

      {/* General Settings Tab */}
      {activeTab === 'general' && (
        <div className="space-y-6">
          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Site Configuration</h2>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1">
                  Site URL
                </label>
                <Input
                  type="url"
                  value={generalSettings.site_url}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, site_url: e.target.value }))}
                  placeholder="https://yourdomain.com"
                  leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
                />
                <p className="text-xs text-neutral-500 mt-1">
                  Used for generating gallery links in emails
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-neutral-700 mb-1">
                    Default Expiration (days)
                  </label>
                  <Input
                    type="number"
                    value={generalSettings.default_expiration_days}
                    onChange={(e) => setGeneralSettings(prev => ({ ...prev, default_expiration_days: parseInt(e.target.value) || 30 }))}
                    min="1"
                    max="365"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-neutral-700 mb-1">
                    Max File Size (MB)
                  </label>
                  <Input
                    type="number"
                    value={generalSettings.max_file_size_mb}
                    onChange={(e) => setGeneralSettings(prev => ({ ...prev, max_file_size_mb: parseInt(e.target.value) || 50 }))}
                    min="1"
                    max="500"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1">
                  Allowed File Types
                </label>
                <Input
                  type="text"
                  value={generalSettings.allowed_file_types}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, allowed_file_types: e.target.value }))}
                  placeholder="jpg,jpeg,png,gif"
                />
                <p className="text-xs text-neutral-500 mt-1">
                  Comma-separated list of file extensions
                </p>
              </div>
            </div>
          </Card>

          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Feature Toggles</h2>
            
            <div className="space-y-3">
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={generalSettings.enable_watermark}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_watermark: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Enable watermark on photos</span>
              </label>

              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={generalSettings.enable_analytics}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_analytics: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Enable analytics tracking</span>
              </label>

              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={generalSettings.enable_registration}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_registration: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Allow self-registration for admins</span>
              </label>

              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={generalSettings.maintenance_mode}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, maintenance_mode: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Enable maintenance mode</span>
              </label>
            </div>
          </Card>

          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.language')}</h2>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-2">
                  {t('settings.general.language')}
                </label>
                <select
                  value={generalSettings.default_language}
                  onChange={(e) => setGeneralSettings(prev => ({ ...prev, default_language: e.target.value }))}
                  className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                  <option value="en">English</option>
                  <option value="de">Deutsch</option>
                </select>
                <p className="text-xs text-neutral-500 mt-1">
                  Sets the default language for all gallery pages and login screens
                </p>
              </div>
            </div>

            <div className="mt-6">
              <Button
                variant="primary"
                onClick={() => saveGeneralMutation.mutate()}
                isLoading={saveGeneralMutation.isPending}
                leftIcon={<Save className="w-5 h-5" />}
              >
                {t('settings.general.saveSettings')}
              </Button>
            </div>
          </Card>
        </div>
      )}

      {/* Storage Tab */}
      {activeTab === 'storage' && storageInfo && (
        <div className="space-y-6">
          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Storage Overview</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
              <div className="bg-neutral-50 rounded-lg p-4">
                <p className="text-sm text-neutral-600">Total Used</p>
                <p className="text-2xl font-bold text-neutral-900">
                  {settingsService.formatBytes(storageInfo.total_used)}
                </p>
              </div>
              <div className="bg-neutral-50 rounded-lg p-4">
                <p className="text-sm text-neutral-600">Archive Storage</p>
                <p className="text-2xl font-bold text-neutral-900">
                  {settingsService.formatBytes(storageInfo.archive_storage)}
                </p>
              </div>
              <div className="bg-neutral-50 rounded-lg p-4">
                <p className="text-sm text-neutral-600">Storage Limit</p>
                <p className="text-2xl font-bold text-neutral-900">
                  {settingsService.formatBytes(storageInfo.storage_limit)}
                </p>
              </div>
            </div>

            <div className="mb-4">
              <div className="flex justify-between text-sm mb-1">
                <span className="text-neutral-600">Storage Usage</span>
                <span className="font-medium">
                  {Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
                </span>
              </div>
              <div className="w-full bg-neutral-200 rounded-full h-3">
                <div
                  className="bg-primary-600 h-3 rounded-full transition-all"
                  style={{ 
                    width: `${Math.min((storageInfo.total_used / storageInfo.storage_limit) * 100, 100)}%` 
                  }}
                />
              </div>
            </div>

            <div className="mt-6">
              <h3 className="text-sm font-semibold text-neutral-900 mb-3">Storage by Event</h3>
              <div className="space-y-2">
                {storageInfo.storage_by_event.slice(0, 10).map((event) => (
                  <div key={event.id} className="flex items-center justify-between py-2 border-b border-neutral-100">
                    <span className="text-sm text-neutral-700">{event.event_name}</span>
                    <span className="text-sm font-medium text-neutral-900">
                      {settingsService.formatBytes(event.size)}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          <Card padding="md">
            <div className="flex items-start gap-3">
              <Database className="w-5 h-5 text-amber-600 flex-shrink-0" />
              <div>
                <h3 className="text-sm font-semibold text-amber-900">Storage Management</h3>
                <p className="text-sm text-amber-700 mt-1">
                  Consider archiving or deleting old events to free up storage space. 
                  Archived events are compressed and use less storage than active galleries.
                </p>
              </div>
            </div>
          </Card>
        </div>
      )}

      {/* Security Tab */}
      {activeTab === 'security' && (
        <div className="space-y-6">
          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Password Settings</h2>
            
            <div className="space-y-4">
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={securitySettings.require_password}
                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, require_password: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Require password for all galleries</span>
              </label>

              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1">
                  Minimum Password Length
                </label>
                <Input
                  type="number"
                  value={securitySettings.password_min_length}
                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_min_length: parseInt(e.target.value) || 8 }))}
                  min="4"
                  max="32"
                />
              </div>
            </div>
          </Card>

          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">Session & Authentication</h2>
            
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-neutral-700 mb-1">
                    Session Timeout (minutes)
                  </label>
                  <Input
                    type="number"
                    value={securitySettings.session_timeout_minutes}
                    onChange={(e) => setSecuritySettings(prev => ({ ...prev, session_timeout_minutes: parseInt(e.target.value) || 60 }))}
                    min="5"
                    max="1440"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-neutral-700 mb-1">
                    Max Login Attempts
                  </label>
                  <Input
                    type="number"
                    value={securitySettings.max_login_attempts}
                    onChange={(e) => setSecuritySettings(prev => ({ ...prev, max_login_attempts: parseInt(e.target.value) || 5 }))}
                    min="3"
                    max="10"
                  />
                </div>
              </div>

              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={securitySettings.enable_2fa}
                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_2fa: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Enable two-factor authentication for admins</span>
              </label>
            </div>
          </Card>

          <Card padding="md">
            <h2 className="text-lg font-semibold text-neutral-900 mb-4">reCAPTCHA Settings</h2>
            
            <div className="space-y-4">
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={securitySettings.enable_recaptcha}
                  onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_recaptcha: e.target.checked }))}
                  className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
                />
                <span className="ml-2 text-sm text-neutral-700">Enable reCAPTCHA for login forms</span>
              </label>

              {securitySettings.enable_recaptcha && (
                <>
                  <div>
                    <label className="block text-sm font-medium text-neutral-700 mb-1">
                      Site Key
                    </label>
                    <Input
                      type="text"
                      value={securitySettings.recaptcha_site_key}
                      onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_site_key: e.target.value }))}
                      placeholder="Your reCAPTCHA site key"
                      leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-neutral-700 mb-1">
                      Secret Key
                    </label>
                    <Input
                      type="password"
                      value={securitySettings.recaptcha_secret_key}
                      onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_secret_key: e.target.value }))}
                      placeholder="Your reCAPTCHA secret key"
                      leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
                    />
                  </div>
                </>
              )}

              <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
                  <div className="text-sm text-blue-800">
                    <p>Get your reCAPTCHA keys from <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
                  </div>
                </div>
              </div>
            </div>

            <div className="mt-6">
              <Button
                variant="primary"
                onClick={() => saveSecurityMutation.mutate()}
                isLoading={saveSecurityMutation.isPending}
                leftIcon={<Save className="w-5 h-5" />}
              >
                Save Security Settings
              </Button>
            </div>
          </Card>
        </div>
      )}

      {/* Categories Tab */}
      {activeTab === 'categories' && (
        <div className="space-y-6">
          <Card padding="md">
            <CategoryManager />
          </Card>
          
          <Card padding="md">
            <div className="flex items-start gap-3">
              <Image className="w-5 h-5 text-blue-600 flex-shrink-0" />
              <div>
                <h3 className="text-sm font-semibold text-blue-900">About Photo Categories</h3>
                <p className="text-sm text-blue-700 mt-1">
                  Global categories are available for all events. You can also create event-specific 
                  categories when editing individual events. Categories help organize photos and 
                  allow guests to filter photos by type in the gallery view.
                </p>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};