app/(app)/profile/LearningLanguagesEditor.tsx

"use client";

import { useTransition, useState } from "react";
import { useRouter } from "next/navigation";
import { languageName, LANGUAGES } from "@/lib/languages";
import { X, Plus } from "lucide-react";
import ReactCountryFlag from "react-country-flag";

export function LearningLanguagesEditor({
  targetLangs,
  nativeLang,
  level,
}: {
  targetLangs: string[];
  nativeLang: string;
  level: string;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [isAdding, setIsAdding] = useState(false);

  function updateLangs(newList: string[]) {
    if (isPending) return;
    startTransition(async () => {
      try {
        await fetch("/api/me/profile", {
          method: "PUT",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ 
            nativeLang, 
            targetLang: newList[0] || "en", 
            targetLangs: newList, 
            level 
          }),
        });
        router.refresh();
      } finally {
        setIsAdding(false);
      }
    });
  }

  const availableLangs = LANGUAGES.filter(
    (l) => l.code !== nativeLang && !targetLangs.includes(l.code)
  );

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-3">
        {targetLangs.map((lang) => {
          const label = languageName(lang);

          return (
            <div
              key={lang}
              className="group relative flex items-center gap-2 rounded-xl border-2 border-black bg-[#FFD21E] px-4 py-2 text-sm font-black text-black shadow-[3px_3px_0px_rgba(0,0,0,1)]"
            >
              {label}
              <button
                type="button"
                aria-label={`Remove ${label} from learning languages`}
                onClick={() => updateLangs(targetLangs.filter((l) => l !== lang))}
                disabled={isPending || targetLangs.length <= 1}
                className="ml-1 p-0.5 rounded-md hover:bg-black/10 transition-colors disabled:opacity-0 disabled:pointer-events-none"
              >
                <X size={14} strokeWidth={3} />
              </button>
            </div>
          );
        })}

        <button
          type="button"
          aria-controls="learning-language-options"
          aria-expanded={isAdding}
          aria-label={isAdding ? "Close language picker" : "Add a learning language"}
          onClick={() => setIsAdding(!isAdding)}
          disabled={isPending}
          className="flex h-10 w-10 items-center justify-center rounded-xl border-2 border-black bg-white text-black shadow-[3px_3px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] active:shadow-[1px_1px_0px_rgba(0,0,0,1)] disabled:opacity-50"
        >
          <Plus size={20} strokeWidth={3} className={`transition-transform duration-200 ${isAdding ? "rotate-45" : ""}`} />
        </button>
      </div>

      {isAdding && (
        <div
          id="learning-language-options"
          className="max-h-64 w-full overflow-y-auto rounded-xl border-2 border-black bg-white p-1 shadow-[6px_6px_0px_rgba(0,0,0,1)]"
        >
          {availableLangs.length > 0 ? (
            availableLangs.map((lang) => (
              <button
                key={lang.code}
                type="button"
                aria-label={`Add ${lang.name} to learning languages`}
                onClick={() => updateLangs([...targetLangs, lang.code])}
                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-bold text-black transition-colors hover:bg-[#F3F4F6]"
              >
                <ReactCountryFlag countryCode={lang.flag} svg style={{ width: "1.1rem", height: "1.1rem" }} />
                <span>{lang.name}</span>
              </button>
            ))
          ) : (
            <div className="px-3 py-2 text-xs font-bold italic text-gray-500">No more languages</div>
          )}
        </div>
      )}
      
      {isPending && (
        <div className="text-[10px] font-black uppercase tracking-widest text-[#0EA5A4] animate-pulse">
          Updating languages...
        </div>
      )}
    </div>
  );
}