'use client';

import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
import { X } from 'lucide-react';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

/** API / eski metinden etiket listesi (satır sonu veya virgül). */
export function tagsFromStoredValue(s: string | null | undefined): string[] {
  const raw = (s ?? '').trim();
  if (!raw) return [];
  const byNl = raw.split(/\r?\n/).map((t) => t.trim()).filter(Boolean);
  if (byNl.length > 1) return byNl;
  if (raw.includes(',')) return raw.split(',').map((t) => t.trim()).filter(Boolean);
  return [raw];
}

export function joinMealTags(tags: string[]): string {
  return tags.join('\n');
}

export type MealTagInputHandle = {
  /** Taslak metni etiketlere ekler; güncel etiket listesini döner (Kaydet ile aynı anda kullanın). */
  flush: () => string[];
};

export type MealTagInputProps = {
  id: string;
  label: string;
  tags: string[];
  onTagsChange: (next: string[]) => void;
  placeholder?: string;
  hint?: string;
  disabled?: boolean;
};

export const MealTagInput = forwardRef<MealTagInputHandle, MealTagInputProps>(function MealTagInput(
  {
    id,
    label,
    tags,
    onTagsChange,
    placeholder = 'Öğe yazın…',
    hint = 'Enter veya virgül ile ekleyin. Silmek için ×.',
    disabled = false,
  },
  ref,
) {
  const [draft, setDraft] = useState('');
  const draftRef = useRef(draft);
  draftRef.current = draft;
  const tagsRef = useRef(tags);
  tagsRef.current = tags;

  const mergeDraft = useCallback((): string[] => {
    if (disabled) return [...tagsRef.current];
    const t = draftRef.current.trim();
    let next = [...tagsRef.current];
    if (t) {
      const parts = t.split(',').map((p) => p.trim()).filter(Boolean);
      for (const p of parts) {
        if (p && !next.includes(p)) next.push(p);
      }
      draftRef.current = '';
      setDraft('');
      onTagsChange(next);
    }
    return next;
  }, [disabled, onTagsChange]);

  useImperativeHandle(ref, () => ({ flush: mergeDraft }), [mergeDraft]);

  const removeAt = useCallback(
    (index: number) => {
      if (disabled) return;
      onTagsChange(tagsRef.current.filter((_, i) => i !== index));
    },
    [disabled, onTagsChange],
  );

  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (disabled) return;
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault();
      mergeDraft();
      return;
    }
    if (e.key === 'Backspace' && draftRef.current === '' && tagsRef.current.length > 0) {
      e.preventDefault();
      removeAt(tagsRef.current.length - 1);
    }
  };

  return (
    <div className="space-y-1.5">
      <Label htmlFor={id}>{label}</Label>
      <div
        className={cn(
          'flex min-h-[2.75rem] flex-wrap items-center gap-2 rounded-lg border border-slate-200 bg-white px-2 py-2 dark:border-white/10 dark:bg-white/[0.04]',
          disabled && 'pointer-events-none opacity-60',
        )}
      >
        {tags.map((tag, i) => (
          <span
            key={`${tag}-${i}`}
            className="inline-flex max-w-full items-center gap-1 rounded-full border border-slate-200/90 bg-slate-100/90 pl-2.5 pr-1 text-[13px] font-medium text-slate-800 dark:border-white/10 dark:bg-white/[0.12] dark:text-slate-100"
          >
            <span className="truncate">{tag}</span>
            <button
              type="button"
              onClick={() => removeAt(i)}
              className="flex size-6 shrink-0 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-200/80 hover:text-slate-900 dark:hover:bg-white/10 dark:hover:text-white"
              aria-label={`${tag} kaldır`}
            >
              <X className="size-3.5" strokeWidth={2} />
            </button>
          </span>
        ))}
        <input
          id={id}
          type="text"
          value={draft}
          onChange={(e) => {
            const v = e.target.value;
            draftRef.current = v;
            setDraft(v);
          }}
          onKeyDown={onKeyDown}
          onBlur={() => mergeDraft()}
          disabled={disabled}
          placeholder={tags.length === 0 ? placeholder : ''}
          className="min-w-[8rem] flex-1 border-0 bg-transparent py-1 text-sm text-slate-900 outline-none placeholder:text-slate-400 dark:text-white dark:placeholder:text-slate-500"
        />
      </div>
      {hint ? <p className="text-xs text-slate-500 dark:text-slate-500">{hint}</p> : null}
    </div>
  );
});

MealTagInput.displayName = 'MealTagInput';