import { BellPlus } from 'lucide-react';
import { useMemo, useState } from 'react';
import { usePwaNotification } from './PwaNotificationProvider';

const labels = {
  unsupported: 'پشتیبانی نمی‌شود',
  default: 'فعال نشده',
  granted: 'فعال است',
  denied: 'توسط مرورگر مسدود شده',
};

export default function PwaPushNotificationStatus({ pushReady: _pushReady = false }) {
  const { notify } = usePwaNotification();
  const supported = typeof window !== 'undefined' && 'Notification' in window;
  const [permission, setPermission] = useState(() => supported ? Notification.permission : 'unsupported');
  const status = useMemo(() => supported ? permission : 'unsupported', [permission, supported]);

  const requestPermission = async () => {
    if (!supported) return;
    const result = await Notification.requestPermission();
    setPermission(result);
    notify({
      tone: result === 'granted' ? 'success' : 'info',
      title: 'اعلان گوشی',
      message: result === 'granted' ? 'مجوز اعلان گوشی فعال شد.' : 'مجوز اعلان گوشی فعال نشد.',
    });
  };

  return (
    <section className="pwa-card-section">
      <div className="pwa-section-title">
        <h2>اعلان گوشی</h2>
        <span>{labels[status]}</span>
      </div>
      {supported && permission !== 'granted' && permission !== 'denied' && (
        <button type="button" className="pwa-profile-action" onClick={requestPermission}>
          <BellPlus size={17} /> فعال‌سازی اعلان گوشی
        </button>
      )}
    </section>
  );
}
