interface TreatmentReportData {
  date: string;
  colonyInfo: {
    beekeepingType: string;
    timePerHive: string;
    hiveType: string;
    frames: string;
    geneticResistance: string;
    treatmentAvailable: string;
    infestationLevel: string;
  };
  reference: string;
  riskLevels: {
    current: number;
    afterTreatment: number;
  };
  projections: {
    currentInfestation: number;
    projectedInfestation: number[];
    treatmentStart: string;
    treatmentEnd: string;
    assessmentDate: string;
  };
  recommendedTreatments: Array<{
    name: string;
    type: string;
    effectiveness: number;
    applicationTime: number;
    description: string;
    cost: string;
    availability: string;
    restrictions: string;
    advantages: string[];
    disadvantages: string[];
    registrationId?: string;
    duration?: number;
    implementation?: string;
    tempMin?: number;
    tempMax?: number;
    humidityRequirements?: string;
    bestTimeOfDay?: string;
    weatherConditions?: string;
    numberOfApplications?: number;
    equipmentNeeded?: string;
    colonyConditions?: string;
    safetyEquipment?: string;
    storageRequirements?: string;
    environmentalPrecautions?: string;
    activeSubstance?: string;
    withdrawalPeriod?: number;
    residueRisks?: string;
    sideEffects?: string;
    incompatibilities?: string;
    manufacturer?: string;
  }>;
}

const getRiskLevelClass = (risk: number): string => {
  if (risk >= 0.7) return 'risk-high';
  if (risk >= 0.4) return 'risk-medium';
  return 'risk-low';
};

const formatRiskLevel = (risk: number): string => {
  const percentage = (risk * 100).toFixed(1);
  if (risk >= 0.7) return `High (${percentage}%)`;
  if (risk >= 0.4) return `Medium (${percentage}%)`;
  return `Low (${percentage}%)`;
};

