"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";

export interface CreditCardApplication {
  name: string;
  email: string;
  phone: string;
  nationality: string;
  salary: number;
  agree: boolean;
}

interface CreditCardApplyFormProps {
  cardId: number;
  cardName: string;
  returnUrl: string;
}

const CreditCardApplyForm: React.FC<CreditCardApplyFormProps> = ({
  cardId,
  cardName,
  returnUrl,
}) => {
  const router = useRouter();

  const [form, setForm] = useState<CreditCardApplication>({
    name: "",
    email: "",
    phone: "",
    nationality: "",
    salary: 0,
    agree: false,
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [successMsg, setSuccessMsg] = useState<string | null>(null);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const target = e.target as HTMLInputElement;
    const { name, value, type } = target;
    setForm((prev) => ({
      ...prev,
      [name]:
        type === "checkbox"
          ? target.checked
          : type === "number"
          ? Number(value)
          : value,
    }));
  };

  const validate = (): boolean => {
    if (!form.name.trim()) return setError("Name is required"), false;
    if (!form.email.trim() || !/\S+@\S+\.\S+/.test(form.email))
      return setError("Valid email is required"), false;
    if (!form.phone.trim()) return setError("Phone number is required"), false;
    if (!form.nationality.trim())
      return setError("Nationality is required"), false;
    if (form.salary <= 0)
      return setError("Salary must be greater than zero"), false;
    if (!form.agree) return setError("You must agree to the terms"), false;

    setError(null);
    return true;
  };

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

    if (!validate()) return;

    setLoading(true);
    setError(null);
    setSuccessMsg(null);

    try {
      const response = await fetch(`/api/applycard/${cardId}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, cardId }),
      });

      const data = await response.json();

      if (!response.ok) {
        toast.error(data.error || "Failed to submit application");
      } else {
        //setSuccessMsg("Application submitted successfully!");
        toast.success("Application submitted successfully!");
        setForm({
          name: "",
          email: "",
          phone: "",
          nationality: "",
          salary: 0,
          agree: false,
        });

        // ✅ Redirect to return URL
        setTimeout(() => {
          router.push(returnUrl);
        }, 1500); // Optional delay (1.5s)
      }
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "An unexpected error occurred");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mt-6 border border-blue-300 p-6 rounded-lg">
      <div className="flex p-2 gap-4 items-start relative">
    <form
      onSubmit={handleSubmit}
      className=" p-4 border rounded-md bg-white shadow-sm w-full"
    >
      <h2 className="text-lg font-semibold mb-4">Apply for: {cardName}</h2>

      {error && <p className="mb-2 text-red-600">{error}</p>}
      {successMsg && <p className="mb-2 text-green-600">{successMsg}</p>}

      <label className="block mb-2">
        Name
        <input
          type="text"
          name="name"
          value={form.name}
          onChange={handleChange}
          className="w-full mt-1 p-2 border rounded"
          required
          placeholder="enter appliatcant name"
        />
      </label>

      <label className="block mb-2">
        Email
        <input
          type="email"
          name="email"
          value={form.email}
          onChange={handleChange}
          className="w-full mt-1 p-2 border rounded"
          required
          placeholder="enter email-id example@example.com"
        />
      </label>

      <label className="block mb-2">
        Mobile Number
        <input
          type="tel"
          name="phone"
          value={form.phone}
          onChange={handleChange}
          className="w-full mt-1 p-2 border rounded"
          required
          placeholder="enter mobile number (+971-5X-XXX-XXXX)"
        />
      </label>

      <label className="block mb-2">
        Nationality
        <input
          type="text"
          name="nationality"
          value={form.nationality}
          onChange={handleChange}
          className="w-full mt-1 p-2 border rounded"
          required
          placeholder="enter nationality"
        />
      </label>

      <label className="block mb-2">
        Salary (AED)
        <input
          type="number"
          name="salary"
          value={form.salary}
          onChange={handleChange}
          min={0}
          className="w-full mt-1 p-2 border rounded"
          required
          placeholder="enter your current salary"
        />
      </label>

      <label className="flex items-center mb-4">
        <input
          type="checkbox"
          name="agree"
          checked={form.agree}
          onChange={handleChange}
          className="mr-2"
          required
        />
        I agree to the terms and conditions
      </label>

      <button
        type="submit"
        disabled={loading}
        className={`w-full py-2 px-4 font-semibold rounded ${
          loading
            ? "bg-gray-400 cursor-not-allowed"
            : "bg-blue-600 hover:bg-blue-700 text-white"
        }`}
      >
        {loading ? "Submitting..." : "Apply Now"}
      </button>
    </form>
    </div>
    </div>
  );
};

export default CreditCardApplyForm;