import QRCode from 'qrcode';

export interface TicketData {
  uuid: string;
  eventId: string;
  eventTitle: string;
  purchaserName: string;
  purchaserEmail: string;
  venue: string;
  startTime: string;
}

export async function generateQRCode(ticketData: TicketData): Promise<string> {
  try {
    // Create QR code data URL
    const qrData = JSON.stringify({
      uuid: ticketData.uuid,
      eventId: ticketData.eventId,
      type: 'ticket'
    });
    
    const qrCodeDataURL = await QRCode.toDataURL(qrData, {
      width: 300,
      margin: 2,
      color: {
        dark: '#1F2937', // Dark gray
        light: '#FFFFFF' // White
      }
    });
    
    return qrCodeDataURL;
  } catch (error) {

    throw new Error('Failed to generate QR code');
  }
}

export async function generateTicketHTML(ticketData: TicketData): Promise<string> {
  const qrCodeDataURL = await generateQRCode(ticketData);
  
  const ticketHTML = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Your Ticket - ${ticketData.eventTitle}</title>
      <style>
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          margin: 0;
          padding: 20px;
          background-color: #f9fafb;
        }
        .ticket {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .ticket-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 24px;
          text-align: center;
        }
        .ticket-header h1 {
          margin: 0;
          font-size: 28px;
          font-weight: 700;
        }
        .ticket-header p {
          margin: 8px 0 0 0;
          opacity: 0.9;
          font-size: 16px;
        }
        .ticket-body {
          padding: 32px 24px;
        }
        .ticket-info {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          margin-bottom: 32px;
        }
        .info-item {
          text-align: center;
        }
        .info-label {
          font-size: 12px;
          text-transform: uppercase;
          font-weight: 600;
          color: #6b7280;
          margin-bottom: 4px;
        }
        .info-value {
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
        }
        .qr-section {
          text-align: center;
          border-top: 2px dashed #e5e7eb;
          padding-top: 32px;
        }
        .qr-code {
          margin: 0 auto 16px;
          display: block;
        }
        .qr-instructions {
          color: #6b7280;
          font-size: 14px;
          line-height: 1.5;
        }
        .ticket-footer {
          background: #f9fafb;
          padding: 16px 24px;
          text-align: center;
          font-size: 12px;
          color: #6b7280;
        }
        @media (max-width: 480px) {
          .ticket-info {
            grid-template-columns: 1fr;
            gap: 16px;
          }
        }
      </style>
    </head>
    <body>
      <div class="ticket">
        <div class="ticket-header">
          <h1>${ticketData.eventTitle}</h1>
          <p>Your ticket confirmation</p>
        </div>
        
        <div class="ticket-body">
          <div class="ticket-info">
            <div class="info-item">
              <div class="info-label">Event Date & Time</div>
              <div class="info-value">${new Date(ticketData.startTime).toLocaleDateString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
              })}</div>
              <div class="info-value">${new Date(ticketData.startTime).toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
              })}</div>
            </div>
            
            <div class="info-item">
              <div class="info-label">Venue</div>
              <div class="info-value">${ticketData.venue}</div>
            </div>
            
            <div class="info-item">
              <div class="info-label">Ticket Holder</div>
              <div class="info-value">${ticketData.purchaserName}</div>
            </div>
            
            <div class="info-item">
              <div class="info-label">Ticket ID</div>
              <div class="info-value">${ticketData.uuid.substring(0, 8).toUpperCase()}</div>
            </div>
          </div>
          
          <div class="qr-section">
            <img src="${qrCodeDataURL}" alt="Ticket QR Code" class="qr-code" />
            <div class="qr-instructions">
              <strong>Show this QR code at the door</strong><br>
              Keep this email handy or take a screenshot for easy access.
            </div>
          </div>
        </div>
        
        <div class="ticket-footer">
          Powered by Black Canyon Tickets • Questions? Contact the event organizer
        </div>
      </div>
    </body>
    </html>
  `;
  
  return ticketHTML;
}

export function parseQRCode(qrData: string): { uuid: string; eventId: string; type: string } | null {
  try {
    const parsed = JSON.parse(qrData);
    if (parsed.type === 'ticket' && parsed.uuid && parsed.eventId) {
      return parsed;
    }
    return null;
  } catch (error) {

    return null;
  }
}