import React, { useState } from 'react';
import { User } from '../types';
import { XIcon } from './icons/XIcon';
import { BanIcon } from './icons/BanIcon';
import { UserMinusIcon } from './icons/UserMinusIcon';
import { UserXIcon } from './icons/UserXIcon';

interface UserManagementModalProps {
  user: User;
  onClose: () => void;
  onChangeRole: (userId: string, role: 'user' | 'moderator') => void;
  onSuspend: (userId: string, reason: string) => void;
  onUnsuspend: (userId: string) => void;
  onDeleteTemp: (userId: string) => void;
  onRestore: (userId: string) => void;
  onDeletePerm: (userId: string) => void;
}

const UserManagementModal: React.FC<UserManagementModalProps> = (props) => {
    const { user, onClose, onChangeRole, onSuspend, onUnsuspend, onDeleteTemp, onRestore, onDeletePerm } = props;
    const [suspensionReason, setSuspensionReason] = useState('');
    const [reasonError, setReasonError] = useState('');

    const handleSuspend = () => {
        if (!suspensionReason.trim()) {
            setReasonError('A reason is required to suspend a user.');
            return;
        }
        setReasonError('');
        onSuspend(user.id, suspensionReason);
        onClose();
    };
    
    const handlePermDelete = () => {
        if (window.confirm(`PERMANENT ACTION: Are you sure you want to permanently delete ${user.username}? This will also delete all their posts and cannot be undone.`)) {
            onDeletePerm(user.id);
            onClose();
        }
    }

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-background rounded-lg shadow-xl w-full max-w-lg border border-accent">
        <div className="flex justify-between items-center p-4 border-b border-muted">
          <div className="flex items-center gap-3">
            <img src={user.avatar} alt={user.username} className="w-10 h-10 rounded-full" />
            <div>
              <h2 className="text-xl font-bold">Manage {user.username}</h2>
              <p className={`text-sm font-semibold capitalize ${user.status !== 'active' ? 'text-destructive' : 'text-muted-foreground'}`}>{user.status}</p>
            </div>
          </div>
          <button onClick={onClose} className="text-secondary hover:text-foreground"><XIcon className="w-6 h-6"/></button>
        </div>
        
        <div className="p-6 space-y-6">
          {/* Role Management */}
          <div className="flex justify-between items-center">
            <p className="font-semibold">Role</p>
            <select
                value={user.role}
                onChange={(e) => onChangeRole(user.id, e.target.value as 'user' | 'moderator')}
                className="bg-muted border border-accent rounded-md px-3 py-1 text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
            >
                <option value="user">User</option>
                <option value="moderator">Moderator</option>
            </select>
          </div>

          {/* Suspension Management */}
          {user.status === 'active' && (
            <div className="space-y-2 p-3 bg-muted rounded-lg">
                <p className="font-semibold">Suspend User</p>
                <textarea 
                    placeholder="Enter reason for suspension..." 
                    value={suspensionReason}
                    onChange={e => { setSuspensionReason(e.target.value); setReasonError(''); }}
                    className="w-full p-2 border border-accent rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-background"
                    rows={2}
                />
                 {reasonError && <p className="text-xs text-destructive">{reasonError}</p>}
                <button onClick={handleSuspend} className="flex items-center justify-center gap-2 w-full bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 transition-colors">
                    <BanIcon className="w-5 h-5"/> Suspend Temporarily
                </button>
            </div>
          )}

          {user.status === 'suspended' && (
             <button onClick={() => { onUnsuspend(user.id); onClose(); }} className="w-full bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
                Unsuspend User
             </button>
          )}

           {/* Deletion Management */}
           <div className="space-y-3 p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
                <p className="font-semibold text-destructive">Danger Zone</p>
                {user.status !== 'deleted' ? (
                    <button onClick={() => { onDeleteTemp(user.id); onClose(); }} className="flex items-center justify-center gap-2 w-full bg-destructive text-white font-bold py-2 px-4 rounded-md hover:opacity-90 transition-colors">
                       <UserMinusIcon className="w-5 h-5" /> Delete Temporarily
                    </button>
                ) : (
                    <button onClick={() => { onRestore(user.id); onClose(); }} className="flex items-center justify-center gap-2 w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
                        Restore User Account
                    </button>
                )}

                <button onClick={handlePermDelete} className="flex items-center justify-center gap-2 w-full border-2 border-destructive text-destructive font-bold py-2 px-4 rounded-md hover:bg-destructive/10 transition-colors">
                    <UserXIcon className="w-5 h-5" /> Delete Permanently
                </button>
           </div>

        </div>
      </div>
    </div>
  );
};

export default UserManagementModal;