/**
 * 商品监控 - 采集商品页面
 *
 * 功能：
 * 1. 分页查看监控任务采集到的商品
 * 2. 支持按监控任务、商品标题筛选
 */
import { useEffect, useState } from 'react'
import { ChevronLeft, ChevronRight, Eye, Loader2, PackageSearch, RefreshCw, Search } from 'lucide-react'
import {
  getListingMonitorItems,
  getListingMonitorTaskOptions,
  MONITOR_TYPE_LABELS,
  type ListingMonitorItem,
  type ListingMonitorTaskOption,
} from '@/api/listingMonitor'
import { PageLoading } from '@/components/common/Loading'
import { MonitorItemDetailModal } from './MonitorItemDetailModal'
import { useUIStore } from '@/store/uiStore'
import { getApiErrorMessage } from '@/utils/apiError'

export function MonitorItems() {
  const { addToast } = useUIStore()

  const [loading, setLoading] = useState(true)
  const [tableLoading, setTableLoading] = useState(false)
  const [items, setItems] = useState<ListingMonitorItem[]>([])
  const [taskOptions, setTaskOptions] = useState<ListingMonitorTaskOption[]>([])
  const [taskId, setTaskId] = useState<number | ''>('')
  const [keyword, setKeyword] = useState('')
  const [area, setArea] = useState('')
  const [sellerNick, setSellerNick] = useState('')
  const [itemId, setItemId] = useState('')
  const [dmSent, setDmSent] = useState('')
  const [ordered, setOrdered] = useState('')
  const [sellerFill, setSellerFill] = useState('')
  const [hasDetail, setHasDetail] = useState('')
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [total, setTotal] = useState(0)
  const [totalPages, setTotalPages] = useState(0)
  const [detailItemPk, setDetailItemPk] = useState<number | null>(null)

  const loadTaskOptions = async () => {
    try {
      const result = await getListingMonitorTaskOptions()
      if (result.success && result.data) {
        setTaskOptions(result.data.list || [])
      }
    } catch (error) {
      addToast({ type: 'error', message: getApiErrorMessage(error, '加载监控任务列表失败') })
    }
  }

  const loadItems = async (nextPage = page, nextPageSize = pageSize) => {
    try {
      setTableLoading(true)
      const result = await getListingMonitorItems(nextPage, nextPageSize, {
        monitorTaskId: taskId === '' ? undefined : taskId,
        keyword: keyword.trim() || undefined,
        area: area.trim() || undefined,
        sellerNick: sellerNick.trim() || undefined,
        itemId: itemId.trim() || undefined,
        isDmSent: dmSent === '' ? undefined : dmSent === 'true',
        isOrdered: ordered === '' ? undefined : ordered === 'true',
        sellerFill: sellerFill || undefined,
        hasDetail: hasDetail === '' ? undefined : hasDetail === 'true',
      })
      if (!result.success || !result.data) {
        setItems([])
        setTotal(0)
        setTotalPages(0)
        addToast({ type: 'error', message: result.message || '加载采集商品失败' })
        return
      }
      setItems(result.data.list || [])
      setTotal(result.data.total || 0)
      setTotalPages(result.data.total_pages || 0)
    } catch (error) {
      addToast({ type: 'error', message: getApiErrorMessage(error, '加载采集商品失败') })
    } finally {
      setLoading(false)
      setTableLoading(false)
    }
  }

  useEffect(() => {
    void loadTaskOptions()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    void loadItems(page, pageSize)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, pageSize, taskId, dmSent, ordered, sellerFill, hasDetail])

  const handleSearch = () => {
    if (page === 1) {
      void loadItems(1, pageSize)
    } else {
      setPage(1)
    }
  }

  const startIndex = total === 0 ? 0 : (page - 1) * pageSize + 1
  const endIndex = Math.min(page * pageSize, total)

  if (loading) {
    return <PageLoading />
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="page-title">采集商品</h1>
          <p className="page-description">查看各监控任务采集到的闲鱼商品信息（同一任务下按商品ID去重，重复出现则更新）。</p>
        </div>
        <button className="btn-ios-secondary" onClick={() => loadItems(page, pageSize)} disabled={tableLoading}>
          {tableLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
          刷新
        </button>
      </div>

      <div className="vben-card">
        <div className="vben-card-body">
          <div className="flex flex-wrap items-end gap-3">
            <div className="input-group">
              <label className="input-label">监控任务</label>
              <select
                className="input-ios"
                value={taskId}
                onChange={(e) => {
                  setTaskId(e.target.value === '' ? '' : Number(e.target.value))
                  setPage(1)
                }}
              >
                <option value="">全部任务</option>
                {taskOptions.map((opt) => (
                  <option key={opt.id} value={opt.id}>
                    {`#${opt.id} ${opt.keyword}（${MONITOR_TYPE_LABELS[opt.monitor_type] || opt.monitor_type}）`}
                  </option>
                ))}
              </select>
            </div>
            <div className="input-group flex-1 min-w-[200px]">
              <label className="input-label">商品标题</label>
              <input
                className="input-ios"
                placeholder="输入商品标题关键字"
                value={keyword}
                onChange={(e) => setKeyword(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleSearch()
                }}
              />
            </div>
            <div className="input-group min-w-[140px]">
              <label className="input-label">地区</label>
              <input
                className="input-ios"
                placeholder="如：江苏"
                value={area}
                onChange={(e) => setArea(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleSearch()
                }}
              />
            </div>
            <div className="input-group min-w-[160px]">
              <label className="input-label">卖家昵称</label>
              <input
                className="input-ios"
                placeholder="输入卖家昵称"
                value={sellerNick}
                onChange={(e) => setSellerNick(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleSearch()
                }}
              />
            </div>
            <div className="input-group min-w-[160px]">
              <label className="input-label">商品ID</label>
              <input
                className="input-ios"
                placeholder="输入商品ID精确查询"
                value={itemId}
                onChange={(e) => setItemId(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') handleSearch()
                }}
              />
            </div>
            <div className="input-group min-w-[130px]">
              <label className="input-label">是否已私信</label>
              <select
                className="input-ios"
                value={dmSent}
                onChange={(e) => {
                  setDmSent(e.target.value)
                  setPage(1)
                }}
              >
                <option value="">全部</option>
                <option value="true">已私信</option>
                <option value="false">未私信</option>
              </select>
            </div>
            <div className="input-group min-w-[130px]">
              <label className="input-label">是否已下单</label>
              <select
                className="input-ios"
                value={ordered}
                onChange={(e) => {
                  setOrdered(e.target.value)
                  setPage(1)
                }}
              >
                <option value="">全部</option>
                <option value="true">已下单</option>
                <option value="false">未下单</option>
              </select>
            </div>
            <div className="input-group min-w-[140px]">
              <label className="input-label">卖家补全状态</label>
              <select
                className="input-ios"
                value={sellerFill}
                onChange={(e) => {
                  setSellerFill(e.target.value)
                  setPage(1)
                }}
              >
                <option value="">全部</option>
                <option value="filled">已补全</option>
                <option value="pending">待补全</option>
                <option value="failed">补全失败</option>
              </select>
            </div>
            <div className="input-group min-w-[130px]">
              <label className="input-label">是否已获取详情</label>
              <select
                className="input-ios"
                value={hasDetail}
                onChange={(e) => {
                  setHasDetail(e.target.value)
                  setPage(1)
                }}
              >
                <option value="">全部</option>
                <option value="true">已获取</option>
                <option value="false">未获取</option>
              </select>
            </div>
            <button className="btn-ios-primary" onClick={handleSearch}>
              <Search className="w-4 h-4" />查询
            </button>
          </div>
        </div>
      </div>

      <div className="vben-card flex flex-col" style={{ height: 'calc(100vh - 320px)', minHeight: '420px' }}>
        <div className="vben-card-header flex items-center justify-between">
          <h2 className="vben-card-title">
            <PackageSearch className="w-4 h-4" />
            采集商品列表
          </h2>
          <span className="badge-primary">共 {total} 条</span>
        </div>

        <div className="flex-1 overflow-auto">
          <table className="table-ios min-w-[2800px]">
            <thead className="sticky top-0 bg-white dark:bg-slate-800 z-10">
              <tr>
                <th>ID</th>
                <th>所属任务</th>
                <th>商品ID</th>
                <th>图片</th>
                <th>卖家头像</th>
                <th>商品标题</th>
                <th>价格</th>
                <th>标签</th>
                <th>地区</th>
                <th>卖家昵称</th>
                <th>卖家ID</th>
                <th>卖家真实ID</th>
                <th>补全状态</th>
                <th>补全失败原因</th>
                <th>想要</th>
                <th>发布时间</th>
                <th>已私信</th>
                <th>私信账号</th>
                <th>私信会话ID</th>
                <th>私信失败原因</th>
                <th>私信次数</th>
                <th>已下单</th>
                <th>订单ID</th>
                <th>下单失败原因</th>
                <th>下单次数</th>
                <th>详情</th>
                <th>最近采集</th>
                <th>采集时间</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {tableLoading ? (
                <tr>
                  <td colSpan={30} className="text-center py-12">
                    <Loader2 className="w-6 h-6 animate-spin text-blue-500 mx-auto" />
                  </td>
                </tr>
              ) : items.length === 0 ? (
                <tr>
                  <td colSpan={30} className="text-center py-12 text-slate-400">
                    <div className="flex flex-col items-center gap-2">
                      <PackageSearch className="w-12 h-12 text-slate-300 dark:text-slate-600" />
                      <p>暂无采集商品</p>
                    </div>
                  </td>
                </tr>
              ) : (
                items.map((item) => (
                  <tr key={item.id}>
                    <td className="whitespace-nowrap text-slate-500 dark:text-slate-400">{item.id}</td>
                    <td className="max-w-[160px]">
                      <span className="truncate block text-slate-700 dark:text-slate-200" title={item.monitor_task_keyword || `任务#${item.monitor_task_id}`}>
                        {item.monitor_task_keyword || '-'}
                      </span>
                      <span className="text-xs text-slate-400">#{item.monitor_task_id}</span>
                    </td>
                    <td className="whitespace-nowrap text-slate-600 dark:text-slate-300">{item.item_id}</td>
                    <td>
                      {item.pic_url ? (
                        <img src={item.pic_url} alt="" className="w-12 h-12 object-cover rounded" loading="lazy" />
                      ) : (
                        <div className="w-12 h-12 rounded bg-slate-100 dark:bg-slate-700" />
                      )}
                    </td>
                    <td>
                      {item.seller_avatar ? (
                        <img src={item.seller_avatar} alt="" className="w-9 h-9 object-cover rounded-full" loading="lazy" />
                      ) : (
                        '-'
                      )}
                    </td>
                    <td className="max-w-[280px] font-medium text-slate-800 dark:text-slate-100">
                      <span className="truncate block" title={item.title || ''}>{item.title || '-'}</span>
                    </td>
                    <td className="whitespace-nowrap text-red-600 dark:text-red-400">{item.price != null ? `¥${item.price}` : '-'}</td>
                    <td className="max-w-[160px]"><span className="truncate block" title={item.tags || ''}>{item.tags || '-'}</span></td>
                    <td className="whitespace-nowrap">{item.area || '-'}</td>
                    <td className="max-w-[120px]"><span className="truncate block" title={item.seller_nick || ''}>{item.seller_nick || '-'}</span></td>
                    <td className="max-w-[140px]"><span className="truncate block" title={item.seller_id || ''}>{item.seller_id || '-'}</span></td>
                    <td className="whitespace-nowrap text-slate-600 dark:text-slate-300">{item.seller_user_id || '-'}</td>
                    <td className="whitespace-nowrap">
                      {item.seller_fill_status === 'failed' ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">补全失败</span>
                      ) : item.seller_user_id ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">已补全</span>
                      ) : (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400">待补全</span>
                      )}
                    </td>
                    <td className="max-w-[200px]"><span className="truncate block" title={item.seller_fill_fail_reason || ''}>{item.seller_fill_fail_reason || '-'}</span></td>
                    <td>{item.want_count || '-'}</td>
                    <td className="whitespace-nowrap text-slate-500 dark:text-slate-400">{item.publish_time ? new Date(item.publish_time).toLocaleString('zh-CN') : '-'}</td>
                    <td className="whitespace-nowrap">
                      {item.dm_status === 'failed' ? (
                        (item.dm_attempts || 0) >= 3 ? (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">私信失败(已放弃)</span>
                        ) : (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">私信失败(重试中)</span>
                        )
                      ) : item.is_dm_sent ? (
                        item.dm_status === 'success' ? (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">私信成功</span>
                        ) : (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">已发待确认</span>
                        )
                      ) : (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400">未私信</span>
                      )}
                    </td>
                    <td className="whitespace-nowrap text-slate-600 dark:text-slate-300">{item.dm_account_id || '-'}</td>
                    <td className="max-w-[160px]"><span className="truncate block" title={item.dm_chat_id || ''}>{item.dm_chat_id || '-'}</span></td>
                    <td className="max-w-[200px]"><span className="truncate block" title={item.dm_fail_reason || ''}>{item.dm_fail_reason || '-'}</span></td>
                    <td className="text-center">{item.dm_attempts || 0}</td>
                    <td className="whitespace-nowrap">
                      {item.order_status === 'duplicate' ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400" title="同商品已在其他监控任务下单，跳过重复下单">重复跳过</span>
                      ) : item.order_status === 'no_account' && !item.is_ordered ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" title={item.order_fail_reason || '无可用下单账号'}>无可用账号</span>
                      ) : item.order_status === 'failed' && !item.is_ordered ? (
                        (item.order_attempts || 0) >= 3 ? (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">下单失败(已放弃)</span>
                        ) : (
                          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">下单失败(重试中)</span>
                        )
                      ) : item.is_ordered ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">已下单</span>
                      ) : (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400">未下单</span>
                      )}
                    </td>
                    <td className="whitespace-nowrap text-slate-600 dark:text-slate-300">{item.order_id || '-'}</td>
                    <td className="max-w-[200px]"><span className="truncate block" title={item.order_fail_reason || ''}>{item.order_fail_reason || '-'}</span></td>
                    <td className="text-center">{item.order_attempts || 0}</td>
                    <td className="whitespace-nowrap">
                      {item.has_detail ? (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">已获取</span>
                      ) : (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-400">未获取</span>
                      )}
                    </td>
                    <td className="whitespace-nowrap text-slate-500 dark:text-slate-400">{item.last_seen_at ? new Date(item.last_seen_at).toLocaleString('zh-CN') : '-'}</td>
                    <td className="whitespace-nowrap text-slate-500 dark:text-slate-400">{item.created_at ? new Date(item.created_at).toLocaleString('zh-CN') : '-'}</td>
                    <td className="whitespace-nowrap text-slate-500 dark:text-slate-400">{item.updated_at ? new Date(item.updated_at).toLocaleString('zh-CN') : '-'}</td>
                    <td>
                      <div className="flex items-center gap-2 whitespace-nowrap">
                        <button
                          type="button"
                          onClick={() => setDetailItemPk(item.id)}
                          className="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline"
                        >
                          <Eye className="w-4 h-4" />详情
                        </button>
                        {item.target_url ? (
                          <a
                            href={`https://www.goofish.com/item?id=${item.item_id}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-600 dark:text-blue-400 hover:underline"
                          >
                            查看
                          </a>
                        ) : (
                          '-'
                        )}
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        {total > 0 && (
          <div className="flex-shrink-0 vben-card-footer flex flex-col sm:flex-row items-center justify-between gap-4 px-4 py-3 border-t border-slate-200 dark:border-slate-700">
            <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
              <span>每页</span>
              <select
                value={pageSize}
                onChange={(e) => {
                  setPageSize(Number(e.target.value))
                  setPage(1)
                }}
                className="px-2 py-1 border border-slate-300 dark:border-slate-600 rounded bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300"
              >
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
              </select>
              <span>条</span>
              <span className="ml-2">显示 {startIndex}-{endIndex} 条，共 {total} 条</span>
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                disabled={page === 1 || tableLoading}
                className="p-2 rounded border border-slate-300 dark:border-slate-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-slate-700"
              >
                <ChevronLeft className="w-4 h-4" />
              </button>
              <span className="px-3 py-1 text-sm text-slate-600 dark:text-slate-400">第 {page} / {totalPages || 1} 页</span>
              <button
                onClick={() => setPage((prev) => Math.min(totalPages || 1, prev + 1))}
                disabled={page >= (totalPages || 1) || tableLoading}
                className="p-2 rounded border border-slate-300 dark:border-slate-600 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-slate-700"
              >
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        )}
      </div>

      {detailItemPk !== null && (
        <MonitorItemDetailModal itemPk={detailItemPk} onClose={() => setDetailItemPk(null)} />
      )}
    </div>
  )
}

export default MonitorItems
