import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';

export const generateCertificate = async (
  studentName: string,
  level: number,
  track: string,
  skills: string[],
  isPremium: boolean,
  grade: string,
  rollNumber: string,
  projectName?: string,
  effortLevel?: string,
  schoolName?: string,
  principalName?: string
) => {
  const element = document.createElement('div');
  element.style.width = '800px';
  element.style.padding = '40px';
  element.style.background = '#fff';
  element.style.position = 'absolute';
  element.style.left = '-9999px';
  element.style.fontFamily = "'Inter', sans-serif";

  const certificateId = `RS-${Math.random().toString(36).substr(2, 9).toUpperCase()}`;
  const date = new Date().toLocaleDateString();
  const logoUrl = "https://raw.githubusercontent.com/RS-Learning-Lab/assets/main/logo.png"; 

  element.innerHTML = `
    <div style="border: 15px solid #0b8c9f; padding: 40px; position: relative; background: #fff; box-sizing: border-box; height: 560px;">
      <!-- Watermark -->
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.05; pointer-events: none; width: 400px;">
        <img src="${logoUrl}" style="width: 100%;" />
      </div>

      <div style="text-align: center; position: relative; z-index: 1;">
        <div style="display: flex; justify-content: center; margin-bottom: 20px;">
          <img src="${logoUrl}" style="height: 60px;" />
        </div>
        <div style="color: #0b8c9f; font-weight: 800; font-size: 28px; margin-bottom: 5px; letter-spacing: 2px;">RS LEARNING LAB</div>
        <div style="height: 2px; width: 100px; background: #ff7a00; margin: 0 auto 20px;"></div>
        
        <h1 style="font-size: 36px; margin: 10px 0; color: #1a1a1a; text-transform: uppercase; letter-spacing: 1px;">Certificate of Achievement</h1>
        <p style="font-size: 16px; color: #666; margin-bottom: 10px;">This prestigious award is presented to</p>
        
        <h2 style="font-size: 42px; color: #ff7a00; margin: 5px 0; font-family: 'Playfair Display', serif; font-weight: 700; border-bottom: 2px solid #f0f0f0; display: inline-block; padding: 0 40px;">${studentName}</h2>
        
        <div style="margin: 5px 0; font-size: 14px; color: #444; font-weight: 600;">
          Roll No: ${rollNumber} | Class: ${grade}
        </div>
        
        <div style="margin: 5px 0; font-size: 14px; color: #0b8c9f; font-weight: 700; text-transform: uppercase;">
          ${schoolName || 'RS Learning Lab'}
        </div>

        <p style="font-size: 15px; color: #666; max-width: 600px; margin: 15px auto;">
          for outstanding performance and successful completion of <br/>
          <strong style="color: #0b8c9f;">Level ${level} - ${track}</strong>
          ${projectName ? `<br/>and the <strong style="color: #0b8c9f;">${projectName}</strong> project` : ''}
          ${effortLevel ? `<br/><span style="font-size: 13px; color: #ff7a00; font-weight: bold;">Effort Recognition: ${effortLevel} Learner</span>` : ''}
        </p>

        <div style="margin-top: 20px; text-align: left; display: flex; justify-content: space-between; align-items: flex-end;">
          <div style="flex: 1;">
            <p style="font-size: 11px; color: #888; margin-bottom: 6px; font-weight: bold; text-transform: uppercase;">Skills Mastered:</p>
            <div style="display: flex; gap: 6px; flex-wrap: wrap;">
              ${skills.map(s => `<span style="background: #f0fdfa; color: #0b8c9f; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; border: 1px solid #0b8c9f;">${s}</span>`).join('')}
            </div>
            <div style="margin-top: 20px;">
              <p style="font-size: 10px; color: #aaa; margin: 0;">Certificate ID: ${certificateId}</p>
              <p style="font-size: 10px; color: #aaa; margin: 0;">Issued on: ${date}</p>
            </div>
          </div>
          
          <div style="text-align: right; flex: 1;">
            <div style="display: flex; gap: 40px; justify-content: flex-end;">
              <div style="text-align: center;">
                <div style="font-family: 'Dancing Script', cursive; font-size: 24px; color: #1a1a1a; border-bottom: 2px solid #0b8c9f; padding: 0 15px 3px;">Gokula Krishnan</div>
                <p style="font-size: 10px; color: #0b8c9f; font-weight: bold; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px;">Founder</p>
              </div>
              <div style="text-align: center;">
                <div style="width: 120px; border-bottom: 2px solid #ccc; padding: 0 15px 3px; height: 30px;"></div>
                <p style="font-size: 10px; color: #888; font-weight: bold; margin-top: 6px; text-transform: uppercase; letter-spacing: 1px;">School Signature</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      ${isPremium ? `
        <div style="position: absolute; top: 30px; right: 30px; width: 100px; height: 100px; background: #ff7a00; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 11px; text-align: center; transform: rotate(15deg); box-shadow: 0 6px 15px rgba(255, 122, 0, 0.4); border: 4px double white;">
          <span style="font-size: 14px;">PREMIUM</span>
          <span>EXCELLENCE</span>
        </div>
      ` : ''}
    </div>
  `;

  document.body.appendChild(element);
  const canvas = await html2canvas(element, { scale: 3, useCORS: true });
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF({
    orientation: 'landscape',
    unit: 'px',
    format: [800, 560]
  });

  pdf.addImage(imgData, 'PNG', 0, 0, 800, 560);
  pdf.save(`RS_Certificate_${studentName.replace(/\s+/g, '_')}.pdf`);
  document.body.removeChild(element);
};
