import { useState, useRef, useCallback, useEffect } from 'react';
import { Button, Modal, Input, Table, Upload, Popconfirm } from 'antd';
import { FileTextOutlined, CloudUploadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

export default function VideoFrameExtractor() {
  const navigate = useNavigate();

  const [videoUrl, setVideoUrl] = useState<string>('');
  const [error, setError] = useState<string>('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [productName, setProductName] = useState<string>('');

  const [videoDuration, setVideoDuration] = useState<number>(0);

  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const cleanupResources = useCallback(() => {
    if (videoUrl) {
      URL.revokeObjectURL(videoUrl);
    }
    setVideoUrl('');
    setError('');
    setVideoDuration(0);
    setProductName('');
  }, [videoUrl]);

  const handleFileChange = (file: File) => {
    if (!file.type.startsWith('video/')) {
      setError('请选择视频文件');
      return false;
    }

    if (file.size > 100 * 1024 * 1024) {
      setError('视频文件大小不能超过 100MB');
      return false;
    }

    cleanupResources();

    const url = URL.createObjectURL(file);
    setVideoUrl(url);
    setError('');
    return false;
  };

  const handleVideoLoaded = useCallback(() => {
    if (videoRef.current) {
      setVideoDuration(videoRef.current.duration);
    }
  }, []);

  const tableData = [
    {
      id: 1,
      image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=product%20image%20red%20gift%20box%20with%20hearts&image_size=square',
      originalName: '进圈',
      productName: '他趣',
      status: '视频成功',
      createTime: '2026-05-14 17:49:20',
    },
    {
      id: 2,
      image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=luxury%20perfume%20bottle%20golden%20elegant&image_size=square',
      originalName: '香水',
      productName: '面霜',
      status: '视频提示词成功',
      createTime: '2026-05-08 08:57:46',
    },
  ];

  return (
    <div style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%)', padding: '20px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div>
              <div style={{
                width: 36,
                height: 36,
                background: 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)',
                borderRadius: 10,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontSize: 18,
                fontWeight: 600
              }}>
                ✨
              </div>
            </div>
            <div>
              <h1 style={{
                fontSize: 22,
                fontWeight: 600,
                margin: 0,
                color: '#1e293b'
              }}>
                拆镜复刻
              </h1>
              <p style={{ fontSize: 13, color: '#94a3b8', margin: 4 }}>
                一键拆解画面分镜，助力仿拍或创作
              </p>
            </div>
          </div>

          <button
            onClick={() => setIsModalOpen(true)}
            style={{
              padding: '10px 20px',
              background: 'white',
              border: '1px solid #e2e8f0',
              borderRadius: 8,
              cursor: 'pointer',
              fontSize: 14,
              color: '#6366f1',
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
            }}
          >
            <FileTextOutlined />
            <span>创作记录</span>
          </button>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{
              width: 56,
              height: 56,
              background: 'linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%)',
              borderRadius: 16,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              margin: '0 auto 16px'
            }}>
              <span style={{ fontSize: 28 }}>🎬</span>
            </div>
            <h2 style={{
              fontSize: 22,
              fontWeight: 600,
              margin: 0,
              background: 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text'
            }}>
              上传视频开始创作
            </h2>
            <p style={{ fontSize: 14, color: '#888', margin: '8px 0 0 0' }}>
              支持 MP4、MOV 格式视频，最大支持 100MB
            </p>
          </div>
        </div>

        <div style={{ width: '100%', maxWidth: 720, margin: '0 auto' }}>
          {error && (
            <div style={{
              backgroundColor: '#fff5f5',
              border: '1px solid #ffccc7',
              borderRadius: 8,
              padding: '12px 16px',
              marginBottom: 20,
              color: '#d93026',
              fontSize: 14,
              textAlign: 'center'
            }}>
              {error}
            </div>
          )}

          {!videoUrl && (
            <Upload.Dragger
              accept="video/*"
              beforeUpload={handleFileChange}
              showUploadList={false}
              style={{
                background: '#faf5ff',
                border: '2px dashed #c4b5fd',
                borderRadius: 24,
                padding: '60px 20px'
              }}
            >
              <div style={{
                width: 100,
                height: 100,
                margin: '0 auto 20px',
                background: 'linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%)',
                borderRadius: 24,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
                <CloudUploadOutlined style={{ fontSize: 40, color: '#818cf8' }} />
              </div>
              <p style={{ fontSize: 16, color: '#333', margin: '0 0 8px 0', fontWeight: 500 }}>
                点击或拖拽到此上传视频文件
              </p>
              <p style={{ fontSize: 13, color: '#999', margin: 0 }}>
                支持 MP4、MOV 格式视频，最大支持 100MB 的文件，支持上传 3 分钟内的视频
              </p>
            </Upload.Dragger>
          )}

          {videoUrl && (
            <div style={{
              position: 'relative',
              borderRadius: 24,
              padding: 4,
              background: 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)'
            }}>
              <div style={{
                borderRadius: 22,
                background: '#ffffff',
                padding: '24px'
              }}>
                <Popconfirm
                  title="确定要删除吗？"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={cleanupResources}
                >
                  <button
                    style={{
                      position: 'absolute',
                      top: 20,
                      right: 20,
                      width: 36,
                      height: 36,
                      border: '1px solid #e5e7eb',
                      background: '#fff',
                      borderRadius: 10,
                      cursor: 'pointer',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      fontSize: 16,
                      color: '#666',
                      zIndex: 10
                    }}
                  >
                    🗑️
                  </button>
                </Popconfirm>

                <div style={{
                  textAlign: 'center',
                  marginBottom: 20
                }}>
                  <video
                    ref={videoRef}
                    src={videoUrl}
                    controls
                    onLoadedMetadata={handleVideoLoaded}
                    style={{
                      maxWidth: '100%',
                      maxHeight: 320,
                      borderRadius: 12,
                      background: '#000'
                    }}
                  />
                </div>

                {/* 产品名称输入框 */}
                <div style={{ marginBottom: 24 }}>
                  <label style={{
                    display: 'block',
                    fontSize: 14,
                    fontWeight: 500,
                    color: '#374151',
                    marginBottom: 8
                  }}>
                    产品名称
                  </label>
                  <Input
                    placeholder="请输入产品名称"
                    value={productName}
                    onChange={(e) => setProductName(e.target.value)}
                    style={{
                      width: '100%',
                      height: 40,
                      borderRadius: 8,
                      borderColor: '#e5e7eb'
                    }}
                  />
                </div>

                <div style={{ textAlign: 'center', marginTop: 16 }}>
                  <button
                    disabled={!videoUrl || !productName.trim()}
                    style={{
                      padding: '14px 56px',
                      background: videoUrl && productName.trim()
                        ? 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)'
                        : '#e2e8f0',
                      color: 'white',
                      border: 'none',
                      borderRadius: 14,
                      fontSize: 15,
                      fontWeight: 600,
                      cursor: videoUrl && productName.trim() ? 'pointer' : 'not-allowed',
                      boxShadow: videoUrl && productName.trim() ? '0 6px 20px rgba(99, 102, 241, 0.35)' : 'none',
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 10
                    }}
                  >
                    <span>创建</span>
                    <span style={{
                      fontSize: 12,
                      opacity: 0.85,
                      fontWeight: 400
                    }}>
                      预计消耗 10 个积分
                    </span>
                  </button>
                </div>
              </div>
            </div>
          )}

          <canvas ref={canvasRef} style={{ display: 'none' }} />

          <Modal
            title="创作记录"
            open={isModalOpen}
            onCancel={() => setIsModalOpen(false)}
            width={800}
            footer={null}
          >
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
              <Input
                placeholder="搜索产品名称"
                style={{ width: 200, borderRadius: 6, marginRight: 8 }}
              />
              <Button type="primary" style={{ borderRadius: 6 }}>
                搜索
              </Button>
            </div>

            <Table
              columns={[
                {
                  title: '产品图片',
                  dataIndex: 'image',
                  key: 'image',
                  width: 90,
                  render: (image: string) => (
                    <img
                      src={image}
                      alt="产品图片"
                      style={{ width: 50, height: 50, objectFit: 'cover', borderRadius: 6 }}
                    />
                  ),
                },
                {
                  title: '原产品名称',
                  dataIndex: 'originalName',
                  key: 'originalName',
                },
                {
                  title: '产品名称',
                  dataIndex: 'productName',
                  key: 'productName',
                },
                {
                  title: '状态',
                  dataIndex: 'status',
                  key: 'status',
                },
                {
                  title: '创建时间',
                  dataIndex: 'createTime',
                  key: 'createTime',
                },
                {
                  title: '操作',
                  key: 'action',
                  render: (_, record) => (
                    <button
                      onClick={() => navigate(`/removelens/${record.id}/removeinfo`)}
                      style={{ color: '#6366f1', textDecoration: 'none', fontSize: 13, border: 'none', background: 'none', cursor: 'pointer' }}
                    >
                      查看详情
                    </button>
                  ),
                },
              ]}
              dataSource={tableData}
              rowKey="id"
              pagination={false}
            />
          </Modal>
        </div>
      </div>
    </div>
  );
}
