import { useState } from 'react'
import {
  Button, Empty, Form, Input, InputNumber, Select, Space, Table, Tag, Tooltip, message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { PlusOutlined, ReloadOutlined, EyeOutlined, FileTextOutlined } from '@ant-design/icons'
import FormDrawer from '../components/FormDrawer'
import PageWrapper from '../components/PageWrapper'
import EvalDetail from '../components/intelligent_eval/EvalDetail'
import EvalReport from '../components/intelligent_eval/EvalReport'
import { EVAL_STATUS } from '../components/intelligent_eval/status'
import { usePolling } from '../hooks/usePolling'
import { useResource } from '../hooks/useResource'
import {
  intelligentEvalsApi, targetsApi,
  type CreateIntelligentEvalPayload, type IntelligentEval, type Target,
} from '../api'
import { colors } from '../tokens'
import { formatDateTime } from '../utils/date'

type View = 'list' | 'detail' | 'report'

interface CreateFormValues {
  name: string
  target_id: string
  goal: string
  intent?: string
  role_description?: string
  seeds_json?: string
  time_window_hours: number
}

export default function IntelligentEvalsPage() {
  const [view, setView] = useState<View>('list')
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [detailTick, setDetailTick] = useState(0)
  const [createOpen, setCreateOpen] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [form] = Form.useForm<CreateFormValues>()

  const { data: evals, loading, reload } = useResource(
    () => intelligentEvalsApi.list().then((r) => r.data.intelligent_evals),
    { tabPath: '/intelligent-evals' },
  )
  const { data: targets } = useResource(
    () => targetsApi.list().then((r) => r.data),
    { tabPath: '/intelligent-evals' },
  )

  const { data: selected, reload: reloadSelected } = useResource(
    () => (selectedId ? intelligentEvalsApi.get(selectedId).then((r) => r.data) : Promise.resolve(null)),
    { deps: [selectedId, detailTick] },
  )

  const pollActive = view === 'detail' && selected != null
    && (selected.status === 'planning' || selected.status === 'executing' || selected.status === 'pending_approval')

  usePolling(() => void reloadSelected(true), 5000, pollActive)

  const targetName = (id: string) =>
    targets?.find((t) => t.id === id)?.name ?? id.slice(0, 8)

  const openDetail = (id: string) => {
    setSelectedId(id)
    setView('detail')
  }

  const openReport = (id: string) => {
    setSelectedId(id)
    setView('report')
  }

  const submitCreate = async () => {
    const values = await form.validateFields()
    let seeds: Record<string, unknown> = {}
    const raw = (values.seeds_json ?? '').trim()
    if (raw) {
      try {
        const parsed = JSON.parse(raw) as unknown
        if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
          message.error('种子集必须是 JSON 对象')
          return
        }
        seeds = parsed as Record<string, unknown>
      } catch {
        message.error('种子集不是合法 JSON')
        return
      }
    }
    const payload: CreateIntelligentEvalPayload = {
      name: values.name,
      target_id: values.target_id,
      goal: values.goal,
      seeds,
      intent: values.intent ?? '',
      role_description: values.role_description ?? '',
      time_window_hours: values.time_window_hours,
    }
    setSubmitting(true)
    try {
      await intelligentEvalsApi.create(payload)
      message.success('已创建，OpenClaw 开始规划')
      setCreateOpen(false)
      form.resetFields()
      void reload()
    } finally {
      setSubmitting(false)
    }
  }

  const columns: ColumnsType<IntelligentEval> = [
    {
      title: '名称', dataIndex: 'name', key: 'name',
      render: (name: string) => <span style={{ fontWeight: 500 }}>{name}</span>,
    },
    {
      title: '评测对象', dataIndex: 'target_id', key: 'target', width: 180,
      render: (id: string) => targetName(id),
    },
    {
      title: '状态', dataIndex: 'status', key: 'status', width: 110,
      render: (status: IntelligentEval['status']) => {
        const meta = EVAL_STATUS[status] ?? { label: status, color: 'default' }
        return <Tag color={meta.color}>{meta.label}</Tag>
      },
    },
    {
      title: '会话进度', key: 'progress', width: 120,
      render: (_, ev) => `${ev.completed_sessions}/${ev.session_count}`,
    },
    {
      title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 170,
      render: (v: string | null) => (v ? formatDateTime(v) : '—'),
    },
    {
      title: '操作', key: 'action', width: 110, fixed: 'right' as const,
      render: (_, ev) => (
        <Space size={4}>
          <Tooltip title="详情">
            <Button size="small" type="text" icon={<EyeOutlined />} onClick={() => openDetail(ev.id)} />
          </Tooltip>
          {ev.status === 'completed' && (
            <Tooltip title="查看报告">
              <Button size="small" type="text" icon={<FileTextOutlined />} onClick={() => openReport(ev.id)} />
            </Tooltip>
          )}
        </Space>
      ),
    },
  ]

  if (view === 'detail' && selectedId) {
    if (!selected) {
      return (
        <PageWrapper title="智能评估" inline fullHeight>
          <div style={{ padding: 16 }}>加载中…</div>
        </PageWrapper>
      )
    }
    return (
      <PageWrapper title="智能评估" inline fullHeight>
        <EvalDetail
          ev={selected}
          targetName={targetName(selected.target_id)}
          onBack={() => { setView('list'); void reload() }}
          onOpenReport={() => setView('report')}
          onChanged={() => setDetailTick((t) => t + 1)}
        />
      </PageWrapper>
    )
  }

  if (view === 'report' && selectedId) {
    if (!selected) {
      return (
        <PageWrapper title="智能评估" inline fullHeight>
          <div style={{ padding: 16 }}>加载中…</div>
        </PageWrapper>
      )
    }
    return (
      <PageWrapper title="智能评估" inline fullHeight>
        <EvalReport ev={selected} onBack={() => setView('detail')} />
      </PageWrapper>
    )
  }

  return (
    <PageWrapper
      title="智能评估"
      description="描述评估目标，由 OpenClaw 自主规划、执行并产出结构化报告"
      inline
      fullHeight
      extra={
        <Space>
          <Button icon={<ReloadOutlined />} onClick={() => reload()} />
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateOpen(true)}>
            新建智能评估
          </Button>
        </Space>
      }
    >
      <div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
        <Table
          rowKey="id"
          loading={loading}
          dataSource={evals ?? []}
          columns={columns}
          pagination={(evals?.length ?? 0) > 20 ? { pageSize: 20, showTotal: (t) => `共 ${t} 个` } : false}
          locale={{ emptyText: <Empty description="还没有智能评估" /> }}
        />
      </div>

      <FormDrawer
        title="新建智能评估"
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        onSubmit={submitCreate}
        submitting={submitting}
        okText="创建并开始规划"
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{ time_window_hours: 24, seeds_json: '{}' }}
        >
          <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
            <Input placeholder="如：数字员工 24h 服务质量评估" />
          </Form.Item>
          <Form.Item name="target_id" label="评测对象" rules={[{ required: true, message: '请选择对象' }]}>
            <Select
              placeholder="选择评测对象"
              showSearch
              optionFilterProp="label"
              options={(targets ?? []).map((t: Target) => ({ label: t.name, value: t.id }))}
            />
          </Form.Item>
          <Form.Item
            name="goal"
            label="评估目标"
            tooltip="你希望这次评估回答什么问题，OpenClaw 据此规划"
            rules={[{ required: true, message: '请输入评估目标' }]}
          >
            <Input.TextArea rows={3} placeholder="如：评估数字员工在真实咨询场景下的服务态度与专业度" />
          </Form.Item>
          <Form.Item name="intent" label="考察意图">
            <Input.TextArea rows={2} placeholder="（可选）重点关注的能力或风险" />
          </Form.Item>
          <Form.Item name="role_description" label="角色描述">
            <Input.TextArea rows={2} placeholder="（可选）被评对象的角色设定，供 OpenClaw 规划参考" />
          </Form.Item>
          <Form.Item
            name="seeds_json"
            label="种子集（JSON）"
            tooltip="提供给 OpenClaw 的种子数据，如真实问题样例、SOP 摘录等；必须是 JSON 对象"
            rules={[{
              validator: async (_, v: string | undefined) => {
                const raw = (v ?? '').trim()
                if (!raw) return
                let parsed: unknown
                try { parsed = JSON.parse(raw) } catch { throw new Error('不是合法 JSON') }
                if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
                  throw new Error('必须是 JSON 对象')
                }
              },
            }]}
          >
            <Input.TextArea rows={5} style={{ fontFamily: 'monospace', fontSize: 12 }} />
          </Form.Item>
          <Form.Item
            name="time_window_hours"
            label="时间窗口（小时）"
            tooltip="评估覆盖的服务时间跨度"
            rules={[{ required: true, message: '请输入时间窗口' }]}
          >
            <InputNumber min={1} max={720} style={{ width: 160 }} />
          </Form.Item>
          <div style={{
            background: colors.bgSubtle, borderRadius: 8, padding: '8px 12px',
            fontSize: 12, color: colors.textSecondary,
          }}
          >
            创建后进入规划：OpenClaw 产出粗计划 → 你审批 → 批准后 OpenClaw 自唤醒执行会话 → 完成后提交结构化报告。
          </div>
        </Form>
      </FormDrawer>
    </PageWrapper>
  )
}