import { useState, useEffect } from 'react';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Bell, Mail, MessageSquare, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
import { getNotificationPreferences, updateNotificationPreferences, NotificationPreferences } from '@/services/userPreferenceApi';

export function NotificationPreferencesSimple() {
  const [preferences, setPreferences] = useState<NotificationPreferences>({
    emailNotificationsEnabled: true,
    pushNotificationsEnabled: true,
    inAppNotificationsEnabled: true
  });
  const [loading, setLoading] = useState(true);
  const [updating, setUpdating] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

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

  const loadPreferences = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await getNotificationPreferences();
      setPreferences(data);
    } catch (err: any) {
      console.error('[NotificationPreferences] Failed to load preferences:', err);
      setError(err.response?.data?.message || 'Failed to load notification preferences');
    } finally {
      setLoading(false);
    }
  };

  const handleToggle = async (key: keyof NotificationPreferences, value: boolean) => {
    try {
      setUpdating(key);
      setError(null);
      setSuccessMessage(null);

      const updateData = { [key]: value };
      const updated = await updateNotificationPreferences(updateData);
      
      setPreferences(updated);
      
      // Show success message
      const prefName = key === 'emailNotificationsEnabled' ? 'Email' 
        : key === 'pushNotificationsEnabled' ? 'Push' 
        : 'In-App';
      setSuccessMessage(`${prefName} notifications ${value ? 'enabled' : 'disabled'}`);
      setTimeout(() => setSuccessMessage(null), 3000);
    } catch (err: any) {
      console.error('[NotificationPreferences] Failed to update preference:', err);
      setError(err.response?.data?.message || 'Failed to update notification preference');
      // Revert the UI change
      loadPreferences();
    } finally {
      setUpdating(null);
    }
  };

  if (loading) {
    return (
      <div className="p-8 flex items-center justify-center">
        <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Success Message */}
      {successMessage && (
        <div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-md">
          <CheckCircle className="w-4 h-4 text-green-600 shrink-0" />
          <p className="text-sm text-green-800 font-medium">{successMessage}</p>
        </div>
      )}

      {/* Error Message */}
      {error && (
        <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-md">
          <AlertCircle className="w-4 h-4 text-red-600 shrink-0" />
          <p className="text-sm text-red-800 font-medium">{error}</p>
        </div>
      )}

      {/* Email Notifications */}
      <div className="flex items-center justify-between p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200 hover:border-gray-300 transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-white rounded-md shadow-sm">
            <Mail className="w-5 h-5 text-slate-600" />
          </div>
          <div>
            <Label htmlFor="email-notifications" className="text-sm font-semibold text-gray-900 cursor-pointer">
              Email Notifications
            </Label>
            <p className="text-xs text-gray-600 mt-0.5">Receive notifications via email</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {updating === 'emailNotificationsEnabled' && (
            <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
          )}
          <Switch
            id="email-notifications"
            checked={preferences.emailNotificationsEnabled}
            onCheckedChange={(checked) => handleToggle('emailNotificationsEnabled', checked)}
            disabled={updating === 'emailNotificationsEnabled'}
          />
        </div>
      </div>

      {/* Push Notifications */}
      <div className="flex items-center justify-between p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200 hover:border-gray-300 transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-white rounded-md shadow-sm">
            <Bell className="w-5 h-5 text-slate-600" />
          </div>
          <div>
            <Label htmlFor="push-notifications" className="text-sm font-semibold text-gray-900 cursor-pointer">
              Push Notifications
            </Label>
            <p className="text-xs text-gray-600 mt-0.5">Receive browser push notifications</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {updating === 'pushNotificationsEnabled' && (
            <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
          )}
          <Switch
            id="push-notifications"
            checked={preferences.pushNotificationsEnabled}
            onCheckedChange={(checked) => handleToggle('pushNotificationsEnabled', checked)}
            disabled={updating === 'pushNotificationsEnabled'}
          />
        </div>
      </div>

      {/* In-App Notifications */}
      <div className="flex items-center justify-between p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200 hover:border-gray-300 transition-colors">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-white rounded-md shadow-sm">
            <MessageSquare className="w-5 h-5 text-slate-600" />
          </div>
          <div>
            <Label htmlFor="inapp-notifications" className="text-sm font-semibold text-gray-900 cursor-pointer">
              In-App Notifications
            </Label>
            <p className="text-xs text-gray-600 mt-0.5">Show notifications within the application</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {updating === 'inAppNotificationsEnabled' && (
            <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
          )}
          <Switch
            id="inapp-notifications"
            checked={preferences.inAppNotificationsEnabled}
            onCheckedChange={(checked) => handleToggle('inAppNotificationsEnabled', checked)}
            disabled={updating === 'inAppNotificationsEnabled'}
          />
        </div>
      </div>

      <div className="pt-2 border-t border-gray-200">
        <p className="text-xs text-gray-500 text-center">
          These preferences control which notification channels you receive alerts through. 
          You'll still receive critical notifications regardless of these settings.
        </p>
      </div>
    </div>
  );
}

