"use client";

import { useEffect, useState } from "react";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
import { getPublicRegions } from "@/services/regions";
import type { Region } from "@/services/regions";

interface RegionsDropdownProps {
  isScrolled: boolean;
  isMobile?: boolean;
}

const RegionsDropdown = ({ isScrolled, isMobile = false }: RegionsDropdownProps) => {
  const [regions, setRegions] = useState<Region[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadRegions = async () => {
      try {
        const data = await getPublicRegions();
        setRegions(data);
      } catch (error) {
        console.error("Failed to load regions:", error);
      } finally {
        setIsLoading(false);
      }
    };

    loadRegions();
  }, []);

  if (isLoading || regions.length === 0) {
    return null;
  }

  if (isMobile) {
    return (
      <div className="space-y-2">
        <Link
          href="/regions"
          className={`block px-4 py-2 text-sm font-medium transition-colors duration-300 hover:text-accent ${
            isScrolled ? "text-foreground" : "text-primary-foreground/90"
          }`}
          onClick={() => setIsOpen(false)}
        >
          Regions
        </Link>
        <div className="pl-4 space-y-1 border-l border-accent/20">
          {regions.map((region) => (
            <Link
              key={region.id}
              href={`/regions/${region.slug}`}
              className={`block py-2 text-xs font-medium transition-colors duration-300 hover:text-accent ${
                isScrolled ? "text-foreground/80" : "text-primary-foreground/70"
              }`}
              onClick={() => setIsOpen(false)}
            >
              {region.name}
            </Link>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="relative group">
      <button
        className={`flex items-center gap-1 text-sm font-medium transition-colors duration-300 hover:text-accent ${
          isScrolled ? "text-foreground" : "text-primary-foreground/90"
        }`}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        Regions
        <ChevronDown
          size={16}
          className={`transition-transform duration-300 ${
            isOpen ? "rotate-180" : ""
          }`}
        />
      </button>

      {/* Desktop Dropdown Menu */}
      <div
        className={`absolute left-0 mt-0 w-48 bg-card border border-border rounded-sm shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 translate-y-2 group-hover:translate-y-0 z-50`}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <div className="py-2">
          <Link
            href="/regions"
            className="block px-4 py-2 text-sm font-medium text-foreground hover:bg-secondary hover:text-accent transition-colors"
          >
            All Regions
          </Link>
          <div className="border-t border-border my-1" />
          {regions.map((region) => (
            <Link
              key={region.id}
              href={`/regions/${region.slug}`}
              className="block px-4 py-2 text-sm text-foreground hover:bg-secondary hover:text-accent transition-colors"
            >
              {region.name}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};

export default RegionsDropdown;