import { ShieldCheck } from 'lucide-react';
import { Partner } from '../../types';
import { format } from 'date-fns';
import { LOGO_URL } from '../../constants';
import { QRCodeBlock } from '../ui/QRCodeBlock';

interface DigitalCardProps {
  partner: Partner;
}

export function DigitalCard({ partner }: DigitalCardProps) {
  const statusColors = {
    active: 'bg-green-500',
    expired: 'bg-red-500',
    pending: 'bg-brand-gold',
    blocked: 'bg-gray-500',
  };

  const statusLabels = {
    active: 'Ativa',
    expired: 'Vencida',
    pending: 'Pendente',
    blocked: 'Bloqueada',
  };

  return (
    <div className="w-[340px] aspect-[1.6/1] sm:w-[450px] relative group perspective">
      <div className="w-full h-full bg-[#121212] rounded-[32px] overflow-hidden border border-white/10 shadow-2xl relative transition-transform duration-700 group-hover:rotate-y-12">
        {/* Decorative elements */}
        <div className="absolute top-0 right-0 w-48 h-48 bg-brand-wine/20 blur-[60px] rounded-full -mr-10 -mt-10" />
        <div className="absolute bottom-0 left-0 w-32 h-32 bg-brand-gold/10 blur-[50px] rounded-full -ml-10 -mb-10" />
        
        {/* Texture */}
        <div className="absolute inset-0 noise opacity-20" />
        
        {/* Branding header */}
        <div className="absolute top-8 left-8 right-8 flex items-start justify-between z-10">
          <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center p-1.5 border border-white/10 overflow-hidden shrink-0">
                <img src={LOGO_URL} alt="Logo" className="w-full h-full object-contain" />
             </div>
             <div className="flex flex-col">
                <span className="text-white font-display font-black text-sm uppercase tracking-tighter">Galpão Imperial</span>
                <span className="text-brand-gold text-[7px] font-black uppercase tracking-widest leading-none">Clube Parceiro</span>
             </div>
          </div>
          
          <div className="flex items-center gap-2 px-2 py-1 bg-black/40 backdrop-blur-md rounded-lg border border-white/5">
             <div className={`w-2 h-2 rounded-full ${statusColors[partner.status]} animate-pulse`} />
             <span className="text-[8px] font-black text-white uppercase tracking-widest">{statusLabels[partner.status]}</span>
          </div>
        </div>

        {/* Card content */}
        <div className="absolute bottom-8 left-8 right-8 flex justify-between items-end z-10">
           <div className="space-y-4">
              <div className="space-y-1">
                 <p className="text-gray-500 text-[7px] font-black uppercase tracking-widest leading-none">Membro Oficial</p>
                 <p className="text-white font-display font-black text-2xl uppercase tracking-tighter truncate max-w-[200px] sm:max-w-[280px]">
                    {partner.name}
                 </p>
              </div>
              
              <div className="flex gap-8">
                 <div className="space-y-1">
                    <p className="text-gray-500 text-[6px] font-black uppercase tracking-widest leading-none">Matrícula</p>
                    <p className="text-white font-black text-[10px] tracking-widest">{partner.id}</p>
                 </div>
                 <div className="space-y-1">
                    <p className="text-gray-500 text-[6px] font-black uppercase tracking-widest leading-none">Validade</p>
                    <p className="text-brand-gold font-black text-[10px] tracking-widest">
                       {format(partner.expiryDate, 'MM/yy')}
                    </p>
                 </div>
              </div>
           </div>

           <div className="flex flex-col items-center gap-2">
              <div className="w-16 h-16 bg-white p-1 rounded-xl shadow-lg border-2 border-brand-wine/20 overflow-hidden flex items-center justify-center">
                 <QRCodeBlock value={partner.qrValue || `GALPAO_IMPERIAL:PARTNER:${partner.memberCode || partner.cpf || partner.id}`} size={56} className="scale-[0.92]" />
              </div>
              <p className="text-[6px] text-gray-400 font-black uppercase tracking-widest">Código: {partner.memberCode || partner.cpf.slice(-4)}</p>
           </div>
        </div>

        {/* Gloss overlay */}
        <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-30 pointer-events-none" />
        
        {/* Holographic strip simulation */}
        <div className="absolute top-1/2 left-0 right-0 h-8 bg-brand-wine/5 backdrop-blur-sm -skew-y-6 -translate-y-1/2 flex items-center justify-center opacity-30">
          <div className="flex gap-10">
             {[1,2,3,4,5].map(i => <ShieldCheck key={i} className="w-4 h-4 text-brand-gold/30" />)}
          </div>
        </div>
      </div>
    </div>
  );
}
