'use client';

import { memo, useCallback, useMemo, useState } from 'react';
import { Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
import type { GlossaryTermInput } from './types';
import { MAX_TERMS_PER_GLOSSARY, SUPPORTED_LANGUAGES } from './types';
import { useI18n } from '@/lib/i18n';
import { cn } from '@/lib/utils';

interface TermEditorProps {
  terms: GlossaryTermInput[];
  onChange: (terms: GlossaryTermInput[]) => void;
  disabled?: boolean;
  sourceLanguage?: string;
}

function getTermKey(term: GlossaryTermInput, index: number): string {
  const contentHash = `${term.source}-${term.target}`.slice(0, 50);
  return `term-${index}-${contentHash}`;
}

export const TermEditor = memo(function TermEditor({
  terms,
  onChange,
  disabled = false,
  sourceLanguage = 'fr',
}: TermEditorProps) {
  const { t } = useI18n();

  const termKeys = useMemo(() => {
    return terms.map((term, index) => getTermKey(term, index));
  }, [terms]);

  const translationLangs = useMemo(() => {
    return SUPPORTED_LANGUAGES.filter(l => l.code !== sourceLanguage);
  }, [sourceLanguage]);

  const addTerm = useCallback(() => {
    if (terms.length >= MAX_TERMS_PER_GLOSSARY) return;
    onChange([...terms, { source: '', target: '', translations: {} }]);
  }, [terms, onChange]);

  const removeTerm = useCallback((index: number) => {
    onChange(terms.filter((_, i) => i !== index));
  }, [terms, onChange]);

  const updateField = useCallback((index: number, field: 'source' | 'target', value: string) => {
    const newTerms = [...terms];
    newTerms[index] = { ...newTerms[index], [field]: value };
    onChange(newTerms);
  }, [terms, onChange]);

  const updateTranslation = useCallback((index: number, langCode: string, value: string) => {
    const newTerms = [...terms];
    const term = newTerms[index];
    const translations = { ...(term.translations || {}) };
    if (value.trim()) {
      translations[langCode] = value;
    } else {
      delete translations[langCode];
    }
    newTerms[index] = { ...term, translations };
    onChange(newTerms);
  }, [terms, onChange]);

  const maxTermsReached = terms.length >= MAX_TERMS_PER_GLOSSARY;
  const validTermsCount = terms.filter(t => t.source.trim() && t.target.trim()).length;

  const sourceLabel = SUPPORTED_LANGUAGES.find(l => l.code === sourceLanguage)?.flag ?? '🌐';

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/30">
          {validTermsCount} / {terms.length} {t('glossaries.dialog.terms')}
        </span>
      </div>

      {/* Term rows */}
      <div className="space-y-4">
        {terms.map((term, index) => {
          const translations = term.translations || {};
          const filledCount = Object.keys(translations).filter(k => translations[k]?.trim()).length;

          return (
            <TermRow
              key={termKeys[index]}
              term={term}
              index={index}
              disabled={disabled}
              sourceFlag={sourceLabel}
              sourceLanguage={sourceLanguage}
              translationLangs={translationLangs}
              filledTranslations={filledCount}
              onUpdateField={updateField}
              onUpdateTranslation={updateTranslation}
              onRemove={removeTerm}
            />
          );
        })}
      </div>

      {/* Add button */}
      <button
        onClick={addTerm}
        disabled={disabled || maxTermsReached}
        className="w-full py-4 border-2 border-dashed border-black/10 dark:border-white/10 rounded-2xl text-[10px] font-black uppercase tracking-widest text-brand-dark/30 dark:text-white/30 hover:text-brand-dark dark:hover:text-white hover:border-brand-accent/30 transition-all disabled:opacity-40 flex items-center justify-center gap-2"
      >
        <Plus size={14} />
        {t('glossaries.termEditor.addTerm')}
      </button>

      {maxTermsReached && (
        <p className="text-[9px] font-black uppercase tracking-widest text-amber-600">
          {t('glossaries.termEditor.maxReached', { max: String(MAX_TERMS_PER_GLOSSARY) })}
        </p>
      )}
    </div>
  );
});

