'use client';

import { usePushNotifications } from '@/hooks/usePushNotifications';
import { Bell, BellOff } from 'lucide-react';

export default function NotificationSettings() {
  const { permission, isSubscribed, isLoading, error, subscribe, unsubscribe } =
    usePushNotifications();

  const handleToggle = async () => {
    if (isSubscribed) {
      await unsubscribe();
    } else {
      await subscribe();
    }
  };

  // Don't show if notifications aren't supported
  if (!('Notification' in window) || !('serviceWorker' in navigator)) {
    return null;
  }

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
            {isSubscribed ? <Bell className="w-5 h-5" /> : <BellOff className="w-5 h-5" />}
            Push Notifications
          </h3>
          <p className="text-sm text-gray-600 mt-1">
            Get notified when someone adds items, shares lists, or invites you to collaborate
          </p>

          {permission === 'denied' && (
            <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
              <p className="text-sm text-red-800">
                Notifications are blocked. Please enable them in your browser settings.
              </p>
            </div>
          )}

          {error && (
            <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-md">
              <p className="text-sm text-red-800">{error}</p>
            </div>
          )}

          {isSubscribed && (
            <div className="mt-3 p-3 bg-green-50 border border-green-200 rounded-md">
              <p className="text-sm text-green-800">
                ✓ You'll receive notifications on this device
              </p>
            </div>
          )}
        </div>

        <button
          onClick={handleToggle}
          disabled={isLoading || permission === 'denied'}
          className={`ml-4 px-4 py-2 rounded-md font-medium transition-colors ${
            isSubscribed
              ? 'bg-gray-200 text-gray-700 hover:bg-gray-300'
              : 'bg-blue-600 text-white hover:bg-blue-700'
          } disabled:opacity-50 disabled:cursor-not-allowed`}
        >
          {isLoading ? 'Loading...' : isSubscribed ? 'Disable' : 'Enable'}
        </button>
      </div>

      <div className="mt-4 text-xs text-gray-500">
        <p>💡 Tip: Install this app to your home screen for the best notification experience</p>
      </div>
    </div>
  );
}