veza/apps/web/src/components/admin/modals/BanUserModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Calendar, ShieldBan } from 'lucide-react';

interface BanUserModalProps {
  username: string;
  onClose: () => void;
  onConfirm: (reason: string, details: string, duration: string) => void;
}

export const BanUserModal: React.FC<BanUserModalProps> = ({ username, onClose, onConfirm }) => {
  const [reason, setReason] = useState('Terms of Service Violation');
  const [details, setDetails] = useState('');
  const [isPermanent, setIsPermanent] = useState(false);
  const [duration, setDuration] = useState('7'); // days

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        
        <div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
          <h3 className="font-bold text-kodo-red flex items-center gap-2">
            <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-6 space-y-4">
            <p className="text-gray-300 text-sm">
                You are about to suspend <span className="font-bold text-white">{username}</span>. This will restrict their access to the platform.
            </p>

            <div>
                <label className="block text-xs font-bold text-gray-400 uppercase mb-2">Reason</label>
                <select 
                    className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
                    value={reason}
                    onChange={(e) => setReason(e.target.value)}
                >
                    <option>Terms of Service Violation</option>
                    <option>Spam or Bot Activity</option>
                    <option>Harassment / Hate Speech</option>
                    <option>Copyright Infringement</option>
                    <option>Fraudulent Activity</option>
                    <option>Other</option>
                </select>
            </div>

            <div>
                <label className="block text-xs font-bold text-gray-400 uppercase mb-2">Details (Internal Note)</label>
                <textarea 
                    className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white focus:border-kodo-red outline-none text-sm resize-none h-24"
                    placeholder="Provide context for this ban..."
                    value={details}
                    onChange={(e) => setDetails(e.target.value)}
                />
            </div>

            <div className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel">
                <div className="flex items-center gap-3">
                    <Calendar className="w-5 h-5 text-gray-400" />
                    <div>
                        <div className="text-sm font-bold text-white">Ban Duration</div>
                        <div className="text-xs text-gray-400">{isPermanent ? 'Permanent Ban' : `${duration} Days`}</div>
                    </div>
                </div>
                <div className="flex items-center gap-2">
                    <span className={`text-xs ${!isPermanent ? 'text-white' : 'text-gray-500'}`}>Temp</span>
                    <div 
                        onClick={() => setIsPermanent(!isPermanent)}
                        className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-gray-600'}`}
                    >
                        <div className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}></div>
                    </div>
                    <span className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-gray-500'}`}>Perm</span>
                </div>
            </div>

            {!isPermanent && (
                <div>
                    <label className="block text-xs font-bold text-gray-400 uppercase mb-2">Days</label>
                    <input 
                        type="number" 
                        min="1"
                        className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
                        value={duration}
                        onChange={(e) => setDuration(e.target.value)}
                    />
                </div>
            )}
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
            <Button variant="ghost" onClick={onClose}>Cancel</Button>
            <Button variant="primary" className="bg-red-600 hover:bg-red-700 border-red-500 text-white" onClick={() => onConfirm(reason, details, isPermanent ? 'Permanent' : `${duration} days`)}>
                Suspend User
            </Button>
        </div>
      </div>
    </div>
  );
};