import { BellRing } from 'lucide-react';
import { useEffect, useState } from 'react';

const PREF_KEY = 'pwaNotificationPreferences';
const options = [
  ['tasks', 'اعلان تسک‌ها'],
  ['comments', 'اعلان کامنت‌ها'],
  ['mentions', 'اعلان منشن‌ها'],
  ['deadlines', 'اعلان ددلاین‌ها'],
  ['system', 'اعلان‌های سیستمی'],
];

const defaults = options.reduce((state, [key]) => ({ ...state, [key]: true }), {});

export default function PwaNotificationSettings() {
  const [prefs, setPrefs] = useState(() => {
    try { return { ...defaults, ...JSON.parse(localStorage.getItem(PREF_KEY) || '{}') }; }
    catch { return defaults; }
  });

  useEffect(() => {
    localStorage.setItem(PREF_KEY, JSON.stringify(prefs));
  }, [prefs]);

  return (
    <section className="pwa-card-section">
      <div className="pwa-section-title">
        <h2>تنظیمات اعلان‌ها</h2>
      </div>
      <div className="pwa-toggle-list">
        {options.map(([key, label]) => (
          <label key={key} className="pwa-toggle-row">
            <span><BellRing size={16} /> {label}</span>
            <input type="checkbox" checked={Boolean(prefs[key])} onChange={(event) => setPrefs((current) => ({ ...current, [key]: event.target.checked }))} />
          </label>
        ))}
      </div>
    </section>
  );
}
