'use client';

import React, { useState } from 'react';
import { Copy, Check, Sparkles, Image as ImageIcon, Video } from 'lucide-react';

interface PromptDisplayProps {
  prompt: string;
  label?: string;
  type?: 'image' | 'video' | 'general';
  onUsePrompt?: (prompt: string) => void;
  className?: string;
  collapsible?: boolean;
}

export default function PromptDisplay({
  prompt,
  label,
  type = 'general',
  onUsePrompt,
  className = '',
  collapsible = true,
}: PromptDisplayProps) {
  const [copied, setCopied] = useState(false);
  const [expanded, setExpanded] = useState(!collapsible);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(prompt);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const getIcon = () => {
    switch (type) {
      case 'image':
        return <ImageIcon className="w-4 h-4" />;
      case 'video':
        return <Video className="w-4 h-4" />;
      default:
        return <Sparkles className="w-4 h-4" />;
    }
  };

  const getTypeLabel = () => {
    switch (type) {
      case 'image':
        return '图像提示词';
      case 'video':
        return '视频提示词';
      default:
        return '提示词';
    }
  };

  const displayLabel = label || getTypeLabel();

  return (
    <div className={`border border-gray-200 rounded-lg overflow-hidden ${className}`}>
      {/* Header */}
      <div
        className={`flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200 ${
          collapsible ? 'cursor-pointer hover:bg-gray-100' : ''
        }`}
        onClick={() => collapsible && setExpanded(!expanded)}
      >
        <div className="flex items-center gap-2">
          <div className="text-blue-600">{getIcon()}</div>
          <span className="text-sm font-medium text-gray-700">{displayLabel}</span>
          {type === 'image' && (
            <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
              白底图
            </span>
          )}
          {type === 'video' && (
            <span className="text-xs px-2 py-0.5 bg-purple-100 text-purple-700 rounded">
              动作
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {collapsible && (
            <span className="text-xs text-gray-500">
              {expanded ? '收起' : '展开'}
            </span>
          )}
        </div>
      </div>

      {/* Content */}
      {expanded && (
        <div className="p-4 bg-white">
          <div className="relative">
            <pre className="text-sm text-gray-700 whitespace-pre-wrap font-sans leading-relaxed">
              {prompt}
            </pre>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2 mt-3 pt-3 border-t border-gray-100">
            <button
              onClick={handleCopy}
              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors"
            >
              {copied ? (
                <>
                  <Check className="w-4 h-4 text-green-600" />
                  <span className="text-green-600">已复制</span>
                </>
              ) : (
                <>
                  <Copy className="w-4 h-4" />
                  <span>复制</span>
                </>
              )}
            </button>

            {onUsePrompt && (
              <button
                onClick={() => onUsePrompt(prompt)}
                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"
              >
                <Sparkles className="w-4 h-4" />
                <span>使用此提示词生成</span>
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
