import { useEffect, useState } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { Alert, App, Button, Card, Form, Input, Space, Typography } from 'antd'
import { ReloadOutlined } from '@ant-design/icons'

import { fetchCrashConfig, updateCrashConfig } from '@/features/admin/api'
import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
import { useAdminSessionStore } from '@/stores/adminSession'

function errorText(error: unknown) {
  const response = (error as { response?: { data?: { message?: string } } })?.response
  return response?.data?.message || (error instanceof Error ? error.message : '请求失败')
}

export function AdminCrashConfigPage() {
  const { message } = App.useApp()
  const queryClient = useQueryClient()
  const [form] = Form.useForm<{ default_qrcode_url: string; order_copy_template: string }>()
  const [saving, setSaving] = useState(false)
  const permissions = useAdminSessionStore(state => state.admin?.permissions)
  const canView = Boolean(permissions?.includes('*') || permissions?.includes('mohong:config'))
  const canManage = Boolean(permissions?.includes('*') || permissions?.includes('mohong:config'))

  const configQuery = useQuery({
    queryKey: ['admin-crash-config'],
    queryFn: fetchCrashConfig,
    enabled: canView,
  })

  useEffect(() => {
    if (!configQuery.data) return
    form.setFieldsValue(configQuery.data)
  }, [configQuery.data, form])

  if (!canView) {
    return (
      <div className="admin-page">
        <AdminPageHeader eyebrow="JIEYOU OPS · 摸红" title="撞车配置" />
        <Alert type="warning" showIcon message="当前账号没有撞车配置权限" />
      </div>
    )
  }

  return (
    <div className="admin-page">
      <AdminPageHeader
        eyebrow="JIEYOU OPS · 摸红"
        title="撞车配置"
        description="维护撞车订单默认固定二维码与订单一键复制模板。"
        extra={
          <Button
            icon={<ReloadOutlined />}
            loading={configQuery.isFetching}
            onClick={() => void configQuery.refetch()}
          >
            刷新
          </Button>
        }
      />

      <Card>
        <Form form={form} layout="vertical" requiredMark={false}>
          <Form.Item
            name="default_qrcode_url"
            label="默认固定二维码图片 URL"
            extra="订单未指定商品二维码时使用该图片"
          >
            <Input placeholder="https://..." />
          </Form.Item>
          <Form.Item
            name="order_copy_template"
            label="订单一键复制模板"
            extra="支持变量：{{order_no}} {{created_at}} {{items}} {{quantity}} {{amount}} {{buyer_name}} {{buyer_phone}}"
          >
            <Input.TextArea rows={8} />
          </Form.Item>
          <Space>
            <Button
              type="primary"
              loading={saving}
              disabled={!canManage}
              onClick={async () => {
                const values = await form.validateFields()
                setSaving(true)
                try {
                  await updateCrashConfig(values)
                  message.success('配置已保存')
                  await queryClient.invalidateQueries({ queryKey: ['admin-crash-config'] })
                } catch (error) {
                  message.error(errorText(error))
                } finally {
                  setSaving(false)
                }
              }}
            >
              保存配置
            </Button>
            <Typography.Text type="secondary">
              模板留空将回退到后端默认模板
            </Typography.Text>
          </Space>
        </Form>
      </Card>
    </div>
  )
}