'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { Storyboard } from '@/types';
import { Film, Image as ImageIcon, Video, FileText, Sparkles } from 'lucide-react';
import PromptDisplay from '@/components/common/PromptDisplay';

interface StoryboardCardEnhancedProps {
  storyboard: Storyboard;
  onGenerateImage?: (prompt: string, storyboardId: string) => void;
  onGenerateVideo?: (prompt: string, imageUrl: string | undefined, storyboardId: string) => void;
  onEdit?: (storyboard: Storyboard) => void;
  onDelete?: (storyboardId: string) => void;
}

export default function StoryboardCardEnhanced({
  storyboard,
  onGenerateImage,
  onGenerateVideo,
  onEdit,
  onDelete,
}: StoryboardCardEnhancedProps) {
  const [showPrompts, setShowPrompts] = useState(false);
  const [showOriginalText, setShowOriginalText] = useState(false);

  const handleGenerateImage = () => {
    if (onGenerateImage && storyboard.mergeImagePrompt) {
      onGenerateImage(storyboard.mergeImagePrompt, storyboard.id);
    }
  };

  const handleGenerateVideo = () => {
    if (onGenerateVideo && storyboard.videoPrompt) {
      const firstImage = storyboard.imageUrls?.[0];
      onGenerateVideo(storyboard.videoPrompt, firstImage, storyboard.id);
    }
  };

  const hasPrompts = storyboard.mergeImagePrompt || storyboard.videoPrompt;
  const hasImage = storyboard.imageUrls && storyboard.imageUrls.length > 0;

  return (
    <div className="border border-gray-200 rounded-lg overflow-hidden bg-white">
      {/* Header */}
      <div className="p-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-200">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="flex items-center justify-center w-10 h-10 bg-white rounded-lg shadow-sm">
              <span className="text-lg font-bold text-blue-600">
                {storyboard.order}
              </span>
            </div>
            <div>
              <h3 className="font-semibold text-gray-900">{storyboard.shot}</h3>
              <div className="flex items-center gap-2 mt-1">
                <span className="text-xs px-2 py-0.5 bg-white rounded border border-gray-200">
                  {storyboard.type}
                </span>
                <span className="text-xs text-gray-500">{storyboard.duration}</span>
              </div>
            </div>
          </div>

          {hasPrompts && (
            <button
              onClick={() => setShowPrompts(!showPrompts)}
              className="flex items-center gap-1 px-3 py-1.5 text-sm text-blue-600 hover:bg-white rounded transition-colors"
            >
              <Sparkles className="w-4 h-4" />
              {showPrompts ? '隐藏' : '查看'}提示词
            </button>
          )}
        </div>
      </div>

      {/* Media Preview */}
      {(hasImage || storyboard.videoUrls?.[0]) && (
        <div className="relative aspect-video bg-gray-100">
          {storyboard.videoUrls?.[0] ? (
            <video
              src={storyboard.videoUrls[0]}
              controls
              className="w-full h-full object-cover"
            />
          ) : (
            <Image
              src={storyboard.imageUrls![0]}
              alt={storyboard.shot}
              fill
              sizes="(max-width: 768px) 100vw, 33vw"
              className="object-cover"
            />
          )}
        </div>
      )}

      {/* Content */}
      <div className="p-4 space-y-3">
        {/* Description */}
        <div>
          <p className="text-sm text-gray-700">{storyboard.desc}</p>
        </div>

        {/* Original Text */}
        {storyboard.originalText && (
          <div className="border border-gray-200 rounded-lg overflow-hidden">
            <button
              onClick={() => setShowOriginalText(!showOriginalText)}
              className="w-full flex items-center justify-between px-3 py-2 bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div className="flex items-center gap-2">
                <FileText className="w-4 h-4 text-gray-600" />
                <span className="text-sm font-medium text-gray-700">原文</span>
              </div>
              <span className="text-xs text-gray-500">
                {showOriginalText ? '收起' : '展开'}
              </span>
            </button>
            {showOriginalText && (
              <div className="p-3 bg-white border-t border-gray-200">
                <p className="text-sm text-gray-600 leading-relaxed">
                  {storyboard.originalText}
                </p>
              </div>
            )}
          </div>
        )}

        {/* Details */}
        <div className="grid grid-cols-2 gap-2 text-xs">
          {storyboard.location && (
            <div className="px-2 py-1.5 bg-gray-50 rounded border border-gray-200">
              <span className="text-gray-500">地点:</span>{' '}
              <span className="text-gray-700">{storyboard.location}</span>
            </div>
          )}
          {storyboard.time && (
            <div className="px-2 py-1.5 bg-gray-50 rounded border border-gray-200">
              <span className="text-gray-500">时间:</span>{' '}
              <span className="text-gray-700">{storyboard.time}</span>
            </div>
          )}
          {storyboard.cameraMovement && (
            <div className="px-2 py-1.5 bg-gray-50 rounded border border-gray-200">
              <span className="text-gray-500">镜头:</span>{' '}
              <span className="text-gray-700">{storyboard.cameraMovement}</span>
            </div>
          )}
          {storyboard.transition && (
            <div className="px-2 py-1.5 bg-gray-50 rounded border border-gray-200">
              <span className="text-gray-500">转场:</span>{' '}
              <span className="text-gray-700">{storyboard.transition}</span>
            </div>
          )}
        </div>

        {/* AI Prompts Display */}
        {showPrompts && hasPrompts && (
          <div className="space-y-3 pt-3 border-t border-gray-200">
            {storyboard.mergeImagePrompt && (
              <PromptDisplay
                prompt={storyboard.mergeImagePrompt}
                type="image"
                label="融图提示词"
                onUsePrompt={onGenerateImage ? () => handleGenerateImage() : undefined}
                collapsible={false}
              />
            )}

            {storyboard.videoPrompt && (
              <PromptDisplay
                prompt={storyboard.videoPrompt}
                type="video"
                label="视频提示词"
                onUsePrompt={
                  onGenerateVideo && hasImage
                    ? () => handleGenerateVideo()
                    : undefined
                }
                collapsible={false}
              />
            )}
          </div>
        )}

        {/* Actions */}
        <div className="flex items-center gap-2 pt-3 border-t border-gray-200">
          {storyboard.mergeImagePrompt && onGenerateImage && (
            <button
              onClick={handleGenerateImage}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors"
            >
              <ImageIcon className="w-4 h-4" />
              <span>生成图像</span>
            </button>
          )}

          {storyboard.videoPrompt && onGenerateVideo && hasImage && (
            <button
              onClick={handleGenerateVideo}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded transition-colors"
            >
              <Video className="w-4 h-4" />
              <span>生成视频</span>
            </button>
          )}

          {onEdit && (
            <button
              onClick={() => onEdit(storyboard)}
              className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors"
            >
              编辑
            </button>
          )}

          {onDelete && (
            <button
              onClick={() => onDelete(storyboard.id)}
              className="px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors ml-auto"
            >
              删除
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
