import React, { useState, useEffect } from "react";
import Swal from 'sweetalert2';
import { createPortal } from "react-dom";
import IconEye from "./Icon/IconEye";
import IconCamera from "./Icon/IconCamera";
import IconEyeClose from "./Icon/IconEyeClose";
import { authApi } from "../api/authApi";
import { BACKEND_URL } from "../api/axiosInstance";


type Props = {
  isOpen: boolean;
  onClose: () => void;
  user?: any;
  refreshUser?: () => void;
};

const ViewAdmin: React.FC<Props> = ({ isOpen, onClose, user, refreshUser }) => {
  const [showPassword, setShowPassword] = useState(false);
  const [image, setImage] = useState("/assets/images/user-profile.jpeg");
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [removeImage, setRemoveImage] = useState(false);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    if (user) {
      setUsername(user.name || "");
      setImage(user.profile_picture ? `${BACKEND_URL}${user.profile_picture}` : "/assets/images/user-profile.jpeg");
      setPassword("");
      setImageFile(null);
      setRemoveImage(false);
    }
  }, [user, isOpen]);

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (file.size > 10 * 1024 * 1024) {
        Swal.fire({
          icon: 'warning',
          title: 'Image must be smaller than 10 MB',
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3500,
        });
        return;
      }
      const preview = URL.createObjectURL(file);
      setImage(preview);
      setImageFile(file);
      setRemoveImage(false);
    }
  };

  const handleRemoveImage = () => {
    setImage("/assets/images/user-profile.jpeg"); // reset to default
    setImageFile(null);
    setRemoveImage(true);
  };

  const handleUpdate = async () => {
    if (password && password.length < 6) {
      Swal.fire({
        icon: 'warning',
        title: 'Password must be at least 6 characters',
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3500,
      });
      return;
    }

    try {
      setIsSaving(true);
      const formData = new FormData();
      if (username.trim()) {
        formData.append('username', username.trim());
      }
      if (password) {
        formData.append('password', password);
      }
      if (imageFile) {
        formData.append('profile_picture', imageFile);
      } else if (removeImage) {
        formData.append('remove_profile_picture', '1');
      }

      const res = await authApi.updateProfile(formData);
      if (res?.user) {
        localStorage.setItem('user', JSON.stringify(res.user));
      }
      if (refreshUser) refreshUser();
      Swal.fire({
          icon: 'success',
          title: res?.message || 'Profile updated successfully',
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000,
          padding: '10px 20px',
      });
      onClose();
    } catch (err: any) {
      console.error('Failed to update profile', err);
      const errors = err?.response?.data?.errors;
      const firstValidationError = errors
        ? Object.values(errors).flat().find((m): m is string => typeof m === 'string')
        : null;
      const errorTitle =
        firstValidationError ||
        err?.response?.data?.message ||
        err?.message ||
        'Failed to update profile';

      Swal.fire({
          icon: 'error',
          title: errorTitle,
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 4000,
          padding: '10px 20px',
      });
    } finally {
      setIsSaving(false);
    }
  };

  if (!isOpen) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-[999] bg-black/60 flex items-center justify-center"
      onClick={onClose}
    >
      <div
        className="bg-white w-full max-w-md rounded-xl shadow-lg overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* HEADER */}
        <div className="bg-[#5B1F00] flex justify-between items-center p-4">
          <h2 className="text-white font-bold uppercase text-sm">
            Update Profile
          </h2>

        </div>

        {/* BODY */}
        <div className="p-5">
          <div className="flex flex-col items-center mb-4">
            <img
              src={image}
              alt="userProfile"
              onError={(e) => {
                (e.currentTarget as HTMLImageElement).src = "/assets/images/user-profile.jpeg";
              }}
              className="w-20 h-20 rounded-full object-cover border"
            />

            <div className="flex items-center gap-2 mt-4">
              <label className="cursor-pointer border py-1 px-2.5 rounded text-sm text-blue-600 hover:bg-blue-50 transition">
                Update
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleImageChange}
                  className="hidden"
                />
              </label>
              <button
                type="button"
                onClick={handleRemoveImage}
                className="border rounded py-1 px-2.5 text-sm text-red-600 hover:bg-red-50 transition cursor-pointer"
              >
                Remove
              </button>
            </div>
          </div>

          {/* Username */}
          <div className="mb-4">
            <label className="block text-sm font-semibold mb-1">
              Username
            </label>
            <input
              type="text"
              autoComplete="off"
              placeholder="superadmin"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full px-3 py-2 border rounded bg-gray-100 outline-none"
            />
          </div>

          {/* Password */}
          <div>
            <label className="block text-sm font-semibold mb-1">
              Password <span className="text-gray-400 text-xs">(leave blank to keep current)</span>
            </label>

            <div className="flex items-center border rounded bg-gray-100">
              <input
                type={showPassword ? "text" : "password"}
                autoComplete="new-password"
                placeholder="New password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full px-3 py-2 outline-none bg-transparent"
              />

              <button
                type="button"
                className="px-3 text-gray-500"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? <IconEyeClose /> : <IconEye />}
              </button>
            </div>
          </div>
        </div>

        {/* FOOTER */}
        <div className="flex justify-end gap-2 p-4 border-t">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300 transition"
            disabled={isSaving}
          >
            Close
          </button>

          <button 
            className="px-4 py-2 bg-[#5B1F00] text-white rounded hover:bg-[#4a1900] transition disabled:opacity-70" 
            onClick={handleUpdate}
            disabled={isSaving}
          >
            {isSaving ? 'Updating...' : 'Update profile'}
          </button>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default ViewAdmin;