"use client";
import { useT } from "@/context/I18nContext";
import { useState, useRef, useEffect } from "react";

const LANGUAGES = [
	{ code: "ro", label: "Română", flag: "https://flagcdn.com/w40/ro.png" },
	{ code: "en", label: "English", flag: "https://flagcdn.com/w40/gb.png" },
	{ code: "it", label: "Italiano", flag: "https://flagcdn.com/w40/it.png" },
	{ code: "fr", label: "Français", flag: "https://flagcdn.com/w40/fr.png" },
	{ code: "de", label: "Deutsch", flag: "https://flagcdn.com/w40/de.png" },
];

export default function LanguageSwitcher() {
	const { locale, setLocale } = useT();
	const [open, setOpen] = useState(false);
	const ref = useRef(null);

	const current = LANGUAGES.find((l) => l.code === locale) ?? LANGUAGES[0];

	// Închide dropdown-ul la click în afară
	useEffect(() => {
		const handler = (e) => {
			if (ref.current && !ref.current.contains(e.target)) {
				setOpen(false);
			}
		};
		document.addEventListener("mousedown", handler);
		return () => document.removeEventListener("mousedown", handler);
	}, []);

	return (
		<div ref={ref} style={{ position: "relative" }}>
			{/* Buton trigger */}
			<button
				onClick={() => setOpen((prev) => !prev)}
				style={{
					display: "flex",
					flexDirection: "column",
					alignItems: "center",
					gap: "4px",
					background: "none",
					border: "none",
					padding: "0",
					cursor: "pointer",
					color: "inherit",
				}}>
				<img
					src={current.flag}
					width='20'
					height='14'
					alt={current.label}
					style={{ borderRadius: "2px", display: "block" }}
				/>
				<span
					style={{
						fontSize: "12px",
						fontWeight: 500,
						color: "inherit",
						lineHeight: 1,
						display: "flex",
						alignItems: "center",
						gap: "3px",
					}}>
					{current.code.toUpperCase()}
					<svg
						width='8'
						height='8'
						viewBox='0 0 24 24'
						fill='none'
						stroke='currentColor'
						strokeWidth='2.5'
						strokeLinecap='round'
						strokeLinejoin='round'
						style={{
							transform: open ? "rotate(180deg)" : "rotate(0deg)",
							transition: "transform 0.2s",
							opacity: 0.5,
						}}>
						<polyline points='6 9 12 15 18 9' />
					</svg>
				</span>
			</button>

			{/* Dropdown */}
			{open && (
				<ul
					style={{
						position: "absolute",
						top: "calc(100% + 6px)",
						right: 0,
						background: "#fff",
						border: "1px solid #e0e0e0",
						borderRadius: "10px",
						boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
						padding: "4px",
						margin: 0,
						listStyle: "none",
						zIndex: 9999,
						minWidth: "140px",
						animation: "fadeIn 0.15s ease-out",
					}}>
					<style>{`
                        @keyframes fadeIn {
                            from { opacity: 0; transform: translateY(-6px); }
                            to   { opacity: 1; transform: translateY(0); }
                        }
                        .lang-option:hover {
                            background: #f5f5f5 !important;
                        }
                    `}</style>

					{LANGUAGES.map((lang) => (
						<li key={lang.code}>
							<button
								className='lang-option'
								onClick={() => {
									setLocale(lang.code);
									setOpen(false);
								}}
								style={{
									display: "flex",
									alignItems: "center",
									gap: "10px",
									width: "100%",
									padding: "8px 10px",
									background: locale === lang.code ? "#f0f7ff" : "transparent",
									border: "none",
									borderRadius: "7px",
									cursor: "pointer",
									fontSize: "13px",
									fontWeight: locale === lang.code ? 600 : 400,
									color: locale === lang.code ? "#0074d9" : "#333",
									textAlign: "left",
									transition: "background 0.15s",
								}}>
								<img
									src={lang.flag}
									width='22'
									height='15'
									alt={lang.label}
									style={{ borderRadius: "2px", display: "block" }}
								/>
								<span>{lang.label}</span>
								{locale === lang.code && (
									<svg
										width='12'
										height='12'
										viewBox='0 0 24 24'
										fill='none'
										stroke='#0074d9'
										strokeWidth='3'
										strokeLinecap='round'
										strokeLinejoin='round'
										style={{ marginLeft: "auto" }}>
										<polyline points='20 6 9 17 4 12' />
									</svg>
								)}
							</button>
						</li>
					))}
				</ul>
			)}
		</div>
	);
}
