'use client'

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

/**
 * 管理员控制面板
 * 用于执行管理操作：清理数据、系统维护等
 */
export default function AdminPanel() {
  const [clearLoading, setClearLoading] = useState(false)
  const [clearMessage, setClearMessage] = useState('')
  const [showClearConfirm, setShowClearConfirm] = useState(false)

  const [fixLoading, setFixLoading] = useState(false)
  const [fixMessage, setFixMessage] = useState('')

  const handleClearData = () => {
    setShowClearConfirm(true)
    setClearMessage('')
  }

  const handleConfirmClear = async () => {
    setClearLoading(true)
    setClearMessage('')
    setShowClearConfirm(false)

    try {
      const response = await fetch('/api/clear-data?confirm=true', {
        method: 'GET',
      })

      const data = await response.json()

      if (data.success) {
        setClearMessage(data.message || '数据清理成功！')
      } else {
        setClearMessage(`清理失败: ${data.error}`)
      }
    } catch (error) {
      setClearMessage(`清理出错: ${error instanceof Error ? error.message : '未知错误'}`)
    } finally {
      setClearLoading(false)
    }
  }

  const handleCancelClear = () => {
    setShowClearConfirm(false)
    setClearMessage('')
  }

  const handleFixDatabase = async () => {
    if (!confirm('确定要修复数据库字段类型吗？这会修改 products 表的 thumbnail 字段。')) {
      return
    }

    setFixLoading(true)
    setFixMessage('')

    try {
      const response = await fetch('/api/fix-database', {
        method: 'GET',
      })

      const data = await response.json()

      if (data.success) {
        setFixMessage(data.message || '数据库修复成功！')
      } else {
        setFixMessage(`修复失败: ${data.error}`)
      }
    } catch (error) {
      setFixMessage(`修复出错: ${error instanceof Error ? error.message : '未知错误'}`)
    } finally {
      setFixLoading(false)
    }
  }

  return (
    <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ marginBottom: '2rem', fontSize: '2rem', fontWeight: 'bold' }}>
        🛠️ 管理员控制面板
      </h1>

      {/* 数据管理区域 */}
      <div
        style={{
          backgroundColor: 'var(--theme-elevation-50)',
          borderRadius: '8px',
          padding: '1.5rem',
          marginBottom: '1.5rem',
          border: '1px solid var(--theme-elevation-100)',
        }}
      >
        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem', fontWeight: '600' }}>
          📦 数据管理
        </h2>

        <div
          style={{
            backgroundColor: 'var(--theme-elevation-0)',
            borderRadius: '6px',
            padding: '1.5rem',
            border: '1px solid var(--theme-elevation-150)',
          }}
        >
          <h3 style={{ marginBottom: '0.5rem', fontSize: '1rem', fontWeight: '600' }}>
            🗑️ 清理数据库
          </h3>
          <p
            style={{
              marginBottom: '1rem',
              fontSize: '0.875rem',
              color: 'var(--theme-elevation-600)',
            }}
          >
            清除所有商品、公告、文章数据（保留用户和媒体文件）
          </p>

          {showClearConfirm ? (
            <div>
              <div
                style={{
                  marginBottom: '1rem',
                  padding: '1rem',
                  backgroundColor: 'var(--theme-error-50)',
                  borderRadius: '6px',
                  border: '1px solid var(--theme-error-500)',
                }}
              >
                <p
                  style={{
                    margin: '0 0 0.5rem 0',
                    fontWeight: 'bold',
                    color: 'var(--theme-error-700)',
                  }}
                >
                  ⚠️ 确认清理所有数据？
                </p>
                <p style={{ margin: '0', fontSize: '0.875rem', color: 'var(--theme-error-600)' }}>
                  此操作不可撤销！将删除所有商品、公告和文章。
                </p>
              </div>

              <div style={{ display: 'flex', gap: '0.75rem' }}>
                <Button onClick={handleConfirmClear} disabled={clearLoading} buttonStyle="error">
                  {clearLoading ? '清理中...' : '确认清理'}
                </Button>
                <Button onClick={handleCancelClear} disabled={clearLoading} buttonStyle="secondary">
                  取消
                </Button>
              </div>
            </div>
          ) : (
            <Button onClick={handleClearData} disabled={clearLoading} buttonStyle="error">
              清理数据库
            </Button>
          )}

          {clearMessage && (
            <div
              style={{
                marginTop: '1rem',
                padding: '1rem',
                backgroundColor:
                  clearMessage.includes('失败') || clearMessage.includes('出错')
                    ? 'var(--theme-error-50)'
                    : 'var(--theme-success-50)',
                borderRadius: '6px',
                fontSize: '0.875rem',
                border: `1px solid ${
                  clearMessage.includes('失败') || clearMessage.includes('出错')
                    ? 'var(--theme-error-500)'
                    : 'var(--theme-success-500)'
                }`,
              }}
            >
              {clearMessage}
            </div>
          )}
        </div>

        {/* 修复数据库区域 */}
        <div
          style={{
            backgroundColor: 'var(--theme-elevation-0)',
            borderRadius: '6px',
            padding: '1.5rem',
            marginTop: '1rem',
            border: '1px solid var(--theme-elevation-150)',
          }}
        >
          <h3 style={{ marginBottom: '0.5rem', fontSize: '1rem', fontWeight: '600' }}>
            🔧 修复数据库
          </h3>
          <p
            style={{
              marginBottom: '1rem',
              fontSize: '0.875rem',
              color: 'var(--theme-elevation-600)',
            }}
          >
            修复数据库字段类型（将 products.thumbnail 从 integer 改为 varchar）
          </p>

          <Button onClick={handleFixDatabase} disabled={fixLoading} buttonStyle="primary">
            {fixLoading ? '修复中...' : '修复字段类型'}
          </Button>

          {fixMessage && (
            <div
              style={{
                marginTop: '1rem',
                padding: '1rem',
                backgroundColor:
                  fixMessage.includes('失败') || fixMessage.includes('出错')
                    ? 'var(--theme-error-50)'
                    : 'var(--theme-success-50)',
                borderRadius: '6px',
                fontSize: '0.875rem',
                border: `1px solid ${
                  fixMessage.includes('失败') || fixMessage.includes('出错')
                    ? 'var(--theme-error-500)'
                    : 'var(--theme-success-500)'
                }`,
              }}
            >
              {fixMessage}
            </div>
          )}
        </div>
      </div>

      {/* 系统信息区域 */}
      <div
        style={{
          backgroundColor: 'var(--theme-elevation-50)',
          borderRadius: '8px',
          padding: '1.5rem',
          border: '1px solid var(--theme-elevation-100)',
        }}
      >
        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem', fontWeight: '600' }}>
          ℹ️ 系统信息
        </h2>

        <div
          style={{
            backgroundColor: 'var(--theme-elevation-0)',
            borderRadius: '6px',
            padding: '1rem',
            border: '1px solid var(--theme-elevation-150)',
          }}
        >
          <div style={{ marginBottom: '0.5rem' }}>
            <strong>Payload CMS:</strong> v3.75.0
          </div>
          <div style={{ marginBottom: '0.5rem' }}>
            <strong>数据库:</strong> PostgreSQL
          </div>
          <div style={{ marginBottom: '0.5rem' }}>
            <strong>存储:</strong> Cloudflare R2 (S3 API)
          </div>
        </div>
      </div>
    </div>
  )
}