"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { toast } from "sonner";
import NewsService from "@/services/news.service";

import MaterialSymbolsMailIcon from "@/components/icons/material-symbols/mail";

const BeritaNewsletterSection = () => {
  const [email, setEmail] = useState("");
  const [isLoading, setIsLoading] = useState(false);

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

    if (!email || !email.includes("@")) {
      toast.error("Masukkan email yang valid");
      return;
    }

    setIsLoading(true);
    try {
      await NewsService.subscribe({ email });
      toast.success("Berhasil berlangganan! Terima kasih.");
      setEmail("");
    } catch (error) {
      toast.error("Gagal berlangganan. Silakan coba lagi.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <section
      className="py-16"
      style={{
        background:
          "linear-gradient(115.726deg, rgb(123, 206, 255) 13.83%, rgb(19, 105, 255) 94.899%)",
      }}
    >
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex flex-col items-center text-center gap-8">
          <h2 className="font-semibold text-[50px] text-white leading-tight max-w-221">
            Tetap Update Info Sunat & Berita Kesehatan Terbaru
          </h2>

          <p className="font-medium text-[29px] text-white/60 leading-tight tracking-[-1.45px] max-w-2xl">
            Dapatkan berita, tips kesehatan, dan promo sunat terbaru langsung di
            email Anda.
          </p>

          <form onSubmit={handleSubmit} className="flex gap-4 items-center">
            {/* Email Input */}
            <Field>
              <InputGroup
                className="h-auto border-none bg-white py-4 px-6 rounded-full min-w-100"
                style={{
                  boxShadow: "0px 4px 4px 0px #00000040",
                }}
              >
                <InputGroupInput
                  placeholder="Masukkan email anda..."
                  className="text-black placeholder:text-black/50"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={isLoading}
                />
                <InputGroupAddon align="inline-start">
                  <MaterialSymbolsMailIcon className="size-6" />
                </InputGroupAddon>
              </InputGroup>
            </Field>

            {/* Subscribe Button */}
            <Button
              type="submit"
              disabled={isLoading}
              className="bg-[#ffb700] hover:bg-[#ffb700]/90 text-white font-semibold text-[24px] tracking-[-1.5px] px-10 py-4 h-auto rounded-[63px] disabled:opacity-50"
            >
              {isLoading ? "Loading..." : "Subscribe"}
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
};

export default BeritaNewsletterSection;