"use client"

import { ChevronDown, Languages } from "lucide-react"
import { LANGUAGES, type Language } from "./LanguageTabs"

export interface LanguageSelectOption<T extends string = Language> {
  value: T
  label: string
  nativeLabel?: string
  required?: boolean
}

const DEFAULT_EDITING_HINTS: Record<Language, string> = {
  en: "You are editing the English version.",
  tr: "Sayfanın Türkçe sürümünü düzenliyorsunuz.",
  ar: "أنت تعدّل النسخة العربية.",
}

function defaultOptions(): LanguageSelectOption<Language>[] {
  return LANGUAGES.map((lang) => ({
    value: lang.key,
    label: lang.label,
    nativeLabel: lang.nativeLabel,
  }))
}

function formatOptionLabel(option: {
  label: string
  nativeLabel?: string
  required?: boolean
}): string {
  const name = option.nativeLabel?.trim() || option.label
  const suffix = option.required ? " *" : ""
  return `${name}${suffix}`
}

export interface LanguageSelectProps<T extends string = Language> {
  value: T
  onChange: (value: T) => void
  options?: LanguageSelectOption<T>[]
  disabled?: boolean
  label?: string
  id?: string
  placeholder?: string
  showEditingHint?: boolean
  editingHints?: Partial<Record<T, string>>
  className?: string
}

export function LanguageSelect<T extends string = Language>({
  value,
  onChange,
  options,
  disabled = false,
  label = "Language",
  id = "language-select",
  placeholder = "Select a language...",
  showEditingHint = false,
  editingHints,
  className,
}: LanguageSelectProps<T>) {
  const resolvedOptions = (options ?? defaultOptions()) as LanguageSelectOption<T>[]
  const activeOption = resolvedOptions.find((option) => option.value === value)
  const hintText =
    editingHints?.[value] ??
    (value in DEFAULT_EDITING_HINTS
      ? DEFAULT_EDITING_HINTS[value as Language]
      : activeOption
        ? `You are editing the ${activeOption.label} version.`
        : "")

  return (
    <div className={className ?? "flex flex-col gap-3"}>
      <div className="flex flex-col gap-1.5">
        <label
          htmlFor={id}
          className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
        >
          {label}
        </label>
        <div className="relative w-full sm:max-w-xs">
          <Languages
            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
            aria-hidden="true"
          />
          <select
            id={id}
            value={value}
            onChange={(e) => onChange(e.target.value as T)}
            disabled={disabled}
            aria-label={label}
            className="w-full appearance-none bg-card border border-border rounded-xl pl-10 pr-10 py-2.5 text-sm text-foreground font-sans outline-none transition-colors cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673]"
          >
            {!value && (
              <option value="" disabled>
                {placeholder}
              </option>
            )}
            {resolvedOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {formatOptionLabel(option)}
              </option>
            ))}
          </select>
          <ChevronDown
            className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
            aria-hidden="true"
          />
        </div>
      </div>

      {showEditingHint && hintText ? (
        <div
          className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl text-sm font-sans font-medium"
          style={{
            background: "rgba(43,182,115,0.08)",
            borderLeft: "3px solid var(--brand-green)",
            color: "var(--brand-navy)",
          }}
          role="status"
          aria-live="polite"
        >
          <span
            className="w-2 h-2 rounded-full shrink-0"
            style={{ background: "var(--brand-green)" }}
            aria-hidden="true"
          />
          <span>{hintText}</span>
        </div>
      ) : null}
    </div>
  )
}