import React, { useState } from 'react';

// Moderation action modal - for kicks, bans, timeouts
export default function ModerationModal({ type, user, onSubmit, onClose }) {
  const [reason, setReason] = useState('');
  const [deleteMessages, setDeleteMessages] = useState('none');
  const [duration, setDuration] = useState('1h');

  const typeConfig = {
    kick: {
      title: 'Kick Member',
      icon: '👢',
      action: 'Kick',
      color: '#faa61a',
      description: `Are you sure you want to kick ${user?.name}? They will be able to rejoin with a new invite.`,
    },
    ban: {
      title: 'Ban Member',
      icon: '🔨',
      action: 'Ban',
      color: '#ed4245',
      description: `Are you sure you want to ban ${user?.name}? They will not be able to rejoin unless unbanned.`,
      showDeleteMessages: true,
    },
    timeout: {
      title: 'Timeout Member',
      icon: '⏰',
      action: 'Timeout',
      color: '#faa61a',
      description: `Temporarily mute ${user?.name}. They won't be able to send messages, react, or join voice.`,
      showDuration: true,
    },
    warn: {
      title: 'Warn Member',
      icon: '⚠️',
      action: 'Warn',
      color: '#faa61a',
      description: `Send a warning to ${user?.name}. This will be logged in the audit log.`,
    },
  };

  const config = typeConfig[type] || typeConfig.kick;

  const durations = [
    { value: '60s', label: '60 seconds' },
    { value: '5m', label: '5 minutes' },
    { value: '10m', label: '10 minutes' },
    { value: '1h', label: '1 hour' },
    { value: '1d', label: '1 day' },
    { value: '1w', label: '1 week' },
  ];

  const deleteOptions = [
    { value: 'none', label: "Don't delete any" },
    { value: '1h', label: 'Previous hour' },
    { value: '24h', label: 'Previous 24 hours' },
    { value: '7d', label: 'Previous 7 days' },
  ];

  const handleSubmit = () => {
    onSubmit?.({
      type,
      userId: user?.id,
      reason,
      deleteMessages: config.showDeleteMessages ? deleteMessages : undefined,
      duration: config.showDuration ? duration : undefined,
    });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="moderation-modal" onClick={(e) => e.stopPropagation()}>
        <div className="mod-header" style={{ borderColor: config.color }}>
          <span className="mod-icon">{config.icon}</span>
          <h2>{config.title}</h2>
        </div>

        <div className="mod-content">
          <div className="mod-user">
            <div 
              className="mod-user-avatar"
              style={user?.color ? { background: user.color } : undefined}
            >
              {user?.avatar || user?.name?.[0]}
            </div>
            <div className="mod-user-info">
              <span className="mod-user-name">{user?.name}</span>
              {user?.tag && <span className="mod-user-tag">{user.tag}</span>}
            </div>
          </div>

          <p className="mod-description">{config.description}</p>

          {config.showDuration && (
            <div className="mod-field">
              <label>Duration</label>
              <select 
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
                className="mod-select"
              >
                {durations.map(d => (
                  <option key={d.value} value={d.value}>{d.label}</option>
                ))}
              </select>
            </div>
          )}

          {config.showDeleteMessages && (
            <div className="mod-field">
              <label>Delete message history</label>
              <select 
                value={deleteMessages}
                onChange={(e) => setDeleteMessages(e.target.value)}
                className="mod-select"
              >
                {deleteOptions.map(d => (
                  <option key={d.value} value={d.value}>{d.label}</option>
                ))}
              </select>
            </div>
          )}

          <div className="mod-field">
            <label>Reason (optional)</label>
            <textarea
              placeholder="Enter a reason..."
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              rows={3}
            />
            <span className="field-hint">This will be recorded in the audit log</span>
          </div>
        </div>

        <div className="mod-footer">
          <button className="cancel-btn" onClick={onClose}>Cancel</button>
          <button 
            className="action-btn"
            style={{ background: config.color }}
            onClick={handleSubmit}
          >
            {config.action}
          </button>
        </div>
      </div>
    </div>
  );
}

// User notes modal
export function UserNotesModal({ user, onSave, onClose }) {
  const [note, setNote] = useState(user?.note || '');

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="notes-modal" onClick={(e) => e.stopPropagation()}>
        <div className="notes-header">
          <h2>Note about {user?.name}</h2>
          <button className="modal-close" onClick={onClose}>✕</button>
        </div>

        <div className="notes-content">
          <textarea
            placeholder="Click to add a note..."
            value={note}
            onChange={(e) => setNote(e.target.value)}
            rows={5}
          />
          <span className="notes-hint">Only you can see this note</span>
        </div>

        <div className="notes-footer">
          <button className="cancel-btn" onClick={onClose}>Cancel</button>
          <button 
            className="save-btn"
            onClick={() => onSave?.(note)}
          >
            Save Note
          </button>
        </div>
      </div>
    </div>
  );
}

// Report user modal
export function ReportModal({ user, message, onSubmit, onClose }) {
  const [category, setCategory] = useState('');
  const [details, setDetails] = useState('');

  const categories = [
    { value: 'harassment', label: 'Harassment or Bullying' },
    { value: 'spam', label: 'Spam or Scam' },
    { value: 'hate', label: 'Hate Speech or Discrimination' },
    { value: 'nsfw', label: 'Inappropriate Content' },
    { value: 'impersonation', label: 'Impersonation' },
    { value: 'threats', label: 'Threats or Violence' },
    { value: 'other', label: 'Other' },
  ];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="report-modal" onClick={(e) => e.stopPropagation()}>
        <div className="report-header">
          <span className="report-icon">🚩</span>
          <h2>Report {message ? 'Message' : 'User'}</h2>
        </div>

        <div className="report-content">
          {user && (
            <div className="report-target">
              <div 
                className="target-avatar"
                style={user.color ? { background: user.color } : undefined}
              >
                {user.avatar || user.name?.[0]}
              </div>
              <span className="target-name">{user.name}</span>
            </div>
          )}

          {message && (
            <div className="reported-message">
              <div className="reported-content">{message.text}</div>
            </div>
          )}

          <div className="report-field">
            <label>What's the issue?</label>
            <div className="category-options">
              {categories.map(cat => (
                <button
                  key={cat.value}
                  className={`category-btn ${category === cat.value ? 'selected' : ''}`}
                  onClick={() => setCategory(cat.value)}
                >
                  {cat.label}
                </button>
              ))}
            </div>
          </div>

          <div className="report-field">
            <label>Additional details (optional)</label>
            <textarea
              placeholder="Provide more context about this issue..."
              value={details}
              onChange={(e) => setDetails(e.target.value)}
              rows={3}
            />
          </div>

          <div className="report-notice">
            <span className="notice-icon">ℹ️</span>
            <p>Reports are confidential. The reported user won't know who reported them.</p>
          </div>
        </div>

        <div className="report-footer">
          <button className="cancel-btn" onClick={onClose}>Cancel</button>
          <button 
            className="submit-btn"
            onClick={() => onSubmit?.({ category, details })}
            disabled={!category}
          >
            Submit Report
          </button>
        </div>
      </div>
    </div>
  );
}
