import { searchArticles } from '@/lib/search'
import { Seo } from '@/components/ui/seo'
import { ArticleCard } from '@/components/article/article-card'
import { Link, useSearchParams } from 'react-router-dom'
import { getAllArticles, getArticlesByTag, getSearchableArticles } from '@/lib/content'
import { useLang, usePrefix, useT } from '@/lib/i18n'

export const ArticleListPage = () => {
  const lang = useLang()
  const prefix = usePrefix()
  const t = useT()
  const [params, setParams] = useSearchParams()
  const tag = params.get('tag')
  const query = params.get('q') ?? ''
  const searching = params.has('q')
  const candidates = tag ? getArticlesByTag(tag, lang) : searching ? getSearchableArticles(lang) : getAllArticles(lang)
  const articles = searchArticles(candidates, query)

  return (
    <div className="page">
      <Seo
        title={t.articleListTitle}
        description={t.articleListDesc}
        path={`${prefix}/articles`}
      />
      <h1 className="t-h1 mb-8">{t.articleListTitle}</h1>
      <form key={`${query}:${tag ?? ''}`} role="search" className="rounded-xl border border-slate-200 bg-white p-5 mb-8" onSubmit={event => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const next = new URLSearchParams(params)
        next.set('q', String(data.get('q') ?? '').trim())
        setParams(next)
      }}>
        <label htmlFor="lesson-search" className="block font-bold mb-3">教材を検索</label>
        <div className="flex gap-3"><input id="lesson-search" name="q" type="search" defaultValue={query} placeholder="例：useEffect 通信" className="min-w-0 flex-1 rounded-lg border border-slate-300 px-3 py-3" /><button className="btn" type="submit">検索</button></div>
        <p className="text-xs text-slate-500 leading-6 mt-3">タイトル・説明・シリーズ名・タグを検索します。スペースで区切るとすべての語を含む教材に絞ります。空欄で検索すると全教材を表示します。{tag && '現在のタグ内を検索しています。'}</p>
        {searching && <p role="status" className="text-sm mt-3">{query ? `「${query}」の検索結果` : '全教材'}：{articles.length}件 <Link to={`${prefix}/articles/`} className="text-brand-700 underline">検索とタグを解除</Link></p>}
      </form>
      {!tag && !searching && <section className="rounded-xl border border-slate-200 bg-white p-6 mb-8"><h2 className="t-h3 mb-4">まず、症状を切り分ける</h2><ul className="space-y-3 text-brand-800 underline"><li><Link to="/articles/react-error-cannot-read-properties/">データを読む前に画面が落ちる → undefinedと取得状態</Link></li><li><Link to="/articles/react-error-useeffect-infinite-loop/">更新や通信が止まらない → Effectの循環</Link></li><li><Link to="/practice/#keys">並べ替えたら入力が別の行へ移った → keyの実験</Link></li><li><Link to="/practice/#requests">検索結果が前の内容へ戻る → 通信の競合</Link></li></ul><p className="text-sm text-slate-600 mt-5">エラー全文を残し、再現する最小の操作を決めます。修正後も同じ操作で結果を確認してください。</p></section>}
      {tag && <p className="mb-6 text-slate-600">「{tag}」の記事：{articles.length}件 <Link to={`${prefix}/articles/`} className="text-brand-700 underline">絞り込みを解除</Link></p>}
      {articles.length === 0 ? (
        <p className="text-slate-600">一致する教材はありません。検索語を短くするか、スペースで区切った語を減らしてください。</p>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {articles.map((article) => (
            <ArticleCard key={`${article.seriesSlug ?? "article"}-${article.slug}`} article={article} seriesSlug={article.seriesSlug} />
          ))}
        </div>
      )}
    </div>
  )
}