import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Button, Drawer, Input, Popconfirm, Spin, Table, Tag, Tooltip, Upload, message } from 'antd';
import { ArrowLeftOutlined, PlusOutlined, XOutlined } from '@ant-design/icons';
import { createRemoveLens, getShotReplicationDetail, Removelist, removeCreate, splitCustom, uploadImage } from '../api';
import VideoTrimPicker from '../components/VideoTrimPicker';

const { TextArea } = Input;

const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
const MIN_TRIM_SECONDS = 2;
const MAX_TRIM_SECONDS = 15;

function buildAssetUrl(url?: string): string {
    if (!url) return '';
    if (/^https?:\/\//i.test(url)) return url;
    return `${API_BASE}${url}`;
}

function RemoveInfo() {
    const { creatID } = useParams<{ creatID: string }>();
    const navigate = useNavigate();
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [trimModalVisible, setTrimModalVisible] = useState(false);
    const [currentSegment, setCurrentSegment] = useState<string | null>(null);
    const [productName, setProductName] = useState('');
    const [productSellingPoint, setProductSellingPoint] = useState('');
    const [productImage, setProductImage] = useState('');
    const [taskDetail, setTaskDetail] = useState<any>(null);
    const [tableData, setTableData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [splitLoading, setSplitLoading] = useState(false);
    const [autoSplitLoading, setAutoSplitLoading] = useState(false);

    const videoUrl = useMemo(() => buildAssetUrl(taskDetail?.videoUrl), [taskDetail?.videoUrl]);

    const autoSplitButtonText = useMemo(() => {
        if (tableData.length === 0) {
            return 'AI自动拆分';
        }
        if (tableData.some(item => item.sourceMode === 'ai_suggestion')) {
            return 'AI重拆';
        }
        return 'AI自动拆分';
    }, [tableData]);

    const fetchTaskDetail = useCallback(async () => {
        if (!creatID) return;
        try {
            const res = await getShotReplicationDetail(creatID);
            setTaskDetail(res);
        } catch {
            message.error('获取任务详情失败');
        }
    }, [creatID]);

    const fetchSegments = useCallback(async () => {
        if (!creatID) return;
        try {
            const res = await Removelist(creatID);
            setTableData(res.items || []);
        } catch {
            message.error('获取拆镜列表失败');
        }
    }, [creatID]);

    const refreshPageData = useCallback(async () => {
        await Promise.all([fetchTaskDetail(), fetchSegments()]);
    }, [fetchTaskDetail, fetchSegments]);

    useEffect(() => {
        refreshPageData();
    }, [refreshPageData]);

    const handleGenerate = (segmentId: string) => {
        setCurrentSegment(segmentId);
        setDrawerVisible(true);
    };

    const handleCloseDrawer = () => {
        setDrawerVisible(false);
        setCurrentSegment(null);
        setProductName('');
        setProductSellingPoint('');
        setProductImage('');
    };

    const handleProductImageChange: any = (info: any) => {
        if (info.fileList.length === 0) {
            setProductImage('');
        }
    };

    const beforeUploadProductImage = async (file: File) => {
        try {
            const uploadResult = await uploadImage(file);
            setProductImage(uploadResult.url);
            message.success('图片上传成功');
        } catch {
            message.error('图片上传失败，请重试');
        }
        return false;
    };

    const handleManualGenerate = async () => {
        if (!currentSegment) {
            message.warning('请先选择拆镜片段');
            return;
        }
        if (!productImage) {
            message.warning('请上传产品图');
            return;
        }
        if (!productName.trim()) {
            message.warning('请输入产品名称');
            return;
        }
        if (!productSellingPoint.trim()) {
            message.warning('请输入产品卖点');
            return;
        }

        setLoading(true);
        try {
            const params = {
                target_project_name: productName.trim(),
                core_content_point: productSellingPoint.trim(),
                material_image_url: buildAssetUrl(productImage),
                idempotency_key: `replication_${Date.now()}`,
            };

            await removeCreate(currentSegment, params);
            message.success('视频生成任务创建成功');
            handleCloseDrawer();
            await fetchSegments();
        } catch (err: any) {
            message.error(err?.message || '创建失败，请重试');
        } finally {
            setLoading(false);
        }
    };

    const handleAutoGenerate = async () => {
        if (!creatID) return;
        setAutoSplitLoading(true);
        try {
            const shouldReplace = tableData.some(item => item.sourceMode === 'ai_suggestion');
            await createRemoveLens(creatID, {
                selected_indices: [],
                replace_existing: shouldReplace,
            });
            message.success(shouldReplace ? 'AI 重拆任务已提交' : 'AI 拆镜任务已提交');
            await refreshPageData();
        } catch (error: any) {
            message.error(error?.message || '拆镜失败');
        } finally {
            setAutoSplitLoading(false);
        }
    };

    const handleOpenTrimModal = () => {
        if (!videoUrl) {
            message.warning('原视频地址不存在');
            return;
        }
        setTrimModalVisible(true);
    };

    const handleCustomSplit = async (range: { startSecond: number; endSecond: number; durationSecond: number }) => {
        if (!creatID) return;
        if (range.durationSecond < MIN_TRIM_SECONDS) {
            message.warning(`拆镜片段不能低于 ${MIN_TRIM_SECONDS} 秒`);
            return;
        }
        if (range.durationSecond > MAX_TRIM_SECONDS) {
            message.warning(`拆镜片段不能超过 ${MAX_TRIM_SECONDS} 秒`);
            return;
        }

        setSplitLoading(true);
        try {
            await splitCustom(creatID, {
                start_second: range.startSecond,
                end_second: range.endSecond,
            });
            message.success('手动拆镜任务已提交');
            setTrimModalVisible(false);
            await refreshPageData();
        } catch (error: any) {
            message.error(error?.message || '手动拆镜失败');
        } finally {
            setSplitLoading(false);
        }
    };

    const canCreateReplication = (record: any) => {
        return record?.splitStatus === 'completed' && !!record?.segmentVideoUrl;
    };

    const columns: any[] = [
        {
            title: '片段',
            width: 100,
            fixed: 'left',
            align: 'center' as const,
            render: (_: any, record: any) => (
                <div>
                    <div style={{ fontSize: 16, fontWeight: 600, color: '#333' }}>{record.segmentName || `片段${record.segmentIndex || ''}`}</div>
                    <div style={{ fontSize: 12, color: '#999' }}>{record.timeNode}</div>
                    {record.sourceMode === 'custom' && <Tag color="blue" style={{ marginTop: 6 }}>手动</Tag>}
                    {record.sourceMode === 'ai_suggestion' && <Tag color="orange" style={{ marginTop: 6 }}>自动</Tag>}

                </div>
            ),
        },
        {
            title: '片段视频',
            width: 150,
            align: 'center' as const,
            render: (_: any, record: any) => (
                <div style={{ position: 'relative', width: 120, height: 80, borderRadius: 6, overflow: 'hidden', background: '#f1f5f9' }}>
                    {record.segmentVideoUrl ? (
                        <video
                            controls
                            src={buildAssetUrl(record.segmentVideoUrl)}
                            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                        />
                    ) : (
                        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#94a3b8', fontSize: 12 }}>
                            {record.splitStatus === 'failed' ? '切割失败' : '切割中'}
                        </div>
                    )}
                </div>
            ),
        },
        {
            title: '视频内容',
            width: 500,
            align: 'left' as const,
            render: (_: any, record: any) => {
                console.log('视频内容列数据:', {
                    record,
                    sourceMode: record.source_mode,
                    sourceMode2: record.sourceMode,
                    analysisStatus: record.analysis_status,
                    analysisStatus2: record.analysisStatus,
                    segmentContent: record.segmentContent,
                    lastError: record.lastError,
                });
                
                // AI建议的片段直接显示内容，不经过分析状态判断
                if (record.source_mode === 'ai_suggestion' || record.sourceMode === 'ai_suggestion') {
                    return <div style={{ fontSize: 14, color: '#333', lineHeight: 1.6 }}>{record.segmentContent || record.lastError || '-'}</div>;
                }
                
                const analysisStatus = record.analysis_status || record.analysisStatus;
                const statusMap: Record<string, string> = {
                    'not_required': '无需单独分析',
                    'pending': '等待分析',
                    'processing': '分析中',
                    'failed': '分析失败',
                };
                
                if (analysisStatus === 'processing') {
                    return (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                            <Spin size="small" />
                            <span style={{ fontSize: 14, color: '#f59e0b' }}>分析中</span>
                        </div>
                    );
                }
                
                if (analysisStatus === 'failed') {
                    return <div style={{ fontSize: 14, color: '#ef4444', lineHeight: 1.6 }}>分析失败</div>;
                }
                
                const displayText = analysisStatus && statusMap[analysisStatus] ? statusMap[analysisStatus] : (record.segmentContent || record.lastError || '-');
                return <div style={{ fontSize: 14, color: '#333', lineHeight: 1.6 }}>{displayText}</div>;
            },
        },
        {
            title: '视频类型',
            width: 120,
            align: 'center' as const,
            render: (_: any, record: any) => (
                <div style={{ fontSize: 14, color: '#333', fontWeight: 500 }}>
                    {record.segmentCategory || '-'}
                </div>
            ),
        },
        {
            title: '状态',
            width: 120,
            align: 'center' as const,
            dataIndex: 'moduleProjectStatus',
             render: (text: string, record: any) => {
                  const status = text;
                  const currentStepCode = record.moduleProjectCurrentStepCode || record.currentStepCode;
                  console.log('currentStepCode',status, currentStepCode);
                  
                  const getStatusText = () => {
                    if (currentStepCode === 'image_prompt_optimize') {
                      switch (status) {
                        case 'waiting_user':
                          return '等待融合图生成';
                        case 'processing':
                          return '图片提示词生成中';
                        case 'completed':
                          return '图片提示词生成成功';
                        case 'failed':
                          return '图片提示词生成失败';
                        default:
                          return status || '-';
                      }
                    } else if (currentStepCode === 'image_generate') {
                      switch (status) {
                        case 'waiting_user':
                          return '等待生成视频提示词';
                        case 'processing':
                          return '融合图生成中';
                        case 'completed':
                          return '融合图生成成功';
                        case 'failed':
                          return '融合图生成失败';
                        default:
                          return status || '-';
                      }
                    } else if (currentStepCode === 'video_prompt_optimize') {
                      switch (status) {
                        case 'waiting_user':
                          return '等待最终视频生成';
                        case 'processing':
                          return '视频提示词生成中';
                        case 'completed':
                          return '视频提示词生成成功';
                        case 'failed':
                          return '视频提示词生成失败';
                        default:
                          return status || '-';
                      }
                    } else if (currentStepCode === 'video_generate') {
                      switch (status) {
                        case 'waiting_user':
                          return '';
                        case 'processing':
                          return '最终视频生成中';
                        case 'completed':
                          return '最终视频生成成功';
                        case 'failed':
                          return '最终视频生成失败';
                        default:
                          return status || '-';
                      }
                    } else if (currentStepCode === 'material_input') {
                      switch (status) {
                        case 'waiting_user':
                          return '等待生成图片提示词';
                        case 'processing':
                          return '素材处理中';
                        case 'completed':
                          return '素材上传成功';
                        case 'failed':
                          return '素材上传失败';
                        default:
                          return status || '-';
                      }
                    } else {
                      if (!record.moduleProjectId) {
                        return '待生成任务';
                      }
                      const statusMap: Record<string, string> = {
                        'pending': '子任务待处理',
                        'waiting_user': '等待用户确认或触发',
                        'processing': '子任务处理中',
                        'completed': '子任务完成',
                        'failed': '子任务失败',
                        'cancelled': '子任务取消',
                      };
                      return statusMap[status] || status || '-';
                    }
                  };
                  
                  return getStatusText();
                },
            

            // render: (_: any, record: any) => {
            //     const statusMap: Record<string, { text: string; color: string }> = {
            //         pending: { text: '待切割', color: 'default' },
            //         processing: { text: '切割中', color: 'processing' },
            //         retry_waiting: { text: '等待重试', color: 'warning' },
            //         completed: { text: '已完成', color: 'success' },
            //         failed: { text: '失败', color: 'error' },
            //     };
            //     const item = statusMap[record.splitStatus] || { text: record.splitStatus || '-', color: 'default' };
            //     return <Tag color={item.color}>{item.text}</Tag>;
            // },
        },
        {
            title: '操作',
            width: 140,
            fixed: 'right',
            align: 'center' as const,
            render: (_: any, record: any) => (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                    {record.moduleProjectId ? (
                        <Button
                            type="text"
                            onClick={() => navigate(`/removelens/${record.moduleProjectId}/removefenbu`)}
                            style={{ color: '#656efa', fontSize: 12, padding: 0, display: 'flex', alignItems: 'center', gap: 4 }}
                        >
                            详情任务
                        </Button>
                    ) : (
                        <Button
                            type="text"
                            onClick={() => handleGenerate(String(record.id))}
                            disabled={!canCreateReplication(record)}
                            style={{ color: canCreateReplication(record) ? '#656efa' : '#94a3b8', fontSize: 12, padding: 0, display: 'flex', alignItems: 'center', gap: 4 }}
                        >
                            {canCreateReplication(record) ? '视频生成' : '待切割完成'}
                        </Button>
                    )}
                </div>
            ),
        },
    ];

    return (
        <>
            <div
                style={{
                    minHeight: 'calc(100vh - 90px)',
                    display: 'flex',
                    flexDirection: 'column',
                    overflow: 'hidden',
                }}
            >
                <div style={{ background: '#fff' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <Button
                            type="text"
                            icon={<ArrowLeftOutlined />}
                            onClick={() => navigate(-1)}
                            style={{ fontSize: 16, color: '#666' }}
                        />
                    </div>
                </div>

                {taskDetail ? (
                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', overflow: 'hidden' }}>
                        <div style={{ flex: 1, background: '#fff', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 30, }}>
                            {/* <div style={{height: '100%', display: 'flex', alignItems: 'center', gap: 30,}}> */}
                                <div style={{ position: 'relative', width: 280, height: 160, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}>
                                    <video
                                        controls
                                        src={videoUrl}
                                        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                    />
                                </div>

                                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                                    <div>
                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                            <h2 style={{ fontSize: 20, fontWeight: 600, marginBottom: 16 }}>视频总结</h2>
                                            <div style={{ textAlign: 'right' }}>
                                                <span style={{ color: '#999', fontSize: 12 }}>上传时间: {taskDetail.createdAt}</span>
                                            </div>
                                        </div>
                                        <div style={{ display: 'flex', marginBottom: 12 }}>
                                            <span style={{ color: '#999', fontSize: 14, marginRight: 12, width: 80, flexShrink: 0 }}>产品名称:</span>
                                            <span style={{ color: '#333', fontWeight: 500 }}>{taskDetail.title}</span>
                                        </div>
                                        <div style={{ display: 'flex', marginBottom: 12 }}>
                                            <span style={{ color: '#999', fontSize: 14, marginRight: 12, width: 80, flexShrink: 0 }}>受众群体:</span>
                                            {taskDetail.analysisStatus === 'processing' ? (
                                                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                                    <Spin size="small" tip="分析中" style={{ color: '#f59e0b' }} />
                                                </div>
                                            ) : taskDetail.analysisStatus === 'completed' ? (
                                                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                                                    {(taskDetail.originalVideoAudience?.split('、') || []).map((point: string, index: number) => (
                                                        <Tag key={index} color="purple" style={{ fontSize: 12 }}>
                                                            {point}
                                                        </Tag>
                                                    ))}
                                                </div>
                                            ) : null}
                                        </div>
                                        <div style={{ display: 'flex' }}>
                                            <span style={{ color: '#999', fontSize: 14, marginRight: 12, width: 80, flexShrink: 0 }}>视频内容:</span>
                                            {taskDetail.analysisStatus === 'processing' ? (
                                                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                                    <Spin size="small" tip="分析中" style={{ color: '#f59e0b' }} />
                                                </div>
                                            ) : taskDetail.analysisStatus === 'completed' ? (
                                                <span style={{ color: '#333' }}>{taskDetail.originalVideoContent}</span>
                                            ) : null}
                                        </div>
                                    </div>
                                </div>
                            {/* </div> */}
                        </div>

                        <div style={{ display: 'flex', gap: 16, marginBottom: 20, marginTop: 20 }}>
                            <Button
                                type="default"
                                onClick={handleOpenTrimModal}
                                disabled={!videoUrl || splitLoading}
                                style={{
                                    flex: 1,
                                    height: 48,
                                    borderRadius: 8,
                                    borderColor: '#6366f1',
                                    color: '#6366f1',
                                    fontWeight: 500,
                                }}
                            >
                                手动
                            </Button>
                            <Popconfirm
                                title={autoSplitButtonText === 'AI重拆' ? '确定要AI重拆吗？' : '确定要AI拆分吗？'}
                                okText="确定"
                                cancelText="取消"
                                onConfirm={handleAutoGenerate}
                            >
                                <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                                    <Button
                                        type="primary"
                                        loading={autoSplitLoading}
                                        disabled={autoSplitLoading}
                                        style={{
                                            flex: 1,
                                            height: 48,
                                            borderRadius: 8,
                                            background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
                                            fontWeight: 500,
                                            border: 'none',
                                        }}
                                    >
                                        {autoSplitButtonText}
                                        {taskDetail?.aiSuggestions && taskDetail.aiSuggestions.length > 0 && (
                                        <Tooltip
                                            title={
                                                <div>
                                                    <div style={{ fontWeight: 600, marginBottom: 8, color: '#6366f1' }}>AI拆分方案</div>
                                                    {(() => {
                                                        console.log('ai_suggestions:', taskDetail?.ai_suggestions);
                                                        console.log('ai_suggestions2:', taskDetail?.aiSuggestions);
                                                        const suggestions = taskDetail?.ai_suggestions || taskDetail?.aiSuggestions || [];
                                                        return suggestions.map((item: any) => (
                                                            <div key={item.index} style={{ marginBottom: 8, fontSize: 13, lineHeight: 1.5 }}>
                                                                <span style={{ fontWeight: 500, color: '#6366f1' }}>{item.index}.</span>
                                                                <span style={{ marginLeft: 4, color: '#000000ff' }}>{item.timeNode}</span>
                                                                <br />
                                                                <span style={{ color: '#666' }}>{item.content}</span>
                                                            </div>
                                                        ));
                                                    })()}
                                                </div>
                                            }
                                            placement="top"
                                            trigger="hover"
                                            overlayInnerStyle={{ maxWidth: 400, background: '#fff', border: '1px solid #e5e7eb', borderRadius: 12, padding: 12 }}
                                        >
                                            <div style={{   borderRadius: 8, background: 'rgba(99, 102, 241, 0.1)', color: '#ebebeb', fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>
                                                (AI 镜头拆分方案)
                                            </div>
                                        </Tooltip>
                                    )}
                                    </Button>
                                    
                                    
                                </div>
                            </Popconfirm>
                        </div>

                        <div style={{ flex: 2, background: '#fff', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                            <Table
                                columns={columns}
                                dataSource={tableData}
                                pagination={false}
                                bordered={false}
                                rowKey="id"
                                scroll={{ y: 450 }}
                            />
                        </div>
                    </div>
                ) : (
                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <span style={{ fontSize: 16, color: '#999' }}>加载中...</span>
                    </div>
                )}
            </div>

            <VideoTrimPicker
                open={trimModalVisible}
                videoUrl={videoUrl}
                title="手动视频切片"
                loading={splitLoading}
                minDuration={MIN_TRIM_SECONDS}
                maxDuration={MAX_TRIM_SECONDS}
                onCancel={() => setTrimModalVisible(false)}
                onConfirm={handleCustomSplit}
            />

            <Drawer
                title={
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                        <span>
                            <span style={{ color: '#6366f1' }}>智能视频复刻</span>
                            <span style={{ color: '#6366f1' }}>-片段{currentSegment}</span>
                        </span>
                        <Button
                            type="text"
                            icon={<XOutlined />}
                            onClick={handleCloseDrawer}
                            style={{ padding: 0 }}
                        />
                    </div>
                }
                placement="right"
                closable={false}
                onClose={handleCloseDrawer}
                open={drawerVisible}
                size={480}
                styles={{
                    body: { padding: '24px' },
                }}
            >
                <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                    <div>
                        <label style={{ fontWeight: 400, color: '#333', marginBottom: 12, display: 'block' }}>
                            产品白底图 <span style={{ color: '#ff4d4f' }}>*</span>
                        </label>
                        <div style={{ display: 'flex', gap: 16 }}>
                            <Upload
                                listType="picture-card"
                                onChange={handleProductImageChange}
                                beforeUpload={beforeUploadProductImage}
                                maxCount={1}
                                accept="image/*"
                                style={{ width: 140, height: 140 }}
                            >
                                {!productImage && (
                                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                                        <PlusOutlined style={{ fontSize: 24, color: '#999' }} />
                                        <span style={{ fontSize: 12, color: '#999' }}>产品图 *</span>
                                    </div>
                                )}
                            </Upload>
                        </div>
                    </div>

                    <div>
                        <label style={{ fontWeight: 500, color: '#333', marginBottom: 12, display: 'block' }}>
                            产品名称
                        </label>
                        <Input
                            value={productName}
                            onChange={(e) => setProductName(e.target.value)}
                            placeholder="请输入产品名称"
                            style={{ height: 48, borderRadius: 8 }}
                            maxLength={10}
                            showCount
                        />
                    </div>

                    <div>
                        <label style={{ fontWeight: 500, color: '#333', marginBottom: 12, display: 'block' }}>
                            产品卖点
                        </label>
                        <TextArea
                            value={productSellingPoint}
                            onChange={(e) => setProductSellingPoint(e.target.value)}
                            placeholder="请输入产品卖点"
                            style={{ borderRadius: 8 }}
                            maxLength={100}
                            showCount
                            rows={3}
                        />
                    </div>

                    <div style={{ display: 'flex', gap: 16, marginTop: 24 }}>
                        <Button
                            type="default"
                            onClick={handleManualGenerate}
                            loading={loading}
                            disabled={loading}
                            style={{
                                flex: 1,
                                height: 48,
                                borderRadius: 8,
                                borderColor: '#6366f1',
                                color: '#6366f1',
                                fontWeight: 500,
                            }}
                        >
                            {loading ? '生成中...' : '手动生成'}
                        </Button>
                    </div>
                </div>
            </Drawer>
        </>
    );
}

export default RemoveInfo;
