import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  ArrowLeftIcon,
  PhotoIcon,
  PlusIcon,
  PlayIcon,
  TrashIcon,
  EyeIcon,
  ArrowPathIcon,
  SparklesIcon
} from '@heroicons/react/24/outline';
import { Model, PhotoType } from '../types/model';
import {
  VideoGenerationTask,
  VideoPromptConfig,
  VideoGenerationStatus,
  TEMPLATE_OPTIONS,
  SCENE_OPTIONS,
  PRODUCT_OPTIONS,
  VIDEO_GENERATION_STATUS_CONFIG
} from '../types/videoGeneration';
import { videoGenerationService } from '../services/videoGenerationService';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { CustomSelect } from '../components/CustomSelect';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { DeleteConfirmDialog } from '../components/DeleteConfirmDialog';

const ModelDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  // 状态管理
  const [model, setModel] = useState<Model | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedPhotos, setSelectedPhotos] = useState<string[]>([]);
  const [promptConfig, setPromptConfig] = useState<VideoPromptConfig>({
    product: '',
    scene: '',
    model_desc: '',
    template: '抚媚眼神',
    duplicate: 1
  });
  const [videoTasks, setVideoTasks] = useState<VideoGenerationTask[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [uploadingPhotos, setUploadingPhotos] = useState(false);
  const [deletePhotoConfirm, setDeletePhotoConfirm] = useState<{
    show: boolean;
    photoId: string | null;
    photoName: string | null;
    deleting: boolean;
  }>({
    show: false,
    photoId: null,
    photoName: null,
    deleting: false,
  });
  const [_deleteTaskConfirm, setDeleteTaskConfirm] = useState<{
    show: boolean;
    taskId: string | null;
    taskName: string | null;
    deleting: boolean;
  }>({
    show: false,
    taskId: null,
    taskName: null,
    deleting: false,
  });

  // 加载模特详情
  const loadModelDetail = async () => {
    if (!id) return;

    try {
      setLoading(true);
      setError(null);

      const modelData = await videoGenerationService.getModelDetailWithPhotos(id);
      if (modelData) {
        setModel(modelData);
        // 设置默认的模特描述
        setPromptConfig(prev => ({
          ...prev,
          model_desc: modelData.description || `${modelData.name}，${modelData.tags.join('、')}`
        }));
      } else {
        setError('模特不存在');
      }
    } catch (err) {
      setError(err as string);
    } finally {
      setLoading(false);
    }
  };

  // 加载视频生成任务
  const loadVideoTasks = async () => {
    if (!id) return;

    try {
      const tasks = await videoGenerationService.getVideoGenerationTasks({
        model_id: id
      });
      setVideoTasks(tasks);
    } catch (err) {
      console.error('加载视频任务失败:', err);
    }
  };

  // 上传照片
  const handleUploadPhotos = async () => {
    if (!id) return;

    try {
      setUploadingPhotos(true);

      const selected = await open({
        multiple: true,
        filters: [{
          name: 'Images',
          extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp']
        }]
      });

      if (selected && Array.isArray(selected)) {
        const photos = await videoGenerationService.batchUploadModelPhotos(
          id,
          selected,
          PhotoType.Portrait,
          '模特照片',
          ['视频生成']
        );

        // 重新加载模特数据
        await loadModelDetail();

        console.log(`成功上传 ${photos.length} 张照片`);
      }
    } catch (err) {
      setError(`上传照片失败: ${err}`);
    } finally {
      setUploadingPhotos(false);
    }
  };

  // 选择/取消选择照片
  const togglePhotoSelection = (photoId: string) => {
    setSelectedPhotos(prev =>
      prev.includes(photoId)
        ? prev.filter(id => id !== photoId)
        : [...prev, photoId]
    );
  };

  // 生成视频
  const handleGenerateVideo = async () => {
    if (!id || selectedPhotos.length === 0) {
      setError('请至少选择一张照片');
      return;
    }

    if (!promptConfig.product.trim() || !promptConfig.scene.trim()) {
      setError('请填写产品描述和场景描述');
      return;
    }

    try {
      setIsGenerating(true);
      setError(null);

      const request = {
        model_id: id,
        prompt_config: promptConfig,
        selected_photos: selectedPhotos
      };

      // 创建并执行任务
      const task = await videoGenerationService.createAndExecuteVideoGeneration(request);

      // 重新加载任务列表
      await loadVideoTasks();

      // 开始轮询任务状态
      videoGenerationService.pollTaskUntilComplete(
        task.id,
        (updatedTask) => {
          // 更新任务列表中的任务状态
          setVideoTasks(prev =>
            prev.map(t => t.id === updatedTask.id ? updatedTask : t)
          );
        }
      ).then(() => {
        // 任务完成后重新加载任务列表
        loadVideoTasks();
      }).catch(err => {
        console.error('轮询任务状态失败:', err);
      });

    } catch (err) {
      setError(`生成视频失败: ${err}`);
    } finally {
      setIsGenerating(false);
    }
  };

  // 重试任务
  const handleRetryTask = async (taskId: string) => {
    try {
      await videoGenerationService.retryVideoGenerationTask(taskId);
      await loadVideoTasks();
    } catch (err) {
      setError(`重试任务失败: ${err}`);
    }
  };

  // 显示删除任务确认弹框
  const showDeleteTaskConfirm = (taskId: string) => {
    const task = videoTasks.find(t => t.id === taskId);
    const taskName = task ? `${task.prompt_config.product} - ${task.prompt_config.template}` : '未知任务';

    setDeleteTaskConfirm({
      show: true,
      taskId,
      taskName,
      deleting: false,
    });
  };

  // 显示删除照片确认弹框
  const showDeletePhotoConfirm = (photoId: string) => {
    if (!model) return;

    const photo = model.photos.find(p => p.id === photoId);
    const photoName = photo?.description || photo?.file_name || '未知照片';

    setDeletePhotoConfirm({
      show: true,
      photoId,
      photoName,
      deleting: false,
    });
  };

  // 确认删除照片
  const confirmDeletePhoto = async () => {
    if (!deletePhotoConfirm.photoId || !id) return;

    setDeletePhotoConfirm(prev => ({ ...prev, deleting: true }));

    try {
      await invoke('delete_model_photo', {
        modelId: id,
        photoId: deletePhotoConfirm.photoId
      });

      // 重新加载模特数据
      await loadModelDetail();

      // 如果删除的照片在选中列表中，移除它
      setSelectedPhotos(prev => prev.filter(selectedId => selectedId !== deletePhotoConfirm.photoId));

      console.log('照片删除成功');

      // 关闭确认弹框
      setDeletePhotoConfirm({
        show: false,
        photoId: null,
        photoName: null,
        deleting: false,
      });
    } catch (err) {
      setError(`删除照片失败: ${err}`);
      setDeletePhotoConfirm(prev => ({ ...prev, deleting: false }));
    }
  };

  // 取消删除照片
  const cancelDeletePhoto = () => {
    setDeletePhotoConfirm({
      show: false,
      photoId: null,
      photoName: null,
      deleting: false,
    });
  };

  // 初始化
  useEffect(() => {
    loadModelDetail();
    loadVideoTasks();
  }, [id]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <LoadingSpinner size="large" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <p className="text-red-600">{error}</p>
        <button
          onClick={() => setError(null)}
          className="mt-2 text-sm text-red-500 hover:text-red-700"
        >
          关闭
        </button>
      </div>
    );
  }

  if (!model) {
    return (
      <div className="text-center py-8">
        <p className="text-gray-500">模特不存在</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* 头部 - 优化设计 */}
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6 animate-fade-in">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <button
                onClick={() => navigate('/models')}
                className="group flex items-center text-gray-600 hover:text-blue-600 transition-all duration-200 hover:bg-blue-50 px-3 py-2 rounded-lg"
              >
                <ArrowLeftIcon className="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform duration-200" />
                返回模特列表
              </button>
              <div className="h-8 w-px bg-gray-200"></div>
              <div>
                <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-blue-600 bg-clip-text text-transparent">
                  {model.name}
                </h1>
                {model.stage_name && (
                  <span className="text-lg text-gray-500 font-medium">({model.stage_name})</span>
                )}
              </div>
            </div>

            <div className="flex items-center gap-3">
              <button
                onClick={() => navigate(`/models/${id}/dynamics`)}
                className="group flex items-center px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 shadow-sm hover:shadow-md transition-all duration-200 text-sm font-medium"
              >
                <SparklesIcon className="w-4 h-4 mr-2 group-hover:rotate-12 transition-transform duration-200" />
                模特动态
              </button>

              <button
                onClick={handleUploadPhotos}
                disabled={uploadingPhotos}
                className="group flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transition-all duration-200 hover:scale-105"
              >
                {uploadingPhotos ? (
                  <LoadingSpinner size="small" className="mr-2" color="white" />
                ) : (
                  <PlusIcon className="w-5 h-5 mr-2 group-hover:rotate-90 transition-transform duration-200" />
                )}
                上传照片
              </button>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 左侧：模特信息和照片 */}
          <div className="lg:col-span-2 space-y-8">
            {/* 模特基本信息 - 优化设计 */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-all duration-300 animate-slide-up">
              <div className="flex items-center mb-6">
                <div className="w-2 h-8 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full mr-4"></div>
                <h2 className="text-xl font-bold text-gray-900">基本信息</h2>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-gray-500">性别：</span>
                  <span>{model.gender}</span>
                </div>
                {model.age && (
                  <div>
                    <span className="text-gray-500">年龄：</span>
                    <span>{model.age}岁</span>
                  </div>
                )}
                {model.height && (
                  <div>
                    <span className="text-gray-500">身高：</span>
                    <span>{model.height}cm</span>
                  </div>
                )}
                {model.weight && (
                  <div>
                    <span className="text-gray-500">体重：</span>
                    <span>{model.weight}kg</span>
                  </div>
                )}
              </div>

              {model.description && (
                <div className="mt-4">
                  <span className="text-gray-500">描述：</span>
                  <p className="mt-1 text-gray-900">{model.description}</p>
                </div>
              )}

              {model.tags.length > 0 && (
                <div className="mt-4">
                  <span className="text-gray-500">标签：</span>
                  <div className="mt-1 flex flex-wrap gap-2">
                    {model.tags.map((tag, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* 照片选择 */}
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold">选择照片</h2>
                <span className="text-sm text-gray-500">
                  已选择 {selectedPhotos.length} 张照片
                </span>
              </div>

              {model.photos.length === 0 ? (
                <div className="text-center py-8">
                  <PhotoIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-500">暂无照片，请先上传照片</p>
                </div>
              ) : (
                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                  {model.photos.map((photo) => (
                    <div
                      key={photo.id}
                      className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all group ${selectedPhotos.includes(photo.id)
                        ? 'border-blue-500 ring-2 ring-blue-200'
                        : 'border-gray-200 hover:border-gray-300'
                        }`}
                    >
                      <div
                        className="w-full h-full cursor-pointer"
                        onClick={() => togglePhotoSelection(photo.id)}
                      >
                        <img
                          src={photo.file_path.startsWith('http') ? photo.file_path : `file://${photo.file_path}`}
                          alt={photo.description || '模特照片'}
                          className="w-full h-full object-cover"
                        />
                      </div>

                      {/* 删除按钮 */}
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          showDeletePhotoConfirm(photo.id);
                        }}
                        className="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center hover:bg-red-600"
                        title="删除照片"
                      >
                        <TrashIcon className="w-3 h-3" />
                      </button>

                      {/* 选中状态显示 */}
                      {selectedPhotos.includes(photo.id) && (
                        <div className="absolute inset-0 bg-blue-500 bg-opacity-20 flex items-center justify-center pointer-events-none">
                          <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                            <span className="text-white text-xs font-bold">
                              {selectedPhotos.indexOf(photo.id) + 1}
                            </span>
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* 右侧：视频生成配置和任务 */}
          <div className="space-y-6">
            {/* 视频生成配置 */}
            <div className="bg-white rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold mb-4">视频生成配置</h2>

              <div className="space-y-4">
                {/* 产品描述 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    产品描述
                  </label>
                  <input
                    type="text"
                    value={promptConfig.product}
                    onChange={(e) => setPromptConfig(prev => ({ ...prev, product: e.target.value }))}
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                    placeholder="输入产品描述，如：超短牛仔裙（白色紧身蕾丝短袖）"
                    list="product-options"
                  />
                  <datalist id="product-options">
                    {PRODUCT_OPTIONS.map((option, index) => (
                      <option key={index} value={option} />
                    ))}
                  </datalist>
                </div>

                {/* 场景描述 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    场景描述
                  </label>
                  <input
                    type="text"
                    value={promptConfig.scene}
                    onChange={(e) => setPromptConfig(prev => ({ ...prev, scene: e.target.value }))}
                    className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                    placeholder="输入场景描述，如：室内可爱简约的女性卧室"
                    list="scene-options"
                  />
                  <datalist id="scene-options">
                    {SCENE_OPTIONS.map((option, index) => (
                      <option key={index} value={option} />
                    ))}
                  </datalist>
                </div>

                {/* 模特描述 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    模特描述
                  </label>
                  <textarea
                    value={promptConfig.model_desc}
                    onChange={(e) => setPromptConfig(prev => ({ ...prev, model_desc: e.target.value }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    rows={3}
                    placeholder="描述模特的特征和风格"
                  />
                </div>

                {/* 模板类型 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    模板类型
                  </label>
                  <CustomSelect
                    value={promptConfig.template}
                    onChange={(value) => setPromptConfig(prev => ({ ...prev, template: value }))}
                    options={TEMPLATE_OPTIONS}
                    placeholder="选择模板类型"
                  />
                </div>

                {/* 生成数量 */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    生成数量
                  </label>
                  <input
                    type="number"
                    min="1"
                    max="5"
                    value={promptConfig.duplicate}
                    onChange={(e) => setPromptConfig(prev => ({ ...prev, duplicate: parseInt(e.target.value) || 1 }))}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                {/* 生成按钮 */}
                <button
                  onClick={handleGenerateVideo}
                  disabled={isGenerating || selectedPhotos.length === 0}
                  className="w-full flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isGenerating ? (
                    <>
                      <LoadingSpinner size="small" className="mr-2" />
                      生成中...
                    </>
                  ) : (
                    <>
                      <PlayIcon className="w-5 h-5 mr-2" />
                      生成视频
                    </>
                  )}
                </button>
              </div>
            </div>

            {/* 视频生成任务 */}
            <div className="bg-white rounded-lg shadow p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold">生成任务</h2>
                <button
                  onClick={loadVideoTasks}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <ArrowPathIcon className="w-5 h-5" />
                </button>
              </div>

              {videoTasks.length === 0 ? (
                <p className="text-gray-500 text-center py-4">暂无生成任务</p>
              ) : (
                <div className="space-y-3">
                  {videoTasks.map((task) => {
                    const statusConfig = VIDEO_GENERATION_STATUS_CONFIG[task.status];
                    return (
                      <div
                        key={task.id}
                        className={`p-3 rounded-lg border ${statusConfig.borderColor} ${statusConfig.bgColor}`}
                      >
                        <div className="flex items-center justify-between mb-2">
                          <span className={`text-sm font-medium ${statusConfig.color}`}>
                            {statusConfig.label}
                          </span>
                          <div className="flex items-center space-x-2">
                            {task.status === VideoGenerationStatus.Failed && (
                              <button
                                onClick={() => handleRetryTask(task.id)}
                                className="text-blue-600 hover:text-blue-800"
                                title="重试"
                              >
                                <ArrowPathIcon className="w-4 h-4" />
                              </button>
                            )}
                            <button
                              onClick={() => showDeleteTaskConfirm(task.id)}
                              className="text-red-600 hover:text-red-800"
                              title="删除"
                            >
                              <TrashIcon className="w-4 h-4" />
                            </button>
                          </div>
                        </div>

                        <div className="text-xs text-gray-600">
                          <p>产品: {task.prompt_config.product}</p>
                          <p>模板: {task.prompt_config.template}</p>
                          <p>创建时间: {new Date(task.created_at).toLocaleString()}</p>
                        </div>

                        {task.result && task.result.video_urls.length > 0 && (
                          <div className="mt-2">
                            <p className="text-xs text-gray-600 mb-1">生成的视频:</p>
                            <div className="flex flex-wrap gap-2">
                              {task.result.video_urls.map((url, index) => (
                                <a
                                  key={index}
                                  href={url}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="flex items-center text-blue-600 hover:text-blue-800 text-xs"
                                >
                                  <EyeIcon className="w-3 h-3 mr-1" />
                                  视频 {index + 1}
                                </a>
                              ))}
                            </div>
                          </div>
                        )}

                        {task.error_message && (
                          <div className="mt-2 text-xs text-red-600">
                            错误: {task.error_message}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* 删除照片确认弹框 */}
      <DeleteConfirmDialog
        isOpen={deletePhotoConfirm.show}
        title="删除照片"
        message="确定要删除这张照片吗？此操作不可撤销。"
        itemName={deletePhotoConfirm.photoName || undefined}
        deleting={deletePhotoConfirm.deleting}
        onConfirm={confirmDeletePhoto}
        onCancel={cancelDeletePhoto}
      />
    </div>
  );
};

export default ModelDetail;