/* ── Individual Term Row with expandable translations ── */

interface TermRowProps {
  term: GlossaryTermInput;
  index: number;
  disabled: boolean;
  sourceFlag: string;
  sourceLanguage: string;
  translationLangs: { code: string; label: string; flag: string }[];
  filledTranslations: number;
  onUpdateField: (index: number, field: 'source' | 'target', value: string) => void;
  onUpdateTranslation: (index: number, langCode: string, value: string) => void;
  onRemove: (index: number) => void;
}

const TermRow = memo(function TermRow({
  term,
  index,
  disabled,
  sourceFlag,
  sourceLanguage,
  translationLangs,
  filledTranslations,
  onUpdateField,
  onUpdateTranslation,
  onRemove,
}: TermRowProps) {
  const [expanded, setExpanded] = useState(false);
  const translations = term.translations || {};

  // Auto-expand if there are existing translations
  const hasExisting = Object.keys(translations).some(k => translations[k]?.trim());

  return (
    <div className="rounded-2xl border border-black/5 dark:border-white/10 bg-white dark:bg-white/5 overflow-hidden">
      {/* Main row: source + default target */}
      <div className="grid grid-cols-[1fr_24px_1fr_32px] items-center gap-2 p-4">
        <input
          value={term.source}
          onChange={(e) => onUpdateField(index, 'source', e.target.value)}
          placeholder={`${sourceFlag} Source...`}
          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
          disabled={disabled}
          aria-label={`Source term ${index + 1}`}
        />
        <span className="text-brand-dark/20 dark:text-white/20 text-center">→</span>
        <input
          value={term.target}
          onChange={(e) => onUpdateField(index, 'target', e.target.value)}
          placeholder="Translation..."
          className="font-mono text-xs bg-transparent outline-none w-full placeholder:text-brand-dark/20 dark:placeholder:text-white/20"
          disabled={disabled}
          aria-label={`Target translation ${index + 1}`}
        />
        <div className="flex items-center gap-1">
          <button
            onClick={() => setExpanded(!expanded)}
            className={cn(
              "p-1 rounded-lg transition-all",
              expanded ? "bg-brand-accent/10 text-brand-accent" : "text-brand-dark/20 hover:text-brand-accent",
              hasExisting && !expanded && "text-brand-accent/60"
            )}
            title="Translations"
          >
            {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
          </button>
          <button
            onClick={() => onRemove(index)}
            disabled={disabled}
            className="p-1 rounded-lg text-brand-dark/20 hover:text-red-500 transition-all opacity-0 group-hover:opacity-100"
            aria-label={`Remove term ${index + 1}`}
          >
            <Trash2 size={14} />
          </button>
        </div>
      </div>

      {/* Expanded: multilingual translations grid */}
      {expanded && (
        <div className="px-4 pb-4 pt-2 border-t border-black/5 dark:border-white/5">
          <p className="text-[8px] font-black uppercase tracking-widest text-brand-dark/20 dark:text-white/20 mb-3">
            Translations ({filledTranslations}/{translationLangs.length})
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
            {translationLangs.map((lang) => (
              <div
                key={lang.code}
                className={cn(
                  "flex items-center gap-2 rounded-xl border px-3 py-2 transition-all",
                  translations[lang.code]?.trim()
                    ? "border-brand-accent/20 bg-brand-accent/5"
                    : "border-black/5 dark:border-white/10 bg-brand-muted/30 dark:bg-white/5"
                )}
              >
                <span className="text-sm shrink-0">{lang.flag}</span>
                <input
                  value={translations[lang.code] || ''}
                  onChange={(e) => onUpdateTranslation(index, lang.code, e.target.value)}
                  placeholder={lang.code.toUpperCase()}
                  className="font-mono text-[11px] bg-transparent outline-none w-full min-w-0 placeholder:text-brand-dark/15 dark:placeholder:text-white/15"
                  disabled={disabled}
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
});
