import React, { useState } from 'react';

const mockBans = [
  { id: 1, user: { name: 'SpamBot_123', tag: '#0000', avatar: 'S' }, reason: 'Spamming invite links', bannedBy: 'Trevor', bannedAt: '2025-12-15T14:30:00' },
  { id: 2, user: { name: 'ToxicUser', tag: '#6666', avatar: 'T' }, reason: 'Harassment and hate speech', bannedBy: 'Sarah', bannedAt: '2025-11-20T09:15:00' },
  { id: 3, user: { name: 'RaidLeader', tag: '#9999', avatar: 'R' }, reason: 'Organizing raid against server', bannedBy: 'Trevor', bannedAt: '2025-10-05T18:45:00' },
  { id: 4, user: { name: 'ScammerX', tag: '#1111', avatar: 'X' }, reason: 'Attempting to scam members', bannedBy: 'Sarah', bannedAt: '2025-09-12T11:00:00' },
  { id: 5, user: { name: 'BadActor', tag: '#4321', avatar: 'B' }, reason: 'No reason given', bannedBy: 'Trevor', bannedAt: '2025-08-01T16:20:00' },
];

export default function BanList({ onClose }) {
  const [bans, setBans] = useState(mockBans);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedBan, setSelectedBan] = useState(null);
  const [showRevokeConfirm, setShowRevokeConfirm] = useState(false);

  const filteredBans = bans.filter(ban =>
    ban.user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    ban.reason.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  };

  const handleRevoke = (banId) => {
    setBans(prev => prev.filter(b => b.id !== banId));
    setShowRevokeConfirm(false);
    setSelectedBan(null);
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="ban-list-modal" onClick={(e) => e.stopPropagation()}>
        <div className="ban-list-header">
          <h2>🚫 Server Bans</h2>
          <button className="ban-list-close" onClick={onClose}>✕</button>
        </div>

        <div className="ban-list-search">
          <input
            type="text"
            placeholder="Search bans..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        <div className="ban-list-content">
          {filteredBans.length === 0 ? (
            <div className="no-bans">
              <span className="no-bans-icon">✨</span>
              <p>No bans found</p>
              <span className="no-bans-hint">This server has no banned users</span>
            </div>
          ) : (
            <>
              <div className="ban-count">{filteredBans.length} banned user{filteredBans.length !== 1 ? 's' : ''}</div>
              {filteredBans.map(ban => (
                <div
                  key={ban.id}
                  className={`ban-item ${selectedBan === ban.id ? 'selected' : ''}`}
                  onClick={() => setSelectedBan(selectedBan === ban.id ? null : ban.id)}
                >
                  <div className="ban-user-info">
                    <div className="ban-avatar">{ban.user.avatar}</div>
                    <div className="ban-user-details">
                      <div className="ban-username">
                        {ban.user.name}<span className="ban-tag">{ban.user.tag}</span>
                      </div>
                      <div className="ban-reason">{ban.reason}</div>
                    </div>
                  </div>

                  <div className="ban-meta">
                    <div className="ban-date">{formatDate(ban.bannedAt)}</div>
                    <div className="ban-by">by {ban.bannedBy}</div>
                  </div>

                  {selectedBan === ban.id && (
                    <div className="ban-actions">
                      <button
                        className="revoke-ban-btn"
                        onClick={(e) => {
                          e.stopPropagation();
                          setShowRevokeConfirm(true);
                        }}
                      >
                        Revoke Ban
                      </button>
                    </div>
                  )}
                </div>
              ))}
            </>
          )}
        </div>

        {showRevokeConfirm && selectedBan && (
          <div className="revoke-confirm-overlay" onClick={() => setShowRevokeConfirm(false)}>
            <div className="revoke-confirm-modal" onClick={(e) => e.stopPropagation()}>
              <h3>Revoke Ban</h3>
              <p>
                Are you sure you want to unban{' '}
                <strong>{bans.find(b => b.id === selectedBan)?.user.name}</strong>?
              </p>
              <p className="revoke-warning">They will be able to rejoin the server with an invite.</p>
              <div className="revoke-actions">
                <button className="cancel-btn" onClick={() => setShowRevokeConfirm(false)}>
                  Cancel
                </button>
                <button className="confirm-revoke-btn" onClick={() => handleRevoke(selectedBan)}>
                  Revoke Ban
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
