"use client";

import React, { useState } from "react";
import { submitSubscribeFormData } from "@/services/home.service";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

interface FormField {
  name: string;
  type: string;
  required: boolean;
  placeholder: string;
}

export default function SubscribeForm({ fields }: { fields: FormField[] }) {
  const [loading, setLoading] = useState(false);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setSuccessMessage(null);

    const formData = new FormData(e.currentTarget);
    const email =
      formData.get("Email")?.toString() || formData.get("email")?.toString() || "";

    if (!email) {
      setError("Please enter a valid email address.");
      setLoading(false);
      return;
    }

    try {
      await submitSubscribeFormData("f4a86a99-4fad-4993-b940-134d3335de83", { Email: email });

      setSuccessMessage(
        "Thank you for subscribing. You will get news updates from us on daily basis."
      );
      (e.target as HTMLFormElement).reset();
    } catch (err: unknown) {
      let errorMessage = "Subscription failed. Please try again.";

      // Safely check if it's an Axios-style error object
      if (err && typeof err === "object" && "response" in err) {
        const axiosError = err as { response?: { data?: { message?: string; errors?: string[] } } };

        if (axiosError.response?.data?.errors?.[0]?.includes("Invalid email format")) {
          errorMessage = "Invalid email";
        } else if (axiosError.response?.data?.message) {
          errorMessage = axiosError.response.data.message;
        }
      } else if (err instanceof Error) {
        errorMessage = err.message;
      }

      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col">
      {successMessage && (
        <p className="text-green-600 text-[15px] mb-3 leading-snug">{successMessage}</p>
      )}
      {error && <p className="text-red-600 text-[15px] mb-3 leading-snug">{error}</p>}

      <form onSubmit={handleSubmit} className="flex w-full items-center mb-6">
        {fields?.map((field) => (
          <Input
            key={field.name}
            type={field.type}
            name={field.name}
            required={field.required}
            placeholder={field.placeholder}
            className="flex-grow bg-white h-9 rounded-none border border-gray-300 text-[17px] placeholder-gray-500"
          />
        ))}

        <Button
          type="submit"
          disabled={loading}
          className="bg-[#fcb03c] hover:bg-orange-500 text-white h-9 rounded-none text-[16px] tracking-wide font-[400]"
        >
          {loading ? "Submitting..." : "Subscribe"}
        </Button>
      </form>
    </div>
  );
}