<script setup lang="ts">
import { ref } from "vue";
import { FileDown } from "lucide-vue-next";
// TODO(port): dep html2pdf.js is not installed in website-vue. The React version used it
// to render #contentRef to a downloadable PDF. Fallback below triggers window.print()
// (the closest static equivalent) so the "Télécharger PDF" button still works.
import targoLogo from "@/assets/targo-logo.png";

const contentRef = ref<HTMLDivElement | null>(null);

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

const handleDownloadPdf = () => {
  // TODO(port): replace with html2pdf.js once the dependency is available.
  window.print();
};
</script>

<template>
  <div class="contrat-blb bg-white text-black" ref="contentRef">
    <!-- Action Buttons - hidden when printing -->
    <div class="print:hidden fixed top-4 right-4 z-50 flex gap-2">
      <button
        @click="handleDownloadPdf"
        class="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 class="w-5 h-5" />
        Télécharger PDF
      </button>
      <button
        @click="handlePrint"
        class="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" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="page">
      <!-- Header -->
      <header class="flex items-center justify-between pb-4 mb-4 border-b-2 border-[#00C853]">
        <img :src="targoLogo" alt="Targo" class="h-12 w-auto" />
        <div class="text-right text-sm">
          <p class="font-bold text-[#00C853]">1-855-888-2746</p>
          <p class="text-gray-600">www.targo.ca</p>
        </div>
      </header>

      <!-- Title -->
      <h1 class="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 class="mb-4">
        <p class="font-semibold mb-2">Entre :</p>
        <div class="grid grid-cols-2 gap-4 text-sm">
          <div class="border border-gray-300 rounded-lg p-3">
            <p class="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 class="mt-2"><span class="font-medium">Représentant :</span> Louis-Paul Bourdon</p>
            <p class="text-xs text-gray-500 mt-1">(Ci-après désigné "TARGO")</p>
          </div>
          <div class="border border-gray-300 rounded-lg p-3">
            <p class="font-bold text-[#00C853] mb-1">Marc-André Besner</p>
            <p>75 Venise</p>
            <p>Coteau-du-Lac (Québec)</p>
            <p class="mt-2"><span class="font-medium">Client :</span> Marc-André Besner</p>
            <p class="text-xs text-gray-500 mt-1">(Ci-après désigné "CLIENT")</p>
          </div>
        </div>
      </section>

      <!-- Section 1 -->
      <section class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          1. OBJET DU CONTRAT
        </h2>
        <p class="text-xs mb-1">Ce contrat a pour objet :</p>
        <ul class="text-xs space-y-1 ml-4">
          <li class="flex items-start gap-2">
            <span class="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 class="flex items-start gap-2">
            <span class="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 class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          2. INSTALLATION DE LA FIBRE OPTIQUE
        </h2>

        <div class="grid grid-cols-2 gap-3">
          <div class="border border-gray-300 rounded-lg p-2">
            <h3 class="font-bold text-xs text-[#00C853] mb-1">2.1 Étendue des travaux</h3>
            <ul class="text-[11px] space-y-0.5">
              <li class="flex items-start gap-1.5">
                <span class="text-[#00C853]">•</span>
                <span>Tirage de fibre jusqu'au bâtiment (FTTB) ou jusqu'aux unités (FTTH)</span>
              </li>
              <li class="flex items-start gap-1.5">
                <span class="text-[#00C853]">•</span>
                <span>Installation de panneaux de distribution, routeurs et points d'accès Wi-Fi</span>
              </li>
              <li class="flex items-start gap-1.5">
                <span class="text-[#00C853]">•</span>
                <span>Fourniture de matériel: câblage extérieur, convertisseurs optiques, routeur, boitier télécom</span>
              </li>
              <li class="flex items-start gap-1.5">
                <span class="text-[#00C853]">•</span>
                <span>Branchement initial de chaque logement</span>
              </li>
            </ul>
          </div>
          <div class="space-y-2">
            <div class="border border-gray-300 rounded-lg p-2">
              <h3 class="font-bold text-xs text-[#00C853] mb-1">2.2 Délai d'installation</h3>
              <p class="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 class="border border-gray-300 rounded-lg p-2">
              <h3 class="font-bold text-xs text-[#00C853] mb-1">2.3 Coûts d'installation</h3>
              <p class="text-[11px]">Frais unique : <strong class="text-[#00C853]">0$</strong> (inclus avec engagement 60 mois).</p>
            </div>
          </div>
        </div>
      </section>

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

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

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

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

      <!-- Section 5 -->
      <section class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          5. ENGAGEMENT ET DURÉE
        </h2>
        <div class="border border-gray-300 rounded-lg p-2">
          <ul class="text-[11px] space-y-0.5">
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Durée : <strong>60 mois</strong>, renouvelable automatiquement</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="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 class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          6. OBLIGATION DU CLIENT
        </h2>
        <div class="border border-gray-300 rounded-lg p-2">
          <ul class="text-[11px] space-y-0.5">
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Accès aux locaux techniques</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Respect des directives de sécurité</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Information des locataires sur le réseau (guide fourni au besoin)</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Installation de la fibre optique entre les unités logement et la salle électrique</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Installation des câbles réseau dans les appartements</span>
            </li>
            <li class="flex items-start gap-1.5">
              <span class="text-[#00C853]">•</span>
              <span>Installation des boîtiers télécom dans chaque logement</span>
            </li>
          </ul>
        </div>
      </section>

      <!-- Section 7 -->
      <section class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          7. ÉQUIPEMENT ET RESPONSABILITÉ DU CLIENT
        </h2>
        <div class="border border-gray-300 rounded-lg p-2">
          <p class="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 class="mb-4">
        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
          8. RESPONSABILITÉ DE TARGO
        </h2>
        <div class="border border-gray-300 rounded-lg p-2">
          <p class="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 class="border-t border-gray-200 pt-2 mt-auto">
        <p class="text-center text-xs text-gray-400">Page 2 de 3</p>
      </footer>
    </div>

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

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

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

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

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

      <!-- Footer -->
      <footer class="border-t-2 border-[#00C853] pt-4 mt-auto">
        <div class="flex justify-between items-center text-xs">
          <div>
            <p class="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
          </div>
          <div class="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 class="text-center text-xs text-gray-400 mt-3">Page 3 de 3</p>
      </footer>
    </div>
  </div>
</template>

<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>
