import { useState } from 'react'
import { Link } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { Pin } from 'lucide-react'
import { api } from '../lib/api'
import type { NoteItem, NoteList, TagCount } from '../lib/api'
import { formatDate } from '../lib/utils'

function useNotes(page: number, tag?: string) {
  // 不传 page_size：服务端默认值即站点设置（管理员可改），首页随设置生效
  const qs = new URLSearchParams({ page: String(page) })
  if (tag) qs.set('tag', tag)
  return useQuery({
    queryKey: ['notes', page, tag ?? ''],
    queryFn: () => api<NoteList>(`/api/notes?${qs}`),
  })
}

function useTags() {
  return useQuery({
    queryKey: ['tags'],
    queryFn: () => api<{ tags: TagCount[] }>('/api/tags'),
  })
}

function NoteCard({ note }: { note: NoteItem }) {
  return (
    <article className="group border-b border-zinc-100 py-6 first:pt-0 dark:border-zinc-900">
      <div className="flex items-center gap-2">
        {note.pinned && (
          <span className="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700 dark:bg-amber-900/40 dark:text-amber-400">
            <Pin size={11} /> 置顶
          </span>
        )}
        <time className="text-xs text-zinc-400">{formatDate(note.updated_at)}</time>
      </div>
      <h2 className="mt-1 text-xl font-semibold leading-snug">
        <Link
          to={`/notes/${encodeURIComponent(note.slug)}`}
          className="hover:text-blue-600 dark:hover:text-blue-400"
        >
          {note.title}
        </Link>
      </h2>
      {note.summary && (
        <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
          {note.summary}
        </p>
      )}
      {note.tags.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-2">
          {note.tags.map((t) => (
            <Link
              key={t}
              to={`/tags/${encodeURIComponent(t)}`}
              className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs text-zinc-600 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
            >
              #{t}
            </Link>
          ))}
        </div>
      )}
    </article>
  )
}

export default function Home() {
  const [page, setPage] = useState(1)
  const { data, isLoading } = useNotes(page)
  const { data: tagsData } = useTags()
  const totalPages = data ? Math.max(1, Math.ceil(data.total / data.page_size)) : 1

  return (
    <div className="flex flex-col gap-8 lg:flex-row-reverse">
      <aside className="lg:w-48 lg:shrink-0">
        {tagsData && tagsData.tags.length > 0 && (
          <div className="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
            <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-400">标签</h3>
            <div className="flex flex-wrap gap-2 lg:flex-col lg:gap-1">
              {tagsData.tags.map((t) => (
                <Link
                  key={t.name}
                  to={`/tags/${encodeURIComponent(t.name)}`}
                  className="text-sm text-zinc-600 hover:text-blue-600 dark:text-zinc-400 dark:hover:text-blue-400"
                >
                  #{t.name} <span className="text-zinc-400">({t.count})</span>
                </Link>
              ))}
            </div>
          </div>
        )}
      </aside>
      <section className="min-w-0 flex-1">
        {isLoading ? (
          <p className="py-12 text-center text-zinc-400">加载中…</p>
        ) : !data || data.items.length === 0 ? (
          <p className="py-12 text-center text-zinc-400">还没有公开的笔记</p>
        ) : (
          data.items.map((n) => <NoteCard key={n.slug} note={n} />)
        )}
        {totalPages > 1 && (
          <nav className="mt-8 flex items-center justify-between text-sm">
            <button
              type="button"
              disabled={page <= 1}
              onClick={() => setPage((p) => p - 1)}
              className="rounded px-3 py-1.5 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-zinc-800"
            >
              ← 上一页
            </button>
            <span className="text-zinc-400">
              {page} / {totalPages}
            </span>
            <button
              type="button"
              disabled={page >= totalPages}
              onClick={() => setPage((p) => p + 1)}
              className="rounded px-3 py-1.5 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-zinc-800"
            >
              下一页 →
            </button>
          </nav>
        )}
      </section>
    </div>
  )
}