'use client';

import { Video, Download, Copy, Check } from 'lucide-react';
import { useState } from 'react';

interface VideoCardProps {
  videoData: string; // Base64
  prompt: string;
  model: string;
}

export function VideoCard({ videoData, prompt, model }: VideoCardProps) {
  const [copied, setCopied] = useState(false);

  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = `data:video/mp4;base64,${videoData}`;
    link.download = `video-${Date.now()}.mp4`;
    link.click();
  };

  const handleCopyPrompt = async () => {
    await navigator.clipboard.writeText(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="bg-card border border-border rounded-xl overflow-hidden shadow-lg group">
      {/* Video */}
      <div className="relative aspect-video bg-muted">
        <video
          src={`data:video/mp4;base64,${videoData}`}
          controls
          className="w-full h-full object-contain"
        />
      </div>

      {/* Info */}
      <div className="p-4 space-y-3">
        {/* Prompt */}
        <div className="space-y-1">
          <div className="flex items-center justify-between">
            <p className="text-xs font-medium text-muted-foreground">Prompt</p>
            <button
              onClick={handleCopyPrompt}
              className="p-1 hover:bg-accent rounded transition-colors"
              title="Copiar prompt"
            >
              {copied ? (
                <Check className="w-3 h-3 text-green-500" />
              ) : (
                <Copy className="w-3 h-3 text-muted-foreground" />
              )}
            </button>
          </div>
          <p className="text-sm text-foreground line-clamp-2">{prompt}</p>
        </div>

        {/* Model */}
        <div className="flex items-center justify-between text-xs">
          <span className="text-muted-foreground">Modelo:</span>
          <span className="font-medium text-foreground">{model}</span>
        </div>

        {/* Actions */}
        <div className="flex gap-2 pt-2 border-t border-border">
          <button
            onClick={handleDownload}
            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
          >
            <Download className="w-4 h-4" />
            Descargar
          </button>
        </div>
      </div>
    </div>
  );
}