import { useMemo, useState } from 'react'
import { Link, useNavigate } from 'react-router'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { CirclePlus, Eye, EyeOff, Pencil, Pin, Search, Trash2 } from 'lucide-react'
import { Button, Card, Input, Modal, Segmented, Table, Tag } from 'antd'
import type { TableProps } from 'antd'
import { api } from '../lib/api'
import type { NoteItem } from '../lib/api'
import { invalidatePublic } from '../lib/invalidate'
import { useDocumentTitle } from '../features/site'
import { formatDateISO } from '../lib/utils'
import { AdminTopbar } from '../components/Layout'
import { useToast } from '@/hooks/use-toast'

type StatusFilter = 'all' | 'public' | 'private'

function useAdminNotes() {
  return useQuery({
    queryKey: ['admin', 'notes'],
    queryFn: () => api<{ items: NoteItem[]; total: number }>('/api/admin/notes'),
  })
}

export default function AdminList() {
  useDocumentTitle('笔记管理')
  const { data, isLoading } = useAdminNotes()
  const qc = useQueryClient()
  const navigate = useNavigate()
  const { toast } = useToast()
  const [confirmNote, setConfirmNote] = useState<NoteItem | null>(null)
  const [filter, setFilter] = useState<StatusFilter>('all')
  const [query, setQuery] = useState('')

  const trashMutation = useMutation({
    mutationFn: (id: number) => api(`/api/admin/notes/${id}`, { method: 'DELETE' }),
    onSuccess: () => {
      setConfirmNote(null)
      toast({ description: '笔记已移至回收站' })
      void qc.invalidateQueries({ queryKey: ['admin'] })
      invalidatePublic(qc)
    },
    onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
  })

  const toggleStatus = useMutation({
    mutationFn: async (note: NoteItem) => {
      // 状态切换：读全文 → 翻转 status → PUT
      const full = await api<NoteItem & { content: string }>(`/api/admin/notes/${note.id}`)
      return api(`/api/admin/notes/${note.id}`, {
        method: 'PUT',
        body: JSON.stringify({
          title: full.title,
          slug: full.slug,
          summary: full.summary,
          content: full.content,
          status: full.status === 'public' ? 'private' : 'public',
          tags: full.tags,
          pinned: full.pinned,
        }),
      })
    },
    onSuccess: (_d, note) => {
      toast({ description: note.status === 'public' ? '已转为私有' : '已转为公开' })
      void qc.invalidateQueries({ queryKey: ['admin'] })
      invalidatePublic(qc)
    },
    onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
  })

  const items = data?.items ?? []
  const publicCount = items.filter((n) => n.status === 'public').length
  const privateCount = items.length - publicCount

  const visible = useMemo(() => {
    const q = query.trim().toLowerCase()
    return items.filter((n) => {
      if (filter === 'public' && n.status !== 'public') return false
      if (filter === 'private' && n.status === 'public') return false
      if (q) {
        const hay = `${n.title} ${n.slug} ${n.tags.join(' ')}`.toLowerCase()
        if (!hay.includes(q)) return false
      }
      return true
    })
  }, [items, filter, query])

  const columns: TableProps<NoteItem>['columns'] = [
    {
      title: '标题',
      key: 'title',
      render: (_, n) => (
        <>
          <Link
            to={`/admin/notes/${n.id}/edit`}
            className="pn-al-note-title"
            style={{ textDecoration: 'none' }}
          >
            {n.pinned && <Pin size={12} aria-label="置顶" />}
            <span>{n.title}</span>
          </Link>
          <span className="pn-al-note-slug">/{n.slug}</span>
        </>
      ),
    },
    {
      title: '标签',
      key: 'tags',
      render: (_, n) =>
        n.tags.length > 0 ? (
          <div className="pn-al-tags">
            {n.tags.map((t) => <Tag key={t}>{t}</Tag>)}
          </div>
        ) : (
          <span className="pn-al-note-slug">—</span>
        ),
    },
    {
      title: '日期',
      key: 'date',
      render: (_, n) => <span className="pn-al-date">{formatDateISO(n.updated_at)}</span>,
    },
    {
      title: '状态',
      key: 'status',
      render: (_, n) => {
        const isPublic = n.status === 'public'
        return (
          <span className={`pn-al-status ${isPublic ? 'pn-al-is-public' : 'pn-al-is-draft'}`}>
            <span className="dot" />{isPublic ? '已发布' : '私有'}
          </span>
        )
      },
    },
    {
      title: '操作',
      key: 'actions',
      className: 'pn-al-col-actions',
      render: (_, n) => {
        const isPublic = n.status === 'public'
        return (
          <div className="pn-al-actions-cell">
            <Button
              type="text"
              icon={isPublic ? <EyeOff size={15} /> : <Eye size={15} />}
              title={isPublic ? '转为私有' : '转为公开'}
              aria-label={isPublic ? '转为私有' : '转为公开'}
              disabled={toggleStatus.isPending}
              onClick={() => void toggleStatus.mutate(n)}
            />
            <Button
              type="text"
              icon={<Pencil size={15} />}
              title="编辑"
              aria-label={`编辑笔记：${n.title}`}
              onClick={() => void navigate(`/admin/notes/${n.id}/edit`)}
            />
            <Button
              type="text"
              className="pn-btn-danger-outline"
              icon={<Trash2 size={15} />}
              title="移至回收站"
              aria-label={`移至回收站：${n.title}`}
              onClick={() => setConfirmNote(n)}
            />
          </div>
        )
      },
    },
  ]

  return (
    <>
      <AdminTopbar title="笔记管理">
        <label className="pn-admin-search">
          <Search size={14} aria-hidden />
          <Input
            variant="borderless"
            type="search"
            placeholder="搜索笔记…"
            aria-label="搜索笔记"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </label>
        <Button
          type="primary"
          icon={<CirclePlus size={15} />}
          onClick={() => void navigate('/admin/notes/new')}
        >
          新建笔记
        </Button>
      </AdminTopbar>

      <div className="pn-admin-content">
        <section className="pn-al-metrics">
          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">笔记</span>
            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
              {data?.total ?? items.length}
            </strong>
            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
              全部笔记，含 {privateCount} 篇私有
            </span>
          </Card>
          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">已发布</span>
            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
              {publicCount}
            </strong>
            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
              对外公开的笔记
            </span>
          </Card>
          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">私有</span>
            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
              {privateCount}
            </strong>
            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
              尚未公开，仅自己可见
            </span>
          </Card>
        </section>

        <Card className="pn-al-card min-w-0 flex-1 overflow-hidden" styles={{ body: { padding: 0 } }}>
          <div className="pn-al-table-head">
            <Segmented
              value={filter}
              onChange={(v) => setFilter(v as StatusFilter)}
              className="min-w-0"
              options={[
                { value: 'all', label: <>全部<span className="pn-al-tab-num">{items.length}</span></> },
                { value: 'public', label: <>已发布<span className="pn-al-tab-num">{publicCount}</span></> },
                { value: 'private', label: <>私有<span className="pn-al-tab-num">{privateCount}</span></> },
              ]}
            />
            <span className="pn-al-table-note">共 {visible.length} 篇笔记</span>
          </div>

          {isLoading ? (
            <div className="pn-empty">加载中…</div>
          ) : visible.length === 0 ? (
            <div className="pn-empty">
              {items.length === 0 ? '还没有笔记，点击「新建笔记」开始' : '没有符合筛选条件的笔记'}
            </div>
          ) : (
            <Table
              className="pn-al-table"
              columns={columns}
              dataSource={visible}
              rowKey="id"
              pagination={false}
              scroll={{ x: 600 }}
              rowClassName={(n) => (n.status === 'public' ? '' : 'pn-al-is-draft')}
            />
          )}

          <div className="pn-al-table-foot">
            <span className="pn-al-foot-note">共 {data?.total ?? 0} 篇 · 显示 {visible.length} 篇</span>
          </div>
        </Card>
      </div>

      <Modal
        open={confirmNote !== null}
        onCancel={() => setConfirmNote(null)}
        title="移入回收站？"
        width={380}
        centered
        maskClosable={false}
        cancelText="取消"
        okText={trashMutation.isPending ? '删除中…' : '确认删除'}
        confirmLoading={trashMutation.isPending}
        onOk={() => {
          if (confirmNote) trashMutation.mutate(confirmNote.id)
        }}
      >
        <p className="pn-modal-desc">
          「{confirmNote?.title}」将被软删除，30 天内可在回收站恢复。
        </p>
        {trashMutation.isError && <p className="pn-modal-error">操作失败，请重试</p>}
      </Modal>
    </>
  )
}