SME-Web/src/components/client/ReassignModal.tsx

import { useState } from "react";
import { FaUserEdit } from "react-icons/fa";

interface ReassignModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: (data: { firstName: string; lastName: string; email: string; message: string }) => void;
}

export default function ReassignModal({ open, onClose, onConfirm }: ReassignModalProps) {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const [errors, setErrors] = useState<{ lastName?: string; email?: string }>({});

  if (!open) return null;

  const validate = () => {
    const newErrors: { lastName?: string; email?: string } = {};
    if (!lastName.trim()) newErrors.lastName = "Last name is required.";
    if (!email.trim()) newErrors.email = "Email is required.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email.";
    setErrors(newErrors);
    return Object.keys(newErrors).length == 0;
  };

  const handleSubmit = () => {
    if (!validate()) return;
    onConfirm({ firstName, lastName, email, message });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
      <div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
        {/* Header */}
        <div className="flex items-center gap-3 mb-4">
          <FaUserEdit className="text-blue-500 text-2xl" />
          <h2 className="text-lg font-semibold text-gray-800">Reassign Document</h2>
        </div>

        {/* Message */}
        <p className="text-sm text-gray-600 mb-4">
          Please enter the recipient details to reassign this document.
        </p>

        {/* Form Fields */}
        <div className="space-y-4">
          <div className="flex flex-col lg:flex-row lg:gap-4">
            <div className="flex-1">
              <input
                type="text"
                placeholder="First Name (optional)"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                className="w-full border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
              />
            </div>
            <div className="flex-1">
              <input
                type="text"
                placeholder="Last Name *"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                className={`w-full border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 ${
                  errors.lastName ? "border-red-500 focus:ring-red-400" : "focus:ring-blue-400"
                }`}
              />
              {errors.lastName && (
                <p className="text-red-500 text-xs mt-1">{errors.lastName}</p>
              )}
            </div>
          </div>

          <div>
            <input
              type="email"
              placeholder="Email *"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className={`w-full border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 ${
                errors.email ? "border-red-500 focus:ring-red-400" : "focus:ring-blue-400"
              }`}
            />
            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
          </div>

          {/* Message Textarea */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Message (optional)
            </label>
            <textarea
              placeholder="Write a message for the recipient..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={3}
              className="w-full border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
            />
          </div>
        </div>

        {/* Buttons */}
        <div className="flex justify-end gap-3 mt-6 flex-wrap">
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-md border border-gray-300 text-gray-600 hover:bg-gray-100 text-sm"
          >
            Cancel
          </button>
          <button
            onClick={handleSubmit}
            className="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-blue-600 text-sm"
          >
            Reassign
          </button>
        </div>
      </div>
    </div>
  );
}