import { Bell, BellOff, BellRing } from 'lucide-react';
import { useNotifications } from '../hooks/useNotifications';

interface NotificationSettingsProps {
  compact?: boolean;
}

export function NotificationSettings({ compact = false }: NotificationSettingsProps) {
  const { permission, requestPermission, isEnabled, setEnabled } = useNotifications();

  const handleToggle = async () => {
    if (permission === 'unsupported') {
      return;
    }

    if (!isEnabled) {
      // Enabling - request permission if needed
      if (permission !== 'granted') {
        const granted = await requestPermission();
        if (granted) {
          setEnabled(true);
        }
      } else {
        setEnabled(true);
      }
    } else {
      // Disabling
      setEnabled(false);
    }
  };

  if (permission === 'unsupported') {
    return null;
  }

  const getIcon = () => {
    if (!isEnabled) return <BellOff className="w-4 h-4" />;
    if (permission === 'denied') return <BellOff className="w-4 h-4 text-red-400" />;
    return <BellRing className="w-4 h-4" />;
  };

  const getStatus = () => {
    if (permission === 'denied') return 'Blocked';
    if (!isEnabled) return 'Off';
    return 'On';
  };

  if (compact) {
    return (
      <button
        onClick={handleToggle}
        className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors ${
          isEnabled && permission === 'granted'
            ? 'bg-primary-500/20 text-primary-400 hover:bg-primary-500/30'
            : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
        }`}
        title={`Desktop notifications: ${getStatus()}`}
      >
        {getIcon()}
        <span className="hidden sm:inline">{getStatus()}</span>
      </button>
    );
  }

  return (
    <div className="flex items-center justify-between p-3 bg-dark-750 rounded-lg">
      <div className="flex items-center gap-3">
        <div className={`p-2 rounded-lg ${
          isEnabled && permission === 'granted'
            ? 'bg-primary-500/20 text-primary-400'
            : 'bg-dark-700 text-dark-400'
        }`}>
          <Bell className="w-5 h-5" />
        </div>
        <div>
          <div className="text-sm font-medium text-white">Desktop Notifications</div>
          <div className="text-xs text-dark-400">
            {permission === 'denied'
              ? 'Blocked by browser - enable in browser settings'
              : isEnabled
                ? 'Get notified when new best solutions are found'
                : 'Enable to receive optimization updates'}
          </div>
        </div>
      </div>
      <button
        onClick={handleToggle}
        disabled={permission === 'denied'}
        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
          isEnabled && permission === 'granted'
            ? 'bg-primary-500'
            : permission === 'denied'
              ? 'bg-dark-600 cursor-not-allowed'
              : 'bg-dark-600'
        }`}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
            isEnabled && permission === 'granted' ? 'translate-x-6' : 'translate-x-1'
          }`}
        />
      </button>
    </div>
  );
}

export default NotificationSettings;