import { useQuery, useQueryClient } from '@tanstack/react-query'
import { App, Button, Card, Form, InputNumber, Space, Typography } from 'antd'
import { useEffect, useState } from 'react'

import {
  fetchAdminWorkerMaterialLinkConfig,
  saveAdminWorkerMaterialLinkConfig,
} from '@/services/admin'
import type { WorkerMaterialLinkConfig } from '@/types/worker-platform'

export default function MaterialLinkConfigPanel() {
  const { message } = App.useApp()
  const queryClient = useQueryClient()
  const [form] = Form.useForm<WorkerMaterialLinkConfig>()
  const [saving, setSaving] = useState(false)

  const configQuery = useQuery({
    queryKey: ['admin-worker-material-link-config'],
    queryFn: fetchAdminWorkerMaterialLinkConfig,
  })
  const config = configQuery.data?.data

  useEffect(() => {
    if (config) {
      form.setFieldsValue({ ttlMinutes: config.ttlMinutes })
    }
  }, [config, form])

  async function saveConfig(values: WorkerMaterialLinkConfig) {
    setSaving(true)
    try {
      await saveAdminWorkerMaterialLinkConfig({ ttlMinutes: Number(values.ttlMinutes) })
      await queryClient.invalidateQueries({ queryKey: ['admin-worker-material-link-config'] })
      message.success('补资料链接配置已保存')
    } catch (error) {
      message.error(error instanceof Error ? error.message : '保存补资料链接配置失败')
    } finally {
      setSaving(false)
    }
  }

  return (
    <Card title="补资料链接" bordered={false} loading={configQuery.isLoading}>
      <Space direction="vertical" size="middle" style={{ width: '100%', maxWidth: 700 }}>
        <Typography.Paragraph type="secondary" style={{ marginBottom: 0 }}>
          客服在「接单工单」复制的一次性补资料链接，客户只能修改补资料内容；提交成功后工单转为「未分配」，
          链接立即失效，需要重新发送。修改有效期只影响新生成的链接。
        </Typography.Paragraph>
        <Form form={form} layout="vertical" onFinish={saveConfig}>
          <Form.Item
            name="ttlMinutes"
            label="链接有效期（分钟）"
            extra="默认 30 分钟，可设置 1 - 10080 分钟（7 天）。"
            rules={[{ required: true, message: '请输入链接有效期' }]}
            style={{ marginBottom: 12 }}
          >
            <InputNumber
              min={1}
              max={10080}
              precision={0}
              style={{ width: 220 }}
              addonAfter="分钟"
            />
          </Form.Item>
          <Form.Item style={{ marginBottom: 0 }}>
            <Button type="primary" htmlType="submit" loading={saving}>
              保存配置
            </Button>
          </Form.Item>
        </Form>
      </Space>
    </Card>
  )
}