import { useRef } from "react";
import { FileDown } from "lucide-react";
import html2pdf from "html2pdf.js";
import targoLogo from "@/assets/targo-logo.png";

const ContratBLB = () => {
  const contentRef = useRef<HTMLDivElement>(null);

  const handlePrint = () => {
    window.print();
  };

  const handleDownloadPdf = () => {
    if (!contentRef.current) return;
    
    const opt = {
      margin: 0,
      filename: 'Contrat_Targo_Fibre_Optique.pdf',
      image: { type: 'jpeg' as const, quality: 0.98 },
      html2canvas: { scale: 2, useCORS: true },
      jsPDF: { unit: 'in' as const, format: 'letter' as const, orientation: 'portrait' as const },
      pagebreak: { mode: ['css', 'legacy'] as ('css' | 'legacy')[], avoid: 'section' }
    };
    
    html2pdf().set(opt).from(contentRef.current).save();
  };

  return (
    <div className="contrat-blb bg-white text-black" ref={contentRef}>
      {/* Action Buttons - hidden when printing */}
      <div className="print:hidden fixed top-4 right-4 z-50 flex gap-2">
        <button
          onClick={handleDownloadPdf}
          className="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
        >
          <FileDown className="w-5 h-5" />
          Télécharger PDF
        </button>
        <button
          onClick={handlePrint}
          className="bg-white hover:bg-gray-100 text-[#00C853] border-2 border-[#00C853] font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 6 2 18 2 18 9"></polyline>
            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
            <rect x="6" y="14" width="12" height="8"></rect>
          </svg>
          Imprimer
        </button>
      </div>

      {/* ========== PAGE 1 ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-4 mb-4 border-b-2 border-[#00C853]">
          <img src={targoLogo} alt="Targo" className="h-12 w-auto" />
          <div className="text-right text-sm">
            <p className="font-bold text-[#00C853]">1-855-888-2746</p>
            <p className="text-gray-600">www.targo.ca</p>
          </div>
        </header>

        {/* Title */}
        <h1 className="text-xl font-bold text-[#00C853] mb-5 text-center border-b-2 border-[#00C853] pb-2">
          ENTENTE DE SERVICE — INSTALLATION ET FOURNITURE D'INTERNET PAR FIBRE OPTIQUE
        </h1>

        {/* Parties */}
        <section className="mb-4">
          <p className="font-semibold mb-2">Entre :</p>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div className="border border-gray-300 rounded-lg p-3">
              <p className="font-bold text-[#00C853] mb-1">TARGO Communications Inc.</p>
              <p>1867 chemin de la Rivière</p>
              <p>Sainte-Clotilde-de-Châteauguay (Québec)</p>
              <p className="mt-2"><span className="font-medium">Représentant :</span> Louis-Paul Bourdon</p>
              <p className="text-xs text-gray-500 mt-1">(Ci-après désigné "TARGO")</p>
            </div>
            <div className="border border-gray-300 rounded-lg p-3">
              <p className="font-bold text-[#00C853] mb-1">Marc-André Besner</p>
              <p>75 Venise</p>
              <p>Coteau-du-Lac (Québec)</p>
              <p className="mt-2"><span className="font-medium">Client :</span> Marc-André Besner</p>
              <p className="text-xs text-gray-500 mt-1">(Ci-après désigné "CLIENT")</p>
            </div>
          </div>
        </section>

        {/* Section 1 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            1. OBJET DU CONTRAT
          </h2>
          <p className="text-xs mb-1">Ce contrat a pour objet :</p>
          <ul className="text-xs space-y-1 ml-4">
            <li className="flex items-start gap-2">
              <span className="text-[#00C853] font-bold">1.1</span>
              <span>L'installation d'une infrastructure de fibre optique dans un immeuble résidentiel de 8 logements situé au 2 Carré Morrison, Huntingdon.</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="text-[#00C853] font-bold">1.2</span>
              <span>La fourniture continue d'un service Internet via cette infrastructure et le support des usagers.</span>
            </li>
          </ul>
        </section>

        {/* Section 2 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            2. INSTALLATION DE LA FIBRE OPTIQUE
          </h2>
          
          <div className="grid grid-cols-2 gap-3">
            <div className="border border-gray-300 rounded-lg p-2">
              <h3 className="font-bold text-xs text-[#00C853] mb-1">2.1 Étendue des travaux</h3>
              <ul className="text-[11px] space-y-0.5">
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Tirage de fibre jusqu'au bâtiment (FTTB) ou jusqu'aux unités (FTTH)</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Installation de panneaux de distribution, routeurs et points d'accès Wi-Fi</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Fourniture de matériel: câblage extérieur, convertisseurs optiques, routeur, boitier télécom</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Branchement initial de chaque logement</span>
                </li>
              </ul>
            </div>
            <div className="space-y-2">
              <div className="border border-gray-300 rounded-lg p-2">
                <h3 className="font-bold text-xs text-[#00C853] mb-1">2.2 Délai d'installation</h3>
                <p className="text-[11px]">Les travaux débuteront dans un délai de 15 jours après la signature et seront complétés pour le <strong>30 avril 2026</strong> (locataire prévu pour le 1 mai).</p>
              </div>
              <div className="border border-gray-300 rounded-lg p-2">
                <h3 className="font-bold text-xs text-[#00C853] mb-1">2.3 Coûts d'installation</h3>
                <p className="text-[11px]">Frais unique : <strong className="text-[#00C853]">0$</strong> (inclus avec engagement 60 mois).</p>
              </div>
            </div>
          </div>
        </section>

        {/* Section 3 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            3. SERVICE INTERNET PAR FIBRE
          </h2>
          <div className="grid grid-cols-2 gap-3">
            <div className="border border-gray-300 rounded-lg p-2">
              <h3 className="font-bold text-xs text-[#00C853] mb-1">3.1 Spécifications techniques</h3>
              <ul className="text-[11px] space-y-0.5">
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Type de service : <strong>Fibre optique symétrique</strong></span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Débit : <strong>500 Mbps</strong> téléchargement / <strong>500 Mbps</strong> téléversement</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Distribution : FTTH Fibre jusqu'à chaque unité, 8 logements</span>
                </li>
              </ul>
            </div>
            <div className="border border-gray-300 rounded-lg p-2">
              <h3 className="font-bold text-xs text-[#00C853] mb-1">3.2 Support Technique</h3>
              <ul className="text-[11px] space-y-0.5">
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Assistance <strong>7 jours sur 7</strong></span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">•</span>
                  <span>Temps de réponse dans les 24 heures</span>
                </li>
              </ul>
            </div>
          </div>
        </section>

        {/* Page 1 Footer */}
        <footer className="border-t border-gray-200 pt-2 mt-auto">
          <p className="text-center text-xs text-gray-400">Page 1 de 3</p>
        </footer>
      </div>

      {/* ========== PAGE 2 ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-3 mb-4">
          <img src={targoLogo} alt="Targo" className="h-10 w-auto opacity-70" />
          <p className="text-sm text-gray-500">Entente de service - Fibre optique</p>
        </header>

        {/* Section 4 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            4. TARIFICATION DU SERVICE
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <ul className="text-[11px] space-y-0.5">
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Frais mensuels : <strong className="text-[#00C853]">34.95$/logement</strong>, soit <strong>279,60$ + taxes</strong> pour l'immeuble</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>3 premiers mois (mai, juin, juillet) : facturation progressive selon le taux d'occupation</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Paiement : prélèvement automatique le 1er de chaque mois</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Données illimitées, aucun frais additionnels</span>
              </li>
            </ul>
          </div>
        </section>

        {/* Section 5 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            5. ENGAGEMENT ET DURÉE
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <ul className="text-[11px] space-y-0.5">
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Durée : <strong>60 mois</strong>, renouvelable automatiquement</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Résiliation avant terme : les frais correspondent aux mensualités restantes, + solde des frais d'installations</span>
              </li>
            </ul>
          </div>
        </section>

        {/* Section 6 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            6. OBLIGATION DU CLIENT
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <ul className="text-[11px] space-y-0.5">
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Accès aux locaux techniques</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Respect des directives de sécurité</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Information des locataires sur le réseau (guide fourni au besoin)</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Installation de la fibre optique entre les unités logement et la salle électrique</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Installation des câbles réseau dans les appartements</span>
              </li>
              <li className="flex items-start gap-1.5">
                <span className="text-[#00C853]">•</span>
                <span>Installation des boîtiers télécom dans chaque logement</span>
              </li>
            </ul>
          </div>
        </section>

        {/* Section 7 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            7. ÉQUIPEMENT ET RESPONSABILITÉ DU CLIENT
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <p className="text-[11px]">
              L'équipement fourni demeure la propriété du Fournisseur. Le client est responsable de l'équipement installé dans chaque logement. En cas de perte, de vol ou de bris résultant d'une utilisation non conforme, des frais de remplacement de <strong>200 $</strong> par équipement seront facturés. L'usure normale est exclue.
            </p>
          </div>
        </section>

        {/* Section 8 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            8. RESPONSABILITÉ DE TARGO
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <p className="text-[11px]">
              Le fournisseur est responsable du bon fonctionnement de l'infrastructure installée, mais non responsable des défaillances causées par : le réseau électrique, mauvaise utilisation ou force majeure.
            </p>
          </div>
        </section>

        {/* Page 2 Footer */}
        <footer className="border-t border-gray-200 pt-2 mt-auto">
          <p className="text-center text-xs text-gray-400">Page 2 de 3</p>
        </footer>
      </div>

      {/* ========== PAGE 3 ========== */}
      <div className="page">
        {/* Header */}
        <header className="flex items-center justify-between pb-3 mb-4">
          <img src={targoLogo} alt="Targo" className="h-10 w-auto opacity-70" />
          <p className="text-sm text-gray-500">Entente de service - Signatures</p>
        </header>

        {/* Section 9 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            9. CLAUSE - EXCLUSIVITÉ DU FOURNISSEUR INTERNET
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <p className="text-[11px]">
              Targo est désigné comme fournisseur exclusif du service Internet pour l'ensemble des unités de logement visées par le présent contrat, et ce, pour toute la durée de l'entente. Aucun service Internet concurrent ne pourra être installé ou offert sans l'autorisation écrite du Fournisseur.
            </p>
          </div>
        </section>

        {/* Section 10 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            10. LOI APPLICABLE
          </h2>
          <div className="border border-gray-300 rounded-lg p-2">
            <p className="text-[11px]">
              Ce contrat est régi par les lois du Québec. Tout litige sera soumis aux tribunaux du district judiciaire de l'immeuble.
            </p>
          </div>
        </section>

        {/* Section 11 */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            11. CONDITION FINANCIÈRE ET AVANTAGES
          </h2>
          <div className="grid grid-cols-2 gap-3">
            <div className="border border-gray-300 rounded-lg p-2">
              <h3 className="font-bold text-xs text-[#00C853] mb-2">Pourquoi choisir Targo Communications?</h3>
              <ul className="text-[11px] space-y-0.5">
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">✓</span>
                  <span>Directeur de compte dédié</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">✓</span>
                  <span>Tarification avantageuse avec économies pour les locataires</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">✓</span>
                  <span>Amélioration de l'offre locative</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">✓</span>
                  <span>Optimisation de la valeur de l'immeuble</span>
                </li>
                <li className="flex items-start gap-1.5">
                  <span className="text-[#00C853]">✓</span>
                  <span>Augmentation possible du loyer de <strong>50$/logement</strong></span>
                </li>
              </ul>
            </div>
            <div className="border-2 border-[#00C853] rounded-lg p-2 bg-green-50">
              <h3 className="font-bold text-xs text-[#00C853] mb-2">Sur engagement 60 mois</h3>
              <table className="text-[11px] w-full">
                <tbody>
                  <tr>
                    <td className="py-0.5">Frais d'installation :</td>
                    <td className="text-right line-through text-gray-400">9 000,00$</td>
                    <td className="text-right font-bold text-[#00C853]">0$</td>
                  </tr>
                  <tr>
                    <td className="py-0.5">Équipements :</td>
                    <td className="text-right line-through text-gray-400">3 992,00$</td>
                    <td className="text-right font-bold text-[#00C853]">0$</td>
                  </tr>
                  <tr className="border-t border-gray-200">
                    <td className="pt-1 font-bold" colSpan={2}>Économie totale :</td>
                    <td className="pt-1 text-right font-bold text-[#00C853] text-sm">12 992,00$</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* Section 12 - Signatures */}
        <section className="mb-4">
          <h2 className="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
            12. SIGNATURES
          </h2>

          <div className="grid grid-cols-2 gap-4">
            {/* TARGO Signature */}
            <div className="border border-gray-300 rounded-lg p-3">
              <p className="text-xs font-bold text-[#00C853] mb-3">Pour TARGO Communications Inc.</p>
              <p className="text-[10px] text-gray-600 mt-3 mb-1">
                Fait à : <span className="border-b border-gray-400 inline-block w-40"></span>
              </p>
              <div className="border-b border-gray-400 h-12 mb-1 mt-4"></div>
              <p className="text-xs">Louis-Paul Bourdon</p>
              <p className="text-[10px] text-gray-500">Représentant autorisé</p>
              <p className="text-[10px] text-gray-600 mt-4">Date : <span className="border-b border-gray-400 inline-block w-36"></span></p>
            </div>

            {/* Client Signature */}
            <div className="border border-gray-300 rounded-lg p-3">
              <p className="text-xs font-bold text-[#00C853] mb-3">Pour le CLIENT</p>
              <p className="text-[10px] text-gray-600 mt-3 mb-1">
                Fait à : <span className="border-b border-gray-400 inline-block w-40"></span>
              </p>
              <div className="border-b border-gray-400 h-12 mb-1 mt-4"></div>
              <p className="text-xs">Marc-André Besner</p>
              <p className="text-[10px] text-gray-500">Propriétaire</p>
              <p className="text-[10px] text-gray-600 mt-4">Date : <span className="border-b border-gray-400 inline-block w-36"></span></p>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t-2 border-[#00C853] pt-4 mt-auto">
          <div className="flex justify-between items-center text-xs">
            <div>
              <p className="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
            </div>
            <div className="text-right">
              <p><strong>Téléphone :</strong> 1-855-888-2746</p>
              <p><strong>Courriel :</strong> support@targo.ca</p>
              <p><strong>Web :</strong> www.targo.ca</p>
            </div>
          </div>
          <p className="text-center text-xs text-gray-400 mt-3">Page 3 de 3</p>
        </footer>
      </div>

      {/* Print Styles */}
      <style>{`
        .contrat-blb {
          font-family: Arial, Helvetica, sans-serif;
          line-height: 1.4;
        }
        
        @media print {
          @page {
            size: letter;
            margin: 0.4in 0.5in;
          }
          
          * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            color-adjust: exact !important;
          }
          
          html, body {
            background: white !important;
            margin: 0 !important;
            padding: 0 !important;
          }
          
          .contrat-blb {
            background: white !important;
            margin: 0 !important;
            padding: 0 !important;
          }
          
          .contrat-blb .page {
            width: 100% !important;
            min-height: auto !important;
            max-height: none !important;
            padding: 0 !important;
            margin: 0 !important;
            box-shadow: none !important;
            page-break-after: always;
            page-break-inside: avoid;
            display: flex !important;
            flex-direction: column !important;
            background: white !important;
          }
          
          .contrat-blb .page:last-child {
            page-break-after: avoid;
          }
          
          .contrat-blb section {
            page-break-inside: avoid;
            break-inside: avoid;
          }
          
          .contrat-blb header {
            page-break-after: avoid;
            break-after: avoid;
          }
          
          .contrat-blb footer {
            margin-top: auto;
          }
          
          /* Force green backgrounds to print */
          .contrat-blb [class*="bg-[#00C853]"],
          .contrat-blb h2[class*="bg-"] {
            background-color: #00C853 !important;
            color: white !important;
          }
          
          /* Light green background for savings box */
          .contrat-blb .bg-green-50 {
            background-color: #f0fdf4 !important;
          }
        }
        
        @media screen {
          .contrat-blb {
            max-width: 8.5in;
            margin: 0 auto;
            padding-bottom: 2rem;
          }
          .contrat-blb .page {
            width: 8.5in;
            min-height: 11in;
            padding: 0.5in;
            margin: 0 auto 1.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            background: white;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 4px;
          }
        }
        
        .html2pdf__page-break {
          page-break-before: always;
        }
      `}</style>
    </div>
  );
};

export default ContratBLB;
