'use client'

import { useState, useRef, KeyboardEvent } from 'react'
import { useI18n } from '@/lib/i18n/client'

interface TagEditorProps {
  ticketId: string
  initialTags: string[]
}

export default function TagEditor({ ticketId, initialTags }: TagEditorProps) {
  const { t } = useI18n()
  const [tags, setTags] = useState<string[]>(initialTags)
  const [input, setInput] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  async function saveTags(next: string[]) {
    setSaving(true)
    setError(null)
    try {
      const res = await fetch(`/api/tickets/${ticketId}/tags`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tags: next }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? t('ticketDetail.tagEditor.error'))
        return
      }
      const data = await res.json()
      setTags(data.tags)
    } catch {
      setError(t('ticketDetail.tagEditor.networkError'))
    } finally {
      setSaving(false)
    }
  }

  function removeTag(tag: string) {
    const next = tags.filter((t) => t !== tag)
    setTags(next)
    saveTags(next)
  }

  function addTag() {
    const value = input.toLowerCase().trim()
    if (!value || tags.includes(value) || tags.length >= 10) {
      setInput('')
      return
    }
    const next = [...tags, value]
    setInput('')
    setTags(next)
    saveTags(next)
  }

  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'Enter' || e.key === ',') {
      e.preventDefault()
      addTag()
    } else if (e.key === 'Backspace' && input === '' && tags.length > 0) {
      removeTag(tags[tags.length - 1])
    }
  }

  return (
    <div className="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="mb-2 flex items-center gap-2">
        <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('ticketDetail.tagEditor.title')}</h2>
        <span className="group relative inline-flex">
          <span
            tabIndex={0}
            aria-label={t('ticketDetail.tagEditor.tooltip')}
            className="inline-flex h-4 w-4 items-center justify-center rounded-full border border-zinc-300 text-[10px] font-semibold text-zinc-500 outline-none transition hover:border-zinc-400 hover:text-zinc-700 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--brand-green)_28%,transparent)] dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
          >
            i
          </span>
          <span className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 hidden w-64 -translate-x-1/2 rounded-md border border-zinc-200 bg-white px-3 py-2 text-xs font-normal leading-5 text-zinc-700 shadow-lg group-hover:block group-focus-within:block dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-300">
            {t('ticketDetail.tagEditor.tooltip')}
          </span>
        </span>
      </div>
      <div
        className="flex min-h-11 cursor-text flex-wrap items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3 py-2 shadow-sm transition focus-within:border-[var(--brand-green)] focus-within:ring-4 focus-within:ring-[color-mix(in_srgb,var(--brand-green)_16%,transparent)] dark:border-zinc-700 dark:bg-zinc-950"
        onClick={() => inputRef.current?.focus()}
      >
        {tags.map((tag) => (
          <span
            key={tag}
            className="inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 border border-zinc-200 dark:border-zinc-700"
          >
            {tag}
            <button
              onClick={(e) => { e.stopPropagation(); removeTag(tag) }}
              className="text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-100 leading-none"
              aria-label={`Remove tag ${tag}`}
              disabled={saving}
            >
              ×
            </button>
          </span>
        ))}
        <input
          ref={inputRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          onBlur={addTag}
          placeholder={tags.length === 0 ? t('ticketDetail.tagEditor.placeholder') : ''}
          disabled={saving || tags.length >= 10}
          className="min-w-[120px] flex-1 bg-transparent text-sm text-zinc-950 outline-none placeholder:text-zinc-500 dark:text-zinc-100 dark:placeholder:text-zinc-500"
        />
      </div>
      {saving && <p className="mt-2 text-xs text-zinc-400 dark:text-zinc-500">{t('ticketDetail.tagEditor.saving')}</p>}
      {error && <p className="mt-2 text-xs text-red-600 dark:text-red-400">{error}</p>}
      <p className="mt-2 text-xs text-zinc-400 dark:text-zinc-500">{t('ticketDetail.tagEditor.hint')}</p>
    </div>
  )
}