'use client'

import React, { useState, useEffect } from 'react'
import { useDocumentInfo } from '@payloadcms/ui'

/**
 * 产品编辑页 — 淘宝信息同步按钮
 *
 * 放置在淘宝链接 Tab 顶部（UI 字段），显示两个操作按钮：
 *   🔄 更新淘宝信息   → 仅填充空字段 (force=false)
 *   ⚡ 强制更新淘宝信息 → 覆盖所有字段 (force=true)
 *
 * 依赖 API：POST /api/admin/taobao/sync-product
 */
export const TaobaoSyncButtons: React.FC = () => {
  const { id, collectionSlug } = useDocumentInfo()

  const [loadingNormal, setLoadingNormal] = useState(false)
  const [loadingForce, setLoadingForce] = useState(false)
  const [message, setMessage] = useState<string | null>(null)

  if (!id) return null // 新建文档时不显示

  const isValidCollection =
    collectionSlug === 'products' || collectionSlug === 'preorder-products'
  if (!isValidCollection) return null

  const run = async (force: boolean) => {
    const setLoading = force ? setLoadingForce : setLoadingNormal
    setLoading(true)
    setMessage(null)

    try {
      const res = await fetch('/api/admin/taobao/sync-product', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productId: id, collection: collectionSlug, force }),
      })
      const data = await res.json()

      if (!data.success) throw new Error(data.error || '请求失败')
      setMessage(`✅ ${data.message || '完成'}`)

      // 刷新页面以显示更新后的字段值
      setTimeout(() => window.location.reload(), 1200)
    } catch (err: any) {
      setMessage(`❌ ${err?.message ?? '未知错误'}`)
    } finally {
      setLoading(false)
    }
  }

  const busy = loadingNormal || loadingForce

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        padding: '0.75rem 1rem',
        marginBottom: '1rem',
        background: 'var(--theme-elevation-50)',
        borderRadius: '6px',
        border: '1px solid var(--theme-elevation-150)',
      }}
    >
      <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--theme-elevation-600)' }}>
        淘宝自动解析
      </div>

      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
        {/* 更新（非强制） */}
        <button
          type="button"
          disabled={busy}
          onClick={() => run(false)}
          style={{
            padding: '0.4rem 0.9rem',
            background: busy ? '#9ca3af' : '#3b82f6',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: busy ? 'not-allowed' : 'pointer',
            fontSize: '0.8rem',
            fontWeight: 500,
            whiteSpace: 'nowrap',
          }}
        >
          {loadingNormal ? '解析中…' : '🔄 更新淘宝信息'}
        </button>

        {/* 强制全量更新 */}
        <button
          type="button"
          disabled={busy}
          onClick={() => run(true)}
          style={{
            padding: '0.4rem 0.9rem',
            background: busy ? '#9ca3af' : '#f97316',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: busy ? 'not-allowed' : 'pointer',
            fontSize: '0.8rem',
            fontWeight: 500,
            whiteSpace: 'nowrap',
          }}
        >
          {loadingForce ? '解析中…' : '⚡ 强制更新淘宝信息'}
        </button>
      </div>

      {/* 说明文字 */}
      <div style={{ fontSize: '0.73rem', color: 'var(--theme-elevation-450)', lineHeight: 1.5 }}>
        <strong>🔄 更新</strong>：仅填充空白字段（标题、封面、价格）&emsp;
        <strong>⚡ 强制更新</strong>：覆盖已有字段
      </div>

      {message && (
        <div
          style={{
            padding: '0.4rem 0.75rem',
            borderRadius: '4px',
            background: message.startsWith('✅') ? 'var(--theme-success-50)' : 'var(--theme-error-50)',
            color: message.startsWith('✅') ? 'var(--theme-success-750)' : 'var(--theme-error-750)',
            fontSize: '0.8rem',
          }}
        >
          {message}
        </div>
      )}
    </div>
  )
}