"use client";
import React, { useState, FormEvent } from "react";
import Image from "next/image";
import Link from "next/link";
import { footerData } from "@/data/shared/footerData";

const Footer: React.FC = () => {
  const {
    title,
    email,
    phone,
    newsletterTitle,
    socialLinks,
    copyright,
    footerLinks,
  } = footerData;

  const [newsletterEmail, setNewsletterEmail] = useState("");
  const [submitStatus, setSubmitStatus] = useState<{
    message: string;
    type: "success" | "error" | null;
  }>({ message: "", type: null });

  const handleNewsletterSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const accessKey = process.env.NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY;
    if (!accessKey) {
      setSubmitStatus({
        message:
          "Newsletter service is not configured. Please add NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY.",
        type: "error",
      });
      return;
    }

    try {
      const response = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          access_key: accessKey,
          subject: "New Newsletter Subscription",
          email: newsletterEmail,
          message: `Newsletter subscription request from: ${newsletterEmail}`,
        }),
      });

      const result = await response.json();

      if (response.ok && result.success) {
        setSubmitStatus({
          message: "Thank you for subscribing!",
          type: "success",
        });
        setNewsletterEmail("");
      } else {
        setSubmitStatus({
          message: result.message || "Subscription failed. Please try again.",
          type: "error",
        });
      }
    } catch {
      setSubmitStatus({
        message: "Something went wrong. Please try again later.",
        type: "error",
      });
    }
  };

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <footer className="footer-style1 space-top">
      <button id="scrollTopBtn" onClick={scrollToTop}>
        <Image
          src="/assets/images/icon/check1-3.svg"
          alt="Scroll to top arrow icon"
          width={20}
          height={20}
        />
      </button>
      <div className="widget-area">
        <div className="carousel-container">
          <div className="row">
            <div className="col-lg-6">
              <div
                className="footer-widget about-widget"
                data-aos="fade-right"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <h2 className="title">{title}</h2>
                <ul className="contact-list">
                  <li>
                    <a href={`mailto:${email}`} title="">
                      {email}
                    </a>
                  </li>
                  <li>
                    <a href={`tel:${phone.replace(/\s+/g, "")}`} title="">
                      {phone}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div className="col-lg-6">
              <div
                className="footer-widget form-widget"
                data-aos="fade-left"
                data-aos-duration={900}
                data-aos-delay={400}
              >
                <h3 className="title">{newsletterTitle}</h3>
                <form className="footer-form" onSubmit={handleNewsletterSubmit}>
                  <input
                    type="email"
                    name="email"
                    placeholder="Enter email"
                    required={true}
                    value={newsletterEmail}
                    onChange={(e) => setNewsletterEmail(e.target.value)}
                  />
                  <button type="submit">
                    <Image
                      src="/assets/images/icon/check1-3.svg"
                      alt="Submit newsletter form button icon"
                      width={18}
                      height={18}
                    />
                  </button>
                </form>
                {submitStatus.message && (
                  <p
                    className={
                      submitStatus.type === "success"
                        ? "text-success mt-2"
                        : "text-danger mt-2"
                    }
                  >
                    {submitStatus.message}
                  </p>
                )}
                <div className="social-media">
                  <span className="sub-title">Social Media</span>
                  <ul className="social-link2">
                    {socialLinks.map((link) => (
                      <li key={link.id}>
                        <a href={link.url} title="">
                          {link.title}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="footer-content"
        data-aos="fade-up"
        data-aos-duration={900}
        data-aos-delay={500}
      >
        <h3 className="title">{copyright}</h3>
      </div>
      <div className="footer-bottom">
        <div className="carousel-container">
          <div
            className="footer-box"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={200}
          >
            <div className="copyright-area">
              <p>Sasico, {new Date().getFullYear()} © All rights reserved</p>
            </div>
            <ul className="terms-list">
              {footerLinks.map((link) => (
                <li key={link.id}>
                  <Link href={link.url} title="">
                    {link.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;