/**
 * CertificatePreview Component
 * Displays course completion certificate with download option
 */

import React from 'react';
import {
  Award,
  Download,
  Share2,
  ExternalLink,
  Calendar,
  CheckCircle,
} from 'lucide-react';

interface CertificatePreviewProps {
  courseTitle: string;
  courseThumbnail?: string;
  studentName: string;
  instructorName: string;
  completedAt: string;
  certificateUrl?: string;
  certificateId?: string;
  xpEarned?: number;
  onDownload?: () => void;
  onShare?: () => void;
  compact?: boolean;
}

const CertificatePreview: React.FC<CertificatePreviewProps> = ({
  courseTitle,
  courseThumbnail,
  studentName,
  instructorName,
  completedAt,
  certificateUrl,
  certificateId,
  xpEarned,
  onDownload,
  onShare,
  compact = false,
}) => {
  const formattedDate = new Date(completedAt).toLocaleDateString('es-ES', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  if (compact) {
    return (
      <div className="flex items-center gap-4 p-4 bg-gradient-to-r from-yellow-900/20 to-amber-900/20 border border-yellow-700/30 rounded-xl">
        <div className="p-3 bg-yellow-500/20 rounded-full">
          <Award className="w-6 h-6 text-yellow-400" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-medium text-white truncate">{courseTitle}</p>
          <p className="text-sm text-gray-400">Completado el {formattedDate}</p>
        </div>
        <div className="flex items-center gap-2">
          {certificateUrl && (
            <a
              href={certificateUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
              title="Ver certificado"
            >
              <ExternalLink className="w-4 h-4" />
            </a>
          )}
          {onDownload && (
            <button
              onClick={onDownload}
              className="p-2 text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors"
              title="Descargar"
            >
              <Download className="w-4 h-4" />
            </button>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="bg-gradient-to-br from-gray-800 via-gray-800 to-gray-900 rounded-xl border border-gray-700 overflow-hidden">
      {/* Certificate Header */}
      <div className="relative bg-gradient-to-r from-yellow-600/20 via-amber-500/20 to-yellow-600/20 p-6 border-b border-yellow-700/30">
        {/* Decorative elements */}
        <div className="absolute top-0 left-0 w-full h-full opacity-10">
          <div className="absolute top-2 left-4 w-8 h-8 border-2 border-yellow-400 rounded-full" />
          <div className="absolute bottom-2 right-4 w-6 h-6 border-2 border-yellow-400 rounded-full" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 border border-yellow-400/30 rounded-full" />
        </div>

        <div className="relative flex items-center justify-center gap-4">
          <Award className="w-12 h-12 text-yellow-400" />
          <div className="text-center">
            <h3 className="text-xl font-bold text-yellow-400">Certificado de Finalizacion</h3>
            <p className="text-yellow-400/70 text-sm">Trading Academy</p>
          </div>
          <Award className="w-12 h-12 text-yellow-400" />
        </div>
      </div>

      {/* Certificate Body */}
      <div className="p-6 text-center space-y-4">
        {/* Student Name */}
        <div>
          <p className="text-sm text-gray-400 mb-1">Este certificado se otorga a</p>
          <h2 className="text-2xl font-bold text-white">{studentName}</h2>
        </div>

        {/* Course Info */}
        <div>
          <p className="text-sm text-gray-400 mb-2">Por completar exitosamente el curso</p>
          <div className="flex items-center justify-center gap-4">
            {courseThumbnail && (
              <img
                src={courseThumbnail}
                alt={courseTitle}
                className="w-16 h-10 rounded object-cover"
              />
            )}
            <h3 className="text-xl font-semibold text-blue-400">{courseTitle}</h3>
          </div>
        </div>

        {/* Instructor */}
        <div className="pt-2">
          <p className="text-sm text-gray-500">Impartido por</p>
          <p className="text-white font-medium">{instructorName}</p>
        </div>

        {/* Completion Info */}
        <div className="flex items-center justify-center gap-6 pt-4">
          <div className="flex items-center gap-2 text-sm">
            <Calendar className="w-4 h-4 text-gray-400" />
            <span className="text-gray-400">{formattedDate}</span>
          </div>
          {xpEarned && (
            <div className="flex items-center gap-2 text-sm">
              <CheckCircle className="w-4 h-4 text-green-400" />
              <span className="text-green-400">+{xpEarned} XP</span>
            </div>
          )}
        </div>

        {/* Certificate ID */}
        {certificateId && (
          <p className="text-xs text-gray-600 pt-2">
            ID: {certificateId}
          </p>
        )}
      </div>

      {/* Actions */}
      <div className="flex items-center justify-center gap-3 p-4 bg-gray-900/50 border-t border-gray-700">
        {certificateUrl && (
          <a
            href={certificateUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors text-sm"
          >
            <ExternalLink className="w-4 h-4" />
            Ver Completo
          </a>
        )}
        {onDownload && (
          <button
            onClick={onDownload}
            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors text-sm"
          >
            <Download className="w-4 h-4" />
            Descargar PDF
          </button>
        )}
        {onShare && (
          <button
            onClick={onShare}
            className="flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors text-sm"
          >
            <Share2 className="w-4 h-4" />
            Compartir
          </button>
        )}
      </div>
    </div>
  );
};

export default CertificatePreview;
