'use client'

import Link from 'next/link'
import { useState, type FormEvent } from 'react'
import { PrimaryButton, TextField } from '@/app/FormFields'
import { useI18n } from '@/lib/i18n/client'

type SearchResult = {
  id: string
  title: string
  slug: string
  kind: string
  tags: string[]
  bodyMarkdown: string
  score: number
}

export default function KnowledgeSearch() {
  const { t } = useI18n()
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<SearchResult[]>([])
  const [searching, setSearching] = useState(false)

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    if (query.trim().length < 2) return
    setSearching(true)
    const response = await fetch(`/api/knowledge/search?q=${encodeURIComponent(query)}`)
    const payload = await response.json().catch(() => ({ results: [] })) as { results?: SearchResult[] }
    setResults(payload.results ?? [])
    setSearching(false)
  }

  return (
    <section className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
      <form onSubmit={submit} className="flex gap-2">
        <TextField
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          className="min-w-0 flex-1"
          placeholder={t('knowledge.search.placeholder')}
        />
        <PrimaryButton
          type="submit"
          className="shrink-0"
        >
          {searching ? t('knowledge.search.searching') : t('knowledge.search.search')}
        </PrimaryButton>
      </form>

      {results.length > 0 ? (
        <ul className="mt-4 divide-y divide-zinc-200 dark:divide-zinc-800">
          {results.map((result) => (
            <li key={result.id} className="py-3">
              <Link href={`/knowledge/${result.id}`} className="text-sm font-semibold text-zinc-950 hover:underline dark:text-white">
                {result.title}
              </Link>
              <p className="mt-1 break-all text-xs text-zinc-600 dark:text-zinc-400">
                {result.kind} · {result.slug} · score {Number(result.score).toFixed(2)}
              </p>
              {result.tags.length > 0 ? (
                <div className="mt-2 flex flex-wrap gap-1">
                  {result.tags.map((tag) => (
                    <span key={tag} className="rounded bg-zinc-100 px-1.5 py-0.5 text-[11px] text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
                      {tag}
                    </span>
                  ))}
                </div>
              ) : null}
              <p className="mt-1 line-clamp-2 text-sm text-zinc-700 dark:text-zinc-300">{result.bodyMarkdown}</p>
            </li>
          ))}
        </ul>
      ) : null}
    </section>
  )
}