"use client";

import { useState, useMemo } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";

import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

import TablerSearchIcon from "@/components/icons/tabler/search";
import MaterialSymbolsArrowRightAltIcon from "@/components/icons/material-symbols/arrow-right-alt";

import {
  VaksinasiKategori,
  KATEGORI_LABELS,
  BANNER_DATA,
} from "@/types/vaksinasi-kategori";
import type { VaccineProduct } from "@/types/landing-pages.type";

interface ProgramVaksinasiListSectionProps {
  products: VaccineProduct[];
  kategori?: string;
}

const CHIPS = [
  VaksinasiKategori.SEMUA,
  VaksinasiKategori.DEWASA,
  VaksinasiKategori.ANAK,
  VaksinasiKategori.PERJALANAN,
  VaksinasiKategori.PENYAKIT_TERTENTU,
  VaksinasiKategori.HPV,
];

const ProgramVaksinasiListSection = ({
  products,
  kategori,
}: ProgramVaksinasiListSectionProps) => {
  const router = useRouter();
  const searchParams = useSearchParams();

  const activeCategory = kategori
    ? (kategori as VaksinasiKategori)
    : VaksinasiKategori.SEMUA;

  const handleChipClick = (category: VaksinasiKategori) => {
    if (category === VaksinasiKategori.SEMUA) {
      router.push("/vaksinasi");
    } else {
      router.push(`/vaksinasi?kategori=${category}`);
    }
  };

  const filteredProducts = useMemo(() => {
    if (!kategori || kategori === "semua") {
      return products;
    }
    const categoryUpper = kategori.toUpperCase();
    return products.filter((product) =>
      product.category?.some(
        (cat) => cat.toUpperCase() === categoryUpper
      )
    );
  }, [products, kategori]);

  const activeBanner = kategori
    ? BANNER_DATA[kategori as keyof typeof BANNER_DATA]
    : null;

  return (
    <section id="vaksinasi-list" className="bg-background-custom p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col gap-6 items-center text-center">
          <div className="flex flex-col gap-5">
            <h2 className="text-text-sub font-semibold text-4xl">
              Tipe Tipe Vaksinasi
            </h2>
            <span className="text-[#383636CC] text-xl">
              Pilih vaksin sesuai kebutuhan kesehatan Anda dan keluarga.
            </span>

            <div className="flex gap-4 w-full max-w-[800px] items-center">
              <Field>
                <InputGroup
                  className="h-auto border-none bg-white py-1 px-4 rounded-full"
                  style={{
                    boxShadow: "0px 4px 4px 0px #00000040",
                  }}
                >
                  <InputGroupInput
                    placeholder="Cari Vaksin"
                    className="text-black placeholder:text-black/50"
                  />
                  <InputGroupAddon align="inline-start">
                    <TablerSearchIcon className="size-3" />
                  </InputGroupAddon>
                </InputGroup>
              </Field>
              <Button type="button" size="lg" className="rounded-2xl">
                Urutkan
              </Button>
            </div>

            <div className="flex flex-wrap gap-3 justify-center pt-2">
              {CHIPS.map((chip) => (
                <button
                  type="button"
                  key={chip}
                  onClick={() => handleChipClick(chip)}
                  className={`px-5 py-2.5 rounded-full font-medium text-base transition-all duration-200 ${
                    activeCategory === chip
                      ? "bg-[#3F7BFF] text-white"
                      : "bg-white text-[#383636] hover:bg-gray-100 border border-gray-200"
                  }`}
                >
                  {KATEGORI_LABELS[chip]}
                </button>
              ))}
            </div>

            <div className="w-full h-px bg-gray-200" />
          </div>

          {activeBanner && activeBanner.title && (
            <div className="w-full max-w-[1304px] h-[399px] relative rounded-xl overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-r from-[#3F7BFF] via-[#3F7BFF]/80 to-transparent z-10" />
              <Image
                src="/assets/program/vaksinasi/banner.png"
                alt="Banner"
                fill
                className="object-cover"
              />
              <div className="absolute z-20 left-[45px] top-[56.5px] max-w-[671px] flex flex-col gap-4">
                <h3 className="text-white font-semibold text-[42px] leading-[1.2]">
                  {activeBanner.title}
                </h3>
                <p className="text-white/90 text-lg leading-relaxed max-w-[581px]">
                  {activeBanner.description}
                </p>
                <Link
                  href={`/vaksinasi/daftar?kategori=${activeCategory}`}
                  className="w-[310px] h-[64px] rounded-lg text-xl font-semibold mt-2 inline-flex items-center justify-center bg-[#003dd8] text-white hover:bg-[#003dd8]/90 transition-colors"
                >
                  {activeBanner.ctaLabel}
                </Link>
              </div>
            </div>
          )}

          <div className="flex flex-col gap-6 w-full">
            <div className="grid grid-cols-3 gap-4">
              {filteredProducts.map((product) => (
                <Link
                  key={product.id}
                  href={`/vaksinasi/${product.slug}`}
                  className="rounded-lg bg-white flex flex-col items-start gap-3 p-4 hover:shadow-lg transition-shadow"
                >
                  <div className="relative rounded overflow-hidden w-full h-[253px]">
                    <Image
                      src={product.imageUrl || "/assets/program/hero-vaksinasi.png"}
                      alt={product.name}
                      fill
                      className="object-cover"
                    />
                  </div>

                  <div className="flex flex-wrap gap-1.5">
                    {product.category?.map((cat) => (
                      <span
                        key={cat}
                        className="rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-700"
                      >
                        {cat}
                      </span>
                    ))}
                  </div>

                  <span className="font-medium text-lg line-clamp-1 text-[#0B1F4B]">
                    {product.name}
                  </span>

                  <div className="flex gap-1.5">
                    {product.brand && (
                      <div className="rounded-full px-2 bg-[#FFB700] text-[#805300] font-medium text-xs">
                        {product.brand}
                      </div>
                    )}
                    {product.factory && (
                      <div className="rounded-full px-2 bg-[#26FB9B] text-[#096039] font-medium text-xs">
                        {product.factory}
                      </div>
                    )}
                  </div>

                  <div className="flex items-center gap-1">
                    {product.price && product.price > 0 ? (
                      <span className="text-lg font-semibold text-[#424242]">
                        {product.price.toLocaleString("id-ID", {
                          style: "currency",
                          currency: "IDR",
                        })}
                      </span>
                    ) : (
                      <span className="text-lg font-semibold text-[#424242]">
                        Hubungi kami
                      </span>
                    )}
                  </div>

                  <div className="flex w-full gap-2 items-center pt-1">
                    <span className="font-semibold text-sm text-[#3F7BFF]">
                      Lihat Detail
                    </span>
                    <MaterialSymbolsArrowRightAltIcon className="text-[#3F7BFF] size-5" />
                  </div>
                </Link>
              ))}
            </div>

            {filteredProducts.length === 0 && (
              <div className="text-center py-12">
                <p className="text-gray-500 text-lg">
                  Tidak ada produk untuk kategori ini.
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProgramVaksinasiListSection;