'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { Asset } from '@/types';
import { User, MapPin, Package, Sparkles, Image as ImageIcon } from 'lucide-react';
import PromptDisplay from '@/components/common/PromptDisplay';

interface AssetCardEnhancedProps {
  asset: Asset;
  onGenerateImage?: (prompt: string, assetId: string) => void;
  onEdit?: (asset: Asset) => void;
  onDelete?: (assetId: string) => void;
}

export default function AssetCardEnhanced({
  asset,
  onGenerateImage,
  onEdit,
  onDelete,
}: AssetCardEnhancedProps) {
  const [showPrompt, setShowPrompt] = useState(false);

  const getAssetIcon = () => {
    switch (asset.type) {
      case 'character':
        return <User className="w-5 h-5" />;
      case 'scene':
        return <MapPin className="w-5 h-5" />;
      case 'prop':
        return <Package className="w-5 h-5" />;
      default:
        return <Sparkles className="w-5 h-5" />;
    }
  };

  const getAssetTypeLabel = () => {
    switch (asset.type) {
      case 'character':
        return '角色';
      case 'scene':
        return '场景';
      case 'prop':
        return '道具';
      default:
        return '其他';
    }
  };

  const getBackgroundStyle = () => {
    switch (asset.type) {
      case 'character':
        return 'bg-blue-50 border-blue-200';
      case 'scene':
        return 'bg-green-50 border-green-200';
      case 'prop':
        return 'bg-purple-50 border-purple-200';
      default:
        return 'bg-gray-50 border-gray-200';
    }
  };

  const handleUsePrompt = (prompt: string) => {
    if (onGenerateImage) {
      onGenerateImage(prompt, asset.id);
    }
  };

  return (
    <div className={`border rounded-lg overflow-hidden ${getBackgroundStyle()}`}>
      {/* Header */}
      <div className="p-4 bg-white border-b">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-gray-100 rounded-lg text-gray-600">
              {getAssetIcon()}
            </div>
            <div>
              <h3 className="font-semibold text-gray-900">{asset.name}</h3>
              <span className="text-xs text-gray-500">{getAssetTypeLabel()}</span>
            </div>
          </div>
          
          {asset.imagePrompt && (
            <button
              onClick={() => setShowPrompt(!showPrompt)}
              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:bg-blue-50 rounded transition-colors"
            >
              <Sparkles className="w-3 h-3" />
              {showPrompt ? '隐藏' : '查看'}提示词
            </button>
          )}
        </div>
      </div>

      {/* Image Preview */}
      {(asset.imageUrl || asset.imageUrls?.[0]) && (
        <div className="relative aspect-video bg-gray-100">
          <Image
            src={asset.imageUrl || asset.imageUrls?.[0] || ''}
            alt={asset.name}
            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 line-clamp-3">{asset.desc}</p>
        </div>

        {/* Specific Fields */}
        {asset.type === 'character' && (
          <div className="flex flex-wrap gap-2 text-xs">
            {asset.age && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                年龄: {asset.age}
              </span>
            )}
            {asset.gender && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                性别: {asset.gender}
              </span>
            )}
            {asset.role && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                角色: {asset.role}
              </span>
            )}
          </div>
        )}

        {asset.type === 'scene' && (
          <div className="flex flex-wrap gap-2 text-xs">
            {asset.location && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                地点: {asset.location}
              </span>
            )}
            {asset.timeOfDay && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                时间: {asset.timeOfDay}
              </span>
            )}
            {asset.atmosphere && (
              <span className="px-2 py-1 bg-white rounded border border-gray-200">
                氛围: {asset.atmosphere}
              </span>
            )}
          </div>
        )}

        {/* Tags */}
        {asset.tags && asset.tags.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {asset.tags.map((tag, idx) => (
              <span
                key={idx}
                className="px-2 py-0.5 text-xs bg-white text-gray-600 rounded-full border border-gray-200"
              >
                {tag}
              </span>
            ))}
          </div>
        )}

        {/* AI Prompt Display */}
        {showPrompt && asset.imagePrompt && (
          <div className="mt-3">
            <PromptDisplay
              prompt={asset.imagePrompt}
              type="image"
              label={`${getAssetTypeLabel()}生图提示词`}
              onUsePrompt={onGenerateImage ? handleUsePrompt : undefined}
              collapsible={false}
            />
          </div>
        )}

        {/* Actions */}
        <div className="flex items-center gap-2 pt-3 border-t border-gray-200">
          {asset.imagePrompt && onGenerateImage && (
            <button
              onClick={() => handleUsePrompt(asset.imagePrompt!)}
              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>
          )}
          
          {onEdit && (
            <button
              onClick={() => onEdit(asset)}
              className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-white rounded transition-colors"
            >
              编辑
            </button>
          )}
          
          {onDelete && (
            <button
              onClick={() => onDelete(asset.id)}
              className="px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
            >
              删除
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
