import React, { useState, useEffect } from "react";
import { userAPI } from "../services/api";
import { User } from "../types";

interface BanUserModalProps {
  show: boolean;
  onHide: () => void;
  user: User;
  onBanComplete: (updatedUser: User) => void;
}

const BanUserModal: React.FC<BanUserModalProps> = ({
  show,
  onHide,
  user,
  onBanComplete,
}) => {
  const [processing, setProcessing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [reason, setReason] = useState("");
  const [success, setSuccess] = useState(false);
  const [updatedUser, setUpdatedUser] = useState<User | null>(null);

  const handleBan = async () => {
    if (!reason.trim()) {
      setError("Please provide a reason for banning this user");
      return;
    }

    try {
      setProcessing(true);
      setError(null);

      const response = await userAPI.adminBanUser(user.id, reason.trim());

      // Store updated user data for later callback
      setUpdatedUser(response.data.user);

      // Show success confirmation
      setSuccess(true);
    } catch (error: any) {
      setError(error.response?.data?.error || "Failed to ban user");
    } finally {
      setProcessing(false);
    }
  };

  const handleClose = () => {
    // Call parent callback with updated user data if we have it
    if (updatedUser) {
      onBanComplete(updatedUser);
    }

    // Reset all states when closing
    setProcessing(false);
    setError(null);
    setReason("");
    setSuccess(false);
    setUpdatedUser(null);
    onHide();
  };

  useEffect(() => {
    if (show) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }

    return () => {
      document.body.style.overflow = "unset";
    };
  }, [show]);

  if (!show) return null;

  return (
    <div
      className="modal d-block"
      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
    >
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              {success
                ? "User Banned"
                : `Ban User ${user.firstName} ${user.lastName}`}
            </h5>
            <button
              type="button"
              className="btn-close"
              onClick={handleClose}
              disabled={processing}
              aria-label="Close"
            ></button>
          </div>
          <div className="modal-body">
            {success ? (
              <div className="text-center py-4">
                <div className="mb-4">
                  <i
                    className="bi bi-check-circle-fill text-success"
                    style={{ fontSize: "4rem" }}
                  ></i>
                </div>
                <h3 className="text-success mb-3">User Banned</h3>
                <div className="alert alert-info">
                  <p className="mb-0">
                    {user.firstName} {user.lastName} has been banned and logged
                    out of all sessions. If they had listings, they are no
                    longer available. They have been notified via email.
                  </p>
                </div>
              </div>
            ) : (
              <>
                {error && (
                  <div className="alert alert-danger mb-3" role="alert">
                    {error}
                  </div>
                )}

                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    handleBan();
                  }}
                >
                  <div className="mb-3">
                    <label className="form-label">
                      Reason for Ban <span className="text-danger">*</span>
                    </label>
                    <textarea
                      className="form-control"
                      rows={4}
                      value={reason}
                      onChange={(e) => {
                        setReason(e.target.value);
                        setError(null);
                      }}
                      placeholder="Please explain why this user is being banned..."
                      maxLength={1000}
                      required
                      disabled={processing}
                    />
                    <div className="form-text text-muted">
                      {reason.length}/1000 characters (Required)
                    </div>
                  </div>

                  <div className="alert alert-warning">
                    <i className="bi bi-exclamation-triangle-fill me-2"></i>
                    <strong>Warning:</strong> Banning this user will:
                    <ul className="mb-0 mt-2">
                      <li>Immediately log them out of all sessions</li>
                      <li>Prevent them from logging back in</li>
                      <li>
                        Send them an email notification with the ban reason
                      </li>
                    </ul>
                  </div>
                </form>
              </>
            )}
          </div>
          <div className="modal-footer">
            {success ? (
              <button
                type="button"
                className="btn btn-primary"
                onClick={handleClose}
              >
                Done
              </button>
            ) : (
              <>
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={handleClose}
                  disabled={processing}
                >
                  Cancel
                </button>
                <button
                  type="button"
                  className="btn btn-danger"
                  onClick={handleBan}
                  disabled={processing || !reason.trim()}
                >
                  {processing ? (
                    <>
                      <div
                        className="spinner-border spinner-border-sm me-2"
                        role="status"
                      >
                        <span className="visually-hidden">Loading...</span>
                      </div>
                      Banning...
                    </>
                  ) : (
                    "Ban User"
                  )}
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BanUserModal;