import React, { useEffect, useState } from 'react';
import {
  Button, Card, Input, message, Modal, Select, Space, Table, Tag, Typography, Tooltip, Image,
} from 'antd';
import {
  PlayCircleOutlined, EyeOutlined, ClockCircleOutlined, CheckCircleOutlined,
  LoadingOutlined, CloseCircleOutlined, SearchOutlined, VideoCameraOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import { getAdminGenerationRecords, adminUpdateGenerationStatus, adminGenerateVideo } from '../api';
import type { AdminGenerationRecord } from '../types';
import { formatDate } from '../utils/formatDate';

const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
const apiUrl = (url?: string) => url ? (url.startsWith('http') ? url : `${API_BASE}${url}`) : '';

const STATUS_MAP: Record<string, { color: string; text: string; icon: React.ReactNode }> = {
  optimizing: { color: 'processing', text: '优化中', icon: <LoadingOutlined spin /> },
  prompt_optimized: { color: 'processing', text: '待生成', icon: <ClockCircleOutlined /> },
  generating: { color: 'warning', text: '生成中', icon: <LoadingOutlined spin /> },
  completed: { color: 'success', text: '已完成', icon: <CheckCircleOutlined /> },
  failed: { color: 'error', text: '失败', icon: <CloseCircleOutlined /> },
};

const AdminGenerationRecords: React.FC = () => {
  const [records, setRecords] = useState<AdminGenerationRecord[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(20);
  const [filterStatus, setFilterStatus] = useState<string>('');
  const [filterUserId, setFilterUserId] = useState<string>('');
  const [preview, setPreview] = useState<AdminGenerationRecord | null>(null);
  const [updating, setUpdating] = useState<string | null>(null);
  const [genModal, setGenModal] = useState<{ record: AdminGenerationRecord; ratio: string; resolution: string } | null>(null);

  const load = async () => {
    setLoading(true);
    try {
      const res = await getAdminGenerationRecords({
        userId: filterUserId || undefined,
        status: filterStatus || undefined,
        page,
        pageSize,
      });
      setRecords(res.items.map((item: any) => ({
        id: item.id,
        userId: item.userId,
        username: item.username,
        projectId: item.projectId,
        projectName: item.projectName,
        originalPrompt: item.originalPrompt,
        optimizedPrompt: item.optimizedPrompt,
        duration: item.duration,
        aspectRatio: item.aspectRatio,
        resolution: item.resolution,
        status: item.status,
        videoUrl: item.videoUrl,
        references: item.references,
        creditsCost: item.creditsCost,
        textCreditsCost: item.textCreditsCost || 0,
        textTokensUsed: item.textTokensUsed || 0,
        videoTokensUsed: item.videoTokensUsed || 0,
        errorMessage: item.errorMessage,
        createdAt: item.createdAt,
        generatedAt: item.generatedAt,
      })));
      setTotal(res.total);
    } catch {
      message.error('加载记录失败');
    } finally {
      setLoading(false);
    }
  };

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

  const handleStatusUpdate = async (recordId: string, newStatus: string, videoUrl?: string) => {
    setUpdating(recordId);
    try {
      await adminUpdateGenerationStatus(recordId, newStatus, videoUrl);
      message.success('状态已更新');
      load();
    } catch (e: any) {
      message.error(e?.message || '更新失败');
    } finally {
      setUpdating(null);
    }
  };

  const handleGenerate = async () => {
    if (!genModal) return;
    setUpdating(genModal.record.id);
    try {
      await adminGenerateVideo(genModal.record.id, genModal.ratio, genModal.resolution);
      message.success('已提交视频生成');
      setGenModal(null);
      load();
    } catch (e: any) {
      message.error(e?.message || '生成失败');
    } finally {
      setUpdating(null);
    }
  };

  const columns = [
    {
      title: '用户', key: 'user', width: 120,
      render: (_: any, r: AdminGenerationRecord) => (
        <div>
          <Typography.Text strong style={{ fontSize: 13 }}>{r.username}</Typography.Text>
          <div style={{ fontSize: 11, color: '#94a3b8' }}>{r.userId.slice(0, 8)}...</div>
        </div>
      ),
    },
    {
      title: '项目', dataIndex: 'projectName', width: 120, ellipsis: true,
      render: (v: string) => <Typography.Text style={{ fontSize: 13 }}>{v}</Typography.Text>,
    },
    {
      title: '提示词', key: 'prompt', ellipsis: true,
      render: (_: any, r: AdminGenerationRecord) => (
        <Tooltip title={r.originalPrompt} placement="topLeft">
          <Typography.Text style={{ fontSize: 12, color: '#475569' }} ellipsis>
            {r.originalPrompt}
          </Typography.Text>
        </Tooltip>
      ),
    },
    {
      title: '参数', key: 'params', width: 140,
      render: (_: any, r: AdminGenerationRecord) => (
        r.duration ? (
          <Space size={4} wrap>
            <Tag>{r.duration}s</Tag>
            <Tag>{r.aspectRatio}</Tag>
            <Tag>{r.resolution}</Tag>
          </Space>
        ) : <Tag color="default">待配置</Tag>
      ),
    },
    {
      title: '积分', key: 'credits', width: 120,
      render: (_: any, r: AdminGenerationRecord) => (
        <div style={{ fontSize: 12 }}>
          {r.textCreditsCost > 0 && (
            <div style={{ color: '#f59e0b' }}>文字: {r.textCreditsCost}</div>
          )}
          {r.creditsCost > 0 && (
            <div style={{ color: '#6366f1' }}>视频: {r.creditsCost}</div>
          )}
          {r.textCreditsCost === 0 && r.creditsCost === 0 && (
            <Typography.Text style={{ color: '#94a3b8' }}>0</Typography.Text>
          )}
        </div>
      ),
    },
    {
      title: '状态', dataIndex: 'status', width: 90,
      render: (v: string) => {
        const cfg = STATUS_MAP[v] || { color: 'default', text: v, icon: null };
        return <Tag color={cfg.color} icon={cfg.icon}>{cfg.text}</Tag>;
      },
    },
    {
      title: '时间', key: 'time', width: 140,
      render: (_: any, r: AdminGenerationRecord) => (
        <div style={{ fontSize: 12, color: '#94a3b8' }}>
          <div>{formatDate(r.createdAt)}</div>
          {r.generatedAt && <div style={{ color: '#10b981' }}>生成: {formatDate(r.generatedAt)}</div>}
        </div>
      ),
    },
    {
      title: '操作', key: 'action', width: 150, fixed: 'right' as const,
      render: (_: any, r: AdminGenerationRecord) => (
        <Space size={4} wrap>
          <Button size="small" icon={<EyeOutlined />} onClick={() => setPreview(r)}>
            详情
          </Button>
          {r.status === 'generating' && (
            <Button size="small" danger loading={updating === r.id}
              onClick={() => {
                Modal.confirm({
                  title: '确认操作',
                  icon: <ExclamationCircleOutlined />,
                  content: '确定将此记录标记为失败？',
                  onOk: () => handleStatusUpdate(r.id, 'failed'),
                });
              }}>
              标记失败
            </Button>
          )}
          {r.status === 'failed' && (
            <Button size="small" type="primary" danger loading={updating === r.id}
              onClick={() => setGenModal({ record: r, ratio: r.aspectRatio || '16:9', resolution: r.resolution || '720p' })}>
              重试生成
            </Button>
          )}
          {r.status === 'prompt_optimized' && (
            <>
              <Button size="small" type="primary" loading={updating === r.id}
                onClick={() => setGenModal({ record: r, ratio: '16:9', resolution: '720p' })}
                style={{ background: '#6366f1', border: 'none' }}>
                生成视频
              </Button>
              <Button size="small" danger loading={updating === r.id}
                onClick={() => {
                  Modal.confirm({
                    title: '确认操作',
                    icon: <ExclamationCircleOutlined />,
                    content: '确定将此记录标记为失败？',
                    onOk: () => handleStatusUpdate(r.id, 'failed'),
                  });
                }}>
                标记失败
              </Button>
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
          <Space>
            <VideoCameraOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>生成记录管理</Typography.Text>
            <Tag color="purple">{total} 条记录</Tag>
          </Space>
          <Space>
            <Select
              placeholder="状态筛选"
              allowClear
              style={{ width: 120 }}
              value={filterStatus || undefined}
              onChange={(v) => { setFilterStatus(v || ''); setPage(1); }}
              options={[
                { value: 'optimizing', label: '优化中' },
                { value: 'prompt_optimized', label: '待生成' },
                { value: 'generating', label: '生成中' },
                { value: 'completed', label: '已完成' },
                { value: 'failed', label: '失败' },
              ]}
            />
            <Input
              placeholder="用户ID搜索"
              prefix={<SearchOutlined style={{ color: '#94a3b8' }} />}
              style={{ width: 200 }}
              value={filterUserId}
              onChange={(e) => setFilterUserId(e.target.value)}
              onPressEnter={() => { setPage(1); load(); }}
              allowClear
            />
            <Button type="primary" onClick={() => { setPage(1); load(); }} style={{ borderRadius: 8 }}>
              搜索
            </Button>
          </Space>
        </div>

        <Table
          columns={columns}
          dataSource={records}
          rowKey="id"
          loading={loading}
          scroll={{ x: 1100 }}
          pagination={{
            current: page,
            pageSize,
            total,
            onChange: setPage,
            showSizeChanger: false,
            showTotal: (t) => `共 ${t} 条`,
          }}
        />
      </Card>

      {/* Detail modal */}
      <Modal
        title={<Space><EyeOutlined />生成记录详情</Space>}
        open={!!preview}
        onCancel={() => setPreview(null)}
        footer={null}
        width={720}
      >
        {preview && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 16 }}>
            {/* User & Project info */}
            <div style={{ display: 'flex', gap: 16 }}>
              <div style={{ flex: 1, padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>用户</Typography.Text>
                <Typography.Text strong>{preview.username}</Typography.Text>
              </div>
              <div style={{ flex: 1, padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>项目</Typography.Text>
                <Typography.Text strong>{preview.projectName}</Typography.Text>
              </div>
              <div style={{ flex: 1, padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>状态</Typography.Text>
                <Tag color={STATUS_MAP[preview.status]?.color} icon={STATUS_MAP[preview.status]?.icon}>
                  {STATUS_MAP[preview.status]?.text}
                </Tag>
              </div>
            </div>

            {/* Prompts */}
            <div>
              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>原始提示词</Typography.Text>
              <div style={{ padding: 12, borderRadius: 10, background: '#f8f9fc', border: '1px solid #f0f0f5' }}>
                <Typography.Text style={{ fontSize: 13, color: '#475569', lineHeight: 1.7 }}>{preview.originalPrompt}</Typography.Text>
              </div>
            </div>
            <div>
              <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>优化后提示词</Typography.Text>
              <div style={{ padding: 12, borderRadius: 10, background: 'rgba(99,102,241,0.02)', border: '1px solid rgba(99,102,241,0.1)' }}>
                <Typography.Text style={{ fontSize: 13, color: '#1a1a2e', lineHeight: 1.7 }}>{preview.optimizedPrompt}</Typography.Text>
              </div>
            </div>

            {/* Credits */}
            <div style={{ display: 'flex', gap: 16, padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
              <div style={{ flex: 1 }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>文字积分</Typography.Text>
                <Typography.Text strong style={{ fontSize: 14, color: '#f59e0b' }}>{preview.textCreditsCost}</Typography.Text>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8' }}> ({preview.textTokensUsed} tokens)</Typography.Text>
              </div>
              <div style={{ flex: 1 }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>视频积分</Typography.Text>
                <Typography.Text strong style={{ fontSize: 14, color: '#6366f1' }}>{preview.creditsCost}</Typography.Text>
                {preview.videoTokensUsed > 0 && (
                  <Typography.Text style={{ fontSize: 11, color: '#94a3b8' }}> ({preview.videoTokensUsed} tokens)</Typography.Text>
                )}
              </div>
              <div style={{ flex: 1 }}>
                <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>总积分</Typography.Text>
                <Typography.Text strong style={{ fontSize: 14 }}>{preview.textCreditsCost + preview.creditsCost}</Typography.Text>
              </div>
            </div>

            {/* Video Params */}
            {preview.duration ? (
              <div style={{ display: 'flex', gap: 16, padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
                {[
                  { label: '时长', value: `${preview.duration}秒` },
                  { label: '比例', value: preview.aspectRatio },
                  { label: '分辨率', value: preview.resolution },
                ].map((item, i) => (
                  <div key={i} style={{ flex: 1 }}>
                    <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>{item.label}</Typography.Text>
                    <Typography.Text strong style={{ fontSize: 14 }}>{item.value}</Typography.Text>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ padding: 12, borderRadius: 10, background: '#f8f9fc', textAlign: 'center' }}>
                <Tag color="default">视频参数待用户配置</Tag>
              </div>
            )}

            {/* Reference images */}
            {preview.references && preview.references.length > 0 && (
              <div>
                <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>参考内容</Typography.Text>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {preview.references.map((ref, i) => (
                    <div key={i} style={{
                      width: 64, height: 64, borderRadius: 10, overflow: 'hidden',
                      border: '1px solid #e2e8f0',
                    }}>
                      {ref.type === 'image' ? (
                        <Image src={apiUrl(ref.url)} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      ) : (
                        <div style={{
                          width: '100%', height: '100%', background: '#1a1a2e',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 10,
                        }}>
                          视频
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Video preview */}
            {preview.status === 'completed' && preview.videoUrl && (
              <div>
                <Typography.Text style={{ fontSize: 12, color: '#94a3b8', display: 'block', marginBottom: 6 }}>生成视频</Typography.Text>
                <video
                  src={apiUrl(preview.videoUrl)}
                  controls
                  style={{ width: '100%', maxHeight: 360, borderRadius: 12, background: '#000' }}
                />
              </div>
            )}

            {/* Error message */}
            {preview.status === 'failed' && preview.errorMessage && (
              <div style={{ padding: 12, borderRadius: 10, background: 'rgba(239,68,68,0.04)', border: '1px solid rgba(239,68,68,0.15)' }}>
                <Typography.Text style={{ fontSize: 12, color: '#ef4444' }}>错误信息: {preview.errorMessage}</Typography.Text>
              </div>
            )}

            {/* Timestamps */}
            <div style={{ display: 'flex', gap: 16, fontSize: 12, color: '#94a3b8' }}>
              <span>创建: {formatDate(preview.createdAt)}</span>
              {preview.generatedAt && <span>生成: {formatDate(preview.generatedAt)}</span>}
            </div>
          </div>
        )}
      </Modal>

      {/* Generate modal */}
      <Modal
        title={<Space><PlayCircleOutlined />生成视频</Space>}
        open={!!genModal}
        onCancel={() => setGenModal(null)}
        onOk={handleGenerate}
        okText="提交生成"
        cancelText="取消"
        confirmLoading={genModal ? updating === genModal.record.id : false}
        width={420}
      >
        {genModal && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 16 }}>
            <div style={{ padding: 12, borderRadius: 10, background: '#f8f9fc' }}>
              <Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>时长</Typography.Text>
              <Typography.Text strong>{genModal.record.duration || 5}s</Typography.Text>
            </div>
            <div>
              <Typography.Text style={{ fontSize: 12, color: '#64748b', display: 'block', marginBottom: 6 }}>画面比例</Typography.Text>
              <Select value={genModal.ratio} onChange={(v) => setGenModal(prev => prev ? { ...prev, ratio: v } : null)}
                style={{ width: '100%' }}
                options={['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'].map(r => ({ value: r, label: r }))}
              />
            </div>
            <div>
              <Typography.Text style={{ fontSize: 12, color: '#64748b', display: 'block', marginBottom: 6 }}>分辨率</Typography.Text>
              <Select value={genModal.resolution} onChange={(v) => setGenModal(prev => prev ? { ...prev, resolution: v } : null)}
                style={{ width: '100%' }}
                options={['480p', '720p', '1080p'].map(r => ({ value: r, label: r }))}
              />
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default AdminGenerationRecords;