import React, { useState } from 'react';

const autoModRules = [
  { 
    id: 'profanity', 
    name: 'Block Profanity', 
    description: 'Automatically block common profane words',
    icon: '🤬',
    severity: 'high'
  },
  { 
    id: 'spam', 
    name: 'Block Spam', 
    description: 'Prevent repeated messages, excessive mentions, and invite links',
    icon: '📧',
    severity: 'medium'
  },
  { 
    id: 'links', 
    name: 'Block Links', 
    description: 'Block messages containing links (with allowlist)',
    icon: '🔗',
    severity: 'low'
  },
  { 
    id: 'mentions', 
    name: 'Limit Mentions', 
    description: 'Block messages with excessive @mentions',
    icon: '@',
    severity: 'medium'
  },
  { 
    id: 'caps', 
    name: 'Block Excessive Caps', 
    description: 'Block messages that are mostly uppercase',
    icon: '🔠',
    severity: 'low'
  },
  { 
    id: 'attachments', 
    name: 'Block Attachments', 
    description: 'Restrict file attachments in messages',
    icon: '📎',
    severity: 'low'
  },
];

const defaultActions = [
  { id: 'delete', label: 'Delete Message', icon: '🗑️' },
  { id: 'alert', label: 'Send Alert to Channel', icon: '⚠️' },
  { id: 'timeout', label: 'Timeout Member', icon: '⏰' },
  { id: 'log', label: 'Log to Mod Channel', icon: '📝' },
];

export default function AutoModSettings({ onSave, onClose }) {
  const [rules, setRules] = useState({
    profanity: { enabled: true, action: 'delete' },
    spam: { enabled: true, action: 'delete' },
    links: { enabled: false, action: 'delete', allowlist: [] },
    mentions: { enabled: true, action: 'alert', limit: 5 },
    caps: { enabled: false, action: 'delete', threshold: 70 },
    attachments: { enabled: false, action: 'delete' },
  });
  
  const [customWords, setCustomWords] = useState(['badword1', 'badword2']);
  const [allowedLinks, setAllowedLinks] = useState(['youtube.com', 'twitter.com']);
  const [logChannel, setLogChannel] = useState('mod-logs');
  const [activeRule, setActiveRule] = useState(null);

  const toggleRule = (ruleId) => {
    setRules(prev => ({
      ...prev,
      [ruleId]: { ...prev[ruleId], enabled: !prev[ruleId]?.enabled }
    }));
  };

  const updateRuleAction = (ruleId, action) => {
    setRules(prev => ({
      ...prev,
      [ruleId]: { ...prev[ruleId], action }
    }));
  };

  return (
    <div className="automod-settings">
      <div className="automod-header">
        <h2>🤖 AutoMod</h2>
        <p className="automod-subtitle">Automatically moderate your server with configurable rules</p>
        <button className="automod-close" onClick={onClose}>✕</button>
      </div>

      <div className="automod-content">
        <section className="automod-section">
          <h3>Moderation Rules</h3>
          <div className="rules-list">
            {autoModRules.map(rule => (
              <div 
                key={rule.id} 
                className={`rule-card ${rules[rule.id]?.enabled ? 'enabled' : ''}`}
              >
                <div className="rule-main">
                  <div className="rule-toggle">
                    <input
                      type="checkbox"
                      checked={rules[rule.id]?.enabled || false}
                      onChange={() => toggleRule(rule.id)}
                    />
                  </div>
                  <div className="rule-icon">{rule.icon}</div>
                  <div className="rule-info">
                    <h4>{rule.name}</h4>
                    <p>{rule.description}</p>
                  </div>
                  <div className={`severity-badge ${rule.severity}`}>
                    {rule.severity}
                  </div>
                  <button 
                    className="configure-btn"
                    onClick={() => setActiveRule(activeRule === rule.id ? null : rule.id)}
                  >
                    {activeRule === rule.id ? '▼' : '▶'}
                  </button>
                </div>
                
                {activeRule === rule.id && (
                  <div className="rule-config">
                    <div className="config-field">
                      <label>Action when triggered</label>
                      <div className="action-options">
                        {defaultActions.map(action => (
                          <button
                            key={action.id}
                            className={`action-btn ${rules[rule.id]?.action === action.id ? 'active' : ''}`}
                            onClick={() => updateRuleAction(rule.id, action.id)}
                          >
                            <span className="action-icon">{action.icon}</span>
                            <span>{action.label}</span>
                          </button>
                        ))}
                      </div>
                    </div>

                    {rule.id === 'mentions' && (
                      <div className="config-field">
                        <label>Maximum mentions per message</label>
                        <input
                          type="number"
                          min="1"
                          max="20"
                          value={rules.mentions?.limit || 5}
                          onChange={(e) => setRules(prev => ({
                            ...prev,
                            mentions: { ...prev.mentions, limit: Number(e.target.value) }
                          }))}
                          className="number-input"
                        />
                      </div>
                    )}

                    {rule.id === 'caps' && (
                      <div className="config-field">
                        <label>Caps threshold (%)</label>
                        <input
                          type="range"
                          min="50"
                          max="100"
                          value={rules.caps?.threshold || 70}
                          onChange={(e) => setRules(prev => ({
                            ...prev,
                            caps: { ...prev.caps, threshold: Number(e.target.value) }
                          }))}
                        />
                        <span>{rules.caps?.threshold || 70}%</span>
                      </div>
                    )}

                    {rule.id === 'links' && (
                      <div className="config-field">
                        <label>Allowed Domains</label>
                        <div className="tag-list">
                          {allowedLinks.map((link, idx) => (
                            <span key={idx} className="tag">
                              {link}
                              <button onClick={() => setAllowedLinks(prev => prev.filter((_, i) => i !== idx))}>✕</button>
                            </span>
                          ))}
                        </div>
                        <input
                          type="text"
                          placeholder="Add domain..."
                          onKeyPress={(e) => {
                            if (e.key === 'Enter' && e.target.value) {
                              setAllowedLinks(prev => [...prev, e.target.value]);
                              e.target.value = '';
                            }
                          }}
                        />
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        <section className="automod-section">
          <h3>Custom Blocked Words</h3>
          <p className="section-description">Add your own words to block in messages</p>
          <div className="custom-words">
            <div className="tag-list">
              {customWords.map((word, idx) => (
                <span key={idx} className="tag blocked">
                  {word}
                  <button onClick={() => setCustomWords(prev => prev.filter((_, i) => i !== idx))}>✕</button>
                </span>
              ))}
            </div>
            <input
              type="text"
              placeholder="Add word to block..."
              onKeyPress={(e) => {
                if (e.key === 'Enter' && e.target.value) {
                  setCustomWords(prev => [...prev, e.target.value.toLowerCase()]);
                  e.target.value = '';
                }
              }}
            />
          </div>
        </section>

        <section className="automod-section">
          <h3>Log Channel</h3>
          <p className="section-description">Where to send AutoMod logs</p>
          <select 
            value={logChannel}
            onChange={(e) => setLogChannel(e.target.value)}
            className="channel-select"
          >
            <option value="">None</option>
            <option value="mod-logs"># mod-logs</option>
            <option value="admin"># admin</option>
            <option value="bot-logs"># bot-logs</option>
          </select>
        </section>
      </div>

      <div className="automod-footer">
        <button className="cancel-btn" onClick={onClose}>Cancel</button>
        <button 
          className="save-btn"
          onClick={() => onSave?.({ rules, customWords, allowedLinks, logChannel })}
        >
          Save Changes
        </button>
      </div>
    </div>
  );
}
