"use client";
import { Button } from "@heroui/button";
import { Input } from "@heroui/input";
import {
  LandingAppleIcon,
  LandingCallIcon,
  LandingEmailIcon,
  LandingLocationIcon,
  LandingPlayStoreIcon,
  MailIcon,
  SendIcon,
} from "../icons";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import Image from "next/image";
import { error, success } from "@/config/swal";
import { subscription } from "@/service/subscribe";

export default function FooterNew(props: { margin?: boolean }) {
  const [emailValue, setEmailValue] = useState("");

  const doSubscribe = async () => {
    const isValidEmail = (email: string): boolean => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    };

    if (!isValidEmail(emailValue)) {
      error("Email tidak valid");
      return false;
    }

    const res = await subscription({ email: emailValue });
    if (res?.error) {
      error(res?.message);
      return false;
    }

    success("Sukses");
  };

  return (
    <div
      className={`${
        props?.margin ? "mb-[60px]" : ""
      } relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold`}
    >
      <div className="py-10 w-full lg:w-[70%] flex flex-col gap-4 px-6 lg:px-0 lg:mx-auto">
        <div className="flex justify-center text-xl lg:text-2xl">
          Channel Humas Polri
        </div>
        <div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center border-b-1 border-black pb-5">
          <Link
            href="https://portal.humas.polri.go.id/"
            className="flex justify-center"
          >
            <Image
              src="/assets/portal-humas.png"
              width={480}
              height={480}
              alt="portal-humas"
              className="w-[50px] lg:w-[100px]"
            />
          </Link>
          <Link
            href="https://mediahub.polri.go.id/"
            className="flex flex-col justify-center items-center"
          >
            <Image
              src="/assets/mediahub.png"
              width={480}
              height={480}
              alt="mediahub"
              className="w-[80px] lg:w-[200px]"
            />
          </Link>
          <Link href="">
            <Image
              src="/assets/spit.png"
              width={480}
              height={480}
              alt="spit"
              className="w-[85px] lg:w-[170px] hidden dark:block"
            />
            <Image
              src="/assets/spit-blackline.png"
              width={480}
              height={480}
              alt="spit"
              className="w-[85px] lg:w-[170px] dark:hidden"
            />
          </Link>
          <Link href="https://tvradio.polri.go.id/">
            <Image
              src="/assets/polri-tv.png"
              width={480}
              height={480}
              alt="polritv"
              className="w-[85px] lg:w-[170px]"
            />
          </Link>
          <Link href="https://tribratanews.polri.go.id/">
            <Image
              src="/assets/tb-news.png"
              width={480}
              height={480}
              alt="tbn"
              className="w-[85px] lg:w-[170px]"
            />
          </Link>
          <Link href="https://inp.polri.go.id/">
            <Image
              src="/assets/inp.png"
              width={480}
              height={480}
              alt="inp"
              className="w-[85px] lg:w-[170px]"
            />
          </Link>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="flex flex-col gap-1 text-md font-light">
            <p className="text-lg font-semibold">Tentang Kami</p>
            <div className="flex flex-row gap-2 items-center">
              <div className="w-[16px]">
                <LandingCallIcon size={16} />
              </div>
              <p>Call Center 110</p>
            </div>
            <div className="flex flex-row gap-2 items-center">
              <div className="w-[16px]">
                <LandingEmailIcon size={16} />
              </div>
              <p>ppid@polri.go.id</p>
            </div>
            <div className="flex flex-row gap-2 justify-start items-start">
              <div className="w-[16px]">
                <LandingLocationIcon size={16} />
              </div>
              <span className="p-0 m-0 self-start leading-tight">
                Jl. Trunojoyo No.3, Selong, Kec. Kby. Baru, Kota Jakarta
                Selatan, Daerah Khusus Ibukota Jakarta
              </span>
            </div>
          </div>
          <div className="flex flex-col gap-4 text-md items-center">
            <p className="text-lg font-semibold">
              Download Aplikasi Polri Presisi
            </p>
            <div className="flex flex-row gap-2">
              <Link
                href=""
                className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
              >
                <LandingAppleIcon size={36} />
                <div className="flex flex-col gap-0 leading-none font-light mr-1">
                  <p className="text-[10px]">Download on the</p>
                  <p className="text-lg font-semibold">App Store</p>
                </div>
              </Link>
              <Link
                href=""
                className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
              >
                <LandingPlayStoreIcon size={30} />
                <div className="flex flex-col gap-0 leading-none font-light mr-1">
                  <p className="text-[10px]">GET IT ON</p>
                  <p className="text-lg font-semibold">Google Play</p>
                </div>
              </Link>
            </div>
          </div>
          <div className="flex flex-col gap-4 text-md">
            <p className="text-xl font-semibold">Subscribe</p>
            <div className="flex flex-col">
              <p className="font-light">
                Dapatkan info & event terupdate dari kami.
              </p>
              <div className="flex items-center">
                {" "}
                <Input
                  label=""
                  type="text"
                  variant="bordered"
                  placeholder="Tuliskan Email Anda"
                  className="rounded-none !text-black "
                  classNames={{
                    inputWrapper:
                      "rounded-none h-[37px] bg-white !text-black border-black dark:border-white",
                    mainWrapper:
                      "rounded-none h-[37px] bg-white !text-black dark:border-white",
                  }}
                  value={emailValue}
                  onValueChange={setEmailValue}
                />
                <a
                  onClick={doSubscribe}
                  className="h-[38px] dark:h-[37px] text-white dark:text-black bg-black dark:bg-white  flex items-center justify-center w-14 cursor-pointer"
                >
                  <SendIcon />
                </a>
              </div>
            </div>
            <Link href={`/auth`}>
              <Button className="mt-1 bg-[#BE0106] text-white">
                <p className="text-xs">Kontributor Wilayah</p>
              </Button>
            </Link>
          </div>
        </div>
      </div>
      <div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-sm lg:text-base">
        &copy; Copyright Humas&nbsp; POLRI &reg;&nbsp;All Rights Reserved
      </div>
    </div>
  );
}