'use client';

import React, { useState, useRef, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';

export default function LanguageSwitcher() {
  const { lang, setLang } = useLanguage();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const languages = [
    {
      code: 'id' as const,
      label: 'Indonesia',
      flag: (
        <svg className="w-5 h-5 rounded-full shadow" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
          <rect width="640" height="240" fill="#CE1126"/>
          <rect y="240" width="640" height="240" fill="#fff"/>
        </svg>
      ),
    },
    {
      code: 'en' as const,
      label: 'English',
      flag: (
        <svg className="w-5 h-5 rounded-full shadow" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
          <rect width="640" height="480" fill="#012169"/>
          <defs>
            <clipPath id="uk-clip"><rect width="640" height="480"/></clipPath>
          </defs>
          <g clipPath="url(#uk-clip)">
            <rect width="640" height="480" fill="#012169"/>
            <path d="M0 0l640 480M640 0L0 480" stroke="#fff" strokeWidth="60"/>
            <path d="M0 0l640 480M640 0L0 480" stroke="#C8102E" strokeWidth="36"/>
            <path d="M320 0v480M0 240h640" stroke="#fff" strokeWidth="80"/>
            <path d="M320 0v480M0 240h640" stroke="#C8102E" strokeWidth="40"/>
          </g>
        </svg>
      ),
    },
  ];

  const currentLang = languages.find((l) => l.code === lang) || languages[0];

  return (
    <div className="relative" ref={dropdownRef}>
      {/* Navbar trigger: hanya flag + arrow, tanpa teks label */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-1 text-espresso hover:text-gold transition duration-300"
        title={currentLang.label}
      >
        {currentLang.flag}
        <svg
          className={`w-3 h-3 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
          viewBox="0 0 24 24"
          strokeWidth="2"
          stroke="currentColor"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M6 9l6 6 6 -6"></path>
        </svg>
      </button>

      {/* Dropdown menu: flag + label lengkap */}
      {isOpen && (
        <div className="absolute right-0 mt-2 w-44 bg-white shadow-xl rounded-lg py-1 z-50 border border-blush">
          {languages.map((langItem) => (
            <button
              key={langItem.code}
              onClick={() => {
                setLang(langItem.code);
                setIsOpen(false);
              }}
              className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-blush/40 ${
                lang === langItem.code ? 'text-gold font-semibold' : 'text-espresso'
              }`}
            >
              {langItem.flag}
              <span className="flex-1 text-left">{langItem.label}</span>
              {lang === langItem.code && (
                <svg className="w-4 h-4 text-gold" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12l5 5l10 -10"></path>
                </svg>
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
