import React, { useState } from 'react';

export default function NotificationSettings({ server, channel, onClose, onSave }) {
  const isChannelSettings = !!channel;
  const name = channel?.name || server?.name || 'AeThex Foundation';

  const [notifSetting, setNotifSetting] = useState('all');
  const [suppressEveryone, setSuppressEveryone] = useState(false);
  const [suppressRoles, setSuppressRoles] = useState(false);
  const [muteUntil, setMuteUntil] = useState('none');
  const [mobilePush, setMobilePush] = useState(true);

  const notifOptions = [
    { id: 'all', label: 'All Messages', desc: 'Get notified for all messages' },
    { id: 'mentions', label: 'Only @mentions', desc: 'Only notify when mentioned' },
    { id: 'nothing', label: 'Nothing', desc: 'Mute all notifications' },
  ];

  if (isChannelSettings) {
    notifOptions.unshift({ id: 'default', label: 'Default', desc: 'Use server default setting' });
  }

  const muteOptions = [
    { value: 'none', label: 'Not muted' },
    { value: '15min', label: 'For 15 minutes' },
    { value: '1hour', label: 'For 1 hour' },
    { value: '8hours', label: 'For 8 hours' },
    { value: '24hours', label: 'For 24 hours' },
    { value: 'forever', label: 'Until I turn it back on' },
  ];

  const handleSave = () => {
    onSave?.({
      notifSetting,
      suppressEveryone,
      suppressRoles,
      muteUntil,
      mobilePush,
    });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="notification-settings-modal" onClick={(e) => e.stopPropagation()}>
        <div className="notif-header">
          <h2>🔔 Notification Settings</h2>
          <button className="notif-close" onClick={onClose}>✕</button>
        </div>

        <div className="notif-target">
          <span className="target-icon">{isChannelSettings ? '#' : '🏠'}</span>
          <span className="target-name">{name}</span>
        </div>

        <div className="notif-content">
          <div className="notif-section">
            <h3>Notification Frequency</h3>
            <div className="notif-options">
              {notifOptions.map(opt => (
                <label
                  key={opt.id}
                  className={`notif-option ${notifSetting === opt.id ? 'selected' : ''}`}
                >
                  <input
                    type="radio"
                    name="notifSetting"
                    value={opt.id}
                    checked={notifSetting === opt.id}
                    onChange={() => setNotifSetting(opt.id)}
                  />
                  <div className="option-content">
                    <span className="option-label">{opt.label}</span>
                    <span className="option-desc">{opt.desc}</span>
                  </div>
                </label>
              ))}
            </div>
          </div>

          <div className="notif-section">
            <h3>Mute {isChannelSettings ? 'Channel' : 'Server'}</h3>
            <select
              className="mute-select"
              value={muteUntil}
              onChange={(e) => setMuteUntil(e.target.value)}
            >
              {muteOptions.map(opt => (
                <option key={opt.value} value={opt.value}>{opt.label}</option>
              ))}
            </select>
          </div>

          <div className="notif-section">
            <h3>Suppress</h3>
            <div className="suppress-options">
              <label className="suppress-option">
                <input
                  type="checkbox"
                  checked={suppressEveryone}
                  onChange={(e) => setSuppressEveryone(e.target.checked)}
                />
                <span>Suppress @everyone and @here</span>
              </label>
              <label className="suppress-option">
                <input
                  type="checkbox"
                  checked={suppressRoles}
                  onChange={(e) => setSuppressRoles(e.target.checked)}
                />
                <span>Suppress All Role @mentions</span>
              </label>
            </div>
          </div>

          <div className="notif-section">
            <div className="toggle-row">
              <div className="toggle-info">
                <h3>Mobile Push Notifications</h3>
                <p>Receive push notifications on mobile</p>
              </div>
              <label className="toggle-switch">
                <input
                  type="checkbox"
                  checked={mobilePush}
                  onChange={(e) => setMobilePush(e.target.checked)}
                />
                <span className="toggle-slider"></span>
              </label>
            </div>
          </div>

          {!isChannelSettings && (
            <div className="notif-section channel-overrides">
              <h3>Channel Overrides</h3>
              <p className="override-hint">You can customize notifications for individual channels</p>
              <div className="override-list">
                <div className="override-item">
                  <span>#announcements</span>
                  <span className="override-value">All Messages</span>
                </div>
                <div className="override-item">
                  <span>#spam</span>
                  <span className="override-value">Muted</span>
                </div>
              </div>
              <button className="add-override-btn">+ Add Override</button>
            </div>
          )}
        </div>

        <div className="notif-footer">
          <button className="cancel-btn" onClick={onClose}>Cancel</button>
          <button className="save-btn" onClick={handleSave}>Done</button>
        </div>
      </div>
    </div>
  );
}