export const generatePDFContent = (data: TreatmentReportData): string => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
        body {
          font-family: 'Helvetica Neue', Arial, sans-serif;
          line-height: 1.4;
          color: #2c3e50;
          max-width: 800px;
          margin: 0 auto;
          padding: 15px;
          background-color: #f8f9fa;
          font-size: 11px;
        }

        .header {
          background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
          color: white;
          padding: 15px 20px;
          border-radius: 8px;
          margin-bottom: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .header h1 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          letter-spacing: 0.5px;
        }

        .header-date {
          font-size: 12px;
          opacity: 0.9;
        }

        .main-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 15px;
          margin-bottom: 15px;
        }

        .section {
          background: white;
          padding: 12px;
          border-radius: 8px;
          margin-bottom: 15px;
          border: 1px solid #e9ecef;
        }

        .section h2 {
          color: #ff8c00;
          margin: 0 0 10px;
          font-size: 14px;
          font-weight: 600;
          padding-bottom: 5px;
          border-bottom: 1px solid #f8f9fa;
        }

        .info-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
        }

        .info-item {
          padding: 8px;
          background: #f8f9fa;
          border-radius: 4px;
        }

        .info-label {
          font-weight: 600;
          color: #495057;
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 0.3px;
          margin-bottom: 2px;
        }

        .info-value {
          font-size: 11px;
        }

        .risk-level {
          display: inline-flex;
          align-items: center;
          padding: 4px 8px;
          border-radius: 4px;
          font-weight: 600;
          font-size: 11px;
        }

        .risk-high {
          background-color: #fff5f5;
          color: #e53e3e;
          border: 1px solid #feb2b2;
        }

        .risk-medium {
          background-color: #fffaf0;
          color: #ff8c00;
          border: 1px solid #fbd38d;
        }

        .risk-low {
          background-color: #f0fff4;
          color: #38a169;
          border: 1px solid #9ae6b4;
        }

        .warning {
          background-color: #fff5f5;
          border: 1px solid #feb2b2;
          border-radius: 8px;
          padding: 10px;
          margin-top: 15px;
          color: #e53e3e;
          font-size: 10px;
        }

        /* Estilos para la página de tratamientos */
        .treatments-page {
          page-break-before: always;
        }

        .treatment-card {
          background: white;
          border: 1px solid #e9ecef;
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 20px;
          page-break-inside: avoid;
        }

        .treatment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e9ecef;
        }

        .treatment-name {
          color: #ff8c00;
          margin: 0;
          font-size: 16px;
          font-weight: 600;
        }

        .treatment-id {
          color: #6c757d;
          font-size: 11px;
        }

        .treatment-main-details {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 15px;
          margin-bottom: 20px;
          background: #f8f9fa;
          padding: 10px;
          border-radius: 4px;
        }

        .treatment-sections {
          display: grid;
          gap: 20px;
        }

        .treatment-section {
          background: #fff;
          border: 1px solid #e9ecef;
          border-radius: 4px;
          padding: 15px;
        }

        .treatment-section h4 {
          color: #495057;
          margin: 0 0 10px;
          font-size: 13px;
          font-weight: 600;
        }

        .details-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          font-size: 11px;
        }

        .detail-item {
          margin-bottom: 5px;
        }

        .detail-item .info-label {
          color: #6c757d;
          font-size: 10px;
          font-weight: 600;
          text-transform: uppercase;
          margin-bottom: 2px;
        }

        .pros-cons-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 15px;
        }

        .pros-cons-grid ul {
          margin: 5px 0;
          padding-left: 15px;
          font-size: 11px;
        }

        .pros-cons-grid li {
          margin-bottom: 3px;
        }

        @media print {
          body {
            background: white;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }

          .header {
            background: #ff8c00 !important;
          }

          .section, .treatment-card {
            break-inside: avoid;
            border: 1px solid #e9ecef;
          }
        }
      </style>
    </head>
    <body>
      <!-- Primera página: Información general -->
      <div class="header">
        <h1>Treatment Report</h1>
        <div class="header-date">${data.date}</div>
      </div>

      <div class="main-grid">
        <div class="section">
          <h2>Colony Information</h2>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">Beekeeping Type</div>
              <div class="info-value">${data.colonyInfo.beekeepingType}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Time per Hive</div>
              <div class="info-value">${data.colonyInfo.timePerHive}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Hive Type</div>
              <div class="info-value">${data.colonyInfo.hiveType}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Frames</div>
              <div class="info-value">${data.colonyInfo.frames}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Genetic Resistance</div>
              <div class="info-value">${data.colonyInfo.geneticResistance}</div>
            </div>
            <div class="info-item">
              <div class="info-label">Treatment Available</div>
              <div class="info-value">${data.colonyInfo.treatmentAvailable}</div>
            </div>
          </div>
        </div>

        <div class="section">
          <h2>Risk Assessment</h2>
          <div class="info-grid">
            <div class="info-item">
              <div class="info-label">Current Risk Level</div>
              <div class="risk-level ${getRiskLevelClass(data.riskLevels.current)}">
                ${formatRiskLevel(data.riskLevels.current)}
              </div>
            </div>
            <div class="info-item">
              <div class="info-label">After Treatment</div>
              <div class="risk-level ${getRiskLevelClass(data.riskLevels.afterTreatment)}">
                ${formatRiskLevel(data.riskLevels.afterTreatment)}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2>Treatment Timeline</h2>
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">Assessment Date</div>
            <div class="info-value">${data.projections.assessmentDate}</div>
          </div>
          <div class="info-item">
            <div class="info-label">Treatment Start</div>
            <div class="info-value">${data.projections.treatmentStart}</div>
          </div>
          <div class="info-item">
            <div class="info-label">Treatment End</div>
            <div class="info-value">${data.projections.treatmentEnd}</div>
          </div>
          <div class="info-item">
            <div class="info-label">Reference</div>
            <div class="info-value">${data.reference}</div>
          </div>
        </div>
      </div>

      <div class="warning">
        <strong>Important Notice:</strong> This report is a support tool. Always consult with a veterinary professional before applying any treatment.
      </div>

      <!-- Segunda página: Tratamientos -->
      <div class="treatments-page">
        <div class="header">
          <h1>Recommended Treatments</h1>
          <div class="header-date">${data.date}</div>
        </div>

        ${data.recommendedTreatments.map(treatment => `
          <div class="treatment-card">
            <div class="treatment-header">
              <h3 class="treatment-name">${treatment.name}</h3>
              <div class="treatment-id">ID: ${treatment.registrationId || '-'}</div>
            </div>

            <div class="treatment-main-details">
              <div class="detail-item">
                <div class="info-label">Type</div>
                <div>${treatment.type}</div>
              </div>
              <div class="detail-item">
                <div class="info-label">Effectiveness</div>
                <div class="effectiveness">${treatment.effectiveness}%</div>
              </div>
              <div class="detail-item">
                <div class="info-label">Duration</div>
                <div>${treatment.duration || '-'} days</div>
              </div>
              <div class="detail-item">
                <div class="info-label">Cost</div>
                <div>${treatment.cost}</div>
              </div>
            </div>

            <div class="treatment-sections">
              <div class="treatment-section">
                <h4>Application Details</h4>
                <div class="details-grid">
                  <div class="detail-item">
                    <div class="info-label">Implementation</div>
                    <div>${treatment.implementation || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Temperature Range</div>
                    <div>${treatment.tempMin || '-'}°C to ${treatment.tempMax || '-'}°C</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Humidity</div>
                    <div>${treatment.humidityRequirements || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Best Time</div>
                    <div>${treatment.bestTimeOfDay || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Weather</div>
                    <div>${treatment.weatherConditions || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Applications</div>
                    <div>${treatment.numberOfApplications || '-'}</div>
                  </div>
                </div>
              </div>

              <div class="treatment-section">
                <h4>Requirements & Safety</h4>
                <div class="details-grid">
                  <div class="detail-item">
                    <div class="info-label">Equipment</div>
                    <div>${treatment.equipmentNeeded || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Colony Conditions</div>
                    <div>${treatment.colonyConditions || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Safety Equipment</div>
                    <div>${treatment.safetyEquipment || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Storage</div>
                    <div>${treatment.storageRequirements || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Environmental</div>
                    <div>${treatment.environmentalPrecautions || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Availability</div>
                    <div>${treatment.availability || '-'}</div>
                  </div>
                </div>
              </div>

              <div class="treatment-section">
                <h4>Effects & Precautions</h4>
                <div class="details-grid">
                  <div class="detail-item">
                    <div class="info-label">Active Substance</div>
                    <div>${treatment.activeSubstance || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Withdrawal Period</div>
                    <div>${treatment.withdrawalPeriod || '-'} days</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Residue Risks</div>
                    <div>${treatment.residueRisks || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Side Effects</div>
                    <div>${treatment.sideEffects || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Incompatibilities</div>
                    <div>${treatment.incompatibilities || '-'}</div>
                  </div>
                  <div class="detail-item">
                    <div class="info-label">Manufacturer</div>
                    <div>${treatment.manufacturer || '-'}</div>
                  </div>
                </div>
              </div>

              <div class="treatment-section">
                <h4>Advantages & Disadvantages</h4>
                <div class="pros-cons-grid">
                  <div>
                    <div class="info-label">Advantages</div>
                    <ul>
                      ${treatment.advantages.map(adv => `<li>${adv}</li>`).join('')}
                    </ul>
                  </div>
                  <div>
                    <div class="info-label">Disadvantages</div>
                    <ul>
                      ${treatment.disadvantages.map(dis => `<li>${dis}</li>`).join('')}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `).join('')}
      </div>
    </body>
    </html>
  `;
};

export const printTreatmentReport = () => {
  window.print();
};

export const addPrintStyles = () => {
  const style = document.createElement('style');
  style.textContent = `
    @media print {
      @page {
        size: A4;
        margin: 20mm;
      }

      body {
        background: white;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      /* Hide non-essential elements */
      button, 
      nav,
      .no-print {
        display: none !important;
      }

      /* Ensure proper page breaks */
      .page-break {
        page-break-before: always;
      }

      /* Improve table readability */
      table {
        break-inside: avoid;
      }

      /* Ensure proper text contrast */
      * {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
    }
  `;
  document.head.appendChild(style);
};

export const downloadPDF = (data: TreatmentReportData) => {
  const htmlContent = generatePDFContent(data);
  const blob = new Blob([htmlContent], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  
  const printWindow = window.open(url, '_blank');
  if (printWindow) {
    printWindow.onload = () => {
      printWindow.print();
      URL.revokeObjectURL(url);
    };
  }
};
