"use client";

import { Check } from "lucide-react";
import { CHAT_COPY, LANGUAGE_CODES, LANGUAGE_META, type LanguageCode } from "@/lib/chat/i18n";
import { cn } from "@/lib/utils";

type Props = {
  /** Language the picker's own copy is shown in (the current one, or English). */
  displayLanguage: LanguageCode;
  current: LanguageCode | null;
  onSelect: (language: LanguageCode) => void;
};

export default function LanguagePicker({ displayLanguage, current, onSelect }: Props) {
  const copy = CHAT_COPY[displayLanguage];

  return (
    <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-gradient-to-b from-red-50/50 to-white px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:h-[min(28rem,calc(100dvh-13rem))] sm:flex-none sm:pb-4">
      <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
        <div className="text-center">
          <h3 id="biznie-ai-language-title" className="text-base font-bold text-gray-900">
            {copy.chooseLanguageTitle}
          </h3>
          <p className="mt-1 text-sm text-gray-500">{copy.chooseLanguageSubtitle}</p>
        </div>

        <div role="group" aria-labelledby="biznie-ai-language-title" className="mt-4 grid grid-cols-1 gap-2.5 sm:grid-cols-2">
          {LANGUAGE_CODES.map((language) => {
            const selected = language === current;
            return (
              <button
                key={language}
                type="button"
                lang={LANGUAGE_META[language].locale}
                aria-pressed={selected}
                onClick={() => onSelect(language)}
                className={cn(
                  "group rounded-xl border bg-white px-3 py-3 text-left transition-all hover:border-[#CC1414]/35 hover:bg-red-50/40 hover:shadow-sm",
                  selected ? "border-[#CC1414]/50 bg-red-50/40" : "border-gray-200"
                )}
              >
                <div className="flex items-center justify-between gap-2">
                  <div>
                    <p className="text-sm font-semibold text-gray-900">{LANGUAGE_META[language].label}</p>
                    <p className="mt-0.5 text-xs text-gray-500">{LANGUAGE_META[language].nativeLabel}</p>
                  </div>
                  <span
                    aria-hidden
                    className={cn(
                      "rounded-full px-2 py-1 text-[10px] font-semibold transition-colors",
                      selected
                        ? "bg-[#CC1414] text-white"
                        : "bg-red-50 text-[#CC1414] group-hover:bg-[#CC1414] group-hover:text-white"
                    )}
                  >
                    {selected ? <Check size={12} /> : CHAT_COPY[language].select}
                  </span>
                </div>
              </button>
            );
          })}
        </div>

        <p className="mt-3 text-center text-[11px] text-gray-400">{CHAT_COPY.en.chooseLanguageBtn}</p>
      </div>
    </div>
  );
}