'use client'

import { useEffect, useMemo, useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import { formatCurrency, type SupportedCurrency } from '@rentaldrivego/types'
import { apiFetch } from '@/lib/api'
import { useDashboardI18n } from '@/components/I18nProvider'
import VehicleConditionSheet from '@/components/reservations/VehicleConditionSheet'

type DamagePoint = {
  id?: string
  viewType?: 'TOP' | 'FRONT' | 'REAR' | 'LEFT' | 'RIGHT'
  x: number
  y: number
  damageType: 'SCRATCH' | 'DENT' | 'CRACK' | 'CHIP' | 'MISSING' | 'STAIN' | 'OTHER'
  severity: 'MINOR' | 'MODERATE' | 'MAJOR'
  description?: string | null
}

type ContractPayload = {
  reservationId: string
  contractLocale: string
  contractNumber: string | null
  invoiceNumber: string | null
  generatedAt: string
  status: string
  paymentStatus: string
  paymentMode: string | null
  notes: string | null
  company: {
    name: string
    legalName: string
    email: string | null
    phone: string | null
    address: string | Record<string, unknown> | null
    city: string | null
    country: string | null
    registrationNumber: string | null
    taxId: string | null
    logoUrl: string | null
  }
  driver: {
    firstName: string
    lastName: string
    email: string
    phone: string | null
    dateOfBirth: string | null
    driverLicense: string | null
    licenseCountry: string | null
    licenseCategory: string | null
    licenseIssuedAt: string | null
    licenseExpiry: string | null
    nationality: string | null
  }
  additionalDrivers: Array<{
    id: string
    firstName: string
    lastName: string
    email: string | null
    phone: string | null
    driverLicense: string
    licenseIssuedAt: string | null
    licenseExpiry: string | null
    licenseCountry: string | null
    dateOfBirth: string | null
    totalCharge: number
  }>
  vehicle: {
    make: string
    model: string
    year: number
    color: string
    licensePlate: string
    vin: string | null
    category: string
  }
  rentalPeriod: {
    startDate: string
    endDate: string
    totalDays: number
    pickupLocation: string | null
    returnLocation: string | null
  }
  insurance: {
    total: number
    policies: Array<{
      id: string
      name: string
      chargeType: string
      unitPrice: number
      totalCharge: number
    }>
  }
  inspections: {
    checkIn: {
      mileage: number | null
      fuelLevel: string
      generalCondition: string | null
      employeeNotes: string | null
      damagePoints: DamagePoint[]
    } | null
    checkOut: {
      mileage: number | null
      fuelLevel: string
      generalCondition: string | null
      employeeNotes: string | null
      damagePoints: DamagePoint[]
    } | null
  }
  terms: {
    terms: string | null
    fuelPolicy: string | null
    fuelPolicyType: string | null
    depositPolicy: string | null
    lateFeePolicy: string | null
    damagePolicy: string | null
    footerNote: string | null
    signatureRequired: boolean
  }
  invoice: {
    currency: SupportedCurrency
    lineItems: Array<{
      description: string
      qty: number
      unitPrice: number
      total: number
      category: string
    }>
    subtotal: number
    taxes: Array<{ label: string; rate: number; amount: number }>
    taxTotal: number
    total: number
    amountPaid: number
    balanceDue: number
    payments: Array<{
      id: string
      amount: number
      currency: SupportedCurrency
      type: string
      status: string
      provider: string
      paymentMethod: string | null
      paidAt: string | null
      createdAt: string
    }>
  }
}

function formatAddress(address: string | Record<string, unknown> | null, city: string | null, country: string | null) {
  const lines: string[] = []
  if (typeof address === 'string' && address.trim()) lines.push(address.trim())
  if (address && typeof address === 'object' && !Array.isArray(address)) {
    for (const value of Object.values(address)) {
      if (typeof value === 'string' && value.trim()) lines.push(value.trim())
    }
  }
  if (city) lines.push(city)
  if (country) lines.push(country)
  return lines.join(', ')
}

function formatDateOnly(value: string | null | undefined, localeCode: string, fallback: string) {
  return value
    ? new Date(value).toLocaleDateString(localeCode, {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      })
    : fallback
}

function splitTerms(text: string | null | undefined) {
  if (!text?.trim()) return []
  return text
    .split(/\n\s*\n|\n(?=\d+\.)/)
    .map((item) => item.replace(/^\d+\.\s*/, '').trim())
    .filter(Boolean)
}

type ConditionLanguage = 'en' | 'fr' | 'ar'

type ConditionItem = {
  title: string
  body: string
}

const FIXED_CONDITIONS: Record<ConditionLanguage, ConditionItem[]> = {
  en: [
    {
      title: 'Article 1: Vehicle maintenance and compliance',
      body: 'The Lessor declares that the vehicle is regularly maintained, insured, registered, and compliant with applicable road safety standards.\n\nThe Lessee acknowledges having received the vehicle in apparent working order, subject to observations noted in the departure inspection report.\n\nIn the event of a mechanical anomaly, warning light, abnormal noise, puncture, breakdown, or incident likely to affect safety, the Lessee must stop using the vehicle as soon as safety conditions permit and immediately notify the Lessor.',
    },
    {
      title: 'Article 2: Insurance — exclusions',
      body: 'The Lessee acknowledges being informed of the applicable guarantees, exclusions, and deductibles.\n\nExcluded from coverage unless otherwise stipulated by the insurer:\n- driving by an unauthorized person;\n- driving without a valid license;\n- driving under the influence of alcohol, narcotics, or prohibited substances;\n- use off authorized roads;\n- participation in races or competitions;\n- gross negligence;\n- false declaration;\n- failure to report an accident within the required timeframe;\n- theft with keys left in the vehicle;\n- unlawful transport of persons or goods.',
    },
    {
      title: 'Article 3: Mileage',
      body: 'The authorized mileage is specified in the contract. Any excess kilometer will be charged at the contractual rate.\n\nMileage is determined based on the vehicle odometer, as recorded in the departure and return inspection reports.',
    },
    {
      title: 'Article 4: Use of the vehicle',
      body: 'The Lessee undertakes to use the vehicle with care, in accordance with its normal purpose and Moroccan legislation.\n\nThe following are prohibited:\n- subletting the vehicle;\n- transporting dangerous or unlawful goods;\n- using the vehicle for illegal activities;\n- participating in competitions or sporting events;\n- towing another vehicle without written authorization;\n- traveling outside Moroccan territory without written authorization from the Lessor;\n- modifying the vehicle or its equipment;\n- smoking in the vehicle if prohibited by the agency;\n- carrying more passengers than authorized.\n\nThe Lessee is responsible for all road traffic violations committed during the rental period.',
    },
    {
      title: 'Article 5: Return of the vehicle',
      body: 'The Lessee must return the vehicle on the date, at the time, and at the location specified in the contract, in the condition in which it was delivered, subject to normal wear.\n\nThe vehicle must be returned with: the same fuel level as at departure, the vehicle documents, the keys, all accessories and equipment provided, normal cleanliness, and no new undeclared damage.\n\nIn case of late return, the Lessor may charge additional fees as specified in the contract. No refund will be made in the event of early return.',
    },
    {
      title: 'Article 6: Departure and return inspection',
      body: 'The Parties carry out an inspection at departure and at return, which may include dated photographs of the vehicle, odometer, fuel level, bodywork, interior, tires, windows, and equipment.\n\nAny damage found at return and not mentioned in the departure inspection report may be charged to the Lessee, subject to applicable insurance guarantees.',
    },
    {
      title: 'Article 7: Accident, breakdown, theft, or incident',
      body: 'In the event of an accident, breakdown, theft, fire, or any other incident, the Lessee must immediately:\n- inform the Lessor by phone and in writing;\n- notify the competent authorities if necessary;\n- complete an amicable accident report;\n- obtain an official document in the event of theft, injury, or major damage;\n- not abandon the vehicle without the Lessor\'s authorization;\n- not admit liability without prior agreement of the Lessor or insurer.\n\nThe Lessee must transmit all relevant documents to the Lessor within 48 hours of the incident.\n\nFailure to follow this procedure may result in the Lessee being held financially responsible if the insurer refuses coverage.',
    },
    {
      title: 'Article 8: Liability of the Lessee',
      body: 'The Lessee is responsible for:\n- damage caused to the vehicle during the rental period;\n- damage caused to third parties within the limits provided by law and insurance;\n- fines, traffic violations, impoundment fees, tolls, and administrative charges;\n- costs related to improper use of the vehicle;\n- loss of keys, documents, or accessories;\n- damage not covered by insurance;\n- the deductible provided in the insurance policy.\n\nThe Lessee remains responsible until the vehicle is effectively returned to the Lessor and the return inspection report is signed.',
    },
    {
      title: 'Article 9: Violations, fines, and administrative fees',
      body: 'All violations committed during the rental period are the responsibility of the Lessee.\n\nThe Lessor may communicate the Lessee\'s identity to the competent authorities and charge the Lessee for: fine amounts, file processing fees, impoundment fees, notification fees, and any cost related to the administrative processing of the violation.',
    },
    {
      title: 'Article 10: Cancellation and termination',
      body: 'The Lessor may immediately terminate the contract without compensation for the Lessee in the event of: false declaration, invalid license, non-payment, prohibited use of the vehicle, dangerous driving, serious breach of this contract, or reasonable suspicion of fraud or unlawful use.\n\nIn such case, the Lessee must immediately return the vehicle.',
    },
    {
      title: 'Article 11: Personal data',
      body: 'The Lessee authorizes the Lessor to collect and retain data necessary for the performance of this contract, including identity, contact details, driving license, payment information, vehicle documents, inspection reports, and incident-related data.\n\nThis data is used for contract performance, billing, claims management, violation management, and legal obligations. The Lessor undertakes to protect this data and retain it only for the duration required by applicable law.',
    },
    {
      title: 'Article 12: Applicable law and jurisdiction',
      body: 'This contract is governed by Moroccan law.\n\nIn the event of a dispute, the Parties shall endeavor to find an amicable solution. Failing agreement, the dispute shall be brought before the competent court in the jurisdiction where the agency is registered.',
    },
  ],
  fr: [
    {
      title: 'Article 1 : Entretien et conformité du véhicule',
      body: 'Le Loueur déclare que le véhicule est régulièrement entretenu, assuré, immatriculé et conforme aux normes de sécurité routière applicables.\n\nLe Locataire reconnaît avoir reçu un véhicule en état apparent de fonctionnement, sous réserve des observations mentionnées dans l\'état des lieux de départ.\n\nEn cas d\'anomalie mécanique, voyant d\'alerte, bruit anormal, crevaison, panne ou incident susceptible d\'affecter la sécurité, le Locataire doit cesser l\'utilisation du véhicule dès que les conditions de sécurité le permettent et informer immédiatement le Loueur.',
    },
    {
      title: 'Article 2 : Assurance — exclusions',
      body: 'Le Locataire reconnaît avoir été informé des garanties, exclusions et franchises applicables.\n\nSont notamment exclus de la couverture, sauf stipulation contraire de l\'assureur :\n- conduite par une personne non autorisée ;\n- conduite sans permis valide ;\n- conduite sous l\'emprise d\'alcool, stupéfiants ou substances interdites ;\n- usage du véhicule hors des voies autorisées ;\n- participation à des courses, essais ou compétitions ;\n- négligence grave ;\n- fausse déclaration ;\n- absence de déclaration d\'accident dans les délais ;\n- vol avec clés laissées dans le véhicule ;\n- transport illicite de personnes ou de marchandises.',
    },
    {
      title: 'Article 3 : Kilométrage',
      body: 'Le kilométrage autorisé est précisé dans le contrat. Tout kilomètre supplémentaire sera facturé au tarif contractuel.\n\nLe kilométrage fait foi sur la base du compteur du véhicule, constaté dans l\'état des lieux de départ et de retour.',
    },
    {
      title: 'Article 4 : Utilisation du véhicule',
      body: 'Le Locataire s\'engage à utiliser le véhicule avec prudence, conformément à sa destination normale et à la législation marocaine.\n\nIl est interdit notamment :\n- de sous-louer le véhicule ;\n- de transporter des marchandises dangereuses ou illicites ;\n- d\'utiliser le véhicule pour des activités illégales ;\n- de participer à des compétitions ou essais sportifs ;\n- de tracter un autre véhicule sans autorisation écrite ;\n- de circuler hors du territoire marocain sans autorisation écrite du Loueur ;\n- de modifier le véhicule ou ses équipements ;\n- de fumer dans le véhicule si l\'agence l\'interdit ;\n- de transporter un nombre de passagers supérieur à celui autorisé.\n\nLe Locataire est responsable des infractions au Code de la route commises pendant la période de location.',
    },
    {
      title: 'Article 5 : Restitution du véhicule',
      body: 'Le Locataire doit restituer le véhicule à la date, à l\'heure et au lieu prévus au contrat, dans l\'état où il lui a été remis, sous réserve de l\'usure normale.\n\nLe véhicule doit être restitué avec : le même niveau de carburant qu\'au départ, les papiers du véhicule, les clés, les accessoires et équipements remis, un état de propreté normal, et aucun dommage nouveau non déclaré.\n\nEn cas de retard, le Loueur pourra facturer des frais supplémentaires selon le contrat. En cas de retour anticipé, aucun remboursement ne sera effectué.',
    },
    {
      title: 'Article 6 : État des lieux',
      body: 'Les Parties établissent un état des lieux au départ et au retour, pouvant être accompagné de photographies datées du véhicule, du compteur, du carburant, de la carrosserie, de l\'intérieur, des pneus, des vitres et des équipements.\n\nTout dommage constaté au retour et non mentionné dans l\'état des lieux de départ pourra être facturé au Locataire, sous réserve des garanties d\'assurance applicables.',
    },
    {
      title: 'Article 7 : Accident, panne, vol ou sinistre',
      body: 'En cas d\'accident, panne, vol, tentative de vol, incendie ou tout autre sinistre, le Locataire doit immédiatement :\n- informer le Loueur par téléphone et par écrit ;\n- prévenir les autorités compétentes si nécessaire ;\n- établir un constat amiable en cas d\'accident ;\n- obtenir un document officiel en cas de vol, blessure ou dommage important ;\n- ne pas abandonner le véhicule sans autorisation du Loueur ;\n- ne pas reconnaître de responsabilité sans accord préalable du Loueur ou de l\'assureur.\n\nLe Locataire doit transmettre au Loueur tous les documents utiles dans un délai de 48 heures à compter du sinistre.\n\nEn cas de non-respect de cette procédure, le Locataire pourra être tenu responsable des conséquences financières, notamment si l\'assureur refuse sa garantie.',
    },
    {
      title: 'Article 8 : Responsabilité du Locataire',
      body: 'Le Locataire est responsable :\n- des dommages causés au véhicule pendant la période de location ;\n- des dommages causés aux tiers dans les limites prévues par la loi et l\'assurance ;\n- des amendes, contraventions, frais de fourrière, péages et frais administratifs ;\n- des frais liés à une mauvaise utilisation du véhicule ;\n- des pertes de clés, documents ou accessoires ;\n- des dommages non couverts par l\'assurance ;\n- de la franchise prévue au contrat d\'assurance.\n\nLe Locataire reste responsable jusqu\'à la restitution effective du véhicule au Loueur et la signature de l\'état des lieux de retour.',
    },
    {
      title: 'Article 9 : Infractions, amendes et frais administratifs',
      body: 'Toutes les infractions commises pendant la durée de location sont à la charge du Locataire.\n\nLe Loueur pourra communiquer l\'identité du Locataire aux autorités compétentes et facturer au Locataire : le montant des amendes, les frais de dossier, les frais de fourrière, les frais de notification et tout coût lié au traitement administratif de l\'infraction.',
    },
    {
      title: 'Article 10 : Annulation et résiliation',
      body: 'Le Loueur peut résilier immédiatement le contrat, sans indemnité pour le Locataire, en cas de : fausse déclaration, permis invalide, défaut de paiement, utilisation interdite du véhicule, conduite dangereuse, non-respect grave du présent contrat, ou suspicion légitime de fraude ou d\'usage illicite.\n\nDans ce cas, le Locataire doit restituer immédiatement le véhicule.',
    },
    {
      title: 'Article 11 : Données personnelles',
      body: 'Le Locataire autorise le Loueur à collecter et conserver les données nécessaires à l\'exécution du présent contrat, notamment son identité, ses coordonnées, son permis de conduire, les informations de paiement, les documents liés au véhicule, les états des lieux et les données relatives aux éventuels incidents.\n\nCes données sont utilisées pour l\'exécution du contrat, la facturation, la gestion des sinistres, la gestion des infractions et les obligations légales. Le Loueur s\'engage à protéger ces données et à les conserver uniquement pendant la durée nécessaire aux finalités prévues.',
    },
    {
      title: 'Article 12 : Loi applicable et juridiction compétente',
      body: 'Le présent contrat est soumis au droit marocain.\n\nEn cas de litige relatif à sa validité, son interprétation, son exécution ou sa résiliation, les Parties s\'efforceront de trouver une solution amiable. À défaut d\'accord amiable, le litige sera porté devant le tribunal compétent du ressort du siège de l\'agence.',
    },
  ],
  ar: [
    {
      title: 'البند 1 : صيانة المركبة ومطابقتها للمعايير',
      body: 'يُعلن المؤجر بأن المركبة تخضع للصيانة الدورية وهي مؤمنة ومسجلة ومطابقة لمعايير السلامة المرورية المعمول بها.\n\nيُقر المستأجر باستلام المركبة في حالة ظاهرة جيدة مع مراعاة الملاحظات المدونة في محضر المعاينة عند التسليم.\n\nفي حالة حدوث عطل ميكانيكي أو إضاءة مؤشر تحذير أو صوت غير معتاد أو ثقب في الإطار أو أي حادث يؤثر على السلامة، يجب على المستأجر إيقاف المركبة فور توفر شروط السلامة وإبلاغ المؤجر على الفور.',
    },
    {
      title: 'البند 2 : التأمين — الاستثناءات',
      body: 'يُقر المستأجر بأنه أُحيط علماً بالضمانات والاستثناءات والتحمل المالي المعمول بها.\n\nيُستثنى من نطاق التغطية التأمينية، ما لم يُنص خلافاً على ذلك:\n- القيادة من قبل شخص غير مرخص؛\n- القيادة دون رخصة سارية؛\n- القيادة تحت تأثير الكحول أو المخدرات أو المواد الممنوعة؛\n- استخدام المركبة خارج الطرق المرخصة؛\n- المشاركة في السباقات أو المنافسات؛\n- الإهمال الجسيم؛\n- الإدلاء بتصريحات كاذبة؛\n- الإخلال بالتبليغ عن الحادث في الآجال المحددة؛\n- السرقة مع ترك المفاتيح داخل المركبة؛\n- النقل غير المشروع للأشخاص أو البضائع.',
    },
    {
      title: 'البند 3 : الكيلومترات',
      body: 'المسافة المسموح بها محددة في العقد، وكل كيلومتر زائد يُفوتر وفق الأسعار التعاقدية.\n\nيُعتمد عداد المركبة مرجعاً للمسافة المقطوعة وفقاً لما يُدون في محضري المعاينة عند التسليم والإرجاع.',
    },
    {
      title: 'البند 4 : استخدام المركبة',
      body: 'يلتزم المستأجر باستخدام المركبة باحتراز وفق الغرض المحدد لها والتشريع المغربي المعمول به.\n\nيُحظر على وجه الخصوص:\n- التنازل عن حق الإيجار للغير؛\n- نقل البضائع الخطرة أو غير المشروعة؛\n- استخدام المركبة في أنشطة غير قانونية؛\n- المشاركة في المسابقات أو الأنشطة الرياضية؛\n- جر مركبة أخرى دون إذن كتابي؛\n- التنقل خارج التراب المغربي دون إذن كتابي من المؤجر؛\n- تعديل المركبة أو معداتها؛\n- التدخين إذا كان محظوراً في الوكالة؛\n- نقل عدد ركاب يتجاوز الطاقة الاستيعابية.\n\nالمستأجر مسؤول عن جميع مخالفات قانون المرور المرتكبة خلال مدة التأجير.',
    },
    {
      title: 'البند 5 : إرجاع المركبة',
      body: 'يلتزم المستأجر بإعادة المركبة في التاريخ والساعة والمكان المحددين في العقد بالحالة التي تسلمها عليها مع مراعاة الاستهلاك العادي.\n\nيجب إعادة المركبة مع: مستوى الوقود ذاته عند التسليم، ووثائق المركبة، والمفاتيح، وجميع الملحقات والمعدات، ونظافة معتادة، وبدون أي أضرار جديدة غير مُعلنة.\n\nفي حالة التأخر، يحق للمؤجر احتساب رسوم إضافية وفق العقد. لا يحق للمستأجر المطالبة بأي استرداد في حالة الإرجاع المبكر.',
    },
    {
      title: 'البند 6 : معاينة المركبة',
      body: 'يُجري الطرفان معاينة للمركبة عند التسليم وعند الإرجاع، يمكن أن تشمل صوراً مؤرخة للمركبة وعداد المسافة ومستوى الوقود والهيكل والداخل والإطارات والزجاج والمعدات.\n\nيحق للمؤجر تحميل المستأجر تكاليف أي ضرر يُكشف عنه عند الإرجاع ولم يُشر إليه في محضر المعاينة عند التسليم، مع مراعاة ضمانات التأمين السارية.',
    },
    {
      title: 'البند 7 : الحوادث والأعطال والسرقة',
      body: 'في حالة وقوع حادث أو عطل أو سرقة أو محاولة سرقة أو حريق أو أي حادث آخر، يجب على المستأجر فوراً:\n- إبلاغ المؤجر هاتفياً وكتابياً؛\n- إخطار السلطات المختصة إذا اقتضى الأمر؛\n- تحرير محضر حادث ودي عند الاقتضاء؛\n- الحصول على وثيقة رسمية في حالات السرقة أو الإصابة أو الأضرار الجسيمة؛\n- عدم التخلي عن المركبة دون موافقة المؤجر؛\n- عدم الاعتراف بأي مسؤولية دون موافقة مسبقة من المؤجر أو شركة التأمين.\n\nيجب إرسال جميع الوثائق اللازمة إلى المؤجر في أجل أقصاه 48 ساعة. قد يُحمّل المستأجر المسؤولية المالية عند عدم الامتثال لهذا الإجراء خاصة إذا رفضت شركة التأمين تقديم ضمانها.',
    },
    {
      title: 'البند 8 : مسؤولية المستأجر',
      body: 'يتحمل المستأجر المسؤولية عن:\n- الأضرار التي تلحق بالمركبة أثناء مدة التأجير؛\n- الأضرار التي تلحق بالغير في حدود ما تنص عليه القوانين والتأمين؛\n- الغرامات والمخالفات ورسوم الحجز وأتاوات الطريق والرسوم الإدارية؛\n- التكاليف المترتبة على الاستخدام الخاطئ للمركبة؛\n- فقدان المفاتيح أو الوثائق أو الملحقات؛\n- الأضرار غير المشمولة بالتأمين؛\n- مبلغ التحمل المنصوص عليه في عقد التأمين.\n\nتبقى مسؤولية المستأجر قائمة حتى يتم إرجاع المركبة فعلياً إلى المؤجر والتوقيع على محضر المعاينة عند الإرجاع.',
    },
    {
      title: 'البند 9 : المخالفات والغرامات والرسوم الإدارية',
      body: 'تقع على عاتق المستأجر جميع المخالفات المرتكبة خلال مدة التأجير.\n\nيحق للمؤجر الإفصاح عن هوية المستأجر للسلطات المختصة وإصدار فاتورة له بما يشمل: مبالغ الغرامات، ورسوم الملف، ورسوم الحجز، ورسوم الإشعار، وأي تكاليف إدارية أخرى ذات صلة.',
    },
    {
      title: 'البند 10 : الفسخ والإنهاء',
      body: 'يحق للمؤجر إنهاء العقد فوراً دون أي تعويض للمستأجر في حالات: الإدلاء بتصريح كاذب، أو انتهاء صلاحية الرخصة، أو عدم السداد، أو الاستخدام المحظور للمركبة، أو القيادة المتهورة، أو الإخلال الجسيم بأحكام هذا العقد، أو الاشتباه المنطقي في الاحتيال أو الاستخدام غير المشروع.\n\nفي هذه الحالة، يلتزم المستأجر بإعادة المركبة فوراً.',
    },
    {
      title: 'البند 11 : البيانات الشخصية',
      body: 'يأذن المستأجر للمؤجر بجمع البيانات اللازمة لتنفيذ هذا العقد والاحتفاظ بها، بما في ذلك بياناته الشخصية ومعلومات الاتصال ورخصة القيادة ومعلومات الدفع ووثائق المركبة ومحاضر المعاينة والبيانات المتعلقة بأي حوادث.\n\nتُستخدم هذه البيانات في تنفيذ العقد والفوترة وإدارة الحوادث ومعالجة المخالفات والوفاء بالالتزامات القانونية. يتعهد المؤجر بحماية هذه البيانات والاحتفاظ بها فقط طوال المدة اللازمة للأغراض المحددة.',
    },
    {
      title: 'البند 12 : القانون الواجب التطبيق والاختصاص القضائي',
      body: 'يخضع هذا العقد للقانون المغربي.\n\nفي حالة نشوء نزاع يتعلق بصحته أو تفسيره أو تنفيذه أو إنهائه، يسعى الطرفان إلى التوصل إلى حل ودي. وفي حالة عدم التوصل إلى اتفاق ودي، يُحال النزاع إلى المحكمة المختصة في دائرة مقر الوكالة.',
    },
  ],
}


function normalizeContractLocale(value: string | null | undefined, fallback: ConditionLanguage): 'en' | 'en-ar' | 'fr' | 'fr-ar' | 'ar' {
  const normalized = String(value ?? '').trim().toLowerCase()
  if (normalized === 'en' || normalized === 'en-ar' || normalized === 'fr' || normalized === 'fr-ar' || normalized === 'ar') {
    return normalized
  }
  return fallback
}

function getConditionLanguages(mode: 'en' | 'en-ar' | 'fr' | 'fr-ar' | 'ar'): ConditionLanguage[] {
  if (mode === 'en' || mode === 'en-ar') return ['en', 'ar']
  if (mode === 'fr' || mode === 'fr-ar') return ['fr', 'ar']
  return ['ar']
}

function getConditionLanguageLabel(language: ConditionLanguage) {
  if (language === 'fr') return 'Français'
  if (language === 'ar') return 'العربية'
  return 'English'
}

function getAdditionalConditionTitle(language: ConditionLanguage, index: number) {
  if (language === 'fr') return `Clause supplémentaire ${index + 1}`
  if (language === 'ar') return `بند إضافي ${index + 1}`
  return `Additional clause ${index + 1}`
}

function splitConditionItems(items: ConditionItem[]) {
  const midpoint = Math.ceil(items.length / 2)
  return [items.slice(0, midpoint), items.slice(midpoint)]
}

function PaperField({
  label,
  value,
  className = '',
}: {
  label: string
  value: string
  className?: string
}) {
  return (
    <div className={`border border-stone-400/80 ${className}`}>
      <div className="border-b border-stone-300 bg-stone-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-stone-600">
        {label}
      </div>
      <div className="min-h-[38px] bg-[#fff5ea] px-2 py-2 text-sm text-stone-900">
        {value}
      </div>
    </div>
  )
}

function PaperSection({
  title,
  children,
  className = '',
}: {
  title: string
  children: React.ReactNode
  className?: string
}) {
  return (
    <section className={`border border-stone-500 ${className}`}>
      <div className="border-b border-stone-500 bg-stone-100 px-3 py-1.5 text-[11px] font-bold uppercase tracking-[0.12em] text-stone-700">
        {title}
      </div>
      <div>{children}</div>
    </section>
  )
}

export default function ContractDetailPage() {
  const { id } = useParams<{ id: string }>()
  const { language } = useDashboardI18n()
  const [contract, setContract] = useState<ContractPayload | null>(null)
  const [error, setError] = useState<string | null>(null)

  const copyByLanguage = {
    en: {
      back: 'Back to contracts',
      booking: 'Booking',
      print: 'Print',
      generated: 'Generated',
      status: 'Status',
      paymentStatus: 'Payment status',
      paymentMode: 'Payment mode',
      company: 'Rental company',
      driver: 'Primary driver',
      additionalDrivers: 'Additional drivers',
      vehicle: 'Vehicle',
      period: 'Rental period',
      pickup: 'Pickup',
      dropoff: 'Return',
      start: 'Start',
      end: 'End',
      contractTerms: 'Contract terms',
      insurance: 'Insurance',
      inspections: 'Vehicle condition and damage',
      noDamage: 'No damage markers recorded at check-in.',
      invoice: 'Invoice',
      subtotal: 'Subtotal',
      paid: 'Paid',
      balance: 'Balance due',
      payments: 'Payments',
      notes: 'Booking notes',
      footer: 'Footer note',
      none: 'Not provided',
      contractNo: 'Contract #',
      invoiceNo: 'Invoice #',
      fuel: 'Fuel policy',
      deposit: 'Deposit policy',
      lateFees: 'Late fee policy',
      damage: 'Damage policy',
      termsLabel: 'Terms',
      signature: 'Signature required',
      customerDamage: 'Check-in inspection',
      mileage: 'Mileage',
      fuelLevel: 'Fuel level',
      unitPrice: 'Unit price',
      qty: 'Qty',
      total: 'Total',
      actionOpenBooking: 'Open booking',
      noAdditionalDrivers: 'No additional drivers.',
      noInsurance: 'No insurance selected.',
      noPayments: 'No payments recorded.',
      loading: 'Loading contract…',
      yes: 'Yes',
      no: 'No',
      agreementTitle: 'Rental Agreement',
      agreementForReservation: 'For reservation',
      draftAgreement: 'Draft agreement',
      customerInformation: 'Customer information',
      rentalPeriodDetails: 'Rental period and driver details',
      insuranceCondition: 'Insurance and vehicle condition',
      acknowledgementSignature: 'Driver acknowledgement and signature',
      vehicleInformation: 'Rental vehicle information',
      chargesAndFees: 'Fees and charges',
      damageDiagram: 'Vehicle damage diagram',
      customerName: 'Customer name',
      homeAddress: 'Home address',
      cityCountry: 'City / Country',
      telephone: 'Telephone',
      emailLabel: 'E-mail',
      driverLicenseNumber: "Driver's license no.",
      nationalityLabel: 'Nationality',
      birthDate: 'Birth date',
      issuedExpires: 'Issued / Expires',
      dateOut: 'Date out',
      dateDueIn: 'Date due in',
      mileageOut: 'Mileage out',
      mileageIn: 'Mileage in',
      pickupLocationLabel: 'Pickup location',
      returnLocationLabel: 'Return location',
      insuranceSelections: 'Insurance selections',
      checkInCondition: 'Check-in condition',
      signatureAcknowledgement:
        'The renter confirms that the vehicle was received in acceptable condition, agrees to return it according to the rental policies, and accepts responsibility for authorized charges, violations, late fees, fuel adjustments, and damage assessment tied to this reservation.',
      customerSignature: 'Customer signature',
      companyRepresentative: 'Company representative',
      yearMakeModel: 'Year / Make / Model',
      licensePlateLabel: 'License plate',
      vehicleColor: 'Vehicle color',
      categoryLabel: 'Category',
      vinLabel: 'VIN',
      dailyRate: 'Daily rate',
      rentalDays: 'Rental days',
      insuranceTotal: 'Insurance total',
      additionalDriverFees: 'Additional driver fees',
      amountPaidLabel: 'Amount paid',
      balanceDueLabel: 'Balance due',
      lastPayment: 'Last payment',
      roadsideAssistance: 'For after-hours roadside assistance or towing call:',
      taxesLabel: 'Taxes',
      totalChargeLabel: 'Total charge',
      damageMarkersRecorded: (count: number) => `${count} damage marker(s) recorded at check-in.`,
      termsAndConditions: 'Rental Agreement Terms and Conditions',
      checkInMileageFuel: 'Check-in mileage / fuel',
      checkOutMileageFuel: 'Check-out mileage / fuel',
      damageEntries: 'Damage entries',
      notesAndFooter: 'Notes and footer',
      paymentsRecorded: (count: number) => `${count} payment(s) recorded.`,
      clauseHeadings: [
        'Vehicle and reservation',
        'Authorized use',
        'Fuel and return condition',
        'Damage liability',
        'Deposit and security hold',
        'Late return and extra charges',
        'Payment authorization',
        'General provisions',
      ],
      fallbackClauses: {
        vehicleReservation: (vehicle: string) => `The renter accepts responsibility for the ${vehicle} during the rental period and agrees to return it in the same general condition, ordinary wear excepted.`,
        authorizedUse: 'Only the primary driver and approved additional drivers may operate the vehicle. The renter is responsible for any fines, tolls, traffic violations, or unauthorized use during the reservation.',
        fuel: 'The vehicle must be returned with the agreed fuel level. Any shortage may result in refueling charges.',
        damage: 'Any loss or damage, including damage caused by negligence or misuse, may be charged to the renter according to company policy and applicable law.',
        deposit: 'A security deposit may be held to secure unpaid balances, penalties, damage, or post-rental adjustments until the reservation is reconciled.',
        lateFees: 'Late return, excess mileage, cleaning, or administrative fees may be applied based on the reservation terms and final inspection.',
        paymentAuthorization: (company: string) => `The renter authorizes ${company} to process charges related to this reservation, including rental charges, taxes, optional coverages, additional drivers, and approved post-rental adjustments.`,
        general: "This agreement remains subject to the company's full rental policies, final inspection, and applicable local regulations.",
      },
      contractStatusLabels: { DRAFT: 'Draft', PENDING: 'Pending', ACTIVE: 'Active', COMPLETED: 'Completed', CANCELLED: 'Cancelled' },
      paymentStatusLabels: { UNPAID: 'Unpaid', PAID: 'Paid', PARTIAL: 'Partial', REFUNDED: 'Refunded', OVERDUE: 'Overdue', PENDING: 'Pending', COMPLETED: 'Completed', FAILED: 'Failed' },
      chargeTypeLabels: { PER_DAY: 'Per day', FLAT: 'Flat fee', FLAT_RATE: 'Flat fee', PER_RENTAL: 'Per rental' },
      damageTypeLabels: { SCRATCH: 'Scratch', DENT: 'Dent', CRACK: 'Crack', CHIP: 'Chip', MISSING: 'Missing', STAIN: 'Stain', OTHER: 'Other' },
      severityLabels: { MINOR: 'Minor', MODERATE: 'Moderate', MAJOR: 'Major' },
      fuelLevelLabels: { FULL: 'Full', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Empty' },
      paymentProviderLabels: { CASH: 'Cash', STRIPE: 'Stripe', BANK_TRANSFER: 'Bank transfer', CHECK: 'Check', PAYPAL: 'PayPal', CREDIT_CARD: 'Credit card', DEBIT_CARD: 'Debit card' },
    },
    fr: {
      back: 'Retour aux contrats',
      booking: 'Réservation',
      print: 'Imprimer',
      generated: 'Généré',
      status: 'Statut',
      paymentStatus: 'Statut du paiement',
      paymentMode: 'Mode de paiement',
      company: 'Société de location',
      driver: 'Conducteur principal',
      additionalDrivers: 'Conducteurs supplémentaires',
      vehicle: 'Véhicule',
      period: 'Période de location',
      pickup: 'Départ',
      dropoff: 'Retour',
      start: 'Début',
      end: 'Fin',
      contractTerms: 'Clauses du contrat',
      insurance: 'Assurance',
      inspections: 'État du véhicule et dommages',
      noDamage: 'Aucun dommage enregistré au départ.',
      invoice: 'Facture',
      subtotal: 'Sous-total',
      paid: 'Payé',
      balance: 'Solde dû',
      payments: 'Paiements',
      notes: 'Notes de réservation',
      footer: 'Note de bas de page',
      none: 'Non renseigné',
      contractNo: 'Contrat #',
      invoiceNo: 'Facture #',
      fuel: 'Politique carburant',
      deposit: 'Politique de dépôt',
      lateFees: 'Politique de retard',
      damage: 'Politique dommages',
      termsLabel: 'Conditions',
      signature: 'Signature requise',
      customerDamage: 'Inspection de départ',
      mileage: 'Kilométrage',
      fuelLevel: 'Niveau de carburant',
      unitPrice: 'Prix unitaire',
      qty: 'Qté',
      total: 'Total',
      actionOpenBooking: 'Ouvrir la réservation',
      noAdditionalDrivers: 'Aucun conducteur supplémentaire.',
      noInsurance: 'Aucune assurance sélectionnée.',
      noPayments: 'Aucun paiement enregistré.',
      loading: 'Chargement du contrat…',
      yes: 'Oui',
      no: 'Non',
      agreementTitle: 'Contrat de location',
      agreementForReservation: 'Pour la réservation',
      draftAgreement: 'Brouillon de contrat',
      customerInformation: 'Informations client',
      rentalPeriodDetails: 'Période de location et conducteur',
      insuranceCondition: 'Assurance et état du véhicule',
      acknowledgementSignature: 'Reconnaissance et signature',
      vehicleInformation: 'Informations véhicule',
      chargesAndFees: 'Frais et charges',
      damageDiagram: 'Schéma des dommages du véhicule',
      customerName: 'Nom du client',
      homeAddress: 'Adresse',
      cityCountry: 'Ville / Pays',
      telephone: 'Téléphone',
      emailLabel: 'E-mail',
      driverLicenseNumber: 'N° de permis',
      nationalityLabel: 'Nationalité',
      birthDate: 'Date de naissance',
      issuedExpires: 'Délivré / Expire',
      dateOut: 'Date de sortie',
      dateDueIn: 'Date de retour prévue',
      mileageOut: 'Kilométrage sortie',
      mileageIn: 'Kilométrage retour',
      pickupLocationLabel: 'Lieu de départ',
      returnLocationLabel: 'Lieu de retour',
      insuranceSelections: 'Assurances sélectionnées',
      checkInCondition: 'État au départ',
      signatureAcknowledgement:
        "Le locataire confirme avoir reçu le véhicule dans un état acceptable, s'engage à le restituer selon les politiques de location et accepte la responsabilité des frais autorisés, infractions, pénalités de retard, ajustements carburant et constats de dommages liés à cette réservation.",
      customerSignature: 'Signature du client',
      companyRepresentative: 'Représentant de la société',
      yearMakeModel: 'Année / Marque / Modèle',
      licensePlateLabel: "Plaque d'immatriculation",
      vehicleColor: 'Couleur du véhicule',
      categoryLabel: 'Catégorie',
      vinLabel: 'VIN',
      dailyRate: 'Tarif journalier',
      rentalDays: 'Jours de location',
      insuranceTotal: 'Total assurance',
      additionalDriverFees: 'Frais conducteur supplémentaire',
      amountPaidLabel: 'Montant payé',
      balanceDueLabel: 'Solde dû',
      lastPayment: 'Dernier paiement',
      roadsideAssistance: 'Pour une assistance routière ou un remorquage hors horaires, appelez :',
      taxesLabel: 'Taxes',
      totalChargeLabel: 'Montant total',
      damageMarkersRecorded: (count: number) => `${count} repère(s) de dommage enregistré(s) au départ.`,
      termsAndConditions: 'Conditions générales du contrat de location',
      checkInMileageFuel: 'Kilométrage / carburant départ',
      checkOutMileageFuel: 'Kilométrage / carburant retour',
      damageEntries: 'Dommages enregistrés',
      notesAndFooter: 'Notes et pied de page',
      paymentsRecorded: (count: number) => `${count} paiement(s) enregistré(s).`,
      clauseHeadings: [
        'Véhicule et réservation',
        'Usage autorisé',
        'Carburant et restitution',
        'Responsabilité dommages',
        'Dépôt de garantie',
        'Retard et frais supplémentaires',
        'Autorisation de paiement',
        'Dispositions générales',
      ],
      fallbackClauses: {
        vehicleReservation: (vehicle: string) => `Le locataire accepte la responsabilité du ${vehicle} pendant la période de location et s'engage à le restituer dans le même état général, hors usure normale.`,
        authorizedUse: 'Seuls le conducteur principal et les conducteurs supplémentaires approuvés peuvent utiliser le véhicule. Le locataire reste responsable des amendes, péages, infractions routières ou usages non autorisés durant la réservation.',
        fuel: 'Le véhicule doit être restitué avec le niveau de carburant convenu. Toute insuffisance peut entraîner des frais de ravitaillement.',
        damage: 'Toute perte ou tout dommage, y compris causé par négligence ou mauvaise utilisation, peut être facturé au locataire selon la politique de la société et la réglementation applicable.',
        deposit: "Un dépôt de garantie peut être retenu pour couvrir les soldes impayés, pénalités, dommages ou ajustements post-location jusqu'à la clôture complète de la réservation.",
        lateFees: "Des frais de retard, kilométrage excédentaire, nettoyage ou gestion peuvent être appliqués selon les conditions de réservation et l'inspection finale.",
        paymentAuthorization: (company: string) => `Le locataire autorise ${company} à traiter les frais liés à cette réservation, y compris location, taxes, garanties optionnelles, conducteurs supplémentaires et ajustements post-location approuvés.`,
        general: "Le présent accord reste soumis aux politiques complètes de la société, à l'inspection finale et à la réglementation locale applicable.",
      },
      contractStatusLabels: { DRAFT: 'Brouillon', PENDING: 'En attente', ACTIVE: 'Actif', COMPLETED: 'Terminé', CANCELLED: 'Annulé' },
      paymentStatusLabels: { UNPAID: 'Non payé', PAID: 'Payé', PARTIAL: 'Partiel', REFUNDED: 'Remboursé', OVERDUE: 'En retard', PENDING: 'En attente', COMPLETED: 'Complété', FAILED: 'Échoué' },
      chargeTypeLabels: { PER_DAY: 'Par jour', FLAT: 'Forfait', FLAT_RATE: 'Forfait', PER_RENTAL: 'Par location' },
      damageTypeLabels: { SCRATCH: 'Rayure', DENT: 'Bosse', CRACK: 'Fissure', CHIP: 'Éclat', MISSING: 'Manquant', STAIN: 'Tache', OTHER: 'Autre' },
      severityLabels: { MINOR: 'Léger', MODERATE: 'Modéré', MAJOR: 'Majeur' },
      fuelLevelLabels: { FULL: 'Plein', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'Vide' },
      paymentProviderLabels: { CASH: 'Espèces', STRIPE: 'Stripe', BANK_TRANSFER: 'Virement bancaire', CHECK: 'Chèque', PAYPAL: 'PayPal', CREDIT_CARD: 'Carte de crédit', DEBIT_CARD: 'Carte de débit' },
    },
    ar: {
      back: 'العودة إلى العقود',
      booking: 'الحجز',
      print: 'طباعة',
      generated: 'تم الإنشاء',
      status: 'الحالة',
      paymentStatus: 'حالة الدفع',
      paymentMode: 'طريقة الدفع',
      company: 'شركة التأجير',
      driver: 'السائق الرئيسي',
      additionalDrivers: 'السائقون الإضافيون',
      vehicle: 'المركبة',
      period: 'مدة الإيجار',
      pickup: 'الاستلام',
      dropoff: 'التسليم',
      start: 'البداية',
      end: 'النهاية',
      contractTerms: 'شروط العقد',
      insurance: 'التأمين',
      inspections: 'حالة المركبة والأضرار',
      noDamage: 'لا توجد أضرار مسجلة عند الاستلام.',
      invoice: 'الفاتورة',
      subtotal: 'الإجمالي الفرعي',
      paid: 'المدفوع',
      balance: 'الرصيد المستحق',
      payments: 'المدفوعات',
      notes: 'ملاحظات الحجز',
      footer: 'ملاحظة التذييل',
      none: 'غير متوفر',
      contractNo: 'رقم العقد',
      invoiceNo: 'رقم الفاتورة',
      fuel: 'سياسة الوقود',
      deposit: 'سياسة العربون',
      lateFees: 'سياسة التأخير',
      damage: 'سياسة الأضرار',
      termsLabel: 'الشروط',
      signature: 'التوقيع مطلوب',
      customerDamage: 'فحص الاستلام',
      mileage: 'عداد المسافة',
      fuelLevel: 'مستوى الوقود',
      unitPrice: 'سعر الوحدة',
      qty: 'الكمية',
      total: 'الإجمالي',
      actionOpenBooking: 'فتح الحجز',
      noAdditionalDrivers: 'لا يوجد سائقون إضافيون.',
      noInsurance: 'لم يتم اختيار تأمين.',
      noPayments: 'لا توجد مدفوعات مسجلة.',
      loading: 'جارٍ تحميل العقد…',
      yes: 'نعم',
      no: 'لا',
      agreementTitle: 'عقد تأجير',
      agreementForReservation: 'للحجز',
      draftAgreement: 'مسودة العقد',
      customerInformation: 'معلومات العميل',
      rentalPeriodDetails: 'مدة التأجير وبيانات السائق',
      insuranceCondition: 'التأمين وحالة المركبة',
      acknowledgementSignature: 'إقرار السائق والتوقيع',
      vehicleInformation: 'معلومات مركبة التأجير',
      chargesAndFees: 'الرسوم والتكاليف',
      damageDiagram: 'مخطط أضرار المركبة',
      customerName: 'اسم العميل',
      homeAddress: 'العنوان',
      cityCountry: 'المدينة / الدولة',
      telephone: 'الهاتف',
      emailLabel: 'البريد الإلكتروني',
      driverLicenseNumber: 'رقم رخصة القيادة',
      nationalityLabel: 'الجنسية',
      birthDate: 'تاريخ الميلاد',
      issuedExpires: 'الإصدار / الانتهاء',
      dateOut: 'تاريخ الخروج',
      dateDueIn: 'تاريخ الإرجاع',
      mileageOut: 'عداد الخروج',
      mileageIn: 'عداد الإرجاع',
      pickupLocationLabel: 'مكان الاستلام',
      returnLocationLabel: 'مكان التسليم',
      insuranceSelections: 'خيارات التأمين',
      checkInCondition: 'الحالة عند الاستلام',
      signatureAcknowledgement:
        'يقر المستأجر بأنه استلم المركبة بحالة مقبولة، ويلتزم بإعادتها وفق سياسات التأجير، ويقبل المسؤولية عن الرسوم المعتمدة والمخالفات ورسوم التأخير وتسويات الوقود وتقييمات الأضرار المرتبطة بهذا الحجز.',
      customerSignature: 'توقيع العميل',
      companyRepresentative: 'ممثل الشركة',
      yearMakeModel: 'السنة / الصانع / الطراز',
      licensePlateLabel: 'لوحة المركبة',
      vehicleColor: 'لون المركبة',
      categoryLabel: 'الفئة',
      vinLabel: 'رقم الهيكل',
      dailyRate: 'السعر اليومي',
      rentalDays: 'أيام التأجير',
      insuranceTotal: 'إجمالي التأمين',
      additionalDriverFees: 'رسوم السائق الإضافي',
      amountPaidLabel: 'المبلغ المدفوع',
      balanceDueLabel: 'الرصيد المستحق',
      lastPayment: 'آخر دفعة',
      roadsideAssistance: 'للمساعدة على الطريق أو السحب خارج ساعات العمل اتصل بـ:',
      taxesLabel: 'الضرائب',
      totalChargeLabel: 'إجمالي الرسوم',
      damageMarkersRecorded: (count: number) => `تم تسجيل ${count} علامة/علامات ضرر عند الاستلام.`,
      termsAndConditions: 'الشروط والأحكام لعقد التأجير',
      checkInMileageFuel: 'عداد / وقود الاستلام',
      checkOutMileageFuel: 'عداد / وقود الإرجاع',
      damageEntries: 'الأضرار المسجلة',
      notesAndFooter: 'الملاحظات والتذييل',
      paymentsRecorded: (count: number) => `تم تسجيل ${count} دفعة/دفعات.`,
      clauseHeadings: [
        'المركبة والحجز',
        'الاستخدام المصرح',
        'الوقود وحالة الإرجاع',
        'مسؤولية الأضرار',
        'وديعة الضمان',
        'التأخير والرسوم الإضافية',
        'تفويض الدفع',
        'أحكام عامة',
      ],
      fallbackClauses: {
        vehicleReservation: (vehicle: string) => `يقبل المستأجر المسؤولية عن ${vehicle} طوال مدة التأجير، ويتعهد بإعادته بنفس الحالة العامة باستثناء الاستهلاك العادي.`,
        authorizedUse: 'يُسمح فقط للسائق الرئيسي والسائقين الإضافيين المعتمدين بقيادة المركبة. ويتحمل المستأجر مسؤولية أي غرامات أو رسوم طرق أو مخالفات مرورية أو استخدام غير مصرح به أثناء الحجز.',
        fuel: 'يجب إعادة المركبة بمستوى الوقود المتفق عليه. وأي نقص قد يترتب عليه رسوم تعبئة.',
        damage: 'أي فقدان أو ضرر، بما في ذلك الناتج عن الإهمال أو سوء الاستخدام، قد يتم تحميله على المستأجر وفق سياسة الشركة والأنظمة المعمول بها.',
        deposit: 'قد يتم حجز وديعة ضمان لتغطية الأرصدة غير المسددة أو الغرامات أو الأضرار أو التسويات اللاحقة إلى حين إقفال الحجز بشكل نهائي.',
        lateFees: 'قد تُفرض رسوم التأخير أو الكيلومترات الزائدة أو التنظيف أو الرسوم الإدارية وفق شروط الحجز والفحص النهائي.',
        paymentAuthorization: (company: string) => `يفوض المستأجر ${company} بتحصيل الرسوم المتعلقة بهذا الحجز، بما في ذلك قيمة التأجير والضرائب والتغطيات الاختيارية والسائقين الإضافيين والتسويات المعتمدة بعد الإرجاع.`,
        general: 'يبقى هذا الاتفاق خاضعًا لسياسات الشركة الكاملة والفحص النهائي والأنظمة المحلية المعمول بها.',
      },
      contractStatusLabels: { DRAFT: 'مسودة', PENDING: 'قيد الانتظار', ACTIVE: 'نشط', COMPLETED: 'مكتمل', CANCELLED: 'ملغى' },
      paymentStatusLabels: { UNPAID: 'غير مدفوع', PAID: 'مدفوع', PARTIAL: 'جزئي', REFUNDED: 'مسترد', OVERDUE: 'متأخر', PENDING: 'قيد الانتظار', COMPLETED: 'مكتمل', FAILED: 'فشل' },
      chargeTypeLabels: { PER_DAY: 'يومي', FLAT: 'مقطوع', FLAT_RATE: 'مقطوع', PER_RENTAL: 'لكل إيجار' },
      damageTypeLabels: { SCRATCH: 'خدش', DENT: 'انبعاج', CRACK: 'تشقق', CHIP: 'تقشر', MISSING: 'مفقود', STAIN: 'بقعة', OTHER: 'أخرى' },
      severityLabels: { MINOR: 'طفيف', MODERATE: 'متوسط', MAJOR: 'شديد' },
      fuelLevelLabels: { FULL: 'ممتلئ', SEVEN_EIGHTHS: '7/8', THREE_QUARTERS: '3/4', FIVE_EIGHTHS: '5/8', HALF: '1/2', THREE_EIGHTHS: '3/8', QUARTER: '1/4', ONE_EIGHTH: '1/8', EMPTY: 'فارغ' },
      paymentProviderLabels: { CASH: 'نقداً', STRIPE: 'Stripe', BANK_TRANSFER: 'تحويل بنكي', CHECK: 'شيك', PAYPAL: 'PayPal', CREDIT_CARD: 'بطاقة ائتمان', DEBIT_CARD: 'بطاقة خصم' },
    },
  } as const

  useEffect(() => {
    apiFetch<ContractPayload>(`/reservations/${id}/contract`)
      .then((data) => {
        setContract(data)
        setError(null)
      })
      .catch((err) => setError(err.message ?? 'Failed to load contract'))
  }, [id])

  const contractUiLanguage: ConditionLanguage = language
  const copy = copyByLanguage[contractUiLanguage]
  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
  const formatDateTime = (value: string | null | undefined) =>
    value
      ? new Date(value).toLocaleString(localeCode, {
          month: 'short',
          day: 'numeric',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
        })
      : copy.none

  const address = useMemo(() => (
    contract ? formatAddress(contract.company.address, contract.company.city, contract.company.country) : ''
  ), [contract])

  if (error) return <div className="card p-6 text-sm text-red-600">{error}</div>
  if (!contract) return <div className="card p-6 text-sm text-slate-500">{copy.loading}</div>

  const tl = (map: Record<string, string>, key: string) => map[key] ?? key

  const damagePoints = contract.inspections.checkIn?.damagePoints ?? []
  const customClauses = splitTerms(contract.terms.terms)
  const contractLocaleMode = normalizeContractLocale(language, language)
  const conditionLanguages = getConditionLanguages(contractLocaleMode)
  const conditionColumns = conditionLanguages
    .map((conditionLanguage) => ({
      language: conditionLanguage,
      heading: getConditionLanguageLabel(conditionLanguage),
      clauses: [
        ...FIXED_CONDITIONS[conditionLanguage],
        ...customClauses.map((clause, index) => ({
          title: getAdditionalConditionTitle(conditionLanguage, index),
          body: clause,
        })),
      ],
    }))
    .sort((a, b) => (a.language === 'ar' ? 1 : 0) - (b.language === 'ar' ? 1 : 0))
  const singleLanguageClauseColumns = conditionColumns.length === 1
    ? splitConditionItems(conditionColumns[0].clauses)
    : []
  const isBilingual = conditionColumns.length === 2
  const arCopy = copyByLanguage.ar
  const bl = (primary: string, ar: string) => isBilingual ? `${primary} / ${ar}` : primary

  const roadsidePhone = contract.company.phone ?? copy.none
  const latestPayment = contract.invoice.payments.at(-1)
  const driverFullName = `${contract.driver.firstName} ${contract.driver.lastName}`
  const additionalDriverNames = contract.additionalDrivers.length > 0
    ? contract.additionalDrivers.map((driver) => `${driver.firstName} ${driver.lastName}`).join(', ')
    : copy.noAdditionalDrivers

  return (
    <div className="space-y-6 print:space-y-0">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between print:hidden">
        <div className="space-y-2">
          <Link href="/contracts" className="text-sm font-semibold text-blue-700 hover:underline">{copy.back}</Link>
          <p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{contract.company.name}</p>
          <div className="flex flex-wrap items-center gap-3">
            <h2 className="text-xl font-semibold text-slate-900">{contract.contractNumber ?? copy.contractNo}</h2>
            <span className="badge-blue">{tl(copy.contractStatusLabels, contract.status)}</span>
            <span className="badge-gray">{tl(copy.paymentStatusLabels, contract.paymentStatus)}</span>
          </div>
          <p className="text-sm text-slate-500">
            {copy.invoiceNo}: {contract.invoiceNumber ?? '—'} · {copy.generated}: {formatDateTime(contract.generatedAt)}
          </p>
        </div>
        <div className="flex flex-wrap gap-3 print:hidden">
          <Link href={`/reservations/${contract.reservationId}`} className="btn-secondary">
            {copy.actionOpenBooking}
          </Link>
          <button type="button" className="btn-primary" onClick={() => window.print()}>
            {copy.print}
          </button>
        </div>
      </div>

      <div className="space-y-8 print:space-y-0">
        <section className="mx-auto max-w-[1060px] overflow-hidden rounded-[28px] border-4 border-stone-900 bg-white text-stone-900 shadow-2xl print:max-w-none print:shadow-none print:break-after-page">
          <div className="border-b border-stone-500 px-6 py-5">
            <div className="flex flex-col gap-4 md:flex-row md:items-center">
              {contract.company.logoUrl && (
                <div className="flex shrink-0 items-center justify-center">
                  <img
                    src={contract.company.logoUrl}
                    alt={contract.company.name}
                    className="h-24 w-24 object-contain"
                  />
                </div>
              )}
              <div className="flex-1 text-center md:text-left">
                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-stone-500">
                  {contract.company.name}
                </p>
                <h1 className="mt-2 text-3xl font-black tracking-tight">
                  {contract.company.name} {bl(copy.agreementTitle, arCopy.agreementTitle)}
                </h1>
                <p className="mt-1 text-sm font-medium text-stone-600">
                  {bl(copy.agreementForReservation, arCopy.agreementForReservation)} {contract.contractNumber ?? contract.reservationId.slice(-8).toUpperCase()}
                </p>
              </div>
              <div className="grid min-w-[220px] grid-cols-2 gap-px self-stretch overflow-hidden rounded-2xl border border-stone-400 bg-stone-300 text-sm">
                <div className="bg-white px-3 py-2">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.status, arCopy.status)}</p>
                  <p className="mt-1 font-semibold">{tl(copy.contractStatusLabels, contract.status)}</p>
                </div>
                <div className="bg-white px-3 py-2">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.paymentStatus, arCopy.paymentStatus)}</p>
                  <p className="mt-1 font-semibold">{tl(copy.paymentStatusLabels, contract.paymentStatus)}</p>
                </div>
                <div className="bg-white px-3 py-2">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.contractNo, arCopy.contractNo)}</p>
                  <p className="mt-1 font-semibold">{contract.contractNumber ?? '—'}</p>
                </div>
                <div className="bg-white px-3 py-2">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.generated, arCopy.generated)}</p>
                  <p className="mt-1 font-semibold">{formatDateTime(contract.generatedAt)}</p>
                </div>
              </div>
            </div>
          </div>

          <div className="grid gap-5 p-6 lg:grid-cols-[1.6fr_1fr] print:grid-cols-[1.6fr_1fr]">
            <div className="space-y-5">
              <PaperSection title={bl(copy.customerInformation, arCopy.customerInformation)}>
                <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
                  <PaperField label={bl(copy.customerName, arCopy.customerName)} value={driverFullName} className="bg-white sm:col-span-2" />
                  <PaperField label={bl(copy.homeAddress, arCopy.homeAddress)} value={address || copy.none} className="bg-white sm:col-span-2" />
                  <PaperField label={bl(copy.cityCountry, arCopy.cityCountry)} value={[contract.company.city, contract.company.country].filter(Boolean).join(', ') || copy.none} className="bg-white" />
                  <PaperField label={bl(copy.telephone, arCopy.telephone)} value={contract.driver.phone ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.emailLabel, arCopy.emailLabel)} value={contract.driver.email} className="bg-white sm:col-span-2" />
                  <PaperField label={bl(copy.driverLicenseNumber, arCopy.driverLicenseNumber)} value={contract.driver.driverLicense ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.nationalityLabel, arCopy.nationalityLabel)} value={contract.driver.nationality ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.birthDate, arCopy.birthDate)} value={formatDateOnly(contract.driver.dateOfBirth, localeCode, copy.none)} className="bg-white" />
                  <PaperField label={bl(copy.issuedExpires, arCopy.issuedExpires)} value={`${formatDateOnly(contract.driver.licenseIssuedAt, localeCode, copy.none)} — ${formatDateOnly(contract.driver.licenseExpiry, localeCode, copy.none)}`} className="bg-white" />
                </div>
              </PaperSection>

              <PaperSection title={bl(copy.rentalPeriodDetails, arCopy.rentalPeriodDetails)}>
                <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
                  <PaperField label={bl(copy.dateOut, arCopy.dateOut)} value={formatDateTime(contract.rentalPeriod.startDate)} className="bg-white" />
                  <PaperField label={bl(copy.dateDueIn, arCopy.dateDueIn)} value={formatDateTime(contract.rentalPeriod.endDate)} className="bg-white" />
                  <PaperField label={bl(copy.mileageOut, arCopy.mileageOut)} value={String(contract.inspections.checkIn?.mileage ?? copy.none)} className="bg-white" />
                  <PaperField label={bl(copy.mileageIn, arCopy.mileageIn)} value={String(contract.inspections.checkOut?.mileage ?? copy.none)} className="bg-white" />
                  <PaperField label={bl(copy.pickupLocationLabel, arCopy.pickupLocationLabel)} value={contract.rentalPeriod.pickupLocation ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.returnLocationLabel, arCopy.returnLocationLabel)} value={contract.rentalPeriod.returnLocation ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.additionalDrivers, arCopy.additionalDrivers)} value={additionalDriverNames} className="bg-white sm:col-span-2" />
                </div>
              </PaperSection>

              <PaperSection title={bl(copy.insuranceCondition, arCopy.insuranceCondition)}>
                <div className="grid gap-px bg-stone-300">
                  <PaperField
                    label={bl(copy.insuranceSelections, arCopy.insuranceSelections)}
                    value={contract.insurance.policies.length > 0 ? contract.insurance.policies.map((policy) => `${policy.name} (${tl(copy.chargeTypeLabels, policy.chargeType)})`).join(', ') : copy.noInsurance}
                    className="bg-white"
                  />
                  <PaperField label={bl(copy.fuel, arCopy.fuel)} value={contract.terms.fuelPolicy ?? copy.none} className="bg-white" />
                  <PaperField label={bl(copy.damage, arCopy.damage)} value={contract.terms.damagePolicy ?? copy.none} className="bg-white" />
                  <PaperField
                    label={bl(copy.checkInCondition, arCopy.checkInCondition)}
                    value={contract.inspections.checkIn?.generalCondition ?? contract.inspections.checkIn?.employeeNotes ?? copy.none}
                    className="bg-white"
                  />
                </div>
              </PaperSection>

              <PaperSection title={bl(copy.acknowledgementSignature, arCopy.acknowledgementSignature)}>
                <div className="space-y-4 bg-white p-4 text-sm leading-6 text-stone-700">
                  <p>{copy.signatureAcknowledgement}</p>
                  {isBilingual && (
                    <p className="text-right" dir="rtl">{arCopy.signatureAcknowledgement}</p>
                  )}
                  <p>
                    {bl(copy.signature, arCopy.signature)}: <span className="font-semibold text-stone-900">{contract.terms.signatureRequired ? copy.yes : copy.no}</span>
                  </p>
                  <div className="grid gap-4 pt-4 sm:grid-cols-2">
                    <div className="border-t border-dashed border-stone-500 pt-2 text-sm font-medium text-stone-800">
                      {bl(copy.customerSignature, arCopy.customerSignature)}
                    </div>
                    <div className="border-t border-dashed border-stone-500 pt-2 text-sm font-medium text-stone-800">
                      {bl(copy.companyRepresentative, arCopy.companyRepresentative)}
                    </div>
                  </div>
                </div>
              </PaperSection>
            </div>

            <div className="space-y-5">
              <PaperSection title={bl(copy.vehicleInformation, arCopy.vehicleInformation)}>
                <div className="grid gap-px bg-stone-300">
                  <PaperField label={bl(copy.yearMakeModel, arCopy.yearMakeModel)} value={`${contract.vehicle.year} ${contract.vehicle.make} ${contract.vehicle.model}`} className="bg-white" />
                  <PaperField label={bl(copy.licensePlateLabel, arCopy.licensePlateLabel)} value={contract.vehicle.licensePlate} className="bg-white" />
                  <PaperField label={bl(copy.vehicleColor, arCopy.vehicleColor)} value={contract.vehicle.color} className="bg-white" />
                  <PaperField label={bl(copy.categoryLabel, arCopy.categoryLabel)} value={contract.vehicle.category} className="bg-white" />
                  <PaperField label={bl(copy.vinLabel, arCopy.vinLabel)} value={contract.vehicle.vin ?? copy.none} className="bg-white" />
                  <div className="border border-stone-400/80 bg-white px-4 py-5">
                    <p className="mb-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.damageDiagram, arCopy.damageDiagram)}</p>
                    <div className="flex justify-center py-2">
                      <VehicleConditionSheet points={damagePoints} className="w-full max-w-[360px] rounded-2xl border border-slate-200 bg-white p-3" />
                    </div>
                    <p className="mt-4 text-xs text-stone-600">
                      {damagePoints.length > 0 ? copy.damageMarkersRecorded(damagePoints.length) : copy.noDamage}
                    </p>
                  </div>
                </div>
              </PaperSection>

              <PaperSection title={bl(copy.invoice, arCopy.invoice)}>
                <div className="space-y-3 bg-white p-4 text-sm text-stone-700">
                  <div className="grid gap-px bg-stone-300 sm:grid-cols-2">
                    <PaperField label={bl(copy.invoiceNo, arCopy.invoiceNo)} value={contract.invoiceNumber ?? copy.draftAgreement} className="bg-white" />
                    <PaperField label={bl(copy.contractNo, arCopy.contractNo)} value={contract.contractNumber ?? copy.draftAgreement} className="bg-white" />
                    <PaperField label={bl(copy.customerName, arCopy.customerName)} value={driverFullName} className="bg-white" />
                    <PaperField label={bl(copy.telephone, arCopy.telephone)} value={contract.driver.phone ?? copy.none} className="bg-white" />
                    <PaperField label={bl(copy.emailLabel, arCopy.emailLabel)} value={contract.driver.email} className="bg-white sm:col-span-2" />
                  </div>
                  <div>
                    <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-stone-500">{bl(copy.chargesAndFees, arCopy.chargesAndFees)}</p>
                  </div>
                  {contract.invoice.lineItems.map((item, index) => (
                    <div key={`${item.description}-${index}`} className="flex items-start justify-between gap-3 border-b border-stone-200 pb-2 last:border-b-0">
                      <div>
                        <p className="font-medium text-stone-900">{item.description}</p>
                        <p className="text-xs text-stone-500">{copy.qty} {item.qty} · {formatCurrency(item.unitPrice, contract.invoice.currency)}</p>
                      </div>
                      <p className="font-semibold text-stone-900">{formatCurrency(item.total, contract.invoice.currency)}</p>
                    </div>
                  ))}
                  <div className="space-y-2 rounded-xl border border-stone-300 bg-stone-50 p-3">
                    <div className="flex items-center justify-between gap-3">
                      <span>{bl(copy.subtotal, arCopy.subtotal)}</span>
                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.subtotal, contract.invoice.currency)}</span>
                    </div>
                    <div className="flex items-center justify-between gap-3">
                      <span>{bl(copy.taxesLabel, arCopy.taxesLabel)}</span>
                      <span className="font-semibold text-stone-900">
                        {contract.invoice.taxes.length > 0
                          ? formatCurrency(contract.invoice.taxTotal, contract.invoice.currency)
                          : copy.none}
                      </span>
                    </div>
                    <div className="flex items-center justify-between gap-3 border-t border-stone-200 pt-2">
                      <span className="font-semibold text-stone-900">{bl(copy.totalChargeLabel, arCopy.totalChargeLabel)}</span>
                      <span className="font-bold text-stone-900">{formatCurrency(contract.invoice.total, contract.invoice.currency)}</span>
                    </div>
                    <div className="flex items-center justify-between gap-3">
                      <span>{bl(copy.amountPaidLabel, arCopy.amountPaidLabel)}</span>
                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.amountPaid, contract.invoice.currency)}</span>
                    </div>
                    <div className="flex items-center justify-between gap-3">
                      <span>{bl(copy.balanceDueLabel, arCopy.balanceDueLabel)}</span>
                      <span className="font-semibold text-stone-900">{formatCurrency(contract.invoice.balanceDue, contract.invoice.currency)}</span>
                    </div>
                    <div className="flex items-center justify-between gap-3">
                      <span>{bl(copy.paymentMode, arCopy.paymentMode)}</span>
                      <span className="font-semibold text-stone-900">{contract.paymentMode ?? latestPayment?.paymentMethod ?? copy.none}</span>
                    </div>
                  </div>
                  {latestPayment ? (
                    <div className="rounded-xl border border-stone-300 bg-stone-50 px-3 py-2 text-xs text-stone-600">
                      {bl(copy.lastPayment, arCopy.lastPayment)}: {tl(copy.paymentProviderLabels, latestPayment.provider)} · {tl(copy.paymentStatusLabels, latestPayment.status)} · {formatDateTime(latestPayment.paidAt ?? latestPayment.createdAt)}
                    </div>
                  ) : null}
                </div>
              </PaperSection>
            </div>
          </div>

          <div className="border-t border-stone-500 px-6 py-4 text-center text-sm text-stone-700">
            {bl(copy.roadsideAssistance, arCopy.roadsideAssistance)} <span className="font-semibold text-stone-900">{roadsidePhone}</span>
          </div>
        </section>

        <section className="mx-auto max-w-[1060px] rounded-[28px] border-4 border-stone-900 bg-white px-8 py-7 text-stone-900 shadow-2xl print:max-w-none print:shadow-none">
          <div className="border-b border-stone-400 pb-4 text-center">
            <h2 className="text-2xl font-black tracking-tight">{bl(copy.termsAndConditions, arCopy.termsAndConditions)}</h2>
            <p className="mt-1 text-sm text-stone-600">
              {contract.company.name} · {contract.contractNumber ?? copy.draftAgreement}
            </p>
          </div>

          {conditionColumns.length === 2 ? (
            <div dir="ltr" className="mt-6 grid grid-cols-2 divide-x divide-stone-400 print:grid-cols-2">
              {conditionColumns.map((column) => (
                <div key={column.language} dir={column.language === 'ar' ? 'rtl' : 'ltr'} className="space-y-5 px-6">
                  <div className="border-b border-stone-300 pb-2">
                    <p className="text-lg font-bold text-stone-900">{column.heading}</p>
                  </div>
                  {column.clauses.map((clause, index) => (
                    <div key={`${column.language}-${index}-${clause.title}`} className="text-sm leading-6 text-stone-700">
                      <p className="font-bold text-stone-900">{clause.title}</p>
                      <p className="mt-2 whitespace-pre-wrap">{clause.body}</p>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          ) : (
            <div className="mt-6 grid grid-cols-2 divide-x divide-stone-400 print:grid-cols-2">
              {singleLanguageClauseColumns.map((columnClauses, columnIndex) => (
                <div key={`single-language-column-${columnIndex}`} dir={contractUiLanguage === 'ar' ? 'rtl' : 'ltr'} className="space-y-5 px-6">
                  {columnClauses.map((clause, index) => (
                    <div key={`${columnIndex}-${index}-${clause.title}`} className="text-sm leading-6 text-stone-700">
                      <p className="font-bold text-stone-900">{clause.title}</p>
                      <p className="mt-2 whitespace-pre-wrap">{clause.body}</p>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          )}

        </section>
      </div>
    </div>
  )
}
