import React, { useCallback, useEffect, useState } from 'react';
import { Button, Card, DatePicker, Input, Progress, Select, Space, Table, Tag, Tooltip, Typography, message } from 'antd';
import { EyeOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { getAdminShotTaskSets } from '../api';
import type { ShotTaskSetOut } from '../types';
import { formatDate } from '../utils/formatDate';

const PAGE_SIZE = 20;

const TASK_STATUS_OPTIONS = [
  { value: 'pending_analysis', label: '等待分析' },
  { value: 'analyzing', label: '分析中' },
  { value: 'analysis_completed', label: '分析完成' },
  { value: 'analysis_failed', label: '分析失败' },
  { value: 'splitting', label: '拆镜中' },
  { value: 'split_completed', label: '拆镜完成' },
  { value: 'partial_failed', label: '部分失败' },
  { value: 'failed', label: '失败' },
];

const ANALYSIS_STATUS_OPTIONS = [
  { value: 'pending', label: '待分析' },
  { value: 'processing', label: '分析中' },
  { value: 'completed', label: '分析完成' },
  { value: 'failed', label: '分析失败' },
];

const SPLIT_STATUS_OPTIONS = [
  { value: 'none', label: '未拆镜' },
  { value: 'pending', label: '待拆镜' },
  { value: 'processing', label: '拆镜中' },
  { value: 'completed', label: '拆镜完成' },
  { value: 'failed', label: '拆镜失败' },
  { value: 'retry_waiting', label: '等待重试' },
];

const STATUS_MAP: Record<string, { color: string; text: string }> = {
  pending_analysis: { color: 'default', text: '等待分析' },
  analyzing: { color: 'processing', text: '分析中' },
  analysis_completed: { color: 'success', text: '分析完成' },
  analysis_failed: { color: 'error', text: '分析失败' },
  splitting: { color: 'warning', text: '拆镜中' },
  split_completed: { color: 'success', text: '拆镜完成' },
  partial_failed: { color: 'orange', text: '部分失败' },
  failed: { color: 'error', text: '失败' },
  none: { color: 'default', text: '未拆镜' },
  pending: { color: 'default', text: '待处理' },
  processing: { color: 'warning', text: '处理中' },
  completed: { color: 'success', text: '完成' },
  retry_waiting: { color: 'orange', text: '等待重试' },
};

const safeDate = (value?: string | null): string => (value ? formatDate(value) : '-');
const shortId = (value?: string | null): string => (!value ? '-' : value.length > 16 ? `${value.slice(0, 10)}...` : value);

const StatusTag: React.FC<{ status?: string | null }> = ({ status }) => {
  if (!status) return <Tag>-</Tag>;
  const meta = STATUS_MAP[status] || { color: 'blue', text: status };
  return <Tag color={meta.color}>{meta.text}</Tag>;
};

const AdminShotReplications: React.FC = () => {
  const navigate = useNavigate();
  const [items, setItems] = useState<ShotTaskSetOut[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  const [status, setStatus] = useState('');
  const [analysisStatus, setAnalysisStatus] = useState('');
  const [splitStatus, setSplitStatus] = useState('');
  const [inputKeyword, setInputKeyword] = useState('');
  const [inputUserId, setInputUserId] = useState('');
  const [inputUserName, setInputUserName] = useState('');
  const [createdRange, setCreatedRange] = useState<any>(null);

  const [queryKeyword, setQueryKeyword] = useState('');
  const [queryUserId, setQueryUserId] = useState('');
  const [queryUserName, setQueryUserName] = useState('');
  const [queryCreatedRange, setQueryCreatedRange] = useState<any>(null);
  const [reloadKey, setReloadKey] = useState(0);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await getAdminShotTaskSets({
        status: status || undefined,
        analysisStatus: analysisStatus || undefined,
        splitStatus: splitStatus || undefined,
        keyword: queryKeyword || undefined,
        userId: queryUserId || undefined,
        userName: queryUserName || undefined,
        createdStart: queryCreatedRange?.[0]?.toISOString?.(),
        createdEnd: queryCreatedRange?.[1]?.toISOString?.(),
        page,
        pageSize: PAGE_SIZE,
      });
      setItems(res.items || []);
      setTotal(res.total || 0);
    } catch (e: any) {
      message.error(e?.message || '加载拆镜复刻任务失败');
    } finally {
      setLoading(false);
    }
  }, [analysisStatus, page, queryCreatedRange, queryKeyword, queryUserId, queryUserName, splitStatus, status]);

  useEffect(() => {
    load();
  }, [load, reloadKey]);

  const doSearch = () => {
    setQueryKeyword(inputKeyword.trim());
    setQueryUserId(inputUserId.trim());
    setQueryUserName(inputUserName.trim());
    setQueryCreatedRange(createdRange);
    setPage(1);
  };

  const resetSearch = () => {
    setStatus('');
    setAnalysisStatus('');
    setSplitStatus('');
    setInputKeyword('');
    setInputUserId('');
    setInputUserName('');
    setCreatedRange(null);
    setQueryKeyword('');
    setQueryUserId('');
    setQueryUserName('');
    setQueryCreatedRange(null);
    setPage(1);
    setReloadKey(v => v + 1);
  };

  return (
    <div style={{ padding: 24 }}>
      <Card>
        <Space direction="vertical" size={16} style={{ width: '100%' }}>
          <Space align="center" style={{ justifyContent: 'space-between', width: '100%' }}>
            <div>
              <Typography.Title level={3} style={{ marginBottom: 4 }}>拆镜复刻</Typography.Title>
              <Typography.Text type="secondary">只读排查页面：查看拆镜总任务、AI 分析结果、切片列表和关联复刻项目。</Typography.Text>
            </div>
            <Button icon={<ReloadOutlined />} onClick={() => setReloadKey(v => v + 1)}>刷新</Button>
          </Space>

          <Space wrap>
            <Select allowClear placeholder="总任务状态" style={{ width: 150 }} value={status || undefined} onChange={v => { setStatus(v || ''); setPage(1); }} options={TASK_STATUS_OPTIONS} />
            <Select allowClear placeholder="分析状态" style={{ width: 140 }} value={analysisStatus || undefined} onChange={v => { setAnalysisStatus(v || ''); setPage(1); }} options={ANALYSIS_STATUS_OPTIONS} />
            <Select allowClear placeholder="拆镜状态" style={{ width: 140 }} value={splitStatus || undefined} onChange={v => { setSplitStatus(v || ''); setPage(1); }} options={SPLIT_STATUS_OPTIONS} />
            <Input allowClear prefix={<SearchOutlined />} placeholder="关键词：标题/内容/分类/受众" style={{ width: 260 }} value={inputKeyword} onChange={e => setInputKeyword(e.target.value)} onPressEnter={doSearch} />
            <Input allowClear placeholder="用户ID（管理员）" style={{ width: 190 }} value={inputUserId} onChange={e => setInputUserId(e.target.value)} onPressEnter={doSearch} />
            <Input allowClear placeholder="用户名（管理员）" style={{ width: 230 }} value={inputUserName} onChange={e => setInputUserName(e.target.value)} onPressEnter={doSearch} />
            <DatePicker.RangePicker showTime value={createdRange} onChange={setCreatedRange} placeholder={['创建开始', '创建结束']} />
            <Button type="primary" icon={<SearchOutlined />} onClick={doSearch}>搜索</Button>
            <Button onClick={resetSearch}>重置</Button>
          </Space>

          <Table
            rowKey="id"
            loading={loading}
            dataSource={items}
            pagination={{ current: page, pageSize: PAGE_SIZE, total, showSizeChanger: false, showTotal: value => `共 ${value} 条`, onChange: setPage }}
            scroll={{ x: 1500 }}
            columns={[
              { title: '任务集ID', dataIndex: 'id', width: 150, render: (v: string) => <Tooltip title={v}>{shortId(v)}</Tooltip> },
              {
                title: '用户',
                width: 180,
                render: (_, record) => (
                  <Space direction="vertical" size={0}>
                    <Typography.Text>{record.userName || '-'}</Typography.Text>
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>{shortId(record.userId)}</Typography.Text>
                  </Space>
                ),
              },
              {
                title: '任务信息',
                width: 300,
                render: (_, record) => (
                  <Space direction="vertical" size={2}>
                    <Typography.Text strong>{record.title || '-'}</Typography.Text>
                    <Typography.Text type="secondary" ellipsis style={{ maxWidth: 280 }}>分类：{record.originalVideoCategory || '-'}</Typography.Text>
                    <Typography.Text type="secondary" ellipsis style={{ maxWidth: 280 }}>受众：{record.originalVideoAudience || '-'}</Typography.Text>
                  </Space>
                ),
              },
              { title: '总状态', dataIndex: 'status', width: 120, render: (v: string) => <StatusTag status={v} /> },
              { title: '分析状态', dataIndex: 'analysisStatus', width: 110, render: (v: string) => <StatusTag status={v} /> },
              { title: '拆镜状态', dataIndex: 'splitStatus', width: 110, render: (v: string) => <StatusTag status={v} /> },
              {
                title: '切片进度',
                width: 180,
                render: (_, record) => {
                  const totalSegments = record.segmentCount || 0;
                  const done = record.completedSegmentCount || 0;
                  const percent = totalSegments ? Math.round((done / totalSegments) * 100) : 0;
                  return <Progress size="small" percent={percent} format={() => `${done}/${totalSegments}`} />;
                },
              },
              { title: '失败片段', dataIndex: 'failedSegmentCount', width: 90, render: (v: number) => v ? <Tag color="error">{v}</Tag> : <Tag>0</Tag> },
              { title: '视频时长', dataIndex: 'videoDurationSeconds', width: 100, render: (v: number) => `${Number(v || 0).toFixed(1)}s` },
              { title: '创建时间', dataIndex: 'createdAt', width: 170, render: safeDate },
              { title: '更新时间', dataIndex: 'updatedAt', width: 170, render: safeDate },
              {
                title: '操作',
                fixed: 'right',
                width: 120,
                render: (_, record) => <Button type="link" icon={<EyeOutlined />} onClick={() => navigate(`/shot-replications/task-sets/${record.id}`)}>查看切片</Button>,
              },
            ]}
          />
        </Space>
      </Card>
    </div>
  );
};

export default AdminShotReplications;