"use client";

import { useEffect, useState } from "react";
import { getCookie, setCookie } from "cookies-next";
import { useRouter } from "next/navigation";
import Image from "next/image";

export const SALON_GENDER_COOKIE = "salon_gender";

/** 1 = آقایان، 2 = خانم‌ها */
export type SalonGender = "1" | "2";

const OPEN_EVENT = "salon-open-gender-select";

export function openGenderSelect() {
  if (typeof window !== "undefined") {
    window.dispatchEvent(new Event(OPEN_EVENT));
  }
}

export function GenderSelect() {
  const router = useRouter();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!getCookie(SALON_GENDER_COOKIE)) setOpen(true);
    const onOpen = () => setOpen(true);
    window.addEventListener(OPEN_EVENT, onOpen);
    return () => window.removeEventListener(OPEN_EVENT, onOpen);
  }, []);

  const choose = (gender: SalonGender) => {
    setCookie(SALON_GENDER_COOKIE, gender, { maxAge: 60 * 60 * 24 * 365 * 2 });
    setOpen(false);
    window.dispatchEvent(new Event("salon-gender-changed"));
    router.refresh();
  };

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[99990] flex items-center justify-center bg-[#0a0a0a] p-4">
      <div className="w-full max-w-3xl">
        <div className="flex justify-end mb-2">
          {!!getCookie(SALON_GENDER_COOKIE) && (
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="text-white/70 hover:text-white text-sm px-3 py-1"
            >
              بستن
            </button>
          )}
        </div>
        <h2 className="text-center text-white text-2xl md:text-4xl font-semibold mb-3">
          برای چه کسی جستجو می‌کنید؟
        </h2>
        <p className="text-center text-white/60 mb-8 text-sm md:text-base">
          سالن‌ها و خدمات مرتبط با انتخاب شما نمایش داده می‌شود
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
          <button
            type="button"
            onClick={() => choose("1")}
            className="group relative overflow-hidden rounded-2xl aspect-[3/4] sm:aspect-[4/5] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#BB9B6A]"
          >
            <Image
              src="/img/gender-men.jpg"
              alt="آقایان"
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 640px) 100vw, 50vw"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
            <span className="absolute bottom-6 inset-x-0 text-center text-white text-2xl md:text-3xl font-semibold tracking-wide">
              آقایان
            </span>
          </button>
          <button
            type="button"
            onClick={() => choose("2")}
            className="group relative overflow-hidden rounded-2xl aspect-[3/4] sm:aspect-[4/5] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#BB9B6A]"
          >
            <Image
              src="/img/gender-women.jpg"
              alt="خانم‌ها"
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 640px) 100vw, 50vw"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
            <span className="absolute bottom-6 inset-x-0 text-center text-white text-2xl md:text-3xl font-semibold tracking-wide">
              خانم‌ها
            </span>
          </button>
        </div>
      </div>
    </div>
  );
}