"use client";

import Modal from "@/components/Modal";
import { useState, useEffect } from "react";
import { useTranslations } from "next-intl";
import { useSendSupportRequest } from "@/api/user/individual-support/individual-support";

interface SupportModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function SupportModal({ isOpen, onClose }: SupportModalProps) {
  const t = useTranslations("individual.supportModal");
  const [formData, setFormData] = useState({
    subject: "",
    message: "",
  });
  const [errors, setErrors] = useState({
    subject: "",
    message: "",
  });
  const [success, setSuccess] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);

  // Reset form state when modal opens
  useEffect(() => {
    if (isOpen) {
      setFormData({ subject: "", message: "" });
      setErrors({ subject: "", message: "" });
      setSuccess(false);
      setApiError(null);
    }
  }, [isOpen]);

  const supportMutation = useSendSupportRequest({
    mutation: {
      onSuccess: () => {
        setFormData({ subject: "", message: "" });
        setSuccess(true);
        // Auto-close after showing success message
        setTimeout(() => {
          onClose();
        }, 2000);
      },
      onError: (error: any) => {
        setApiError(error?.response?.data?.message || t("error"));
      },
    },
  });

  const validateForm = () => {
    const newErrors = {
      subject: "",
      message: "",
    };

    let isValid = true;

    // Validate subject
    if (!formData.subject.trim()) {
      newErrors.subject = t("validation.subjectRequired");
      isValid = false;
    } else if (formData.subject.trim().length < 5) {
      newErrors.subject = t("validation.subjectMinLength");
      isValid = false;
    } else if (formData.subject.length > 200) {
      newErrors.subject = t("validation.subjectMaxLength");
      isValid = false;
    }

    // Validate message
    if (!formData.message.trim()) {
      newErrors.message = t("validation.messageRequired");
      isValid = false;
    } else if (formData.message.trim().length < 10) {
      newErrors.message = t("validation.messageMinLength");
      isValid = false;
    } else if (formData.message.length > 2000) {
      newErrors.message = t("validation.messageMaxLength");
      isValid = false;
    }

    setErrors(newErrors);
    return isValid;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setApiError(null);

    if (!validateForm()) {
      return;
    }

    supportMutation.mutate({
      data: {
        subject: formData.subject,
        message: formData.message,
      },
    });
  };

  const handleSubjectChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, subject: e.target.value });
    if (errors.subject) {
      setErrors({ ...errors, subject: "" });
    }
  };

  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setFormData({ ...formData, message: e.target.value });
    if (errors.message) {
      setErrors({ ...errors, message: "" });
    }
  };

  const inputClassName = "w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#3B9EC9]/20 focus:border-[#3B9EC9] transition";

  const isLoading = supportMutation.isPending;

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="xl">
      <div className="px-2">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">{t("title")}</h2>
        <p className="text-gray-500 mb-8">{t("description")}</p>

        {/* Success State */}
        {success ? (
          <div className="py-8 text-center">
            <div className="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
              <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">{t("sentTitle")}</h3>
            <p className="text-base text-gray-600">{t("success")}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* API Error */}
            {apiError && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
                {apiError}
              </div>
            )}

            {/* Subject */}
            <div>
              <label className="block text-sm font-semibold text-gray-800 mb-2">
                {t("subject")}
              </label>
              <input
                type="text"
                value={formData.subject}
                onChange={handleSubjectChange}
                placeholder={t("subjectPlaceholder")}
                className={inputClassName}
              />
              {errors.subject && (
                <p className="text-sm mt-1 text-[#D12E34]">
                  {errors.subject}
                </p>
              )}
            </div>

            {/* Message */}
            <div>
              <label className="block text-sm font-semibold text-gray-800 mb-2">
                {t("message")}
              </label>
              <textarea
                value={formData.message}
                onChange={handleMessageChange}
                placeholder={t("messagePlaceholder")}
                className={`${inputClassName} min-h-[150px] resize-none`}
              />
              {errors.message && (
                <p className="text-sm mt-1 text-[#D12E34]">
                  {errors.message}
                </p>
              )}
              <p className="text-xs text-gray-500 mt-1">{formData.message.length}/2000 {t("characters")}</p>
            </div>

            {/* Divider */}
            <div className="border-t border-gray-100 my-6"></div>

            {/* Buttons */}
            <div className="flex justify-end gap-3 pt-2">
              <button
                type="button"
                onClick={onClose}
                disabled={isLoading}
                className="px-8 py-3 text-base font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:bg-gray-50 transition disabled:opacity-50 cursor-pointer"
              >
                {t("cancel")}
              </button>
              <button
                type="submit"
                disabled={isLoading}
                className="px-8 py-3 text-base font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] focus:ring-offset-2 disabled:opacity-50 cursor-pointer"
              >
                {isLoading ? t("sending") : t("sendMessage")}
              </button>
            </div>
          </form>
        )}
      </div>
    </Modal>
  );
}