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

interface SuspendedUserModalProps {
  user: User;
  onLogout: () => void;
  onRequestUnsuspend: (userId: string) => void;
}

const SuspendedUserModal: React.FC<SuspendedUserModalProps> = ({ user, onLogout, onRequestUnsuspend }) => {
  const [requestSent, setRequestSent] = useState(false);

  const handleRequest = () => {
    onRequestUnsuspend(user.id);
    setRequestSent(true);
  };

  return (
    <div className="fixed inset-0 bg-background flex items-center justify-center z-50 p-4">
      <div className="bg-muted rounded-lg shadow-xl w-full max-w-md text-center p-8 border border-accent">
        <BanIcon className="w-16 h-16 text-destructive mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-foreground">Account Suspended</h2>
        <p className="text-secondary mt-4">
          Your account has been temporarily suspended by an administrator.
        </p>
        <div className="mt-4 p-4 bg-background border border-accent rounded-md text-left">
          <p className="font-semibold">Reason for suspension:</p>
          <p className="text-muted-foreground">{user.suspensionReason || 'No reason provided.'}</p>
        </div>
        <div className="mt-6 flex flex-col gap-3">
            <button
              onClick={handleRequest}
              disabled={requestSent}
              className="w-full bg-primary text-primary-foreground font-bold py-2.5 px-6 rounded-full hover:opacity-90 transition-colors disabled:bg-secondary disabled:cursor-not-allowed"
            >
              {requestSent ? 'Request Sent' : 'Request Unsuspend'}
            </button>
            <button
                onClick={onLogout}
                className="flex items-center justify-center gap-2 w-full text-center py-2.5 px-6 rounded-full font-semibold text-secondary hover:bg-accent transition-colors"
            >
                <LogoutIcon className="w-5 h-5" /> Sign Out
            </button>
        </div>
         {requestSent && <p className="text-sm text-muted-foreground mt-4">An administrator has been notified of your request.</p>}
      </div>
    </div>
  );
};

export default SuspendedUserModal;