import React from 'react';
import { Ticket, Event } from '../types';

interface TicketVerificationViewProps {
  ticket: Ticket;
  event: Event;
  onBack: () => void;
}

const TicketVerificationView: React.FC<TicketVerificationViewProps> = ({ ticket, event, onBack }) => {
  return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center p-6 md:p-12 animate-in fade-in duration-700">
      {/* Background Decorative Mesh */}
      <div className="fixed inset-0 pointer-events-none opacity-20">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-amber-500 rounded-full blur-[150px] -translate-y-1/2 translate-x-1/2"></div>
        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#f97316] rounded-full blur-[150px] translate-y-1/2 -translate-x-1/2"></div>
      </div>

      <div className="relative z-10 w-full max-w-5xl">
        <div className="flex justify-between items-center mb-10 w-full">
          <div className="flex items-center gap-4">
             <div className="w-[3px] h-12 bg-[#f97316] rounded-full"></div>
             <div className="flex flex-col leading-none tracking-tight">
                <span className="text-xl font-black text-white uppercase">RAJALAKSHMI</span>
                <span className="text-[10px] font-bold text-white/50 tracking-[0.2em] uppercase py-1">INSTITUTE OF TECHNOLOGY</span>
             </div>
          </div>
          <button 
            onClick={onBack}
            className="px-8 py-3 bg-[#f97316] text-white rounded-full font-black text-[10px] uppercase tracking-widest hover:bg-[#ea580c] transition-all shadow-xl shadow-orange-950/20 active:scale-95"
          >
            RETURN TO PORTAL
          </button>
        </div>

        {/* GOLDEN TICKET DESIGN - Matching Screenshot Concept */}
        <div className="relative w-full rounded-[2.5rem] overflow-hidden shadow-[0_50px_100px_rgba(0,0,0,0.5)] flex flex-col md:flex-row border border-white/10 group">
          
          {/* Main Gold Section */}
          <div className="flex-1 bg-gradient-to-br from-[#d4af37] via-[#f9d976] to-[#b8860b] relative flex flex-col p-12 overflow-hidden shadow-inner">
             {/* Stripes Texture Overlay */}
             <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(0,0,0,0.5) 15px, rgba(0,0,0,0.5) 30px)' }}></div>
             
             {/* Large Barcode Visual Accents */}
             <div className="absolute left-8 top-12 bottom-12 w-12 flex flex-col justify-between items-center py-4 border-r border-black/10 opacity-30">
                <div className="flex flex-col gap-1 w-full px-2">
                   {[...Array(12)].map((_, i) => <div key={i} className={`h-1 w-full bg-black ${i % 3 === 0 ? 'h-2' : 'h-0.5'}`}></div>)}
                </div>
                <div className="font-mono text-[8px] font-bold rotate-90 whitespace-nowrap text-black tracking-widest mt-8">#RIT_AUTH_0928374</div>
             </div>

             <div className="relative pl-16">
                <h1 className="text-[8rem] md:text-[10rem] font-black text-black leading-none mb-10 tracking-tighter mix-blend-overlay opacity-80 uppercase select-none">TICKET</h1>
                
                <div className="space-y-4 mb-16">
                   <div className="flex items-baseline gap-6">
                      <h2 className="text-4xl md:text-5xl font-black text-black tracking-tight uppercase">{event.date.split(',')[0]}</h2>
                      <span className="w-12 h-1 bg-black/40"></span>
                      <h2 className="text-4xl md:text-5xl font-black text-black/60 tracking-tight uppercase">{event.schedule?.[0]?.start_time || ''}</h2>
                   </div>
                   <p className="text-xl font-bold text-black/40 uppercase tracking-[0.4em]">{event.location}</p>
                </div>

                <div className="grid grid-cols-3 gap-12 border-t-2 border-black/10 pt-8 mt-12 max-w-xl">
                   <div className="flex flex-col gap-2">
                      <span className="text-[10px] font-black text-black/30 uppercase tracking-widest">GATE</span>
                      <span className="text-2xl font-black text-black">A-02</span>
                   </div>
                   <div className="flex flex-col gap-2">
                      <span className="text-[10px] font-black text-black/30 uppercase tracking-widest">ROW</span>
                      <span className="text-2xl font-black text-black">VIP-0</span>
                   </div>
                   <div className="flex flex-col gap-2">
                      <span className="text-[10px] font-black text-black/30 uppercase tracking-widest">SEAT</span>
                      <span className="text-2xl font-black text-black">A-42</span>
                   </div>
                </div>

                {/* USER DATA DISPLAY AREA */}
                <div className="mt-16 bg-white/10 backdrop-blur-sm rounded-[2rem] p-8 border border-white/20 shadow-xl max-w-2xl">
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                      <div>
                        <span className="text-[9px] font-black text-black/40 uppercase tracking-widest block mb-1">Pass Holder</span>
                        <p className="text-xl font-black text-black truncate">{ticket.userName}</p>
                        <p className="text-[11px] font-bold text-black/60">{ticket.userEmail}</p>
                      </div>
                      <div className="text-right md:text-left">
                        <span className="text-[9px] font-black text-black/40 uppercase tracking-widest block mb-1">Academic Dossier</span>
                        <p className="text-lg font-black text-black">{ticket.regNo}</p>
                        <p className="text-[11px] font-bold text-black/60 uppercase">{ticket.dept} • {ticket.section}</p>
                      </div>
                   </div>
                   <div className="mt-6 pt-6 border-t border-black/5 flex items-center justify-between">
                      <div>
                        <span className="text-[9px] font-black text-black/40 uppercase tracking-widest block mb-1">Access Protocol</span>
                        <span className="text-[10px] font-black bg-emerald-500 text-white px-3 py-1 rounded-full">VERIFIED AUTHENTIC</span>
                      </div>
                      <i className="fas fa-shield-check text-2xl text-emerald-600"></i>
                   </div>
                </div>
             </div>
          </div>

          {/* Right Black Sidebar Section */}
          <div className="w-full md:w-80 bg-black flex flex-col p-10 justify-between relative">
             <div className="absolute top-0 bottom-0 left-0 w-[1px] bg-white/10 hidden md:block"></div>
             
             <div className="flex flex-col items-center text-center">
                <span className="text-[10px] font-black text-white/30 uppercase tracking-[0.5em] vertical-text transform rotate-180 mb-10 hidden md:block" style={{ writingMode: 'vertical-rl' }}>ADMIT ONE TICKET</span>
                <h3 className="text-4xl font-black text-white leading-none mb-6 vertical-text transform rotate-180 hidden md:block" style={{ writingMode: 'vertical-rl' }}>TICKET</h3>
                
                <div className="flex flex-col items-center gap-4 mt-8">
                   <div className="w-24 h-24 bg-[#f9d976] p-2 rounded-2xl shadow-[0_10px_30px_rgba(249,217,118,0.2)]">
                      <img src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=VERIFIED_${ticket.ticketId}`} alt="Verified" className="w-full h-full mix-blend-multiply" />
                   </div>
                   <p className="text-amber-400 font-black text-[9px] uppercase tracking-[0.3em]">VIP ENTRY PASS</p>
                </div>
             </div>

             <div className="flex flex-col items-center gap-6 mt-12 md:mt-0">
                <div className="w-full h-24 relative opacity-40">
                   <div className="absolute inset-0 flex gap-1 items-end">
                      {[...Array(20)].map((_, i) => (
                        <div key={i} className="flex-1 bg-white" style={{ height: `${Math.random() * 100}%` }}></div>
                      ))}
                   </div>
                   <span className="absolute bottom-[-1.5rem] left-1/2 -translate-x-1/2 font-mono text-[8px] text-white/40 tracking-widest">8 0 1 2 4 9 5 3 0 0 1</span>
                </div>
                
                <div className="bg-white/5 border border-white/10 rounded-2xl p-6 w-full group-hover:border-amber-500/30 transition-colors">
                   <span className="text-[8px] font-black text-gray-500 uppercase tracking-widest block mb-2">Event Authority</span>
                   <p className="text-sm font-black text-white uppercase tracking-tight truncate">{event.title}</p>
                </div>
             </div>
          </div>
        </div>

        <div className="mt-12 text-center text-white/30 text-[10px] font-bold uppercase tracking-[0.4em] animate-pulse">
           Digital Authentication Synchronized with Registrar Office
        </div>
      </div>
    </div>
  );
};

export default TicketVerificationView;