🌿 GNAO-KIAF

Chargement React...

// ── Palette ───────────────────────────────────────────────────────────────────
const C = {
  soil:"#2C1A0E", bark:"#5C3D1E", olive:"#6B7C3B", citrus:"#D97706",
  leaf:"#4A7C3F", sand:"#E8D5A3", cream:"#FAF6EE",
  danger:"#C0392B", warning:"#E67E22", success:"#27AE60", info:"#2980B9", muted:"#9A8478",
  gold:"#B8860B",
};

// ── i18n ──────────────────────────────────────────────────────────────────────
const LANGS = { fr: "Français", en: "English", ar: "العربية" };

const T = {
  dashboard:    { fr:"Tableau de bord", en:"Dashboard",      ar:"لوحة القيادة" },
  energy:       { fr:"Énergie",         en:"Energy",          ar:"الطاقة" },
  consumption:  { fr:"Consommation",   en:"Consumption",     ar:"الاستهلاك" },
  energyBills:  { fr:"Factures électricité", en:"Electricity bills", ar:"فواتير الكهرباء" },
  newBill:      { fr:"Nouvelle facture", en:"New bill",       ar:"فاتورة جديدة" },
  period:       { fr:"Période",         en:"Period",          ar:"الفترة" },
  totalTTC:     { fr:"Total TTC",       en:"Total incl. VAT", ar:"المجموع شامل الضريبة" },
  kwhTotal:     { fr:"Total kWh",       en:"Total kWh",       ar:"إجمالي كيلوواط" },
  heuresNorm:   { fr:"H. Normales",     en:"Normal hours",    ar:"الساعات العادية" },
  heuresCreus:  { fr:"H. Creuses",      en:"Off-peak hours",  ar:"ساعات الذروة المنخفضة" },
  heuresPoint:  { fr:"H. de Pointe",    en:"Peak hours",      ar:"ساعات الذروة" },
  puissance:    { fr:"Puissance (KVA)", en:"Power (KVA)",     ar:"القدرة (KVA)" },
  billRef:      { fr:"N° Facture",      en:"Bill ref",        ar:"رقم الفاتورة" },
  dueDate:      { fr:"Échéance",        en:"Due date",        ar:"تاريخ الاستحقاق" },
  peakRatio:    { fr:"% Heures de Pointe", en:"% Peak hours", ar:"نسبة ساعات الذروة" },
  analyses:     { fr:"Analyses",        en:"Analyses",        ar:"التحاليل" },
  messages:     { fr:"Messagerie",      en:"Messages",      ar:"الرسائل" },
  newMessage:   { fr:"Nouveau message", en:"New message",     ar:"رسالة جديدة" },
  sender:       { fr:"Expéditeur",      en:"Sender",          ar:"المرسل" },
  summary:      { fr:"Résumé",          en:"Summary",         ar:"الملخص" },
  transcribe:   { fr:"Transcrire",      en:"Transcribe",      ar:"نسخ" },
  actionRequired:{ fr:"Action requise", en:"Action required", ar:"إجراء مطلوب" },
  done:         { fr:"Fait",            en:"Done",            ar:"منجز" },
  pending:      { fr:"En attente",      en:"Pending",         ar:"معلق" },
  search:       { fr:"Rechercher...",   en:"Search...",       ar:"بحث..." },
  geminiKey:    { fr:"Clé API Gemini",  en:"Gemini API key",  ar:"مفتاح Gemini" },
  fertigation:  { fr:"Fertigation",     en:"Fertigation",     ar:"التسميد المائي" },
  phyto:        { fr:"Phytosanitaires", en:"Crop Protection",  ar:"المبيدات" },
  foliaire:     { fr:"Prog. Foliaires",  en:"Foliar Programmes", ar:"برامج رش" },
  newSession:   { fr:"Nouvelle session", en:"New session",     ar:"جلسة جديدة" },
  newProduct:   { fr:"Nouveau produit", en:"New product",      ar:"منتج جديد" },
  newApp:       { fr:"Nouvelle application", en:"New application", ar:"تطبيق جديد" },
  recipe:       { fr:"Recette du jour",  en:"Today's recipe",  ar:"وصفة اليوم" },
  operator:     { fr:"Opérateur",        en:"Operator",        ar:"المشغل" },
  startTime:    { fr:"Début",            en:"Start",           ar:"البداية" },
  endTime:      { fr:"Fin",              en:"End",             ar:"النهاية" },
  treated:      { fr:"Traité (O/N)",     en:"Treated (Y/N)",   ar:"معالج" },
  phi:          { fr:"Délai avant récolte (j)", en:"Pre-harvest interval (days)", ar:"فترة ما قبل الحصاد" },
  stockAfter:   { fr:"Stock après",      en:"Stock after",     ar:"المخزون بعد" },
  tasks:        { fr:"Tâches",          en:"Tasks",           ar:"المهام" },
  irrigation:   { fr:"Irrigation",      en:"Irrigation",      ar:"الري" },
  harvest:      { fr:"Récoltes",        en:"Harvests",        ar:"الحصاد" },
  pests:        { fr:"Ravageurs",       en:"Pests & Disease", ar:"الآفات" },
  expenses:     { fr:"Dépenses",        en:"Expenses",        ar:"المصاريف" },
  workers:      { fr:"Équipe",          en:"Team",            ar:"الفريق" },
  consultants:  { fr:"Consultants",     en:"Consultants",     ar:"مستشارون" },
  oliveoil:     { fr:"Huile d'Olive",   en:"Olive Oil",       ar:"زيت الزيتون" },
  settings:     { fr:"Paramètres",      en:"Settings",        ar:"الإعدادات" },
  about:        { fr:"À propos",       en:"About",           ar:"حول المزرعة" },
  save:         { fr:"Enregistrer",     en:"Save",            ar:"حفظ" },
  cancel:       { fr:"Annuler",         en:"Cancel",          ar:"إلغاء" },
  add:          { fr:"Ajouter",         en:"Add",             ar:"إضافة" },
  edit:         { fr:"Modifier",        en:"Edit",            ar:"تعديل" },
  all:          { fr:"Tout",            en:"All",             ar:"الكل" },
  notes:        { fr:"Notes",           en:"Notes",           ar:"ملاحظات" },
  date:         { fr:"Date",            en:"Date",            ar:"التاريخ" },
  zone:         { fr:"Zone",            en:"Zone",            ar:"المنطقة" },
  name:         { fr:"Nom",             en:"Name",            ar:"الاسم" },
  total:        { fr:"Total",           en:"Total",           ar:"الإجمالي" },
  active:       { fr:"Actifs",          en:"Active",          ar:"نشط" },
  totalArea:    { fr:"Superficie totale", en:"Total area",    ar:"المساحة الإجمالية" },
  trees:        { fr:"Arbres",          en:"Trees",           ar:"الأشجار" },
  totalHarvest: { fr:"Récolte totale",  en:"Total harvest",  ar:"إجمالي الحصاد" },
  activePests:  { fr:"Ravageurs actifs",en:"Active pests",   ar:"الآفات النشطة" },
  pendingTasks: { fr:"Tâches actives",  en:"Active tasks",   ar:"المهام النشطة" },
  alerts:       { fr:"Alertes & Priorités", en:"Alerts & Priorities", ar:"التنبيهات" },
  farmZones:    { fr:"Zones de la ferme", en:"Farm zones",   ar:"مناطق المزرعة" },
  tasksByStatus:{ fr:"Tâches par statut", en:"Tasks by status", ar:"المهام حسب الحالة" },
  expByCategory:{ fr:"Dépenses par catégorie", en:"Expenses by category", ar:"المصاريف حسب الفئة" },
  newTask:      { fr:"Nouvelle tâche", en:"New task",        ar:"مهمة جديدة" },
  title:        { fr:"Titre",          en:"Title",           ar:"العنوان" },
  assignee:     { fr:"Responsable",    en:"Assignee",        ar:"المسؤول" },
  due:          { fr:"Échéance",       en:"Due date",        ar:"تاريخ الاستحقاق" },
  status:       { fr:"Statut",         en:"Status",          ar:"الحالة" },
  priority:     { fr:"Priorité",       en:"Priority",        ar:"الأولوية" },
  season:       { fr:"Saison",         en:"Season",          ar:"الموسم" },
  newSession:   { fr:"Nouvelle session", en:"New session",   ar:"جلسة جديدة" },
  duration:     { fr:"Durée (h)",      en:"Duration (h)",    ar:"المدة (س)" },
  flow:         { fr:"Débit (m³/h)",   en:"Flow (m³/h)",     ar:"التدفق (م³/س)" },
  totalWater:   { fr:"Volume total", en:"Total volume",      ar:"الحجم الإجمالي" },
  sessions:     { fr:"Sessions",       en:"Sessions",        ar:"الجلسات" },
  newHarvest:   { fr:"Nouvelle récolte", en:"New harvest",   ar:"حصاد جديد" },
  crop:         { fr:"Culture",        en:"Crop",            ar:"المحصول" },
  qty:          { fr:"Quantité (kg)",  en:"Quantity (kg)",   ar:"الكمية (كغ)" },
  quality:      { fr:"Qualité",        en:"Quality",         ar:"الجودة" },
  newPest:      { fr:"Nouveau signalement", en:"New report", ar:"بلاغ جديد" },
  pestName:     { fr:"Ravageur / Maladie", en:"Pest / Disease", ar:"الآفة / المرض" },
  detected:     { fr:"Détecté le",    en:"Detected on",     ar:"اكتُشف في" },
  treatment:    { fr:"Traitement",    en:"Treatment",        ar:"العلاج" },
  severity:     { fr:"Sévérité",      en:"Severity",         ar:"الشدة" },
  newExpense:   { fr:"Nouvelle dépense", en:"New expense",  ar:"مصروف جديد" },
  category:     { fr:"Catégorie",     en:"Category",         ar:"الفئة" },
  description:  { fr:"Description",   en:"Description",      ar:"الوصف" },
  amount:       { fr:"Montant (MAD)", en:"Amount (MAD)",     ar:"المبلغ (درهم)" },
  transactions: { fr:"Transactions",  en:"Transactions",     ar:"العمليات" },
  categories:   { fr:"Catégories",    en:"Categories",       ar:"الفئات" },
  newWorker:    { fr:"Nouveau travailleur", en:"New worker", ar:"عامل جديد" },
  role:         { fr:"Rôle",          en:"Role",             ar:"الدور" },
  phone:        { fr:"Téléphone",     en:"Phone",            ar:"الهاتف" },
  deactivate:   { fr:"Désactiver",    en:"Deactivate",       ar:"تعطيل" },
  activate:     { fr:"Activer",       en:"Activate",         ar:"تفعيل" },
  tasksRunning: { fr:"tâche(s) en cours", en:"task(s) running", ar:"مهمة جارية" },
  dailyRate:    { fr:"Taux journalier (MAD)", en:"Daily rate (MAD)", ar:"الأجر اليومي (درهم)" },
  payType:      { fr:"Type de paie",  en:"Pay type",         ar:"نوع الأجر" },
  daysWorked:   { fr:"Jours travaillés", en:"Days worked",   ar:"أيام العمل" },
  weeklyPay:    { fr:"Paie semaine",  en:"Weekly pay",       ar:"أجر الأسبوع" },
  logAttendance:{ fr:"Saisir présence", en:"Log attendance", ar:"تسجيل الحضور" },
  payroll:      { fr:"Paie & Présence", en:"Payroll",        ar:"الأجور والحضور" },
  newOOBatch:   { fr:"Nouveau lot",   en:"New batch",        ar:"دفعة جديدة" },
  campaign:     { fr:"Campagne",      en:"Campaign",         ar:"الحملة" },
  pressLocation:{ fr:"Lieu de pressage", en:"Press location", ar:"موقع العصر" },
  olivesIn:     { fr:"Olives entrantes (kg)", en:"Olives in (kg)", ar:"الزيتون (كغ)" },
  oilOut:       { fr:"Huile produite (L)", en:"Oil produced (L)", ar:"الزيت المنتج (لتر)" },
  acidity:      { fr:"Acidité (%)",   en:"Acidity (%)",      ar:"الحموضة (%)" },
  peroxides:    { fr:"Indice peroxyde", en:"Peroxide value", ar:"مؤشر البيروكسيد" },
  polyphenols:  { fr:"Polyphénols (mg/kg)", en:"Polyphenols (mg/kg)", ar:"البوليفينول" },
  classification:{ fr:"Classification", en:"Classification",  ar:"التصنيف" },
  totalOil:     { fr:"Huile totale produite", en:"Total oil produced", ar:"إجمالي الزيت" },
  tendances:    { fr:"Tendances Sol", en:"Soil Trends", ar:"اتجاهات التربة" },
  cerveau:      { fr:"Cerveau IA", en:"AI Brain", ar:"الذاكرة الذكية" },
  visites:      { fr:"Visites Terrain", en:"Field Visits", ar:"الزيارات الميدانية" },
  avgYield:     { fr:"Rendement moyen", en:"Avg yield",      ar:"متوسط المردودية" },
  avgAcidity:   { fr:"Acidité moyenne", en:"Avg acidity",    ar:"متوسط الحموضة" },
  picolineRow:  { fr:"Rangée Picholine (32 arbres)", en:"Picholine Row (32 trees)", ar:"صف البيكولين (32 شجرة)" },
  farmName:     { fr:"Nom de la ferme", en:"Farm name",      ar:"اسم المزرعة" },
  farmLocation: { fr:"Localisation",  en:"Location",         ar:"الموقع" },
  citrusHa:     { fr:"Superficie citrus (ha)", en:"Citrus area (ha)", ar:"مساحة الحوامض (هكتار)" },
  oliveHa:      { fr:"Superficie oliviers (ha)", en:"Olive area (ha)", ar:"مساحة الزيتون (هكتار)" },
  picolineCount:{ fr:"Arbres Picholine", en:"Picholine trees", ar:"أشجار البيكولين" },
  language:     { fr:"Langue",        en:"Language",         ar:"اللغة" },
  settingsTitle:{ fr:"Paramètres de la ferme", en:"Farm settings", ar:"إعدادات المزرعة" },
  saveSettings: { fr:"Sauvegarder",   en:"Save settings",   ar:"حفظ الإعدادات" },
  saved:        { fr:"✓ Sauvegardé",  en:"✓ Saved",          ar:"✓ تم الحفظ" },
  // Fertilizers
  fertilizers:  { fr:"Engrais",        en:"Fertilizers",      ar:"الأسمدة" },
  fertStock:    { fr:"Stock",          en:"Stock",            ar:"المخزون" },
  fertApply:    { fr:"Applications",   en:"Applications",     ar:"التطبيقات" },
  newFertilizer:{ fr:"Nouvel engrais", en:"New fertilizer",  ar:"سماد جديد" },
  newApplication:{ fr:"Nouvelle application", en:"New application", ar:"تطبيق جديد" },
  fertName:     { fr:"Nom de l'engrais", en:"Fertilizer name", ar:"اسم السماد" },
  fertType:     { fr:"Type",           en:"Type",             ar:"النوع" },
  unit:         { fr:"Unité",          en:"Unit",             ar:"الوحدة" },
  stockQty:     { fr:"Stock actuel",   en:"Current stock",   ar:"المخزون الحالي" },
  minStock:     { fr:"Stock minimum",  en:"Min. stock",      ar:"الحد الأدنى" },
  supplier:     { fr:"Fournisseur",    en:"Supplier",         ar:"المورد" },
  dosePerHa:    { fr:"Dose / ha",      en:"Dose / ha",        ar:"الجرعة / هكتار" },
  frequency:    { fr:"Fréquence",      en:"Frequency",        ar:"التكرار" },
  nextDue:      { fr:"Prochain apport",en:"Next due",         ar:"الموعد التالي" },
  applied:      { fr:"Quantité apportée", en:"Qty applied",  ar:"الكمية المُطبَّقة" },
  lowStock:     { fr:"Stock faible",   en:"Low stock",       ar:"مخزون منخفض" },
  totalApplied: { fr:"Total appliqué", en:"Total applied",   ar:"إجمالي المُطبَّق" },
  applications: { fr:"Applications",   en:"Applications",    ar:"التطبيقات" },
};

function tx(key, lang) { return T[key]?.[lang] || T[key]?.fr || key; }

// ── Seed data ─────────────────────────────────────────────────────────────────
function uid() { return Math.random().toString(36).slice(2, 9); }
const today = new Date();

const INIT = {
  settings: { farmName:"GNAO-KIAF", location:"Souss-Massa, Maroc", citrusHa:40, oliveHa:6, picolineCount:32, geminiKey:"" },
  zones: [
    // Olive blocks
    { id:"b1", name:"Bloc 1 – Arb. Arbequina", crop:"Olive",  variety:"Arbequina",     ha:3,   trees:600,  type:"olive_young"  },
    { id:"b2", name:"Bloc 2 – Arb. Arbosana",  crop:"Olive",  variety:"Arbosana",      ha:3,   trees:600,  type:"olive_young"  },
    // Valencia citrus
    { id:"b3", name:"Bloc 3 – Valencia",        crop:"Citrus", variety:"Valencia",      ha:5,   trees:800,  type:"citrus"       },
    { id:"b4", name:"Bloc 4 – Valencia",        crop:"Citrus", variety:"Valencia",      ha:5,   trees:800,  type:"citrus"       },
    { id:"b5", name:"Bloc 5 – Valencia",        crop:"Citrus", variety:"Valencia",      ha:5,   trees:800,  type:"citrus"       },
    { id:"b6", name:"Bloc 6 – Valencia",        crop:"Citrus", variety:"Valencia",      ha:5,   trees:800,  type:"citrus"       },
    // Navel citrus
    { id:"b7",  name:"Bloc 7 – Navel",          crop:"Citrus", variety:"Navel",         ha:5,   trees:800,  type:"citrus"       },
    { id:"b8",  name:"Bloc 8 – Navel",          crop:"Citrus", variety:"Navel",         ha:5,   trees:800,  type:"citrus"       },
    { id:"b9",  name:"Bloc 9 – Navel",          crop:"Citrus", variety:"Navel",         ha:5,   trees:800,  type:"citrus"       },
    { id:"b10", name:"Bloc 10 – Navel",         crop:"Citrus", variety:"Navel",         ha:2.5, trees:400,  type:"citrus"       },
    { id:"b11", name:"Bloc 11 – Navel",         crop:"Citrus", variety:"Navel",         ha:2.5, trees:400,  type:"citrus"       },
    // Mature Picholine row
    { id:"b12", name:"Rangée Picholine",         crop:"Olive",  variety:"Picholine Marocaine", ha:0.1, trees:32, type:"olive_picholine" },
  ],
  parcels: [],
  workers: [
    { id:"w1", name:"Rhal Achaabawi",   role:"Ouvrier",                    phone:"", active:true,  dailyRate:100,   payType:"daily"   },
    { id:"w2", name:"Khalid Mkikat",    role:"Ouvrier",                    phone:"", active:true,  dailyRate:100,   payType:"daily"   },
    { id:"w3", name:"Salah Ouardi",     role:"Irrigateur / Fertigateur",   phone:"", active:true,  dailyRate:100,   payType:"daily"   },
    { id:"w4", name:"Brahim Sedra",     role:"Gérant sur site",            phone:"", active:true,  dailyRate:3500, payType:"monthly" },
  ],
  tasks: [
    { id:"t1", title:"Taille oliviers – Rangée Picholine", zone:"b12", assignee:"w1", due:"2026-02-28", status:"In Progress", season:"Winter", priority:"High"   },
    { id:"t2", title:"Fertilisation azotée Navel",          zone:"b7",  assignee:"w2", due:"2026-03-10", status:"Pending",     season:"Spring", priority:"High"   },
    { id:"t3", title:"Traitement fongique Valencia",         zone:"b3",  assignee:"w2", due:"2026-02-25", status:"Pending",     season:"Winter", priority:"Medium" },
    { id:"t4", title:"Réglage goutteurs Bloc 4",            zone:"b4",  assignee:"w3", due:"2026-02-22", status:"Done",        season:"Winter", priority:"Low"    },
    { id:"t5", title:"Tuteurage jeunes oliviers Arbequina", zone:"b1",  assignee:"w1", due:"2026-03-01", status:"Pending",     season:"Spring", priority:"Medium" },
    { id:"t6", title:"Tuteurage jeunes oliviers Arbosana",  zone:"b2",  assignee:"w1", due:"2026-03-05", status:"Pending",     season:"Spring", priority:"Medium" },
  ],
  harvests: [
    { id:"h1", zone:"b7",  date:"2025-12-15", crop:"Navel Orange",   qty:12000, unit:"kg", quality:"A", notes:"Excellente saison"   },
    { id:"h2", zone:"b8",  date:"2025-12-18", crop:"Navel Orange",   qty:11500, unit:"kg", quality:"A", notes:""                    },
    { id:"h3", zone:"b3",  date:"2025-11-20", crop:"Valencia",       qty:12000, unit:"kg", quality:"B", notes:"Quelques dégâts gel" },
    { id:"h4", zone:"b4",  date:"2025-11-22", crop:"Valencia",       qty:11800, unit:"kg", quality:"A", notes:""                    },
    { id:"h5", zone:"b12", date:"2025-10-05", crop:"Olive Picholine",qty:1840,  unit:"kg", quality:"A", notes:"Rendement huile 21%" },
  ],
  pests: [
    { id:"p1", zone:"b3",  name:"Mouche des fruits (Ceratitis)", status:"Monitoring", detected:"2026-01-10", treatment:"Pièges delta + spinosad", severity:"Medium" },
    { id:"p2", zone:"b1",  name:"Œil de paon (Cycloconium)",    status:"Active",     detected:"2026-02-01", treatment:"Cuivre hydroxyde",       severity:"High"   },
    { id:"p3", zone:"b8",  name:"Cochenille noire",             status:"Resolved",   detected:"2025-11-15", treatment:"Huile blanche + savon",  severity:"Low"    },
  ],
  irrigation: [
    { id:"i1", zone:"b3",  date:"2026-02-17", duration:4,   flow:3.2, notes:""                                },
    { id:"i2", zone:"b7",  date:"2026-02-17", duration:4,   flow:3.0, notes:""                                },
    { id:"i3", zone:"b4",  date:"2026-02-16", duration:4,   flow:3.1, notes:""                                },
    { id:"i4", zone:"b1",  date:"2026-02-15", duration:3,   flow:1.8, notes:"Pression basse – vérifier pompe" },
  ],
  expenses: [
    { id:"e1", category:"Intrants",      description:"Engrais NPK 15-15-15",   amount:12500, date:"2026-02-05", zone:"b3"  },
    { id:"e2", category:"Main d'œuvre", description:"Salaires février",        amount:28000, date:"2026-02-01", zone:""    },
    { id:"e3", category:"Équipement",   description:"Réparation pompe",        amount:4200,  date:"2026-02-10", zone:"b12" },
    { id:"e4", category:"Traitements",  description:"Fongicide + insecticide", amount:5800,  date:"2026-02-12", zone:"b8"  },
  ],
  messages: [],
  chats: [],
  leafAnalyses: [],
  fertigationSessions: [],
  fertigationRecipes: [
    { id:"fr1", name:"Navel – Démarrage saison", variety:"Navel", active:true,
      products:[
        { fertilizerId:"f1",  name:"Ammonitrate 33.5%", dosePerSession:25,  unit:"kg" },
        { fertilizerId:"f7",  name:"MAP (12-61-0)",      dosePerSession:5,   unit:"kg" },
        { fertilizerId:"f19", name:"Acide Phosphorique", dosePerSession:7,   unit:"L"  },
        { fertilizerId:"f14", name:"Fer EDDHA 6%",       dosePerSession:1,   unit:"kg" },
      ],
      blocs:["b7","b8","b9","b10","b11"],
      notes:"Programme Labomag Navel Mars 2024. Fer s'arrête après quota saisonnier."
    },
    { id:"fr2", name:"Valencia – Démarrage saison", variety:"Valencia", active:true,
      products:[
        { fertilizerId:"f1",  name:"Ammonitrate 33.5%", dosePerSession:25,  unit:"kg" },
        { fertilizerId:"f15", name:"Solucros (Potasse)", dosePerSession:3,   unit:"kg" },
        { fertilizerId:"f19", name:"Acide Nitrique",     dosePerSession:5,   unit:"L"  },
        { fertilizerId:"f14", name:"Fer EDDHA 6%",       dosePerSession:1,   unit:"kg" },
      ],
      blocs:["b3","b4","b5","b6"],
      notes:"Programme Labomag Valencia Mars 2024. Potasse démarre à 3kg/j à partir de J+10."
    },
  ],
  phytoProducts: [
    { id:"ph1", name:"Agroil (Huile blanche)", category:"Insecticide", activeIngredient:"Huile minérale", supplier:"La Récolte SARL", unit:"L",  stockQty:150,  minStock:20,  pricePerUnit:48,   phi:7,  notes:"Poux de Californie (cochenille). Non utilisé à ce jour." },
    { id:"ph2", name:"Sulfate de cuivre",      category:"Fongicide",   activeIngredient:"Cuivre sulfate", supplier:"La Récolte SARL", unit:"kg", stockQty:197.75,minStock:20,  pricePerUnit:80,   phi:14, notes:"Oeil de paon, bactérioses. 200kg livrés 20/01/2026." },
  ],
  phytoApplications: [],
  foliarProgrammes: [],
  energyBills: [
    { id:"eb1", period:"2025-12", billRef:"604672995", issuedDate:"2026-01-22", dueDate:"2026-02-13",
      totalTTC:31806.89, totalHT:26954.22, tva:4852.67,
      kwhNormal:13814, kwhCreux:0, kwhPointe:3787, kwhTotal:17601,
      puissanceKVA:123, cosP:0.990,
      redevancePuissance:11348.33, entretienCompteur:391.20, locationCompteur:215.05,
      provider:"SRM – Béni Mellal–Khénifra", notes:"Décembre pluvieux – conso réduite (~50% d'un mois sec)" },
  ],
  fertilizers: [
    { id:"f1", name:"NPK 15-15-15",      type:"Complexe",   unit:"kg",  stockQty:2400, minStock:500,  supplier:"Fertima Maroc",  dosePerHa:200, notes:"Usage polyvalent" },
    { id:"f2", name:"Urée 46%",          type:"Azoté",      unit:"kg",  stockQty:1800, minStock:300,  supplier:"OCP Group",      dosePerHa:80,  notes:"Croissance foliaire" },
    { id:"f3", name:"Sulfate de potasse",type:"Potassique",  unit:"kg",  stockQty:320,  minStock:400,  supplier:"Fertima Maroc",  dosePerHa:60,  notes:"⚠ Réapprovisionner" },
    { id:"f4", name:"Nitrate de chaux",  type:"Calcique",   unit:"kg",  stockQty:900,  minStock:200,  supplier:"Timac Agro",     dosePerHa:50,  notes:"Prévention carence Ca" },
    { id:"f5", name:"Humus liquide",     type:"Organique",  unit:"L",   stockQty:500,  minStock:100,  supplier:"BioFert Maroc",  dosePerHa:30,  notes:"Application foliaire" },
  ],
  // ── Fertilizer application log
  fertApplications: [
    { id:"fa1", fertilizerId:"f1", zone:"b3",  date:"2026-01-15", qtyApplied:800,  frequency:"Mensuel",   nextDue:"2026-02-15", method:"Fertigation", notes:"" },
    { id:"fa2", fertilizerId:"f2", zone:"b7",  date:"2026-02-01", qtyApplied:320,  frequency:"Bimensuel", nextDue:"2026-03-01", method:"Épandage",    notes:"Après pluie" },
    { id:"fa3", fertilizerId:"f3", zone:"b1",  date:"2026-01-20", qtyApplied:150,  frequency:"Mensuel",   nextDue:"2026-02-20", method:"Fertigation", notes:"Jeunes plants" },
    { id:"fa4", fertilizerId:"f5", zone:"b12", date:"2026-02-10", qtyApplied:40,   frequency:"Hebdomadaire", nextDue:"2026-02-17", method:"Foliaire", notes:"Rangée Picholine" },
  ],
  oliveoil: [
    { id:"oo1", campaign:"2025-2026", date:"2025-10-18", zone:"b12",
      olivesIn:1840, oilOut:387, pressLocation:"Moulin Aït Mane – Biougra",
      acidity:0.18, peroxides:6.2, polyphenols:420, k232:1.42, k268:0.11,
      classification:"Extra Vierge", notes:"Première presse à froid. Couleur vert doré, fruité intense." },
    { id:"oo2", campaign:"2024-2025", date:"2024-10-22", zone:"b12",
      olivesIn:1650, oilOut:330, pressLocation:"Moulin Aït Mane – Biougra",
      acidity:0.22, peroxides:7.1, polyphenols:380, k232:1.55, k268:0.13,
      classification:"Extra Vierge", notes:"Légèrement amer et piquant. Bonne conservation." },
  ],
};

// ── Atoms ─────────────────────────────────────────────────────────────────────
function Badge({ label }) {
  const pal = {
    High:{ bg:"#FDECEA",fg:C.danger }, Medium:{ bg:"#FEF3E2",fg:C.warning }, Low:{ bg:"#EAF4EC",fg:C.success },
    Active:{ bg:"#FDECEA",fg:C.danger }, Monitoring:{ bg:"#FEF3E2",fg:C.warning }, Resolved:{ bg:"#EAF4EC",fg:C.success },
    Done:{ bg:"#EAF4EC",fg:C.success }, "In Progress":{ bg:"#E3F0FB",fg:C.info }, Pending:{ bg:"#F5F0E8",fg:C.muted },
    Citrus:{ bg:"#FEF3E2",fg:C.citrus }, Olive:{ bg:"#EEF1E4",fg:C.olive },
    Valencia:{ bg:"#FFF3CD",fg:"#856404" }, Navel:{ bg:"#FFE8D6",fg:"#C05621" },
    Arbequina:{ bg:"#E8F5E9",fg:"#2E7D32" }, Arbosana:{ bg:"#E3F2E1",fg:"#388E3C" },
    "Picholine Marocaine":{ bg:"#EEF1E4",fg:C.olive },
    A:{ bg:"#EAF4EC",fg:C.success }, B:{ bg:"#FEF3E2",fg:C.warning }, C:{ bg:"#FDECEA",fg:C.danger },
    "Extra Vierge":{ bg:"#EEF5E4",fg:C.olive }, "Vierge":{ bg:"#FEF3E2",fg:C.warning }, "Lampante":{ bg:"#FDECEA",fg:C.danger },
  };
  const s = pal[label] || { bg:"#EEE", fg:"#333" };
  return <span style={{ background:s.bg, color:s.fg, padding:"2px 10px", borderRadius:20, fontSize:11, fontWeight:700, letterSpacing:0.4, textTransform:"uppercase", whiteSpace:"nowrap" }}>{label}</span>;
}

function Card({ children, style={} }) {
  return <div style={{ background:"#fff", borderRadius:16, boxShadow:"0 2px 14px rgba(44,26,14,0.08)", padding:22, ...style }}>{children}</div>;
}

function Stat({ label, value, sub, color }) {
  return (
    <Card style={{ textAlign:"center", padding:"18px 12px" }}>
      <div style={{ fontSize:26, fontWeight:800, color:color||C.soil, fontFamily:"'Playfair Display',serif" }}>{value}</div>
      <div style={{ fontSize:12, fontWeight:600, color:C.bark, marginTop:3 }}>{label}</div>
      {sub && <div style={{ fontSize:10, color:C.muted, marginTop:2 }}>{sub}</div>}
    </Card>
  );
}

function SectionTitle({ children }) {
  return <h2 style={{ fontFamily:"'Playfair Display',serif", color:C.soil, fontSize:21, fontWeight:700, margin:"0 0 18px", borderBottom:`3px solid ${C.citrus}`, paddingBottom:7, display:"inline-block" }}>{children}</h2>;
}

function Btn({ children, onClick, color=C.citrus, small, outline, style={} }) {
  return <button onClick={onClick} style={{ background:outline?"transparent":color, color:outline?color:"#fff", border:`2px solid ${color}`, borderRadius:9, padding:small?"5px 13px":"8px 18px", fontSize:small?11:13, fontWeight:700, cursor:"pointer", fontFamily:"inherit", ...style }}>{children}</button>;
}

function FInput({ label, value, onChange, type="text", options, rtl }) {
  const base = { border:"1.5px solid #DDD6C8", borderRadius:8, padding:"7px 11px", fontSize:13, color:C.soil, background:C.cream, width:"100%", boxSizing:"border-box", fontFamily:"inherit", direction:rtl?"rtl":"ltr" };
  return (
    <div style={{ marginBottom:11 }}>
      {label && <label style={{ display:"block", fontSize:11, fontWeight:700, color:C.muted, marginBottom:3, textTransform:"uppercase", letterSpacing:0.4, textAlign:rtl?"right":"left" }}>{label}</label>}
      {options
        ? <select value={value} onChange={e=>onChange(e.target.value)} style={base}><option value="">—</option>{options.map(o=><option key={o.v||o} value={o.v||o}>{o.l||o}</option>)}</select>
        : <input type={type} value={value} onChange={e=>onChange(e.target.value)} style={base} />}
    </div>
  );
}

function Modal({ title, onClose, children, rtl }) {
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(44,26,14,0.45)", zIndex:1000, display:"flex", alignItems:"center", justifyContent:"center" }} onClick={onClose}>
      <div style={{ background:C.cream, borderRadius:20, padding:28, width:500, maxWidth:"95vw", maxHeight:"90vh", overflowY:"auto", boxShadow:"0 16px 48px rgba(44,26,14,0.25)", direction:rtl?"rtl":"ltr" }} onClick={e=>e.stopPropagation()}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
          <h3 style={{ margin:0, fontFamily:"'Playfair Display',serif", color:C.soil, fontSize:17 }}>{title}</h3>
          <button onClick={onClose} style={{ background:"none", border:"none", fontSize:20, cursor:"pointer", color:C.muted }}>✕</button>
        </div>
        {children}
      </div>
    </div>
  );
}

// ── Dashboard ─────────────────────────────────────────────────────────────────
// ── Fertigation Stock Projection ──────────────────────────────────────────────
const AR_DAYS = ['الأحد','الاثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت'];
const FERT_COLS = [
  { col:'N',    id:'f_ammo',    label:'N',        unit:'kg' },
  { col:'K',    id:'f_solucros',label:'K',        unit:'kg' },
  { col:'Acid', id:'58235a24-af44-4e10-b90b-f64071d210b9', label:'Nitrique', unit:'L' },
];

// Block multipliers: citrus = blocs 3–9 (7 individual) + 10/11 as one = 8 units
//                   olives = blocs 1 and 2 = 2 units
const CROP_BLOCK_COUNT = { citrus: 8, olives: 2 };

const FR_DAYS = ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'];

function StockProjectionPanel({ messages, fertilizers, lang }) {
  const today = new Date();
  const todayIdx = today.getDay(); // 0=Sun … 6=Sat
  const [hovered, setHovered] = React.useState(null); // { key, x, y }
  const thisSun = new Date(today); thisSun.setDate(today.getDate() - todayIdx);
  const nextSun = new Date(thisSun); nextSun.setDate(thisSun.getDate() + 7);
  const fmt = d => d.toISOString().split('T')[0];
  const thisSunStr = fmt(thisSun);
  const nextSunStr = fmt(nextSun);

// Parse fertigation program messages
  const programs = messages
    .filter(m => m.media_type === 'consultant_order' && m.tags === 'fertigation_program')
    .map(m => { try { return { date: m.date, prog: JSON.parse(m.content) }; } catch(e) { return null; } })
    .filter(Boolean);

// Use local date string to avoid toISOString() timezone shift
  const todayLocalStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;

// This week: most recent program whose week_start is ≤ today
  const thisWeekProg = programs
    .filter(p => p.prog?.week_start && p.prog.week_start <= todayLocalStr)
    .sort((a,b) => b.prog.week_start.localeCompare(a.prog.week_start))[0]?.prog || null;

// Next week: nearest program whose week_start is > today
  const nextWeekProg = programs
    .filter(p => p.prog?.week_start && p.prog.week_start > todayLocalStr)
    .sort((a,b) => a.prog.week_start.localeCompare(b.prog.week_start))[0]?.prog || null;

// Doses: remaining days after today (stock is post-today's fertigation), then all of next week
  const thisWeekDoses = calcWeekDoses(thisWeekProg, todayIdx + 1, 6);
  const nextWeekDoses = calcWeekDoses(nextWeekProg, 0, 6);

// Day-by-day breakdown for tooltips
  const thisBreakdown = calcDayBreakdown(thisWeekProg, todayIdx + 1, 6, thisSun);
  const nextBreakdown = calcDayBreakdown(nextWeekProg, 0, 6, nextSun);

const fertMap = {};
  fertilizers.forEach(f => { fertMap[f.id] = f; });

const fmtDate = d => `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`;
  const thisSat = new Date(thisSun); thisSat.setDate(thisSun.getDate() + 6);
  const nextSat = new Date(nextSun); nextSat.setDate(nextSun.getDate() + 6);

const hasAnyProgram = thisWeekProg || nextWeekProg;
  const lowAlerts = rows.filter(r => r.endThis != null && r.endThis < r.minStock);

// Fertigation program panel (right side)
  const EL_LABEL = { N:'Ammonitrate', K:'Potassium', Acid:'Ac. Nitrique' };
  const EL_UNIT  = { N:'kg', K:'kg', Acid:'L' };
  const programPanel = thisWeekProg && (() => {
    const cropLabels = { citrus:'🍊 Agrumes — Blocs 3-11', olives:'🫒 Oliviers — Blocs 1&2' };
    const weekLabel = (() => {
      const d = new Date(thisWeekProg.week_start + 'T00:00:00');
      const end = new Date(d); end.setDate(d.getDate() + 6);
      return `${fmtDate(d)} – ${fmtDate(end)}`;
    })();
    return (
      <div style={{ flex:'1 1 0', minWidth:0, borderLeft:`1px solid #EDE8DC`, paddingLeft:16 }}>
        <div style={{ fontWeight:700, fontSize:12, color:C.soil, marginBottom:8 }}>
          📅 Programme semaine {weekLabel}
        </div>
        {Object.entries(thisWeekProg.programs || {}).map(([crop, prog]) => {
          const days = (prog && prog.days) ? prog.days : [];
          if (days.length === 0) return null;
          const cols = [...new Set(days.flatMap(d => Object.keys(d.doses || {})))];
          return (
            <div key={crop} style={{ marginBottom:10 }}>
              <div style={{ fontWeight:600, fontSize:11, color:C.olive, marginBottom:4 }}>{cropLabels[crop] || crop}</div>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
                <thead>
                  <tr style={{ background:'#F5F0E8' }}>
                    <th style={{ textAlign:'left', padding:'3px 6px', color:C.soil }}>Jour</th>
                    {cols.map(el => (
                      <th key={el} style={{ textAlign:'right', padding:'3px 6px', color:C.soil }}>
                        {EL_LABEL[el] || el}<br/><span style={{ fontWeight:400, opacity:0.6 }}>({EL_UNIT[el] || ''})</span>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {days.map((d, i) => {
                    const dayIdx = AR_DAYS.indexOf(d.day);
                    const dayDate = dayIdx >= 0 ? (() => { const dt = new Date(thisSun); dt.setDate(thisSun.getDate() + dayIdx); return fmtDate(dt); })() : '';
                    const isToday = dayIdx === todayIdx;
                    return (
                      <tr key={i} style={{ borderBottom:'1px solid #F0EBE0', background: isToday ? '#FFF8EC' : 'transparent' }}>
                        <td style={{ padding:'3px 6px', fontWeight: isToday ? 700 : 400, color:C.bark }}>{dayDate} {FR_DAYS[dayIdx] || d.day}</td>
                        {cols.map(el => (
                          <td key={el} style={{ padding:'3px 6px', textAlign:'right', color:C.bark }}>
                            {d.doses?.[el] ? d.doses[el] : '—'}
                          </td>
                        ))}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          );
        })}
        {nextWeekProg && (() => {
          const nwLabel = (() => {
            const d = new Date(nextWeekProg.week_start + 'T00:00:00');
            const end = new Date(d); end.setDate(d.getDate() + 6);
            return `${fmtDate(d)} – ${fmtDate(end)}`;
          })();
          return (
            <div style={{ marginTop:8, borderTop:`1px dashed #D6CDB8`, paddingTop:8 }}>
              <span
                style={{ fontSize:11, color:C.info, cursor:'pointer', textDecoration:'underline', userSelect:'none' }}
                onMouseEnter={e => setHovered({ key:'nextweek', x:e.clientX, y:e.clientY })}
                onMouseLeave={() => setHovered(null)}
              >
                📅 Voir programme semaine suivante ({nwLabel})
              </span>
              {hovered?.key === 'nextweek' && ReactDOM.createPortal(
                <div style={{ position:'fixed', zIndex:9999, background:'#fff', border:`1px solid #93C5FD`,
                    borderRadius:8, padding:'12px 14px', minWidth:320, maxWidth:480,
                    left: Math.max(hovered.x - 340, 8),
                    top: hovered.y - 8,
                    transform:'translateY(-100%)',
                    boxShadow:'0 6px 20px rgba(0,0,0,0.15)', fontSize:11, pointerEvents:'none' }}>
                  <div style={{ fontWeight:700, color:'#1E3A8A', fontSize:12, marginBottom:8, borderBottom:'1px solid #BFDBFE', paddingBottom:5 }}>
                    📅 Programme semaine {nwLabel}
                  </div>
                  {/* Totals summary */}
                  {(() => {
                    const allCols = [...new Set(Object.values(nextWeekProg.programs || {}).flatMap(p => (p.days||[]).flatMap(d => Object.keys(d.doses||{}))))];
                    if (allCols.length === 0) return null;
                    return (
                      <div style={{ background:'#EFF6FF', borderRadius:6, padding:'6px 10px', marginBottom:10, display:'flex', gap:12, flexWrap:'nowrap', alignItems:'baseline', whiteSpace:'nowrap' }}>
                        <span style={{ fontWeight:700, color:'#1E3A8A', fontSize:11 }}>Total :</span>
                        {allCols.map(el => {
                          const total = nextWeekDoses[el] || 0;
                          const shortLabel = { N:'Ammonitrate', K:'Potassium', Acid:'Nitrique' }[el] || el;
                          return total > 0 ? (
                            <span key={el} style={{ fontSize:11, color:'#1E3A8A' }}>
                              <strong>{shortLabel}</strong> {total.toLocaleString()} {EL_UNIT[el] || ''}
                            </span>
                          ) : null;
                        })}
                      </div>
                    );
                  })()}
                  {Object.entries(nextWeekProg.programs || {}).map(([crop, prog]) => {
                    const days = (prog && prog.days) ? prog.days : [];
                    if (days.length === 0) return null;
                    const cols = [...new Set(days.flatMap(d => Object.keys(d.doses || {})))];
                    return (
                      <div key={crop} style={{ marginBottom:10 }}>
                        <div style={{ fontWeight:600, color:'#1E3A8A', marginBottom:4 }}>{cropLabels[crop] || crop}</div>
                        <table style={{ width:'100%', borderCollapse:'collapse' }}>
                          <thead>
                            <tr style={{ background:'#EFF6FF' }}>
                              <th style={{ textAlign:'left', padding:'3px 6px', color:'#1E3A8A' }}>Jour</th>
                              {cols.map(el => (
                                <th key={el} style={{ textAlign:'right', padding:'3px 6px', color:'#1E3A8A' }}>
                                  {EL_LABEL[el] || el} ({EL_UNIT[el] || ''})
                                </th>
                              ))}
                            </tr>
                          </thead>
                          <tbody>
                            {days.map((d, i) => {
                              const dayIdx = AR_DAYS.indexOf(d.day);
                              const dayDate = dayIdx >= 0 ? (() => { const dt = new Date(nextSun); dt.setDate(nextSun.getDate() + dayIdx); return fmtDate(dt); })() : '';
                              return (
                                <tr key={i} style={{ borderBottom:'1px solid #DBEAFE' }}>
                                  <td style={{ padding:'3px 6px', color:'#1E3A8A' }}>{dayDate} {FR_DAYS[dayIdx] || d.day}</td>
                                  {cols.map(el => (
                                    <td key={el} style={{ padding:'3px 6px', textAlign:'right', color:'#1E3A8A' }}>
                                      {d.doses?.[el] ? d.doses[el] : '—'}
                                    </td>
                                  ))}
                                </tr>
                              );
                            })}
                          </tbody>
                        </table>
                      </div>
                    );
                  })}
                </div>,
                document.body
              )}
            </div>
          );
        })()}
      </div>
    );
  })();

return (
    <Card style={{ marginBottom:16 }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
        <h3 style={{ margin:0, color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>
          💧 Stock Status & Projections
        </h3>
        {hasAnyProgram && (
          <button onClick={() => {
            // Build HTML email body
            const today2 = new Date();
            const fmtD = d => `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`;
            const todayStr = fmtD(today2);

// Stock table rows
            const tableRows = rows.map(r => `
              <tr>
                <td style="padding:8px 12px;border-bottom:1px solid #eee;font-weight:600">${r.label} (${r.unit})</td>
                <td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:right">${r.stock != null ? r.stock.toLocaleString() : '—'}</td>
                <td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:right;color:#888">${r.useThis > 0 ? '−'+r.useThis.toLocaleString() : '—'}</td>
                <td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:right;font-weight:700;color:${r.endThis < r.minStock ? '#DC2626' : '#16A34A'}">${r.endThis != null ? r.endThis.toLocaleString() : '—'}</td>
                ${nextWeekProg ? `<td style="padding:8px 12px;border-bottom:1px solid #eee;text-align:right;font-weight:700;color:${r.endNext < r.minStock ? '#DC2626' : '#16A34A'}">${r.endNext != null ? r.endNext.toLocaleString() : '—'}</td>` : ''}
              </tr>`).join('');

// Breakdown per day per product
            const breakdownRows = FERT_COLS.map(({col, label, unit}) => {
              const days = thisBreakdown.filter(d => Object.values(d.byCrop).some(c => c[col] > 0));
              if (days.length === 0) return '';
              const dayLines = days.map(({dayLabel, byCrop}) => {
                const citrus = byCrop.citrus?.[col] || 0;
                const olives = byCrop.olives?.[col] || 0;
                return `<tr><td style="padding:4px 10px">${dayLabel}</td><td style="padding:4px 10px;text-align:right">${citrus||'—'}</td><td style="padding:4px 10px;text-align:right">${olives||'—'}</td><td style="padding:4px 10px;text-align:right;font-weight:700">${citrus+olives}</td></tr>`;
              }).join('');
              return `<h3 style="color:#2D5016;margin:16px 0 6px">${label} (${unit})</h3>
                <table style="border-collapse:collapse;font-size:13px;width:100%">
                  <tr style="background:#F5F0E8"><th style="padding:4px 10px;text-align:left">Jour</th><th style="padding:4px 10px;text-align:right">Agrumes ×8</th><th style="padding:4px 10px;text-align:right">Oliviers ×2</th><th style="padding:4px 10px;text-align:right">Total</th></tr>
                  ${dayLines}
                </table>`;
            }).join('');

// Helper: render one program as HTML table
            const progToHtml = (prog, title) => {
              if (!prog) return '';
              const AR = ['الأحد','الاثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت'];
              const FR = ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'];
              const cropLabels = { citrus:'🍊 Agrumes (Blocs 3-11, ×8)', olives:'🫒 Oliviers (Blocs 1-2, ×2)' };
              const colOrder = ['N','K','Acid'];
              const colLabel = { N:'N (kg)', K:'K (kg)', Acid:'Nitrique (L)' };
              const wStart = new Date(prog.week_start + 'T00:00:00');
              const wEnd = new Date(wStart); wEnd.setDate(wStart.getDate() + 6);
              const fmtD2 = d => `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`;
              let out = `<h2 style="color:#2D5016;border-bottom:2px solid #8B9E4A;padding-bottom:8px;margin-top:28px">${title} — ${fmtD2(wStart)}–${fmtD2(wEnd)}</h2>`;
              for (const [crop, cropProg] of Object.entries(prog.programs || {})) {
                const days = (cropProg && cropProg.days) ? cropProg.days : [];
                const activeDays = days.filter(d => Object.values(d.doses||{}).some(v => Number(v) > 0));
                if (activeDays.length === 0) continue;
                const usedCols = colOrder.filter(c => activeDays.some(d => Number(d.doses?.[c]) > 0));
                out += `<div style="font-weight:700;font-size:13px;color:#5A3E2B;margin:14px 0 6px">${cropLabels[crop] || crop}</div>`;
                out += `<table style="border-collapse:collapse;font-size:13px;width:auto;margin-bottom:12px">`;
                out += `<thead><tr style="background:#F5F0E8"><th style="padding:5px 12px;text-align:left">Jour</th>${usedCols.map(c=>`<th style="padding:5px 12px;text-align:right">${colLabel[c]}</th>`).join('')}</tr></thead><tbody>`;
                for (let di = 0; di < 7; di++) {
                  const dayData = activeDays.find(d => d.day === AR[di]);
                  if (!dayData) continue;
                  const dateForDay = new Date(wStart); dateForDay.setDate(wStart.getDate() + di);
                  const dayLabel = `${FR[di]} ${fmtD2(dateForDay)}`;
                  out += `<tr><td style="padding:4px 12px;border-bottom:1px solid #eee">${dayLabel}</td>${usedCols.map(c=>`<td style="padding:4px 12px;text-align:right;border-bottom:1px solid #eee">${Number(dayData.doses?.[c])||'—'}</td>`).join('')}</tr>`;
                }
                // Totals row
                out += `<tr style="background:#F5F0E8;font-weight:700"><td style="padding:4px 12px">Total sem.</td>${usedCols.map(c=>{
                  const tot = activeDays.reduce((s,d)=>s+(Number(d.doses?.[c])||0),0);
                  return `<td style="padding:4px 12px;text-align:right">${tot||'—'}</td>`;
                }).join('')}</tr>`;
                out += `</tbody></table>`;
              }
              return out;
            };

fetch('http://100.103.79.60:8000/send-email', {
              method:'POST',
              headers:{'Content-Type':'application/json'},
              body: JSON.stringify({ subject:`Stock Fertigation — ${todayStr}`, body: html, recipients:['jamalfaik@gmail.com','marocoultou@gmail.com','larbi.abourazzek@gmail.com'] })
            }).then(r=>r.json()).then(d => alert(d.status === 'ok' ? '✅ Email envoyé !' : '❌ '+d.message)).catch(()=>alert('❌ Erreur réseau'));
          }} style={{ fontSize:11, padding:'4px 10px', background:C.info, color:'#fff', border:'none', borderRadius:6, cursor:'pointer', fontWeight:600 }}>
            📧 Envoyer par email
          </button>
        )}
      </div>
      {!hasAnyProgram ? (
        <div style={{ color:C.muted, fontSize:13 }}>Aucun programme de fertigation défini pour cette semaine ou la suivante.</div>
      ) : (
        <div style={{ display:'flex', gap:16, alignItems:'flex-start' }}>
          {/* Left: stock projection table ~50% */}
          <div style={{ flex:'0 0 50%', minWidth:0 }}>
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11, whiteSpace:'nowrap' }}>
                <thead>
                  <tr style={{ background:'#F5F0E8' }}>
                    <th style={{ textAlign:'left', padding:'6px 8px', color:C.soil, fontWeight:700 }}>Produit</th>
                    <th style={{ textAlign:'right', padding:'6px 8px', color:C.soil, fontWeight:700 }}>Stock actuel</th>
                    {thisWeekProg && <th style={{ textAlign:'right', padding:'6px 8px', color:C.info, fontWeight:700 }}>Consommé<br/><span style={{ fontWeight:400, opacity:0.7 }}>{fmtDate(today)}→{fmtDate(thisSat)}</span></th>}
                    {thisWeekProg && <th style={{ textAlign:'right', padding:'6px 8px', color:C.leaf, fontWeight:700 }}>Fin sem.<br/><span style={{ fontWeight:400, opacity:0.7 }}>{fmtDate(thisSat)}</span></th>}
                    {nextWeekProg && <th style={{ textAlign:'right', padding:'6px 8px', color:C.olive, fontWeight:700 }}>Fin sem. suiv.<br/><span style={{ fontWeight:400, opacity:0.7 }}>{fmtDate(nextSat)}</span></th>}
                  </tr>
                </thead>
                <tbody>
                  {rows.map(r => {
                    const endThisLow = r.endThis != null && r.endThis < r.minStock;
                    const endNextLow = r.endNext != null && r.endNext < r.minStock;
                    return (
                      <tr key={r.col} style={{ borderBottom:'1px solid #F0EBE0' }}>
                        <td style={{ padding:'6px 8px', fontWeight:600, color:C.soil }}>{r.label}</td>
                        <td style={{ padding:'6px 8px', textAlign:'right', color:C.bark }}>{r.stock != null ? `${r.stock.toLocaleString()} ${r.unit}` : '—'}</td>
                        {thisWeekProg && <td style={{ padding:'6px 8px', textAlign:'right', color:C.muted }}>{r.useThis > 0 ? `−${r.useThis.toLocaleString()} ${r.unit}` : '—'}</td>}
                        {thisWeekProg && <td style={{ padding:'6px 8px', textAlign:'right', fontWeight:700, color: endThisLow ? C.danger : C.success, cursor:'help' }}
                          onMouseEnter={e => setHovered({ key:`this-${r.col}`, x:e.clientX, y:e.clientY })}
                          onMouseLeave={() => setHovered(null)}
                        >
                          {r.endThis != null ? `${r.endThis.toLocaleString()} ${r.unit}` : '—'}
                          {endThisLow && ' ⚠️'}
                          {hovered?.key === `this-${r.col}` && <DoseTooltip breakdown={thisBreakdown} row={r} stock={r.stock} x={hovered.x} y={hovered.y} />}
                        </td>}
                        {nextWeekProg && <td style={{ padding:'6px 8px', textAlign:'right', fontWeight:700, color: endNextLow ? C.danger : C.success }}>
                          {r.endNext != null ? `${r.endNext.toLocaleString()} ${r.unit}` : '—'}
                          {endNextLow && ' ⚠️'}
                        </td>}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            {lowAlerts.length > 0 && (
              <div style={{ marginTop:12, background:'#FDECEA', border:`1px solid ${C.danger}`, borderRadius:8, padding:'10px 14px' }}>
                <span style={{ fontWeight:700, color:C.danger, fontSize:12 }}>⚠️ Stock insuffisant en fin de semaine : </span>
                <span style={{ fontSize:12, color:C.danger }}>{lowAlerts.map(r => r.label).join(', ')}</span>
              </div>
            )}
          </div>
          {/* Right: this week's fertigation program */}
          {programPanel}
        </div>
      )}
    </Card>
  );
}

// ── Pump Operations Panel ────────────────────────────────────────────────────
function PumpOperationsPanel({ pumpLogs, lang, solarDaily }) {
  const PUMPS = [
    { name:"بومبة د 60 - بير كبير", label:"60", type:"well" },
    { name:"بومبة دلباسان", label:"Bassin", type:"well" },
    { name:"بومبة باب حمر", label:"Bab Ahmar", type:"well" },
    { name:"دينامو 1", label:"Dynamo 1", type:"irrig" },
    { name:"دينامو 2", label:"Dynamo 2", type:"irrig" },
  ];
  // Fake kWh rate per hour and cost per kWh
  // Actual pump power ratings in kW (CV × 0.746)
  const KWH_PER_HOUR = { "بومبة د 60 - بير كبير":44.8, "بومبة دلباسان":26.1, "بومبة باب حمر":29.8, "دينامو 1":18.6, "دينامو 2":18.6 };
  // Morocco tariff — peak (18:00–23:00 Morocco) vs off-peak, seasonal
  // Morocco is UTC+1
  const moroccoNow = new Date(Date.now() + 3600000);
  const m = moroccoNow.getUTCMonth() + 1;
  const isWinter = m >= 11 || m <= 3;
  const PEAK_RATE = (isWinter ? 1.18843 : 0.67755) * 1.14;
  const OFFPEAK_RATE = (isWinter ? 0.93483 : 0.59255) * 1.14;
  // Weighted avg for simple display contexts
  const COST_PER_KWH = (isWinter ? (1.18843*5 + 0.93483*19)/24 : (0.67755*5 + 0.59255*19)/24) * 1.14;

// Per-day PV fraction: pvKwh / consumedKwh for each date (Morocco time)
  // Used to discount grid cost — PV-covered portion costs nothing
  const pvFractionByDate = {};
  (solarDaily||[]).forEach(d => {
    if (d.consumedKwh > 0) pvFractionByDate[d.date] = Math.min(1, (d.pvKwh||0) / d.consumedKwh);
  });

// Split a time range (ms timestamps) into peak/offpeak hours
  function splitPeakOffPeak(startMs, endMs) {
    let peakSec=0, offPeakSec=0;
    let cursor = startMs;
    while (cursor < endMs) {
      const moroccoDate = new Date(cursor + 3600000); // UTC+1
      const hour = moroccoDate.getUTCHours();
      const isPeak = hour >= 18 && hour < 23;
      const step = Math.min(60000, endMs - cursor); // 1-minute steps
      const sec = step / 1000;
      if (isPeak) peakSec += sec; else offPeakSec += sec;
      cursor += step;
    }
    return { peakH: peakSec/3600, offPeakH: offPeakSec/3600 };
  }

// Compute cost for a pump over a time range using actual peak/offpeak rates,
  // discounted by pvFraction (fraction of consumption covered by solar that day)
  function computeCost(pumpName, startMs, endMs, pvFraction) {
    const kw = KWH_PER_HOUR[pumpName] || 0;
    const { peakH, offPeakH } = splitPeakOffPeak(startMs, endMs);
    const grossCost = kw * (peakH * PEAK_RATE + offPeakH * OFFPEAK_RATE);
    return grossCost * (1 - (pvFraction||0));
  }

const logs = (pumpLogs||[]).slice().sort((a,b)=>a.toggledAt.localeCompare(b.toggledAt));

// Current state per pump
  const currentState = {};
  PUMPS.forEach(p => {
    const pLogs = logs.filter(l=>l.pumpName===p.name);
    const last = pLogs[pLogs.length-1];
    currentState[p.name] = last ? { status:last.status, since:last.toggledAt } : { status:"off", since:null };
  });

// Morocco time helpers — all day boundaries are Morocco midnight (UTC+1)
  const MOROCCO_OFFSET_MS = 60 * 60 * 1000; // UTC+1
  function moroccoMidnightUTC(year, month, day) {
    // midnight Morocco = 23:00 UTC previous day
    return Date.UTC(year, month, day) - MOROCCO_OFFSET_MS;
  }
  const nowMs = Date.now();
  const moroccoNowDate = new Date(nowMs + MOROCCO_OFFSET_MS); // current Morocco time as UTC date object
  const mYear = moroccoNowDate.getUTCFullYear();
  const mMonth = moroccoNowDate.getUTCMonth();
  const mDay = moroccoNowDate.getUTCDate();
  const mDow = moroccoNowDate.getUTCDay(); // 0=Sun … 6=Sat
  // Today start in UTC ms (= Morocco midnight)
  const todayStartMs = moroccoMidnightUTC(mYear, mMonth, mDay);
  // Monday of current week in Morocco time
  const daysFromMon = (mDow === 0) ? 6 : mDow - 1; // Sunday → 6 days back
  const weekStartMs = moroccoMidnightUTC(mYear, mMonth, mDay - daysFromMon);
  // First of month in Morocco time
  const monthStartMs = moroccoMidnightUTC(mYear, mMonth, 1);

// Build on/off intervals per pump, correctly pairing each "on" with the
  // next "off" that follows it (skips duplicate "on" entries instead of
  // falling back to now(), which caused hour inflation).
  function buildIntervals(pumpName) {
    const pLogs = logs.filter(l => l.pumpName === pumpName);
    const intervals = [];
    for (let i = 0; i < pLogs.length; i++) {
      if (pLogs[i].status !== "on") continue;
      const onMs = new Date(pLogs[i].toggledAt).getTime();
      // Find the next "off" event strictly after this "on"
      let offMs = null;
      for (let j = i + 1; j < pLogs.length; j++) {
        if (pLogs[j].status === "off") { offMs = new Date(pLogs[j].toggledAt).getTime(); break; }
      }
      if (offMs === null) offMs = nowMs; // pump still running
      if (offMs > onMs) intervals.push({ onMs, offMs });
    }
    return intervals;
  }

function computeOnHours(pumpName, startMs, endMs) {
    const end = endMs !== null ? endMs : nowMs;
    let totalMs = 0;
    for (const iv of buildIntervals(pumpName)) {
      const s = Math.max(iv.onMs, startMs);
      const e = Math.min(iv.offMs, end);
      if (e > s) totalMs += (e - s);
    }
    return totalMs / (1000 * 60 * 60);
  }

// Compute cost with peak/offpeak rates, splitting by Morocco calendar day
  // to apply per-day PV fraction discounts
  function computeOnCost(pumpName, startMs, endMs) {
    const end = endMs !== null ? endMs : nowMs;
    let totalCost = 0;
    for (const iv of buildIntervals(pumpName)) {
      const s = Math.max(iv.onMs, startMs);
      const e = Math.min(iv.offMs, end);
      if (e <= s) continue;
      let cursor = s;
      while (cursor < e) {
        const moroccoDate = new Date(cursor + MOROCCO_OFFSET_MS);
        const dateStr = moroccoDate.toISOString().slice(0, 10);
        const [yr, mo, dy] = dateStr.split('-').map(Number);
        const nextDayMs = moroccoMidnightUTC(yr, mo - 1, dy + 1);
        const segEnd = Math.min(e, nextDayMs);
        const pvFrac = pvFractionByDate[dateStr] || 0;
        totalCost += computeCost(pumpName, cursor, segEnd, pvFrac);
        cursor = segEnd;
      }
    }
    return totalCost;
  }

// Elapsed since last toggle
  function elapsed(since) {
    if (!since) return "--";
    const diff = nowMs - new Date(since).getTime();
    const d = Math.floor(diff/(1000*60*60*24));
    const h = Math.floor(diff/(1000*60*60))%24;
    const m = Math.floor(diff/(1000*60))%60;
    if (d>0) return d+"j "+h+"h";
    if (h>0) return h+"h "+m+"m";
    return m+"m";
  }

// Daily data for last 7 days chart — each day boundary is Morocco midnight
  const last7 = [];
  for (let i=6; i>=0; i--) {
    const dayMs = moroccoMidnightUTC(mYear, mMonth, mDay - i);
    const dayEndMs = moroccoMidnightUTC(mYear, mMonth, mDay - i + 1);
    const label = new Date(dayMs + MOROCCO_OFFSET_MS).toLocaleDateString("fr",{weekday:"short",day:"numeric"});
    const entry = { label, pumps:{} };
    PUMPS.forEach(p => { entry.pumps[p.name] = computeOnHours(p.name, dayMs, dayEndMs); });
    last7.push(entry);
  }

// Chart ref
  const chartRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    if (!canvasRef.current) return;
    if (chartRef.current) chartRef.current.destroy();
    const colors = ["#06B6D4","#3B82F6","#EF4444","#F59E0B","#8B5CF6"];
    chartRef.current = new Chart(canvasRef.current, {
      type:"bar",
      data:{
        labels: last7.map(d=>d.label),
        datasets: PUMPS.map((p,i) => ({
          label: p.label,
          data: last7.map(d=>(d.pumps[p.name]||0).toFixed(1)),
          backgroundColor: colors[i],
          borderRadius: 3,
        })),
      },
      options:{
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{ position:"bottom", labels:{ boxWidth:10, font:{size:10} } } },
        scales:{
          x:{ stacked:false, grid:{display:false}, ticks:{font:{size:9}} },
          y:{ title:{display:true,text:"Heures",font:{size:10}}, ticks:{font:{size:9}}, grid:{color:"#F0EBE0"} },
        },
      },
    });
    return () => { if (chartRef.current) chartRef.current.destroy(); };
  }, [pumpLogs]);

const hdr = { fontWeight:700, fontSize:11, color:C.soil, padding:"6px 8px", borderBottom:`2px solid ${C.citrus}`, textAlign:"center" };
  const td = { fontSize:11, padding:"5px 8px", textAlign:"center", borderBottom:"1px solid #F0EBE0" };

return (
    <Card style={{ marginBottom:16 }}>
      <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:14 }}>
        <h3 style={{ margin:0, color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>
          ⚡ Pompes — Suivi d'opération
          <span style={{ fontSize:10, fontWeight:400, color:C.olive, marginLeft:8 }}>☀️ coût net après PV</span>
        </h3>
        <button title="Imprimer / PDF" onClick={function(){
          var w = window.open('','_blank');
          var now2 = new Date().toLocaleDateString("fr",{day:"2-digit",month:"2-digit",year:"numeric"});
          var rows = PUMPS.map(function(p){
            var rate = KWH_PER_HOUR[p.name]||0;
            var dayH = computeOnHours(p.name, todayStartMs, null);
            var weekH = computeOnHours(p.name, weekStartMs, null);
            var monthH = computeOnHours(p.name, monthStartMs, null);
            var dayCost = computeOnCost(p.name, todayStartMs, null);
            var weekCost = computeOnCost(p.name, weekStartMs, null);
            var monthCost = computeOnCost(p.name, monthStartMs, null);
            return '<tr><td style="font-weight:700;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+p.label+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+dayH.toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+(dayH*rate).toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#B45309">'+dayCost.toFixed(0)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+weekH.toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+(weekH*rate).toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#B45309">'+weekCost.toFixed(0)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+monthH.toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0">'+(monthH*rate).toFixed(1)+'</td>'
              +'<td style="text-align:center;padding:6px 10px;border-bottom:1px solid #e2e8f0;font-weight:600;color:#B45309">'+monthCost.toFixed(0)+' DHs</td>'
              +'</tr>';
          }).join('');
          var totalRow = (function(){
            var r='<tr style="background:#F5F0E8;font-weight:700"><td style="padding:6px 10px">TOTAL</td>';
            [[todayStartMs,null],[weekStartMs,null],[monthStartMs,null]].forEach(function(range){
              var tH=PUMPS.reduce(function(s,p){return s+computeOnHours(p.name,range[0],null);},0);
              var tK=PUMPS.reduce(function(s,p){return s+computeOnHours(p.name,range[0],null)*(KWH_PER_HOUR[p.name]||0);},0);
              var tC=PUMPS.reduce(function(s,p){return s+computeOnCost(p.name,range[0],null);},0);
              r+='<td style="text-align:center;padding:6px 10px">'+tH.toFixed(1)+'</td>'
                +'<td style="text-align:center;padding:6px 10px">'+tK.toFixed(1)+'</td>'
                +'<td style="text-align:center;padding:6px 10px;color:#DC2626;font-weight:800">'+tC.toFixed(0)+' DHs</td>';
            });
            return r+'</tr>';
          })();
          w.document.write('<!DOCTYPE html><html><head><title>Pompes — '+now2+'</title><style>body{font-family:system-ui,sans-serif;padding:28px;color:#1e293b;max-width:1000px;margin:0 auto}h1{color:#0E7490;border-bottom:2px solid #06B6D4;padding-bottom:8px;font-size:18px}table{width:100%;border-collapse:collapse;font-size:12px}th{background:#F5F0E8;font-weight:700;padding:8px 10px;border-bottom:2px solid #D97706;text-align:center}.meta{font-size:11px;color:#94a3b8;margin-bottom:20px}@media print{.no-print{display:none!important}}</style></head><body>');
          w.document.write('<h1>⚡ Pompes — Suivi d\'opération</h1>');
          w.document.write('<div class="meta">GNAO-KIAF · '+now2+' · coût net après PV solaire</div>');
          w.document.write('<table><thead><tr><th style="text-align:left">Pompe</th><th>Auj. (h)</th><th>Auj. kWh</th><th>Auj. DHs ☀️</th><th>Sem. (h)</th><th>Sem. kWh</th><th>Sem. DHs ☀️</th><th>Mois (h)</th><th>Mois kWh</th><th>Mois DHs ☀️</th></tr></thead><tbody>'+rows+totalRow+'</tbody></table>');
          w.document.write('<div class="no-print" style="margin-top:24px"><button onclick="window.print()" style="padding:8px 20px;background:#0EA5E9;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px">🖨️ Imprimer / PDF</button></div>');
          w.document.write('</body></html>');
          w.document.close();
          setTimeout(function(){ w.print(); }, 400);
        }} style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }}
          onMouseEnter={function(e){ e.currentTarget.style.background='#0EA5E9'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#0EA5E9'; }}
          onMouseLeave={function(e){ e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
          🖨️
        </button>
      </div>

{/* ── Live status cards ── */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:8, marginBottom:16 }}>
        {PUMPS.map(p => {
          const st = currentState[p.name];
          const isOn = st.status==="on";
          const hrs = computeOnHours(p.name, todayStartMs, null);
          const kw = (hrs * (KWH_PER_HOUR[p.name]||0)).toFixed(1);
          const cost = computeOnCost(p.name, todayStartMs, null).toFixed(0);
          return (
            <div key={p.name} style={{
              background: isOn ? "#ECFDF5" : "#FEF2F2",
              borderRadius:12, padding:"10px 8px", textAlign:"center",
              border: isOn ? "2px solid #06B6D4" : "2px solid #FECACA",
              position:"relative",
            }}>
              {isOn && <span style={{ position:"absolute", top:6, right:8, width:8, height:8, borderRadius:"50%", background:"#06B6D4", boxShadow:"0 0 6px #06B6D4", animation:"fertiPulse 1.5s infinite" }} />}
              <div style={{ fontWeight:700, fontSize:13, color: isOn ? "#0E7490" : "#991B1B" }}>{p.label}</div>
              <div style={{ fontSize:18, fontWeight:800, color: isOn ? "#06B6D4" : "#DC2626", margin:"4px 0" }}>{isOn ? "ON" : "OFF"}</div>
              <div style={{ fontSize:9, color:C.muted }}>{elapsed(st.since)}</div>
              <div style={{ marginTop:6, fontSize:10, color:C.soil }}>
                <span style={{ fontWeight:600 }}>⚡ {kw} kWh</span> · <span style={{ fontWeight:600 }}>💰 {cost} DHs</span>
              </div>
            </div>
          );
        })}
      </div>

{/* ── 7-day bar chart ── */}
      <div style={{ marginBottom:16 }}>
        <h4 style={{ margin:"0 0 8px", fontSize:12, color:C.bark }}>📊 Heures d'opération — 7 derniers jours</h4>
        <div style={{ height:180 }}><canvas ref={canvasRef} /></div>
      </div>

{/* ── Summary table: daily / weekly / monthly ── */}
      <div style={{ overflowX:"auto" }}>
        <table style={{ width:"100%", borderCollapse:"collapse", fontSize:11 }}>
          <thead>
            <tr style={{ background:"#F5F0E8" }}>
              <th style={{ ...hdr, textAlign:"left" }}>Pompe</th>
              <th style={hdr}>Aujourd'hui (h)</th>
              <th style={hdr}>Aujourd'hui kWh</th>
              <th style={hdr}>Aujourd'hui DHs ☀️</th>
              <th style={hdr}>Semaine (h)</th>
              <th style={hdr}>Semaine kWh</th>
              <th style={hdr}>Semaine DHs ☀️</th>
              <th style={hdr}>Mois (h)</th>
              <th style={hdr}>Mois kWh</th>
              <th style={hdr}>Mois DHs ☀️</th>
            </tr>
          </thead>
          <tbody>
            {PUMPS.map(p => {
              const rate = KWH_PER_HOUR[p.name]||0;
              const dayH = computeOnHours(p.name, todayStartMs, null);
              const weekH = computeOnHours(p.name, weekStartMs, null);
              const monthH = computeOnHours(p.name, monthStartMs, null);
              const dayCost = computeOnCost(p.name, todayStartMs, null);
              const weekCost = computeOnCost(p.name, weekStartMs, null);
              const monthCost = computeOnCost(p.name, monthStartMs, null);
              return (
                <tr key={p.name}>
                  <td style={{ ...td, textAlign:"left", fontWeight:700, color:C.bark }}>{p.label}</td>
                  <td style={td}>{dayH.toFixed(1)}</td>
                  <td style={td}>{(dayH*rate).toFixed(1)}</td>
                  <td style={{ ...td, fontWeight:600, color:C.citrus }}>{dayCost.toFixed(0)}</td>
                  <td style={td}>{weekH.toFixed(1)}</td>
                  <td style={td}>{(weekH*rate).toFixed(1)}</td>
                  <td style={{ ...td, fontWeight:600, color:C.citrus }}>{weekCost.toFixed(0)}</td>
                  <td style={td}>{monthH.toFixed(1)}</td>
                  <td style={td}>{(monthH*rate).toFixed(1)}</td>
                  <td style={{ ...td, fontWeight:600, color:C.citrus }}>{monthCost.toFixed(0)}</td>
                </tr>
              );
            })}
            {/* Totals row */}
            <tr style={{ background:"#F5F0E8", fontWeight:700 }}>
              <td style={{ ...td, textAlign:"left", color:C.soil }}>TOTAL</td>
              {[todayStartMs, weekStartMs, monthStartMs].map((start,i) => {
                const totalH = PUMPS.reduce((s,p) => s + computeOnHours(p.name, start, null), 0);
                const totalKw = PUMPS.reduce((s,p) => s + computeOnHours(p.name, start, null) * (KWH_PER_HOUR[p.name]||0), 0);
                const totalCost = PUMPS.reduce((s,p) => s + computeOnCost(p.name, start, null), 0);
                return [
                  <td key={i+"h"} style={td}>{totalH.toFixed(1)}</td>,
                  <td key={i+"k"} style={td}>{totalKw.toFixed(1)}</td>,
                  <td key={i+"d"} style={{ ...td, color:C.danger, fontWeight:800 }}>{totalCost.toFixed(0)} DHs</td>,
                ];
              }).flat()}
            </tr>
          </tbody>
        </table>
      </div>
    </Card>
  );
}

const goToMessages = (opts) => {
    const parts = [opts?.sender, opts?.tag].filter(Boolean);
    setMsgFilter({ search: parts.join(" "), scrollToId: opts?.scrollToId });
    setView("messages");
  };

// ── Today's message summary ──
  const todayStr = new Date().toISOString().slice(0,10);
  const todayMsgs = (data.messages||[]).filter(m=>m.date===todayStr);
  const tagLabels = {
    livraison:"📦 Livraison", facture:"💰 Facture", traitement_execute:"🍃 Traitement",
    panne:"🔧 Panne", rh_incident:"👷 RH/Incident", rapport_general:"📸 Rapport",
    ajor:"💵 Paie", purchase_order:"🛒 Commande", foliar_treatment:"🍃 Foliaire",
    general_task:"🚜 Tâche", fertigation_program:"💉 Fertigation",
  };
  const typeInfo = (m) => {
    if (m.media_type==="chef_report") return { label: tagLabels[m.tags] || m.tags || "📋 Rapport", searchTag: m.tags || "rapport" };
    if (m.media_type==="consultant_order") return { label: tagLabels[m.tags] || m.tags || "📋 Ordre", searchTag: m.tags || "ordre" };
    if (m.media_type==="fertigation_bundle") return { label: "💉 Fertigation", searchTag: "fertigation" };
    if (m.media_type==="audio") return { label: "🎤 Audio", searchTag: "audio" };
    if (m.media_type==="photo") return { label: "📸 Photo", searchTag: "photo" };
    return { label: m.media_type || "💬 Message", searchTag: m.media_type || "message" };
  };
  // Group: sender → { typeLabel → { count, msgs[], searchTag } }
  const senderSummary = {};
  todayMsgs.forEach(m => {
    const sender = m.sender || "Inconnu";
    if (!senderSummary[sender]) senderSummary[sender] = {};
    const ti = typeInfo(m);
    if (!senderSummary[sender][ti.label]) senderSummary[sender][ti.label] = { count:0, msgs:[], searchTag: ti.searchTag };
    senderSummary[sender][ti.label].count++;
    senderSummary[sender][ti.label].msgs.push(m);
  });
  const statusLabels = { pending:"En attente", processing:"En cours", done:"Traité", failed:"Erreur" };
  // Time range for today's messages (by actual timestamp, not string sort)
  const todayTimestamps = todayMsgs.map(m => m.created_at ? new Date(m.created_at).getTime() : 0).filter(t => t > 0).sort((a,b) => a - b);
  const fmtTime = (ts) => { try { return new Date(ts).toLocaleTimeString("fr",{hour:"2-digit",minute:"2-digit"}); } catch(e){ return ""; } };
  const timeRange = todayTimestamps.length > 0 ? `${fmtTime(todayTimestamps[0])} – ${fmtTime(todayTimestamps[todayTimestamps.length-1])}` : "";
  const linkStyle = { cursor:"pointer", color:C.citrus, textDecoration:"underline", textUnderlineOffset:2 };

return (
    <div>
      <div style={{ marginBottom:22 }}>
        <h1 style={{ fontFamily:"'Playfair Display',serif", color:C.soil, fontSize:28, margin:0, fontWeight:800 }}>🌿 {data.settings.farmName}</h1>
        <p style={{ color:C.muted, margin:"3px 0 0", fontSize:13 }}>{data.settings.location} · {today.toLocaleDateString(lang==="ar"?"ar-MA":lang==="en"?"en-GB":"fr-MA",{weekday:"long",year:"numeric",month:"long",day:"numeric"})}</p>
      </div>

{/* ── Alerts first ── */}
      <Card style={{ marginBottom:16 }}>
        <div style={{ display:"flex", alignItems:"center", marginBottom:12 }}>
          <h3 style={{ margin:0, color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14, flex:1 }}>{tx("alerts",lang)}</h3>
          <button onClick={() => {
            const ids = [
              ...data.pests.filter(p=>p.status==="Active").map(p=>"pest_"+p.id),
              ...data.tasks.filter(tk=>tk.priority==="High"&&tk.status!=="Done").map(tk=>"task_"+tk.id),
              ...(data.messages||[]).filter(m=>m.actionRequired&&!m.actionDone).map(m=>"msg_"+m.id),
              ...(data.chats||[]).filter(c=>c.isUrgent).map(c=>"chat_"+c.id),
              ...data.fertilizers.filter(f=>f.minStock>0&&f.stockQty<=f.minStock).map(f=>"fert_"+f.id),
            ];
            try { const prev = JSON.parse(localStorage.getItem("albaraka_dismissed_alerts")||"[]"); localStorage.setItem("albaraka_dismissed_alerts", JSON.stringify([...new Set([...prev, ...ids])])); } catch(e){}
            // Persist chat/message dismissals to Supabase
            ids.forEach(alertId => {
              const [type, id] = alertId.split("_", 2);
              if (type === "chat" && id) sb.update("chats", +id, { is_urgent: false }).catch(()=>{});
              if (type === "msg" && id) sb.update("messages", +id, { action_done: true }).catch(()=>{});
            });
            setDismissedVer(v => v+1);
          }} style={{
            background:"none", border:`1px solid ${C.muted}`, borderRadius:8,
            padding:"4px 10px", fontSize:10, color:C.muted, cursor:"pointer", fontWeight:600,
          }}>✕ Tout effacer</button>
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(240px,1fr))", gap:10 }}>
          {data.pests.filter(p=>p.status==="Active" && !dismissedAlerts.has("pest_"+p.id)).map(p=>(
            <div key={p.id} style={{ background:"#FDECEA", borderRadius:12, padding:"11px 14px", borderLeft:`4px solid ${C.danger}`, position:"relative" }}>
              <span onClick={()=>dismissAlert("pest_"+p.id)} style={{ position:"absolute", top:6, right:8, cursor:"pointer", color:C.muted, fontSize:14, lineHeight:1 }} title="Masquer">✕</span>
              <div style={{ fontWeight:700, fontSize:12, color:C.danger }}>🚨 Ravageur actif</div>
              <div style={{ fontSize:13, color:C.soil, marginTop:3 }}>{p.name}</div>
              <div style={{ fontSize:11, color:C.muted }}>{data.zones.find(z=>z.id===p.zone)?.name}</div>
            </div>
          ))}
          {data.tasks.filter(tk=>tk.priority==="High"&&tk.status!=="Done"&&!dismissedAlerts.has("task_"+tk.id)).map(tk=>(
            <div key={tk.id} style={{ background:"#FEF3E2", borderRadius:12, padding:"11px 14px", borderLeft:`4px solid ${C.warning}`, position:"relative" }}>
              <span onClick={()=>dismissAlert("task_"+tk.id)} style={{ position:"absolute", top:6, right:8, cursor:"pointer", color:C.muted, fontSize:14, lineHeight:1 }} title="Masquer">✕</span>
              <div style={{ fontWeight:700, fontSize:12, color:C.warning }}>⚠️ Tâche prioritaire</div>
              <div style={{ fontSize:13, color:C.soil, marginTop:3 }}>{tk.title}</div>
              <div style={{ fontSize:11, color:C.muted }}>{tk.due}</div>
            </div>
          ))}
          {(data.messages||[]).filter(m=>m.actionRequired&&!m.actionDone&&!dismissedAlerts.has("msg_"+m.id)).slice(0,3).map(m=>(
            <div key={m.id} style={{ background:"#EEF4FB", borderRadius:12, padding:"11px 14px", borderLeft:"4px solid #2980B9", position:"relative" }}>
              <span onClick={()=>dismissAlert("msg_"+m.id)} style={{ position:"absolute", top:6, right:8, cursor:"pointer", color:C.muted, fontSize:14, lineHeight:1 }} title="Masquer">✕</span>
              <div style={{ fontWeight:700, fontSize:12, color:"#2980B9" }}>{"💬 Action: " + m.sender}</div>
              <div style={{ fontSize:13, color:C.soil, marginTop:3 }}>{m.summary.slice(0,80)}{m.summary.length>80?"...":""}</div>
              <div style={{ fontSize:11, color:C.muted }}>{m.date}</div>
            </div>
          ))}
          {(data.chats||[]).filter(c=>c.isUrgent&&!dismissedAlerts.has("chat_"+c.id)).slice(0,5).map(c=>(
            <div key={c.id} style={{ background:"#FDE8E8", borderRadius:12, padding:"11px 14px", borderLeft:"4px solid #E74C3C", animation:"urgentFlash 1.2s ease-in-out infinite alternate", position:"relative" }}>
              <span onClick={()=>dismissAlert("chat_"+c.id)} style={{ position:"absolute", top:6, right:8, cursor:"pointer", color:C.muted, fontSize:14, lineHeight:1 }} title="Masquer">✕</span>
              <div style={{ fontWeight:700, fontSize:12, color:"#E74C3C" }}>🚨 URGENT — {c.sender}</div>
              <div style={{ fontSize:13, color:C.soil, marginTop:3 }}>{(c.audioTranscription||c.textContent||"").slice(0,120)}{(c.audioTranscription||c.textContent||"").length>120?"...":""}</div>
              <div style={{ fontSize:11, color:C.muted }}>{c.createdAt ? new Date(c.createdAt).toLocaleString("fr-FR") : ""}</div>
            </div>
          ))}
          {data.pests.filter(p=>p.status==="Active"&&!dismissedAlerts.has("pest_"+p.id)).length===0 && data.tasks.filter(tk=>tk.priority==="High"&&tk.status!=="Done"&&!dismissedAlerts.has("task_"+tk.id)).length===0 && (data.messages||[]).filter(m=>m.actionRequired&&!m.actionDone&&!dismissedAlerts.has("msg_"+m.id)).length===0 && (data.chats||[]).filter(c=>c.isUrgent&&!dismissedAlerts.has("chat_"+c.id)).length===0 && data.fertilizers.filter(f=>f.minStock>0&&f.stockQty<=f.minStock&&!dismissedAlerts.has("fert_"+f.id)).length===0 && <div style={{ color:C.success, fontSize:13, fontWeight:600 }}>✅ Aucune alerte critique</div>}
          {data.fertilizers.filter(f=>f.minStock>0&&f.stockQty<=f.minStock&&!dismissedAlerts.has("fert_"+f.id)).map(f=>(
            <div key={f.id} style={{ background:"#EEF5E4", borderRadius:12, padding:"11px 14px", borderLeft:`4px solid ${C.leaf}`, position:"relative" }}>
              <span onClick={()=>dismissAlert("fert_"+f.id)} style={{ position:"absolute", top:6, right:8, cursor:"pointer", color:C.muted, fontSize:14, lineHeight:1 }} title="Masquer">✕</span>
              <div style={{ fontWeight:700, fontSize:12, color:C.leaf }}>🌱 Stock faible</div>
              <div style={{ fontSize:13, color:C.soil, marginTop:3 }}>{f.name}</div>
              <div style={{ fontSize:11, color:C.muted }}>{f.stockQty} {f.unit} restants (min: {f.minStock})</div>
            </div>
          ))}
        </div>
      </Card>

{/* ── Pump operations ── */}
      <PumpOperationsPanel pumpLogs={data.pumpLogs} lang={lang} solarDaily={data.solarDaily} />

{/* ── Electricity consumption this month ── */}
      {(() => {
        const days = data.solarDaily || [];
        const now = new Date();
        const curMonth = now.getFullYear()+"-"+(""+(now.getMonth()+1)).padStart(2,"0");
        const mDays = days.filter(d=>d.date.startsWith(curMonth)).sort((a,b)=>a.date.localeCompare(b.date));
        if (mDays.length === 0) return null;
        const totalCost = mDays.reduce((s,d)=>s+(d.costMad||0),0);
        const totalSaved = mDays.reduce((s,d)=>s+(d.savedMad||0),0);
        const totalCons = mDays.reduce((s,d)=>s+(d.consumedKwh||0),0);
        const totalPv = mDays.reduce((s,d)=>s+(d.pvKwh||0),0);
        const daysInMonth = new Date(now.getFullYear(), now.getMonth()+1, 0).getDate();
        const forecast = mDays.length>0 ? (totalCost/mDays.length)*daysInMonth : 0;
        const maxCost = Math.max(...mDays.map(d=>d.costMad||0), 1);
        const monthLabel = now.toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{month:"long",year:"numeric"});
        return (
          <Card style={{ marginBottom:16 }}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:10}}>
              <h3 style={{margin:0,color:C.soil,fontFamily:"'Playfair Display',serif",fontSize:14}}>
                ⚡ {lang==="fr"?"Électricité":"Electricity"} — {monthLabel}
              </h3>
              <span onClick={()=>setView("consumption")} style={{fontSize:11,color:C.citrus,cursor:"pointer",fontWeight:700}}>
                {lang==="fr"?"Voir détails →":"View details →"}
              </span>
            </div>
            {/* Stats row */}
            <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8,marginBottom:14}}>
              <div style={{textAlign:"center",padding:"8px 4px",background:"#FEF3E2",borderRadius:10}}>
                <div style={{fontSize:18,fontWeight:800,color:C.danger}}>{totalCost.toFixed(0)}</div>
                <div style={{fontSize:10,color:C.bark,fontWeight:600}}>DH {lang==="fr"?"coût":"cost"}</div>
              </div>
              <div style={{textAlign:"center",padding:"8px 4px",background:"#E8F5E9",borderRadius:10}}>
                <div style={{fontSize:18,fontWeight:800,color:C.success}}>{totalSaved.toFixed(0)}</div>
                <div style={{fontSize:10,color:C.bark,fontWeight:600}}>DH {lang==="fr"?"éco.":"saved"}</div>
              </div>
              <div style={{textAlign:"center",padding:"8px 4px",background:"#FFF3E0",borderRadius:10}}>
                <div style={{fontSize:18,fontWeight:800,color:C.warning}}>{forecast.toFixed(0)}</div>
                <div style={{fontSize:10,color:C.bark,fontWeight:600}}>{lang==="fr"?"Prévision":"Forecast"}</div>
              </div>
              <div style={{textAlign:"center",padding:"8px 4px",background:"#EEF1E4",borderRadius:10}}>
                <div style={{fontSize:18,fontWeight:800,color:C.olive}}>{totalCons>0?(totalPv/totalCons*100).toFixed(0):"0"}%</div>
                <div style={{fontSize:10,color:C.bark,fontWeight:600}}>PV Solar</div>
              </div>
            </div>
            {/* Daily cost bars */}
            <div style={{display:"flex",flexDirection:"column",gap:2}}>
              {mDays.map(d=>{
                const dayNum = new Date(d.date+"T12:00:00").getDate();
                const barW = (d.costMad||0)/maxCost*100;
                const pvPct = d.consumedKwh>0 ? (d.pvKwh/d.consumedKwh*100) : 0;
                const isHigh = d.costMad > 600;
                return (
                  <div key={d.date} style={{display:"flex",alignItems:"center",gap:6,padding:"2px 0"}}>
                    <div style={{width:22,fontSize:10,fontWeight:700,color:C.bark,textAlign:"right",flexShrink:0}}>{dayNum}</div>
                    <div style={{flex:1,position:"relative",height:16,background:"#f5f0e8",borderRadius:4,overflow:"hidden"}}>
                      <div style={{position:"absolute",left:0,top:0,bottom:0,width:barW+"%",background:isHigh?"#E57373":"#FFCC80",borderRadius:4}}/>
                      <div style={{position:"absolute",left:0,top:0,bottom:0,width:(barW*pvPct/100)+"%",background:C.olive,borderRadius:"4px 0 0 4px",opacity:0.5}}/>
                    </div>
                    <div style={{width:50,fontSize:10,fontWeight:700,color:isHigh?C.danger:C.soil,textAlign:"right",flexShrink:0}}>
                      {(d.costMad||0).toFixed(0)} DH
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        );
      })()}

{/* ── Today's message activity summary ── */}
      <Card style={{ marginBottom:16 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:12 }}>
          <h3 style={{ margin:0, color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>
            📡 Activité du jour —{" "}
            <span onClick={() => goToMessages({})} style={{ ...linkStyle, fontSize:14 }}>
              {todayMsgs.length} message{todayMsgs.length!==1?"s":""}
            </span>
          </h3>
          {timeRange && <span style={{ fontSize:11, color:C.muted }}>🕐 {timeRange}</span>}
        </div>
        {todayMsgs.length === 0 ? (
          <div style={{ color:C.muted, fontSize:13, padding:"10px 0" }}>Aucun message aujourd'hui.</div>
        ) : (
          <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
            <thead>
              <tr style={{ background:"#F5F0E8" }}>
                <th style={{ textAlign:"left", padding:"8px 12px", color:C.soil, fontWeight:700, borderBottom:`2px solid ${C.citrus}` }}>Expéditeur</th>
                <th style={{ textAlign:"left", padding:"8px 12px", color:C.soil, fontWeight:700, borderBottom:`2px solid ${C.citrus}` }}>Type</th>
                <th style={{ textAlign:"center", padding:"8px 12px", color:C.soil, fontWeight:700, borderBottom:`2px solid ${C.citrus}` }}>Nb</th>
                <th style={{ textAlign:"center", padding:"8px 12px", color:C.soil, fontWeight:700, borderBottom:`2px solid ${C.citrus}` }}>Statut</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(senderSummary).map(([sender, types]) => {
                const typeEntries = Object.entries(types);
                // Find most recent message from this sender today for scroll-to
                const senderMsgs = todayMsgs.filter(m => m.sender===sender).sort((a,b) => (b.created_at||"").localeCompare(a.created_at||""));
                const lastMsgId = senderMsgs[0]?.id;
                return typeEntries.map(([tl, info], idx) => {
                  const { count, msgs: matchingMsgs, searchTag } = info;
                  const statuses = matchingMsgs.map(m => m.processed_status || "pending");
                  const statusCounts = {};
                  statuses.forEach(s => { statusCounts[s] = (statusCounts[s]||0)+1; });
                  // Most recent msg of this type for scroll target
                  const typeMostRecent = [...matchingMsgs].sort((a,b) => (b.created_at||"").localeCompare(a.created_at||""))[0];
                  return (
                    <tr key={sender+tl} style={{ borderBottom:"1px solid #F0EBE0" }}>
                      {idx===0 ? (
                        <td rowSpan={typeEntries.length} style={{ padding:"8px 12px", fontWeight:700, verticalAlign:"top", borderRight:"1px solid #F0EBE0" }}>
                          <span onClick={() => goToMessages({ sender, scrollToId: lastMsgId })} style={{ ...linkStyle, color:C.bark }}>
                            {sender}
                          </span>
                          <div style={{ fontSize:10, color:C.muted, fontWeight:400, marginTop:2 }}>
                            {typeEntries.reduce((s,te)=>s+te[1].count,0)} msg total
                          </div>
                        </td>
                      ) : null}
                      <td style={{ padding:"6px 12px" }}>
                        <span onClick={() => goToMessages({ sender, tag: searchTag, scrollToId: typeMostRecent?.id })}
                          style={{ ...linkStyle, color:C.soil }}>
                          {tl}
                        </span>
                      </td>
                      <td style={{ padding:"6px 12px", textAlign:"center", fontWeight:700, color:C.citrus }}>{count}</td>
                      <td style={{ padding:"6px 12px", textAlign:"center" }}>
                        {Object.entries(statusCounts).map(([st,ct]) => (
                          <span key={st} style={{ display:"inline-block", padding:"2px 8px", borderRadius:12, fontSize:10, fontWeight:600, marginRight:4, cursor:"pointer",
                            background: st==="done"?"#D1FAE5":st==="failed"?"#FEE2E2":st==="processing"?"#FEF3C7":"#F3F4F6",
                            color: st==="done"?"#065F46":st==="failed"?"#991B1B":st==="processing"?"#92400E":"#6B7280"
                          }} onClick={() => goToMessages({ sender, tag: searchTag, scrollToId: typeMostRecent?.id })}>
                            {statusLabels[st]||st} {ct>1?`×${ct}`:""}
                          </span>
                        ))}
                      </td>
                    </tr>
                  );
                });
              })}
            </tbody>
          </table>
        )}
      </Card>

<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:16 }}>
        <div style={{ display:"grid", gap:14 }}>
          <Card>
            <h3 style={{ margin:"0 0 10px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>{tx("tasksByStatus",lang)}</h3>
            {tasksByStatus.map(({s,count})=>(
              <div key={s} style={{ marginBottom:9 }}>
                <div style={{ display:"flex", justifyContent:"space-between", marginBottom:3 }}><Badge label={s} /><span style={{ fontWeight:700, fontSize:13, color:C.soil }}>{count}</span></div>
                <div style={{ background:"#F0EBE0", borderRadius:4, height:5 }}>
                  <div style={{ width:`${data.tasks.length?((count/data.tasks.length)*100):0}%`, height:5, borderRadius:4, background:s==="Done"?C.success:s==="In Progress"?C.info:C.muted }} />
                </div>
              </div>
            ))}
          </Card>
          <Card>
            <h3 style={{ margin:"0 0 10px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>{tx("expByCategory",lang)}</h3>
            {Object.entries(expByCat).map(([cat,amt])=>(
              <div key={cat} style={{ display:"flex", justifyContent:"space-between", padding:"5px 0", borderBottom:"1px solid #F0EBE0", fontSize:12 }}>
                <span style={{ color:C.bark }}>{cat}</span>
                <span style={{ fontWeight:700, color:C.soil }}>{amt.toLocaleString()} MAD</span>
              </div>
            ))}
          </Card>
        </div>
        <FertigationLivePanel zones={data.zones||[]} messages={data.messages||[]} todayFertigMsgs={data.todayFertigMsgs||[]} />
      </div>

<StockProjectionPanel messages={data.messages||[]} fertilizers={data.fertilizers||[]} lang={lang} />
    </div>
  );
}

// ── About (farm info) ────────────────────────────────────────────────────────
function AboutView({ data, lang }) {
  const totalHa = data.settings.citrusHa + data.settings.oliveHa;
  const totalTrees = data.zones.reduce((s,z)=>s+z.trees,0);
  const totalHarvest = data.harvests.reduce((s,h)=>s+h.qty,0);
  const totalExp = data.expenses.reduce((s,e)=>s+e.amount,0);
  const pending = data.tasks.filter(tk=>tk.status!=="Done").length;
  const activePests = data.pests.filter(p=>p.status==="Active").length;
  const totalOil = data.oliveoil.reduce((s,b)=>s+b.oilOut,0);
  return (
    <div>
      <SectionTitle>ℹ️ {tx("about",lang)}</SectionTitle>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))", gap:12, marginTop:16 }}>
        <Stat label={tx("totalArea",lang)} value={`${totalHa} ha`} color={C.olive} />
        <Stat label={tx("trees",lang)} value={totalTrees.toLocaleString()} color={C.leaf} />
        <Stat label={tx("totalHarvest",lang)} value={`${(totalHarvest/1000).toFixed(1)}t`} color={C.citrus} />
        <Stat label="Huile d'olive" value={`${totalOil} L`} color={C.gold} />
        <Stat label={tx("pendingTasks",lang)} value={pending} color={pending>3?C.danger:C.success} />
        <Stat label={tx("activePests",lang)} value={activePests} color={activePests>0?C.danger:C.success} />
        <Stat label="Dépenses" value={`${(totalExp/1000).toFixed(0)}k MAD`} color={C.bark} />
      </div>
      <Card style={{ marginTop:20 }}>
        <h3 style={{ margin:"0 0 12px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>Blocs & Parcelles</h3>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(200px,1fr))", gap:10 }}>
          {data.zones.map(z => (
            <div key={z.id} style={{ background:"#F9F6F0", borderRadius:10, padding:"10px 14px", border:"1px solid #E8DFD0" }}>
              <div style={{ fontWeight:700, fontSize:13, color:C.soil }}>{z.name}</div>
              <div style={{ fontSize:11, color:C.muted, marginTop:3 }}>{z.crop} · {z.variety} · {z.ha} ha · {z.trees} arbres</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ── Tasks ─────────────────────────────────────────────────────────────────────
function TasksView({ data, db, lang }) {
  const [modal, setModal] = useState(null);
  const [form, setForm] = useState({});
  const [filter, setFilter] = useState("");
  const rtl = lang==="ar";
  const zOpts = data.zones.map(z=>({ v:z.id, l:z.name }));
  const wOpts = data.workers.map(w=>({ v:w.id, l:w.name }));
  const openAdd = ()=>{ setForm({ title:"",zone:"",assignee:"",due:"",status:"Pending",priority:"Medium",season:"Spring" }); setModal("add"); };
  const openEdit = tk=>{ setForm({...tk}); setModal("edit"); };
  const save = ()=>{ modal==="add"?db.addTask(form):db.updateTask(form); setModal(null); };
  const cycleStatus = tk=>{ const c=["Pending","In Progress","Done"]; db.updateTask({...tk,status:c[(c.indexOf(tk.status)+1)%3]}); };
  const filtered = data.tasks.filter(tk=>!filter||tk.status===filter||tk.priority===filter);
  return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>📋 {tx("tasks",lang)}</SectionTitle>
        <Btn onClick={openAdd}>+ {tx("newTask",lang)}</Btn>
      </div>
      <div style={{ display:"flex", gap:7, marginBottom:14, flexWrap:"wrap" }}>
        {["","Pending","In Progress","Done","High","Medium"].map(f=>(
          <button key={f} onClick={()=>setFilter(f)} style={{ padding:"4px 13px", borderRadius:20, fontSize:11, fontWeight:600, border:`2px solid ${filter===f?C.citrus:"#DDD6C8"}`, background:filter===f?C.citrus:"transparent", color:filter===f?"#fff":C.muted, cursor:"pointer" }}>{f||tx("all",lang)}</button>
        ))}
      </div>
      <div style={{ display:"grid", gap:10 }}>
        {filtered.map(tk=>{
          const zone=data.zones.find(z=>z.id===tk.zone); const worker=data.workers.find(w=>w.id===tk.assignee);
          return (
            <Card key={tk.id} style={{ padding:"14px 18px" }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:10 }}>
                <div style={{ flex:1 }}>
                  <div style={{ display:"flex", gap:7, alignItems:"center", flexWrap:"wrap", marginBottom:5 }}>
                    <span style={{ fontWeight:700, fontSize:14, color:C.soil }}>{tk.title}</span>
                    <Badge label={tk.priority}/><Badge label={tk.status}/>
                  </div>
                  <div style={{ fontSize:11, color:C.muted, display:"flex", gap:14, flexWrap:"wrap" }}>
                    <span>📍 {zone?.name||"—"}</span><span>👷 {worker?.name||"—"}</span>
                    <span>📅 {tk.due}</span><span>🌿 {tk.season}</span>
                  </div>
                </div>
                <div style={{ display:"flex", gap:5 }}>
                  <Btn small onClick={()=>cycleStatus(tk)} color={C.olive}>→</Btn>
                  <Btn small outline onClick={()=>openEdit(tk)} color={C.bark}>✏</Btn>
                  <Btn small outline onClick={()=>db.deleteTask(tk.id)} color={C.danger}>✕</Btn>
                </div>
              </div>
            </Card>
          );
        })}
        {filtered.length===0 && <p style={{ color:C.muted, textAlign:"center", padding:28 }}>—</p>}
      </div>
      {modal && (
        <Modal title={modal==="add"?tx("newTask",lang):tx("edit",lang)} onClose={()=>setModal(null)} rtl={rtl}>
          <FInput label={tx("title",lang)} value={form.title} onChange={v=>setForm(f=>({...f,title:v}))} rtl={rtl}/>
          <FInput label={tx("zone",lang)} value={form.zone} onChange={v=>setForm(f=>({...f,zone:v}))} options={zOpts} rtl={rtl}/>
          <FInput label={tx("assignee",lang)} value={form.assignee} onChange={v=>setForm(f=>({...f,assignee:v}))} options={wOpts} rtl={rtl}/>
          <FInput label={tx("due",lang)} value={form.due} onChange={v=>setForm(f=>({...f,due:v}))} type="date" rtl={rtl}/>
          <FInput label={tx("status",lang)} value={form.status} onChange={v=>setForm(f=>({...f,status:v}))} options={["Pending","In Progress","Done"]} rtl={rtl}/>
          <FInput label={tx("priority",lang)} value={form.priority} onChange={v=>setForm(f=>({...f,priority:v}))} options={["High","Medium","Low"]} rtl={rtl}/>
          <FInput label={tx("season",lang)} value={form.season} onChange={v=>setForm(f=>({...f,season:v}))} options={["Spring","Summer","Autumn","Winter"]} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Irrigation ────────────────────────────────────────────────────────────────
function IrrigationView({ data, db, lang }) {
  const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const rtl = lang==="ar";
  const totalWater = data.irrigation.reduce((s,i)=>s+i.duration*i.flow,0);
  const zOpts = data.zones.map(z=>({ v:z.id, l:z.name }));
  const save = ()=>{ db.addIrrigation(form); setModal(false); };
  return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>💧 {tx("irrigation",lang)}</SectionTitle>
        <Btn onClick={()=>{ setForm({zone:"",date:"",duration:"",flow:"",notes:""}); setModal(true); }} color={C.info}>+ {tx("newSession",lang)}</Btn>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))", gap:12, marginBottom:20 }}>
        <Stat label={tx("totalWater",lang)} value={`${totalWater.toFixed(0)} m³`} color={C.info}/>
        <Stat label={tx("sessions",lang)} value={data.irrigation.length} color={C.olive}/>
        <Stat label="Zones" value={[...new Set(data.irrigation.map(i=>i.zone))].length} color={C.citrus}/>
      </div>
      <div style={{ display:"grid", gap:10 }}>
        {data.irrigation.map(i=>{
          const zone=data.zones.find(z=>z.id===i.zone);
          return (
            <Card key={i.id} style={{ padding:"13px 18px" }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                <div>
                  <div style={{ fontWeight:700, fontSize:13, color:C.soil }}>{zone?.name||i.zone}</div>
                  <div style={{ fontSize:11, color:C.muted, marginTop:3, display:"flex", gap:14, flexWrap:"wrap" }}>
                    <span>📅 {i.date}</span><span>⏱ {i.duration}h</span>
                    <span>🌊 {i.flow} m³/h</span>
                    <span style={{ fontWeight:700, color:C.info }}>= {(i.duration*i.flow).toFixed(1)} m³</span>
                  </div>
                  {i.notes && <div style={{ fontSize:11, color:C.warning, marginTop:3 }}>⚠ {i.notes}</div>}
                </div>
                <Btn small outline onClick={()=>db.deleteIrrigation(i.id)} color={C.danger}>✕</Btn>
              </div>
            </Card>
          );
        })}
      </div>
      {modal && (
        <Modal title={tx("newSession",lang)} onClose={()=>setModal(false)} rtl={rtl}>
          <FInput label={tx("zone",lang)} value={form.zone} onChange={v=>setForm(f=>({...f,zone:v}))} options={zOpts} rtl={rtl}/>
          <FInput label={tx("date",lang)} value={form.date} onChange={v=>setForm(f=>({...f,date:v}))} type="date" rtl={rtl}/>
          <FInput label={tx("duration",lang)} value={form.duration} onChange={v=>setForm(f=>({...f,duration:v}))} type="number" rtl={rtl}/>
          <FInput label={tx("flow",lang)} value={form.flow} onChange={v=>setForm(f=>({...f,flow:v}))} type="number" rtl={rtl}/>
          <FInput label={tx("notes",lang)} value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.info}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Harvest ───────────────────────────────────────────────────────────────────
function HarvestView({ data, db, lang }) {
  var [view, setView]               = useState("list");
  var [selectedZone, setZone]       = useState(null);
  var [importing, setImporting]     = useState(false);
  var [preview, setPreview]         = useState(null);
  var [editingRow, setEditingRow]   = useState(null);
  var [importError, setImportError] = useState("");
  var [manualForm, setManualForm]   = useState({zone:"b9",date:"",crop:"Orange",boxes:"",avgKg:25.08,notes:""});
  var [editHarvest, setEditHarvest] = useState(null);
  var fileRef = useRef();
  var rtl = lang === "ar";
  var geminiKey = (data.settings && data.settings.geminiKey) || "";

var harvests = data.harvests || [];
  var zones    = data.zones    || [];

// ── Grouping helpers ────────────────────────────────────────
  // Hierarchy: Year → Variety (crop) → Zone → entries
  // For list view: Year → Variety → [zone cards]
  // For zone detail: Year → [entries with edit/delete]

// All unique years in harvests, sorted desc
  var allYears = [];
  harvests.forEach(function(h) {
    var y = getYear(h);
    if (allYears.indexOf(y) === -1) allYears.push(y);
  });
  allYears.sort().reverse();

var totalKg    = harvests.reduce(function(s,h){ return s+(h.qty||0); },0);
  var totalBoxes = harvests.reduce(function(s,h){ return s+(h.boxes||0); },0);

// ── Gemini image extraction ─────────────────────────────────
  function processImage(file) {
    if (!geminiKey) { alert("Ajoutez votre clé Gemini dans Paramètres."); return; }
    setImporting(true); setImportError(""); setPreview(null);
    var fr = new FileReader();
    fr.onload = function(e) {
      var b64  = e.target.result.split(",")[1];
      var mime = file.type || "image/jpeg";
      var prompt = "This is a handwritten harvest notebook page from a Moroccan citrus farm. "
        + "At the top find the BLOC NUMBER (e.g. 'بلوك 9' = Bloc 9). Map to zone id: b3=Bloc3, b4=Bloc4, b5=Bloc5, b6=Bloc6, b7=Bloc7, b8=Bloc8, b9=Bloc9, b10=Bloc10, b11=Bloc11, b12=Bloc12. "
        + "Also infer the crop/variety if mentioned (default: Orange). "
        + "Each row has: DATE (DD/MM/YYYY, year 2026) and CRATES count (صندوق). "
        + "Pickup rows (بيكوب X طون): convert tonnes to crates dividing by 0.02508. "
        + "Sum all rows for the same date into ONE entry. "
        + "Return ONLY this JSON, no markdown: "
        + "{\"zone_id\":\"b9\",\"zone_label\":\"Bloc 9\",\"crop\":\"Orange\",\"avg_kg_per_box\":25.08,"
        + "\"entries\":[{\"date\":\"2026-02-13\",\"boxes\":1160,\"notes\":\"2x580\"}]}";
      fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key="+geminiKey, {
        method:"POST", headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          contents:[{parts:[{text:prompt},{inline_data:{mime_type:mime,data:b64}}]}],
          generationConfig:{temperature:0,maxOutputTokens:2048}
        })
      })
      .then(function(r){ return r.json(); })
      .then(function(d) {
        var txt = "";
        try { txt = d.candidates[0].content.parts[0].text; } catch(e2) {}
        txt = txt.replace(/```json[\n]?/g,"").replace(/```[\n]?/g,"").trim();
        var parsed = JSON.parse(txt);
        var avgKg = parsed.avg_kg_per_box || 25.08;
        parsed.entries = (parsed.entries||[]).map(function(row) {
          return { zone:parsed.zone_id, date:row.date, boxes:row.boxes, avgKg:avgKg,
            qty: Math.round(row.boxes*avgKg*100)/100,
            crop:parsed.crop||"Orange", unit:"kg", quality:"A", notes:row.notes||"" };
        });
        setPreview(parsed); setImporting(false); setView("import");
      })
      .catch(function(err){ setImportError("Erreur: "+err.message); setImporting(false); });
    };
    fr.readAsDataURL(file);
  }

function confirmImport() {
    (preview.entries||[]).forEach(function(row){ db.addHarvest(row); });
    setPreview(null); setView("list");
  }

// ── Shared edit modal ───────────────────────────────────────
  function EditModal() {
    if (!editHarvest) return null;
    var qty = Math.round((parseFloat(editHarvest.boxes)||0)*(parseFloat(editHarvest.avgKg)||25.08)*100)/100;
    return (
      <Modal title="Modifier l'entrée" onClose={function(){ setEditHarvest(null); }} rtl={rtl}>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"0 16px"}}>
          <FInput label="Date" value={editHarvest.date} type="date"
            onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{date:v}); });}}/>
          <FInput label="Bloc" value={editHarvest.zone} options={zones.map(function(z){ return z.id; })}
            onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{zone:v}); });}}/>
          <FInput label="Caisses" value={editHarvest.boxes||""} type="number"
            onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{boxes:parseFloat(v)||0}); });}}/>
          <FInput label="kg/caisse" value={editHarvest.avgKg||25.08} type="number"
            onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{avgKg:parseFloat(v)||25.08}); });}}/>
          <FInput label="Variété" value={editHarvest.crop||"Orange"}
            onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{crop:v}); });}}/>
        </div>
        <FInput label="Notes" value={editHarvest.notes||""}
          onChange={function(v){ setEditHarvest(function(h){ return Object.assign({},h,{notes:v}); });}}/>
        <div style={{background:"#EEF5E4",borderRadius:8,padding:"8px 14px",marginBottom:8,fontSize:13,fontFamily:"sans-serif"}}>
          Total: <strong>{(qty/1000).toFixed(3)} t</strong>
          {" ("+(editHarvest.boxes||0)+" × "+(editHarvest.avgKg||25.08)+" kg)"}
        </div>
        <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
          <Btn outline color={C.danger} onClick={function(){ db.deleteHarvest(editHarvest.id); setEditHarvest(null); }}>🗑 Supprimer</Btn>
          <Btn outline color={C.muted} onClick={function(){ setEditHarvest(null); }}>Annuler</Btn>
          <Btn color={C.citrus} onClick={saveEditHarvest}>💾 Enregistrer</Btn>
        </div>
      </Modal>
    );
  }

// ── HarvestRow — used in both zone detail and import preview ─
  function HarvestRow({ h, idx, isPreview }) {
    var isEditing = editingRow === idx && isPreview;
    if (isPreview && isEditing) {
      return (
        <div style={{padding:"10px 12px",borderRadius:10,background:"#FEF9EE",
          border:"1px solid "+C.citrus+"88",marginBottom:6}}>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:"0 10px"}}>
            <FInput label="Date" value={h.date} type="date" onChange={function(v){ updatePreviewRow(idx,"date",v); }}/>
            <FInput label="Caisses" value={h.boxes} type="number" onChange={function(v){ updatePreviewRow(idx,"boxes",v); }}/>
            <FInput label="kg/caisse" value={h.avgKg} type="number" onChange={function(v){ updatePreviewRow(idx,"avgKg",v); }}/>
          </div>
          <FInput label="Notes" value={h.notes} onChange={function(v){ updatePreviewRow(idx,"notes",v); }}/>
          <div style={{display:"flex",justifyContent:"flex-end",marginTop:4}}>
            <Btn small color={C.citrus} onClick={function(){ setEditingRow(null); }}>OK</Btn>
          </div>
        </div>
      );
    }
    return (
      <div style={{display:"grid",gridTemplateColumns:"140px 70px 70px 1fr auto",gap:6,
        alignItems:"center",padding:"9px 14px",
        background:idx%2===0?"#FAF7F2":"#fff",
        borderBottom:"1px solid #F0EBE0"}}>
        <div style={{background:C.citrus,color:"#fff",borderRadius:20,
          padding:"3px 10px",fontWeight:800,fontSize:12,fontFamily:"sans-serif",textAlign:"center"}}>
          {"📅 "+h.date}
        </div>
        <div style={{fontWeight:800,fontSize:14,color:C.soil,fontFamily:"sans-serif",textAlign:"right"}}>
          {(h.boxes||0).toLocaleString()}
        </div>
        <div style={{fontWeight:700,fontSize:12,color:C.citrus,fontFamily:"sans-serif",textAlign:"right"}}>
          {((h.qty||0)/1000).toFixed(2)+"t"}
        </div>
        <span style={{fontSize:11,color:C.muted,fontStyle:"italic",fontFamily:"sans-serif",
          overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{h.notes||""}</span>
        <div style={{display:"flex",gap:4,flexShrink:0}}>
          {isPreview ? (
            <>
              <button onClick={function(){ setEditingRow(idx); }}
                style={{background:"none",border:"1px solid #DDD",borderRadius:6,padding:"3px 7px",cursor:"pointer",fontSize:11}}>✏️</button>
              <button onClick={function(){ removePreviewRow(idx); }}
                style={{background:"none",border:"1px solid #FCA5A5",borderRadius:6,padding:"3px 7px",cursor:"pointer",fontSize:11,color:C.danger}}>✕</button>
            </>
          ) : (
            <>
              <button onClick={function(){ setEditHarvest(Object.assign({},h)); }}
                style={{background:"none",border:"1px solid #DDD",borderRadius:6,padding:"3px 7px",cursor:"pointer",fontSize:11}}>✏️</button>
              <button onClick={function(){ if(window.confirm("Supprimer cette entrée ?")) db.deleteHarvest(h.id); }}
                style={{background:"none",border:"1px solid #FCA5A5",borderRadius:6,padding:"3px 7px",cursor:"pointer",fontSize:11,color:C.danger}}>✕</button>
            </>
          )}
        </div>
      </div>
    );
  }

// ── Zone detail: Year → entries ─────────────────────────────
  function ZoneDetail() {
    var zid      = selectedZone;
    var zHarvests = (harvests.filter(function(h){ return h.zone===zid; })).slice().sort(function(a,b){ return a.date<b.date?-1:1; });
    var zone      = zones.find(function(z){ return z.id===zid; });
    var zKg       = zHarvests.reduce(function(s,h){ return s+(h.qty||0); },0);
    var zBoxes    = zHarvests.reduce(function(s,h){ return s+(h.boxes||0); },0);

// Group by year
    var byYear = {};
    zHarvests.forEach(function(h){
      var y = getYear(h);
      if (!byYear[y]) byYear[y] = [];
      byYear[y].push(h);
    });
    var years = Object.keys(byYear).sort().reverse();

return (
      <div>
        <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:16}}>
          <button onClick={function(){ setView("list"); setZone(null); }}
            style={{background:"none",border:"none",color:C.bark,fontSize:22,cursor:"pointer",padding:"0 4px"}}>{"‹"}</button>
          <div style={{flex:1}}>
            <div style={{fontWeight:700,fontSize:17,color:C.soil,fontFamily:"sans-serif"}}>{"🍊 "+(zone?zone.name:zid)}</div>
            <div style={{fontSize:12,color:C.muted,fontFamily:"sans-serif"}}>{zHarvests.length+" entrées · "+years.length+" saison"+(years.length>1?"s":"")}</div>
          </div>
          <Btn small color={C.olive} onClick={function(){
            setManualForm({zone:zid,date:"",crop:"Orange",boxes:"",avgKg:25.08,notes:""});
            setView("manual");
          }}>+ Manuel</Btn>
        </div>

{/* Zone totals */}
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:8,marginBottom:16}}>
          <Stat label="Total" value={(zKg/1000).toFixed(1)+"t"} color={C.citrus}/>
          <Stat label="Caisses" value={zBoxes.toLocaleString()} color={C.citrus}/>
          <Stat label="Jours" value={zHarvests.length} color={C.bark}/>
          <Stat label="Saisons" value={years.length} color={C.bark}/>
        </div>

{/* Year sections */}
        {years.map(function(year){
          var yh = byYear[year];
          var yKg    = yh.reduce(function(s,h){ return s+(h.qty||0); },0);
          var yBoxes = yh.reduce(function(s,h){ return s+(h.boxes||0); },0);
          return (
            <div key={year} style={{marginBottom:16}}>
              {/* Year header */}
              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}>
                <div style={{background:C.soil,color:"#fff",borderRadius:10,
                  padding:"4px 14px",fontSize:14,fontWeight:800,fontFamily:"sans-serif"}}>
                  {year}
                </div>
                <div style={{flex:1,height:1,background:"#EDE8DF"}}/>
                <div style={{display:"flex",gap:12,fontSize:12,fontFamily:"sans-serif"}}>
                  <span style={{fontWeight:700,color:C.citrus}}>{(yKg/1000).toFixed(1)+"t"}</span>
                  <span style={{color:C.muted}}>{yBoxes.toLocaleString()+" caisses"}</span>
                  <span style={{color:C.muted}}>{yh.length+" jours"}</span>
                </div>
              </div>
              <Card style={{padding:0,overflow:"hidden"}}>
                <div style={{display:"grid",gridTemplateColumns:"140px 70px 70px 1fr auto",gap:6,
                  padding:"7px 14px",borderBottom:"2px solid #EDE8DF",background:"#F8F5EF"}}>
                  {["Date","Caisses","Poids","Notes",""].map(function(h,i){
                    return <span key={i} style={{fontSize:10,fontWeight:700,color:C.muted,textTransform:"uppercase",fontFamily:"sans-serif"}}>{h}</span>;
                  })}
                </div>
                {yh.map(function(h,i){
                  return <HarvestRow key={h.id} h={h} idx={i} isPreview={false}/>;
                })}
              </Card>
            </div>
          );
        })}
        {zHarvests.length===0 && <div style={{padding:32,textAlign:"center",color:C.muted,fontFamily:"sans-serif"}}>Aucune donnée.</div>}
        <EditModal/>
      </div>
    );
  }

// ── Import preview — editable ───────────────────────────────
  function ImportPreview() {
    if (!preview) return null;
    var entries = preview.entries || [];
    var totalB = entries.reduce(function(s,r){ return s+(r.boxes||0); },0);
    var totalK = entries.reduce(function(s,r){ return s+(r.qty||0); },0);
    return (
      <div>
        <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:16}}>
          <button onClick={function(){ setView("list"); setPreview(null); }}
            style={{background:"none",border:"none",color:C.bark,fontSize:22,cursor:"pointer",padding:"0 4px"}}>{"‹"}</button>
          <div style={{flex:1}}>
            <div style={{fontWeight:700,fontSize:17,color:C.soil,fontFamily:"sans-serif"}}>
              {"Vérifier — "+preview.zone_label}
            </div>
            <div style={{fontSize:12,color:C.muted,fontFamily:"sans-serif"}}>
              {entries.length+" entrées · corrigez si besoin puis confirmez"}
            </div>
          </div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10,marginBottom:16}}>
          <Stat label="Bloc" value={preview.zone_label} color={C.olive}/>
          <Stat label="Total caisses" value={totalB.toLocaleString()} color={C.citrus}/>
          <Stat label="Total poids" value={(totalK/1000).toFixed(1)+"t"} color={C.citrus}/>
        </div>
        <Card style={{padding:0,marginBottom:14,overflow:"hidden"}}>
          <div style={{display:"grid",gridTemplateColumns:"140px 70px 70px 1fr auto",gap:6,
            padding:"7px 14px",borderBottom:"2px solid #EDE8DF",background:"#F8F5EF"}}>
            {["Date","Caisses","Poids","Notes",""].map(function(h,i){
              return <span key={i} style={{fontSize:10,fontWeight:700,color:C.muted,textTransform:"uppercase",fontFamily:"sans-serif"}}>{h}</span>;
            })}
          </div>
          {entries.map(function(row,i){
            return <HarvestRow key={i} h={row} idx={i} isPreview={true}/>;
          })}
          <button onClick={addPreviewRow}
            style={{width:"100%",padding:"9px",border:"none",borderTop:"2px dashed #DDD",
              background:"#FAFAFA",cursor:"pointer",color:C.muted,fontSize:13,fontFamily:"sans-serif"}}>
            + Ajouter une ligne
          </button>
        </Card>
        <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
          <Btn outline color={C.muted} onClick={function(){ setPreview(null); setView("list"); }}>Annuler</Btn>
          <Btn color={C.citrus} onClick={confirmImport}>{"Confirmer ("+entries.length+" entrées)"}</Btn>
        </div>
      </div>
    );
  }

// ── Manual entry ────────────────────────────────────────────
  function ManualEntry() {
    var qty = Math.round((parseFloat(manualForm.boxes)||0)*(parseFloat(manualForm.avgKg)||25.08)*100)/100;
    function save() {
      if (!manualForm.date||!manualForm.boxes) { alert("Date et caisses obligatoires."); return; }
      db.addHarvest({zone:manualForm.zone,date:manualForm.date,boxes:parseFloat(manualForm.boxes)||0,
        avgKg:parseFloat(manualForm.avgKg)||25.08,qty:qty,crop:manualForm.crop||"Orange",unit:"kg",quality:"A",notes:manualForm.notes||""});
      var z = manualForm.zone;
      setManualForm({zone:z,date:"",crop:"Orange",boxes:"",avgKg:25.08,notes:""});
      setZone(z); setView("zone");
    }
    return (
      <div>
        <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:20}}>
          <button onClick={function(){ setView(selectedZone?"zone":"list"); }}
            style={{background:"none",border:"none",color:C.bark,fontSize:22,cursor:"pointer",padding:"0 4px"}}>{"‹"}</button>
          <SectionTitle>{"Entrée manuelle"}</SectionTitle>
        </div>
        <Card style={{padding:"20px 24px"}}>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"0 20px"}}>
            <FInput label="Bloc" value={manualForm.zone} options={zones.map(function(z){ return z.id; })}
              onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{zone:v}); });}} rtl={rtl}/>
            <FInput label="Date" value={manualForm.date} type="date"
              onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{date:v}); });}} rtl={rtl}/>
            <FInput label="Variété" value={manualForm.crop||"Orange"}
              onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{crop:v}); });}} rtl={rtl}/>
            <FInput label="kg/caisse" value={manualForm.avgKg} type="number"
              onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{avgKg:v}); });}} rtl={rtl}/>
            <FInput label="Nombre de caisses" value={manualForm.boxes} type="number"
              onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{boxes:v}); });}} rtl={rtl}/>
          </div>
          <FInput label="Notes" value={manualForm.notes}
            onChange={function(v){ setManualForm(function(f){ return Object.assign({},f,{notes:v}); });}} rtl={rtl}/>
          {manualForm.boxes && (
            <div style={{background:"#EEF5E4",borderRadius:10,padding:"10px 16px",margin:"10px 0 4px",
              fontSize:14,fontFamily:"sans-serif",color:C.olive}}>
              {"Total calculé: "}<strong>{(qty/1000).toFixed(3)+" t"}</strong>
              {" ("+(manualForm.boxes)+" × "+(manualForm.avgKg||25.08)+" kg)"}
            </div>
          )}
          <div style={{display:"flex",gap:10,justifyContent:"flex-end",marginTop:12}}>
            <Btn outline color={C.muted} onClick={function(){ setView(selectedZone?"zone":"list"); }}>Annuler</Btn>
            <Btn color={C.citrus} onClick={save}>{"💾 Enregistrer"}</Btn>
          </div>
        </Card>
      </div>
    );
  }

// ── List view: Year → Variety → Zone cards ──────────────────
  function ListView() {
    return (
      <div>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:18}}>
          <SectionTitle>{"🍊 Récoltes"}</SectionTitle>
          <Btn outline color={C.bark} small onClick={function(){
            setManualForm({zone:"b9",date:"",crop:"Orange",boxes:"",avgKg:25.08,notes:""});
            setView("manual");
          }}>{"+ Manuel"}</Btn>
        </div>

{/* Photo import CTA */}
        <div onClick={function(){ if(!importing) fileRef.current.click(); }}
          style={{background:"linear-gradient(135deg,"+C.citrus+",#E8A020)",borderRadius:16,
            padding:"18px 22px",marginBottom:20,cursor:importing?"default":"pointer",
            display:"flex",alignItems:"center",gap:16,
            boxShadow:"0 4px 16px rgba(217,119,6,0.25)",opacity:importing?0.8:1}}>
          <div style={{fontSize:40}}>{importing?"⏳":"📷"}</div>
          <div style={{flex:1}}>
            <div style={{color:"#fff",fontWeight:800,fontSize:15,fontFamily:"sans-serif",marginBottom:3}}>
              {importing?"Analyse en cours...":"Importer un carnet de récolte"}
            </div>
            <div style={{color:"rgba(255,255,255,0.85)",fontSize:12,fontFamily:"sans-serif"}}>
              {importing?"Gemini lit la page — quelques secondes...":"Photo du carnet → Gemini extrait bloc, dates, quantités automatiquement"}
            </div>
          </div>
        </div>
        <input type="file" ref={fileRef} accept="image/*" style={{display:"none"}}
          onChange={function(e){ if(e.target.files[0]) processImage(e.target.files[0]); e.target.value=""; }}/>

{importError && (
          <div style={{background:"#FEE2E2",border:"1px solid #FCA5A5",borderRadius:10,
            padding:"10px 14px",marginBottom:14,fontSize:13,color:"#DC2626",fontFamily:"sans-serif"}}>
            {"⚠️ "+importError}
          </div>
        )}

{/* Farm totals */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(110px,1fr))",gap:10,marginBottom:20}}>
          <Stat label="Total ferme" value={(totalKg/1000).toFixed(1)+"t"} color={C.citrus}/>
          <Stat label="Caisses" value={totalBoxes.toLocaleString()} color={C.citrus}/>
          <Stat label="Saisons" value={allYears.length} color={C.olive}/>
          <Stat label="Sessions" value={harvests.length} color={C.bark}/>
        </div>

{harvests.length===0 && (
          <div style={{textAlign:"center",padding:40,color:C.muted,fontFamily:"sans-serif"}}>
            <div style={{fontSize:40,marginBottom:12}}>📒</div>
            <div style={{fontSize:15,marginBottom:4}}>Aucune donnée de récolte.</div>
            <div style={{fontSize:13}}>Photographiez une page du carnet ou utilisez + Manuel.</div>
          </div>
        )}

{/* Year → Variety → Zone cards */}
        {allYears.map(function(year){
          var yh = harvests.filter(function(h){ return getYear(h)===year; });
          var yKg    = yh.reduce(function(s,h){ return s+(h.qty||0); },0);
          var yBoxes = yh.reduce(function(s,h){ return s+(h.boxes||0); },0);

// Group by variety within year
          var byVariety = {};
          yh.forEach(function(h){
            var v = getCrop(h);
            if (!byVariety[v]) byVariety[v] = [];
            byVariety[v].push(h);
          });
          var varieties = Object.keys(byVariety).sort();

return (
            <div key={year} style={{marginBottom:24}}>
              {/* Year header */}
              <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:12}}>
                <div style={{background:C.soil,color:"#fff",borderRadius:12,
                  padding:"5px 18px",fontSize:16,fontWeight:800,fontFamily:"sans-serif"}}>
                  {year}
                </div>
                <div style={{flex:1,height:2,background:"#EDE8DF"}}/>
                <div style={{display:"flex",gap:16,fontSize:13,fontFamily:"sans-serif"}}>
                  <span style={{fontWeight:800,color:C.citrus}}>{(yKg/1000).toFixed(1)+"t"}</span>
                  <span style={{color:C.muted}}>{yBoxes.toLocaleString()+" caisses"}</span>
                </div>
              </div>

{varieties.map(function(variety){
                var vh = byVariety[variety];
                var vKg    = vh.reduce(function(s,h){ return s+(h.qty||0); },0);
                var vBoxes = vh.reduce(function(s,h){ return s+(h.boxes||0); },0);

// Group by zone
                var byZone2 = {};
                vh.forEach(function(h){ if(!byZone2[h.zone]) byZone2[h.zone]=[]; byZone2[h.zone].push(h); });
                var zoneOrder2 = ["b3","b4","b5","b6","b7","b8","b9","b10","b11","b12"];
                var vzones = Object.keys(byZone2).sort(function(a,b){ return zoneOrder2.indexOf(a)-zoneOrder2.indexOf(b); });

return (
                  <div key={variety} style={{marginBottom:14}}>
                    {/* Variety sub-header */}
                    <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8,paddingLeft:4}}>
                      <div style={{background:C.citrus+"22",color:C.citrus,borderRadius:8,
                        padding:"3px 12px",fontSize:13,fontWeight:700,fontFamily:"sans-serif"}}>
                        {"🍊 "+variety}
                      </div>
                      <div style={{flex:1,height:1,background:"#F0EBE0"}}/>
                      <span style={{fontSize:12,fontWeight:700,color:C.citrus,fontFamily:"sans-serif"}}>{(vKg/1000).toFixed(1)+"t"}</span>
                      <span style={{fontSize:12,color:C.muted,fontFamily:"sans-serif"}}>{vBoxes.toLocaleString()+" caisses"}</span>
                    </div>

{/* Zone cards */}
                    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:8,paddingLeft:4}}>
                      {vzones.map(function(zid){
                        var zh = byZone2[zid];
                        var zone = zones.find(function(z){ return z.id===zid; });
                        var zKg2    = zh.reduce(function(s,h){ return s+(h.qty||0); },0);
                        var zBoxes2 = zh.reduce(function(s,h){ return s+(h.boxes||0); },0);
                        var lastDate = zh.map(function(h){ return h.date; }).sort().pop();
                        return (
                          <Card key={zid} style={{padding:"12px 16px",cursor:"pointer",borderLeft:"4px solid "+C.citrus}}
                            onClick={function(){ setZone(zid); setView("zone"); }}>
                            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:8}}>
                              <div style={{display:"flex",alignItems:"center",gap:6}}>
                                <div style={{background:C.citrus,color:"#fff",borderRadius:6,
                                  padding:"2px 8px",fontSize:11,fontWeight:800,fontFamily:"sans-serif"}}>
                                  {zid.toUpperCase()}
                                </div>
                                <div>
                                  <div style={{fontWeight:700,fontSize:13,color:C.soil,fontFamily:"sans-serif"}}>
                                    {zone?zone.name.split("–")[0].trim():zid}
                                  </div>
                                  <div style={{fontSize:10,color:C.citrus,fontWeight:600,fontFamily:"sans-serif"}}>
                                    {zone&&zone.variety ? "🍊 "+zone.variety : "🍊 "+variety}
                                  </div>
                                </div>
                              </div>
                              <span style={{fontSize:16,color:C.muted}}>{"›"}</span>
                            </div>
                            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6,marginBottom:6}}>
                              <div style={{textAlign:"center",background:C.citrus+"18",borderRadius:6,padding:"5px 2px"}}>
                                <div style={{fontSize:15,fontWeight:800,color:C.citrus,fontFamily:"sans-serif"}}>{(zKg2/1000).toFixed(1)+"t"}</div>
                                <div style={{fontSize:9,color:C.muted,fontFamily:"sans-serif"}}>total</div>
                              </div>
                              <div style={{textAlign:"center",background:"#F5F0E8",borderRadius:6,padding:"5px 2px"}}>
                                <div style={{fontSize:15,fontWeight:800,color:C.bark,fontFamily:"sans-serif"}}>{zBoxes2.toLocaleString()}</div>
                                <div style={{fontSize:9,color:C.muted,fontFamily:"sans-serif"}}>caisses</div>
                              </div>
                            </div>
                            {lastDate && (
                              <div style={{fontSize:11,color:C.muted,fontFamily:"sans-serif",textAlign:"center"}}>
                                {"Dernière: "}<span style={{fontWeight:700,color:C.citrus}}>{lastDate}</span>
                              </div>
                            )}
                          </Card>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  }

return (
    <div dir={rtl?"rtl":"ltr"}>
      {view==="list"   && <ListView/>}
      {view==="zone"   && <ZoneDetail/>}
      {view==="import" && <ImportPreview/>}
      {view==="manual" && <ManualEntry/>}
    </div>
  );
}

// ── Pests ─────────────────────────────────────────────────────────────────────
function PestView({ data, db, lang }) {
  const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const rtl = lang==="ar";
  const zOpts = data.zones.map(z=>({ v:z.id, l:z.name }));
  const cycleStatus = p=>{ const c=["Monitoring","Active","Resolved"]; db.addPest({...p,status:c[(c.indexOf(p.status)+1)%3]}); };
  const save = ()=>{ db.addPest(form); setModal(false); };
  return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>🐛 {tx("pests",lang)}</SectionTitle>
        <Btn onClick={()=>{ setForm({zone:"",name:"",status:"Monitoring",detected:"",treatment:"",severity:"Medium"}); setModal(true); }} color={C.danger}>+ {tx("newPest",lang)}</Btn>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(120px,1fr))", gap:12, marginBottom:20 }}>
        <Stat label="Active" value={data.pests.filter(p=>p.status==="Active").length} color={C.danger}/>
        <Stat label="Monitoring" value={data.pests.filter(p=>p.status==="Monitoring").length} color={C.warning}/>
        <Stat label="Resolved" value={data.pests.filter(p=>p.status==="Resolved").length} color={C.success}/>
      </div>
      <div style={{ display:"grid", gap:10 }}>
        {data.pests.map(p=>{
          const zone=data.zones.find(z=>z.id===p.zone);
          const bc=p.status==="Active"?C.danger:p.status==="Monitoring"?C.warning:C.success;
          return (
            <Card key={p.id} style={{ padding:"13px 18px", borderLeft:`5px solid ${bc}` }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
                <div style={{ flex:1 }}>
                  <div style={{ display:"flex", gap:7, alignItems:"center", flexWrap:"wrap", marginBottom:5 }}>
                    <span style={{ fontWeight:700, fontSize:14, color:C.soil }}>{p.name}</span>
                    <Badge label={p.status}/><Badge label={p.severity}/>
                  </div>
                  <div style={{ fontSize:11, color:C.muted, display:"flex", gap:14, flexWrap:"wrap" }}>
                    <span>📍 {zone?.name||"—"}</span><span>📅 {p.detected}</span>
                  </div>
                  <div style={{ fontSize:12, color:C.bark, marginTop:5 }}>💊 <em>{p.treatment}</em></div>
                </div>
                <div style={{ display:"flex", gap:5 }}>
                  <Btn small onClick={()=>cycleStatus(p)} color={C.olive}>→</Btn>
                  <Btn small outline onClick={()=>db.deletePest(p.id)} color={C.danger}>✕</Btn>
                </div>
              </div>
            </Card>
          );
        })}
      </div>
      {modal && (
        <Modal title={tx("newPest",lang)} onClose={()=>setModal(false)} rtl={rtl}>
          <FInput label={tx("pestName",lang)} value={form.name} onChange={v=>setForm(f=>({...f,name:v}))} rtl={rtl}/>
          <FInput label={tx("zone",lang)} value={form.zone} onChange={v=>setForm(f=>({...f,zone:v}))} options={zOpts} rtl={rtl}/>
          <FInput label={tx("detected",lang)} value={form.detected} onChange={v=>setForm(f=>({...f,detected:v}))} type="date" rtl={rtl}/>
          <FInput label={tx("status",lang)} value={form.status} onChange={v=>setForm(f=>({...f,status:v}))} options={["Monitoring","Active","Resolved"]} rtl={rtl}/>
          <FInput label={tx("severity",lang)} value={form.severity} onChange={v=>setForm(f=>({...f,severity:v}))} options={["High","Medium","Low"]} rtl={rtl}/>
          <FInput label={tx("treatment",lang)} value={form.treatment} onChange={v=>setForm(f=>({...f,treatment:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.danger}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Expenses ──────────────────────────────────────────────────────────────────
function ExpensesView({ data, db, lang, setView }) {
  const [previewImage, setPreviewImage] = React.useState(null);
  const [hoverImage, setHoverImage] = React.useState(null);
  const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const [editExp, setEditExp] = useState(null);
  const [hoverPayroll, setHoverPayroll] = useState(null);
  const rtl = lang==="ar";

// Look up Gemini-parsed payroll from linked message
  const getPayroll = (expense) => {
    if (!expense.notes) return null;
    const ref = (expense.notes||"").match(/Réf: msg (\S+)/);
    if (!ref) return null;
    const msg = data.messages.find(m => m.id === ref[1]);
    if (!msg || !msg.notes) return null;
    try {
      const parsed = typeof msg.notes === "string" ? JSON.parse(msg.notes) : msg.notes;
      if (parsed.payroll_entries && parsed.payroll_entries.length > 0) return { entries: parsed.payroll_entries, weekStart: parsed.payroll_week_start, grandTotal: parsed.payroll_grand_total };
      if (parsed.invoice_entries && parsed.invoice_entries.length > 0) return { invoices: parsed.invoice_entries };
    } catch(e) {}
    return null;
  };
  const zOpts = data.zones.map(z=>({ v:z.id, l:z.name }));
  const catOpts = ["Intrants","Main d'œuvre","Équipement","Traitements","Transport","Pressage","Énergie","Honoraires","Achats & Factures","Autre"];
  const save = ()=>{ db.addExpense(form); setModal(false); };
  const saveEdit = ()=>{ db.updateExpense({...editExp, amount:+editExp.amount}); setEditExp(null); };

// ── Filter: only 2026+ ──
  const expenses2026 = data.expenses.filter(e => e.date >= "2026-01-01");
  const total = expenses2026.reduce((s,e)=>s+e.amount,0);
  const cats = [...new Set(expenses2026.map(e=>e.category))];

// ── Chart data preparation ──
  const catColors = {
    "Intrants":"#27AE60","Main d'œuvre":"#2980B9","Paie Ouvriers":"#2980B9","Équipement":"#8E44AD",
    "Traitements":"#E67E22","Transport":"#1ABC9C","Pressage":"#F39C12",
    "Énergie":"#E74C3C","Honoraires":"#3498DB","Achats & Factures":"#D4A017","Autre":"#95A5A6"
  };
  const chartCat = (e) => (e.description||"").toUpperCase().includes("SRM") ? "Énergie" : e.category;
  const now = new Date();
  const curMonth = now.toISOString().slice(0,7);

// Bar: all months from Jan 2026 to current
  const barMonths = [];
  const startBar = new Date(2026, 0, 1);
  let bm = new Date(startBar);
  while (bm <= now) { barMonths.push(bm.toISOString().slice(0,7)); bm = new Date(bm.getFullYear(), bm.getMonth()+1, 1); }
  const barMonthLabels = barMonths.map(m => {
    const [y,mo] = m.split("-");
    return new Intl.DateTimeFormat(lang==="ar"?"ar-MA":"fr-FR",{month:"short",year:"2-digit"}).format(new Date(+y,+mo-1,1));
  });
  const allChartCats = [...new Set(expenses2026.map(e=>chartCat(e)))].sort();
  const barDatasets = allChartCats.map(cat => ({
    label: cat,
    data: barMonths.map(m => expenses2026.filter(e=>e.date.slice(0,7)===m && chartCat(e)===cat).reduce((s,e)=>s+e.amount,0)),
    backgroundColor: catColors[cat] || "#95A5A6",
  }));

// Pie: current month
  const curMonthExp = expenses2026.filter(e=>e.date.slice(0,7)===curMonth);
  const pieCats = [...new Set(curMonthExp.map(e=>chartCat(e)))];
  const pieData = pieCats.map(c => curMonthExp.filter(e=>chartCat(e)===c).reduce((s,e)=>s+e.amount,0));
  const pieColors = pieCats.map(c => catColors[c] || "#95A5A6");
  const curMonthTotal = pieData.reduce((s,v)=>s+v,0);

// Chart refs
  const barCanvasRef = React.useRef(null);
  const pieCanvasRef = React.useRef(null);
  const barChartRef = React.useRef(null);
  const pieChartRef = React.useRef(null);

React.useEffect(() => {
    if (barCanvasRef.current) {
      if (barChartRef.current) barChartRef.current.destroy();
      barChartRef.current = new Chart(barCanvasRef.current, {
        type: "bar",
        data: { labels: barMonthLabels, datasets: barDatasets },
        options: {
          responsive: true, maintainAspectRatio: false,
          plugins: {
            legend: { position:"bottom", labels:{ boxWidth:12, font:{size:11}, padding:8 }},
            tooltip: { callbacks:{ label: ctx => `${ctx.dataset.label}: ${ctx.raw.toLocaleString()} MAD` }},
          },
          scales: {
            x: { stacked:true, grid:{display:false}, ticks:{font:{size:11}} },
            y: { stacked:true, grid:{color:"#f0ebe0"}, ticks:{font:{size:10}, callback:v=>(v/1000)+"k"} }
          }
        }
      });
    }
    if (pieCanvasRef.current) {
      if (pieChartRef.current) pieChartRef.current.destroy();
      pieChartRef.current = new Chart(pieCanvasRef.current, {
        type: "pie",
        data: { labels: pieCats, datasets: [{ data: pieData, backgroundColor: pieColors, borderWidth:2, borderColor:"#fff" }] },
        options: {
          responsive: true, maintainAspectRatio: false,
          plugins: {
            legend: { position:"bottom", labels:{ boxWidth:12, font:{size:11}, padding:8 }},
            tooltip: { callbacks:{ label: ctx => {
              const pct = curMonthTotal>0 ? ((ctx.raw/curMonthTotal)*100).toFixed(1) : 0;
              return `${ctx.label}: ${ctx.raw.toLocaleString()} MAD (${pct}%)`;
            }}},
          }
        }
      });
    }
    return () => {
      if (barChartRef.current) barChartRef.current.destroy();
      if (pieChartRef.current) pieChartRef.current.destroy();
    };
  }, [data.expenses, lang]);

// ── Monthly grouping for table view ──
  const expByMonth = {};
  expenses2026.forEach(e => {
    const m = e.date.slice(0,7);
    if (!expByMonth[m]) expByMonth[m] = [];
    expByMonth[m].push(e);
  });
  const sortedMonths = Object.keys(expByMonth).sort((a,b) => b.localeCompare(a));
  const [expandedMonth, setExpandedMonth] = useState(curMonth);
  // All categories present across 2026 data (using real category, not chart virtual)
  const tableCats = [...new Set(expenses2026.map(e=>e.category))].sort();

// ── AI Q&A for Expenses ──
  const [expAiQuery, setExpAiQuery] = useState("");
  const [expAiResponse, setExpAiResponse] = useState("");
  const [expAiThinking, setExpAiThinking] = useState(false);
  const [expAiRecording, setExpAiRecording] = useState(false);
  const expMediaRecRef = useRef(null);
  const expAudioChunksRef = useRef([]);
  const geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";

const askExpAi = async (audioB64 = null, mimeType = null) => {
    let key = geminiKey || (localStorage.getItem("albaraka_settings") ? JSON.parse(localStorage.getItem("albaraka_settings")).geminiKey : "");
    if (!key) { alert("Clé API Gemini manquante dans les Paramètres."); return; }
    if (!audioB64 && !expAiQuery.trim()) return;
    setExpAiThinking(true);
    setExpAiResponse("");
    try {
      const expData = expenses2026.map(e => ({ category: chartCat(e), description: e.description, amount: e.amount, date: e.date, notes: e.notes||"" }));
      const today = new Date().toISOString().slice(0,10);
      const prompt = `You are a financial assistant for a Moroccan olive farm (Domaine Al-Baraka). Answer questions about farm expenses.

TODAY'S DATE: ${today}

EXPENSE DATA (JSON array — all expenses from January 2026):
${JSON.stringify(expData)}

IMPORTANT RULES:
- "SRM" or "Société Régionale Multiservices" in description = electricity bill (Énergie), even if category says "Achats & Factures"
- Amounts are in MAD (Moroccan Dirham), also written as "DH"
- When asked about energy/electricity, include both "Énergie" category AND SRM bills
- "Paie Ouvriers" = farm worker salaries (Brahim Sedrat, Rhal Achaabawi, Khalid Mkikat, Salah Ouardi)
- "Honoraires" = consultant fees (Lhoussain Oultou, Si Mohamed Ait El Kadi)
- Answer in the same language as the question (French, English, Arabic, or Darija)
- Be precise with numbers — show the individual items and the total
- Keep answers concise but complete
- Format your response as clean HTML (not markdown). Use <table> with borders for tabular data, <strong> for emphasis, <br> for line breaks. Style tables with: border-collapse:collapse, padding:6px 12px, border:1px solid #D5C8B0. Use a clean, professional presentation.`;

const stopExpVoice = () => {
    if(expMediaRecRef.current && expMediaRecRef.current.state === "recording") {
      expMediaRecRef.current.stop();
      expMediaRecRef.current.stream.getTracks().forEach(t => t.stop());
    }
  };

return (
    <div dir={rtl?"rtl":"ltr"}>
      {previewImage && (<div onClick={() => setPreviewImage(null)} style={{position:"fixed", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(0,0,0,0.8)", zIndex:9999, display:"flex", alignItems:"center", justifyContent:"center"}}><div style={{position:"relative"}}><img className="agro-media" src={previewImage} onClick={ev => ev.stopPropagation()} style={{maxHeight:"85vh", maxWidth:"90vw", borderRadius:8, backgroundColor:"#fff"}} /><button onClick={() => setPreviewImage(null)} style={{position:"absolute", top:-15, right:-15, background:"#E74C3C", color:"white", border:"none", borderRadius:"50%", width:30, height:30, cursor:"pointer", fontWeight:"bold", boxShadow:"0 2px 4px rgba(0,0,0,0.2)"}}>X</button></div></div>)}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>💰 {tx("expenses",lang)} — 2026</SectionTitle>
        <Btn onClick={()=>{ setForm({category:"",description:"",amount:"",date:"",zone:""}); setModal(true); }} color={C.bark}>+ {tx("newExpense",lang)}</Btn>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(120px,1fr))", gap:12, marginBottom:20 }}>
        <Stat label={tx("total",lang)} value={`${total.toLocaleString()} MAD`} color={C.bark}/>
        <Stat label={tx("transactions",lang)} value={expenses2026.length} color={C.olive}/>
        <Stat label={tx("categories",lang)} value={cats.length} color={C.citrus}/>
      </div>

{/* ── Expense Charts ── */}
      <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr", gap:16, marginBottom:24 }}>
        <Card style={{ padding:16 }}>
          <div style={{ fontWeight:700, fontSize:13, color:C.bark, marginBottom:10 }}>Dépenses par catégorie — 2026</div>
          <div style={{ height:220 }}><canvas ref={barCanvasRef} /></div>
        </Card>
        <Card style={{ padding:16 }}>
          <div style={{ fontWeight:700, fontSize:13, color:C.bark, marginBottom:4 }}>
            {new Intl.DateTimeFormat(lang==="ar"?"ar-MA":"fr-FR",{month:"long",year:"numeric"}).format(now)}
          </div>
          <div style={{ fontSize:11, color:C.muted, marginBottom:10 }}>{curMonthTotal.toLocaleString()} MAD total</div>
          <div style={{ height:200 }}>{curMonthTotal > 0 ? <canvas ref={pieCanvasRef} /> : <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:C.muted,fontSize:12}}>Aucune dépense ce mois</div>}</div>
        </Card>
      </div>

{/* ── AI Q&A Bar ── */}
      <Card style={{ padding:14, marginBottom:16 }}>
        <div style={{ display:"flex", gap:8, alignItems:"center" }}>
          <div style={{ display:"flex", flex:1, background:"#F5F0E8", borderRadius:10, padding:"2px", alignItems:"center" }}>
            <input value={expAiQuery} onChange={e=>setExpAiQuery(e.target.value)} onKeyDown={e=>e.key==="Enter"&&askExpAi()}
              placeholder="Poser une question sur les dépenses (ex: Combien a-t-on payé Brahim cette année ?)"
              style={{ flex:1, padding:"9px 12px", border:"none", fontSize:13, background:"transparent", outline:"none", fontFamily:"sans-serif" }} />
            <button onClick={expAiRecording==="recording" ? stopExpVoice : startExpVoice} disabled={expAiRecording==="processing"}
              style={{ background: expAiRecording==="recording" ? C.danger : "transparent", color: expAiRecording==="recording" ? "#fff" : C.citrus, border:"none", borderRadius:8, width:36, height:36, cursor:expAiRecording==="processing"?"not-allowed":"pointer", fontSize:16, display:"flex", alignItems:"center", justifyContent:"center" }}>
              {expAiRecording==="processing" ? "⏳" : "🎤"}
            </button>
            <button onClick={()=>askExpAi()} disabled={expAiThinking}
              style={{ background:C.bark, color:"#fff", border:"none", borderRadius:8, padding:"0 14px", height:36, cursor:"pointer", fontWeight:"bold", fontSize:12, marginLeft:4 }}>
              {expAiThinking ? "..." : "Demander"}
            </button>
          </div>
        </div>
        {(expAiThinking || expAiResponse) && (
          <div style={{ background:"#F5F0E8", borderLeft:`4px solid ${C.bark}`, padding:"12px 16px", borderRadius:8, fontSize:13, color:C.soil, lineHeight:1.6, fontFamily:"sans-serif", marginTop:10, position:"relative" }}>
            {expAiResponse && <button onClick={()=>setExpAiResponse("")} style={{ position:"absolute", top:8, right:8, background:"none", border:"none", cursor:"pointer", color:C.muted, fontSize:16 }}>✕</button>}
            {expAiThinking ? <span style={{ color:C.muted }}>Réflexion en cours...</span> : <div dangerouslySetInnerHTML={{ __html: expAiResponse }} />}
          </div>
        )}
      </Card>

{/* ── Monthly accordion with tables ── */}
      <div style={{ display:"grid", gap:10 }}>
        {sortedMonths.map(month => {
          const isOpen = expandedMonth === month;
          const monthExp = expByMonth[month];
          const monthTotal = monthExp.reduce((s,e)=>s+e.amount, 0);
          const monthLabel = (() => { const [y,mo] = month.split("-"); return new Intl.DateTimeFormat(lang==="ar"?"ar-MA":"fr-FR",{month:"long",year:"numeric"}).format(new Date(+y,+mo-1,1)); })();
          // Categories present this month
          const mCats = tableCats.filter(c => monthExp.some(e=>e.category===c));
          // Category totals
          const catTotals = {};
          mCats.forEach(c => { catTotals[c] = monthExp.filter(e=>e.category===c).reduce((s,e)=>s+e.amount,0); });

return (
            <Card key={month} style={{ padding:0, overflow:"hidden" }}>
              <div onClick={()=>setExpandedMonth(isOpen?null:month)} style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"12px 18px", cursor:"pointer", background:isOpen?"#F5F0E8":"#fff", borderBottom:isOpen?"1px solid #EBE5DB":"none" }}>
                <div style={{ display:"flex", gap:10, alignItems:"center" }}>
                  <span style={{ fontWeight:700, fontSize:14, color:C.bark }}>{isOpen?"▼":"▶"}</span>
                  <span style={{ fontWeight:700, fontSize:14, color:C.soil, textTransform:"capitalize" }}>{monthLabel}</span>
                  <span style={{ fontSize:11, color:C.muted }}>({monthExp.length} transaction{monthExp.length>1?"s":""})</span>
                </div>
                <span style={{ fontWeight:800, fontSize:14, color:C.bark }}>{monthTotal.toLocaleString()} MAD</span>
              </div>
              {isOpen && (
                <div style={{ padding:"12px 18px" }}>
                  {/* Category summary chips */}
                  <div style={{ display:"flex", gap:8, flexWrap:"wrap", marginBottom:14 }}>
                    {mCats.map(c => catTotals[c] > 0 && (
                      <div key={c} style={{ display:"flex", alignItems:"center", gap:5, background:"#F5F0E8", borderRadius:20, padding:"4px 12px", borderLeft:`3px solid ${catColors[c]||"#95A5A6"}` }}>
                        <span style={{ fontSize:11, fontWeight:600, color:C.soil }}>{c}</span>
                        <span style={{ fontSize:11, fontWeight:800, color:catColors[c]||C.bark }}>{catTotals[c].toLocaleString()}</span>
                      </div>
                    ))}
                  </div>
                  {/* Compact table */}
                  <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12, fontFamily:"sans-serif" }}>
                    <thead>
                      <tr style={{ background:"#F5F0E8" }}>
                        <th style={{ padding:"8px 10px", textAlign:"left", fontWeight:700, color:C.bark, borderBottom:"2px solid #EBE5DB" }}>Description</th>
                        <th style={{ padding:"8px 10px", textAlign:"left", fontWeight:700, color:C.bark, borderBottom:"2px solid #EBE5DB", width:90 }}>Date</th>
                        <th style={{ padding:"8px 10px", textAlign:"left", fontWeight:700, color:C.bark, borderBottom:"2px solid #EBE5DB", width:110 }}>Catégorie</th>
                        <th style={{ padding:"8px 10px", textAlign:"right", fontWeight:700, color:C.bark, borderBottom:"2px solid #EBE5DB", width:100 }}>Montant</th>
                        <th style={{ padding:"8px 10px", borderBottom:"2px solid #EBE5DB", width:60 }}></th>
                      </tr>
                    </thead>
                    <tbody>
                      {monthExp.sort((a,b)=>a.date.localeCompare(b.date)).map(e => (
                        <tr key={e.id} style={{ borderBottom:"1px solid #F0EBE0" }}
                            onMouseEnter={ev=>ev.currentTarget.style.background="#FAFAF5"}
                            onMouseLeave={ev=>ev.currentTarget.style.background="transparent"}>
                          <td style={{ padding:"7px 10px", color:C.soil }}>
                            <div style={{ display:"flex", gap:6, alignItems:"center", flexWrap:"wrap" }}>
                              <span>{e.description.replace(/(\d{4})-(\d{2})/, (m2, y, mo) => { let str = new Intl.DateTimeFormat(lang==="ar"?"ar-MA":lang==="en"?"en-GB":"fr-FR", {month:"long", year:"numeric"}).format(new Date(y, mo-1, 1)); return str.charAt(0).toUpperCase() + str.slice(1); })}</span>
                              {e.category === "Énergie" && setView && <button onClick={()=>setView("energy")} style={{ background:"none", border:"none", color:"#2980B9", cursor:"pointer", fontSize:11, textDecoration:"underline", padding:0 }}>↗</button>}
                              {e.media_url && <button onMouseEnter={()=>setHoverImage(e.id)} onMouseLeave={()=>setHoverImage(null)} onClick={()=>setPreviewImage(e.media_url.split(",")[0])} style={{ background:"none", border:"none", color:"#8E44AD", cursor:"pointer", fontSize:11, textDecoration:"underline", padding:0, fontWeight:700 }}>👁</button>}
                              {hoverImage === e.id && e.media_url && <img src={e.media_url.split(",")[0]} style={{ position:"absolute", width:120, borderRadius:6, boxShadow:"0 4px 12px rgba(0,0,0,0.3)", zIndex:50, objectFit:"cover", border:"2px solid #fff", backgroundColor:"#fff" }} />}
                              {e.notes && (() => {
                                const pr = getPayroll(e);
                                return (
                                  <span style={{ position:"relative", display:"inline-block" }}
                                    onMouseEnter={()=>setHoverPayroll(e.id)} onMouseLeave={()=>setHoverPayroll(null)}>
                                    <span style={{ fontSize:10, color: pr ? "#3730A3" : C.citrus, cursor:"help", fontWeight: pr ? 700 : 400 }}>{pr ? "📊" : "📝"}</span>
                                    {hoverPayroll === e.id && pr && pr.entries && (
                                      <div style={{ position:"absolute", bottom:"100%", left:0, zIndex:100, background:"#EEF2FF", border:"1px solid #A5B4FC", borderRadius:10, padding:"10px 12px", boxShadow:"0 8px 24px rgba(0,0,0,0.15)", minWidth:280, marginBottom:6 }}
                                        onClick={ev=>ev.stopPropagation()}>
                                        <div style={{ fontWeight:700, fontSize:11, color:"#3730A3", marginBottom:6 }}>💵 Feuille de paie — {pr.weekStart||""}</div>
                                        <table style={{ width:"100%", borderCollapse:"collapse", fontSize:11 }}>
                                          <thead><tr style={{ background:"#A5B4FC44" }}>
                                            <th style={{ padding:"3px 6px", textAlign:"right", color:"#3730A3" }}>العامل</th>
                                            <th style={{ padding:"3px 6px", textAlign:"center", color:"#3730A3" }}>أيام</th>
                                            <th style={{ padding:"3px 6px", textAlign:"center", color:"#3730A3" }}>سعر</th>
                                            <th style={{ padding:"3px 6px", textAlign:"center", color:"#3730A3", fontWeight:800 }}>المجموع</th>
                                          </tr></thead>
                                          <tbody>{pr.entries.map((w,i) => (
                                            <tr key={i} style={{ borderTop:"1px solid #A5B4FC33", background: i%2?"#fff":"#EEF2FF" }}>
                                              <td style={{ padding:"3px 6px", textAlign:"right", direction:"rtl", fontWeight:600, color:"#3730A3" }}>{w.worker_name}</td>
                                              <td style={{ padding:"3px 6px", textAlign:"center" }}>{w.days_worked}</td>
                                              <td style={{ padding:"3px 6px", textAlign:"center" }}>{w.daily_rate}</td>
                                              <td style={{ padding:"3px 6px", textAlign:"center", fontWeight:700 }}>{w.total} DH</td>
                                            </tr>
                                          ))}</tbody>
                                          <tfoot><tr style={{ background:"#A5B4FC44", fontWeight:800 }}>
                                            <td colSpan={3} style={{ padding:"3px 6px", textAlign:"right", color:"#3730A3" }}>المجموع</td>
                                            <td style={{ padding:"3px 6px", textAlign:"center", color:"#3730A3" }}>{pr.grandTotal || pr.entries.reduce((s,w)=>s+(w.total||0),0)} DH</td>
                                          </tr></tfoot>
                                        </table>
                                      </div>
                                    )}
                                    {hoverPayroll === e.id && !pr && (
                                      <div style={{ position:"absolute", bottom:"100%", left:0, zIndex:100, background:"#FFF9E6", border:"1px solid #EBE5DB", borderRadius:8, padding:"8px 12px", boxShadow:"0 4px 12px rgba(0,0,0,0.1)", minWidth:200, marginBottom:6, fontSize:11, color:C.soil, whiteSpace:"pre-wrap" }}>
                                        {e.notes}
                                      </div>
                                    )}
                                  </span>
                                );
                              })()}
                            </div>
                          </td>
                          <td style={{ padding:"7px 10px", color:C.muted, whiteSpace:"nowrap", fontSize:11 }}>{e.date}</td>
                          <td style={{ padding:"7px 10px" }}>
                            <span style={{ fontSize:10, background:catColors[e.category]||"#95A5A6", color:"#fff", padding:"2px 8px", borderRadius:10, fontWeight:600, whiteSpace:"nowrap" }}>{e.category}</span>
                          </td>
                          <td style={{ padding:"7px 10px", textAlign:"right", fontWeight:700, color:C.soil }}>{e.amount.toLocaleString()}</td>
                          <td style={{ padding:"7px 10px", textAlign:"center", whiteSpace:"nowrap" }}>
                            <button onClick={()=>setEditExp({...e})} style={{ background:"none", border:"none", color:C.bark, cursor:"pointer", fontSize:12, padding:"2px 4px" }} title="Modifier">✏️</button>
                            <button onClick={()=>db.deleteExpense(e.id)} style={{ background:"none", border:"none", color:C.danger, cursor:"pointer", fontSize:12, padding:"2px 4px" }} title="Supprimer">✕</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                    <tfoot>
                      <tr style={{ background:"#F5F0E8", fontWeight:800 }}>
                        <td style={{ padding:"8px 10px", color:C.bark }} colSpan={3}>Total</td>
                        <td style={{ padding:"8px 10px", textAlign:"right", color:C.bark }}>{monthTotal.toLocaleString()}</td>
                        <td></td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              )}
            </Card>
          );
        })}
      </div>

{/* Edit expense modal */}
      {editExp && (
        <Modal title="Modifier la dépense" onClose={()=>setEditExp(null)} rtl={rtl}>
          <FInput label="Description" value={editExp.description} onChange={v=>setEditExp(f=>({...f,description:v}))} rtl={rtl}/>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
            <FInput label="Date (période couverte)" value={editExp.date} onChange={v=>setEditExp(f=>({...f,date:v}))} type="date" rtl={rtl}/>
            <FInput label="Montant (MAD)" value={editExp.amount} onChange={v=>setEditExp(f=>({...f,amount:v}))} type="number" rtl={rtl}/>
          </div>
          <FInput label="Catégorie" value={editExp.category} onChange={v=>setEditExp(f=>({...f,category:v}))} options={catOpts} rtl={rtl}/>
          <FInput label="Notes (ex: paiement pour avril)" value={editExp.notes||""} onChange={v=>setEditExp(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setEditExp(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveEdit} color={C.bark}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}

{modal && (
        <Modal title={tx("newExpense",lang)} onClose={()=>setModal(false)} rtl={rtl}>
          <FInput label={tx("category",lang)} value={form.category} onChange={v=>setForm(f=>({...f,category:v}))} options={catOpts} rtl={rtl}/>
          <FInput label={tx("description",lang)} value={form.description} onChange={v=>setForm(f=>({...f,description:v}))} rtl={rtl}/>
          <FInput label={tx("amount",lang)} value={form.amount} onChange={v=>setForm(f=>({...f,amount:v}))} type="number" rtl={rtl}/>
          <FInput label={tx("date",lang)} value={form.date} onChange={v=>setForm(f=>({...f,date:v}))} type="date" rtl={rtl}/>
          <FInput label={`${tx("zone",lang)} (opt.)`} value={form.zone} onChange={v=>setForm(f=>({...f,zone:v}))} options={zOpts} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.bark}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Consultants ───────────────────────────────────────────────────────────────
function ConsultantsView({ data, db, lang }) {
  const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const [attendModal, setAttendModal] = useState(null);
  const [attendForm, setAttendForm] = useState({ weekEnd:new Date().toISOString().slice(0,10), rate:3500, notes:"" });
  
  // Advanced Features State
  const [editExpense, setEditExpense] = useState(null);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  
  // AI Q&A State
  const [aiQuery, setAiQuery] = useState("");
  const [aiResponse, setAiResponse] = useState("");
  const [lastQuery, setLastQuery] = useState(null);
  const [aiTranscription, setAiTranscription] = useState("");
  const [aiTranslation, setAiTranslation] = useState("");
  const [aiTtsFr, setAiTtsFr] = useState("");
  const [aiTtsEn, setAiTtsEn] = useState("");
  const [aiTtsAr, setAiTtsAr] = useState("");
  const [isAiThinking, setIsAiThinking] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef(null);
  const audioChunksRef = useRef([]);

const rtl = lang==="ar";
  const geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";

const save = () => {
    const w = { ...form, role:"Consultant", dailyRate:+form.dailyRate||3500, payType:"monthly" };
    modal === "edit" ? db.updateWorker(w) : db.addWorker(w);
    setModal(false);
  };

const saveEditExpense = () => {
    db.updateExpense(editExpense);
    setEditExpense(null);
  };

INSTRUCTIONS:
- Analyze the user's question (which may be an audio clip or text).
- CRITICAL TIMING RULE: When determining WHICH MONTH a payment covers, you MUST strictly prioritize the "notes" field over the "date" field (e.g., if the date is "2026-03-01" but notes say "Feb" or "Mois: 2026-02", you must conclude the payment is FOR February, not March).
- You MUST return your response as a pure JSON object (DO NOT wrap in markdown \`\`\`json blocks).
- The JSON object must contain EXACTLY these six keys:
  1. "transcription": The exact transcription of what the user asked. If Moroccan Darija or Arabic, MUST use Arabic script. If French/English, use Latin script.
  2. "translation": The exact translation of the user's question into French.
  3. "answer": Your answer to the question based ONLY on the JSON data provided. Answer clearly in the original language used by the user.
  4. "tts_fr": The exact translation of your "answer" into perfect French for Text-to-Speech.
  5. "tts_en": The exact translation of your "answer" into perfect English for Text-to-Speech.
  6. "tts_ar": The exact translation of your "answer" into perfect Standard Arabic for Text-to-Speech.`;

const filteredExpenses = data.expenses
    .filter(e => e.category === "Honoraires")
    .filter(e => !startDate || e.date >= startDate)
    .filter(e => !endDate || e.date <= endDate);

// Group by Month (YYYY-MM)
  const currentMonthPrefix = new Date().toISOString().slice(0, 7);
  const expensesByMonth = {};
  filteredExpenses.forEach(e => {
    const m = e.date.slice(0, 7);
    if (!expensesByMonth[m]) expensesByMonth[m] = [];
    expensesByMonth[m].push(e);
  });
  const sortedMonths = Object.keys(expensesByMonth).sort((a,b) => b.localeCompare(a));

return (
    <div className="fade-in" dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:20 }}>
        <SectionTitle>🧑‍💼 Consultants & Experts</SectionTitle>
        <Btn onClick={()=>{ setForm({name:"", nickname:"", role:"Consultant", phone:"", active:true, dailyRate:3500, payType:"monthly"}); setModal("add"); }} color={C.info} outline>+ Nouveau Consultant</Btn>
      </div>

<div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(280px, 1fr))", gap:16 }}>
        {data.workers.filter(w=>w.role==="Consultant").map(w=>(
          <Card key={w.id} style={{ opacity: w.active ? 1 : 0.6, borderLeft: `4px solid ${w.active?C.info:"#CCC"}` }}>
            <div style={{ display:"flex", alignItems:"center", gap:14, marginBottom:16 }}>
              <div style={{ width:48, height:48, borderRadius:24, background:"#E3F0FB", display:"flex", alignItems:"center", justifyContent:"center", fontSize:20, color:C.info, fontWeight:800 }}>
                {w.name.charAt(0)}
              </div>
              <div>
                <div style={{ fontWeight:700, fontSize:15, color:C.bark }}>{w.name}</div>
                {w.nickname && <div style={{ fontSize:12, color:C.citrus, fontWeight:600, marginTop:2 }}>"{w.nickname}"</div>}
                <div style={{ fontSize:12, color:C.muted, marginTop:2 }}>{w.role}</div>
              </div>
            </div>
            <div style={{ display:"flex", gap:5, flexWrap:"wrap", justifyContent:"flex-end" }}>
              <Btn small outline onClick={()=>{ setForm({...w}); setModal("edit"); }} color={C.bark}>✏️</Btn>
              {w.active && (
                <Btn small onClick={()=>{ setAttendModal(w); setAttendForm({ weekEnd:new Date().toISOString().slice(0,10), rate: w.dailyRate||3500, notes:"" }); }} color={C.citrus}>💰 Payer</Btn>
              )}
              <Btn small onClick={()=>db.toggleWorker(w.id,!w.active)} color={w.active?C.muted:C.success} outline={!w.active}>{w.active?tx("deactivate",lang):tx("activate",lang)}</Btn>
            </div>
          </Card>
        ))}
      </div>

<SectionTitle style={{ marginTop:32 }}>💰 Historique des Honoraires</SectionTitle>
      
      {/* AI Assistant & Filters */}
      <div style={{ background:"#fff", padding:16, borderRadius:12, boxShadow:"0 2px 8px rgba(0,0,0,0.05)", marginBottom:16 }}>
        <div style={{ display:"flex", gap:10, flexWrap:"wrap", alignItems:"center", marginBottom: aiResponse ? 12 : 0 }}>
          
          <div style={{ display:"flex", flex:1, minWidth:250, background:"#F5F0E8", borderRadius:10, padding:"2px", alignItems:"center" }}>
            <input value={aiQuery} onChange={e=>setAiQuery(e.target.value)} onKeyDown={e=>e.key==="Enter"&&askAi()} placeholder="Poser une question à l'IA (ex: Lhoussain a-t-il été payé ce mois ?)" style={{ flex:1, padding:"9px 12px", border:"none", fontSize:13, background:"transparent", outline:"none", fontFamily:"sans-serif" }} />
            <button onClick={isRecording==="recording" ? stopVoiceSearch : startVoiceSearch} disabled={isRecording==="processing"} style={{ background: isRecording==="recording" ? C.danger : "transparent", color: isRecording==="recording" ? "#fff" : C.citrus, border:"none", borderRadius:8, width:36, height:36, cursor:isRecording==="processing"?"not-allowed":"pointer", fontSize:16, display:"flex", alignItems:"center", justifyContent:"center" }}>{isRecording==="processing" ? "⏳" : "🎤"}</button>
            <button onClick={()=>askAi()} disabled={isAiThinking} style={{ background:C.info, color:"#fff", border:"none", borderRadius:8, padding:"0 14px", height:36, cursor:"pointer", fontWeight:"bold", fontSize:12, marginLeft:4 }}>{isAiThinking ? "..." : "Demander"}</button>
          </div>

<div style={{ display:"flex", gap:6, alignItems:"center", background:"#F5F0E8", padding:"4px", borderRadius:10 }}>
            <span style={{ fontSize:11, color:C.muted, marginLeft:8, fontWeight:"bold" }}>Du</span>
            <input type="date" value={startDate} onChange={e=>setStartDate(e.target.value)} style={{ border:"none", borderRadius:6, padding:"6px", fontSize:12, outline:"none", color:C.soil, fontFamily:"sans-serif" }} />
            <span style={{ fontSize:11, color:C.muted, fontWeight:"bold" }}>Au</span>
            <input type="date" value={endDate} onChange={e=>setEndDate(e.target.value)} style={{ border:"none", borderRadius:6, padding:"6px", fontSize:12, outline:"none", color:C.soil, fontFamily:"sans-serif" }} />
            {(startDate || endDate) && <button onClick={()=>{setStartDate("");setEndDate("");}} style={{ background:"none", border:"none", color:C.danger, cursor:"pointer", padding:"0 6px", fontWeight:"bold" }}>✕</button>}
          </div>

</div>
        
        {(isAiThinking || aiResponse) && (
          <div style={{ background:"#E3F0FB", borderLeft:"4px solid "+C.info, padding:"12px 16px", borderRadius:8, fontSize:13, color:C.soil, lineHeight:1.6, whiteSpace:"pre-wrap", fontFamily:"sans-serif", position:"relative" }}>
            {aiResponse && <button onClick={()=>{setAiResponse(""); setLastQuery(null); setAiTranscription(""); setAiTranslation(""); setAiTtsFr(""); setAiTtsEn(""); setAiTtsAr(""); window.speechSynthesis?.cancel();}} style={{ position:"absolute", top:8, right:8, background:"none", border:"none", cursor:"pointer", color:C.muted, fontSize:16 }}>✕</button>}
            
            {lastQuery && (
              <div style={{ marginBottom: 12, paddingBottom: 12, borderBottom: "1px solid rgba(0,0,0,0.06)" }}>
                <strong style={{ color:C.bark }}>🗣️ Vous :</strong><br/>
                {lastQuery.type === "text" ? (
                  <span style={{ fontStyle: "italic", color: C.muted }}>"{lastQuery.content}"</span>
                ) : (
                  <audio controls src={lastQuery.content} style={{ height: 32, marginTop: 6, outline: "none", width:"100%", maxWidth:300 }}></audio>
                )}
                
                {(aiTranscription || aiTranslation) && (
                  <div style={{ marginTop: 10, background: "#FFF", borderRadius: 8, padding: "10px 14px", border: "1px solid #EBE5DB", boxShadow: "0 1px 2px rgba(0,0,0,0.02)" }}>
                    {aiTranscription && <div style={{ fontSize: 13, color: C.soil, marginBottom: 6 }}><strong>📝 Original :</strong> <span dir="auto" style={{marginLeft: 4}}>{aiTranscription}</span></div>}
                    {aiTranslation && <div style={{ fontSize: 13, color: C.muted }}><strong>🌐 Traduction :</strong> <span dir="auto" style={{fontStyle: "italic", marginLeft: 4}}>{aiTranslation}</span></div>}
                  </div>
                )}
              </div>
            )}

<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{ flex: 1 }}>
                <strong style={{ color:C.info }}>🤖 Assistant IA :</strong><br/>
                {isAiThinking ? <span style={{ fontStyle:"italic", color:C.muted }}>Recherche en cours...</span> : <div dir="auto" style={{display:"inline-block", marginTop:4}}>{aiResponse}</div>}
              </div>
              {aiResponse && (
                <button onClick={playTTS} title={lang==="ar"?"استمع للإجابة":lang==="en"?"Listen to answer":"Écouter la réponse"} style={{ background:"#fff", border:"1px solid "+C.info, color:C.info, borderRadius:20, padding:"4px 12px", fontSize:11, fontWeight:"bold", cursor:"pointer", display:"flex", alignItems:"center", gap:6, marginLeft:12, boxShadow:"0 1px 3px rgba(0,0,0,0.1)" }}>
                  🔊 {lang==="ar"?"استمع":lang==="en"?"Listen":"Écouter"}
                </button>
              )}
            </div>
          </div>
        )}
      </div>

{/* Ledger List Grouped by Month */}
      <div style={{ display:"grid", gap:12, marginTop:12 }}>
        {sortedMonths.length === 0 && <p style={{ color:C.muted, textAlign:"center", padding:24 }}>Aucun historique trouvé pour cette période.</p>}
        {sortedMonths.map(month => (
          <details key={month} open={month === currentMonthPrefix} style={{ background:"#fff", borderRadius:12, boxShadow:"0 2px 8px rgba(0,0,0,0.05)", overflow:"hidden" }}>
            <summary style={{ padding:"12px 16px", fontWeight:700, fontSize:14, color:C.soil, cursor:"pointer", borderBottom:"1px solid #EEE", background:"#FAFAFA", userSelect:"none" }}>
              Mois : {month} <span style={{ color:C.muted, fontSize:12, fontWeight:500 }}>({expensesByMonth[month].length} paiement{expensesByMonth[month].length > 1 ? 's' : ''})</span>
            </summary>
            <div style={{ padding:8, display:"grid", gap:8 }}>
              {expensesByMonth[month].map(e => (
                <Card key={e.id} style={{ padding:"11px 16px", display:"flex", justifyContent:"space-between", alignItems:"center", boxShadow:"none", border:"1px solid #EEE" }}>
                  <div>
                    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                      <span style={{ background:"#FEF3E2", color:C.citrus, padding:"3px 8px", borderRadius:6, fontSize:12, fontWeight:800 }}>📅 {e.date}</span>
                      <span style={{ fontWeight:700, fontSize:14, color:C.soil }}>{e.description.replace(/^Honoraires\s*[-–—]\s*/i, "")}</span>
                    </div>
                    {(() => {
                      const cln = (e.notes||"").replace(/^Mois:\s*\d{4}-\d{2}\.?\s*/i, "").trim();
                      return cln ? <div style={{ fontSize:12, color:C.muted, marginTop:4, marginLeft:2 }}>{cln}</div> : null;
                    })()}
                  </div>
                  <div style={{ display:"flex", alignItems:"center", gap:8, marginLeft:12 }}>
                    <div style={{ fontWeight:800, fontSize:15, color:C.bark, whiteSpace:"nowrap", marginRight:6 }}>{(+e.amount).toLocaleString()} MAD</div>
                    <Btn small outline color={C.bark} style={{ padding:"4px 8px", fontSize:10 }} onClick={()=>setEditExpense({...e})}>✏️</Btn>
                    <Btn small outline color={C.danger} style={{ padding:"4px 8px", fontSize:10 }} onClick={()=>{ if(window.confirm("Supprimer cette ligne ?")) db.deleteExpense(e.id); }}>✕</Btn>
                  </div>
                </Card>
              ))}
            </div>
          </details>
        ))}
      </div>

{editExpense && (
        <Modal title="Modifier le paiement" onClose={()=>setEditExpense(null)} rtl={rtl}>
          <FInput label="Description" value={editExpense.description} onChange={v=>setEditExpense(f=>({...f,description:v}))} rtl={rtl}/>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Date" value={editExpense.date} onChange={v=>setEditExpense(f=>({...f,date:v}))} type="date" rtl={rtl}/>
            <FInput label="Montant (MAD)" value={editExpense.amount} onChange={v=>setEditExpense(f=>({...f,amount:v}))} type="number" rtl={rtl}/>
          </div>
          <FInput label="Notes" value={editExpense.notes} onChange={v=>setEditExpense(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:16 }}>
            <Btn outline onClick={()=>setEditExpense(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveEditExpense} color={C.bark}>💾 {tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}

{(modal === "add" || modal === "edit") && (
        <Modal title={modal === "edit" ? "Modifier Consultant" : "Nouveau Consultant"} onClose={()=>setModal(false)} rtl={rtl}>
          <FInput label={tx("name",lang)} value={form.name} onChange={v=>setForm(f=>({...f,name:v}))} rtl={rtl}/>
          <FInput label="Surnom / Nickname (ex: SiMo)" value={form.nickname} onChange={v=>setForm(f=>({...f,nickname:v}))} rtl={rtl}/>
          <FInput label={tx("phone",lang)} value={form.phone} onChange={v=>setForm(f=>({...f,phone:v}))} rtl={rtl}/>
          <FInput label="Honoraires (MAD/mois)" value={form.dailyRate} onChange={v=>setForm(f=>({...f,dailyRate:v}))} type="number" rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:16 }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.info}>💾 {tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}

{attendModal && (
        <Modal title={`💰 Payer – ${attendModal.name}`} onClose={()=>setAttendModal(null)} rtl={rtl}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Date de paie" value={attendForm.weekEnd} onChange={v=>setAttendForm(f=>({...f,weekEnd:v}))} type="date" rtl={rtl}/>
            <FInput label="Montant (MAD)" value={attendForm.rate} onChange={v=>setAttendForm(f=>({...f,rate:v}))} type="number" rtl={rtl}/>
          </div>
          <div style={{ background:"#FEF3E2", borderRadius:10, padding:"12px 16px", marginBottom:12, textAlign:"center" }}>
            <div style={{ fontSize:11, color:C.muted, marginBottom:4 }}>Montant à payer</div>
            <div style={{ fontSize:26, fontWeight:800, color:C.bark, fontFamily:"'Playfair Display',serif" }}>
              {(+attendForm.rate||0).toLocaleString()} MAD
            </div>
          </div>
          <FInput label={tx("notes",lang)} value={attendForm.notes} onChange={v=>setAttendForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:16 }}>
            <Btn outline onClick={()=>setAttendModal(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveAttendance} color={C.citrus}>💾 Enregistrer</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Workers ───────────────────────────────────────────────────────────────────
function WorkersView({ data, db, lang }) {
  const [modal, setModal] = useState(false);
  const [attendModal, setAttendModal] = useState(null); // worker object
  const [form, setForm] = useState({});
  const [attendForm, setAttendForm] = useState({ weekStart:"", days:6, rate:100, isMonthly:false, notes:"" });
  const rtl = lang==="ar";

const roleOpts = ["Chef d'équipe","Technicien(ne)","Irrigateur","Ouvrier/Ouvrière","Mécanicien","Autre"];
  const payTypeOpts = ["daily","weekly","monthly"];

// Get week start (Monday) for a given date
  const getWeekStart = (d=new Date()) => {
    const dt = new Date(d); const day = dt.getDay();
    const diff = dt.getDate() - day + (day===0?-6:1);
    dt.setDate(diff); return dt.toISOString().slice(0,10);
  };

const save = () => {
    const w = { ...form, dailyRate:+form.dailyRate||100, payType:form.payType||"daily" };
    modal === "edit" ? db.updateWorker(w) : db.addWorker(w);
    setModal(false);
  };

const taskCount = wid => data.tasks.filter(tk=>tk.assignee===wid&&tk.status!=="Done").length;

// Compute total payroll this month from expenses
  const thisMonth = new Date().toISOString().slice(0,7);
  const monthlyPayroll = data.expenses
    .filter(e=>e.category==="Main d'œuvre" && e.date?.startsWith(thisMonth))
    .reduce((s,e)=>s+(+e.amount||0),0);

const activeWorkers = data.workers.filter(w=>w.active && w.role!=="Consultant");
  const displayWorkers = data.workers.filter(w=>w.role!=="Consultant");

return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>👷 {tx("workers",lang)}</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <Btn onClick={()=>{ setForm({name:"",role:"Ouvrier/Ouvrière",phone:"",active:true,dailyRate:100,payType:"daily"}); setModal("add"); }} color={C.leaf} outline>+ {tx("newWorker",lang)}</Btn>
        </div>
      </div>

{/* Stats */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))", gap:12, marginBottom:20 }}>
        <Stat label={tx("active",lang)} value={activeWorkers.length} color={C.success}/>
        <Stat label={tx("total",lang)} value={displayWorkers.length} color={C.leaf}/>
        <Stat label={tx("pendingTasks",lang)} value={data.tasks.filter(tk=>tk.status!=="Done").length} color={C.citrus}/>
        <Stat label="Paie ce mois" value={`${monthlyPayroll.toLocaleString()} MAD`} color={C.bark}/>
      </div>

{/* Worker cards */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(280px,1fr))", gap:14, marginBottom:28 }}>
        {displayWorkers.map(w=>{
          const tasks = taskCount(w.id);
          const initials = w.name.split(" ").map(n=>n[0]).join("").slice(0,2).toUpperCase();
          return (
            <Card key={w.id} style={{ padding:18, opacity:w.active?1:0.55, borderLeft:`4px solid ${w.active?C.leaf:"#CCC"}` }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
                <div style={{ width:46, height:46, borderRadius:"50%", background:w.active?`linear-gradient(135deg,${C.leaf},${C.olive})`:"#CCC", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontWeight:800, fontSize:15, fontFamily:"'Playfair Display',serif" }}>{initials}</div>
                <div style={{ display:"flex", gap:5, flexWrap:"wrap", justifyContent:"flex-end" }}>
                  <Btn small outline onClick={()=>{ setForm({...w}); setModal("edit"); }} color={C.bark}>✏️</Btn>
                  {w.active && (
                    <Btn small onClick={()=>{ setAttendModal(w); setAttendForm({ weekStart:getWeekStart(), weekEnd:new Date().toISOString().slice(0,10), days: w.payType==="monthly" ? 1 : 6, rate: w.dailyRate||100, isMonthly: w.payType==="monthly", notes:"" }); }} color={C.citrus}>💰 Paie</Btn>
                  )}
                  <Btn small onClick={()=>db.toggleWorker(w.id,!w.active)} color={w.active?C.muted:C.success} outline={!w.active}>{w.active?tx("deactivate",lang):tx("activate",lang)}</Btn>
                </div>
              </div>
              <div style={{ marginTop:12 }}>
                <div style={{ fontWeight:700, fontSize:15, color:C.soil }}>{w.name}</div>
                <div style={{ fontSize:12, color:C.bark, marginTop:2 }}>{w.role}</div>
                {w.phone && <div style={{ fontSize:11, color:C.muted, marginTop:3 }}>📱 {w.phone}</div>}
                <div style={{ marginTop:8, display:"flex", gap:10, flexWrap:"wrap" }}>
                  {w.payType==="daily" && (
                    <span style={{ background:"#EEF5E4", color:C.leaf, padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700 }}>
                      💵 {w.dailyRate||100} MAD/jour
                    </span>
                  )}
                  {w.payType==="monthly" && (
                    <span style={{ background:"#E3F0FB", color:C.info, padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700 }}>
                      💵 {(w.dailyRate||3500).toLocaleString()} MAD/mois
                    </span>
                  )}
                  {tasks>0 && (
                    <span style={{ background:"#FEF3E2", color:C.citrus, padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700 }}>
                      📋 {tasks} {tx("tasksRunning",lang)}
                    </span>
                  )}
                </div>
              </div>
            </Card>
          );
        })}
      </div>

{/* Recent payroll entries */}
      <SectionTitle>💰 {tx("payroll",lang)}</SectionTitle>
      <div style={{ display:"grid", gap:8, marginTop:12 }}>
        {data.expenses
          .filter(e=>e.category==="Main d'œuvre")
          .slice(0,25)
          .map(e=>(
            <Card key={e.id} style={{ padding:"11px 16px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
              <div>
                <div style={{ fontWeight:600, fontSize:13, color:C.soil }}>{e.description}</div>
                <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>📅 {e.date}{e.notes ? ` · ${e.notes}` : ""}</div>
              </div>
              <div style={{ display:"flex", alignItems:"center", gap:12, marginLeft:12 }}>
                <div style={{ fontWeight:800, fontSize:15, color:C.bark, whiteSpace:"nowrap" }}>{(+e.amount).toLocaleString()} MAD</div>
                <Btn small outline color={C.danger} style={{ padding:"4px 8px", fontSize:10 }} onClick={()=>{ if(window.confirm("Supprimer cette ligne ?")) db.deleteExpense(e.id); }}>✕</Btn>
              </div>
            </Card>
          ))
        }
        {data.expenses.filter(e=>e.category==="Main d'œuvre").length===0 && (
          <p style={{ color:C.muted, textAlign:"center", padding:24 }}>Aucune entrée de paie.</p>
        )}
      </div>

{/* New worker modal */}
      {modal && (modal === "add" || modal === "edit") && (
        <Modal title={modal === "edit" ? "Modifier travailleur" : tx("newWorker",lang)} onClose={()=>setModal(false)} rtl={rtl}>
          <FInput label={tx("name",lang)} value={form.name} onChange={v=>setForm(f=>({...f,name:v}))} rtl={rtl}/>
          <FInput label={tx("role",lang)} value={form.role} onChange={v=>setForm(f=>({...f,role:v}))} options={roleOpts} rtl={rtl}/>
          <FInput label={tx("phone",lang)} value={form.phone} onChange={v=>setForm(f=>({...f,phone:v}))} rtl={rtl}/>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label={tx("dailyRate",lang)} value={form.dailyRate} onChange={v=>setForm(f=>({...f,dailyRate:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("payType",lang)} value={form.payType} onChange={v=>setForm(f=>({...f,payType:v}))} options={payTypeOpts} rtl={rtl}/>
          </div>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.leaf}>{tx("add",lang)}</Btn>
          </div>
        </Modal>
      )}

{/* Attendance / pay modal */}
      {attendModal && (
        <Modal title={`💰 Paie – ${attendModal.name}`} onClose={()=>setAttendModal(null)} rtl={rtl}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            {!attendForm.isMonthly && <FInput label="Semaine du" value={attendForm.weekStart} onChange={v=>setAttendForm(f=>({...f,weekStart:v}))} type="date" rtl={rtl}/>}
            <FInput label={attendForm.isMonthly ? "Date de paie" : "Au"} value={attendForm.weekEnd} onChange={v=>setAttendForm(f=>({...f,weekEnd:v}))} type="date" rtl={rtl}/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            {!attendForm.isMonthly && <FInput label={tx("daysWorked",lang)} value={attendForm.days} onChange={v=>setAttendForm(f=>({...f,days:v}))} type="number" rtl={rtl}/>}
            <FInput label={attendForm.isMonthly ? "Salaire (MAD/mois)" : "Taux (MAD/jour)"} value={attendForm.rate} onChange={v=>setAttendForm(f=>({...f,rate:v}))} type="number" rtl={rtl}/>
          </div>
          {/* Live calculation */}
          <div style={{ background:"#FEF3E2", borderRadius:10, padding:"12px 16px", marginBottom:12, textAlign:"center" }}>
            <div style={{ fontSize:11, color:C.muted, marginBottom:4 }}>Montant à payer</div>
            <div style={{ fontSize:26, fontWeight:800, color:C.bark, fontFamily:"'Playfair Display',serif" }}>
              {attendForm.isMonthly ? (+attendForm.rate||0).toLocaleString() : ((+attendForm.days||0)*(+attendForm.rate||0)).toLocaleString()} MAD
            </div>
            {!attendForm.isMonthly && <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>{attendForm.days||0} jours × {attendForm.rate||0} MAD</div>}
          </div>
          <FInput label={tx("notes",lang)} value={attendForm.notes} onChange={v=>setAttendForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setAttendModal(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveAttendance} color={C.citrus}>💾 Enregistrer & payer</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Olive Oil ─────────────────────────────────────────────────────────────────

// ── Settings ──────────────────────────────────────────────────────────────────
function SettingsView({ data, db, lang, setLang }) {
  const [form, setForm] = useState({...data.settings});
  const [saved, setSaved] = useState(false);
  const rtl = lang==="ar";

const save = ()=>{
    db.saveSettings({ ...form, citrusHa:+form.citrusHa, oliveHa:+form.oliveHa, picolineCount:+form.picolineCount });
    setSaved(true); setTimeout(()=>setSaved(false),2000);
  };

return (
    <div dir={rtl?"rtl":"ltr"}>
      <SectionTitle>⚙️ {tx("settingsTitle",lang)}</SectionTitle>

<Card style={{ marginBottom:18 }}>
        <h3 style={{ margin:"0 0 12px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:15 }}>🌐 {tx("language",lang)}</h3>
        <div style={{ display:"flex", gap:10, flexWrap:"wrap" }}>
          {Object.entries(LANGS).map(([code,label])=>(
            <button key={code} onClick={()=>setLang(code)} style={{ padding:"10px 22px", borderRadius:12, fontWeight:700, fontSize:14, border:`2px solid ${lang===code?C.citrus:"#DDD6C8"}`, background:lang===code?C.citrus:"transparent", color:lang===code?"#fff":C.muted, cursor:"pointer", fontFamily:code==="ar"?"Arial,sans-serif":"inherit" }}>{label}</button>
          ))}
        </div>
      </Card>

<Card style={{ marginBottom:18 }}>
        <h3 style={{ margin:"0 0 12px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:15 }}>🌳 Identité de la ferme</h3>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 18px" }}>
          <div style={{ marginBottom:16, padding:"14px 16px", background:"#EEF5E4", borderRadius:10 }}>
            <div style={{ fontSize:12, fontWeight:700, color:C.leaf, marginBottom:8, fontFamily:"sans-serif" }}>🤖 Intelligence Artificielle</div>
            <FInput label={tx("geminiKey",lang)} value={form.geminiKey||""} onChange={v=>setForm(f=>({...f,geminiKey:v}))} rtl={rtl}/>
            <div style={{ fontSize:11, color:C.muted, marginTop:-10, fontFamily:"sans-serif" }}>Clé API Google Gemini pour la transcription des messages WhatsApp (aistudio.google.com)</div>
          </div>
          <FInput label={tx("farmName",lang)} value={form.farmName} onChange={v=>setForm(f=>({...f,farmName:v}))} rtl={rtl}/>
          <FInput label={tx("farmLocation",lang)} value={form.location} onChange={v=>setForm(f=>({...f,location:v}))} rtl={rtl}/>
        </div>
      </Card>

<Card style={{ marginBottom:22 }}>
        <h3 style={{ margin:"0 0 12px", color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:15 }}>📐 Superficies & arbres</h3>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 18px" }}>
          <FInput label={tx("citrusHa",lang)} value={form.citrusHa} onChange={v=>setForm(f=>({...f,citrusHa:v}))} type="number" rtl={rtl}/>
          <FInput label={tx("oliveHa",lang)} value={form.oliveHa} onChange={v=>setForm(f=>({...f,oliveHa:v}))} type="number" rtl={rtl}/>
          <FInput label={tx("picolineCount",lang)} value={form.picolineCount} onChange={v=>setForm(f=>({...f,picolineCount:v}))} type="number" rtl={rtl}/>
        </div>
        <div style={{ background:"#EEF5E4", borderRadius:10, padding:"10px 14px", fontSize:13, color:C.olive, fontWeight:600, marginTop:4 }}>
          📊 Total : {(+form.citrusHa||0)+(+form.oliveHa||0)} ha · Citrus {form.citrusHa} ha · Olive {form.oliveHa} ha · {form.picolineCount} Picholine
        </div>
      </Card>

<div style={{ display:"flex", gap:12, alignItems:"center" }}>
        <Btn onClick={save} color={C.olive}>{tx("saveSettings",lang)}</Btn>
        {saved && <span style={{ color:C.success, fontWeight:700, fontSize:13 }}>{tx("saved",lang)}</span>}
      </div>
    </div>
  );
}

// ── Fertilizers ───────────────────────────────────────────────────────────────
function FertilizersView({ data, db, lang }) {
  const [tab, setTab] = useState("stock");
  const [modalFert, setModalFert] = useState(null);
  const [modalApp, setModalApp] = useState(null);
  const [formFert, setFormFert] = useState({});
  const [formApp, setFormApp] = useState({});
  const rtl = lang === "ar";

const zOpts = data.zones.map(z => ({ v: z.id, l: z.name }));
  const fertOpts = data.fertilizers.map(f => ({ v: f.id, l: f.name }));
  const typeOpts = ["Complexe","Azoté","Phosphaté","Potassique","Calcique","Magnésien","Organique","Foliaire","Autre"];
  const freqOpts = ["Quotidien","Hebdomadaire","Bimensuel","Mensuel","Trimestriel","Saisonnier","Ponctuel"];
  const methodOpts = ["Fertigation","Épandage","Foliaire","Injection sol","Autre"];
  const unitOpts = ["kg","L","t","sac"];

const saveFert = () => {
    const f = { ...formFert, stockQty: +formFert.stockQty, minStock: +formFert.minStock, dosePerHa: +formFert.dosePerHa, seasonTarget: +formFert.seasonTarget||0 };
    modalFert === "add" ? db.addFertilizer(f) : db.updateFertilizer(f);
    setModalFert(null);
  };

const saveApp = () => {
    db.addFertApp(formApp);
    setModalApp(null);
  };

const deleteFert = id => db.deleteFertilizer(id);
  const deleteApp  = id => db.deleteFertApp(id);

const lowStock = data.fertilizers.filter(f => f.stockQty <= f.minStock);
  const totalApplied = data.fertApplications.reduce((s, a) => s + a.qtyApplied, 0);

const typeColor = {
    "Azoté":"#E3F0FB","Phosphaté":"#FFF0E0","Potassique":"#F3E8FF",
    "Complexe":"#E8F5E9","Calcique":"#FFF9E0","Magnésien":"#E0F7FA",
    "Organique":"#F1F8E9","Foliaire":"#F9FBE7","Autre":"#F5F5F5",
  };
  const typeFg = {
    "Azoté":C.info,"Phosphaté":C.warning,"Potassique":"#7B5EA7",
    "Complexe":C.success,"Calcique":C.gold,"Magnésien":"#00838F",
    "Organique":C.leaf,"Foliaire":C.olive,"Autre":C.muted,
  };

return (
    <div dir={rtl ? "rtl" : "ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>🌱 {tx("fertilizers",lang)}</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <Btn onClick={() => { setFormApp({ fertilizerId:"",zone:"",date:"",qtyApplied:"",frequency:"Mensuel",nextDue:"",method:"Fertigation",notes:"" }); setModalApp("add"); }} color={C.leaf} outline>+ {tx("newApplication",lang)}</Btn>
          <Btn onClick={() => { setFormFert({ name:"",type:"Complexe",unit:"kg",stockQty:"",minStock:"",supplier:"",dosePerHa:"",notes:"" }); setModalFert("add"); }} color={C.leaf}>+ {tx("newFertilizer",lang)}</Btn>
        </div>
      </div>

{/* Summary stats */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))", gap:12, marginBottom:20 }}>
        <Stat label={tx("fertStock",lang)} value={data.fertilizers.length} color={C.leaf} />
        <Stat label={tx("applications",lang)} value={data.fertApplications.length} color={C.olive} />
        <Stat label={tx("totalApplied",lang)} value={`${totalApplied.toLocaleString()}`} sub="kg / L total" color={C.info} />
        <Stat label={tx("lowStock",lang)} value={lowStock.length} color={lowStock.length > 0 ? C.danger : C.success} />
      </div>

{/* Low stock alert */}
      {lowStock.length > 0 && (
        <div style={{ background:"#FDECEA", border:`1.5px solid ${C.danger}`, borderRadius:12, padding:"12px 16px", marginBottom:18, display:"flex", gap:12, alignItems:"center" }}>
          <span style={{ fontSize:22 }}>⚠️</span>
          <div>
            <div style={{ fontWeight:700, color:C.danger, fontSize:13 }}>Stock faible : {lowStock.map(f=>f.name).join(", ")}</div>
            <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>Réapprovisionnement recommandé avant la prochaine application.</div>
          </div>
        </div>
      )}

{/* Tabs */}
      <div style={{ display:"flex", gap:0, marginBottom:18, borderBottom:`2px solid #EEE6DA` }}>
        {["stock","applications"].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding:"9px 22px", fontWeight:700, fontSize:13, border:"none", background:"none",
            color: tab===t ? C.leaf : C.muted, cursor:"pointer",
            borderBottom: tab===t ? `3px solid ${C.leaf}` : "3px solid transparent",
            marginBottom:-2, fontFamily:"inherit",
          }}>
            {t === "stock" ? `🌱 ${tx("fertStock",lang)} (${data.fertilizers.length})` : `📋 ${tx("applications",lang)} (${data.fertApplications.length})`}
          </button>
        ))}
      </div>

{/* STOCK TAB */}
      {tab === "stock" && (
        <div style={{ display:"grid", gap:12 }}>
          {[...data.fertilizers].sort((a, b) => {
            const mainOrder = ['f_ammo','f_map','f_solucros','58235a24-af44-4e10-b90b-f64071d210b9','f_valfer'];
            const ai = mainOrder.indexOf(a.id), bi = mainOrder.indexOf(b.id);
            if (ai !== -1 && bi !== -1) return ai - bi;
            if (ai !== -1) return -1;
            if (bi !== -1) return 1;
            return b.stockQty - a.stockQty;
          }).map(f => {
            const pct = Math.min(100, Math.round((f.stockQty / Math.max(f.minStock * 3, 1)) * 100));
            const isLow = f.stockQty <= f.minStock;
            const bg = typeColor[f.type] || "#F5F5F5";
            const fg = typeFg[f.type] || C.muted;
            return (
              <Card key={f.id} style={{ padding:"16px 20px", borderLeft:`5px solid ${isLow ? C.danger : C.leaf}` }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
                  <div style={{ flex:1 }}>
                    <div style={{ display:"flex", gap:8, alignItems:"center", flexWrap:"wrap", marginBottom:8 }}>
                      <span style={{ fontWeight:700, fontSize:15, color:C.soil }}>{f.name}</span>
                      <span style={{ background:bg, color:fg, padding:"2px 9px", borderRadius:20, fontSize:11, fontWeight:700 }}>{f.type}</span>
                      {isLow && <span style={{ background:"#FDECEA", color:C.danger, padding:"2px 9px", borderRadius:20, fontSize:11, fontWeight:700 }}>⚠ Stock bas</span>}
                    </div>
                    {/* Stock bar */}
                    <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:8 }}>
                      <div style={{ flex:1, background:"#F0EBE0", borderRadius:6, height:8, overflow:"hidden" }}>
                        <div style={{ width:`${pct}%`, height:8, borderRadius:6, background: isLow ? C.danger : C.leaf, transition:"width 0.5s" }} />
                      </div>
                      <span style={{ fontWeight:800, fontSize:15, color: isLow ? C.danger : C.soil, minWidth:70, textAlign:"right" }}>
                        {f.stockQty.toLocaleString()} {f.unit}
                      </span>
                    </div>
                    <div style={{ display:"flex", gap:16, flexWrap:"wrap", fontSize:12, color:C.muted }}>
                      <span>Min: <strong style={{ color:C.soil }}>{f.minStock} {f.unit}</strong></span>
                      <span>Dose: <strong style={{ color:C.soil }}>{f.dosePerHa} {f.unit}/ha</strong></span>
                      {f.supplier && <span>🏭 {f.supplier}</span>}
                    </div>
                    {f.notes && <div style={{ fontSize:11, color:C.muted, marginTop:5, fontStyle:"italic" }}>{f.notes}</div>}
                  </div>
                  <div style={{ display:"flex", gap:6, marginLeft:12 }}>
                    <Btn small outline onClick={() => { setFormFert({...f}); setModalFert("edit"); }} color={C.bark}>✏</Btn>
                    <Btn small outline onClick={() => deleteFert(f.id)} color={C.danger}>✕</Btn>
                  </div>
                </div>
              </Card>
            );
          })}
          {data.fertilizers.length === 0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucun engrais enregistré.</p>}
        </div>
      )}

{/* APPLICATIONS TAB */}
      {tab === "applications" && (
        <div style={{ display:"grid", gap:10 }}>
          {data.fertApplications.slice().reverse().map(a => {
            const fert = data.fertilizers.find(f => f.id === a.fertilizerId);
            const zone = data.zones.find(z => z.id === a.zone);
            const isOverdue = a.nextDue && new Date(a.nextDue) < today;
            return (
              <Card key={a.id} style={{ padding:"13px 18px", borderLeft:`4px solid ${isOverdue ? C.warning : C.leaf}` }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                  <div style={{ flex:1 }}>
                    <div style={{ display:"flex", gap:8, alignItems:"center", flexWrap:"wrap", marginBottom:5 }}>
                      <span style={{ fontWeight:700, fontSize:14, color:C.soil }}>{fert?.name || "—"}</span>
                      <span style={{ background:"#EEF5E4", color:C.leaf, padding:"2px 8px", borderRadius:10, fontSize:11, fontWeight:600 }}>{a.method}</span>
                      <span style={{ background:"#F5F0E8", color:C.muted, padding:"2px 8px", borderRadius:10, fontSize:11, fontWeight:600 }}>{a.frequency}</span>
                    </div>
                    <div style={{ fontSize:11, color:C.muted, display:"flex", gap:14, flexWrap:"wrap" }}>
                      <span>📍 {zone?.name || "—"}</span>
                      <span>📅 {a.date}</span>
                      <span style={{ fontWeight:700, color:C.leaf }}>⚖ {a.qtyApplied} {fert?.unit || ""}</span>
                      {a.nextDue && (
                        <span style={{ fontWeight:600, color: isOverdue ? C.danger : C.info }}>
                          {isOverdue ? "⏰ En retard" : "🗓"} Prochain: {a.nextDue}
                        </span>
                      )}
                    </div>
                    {a.notes && <div style={{ fontSize:11, color:C.muted, marginTop:3, fontStyle:"italic" }}>{a.notes}</div>}
                  </div>
                  <Btn small outline onClick={() => deleteApp(a.id)} color={C.danger}>✕</Btn>
                </div>
              </Card>
            );
          })}
          {data.fertApplications.length === 0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucune application enregistrée.</p>}
        </div>
      )}

{/* Add/Edit Fertilizer Modal */}
      {modalFert && (
        <Modal title={modalFert === "add" ? tx("newFertilizer",lang) : tx("edit",lang)} onClose={() => setModalFert(null)} rtl={rtl}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <div style={{ gridColumn:"1/-1" }}>
              <FInput label={tx("fertName",lang)} value={formFert.name} onChange={v=>setFormFert(f=>({...f,name:v}))} rtl={rtl}/>
            </div>
            <FInput label={tx("fertType",lang)} value={formFert.type} onChange={v=>setFormFert(f=>({...f,type:v}))} options={typeOpts} rtl={rtl}/>
            <FInput label={tx("unit",lang)} value={formFert.unit} onChange={v=>setFormFert(f=>({...f,unit:v}))} options={unitOpts} rtl={rtl}/>
            <FInput label={tx("stockQty",lang)} value={formFert.stockQty} onChange={v=>setFormFert(f=>({...f,stockQty:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("minStock",lang)} value={formFert.minStock} onChange={v=>setFormFert(f=>({...f,minStock:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("dosePerHa",lang)} value={formFert.dosePerHa} onChange={v=>setFormFert(f=>({...f,dosePerHa:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("supplier",lang)} value={formFert.supplier} onChange={v=>setFormFert(f=>({...f,supplier:v}))} rtl={rtl}/>
          </div>
          <FInput label={tx("notes",lang)} value={formFert.notes} onChange={v=>setFormFert(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={() => setModalFert(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveFert} color={C.leaf}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}

{/* Add Application Modal */}
      {modalApp && (
        <Modal title={tx("newApplication",lang)} onClose={() => setModalApp(null)} rtl={rtl}>
          <FInput label={tx("fertName",lang)} value={formApp.fertilizerId} onChange={v=>setFormApp(f=>({...f,fertilizerId:v}))} options={fertOpts} rtl={rtl}/>
          {formApp.fertilizerId && (() => {
            const fert = data.fertilizers.find(f => f.id === formApp.fertilizerId);
            return fert ? (
              <div style={{ background:"#EEF5E4", borderRadius:8, padding:"8px 12px", marginBottom:10, fontSize:12, color:C.leaf, fontWeight:600 }}>
                📦 Stock disponible : {fert.stockQty} {fert.unit} · Dose recommandée : {fert.dosePerHa} {fert.unit}/ha
              </div>
            ) : null;
          })()}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label={tx("zone",lang)} value={formApp.zone} onChange={v=>setFormApp(f=>({...f,zone:v}))} options={zOpts} rtl={rtl}/>
            <FInput label={tx("applied",lang)+" ("+( data.fertilizers.find(f=>f.id===formApp.fertilizerId)?.unit||"kg")+")"} value={formApp.qtyApplied} onChange={v=>setFormApp(f=>({...f,qtyApplied:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("date",lang)} value={formApp.date} onChange={v=>setFormApp(f=>({...f,date:v}))} type="date" rtl={rtl}/>
            <FInput label={tx("nextDue",lang)} value={formApp.nextDue} onChange={v=>setFormApp(f=>({...f,nextDue:v}))} type="date" rtl={rtl}/>
            <FInput label={tx("frequency",lang)} value={formApp.frequency} onChange={v=>setFormApp(f=>({...f,frequency:v}))} options={freqOpts} rtl={rtl}/>
            <FInput label="Méthode" value={formApp.method} onChange={v=>setFormApp(f=>({...f,method:v}))} options={methodOpts} rtl={rtl}/>
          </div>
          <FInput label={tx("notes",lang)} value={formApp.notes} onChange={v=>setFormApp(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={() => setModalApp(null)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveApp} color={C.leaf}>{tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Supabase client ───────────────────────────────────────────────────────────
const SB_URL = "https://imzfqogxdbgqyobzhhvo.supabase.co";
const SB_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImltemZxb2d4ZGJncXlvYnpoaHZvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzE5NDY2MDMsImV4cCI6MjA4NzUyMjYwM30.LQ4b_vVNPzJvK-ukiqHSN1CB00DzuIpTOqKxc3jxEVY";

// Map Supabase snake_case rows → app camelCase shape
function mapZone(z) { return { id:z.id, name:z.name, crop:z.crop, variety:z.variety, ha:z.ha, trees:z.trees, type:z.type, notes:z.notes }; }
function mapWorker(w) { 
  let r = w.daily_rate; if (r === 93) r = 100;
  return { id:w.id, name:w.name, nickname:w.nickname||"", role:w.role, phone:w.phone||"", active:w.active, dailyRate:r||100, payType:w.pay_type||"daily" }; 
}
function mapTask(t) { return { id:t.id, title:t.title, zone:t.zone_id, assignee:t.assignee_id, due:t.due_date, status:t.status, season:t.season, priority:t.priority, notes:t.notes }; }
function mapIrrigation(i) { return { id:i.id, zone:i.zone_id, date:i.date, duration:i.duration_h, flow:i.flow_m3h, notes:i.notes }; }
function mapHarvest(h) { return { id:h.id, zone:h.zone_id, date:h.date, crop:h.crop||"Orange", boxes:h.boxes||0, avgKg:h.avg_kg_per_box||25.08, qty:h.qty_kg, unit:"kg", quality:h.quality, notes:h.notes||"" }; }
function mapPest(p) { return { id:p.id, zone:p.zone_id, name:p.name, status:p.status, detected:p.detected_date, treatment:p.treatment, severity:p.severity, notes:p.notes }; }
function mapExpense(e) { return { id:e.id, category:e.category, description:e.description, amount:e.amount, date:e.date, zone:e.zone_id||"", notes:e.notes||"", media_url:e.media_url||"" }; }
function mapFertilizer(f) { return { id:f.id, name:f.name, type:f.type, unit:f.unit, stockQty:f.stock_qty, minStock:f.min_stock, seasonTarget:f.season_target, supplier:f.supplier, dosePerHa:f.dose_per_ha, notes:f.notes }; }
function mapFertApp(a) { return { id:a.id, fertilizerId:a.fertilizer_id, zone:a.zone_id, date:a.date, qtyApplied:a.qty_applied, frequency:a.frequency, nextDue:a.next_due, method:a.method, notes:a.notes }; }
function mapOO(o) { return { id:o.id, campaign:o.campaign, date:o.date, zone:o.zone_id, olivesIn:o.olives_in_kg, oilOut:o.oil_out_l, pressLocation:o.press_location, acidity:o.acidity_pct, peroxides:o.peroxides, polyphenols:o.polyphenols_mg_kg, k232:o.k232, k268:o.k268, classification:o.classification, notes:o.notes }; }
function mapSettings(s) { return { farmName:s.farm_name, location:s.location, citrusHa:s.citrus_ha, oliveHa:s.olive_ha, picolineCount:s.picoline_count, geminiKey:s.gemini_key||"" }; }

async function loadAllData() {
  // Always use Morocco time (UTC+1) for date calculations
  const _moroccoNow = new Date(Date.now() + 3600000); // UTC+1
  const _today = _moroccoNow.toISOString().slice(0,10);
  const _sixMonthsAgo = new Date(Date.now() - 183*24*60*60*1000).toISOString().slice(0,10);
  const [settings, zones, workers, parcels, tasks, irrigation, harvests, pests, expenses, fertilizers, fertApps, oliveoil, energyBills, leafAnalyses, messages, fertigationSessions, fertigationRecipes, phytoProducts, phytoApplications, ooAnalyses, foliarProgrammesRaw, foliarSessionsRaw, foliarMixRaw, fertigationLogToday, fertigationLogHistory, todayFertigMsgs, chats, pumpLogs, solarDaily, meterReadings, parcelBrainRaw] = await Promise.all([
    sb.select("settings","id=eq.main").then(r=>r[0]),
    sb.select("zones","order=id"),
    sb.select("workers","order=name"),
    sb.select("parcels","order=name&limit=100"),
    sb.select("tasks","order=due_date"),
    sb.select("irrigation","order=date.desc"),
    sb.select("harvests","order=date.desc"),
    sb.select("pests","order=detected_date.desc"),
    sb.select("expenses","order=date.desc"),
    sb.select("fertilizers","order=name"),
    sb.select("fert_applications","order=date.desc"),
    sb.select("olive_oil_batches","order=date.desc"),
    sb.select("energy_bills","order=period.desc"),
    sb.select("leaf_analyses","order=date.desc"),
    sb.select("messages","is_archived=not.is.true&order=date.desc"),
    sb.select("fertigation_sessions","order=date.desc"),
    sb.select("fertigation_recipes","order=name"),
    sb.select("phyto_products","order=name"),
    sb.select("phyto_applications","order=date.desc"),
    sb.select("foliar_programmes","order=created_at.desc"),
    sb.select("foliar_sessions","order=date.asc"),
    sb.select("foliar_mix","order=id.asc"),
    sb.select("oo_analyses","order=date.desc"),
    sb.select("fertigation_log",`date=eq.${_today}&order=submitted_at.desc`).catch(()=>[]),
    sb.select("fertigation_log",`date=gte.${_sixMonthsAgo}&order=date.desc,bloc_name`).catch(()=>[]),
    // Dedicated today-only fertigation query — no is_archived filter, no row-limit concern
    sb.select("messages",`media_type=eq.fertigation_bundle&date=eq.${_today}&order=created_at.desc`).catch(()=>[]),
    // Live chat messages
    sb.select("chats","order=created_at.desc&limit=200").catch(()=>[]),
    // Pump logs — last 30 days
    sb.select("pump_logs",`toggled_at=gte.${new Date(Date.now()-30*24*60*60*1000).toISOString()}&order=toggled_at.desc`).catch(()=>[]),
    // Solar / grid daily consumption — last 12 months
    sb.select("farm_energy_daily",`date=gte.${new Date(Date.now()-365*24*60*60*1000).toISOString().slice(0,10)}&order=date.desc`).catch(()=>[]),
    // Meter hourly readings — last 3 months
    sb.select("farm_meter_readings",`date=gte.${new Date(Date.now()-90*24*60*60*1000).toISOString().slice(0,10)}&order=ts.desc`).catch(()=>[]),
    // Parcel brain — AI synthesis per bloc
    sb.select("parcel_brain","order=id").catch(()=>[]),
  ]);
  return {
    settings: mapSettings(settings),
    zones: zones.map(mapZone),
    parcels: parcels,
    workers: workers.map(mapWorker),
    tasks: tasks.map(mapTask),
    irrigation: irrigation.map(mapIrrigation),
    harvests: harvests.map(mapHarvest),
    pests: pests.map(mapPest),
    expenses: expenses.map(mapExpense),
    fertilizers: fertilizers.map(mapFertilizer),
    fertApplications: fertApps.map(mapFertApp),
    oliveoil: oliveoil.map(mapOO),
    leafAnalyses: leafAnalyses.map(function(a){ return {
      id:a.id, report_ref: "Labomag", date_prelevement:a.date, date_analyse:a.date,
      parcelle:a.zone_id, zone_id:a.zone_id, culture:a.variete, variete:a.variete,
      n_total:a.n_pct, p:a.p_pct, k:a.k_pct, mg:a.mg_pct, ca:a.ca_pct,
      na:a.na_ppm, cl:a.cl_pct, zn:a.zn_ppm, cu:a.cu_ppm, mn:a.mn_ppm, fe:a.fe_ppm, b:a.b_ppm, media_url:a.media_url
    }; }),
    messages: messages.map(m=>({
          id:m.id, date:m.date, created_at:m.created_at, sender:m.sender, summary:m.summary, content:m.content,
          actionRequired:m.action_required, actionDone:m.action_done,
          tags:m.tags||"", notes:m.notes||"", media_url:m.media_url, media_type:m.media_type
    })),
    todayFertigMsgs: todayFertigMsgs.map(m=>({
          id:m.id, date:m.date, created_at:m.created_at, content:m.content, media_type:m.media_type
    })),
    fertigationSessions: fertigationSessions.map(s=>({
      id:s.id, date:s.date, recipeId:s.recipe_id, treated:s.treated,
      operatorId:s.operator_id, notes:s.notes,
      blocTimings: s.bloc_timings ? (typeof s.bloc_timings==="string" ? JSON.parse(s.bloc_timings) : s.bloc_timings) : [],
    })),
    fertigationRecipes: fertigationRecipes.map(r=>({
      id:r.id, name:r.name, variety:r.variety, active:r.active,
      products: r.products ? (typeof r.products==="string" ? JSON.parse(r.products) : r.products) : [],
      blocs: r.blocs ? (typeof r.blocs==="string" ? JSON.parse(r.blocs) : r.blocs) : [],
      notes:r.notes,
    })),
    phytoProducts: phytoProducts.map(p=>({
      id:p.id, name:p.name, category:p.category, activeIngredient:p.active_ingredient,
      supplier:p.supplier, unit:p.unit, stockQty:p.stock_qty, minStock:p.min_stock,
      pricePerUnit:p.price_per_unit, phi:p.phi, notes:p.notes,
    })),
    phytoApplications: phytoApplications.map(a=>({
      id:a.id, date:a.date, productId:a.product_id, productName:a.product_name,
      zoneId:a.zone_id, qtyUsed:a.qty_used, unit:a.unit,
      operatorId:a.operator_id, method:a.method, phi:a.phi,
      harvestSafeDate:a.harvest_safe_date, notes:a.notes,
    })),
    foliarProgrammes: foliarProgrammesRaw.map(function(p) {
      return {
        id: p.id, name: p.name, zone_ids: p.zone_ids||[], sprayer_volume_t: p.sprayer_volume_t||2,
        status: p.status||"planned", notes: p.notes||"",
        sessions: foliarSessionsRaw.filter(function(s){ return s.programme_id===p.id; }).map(function(s){
          return { id:s.id, programme_id:s.programme_id, date:s.date, sprayer_count:s.sprayer_count, operator_id:s.operator_id, notes:s.notes };
        }),
        mix: foliarMixRaw.filter(function(m){ return m.programme_id===p.id; }).map(function(m){
          return { id:m.id, programme_id:m.programme_id, product_id:m.product_id, product_table:m.product_table, product_name:m.product_name, qty_per_sprayer:m.qty_per_sprayer, unit:m.unit };
        }),
      };
    }),
    ooAnalyses: ooAnalyses.map(function(a){ return {
      id:a.id, report_ref: "Labomag", lot:a.lot_id, zone_id: 'b12',
      date_analyse:a.date, variete:a.variete, acidite:a.acidite, indice_peroxyde:a.indice_peroxyde,
      conforme: (a.acidite <= 0.8 && a.indice_peroxyde <= 20), media_url:a.media_url
    }; }),
    energyBills: energyBills.map(b=>({
      id:b.id, period:b.period, billRef:b.bill_ref, issuedDate:b.issued_date,
      dueDate:b.due_date, totalTTC:b.total_ttc, totalHT:b.total_ht, tva:b.tva,
      kwhNormal:b.kwh_normal, kwhCreux:b.kwh_creux, kwhPointe:b.kwh_pointe,
      kwhTotal:b.kwh_total, puissanceKVA:b.puissance_kva, cosP:b.cos_p,
      redevancePuissance:b.redevance_puissance, provider:b.provider, notes:b.notes, paid:b.paid||false, scans: b.scans ? (typeof b.scans === "string" ? JSON.parse(b.scans) : b.scans) : []
    })),
    fertigationLogToday: (fertigationLogToday||[]).map(r=>({
      id:r.id, date:r.date, blocName:r.bloc_name,
      ingredients: r.ingredients ? (typeof r.ingredients==="string" ? JSON.parse(r.ingredients) : r.ingredients) : [],
      timeStr:r.time_str, submittedAt:r.submitted_at,
    })),
    fertigationLogHistory: (fertigationLogHistory||[]).map(r=>({
      id:r.id, date:r.date, blocName:r.bloc_name,
      ingredients: r.ingredients ? (typeof r.ingredients==="string" ? JSON.parse(r.ingredients) : r.ingredients) : [],
      timeStr:r.time_str, submittedAt:r.submitted_at,
    })),
    chats: (chats||[]).map(c=>({
      id:c.id, channel:c.channel, sender:c.sender, messageType:c.message_type,
      textContent:c.text_content, audioUrl:c.audio_url, audioTranscription:c.audio_transcription,
      mediaUrls:c.media_urls, isUrgent:c.is_urgent, createdAt:c.created_at,
    })),
    pumpLogs: (pumpLogs||[]).map(p=>({
      id:p.id, pumpName:p.pump_name, status:p.status, toggledBy:p.toggled_by, toggledAt:p.toggled_at,
    })),
    solarDaily: (solarDaily||[]).map(d=>({
      date:d.date, costMad:d.cost_mad, savedMad:d.saved_mad,
      consumedKwh:d.consumed_kwh, pvKwh:d.pv_yield_kwh, gridKwh:d.grid_pull_kwh,
    })),
    meterReadings: (meterReadings||[]).map(r=>({
      id:r.id, ts:r.ts, date:r.date, hour:r.hour,
      cumulativeKwh:r.cumulative_kwh, deltaKwh:r.delta_kwh,
      tariff:r.tariff, costDh:r.cost_dh,
    })),
    parcelBrain: (parcelBrainRaw||[]).map(b=>({
      id:b.id, parcelName:b.parcel_name, healthScore:b.health_score,
      synthesis:b.synthesis, lastVisitDate:b.last_visit_date, updatedAt:b.updated_at,
    })),
  };
}

function PicholineView({ data, db, lang }) {
  var [tab, setTab]       = useState("production");  // "production" | "analyses"
  var [modal, setModal]   = useState(false);
  var [modalType, setModalType] = useState("");      // "batch" | "analysis"
  var [detail, setDetail] = useState(null);
  var [selAnalysis, setSelAnalysis] = useState(null);
  var [form, setForm]     = useState({});
  var [importing, setImp] = useState(false);
  var fileRef = useRef();
  var geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";
  var rtl = lang === "ar";

var batches  = data.oliveoil   || [];
  var analyses = data.ooAnalyses || [];

// ── PDF import for lab analysis ───────────────────────────────
  function importPDF(file) {
    if (!geminiKey) { alert("Ajoutez votre clé Gemini dans Paramètres."); return; }
    setImp(true);
    var fr = new FileReader();
    fr.onload = function(e) {
      var b64 = e.target.result.split(",")[1];
      var prompt = "Extract all data from this Labomag olive oil analysis report as JSON with these exact fields: "
        + "report_ref, lot, date_prelevement (YYYY-MM-DD), date_analyse (YYYY-MM-DD), date_edition (YYYY-MM-DD), variete, "
        + "acidite, indice_peroxyde, humidite, lipides, proteines, energie_kcal, energie_kj, "
        + "ag_satures, ag_mono_insatures, ag_poly_insatures, ag_insatures, "
        + "c14_0, c16_0, c16_1, c17_0, c17_1, c18_0, c18_1, c18_2, c18_3, c20_0, c20_1, c22_0. "
        + "For values reported as <0.05 use 0.05. All values as numbers. Return ONLY the JSON object.";
      var payload = {
        contents: [{ parts: [{ text: prompt }, { inline_data: { mime_type: "application/pdf", data: b64 } }] }],
        generationConfig: { temperature: 0 }
      };
      fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=" + geminiKey, {
        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
      })
      .then(function(r){ return r.json(); })
      .then(function(d) {
        var txt = "";
        try { txt = d.candidates[0].content.parts[0].text; } catch(e) {}
        txt = txt.replace(/```json\n?/g,"").replace(/```\n?/g,"").trim();
        var parsed = JSON.parse(txt);
        setForm({...parsed, zone_id:"b12"});
        setImp(false);
        setModalType("analysis");
        setModal(true);
      })
      .catch(function(err) { alert("Erreur extraction: " + err.message); setImp(false); });
    };
    fr.readAsDataURL(file);
  }

function saveBatch() { db.addOO(form); setModal(false); }
  function saveAnalysis() { db.addOoAnalysis(form); setModal(false); setSelAnalysis(null); }

// ── Quality bar (for analysis detail) ────────────────────────
  function QBar({ label, val, limit }) {
    if (val===null || val===undefined) return null;
    var ratio = val/limit.max;
    var color = ratio<=0.5?C.success:ratio<=0.75?"#5B9BD5":ratio<=1.0?C.warning:C.danger;
    var label2 = ratio<=0.5?"Excellent":ratio<=0.75?"Bon":ratio<=1.0?"Conforme":"Hors norme";
    var pct = Math.min(100,(val/(limit.max*1.2))*100);
    var limitPct = (1/1.2)*100;
    return (
      <div style={{ marginBottom:12 }}>
        <div style={{ display:"flex", justifyContent:"space-between", marginBottom:4 }}>
          <span style={{ fontSize:13, fontFamily:"sans-serif", color:C.soil, fontWeight:500 }}>{label}</span>
          <div style={{ display:"flex", alignItems:"center", gap:8 }}>
            <span style={{ fontSize:14, fontWeight:700, color:color }}>{val}</span>
            <span style={{ fontSize:11, color:C.muted }}>{limit.unit}</span>
            <span style={{ fontSize:11, fontWeight:700, color:color, background:color+"22", padding:"2px 8px", borderRadius:12 }}>{label2}</span>
          </div>
        </div>
        <div style={{ height:10, background:"#EEE", borderRadius:5, position:"relative" }}>
          <div style={{ position:"absolute", left:limitPct+"%", top:0, bottom:0, width:2, background:C.danger+"88" }}/>
          <div style={{ width:pct+"%", height:"100%", background:color, borderRadius:5 }}/>
        </div>
        <div style={{ fontSize:10, color:C.muted, textAlign:"right", marginTop:2 }}>{"max: "+limit.max+" "+limit.unit}</div>
      </div>
    );
  }

// ── Fatty acid row ────────────────────────────────────────────
  function FARow({ fa, val }) {
    var refs = { c14_0:{min:0,max:0.05,label:"Myristique C14:0"}, c16_0:{min:7.5,max:20.0,label:"Palmitique C16:0"},
      c16_1:{min:0.3,max:3.5,label:"Palmitoléique C16:1"}, c17_0:{min:0,max:0.3,label:"Heptadécanoïque C17:0"},
      c17_1:{min:0,max:0.3,label:"C17:1"}, c18_0:{min:0.5,max:5.0,label:"Stéarique C18:0"},
      c18_1:{min:55,max:83,label:"Oléique C18:1 ★"}, c18_2:{min:2.5,max:21.0,label:"Linoléique C18:2"},
      c18_3:{min:0,max:1.2,label:"Linolénique C18:3"}, c20_0:{min:0,max:0.6,label:"Arachidique C20:0"},
      c20_1:{min:0,max:0.4,label:"Gadoléique C20:1"}, c22_0:{min:0,max:0.2,label:"Béhénique C22:0"} };
    var r = refs[fa]; if (!r) return null;
    var inRange = val>=r.min && val<=r.max;
    var isKey = fa==="c18_1";
    var color = inRange?C.success:C.danger;
    var pct = Math.min(100,Math.max(0,((val-0)/(r.max*1.3))*100));
    var loP = (r.min/(r.max*1.3))*100, hiP = (r.max/(r.max*1.3))*100;
    return (
      <div style={{ display:"grid", gridTemplateColumns:"160px 50px 1fr 100px 60px", gap:8, alignItems:"center", padding:"5px 0", borderBottom:"1px solid #F0EBE0", background:isKey?"#FFF8EC":"transparent" }}>
        <span style={{ fontSize:12, color:C.soil, fontWeight:isKey?700:400 }}>{r.label}</span>
        <span style={{ fontSize:13, fontWeight:700, color:color, textAlign:"right" }}>{val}</span>
        <div style={{ height:7, background:"#EEE", borderRadius:4, position:"relative" }}>
          <div style={{ position:"absolute", left:loP+"%", right:(100-hiP)+"%", height:"100%", background:"rgba(74,124,63,0.2)", borderRadius:4 }}/>
          <div style={{ position:"absolute", left:pct+"%", top:-1, width:3, height:9, background:color, borderRadius:2, transform:"translateX(-50%)" }}/>
        </div>
        <span style={{ fontSize:10, color:C.muted, textAlign:"center" }}>{r.min+" – "+r.max}</span>
        <span style={{ fontSize:11, fontWeight:700, color:color, background:color+"22", padding:"1px 6px", borderRadius:10, textAlign:"right" }}>{inRange?"✓":"⚠"}</span>
      </div>
    );
  }

// ── Analysis detail ───────────────────────────────────────────
  function AnalysisDetail({ a }) {
    var limits = { acidite:{max:0.8,unit:"g/100g"}, indice_peroxyde:{max:20,unit:"méq O2/kg"}, humidite:{max:0.20,unit:"g/100g"} };
    return (
      <div>
        <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:16 }}>
          <button onClick={function(){ setSelAnalysis(null); }} style={{ background:"none", border:"none", color:C.bark, fontSize:20, cursor:"pointer" }}>{"<"}</button>
          <div>
            <div style={{ fontWeight:700, fontSize:16, color:C.soil }}>{a.lot+" — "+a.variete}</div>
            <div style={{ fontSize:12, color:C.muted }}>{a.report_ref+" | "+a.date_analyse}</div>
          </div>
          {a.conforme && <span style={{ marginLeft:"auto", background:C.success, color:"#fff", borderRadius:20, padding:"4px 14px", fontSize:12, fontWeight:700 }}>EVOO ✓</span>}
        </div>
        <Card style={{ padding:"16px 20px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.bark, textTransform:"uppercase", marginBottom:12 }}>Indicateurs de Qualité</div>
          <QBar label="Acidité" val={a.acidite} limit={limits.acidite}/>
          <QBar label="Indice de peroxyde" val={a.indice_peroxyde} limit={limits.indice_peroxyde}/>
          <QBar label="Humidité" val={a.humidite} limit={limits.humidite}/>
        </Card>
        <Card style={{ padding:"16px 20px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.bark, textTransform:"uppercase", marginBottom:8 }}>Profil des Acides Gras (%)</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:10, marginBottom:12 }}>
            <Stat label="Saturés"       value={a.ag_satures+"%"}       color="#888"/>
            <Stat label="Mono-insaturés" value={a.ag_mono_insatures+"%"} color={C.success}/>
            <Stat label="Poly-insaturés" value={a.ag_poly_insatures+"%"} color="#5B9BD5"/>
            <Stat label="Total insaturés" value={a.ag_insatures+"%"}    color={C.olive}/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"160px 50px 1fr 100px 60px", gap:8, padding:"4px 0", marginBottom:4 }}>
            {["Acide Gras","%","Position","Norme",""].map(function(h){ return <span key={h} style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase" }}>{h}</span>; })}
          </div>
          {["c18_1","c18_2","c18_3","c16_0","c16_1","c18_0","c20_0","c20_1","c22_0","c14_0","c17_0","c17_1"].map(function(fa){
            return <FARow key={fa} fa={fa} val={a[fa]}/>;
          })}
        </Card>
        <Card style={{ padding:"16px 20px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.bark, textTransform:"uppercase", marginBottom:10 }}>Valeurs Nutritionnelles</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:10 }}>
            <Stat label="Lipides"   value={a.lipides+"g"}       color={C.bark}/>
            <Stat label="Protéines" value={a.proteines+"g"}     color={C.bark}/>
            <Stat label="Énergie"   value={a.energie_kcal+" kcal"} color={C.bark}/>
            <Stat label="Énergie"   value={a.energie_kj+" kJ"}  color={C.bark}/>
          </div>
        </Card>
        {a.notes && <Card style={{ padding:"12px 16px", background:"#FFFBF0", borderLeft:"4px solid "+C.warning }}><div style={{ fontSize:12, color:C.soil }}>{a.notes}</div></Card>}
      </div>
    );
  }

var emptyBatch    = { campaign:"2025-2026", date:"", olivesIn:"", oilOut:"", pressLocation:"Moulin Aït Mane – Biougra", acidity:"", peroxides:"", polyphenols:"", k232:"", k268:"", classification:"Extra Vierge", notes:"" };
  var emptyAnalysis = { report_ref:"", lot:"", date_prelevement:new Date().toISOString().slice(0,10), date_analyse:new Date().toISOString().slice(0,10), date_edition:new Date().toISOString().slice(0,10), variete:"Picholine Marocaine", zone_id:"b12", acidite:"", indice_peroxyde:"", humidite:"", lipides:"", proteines:"", energie_kcal:"", energie_kj:"", ag_satures:"", ag_mono_insatures:"", ag_poly_insatures:"", ag_insatures:"", c14_0:"", c16_0:"", c16_1:"", c17_0:"", c17_1:"", c18_0:"", c18_1:"", c18_2:"", c18_3:"", c20_0:"", c20_1:"", c22_0:"", conforme:true, notes:"" };

return (
    <div dir={rtl?"rtl":"ltr"}>

{/* ── Banner ─────────────────────────────────────────────── */}
      <div style={{ background:"linear-gradient(135deg,"+C.olive+","+C.leaf+")", borderRadius:16, padding:"16px 22px", marginBottom:18, color:"#fff", display:"flex", alignItems:"center", gap:14 }}>
        <span style={{ fontSize:34 }}>🫒</span>
        <div style={{ flex:1 }}>
          <div style={{ fontFamily:"'Playfair Display',serif", fontSize:17, fontWeight:700 }}>Huile d’Olive Picholine Marocaine</div>
          <div style={{ fontSize:12, opacity:0.85, marginTop:2 }}>{data.settings.picolineCount} arbres matures · Rangée Picholine · b12</div>
        </div>
        <div style={{ display:"flex", gap:8 }}>
          <Stat label="Lots" value={batches.length} color="#fff"/>
          <Stat label="Analyses" value={analyses.length} color="#fff"/>
        </div>
      </div>

{/* ── Tab switcher ───────────────────────────────────────── */}
      <div style={{ display:"flex", gap:0, marginBottom:18, background:"#F5F0E8", borderRadius:12, padding:4 }}>
        {[["production","🫙 Production & Pressage"],["analyses","🧪 Analyses Labomag"]].map(function(item){
          var active = tab===item[0];
          return (
            <button key={item[0]} onClick={function(){ setTab(item[0]); setSelAnalysis(null); }}
              style={{ flex:1, padding:"9px 0", border:"none", borderRadius:10, fontWeight:active?700:500, fontSize:13,
                background:active?"#fff":"transparent", color:active?C.olive:C.muted, cursor:"pointer",
                boxShadow:active?"0 1px 4px rgba(0,0,0,0.1)":"none", transition:"all 0.18s", fontFamily:"sans-serif" }}>
              {item[1]}
            </button>
          );
        })}
      </div>

{/* ══════════════════ PRODUCTION TAB ══════════════════════ */}
      {tab==="production" && (
        <div>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14 }}>
            <SectionTitle>Production & Pressage</SectionTitle>
            <Btn onClick={function(){ setForm(emptyBatch); setModalType("batch"); setModal(true); }} color={C.olive}>+ Nouveau lot</Btn>
          </div>

<div style={{ display:"grid", gap:14 }}>
            {batches.map(function(b){
              var yield100 = b.olivesIn>0?((b.oilOut/b.olivesIn)*100).toFixed(2):0;
              return (
                <Card key={b.id} style={{ padding:"18px 22px", borderLeft:"5px solid "+(classColor[b.classification]||C.olive) }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
                    <div style={{ flex:1, cursor:"pointer" }} onClick={function(){ setDetail(b); }}>
                      <div style={{ display:"flex", gap:8, alignItems:"center", flexWrap:"wrap", marginBottom:10 }}>
                        <span style={{ fontFamily:"'Playfair Display',serif", fontWeight:700, fontSize:16, color:C.soil }}>🫙 {b.campaign}</span>
                        <Badge label={b.classification}/>
                        <span style={{ fontSize:11, color:C.muted }}>📅 {b.date}</span>
                      </div>
                      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8, marginBottom:10 }}>
                        {[
                          { label:"Olives",    val:b.olivesIn.toLocaleString()+" kg", hi:false },
                          { label:"Huile",     val:b.oilOut+" L",                     hi:true  },
                          { label:"Rendement", val:yield100+" L/100kg",               hi:false },
                          { label:"Acidité",   val:b.acidity+"%",                     warn:b.acidity>0.8 },
                        ].map(function(m){
                          return (
                            <div key={m.label} style={{ background:m.hi?"#EEF5E4":m.warn?"#FEF3E2":"#F8F4EE", borderRadius:10, padding:"7px 10px", textAlign:"center" }}>
                              <div style={{ fontSize:9, color:C.muted, textTransform:"uppercase", fontWeight:700 }}>{m.label}</div>
                              <div style={{ fontSize:13, fontWeight:800, color:m.hi?C.olive:m.warn?C.warning:C.soil, marginTop:2 }}>{m.val}</div>
                            </div>
                          );
                        })}
                      </div>
                      <div style={{ fontSize:12, color:C.bark }}>🏭 {b.pressLocation}</div>
                      {b.notes && <div style={{ marginTop:4, fontSize:11, color:C.muted, fontStyle:"italic" }}>{b.notes}</div>}
                    </div>
                    <div style={{ display:"flex", gap:5, marginLeft:12 }}>
                      <Btn small outline onClick={function(){ setDetail(b); }} color={C.olive}>👁</Btn>
                      <Btn small outline onClick={function(){ db.deleteOO(b.id); }} color={C.danger}>✕</Btn>
                    </div>
                  </div>
                </Card>
              );
            })}
            {batches.length===0 && <p style={{ color:C.muted, textAlign:"center", padding:28 }}>Aucun lot enregistré.</p>}
          </div>
        </div>
      )}

{/* ══════════════════ ANALYSES TAB ════════════════════════ */}
      {tab==="analyses" && (
        <div>
          {selAnalysis ? (
            <AnalysisDetail a={selAnalysis}/>
          ) : (
            <div>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14 }}>
                <SectionTitle>Analyses Labomag</SectionTitle>
                <div style={{ display:"flex", gap:8 }}>
                  <input type="file" ref={fileRef} accept="application/pdf" style={{ display:"none" }}
                    onChange={function(e){ if(e.target.files[0]) importPDF(e.target.files[0]); e.target.value=""; }}/>
                  <Btn onClick={function(){ fileRef.current.click(); }} color={C.olive} small disabled={importing}>
                    {importing?"Lecture...":"📄 Importer PDF Labomag"}
                  </Btn>
                  <Btn onClick={function(){ setForm(emptyAnalysis); setModalType("analysis"); setModal(true); }} color="#2980B9" small>+ Manuel</Btn>
                </div>
              </div>

<div style={{ display:"grid", gap:12 }}>
                {analyses.length===0 && (
                  <Card style={{ padding:32, textAlign:"center" }}>
                    <div style={{ fontSize:32, marginBottom:8 }}>🧪</div>
                    <div style={{ fontSize:14, color:C.muted, marginBottom:12 }}>Aucune analyse disponible.</div>
                    <Btn onClick={function(){ fileRef.current.click(); }} color={C.olive}>Importer PDF Labomag</Btn>
                  </Card>
                )}
                {analyses.map(function(a){
                  var acidStatus = a.acidite/0.8;
                  var color = acidStatus<=0.5?C.success:acidStatus<=0.75?"#5B9BD5":acidStatus<=1.0?C.warning:C.danger;
                  return (
                    <Card key={a.id} style={{ padding:16, cursor:"pointer", borderLeft:"4px solid "+color }} onClick={function(){ setSelAnalysis(a); }}>
                      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:10 }}>
                        <div>
                          <div style={{ fontWeight:700, fontSize:15, color:C.soil }}>{a.lot}</div>
                          <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>{a.variete+" · Rangée Picholine | "+a.date_analyse+" | "+a.report_ref}</div>
                        </div>
                        {a.conforme && <span style={{ background:C.success, color:"#fff", borderRadius:20, padding:"4px 12px", fontSize:12, fontWeight:700 }}>EVOO ✓</span>}
                      </div>
                      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:8 }}>
                        {[
                          { label:"Acidité",      val:a.acidite,         unit:"g/100g",   color:color },
                          { label:"Peroxyde",     val:a.indice_peroxyde, unit:"méq/kg",   color:color },
                          { label:"Oléique C18:1",val:a.c18_1+"%",       unit:"",         color:C.olive },
                          { label:"Insaturés",    val:a.ag_insatures+"%",unit:"total",    color:C.soil },
                        ].map(function(m){
                          return (
                            <div key={m.label} style={{ textAlign:"center", background:m.color+"18", borderRadius:8, padding:"6px 4px" }}>
                              <div style={{ fontSize:10, color:C.muted }}>{m.label}</div>
                              <div style={{ fontSize:14, fontWeight:700, color:m.color }}>{m.val}</div>
                              {m.unit && <div style={{ fontSize:9, color:C.muted }}>{m.unit}</div>}
                            </div>
                          );
                        })}
                      </div>
                    </Card>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}

{/* ══════════════════ DETAIL MODAL (batch) ════════════════ */}
      {detail && (
        <Modal title={"🫙 Lot "+detail.campaign+" — Fiche complète"} onClose={function(){ setDetail(null); }} rtl={rtl}>
          <div style={{ display:"grid", gap:0 }}>
            {[
              ["Campagne",          detail.campaign],
              ["Date de pressage",  detail.date],
              ["Lieu de pressage",  detail.pressLocation],
              ["Classification",    <Badge label={detail.classification}/>],
              ["Olives entrantes",  detail.olivesIn.toLocaleString()+" kg"],
              ["Huile produite",    detail.oilOut+" L"],
              ["Rendement / 100 kg",((detail.oilOut/detail.olivesIn)*100).toFixed(2)+" L"],
            ].map(function(row){
              return (
                <div key={row[0]} style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"9px 0", borderBottom:"1px solid #F0EBE0", fontSize:13 }}>
                  <span style={{ color:C.muted, fontWeight:600 }}>{row[0]}</span>
                  <span style={{ color:C.soil, fontWeight:700 }}>{row[1]}</span>
                </div>
              );
            })}
          </div>
          {(detail.acidity||detail.peroxides) && (
            <div style={{ background:"#EEF5E4", borderRadius:12, padding:"14px 16px", margin:"14px 0 4px" }}>
              <div style={{ fontWeight:700, color:C.olive, fontSize:13, marginBottom:10 }}>🧪 Analyse chimique (normes COI)</div>
              {[
                ["Acidité libre (%)",              detail.acidity,    "≤ 0.8",  detail.acidity<=0.8   ],
                ["Indice de peroxyde (meq O₂/kg)", detail.peroxides,  "≤ 20",   detail.peroxides<=20   ],
                ["Polyphénols totaux (mg/kg)",      detail.polyphenols,"≥ 250",  detail.polyphenols>=250],
                ["K232",                            detail.k232,       "≤ 2.50", detail.k232<=2.5       ],
                ["K268",                            detail.k268,       "≤ 0.22", detail.k268<=0.22      ],
              ].filter(function(r){ return r[1]!==undefined && r[1]!==""; }).map(function(r){
                return (
                  <div key={r[0]} style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"6px 0", borderBottom:"1px solid rgba(107,124,59,0.15)", fontSize:12 }}>
                    <div><span style={{ color:C.bark, fontWeight:600 }}>{r[0]}</span><span style={{ color:C.muted, fontSize:10, marginLeft:6 }}>({r[2]})</span></div>
                    <span style={{ fontWeight:800, color:r[3]?C.success:C.danger }}>{r[1]} {r[3]?"✓":"⚠"}</span>
                  </div>
                );
              })}
            </div>
          )}
          {detail.notes && <div style={{ fontSize:12, color:C.muted, fontStyle:"italic", marginTop:8 }}>📝 {detail.notes}</div>}
          <div style={{ display:"flex", justifyContent:"flex-end", marginTop:14 }}>
            <Btn onClick={function(){ setDetail(null); }} color={C.olive}>Fermer</Btn>
          </div>
        </Modal>
      )}

{/* ══════════════════ ADD BATCH MODAL ═════════════════════ */}
      {modal && modalType==="batch" && (
        <Modal title="Nouveau lot de pressage" onClose={function(){ setModal(false); }} rtl={rtl}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Campagne" value={form.campaign||""} onChange={function(v){ setForm(function(f){ return {...f,campaign:v}; });}} rtl={rtl}/>
            <FInput label="Date de pressage" value={form.date||""} onChange={function(v){ setForm(function(f){ return {...f,date:v}; });}} type="date" rtl={rtl}/>
            <FInput label="Olives entrantes (kg)" value={form.olivesIn||""} onChange={function(v){ setForm(function(f){ return {...f,olivesIn:v}; });}} type="number" rtl={rtl}/>
            <FInput label="Huile produite (L)" value={form.oilOut||""} onChange={function(v){ setForm(function(f){ return {...f,oilOut:v}; });}} type="number" rtl={rtl}/>
          </div>
          <FInput label="Lieu de pressage" value={form.pressLocation||""} onChange={function(v){ setForm(function(f){ return {...f,pressLocation:v}; });}} rtl={rtl}/>
          <FInput label="Classification" value={form.classification||""} onChange={function(v){ setForm(function(f){ return {...f,classification:v}; });}} options={["Extra Vierge","Vierge","Lampante"]} rtl={rtl}/>
          <div style={{ background:"#EEF5E4", borderRadius:12, padding:"12px 14px", marginBottom:10 }}>
            <div style={{ fontWeight:700, color:C.olive, fontSize:12, marginBottom:8 }}>🧪 Analyse chimique (optionnel)</div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
              <FInput label="Acidité (%)" value={form.acidity||""} onChange={function(v){ setForm(function(f){ return {...f,acidity:v}; });}} type="number" rtl={rtl}/>
              <FInput label="Peroxyde (meq/kg)" value={form.peroxides||""} onChange={function(v){ setForm(function(f){ return {...f,peroxides:v}; });}} type="number" rtl={rtl}/>
              <FInput label="Polyphénols (mg/kg)" value={form.polyphenols||""} onChange={function(v){ setForm(function(f){ return {...f,polyphenols:v}; });}} type="number" rtl={rtl}/>
              <FInput label="K232" value={form.k232||""} onChange={function(v){ setForm(function(f){ return {...f,k232:v}; });}} type="number" rtl={rtl}/>
              <FInput label="K268" value={form.k268||""} onChange={function(v){ setForm(function(f){ return {...f,k268:v}; });}} type="number" rtl={rtl}/>
            </div>
          </div>
          <FInput label="Notes" value={form.notes||""} onChange={function(v){ setForm(function(f){ return {...f,notes:v}; });}} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={function(){ setModal(false); }} color={C.muted}>Annuler</Btn>
            <Btn onClick={saveBatch} color={C.olive}>Enregistrer</Btn>
          </div>
        </Modal>
      )}

{/* ══════════════════ ADD ANALYSIS MODAL ══════════════════ */}
      {modal && modalType==="analysis" && (
        <Modal title={form.lot?"Lot "+form.lot:"Nouvelle analyse Labomag"} onClose={function(){ setModal(false); }}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Réf. rapport" value={form.report_ref||""} onChange={function(v){ setForm(function(f){ return {...f,report_ref:v}; });}}/>
            <FInput label="Lot" value={form.lot||""} onChange={function(v){ setForm(function(f){ return {...f,lot:v}; });}}/>
            <FInput label="Variété" value={form.variete||""} onChange={function(v){ setForm(function(f){ return {...f,variete:v}; });}}/>
            <FInput label="Date analyse" value={form.date_analyse||""} onChange={function(v){ setForm(function(f){ return {...f,date_analyse:v}; });}} type="date"/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:C.bark, textTransform:"uppercase", margin:"8px 0 4px" }}>Qualité EVOO</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
            <FInput label="Acidité (g/100g)" value={form.acidite||""} onChange={function(v){ setForm(function(f){ return {...f,acidite:v}; });}} type="number"/>
            <FInput label="Indice peroxyde" value={form.indice_peroxyde||""} onChange={function(v){ setForm(function(f){ return {...f,indice_peroxyde:v}; });}} type="number"/>
            <FInput label="Humidité" value={form.humidite||""} onChange={function(v){ setForm(function(f){ return {...f,humidite:v}; });}} type="number"/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:C.olive, textTransform:"uppercase", margin:"8px 0 4px" }}>Acides Gras Principaux (%)</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
            <FInput label="Oléique C18:1" value={form.c18_1||""} onChange={function(v){ setForm(function(f){ return {...f,c18_1:v}; });}} type="number"/>
            <FInput label="Linoléique C18:2" value={form.c18_2||""} onChange={function(v){ setForm(function(f){ return {...f,c18_2:v}; });}} type="number"/>
            <FInput label="Linolénique C18:3" value={form.c18_3||""} onChange={function(v){ setForm(function(f){ return {...f,c18_3:v}; });}} type="number"/>
            <FInput label="Palmitique C16:0" value={form.c16_0||""} onChange={function(v){ setForm(function(f){ return {...f,c16_0:v}; });}} type="number"/>
            <FInput label="Stéarique C18:0" value={form.c18_0||""} onChange={function(v){ setForm(function(f){ return {...f,c18_0:v}; });}} type="number"/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:"0 12px", marginTop:4 }}>
            <FInput label="Saturés" value={form.ag_satures||""} onChange={function(v){ setForm(function(f){ return {...f,ag_satures:v}; });}} type="number"/>
            <FInput label="Mono-insaturés" value={form.ag_mono_insatures||""} onChange={function(v){ setForm(function(f){ return {...f,ag_mono_insatures:v}; });}} type="number"/>
            <FInput label="Poly-insaturés" value={form.ag_poly_insatures||""} onChange={function(v){ setForm(function(f){ return {...f,ag_poly_insatures:v}; });}} type="number"/>
            <FInput label="Total insaturés" value={form.ag_insatures||""} onChange={function(v){ setForm(function(f){ return {...f,ag_insatures:v}; });}} type="number"/>
          </div>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:8 }}>
            <Btn outline onClick={function(){ setModal(false); }} color={C.muted}>Annuler</Btn>
            <Btn onClick={saveAnalysis} color={C.olive}>Enregistrer</Btn>
          </div>
        </Modal>
      )}

</div>
  );
}

// ── Leaf Analysis (Analyse Vegetale) ─────────────────────────────────────────

// Reference ranges per crop — sourced directly from Labomag reports
var LEAF_REFS = {
  Navellina: {
    n_total: { low:[0,2.10], ok:[2.10,2.50], high:[2.50,99], unit:"% MS" },
    p:        { low:[0,0.09], ok:[0.09,0.11], high:[0.11,99], unit:"% MS" },
    k:        { low:[0,0.60], ok:[0.60,0.85], high:[0.85,99], unit:"% MS" },
    mg:       { low:[0,0.30], ok:[0.30,0.40], high:[0.40,99], unit:"% MS" },
    ca:       { low:[0,4.70], ok:[4.70,6.00], high:[6.00,99], unit:"% MS" },
    na:       { low:[0,340],  ok:[340,500],   high:[500,9999], unit:"mg/kg" },
    cl:       { low:[0,0.11], ok:[0.11,0.17], high:[0.17,99], unit:"% MS" },
    zn:       { low:[0,13],   ok:[13,30],     high:[30,999],  unit:"mg/kg" },
    cu:       { low:[0,6.0],  ok:[6.0,8.6],   high:[8.6,999], unit:"mg/kg" },
    mn:       { low:[0,12],   ok:[12,25],     high:[25,999],  unit:"mg/kg" },
    fe:       { low:[0,100],  ok:[100,155],   high:[155,9999],unit:"mg/kg" },
    b:        { low:[0,55],   ok:[55,80],     high:[80,999],  unit:"mg/kg" },
  },
  Valenciana: {
    n_total: { low:[0,2.00], ok:[2.00,2.35], high:[2.35,99], unit:"% MS" },
    p:        { low:[0,0.09], ok:[0.09,0.11], high:[0.11,99], unit:"% MS" },
    k:        { low:[0,0.45], ok:[0.45,0.65], high:[0.65,99], unit:"% MS" },
    mg:       { low:[0,0.30], ok:[0.30,0.40], high:[0.40,99], unit:"% MS" },
    ca:       { low:[0,5.30], ok:[5.30,6.70], high:[6.70,99], unit:"% MS" },
    na:       { low:[0,320],  ok:[320,460],   high:[460,9999],unit:"mg/kg" },
    cl:       { low:[0,0.08], ok:[0.08,0.12], high:[0.12,99], unit:"% MS" },
    zn:       { low:[0,16],   ok:[16,28],     high:[28,999],  unit:"mg/kg" },
    cu:       { low:[0,6.6],  ok:[6.6,8.8],   high:[8.8,999], unit:"mg/kg" },
    mn:       { low:[0,14],   ok:[14,27],     high:[27,999],  unit:"mg/kg" },
    fe:       { low:[0,125],  ok:[125,175],   high:[175,9999],unit:"mg/kg" },
    b:        { low:[0,60],   ok:[60,85],     high:[85,999],  unit:"mg/kg" },
  },
};

// For elements nefastes: Faible=good, Moyen=warning, Eleve=danger
var NEFASTES = ["na","cl"];

function leafStatus(val, ref, isNefaste) {
  if (val === null || val === undefined || !ref) return "ok";
  if (isNefaste) {
    if (val < ref.low[1])  return "low";   // Faible = good (green)
    if (val <= ref.ok[1])  return "ok";    // Moyen  = warning (yellow)
    return "high";                          // Eleve  = danger (red)
  }
  if (val < ref.low[1])  return "low";
  if (val <= ref.ok[1])  return "ok";
  return "high";
}

function statusColor(status, isNefaste) {
  if (isNefaste) {
    if (status === "low")  return C.success;
    if (status === "ok")   return C.warning;
    return C.danger;
  }
  if (status === "low")  return C.danger;
  if (status === "ok")   return C.success;
  return C.warning;  // high = elevated, orange
}

function statusLabel(status, isNefaste) {
  if (isNefaste) {
    if (status === "low")  return "Faible";
    if (status === "ok")   return "Moyen";
    return "Eleve";
  }
  if (status === "low")  return "Faible";
  if (status === "ok")   return "Satisfaisant";
  return "Eleve";
}

// ── AI Report Panel — markdown rendering, trilingual, ElevenLabs TTS ─────────
function AiReportPanel({ aiReport, aiLang, setAiLang, latestDate, latestList, geminiKey }) {
  var [ttsPlaying, setTtsPlaying] = useState(false);
  var [ttsLoading, setTtsLoading] = useState(false);
  var audioRef = useRef(null);

var VOICE_ID = "y9RirtVoC323dSr3E154";
  var XI_KEY   = "sk_c03a2fe02c41a17a8e12151b7c7562d6a19e0d9ed5b8a7fa";

var resume  = aiLang==="ar" ? aiReport.resume_ar  : aiLang==="en" ? aiReport.resume_en  : aiReport.resume_fr;
  var rapport = aiLang==="ar" ? aiReport.rapport_ar : aiLang==="en" ? aiReport.rapport_en : aiReport.rapport_fr;
  var isRtl   = aiLang==="ar";

function stopAudio() {
    window.speechSynthesis && window.speechSynthesis.cancel();
    if (audioRef.current) { audioRef.current.pause(); audioRef.current.currentTime=0; }
    setTtsPlaying(false);
  }

async function playTTS() {
    stopAudio();
    var text = resume;
    if (!text) return;

if (aiLang === "ar") {
      // ElevenLabs path: Gemini → Darija → ElevenLabs
      if (!geminiKey) { alert("Clé Gemini requise dans Paramètres"); return; }
      setTtsLoading(true);
      try {
        // Translate resume to Darija
        var prompt = "Translate this agronomic summary into Moroccan Darija (Arabic script). Keep technical terms (Ca, Mg, Fe, pH, etc.) as-is. Use simple, clear Darija so a farm worker can understand.\n\nText: " + text + "\n\nReturn ONLY the Darija translation.";
        var gemResp = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=" + geminiKey,
          { method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({ contents:[{parts:[{text:prompt}]}], generationConfig:{temperature:0.3} }) });
        var gemData = await gemResp.json();
        var darijaText = gemData.candidates?.[0]?.content?.parts?.[0]?.text?.trim();
        if (!darijaText) throw new Error("Traduction vide");

// Proper markdown → JSX renderer
  function renderMarkdown(text) {
    if (!text) return null;
    var lines = text.split("\n");
    var elements = [];
    var listItems = [];
    var flushList = function() {
      if (listItems.length > 0) {
        elements.push(<ul key={"ul"+elements.length} style={{ paddingLeft: isRtl?0:20, paddingRight:isRtl?20:0, margin:"8px 0" }}>{listItems}</ul>);
        listItems = [];
      }
    };
    lines.forEach(function(line, i) {
      var trimmed = line.trim();
      if (!trimmed) { flushList(); elements.push(<div key={i} style={{height:6}}/>); return; }
      // H2
      if (trimmed.startsWith("## ")) {
        flushList();
        var txt = trimmed.slice(3);
        elements.push(
          <div key={i} style={{ marginTop:18, marginBottom:6, paddingBottom:4, borderBottom:"2px solid #DDD6FE", display:"flex", alignItems:"center", gap:8 }}>
            <span style={{ width:4, height:18, background:"#7C3AED", borderRadius:2, display:"inline-block", flexShrink:0 }}/>
            <span style={{ fontWeight:800, fontSize:13, color:"#4C1D95", fontFamily:"sans-serif", textTransform:"uppercase", letterSpacing:0.5 }}>{txt}</span>
          </div>
        );
        return;
      }
      // H3
      if (trimmed.startsWith("### ")) {
        flushList();
        elements.push(<div key={i} style={{ fontWeight:700, fontSize:12, color:"#6D28D9", fontFamily:"sans-serif", marginTop:10, marginBottom:4 }}>{trimmed.slice(4)}</div>);
        return;
      }
      // Bullet
      if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
        var content = trimmed.slice(2);
        listItems.push(<li key={i} style={{ fontSize:12, color:C.soil, fontFamily:"sans-serif", lineHeight:1.7, marginBottom:2 }} dangerouslySetInnerHTML={{ __html: content.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>") }}/>);
        return;
      }
      // Numbered list
      var numMatch = trimmed.match(/^(\d+)\.\s+(.*)/);
      if (numMatch) {
        flushList();
        var num = numMatch[1], content2 = numMatch[2];
        elements.push(
          <div key={i} style={{ display:"flex", gap:8, alignItems:"flex-start", marginTop:8, marginBottom:2 }}>
            <span style={{ background:"#7C3AED", color:"#fff", borderRadius:"50%", width:20, height:20, display:"inline-flex", alignItems:"center", justifyContent:"center", fontSize:10, fontWeight:700, flexShrink:0, marginTop:2 }}>{num}</span>
            <span style={{ fontSize:12, color:C.soil, fontFamily:"sans-serif", lineHeight:1.7, flex:1 }} dangerouslySetInnerHTML={{ __html: content2.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>") }}/>
          </div>
        );
        return;
      }
      // Normal paragraph
      flushList();
      elements.push(<p key={i} style={{ fontSize:12, color:C.soil, fontFamily:"sans-serif", lineHeight:1.7, margin:"4px 0" }} dangerouslySetInnerHTML={{ __html: trimmed.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>") }}/>);
    });
    flushList();
    return elements;
  }

return (
    <div style={{ padding:"14px 16px" }}>
      {/* Language tabs + TTS */}
      <div style={{ display:"flex", gap:6, marginBottom:14, alignItems:"center", flexWrap:"wrap" }}>
        {[["fr","🇫🇷 Français"],["ar","🇲🇦 Darija"],["en","🇬🇧 English"]].map(function(pair){
          var lc=pair[0], lb=pair[1];
          return (
            <button key={lc} onClick={function(){ stopAudio(); setAiLang(lc); }}
              style={{ padding:"4px 12px", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer", fontFamily:"sans-serif",
                border:"2px solid " + (aiLang===lc?"#7C3AED":"#E2E8F0"),
                background: aiLang===lc?"#7C3AED":"transparent",
                color: aiLang===lc?"#fff":"#6D28D9" }}>
              {lb}
            </button>
          );
        })}
        <div style={{ marginLeft:"auto", display:"flex", gap:6 }}>
          {!ttsPlaying && !ttsLoading && (
            <button onClick={playTTS} title="Écouter le résumé"
              style={{ background:"none", border:"1px solid #7C3AED", color:"#7C3AED", borderRadius:20, padding:"4px 12px", fontSize:12, cursor:"pointer", fontFamily:"sans-serif", display:"flex", alignItems:"center", gap:4 }}>
              🔊 {aiLang==="ar"?"استمع":"Écouter"}
            </button>
          )}
          {ttsLoading && (
            <span style={{ fontSize:12, color:"#7C3AED", fontFamily:"sans-serif", padding:"4px 12px" }}>⏳ Préparation...</span>
          )}
          {ttsPlaying && (
            <button onClick={stopAudio}
              style={{ background:"#EF4444", border:"none", color:"#fff", borderRadius:20, padding:"4px 12px", fontSize:12, cursor:"pointer", fontFamily:"sans-serif", display:"flex", alignItems:"center", gap:4 }}>
              ⏹ Arrêter
            </button>
          )}
        </div>
      </div>

{/* Summary box */}
      <div style={{ background:"#F5F3FF", borderRadius:10, padding:"12px 16px", marginBottom:16, borderLeft: isRtl?"none":"4px solid #7C3AED", borderRight: isRtl?"4px solid #7C3AED":"none", direction: isRtl?"rtl":"ltr" }}>
        <div style={{ fontSize:10, fontWeight:700, color:"#7C3AED", textTransform:"uppercase", letterSpacing:1, marginBottom:6, fontFamily:"sans-serif" }}>
          {aiLang==="ar"?"الملخص":aiLang==="en"?"Summary":"Résumé"}
        </div>
        <div style={{ fontSize:13, color:"#3B0764", fontFamily:"sans-serif", lineHeight:1.7 }}>{resume}</div>
      </div>

{/* Detailed report */}
      <details open>
        <summary style={{ cursor:"pointer", fontWeight:700, fontSize:12, color:"#6D28D9", fontFamily:"sans-serif", marginBottom:10, userSelect:"none", listStyle:"none", display:"flex", alignItems:"center", gap:6 }}>
          <span style={{ background:"#EDE9FE", borderRadius:6, padding:"3px 10px", fontSize:11 }}>
            {aiLang==="ar"?"📋 التقرير التفصيلي":aiLang==="en"?"📋 Detailed Report":"📋 Rapport détaillé"}
          </span>
        </summary>
        <div style={{ marginTop:8, direction: isRtl?"rtl":"ltr" }}>
          {renderMarkdown(rapport)}
        </div>
      </details>
    </div>
  );
}

function LeafAnalysisView({ data, db, lang }) {
  var [tab, setTab]           = useState("overview");
  var [selected, setSel]      = useState(null);
  var [modal, setModal]       = useState(false);
  var [importing, setImp]     = useState(false);
  var [form, setForm]         = useState({});
  var [aiLoading, setAiLoad]  = useState(false);
  var [aiExpanded, setAiExp]  = useState(true);
  var [aiLang, setAiLang]     = useState("fr");   // "fr" | "ar" | "en"
  var fileRef = useRef();
  var geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";

var analyses = data.leafAnalyses || [];
  var zones    = data.zones || [];

// Sort by date desc
  var sorted = analyses.slice().sort(function(a,b){ return b.date_analyse > a.date_analyse ? 1 : -1; });

// Latest BATCH = all analyses sharing the most recent date_analyse
  var latestDate = sorted.length > 0 ? sorted[0].date_analyse : null;
  var latestList = latestDate ? sorted.filter(function(a){ return a.date_analyse === latestDate; }) : [];
  var olderList  = latestDate ? sorted.filter(function(a){ return a.date_analyse !== latestDate; }) : [];

// Load cached report for current campaign from localStorage
  var _cacheKey = "ai_leaf_report_" + latestDate;
  var _cached = latestDate ? (function(){ try { var s=localStorage.getItem(_cacheKey); return s ? JSON.parse(s) : null; } catch(e){ return null; } })() : null;
  var [aiReport, setAiReport] = useState(_cached);   // { resume_fr, resume_ar, resume_en, rapport_fr, rapport_ar, rapport_en }

function zoneName(zoneId) {
    var z = zones.find(function(x){ return x.id === zoneId; });
    return z ? z.name : zoneId;
  }

function countAlerts(analysis) {
    var crop = analysis.culture;
    var refs = LEAF_REFS[crop] || LEAF_REFS.Valenciana;
    var params = ["n_total","p","k","mg","ca","na","cl","zn","cu","mn","fe","b"];
    var alerts = 0;
    params.forEach(function(p) {
      var ref = refs[p];
      var val = analysis[p];
      var isNef = NEFASTES.indexOf(p) >= 0;
      var st = leafStatus(val, ref, isNef);
      if (st !== "ok") alerts++;
    });
    return alerts;
  }

// ── AI Batch Analyser ─────────────────────────────────────────
  function runAiAnalysis() {
    if (!geminiKey) { alert("Ajoutez votre clé Gemini dans Paramètres."); return; }
    if (latestList.length === 0) return;
    setAiLoad(true);
    setAiReport(null);
    try { localStorage.removeItem(_cacheKey); } catch(e){}
    setAiExp(true);

var params = ["n_total","p","k","mg","ca","na","cl","zn","cu","mn","fe","b"];
    var paramLabels = { n_total:"Azote N(%MS)", p:"Phosphore P(%MS)", k:"Potassium K(%MS)", mg:"Magnésium Mg(%MS)", ca:"Calcium Ca(%MS)", na:"Sodium Na(%MS)", cl:"Chlorures Cl(%MS)", zn:"Zinc Zn(mg/kg)", cu:"Cuivre Cu(mg/kg)", mn:"Manganèse Mn(mg/kg)", fe:"Fer Fe(mg/kg)", b:"Bore B(mg/kg)" };

var tableRows = latestList.map(function(a) {
      var refs = LEAF_REFS[a.culture] || LEAF_REFS.Valenciana;
      var row = "Parcelle " + a.parcelle + " (" + a.culture + "):";
      params.forEach(function(p) {
        var val = a[p];
        var ref = refs[p];
        var isNef = NEFASTES.indexOf(p) >= 0;
        var st = leafStatus(val, ref, isNef);
        var stLabel = st === "ok" ? "✓" : st === "low" || st === "deficient" ? "↓FAIBLE" : st === "high" || st === "toxic" ? "↑ÉLEVÉ" : "?";
        row += "\n  " + paramLabels[p] + " = " + (val !== null && val !== undefined ? val : "N/D") + " " + stLabel;
      });
      return row;
    }).join("\n\n");

var prompt = "Tu es un ingénieur agronome expert en agrumiculture et oléiculture dans la région Souss-Massa du Maroc (Beni-Mellal). "
      + "Tu analyses les résultats d'analyses foliaires Labomag du GNAO-KIAF (40 ha d'agrumes, 6 ha d'oliviers, région Souss-Massa).\n\n"
      + "Campagne d'analyse du " + latestDate + " — " + latestList.length + " parcelles analysées:\n\n"
      + tableRows + "\n\n"
      + "Légende: ✓ = dans les normes | ↓FAIBLE = déficience | ↑ÉLEVÉ = excès/toxicité\n\n"
      + "Produis une analyse agronomique complète en JSON avec exactement ces 6 champs (chaque champ dans sa langue):\n"
      + "{\n"
      + '  "resume_fr": "3-5 phrases en FRANÇAIS résumant l\'état nutritionnel global, problèmes prioritaires, urgence d\'intervention.",\n'
      + '  "resume_ar": "نفس الملخص بالعربية الفصحى في 3-5 جمل، مناسب للقراءة الصوتية.",\n'
      + '  "resume_en": "Same summary in ENGLISH, 3-5 sentences.",\n'
      + '  "rapport_fr": "Rapport structuré en Markdown EN FRANÇAIS avec: ## État Général, ## Déficiences Prioritaires (parcelles + doses + produits adaptés au Maroc), ## Excès à Surveiller, ## Recommandations Prochaine Campagne.",\n'
      + '  "rapport_ar": "نفس التقرير التفصيلي باللغة العربية الفصحى بنفس الأقسام.",\n'
      + '  "rapport_en": "Same detailed report in ENGLISH with same sections."\n'
      + "}\n"
      + "Réponds UNIQUEMENT avec le JSON, sans explication.";

fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=" + geminiKey, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], generationConfig: { temperature: 0.2 } })
    })
    .then(function(r){ return r.json(); })
    .then(function(d) {
      var txt = "";
      try { txt = d.candidates[0].content.parts[0].text; } catch(e) {
        throw new Error((d.error && d.error.message) || "Réponse Gemini invalide");
      }
      txt = txt.replace(/```json\n?/g,"").replace(/```\n?/g,"").trim();
      var parsed = JSON.parse(txt);
      setAiReport(parsed);
      try { localStorage.setItem(_cacheKey, JSON.stringify(parsed)); } catch(e){}
      setAiLoad(false);
    })
    .catch(function(err) {
      alert("Erreur analyse IA: " + err.message);
      setAiLoad(false);
    });
  }

// Import PDF via Gemini
  function importPDF(file) {
    if (!geminiKey) { alert("Ajoutez votre cle Gemini dans Parametres."); return; }
    setImp(true);
    var fr = new FileReader();
    fr.onload = function(e) {
      var b64 = e.target.result.split(",")[1];
      var prompt = "Extract all data from this Labomag leaf analysis report as JSON with these exact fields: "
        + "report_ref, date_prelevement (YYYY-MM-DD), date_analyse (YYYY-MM-DD), date_edition (YYYY-MM-DD), "
        + "parcelle (just the P number e.g. P3), culture (Valenciana or Navellina), variete, nb_feuilles, "
        + "poids_sec, poids_moyen_feuille, n_total, p, k, mg, ca, na, cl, zn, cu, mn, fe, b. "
        + "All numeric values as numbers. Return ONLY the JSON object, no explanation.";
      var payload = {
        contents: [{ parts: [
          { text: prompt },
          { inline_data: { mime_type: "application/pdf", data: b64 } }
        ]}],
        generationConfig: { temperature: 0 }
      };
      fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=" + geminiKey, {
        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
      })
      .then(function(r){ return r.json(); })
      .then(function(d) {
        var txt = "";
        try { txt = d.candidates[0].content.parts[0].text; } catch(e) {
          var errMsg = (d.error && d.error.message) || (d.candidates && d.candidates[0] && d.candidates[0].finishReason) || JSON.stringify(d).slice(0,500);
          throw new Error("Gemini: " + errMsg);
        }
        if (!txt || !txt.trim()) {
          var reason = (d.candidates && d.candidates[0] && d.candidates[0].finishReason) || "empty response";
          throw new Error("Gemini returned no text. Reason: " + reason);
        }
        // Strip markdown code fences if present
        txt = txt.replace(/```json\n?/g,"").replace(/```\n?/g,"").trim();
        var parsed = JSON.parse(txt);
        // Auto-map parcelle to zone_id
        var zoneMap = { "P3":"b3","P4":"b4","P5":"b5","P6":"b6","P7":"b7","P8":"b8","P9":"b9","P10":"b10","P11":"b11" };
        // Valencia: blocs 3-6 | Navel: blocs 7-11 | Olives: blocs 1-2
        var cultureMap = { "P3":"Valenciana","P4":"Valenciana","P5":"Valenciana","P6":"Valenciana","P7":"Navellina","P8":"Navellina","P9":"Navellina","P10":"Navellina","P11":"Navellina" };
        parsed.zone_id = zoneMap[parsed.parcelle] || "";
        // Override culture from PDF with correct mapping (PDF sometimes says Picholine for variety column)
        if (cultureMap[parsed.parcelle]) parsed.culture = cultureMap[parsed.parcelle];
        setForm(parsed);
        setImp(false);
        setModal(true);
      })
      .catch(function(err) {
        alert("Erreur extraction: " + err.message);
        setImp(false);
      });
    };
    fr.readAsDataURL(file);
  }

function save() {
    db.addLeafAnalysis(form);
    setModal(false);
  }

// ── Param row component ───────────────────────────────────────
  function ParamRow({ label, param, val, crop }) {
    var refs    = LEAF_REFS[crop] || LEAF_REFS.Valenciana;
    var ref     = refs[param];
    var isNef   = NEFASTES.indexOf(param) >= 0;
    var status  = leafStatus(val, ref, isNef);
    var color   = statusColor(status, isNef);
    var slabel  = statusLabel(status, isNef);
    var refTxt  = ref ? (ref.ok[0] + " - " + ref.ok[1]) : "";
    // Progress bar: position val within a range
    var pct = 0;
    if (ref && val !== null && val !== undefined) {
      var lo = ref.low[0], hi = ref.high[1] > 9000 ? ref.ok[1]*2 : ref.high[1];
      pct = Math.min(100, Math.max(0, ((val - lo)/(hi - lo))*100));
    }
    return (
      <div style={{ display:"grid", gridTemplateColumns:"130px 70px 1fr 90px 80px", gap:8, alignItems:"center", padding:"7px 0", borderBottom:"1px solid #F0EBE0" }}>
        <span style={{ fontSize:13, color:C.soil, fontFamily:"sans-serif", fontWeight:500 }}>{label}</span>
        <span style={{ fontSize:13, fontWeight:700, color:C.soil, fontFamily:"sans-serif", textAlign:"right" }}>{val !== null && val !== undefined ? val : "-"}</span>
        <div style={{ height:8, background:"#EEE", borderRadius:4, position:"relative" }}>
          <div style={{ position:"absolute", left: ((ref && ref.ok[0]/(ref.high[1]>9000?ref.ok[1]*2:ref.high[1]))*100)+"%", right: (100-((ref && ref.ok[1]/(ref.high[1]>9000?ref.ok[1]*2:ref.high[1]))*100))+"%", height:"100%", background:"rgba(74,124,63,0.2)", borderRadius:4 }}/>
          {ref && val !== null && <div style={{ position:"absolute", left:pct+"%", top:-2, width:3, height:12, background:color, borderRadius:2, transform:"translateX(-50%)" }}/>}
        </div>
        <span style={{ fontSize:11, color:C.muted, fontFamily:"sans-serif", textAlign:"center" }}>{refTxt}</span>
        <span style={{ fontSize:11, fontWeight:700, color:color, fontFamily:"sans-serif", textAlign:"right", background:color+"22", padding:"2px 8px", borderRadius:12 }}>{slabel}</span>
      </div>
    );
  }

// ── Detail view for one analysis ─────────────────────────────
  function DetailView({ a }) {
    var alerts = countAlerts(a);
    return (
      <div>
        <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:16 }}>
          <button onClick={function(){ setSel(null); }} style={{ background:"none", border:"none", color:C.bark, fontSize:20, cursor:"pointer", padding:0 }}>{"<"}</button>
          <div>
            <div style={{ fontWeight:700, fontSize:16, color:C.soil, fontFamily:"sans-serif" }}>{a.report_ref} - {a.parcelle} - {a.culture}</div>
            <div style={{ fontSize:12, color:C.muted, fontFamily:"sans-serif" }}>{"Prelevement: " + a.date_prelevement + " | " + zoneName(a.zone_id)}</div>
          </div>
          <div style={{ marginLeft:"auto", display:"flex", gap:8, alignItems:"center" }}>
            {a.media_url && <a href={a.media_url.split(",")[0]} target="_blank" rel="noopener noreferrer" style={{ background:"#EEF2FF", color:"#4338CA", border:"1px solid #A5B4FC", borderRadius:20, padding:"4px 12px", fontSize:12, fontWeight:700, fontFamily:"sans-serif", cursor:"pointer", textDecoration:"none" }}>📄 Rapport PDF</a>}
            <button onClick={function(e){ e.stopPropagation(); window.askAgronomist(e.target, a); }} style={{ background:"#D35400", color:"#fff", border:"none", borderRadius:20, padding:"4px 12px", fontSize:12, fontWeight:700, fontFamily:"sans-serif", cursor:"pointer", boxShadow:"0 2px 4px rgba(0,0,0,0.2)" }}>💡 Analyser (IA)</button>
          </div>
        </div>

<div style={{ display:"grid", gridTemplateColumns:"130px 70px 1fr 90px 80px", gap:8, padding:"5px 0", marginBottom:4 }}>
          <span style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif" }}>Parametre</span>
          <span style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif", textAlign:"right" }}>Valeur</span>
          <span style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif", textAlign:"center" }}>Position</span>
          <span style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif", textAlign:"center" }}>Reference</span>
          <span style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif", textAlign:"right" }}>Etat</span>
        </div>

<Card style={{ padding:"4px 16px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:"#2980B9", textTransform:"uppercase", padding:"8px 0 4px", fontFamily:"sans-serif" }}>Elements Nutritifs Majeurs (% de MS)</div>
          <ParamRow label="Azote Total (N)" param="n_total" val={a.n_total} crop={a.culture}/>
          <ParamRow label="Phosphore (P)"    param="p"       val={a.p}       crop={a.culture}/>
          <ParamRow label="Potassium (K)"    param="k"       val={a.k}       crop={a.culture}/>
          <ParamRow label="Magnesium (Mg)"   param="mg"      val={a.mg}      crop={a.culture}/>
          <ParamRow label="Calcium (Ca)"     param="ca"      val={a.ca}      crop={a.culture}/>
        </Card>

<Card style={{ padding:"4px 16px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.danger, textTransform:"uppercase", padding:"8px 0 4px", fontFamily:"sans-serif" }}>Elements Nefastes</div>
          <div style={{ display:"grid", gridTemplateColumns:"130px 70px 1fr 90px 80px", gap:8, padding:"5px 0" }}>
            <span style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}></span>
            <span style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}></span>
            <span style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif", textAlign:"center" }}>Faible / Moyen / Eleve</span>
          </div>
          <ParamRow label="Sodium (Na)" param="na" val={a.na} crop={a.culture}/>
          <ParamRow label="Chlorures (Cl)" param="cl" val={a.cl} crop={a.culture}/>
        </Card>

<Card style={{ padding:"4px 16px", marginBottom:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.olive, textTransform:"uppercase", padding:"8px 0 4px", fontFamily:"sans-serif" }}>Oligo-elements (mg/kg de MS)</div>
          <ParamRow label="Zinc (Zn)"      param="zn" val={a.zn} crop={a.culture}/>
          <ParamRow label="Cuivre (Cu)"    param="cu" val={a.cu} crop={a.culture}/>
          <ParamRow label="Manganese (Mn)" param="mn" val={a.mn} crop={a.culture}/>
          <ParamRow label="Fer (Fe)"        param="fe" val={a.fe} crop={a.culture}/>
          <ParamRow label="Bore (B)"        param="b"  val={a.b}  crop={a.culture}/>
        </Card>

<Card style={{ padding:"12px 16px" }}>
          <div style={{ fontSize:11, fontWeight:700, color:C.muted, textTransform:"uppercase", marginBottom:8, fontFamily:"sans-serif" }}>Informations echantillon</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10 }}>
            <Stat label="Nb feuilles" value={a.nb_feuilles||"-"} color={C.bark}/>
            <Stat label="Poids sec (g)" value={a.poids_sec||"-"} color={C.bark}/>
            <Stat label="Poids moy. feuille (g)" value={a.poids_moyen_feuille||"-"} color={C.bark}/>
          </div>
        </Card>
      </div>
    );
  }

// ── Overview card per parcelle ────────────────────────────────
  function OverviewCard({ a }) {
    var alerts = countAlerts(a);
    var crop   = a.culture;
    var refs   = LEAF_REFS[crop] || LEAF_REFS.Valenciana;

// Build tooltip: list out-of-range params
    var allParams = ["n_total","p","k","mg","ca","na","cl","zn","cu","mn","fe","b"];
    var paramNames = { n_total:"Azote N", p:"Phosphore P", k:"Potassium K", mg:"Magnésium Mg", ca:"Calcium Ca", na:"Sodium Na", cl:"Chlorures Cl", zn:"Zinc Zn", cu:"Cuivre Cu", mn:"Manganèse Mn", fe:"Fer Fe", b:"Bore B" };
    var alertLines = [];
    allParams.forEach(function(p) {
      var ref = refs[p]; var val = a[p];
      var isNef = NEFASTES.indexOf(p) >= 0;
      var st = leafStatus(val, ref, isNef);
      if (st !== "ok") {
        var arrow = (st === "low" || st === "deficient") ? "↓ Faible" : (st === "high" || st === "toxic") ? "↑ Élevé" : "⚠";
        alertLines.push(paramNames[p] + ": " + (val !== null && val !== undefined ? val : "N/D") + " (" + arrow + ")");
      }
    });
    var tooltip = alertLines.length > 0 ? alertLines.join("\n") : "";

// Mini traffic lights for key params
    var keyParams = ["n_total","k","na","zn","cu","mn","b"];
    var keyLabels  = ["N","K","Na","Zn","Cu","Mn","B"];

return (
      <Card style={{ padding:16, cursor:"pointer", borderLeft:"4px solid " + (alerts === 0 ? C.success : alerts <= 2 ? C.warning : C.danger) }}
        onClick={function(){ setSel(a); setTab("detail"); }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:10 }}>
          <div>
            <div style={{ fontWeight:700, fontSize:15, color:C.soil, fontFamily:"sans-serif" }}>{a.parcelle} — {a.culture}</div>
            <div style={{ fontSize:11, color:C.muted, fontFamily:"sans-serif", marginTop:2 }}>{a.report_ref} | {a.date_prelevement} | {zoneName(a.zone_id)}</div>
            {a.media_url && <a href={a.media_url.split(",")[0]} target="_blank" rel="noopener noreferrer" onClick={function(e){ e.stopPropagation(); }} style={{ display:"inline-block", marginTop:5, background:"#EEF2FF", color:"#4338CA", border:"1px solid #A5B4FC", borderRadius:12, padding:"2px 10px", fontSize:11, fontWeight:700, fontFamily:"sans-serif", textDecoration:"none" }}>📄 Rapport PDF</a>}
          </div>
          <div style={{ display:"flex", flexDirection:"column", alignItems:"flex-end", gap:4 }}>
            <span title={tooltip}
              style={{ background: alerts===0?C.success:alerts<=2?C.warning:C.danger, color:"#fff", borderRadius:20, padding:"4px 12px", fontSize:12, fontWeight:700, fontFamily:"sans-serif", cursor: alerts>0?"help":"default" }}>
              {alerts === 0 ? "✓ OK" : "⚠ " + alerts + " hors norme"}
            </span>
            {alerts > 0 && <span style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>Cliquer pour le détail →</span>}
          </div>
        </div>
        <div style={{ display:"flex", gap:8, flexWrap:"wrap" }}>
          {keyParams.map(function(p, i) {
            var ref    = refs[p];
            var val    = a[p];
            var isNef  = NEFASTES.indexOf(p) >= 0;
            var st     = leafStatus(val, ref, isNef);
            var color  = statusColor(st, isNef);
            return (
              <div key={p} style={{ textAlign:"center", background:color+"18", borderRadius:8, padding:"4px 8px", minWidth:36 }}>
                <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>{keyLabels[i]}</div>
                <div style={{ fontSize:11, fontWeight:700, color:color, fontFamily:"sans-serif" }}>{val}</div>
              </div>
            );
          })}
        </div>
      </Card>
    );
  }

return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>Analyses Vegetales</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <input type="file" ref={fileRef} accept="application/pdf" multiple style={{ display:"none" }}
            onChange={function(e) {
              var files = Array.from(e.target.files);
              if (files.length > 0) importPDF(files[0]);
              e.target.value = "";
            }}/>
          <Btn onClick={function(){ fileRef.current.click(); }} color={C.olive} small disabled={importing}>
            {importing ? "Lecture PDF..." : "Importer PDF Labomag"}
          </Btn>
          <Btn onClick={function(){ setForm({ date_prelevement:new Date().toISOString().slice(0,10), date_analyse:new Date().toISOString().slice(0,10), date_edition:new Date().toISOString().slice(0,10), culture:"Valenciana", variete:"Orange", parcelle:"", zone_id:"", report_ref:"", nb_feuilles:"", poids_sec:"", poids_moyen_feuille:"", n_total:"", p:"", k:"", mg:"", ca:"", na:"", cl:"", zn:"", cu:"", mn:"", fe:"", b:"" }); setModal(true); }} color="#2980B9" small>
            + Manuel
          </Btn>
        </div>
      </div>

{tab !== "detail" && (
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(110px,1fr))", gap:10, marginBottom:18 }}>
          <Stat label="Analyses" value={analyses.length} color={C.bark}/>
          <Stat label="Parcelles suivies" value={latestList.length} color={C.olive}/>
          <Stat label="Alertes actives" value={latestList.reduce(function(s,a){ return s+countAlerts(a); },0)} color={C.warning}/>
          <Stat label="Derniere analyse" value={sorted.length > 0 ? sorted[0].date_analyse : "-"} color={C.info}/>
        </div>
      )}

{tab === "overview" && (
        <div style={{ display:"grid", gap:12 }}>
          {latestList.length === 0 && (
            <Card style={{ padding:32, textAlign:"center" }}>
              <div style={{ fontSize:32, marginBottom:8 }}>🌿</div>
              <div style={{ fontFamily:"sans-serif", fontSize:14, color:C.muted, marginBottom:12 }}>Aucune analyse disponible.</div>
              <Btn onClick={function(){ fileRef.current.click(); }} color={C.olive}>Importer PDF Labomag</Btn>
            </Card>
          )}

{/* ── AI Analysis Panel ── */}
          {latestList.length > 0 && (
            <Card style={{ borderLeft:"4px solid #8B5CF6", padding:0, overflow:"hidden" }}>
              <div style={{ display:"flex", alignItems:"center", gap:10, padding:"12px 16px", background:"linear-gradient(135deg,#F5F3FF,#EDE9FE)" }}>
                <span style={{ fontSize:18 }}>🧠</span>
                <div style={{ flex:1 }}>
                  <div style={{ fontWeight:700, fontSize:13, color:"#5B21B6", fontFamily:"sans-serif" }}>Analyse</div>
                  <div style={{ fontSize:11, color:"#7C3AED", fontFamily:"sans-serif" }}>Campagne du {latestDate} · {latestList.length} parcelles</div>
                </div>
                {!aiReport && !aiLoading && (
                  <button onClick={function(){ runAiAnalysis(); }}
                    style={{ background:"#7C3AED", color:"#fff", border:"none", borderRadius:20, padding:"6px 14px", fontSize:12, fontWeight:700, cursor:"pointer", fontFamily:"sans-serif" }}>
                    ✨ Analyser
                  </button>
                )}
                {aiLoading && <span style={{ fontSize:12, color:"#7C3AED", fontFamily:"sans-serif" }}>⏳ Analyse en cours...</span>}
                {aiReport && !aiLoading && (
                  <div style={{ display:"flex", gap:6, alignItems:"center" }}>
                    {/* Print button */}
                    <button title="Imprimer / PDF" onClick={function(e){
                      e.stopPropagation();
                      var w = window.open('', '_blank');
                      var md2html = function(s){ return (s||'').replace(/## (.+)/g,'<h2>$1</h2>').replace(/### (.+)/g,'<h3>$1</h3>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>'); };
                      var resume = aiLang==="ar"?aiReport.resume_ar:aiLang==="en"?aiReport.resume_en:aiReport.resume_fr;
                      var rapport = aiLang==="ar"?aiReport.rapport_ar:aiLang==="en"?aiReport.rapport_en:aiReport.rapport_fr;
                      var isRtl = aiLang==="ar";
                      var resumeLabel = isRtl?"الملخص:":aiLang==="en"?"Summary:":"Résumé :";
                      w.document.write('<!DOCTYPE html><html dir="'+(isRtl?"rtl":"ltr")+'"><head><title>Analyse IA — ' + latestDate + '</title><style>body{font-family:system-ui,sans-serif;padding:28px;color:#1e293b;max-width:800px;margin:0 auto}h1{color:#5B21B6;border-bottom:2px solid #7C3AED;padding-bottom:8px}h2{color:#3B0764;margin-top:24px;font-size:15px}h3{color:#6D28D9;font-size:13px}.resume{background:#F5F3FF;border-'+(isRtl?"right":"left")+':4px solid #7C3AED;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;color:#3B0764;line-height:1.7}.meta{font-size:11px;color:#94a3b8;margin-bottom:20px}@media print{.no-print{display:none!important}}</style></head><body>');
                      w.document.write('<h1>🧠 Analyse IA</h1>');
                      w.document.write('<div class="meta">GNAO-KIAF · ' + latestDate + ' · ' + latestList.length + ' parcelles</div>');
                      w.document.write('<div class="resume"><strong>' + resumeLabel + '</strong><br>' + (resume||'') + '</div>');
                      w.document.write('<hr style="border:none;border-top:1px solid #e2e8f0;margin:20px 0">');
                      w.document.write(md2html(rapport||''));
                      w.document.write('<div class="no-print" style="margin-top:24px"><button onclick="window.print()" style="padding:8px 20px;background:#7C3AED;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px">🖨️ Imprimer / PDF</button></div>');
                      w.document.write('</body></html>');
                      w.document.close();
                      setTimeout(function(){ w.print(); }, 400);
                    }} style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }}
                      onMouseEnter={function(e){ e.currentTarget.style.background='#0EA5E9'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#0EA5E9'; }}
                      onMouseLeave={function(e){ e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
                      🖨️
                    </button>
                    {/* Email button */}
                    <button title="Envoyer par email" onClick={function(e){
                      e.stopPropagation();
                      var knownEmails = ['jamalfaik@gmail.com','marocoultou@gmail.com','larbi.abourazzek@gmail.com'];
                      var overlay = document.createElement('div');
                      overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center';
                      var selectedEmails = new Set([knownEmails[0]]);
                      var render = function() {
                        overlay.innerHTML = '';
                        var box = document.createElement('div');
                        box.style.cssText = 'background:#fff;border-radius:12px;padding:24px;min-width:360px;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,0.3);font-family:system-ui,sans-serif';
                        box.innerHTML = '<div style="font-size:16px;font-weight:700;color:#1e293b;margin-bottom:16px">📧 Envoyer l\'analyse IA par email</div>' +
                          '<div style="font-size:12px;color:#64748b;margin-bottom:6px;font-weight:600">Objet :</div>' +
                          '<input id="emailSubject" type="text" value="🧠 Analyse IA IA Foliaire — ' + latestDate + '" style="width:100%;padding:7px 10px;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;outline:none;margin-bottom:14px;box-sizing:border-box" />' +
                          '<div style="font-size:12px;color:#64748b;margin-bottom:10px;font-weight:600">Destinataires :</div>' +
                          knownEmails.map(function(em){ return '<label style="display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;margin-bottom:4px;background:' + (selectedEmails.has(em)?'#F5F3FF':'#F8FAFC') + ';border:1px solid ' + (selectedEmails.has(em)?'#C4B5FD':'#E2E8F0') + '"><input type="checkbox" data-email="' + em + '" ' + (selectedEmails.has(em)?'checked':'') + ' style="accent-color:#7C3AED;width:16px;height:16px"><span style="font-size:13px;color:#334155">' + em + '</span></label>'; }).join('') +
                          '<div style="margin-top:12px;display:flex;gap:8px;align-items:center"><input id="newEmailInput" type="email" placeholder="Ajouter un email..." style="flex:1;padding:7px 10px;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;outline:none" /><button id="addEmailBtn" style="background:#7C3AED;color:#fff;border:none;border-radius:6px;padding:7px 12px;font-size:11px;font-weight:700;cursor:pointer">+ Ajouter</button></div>' +
                          '<div style="margin-top:18px;display:flex;gap:8px;justify-content:flex-end"><button id="cancelBtn" style="padding:7px 16px;background:#F1F5F9;color:#64748b;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer">Annuler</button><button id="sendBtn" style="padding:7px 16px;background:#8B5CF6;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer">Envoyer ✉️</button></div>';
                        overlay.appendChild(box);
                        box.querySelectorAll('input[data-email]').forEach(function(cb){ cb.addEventListener('change', function(){ if(cb.checked) selectedEmails.add(cb.dataset.email); else selectedEmails.delete(cb.dataset.email); render(); }); });
                        box.querySelector('#addEmailBtn').addEventListener('click', function(){ var inp=box.querySelector('#newEmailInput'); var v=inp.value.trim(); if(v&&v.includes('@')){ knownEmails.push(v); selectedEmails.add(v); render(); } });
                        box.querySelector('#newEmailInput').addEventListener('keydown', function(ev){ if(ev.key==='Enter') box.querySelector('#addEmailBtn').click(); });
                        box.querySelector('#cancelBtn').addEventListener('click', function(){ overlay.remove(); });
                        box.querySelector('#sendBtn').addEventListener('click', async function(){
                          var recipients = [...selectedEmails];
                          if(recipients.length===0){ alert('Sélectionnez au moins un destinataire'); return; }
                          var sendBtn2 = box.querySelector('#sendBtn');
                          sendBtn2.textContent='Envoi...'; sendBtn2.disabled=true;
                          var md2html = function(s){ return (s||'').replace(/## (.+)/g,'<h2 style="color:#3B0764;font-size:15px;margin-top:20px">$1</h2>').replace(/### (.+)/g,'<h3 style="color:#6D28D9;font-size:13px">$1</h3>').replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>').replace(/\n/g,'<br>'); };
                          var resume = aiLang==="ar"?aiReport.resume_ar:aiLang==="en"?aiReport.resume_en:aiReport.resume_fr;
                          var rapport = aiLang==="ar"?aiReport.rapport_ar:aiLang==="en"?aiReport.rapport_en:aiReport.rapport_fr;
                          var isRtl = aiLang==="ar";
                          var resumeLabel = isRtl?"الملخص:":aiLang==="en"?"Summary:":"Résumé :";
                          var html = '<div style="font-family:system-ui,sans-serif;max-width:700px;margin:0 auto;color:#1e293b;direction:'+(isRtl?"rtl":"ltr")+'">'
                            + '<h1 style="color:#5B21B6;border-bottom:2px solid #7C3AED;padding-bottom:8px">🧠 Analyse IA</h1>'
                            + '<p style="font-size:11px;color:#94a3b8">GNAO-KIAF · ' + latestDate + ' · ' + latestList.length + ' parcelles</p>'
                            + '<div style="background:#F5F3FF;border-'+(isRtl?"right":"left")+':4px solid #7C3AED;padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px;color:#3B0764;line-height:1.7"><strong>' + resumeLabel + '</strong><br>' + (resume||'') + '</div>'
                            + '<hr style="border:none;border-top:1px solid #e2e8f0;margin:20px 0">'
                            + md2html(rapport||'')
                            + '</div>';
                          try {
                            var subjectVal = box.querySelector('#emailSubject').value.trim() || ('🧠 Analyse IA IA Foliaire — ' + latestDate);
                            var res = await fetch('/send-email', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ subject: subjectVal, body: html, recipients: recipients }) });
                            var j = await res.json();
                            if(j.status==='ok'){ overlay.remove(); alert('✅ Email envoyé à ' + recipients.join(', ')); }
                            else { sendBtn2.textContent='Envoyer ✉️'; sendBtn2.disabled=false; alert('❌ ' + (j.message||'Erreur')); }
                          } catch(err){ sendBtn2.textContent='Envoyer ✉️'; sendBtn2.disabled=false; alert('❌ Erreur: ' + err.message); }
                        });
                      };
                      render();
                      document.body.appendChild(overlay);
                      overlay.addEventListener('click', function(ev){ if(ev.target===overlay) overlay.remove(); });
                    }} style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }}
                      onMouseEnter={function(e){ e.currentTarget.style.background='#8B5CF6'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#8B5CF6'; }}
                      onMouseLeave={function(e){ e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
                      📧
                    </button>
                    <button onClick={function(){ setAiExp(function(v){ return !v; }); }}
                      style={{ background:"#7C3AED", color:"#fff", border:"none", borderRadius:20, padding:"6px 14px", fontSize:12, fontWeight:700, cursor:"pointer", fontFamily:"sans-serif" }}>
                      {aiExpanded ? "▲ Masquer" : "👁 Voir analyse"}
                    </button>
                  </div>
                )}
              </div>
              {aiReport && !aiLoading && (
                <div style={{ padding:"2px 16px 6px", background:"linear-gradient(135deg,#F5F3FF,#EDE9FE)", textAlign:"right" }}>
                  <span onClick={function(){ runAiAnalysis(); }} style={{ fontSize:10, color:"#A78BFA", cursor:"pointer", fontFamily:"sans-serif", textDecoration:"underline" }}>🔄 Relancer l'analyse</span>
                </div>
              )}
              {aiExpanded && aiReport && (
                <AiReportPanel aiReport={aiReport} aiLang={aiLang} setAiLang={setAiLang} latestDate={latestDate} latestList={latestList} geminiKey={geminiKey} />
              )}
            </Card>
          )}

{/* ── Latest batch cards ── */}
          {latestList.length > 0 && (
            <div style={{ fontSize:11, fontWeight:700, color:C.muted, textTransform:"uppercase", letterSpacing:1, fontFamily:"sans-serif" }}>
              Dernière campagne — {latestDate} ({latestList.length} parcelles)
            </div>
          )}
          {latestList.map(function(a){ return <OverviewCard key={a.id} a={a}/>; })}

{/* ── Older analyses link ── */}
          {olderList.length > 0 && (
            <button onClick={function(){ setTab("history"); }} style={{ background:"none", border:"1px solid #DDD", borderRadius:10, padding:"8px 0", color:C.muted, fontSize:12, cursor:"pointer", fontFamily:"sans-serif" }}>
              {"Voir tout l'historique (" + analyses.length + " analyses)"}
            </button>
          )}
        </div>
      )}

{tab === "detail" && selected && <DetailView a={selected}/>}

{tab === "history" && (
        <div style={{ display:"grid", gap:10 }}>
          <button onClick={function(){ setTab("overview"); }} style={{ background:"none", border:"none", color:C.bark, fontSize:13, cursor:"pointer", fontFamily:"sans-serif", textAlign:"left", padding:"0 0 8px" }}>{"< Retour"}</button>
          {sorted.map(function(a){ return <OverviewCard key={a.id} a={a}/>; })}
        </div>
      )}

{modal && (
        <Modal title={form.report_ref ? "Rapport " + form.report_ref : "Nouvelle analyse"} onClose={function(){ setModal(false); }}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Ref. rapport" value={form.report_ref||""} onChange={function(v){ setForm(function(f){ return {...f,report_ref:v}; });}}/>
            <FInput label="Culture" value={form.culture||""} onChange={function(v){ setForm(function(f){ return {...f,culture:v}; });}} options={[{v:"Valenciana",l:"Valenciana"},{v:"Navellina",l:"Navellina"}]}/>
            <FInput label="Parcelle" value={form.parcelle||""} onChange={function(v){ setForm(function(f){ return {...f,parcelle:v}; });}}/>
            <FInput label="Bloc" value={form.zone_id||""} onChange={function(v){
              var cMap = { "b3":"Valenciana","b4":"Valenciana","b5":"Valenciana","b6":"Valenciana","b7":"Navellina","b8":"Navellina","b9":"Navellina","b10":"Navellina","b11":"Navellina" };
              setForm(function(f){ return {...f, zone_id:v, culture: cMap[v]||f.culture}; });
            }} options={zones.map(function(z){ return {v:z.id,l:z.name}; })}/>
            <FInput label="Date prelevement" value={form.date_prelevement||""} onChange={function(v){ setForm(function(f){ return {...f,date_prelevement:v}; });}} type="date"/>
            <FInput label="Date analyse" value={form.date_analyse||""} onChange={function(v){ setForm(function(f){ return {...f,date_analyse:v}; });}} type="date"/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:"#2980B9", textTransform:"uppercase", margin:"8px 0 4px", fontFamily:"sans-serif" }}>Elements Majeurs (% de MS)</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
            <FInput label="N Total" value={form.n_total||""} onChange={function(v){ setForm(function(f){ return {...f,n_total:v}; });}} type="number"/>
            <FInput label="P" value={form.p||""} onChange={function(v){ setForm(function(f){ return {...f,p:v}; });}} type="number"/>
            <FInput label="K" value={form.k||""} onChange={function(v){ setForm(function(f){ return {...f,k:v}; });}} type="number"/>
            <FInput label="Mg" value={form.mg||""} onChange={function(v){ setForm(function(f){ return {...f,mg:v}; });}} type="number"/>
            <FInput label="Ca" value={form.ca||""} onChange={function(v){ setForm(function(f){ return {...f,ca:v}; });}} type="number"/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:C.danger, textTransform:"uppercase", margin:"8px 0 4px", fontFamily:"sans-serif" }}>Elements Nefastes</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 12px" }}>
            <FInput label="Na (mg/kg)" value={form.na||""} onChange={function(v){ setForm(function(f){ return {...f,na:v}; });}} type="number"/>
            <FInput label="Cl (% MS)" value={form.cl||""} onChange={function(v){ setForm(function(f){ return {...f,cl:v}; });}} type="number"/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:C.olive, textTransform:"uppercase", margin:"8px 0 4px", fontFamily:"sans-serif" }}>Oligo-elements (mg/kg de MS)</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
            <FInput label="Zn" value={form.zn||""} onChange={function(v){ setForm(function(f){ return {...f,zn:v}; });}} type="number"/>
            <FInput label="Cu" value={form.cu||""} onChange={function(v){ setForm(function(f){ return {...f,cu:v}; });}} type="number"/>
            <FInput label="Mn" value={form.mn||""} onChange={function(v){ setForm(function(f){ return {...f,mn:v}; });}} type="number"/>
            <FInput label="Fe" value={form.fe||""} onChange={function(v){ setForm(function(f){ return {...f,fe:v}; });}} type="number"/>
            <FInput label="B"  value={form.b||""}  onChange={function(v){ setForm(function(f){ return {...f,b:v}; });}}  type="number"/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px", marginTop:4 }}>
            <FInput label="Nb feuilles" value={form.nb_feuilles||""} onChange={function(v){ setForm(function(f){ return {...f,nb_feuilles:v}; });}} type="number"/>
            <FInput label="Poids sec (g)" value={form.poids_sec||""} onChange={function(v){ setForm(function(f){ return {...f,poids_sec:v}; });}} type="number"/>
            <FInput label="Poids moy. feuille" value={form.poids_moyen_feuille||""} onChange={function(v){ setForm(function(f){ return {...f,poids_moyen_feuille:v}; });}} type="number"/>
          </div>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:8 }}>
            <Btn outline onClick={function(){ setModal(false); }} color={C.muted}>Annuler</Btn>
            <Btn onClick={save} color={C.olive}>Enregistrer</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Messages ──────────────────────────────────────────────────────────────────
var SENDERS = [
  { id:"Jamal", label:"Jamal (Vous)", color:"#2980B9" },
  { id:"Brahim", label:"Brahim (Gerant)", color:"#5C3D1E" },
  { id:"Houceine", label:"Houceine (Consultant)", color:"#6B7C3B" },
  { id:"SsiMo", label:"SsiMo (Consultant)", color:"#8B5CF6" },
  { id:"Larbi", label:"Larbi (Co-gerant)", color:"#D97706" },
  { id:"Yassine", label:"Yassine (Co-gerant)", color:"#E67E22" },
];

// ── Editable Payroll Card ────────────────────────────────────────────────────
function PayrollCard({ entries: initialEntries, weekStart, grandTotal, photoUrls, meta, msg, db, aiNotes }) {
  const [rows, setRows] = useState(() => initialEntries.map((w,i) => ({ ...w, _id: i })));
  const [editing, setEditing] = useState(!msg.actionDone && initialEntries.length > 0);
  const alreadyApproved = msg.actionDone;

const inputStyle = { border:"1px solid " + meta.border, borderRadius:4, padding:"3px 6px", fontSize:12, width:"100%", textAlign:"center", background:"#fff" };

return (
    <div style={{ background: meta.bg, border:`1px solid ${meta.border}`, borderRadius:10, padding:"12px 14px", marginBottom:10 }}>
      <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:10 }}>
        <span style={{ fontSize:16 }}>💵</span>
        <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>Feuille de paie — semaine du {weekStart || "?"}</span>
        {alreadyApproved && !editing && <span style={{ background:"#D1FAE5", color:"#065F46", padding:"2px 10px", borderRadius:20, fontSize:11, fontWeight:700, marginLeft:"auto" }}>✅ Approuvée</span>}
        {alreadyApproved && !editing && <button onClick={()=>setEditing(true)} style={{ background:"none", border:"1px solid #A5B4FC", color:"#3730A3", borderRadius:6, padding:"2px 10px", fontSize:11, cursor:"pointer", fontWeight:600, marginLeft:alreadyApproved?8:"auto" }}>✏️ Modifier</button>}
      </div>
      <div style={{ display:"flex", gap:12, alignItems:"flex-start" }}>
        {photoUrls.length > 0 && (
          <div style={{ display:"flex", flexDirection:"column", gap:6, flexShrink:0 }}>
            {photoUrls.map((url,i) => (
              <a key={i} href={url} target="_blank" rel="noopener noreferrer">
                <img src={url} alt={`kachf ${i+1}`} style={{ width:130, height:100, objectFit:"cover", borderRadius:8, border:`1px solid ${meta.border}`, cursor:"zoom-in", display:"block" }} />
              </a>
            ))}
          </div>
        )}
        {rows.length > 0 ? (() => {
          const salaryRows = rows.filter(w => w.notes !== "additional_expense");
          const extraRows = rows.filter(w => w.notes === "additional_expense");
          const salaryTotal = salaryRows.reduce((s,w) => s + (w.total||0), 0);
          const extraTotal = extraRows.reduce((s,w) => s + (w.total||0), 0);
          const salaryIndices = rows.map((w,i) => w.notes !== "additional_expense" ? i : -1).filter(i => i >= 0);
          const extraIndices = rows.map((w,i) => w.notes === "additional_expense" ? i : -1).filter(i => i >= 0);

return (
          <div style={{ flex:1, minWidth:0 }}>
            {/* ── Salary table ── */}
            <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
              <thead>
                <tr style={{ background: meta.border + "55" }}>
                  <th style={{ padding:"5px 8px", textAlign:"right", color: meta.text, fontWeight:700 }}>العامل</th>
                  <th style={{ padding:"5px 8px", textAlign:"center", color: meta.text, fontWeight:700, width:60 }}>الأيام</th>
                  <th style={{ padding:"5px 8px", textAlign:"center", color: meta.text, fontWeight:700, width:80 }}>السعر/يوم</th>
                  <th style={{ padding:"5px 8px", textAlign:"center", color: meta.text, fontWeight:700, width:80 }}>المجموع</th>
                  {editing && <th style={{ width:30 }}></th>}
                </tr>
              </thead>
              <tbody>
                {salaryIndices.map((ri,si) => { const w = rows[ri]; return (
                  <tr key={w._id} style={{ borderTop:`1px solid ${meta.border}55`, background: si%2===0 ? "#fff" : meta.bg }}>
                    {editing ? (<>
                      <td style={{ padding:"4px 6px" }}><input value={w.worker_name} onChange={e=>updateRow(ri,"worker_name",e.target.value)} style={{ ...inputStyle, textAlign:"right", direction:"rtl" }} /></td>
                      <td style={{ padding:"4px 6px" }}><input type="number" value={w.days_worked} onChange={e=>updateRow(ri,"days_worked",e.target.value)} style={inputStyle} /></td>
                      <td style={{ padding:"4px 6px" }}><input type="number" value={w.daily_rate} onChange={e=>updateRow(ri,"daily_rate",e.target.value)} style={inputStyle} /></td>
                      <td style={{ padding:"4px 6px", textAlign:"center", fontWeight:700, color: meta.text }}>{w.total} DH</td>
                      <td style={{ padding:"2px" }}><button onClick={()=>removeRow(ri)} style={{ background:"none", border:"none", color:"#EF4444", cursor:"pointer", fontSize:14 }}>✕</button></td>
                    </>) : (<>
                      <td style={{ padding:"5px 8px", fontWeight:600, color: meta.text, direction:"rtl" }}>{w.worker_name}</td>
                      <td style={{ padding:"5px 8px", textAlign:"center", color: meta.text }}>{w.days_worked}</td>
                      <td style={{ padding:"5px 8px", textAlign:"center", color: meta.text }}>{w.daily_rate} DH</td>
                      <td style={{ padding:"5px 8px", textAlign:"center", fontWeight:700, color: meta.text }}>{w.total} DH</td>
                    </>)}
                  </tr>
                ); })}
              </tbody>
              <tfoot>
                <tr style={{ borderTop:`2px solid ${meta.border}`, background: meta.border + "33" }}>
                  <td colSpan={3} style={{ padding:"6px 8px", fontWeight:700, color: meta.text, textAlign:"right" }}>مجموع الأجور</td>
                  <td colSpan={editing ? 2 : 1} style={{ padding:"6px 8px", fontWeight:700, fontSize:13, color: meta.text, textAlign:"center" }}>{salaryTotal} DH</td>
                </tr>
              </tfoot>
            </table>

{editing && (
              <button onClick={addRow} style={{ marginTop:6, background:"#E0E7FF", color:"#3730A3", border:"1px solid #A5B4FC", borderRadius:6, padding:"4px 10px", fontSize:11, cursor:"pointer", fontWeight:600 }}>
                + Ajouter un ouvrier
              </button>
            )}

{/* ── Additional expenses section ── */}
            {(extraRows.length > 0 || editing) && (
              <div style={{ marginTop:12 }}>
                <div style={{ display:"flex", alignItems:"center", gap:6, marginBottom:6 }}>
                  <span style={{ fontSize:13 }}>🧾</span>
                  <span style={{ fontWeight:700, fontSize:12, color:"#92400E" }}>Dépenses additionnelles</span>
                </div>
                <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
                  <thead>
                    <tr style={{ background:"#FEF3C7" }}>
                      <th style={{ padding:"5px 8px", textAlign:"right", color:"#92400E", fontWeight:700 }}>الوصف</th>
                      <th style={{ padding:"5px 8px", textAlign:"center", color:"#92400E", fontWeight:700, width:100 }}>المبلغ</th>
                      {editing && <th style={{ width:30 }}></th>}
                    </tr>
                  </thead>
                  <tbody>
                    {extraIndices.map((ri,ei) => { const w = rows[ri]; return (
                      <tr key={w._id} style={{ borderTop:"1px solid #FDE68A", background: ei%2===0 ? "#FFFBEB" : "#FEF3C7" }}>
                        {editing ? (<>
                          <td style={{ padding:"4px 6px" }}><input value={w.worker_name} onChange={e=>updateRow(ri,"worker_name",e.target.value)} style={{ ...inputStyle, textAlign:"right", direction:"rtl", borderColor:"#FDE68A" }} /></td>
                          <td style={{ padding:"4px 6px" }}><input type="number" value={w.total} onChange={e=>{ updateRow(ri,"total",e.target.value); updateRow(ri,"daily_rate",e.target.value); }} style={{ ...inputStyle, borderColor:"#FDE68A" }} /></td>
                          <td style={{ padding:"2px" }}><button onClick={()=>removeRow(ri)} style={{ background:"none", border:"none", color:"#EF4444", cursor:"pointer", fontSize:14 }}>✕</button></td>
                        </>) : (<>
                          <td style={{ padding:"5px 8px", fontWeight:600, color:"#92400E", direction:"rtl" }}>{w.worker_name}</td>
                          <td style={{ padding:"5px 8px", textAlign:"center", fontWeight:700, color:"#92400E" }}>{w.total} DH</td>
                        </>)}
                      </tr>
                    ); })}
                  </tbody>
                  {extraRows.length > 0 && (
                    <tfoot>
                      <tr style={{ borderTop:"2px solid #F59E0B", background:"#FDE68A55" }}>
                        <td style={{ padding:"6px 8px", fontWeight:700, color:"#92400E", textAlign:"right" }}>المجموع</td>
                        <td colSpan={editing ? 2 : 1} style={{ padding:"6px 8px", fontWeight:700, fontSize:13, color:"#92400E", textAlign:"center" }}>{extraTotal} DH</td>
                      </tr>
                    </tfoot>
                  )}
                </table>
                {editing && (
                  <button onClick={()=>setRows(prev=>[...prev,{worker_name:"",days_worked:1,daily_rate:0,total:0,notes:"additional_expense",_id:Date.now()}])} style={{ marginTop:6, background:"#FEF3C7", color:"#92400E", border:"1px solid #FDE68A", borderRadius:6, padding:"4px 10px", fontSize:11, cursor:"pointer", fontWeight:600 }}>
                    + Ajouter une dépense
                  </button>
                )}
              </div>
            )}

{/* ── Grand total ── */}
            {extraRows.length > 0 && (
              <div style={{ marginTop:10, padding:"8px 12px", background: meta.border + "22", borderRadius:8, display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>المجموع الإجمالي (Total général)</span>
                <span style={{ fontWeight:700, fontSize:16, color: meta.text }}>{computedTotal} DH</span>
              </div>
            )}

{editing && (
              <div style={{ display:"flex", gap:8, marginTop:10, alignItems:"center" }}>
                <button onClick={handleApprove} style={{ background:"#3730A3", color:"#fff", border:"none", borderRadius:8, padding:"8px 20px", fontWeight:700, fontSize:13, cursor:"pointer" }}>
                  ✅ {alreadyApproved ? "Mettre à jour" : "Approuver et enregistrer"}
                </button>
                {alreadyApproved && <button onClick={()=>setEditing(false)} style={{ background:"none", border:"1px solid #ccc", borderRadius:6, padding:"5px 12px", fontSize:12, cursor:"pointer", color:"#666" }}>Annuler</button>}
              </div>
            )}
          </div>
          );
        })()
        : (
          <div style={{ flex:1, color:"#6B7280", fontSize:12, fontStyle:"italic", paddingTop:8 }}>
            {aiNotes.executive_summary ? "⏳ En cours de traitement par l'IA..." : "📷 Photo reçue — en attente de traitement IA."}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Editable Invoice (Facture) Card ─────────────────────────────────────────
// Fully self-contained — owns its own editing state so parent re-renders
// (triggered by db.updateMessage → setData) never reset the edited entries.
function FactureCard({ aiNotes: initialNotes, photoUrls, audioUrls, meta, msg, db, data }) {
  const [editing, setEditing] = React.useState(false);
  const [entries, setEntries] = React.useState(() =>
    (initialNotes.invoice_entries || []).map((e,i) => ({ ...e, _id: i, items: e.items ? e.items.map((it,j) => ({...it,_id:j})) : [] }))
  );
  const isEditing = editing;

const audioTranscriptions = initialNotes.audio_transcriptions || [];
  const alreadyApproved = msg.actionDone;

const isEnergyBill = entries.some(inv =>
    /\b(srm|one|onee)\b/i.test(inv.supplier || "") || inv.is_srm_energy_bill || inv.is_energy_detail_page
  );

// ── Row-level helpers ──────────────────────────────────────────────────────
  const updateItem = (eIdx, iIdx, field, val) => setEntries(prev => prev.map((e, ei) => {
    if (ei !== eIdx) return e;
    const newItems = e.items.map((it, ii) => {
      if (ii !== iIdx) return it;
      const updated = { ...it, [field]: field === 'unit_price' || field === 'quantity' ? +val || 0 : val };
      if (field === 'unit_price' || field === 'quantity') updated.total = (updated.unit_price || 0) * (updated.quantity || 0);
      return updated;
    });
    const newGrandTotal = newItems.reduce((s, it) => s + (+it.total || 0), 0);
    return { ...e, items: newItems, grand_total: newGrandTotal || e.grand_total };
  }));

const removeItem = (eIdx, iIdx) => setEntries(prev => prev.map((e, ei) => {
    if (ei !== eIdx) return e;
    const newItems = e.items.filter((_, ii) => ii !== iIdx);
    const newGrandTotal = newItems.reduce((s, it) => s + (+it.total || 0), 0);
    return { ...e, items: newItems, grand_total: newGrandTotal || e.grand_total };
  }));

const updateEntryField = (eIdx, field, val) => setEntries(prev => prev.map((e, ei) =>
    ei === eIdx ? { ...e, [field]: field === 'grand_total' ? (+val || 0) : val } : e
  ));

// Save edited entries back to notes — saves directly, no parent callback
  const handleSaveEdits = async () => {
    const cleaned = entries.map(({ _id, items, ...e }) => ({
      ...e, items: (items || []).map(({ _id: _iid, ...it }) => it)
    }));
    const newNotes = { ...initialNotes, invoice_entries: cleaned };
    await db.updateMessage(msg.id, { notes: JSON.stringify(newNotes) });
    setEditing(false);
  };

// Approve
  const handleApprove = async () => {
    if (!entries.length) { alert("Aucune entrée à approuver."); return; }
    const total = entries.reduce((s, inv) => s + (+inv.grand_total || 0), 0);
    if (!window.confirm(`Approuver ${entries.length} facture(s) — Total: ${total} DH ?`)) return;
    for (const inv of entries) {
      await db.addExpense({
        category: "Fournisseurs",
        description: (inv.supplier || "Fournisseur") + (inv.invoice_number ? " N°" + inv.invoice_number : ""),
        amount: +inv.grand_total || 0,
        date: inv.invoice_date || msg.date,
        zone: "",
        notes: inv.notes || "",
        media_url: photoUrls[0] || "",
      });
    }
    await db.updateMessage(msg.id, { action_done: true });
  };

const inp = { border:"1px solid #D1D5DB", borderRadius:4, padding:"2px 5px", fontSize:11, background:"#fff" };
  const grandTotal = entries.reduce((s, inv) => s + (+inv.grand_total || 0), 0);

{entries.length > 0 ? entries.map((inv, eIdx) => {
        const invPhoto = inv.photo_url || photoUrls[eIdx] || "";
        return (
          <div key={inv._id ?? eIdx} style={{ background:"#fff", border:`1px solid ${meta.border}88`, borderRadius:8, padding:"10px 12px", marginBottom:10 }}>
            <div style={{ display:"flex", gap:12, alignItems:"flex-start" }}>
              {invPhoto && (
                <a href={invPhoto} target="_blank" rel="noopener noreferrer" style={{ flexShrink:0 }}>
                  <img src={invPhoto} alt="facture" style={{ width:90, height:90, objectFit:"cover", borderRadius:6, border:`1px solid ${meta.border}` }} />
                </a>
              )}
              <div style={{ flex:1, minWidth:0 }}>
                {/* Supplier + status */}
                <div style={{ display:"flex", gap:8, alignItems:"center", marginBottom:4, flexWrap:"wrap" }}>
                  {isEditing
                    ? <input value={inv.supplier||""} onChange={e => updateEntryField(eIdx,'supplier',e.target.value)} style={{...inp, fontWeight:700, fontSize:13, flex:1}} placeholder="Fournisseur"/>
                    : <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>{inv.supplier || "Fournisseur inconnu"}</span>
                  }
                  <span style={{ background: inv.payment_status==="paid" ? "#D1FAE5" : "#FEF3C7", color: inv.payment_status==="paid" ? "#065F46" : "#92400E", padding:"1px 8px", borderRadius:20, fontSize:10, fontWeight:700 }}>
                    {inv.payment_status==="paid" ? "✅ Payée" : "⏳ À régler"}
                  </span>
                </div>
                {/* Invoice meta */}
                {(inv.invoice_number || inv.invoice_date) && (
                  <div style={{ fontSize:11, color:"#6B7280", marginBottom:6 }}>
                    {inv.invoice_number && <span>N° {inv.invoice_number}  </span>}
                    {inv.invoice_date && <span>— {inv.invoice_date}</span>}
                  </div>
                )}

{/* Line items table */}
                {(inv.items && inv.items.length > 0) || isEditing ? (
                  <table style={{ width:"100%", borderCollapse:"collapse", fontSize:11, marginBottom:6 }}>
                    <thead>
                      <tr style={{ background: meta.border+"33" }}>
                        <th style={{ padding:"3px 6px", textAlign:"right", color: meta.text, fontWeight:700 }}>البضاعة</th>
                        <th style={{ padding:"3px 6px", textAlign:"center", color: meta.text, fontWeight:700, width:60 }}>الكمية</th>
                        <th style={{ padding:"3px 6px", textAlign:"center", color: meta.text, fontWeight:700, width:70 }}>السعر</th>
                        <th style={{ padding:"3px 6px", textAlign:"center", color: meta.text, fontWeight:700, width:70 }}>المجموع</th>
                        {isEditing && <th style={{ width:28 }}></th>}
                      </tr>
                    </thead>
                    <tbody>
                      {(inv.items||[]).map((item, iIdx) => (
                        <tr key={item._id ?? iIdx} style={{ borderTop:`1px solid ${meta.border}44` }}>
                          <td style={{ padding:"3px 6px", direction:"rtl" }}>
                            {isEditing
                              ? <input value={item.description||""} onChange={e => updateItem(eIdx,iIdx,'description',e.target.value)} style={{...inp, width:"100%", textAlign:"right"}} placeholder="Description"/>
                              : <span style={{ color:"#374151" }}>{item.description}</span>
                            }
                          </td>
                          <td style={{ padding:"3px 6px", textAlign:"center" }}>
                            {isEditing
                              ? <input type="number" value={item.quantity||""} onChange={e => updateItem(eIdx,iIdx,'quantity',e.target.value)} style={{...inp, width:50, textAlign:"center"}}/>
                              : <span style={{ color:"#374151" }}>{item.quantity} {item.unit||""}</span>
                            }
                          </td>
                          <td style={{ padding:"3px 6px", textAlign:"center" }}>
                            {isEditing
                              ? <input type="number" value={item.unit_price||""} onChange={e => updateItem(eIdx,iIdx,'unit_price',e.target.value)} style={{...inp, width:60, textAlign:"center"}}/>
                              : <span style={{ color:"#374151" }}>{item.unit_price ? item.unit_price+" DH" : "—"}</span>
                            }
                          </td>
                          <td style={{ padding:"3px 6px", textAlign:"center", fontWeight:600, color: meta.text }}>
                            {isEditing
                              ? <input type="number" value={item.total||""} onChange={e => updateItem(eIdx,iIdx,'total',e.target.value)} style={{...inp, width:60, textAlign:"center"}}/>
                              : <span>{item.total ? item.total+" DH" : "—"}</span>
                            }
                          </td>
                          {isEditing && (
                            <td style={{ padding:"3px 4px", textAlign:"center" }}>
                              <button onClick={() => removeItem(eIdx, iIdx)} style={{ background:"none", border:"none", color:"#DC2626", cursor:"pointer", fontSize:14, fontWeight:700, padding:0 }}>×</button>
                            </td>
                          )}
                        </tr>
                      ))}
                    </tbody>
                    <tfoot>
                      <tr style={{ borderTop:`2px solid ${meta.border}`, background: meta.border+"22" }}>
                        <td colSpan={isEditing ? 3 : 3} style={{ padding:"4px 6px", fontWeight:700, color: meta.text, textAlign:"right" }}>Total:</td>
                        <td style={{ padding:"4px 6px", textAlign:"center" }}>
                          {isEditing
                            ? <input type="number" value={inv.grand_total||""} onChange={e => updateEntryField(eIdx,'grand_total',e.target.value)} style={{...inp, width:70, fontWeight:700, textAlign:"center"}}/>
                            : <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>{inv.grand_total} DH</span>
                          }
                        </td>
                        {isEditing && <td></td>}
                      </tr>
                    </tfoot>
                  </table>
                ) : (
                  <div style={{ fontSize:13, fontWeight:700, color: meta.text, marginBottom:6 }}>Total: {inv.grand_total} DH</div>
                )}

{isEditing && (
                  <button onClick={() => addItem(eIdx)} style={{ background:"none", border:`1px dashed ${meta.border}`, borderRadius:6, padding:"3px 10px", fontSize:11, color: meta.text, cursor:"pointer", marginBottom:4 }}>+ Ajouter une ligne</button>
                )}
                {inv.notes && <div style={{ fontSize:11, color:"#6B7280", fontStyle:"italic", marginTop:4 }}>{inv.notes}</div>}
              </div>
            </div>
          </div>
        );
      }) : (
        <div style={{ color:"#6B7280", fontSize:12, fontStyle:"italic", padding:"8px 0" }}>
          {initialNotes.executive_summary ? "⏳ Analyse en cours..." : "📷 Photo(s) reçue(s) — en attente d'analyse IA."}
        </div>
      )}

{/* Footer: total + actions */}
      <div style={{ display:"flex", alignItems:"center", gap:12, marginTop:4, paddingTop:10, borderTop:`1px solid ${meta.border}44`, flexWrap:"wrap" }}>
        {entries.length > 0 && <div style={{ fontWeight:700, fontSize:14, color: meta.text }}>Total: {grandTotal} DH</div>}
        {isEditing && entries.length > 0 && (
          <button onClick={handleSaveEdits} style={{ background:"#1D4ED8", color:"#fff", border:"none", borderRadius:8, padding:"7px 16px", fontWeight:700, fontSize:12, cursor:"pointer" }}>
            💾 Sauvegarder les modifications
          </button>
        )}
        {!alreadyApproved && !isEditing && entries.length > 0 && (
          <button onClick={handleApprove} style={{ background:"#166534", color:"#fff", border:"none", borderRadius:8, padding:"8px 20px", fontWeight:700, fontSize:13, cursor:"pointer" }}>
            ✅ Approuver dans les dépenses
          </button>
        )}
      </div>

{/* Voice notes */}
      {audioUrls.length > 0 && (
        <div style={{ marginTop:10, paddingTop:10, borderTop:`1px solid ${meta.border}44` }}>
          <div style={{ fontSize:11, fontWeight:700, color:"#581C87", marginBottom:6 }}>🎤 Note vocale</div>
          {audioUrls.map((url, i) => {
            const tr = audioTranscriptions[i];
            return (
              <div key={i} style={{ display:"flex", gap:10, background:"#FAF5FF", border:"1px solid #E9D5FF", borderRadius:8, padding:"10px 12px", marginBottom:6, flexWrap:"wrap" }}>
                <div style={{ flex:"1 1 180px" }}>
                  <audio className="agro-media" controls src={url} style={{ width:"100%", height:32 }} />
                </div>
                {tr && tr.original_transcript && (
                  <div style={{ flex:"1 1 180px", fontSize:12, color:"#4B5563", lineHeight:1.5 }} dir="auto">
                    <span style={{ fontSize:10, fontWeight:700, color:"#7C3AED", display:"block", marginBottom:2 }}>TRANSCRIPTION</span>
                    {tr.original_transcript}
                  </div>
                )}
                {tr && tr.translation && (
                  <div style={{ flex:"1 1 180px", fontSize:12, color:"#4B5563", lineHeight:1.5 }} dir="auto">
                    <span style={{ fontSize:10, fontWeight:700, color:"#7C3AED", display:"block", marginBottom:2 }}>TRADUCTION</span>
                    {typeof tr.translation === "object" ? (tr.translation.fr || tr.translation.en || Object.values(tr.translation)[0] || "") : tr.translation}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function MessagesView({ data, db, lang, msgFilter, setMsgFilter }) {
  const [tab, setTab] = useState("list");
  const [modal, setModal] = useState(false);
  const [search, setSearch] = useState(msgFilter?.search || "");
  const [filterSender, setFilter] = useState("all");
  const [filterAction, setFilterA]= useState("all");
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo,   setFilterDateTo]   = useState("");

// Consume msgFilter on mount — scroll to specific message if requested
  const scrollTargetRef = useRef(msgFilter?.scrollToId || null);
  useEffect(() => {
    if (scrollTargetRef.current) {
      setTimeout(() => {
        const el = document.getElementById('msg-' + scrollTargetRef.current);
        if (el) el.scrollIntoView({ behavior:'smooth', block:'center' });
        scrollTargetRef.current = null;
      }, 300);
    }
    if (setMsgFilter) setMsgFilter(null); // clear after consuming
  }, []);
  const [form, setForm] = useState({});
  const [transcribing, setTransc] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef(null);
  const audioChunksRef = useRef([]);
  const [audioFile, setAudioFile] = useState(null);
  const [aiKeywords, setAiKeywords] = useState([]);
  const [isAiSearching, setIsAiSearching] = useState(false);

// AI Query Expansion Hook
  useEffect(() => {
    if (!search || search.trim().length < 3) {
      setAiKeywords([]);
      setIsAiSearching(false);
      return;
    }
    
    // Debounce the API call so it doesn't fire on every single keystroke
    const timeoutId = setTimeout(async () => {
      let key = geminiKey || (localStorage.getItem("albaraka_settings") ? JSON.parse(localStorage.getItem("albaraka_settings")).geminiKey : "");
      if (!key) return; // Fail silently if no key is present
      
      setIsAiSearching(true);
      try {
        const prompt = `Expand this search query: "${search}". Return a JSON array of up to 5 highly relevant synonyms, related terms, or variations in French and Moroccan Darija context. (e.g., if input is "internet", return ["wifi", "connexion", "reseau"]). Return ONLY a raw JSON array of strings, nothing else.`;
        
        // Using Flash instead of Pro for lightning-fast autocomplete speed
        const res = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=" + key, {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], generationConfig: { temperature: 0.2 } })
        });
        
        const d = await res.json();
        let txt = d.candidates[0].content.parts[0].text;
        txt = txt.replace(/```json/g, "").replace(/```/g, "").trim();
        setAiKeywords(JSON.parse(txt));
      } catch(err) { console.warn("AI Expansion failed:", err); }
      setIsAiSearching(false);
    }, 600); // Wait 600ms after user stops typing before calling AI

return () => clearTimeout(timeoutId);
  }, [search]);
  const [selectedIds, setSelectedIds] = useState([]);
  const scrollContainerRef = useRef(null);

// Preserve scroll position across deletes
  function withScrollPreserved(fn) {
    const el = scrollContainerRef.current || document.querySelector('[data-main-scroll]');
    const top = el ? el.scrollTop : 0;
    fn();
    requestAnimationFrame(() => requestAnimationFrame(() => { if (el) el.scrollTop = top; }));
  }
  
  const todayStr = new Date().toISOString().slice(0,10);
  const thisMonth = todayStr.slice(0,7);
  const [openMonths, setOpenMonths] = useState({ [thisMonth]: true });
  const [recentPage, setRecentPage] = useState(0);
  const [olderPage, setOlderPage] = useState(0);
  const [showOlder, setShowOlder] = useState(false);
  const [previewImage, setPreviewImage] = useState(null);
  const [previewCtx, setPreviewCtx] = useState(null); // {photos, date, parcels, gps}
  const [previewMeas, setPreviewMeas] = useState(null); // {type, parcelName, measurements, currentIdx, allMeas, parcels, date}
  const previewAudioRef = useRef(null);
  const fileRef = useRef();

const rtl = lang === "ar";
  const messages = data.messages || [];
  const geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";

const normalize = (str) => (str||"").toLowerCase().replace(/[-_.,'"\s]/g, "");
  
  // Split search into individual words — ALL must match (conjunction)
  // AI synonyms expand individual words (any synonym can satisfy that word)
  const searchWords = search.trim().split(/\s+/).filter(Boolean).map(normalize);
  const aiNormalized = aiKeywords.filter(Boolean).map(normalize);

// Pre-compute searchable text for each message (cached per render)
  const searchableText = useMemo(() => {
    return messages.map(m => {
      let text = [m.summary, m.sender, m.tags, m.media_type, m.date].filter(Boolean).join(" ");
      if (m.content) {
        const c = typeof m.content === "string" ? m.content : JSON.stringify(m.content);
        text += " " + c;
      }
      if (m.notes) {
        const n = typeof m.notes === "string" ? m.notes : JSON.stringify(m.notes);
        text += " " + n;
      }
      return normalize(text);
    });
  }, [messages]);

const filtered = messages.filter(function(m, idx) {
    // Reviewed visits live in the Visites tab, not here
    if (m.media_type === "visit_bundle" && m.actionDone) return false;
    // Every search word must be found (directly or via AI synonym)
    var s1 = searchWords.length === 0 || searchWords.every(word =>
      searchableText[idx].includes(word) || aiNormalized.some(syn => searchableText[idx].includes(syn) && syn.includes(word))
    );
    var s2 = filterSender === "all" || m.sender === filterSender;
    var s3 = filterAction === "all" || (filterAction === "pending" && m.actionRequired && !m.actionDone) || (filterAction === "done" && m.actionDone);
    var mDate = (m.date || m.created_at || "").slice(0, 10);
    var s4 = (!filterDateFrom || mDate >= filterDateFrom) && (!filterDateTo || mDate <= filterDateTo);
    return s1 && s2 && s3 && s4;
  });

const stopVoiceSearch = () => {
    if(mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
      mediaRecorderRef.current.stop();
      mediaRecorderRef.current.stream.getTracks().forEach(t => t.stop());
    }
  };

var pendingCount = messages.filter(function(m){ return m.actionRequired && !m.actionDone; }).length;

function senderColor(id) {
    var s = SENDERS.find(function(x){ return x.id===id || (id && id.toLowerCase().includes(x.id.toLowerCase())); });
    return s ? s.color : C.muted;
  }

function openNew() {
    setForm({ date:todayStr, sender:"Brahim", summary:"", actionRequired:false, actionDone:false, tags:"", notes:"" });
    setAudioFile(null);
    setModal(true);
  }

function save() {
    db.addMessage(form);
    setModal(false);
  }

const TabBtn = ({id, label, count}) => (
    <button onClick={()=>setTab(id)} style={{ padding:"7px 16px", borderRadius:20, border:"none", cursor:"pointer", fontSize:12, fontWeight:tab===id?700:400, background:tab===id?"#fff":"transparent", color:tab===id?C.soil:C.muted, boxShadow:tab===id?"0 2px 4px rgba(0,0,0,0.05)":"none" }}>
      {label} {count>0 && <span style={{ background:C.danger, color:"#fff", padding:"2px 6px", borderRadius:10, fontSize:10, marginLeft:6 }}>{count}</span>}
    </button>
  );

async function extractLabData(e, m, db, geminiKey) {
    const btn = e.target;
    const originalText = btn.innerText;
    btn.innerText = "⏳ IA en cours...";
    btn.disabled = true;

try {
      let key = geminiKey || (localStorage.getItem("albaraka_settings") ? JSON.parse(localStorage.getItem("albaraka_settings")).geminiKey : "");
      if (!key) throw new Error("Clé Gemini manquante dans les Paramètres"); 
      
      const urls = (m.media_url || "").split(",").map(u=>u.trim()).filter(Boolean);
      let soilCount = 0; let leafCount = 0;

// We process each PDF one by one to ensure the exact media_url matches the extracted data
      for (let url of urls) {
        const res = await fetch(url);
        if (!res.ok) continue;
        const blob = await res.blob();
        const b64 = await new Promise(r => { const reader = new FileReader(); reader.onload = () => r(reader.result.split(",")[1]); reader.readAsDataURL(blob); });
        let mime = blob.type;
        if (!mime || mime === "application/octet-stream") mime = url.toLowerCase().includes(".pdf") ? "application/pdf" : "image/jpeg";
        
        const godPrompt = `You are an elite agricultural data extraction specialist. I will provide you with ONE Labomag analysis report.
Determine if it is a SOIL analysis (Analyse de Sol) or LEAF analysis (Analyse Végétale/Foliaire).
Return ONE single JSON object.

RULES:
1. Number format: Convert all commas to dots (e.g. "13,63" -> 13.63). ALL chemical values MUST be flat numbers (or null), never strings.
2. If SOIL with H1 (0-30) and H2 (30-60) horizons, mathematically AVERAGE the H1 and H2 values into a single flat number.
3. If Nitrogen is split (e.g., NH4 and NO3), SUM them for n_total.
4. "####" means cut off -> use null.

IF SOIL, USE THIS SCHEMA:
{
  "analysis_type": "SOIL",
  "report_metadata": { "report_ref": "", "date_prelevement": "YYYY-MM-DD", "parcelle": "", "culture": "" },
  "data": { "n_total": null, "p": null, "k": null, "mg": null, "ca": null, "na": null, "cl": null, "zn": null, "cu": null, "mn": null, "fe": null, "b": null, "organic_matter_pct": null, "pH_water": null }
}

IF LEAF (VÉGÉTALE), USE THIS SCHEMA:
{
  "analysis_type": "LEAF",
  "report_metadata": { "report_ref": "", "date_prelevement": "YYYY-MM-DD", "parcelle": "", "culture": "", "variety": "" },
  "data": { "n_total": null, "p": null, "k": null, "mg": null, "ca": null, "na": null, "cl": null, "zn": null, "cu": null, "mn": null, "fe": null, "b": null, "dry_weight_g": null, "avg_leaf_weight_g": null }
}`;
        
        const r = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=" + key, {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ contents: [{ parts: [{ text: godPrompt }, { inline_data: { mime_type: mime, data: b64 } }] }], generationConfig: { temperature: 0 } })
        });
        
        const d = await r.json();
        if (d.error) throw new Error(d.error.message);
        if (!d.candidates || d.candidates.length === 0) continue;
        
        let text = d.candidates[0].content.parts[0].text;
        let cleanText = text.trim();
        if (cleanText.includes("```json")) cleanText = cleanText.split("```json")[1].split("```")[0];
        else if (cleanText.includes("```")) cleanText = cleanText.split("```")[1].split("```")[0];
        cleanText = cleanText.replace(/,\s*([\]}])/g, '$1').trim();
        
        let record = JSON.parse(cleanText);
        if (Array.isArray(record)) record = record[0]; // Force single object if Gemini hallucinates an array
        
        let flatRecord = {
            analysis_type: record.analysis_type,
            report_ref: record.report_metadata?.report_ref || "",
            date_prelevement: record.report_metadata?.date_prelevement || "",
            parcelle: record.report_metadata?.parcelle || "",
            culture: record.report_metadata?.culture || "",
            zone_id: { "P3":"b3","P4":"b4","P5":"b5","P6":"b6","P7":"b7","P8":"b8","P9":"b9","P10":"b10","P11":"b11" }[record.report_metadata?.parcelle] || "",
            ...record.data, 
            media_url: url, // <-- EXACT PDF PERFECTLY MAPPED HERE!
            raw_json: record 
        };
        
        if(db && db.addLeafAnalysis) await db.addLeafAnalysis(flatRecord); 
        if(record.analysis_type === "SOIL") soilCount++; else leafCount++;
      }
      
      alert(`✅ Extraction terminée : ${soilCount} Analyse(s) de Sol, ${leafCount} Analyse(s) Foliaire(s) sauvegardées !`);
      if(m.actionRequired && db && db.updateMessage) db.updateMessage(m.id, { action_done: true });
      
    } catch (err) { 
      alert("Erreur: " + err.message); 
    } finally {
      btn.innerText = originalText;
      btn.disabled = false;
    }
  }

const [activeAiTip, setActiveAiTip] = useState(null);
  const [rawSummary, setRawSummary] = useState(m.summary);
  const [rawNotes, setRawNotes] = useState(m.notes);
  
  // Helper to get parcel centroid for satellite view
  const getParcelCenter = (parcelName) => {
    console.log("getParcelCenter called:", parcelName, "parcels:", parcels?.length);
    if (!parcels || !parcels.length) return null;
    const parcel = parcels.find(p => p.name === parcelName);
    if (!parcel || !parcel.polygon || !parcel.polygon.length) return null;
    const poly = parcel.polygon;
    const lat = poly.reduce((sum, pt) => sum + pt[0], 0) / poly.length;
    const lng = poly.reduce((sum, pt) => sum + pt[1], 0) / poly.length;
    return { lat, lng };
  };
  const [editSummary, setEditSummary] = useState("");
  const [editExecSum, setEditExecSum] = useState("");
  const [editDetRep, setEditDetRep] = useState("");
  const [editAlerts, setEditAlerts] = useState("");
  const [editNotes, setEditNotes] = useState("");

useEffect(() => {
    // Don't overwrite local edit state from background refreshes while editing
    if (!isEditing) { setRawSummary(m.summary); setRawNotes(m.notes); }
  }, [m.summary, m.notes]);

const locSummary = getLangText(rawSummary);

// Parse v59 notes for edit
  const _getV59 = () => {
    if (!rawNotes) return null;
    try { const obj = JSON.parse(rawNotes); return (obj && obj.executive_summary !== undefined) ? obj : null; } catch(e) { return null; }
  };
  const _getLocField = (field) => {
    if (!field) return ""; if (typeof field === 'string') return field;
    return field[lang] || field['fr'] || field['en'] || Object.values(field)[0] || "";
  };

let p = m.content;
  try { if (typeof p === 'string') p = JSON.parse(p.trim()); } catch(e) { p = typeof m.content === 'object' ? m.content : {}; }

const newRawSummary = updateLangStr(rawSummary, lang, editSummary);
      setRawSummary(newRawSummary);

// Update notes (v59 fields)
      let newRawNotes = rawNotes;
      const v59 = _getV59();
      if (v59) {
          const updated = { ...v59 };
          updated.executive_summary = updateLangField(v59.executive_summary, lang, editExecSum);
          updated.detailed_agronomist_report = updateLangField(v59.detailed_agronomist_report, lang, editDetRep);
          const alertLines = editAlerts.split('\n').map(s => s.trim()).filter(Boolean);
          updated.critical_alerts = alertLines.map(a => ({ [lang]: a }));
          // Merge edited transcriptions
          if (editTranscriptions.length > 0) {
              updated.audio_transcriptions = (v59.audio_transcriptions || []).map((t, i) => {
                  if (!editTranscriptions[i]) return t;
                  const et = editTranscriptions[i];
                  return { ...t, original_transcript: et.original_transcript,
                    translation: typeof t.translation === 'object'
                      ? { ...t.translation, [lang]: et.translation }
                      : et.translation };
              });
          }
          // Merge edited photo insights
          if (editPhotoInsights.length > 0) {
              updated.photo_insights = (v59.photo_insights || []).map((pi, i) => {
                  if (!editPhotoInsights[i]) return pi;
                  const analysis = editPhotoInsights[i].analysis;
                  return { ...pi, analysis: typeof pi.analysis === 'object'
                    ? { ...pi.analysis, [lang]: analysis } : analysis };
              });
          }
          // Merge edited measurement values
          if (editMeasurements.length > 0) {
              updated.validated_measurements = (v59.validated_measurements || []).map((mv, i) => {
                  if (!editMeasurements[i]) return mv;
                  return { ...mv, value: editMeasurements[i].value,
                    insight: typeof mv.insight === 'object'
                      ? { ...mv.insight, [lang]: editMeasurements[i].insight }
                      : editMeasurements[i].insight };
              });
          }
          newRawNotes = JSON.stringify(updated);
          setRawNotes(newRawNotes);
      }

setIsEditing(false);
      // Keep _editingRef true until Supabase write confirms, so background poll won't overwrite
      try {
          const updateData = { summary: newRawSummary };
          if (v59) updateData.notes = newRawNotes;
          if (typeof db !== 'undefined' && db.updateMessage) {
              await db.updateMessage(m.id, updateData); // await so we know when write completes
          } else if (typeof supabase !== 'undefined') {
              await supabase.from('messages').update(updateData).eq('id', m.id);
          }
      } catch (e) {
          console.error("Update failed", e);
          setSaveError("Erreur de sauvegarde: " + (e.message || e));
      } finally {
          if (window._editingRef) window._editingRef.current = false;
      }
  };

// Inline per-section save — only updates the single field, no full-edit mode needed
  const openSection = (key, value) => { setEditSection(key); setEditVal(value || ''); if (window._editingRef) window._editingRef.current = true; };
  const cancelSection = () => { setEditSection(null); setEditVal(''); if (window._editingRef) window._editingRef.current = false; };
  const saveSection = async (key) => {
    const val = editVal;
    setEditSection(null); setEditVal('');
    const updateLangStr = (originalRaw, newText) => {
      if (!originalRaw) return JSON.stringify({ [lang]: newText });
      try { let obj = JSON.parse(originalRaw); if (typeof obj !== 'object') throw 0; obj[lang] = newText; return JSON.stringify(obj); } catch(e) { return JSON.stringify({ [lang]: newText }); }
    };
    const updateLangField = (field, newText) => {
      if (!field) return { [lang]: newText };
      if (typeof field === 'string') return newText;
      return { ...field, [lang]: newText };
    };
    try {
      let updateData = {};
      if (key === 'summary') {
        const newSummary = updateLangStr(rawSummary, val);
        setRawSummary(newSummary);
        updateData.summary = newSummary;
      } else {
        const v59 = _getV59();
        const updated = v59 ? { ...v59 } : {};
        if (key === 'execSum') updated.executive_summary = updateLangField(v59?.executive_summary, val);
        else if (key === 'detRep') updated.detailed_agronomist_report = updateLangField(v59?.detailed_agronomist_report, val);
        else if (key === 'alerts') {
          updated.critical_alerts = val.split('\n').map(s => s.trim()).filter(Boolean).map(a => ({ [lang]: a }));
        } else if (key === 'meas') {
          updated.validated_measurements = (v59?.validated_measurements || []).map((mv, i) => {
              if (!editMeasurements[i]) return mv;
              return { ...mv, value: editMeasurements[i].value,
                insight: typeof mv.insight === 'object'
                  ? { ...mv.insight, [lang]: editMeasurements[i].insight }
                  : editMeasurements[i].insight };
          });
        } else if (key.startsWith('tr_')) {
          const i = parseInt(key.slice(3));
          const trs = [...(v59?.audio_transcriptions || [])];
          trs[i] = { ...trs[i], original_transcript: val };
          updated.audio_transcriptions = trs;
        } else if (key.startsWith('tl_')) {
          const i = parseInt(key.slice(3));
          const trs = [...(v59?.audio_transcriptions || [])];
          const t = trs[i] || {};
          trs[i] = { ...t, translation: updateLangField(t.translation, val) };
          updated.audio_transcriptions = trs;
        }
        const newNotes = JSON.stringify(updated);
        setRawNotes(newNotes);
        updateData.notes = newNotes;
      }
      if (typeof db !== 'undefined' && db.updateMessage) await db.updateMessage(m.id, updateData);
    } catch(e) { console.error('saveSection failed', e); setSaveError('Erreur: ' + (e.message || e)); }
    finally { if (window._editingRef) window._editingRef.current = false; }
  };

// Helper: inline edit box for a section
  const SectionEdit = ({ sKey, rows, style }) => (
    <div style={{ display:"flex", flexDirection:"column", gap:6, ...style }}>
      <textarea value={editVal} onChange={e => setEditVal(e.target.value)} rows={rows||4}
        autoFocus
        style={{ width:"100%", padding:"8px", borderRadius:"6px", border:"1px solid #FDBA74", fontFamily:"inherit", fontSize:"13px", lineHeight:"1.5", boxSizing:"border-box", resize:"vertical" }} dir="auto" />
      <div style={{ display:"flex", gap:6 }}>
        <button onClick={() => saveSection(sKey)} style={{ padding:"4px 14px", background:"#DCFCE7", color:"#166534", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>💾 Sauvegarder</button>
        <button onClick={cancelSection} style={{ padding:"4px 14px", background:"#FEE2E2", color:"#991B1B", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>✕ Annuler</button>
      </div>
    </div>
  );

return (
    <>
    <Card id={'msg-'+m.id} style={{ padding:16, borderLeft:"4px solid " + senderColor(m.sender), background: (typeof selectedIds !== 'undefined' && selectedIds.includes(m.id)) ? "#FFFBF0" : "#fff", marginBottom: 12 }}>
      
      {/* HEADER */}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:12, flexWrap:"wrap", gap: 8 }}>
        <div style={{ display:"flex", gap:8, alignItems:"center", flexWrap:"wrap" }}>
          {(typeof selectedIds !== 'undefined' && typeof setSelectedIds === 'function') && (
            <input type="checkbox" checked={selectedIds.includes(m.id)} onMouseDown={e => e.preventDefault()} onChange={() => setSelectedIds(prev => prev.includes(m.id) ? prev.filter(id => id !== m.id) : [...prev, m.id])} style={{ transform:"scale(1.3)", cursor:"pointer", marginRight:"8px" }} />
          )}
          <span style={{ background:senderColor(m.sender), color:"#fff", padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700 }}>{m.sender}</span>
          {(() => {
            const parcelName = p && p.parcel_name;
            if (parcelName) return (
              <span style={{ display:"inline-flex", alignItems:"center", gap:4, background:"#F3F4F6", color:"#374151", padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700, border:"1px solid #D1D5DB" }}>
                📍 {editingParcel ? (
                  <select autoFocus style={{ fontSize:11, border:"none", background:"transparent", fontWeight:700, color:"#374151", cursor:"pointer", outline:"none" }}
                    defaultValue={parcelName}
                    onBlur={() => setEditingParcel(false)}
                    onChange={async (e) => {
                      const newParcel = e.target.value;
                      setEditingParcel(false);
                      if (!newParcel || newParcel === parcelName) return;
                      try {
                        const oldContent = typeof m.content === 'string' ? JSON.parse(m.content) : (m.content || {});
                        const updMeas = (oldContent.measurements || []).map(ms => ({
                          ...ms,
                          parcel_name: (ms.parcel_name === parcelName || !ms.parcel_name || ms.parcel_name === 'Inconnu') ? newParcel : ms.parcel_name
                        }));
                        const newContent = { ...oldContent, parcel_name: newParcel, measurements: updMeas };
                        await db.updateMessage(m.id, { content: JSON.stringify(newContent) });
                      } catch(err) { console.error("parcel update failed:", err); }
                    }}>
                    {(parcels || []).map(pc => <option key={pc.id} value={pc.name}>{pc.name}</option>)}
                    <option value="Inconnu">Inconnu</option>
                  </select>
                ) : parcelName}
                <span title="Modifier la parcelle" onClick={() => setEditingParcel(true)} style={{ cursor:"pointer", fontSize:10, opacity:0.6, marginLeft:2 }}>✏️</span>
              </span>
            );
            if (m.gps_location) {
              try {
                const hex = m.gps_location;
                let lat, lng;
                if (hex.startsWith('SRID=')) { const m2 = hex.match(/POINT$([-\d.]+)\s+([-\d.]+)$/); if (m2) { lng=parseFloat(m2[1]); lat=parseFloat(m2[2]); } }
                else if (hex.length >= 50) { const buf = new Uint8Array(hex.match(/.{2}/g).map(b=>parseInt(b,16))).buffer; const dv = new DataView(buf); lat=dv.getFloat64(17,true); lng=dv.getFloat64(9,true); }
                if (lat && lng) {
                  const matched = parcels && parcels.find(pc => {
                    if (!pc.polygon || !pc.polygon.length) return false;
                    const cLat = pc.polygon.reduce((s,pt)=>s+pt[0],0)/pc.polygon.length;
                    const cLng = pc.polygon.reduce((s,pt)=>s+pt[1],0)/pc.polygon.length;
                    return Math.abs(cLat-lat)<0.003 && Math.abs(cLng-lng)<0.003;
                  });
                  const label = matched ? matched.name : `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
                  return (
                    <span style={{ display:"inline-flex", alignItems:"center", gap:4 }}>
                      <a href={`https://maps.google.com/?q=${lat},${lng}`} target="_blank" rel="noopener noreferrer" style={{ background:"#ECFDF5", color:"#065F46", padding:"3px 10px", borderRadius:20, fontSize:11, fontWeight:700, border:"1px solid #A7F3D0", textDecoration:"none" }}>📍 {label}</a>
                      {m.media_type === "visit_bundle" && (
                        editingParcel ? (
                          <select autoFocus style={{ fontSize:11, border:"1px solid #A7F3D0", background:"#ECFDF5", fontWeight:700, color:"#065F46", cursor:"pointer", borderRadius:20, padding:"2px 6px" }}
                            defaultValue=""
                            onBlur={() => setEditingParcel(false)}
                            onChange={async (e) => {
                              const newParcel = e.target.value;
                              setEditingParcel(false);
                              if (!newParcel) return;
                              try {
                                const oldContent = typeof m.content === 'string' ? JSON.parse(m.content) : (m.content || {});
                                const updMeas = (oldContent.measurements || []).map(ms => ({ ...ms, parcel_name: ms.parcel_name || newParcel }));
                                const newContent = { ...oldContent, parcel_name: newParcel, measurements: updMeas };
                                await db.updateMessage(m.id, { content: JSON.stringify(newContent) });
                              } catch(err) { console.error("parcel update failed:", err); }
                            }}>
                            <option value="">— choisir parcelle —</option>
                            {(parcels || []).map(pc => <option key={pc.id} value={pc.name}>{pc.name}</option>)}
                          </select>
                        ) : (
                          <span title="Assigner une parcelle" onClick={() => setEditingParcel(true)} style={{ cursor:"pointer", fontSize:10, background:"#ECFDF5", border:"1px solid #A7F3D0", borderRadius:20, padding:"2px 6px", color:"#065F46" }}>✏️ Assigner</span>
                        )
                      )}
                    </span>
                  );
                }
              } catch(e) {}
            }
            return null;
          })()}
          <span style={{ fontSize:12, color:C.muted }}>Reçu le {m.created_at ? new Date(m.created_at).toLocaleDateString('fr-FR', {timeZone:'Africa/Casablanca'}) + ' à ' + new Date(m.created_at).toLocaleTimeString('fr-FR', {hour:'2-digit', minute:'2-digit', second:'2-digit', timeZone:'Africa/Casablanca'}) : m.date}</span>
        </div>
        <div style={{ display:"flex", gap:8, alignItems:"center" }}>
          {isEditing ? (
              <>
                <button onClick={handleSave} style={{ padding:"4px 12px", background:"#DCFCE7", color:"#166534", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>💾 Sauvegarder</button>
                <button onClick={() => { setIsEditing(false); setSaveError(null); if (window._editingRef) window._editingRef.current = false; }} style={{ padding:"4px 12px", background:"#FEE2E2", color:"#991B1B", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>❌ Annuler</button>
              </>
          ) : (
              <>
                <button onClick={startEdit} style={{ padding:"4px 12px", background:"#E0F2FE", color:"#0369A1", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>✏️ Éditer</button>
                {m.media_type === "visit_bundle" && !m.actionDone && (
                  <button onClick={() => { if(typeof db !== 'undefined') db.updateMessage(m.id, { action_done: true }); }} style={{ padding:"4px 12px", background:"#DCFCE7", color:"#166534", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>✅ Marquer comme revue</button>
                )}
                <button onClick={() => { if(window.confirm("Archiver ?") && typeof db !== 'undefined') db.archiveMessage(m.id); }} style={{ padding:"4px 12px", background:"#F0EBE3", color:C.bark, border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>📦 Archiver</button>
                <button onClick={() => { if(window.confirm("Supprimer ?") && typeof db !== 'undefined') withScrollPreserved(() => db.deleteMessage(m.id)); }} style={{ padding:"4px 12px", background:"#FDECEA", color:C.danger, border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>🗑 Supprimer</button>
              </>
          )}
        </div>
      </div>

{/* Fertigation bundle — show blocs + ingredients inline */}
      {m.media_type === "fertigation_bundle" && (() => {
        try {
          const c = typeof m.content === "string" ? JSON.parse(m.content) : m.content;
          if (!c) return null;
          const blocs = c.blocs || [];
          const ings = c.ingredients || [];
          const timeStr = c.time || "";
          return (
            <div style={{ background:"#F0FDF4", border:"1px solid #BBF7D0", borderRadius:10, padding:"10px 14px", marginBottom:10 }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:8 }}>
                <span style={{ fontSize:14 }}>💧</span>
                <span style={{ fontWeight:700, fontSize:13, color:"#166534" }}>Fertigation{timeStr ? " · "+timeStr : ""}</span>
              </div>
              {blocs.length > 0 && (
                <div style={{ display:"flex", flexWrap:"wrap", gap:4, marginBottom:8 }}>
                  {blocs.map(b => (
                    <span key={b} style={{ background:"#DCFCE7", color:"#166534", padding:"2px 10px", borderRadius:20, fontSize:12, fontWeight:700 }}>{b}</span>
                  ))}
                </div>
              )}
              {ings.length > 0 && (
                <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
                  {ings.map((ing, i) => (
                    <span key={i} style={{ background:"#fff", border:"1px solid #D1FAE5", color:"#065F46", padding:"2px 8px", borderRadius:6, fontSize:11 }}>
                      {ing.name} — <strong>{ing.amount} {ing.unit}</strong>
                    </span>
                  ))}
                </div>
              )}
            </div>
          );
        } catch(e) { return null; }
      })()}

{/* Chef de Ferme report — show structured fields inline */}
      {m.media_type === "chef_report" && (() => {
        try {
          const c = typeof m.content === "string" ? JSON.parse(m.content) : m.content;
          if (!c) return null;
          const tag = m.tags || "";
          const tagMeta = {
            livraison:         { icon:"📦", label:"Livraison",           bg:"#F0FDFA", border:"#5EEAD4", text:"#115E59" },
            facture:           { icon:"💰", label:"Facture à régler",    bg:"#F0FDF4", border:"#86EFAC", text:"#166534" },
            traitement_execute:{ icon:"🍃", label:"Traitement exécuté",  bg:"#ECFDF5", border:"#6EE7B7", text:"#065F46" },
            panne:             { icon:"🔧", label:"Panne / Maintenance", bg:"#FFF7ED", border:"#FDBA74", text:"#9A3412" },
            rh_incident:       { icon:"👷", label:"RH / Incident",       bg:"#F5F3FF", border:"#C4B5FD", text:"#4C1D95" },
            rapport_general:   { icon:"📸", label:"Rapport général",     bg:"#EFF6FF", border:"#93C5FD", text:"#1E3A8A" },
            ajor:              { icon:"💵", label:"Feuille de paie",     bg:"#EEF2FF", border:"#A5B4FC", text:"#3730A3" },
          };
          const meta = tagMeta[tag] || { icon:"📋", label: tag, bg:"#F9FAFB", border:"#E5E7EB", text:"#374151" };

// ── Special render: ajor (pay sheet) ────────────────────────────────
          if (tag === "ajor") {
            let aiNotes = {};
            try { aiNotes = typeof m.notes === "string" ? JSON.parse(m.notes) : (m.notes || {}); } catch(e) {}
            const payrollEntries = aiNotes.payroll_entries || [];
            const weekStart = aiNotes.payroll_week_start || m.date || "";
            const grandTotal = aiNotes.payroll_grand_total || 0;
            const photoUrls = (m.media_url || c.photo_url || "").split(",").map(u=>u.trim()).filter(u=>u && !/(?:m4a|mp3|wav)(?:\?|$)/i.test(u));
            return <PayrollCard entries={payrollEntries} weekStart={weekStart} grandTotal={grandTotal} photoUrls={photoUrls} meta={meta} msg={m} db={db} aiNotes={aiNotes} />;
          }

// ── Special render: facture (invoices) ──────────────────────────────
          if (tag === "facture") {
            let aiNotes = {};
            try { aiNotes = typeof m.notes === "string" ? JSON.parse(m.notes) : (m.notes || {}); } catch(e) {}
            const allUrls = (m.media_url || "").split(",").map(u=>u.trim()).filter(Boolean);
            const photoUrls = allUrls.filter(u => !/(?:m4a|mp3|wav)(?:\?|$)/i.test(u));
            const audioUrls = allUrls.filter(u => /(?:m4a|mp3|wav)(?:\?|$)/i.test(u));
            return <FactureCard aiNotes={aiNotes} photoUrls={photoUrls} audioUrls={audioUrls} meta={meta} msg={m} db={db} data={data} />;
          }

// ── Generic chef_report render ────────────────────────────────────────
          const fields = Object.entries(c).filter(([k]) => !['photo_url','photo_urls','count','photo_notes'].includes(k));
          const chefAllUrls = (m.media_url || "").split(",").map(u=>u.trim()).filter(Boolean);
          const chefPhotoUrls = chefAllUrls.filter(u => !/(?:m4a|mp3|wav)(?:\?|$)/i.test(u));
          const chefAudioUrls = chefAllUrls.filter(u => /(?:m4a|mp3|wav)(?:\?|$)/i.test(u));
          let chefAiNotes = {};
          try { chefAiNotes = typeof m.notes === "string" ? JSON.parse(m.notes) : (m.notes || {}); } catch(e) {}
          const chefAudioTr = chefAiNotes.audio_transcriptions || [];
          // Per-photo audio notes from content (photo_notes array)
          const photoNotes = Array.isArray(c.photo_notes) ? c.photo_notes : [];
          const perPhotoAudioMap = {};  // photoUrl → noteAudioUrl
          photoNotes.forEach(pn => { if (pn.note_audio_url) perPhotoAudioMap[pn.photo_url] = pn.note_audio_url; });
          // Standalone audio = audio URLs not linked to any photo
          const linkedAudioUrls = new Set(Object.values(perPhotoAudioMap));
          const standaloneAudioUrls = chefAudioUrls.filter(u => !linkedAudioUrls.has(u));
          return (
            <div style={{ background: meta.bg, border:`1px solid ${meta.border}`, borderRadius:10, padding:"10px 14px", marginBottom:10 }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:8 }}>
                <span style={{ fontSize:14 }}>{meta.icon}</span>
                <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>{meta.label}</span>
                {c.urgent && <span style={{ background:"#FEE2E2", color:"#991B1B", padding:"1px 8px", borderRadius:20, fontSize:11, fontWeight:700 }}>⚠️ Urgent</span>}
              </div>
              {fields.length > 0 && fields.some(([k,v]) => k !== 'urgent' && String(v).trim()) && (
                <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginBottom:8 }}>
                  {fields.map(([k, v]) => k !== 'urgent' && String(v).trim() && (
                    <span key={k} style={{ background:"#fff", border:`1px solid ${meta.border}`, color: meta.text, padding:"2px 8px", borderRadius:6, fontSize:11 }}>
                      <span style={{ opacity:0.6 }}>{k}: </span><strong>{String(v)}</strong>
                    </span>
                  ))}
                </div>
              )}
              {/* Photos with hover popup + per-photo audio */}
              {chefPhotoUrls.length > 0 && (
                <div style={{ display:"flex", gap:10, flexWrap:"wrap", marginTop:4 }}>
                  {chefPhotoUrls.map((url, i) => {
                    const noteAudioUrl = perPhotoAudioMap[url];
                    // Find transcription for this per-photo audio
                    const noteAudioIdx = noteAudioUrl ? chefAudioUrls.indexOf(noteAudioUrl) : -1;
                    const noteTr = noteAudioIdx >= 0 ? chefAudioTr[noteAudioIdx] : null;
                    return (
                      <div key={i} style={{ display:"flex", flexDirection:"column", gap:4, maxWidth: noteAudioUrl ? 260 : 120 }}>
                        <div style={{ position:"relative", display:"inline-block" }}
                          onMouseEnter={(e) => handleThumbHover('chef-photo-'+i, url, e)}
                          onMouseLeave={() => handleThumbHover(null, null, null)}>
                          <img src={url} alt="photo" onClick={() => setPreviewImage(url)}
                            style={{ maxHeight:100, maxWidth:120, borderRadius:6, border:`1px solid ${meta.border}`, cursor:"pointer", objectFit:"cover" }} />
                          {noteAudioUrl && (
                            <div style={{ position:"absolute", bottom:4, right:4, background:"#7C3AED", borderRadius:"50%", width:20, height:20, display:"flex", alignItems:"center", justifyContent:"center" }}>
                              <span style={{ fontSize:10, color:"#fff" }}>🎤</span>
                            </div>
                          )}
                        </div>
                        {noteAudioUrl && (
                          <div style={{ background:"#FAF5FF", border:"1px solid #E9D5FF", borderRadius:6, padding:"6px 8px" }}>
                            <audio className="agro-media" controls src={noteAudioUrl} style={{ width:"100%", height:28 }} />
                            {noteTr && noteTr.original_transcript && (
                              <div style={{ fontSize:10, color:"#4B5563", lineHeight:1.4, marginTop:4 }} dir="auto">
                                <span style={{ fontSize:9, fontWeight:700, color:"#7C3AED" }}>TRANSCRIPTION: </span>
                                {noteTr.original_transcript}
                              </div>
                            )}
                            {noteTr && noteTr.translation && (
                              <div style={{ fontSize:10, color:"#4B5563", lineHeight:1.4, marginTop:2 }} dir="auto">
                                <span style={{ fontSize:9, fontWeight:700, color:"#7C3AED" }}>TRADUCTION: </span>
                                {typeof noteTr.translation === "object" ? (noteTr.translation.fr || noteTr.translation.en || Object.values(noteTr.translation)[0] || "") : noteTr.translation}
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
              {/* Standalone voice note(s) — not linked to any photo */}
              {standaloneAudioUrls.length > 0 && (
                <div style={{ marginTop:10, paddingTop:10, borderTop:`1px solid ${meta.border}44` }}>
                  <div style={{ fontSize:11, fontWeight:700, color:"#581C87", marginBottom:6 }}>🎤 Note vocale</div>
                  {standaloneAudioUrls.map((url, i) => {
                    const origIdx = chefAudioUrls.indexOf(url);
                    const tr = origIdx >= 0 ? chefAudioTr[origIdx] : null;
                    return (
                      <div key={i} style={{ display:"flex", gap:10, background:"#FAF5FF", border:"1px solid #E9D5FF", borderRadius:8, padding:"10px 12px", marginBottom:6, flexWrap:"wrap" }}>
                        <div style={{ flex:"1 1 180px" }}>
                          <audio className="agro-media" controls src={url} style={{ width:"100%", height:32 }} />
                        </div>
                        {tr && tr.original_transcript && (
                          <div style={{ flex:"1 1 180px", fontSize:12, color:"#4B5563", lineHeight:1.5 }} dir="auto">
                            <span style={{ fontSize:10, fontWeight:700, color:"#7C3AED", display:"block", marginBottom:2 }}>TRANSCRIPTION</span>
                            {tr.original_transcript}
                          </div>
                        )}
                        {tr && tr.translation && (
                          <div style={{ flex:"1 1 180px", fontSize:12, color:"#4B5563", lineHeight:1.5 }} dir="auto">
                            <span style={{ fontSize:10, fontWeight:700, color:"#7C3AED", display:"block", marginBottom:2 }}>TRADUCTION</span>
                            {typeof tr.translation === "object" ? (tr.translation.fr || tr.translation.en || Object.values(tr.translation)[0] || "") : tr.translation}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        } catch(e) { return null; }
      })()}

{/* Consultant orders (purchase_order, foliar_treatment, general_task, fertigation_program) */}
      {m.media_type === "consultant_order" && (() => {
        try {
          const c = typeof m.content === "string" ? JSON.parse(m.content) : m.content;
          if (!c) return null;
          const tag = m.tags || "";
          const tagMeta = {
            purchase_order:     { icon:"🛒", label:"Bon de Commande",       bg:"#F5F3FF", border:"#A78BFA", text:"#4C1D95" },
            foliar_treatment:   { icon:"🍃", label:"Traitement Foliaire",   bg:"#ECFDF5", border:"#6EE7B7", text:"#065F46" },
            general_task:       { icon:"🚜", label:"Tâches & Entretien",    bg:"#FFF7ED", border:"#FDBA74", text:"#9A3412" },
            fertigation_program:{ icon:"💉", label:"Programme Fertigation", bg:"#EFF6FF", border:"#93C5FD", text:"#1E3A8A" },
          };
          const meta = tagMeta[tag] || { icon:"📋", label: tag || "Ordre Consultant", bg:"#F9FAFB", border:"#E5E7EB", text:"#374151" };
          return (
            <div style={{ background: meta.bg, border:`1px solid ${meta.border}`, borderRadius:10, padding:"10px 14px", marginBottom:10 }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:8 }}>
                <span style={{ fontSize:14 }}>{meta.icon}</span>
                <span style={{ fontWeight:700, fontSize:13, color: meta.text }}>{meta.label}</span>
              </div>
              {tag === "purchase_order" && Array.isArray(c.items) && (
                <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
                  <thead>
                    <tr style={{ background: meta.border + "44" }}>
                      <th style={{ textAlign:"left", padding:"4px 8px", color: meta.text }}>Produit</th>
                      <th style={{ textAlign:"right", padding:"4px 8px", color: meta.text }}>Quantité</th>
                      <th style={{ textAlign:"left", padding:"4px 8px", color: meta.text }}>Unité</th>
                    </tr>
                  </thead>
                  <tbody>
                    {c.items.map((item, i) => (
                      <tr key={i} style={{ borderTop:`1px solid ${meta.border}66` }}>
                        <td style={{ padding:"4px 8px", fontWeight:600, color: meta.text }}>{item.name}</td>
                        <td style={{ padding:"4px 8px", textAlign:"right", color: meta.text }}>{item.quantity > 0 ? item.quantity : "—"}</td>
                        <td style={{ padding:"4px 8px", color: meta.text, opacity:0.8 }}>{item.unit}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
              {tag === "fertigation_program" && c.type === "weekly_program" && (() => {
                const programs = c.programs || {};
                const cropLabels = { citrus: '🍊 Agrumes', olives: '🫒 Olives' };
                const weekStart = c.week_start;
                const weekLabel = (() => {
                  if (!weekStart) return null;
                  const d = new Date(weekStart + 'T00:00:00');
                  const end = new Date(d); end.setDate(end.getDate() + 6);
                  const fmt = dt => `${String(dt.getDate()).padStart(2,'0')}/${String(dt.getMonth()+1).padStart(2,'0')}`;
                  return `Semaine du ${fmt(d)} au ${fmt(end)}`;
                })();
                return (
                  <div style={{ fontSize:12 }}>
                    {weekLabel && (
                      <div style={{ fontWeight:600, color: meta.text, marginBottom:8, fontSize:11, opacity:0.75 }}>📅 {weekLabel}</div>
                    )}
                    {Object.entries(programs).map(([crop, prog]) => {
                      const days = (prog && prog.days) ? prog.days : [];
                      const exceptions = (prog && prog.exceptions) ? prog.exceptions : [];
                      if (days.length === 0 && exceptions.length === 0) return null;
                      // Collect all element columns present across all days
                      const cols = [...new Set(days.flatMap(d => Object.keys(d.doses || {})))];
                      const unit = el => el === 'Acid' ? 'L' : 'kg';
                      return (
                        <div key={crop} style={{ marginBottom:12 }}>
                          <div style={{ fontWeight:700, color: meta.text, marginBottom:6 }}>{cropLabels[crop] || crop}</div>
                          {days.length > 0 && (
                            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:11 }}>
                              <thead>
                                <tr style={{ background: meta.border + '33' }}>
                                  <th style={{ textAlign:'right', padding:'4px 8px', color: meta.text, fontWeight:700, borderBottom:`1px solid ${meta.border}` }}>Jour</th>
                                  {cols.map(el => (
                                    <th key={el} style={{ textAlign:'center', padding:'4px 8px', color: meta.text, fontWeight:700, borderBottom:`1px solid ${meta.border}` }}>{el}<br/><span style={{ fontWeight:400, opacity:0.6 }}>({unit(el)})</span></th>
                                  ))}
                                </tr>
                              </thead>
                              <tbody>
                                {days.map((d, i) => (
                                  <tr key={i} style={{ borderBottom:`1px solid ${meta.border}44` }}>
                                    <td style={{ padding:'4px 8px', fontWeight:600, color: meta.text, textAlign:'right' }}>{d.day}</td>
                                    {cols.map(el => (
                                      <td key={el} style={{ padding:'4px 8px', textAlign:'center', color: meta.text }}>
                                        {d.doses && d.doses[el] != null ? d.doses[el] : '—'}
                                      </td>
                                    ))}
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          )}
                          {exceptions.map((ex, i) => (
                            <div key={`ex-${i}`} style={{ marginTop:4, marginLeft:4, opacity:0.75, fontStyle:'italic', fontSize:11 }}>
                              Exception — {ex.parcels ? ex.parcels.join(', ') : ''}: {ex.element} {ex.dose}{unit(ex.element)} {ex.reason ? `(${ex.reason})` : ''}
                            </div>
                          ))}
                        </div>
                      );
                    })}
                  </div>
                );
              })()}
              {tag !== "purchase_order" && tag !== "fertigation_program" && (
                <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
                  {Object.entries(c).map(([k, v]) => (
                    <span key={k} style={{ background:"#fff", border:`1px solid ${meta.border}`, color: meta.text, padding:"2px 8px", borderRadius:6, fontSize:11 }}>
                      <span style={{ opacity:0.6 }}>{k}: </span><strong>{typeof v === 'object' ? JSON.stringify(v) : String(v)}</strong>
                    </span>
                  ))}
                </div>
              )}
            </div>
          );
        } catch(e) { return null; }
      })()}

{isEditing ? (
        <div style={{ display: "flex", flexDirection: "column", gap: "12px", marginTop: "10px" }}>
            {saveError && (
              <div style={{ padding:"10px 14px", background:"#FEF2F2", border:"1px solid #EF4444", borderRadius:"8px", color:"#B91C1C", fontSize:12, fontWeight:700 }}>
                ⚠️ {saveError}
              </div>
            )}
            <div style={{ padding: "12px", background: "#FFF4ED", border: "1px solid #F97316", borderRadius: "8px" }}>
                <strong style={{ fontSize: "12px", color: "#9A3412", display: "block", marginBottom: "6px" }}>✏️ Résumé (bandeau)</strong>
                <textarea value={editSummary} onChange={e => setEditSummary(e.target.value)} style={{ width: "100%", minHeight: "60px", padding: "10px", borderRadius: "6px", border: "1px solid #FDBA74", fontFamily: "inherit", fontSize: "13px", lineHeight: "1.5", boxSizing:"border-box" }} dir="auto" />
            </div>
            {_getV59() && (<>
            <div style={{ padding: "12px", background: "#FFF4ED", border: "1px solid #F97316", borderRadius: "8px" }}>
                <strong style={{ fontSize: "12px", color: "#9A3412", display: "block", marginBottom: "6px" }}>🔍 Analyse IA (résumé exécutif)</strong>
                <textarea value={editExecSum} onChange={e => setEditExecSum(e.target.value)} style={{ width: "100%", minHeight: "80px", padding: "10px", borderRadius: "6px", border: "1px solid #FDBA74", fontFamily: "inherit", fontSize: "13px", lineHeight: "1.5", boxSizing:"border-box" }} dir="auto" />
            </div>
            <div style={{ padding: "12px", background: "#F0F9FF", border: "1px solid #0EA5E9", borderRadius: "8px" }}>
                <strong style={{ fontSize: "12px", color: "#0369A1", display: "block", marginBottom: "6px" }}>📄 Rapport Détaillé</strong>
                <textarea value={editDetRep} onChange={e => setEditDetRep(e.target.value)} style={{ width: "100%", minHeight: "150px", padding: "10px", borderRadius: "6px", border: "1px solid #93C5FD", fontFamily: "inherit", fontSize: "13px", lineHeight: "1.5", boxSizing:"border-box" }} dir="auto" />
            </div>
            <div style={{ padding: "12px", background: "#FEF2F2", border: "1px solid #EF4444", borderRadius: "8px" }}>
                <strong style={{ fontSize: "12px", color: "#B91C1C", display: "block", marginBottom: "6px" }}>🚨 Alertes Critiques <span style={{ fontWeight: 400, fontSize: "11px", color: "#991B1B" }}>(une par ligne, vide = aucune)</span></strong>
                <textarea value={editAlerts} onChange={e => setEditAlerts(e.target.value)} style={{ width: "100%", minHeight: "50px", padding: "10px", borderRadius: "6px", border: "1px solid #FECACA", fontFamily: "inherit", fontSize: "13px", lineHeight: "1.5", boxSizing:"border-box" }} dir="auto" placeholder="Aucune alerte" />
            </div>
            {editTranscriptions.length > 0 && (
              <div style={{ padding:"12px", background:"#FAF5FF", border:"1px solid #C4B5FD", borderRadius:"8px" }}>
                <strong style={{ fontSize:"12px", color:"#4C1D95", display:"block", marginBottom:"10px" }}>🎤 Transcriptions & Traductions</strong>
                {editTranscriptions.map((tr, i) => (
                  <div key={i} style={{ marginBottom: i < editTranscriptions.length-1 ? 12 : 0, paddingBottom: i < editTranscriptions.length-1 ? 12 : 0, borderBottom: i < editTranscriptions.length-1 ? "1px solid #DDD6FE" : "none" }}>
                    <div style={{ fontSize:11, color:"#6D28D9", fontWeight:700, marginBottom:4 }}>Audio {i+1}</div>
                    <div style={{ marginBottom:6 }}>
                      <label style={{ fontSize:11, color:"#6D28D9", display:"block", marginBottom:3 }}>TRANSCRIPTION (Darija/original)</label>
                      <textarea value={tr.original_transcript} onChange={e => {
                        const upd = [...editTranscriptions]; upd[i] = {...upd[i], original_transcript: e.target.value};
                        setEditTranscriptions(upd);
                      }} style={{ width:"100%", minHeight:"55px", padding:"8px", borderRadius:"6px", border:"1px solid #C4B5FD", fontFamily:"inherit", fontSize:"13px", lineHeight:"1.5", boxSizing:"border-box" }} dir="auto" />
                    </div>
                    <div>
                      <label style={{ fontSize:11, color:"#6D28D9", display:"block", marginBottom:3 }}>TRADUCTION (FR)</label>
                      <textarea value={tr.translation} onChange={e => {
                        const upd = [...editTranscriptions]; upd[i] = {...upd[i], translation: e.target.value};
                        setEditTranscriptions(upd);
                      }} style={{ width:"100%", minHeight:"55px", padding:"8px", borderRadius:"6px", border:"1px solid #C4B5FD", fontFamily:"inherit", fontSize:"13px", lineHeight:"1.5", boxSizing:"border-box" }} dir="auto" />
                    </div>
                  </div>
                ))}
              </div>
            )}
            {editPhotoInsights.length > 0 && (
              <div style={{ padding:"12px", background:"#F0FDF4", border:"1px solid #86EFAC", borderRadius:"8px" }}>
                <strong style={{ fontSize:"12px", color:"#166534", display:"block", marginBottom:"10px" }}>🖼️ Insights Photos IA</strong>
                {editPhotoInsights.map((pi, i) => (
                  <div key={i} style={{ marginBottom: i < editPhotoInsights.length-1 ? 10 : 0 }}>
                    <label style={{ fontSize:11, color:"#166534", display:"block", marginBottom:3 }}>Photo {i+1}</label>
                    <textarea value={pi.analysis} onChange={e => {
                      const upd = [...editPhotoInsights]; upd[i] = {...upd[i], analysis: e.target.value};
                      setEditPhotoInsights(upd);
                    }} style={{ width:"100%", minHeight:"55px", padding:"8px", borderRadius:"6px", border:"1px solid #86EFAC", fontFamily:"inherit", fontSize:"13px", lineHeight:"1.5", boxSizing:"border-box" }} dir="auto" />
                  </div>
                ))}
              </div>
            )}
            {editMeasurements.length > 0 && (
              <div style={{ padding:"12px", background:"#EFF6FF", border:"1px solid #93C5FD", borderRadius:"8px" }}>
                <strong style={{ fontSize:"12px", color:"#1E3A8A", display:"block", marginBottom:"10px" }}>📊 Mesures</strong>
                <table style={{ width:"100%", borderCollapse:"collapse", fontSize:12 }}>
                  <thead>
                    <tr style={{ background:"#DBEAFE" }}>
                      <th style={{ padding:"5px 8px", textAlign:"left", color:"#1E3A8A", fontWeight:700 }}>Parcelle</th>
                      <th style={{ padding:"5px 8px", textAlign:"left", color:"#1E3A8A", fontWeight:700 }}>Heure</th>
                      <th style={{ padding:"5px 8px", textAlign:"left", color:"#1E3A8A", fontWeight:700 }}>Mesure</th>
                      <th style={{ padding:"5px 8px", textAlign:"left", color:"#1E3A8A", fontWeight:700 }}>Valeur</th>
                      <th style={{ padding:"5px 8px", textAlign:"left", color:"#1E3A8A", fontWeight:700 }}>Insight</th>
                    </tr>
                  </thead>
                  <tbody>
                    {editMeasurements.map((mv, i) => (
                      <tr key={i} style={{ borderBottom:"1px solid #BFDBFE" }}>
                        <td style={{ padding:"4px 6px", color:"#1E40AF", fontSize:11 }}>{mv.parcel_name || "—"}</td>
                        <td style={{ padding:"4px 6px", color:"#1E40AF", fontSize:11 }}>{mv.time || "—"}</td>
                        <td style={{ padding:"4px 6px", fontWeight:600, color:"#1E40AF" }}>{mv.label}</td>
                        <td style={{ padding:"4px 6px" }}>
                          <input type="text" value={mv.value} onChange={e => {
                            const upd = [...editMeasurements]; upd[i] = {...upd[i], value: e.target.value};
                            setEditMeasurements(upd);
                          }} style={{ width:"70px", padding:"3px 6px", borderRadius:"4px", border:"1px solid #93C5FD", fontSize:12, fontFamily:"inherit" }} />
                        </td>
                        <td style={{ padding:"4px 6px" }}>
                          <input type="text" value={mv.insight} onChange={e => {
                            const upd = [...editMeasurements]; upd[i] = {...upd[i], insight: e.target.value};
                            setEditMeasurements(upd);
                          }} style={{ width:"100%", padding:"3px 6px", borderRadius:"4px", border:"1px solid #93C5FD", fontSize:11, fontFamily:"inherit" }} />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
            </>)}
        </div>
      ) : (
      (() => {
        let isV59 = false;
        let v59Data = null;
        let legacyLocNotes = "";

if (rawNotes) {
            try {
                let obj = JSON.parse(rawNotes);
                if (obj && typeof obj === 'object' && obj.executive_summary !== undefined) {
                    isV59 = true;
                    v59Data = obj;
                } else {
                    legacyLocNotes = obj[lang] || obj['fr'] || obj['en'] || Object.values(obj)[0] || rawNotes;
                }
            } catch (e) {
                legacyLocNotes = rawNotes;
            }
        }

const getLocField = (field) => {
            if (!field) return "";
            if (typeof field === 'string') return field;
            return field[lang] || field['fr'] || field['en'] || Object.values(field)[0] || "";
        };

try {
          let soilPhotos = [], calPhotos = [], visitPhotos = [], videos = [], audios = [];

// Collect all audio URLs used as photo notes so we can exclude them from standalone audios
          const photoNoteAudioUrls = new Set();
          if (p && p.logs) {
              p.logs.forEach(l => { if (l.note_audio_url) photoNoteAudioUrls.add(l.note_audio_url); });
          }

if (p && p.logs) {
             p.logs.forEach(l => {
                let urls = [];
                if (l.remote_url) urls.push(l.remote_url);
                if (l.media_url) urls.push(l.media_url);
                if (l.media_urls) urls = urls.concat(l.media_urls);
                const noteData = {
                    note_type: l.note_type || null,
                    note_text: l.note_text || null,
                    note_audio_url: l.note_audio_url || null,
                    parcel_name: l.parcel_name || null,
                    time: l.time || null,
                    lat: l.lat || null,
                    lng: l.lng || null
                };
                urls.forEach(u => {
                    if (!u) return;
                    let type = (l.type || "").toLowerCase();
                    if (type === 'measurement_soil' || type === 'meas_soil') soilPhotos.push({ url: u, ...noteData });
                    else if (type === 'measurement_caliber' || type === 'meas_cal') calPhotos.push({ url: u, ...noteData });
                    else if (type === 'audio') { if (!photoNoteAudioUrls.has(u)) audios.push(u); }
                    else if (type === 'video') videos.push(u);
                    else if (type === 'photo' || /(?:jpg|jpeg|png|webp|heic)(?:\?|$)/i.test(u)) {
                        const photoEntry = { url: u, ...noteData };
                        if (noteData.note_audio_url) {
                            // Attach transcription lookup placeholder — resolved after v59Data is available
                            photoEntry._noteAudioUrl = noteData.note_audio_url;
                        }
                        visitPhotos.push(photoEntry);
                    }
                });
             });
          }

if (m.media_url) {
              const rawUrls = m.media_url.split(",").map(u => u.trim()).filter(Boolean);
              rawUrls.forEach(u => {
                  const alreadyCategorized = soilPhotos.some(p => p.url === u) || calPhotos.some(p => p.url === u) || visitPhotos.some(p => p.url === u) || audios.includes(u) || videos.includes(u);
                  if (!alreadyCategorized) {
                      if (/(?:m4a|mp3|wav)(?:\?|$)/i.test(u) && !photoNoteAudioUrls.has(u)) audios.push(u);
                      else if (/(?:mp4|mov|avi|webm)(?:\?|$)/i.test(u)) videos.push(u);
                      else if (/(?:jpg|jpeg|png|webp|heic)(?:\?|$)/i.test(u)) visitPhotos.push({ url: u, note_type: null, note_text: null, note_audio_url: null, parcel_name: null, time: null });
                  }
              });
          }

if (isV59) {
              let aiMeasurements = v59Data.validated_measurements || [];
              // Track seen humidity per parcel+time to distinguish soil moisture vs ambient humidity
              const seenHumidity = {};
              aiMeasurements.forEach((meas, idx) => {
                  let label = meas.label || "";
                  let val = meas.value || "";
                  let parcelName = meas.parcel_name || "?";
                  let time = meas.time || "";
                  let insight = meas.insight ? getLocField(meas.insight) : "";
                  let lowL = label.toLowerCase();
                  let finalLabel = label;

if (lowL.includes('cali') || lowL.includes('قطر') || lowL.includes('orange')) finalLabel = 'Calibre';
                  else if (lowL.includes('ph') || lowL.includes('حموضة')) finalLabel = 'pH';
                  else if (lowL.includes('fert') || lowL.includes('خصوب')) finalLabel = 'Fertilité';
                  else if (lowL.includes('ambiant') || lowL.includes('ambient') || lowL.includes('محيط')) finalLabel = 'Hum.Air';
                  else if (lowL.includes('moist') || lowL.includes('humidit') || lowL.includes('رطوب')) {
                      const hKey = `${parcelName}|||${time}`;
                      if (seenHumidity[hKey]) { finalLabel = 'Hum.Air'; } // second humidity = ambient
                      else { finalLabel = 'Humidité'; seenHumidity[hKey] = true; }
                  }
                  else if (lowL.includes('temp') || lowL.includes('حرار')) finalLabel = 'Temp.';
                  else if (lowL.includes('light') || lowL.includes('lum') || lowL.includes('lux')) finalLabel = 'Lux';

// Group measurements by parcel, then by time (so all metrics at same time are together)
          const groupByParcelAndTime = (measArr, measType) => {
              const groups = {};
              measArr.forEach(m => {
                  const parcelKey = m.parcel_name || "Unknown";
                  const timeKey = m.time || "??:??";
                  const key = `${parcelKey}|||${timeKey}`;
                  if (!groups[key]) {
                      // Find photo for this measurement
                      const photoKey = `${parcelKey}|||${timeKey}|||${measType}`;
                      const photoInfo = measPhotos[photoKey] || {};
                      groups[key] = {
                          parcel_name: parcelKey,
                          time: timeKey,
                          metrics: [],
                          insights: [],
                          photo_url: photoInfo.url || null,
                          lat: photoInfo.lat || null,
                          lng: photoInfo.lng || null
                      };
                  }
                  groups[key].metrics.push({ label: m.label, value: m.value });
                  if (m.insight) groups[key].insights.push(m.insight);
              });
              return Object.values(groups);
          };
          
          // Group by parcel for display
          const groupByParcel = (groupedMeas) => {
              const parcels = {};
              groupedMeas.forEach(g => {
                  if (!parcels[g.parcel_name]) parcels[g.parcel_name] = [];
                  parcels[g.parcel_name].push(g);
              });
              // Sort by time within each parcel
              Object.values(parcels).forEach(arr => arr.sort((a, b) => (a.time || "").localeCompare(b.time || "")));
              return parcels;
          };
          
          const soilGrouped = groupByParcelAndTime(soilMeas, 'soil');
          const calGrouped = groupByParcelAndTime(calMeas, 'caliber');
          const soilByParcel = groupByParcel(soilGrouped);
          const calByParcel = groupByParcel(calGrouped);
          
          
          let finalNotesList = [];
          if (p && p.logs) {
              let mNotes = [];
              // We reverse logs so notes read chronologically top-to-bottom
              [...p.logs].reverse().forEach(l => {
                  if (l.type === 'note' && l.text) mNotes.push(`[${l.parcel_name || "Zone ?"}] ${l.time ? l.time + ' - ' : ''}${l.text}`);
              });
              if (mNotes.length > 0) {
                  finalNotesList.push("👤 Notes Manuelles :");
                  mNotes.forEach(n => finalNotesList.push("- " + n));
              }
          }

if (!isV59 && legacyLocNotes) {
              let notesWithoutMeas = legacyLocNotes.replace(/(?:Validated Measurements|Mesures validées)[\s\S]*?(?=(?:\n\n|\n(?:Audio Note|Note Audio|Note Vocale)))/i, '').trim();
              let audioParts = notesWithoutMeas.split(/(?:Audio Note|Note Audio|Note Vocale)\s*\d+\s*[:\-]?/gi);
              let aiGeneralNotes = (audioParts[0] || "").trim();
              if (aiGeneralNotes) {
                  aiGeneralNotes.split(/\n\n/).forEach(n => {
                      if (n.trim()) finalNotesList.push("🤖 " + n.trim().replace(/^[-*]\s*/, ''));
                  });
              }
          }

const msgTag = m.tags || '';
          const isFacture = msgTag === 'facture';
          const isPanne = msgTag === 'panne';
          const isChefReport = m.media_type === 'chef_report';
          const isAjor = msgTag === 'ajor';

// Contextual AI section title based on report type
          const titleAI = isFacture
              ? "⚠️ Point d'attention"
              : (lang === 'en' ? "🔍 AI Analysis" : lang === 'ar' ? "🔍 تحليل الذكاء الاصطناعي" : "🔍 Analyse IA");

let aiBlock = null;
          if (isV59) {
              const execSum = getLocField(v59Data.executive_summary);
              const detRep = getLocField(v59Data.detailed_agronomist_report);
              const alerts = v59Data.critical_alerts || [];
              parcelSynthesis = v59Data.parcel_synthesis || [];

// Hide AI block for ajor (payroll card shows everything) and factures (unless anomaly)
              const showAiBlock = isAjor ? false : (isFacture ? !!execSum : true);

const editPencil = (sKey, value, style) => (
                <button onClick={() => openSection(sKey, value)} title="Éditer cette section" style={{ background:"#E0F2FE", border:"1px solid #BAE6FD", color:"#0369A1", cursor:"pointer", fontSize:10, fontWeight:700, padding:"1px 7px", borderRadius:10, lineHeight:"18px", marginLeft:4, ...style }}>✏️ Éditer</button>
              );

aiBlock = showAiBlock ? (
                  <div style={{ display: "flex", flexDirection: "column", gap: "10px", marginBottom: "12px" }}>

{/* Alertes */}
                      {(alerts.length > 0 || editSection === 'alerts') && (
                          <div style={{ padding: "12px", background: "#FEF2F2", borderLeft: "4px solid #EF4444", borderRadius: "8px" }}>
                              <strong style={{ color: "#B91C1C", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px" }}>
                                🚨 ALERTES CRITIQUES
                                {editSection !== 'alerts' && editPencil('alerts', alerts.map(a => getLocField(a)).join('\n'))}
                              </strong>
                              {editSection === 'alerts' ? (
                                <SectionEdit sKey="alerts" rows={3} style={{ marginTop:8 }} />
                              ) : (
                                <ul style={{ margin: "6px 0 0 20px", color: "#991B1B", fontSize: "13px", fontWeight: "bold" }}>
                                    {alerts.map((a, i) => <li key={i}>{getLocField(a)}</li>)}
                                </ul>
                              )}
                          </div>
                      )}

{/* Résumé bandeau */}
                      {!isFacture && locSummary && (
                        <div style={{ padding:"10px 12px", background:"#FFF7ED", borderLeft:"4px solid #FB923C", borderRadius:"8px" }}>
                          <div style={{ display:"flex", alignItems:"center", gap:4, marginBottom: editSection==='summary' ? 6 : 0 }}>
                            <span style={{ fontSize:11, fontWeight:700, color:"#C2410C" }}>✏️ Résumé</span>
                            {editSection !== 'summary' && editPencil('summary', locSummary)}
                          </div>
                          {editSection === 'summary' ? (
                            <SectionEdit sKey="summary" rows={3} />
                          ) : (
                            <div style={{ fontSize:"12px", color:"#C2410C", fontWeight:"bold" }}>{locSummary}</div>
                          )}
                        </div>
                      )}

{/* Analyse IA */}
                      <div style={{ padding: "12px", background: "#FFF4ED", borderLeft: "4px solid #F97316", borderRadius: "8px" }}>
                          <strong style={{ color: "#9A3412", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px" }}>
                            {titleAI}
                            {editSection !== 'execSum' && editPencil('execSum', execSum)}
                          </strong>
                          {editSection === 'execSum' ? (
                            <SectionEdit sKey="execSum" rows={6} style={{ marginTop:8 }} />
                          ) : (
                            <div style={{ color: "#7C2D12", fontSize: "13px", lineHeight: 1.5, whiteSpace: "pre-wrap", marginTop:6 }} dir="auto">{execSum}</div>
                          )}
                      </div>

{/* Rapport Détaillé */}
                      {!isFacture && !isChefReport && detRep && (
                          <div style={{ background: "#F0F9FF", borderLeft: "4px solid #0EA5E9", borderRadius: "8px", padding: "10px" }}>
                              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}>
                                <div onClick={() => { if(editSection !== 'detRep') setDetailedReportOpen(v => !v); }} style={{ color: "#0369A1", fontSize: "12px", fontWeight: "bold", cursor: "pointer", display: "flex", alignItems: "center", gap:"6px", flex:1 }}>
                                    {detailedReportOpen ? "▼" : "▶"} 📄 Rapport Détaillé
                                    {editSection !== 'detRep' && editPencil('detRep', detRep, { fontSize:13 })}
                                </div>
                                {detailedReportOpen && editSection !== 'detRep' && (
                                  <button onClick={() => {
                                    const raw = v59Data.detailed_agronomist_report || {};
                                    const frText = (typeof raw === 'string' ? raw : raw.fr) || '';
                                    const enText = (typeof raw === 'string' ? '' : raw.en) || '';
                                    const arText = (typeof raw === 'string' ? '' : raw.ar) || '';
                                    const esc = s => (s||'').replace(/</g,'<');
                                    const w = window.open('', '_blank');
                                    w.document.write('<html><head><title>Rapport Détaillé — ' + (m.sender||'') + ' — ' + (m.date||'') + '</title>');
                                    w.document.write('<style>body{font-family:Georgia,serif;max-width:850px;margin:40px auto;padding:20px;color:#1e3a5f;line-height:1.7;font-size:14px}h1{color:#0369A1;font-size:20px;border-bottom:2px solid #0EA5E9;padding-bottom:8px}h2{color:#0369A1;font-size:16px;margin-top:30px;border-bottom:1px solid #BAE6FD;padding-bottom:4px}pre{white-space:pre-wrap;font-family:inherit}.meta{color:#666;font-size:12px;margin-bottom:20px}.section{margin-bottom:24px}.ar{direction:rtl;text-align:right;font-family:sans-serif}@media print{body{margin:20px}h2{page-break-before:auto}}</style>');
                                    w.document.write('</head><body>');
                                    w.document.write('<h1>📄 Rapport Détaillé</h1>');
                                    w.document.write('<div class="meta">Expéditeur: ' + esc(m.sender||'—') + '  |  Date: ' + esc(m.date||'—') + '</div>');
                                    if (frText) w.document.write('<div class="section"><h2>🇫🇷 Français</h2><pre>' + esc(frText) + '</pre></div>');
                                    if (enText) w.document.write('<div class="section"><h2>🇬🇧 English</h2><pre>' + esc(enText) + '</pre></div>');
                                    if (arText) w.document.write('<div class="section ar"><h2>🇲🇦 العربية</h2><pre>' + esc(arText) + '</pre></div>');
                                    w.document.write('</body></html>');
                                    w.document.close();
                                    setTimeout(() => w.print(), 300);
                                  }} style={{ background:"#0EA5E9", color:"#fff", border:"none", borderRadius:"6px", padding:"5px 12px", fontSize:"11px", fontWeight:700, cursor:"pointer", whiteSpace:"nowrap", display:"flex", alignItems:"center", gap:"4px" }}>
                                    🖨️ Imprimer / PDF
                                  </button>
                                )}
                              </div>
                              {editSection === 'detRep' ? (
                                <SectionEdit sKey="detRep" rows={12} style={{ marginTop:10 }} />
                              ) : detailedReportOpen && (
                                <div style={{ cursor: "text", marginTop: "10px", color: "#075985", fontSize: "13px", lineHeight: 1.6, whiteSpace: "pre-wrap", borderTop: "1px solid #BAE6FD", paddingTop: "10px" }} dir="auto">
                                    {detRep}
                                </div>
                              )}
                          </div>
                      )}
                  </div>
              ) : null;
          } else {
              let cleanSummary = locSummary.replace(/(?:Audio\s*)?(?:Transcription|Translation|Traduction|التفريغ)[\s\S]*?(?=(?:\n\n|\n[A-Z]|$))/ig, '').trim();
              if (cleanSummary && !isFacture) {
                  aiBlock = (
                      <div style={{ padding: "12px", background: "#FFF4ED", border: "1px solid #F97316", borderRadius: "8px", color: "#9A3412", marginBottom: "12px" }}>
                         <strong style={{ display:"block", marginBottom:"6px", fontSize:"14px" }}>{titleAI}</strong>
                         <div style={{ fontSize: "13px", whiteSpace: "pre-wrap", lineHeight: 1.5 }} dir="auto">{cleanSummary}</div>
                      </div>
                  );
              }
          }

const lblTrans = lang === 'en' ? 'TRANSCRIPT' : lang === 'ar' ? 'التفريغ الصوتي' : 'TRANSCRIPTION';
          const lblTrad = lang === 'en' ? 'TRANSLATION' : lang === 'ar' ? 'الترجمة' : 'TRADUCTION';
          const lblNotes = lang === 'en' ? 'NOTES & OBSERVATIONS' : lang === 'ar' ? 'ملاحظات' : 'NOTES & OBSERVATIONS';
          const lblPhoto = lang === 'en' ? 'VISIT PHOTOS' : lang === 'ar' ? 'صور الزيارة' : 'PHOTOS DE VISITE';

return (
            <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
              <style>{`
                audio:not(.agro-media) { display: none !important; }
              `}</style>
              
              {aiBlock}

{/* SOIL TABLE VIEW */}
              {soilMeas.length > 0 && (() => {
                const allSoilMeas = Object.entries(soilByParcel).flatMap(([pn, ms]) => ms.map(mg => ({...mg, _parcelName: pn})));
                const envLabels = ['lux', 'hum.air'];
                const soilCols = ['Fertilité', 'Humidité', 'pH', 'Temp.'];
                const envCols = ['Lux', 'Hum.Air'];
                const getVal = (metrics, label) => { const m = metrics.find(x => x.label === label); return m ? m.value : '—'; };
                const isAbn = (label, value) => {
                  const n = parseFloat(String(value).replace(/[^0-9.\-]/g, ''));
                  if (isNaN(n)) return false;
                  if (label === 'pH') return n < 6.0 || n > 7.0;
                  if (label === 'Fertilité') return n < 300 || n > 1100;
                  if (label === 'Humidité') return n < 50 || n > 75;
                  if (label === 'Temp.') return n < 18 || n > 32;
                  return false;
                };
                const cellStyle = (abn) => ({ padding:"4px 8px", fontSize:13, fontWeight:700, color: abn ? "#DC2626" : "#115E59", textAlign:"center", borderBottom:"1px solid #E6FFFA" });
                const hasEnvData = allSoilMeas.some(mg => mg.metrics.some(m => envLabels.includes(m.label.toLowerCase())));
                return (
                <div style={{ padding: "14px", background: "#F0FDFA", borderRadius: "10px", border: "1px solid #99F6E4", width: "100%", minWidth: 0 }}>
                  <div style={{ fontSize: "13px", fontWeight: "600", color: "#0F766E", marginBottom: "8px", display: "flex", alignItems: "center", gap: "8px" }}>
                    <span style={{ background: "#0D9488", color: "#fff", width: 26, height: 26, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: "14px" }}>🌱</span> MESURES
                    <span style={{ background: "#0D9488", color: "#fff", padding: "2px 10px", borderRadius: 12, fontSize: 10, fontWeight: 600 }}>{allSoilMeas.length}</span>
                    <div style={{ marginLeft:"auto", display:"flex", gap:6, alignItems:"center" }}>
                      {/* Edit measurements button */}
                      {editSection !== 'meas' && <button onClick={() => { setEditMeasurements((v59Data?.validated_measurements||[]).map((mv,i)=>({label:mv.label||'',value:mv.value!==undefined?String(mv.value):'',parcel_name:mv.parcel_name||'',time:mv.time||'',insight:_getLocField(mv.insight),idx:i}))); openSection('meas',''); }} title="Éditer les mesures" style={{ background:"#E0F2FE", border:"1px solid #BAE6FD", color:"#0369A1", cursor:"pointer", fontSize:10, fontWeight:700, padding:"3px 10px", borderRadius:10 }}>✏️ Éditer</button>}
                      {/* Print button */}
                      <button onClick={() => {
                        const e = s => (s||'').replace(/</g,'<').replace(/>/g,'>');
                        const w = window.open('', '_blank');
                        w.document.write('<!DOCTYPE html><html><head><title>Mesures Sol — ' + e(m.date||'') + '</title><style>body{font-family:system-ui,sans-serif;padding:20px;color:#1e293b}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{padding:6px 10px;border:1px solid #cbd5e1;text-align:center;font-size:12px}th{background:#f1f5f9;font-weight:700;font-size:11px}.grp-soil{background:#0D9488;color:#fff}.grp-env{background:#2563EB;color:#fff}.sub-soil{background:#0F766E;color:#fff}.sub-env{background:#1D4ED8;color:#fff}.abn{color:#DC2626;font-weight:700}@media print{.no-print{display:none!important}}</style></head><body>');
                        w.document.write('<h2 style="color:#0F766E">🌱 Mesures Sol & Environnement</h2>');
                        w.document.write('<p style="color:#64748b;font-size:12px">' + e(m.sender||'—') + ' — ' + e(m.date||'—') + '</p>');
                        w.document.write('<table><thead><tr><th rowspan="2" style="background:#334155;color:#fff">Parcelle</th><th rowspan="2" style="background:#334155;color:#fff">Heure</th><th colspan="4" class="grp-soil">🌱 SOL</th>' + (hasEnvData ? '<th colspan="2" class="grp-env">🌤 ENVIRONNEMENT</th>' : '') + '</tr>');
                        w.document.write('<tr><th class="sub-soil">Fertilité</th><th class="sub-soil">Hum. Sol</th><th class="sub-soil">pH</th><th class="sub-soil">Temp.</th>' + (hasEnvData ? '<th class="sub-env">Luminosité</th><th class="sub-env">Humidité</th>' : '') + '</tr></thead><tbody>');
                        allSoilMeas.forEach(mg => {
                          const gv = (l) => { const mt = mg.metrics.find(x => x.label === l); return mt ? mt.value : '—'; };
                          const ac = (l, v) => isAbn(l, v) ? ' class="abn"' : '';
                          const fv=gv('Fertilité'), hv=gv('Humidité'), pv=gv('pH'), tv=gv('Temp.'), lv=gv('Lux'), av=gv('Hum.Air');
                          w.document.write('<tr><td style="font-weight:700;text-align:left">' + e(mg._parcelName) + '</td><td>' + e(mg.time||'—') + '</td><td' + ac('Fertilité',fv) + '>' + e(String(fv)) + '</td><td' + ac('Humidité',hv) + '>' + e(String(hv)) + '</td><td' + ac('pH',pv) + '>' + e(String(pv)) + '</td><td' + ac('Temp.',tv) + '>' + e(String(tv)) + '</td>' + (hasEnvData ? '<td>' + e(String(lv)) + '</td><td>' + e(String(av)) + '</td>' : '') + '</tr>');
                        });
                        w.document.write('</tbody></table>');
                        w.document.write('<p style="font-size:10px;color:#94a3b8;margin-top:16px">Plage normale — Fertilité: 300–1100 µS/cm · Hum. Sol: 50–75% · pH: 6.0–7.0 · Temp: 18–32°C</p>');
                        w.document.write('<div class="no-print" style="margin-top:12px"><button onclick="window.print()" style="padding:6px 16px;background:#0EA5E9;color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer">🖨️ Imprimer</button></div>');
                        w.document.write('</body></html>');
                        w.document.close();
                        setTimeout(() => w.print(), 400);
                      }} title="Imprimer / PDF" style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }} onMouseEnter={e => { e.currentTarget.style.background='#0EA5E9'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#0EA5E9'; }} onMouseLeave={e => { e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
                        🖨️
                      </button>
                      {/* Share via email — with recipient picker */}
                      <button onClick={() => {
                        const knownEmails = ['jamalfaik@gmail.com','marocoultou@gmail.com','larbi.abourazzek@gmail.com'];
                        const overlay = document.createElement('div');
                        overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center';
                        const selected = new Set([knownEmails[0]]);
                        const render = () => {
                          overlay.innerHTML = '';
                          const box = document.createElement('div');
                          box.style.cssText = 'background:#fff;border-radius:12px;padding:24px;min-width:360px;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,0.3);font-family:system-ui,sans-serif';
                          box.innerHTML = '<div style="font-size:16px;font-weight:700;color:#1e293b;margin-bottom:16px">📧 Envoyer les mesures par email</div>' +
                            '<div style="font-size:12px;color:#64748b;margin-bottom:6px;font-weight:600">Objet :</div>' +
                            '<input id="emailSubject" type="text" value="🌱 Mesures Sol — ' + (m.date||'') + '" style="width:100%;padding:7px 10px;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;outline:none;margin-bottom:14px;box-sizing:border-box" />' +
                            '<div style="font-size:12px;color:#64748b;margin-bottom:10px;font-weight:600">Destinataires :</div>' +
                            knownEmails.map(em => '<label style="display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;margin-bottom:4px;background:' + (selected.has(em) ? '#F0FDF4' : '#F8FAFC') + ';border:1px solid ' + (selected.has(em) ? '#86EFAC' : '#E2E8F0') + '"><input type="checkbox" data-email="' + em + '" ' + (selected.has(em) ? 'checked' : '') + ' style="accent-color:#22C55E;width:16px;height:16px"><span style="font-size:13px;color:#334155">' + em + '</span></label>').join('') +
                            '<div style="margin-top:12px;display:flex;gap:8px;align-items:center"><input id="newEmailInput" type="email" placeholder="Ajouter un email..." style="flex:1;padding:7px 10px;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;outline:none" /><button id="addEmailBtn" style="background:#0D9488;color:#fff;border:none;border-radius:6px;padding:7px 12px;font-size:11px;font-weight:700;cursor:pointer">+ Ajouter</button></div>' +
                            '<div style="margin-top:18px;display:flex;gap:8px;justify-content:flex-end"><button id="cancelBtn" style="padding:7px 16px;background:#F1F5F9;color:#64748b;border:1px solid #E2E8F0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer">Annuler</button><button id="sendBtn" style="padding:7px 16px;background:#8B5CF6;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer">Envoyer ✉️</button></div>';
                          overlay.appendChild(box);
                          box.querySelectorAll('input[data-email]').forEach(cb => cb.addEventListener('change', () => { if (cb.checked) selected.add(cb.dataset.email); else selected.delete(cb.dataset.email); render(); }));
                          box.querySelector('#addEmailBtn').addEventListener('click', () => { const inp = box.querySelector('#newEmailInput'); const v = inp.value.trim(); if (v && v.includes('@')) { knownEmails.push(v); selected.add(v); render(); } });
                          box.querySelector('#newEmailInput').addEventListener('keydown', (ev) => { if (ev.key === 'Enter') { box.querySelector('#addEmailBtn').click(); } });
                          box.querySelector('#cancelBtn').addEventListener('click', () => overlay.remove());
                          box.querySelector('#sendBtn').addEventListener('click', async () => {
                            const recipients = [...selected];
                            if (recipients.length === 0) { alert('Sélectionnez au moins un destinataire'); return; }
                            const sendBtn = box.querySelector('#sendBtn');
                            sendBtn.textContent = 'Envoi...'; sendBtn.disabled = true;
                            const rows = allSoilMeas.map(mg => {
                              const gv = (l) => { const mt = mg.metrics.find(x => x.label === l); return mt ? mt.value : '—'; };
                              const cs = (l,v) => isAbn(l,v) ? 'color:#DC2626;font-weight:700' : '';
                              return '<tr><td style="font-weight:700;text-align:left;padding:6px 10px;border:1px solid #cbd5e1">' + (mg._parcelName||'—') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center">' + (mg.time||'—') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center;' + cs('Fertilité',gv('Fertilité')) + '">' + gv('Fertilité') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center;' + cs('Humidité',gv('Humidité')) + '">' + gv('Humidité') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center;' + cs('pH',gv('pH')) + '">' + gv('pH') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center;' + cs('Temp.',gv('Temp.')) + '">' + gv('Temp.') + '</td>' + (hasEnvData ? '<td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center">' + gv('Lux') + '</td><td style="padding:6px 10px;border:1px solid #cbd5e1;text-align:center">' + gv('Hum.Air') + '</td>' : '') + '</tr>';
                            }).join('');
                            const html = '<div style="font-family:system-ui,sans-serif"><h2 style="color:#0F766E">🌱 Mesures Sol & Environnement</h2><p style="color:#64748b">' + (m.sender||'—') + ' — ' + (m.date||'—') + '</p><table style="width:100%;border-collapse:collapse;font-size:12px"><thead><tr><th rowspan="2" style="padding:6px 10px;border:1px solid #cbd5e1;background:#334155;color:#fff">Parcelle</th><th rowspan="2" style="padding:6px 10px;border:1px solid #cbd5e1;background:#334155;color:#fff">Heure</th><th colspan="4" style="padding:6px 10px;border:1px solid #cbd5e1;background:#0D9488;color:#fff">🌱 SOL</th>' + (hasEnvData ? '<th colspan="2" style="padding:6px 10px;border:1px solid #cbd5e1;background:#2563EB;color:#fff">🌤 ENVIRONNEMENT</th>' : '') + '</tr><tr><th style="padding:4px 8px;border:1px solid #cbd5e1;background:#0F766E;color:#fff;font-size:10px">Fertilité</th><th style="padding:4px 8px;border:1px solid #cbd5e1;background:#0F766E;color:#fff;font-size:10px">Hum. Sol</th><th style="padding:4px 8px;border:1px solid #cbd5e1;background:#0F766E;color:#fff;font-size:10px">pH</th><th style="padding:4px 8px;border:1px solid #cbd5e1;background:#0F766E;color:#fff;font-size:10px">Temp.</th>' + (hasEnvData ? '<th style="padding:4px 8px;border:1px solid #cbd5e1;background:#1D4ED8;color:#fff;font-size:10px">Luminosité</th><th style="padding:4px 8px;border:1px solid #cbd5e1;background:#1D4ED8;color:#fff;font-size:10px">Humidité</th>' : '') + '</tr></thead><tbody>' + rows + '</tbody></table><p style="font-size:10px;color:#94a3b8;margin-top:12px">Plage normale — Fertilité: 300–1100 µS/cm · Hum. Sol: 50–75% · pH: 6.0–7.0 · Temp: 18–32°C</p></div>';
                            try {
                              const subjectVal = box.querySelector('#emailSubject').value.trim() || ('🌱 Mesures Sol — ' + (m.date||''));
                              const res = await fetch('/send-email', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ subject: subjectVal, body: html, recipients }) });
                              const j = await res.json();
                              if (j.status === 'ok') { overlay.remove(); alert('✅ Email envoyé à ' + recipients.join(', ')); } else { sendBtn.textContent = 'Envoyer ✉️'; sendBtn.disabled = false; alert('❌ ' + (j.message||'Erreur')); }
                            } catch(err) { sendBtn.textContent = 'Envoyer ✉️'; sendBtn.disabled = false; alert('❌ Erreur: ' + err.message); }
                          });
                        };
                        render();
                        document.body.appendChild(overlay);
                        overlay.addEventListener('click', (ev) => { if (ev.target === overlay) overlay.remove(); });
                      }} title="Envoyer par email" style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }} onMouseEnter={e => { e.currentTarget.style.background='#8B5CF6'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#8B5CF6'; }} onMouseLeave={e => { e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
                        📧
                      </button>
                    </div>
                  </div>
                  {editSection === 'meas' ? (
                    <div style={{ marginTop:8 }}>
                      <table style={{ width:"100%", borderCollapse:"collapse", background:"#fff", borderRadius:8, fontSize:12 }}>
                        <thead>
                          <tr style={{ background:"#0D9488", color:"#fff" }}>
                            <th style={{ padding:"6px 8px", textAlign:"left" }}>Parcelle</th>
                            <th style={{ padding:"6px 8px", textAlign:"center" }}>Heure</th>
                            <th style={{ padding:"6px 8px", textAlign:"center" }}>Mesure</th>
                            <th style={{ padding:"6px 8px", textAlign:"center" }}>Valeur</th>
                            <th style={{ padding:"6px 8px", textAlign:"left" }}>Insight IA</th>
                          </tr>
                        </thead>
                        <tbody>
                          {editMeasurements.map((mv, i) => (
                            <tr key={i} style={{ borderBottom:"1px solid #CCFBF1" }}>
                              <td style={{ padding:"4px 8px", color:"#0F766E", fontWeight:600 }}>{mv.parcel_name||"—"}</td>
                              <td style={{ padding:"4px 8px", textAlign:"center", fontFamily:"monospace", color:"#64748b" }}>{mv.time||"—"}</td>
                              <td style={{ padding:"4px 8px", textAlign:"center", fontWeight:700, color:"#334155" }}>{mv.label}</td>
                              <td style={{ padding:"4px 6px", textAlign:"center" }}>
                                <input type="text" value={mv.value} onChange={e => { const u=[...editMeasurements]; u[i]={...u[i],value:e.target.value}; setEditMeasurements(u); }}
                                  style={{ width:90, padding:"3px 6px", borderRadius:4, border:"1px solid #5EEAD4", fontSize:12, textAlign:"center", fontWeight:700 }} />
                              </td>
                              <td style={{ padding:"4px 6px" }}>
                                <input type="text" value={mv.insight} onChange={e => { const u=[...editMeasurements]; u[i]={...u[i],insight:e.target.value}; setEditMeasurements(u); }}
                                  style={{ width:"100%", padding:"3px 6px", borderRadius:4, border:"1px solid #5EEAD4", fontSize:11, boxSizing:"border-box" }} />
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                      <div style={{ display:"flex", gap:8, marginTop:8 }}>
                        <button onClick={() => saveSection('meas')} style={{ padding:"5px 16px", background:"#DCFCE7", color:"#166534", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>💾 Sauvegarder</button>
                        <button onClick={cancelSection} style={{ padding:"5px 16px", background:"#FEE2E2", color:"#991B1B", border:"none", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>✕ Annuler</button>
                      </div>
                    </div>
                  ) : (
                  <table style={{ width:"100%", borderCollapse:"collapse", background:"#fff", borderRadius:8, overflow:"hidden", boxShadow:"0 1px 3px rgba(0,0,0,0.06)" }}>
                    <thead>
                      {/* Level 1: group headers */}
                      <tr>
                        <th rowSpan={2} style={{ background:"#334155", color:"#fff", padding:"6px 8px", textAlign:"left", fontSize:11, fontWeight:700, borderRight:"1px solid #475569" }}>Parcelle</th>
                        <th rowSpan={2} style={{ background:"#334155", color:"#fff", padding:"6px 4px", width:44, borderRight:"1px solid #475569" }}></th>
                        <th rowSpan={2} style={{ background:"#334155", color:"#fff", padding:"6px 8px", textAlign:"center", fontSize:11, fontWeight:700, borderRight:"2px solid #fff" }}>Heure</th>
                        <th colSpan={4} style={{ background:"#0D9488", color:"#fff", padding:"5px 8px", textAlign:"center", fontSize:11, fontWeight:700, borderRight:"2px solid #fff", borderBottom:"2px solid #fff" }}>🌱 SOL</th>
                        {hasEnvData && <th colSpan={2} style={{ background:"#2563EB", color:"#fff", padding:"5px 8px", textAlign:"center", fontSize:11, fontWeight:700, borderBottom:"2px solid #fff" }}>🌤 ENVIRONNEMENT</th>}
                      </tr>
                      {/* Level 2: individual columns */}
                      <tr>
                        <th style={{ background:"#0F766E", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600, borderRight:"1px solid rgba(255,255,255,0.3)", borderLeft:"2px solid #fff" }}>Fertilité</th>
                        <th style={{ background:"#0F766E", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600, borderRight:"1px solid rgba(255,255,255,0.3)" }}>Hum. Sol</th>
                        <th style={{ background:"#0F766E", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600, borderRight:"1px solid rgba(255,255,255,0.3)" }}>pH</th>
                        <th style={{ background:"#0F766E", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600, borderRight:"2px solid #fff" }}>Temp.</th>
                        {hasEnvData && <th style={{ background:"#1D4ED8", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600, borderRight:"1px solid rgba(255,255,255,0.3)" }}>Luminosité</th>}
                        {hasEnvData && <th style={{ background:"#1D4ED8", color:"#fff", padding:"4px 6px", textAlign:"center", fontSize:10, fontWeight:600 }}>Humidité</th>}
                      </tr>
                      {/* Level 3: normal range indicator bars */}
                      {(() => {
                        const ranges = [
                          { label:"Fertilité", lo:300, hi:1100, unit:"µS", min:0, max:1600 },
                          { label:"Hum. Sol", lo:50, hi:75, unit:"%", min:0, max:100 },
                          { label:"pH", lo:6.0, hi:7.0, unit:"", min:4, max:9 },
                          { label:"Temp.", lo:18, hi:32, unit:"°C", min:5, max:45 },
                        ];
                        const envRanges = [
                          { label:"Luminosité", lo:null, hi:null, unit:"", min:0, max:50000 },
                          { label:"Humidité", lo:null, hi:null, unit:"", min:0, max:100 },
                        ];
                        const RangeBar = ({r, borderExtra}) => {
                          if (!r || r.lo === null) return <th style={{ background:"#F8FAFC", padding:"4px 6px", borderBottom:"2px solid #E2E8F0", ...borderExtra }}><span style={{ fontSize:8, color:"#94A3B8", fontWeight:400, fontStyle:"italic" }}>—</span></th>;
                          const pctLo = ((r.lo - r.min) / (r.max - r.min)) * 100;
                          const pctHi = ((r.hi - r.min) / (r.max - r.min)) * 100;
                          return (
                            <th style={{ background:"#F8FAFC", padding:"5px 6px 5px", borderBottom:"2px solid #E2E8F0", ...borderExtra }}>
                              <div style={{ position:"relative", height:12, borderRadius:6, overflow:"hidden", background:"#F87171" }}>
                                <div style={{ position:"absolute", left:pctLo+"%", width:(pctHi-pctLo)+"%", top:0, bottom:0, background:"linear-gradient(90deg, #4ADE80, #16A34A, #4ADE80)", borderRadius:6 }} />
                              </div>
                              <div style={{ display:"flex", justifyContent:"center", gap:3, marginTop:3 }}>
                                <span style={{ fontSize:9, color:"#334155", fontWeight:700 }}>{r.lo}{r.unit}</span>
                                <span style={{ fontSize:9, color:"#64748B", fontWeight:600 }}>–</span>
                                <span style={{ fontSize:9, color:"#334155", fontWeight:700 }}>{r.hi}{r.unit}</span>
                              </div>
                            </th>
                          );
                        };
                        return (
                          <tr>
                            <th colSpan={3} style={{ background:"#F8FAFC", padding:"3px 6px", borderBottom:"2px solid #E2E8F0", borderRight:"2px solid #E2E8F0" }}>
                              <span style={{ fontSize:9, color:"#475569", fontWeight:700, fontFamily:"'Orbitron', 'Rajdhani', 'Exo 2', monospace", letterSpacing:"0.5px", textTransform:"uppercase" }}>Plage normale</span>
                            </th>
                            {ranges.map((r, i) => <RangeBar key={i} r={r} borderExtra={i === 0 ? {borderLeft:"2px solid #E2E8F0"} : i === ranges.length-1 ? {borderRight:"2px solid #E2E8F0"} : {}} />)}
                            {hasEnvData && envRanges.map((r, i) => <RangeBar key={"e"+i} r={r} borderExtra={i === 0 ? {borderLeft:"2px solid #E2E8F0"} : {}} />)}
                          </tr>
                        );
                      })()}
                    </thead>
                    <tbody>
                      {(() => {
                        /* Group measurements by parcel for rowSpan */
                        const parcelGroups = [];
                        let currentParcel = null;
                        allSoilMeas.forEach((mg, idx) => {
                          if (mg._parcelName !== currentParcel) {
                            parcelGroups.push({ parcel: mg._parcelName, startIdx: idx, count: 1 });
                            currentParcel = mg._parcelName;
                          } else {
                            parcelGroups[parcelGroups.length - 1].count++;
                          }
                        });
                        const parcelStartIndices = new Set(parcelGroups.map(g => g.startIdx));
                        const parcelSpanMap = {}; parcelGroups.forEach(g => { parcelSpanMap[g.startIdx] = g.count; });

return allSoilMeas.map((mg, flatIdx) => {
                          const luxVal = getVal(mg.metrics, 'Lux');
                          const humAirVal = getVal(mg.metrics, 'Hum.Air');
                          const isGroupStart = parcelStartIndices.has(flatIdx);
                          const groupSpan = parcelSpanMap[flatIdx] || 1;
                          const isGroupEnd = parcelStartIndices.has(flatIdx + 1) || flatIdx === allSoilMeas.length - 1;
                          const rowBorderBottom = isGroupEnd ? "2px solid #CBD5E1" : "1px solid #E6FFFA";
                          return (
                            <tr key={flatIdx} onClick={() => setPreviewMeas({ type: 'soil', allMeas: allSoilMeas, currentIdx: flatIdx, parcels, date: m.date })} style={{ cursor:"pointer", transition:"background 0.15s" }}
                              onMouseEnter={e => e.currentTarget.style.background='#CCFBF1'}
                              onMouseLeave={e => e.currentTarget.style.background='transparent'}>
                              {isGroupStart && (
                                <td rowSpan={groupSpan} style={{ padding:"4px 8px", fontSize:12, fontWeight:700, color:"#0F766E", borderBottom:"2px solid #CBD5E1", borderRight:"1px solid #E2E8F0", verticalAlign:"middle", background: groupSpan > 1 ? "#F0FDFA" : "transparent" }}>{mg._parcelName}</td>
                              )}
                              <td style={{ padding:"3px 4px", borderBottom: rowBorderBottom }}>
                                {mg.photo_url ? (
                                  <div style={{ position:"relative", width:40, height:40 }}>
                                    <img className="agro-media" src={mg.photo_url} style={{ width:40, height:40, objectFit:"cover", borderRadius:4, display:"block" }} />
                                    {mg.insights && mg.insights.length > 0 && <div style={{ position:"absolute", top:1, right:1, background:"linear-gradient(135deg,#8B5CF6,#6366F1)", color:"#fff", width:14, height:14, borderRadius:"50%", display:"flex", alignItems:"center", justifyContent:"center", fontSize:7 }}>🧠</div>}
                                  </div>
                                ) : <div style={{ width:40, height:40, background:"#E6FFFA", borderRadius:4, display:"flex", alignItems:"center", justifyContent:"center", fontSize:16 }}>🌱</div>}
                              </td>
                              <td style={{ padding:"4px 8px", fontSize:11, fontFamily:"monospace", color:"#64748b", textAlign:"center", borderBottom: rowBorderBottom }}>{mg.time || "—"}</td>
                              {soilCols.map(c => { const v = getVal(mg.metrics, c); const abn = isAbn(c, v); return <td key={c} style={{ padding:"4px 8px", fontSize:13, fontWeight:700, color: abn ? "#DC2626" : "#115E59", textAlign:"center", borderBottom: rowBorderBottom, borderLeft: c === soilCols[0] ? "2px solid #E2E8F0" : "none" }}>{v}</td>; })}
                              {hasEnvData && <td style={{ padding:"4px 8px", fontSize:13, fontWeight:700, color:"#1E3A8A", textAlign:"center", borderBottom: rowBorderBottom, borderLeft:"2px solid #E2E8F0" }}>{luxVal}</td>}
                              {hasEnvData && <td style={{ padding:"4px 8px", fontSize:13, fontWeight:700, color:"#1E3A8A", textAlign:"center", borderBottom: rowBorderBottom }}>{humAirVal}</td>}
                            </tr>
                          );
                        });
                      })()}
                    </tbody>
                  </table>
                  )}
                </div>
                );
              })()}

{/* CALIBER BOX - Grouped by Parcel */}
              {calMeas.length > 0 && (() => {
                const allCalMeas = Object.entries(calByParcel).flatMap(([pn, ms]) => ms.map(mg => ({...mg, _parcelName: pn})));
                return (
                <div style={{ padding: "14px", background: "#FFFBEB", borderRadius: "10px", border: "1px solid #FDE68A", width: "100%", minWidth: 0 }}>
                  <div style={{ fontSize: "13px", fontWeight: "600", color: "#B45309", marginBottom: "12px", display: "flex", alignItems: "center", gap: "8px" }}>
                    <span style={{ background: "#F59E0B", color: "#fff", width: 26, height: 26, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: "14px" }}>🍊</span> FRUIT CALIBER
                    <span style={{ background: "#F59E0B", color: "#fff", padding: "2px 10px", borderRadius: 12, fontSize: 10, fontWeight: 600, marginLeft: "auto" }}>{allCalMeas.length}</span>
                  </div>

<table style={{ width:"100%", borderCollapse:"collapse", background:"#fff", borderRadius:8, overflow:"hidden", boxShadow:"0 1px 3px rgba(0,0,0,0.06)" }}>
                    <thead>
                      <tr style={{ background:"#F59E0B", color:"#fff", fontSize:11, fontWeight:700 }}>
                        <th style={{ padding:"6px 8px", textAlign:"left", width:44 }}></th>
                        <th style={{ padding:"6px 8px", textAlign:"left" }}>Parcelle</th>
                        <th style={{ padding:"6px 8px", textAlign:"center" }}>Heure</th>
                        {(() => { const colSet = new Set(); allCalMeas.forEach(mg => mg.metrics.forEach(mt => colSet.add(mt.label))); return [...colSet].map(c => <th key={c} style={{ padding:"6px 8px", textAlign:"center" }}>{c}</th>); })()}
                      </tr>
                    </thead>
                    <tbody>
                      {allCalMeas.map((mg, flatIdx) => {
                        const metricMap = {}; mg.metrics.forEach(mt => { metricMap[mt.label] = mt.value; });
                        const colSet = new Set(); allCalMeas.forEach(m2 => m2.metrics.forEach(mt => colSet.add(mt.label)));
                        return (
                          <tr key={flatIdx} onClick={() => setPreviewMeas({ type: 'caliber', allMeas: allCalMeas, currentIdx: flatIdx, parcels, date: m.date })} style={{ cursor:"pointer", transition:"background 0.1s" }}
                            onMouseEnter={e => e.currentTarget.style.background='#FEF3C7'}
                            onMouseLeave={e => e.currentTarget.style.background='transparent'}>
                            <td style={{ padding:"3px 4px", borderBottom:"1px solid #FEF3C7" }}>
                              {mg.photo_url ? <img className="agro-media" src={mg.photo_url} style={{ width:40, height:40, objectFit:"cover", borderRadius:4, display:"block" }} />
                              : <div style={{ width:40, height:40, background:"#FEF3C7", borderRadius:4, display:"flex", alignItems:"center", justifyContent:"center", fontSize:16 }}>🍊</div>}
                            </td>
                            <td style={{ padding:"4px 8px", fontSize:12, fontWeight:600, color:"#B45309", borderBottom:"1px solid #FEF3C7" }}>{mg._parcelName}</td>
                            <td style={{ padding:"4px 8px", fontSize:11, fontFamily:"monospace", color:"#64748b", textAlign:"center", borderBottom:"1px solid #FEF3C7" }}>{mg.time || "—"}</td>
                            {[...colSet].map(c => <td key={c} style={{ padding:"4px 8px", fontSize:13, fontWeight:700, color:"#92400E", textAlign:"center", borderBottom:"1px solid #FEF3C7" }}>{metricMap[c] || "—"}</td>)}
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
                );
              })()}

{/* MANUAL NOTES */}
              {finalNotesList.length > 0 && (
                <div style={{ padding: "10px", background: "#F8FAFC", borderLeft: "4px solid #3B82F6", borderRadius: "8px" }}>
                  <strong style={{ fontSize: "11px", color: "#1E3A8A" }}>📝 {lblNotes}</strong>
                  <div style={{ margin: "6px 0 0 8px", color: "#334155", fontSize: "13px", lineHeight:1.5, whiteSpace: "pre-wrap" }} dir="auto">
                    {finalNotesList.join("\n")}
                  </div>
                </div>
              )}

{/* 3-COLUMN AUDIO LAYOUT — hidden for facture & panne (already rendered inside their card) */}
              {parsedAudios.length > 0 && !isFacture && !isPanne && (
                <div style={{ padding: "12px", background: "#FAF5FF", borderLeft: "4px solid #A855F7", borderRadius: "8px" }}>
                   <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "8px" }}>
                       <strong style={{ fontSize: "11px", color: "#581C87" }}>🎤 AUDIO</strong>
                   </div>
                   
                   <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                      {parsedAudios.map((pa, i) => {
                          const trKey = 'tr_' + i, tlKey = 'tl_' + i;
                          return (
                              <div key={i} style={{ display: "flex", gap: "12px", background: "#fff", borderRadius: "8px", border: "1px solid #E9D5FF", overflow: "hidden", flexWrap:"wrap" }}>
                                  <div style={{ flex: "1 1 200px", padding: "10px", display: "flex", flexDirection: "column", gap: "8px", justifyContent: "center" }}>
                                      <audio className="agro-media" controls src={pa.src} style={{ width: "100%", height: "32px" }} />
                                  </div>
                                  <div style={{ flex: "1 1 200px", padding: "10px", borderLeft: "1px solid #F3E8FF", background: "#FDFBFF" }}>
                                      <div style={{ fontSize: "10px", color: "#6B7280", fontWeight: "bold", marginBottom: "6px", display:"flex", alignItems:"center", gap:4 }}>
                                        {lblTrans}
                                        {editSection !== trKey && <button onClick={() => openSection(trKey, pa.tr)} title="Éditer" style={{ background:"#E0F2FE", border:"1px solid #BAE6FD", color:"#0369A1", cursor:"pointer", fontSize:9, fontWeight:700, padding:"1px 6px", borderRadius:10 }}>✏️</button>}
                                      </div>
                                      {editSection === trKey ? (
                                        <SectionEdit sKey={trKey} rows={3} />
                                      ) : (
                                        <div style={{ fontSize: "13px", color: "#1F2937", lineHeight:1.5, whiteSpace: "pre-wrap" }} dir="auto">{pa.tr}</div>
                                      )}
                                  </div>
                                  <div style={{ flex: "1 1 200px", padding: "10px", borderLeft: "1px solid #F3E8FF" }}>
                                      <div style={{ fontSize: "10px", color: "#6B7280", fontWeight: "bold", marginBottom: "6px", display:"flex", alignItems:"center", gap:4 }}>
                                        {lblTrad}
                                        {editSection !== tlKey && <button onClick={() => openSection(tlKey, pa.tl)} title="Éditer" style={{ background:"#E0F2FE", border:"1px solid #BAE6FD", color:"#0369A1", cursor:"pointer", fontSize:9, fontWeight:700, padding:"1px 6px", borderRadius:10 }}>✏️</button>}
                                      </div>
                                      {editSection === tlKey ? (
                                        <SectionEdit sKey={tlKey} rows={3} />
                                      ) : (
                                        <div style={{ fontSize: "13px", color: "#1F2937", lineHeight:1.5, whiteSpace: "pre-wrap" }} dir="auto">{pa.tl}</div>
                                      )}
                                  </div>
                              </div>
                          )
                      })}
                   </div>
                </div>
              )}

{/* VIDEO LAYOUT */}
              {videos.length > 0 && (
                <div style={{ padding: "12px", background: "#FEF2F2", borderLeft: "4px solid #EF4444", borderRadius: "8px" }}>
                  <strong style={{ fontSize: "11px", color: "#991B1B", display: "block", marginBottom: "8px" }}>🎥 VIDÉO</strong>
                  <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
                    {videos.map((v, i) => <video key={i} className="agro-media" controls src={v} style={{ width: "100%", maxWidth: "300px", borderRadius: "6px", border: "1px solid #FECACA" }} />)}
                  </div>
                </div>
              )}

{/* GENERAL PHOTOS — hidden for invoices (photo already shown in the bill card above) */}
              {/* GENERAL PHOTOS — hidden for facture & panne (photos already shown in the report card above) */}
              {visitPhotos.length > 0 && !isFacture && !isPanne && !isAjor && (
                <div style={{ padding: "12px", background: "#F0FDF4", borderLeft: "4px solid #22C55E", borderRadius: "8px" }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }}>
                    <div style={{ display:"flex", alignItems:"center", gap:"10px" }}>
                      <strong onClick={() => { const mb = document.querySelector('[data-map-btn="' + m.id + '"]'); if (mb) mb.click(); }} style={{ fontSize: "11px", color: "#14532D", cursor:"pointer", borderBottom:"1px dashed #22C55E" }} title="Ouvrir la carte">📸 {lblPhoto}</strong>
                      <span style={{ fontSize:"10px", color:"#64748b", background:"#f1f5f9", borderRadius:"10px", padding:"2px 8px" }}>{visitPhotos.length} photo{visitPhotos.length > 1 ? 's' : ''}{(() => { const nc = visitPhotos.filter(p => p.note_type).length; return nc > 0 ? ' (' + nc + ' 🎤)' : ''; })()}</span>
                    </div>
                    <div style={{ display:"flex", gap:"4px", alignItems:"center" }}>
                    <button onClick={() => {
                      const esc = s => (s||'').replace(/</g,'<').replace(/>/g,'>');
                      const getLoc = (field) => { if (!field) return ''; if (typeof field === 'string') return field; return field.fr || field.en || Object.values(field)[0] || ''; };
                      let photoRows = visitPhotos.map((photo, i) => {
                        const parcel = photo.parcel_name || (p && p.parcel_name) || '—';
                        const time = photo.time || '—';
                        const desc = photo.ai_insight ? (photo.ai_insight.description || '') : '';
                        const insight = photo.ai_insight && photo.ai_insight.insight ? getLoc(photo.ai_insight.insight) : '';
                        let trans = '';
                        if (photo.audio_transcription) {
                          const tl = photo.audio_transcription.translation;
                          trans = tl ? getLoc(tl) : (photo.audio_transcription.original_transcript || '');
                        }
                        const gps = (photo.lat && photo.lng) ? (parseFloat(photo.lat).toFixed(6) + ', ' + parseFloat(photo.lng).toFixed(6)) : '—';
                        return '<tr>' +
                          '<td style="text-align:center;padding:8px"><img src="' + esc(photo.url) + '" style="width:160px;height:160px;object-fit:cover;border-radius:6px" crossorigin="anonymous"></td>' +
                          '<td style="padding:8px;vertical-align:top"><strong>' + esc(parcel) + '</strong><br><small>Heure: ' + esc(time) + '</small></td>' +
                          '<td style="padding:8px;vertical-align:top;font-size:11px">' + (trans ? esc(trans) : '—') + '</td>' +
                          '<td style="padding:8px;vertical-align:top;font-size:11px">' + (desc ? '<em>' + esc(desc) + '</em>' : '') + (desc && insight ? '<br><br>' : '') + (insight ? esc(insight) : (!desc ? '—' : '')) + '</td>' +
                          '<td style="padding:8px;vertical-align:top;font-size:10px;font-family:monospace">' + esc(gps) + '</td>' +
                          '</tr>';
                      }).join('');
                      const execSummary = v59Data ? getLoc(v59Data.executive_summary) : '';
                      const w = window.open('', '_blank');
                      w.document.write('<html><head><title>Rapport Photos — ' + esc(m.sender||'') + ' — ' + esc(m.date||'') + '</title>');
                      w.document.write('<style>@page{size:landscape;margin:12mm}body{font-family:Helvetica,Arial,sans-serif;font-size:12px;color:#1e293b;margin:20px}h1{font-size:18px;color:#14532D;margin-bottom:4px}.meta{color:#666;font-size:11px;margin-bottom:12px}.summary{background:#f0fdf4;border-left:4px solid #22c55e;padding:8px 12px;margin-bottom:16px;font-size:11px;line-height:1.5}table{width:100%;border-collapse:collapse}th{background:#2c3e50;color:#fff;padding:8px;font-size:11px;text-align:left}td{border:1px solid #d1d5db;font-size:11px;line-height:1.4}tr:nth-child(even){background:#f8f9fa}img{display:block}</style>');
                      w.document.write('</head><body>');
                      w.document.write('<h1>📸 Rapport de Visite — Photos</h1>');
                      w.document.write('<div class="meta">' + esc(m.sender||'—') + '  |  ' + esc(m.date||'—') + '</div>');
                      if (execSummary) w.document.write('<div class="summary"><strong>Résumé:</strong> ' + esc(execSummary) + '</div>');
                      w.document.write('<table><thead><tr><th style="width:180px">Photo</th><th style="width:100px">Parcelle / Heure</th><th style="width:180px">Transcription (FR)</th><th>Analyse IA</th><th style="width:110px">GPS</th></tr></thead><tbody>');
                      w.document.write(photoRows);
                      w.document.write('</tbody></table></body></html>');
                      w.document.close();
                      setTimeout(() => w.print(), 500);
                    }} title="Imprimer / PDF" style={{ background:"none", color:"#64748b", border:"1px solid #e2e8f0", borderRadius:"6px", padding:"4px 8px", fontSize:"14px", cursor:"pointer", lineHeight:1, transition:"all 0.15s" }} onMouseEnter={e => { e.currentTarget.style.background='#0EA5E9'; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='#0EA5E9'; }} onMouseLeave={e => { e.currentTarget.style.background='none'; e.currentTarget.style.color='#64748b'; e.currentTarget.style.borderColor='#e2e8f0'; }}>
                      🖨️
                    </button>
                    <button onClick={() => {
                      const decodeWKB = (hex) => {
                        if (!hex || hex.length < 50) return null;
                        try {
                          const buf = new Uint8Array(hex.match(/.{2}/g).map(b => parseInt(b, 16))).buffer;
                          const dv = new DataView(buf);
                          return { lat: dv.getFloat64(17, true), lng: dv.getFloat64(9, true) };
                        } catch(e) { return null; }
                      };
                      const visitGPS = decodeWKB(m.gps_location);
                      const photoPts = [];
                      visitPhotos.forEach((photo, i) => {
                        const lat = photo.lat || (photo.ai_insight && photo.ai_insight.lat);
                        const lng = photo.lng || (photo.ai_insight && photo.ai_insight.lng);
                        const getLoc2 = (f) => { if (!f) return ''; if (typeof f === 'string') return f; return f.fr || f.en || Object.values(f)[0] || ''; };
                        let ptTrans = '';
                        if (photo.audio_transcription) {
                          const tl = photo.audio_transcription.translation;
                          ptTrans = tl ? getLoc2(tl) : (photo.audio_transcription.original_transcript || '');
                        } else if (photo.note_text) {
                          ptTrans = photo.note_text;
                        }
                        let ptInsight = '';
                        if (photo.ai_insight) {
                          ptInsight = photo.ai_insight.description || '';
                          const ins = photo.ai_insight.insight;
                          if (ins) { const it = getLoc2(ins); if (it) ptInsight = ptInsight ? ptInsight + '\n' + it : it; }
                        }
                        const ptData = { lat: 0, lng: 0, idx: i+1, parcel: photo.parcel_name, time: photo.time || '', url: photo.url, trans: ptTrans, insight: ptInsight };
                        if (lat && lng) { ptData.lat = parseFloat(lat); ptData.lng = parseFloat(lng); photoPts.push(ptData); }
                        else if (visitGPS) { ptData.lat = visitGPS.lat; ptData.lng = visitGPS.lng; photoPts.push(ptData); }
                      });
                      const allPolys = (parcels || []).filter(pp => pp.polygon && pp.polygon.length >= 3);
                      if (!allPolys.length) { alert('Aucune parcelle disponible'); return; }

const W = 900, H = 700;
                      const parcelColors = ['#86efac','#93c5fd','#fde68a','#fca5a5','#c4b5fd','#a5f3fc','#fdba74','#f9a8d4','#d9f99d','#e2e8f0','#99f6e4'];

const popup = window.open('', '_blank', 'width=' + (W+40) + ',height=' + (H+120));
                      popup.document.write('<html><head><title>Carte — ' + (m.sender||'') + '</title></head><body style="margin:12px;font-family:Helvetica,Arial,sans-serif;background:#f8fafc">' +
                        '<div id="header" style="display:flex;align-items:center;gap:10px;margin-bottom:8px">' +
                          '<h3 id="title" style="margin:0;color:#1e293b;font-size:15px">📍 Carte des Photos — ' + (m.sender||'') + ' — ' + (m.date||'') + '</h3>' +
                        '</div>' +
                        '<div style="position:relative;display:inline-block">' +
                          '<canvas id="map" width="' + W + '" height="' + H + '" style="border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer;display:block"></canvas>' +
                          '<div id="hoverThumb" style="display:none;position:absolute;pointer-events:none;z-index:10;background:#fff;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,0.4);padding:6px;max-width:420px">' +
                            '<div style="display:flex;gap:6px;align-items:flex-start">' +
                              '<div id="hoverTransBox" style="display:none;flex:1;font-size:9px;line-height:1.3;color:#1e293b;max-width:120px;padding:2px 0"><div style="font-weight:700;color:#8B5CF6;margin-bottom:2px;font-size:8px">🎤 Transcription</div><div id="hoverTrans"></div></div>' +
                              '<img id="hoverImg" src="" style="width:160px;height:160px;object-fit:cover;border-radius:6px;display:block;flex-shrink:0">' +
                              '<div id="hoverInsightBox" style="display:none;flex:1;font-size:9px;line-height:1.3;color:#1e293b;max-width:140px;padding:2px 0"><div style="font-weight:700;color:#0EA5E9;margin-bottom:2px;font-size:8px">🤖 Analyse IA</div><div id="hoverInsight"></div></div>' +
                            '</div>' +
                            '<div id="hoverLabel" style="background:#1e293b;color:#fff;font-size:10px;padding:2px 8px;border-radius:0 0 6px 6px;text-align:center;margin-top:4px"></div>' +
                          '</div>' +
                          '<div id="photoPopup" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:100;cursor:pointer">' +
                            '<div style="display:flex;height:100%;align-items:center;justify-content:center;gap:20px;padding:30px">' +
                              '<div id="popupTransBox" style="display:none;flex:0 0 220px;background:rgba(255,255,255,0.95);border-radius:10px;padding:14px;font-size:12px;line-height:1.5;color:#1e293b;max-height:80vh;overflow-y:auto"><div style="font-weight:700;color:#8B5CF6;margin-bottom:6px">🎤 Transcription</div><div id="popupTrans"></div></div>' +
                              '<img id="popupImg" src="" style="max-width:50%;max-height:85vh;object-fit:contain;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,0.6)">' +
                              '<div id="popupInsightBox" style="display:none;flex:0 0 250px;background:rgba(255,255,255,0.95);border-radius:10px;padding:14px;font-size:12px;line-height:1.5;color:#1e293b;max-height:80vh;overflow-y:auto"><div style="font-weight:700;color:#0EA5E9;margin-bottom:6px">🤖 Analyse IA</div><div id="popupInsight"></div></div>' +
                            '</div>' +
                          '</div>' +
                        '</div>' +
                        '<div style="margin-top:8px;display:flex;gap:8px">' +
                          '<button onclick="window.print()" style="padding:6px 16px;background:#0EA5E9;color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer">🖨️ Imprimer</button>' +
                        '</div>' +
                        '</body></html>');
                      popup.document.close();

setTimeout(() => {
                        const canvas = popup.document.getElementById('map');
                        const titleEl = popup.document.getElementById('title');
                        const headerEl = popup.document.getElementById('header');
                        if (!canvas) return;
                        const ctx = canvas.getContext('2d');

// Store parcel bounding rects for click detection
                        const parcelHitAreas = [];
                        const pinPositions = []; // {x, y, r, idx, url, time, parcel}
                        let currentView = 'farm'; // 'farm' or parcel name
                        const hoverThumb = popup.document.getElementById('hoverThumb');
                        const hoverImg = popup.document.getElementById('hoverImg');
                        const hoverLabel = popup.document.getElementById('hoverLabel');
                        const photoPopup = popup.document.getElementById('photoPopup');
                        const popupImg = popup.document.getElementById('popupImg');
                        // Close popup on click
                        photoPopup.addEventListener('click', () => { photoPopup.style.display = 'none'; });

function drawMap(focusParcel) {
                          ctx.clearRect(0, 0, W, H);
                          currentView = focusParcel || 'farm';

// Remove old back button if any
                          const oldBtn = popup.document.getElementById('backBtn');
                          if (oldBtn) oldBtn.remove();

let bMinLat = Infinity, bMaxLat = -Infinity, bMinLng = Infinity, bMaxLng = -Infinity;

if (focusParcel) {
                            // Zoom to single parcel
                            const fp = allPolys.find(pp => pp.name === focusParcel);
                            if (fp) {
                              fp.polygon.forEach(pt => {
                                bMinLat = Math.min(bMinLat, pt[0]); bMaxLat = Math.max(bMaxLat, pt[0]);
                                bMinLng = Math.min(bMinLng, pt[1]); bMaxLng = Math.max(bMaxLng, pt[1]);
                              });
                              // Include photo points in this parcel
                              photoPts.filter(pt => pt.parcel === focusParcel).forEach(pt => {
                                bMinLat = Math.min(bMinLat, pt.lat); bMaxLat = Math.max(bMaxLat, pt.lat);
                                bMinLng = Math.min(bMinLng, pt.lng); bMaxLng = Math.max(bMaxLng, pt.lng);
                              });
                            }
                            titleEl.textContent = '📍 ' + focusParcel + ' — Distribution des photos';
                            // Add back button
                            const backBtn = popup.document.createElement('button');
                            backBtn.id = 'backBtn';
                            backBtn.textContent = '←';
                            backBtn.style.cssText = 'padding:4px 12px;background:#475569;color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer;font-size:22px;line-height:1';
                            backBtn.onclick = () => drawMap(null);
                            headerEl.appendChild(backBtn);
                          } else {
                            // Full farm view
                            allPolys.forEach(pp => pp.polygon.forEach(pt => {
                              bMinLat = Math.min(bMinLat, pt[0]); bMaxLat = Math.max(bMaxLat, pt[0]);
                              bMinLng = Math.min(bMinLng, pt[1]); bMaxLng = Math.max(bMaxLng, pt[1]);
                            }));
                            photoPts.forEach(pt => {
                              bMinLat = Math.min(bMinLat, pt.lat); bMaxLat = Math.max(bMaxLat, pt.lat);
                              bMinLng = Math.min(bMinLng, pt.lng); bMaxLng = Math.max(bMaxLng, pt.lng);
                            });
                            titleEl.textContent = '📍 Carte des Photos — ' + (m.sender||'') + ' — ' + (m.date||'');
                          }

// Pad bounds
                          const padR = focusParcel ? 0.15 : 0.10;
                          const padLat = Math.max((bMaxLat - bMinLat) * padR, 0.0002);
                          const padLng = Math.max((bMaxLng - bMinLng) * padR, 0.0002);
                          bMinLat -= padLat; bMaxLat += padLat; bMinLng -= padLng; bMaxLng += padLng;

const toX = (lng) => ((lng - bMinLng) / (bMaxLng - bMinLng)) * (W - 60) + 30;
                          const toY = (lat) => ((bMaxLat - lat) / (bMaxLat - bMinLat)) * (H - 60) + 30;

// Clear hit areas
                          parcelHitAreas.length = 0;

// Draw parcels
                          const drawPolys = focusParcel ? allPolys.filter(pp => pp.name === focusParcel) : allPolys;
                          const dimPolys = focusParcel ? allPolys.filter(pp => pp.name !== focusParcel) : [];

// Draw dimmed neighboring parcels in detail view for context
                          dimPolys.forEach((pp, pi) => {
                            const poly = pp.polygon;
                            ctx.beginPath();
                            ctx.moveTo(toX(poly[0][1]), toY(poly[0][0]));
                            for (let j = 1; j < poly.length; j++) ctx.lineTo(toX(poly[j][1]), toY(poly[j][0]));
                            ctx.closePath();
                            ctx.fillStyle = '#e2e8f022';
                            ctx.fill();
                            ctx.strokeStyle = '#cbd5e1';
                            ctx.lineWidth = 0.5;
                            ctx.stroke();
                          });

drawPolys.forEach((pp, pi) => {
                            const poly = pp.polygon;
                            const ci = allPolys.indexOf(pp);
                            ctx.beginPath();
                            ctx.moveTo(toX(poly[0][1]), toY(poly[0][0]));
                            for (let j = 1; j < poly.length; j++) ctx.lineTo(toX(poly[j][1]), toY(poly[j][0]));
                            ctx.closePath();
                            ctx.fillStyle = parcelColors[ci % parcelColors.length] + (focusParcel ? 'aa' : '88');
                            ctx.fill();
                            ctx.strokeStyle = focusParcel ? '#1e293b' : '#334155';
                            ctx.lineWidth = focusParcel ? 2.5 : 1.5;
                            ctx.stroke();

// Label
                            const cx = poly.reduce((s, pt) => s + toX(pt[1]), 0) / poly.length;
                            const cy = poly.reduce((s, pt) => s + toY(pt[0]), 0) / poly.length;
                            ctx.fillStyle = '#1e293b';
                            ctx.font = focusParcel ? 'bold 14px Helvetica' : 'bold 11px Helvetica';
                            ctx.textAlign = 'center';
                            ctx.fillText(pp.name, cx, cy - (focusParcel ? 8 : 6));
                            ctx.font = focusParcel ? '11px Helvetica' : '9px Helvetica';
                            ctx.fillStyle = '#475569';
                            ctx.fillText(pp.crop_type || '', cx, cy + (focusParcel ? 10 : 8));

// Hit area (farm view only)
                            if (!focusParcel) {
                              const xs = poly.map(pt => toX(pt[1]));
                              const ys = poly.map(pt => toY(pt[0]));
                              parcelHitAreas.push({ name: pp.name, xs, ys });
                            }
                          });

// Count photos per parcel (for farm view badges)
                          const photoCounts = {};
                          photoPts.forEach(pt => { photoCounts[pt.parcel] = (photoCounts[pt.parcel] || 0) + 1; });

// Draw photo markers
                          const ptsToShow = focusParcel ? photoPts.filter(pt => pt.parcel === focusParcel) : photoPts;
                          const pinR = focusParcel ? 14 : 10;

// Store pin screen positions for hover/click detection
                          pinPositions.length = 0;
                          ptsToShow.forEach((pt) => {
                            const x = toX(pt.lng);
                            const y = toY(pt.lat);
                            pinPositions.push({ x, y, r: pinR, idx: pt.idx, url: pt.url, time: pt.time, parcel: pt.parcel, trans: pt.trans, insight: pt.insight });
                            // Shadow
                            ctx.beginPath();
                            ctx.arc(x+1, y+1, pinR, 0, 2*Math.PI);
                            ctx.fillStyle = 'rgba(0,0,0,0.2)';
                            ctx.fill();
                            // Pin
                            ctx.beginPath();
                            ctx.arc(x, y, pinR, 0, 2*Math.PI);
                            ctx.fillStyle = '#dc2626';
                            ctx.fill();
                            ctx.strokeStyle = '#fff';
                            ctx.lineWidth = 2.5;
                            ctx.stroke();
                            // Number
                            ctx.fillStyle = '#fff';
                            ctx.font = 'bold ' + (focusParcel ? '11' : '9') + 'px Helvetica';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(String(pt.idx), x, y);
                          });

// In detail view, show time labels next to pins
                          if (focusParcel) {
                            ptsToShow.forEach((pt) => {
                              if (!pt.time) return;
                              const x = toX(pt.lng);
                              const y = toY(pt.lat);
                              ctx.fillStyle = '#1e293b';
                              ctx.font = '10px Helvetica';
                              ctx.textAlign = 'left';
                              ctx.textBaseline = 'middle';
                              ctx.fillText(pt.time, x + pinR + 4, y);
                            });
                          }

// Farm view: show photo count badges on parcels
                          if (!focusParcel) {
                            allPolys.forEach(pp => {
                              const cnt = photoCounts[pp.name];
                              if (!cnt) return;
                              const poly = pp.polygon;
                              const cx = poly.reduce((s, pt) => s + toX(pt[1]), 0) / poly.length;
                              const cy = poly.reduce((s, pt) => s + toY(pt[0]), 0) / poly.length;
                              // Badge
                              ctx.beginPath();
                              ctx.arc(cx + 30, cy - 12, 11, 0, 2*Math.PI);
                              ctx.fillStyle = '#dc2626';
                              ctx.fill();
                              ctx.strokeStyle = '#fff';
                              ctx.lineWidth = 2;
                              ctx.stroke();
                              ctx.fillStyle = '#fff';
                              ctx.font = 'bold 9px Helvetica';
                              ctx.textAlign = 'center';
                              ctx.textBaseline = 'middle';
                              ctx.fillText(String(cnt), cx + 30, cy - 12);
                            });
                          }

// Legend
                          ctx.fillStyle = '#64748b';
                          ctx.font = '11px Helvetica';
                          ctx.textAlign = 'left';
                          ctx.textBaseline = 'top';
                          if (focusParcel) {
                            ctx.fillText('📍 Survolez un pin pour aperçu, cliquez pour agrandir', 10, H - 22);
                          } else {
                            ctx.fillText('📍 = Photo (#)  |  Cliquez sur une parcelle pour zoomer', 10, H - 22);
                          }
                        }

// Point-in-polygon test
                        function pointInPoly(x, y, xs, ys) {
                          let inside = false;
                          for (let i = 0, j = xs.length - 1; i < xs.length; j = i++) {
                            if ((ys[i] > y) !== (ys[j] > y) && x < (xs[j] - xs[i]) * (y - ys[i]) / (ys[j] - ys[i]) + xs[i]) inside = !inside;
                          }
                          return inside;
                        }

// Find pin under cursor
                        function pinAt(mx, my) {
                          for (const pin of pinPositions) {
                            const dx = mx - pin.x, dy = my - pin.y;
                            if (dx*dx + dy*dy <= (pin.r + 4) * (pin.r + 4)) return pin;
                          }
                          return null;
                        }

// Click handler
                        canvas.addEventListener('click', (e) => {
                          const rect = canvas.getBoundingClientRect();
                          const mx = e.clientX - rect.left;
                          const my = e.clientY - rect.top;
                          // Check pin click first (both views)
                          const pin = pinAt(mx, my);
                          if (pin && pin.url) {
                            popupImg.src = pin.url;
                            const ptb = popup.document.getElementById('popupTransBox');
                            const pt2 = popup.document.getElementById('popupTrans');
                            const pib = popup.document.getElementById('popupInsightBox');
                            const pi2 = popup.document.getElementById('popupInsight');
                            if (pin.trans) { pt2.textContent = pin.trans; ptb.style.display = 'block'; } else { ptb.style.display = 'none'; }
                            if (pin.insight) { pi2.textContent = pin.insight; pib.style.display = 'block'; } else { pib.style.display = 'none'; }
                            photoPopup.style.display = 'flex';
                            hoverThumb.style.display = 'none';
                            return;
                          }
                          // Farm view: parcel click to zoom
                          if (currentView === 'farm') {
                            for (const area of parcelHitAreas) {
                              if (pointInPoly(mx, my, area.xs, area.ys)) {
                                hoverThumb.style.display = 'none';
                                drawMap(area.name);
                                return;
                              }
                            }
                          }
                        });

// Mousemove: hover pins + cursor hints
                        canvas.addEventListener('mousemove', (e) => {
                          const rect = canvas.getBoundingClientRect();
                          const mx = e.clientX - rect.left;
                          const my = e.clientY - rect.top;
                          const pin = pinAt(mx, my);
                          if (pin && pin.url) {
                            hoverImg.src = pin.url;
                            hoverLabel.textContent = '#' + pin.idx + ' — ' + (m.date||'') + (pin.time ? ' ' + pin.time : '');
                            const htb = popup.document.getElementById('hoverTransBox');
                            const ht2 = popup.document.getElementById('hoverTrans');
                            const hib = popup.document.getElementById('hoverInsightBox');
                            const hi2 = popup.document.getElementById('hoverInsight');
                            if (pin.trans) { ht2.textContent = pin.trans.length > 80 ? pin.trans.slice(0, 77) + '...' : pin.trans; htb.style.display = 'block'; } else { htb.style.display = 'none'; }
                            if (pin.insight) { hi2.textContent = pin.insight.length > 100 ? pin.insight.slice(0, 97) + '...' : pin.insight; hib.style.display = 'block'; } else { hib.style.display = 'none'; }
                            // Compute width for positioning
                            const hoverW = 160 + (pin.trans ? 126 : 0) + (pin.insight ? 146 : 0) + 24;
                            let tx = pin.x - hoverW / 2;
                            let ty = pin.y - 240;
                            if (ty < 5) ty = pin.y + pin.r + 10;
                            if (tx < 5) tx = 5;
                            if (tx + hoverW > W) tx = W - hoverW - 5;
                            hoverThumb.style.left = tx + 'px';
                            hoverThumb.style.top = ty + 'px';
                            hoverThumb.style.display = 'block';
                            canvas.style.cursor = 'pointer';
                            return;
                          }
                          hoverThumb.style.display = 'none';
                          // Farm view: parcel hover
                          if (currentView === 'farm') {
                            let hit = false;
                            for (const area of parcelHitAreas) {
                              if (pointInPoly(mx, my, area.xs, area.ys)) { hit = true; break; }
                            }
                            canvas.style.cursor = hit ? 'pointer' : 'default';
                          } else {
                            canvas.style.cursor = 'default';
                          }
                        });

// Hide hover when leaving canvas
                        canvas.addEventListener('mouseleave', () => { hoverThumb.style.display = 'none'; });

// Consolidated card for a group of fertigation_bundle messages on the same day
  function FertigGroupCard({ msgs, lang, setPreviewImage, setPreviewMeas, parcels }) {
    const [expanded, setExpanded] = useState(false);

// Build one row per message, sorted by time
    var ingNames = []; // ordered unique ingredient names
    var ingUnits = {};
    var rows = [];
    msgs.forEach(function(m) {
      try {
        var c = typeof m.content === "string" ? JSON.parse(m.content) : m.content;
        if (!c) return;
        var blocs = c.blocs || [];
        var t = c.time || "";
        var effective = blocs.reduce(function(s, b) { return s + (isHalf(b) ? 0.5 : 1.0); }, 0);
        var rowTotals = {};
        (c.ingredients || []).forEach(function(ing) {
          if (!ingNames.includes(ing.name)) { ingNames.push(ing.name); ingUnits[ing.name] = ing.unit || ""; }
          rowTotals[ing.name] = ((parseFloat(ing.amount) || 0) * effective);
        });
        rows.push({ time: t, blocs: blocs, effective: effective, totals: rowTotals });
      } catch(e) {}
    });
    rows.sort(function(a, b) { return a.time.localeCompare(b.time); });

// Unique bloc numbers actually processed (B10/B11 each count as 1 for display)
    var getBlocNum = function(b) { var mx = b.match(/^Bloc\s*(\d+)/); return mx ? parseInt(mx[1]) : null; };
    var processedNums = {};
    rows.forEach(function(r) { r.blocs.forEach(function(b) { var n = getBlocNum(b); if (n) processedNums[n] = true; }); });
    var processedCount = Object.keys(processedNums).length;
    var ALL_FARM = [1,2,3,4,5,6,7,8,9,10,11];
    var ALL_CITRUS = [3,4,5,6,7,8,9,10,11];
    var hasAll = function(nums) { return nums.every(function(n) { return processedNums[n]; }); };
    var titleLabel = hasAll(ALL_FARM) ? "Toutes les parcelles complétées ✅"
                   : hasAll(ALL_CITRUS) ? "Toutes les parcelles agrumes complétées 🍊"
                   : processedCount + " parcelle(s) complétée(s)";

var tdBase = { padding:"5px 10px", borderBottom:"1px solid #D1FAE5", fontSize:12, verticalAlign:"middle" };
    var thBase = { padding:"6px 10px", fontSize:11, fontWeight:700, color:"#166534", background:"#DCFCE7", borderBottom:"2px solid #86EFAC", whiteSpace:"nowrap" };

return (
      <Card style={{ padding:14, borderLeft:"4px solid #22C55E", background:"#F0FDF4", marginBottom:12 }}>
        {/* Header */}
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:8, marginBottom:12 }}>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <span style={{ fontSize:20 }}>💧</span>
            <div>
              <div style={{ fontWeight:700, fontSize:14, color:"#166534" }}>Fertigation — {titleLabel}</div>
              <div style={{ fontSize:11, color:"#4ADE80", marginTop:1 }}>{dateLabel} · {msgs.length} soumission(s)</div>
            </div>
          </div>
          <button onClick={() => setExpanded(v => !v)}
            style={{ padding:"4px 12px", background:"#DCFCE7", color:"#166534", border:"1px solid #86EFAC", borderRadius:20, fontSize:11, fontWeight:700, cursor:"pointer" }}>
            {expanded ? "▲ Réduire" : "▼ Voir détails"}
          </button>
        </div>

{/* Table */}
        <div style={{ overflowX:"auto" }}>
          <table style={{ width:"100%", borderCollapse:"collapse", background:"#fff", borderRadius:8, overflow:"hidden" }}>
            <thead>
              <tr>
                <th style={{ ...thBase, textAlign:"left" }}>Heure</th>
                <th style={{ ...thBase, textAlign:"left" }}>Parcelles</th>
                {ingNames.map(function(n) {
                  return <th key={n} style={{ ...thBase, textAlign:"right" }}>{n}<br/><span style={{ fontWeight:400, color:"#4ADE80" }}>({ingUnits[n]})</span></th>;
                })}
              </tr>
            </thead>
            <tbody>
              {rows.map(function(row, i) {
                return (
                  <tr key={i} style={{ background: i%2===0 ? "#fff" : "#F0FDF4" }}>
                    <td style={{ ...tdBase, fontFamily:"monospace", fontWeight:700, color:"#166534", whiteSpace:"nowrap" }}>{row.time || "—"}</td>
                    <td style={{ ...tdBase, color:"#374151" }}>{row.blocs.map(fmtBloc).join(", ")}</td>
                    {ingNames.map(function(n) {
                      var v = row.totals[n];
                      return <td key={n} style={{ ...tdBase, textAlign:"right", whiteSpace:"nowrap", color:"#065F46" }}>{v != null ? fmtNum(v) : "—"}</td>;
                    })}
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{ background:"#DCFCE7", fontWeight:700, borderTop:"2px solid #86EFAC" }}>
                <td style={{ ...tdBase, color:"#166534", fontWeight:700, borderBottom:"none" }}>Total</td>
                <td style={{ ...tdBase, color:"#166534", borderBottom:"none" }}>{processedCount} parcelle(s)</td>
                {ingNames.map(function(n) {
                  return <td key={n} style={{ ...tdBase, textAlign:"right", whiteSpace:"nowrap", color:"#166534", fontWeight:700, borderBottom:"none" }}>{fmtNum(grandTotals[n] || 0)} {ingUnits[n]}</td>;
                })}
              </tr>
            </tfoot>
          </table>
        </div>

{/* Expanded: individual message cards */}
        {expanded && (
          <div style={{ marginTop:14, borderTop:"1px solid #BBF7D0", paddingTop:14 }}>
            {msgs.map(function(m) { return <MsgCard key={m.id} m={m} lang={lang} setPreviewImage={setPreviewImage} setPreviewMeas={setPreviewMeas} parcels={parcels} />; })}
          </div>
        )}
      </Card>
    );
  }

return (
    <div dir={rtl?"rtl":"ltr"}>
      {/* MEASUREMENT PREVIEW OVERLAY */}
      {previewMeas && (() => {
        const pm = previewMeas;
        const cur = pm.allMeas[pm.currentIdx];
        if (!cur) return null;
        const isSoil = pm.type === 'soil';
        const accent = isSoil ? '#0D9488' : '#F59E0B';
        const accentLight = isSoil ? '#F0FDFA' : '#FFFBEB';
        const accentDark = isSoil ? '#115E59' : '#92400E';
        const icon = isSoil ? '🌱' : '🍊';
        const title = isSoil ? 'SOIL MEASUREMENT' : 'FRUIT CALIBER';
        const total = pm.allMeas.length;
        const idx = pm.currentIdx;

const goTo = (i) => { if (i >= 0 && i < total) setPreviewMeas({...pm, currentIdx: i}); };

const mGPS = (cur.lat && cur.lng) ? (parseFloat(cur.lat).toFixed(5) + ', ' + parseFloat(cur.lng).toFixed(5)) : null;

const parcelColors = ['#86efac','#93c5fd','#fde68a','#fca5a5','#c4b5fd','#a5f3fc','#fdba74','#f9a8d4','#d9f99d','#e2e8f0','#99f6e4'];
        const allPolys = (pm.parcels || []).filter(pp => pp.polygon && pp.polygon.length >= 3);
        let parcelColor = '#64748b';
        const pci = allPolys.findIndex(pp => pp.name === cur._parcelName);
        if (pci >= 0) parcelColor = parcelColors[pci % parcelColors.length];

return (
          <div onClick={() => setPreviewMeas(null)} onKeyDown={ev => { if (ev.key === 'ArrowLeft') { ev.preventDefault(); goTo(idx-1); } else if (ev.key === 'ArrowRight') { ev.preventDefault(); goTo(idx+1); } else if (ev.key === 'Escape') setPreviewMeas(null); }} tabIndex={0} ref={el => { if (el) el.focus(); }} style={{position:"fixed", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(0,0,0,0.88)", zIndex:9999, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", padding:"16px 70px", outline:"none"}}>
            {/* Nav arrows */}
            {total > 1 && idx > 0 && (
              <button onClick={ev => { ev.stopPropagation(); goTo(idx-1); }} style={{position:"fixed", left:16, top:"50%", transform:"translateY(-50%)", background:"rgba(255,255,255,0.12)", color:"#fff", border:"none", borderRadius:"50%", width:44, height:44, cursor:"pointer", fontSize:22, zIndex:10001, backdropFilter:"blur(4px)"}}>←</button>
            )}
            {total > 1 && idx < total-1 && (
              <button onClick={ev => { ev.stopPropagation(); goTo(idx+1); }} style={{position:"fixed", right:16, top:"50%", transform:"translateY(-50%)", background:"rgba(255,255,255,0.12)", color:"#fff", border:"none", borderRadius:"50%", width:44, height:44, cursor:"pointer", fontSize:22, zIndex:10001, backdropFilter:"blur(4px)"}}>→</button>
            )}
            {/* Main content: LEFT=AI+Map  CENTER=Photo+Label  RIGHT=Metrics + Filmstrip */}
            <div style={{display:"flex", flexDirection:"column", maxWidth:"95vw", maxHeight:"90vh", gap:0}} onClick={ev => ev.stopPropagation()}>
            <div style={{display:"flex", gap:12, alignItems:"stretch", height:"70vh"}}>
              {/* LEFT: AI Insight + Farm Map */}
              <div style={{flex:"0 0 260px", display:"flex", flexDirection:"column", gap:8}}>
                {/* AI Insight — scrollable with fade hint */}
                {cur.insights && cur.insights.length > 0 && (
                  <div style={{position:"relative", flex:"1 1 auto", minHeight:0, display:"flex", flexDirection:"column"}}>
                    <div style={{background:"rgba(255,255,255,0.95)", borderRadius:10, padding:14, fontSize:13, lineHeight:"1.6", color:"#1e293b", flex:"1 1 auto", overflowY:"auto", minHeight:0}}
                      onScroll={e => { const el = e.currentTarget; const fade = el.nextElementSibling; if (fade) fade.style.opacity = (el.scrollHeight - el.scrollTop - el.clientHeight > 10) ? '1' : '0'; }}
                      ref={el => { if (el && el.nextElementSibling) el.nextElementSibling.style.opacity = (el.scrollHeight > el.clientHeight) ? '1' : '0'; }}>
                      <div style={{fontWeight:700, color:"#8B5CF6", marginBottom:8, fontSize:12}}>🧠 Analyse IA</div>
                      <div style={{whiteSpace:"pre-wrap"}}>{cur.insights.join("\n\n")}</div>
                    </div>
                    <div style={{position:"absolute", bottom:0, left:0, right:0, height:36, background:"linear-gradient(transparent, rgba(255,255,255,0.98))", borderRadius:"0 0 10px 10px", pointerEvents:"none", transition:"opacity 0.2s", display:"flex", alignItems:"flex-end", justifyContent:"center", paddingBottom:4}}>
                      <span style={{fontSize:14, color:"#8B5CF6", fontWeight:600}}>▼</span>
                    </div>
                  </div>
                )}
                {/* Farm mini-map */}
                {allPolys.length > 0 && cur.lat && cur.lng && (
                  <div style={{background:"rgba(255,255,255,0.95)", borderRadius:10, padding:8, overflow:"hidden", flex:"0 0 auto"}}>
                    <canvas ref={el => {
                      if (!el) return;
                      const W = 244, H = 170;
                      el.width = W; el.height = H;
                      const ctx = el.getContext('2d');
                      ctx.fillStyle = '#f8fafc'; ctx.fillRect(0,0,W,H);
                      let mnLat=Infinity,mxLat=-Infinity,mnLng=Infinity,mxLng=-Infinity;
                      allPolys.forEach(pp => pp.polygon.forEach(p => { mnLat=Math.min(mnLat,p[0]); mxLat=Math.max(mxLat,p[0]); mnLng=Math.min(mnLng,p[1]); mxLng=Math.max(mxLng,p[1]); }));
                      const padLat=(mxLat-mnLat)*0.1||0.0005, padLng=(mxLng-mnLng)*0.1||0.0005;
                      mnLat-=padLat; mxLat+=padLat; mnLng-=padLng; mxLng+=padLng;
                      const toX=lng=>((lng-mnLng)/(mxLng-mnLng))*W;
                      const toY=lat=>H-((lat-mnLat)/(mxLat-mnLat))*H;
                      allPolys.forEach((pp,ci) => {
                        const poly=pp.polygon;
                        const isActive = cur._parcelName && pp.name === cur._parcelName;
                        ctx.beginPath();
                        poly.forEach((p,j) => { j===0?ctx.moveTo(toX(p[1]),toY(p[0])):ctx.lineTo(toX(p[1]),toY(p[0])); });
                        ctx.closePath();
                        ctx.fillStyle = parcelColors[ci % parcelColors.length] + (isActive ? 'cc' : '55');
                        ctx.fill();
                        ctx.strokeStyle = isActive ? '#1e293b' : '#94a3b8';
                        ctx.lineWidth = isActive ? 2 : 0.8;
                        ctx.stroke();
                        const cx2=poly.reduce((s,p)=>s+toX(p[1]),0)/poly.length;
                        const cy2=poly.reduce((s,p)=>s+toY(p[0]),0)/poly.length;
                        ctx.fillStyle = isActive ? '#1e293b' : '#94a3b8';
                        ctx.font = isActive ? 'bold 10px Helvetica' : '8px Helvetica';
                        ctx.textAlign='center'; ctx.textBaseline='middle';
                        ctx.fillText(pp.name, cx2, cy2);
                      });
                      const lat=parseFloat(cur.lat), lng=parseFloat(cur.lng);
                      if (lat && lng) {
                        const px=toX(lng), py=toY(lat);
                        ctx.beginPath(); ctx.arc(px,py,16,0,2*Math.PI);
                        ctx.fillStyle='rgba(220,38,38,0.15)'; ctx.fill();
                        ctx.beginPath(); ctx.arc(px,py,9,0,2*Math.PI);
                        ctx.fillStyle='#dc2626'; ctx.fill();
                        ctx.strokeStyle='#fff'; ctx.lineWidth=2.5; ctx.stroke();
                        ctx.fillStyle='#fff'; ctx.font='bold 9px Helvetica';
                        ctx.textAlign='center'; ctx.textBaseline='middle';
                        ctx.fillText(String(idx+1), px, py);
                      }
                    }} style={{display:"block", width:244, height:170, borderRadius:6}} />
                  </div>
                )}
              </div>
              {/* CENTER: Label bar + Photo */}
              <div style={{position:"relative", textAlign:"center", display:"flex", flexDirection:"column", alignItems:"center", flex:"1 1 auto", minWidth:0}}>
                {/* Label bar */}
                <div style={{background:"rgba(255,255,255,0.95)", color:"#1e293b", fontSize:12, padding:"6px 16px", borderRadius:"8px 8px 0 0", width:"100%", display:"flex", alignItems:"center", justifyContent:"center", gap:12, flexWrap:"wrap", flex:"0 0 auto"}}>
                  <span style={{fontWeight:700}}>{idx+1} / {total}</span>
                  <span>{pm.date || ''}{cur.time ? ' ' + cur.time : ''}</span>
                  {cur._parcelName && <span style={{background:parcelColor, padding:"1px 8px", borderRadius:10, fontSize:11, fontWeight:600, border:"1px solid rgba(0,0,0,0.15)"}}>{cur._parcelName}</span>}
                  {mGPS && <a href={`https://maps.google.com/?q=${cur.lat},${cur.lng}`} target="_blank" rel="noopener noreferrer" style={{fontSize:10, color:"#64748b", textDecoration:"none"}}>📍 {mGPS}</a>}
                </div>
                {cur.photo_url ? (
                  <img className="agro-media" src={cur.photo_url} style={{flex:"1 1 auto", maxHeight:"calc(70vh - 32px)", maxWidth:"100%", borderRadius:0, backgroundColor:"#fff", display:"block", boxShadow:"0 15px 40px rgba(0,0,0,0.6)", objectFit:"contain", minHeight:0}} />
                ) : (
                  <div style={{flex:"1 1 auto", width:"100%", background:"#f1f5f9", display:"flex", alignItems:"center", justifyContent:"center", fontSize:60}}>{icon}</div>
                )}
                <button onClick={() => setPreviewMeas(null)} style={{position:"absolute", top:-8, right:-12, background:"#E74C3C", color:"white", border:"none", borderRadius:"50%", width:30, height:30, cursor:"pointer", fontWeight:"bold", boxShadow:"0 2px 4px rgba(0,0,0,0.2)", zIndex:1}}>X</button>
              </div>
              {/* RIGHT: Metrics column — grouped Soil / Environment, vertically centered */}
              {(() => {
                const envLabels = ['lux', 'hum.air'];
                const soilMetrics = cur.metrics.filter(m => !envLabels.includes(m.label.toLowerCase()));
                const envMetrics = cur.metrics.filter(m => envLabels.includes(m.label.toLowerCase()));
                const hasEnv = envMetrics.length > 0;
                const displayLabel = (label) => {
                  if (label === 'Humidité') return 'Humidité du sol';
                  if (label === 'Hum.Air') return 'Humidité';
                  if (label === 'Lux') return 'Luminosité';
                  return label;
                };
                const metricColors = (label, section) => {
                  if (label === 'Temp.') return { lc: "#D97706", vc: "#92400E", bg: "#FFFBEB", bd: "1.5px solid #F59E0B" };
                  if (section === 'env') return { lc: "#2563EB", vc: "#1E3A8A", bg: "#EFF6FF", bd: "1.5px solid #3B82F6" };
                  return { lc: "#0D9488", vc: "#115E59", bg: "#F0FDFA", bd: "1.5px solid #0D9488" };
                };
                const isAbnormal = (label, value) => {
                  const num = parseFloat(String(value).replace(/[^0-9.\-]/g, ''));
                  if (isNaN(num)) return false;
                  if (label === 'pH') return num < 6.0 || num > 7.0;
                  if (label === 'Fertilité') return num < 300 || num > 1100;
                  if (label === 'Humidité') return num < 50 || num > 75;
                  if (label === 'Temp.') return num < 18 || num > 32;
                  return false;
                };
                const MetricBox = ({metric, section}) => {
                  const c = metricColors(metric.label, section);
                  const abnormal = isAbnormal(metric.label, metric.value);
                  return (
                    <div style={{background:c.bg, border:c.bd, borderRadius:3, padding:"4px 6px", textAlign:"center", position:"relative", overflow:"hidden"}}>
                      {abnormal && (
                        <React.Fragment>
                          <style>{`@keyframes measBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }`}</style>
                          <div style={{position:"absolute", left:0, top:0, bottom:0, width:4, background:"#DC2626", borderRadius:"3px 0 0 3px", animation:"measBlink 1.2s ease-in-out infinite"}} />
                        </React.Fragment>
                      )}
                      <div style={{fontSize:12, color:c.lc, fontWeight:700, textTransform:"uppercase", letterSpacing:"0.3px", lineHeight:1.2}}>{displayLabel(metric.label)}</div>
                      <div style={{fontSize:18, fontWeight:800, color: abnormal ? "#DC2626" : c.vc, lineHeight:1.1}}>{metric.value}</div>
                    </div>
                  );
                };
                return (
                  <div style={{flex:"0 0 160px", display:"flex", flexDirection:"column", justifyContent:"center", gap:0}}>
                    {/* Soil section */}
                    <div style={{display:"flex", flexDirection:"column", gap:2}}>
                      <div style={{fontWeight:700, color:"#fff", fontSize:10, textAlign:"center", padding:"5px 0", background:"#0D9488", borderRadius:"6px 6px 0 0", letterSpacing:"0.5px"}}>
                        🌱 SOL
                      </div>
                      {soilMetrics.map((metric, mi) => <MetricBox key={mi} metric={metric} section="soil" />)}
                    </div>
                    {/* Environment section */}
                    {hasEnv && (
                      <div style={{display:"flex", flexDirection:"column", gap:2, marginTop:18}}>
                        <div style={{fontWeight:700, color:"#fff", fontSize:10, textAlign:"center", padding:"5px 0", background:"#2563EB", borderRadius:"6px 6px 0 0", letterSpacing:"0.5px"}}>
                          🌤 ENVIRONNEMENT
                        </div>
                        {envMetrics.map((metric, mi) => <MetricBox key={mi} metric={metric} section="env" />)}
                      </div>
                    )}
                  </div>
                );
              })()}
            </div>
            {/* Filmstrip — inside the layout flow, centered under all 3 columns */}
            {total > 1 && (
              <div onClick={ev => ev.stopPropagation()} style={{display:"flex", gap:6, alignItems:"flex-start", justifyContent:"center", marginTop:10, overflowX:"auto", padding:"8px 14px", background:"rgba(255,255,255,0.92)", borderRadius:10, boxShadow:"0 4px 16px rgba(0,0,0,0.3)", border:"1px solid rgba(0,0,0,0.1)", width:"100%"}}>
                {pm.allMeas.map((mg, i) => {
                  const pName = mg._parcelName || '';
                  const shortName = pName.replace(/^Parcel\s*/i, 'P').replace(/^Bloc\s*/i, 'B');
                  const hasAbnormal = mg.metrics.some(m => {
                    const n = parseFloat(String(m.value).replace(/[^0-9.\-]/g, ''));
                    if (isNaN(n)) return false;
                    if (m.label === 'pH') return n < 6.0 || n > 7.0;
                    if (m.label === 'Fertilité') return n < 300 || n > 1100;
                    if (m.label === 'Humidité') return n < 50 || n > 75;
                    if (m.label === 'Temp.') return n < 18 || n > 32;
                    return false;
                  });
                  return (
                    <div key={i} onClick={() => goTo(i)} style={{cursor:"pointer", flexShrink:0, textAlign:"center", transition:"all 0.15s", opacity: i===idx ? 1 : 0.55, display:"flex", flexDirection:"column", justifyContent:"flex-end", alignItems:"center", minHeight:80}}
                      onMouseEnter={e=>{e.currentTarget.style.opacity='1';}}
                      onMouseLeave={e=>{e.currentTarget.style.opacity=i===idx?'1':'0.55';}}>
                      <div style={{width: i===idx ? 64 : 48, height: i===idx ? 64 : 48, borderRadius:6, border: i===idx ? "2.5px solid #fff" : "none", overflow:"hidden", display:"flex", alignItems:"center", justifyContent:"center", boxShadow: i===idx ? "0 4px 14px rgba(0,0,0,0.35)" : "none", transition:"all 0.15s"}}>
                        {mg.photo_url ? (
                          <img src={mg.photo_url} style={{width:"100%", height:"100%", objectFit:"cover", borderRadius: i===idx ? 4 : 5}} />
                        ) : (
                          <div style={{width:"100%", height:"100%", background:"#e2e8f0", display:"flex", alignItems:"center", justifyContent:"center", fontSize:18, borderRadius:5}}>{isSoil ? '🌱' : '🍊'}</div>
                        )}
                      </div>
                      <div style={{fontSize: i===idx ? 12 : 10, color: i===idx ? "#1e293b" : "#64748b", fontWeight: i===idx ? 800 : 600, marginTop:2, whiteSpace:"nowrap", maxWidth:66, overflow:"hidden", textOverflow:"ellipsis", transition:"all 0.15s"}}>{shortName}</div>
                      {hasAbnormal && <div style={{width: i===idx ? 56 : 40, height:3, background:"#DC2626", borderRadius:2, marginTop:2}} />}
                    </div>
                  );
                })}
              </div>
            )}
            </div>
          </div>
        );
      })()}
      {previewImage && (() => {
        const previewUrl = typeof previewImage === 'string' ? previewImage : previewImage.url;
        const pn = typeof previewImage === 'object' ? previewImage : null;
        const gl2 = (f) => { if (!f) return ''; if (typeof f === 'string') return f; return f[lang] || f.fr || f.en || Object.values(f)[0] || ''; };
        const pxCtx = previewCtx || {};
        const pxPhotos = pxCtx.photos || [];
        const curIdx = pn ? (pn._idx || 1) : 1;
        const totalPhotos = pxPhotos.length || 1;

// Navigation helpers
        const goTo = (idx) => {
          if (idx < 1 || idx > pxPhotos.length) return;
          const photo = pxPhotos[idx - 1];
          setPreviewImage({...photo, _date: pxCtx.date, _idx: idx});
          if (previewAudioRef.current) { previewAudioRef.current.pause(); previewAudioRef.current.currentTime = 0; }
        };
        const goPrev = () => goTo(curIdx - 1);
        const goNext = () => goTo(curIdx + 1);

// Build transcription text
        let pTrans = '';
        if (pn && pn.audio_transcription) {
          const tl = pn.audio_transcription.translation;
          pTrans = tl ? gl2(tl) : (pn.audio_transcription.original_transcript || '');
        } else if (pn && pn.note_text) { pTrans = pn.note_text; }

// Build AI insight text — French insight only, skip English description
        let pInsight = '';
        if (pn && pn.ai_insight) {
          const ins = pn.ai_insight.insight;
          if (ins) { pInsight = gl2(ins); }
          if (!pInsight) pInsight = pn.ai_insight.description || '';
        }

// GPS
        const pGPS = (pn && pn.lat && pn.lng) ? (parseFloat(pn.lat).toFixed(5) + ', ' + parseFloat(pn.lng).toFixed(5)) : null;

// Parcel color
        const parcelColors = ['#86efac','#93c5fd','#fde68a','#fca5a5','#c4b5fd','#a5f3fc','#fdba74','#f9a8d4','#d9f99d','#e2e8f0','#99f6e4'];
        const allPolys = (pxCtx.parcels || []).filter(pp => pp.polygon && pp.polygon.length >= 3);
        let parcelColorForName = '#64748b';
        let parcelColorIdx = -1;
        if (pn && pn.parcel_name && allPolys.length) {
          parcelColorIdx = allPolys.findIndex(pp => pp.name === pn.parcel_name);
          if (parcelColorIdx >= 0) parcelColorForName = parcelColors[parcelColorIdx % parcelColors.length];
        }

// Open map zoomed to parcel
        const openParcelMap = () => {
          setPreviewImage(null); setPreviewCtx(null);
          window.__mapFocusParcel = pn.parcel_name;
          setTimeout(() => {
            const mb = document.querySelector('[data-map-btn="' + (pxCtx.msgId || '') + '"]');
            if (mb) mb.click();
          }, 50);
        };

return (
          <div onClick={() => { setPreviewImage(null); setPreviewCtx(null); }} onKeyDown={ev => { if (ev.key === 'ArrowLeft') { ev.preventDefault(); goPrev(); } else if (ev.key === 'ArrowRight') { ev.preventDefault(); goNext(); } else if (ev.key === 'Escape') { setPreviewImage(null); setPreviewCtx(null); } }} tabIndex={0} ref={el => { if (el) el.focus(); }} style={{position:"fixed", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(0,0,0,0.88)", zIndex:9999, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", padding:"16px 70px", outline:"none"}}>
            {/* Left arrow */}
            {pxPhotos.length > 1 && curIdx > 1 && (
              <button onClick={ev => { ev.stopPropagation(); goPrev(); }} style={{position:"fixed", left:16, top:"50%", transform:"translateY(-50%)", background:"rgba(255,255,255,0.12)", color:"#fff", border:"none", borderRadius:"50%", width:44, height:44, cursor:"pointer", fontSize:22, zIndex:10001, backdropFilter:"blur(4px)", transition:"background 0.2s"}} onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.3)'} onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,0.12)'}>←</button>
            )}
            {/* Right arrow */}
            {pxPhotos.length > 1 && curIdx < pxPhotos.length && (
              <button onClick={ev => { ev.stopPropagation(); goNext(); }} style={{position:"fixed", right:16, top:"50%", transform:"translateY(-50%)", background:"rgba(255,255,255,0.12)", color:"#fff", border:"none", borderRadius:"50%", width:44, height:44, cursor:"pointer", fontSize:22, zIndex:10001, backdropFilter:"blur(4px)", transition:"background 0.2s"}} onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.3)'} onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,0.12)'}>→</button>
            )}
            {/* Main content row */}
            <div style={{display:"flex", gap:16, alignItems:"flex-start", maxWidth:"95vw", maxHeight:"82vh"}} onClick={ev => ev.stopPropagation()}>
              {/* LEFT COLUMN: AI + farm mini-map */}
              <div style={{flex:"0 0 270px", display:"flex", flexDirection:"column", gap:10, alignSelf:"flex-start"}}>
                {pInsight && (
                  <div style={{background:"rgba(255,255,255,0.95)", borderRadius:10, padding:14, fontSize:13, lineHeight:"1.6", color:"#1e293b", maxHeight:"40vh", overflowY:"auto"}}>
                    <div style={{fontWeight:700, color:"#0EA5E9", marginBottom:8, fontSize:12}}>🤖 Analyse</div>
                    <div style={{whiteSpace:"pre-wrap"}}>{pInsight}</div>
                  </div>
                )}
                {/* Farm overview mini-map with current photo pin */}
                {allPolys.length > 0 && pn && pn.lat && pn.lng && (
                  <div style={{background:"rgba(255,255,255,0.95)", borderRadius:10, padding:8, overflow:"hidden"}}>
                    <canvas ref={el => {
                      if (!el) return;
                      const cv = el;
                      const W = 254, H = 180;
                      cv.width = W; cv.height = H;
                      const ctx = cv.getContext('2d');
                      ctx.fillStyle = '#f8fafc'; ctx.fillRect(0,0,W,H);
                      // Compute bounds from all parcels
                      let mnLat=Infinity,mxLat=-Infinity,mnLng=Infinity,mxLng=-Infinity;
                      allPolys.forEach(pp => pp.polygon.forEach(p => { mnLat=Math.min(mnLat,p[0]); mxLat=Math.max(mxLat,p[0]); mnLng=Math.min(mnLng,p[1]); mxLng=Math.max(mxLng,p[1]); }));
                      const padLat=(mxLat-mnLat)*0.1||0.0005, padLng=(mxLng-mnLng)*0.1||0.0005;
                      mnLat-=padLat; mxLat+=padLat; mnLng-=padLng; mxLng+=padLng;
                      const toX=lng=>((lng-mnLng)/(mxLng-mnLng))*W;
                      const toY=lat=>H-((lat-mnLat)/(mxLat-mnLat))*H;
                      // Draw all parcels
                      allPolys.forEach((pp,ci) => {
                        const poly=pp.polygon;
                        const isActive = pn.parcel_name && pp.name === pn.parcel_name;
                        ctx.beginPath();
                        poly.forEach((p,j) => { j===0?ctx.moveTo(toX(p[1]),toY(p[0])):ctx.lineTo(toX(p[1]),toY(p[0])); });
                        ctx.closePath();
                        ctx.fillStyle = parcelColors[ci % parcelColors.length] + (isActive ? 'cc' : '55');
                        ctx.fill();
                        ctx.strokeStyle = isActive ? '#1e293b' : '#94a3b8';
                        ctx.lineWidth = isActive ? 2 : 0.8;
                        ctx.stroke();
                        // Label
                        const cx2=poly.reduce((s,p)=>s+toX(p[1]),0)/poly.length;
                        const cy2=poly.reduce((s,p)=>s+toY(p[0]),0)/poly.length;
                        ctx.fillStyle = isActive ? '#1e293b' : '#94a3b8';
                        ctx.font = isActive ? 'bold 10px Helvetica' : '8px Helvetica';
                        ctx.textAlign='center'; ctx.textBaseline='middle';
                        ctx.fillText(pp.name, cx2, cy2);
                      });
                      // Draw current photo pin
                      const lat=parseFloat(pn.lat), lng=parseFloat(pn.lng);
                      if (lat && lng) {
                        const px=toX(lng), py=toY(lat);
                        // Pulsing ring effect
                        ctx.beginPath(); ctx.arc(px,py,16,0,2*Math.PI);
                        ctx.fillStyle='rgba(220,38,38,0.15)'; ctx.fill();
                        // Pin
                        ctx.beginPath(); ctx.arc(px,py,9,0,2*Math.PI);
                        ctx.fillStyle='#dc2626'; ctx.fill();
                        ctx.strokeStyle='#fff'; ctx.lineWidth=2.5; ctx.stroke();
                        ctx.fillStyle='#fff'; ctx.font='bold 9px Helvetica';
                        ctx.textAlign='center'; ctx.textBaseline='middle';
                        ctx.fillText(String(curIdx), px, py);
                      }
                    }} style={{display:"block", width:254, height:180, borderRadius:6}} />
                  </div>
                )}
              </div>
              {/* CENTER: label + photo + transcription */}
              <div style={{position:"relative", textAlign:"center", display:"flex", flexDirection:"column", alignItems:"center", maxHeight:"82vh"}}>
                {/* Label bar on top */}
                <div style={{background:"rgba(255,255,255,0.95)", color:"#1e293b", fontSize:12, padding:"6px 16px", borderRadius:"8px 8px 0 0", width:"100%", display:"flex", alignItems:"center", justifyContent:"center", gap:12, flexWrap:"wrap"}}>
                  <span style={{fontWeight:700}}>{curIdx} / {totalPhotos}</span>
                  <span>{pn && pn._date ? pn._date : ''}{pn && pn.time ? ' ' + pn.time : ''}</span>
                  {pn && pn.parcel_name && <span onClick={ev => { ev.stopPropagation(); openParcelMap(); }} style={{background:parcelColorForName, padding:"1px 8px", borderRadius:10, fontSize:11, fontWeight:600, cursor:"pointer", border:"1px solid rgba(0,0,0,0.15)", transition:"transform 0.1s"}} onMouseEnter={e=>e.currentTarget.style.transform='scale(1.1)'} onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'} title="Ouvrir la carte de cette parcelle">{pn.parcel_name}</span>}
                  {pGPS && <span style={{fontSize:10, color:"#64748b"}}>📍 {pGPS}</span>}
                </div>
                <img className="agro-media" src={previewUrl} style={{maxHeight:"55vh", maxWidth:"50vw", borderRadius:0, backgroundColor:"#fff", display:"block", boxShadow:"0 15px 40px rgba(0,0,0,0.6)"}} />
                <button onClick={() => { setPreviewImage(null); setPreviewCtx(null); }} style={{position:"absolute", top:-8, right:-12, background:"#E74C3C", color:"white", border:"none", borderRadius:"50%", width:30, height:30, cursor:"pointer", fontWeight:"bold", boxShadow:"0 2px 4px rgba(0,0,0,0.2)", zIndex:1}}>X</button>
                {/* Transcription + audio at bottom */}
                {(pTrans || (pn && pn.note_audio_url)) && (
                  <div style={{background:"rgba(255,255,255,0.95)", borderRadius:"0 0 10px 10px", padding:10, maxWidth:"100%", textAlign:"left", width:"100%"}}>
                    <div style={{display:"flex", alignItems:"center", gap:8}}>
                      {pn && pn.note_audio_url && (
                        <button onClick={ev => { ev.stopPropagation(); if (previewAudioRef.current) { if (previewAudioRef.current.paused) previewAudioRef.current.play(); else previewAudioRef.current.pause(); } }} style={{background:"#8B5CF6", color:"#fff", border:"none", borderRadius:"50%", width:30, height:30, cursor:"pointer", fontSize:14, display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0, transition:"transform 0.1s"}} onMouseEnter={e=>e.currentTarget.style.transform='scale(1.15)'} onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'} title="Écouter l'audio original">🎤</button>
                      )}
                      <div style={{flex:1}}>
                        {pTrans && <div style={{fontSize:12, lineHeight:"1.4", color:"#1e293b"}}><span style={{fontWeight:700, color:"#8B5CF6", fontSize:11}}>Transcription: </span>{pTrans}</div>}
                      </div>
                    </div>
                    {pn && pn.note_audio_url && (
                      <audio ref={previewAudioRef} key={pn.note_audio_url} src={pn.note_audio_url} style={{width:"100%", marginTop:4, height:26}} controls onClick={ev => ev.stopPropagation()} />
                    )}
                  </div>
                )}
              </div>
            </div>
            {/* Thumbnail filmstrip at bottom */}
            {pxPhotos.length > 1 && (
              <div onClick={ev => ev.stopPropagation()} style={{display:"flex", gap:4, alignItems:"center", justifyContent:"center", marginTop:12, maxWidth:"90vw", overflowX:"auto", padding:"6px 12px", background:"rgba(0,0,0,0.4)", borderRadius:10, backdropFilter:"blur(4px)"}}>
                {pxPhotos.map((ph, i) => (
                  <img key={i} src={ph.url} onClick={() => goTo(i+1)} style={{width:40, height:40, objectFit:"cover", borderRadius:4, cursor:"pointer", border: (i+1)===curIdx ? "2px solid #fff" : "2px solid transparent", opacity: (i+1)===curIdx ? 1 : 0.5, transition:"all 0.15s", flexShrink:0}} onMouseEnter={e=>{e.currentTarget.style.opacity='1';e.currentTarget.style.transform='scale(1.15)';}} onMouseLeave={e=>{e.currentTarget.style.opacity=(i+1)===curIdx?'1':'0.5';e.currentTarget.style.transform='scale(1)';}} />
                ))}
              </div>
            )}
          </div>
        );
      })()}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>📡 {tx("messages",lang)}</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <input type="file" ref={fileRef} accept="audio/*" style={{ display:"none" }} onChange={e => { if(e.target.files[0]) setAudioFile(e.target.files[0]); e.target.value=""; }} />
          <Btn onClick={() => fileRef.current.click()} color={C.olive} outline>🎙️ Audio IA</Btn>
          <Btn onClick={openNew} color={C.info}>+ Nouveau message</Btn>
        </div>
      </div>

<div style={{ display:"flex", gap:10, flexWrap:"wrap", alignItems:"center", marginBottom:16 }}>
        <div style={{ display:"flex", flex:1, minWidth:250, background: search ? "#FFFBEB" : "#fff", borderRadius:20, padding:"4px 12px", border: search ? `2px solid ${C.citrus}` : "1px solid #DDD6C8", alignItems:"center", transition:"all 0.2s" }}>
          <span style={{ fontSize:16, color:C.muted, marginRight:8 }}>🔍</span>
          <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Rechercher (ex: navel, ouvrier, Brahim...)" style={{ flex:1, border:"none", background:"transparent", outline:"none", fontSize:13, color:C.soil }} />
          {search && (
            <button onClick={() => setSearch("")} style={{ background:C.citrus, border:"none", color:"#fff", cursor:"pointer", fontSize:11, fontWeight:700, padding:"3px 10px", borderRadius:12, marginLeft:4, whiteSpace:"nowrap" }} title="Effacer la recherche">✕ Effacer</button>
          )}
          <button onClick={isRecording==="recording" ? stopVoiceSearch : startVoiceSearch} disabled={isRecording==="processing"} style={{ background: isRecording==="recording" ? C.danger : "transparent", color: isRecording==="recording" ? "#fff" : C.info, border:"none", borderRadius:12, width:28, height:28, cursor:isRecording==="processing"?"not-allowed":"pointer", fontSize:14, display:"flex", alignItems:"center", justifyContent:"center", marginLeft:4 }}>
            {isRecording==="processing" ? "⏳" : "🎤"}
          </button>
        </div>

<select value={filterSender} onChange={e=>setFilter(e.target.value)} style={{ border: filterSender!=="all" ? `2px solid ${C.citrus}` : "1px solid #DDD6C8", borderRadius:20, padding:"7px 12px", fontSize:12, color:C.soil, background: filterSender!=="all" ? "#FFFBEB" : "#fff", outline:"none" }}>
          <option value="all">Tous les expéditeurs</option>
          {[...new Set(messages.map(m=>m.sender).filter(Boolean))].sort().map(s => <option key={s} value={s}>{s}</option>)}
        </select>
        {filterSender !== "all" && (
          <button onClick={() => setFilter("all")} style={{ background:C.citrus, border:"none", color:"#fff", cursor:"pointer", fontSize:11, fontWeight:700, padding:"5px 10px", borderRadius:12 }}>✕</button>
        )}

{/* Date range filter */}
        <div style={{ display:"flex", alignItems:"center", gap:4, background: (filterDateFrom||filterDateTo) ? "#FFFBEB" : "#fff", border: (filterDateFrom||filterDateTo) ? `2px solid ${C.citrus}` : "1px solid #DDD6C8", borderRadius:20, padding:"3px 10px" }}>
          <span style={{ fontSize:11, color:C.muted, whiteSpace:"nowrap" }}>Du</span>
          <input type="date" value={filterDateFrom} onChange={e=>setFilterDateFrom(e.target.value)}
            style={{ border:"none", background:"transparent", outline:"none", fontSize:12, color:C.soil, cursor:"pointer" }} />
          <span style={{ fontSize:11, color:C.muted, whiteSpace:"nowrap" }}>au</span>
          <input type="date" value={filterDateTo} onChange={e=>setFilterDateTo(e.target.value)}
            style={{ border:"none", background:"transparent", outline:"none", fontSize:12, color:C.soil, cursor:"pointer" }} />
          {(filterDateFrom||filterDateTo) && (
            <button onClick={() => { setFilterDateFrom(""); setFilterDateTo(""); }} style={{ background:C.citrus, border:"none", color:"#fff", cursor:"pointer", fontSize:10, fontWeight:700, padding:"2px 8px", borderRadius:10, marginLeft:2 }}>✕</button>
          )}
        </div>

<div style={{ display:"flex", background:"#fff", borderRadius:20, border:"1px solid #DDD6C8", overflow:"hidden" }}>
          <button onClick={()=>setFilterA("all")} style={{ padding:"7px 12px", border:"none", background:filterAction==="all"?"#F5F0E8":"transparent", color:filterAction==="all"?C.soil:C.muted, fontSize:12, cursor:"pointer", fontWeight:filterAction==="all"?700:400 }}>Tout</button>
          <button onClick={()=>setFilterA("pending")} style={{ padding:"7px 12px", border:"none", background:filterAction==="pending"?"#FDECEA":"transparent", color:filterAction==="pending"?C.danger:C.muted, fontSize:12, cursor:"pointer", fontWeight:filterAction==="pending"?700:400 }}>Action requise</button>
          <button onClick={()=>setFilterA("done")} style={{ padding:"7px 12px", border:"none", background:filterAction==="done"?"#EAF4EC":"transparent", color:filterAction==="done"?C.success:C.muted, fontSize:12, cursor:"pointer", fontWeight:filterAction==="done"?700:400 }}>Traités</button>
        </div>
      </div>
      
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
        <div style={{ fontSize:12, color:C.muted }}>{filtered.length} message(s) trouvé(s)</div>
        {selectedIds.length > 0 && (
          <div style={{ fontSize:12, color:C.muted }}>{selectedIds.length} sélectionné(s)</div>
        )}
      </div>

{/* Floating bulk-action bar — appears at bottom of viewport when items are selected */}
      {selectedIds.length > 0 && (
        <div style={{ position:"fixed", bottom:24, left:"50%", transform:"translateX(-50%)", zIndex:9999, display:"flex", alignItems:"center", gap:12, background:C.soil, borderRadius:30, padding:"10px 20px", boxShadow:"0 6px 24px rgba(0,0,0,0.35)" }}>
          <span style={{ color:"#fff", fontSize:13, fontWeight:700 }}>{selectedIds.length} message{selectedIds.length>1?'s':''} sélectionné{selectedIds.length>1?'s':''}</span>
          <button onClick={() => setSelectedIds([])} style={{ background:"rgba(255,255,255,0.15)", border:"none", color:"#fff", borderRadius:20, padding:"5px 14px", fontSize:12, fontWeight:600, cursor:"pointer" }}>✕ Désélectionner</button>
          <button onClick={() => { if(window.confirm(`Supprimer ${selectedIds.length} message(s) définitivement ?`)) { withScrollPreserved(() => db.deleteMessages(selectedIds)); setSelectedIds([]); } }} style={{ background:C.danger, border:"none", color:"#fff", borderRadius:20, padding:"6px 18px", fontSize:12, fontWeight:700, cursor:"pointer" }}>🗑 Supprimer ({selectedIds.length})</button>
        </div>
      )}

<div style={{ display:"grid", gap:12 }}>
        {(() => {
          const PAGE_SIZE = 15;
          const todayDate = new Date().toISOString().slice(0,10);
          const yesterdayDate = new Date(Date.now() + 3600000 - 86400000).toISOString().slice(0,10); // Morocco TZ

// Sort newest first
          const sorted = [...filtered].sort((a,b) => {
            const tA = new Date(a.created_at || a.date).getTime();
            const tB = new Date(b.created_at || b.date).getTime();
            return tB - tA;
          });

// Use m.date (Morocco local date from tablet) when available; fall back to created_at in Morocco TZ
          const getMsgDate = m => { try { if (m.date && /^\d{4}-\d{2}-\d{2}/.test(m.date)) return m.date.slice(0,10); const d = new Date(new Date(m.created_at).getTime() + 3600000).toISOString().slice(0,10); return isNaN(new Date(d).getTime()) ? "" : d; } catch(e) { return ""; } };

const recentMsgs = sorted.filter(m => { const d = getMsgDate(m); return d >= yesterdayDate; });
          const olderMsgs  = sorted.filter(m => { const d = getMsgDate(m); return d < yesterdayDate; });

const recentTotalPages = Math.max(1, Math.ceil(recentMsgs.length / PAGE_SIZE));
          const olderTotalPages  = Math.max(1, Math.ceil(olderMsgs.length  / PAGE_SIZE));
          const recentVisible = recentMsgs.slice(recentPage * PAGE_SIZE, (recentPage + 1) * PAGE_SIZE);
          const olderVisible  = olderMsgs.slice(olderPage  * PAGE_SIZE, (olderPage  + 1) * PAGE_SIZE);

const PagerBar = ({ page, totalPages, setPage }) => totalPages <= 1 ? null : (
            <div style={{ display:"flex", justifyContent:"center", gap:8, marginTop:16, alignItems:"center" }}>
              <button onClick={() => setPage(p => Math.max(0, p-1))} disabled={page === 0}
                style={{ padding:"4px 14px", borderRadius:20, border:"1px solid #DDD6C8", background:"#fff", cursor:page===0?"not-allowed":"pointer", color:page===0?C.muted:C.soil, fontSize:12 }}>← Précédent</button>
              <span style={{ fontSize:12, color:C.muted }}>Page {page+1} / {totalPages}</span>
              <button onClick={() => setPage(p => Math.min(totalPages-1, p+1))} disabled={page === totalPages-1}
                style={{ padding:"4px 14px", borderRadius:20, border:"1px solid #DDD6C8", background:"#fff", cursor:page===totalPages-1?"not-allowed":"pointer", color:page===totalPages-1?C.muted:C.soil, fontSize:12 }}>Suivant →</button>
            </div>
          );

// Group ALL fertigation_bundle messages from the same day into one card (not just consecutive)
          const groupMsgs = msgs => {
            const fertigByDate = {};
            const others = [];
            const fertigDateOrder = [];
            msgs.forEach(m => {
              if (m.media_type === "fertigation_bundle") {
                const d = getMsgDate(m);
                if (!fertigByDate[d]) { fertigByDate[d] = []; fertigDateOrder.push(d); }
                fertigByDate[d].push(m);
              } else { others.push(m); }
            });
            // Insert each day's fertigation group at the position of its earliest message, interleaved with others
            const result = [];
            const insertedDates = {};
            const allSorted = msgs.slice();
            allSorted.forEach(m => {
              if (m.media_type === "fertigation_bundle") {
                const d = getMsgDate(m);
                if (!insertedDates[d]) { insertedDates[d] = true; result.push({ isFertig:true, msgs: fertigByDate[d] }); }
              } else { result.push({ isFertig:false, msg:m }); }
            });
            return result;
          };

const renderGrouped = (msgs) => groupMsgs(msgs).map((item, i) =>
            item.isFertig
              ? <FertigGroupCard key={"fg-"+(item.msgs[0] && item.msgs[0].id)+"-"+i} msgs={item.msgs} lang={lang} setPreviewImage={setPreviewImage} setPreviewMeas={setPreviewMeas} parcels={data.parcels} />
              : <MsgCard key={item.msg.id} m={item.msg} lang={lang} setPreviewImage={setPreviewImage} setPreviewMeas={setPreviewMeas} parcels={data.parcels} />
          );

return (
            <>
              {/* ── Recent: today + yesterday ── */}
              {recentMsgs.length > 0 && (
                <div>
                  <div style={{ display:"flex", alignItems:"center", gap:10, margin:"0 0 16px 0" }}>
                    <div style={{ padding:"6px 14px", background:"#DCFCE7", color:"#166534", fontSize:13, fontWeight:"bold", borderRadius:20 }}>📅 Aujourd'hui & Hier</div>
                    <div style={{ fontSize:12, color:C.muted }}>{recentMsgs.length} message(s)</div>
                    <div style={{ flex:1, height:1, background:"#E2E8F0" }}/>
                  </div>
                  {renderGrouped(recentVisible)}
                  <PagerBar page={recentPage} totalPages={recentTotalPages} setPage={p => { setRecentPage(p); }} />
                </div>
              )}

{/* ── Older: collapsed by default, paginated ── */}
              {olderMsgs.length > 0 && (
                <div style={{ marginTop: recentMsgs.length > 0 ? 28 : 0 }}>
                  <div style={{ display:"flex", alignItems:"center", gap:10, margin:"0 0 12px 0", cursor:"pointer", userSelect:"none" }}
                       onClick={() => setShowOlder(v => !v)}>
                    <div style={{ padding:"6px 14px", background:"#E2E8F0", color:"#334155", fontSize:13, fontWeight:"bold", borderRadius:20 }}>
                      {showOlder ? "▼" : "▶"} Messages antérieurs
                    </div>
                    <div style={{ fontSize:12, color:C.muted }}>{olderMsgs.length} message(s)</div>
                    <div style={{ flex:1, height:1, background:"#E2E8F0" }}/>
                  </div>
                  {showOlder && (
                    <>
                      {Object.entries(groupByMonth(olderVisible)).map(([month, msgs]) => (
                        <div key={month}>
                          <div style={{ display:"flex", alignItems:"center", gap:10, margin:"20px 0 12px 0" }}>
                            <div style={{ padding:"4px 12px", background:"#F1F5F9", color:"#475569", fontSize:12, fontWeight:"bold", borderRadius:20 }}>📅 {month}</div>
                            <div style={{ flex:1, height:1, background:"#E2E8F0" }}/>
                          </div>
                          {renderGrouped(msgs)}
                        </div>
                      ))}
                      <PagerBar page={olderPage} totalPages={olderTotalPages} setPage={p => { setOlderPage(p); }} />
                    </>
                  )}
                </div>
              )}

{filtered.length === 0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucun message trouvé.</p>}
            </>
          );
        })()}
      </div>

{modal && (
        <Modal title="Nouveau message" onClose={()=>setModal(false)} rtl={rtl}>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Date" value={form.date} onChange={v=>setForm(f=>({...f,date:v}))} type="date" rtl={rtl}/>
            <FInput label="Expéditeur" value={form.sender} onChange={v=>setForm(f=>({...f,sender:v}))} options={SENDERS.map(s=>s.id)} optionLabels={SENDERS.map(s=>s.label)} rtl={rtl}/>
          </div>
          <FInput label="Résumé" value={form.summary} onChange={v=>setForm(f=>({...f,summary:v}))} rtl={rtl}/>
          
          <div style={{ display:"flex", alignItems:"center", gap:10, margin:"14px 0" }}>
            <label style={{ fontSize:12, fontWeight:700, color:C.muted, textTransform:"uppercase" }}>Action requise ?</label>
            <input type="checkbox" checked={form.actionRequired} onChange={e=>setForm(f=>({...f,actionRequired:e.target.checked}))} style={{ transform:"scale(1.2)", cursor:"pointer" }} />
          </div>

<FInput label="Tags (séparés par virgule)" value={form.tags} onChange={v=>setForm(f=>({...f,tags:v}))} rtl={rtl}/>
          <FInput label="Notes" value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
          
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end", marginTop:16 }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>Annuler</Btn>
            <Btn onClick={save} color={C.info}>💾 Enregistrer</Btn>
          </div>
        </Modal>
      )}

{audioFile && (
        <Modal title="🎙️ Transcription Audio IA" onClose={()=>setAudioFile(null)} rtl={rtl}>
          <div style={{ marginBottom:14, fontSize:13, color:C.soil }}>
            Fichier sélectionné : <strong>{audioFile.name}</strong>
          </div>
          {transcribing ? (
            <div style={{ textAlign:"center", padding:20, color:C.olive }}>
              <div className="sp"></div>
              <div style={{ fontWeight:700 }}>Transcription Gemini en cours...</div>
              <div style={{ fontSize:11, color:C.muted, marginTop:4 }}>Veuillez patienter quelques secondes.</div>
            </div>
          ) : (
            <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
              <Btn outline onClick={()=>setAudioFile(null)} color={C.muted}>Annuler</Btn>
              <Btn onClick={transcribeAudio} color={C.olive}>✨ Transcrire & Résumer</Btn>
            </div>
          )}
        </Modal>
      )}
    </div>
  );
}

// ── Fertigation Live Panel ────────────────────────────────────────────────────
// Parse today's fertigation_bundle messages into a blocName→{timeStr,submittedAt,ingredients} map
function parseFertigMsgs(messages, dateStr) {
  const doneMap = {};
  (messages||[]).filter(m=>m.media_type==="fertigation_bundle" && m.date===dateStr).forEach(m=>{
    try {
      const c = typeof m.content==="string" ? JSON.parse(m.content) : m.content;
      (c.blocs||[]).forEach(b=>{
        if (!doneMap[b] || (c.time > (doneMap[b].timeStr||""))) {
          doneMap[b] = { timeStr:c.time||"", submittedAt:m.created_at, ingredients:c.ingredients||[] };
        }
      });
    } catch(e) {}
  });
  return doneMap;
}

// Dual analog clock (Morocco + Portland) with weather — separate component so it can use hooks
function FarmClock() {
  var ts = useState(new Date()); var time = ts[0]; var setTime = ts[1];
  var ws = useState(null); var weather = ws[0]; var setWeather = ws[1];

useEffect(function() {
    var t = setInterval(function() { setTime(new Date()); }, 1000);
    return function() { clearInterval(t); };
  }, []);

useEffect(function() {
    // Berkane, Morocco: 34.92°N, 2.32°W
    fetch("https://api.open-meteo.com/v1/forecast?latitude=34.92&longitude=-2.32¤t=temperature_2m,weathercode&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=Africa%2FCasablanca&forecast_days=2")
      .then(function(r){ return r.json(); })
      .then(function(d){ setWeather(d); })
      .catch(function(){});
  }, []);

function wmoEmoji(code) {
    if (code == null) return "—";
    if (code === 0) return "☀️";
    if (code <= 3) return "⛅";
    if (code <= 48) return "🌫️";
    if (code <= 67) return "🌧️";
    if (code <= 82) return "🌦️";
    return "⛈️";
  }

var morocco = getZoneTime('Africa/Casablanca');
  var portland = getZoneTime('America/Los_Angeles');
  var mStr = morocco.h.toString().padStart(2,"0") + ":" + morocco.m.toString().padStart(2,"0");
  var pStr = portland.h.toString().padStart(2,"0") + ":" + portland.m.toString().padStart(2,"0");

var curTemp = weather && weather.current ? Math.round(weather.current.temperature_2m) : null;
  var curCode = weather && weather.current ? weather.current.weathercode : null;
  var todayMax = weather && weather.daily ? Math.round(weather.daily.temperature_2m_max[0]) : null;
  var todayMin = weather && weather.daily ? Math.round(weather.daily.temperature_2m_min[0]) : null;
  var tmrCode  = weather && weather.daily ? weather.daily.weathercode[1] : null;
  var tmrMax   = weather && weather.daily ? Math.round(weather.daily.temperature_2m_max[1]) : null;
  var tmrMin   = weather && weather.daily ? Math.round(weather.daily.temperature_2m_min[1]) : null;

return (
    <div style={{ display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"space-between",
                  height:"100%", background:"#1E1E1E", borderRadius:10, padding:"10px 6px" }}>
      {/* Two clocks */}
      <div style={{ display:"flex", gap:10, justifyContent:"center", width:"100%" }}>
        <div style={{ display:"flex", flexDirection:"column", alignItems:"center" }}>
          <div style={{ fontSize:9, color:"#AAA", marginBottom:3, letterSpacing:1 }}>🇲🇦 MAROC</div>
          {renderClock(morocco)}
          <div style={{ fontFamily:"monospace", fontSize:13, fontWeight:700, color:"white", letterSpacing:2, marginTop:4 }}>{mStr}</div>
        </div>
        <div style={{ display:"flex", flexDirection:"column", alignItems:"center" }}>
          <div style={{ fontSize:9, color:"#AAA", marginBottom:3, letterSpacing:1 }}>🇺🇸 PORTLAND</div>
          {renderClock(portland)}
          <div style={{ fontFamily:"monospace", fontSize:13, fontWeight:700, color:"#60A5FA", letterSpacing:2, marginTop:4 }}>{pStr}</div>
        </div>
      </div>
      {/* Weather */}
      <div style={{ width:"100%", marginTop:8 }}>
        {curTemp !== null ? (
          <div style={{ display:"flex", justifyContent:"space-around", alignItems:"center" }}>
            <div style={{ textAlign:"center" }}>
              <div style={{ fontSize:9, color:"#888" }}>Auj.</div>
              <div style={{ fontSize:18, lineHeight:1.2 }}>{wmoEmoji(curCode)}</div>
              <div style={{ fontSize:12, color:"#EEE", fontWeight:700 }}>{curTemp}°C</div>
              <div style={{ fontSize:9, color:"#777" }}>{todayMin}–{todayMax}°</div>
            </div>
            <div style={{ width:1, height:50, background:"#444" }}/>
            <div style={{ textAlign:"center" }}>
              <div style={{ fontSize:9, color:"#888" }}>Demain</div>
              <div style={{ fontSize:18, lineHeight:1.2 }}>{wmoEmoji(tmrCode)}</div>
              <div style={{ fontSize:12, color:"#EEE", fontWeight:700 }}>{tmrMax}°C</div>
              <div style={{ fontSize:9, color:"#777" }}>{tmrMin}–{tmrMax}°</div>
            </div>
          </div>
        ) : (
          <div style={{ fontSize:9, color:"#555", textAlign:"center" }}>Chargement météo…</div>
        )}
      </div>
    </div>
  );
}

function isRecent(entry) {
    return entry && entry.submittedAt && (now - new Date(entry.submittedAt).getTime()) < 90*60*1000;
  }

// Bloc names in Supabase include variety: "Bloc 9 – Navel". Match by prefix.
  function findEntry(blocBase) {
    if (doneMap[blocBase]) return doneMap[blocBase];
    var keys = Object.keys(doneMap);
    for (var i=0; i<keys.length; i++) {
      if (keys[i] === blocBase || keys[i].indexOf(blocBase+" ") === 0 || keys[i].indexOf(blocBase+"–") === 0 || keys[i].indexOf(blocBase+" –") === 0) {
        return doneMap[keys[i]];
      }
    }
    return undefined;
  }

var BLOCS = ["Bloc 1","Bloc 2","Bloc 3","Bloc 4","Bloc 5","Bloc 6","Bloc 7","Bloc 8","Bloc 9","Bloc 10","Bloc 11"];
  var doneCount = BLOCS.filter(function(n){ return !!findEntry(n); }).length;
  var total = BLOCS.length;
  var pct = total ? Math.round(doneCount/total*100) : 0;
  var allDone = doneCount >= total && total > 0;

// Render a single bloc cell
  function bloc(name, gc, gr) {
    var entry = findEntry(name);
    var done = !!entry;
    var hot = isRecent(entry);
    var num = (name.match(/\d+/) || [name])[0];
    var variety = (zoneInfo[name] && zoneInfo[name].variety) || "";
    return (
      <div key={name} style={{
        gridColumn: gc, gridRow: gr,
        background: done ? (hot ? "#FEF3E2" : "#EEF5E4") : "#F5F3EE",
        border: "2px solid " + (done ? (hot ? C.warning : C.success) : "#DDD8CF"),
        borderRadius: 8, padding: "4px 2px", textAlign: "center",
        animation: hot ? "fertiPulse 2s infinite" : "none",
      }}>
        <div style={{ fontWeight:700, fontSize:11, color: done ? C.soil : C.muted }}>B{num}</div>
        <div style={{ fontSize:8, color:C.muted, marginTop:1 }}>{variety.slice(0,8)}</div>
        <div style={{ fontSize:9, marginTop:2, fontWeight:600, color: done ? (hot ? C.warning : C.success) : "#BBB" }}>
          {done ? (hot ? "🟡" : "✅ "+(entry.timeStr||"")) : "⏳"}
        </div>
      </div>
    );
  }

return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:8 }}>
        <h3 style={{ margin:0, color:C.soil, fontFamily:"'Playfair Display',serif", fontSize:14 }}>💧 Fertigation du Jour</h3>
        <span style={{ fontSize:11, fontWeight:700, color: allDone ? C.success : C.warning }}>
          {allDone ? "✅ Complet" : doneCount+"/"+total+" blocs"}
        </span>
      </div>
      <div style={{ height:5, background:"#EEE", borderRadius:3, marginBottom:10 }}>
        <div style={{ width:pct+"%", height:"100%", background: allDone ? C.success : C.leaf, borderRadius:3, transition:"width 0.6s" }}/>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gridTemplateRows:"repeat(6,auto)", gap:6 }}>
        {bloc("Bloc 1",   "1", "1")}
        {bloc("Bloc 2",   "2", "1")}
        {/* Clock spans cols 3-4, rows 1-4 (extended for dual clock + weather) */}
        <div style={{ gridColumn:"3/5", gridRow:"1/5" }}><FarmClock/></div>
        {/* PICHOLINE row */}
        <div style={{ gridColumn:"1/3", gridRow:"2", background:"#F5F0E8", border:"2px solid #C8A96A",
                      borderRadius:10, padding:"4px 6px", textAlign:"center" }}>
          <div style={{ fontWeight:700, fontSize:11, color:"#7A5C1E" }}>🫒 PICHOLINE</div>
          <div style={{ fontSize:9, color:"#A08040" }}>زيتون حوزية</div>
        </div>
        {bloc("Bloc 3",   "1", "3")}
        {bloc("Bloc 8",   "2", "3")}
        {bloc("Bloc 4",   "1", "4")}
        {bloc("Bloc 7",   "2", "4")}
        {bloc("Bloc 5",   "1", "5")}
        {bloc("Bloc 6",   "2", "5")}
        {bloc("Bloc 10",  "3", "5")}
        {bloc("Bloc 11",  "4", "5")}
        {bloc("Bloc 9", "3/5", "6")}
      </div>
    </div>
  );
}

// ── Fertigation History (6-month compressed view) ─────────────────────────────
function FertigationHistory({ history }) {
  // Group by date
  const byDate = {};
  (history||[]).forEach(r=>{ if(!byDate[r.date]) byDate[r.date]=[]; byDate[r.date].push(r); });
  const dates = Object.keys(byDate).sort().reverse();
  if (dates.length === 0) return <div style={{ color:C.muted, fontSize:13, textAlign:"center", padding:24 }}>Aucun historique disponible</div>;

// Compute a "signature" for each date to detect identical consecutive days
  const sig = (rows) => JSON.stringify(rows.map(r=>({ b:r.blocName, i:(r.ingredients||[]).map(x=>x.name+x.amount).sort().join(",") })).sort((a,b)=>a.b.localeCompare(b.b)));

// Build compressed runs (oldest→newest, then reverse for display)
  const sorted = [...dates].reverse();
  const runs = [];
  let run = null;
  for (const d of sorted) {
    const s = sig(byDate[d]);
    if (run && run.sig === s) { run.end = d; run.count++; }
    else { if(run) runs.push(run); run = { start:d, end:d, sig:s, data:byDate[d], count:1 }; }
  }
  if (run) runs.push(run);
  runs.reverse(); // newest first

return (
    <div style={{ display:"grid", gap:10 }}>
      {runs.map((r,i)=>{
        const label = r.start===r.end ? r.start : `${r.start.slice(5)} → ${r.end.slice(5)}`;
        const doneCount = r.data.length;
        return (
          <Card key={i} style={{ padding:"12px 16px" }}>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:8 }}>
              <div>
                <span style={{ fontWeight:700, fontSize:13, color:C.soil }}>{label}</span>
                {r.count > 1 && <span style={{ marginLeft:8, fontSize:10, background:C.sand, color:C.bark, borderRadius:10, padding:"2px 8px", fontWeight:700 }}>×{r.count} jours identiques</span>}
              </div>
              <span style={{ fontSize:11, color:C.muted }}>{doneCount} blocs</span>
            </div>
            <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
              {r.data.map(row=>(
                <span key={row.blocName} style={{ fontSize:11, background:"#EEF5E4", color:C.leaf, borderRadius:8, padding:"3px 10px", fontWeight:600 }}>
                  ✅ {row.blocName.split("–")[0].trim()}
                  {row.timeStr ? " · "+row.timeStr : ""}
                </span>
              ))}
            </div>
            {r.data[0]?.ingredients?.length > 0 && (
              <div style={{ marginTop:8, fontSize:10, color:C.muted, borderTop:"1px solid #EEE", paddingTop:6 }}>
                {(r.data[0].ingredients||[]).map(x=>`${x.name}: ${x.amount} ${x.unit||"kg"}`).join(" · ")}
              </div>
            )}
          </Card>
        );
      })}
    </div>
  );
}

// ── Fertigation ───────────────────────────────────────────────────────────────
function FertigationView({ data, db, lang }) {
  const [tab, setTab] = useState("today");
  const [sessionModal, setSessionModal] = useState(false);
  const [recipeModal, setRecipeModal] = useState(false);
  const [form, setForm] = useState({});
  const rtl = lang==="ar";

// ── Intelligence tab state ──
  const [fertigQuery, setFertigQuery] = useState("");
  const [fertigAnswer, setFertigAnswer] = useState("");
  const [fertigThinking, setFertigThinking] = useState(false);
  const [fertigTranscription, setFertigTranscription] = useState("");
  const [fertigTranslation, setFertigTranslation] = useState("");
  const [fertigTtsFr, setFertigTtsFr] = useState("");
  const [fertigTtsEn, setFertigTtsEn] = useState("");
  const [fertigTtsAr, setFertigTtsAr] = useState("");
  const [fertigRecording, setFertigRecording] = useState(false);
  const fertigMediaRef = useRef(null);
  const fertigChunksRef = useRef([]);
  const [rollupMonth, setRollupMonth] = useState(() => {
    const now = new Date(); return now.getFullYear()+"-"+(""+(now.getMonth()+1)).padStart(2,"0");
  });
  const [blocDetailExpanded, setBlocDetailExpanded] = useState(false);

const recipes   = data.fertigationRecipes  || [];
  const sessions  = data.fertigationSessions || [];
  const workers   = data.workers || [];
  const today     = new Date().toISOString().slice(0,10);

// Get active recipe for a variety
  const activeRecipe = (variety) => recipes.find(r=>r.variety===variety && r.active);
  const navelRec    = activeRecipe("Navel");
  const valenciaRec = activeRecipe("Valencia");

// Today's session
  const todaySessions = sessions.filter(s=>s.date===today);
  const navelDone     = todaySessions.find(s=>s.recipeId===navelRec?.id);
  const valenciaDone  = todaySessions.find(s=>s.recipeId===valenciaRec?.id);

// Bloc name helper
  const blocName = (id) => { const z = (data.zones||[]).find(z=>z.id===id); return z ? z.name.split("–")[0].trim() : id; };
  const workerName = (id) => { const w = workers.find(w=>w.id===id); return w ? w.name.split(" ")[0] : id; };

// Save session
  const saveSession = () => {
    const recipe = recipes.find(r=>r.id===form.recipeId);
    if (!recipe) return;
    const totalQtys = {};
    (recipe.products||[]).forEach(p=>{ totalQtys[p.fertilizerId] = (p.dosePerSession||0); });
    db.addFertigationSession({ ...form, treated: form.treated !== false });
    // deduct stock for each product
    Object.entries(totalQtys).forEach(([fid, qty]) => {
      if (qty > 0) db.deductFertStock(fid, qty);
    });
    setSessionModal(false);
  };

const TabBtn = ({id, label}) => (
    <button onClick={()=>setTab(id)} style={{ padding:"7px 16px", borderRadius:20, border:"none", cursor:"pointer", fontSize:12, fontWeight:tab===id?700:400, background:tab===id?C.leaf:"transparent", color:tab===id?"#fff":C.muted }}>
      {label}
    </button>
  );

// Recipe card
  const RecipeCard = ({recipe, done}) => {
    if (!recipe) return null;
    const variety = recipe.variety;
    const color   = variety==="Navel" ? C.citrus : C.leaf;
    return (
      <Card style={{ padding:20, borderLeft:"4px solid " + color, marginBottom:14 }}>
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:12 }}>
          <div>
            <div style={{ fontWeight:700, fontSize:15, color:C.soil }}>{variety === "Navel" ? "🍊" : "🟡"} {recipe.name}</div>
            <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>Blocs: {(recipe.blocs||[]).map(blocName).join(", ")}</div>
          </div>
          {done
            ? <span style={{ background:"#EEF5E4", color:C.success, padding:"4px 12px", borderRadius:20, fontSize:11, fontWeight:700 }}>✓ Fait aujourd'hui</span>
            : <Btn onClick={()=>{ setForm({ recipeId:recipe.id, date:today, treated:true, operatorId:"w3", notes:"", blocTimings:[] }); setSessionModal(true); }} color={color} small>+ Enregistrer</Btn>
          }
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(140px,1fr))", gap:8 }}>
          {(recipe.products||[]).map(p=>{
            const fert = (data.fertilizers||[]).find(f=>f.id===p.fertilizerId);
            const stock = fert ? fert.stockQty : 0;
            const low   = fert && stock < (fert.minStock||0)*3;
            return (
              <div key={p.fertilizerId} style={{ background: low ? "#FEF3E2" : C.cream, borderRadius:8, padding:"8px 12px", border: low ? "1px solid " + C.warning : "none" }}>
                <div style={{ fontSize:10, color:C.muted, marginBottom:2 }}>{p.name}</div>
                <div style={{ fontWeight:700, fontSize:16, color:C.soil }}>{p.dosePerSession} <span style={{ fontSize:11, fontWeight:400 }}>{p.unit}/session</span></div>
                <div style={{ fontSize:10, color: low ? C.warning : C.muted, marginTop:2 }}>Stock: {(stock||0).toLocaleString()} {p.unit}{low ? " ⚠️" : ""}</div>
              </div>
            );
          })}
        </div>
        {done && (
          <div style={{ marginTop:10, fontSize:11, color:C.muted, borderTop:"1px solid #EEE", paddingTop:8 }}>
            ✓ Opérateur: {workerName(done.operatorId)} · {done.notes||""}
          </div>
        )}
      </Card>
    );
  };

return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>💧 {tx("fertigation",lang)}</SectionTitle>
      </div>

{/* Tabs */}
      <div style={{ display:"flex", gap:6, marginBottom:18, background:"#F0EBE3", borderRadius:24, padding:4, width:"fit-content" }}>
        <TabBtn id="today"   label="Aujourd'hui"/>
        <TabBtn id="live"    label="🔴 Live Blocs"/>
        <TabBtn id="history6" label="6 Mois"/>
        <TabBtn id="intelligence" label="🧠 Intelligence"/>
        <TabBtn id="history" label="Historique"/>
        <TabBtn id="recipes" label="Recettes"/>
      </div>

{/* TODAY TAB */}
      {tab==="today" && (
        <div>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))", gap:12, marginBottom:20 }}>
            <Stat label="Sessions ce mois" value={sessions.filter(s=>s.date?.startsWith(today.slice(0,7))).length} color={C.leaf}/>
            <Stat label="Aujourd'hui" value={todaySessions.length > 0 ? "✓ Fait" : "En attente"} color={todaySessions.length > 0 ? C.success : C.warning}/>
            <Stat label="Ammonitrate" value={((data.fertilizers||[]).find(f=>f.id==="f1")?.stockQty||0).toLocaleString() + " kg"} color={C.bark}/>
          </div>

<div style={{ fontWeight:700, fontSize:13, color:C.muted, marginBottom:10, textTransform:"uppercase", letterSpacing:"0.05em" }}>Recettes actives — {today}</div>
          <RecipeCard recipe={navelRec}    done={navelDone}/>
          <RecipeCard recipe={valenciaRec} done={valenciaDone}/>
        </div>
      )}

{/* LIVE BLOCS TAB */}
      {tab==="live" && (
        <Card>
          <FertigationLivePanel zones={data.zones||[]} messages={data.messages||[]} compact={false}/>
        </Card>
      )}

{/* 6-MONTH HISTORY TAB */}
      {tab==="history6" && (
        <div>
          <div style={{ marginBottom:14, fontSize:12, color:C.muted }}>
            Historique compressé — les jours consécutifs avec la même recette sont regroupés.
          </div>
          <FertigationHistory history={data.fertigationLogHistory||[]}/>
        </div>
      )}

{/* INTELLIGENCE TAB */}
      {tab==="intelligence" && (() => {
        const history = data.fertigationLogHistory || [];
        const fertilizers = data.fertilizers || [];
        const leafAnalyses = data.leafAnalyses || [];
        const gemKey = (data.settings && data.settings.geminiKey) || "";

// ── Build monthly rollups: { "2026-05": { "Bloc 3 – Arbequina": { "N-Ammonitrate 33.5%": { total: 625, unit: "kg" }, ... }, ... }, ... }
        const rollups = {};
        const allMonths = new Set();
        history.forEach(r => {
          const m = r.date.slice(0,7);
          allMonths.add(m);
          if (!rollups[m]) rollups[m] = {};
          const bloc = r.blocName;
          if (!rollups[m][bloc]) rollups[m][bloc] = {};
          (r.ingredients||[]).forEach(ing => {
            const key = ing.name || 'Unknown';
            if (!rollups[m][bloc][key]) rollups[m][bloc][key] = { total: 0, unit: ing.unit || '' };
            rollups[m][bloc][key].total += (ing.amount || 0);
          });
        });
        const months = [...allMonths].sort().reverse();

// Aggregate by crop for the selected month
        const curMonth = rollups[rollupMonth] || {};
        const byCrop = { citrus: {}, olive: {} };
        Object.entries(curMonth).forEach(([bloc, nutrients]) => {
          const crop = (bloc.includes('Navel') || bloc.includes('Maroc Late')) ? 'citrus'
            : (bloc.includes('Arbequina') || bloc.includes('Arbosana') || bloc.includes('Picholine')) ? 'olive' : 'other';
          if (crop === 'other') return;
          Object.entries(nutrients).forEach(([name, v]) => {
            if (!byCrop[crop][name]) byCrop[crop][name] = { total: 0, unit: v.unit, blocs: 0 };
            byCrop[crop][name].total += v.total;
          });
        });
        // Count distinct blocs per crop for the month
        const citrusBlocs = Object.keys(curMonth).filter(b => b.includes('Navel') || b.includes('Maroc Late'));
        const oliveBlocs = Object.keys(curMonth).filter(b => b.includes('Arbequina') || b.includes('Arbosana') || b.includes('Picholine'));

// Build compact context for Gemini (monthly totals only)
        const contextForAi = {
          farm: "GNAO-KIAF, Morocco — citrus (Navel, Maroc Late) blocs 3-11 + olive (Arbequina, Arbosana, Picholine) blocs 1-2. Blocs 10 & 11 are half-blocs (50% dose).",
          currentDate: new Date().toISOString().slice(0,10),
          monthlyTotals: {},
          currentStock: fertilizers.map(f => ({ name: f.name, stock: f.stockQty, unit: f.unit, minStock: f.minStock })),
          latestFoliarAnalyses: leafAnalyses.slice(0, 5),
        };
        months.slice(0, 6).forEach(m => {
          contextForAi.monthlyTotals[m] = {};
          Object.entries(rollups[m]||{}).forEach(([bloc, nutrients]) => {
            contextForAi.monthlyTotals[m][bloc] = {};
            Object.entries(nutrients).forEach(([name, v]) => {
              contextForAi.monthlyTotals[m][bloc][name] = v.total + ' ' + v.unit;
            });
          });
        });

// ── Ask Gemini ──
        const askFertigAi = async (audioB64 = null, mimeType = null) => {
          if (!gemKey) { alert("Clé API Gemini manquante dans les Paramètres."); return; }
          if (!audioB64 && !fertigQuery.trim()) return;
          setFertigThinking(true);
          setFertigAnswer("");
          setFertigTranscription("");
          setFertigTranslation("");
          try {
            const prompt = `You are an expert agronomic data analyst for GNAO-KIAF, a Moroccan farm growing citrus (Navel, Maroc Late) and olives (Arbequina, Arbosana, Picholine).

FERTIGATION & FARM DATA (JSON):
${JSON.stringify(contextForAi)}

INSTRUCTIONS:
- Answer the user's question using ONLY the data provided above.
- For quantities, always specify the unit (kg, L).
- If the question is about a specific bloc, look up that bloc's data. Bloc names in data include variety suffix (e.g. "Bloc 3 – Arbequina").
- If asked about "nitrogen" or "azote" or "N", look for "N-Ammonitrate 33.5%" in the data.
- If asked about "potassium" or "K", look for "K-Solucros" or similar K-prefixed names.
- If asked about "phosphorus" or "P", look for "P-MAP" or similar P-prefixed names.
- If asked about "acid" or "acide", look for "Acide Nitrique".
- If asked about stock levels, use the currentStock data.
- If asked about foliar/leaf analysis, use latestFoliarAnalyses.
- When computing totals across blocs, sum the individual bloc values.
- Be precise with numbers. Round to 1 decimal if needed.
- The user may speak in French, English, Moroccan Darija (Arabic), or mix languages.
- Return your response as a pure JSON object (NO markdown wrapping) with EXACTLY these keys:
  1. "transcription": Exact transcription of the user's question (Arabic script for Darija/Arabic, Latin for French/English)
  2. "translation": French translation of the question
  3. "answer": Your detailed answer in the user's language. Use clear formatting.
  4. "tts_fr": French translation of your answer for TTS
  5. "tts_en": English translation of your answer for TTS
  6. "tts_ar": Standard Arabic translation of your answer for TTS`;

// ── Voice recording ──
        const startFertigVoice = async () => {
          if (!gemKey) { alert("Clé API Gemini manquante."); return; }
          try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            fertigMediaRef.current = new MediaRecorder(stream);
            fertigChunksRef.current = [];
            fertigMediaRef.current.ondataavailable = e => { if (e.data.size > 0) fertigChunksRef.current.push(e.data); };
            fertigMediaRef.current.onstop = async () => {
              setFertigRecording("processing");
              const blob = new Blob(fertigChunksRef.current, { type: "audio/webm" });
              const base64 = await new Promise(r => { const reader = new FileReader(); reader.onload = () => r(reader.result.split(",")[1]); reader.readAsDataURL(blob); });
              await askFertigAi(base64, "audio/webm");
              setFertigRecording(false);
            };
            fertigMediaRef.current.start();
            setFertigRecording("recording");
          } catch(err) { alert("Erreur micro: " + err.message); }
        };
        const stopFertigVoice = () => {
          if (fertigMediaRef.current && fertigMediaRef.current.state === "recording") {
            fertigMediaRef.current.stop();
            fertigMediaRef.current.stream.getTracks().forEach(t => t.stop());
          }
        };

// ── TTS ──
        const speakFertig = (langCode) => {
          window.speechSynthesis?.cancel();
          let text = langCode === "fr" ? (fertigTtsFr || fertigAnswer)
            : langCode === "en" ? (fertigTtsEn || fertigAnswer)
            : (fertigTtsAr || fertigAnswer);
          if (!text) return;
          const u = new SpeechSynthesisUtterance(text);
          u.lang = langCode === "fr" ? "fr-FR" : langCode === "en" ? "en-US" : "ar-SA";
          u.rate = 0.95;
          window.speechSynthesis?.speak(u);
        };

return (
          <div>
            {/* ── Monthly Rollup Table ── */}
            <Card style={{ marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Playfair Display',serif", color: C.soil, fontSize: 16, margin: "0 0 14px" }}>
                📊 Récapitulatif Mensuel — Nutriments Appliqués
              </h3>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 14 }}>
                {months.slice(0, 8).map(m => (
                  <button key={m} onClick={() => setRollupMonth(m)} style={{
                    padding: "4px 12px", borderRadius: 8, fontSize: 11, fontWeight: 700, cursor: "pointer",
                    border: "2px solid " + (m === rollupMonth ? C.leaf : "#DDD6C8"),
                    background: m === rollupMonth ? C.leaf : "#fff", color: m === rollupMonth ? "#fff" : C.soil, fontFamily: "inherit"
                  }}>{new Date(m + "-01").toLocaleDateString(lang === "fr" ? "fr-FR" : "en-US", { month: "short", year: "numeric" })}</button>
                ))}
              </div>

{/* Citrus summary */}
              {Object.keys(byCrop.citrus).length > 0 && (
                <div style={{ marginBottom: 16 }}>
                  <div style={{ fontWeight: 700, fontSize: 13, color: C.citrus, marginBottom: 8 }}>🍊 Agrumes ({citrusBlocs.length} blocs actifs)</div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))", gap: 8 }}>
                    {Object.entries(byCrop.citrus).sort((a, b) => b[1].total - a[1].total).map(([name, v]) => (
                      <div key={name} style={{ background: "#FEF3E2", borderRadius: 10, padding: "10px 14px" }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: C.bark, marginBottom: 2 }}>{name}</div>
                        <div style={{ fontSize: 18, fontWeight: 800, color: C.soil }}>{v.total.toLocaleString(undefined, { maximumFractionDigits: 1 })} <span style={{ fontSize: 11, fontWeight: 400 }}>{v.unit}</span></div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{/* Olive summary */}
              {Object.keys(byCrop.olive).length > 0 && (
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13, color: C.olive, marginBottom: 8 }}>🫒 Oliviers ({oliveBlocs.length} blocs actifs)</div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))", gap: 8 }}>
                    {Object.entries(byCrop.olive).sort((a, b) => b[1].total - a[1].total).map(([name, v]) => (
                      <div key={name} style={{ background: "#E8F5E9", borderRadius: 10, padding: "10px 14px" }}>
                        <div style={{ fontSize: 10, fontWeight: 600, color: C.bark, marginBottom: 2 }}>{name}</div>
                        <div style={{ fontSize: 18, fontWeight: 800, color: C.soil }}>{v.total.toLocaleString(undefined, { maximumFractionDigits: 1 })} <span style={{ fontSize: 11, fontWeight: 400 }}>{v.unit}</span></div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{Object.keys(byCrop.citrus).length === 0 && Object.keys(byCrop.olive).length === 0 && (
                <div style={{ color: C.muted, fontSize: 13, textAlign: "center", padding: 20 }}>Aucune donnée pour ce mois.</div>
              )}

{/* Per-bloc breakdown (collapsible) */}
              {Object.keys(curMonth).length > 0 && (
                  <div style={{ marginTop: 14 }}>
                    <button onClick={() => setBlocDetailExpanded(!blocDetailExpanded)} style={{
                      background: "none", border: "1px solid #DDD6C8", borderRadius: 8, padding: "6px 14px",
                      cursor: "pointer", fontSize: 11, fontWeight: 600, color: C.bark, fontFamily: "inherit"
                    }}>{blocDetailExpanded ? "▼" : "▶"} Détail par bloc ({Object.keys(curMonth).length} blocs)</button>
                    {blocDetailExpanded && (
                      <div style={{ marginTop: 10, overflowX: "auto" }}>
                        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 11 }}>
                          <thead>
                            <tr style={{ borderBottom: "2px solid #E8D5A3" }}>
                              <th style={{ padding: "6px 8px", textAlign: "left", color: C.bark }}>Bloc</th>
                              {(() => {
                                const allNutrients = new Set();
                                Object.values(curMonth).forEach(n => Object.keys(n).forEach(k => allNutrients.add(k)));
                                return [...allNutrients].sort().map(n => (
                                  <th key={n} style={{ padding: "6px 8px", textAlign: "right", color: C.bark, whiteSpace: "nowrap" }}>{n.split('-')[0] || n}</th>
                                ));
                              })()}
                            </tr>
                          </thead>
                          <tbody>
                            {Object.entries(curMonth).sort((a, b) => a[0].localeCompare(b[0])).map(([bloc, nutrients], i) => {
                              const allNutrients = new Set();
                              Object.values(curMonth).forEach(n => Object.keys(n).forEach(k => allNutrients.add(k)));
                              return (
                                <tr key={bloc} style={{ borderBottom: "1px solid #f0ebe3", background: i % 2 === 0 ? "#FAFAF5" : "transparent" }}>
                                  <td style={{ padding: "6px 8px", fontWeight: 600, color: C.soil, whiteSpace: "nowrap" }}>{bloc.split(" – ")[0]}</td>
                                  {[...allNutrients].sort().map(n => (
                                    <td key={n} style={{ padding: "6px 8px", textAlign: "right", color: C.soil }}>
                                      {nutrients[n] ? nutrients[n].total.toLocaleString(undefined, { maximumFractionDigits: 1 }) : <span style={{ color: "#ccc" }}>—</span>}
                                    </td>
                                  ))}
                                </tr>
                              );
                            })}
                          </tbody>
                        </table>
                      </div>
                    )}
                  </div>
              )}
            </Card>

{/* ── AI Query Panel ── */}
            <Card>
              <h3 style={{ fontFamily: "'Playfair Display',serif", color: C.soil, fontSize: 16, margin: "0 0 4px", display: "flex", alignItems: "center", gap: 8 }}>
                🧠 Interroger les Données
              </h3>
              <div style={{ fontSize: 12, color: C.muted, marginBottom: 14 }}>
                Posez une question en français, anglais ou darija — par texte ou voix.
              </div>

{/* Input bar */}
              <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
                <div style={{ flex: 1, display: "flex", border: "2px solid #E8D5A3", borderRadius: 12, overflow: "hidden", background: "#fff" }}>
                  <input value={fertigQuery} onChange={e => setFertigQuery(e.target.value)}
                    onKeyDown={e => e.key === "Enter" && askFertigAi()}
                    placeholder="Ex: Combien d'azote pour le bloc 3 en mai ?"
                    style={{ flex: 1, padding: "10px 14px", border: "none", fontSize: 13, background: "transparent", outline: "none", fontFamily: "sans-serif" }} />
                  <button onClick={() => askFertigAi()} disabled={fertigThinking}
                    style={{ background: C.leaf, color: "#fff", border: "none", borderRadius: 0, padding: "0 16px", cursor: "pointer", fontWeight: 700, fontSize: 12 }}>
                    {fertigThinking ? "..." : "Demander"}
                  </button>
                </div>
                <button onClick={fertigRecording === "recording" ? stopFertigVoice : startFertigVoice}
                  disabled={fertigRecording === "processing"}
                  style={{
                    width: 44, height: 44, borderRadius: 12, border: "2px solid " + (fertigRecording === "recording" ? C.danger : "#E8D5A3"),
                    background: fertigRecording === "recording" ? C.danger : "#fff",
                    color: fertigRecording === "recording" ? "#fff" : C.leaf,
                    cursor: fertigRecording === "processing" ? "not-allowed" : "pointer",
                    fontSize: 18, display: "flex", alignItems: "center", justifyContent: "center"
                  }}>
                  {fertigRecording === "processing" ? "⏳" : fertigRecording === "recording" ? "⏹" : "🎤"}
                </button>
              </div>

{/* Example questions */}
              {!fertigAnswer && !fertigThinking && (
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 10 }}>
                  {[
                    "Combien d'azote total ce mois ?",
                    "Quel bloc a reçu le plus de potassium ?",
                    "Stock actuel d'Ammonitrate ?",
                    "Compare mai et avril en N",
                  ].map(q => (
                    <button key={q} onClick={() => { setFertigQuery(q); }}
                      style={{ fontSize: 11, padding: "5px 10px", borderRadius: 16, border: "1px solid #E8D5A3", background: "#FAFAF5", color: C.bark, cursor: "pointer", fontFamily: "inherit" }}>
                      {q}
                    </button>
                  ))}
                </div>
              )}

{/* Response */}
              {(fertigThinking || fertigAnswer) && (
                <div style={{ position: "relative", background: "#F8F6F0", borderRadius: 12, padding: 16, marginTop: 6 }}>
                  {fertigAnswer && (
                    <button onClick={() => { setFertigAnswer(""); setFertigTranscription(""); setFertigTranslation(""); setFertigTtsFr(""); setFertigTtsEn(""); setFertigTtsAr(""); window.speechSynthesis?.cancel(); }}
                      style={{ position: "absolute", top: 8, right: 8, background: "none", border: "none", cursor: "pointer", color: C.muted, fontSize: 16 }}>✕</button>
                  )}
                  {fertigTranscription && (
                    <div style={{ fontSize: 11, color: C.muted, marginBottom: 4 }}>
                      🎤 <em dir="auto">{fertigTranscription}</em>
                      {fertigTranslation && <span> → <em>{fertigTranslation}</em></span>}
                    </div>
                  )}
                  <div style={{ fontSize: 13, color: C.soil, lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
                    {fertigThinking ? <span style={{ fontStyle: "italic", color: C.muted }}>Analyse en cours...</span> : <span dir="auto">{fertigAnswer}</span>}
                  </div>
                  {fertigAnswer && (
                    <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
                      <button onClick={() => speakFertig("fr")} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 8, border: "1px solid #DDD6C8", background: "#fff", cursor: "pointer", fontFamily: "inherit" }}>🔊 FR</button>
                      <button onClick={() => speakFertig("en")} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 8, border: "1px solid #DDD6C8", background: "#fff", cursor: "pointer", fontFamily: "inherit" }}>🔊 EN</button>
                      <button onClick={() => speakFertig("ar")} style={{ fontSize: 11, padding: "4px 10px", borderRadius: 8, border: "1px solid #DDD6C8", background: "#fff", cursor: "pointer", fontFamily: "inherit" }}>🔊 AR</button>
                    </div>
                  )}
                </div>
              )}
            </Card>
          </div>
        );
      })()}

{/* LEGACY HISTORY TAB */}
      {tab==="history" && (
        <div>
          <div style={{ display:"grid", gap:10 }}>
            {sessions.slice(0,30).map(s=>{
              const recipe = recipes.find(r=>r.id===s.recipeId);
              return (
                <Card key={s.id} style={{ padding:"12px 16px", display:"flex", justifyContent:"space-between", alignItems:"center", opacity:s.treated?1:0.55 }}>
                  <div>
                    <div style={{ fontWeight:600, fontSize:13, color:C.soil }}>
                      {s.treated ? "✓" : "✗"} {recipe?.name||"Session"} — {s.date}
                    </div>
                    <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>
                      👤 {workerName(s.operatorId)}{s.notes ? " · " + s.notes : ""}
                    </div>
                  </div>
                  <div style={{ fontSize:11, color:s.treated?C.success:C.muted, fontWeight:700 }}>
                    {s.treated ? "Traité" : "Non traité"}
                  </div>
                </Card>
              );
            })}
            {sessions.length===0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucune session enregistrée.</p>}
          </div>
        </div>
      )}

{/* RECIPES TAB */}
      {tab==="recipes" && (
        <div>
          {recipes.map(r=>(
            <Card key={r.id} style={{ padding:18, marginBottom:12, borderLeft:"4px solid " + (r.variety==="Navel"?C.citrus:C.leaf) }}>
              <div style={{ fontWeight:700, fontSize:14, color:C.soil, marginBottom:4 }}>{r.name}</div>
              <div style={{ fontSize:11, color:C.muted, marginBottom:10 }}>Variété: {r.variety} · Blocs: {(r.blocs||[]).map(blocName).join(", ")}</div>
              <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(150px,1fr))", gap:8 }}>
                {(r.products||[]).map(p=>(
                  <div key={p.fertilizerId} style={{ background:C.cream, borderRadius:8, padding:"7px 11px" }}>
                    <div style={{ fontSize:10, color:C.muted }}>{p.name}</div>
                    <div style={{ fontWeight:700, color:C.soil }}>{p.dosePerSession} {p.unit}</div>
                  </div>
                ))}
              </div>
              {r.notes && <div style={{ marginTop:8, fontSize:11, color:C.muted, fontStyle:"italic" }}>📝 {r.notes}</div>}
            </Card>
          ))}
        </div>
      )}

{/* Session modal */}
      {sessionModal && (
        <Modal title="Enregistrer session fertigation" onClose={()=>setSessionModal(false)} rtl={rtl}>
          {(() => {
            const recipe = recipes.find(r=>r.id===form.recipeId);
            return (
              <div>
                {recipe && (
                  <div style={{ background:"#EEF5E4", borderRadius:10, padding:"10px 14px", marginBottom:12 }}>
                    <div style={{ fontWeight:700, fontSize:13, color:C.leaf, marginBottom:6 }}>{recipe.name}</div>
                    {(recipe.products||[]).map(p=>(
                      <div key={p.fertilizerId} style={{ fontSize:12, color:C.soil, marginBottom:2 }}>
                        • {p.name}: <strong>{p.dosePerSession} {p.unit}</strong>
                      </div>
                    ))}
                  </div>
                )}
                <FInput label={tx("date",lang)} value={form.date} onChange={v=>setForm(f=>({...f,date:v}))} type="date" rtl={rtl}/>
                <FInput label={tx("operator",lang)} value={form.operatorId} onChange={v=>setForm(f=>({...f,operatorId:v}))}
                  options={workers.map(w=>w.id)} optionLabels={workers.map(w=>w.name)} rtl={rtl}/>
                <div style={{ display:"flex", alignItems:"center", gap:10, margin:"10px 0" }}>
                  <label style={{ fontSize:13, fontWeight:600, color:C.soil }}>Traité aujourd’hui?</label>
                  <button onClick={()=>setForm(f=>({...f,treated:!f.treated}))}
                    style={{ padding:"5px 16px", borderRadius:20, border:"none", cursor:"pointer", background:form.treated?C.success:"#EEE", color:form.treated?"#fff":C.muted, fontWeight:700, fontSize:12 }}>
                    {form.treated ? "✓ Oui" : "✗ Non"}
                  </button>
                </div>
                <FInput label={tx("notes",lang)} value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
                <div style={{ fontSize:11, color:C.muted, marginBottom:12 }}>
                  Le stock de chaque produit sera décompté automatiquement.
                </div>
                <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
                  <Btn outline onClick={()=>setSessionModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
                  <Btn onClick={saveSession} color={C.leaf}>💾 Enregistrer</Btn>
                </div>
              </div>
            );
          })()}
        </Modal>
      )}
    </div>
  );
}

// ── Phytosanitaires ───────────────────────────────────────────────────────────

// ── Foliar Programmes ─────────────────────────────────────────────────────

function FoliarView({ data, db, lang }) {
  var [selected, setSelected] = useState(null);
  var [modal, setModal]       = useState(false);  // 'programme' | 'session' | false
  var [form, setForm]         = useState({});
  var rtl = lang === "ar";

// ── Status badge ─────────────────────────────────────────────
  function StatusBadge({ status }) {
    var cfg = { active:{bg:C.success,label:"En cours"}, completed:{bg:C.muted,label:"Terminé"}, planned:{bg:C.info,label:"Planifié"} };
    var c = cfg[status] || cfg.planned;
    return <span style={{ background:c.bg, color:"#fff", borderRadius:20, padding:"3px 10px", fontSize:11, fontWeight:700, fontFamily:"sans-serif" }}>{c.label}</span>;
  }

// ── Total sprayers across all sessions ───────────────────────
  function totalSprayers(prog) {
    return (prog.sessions||[]).reduce(function(s,sess){ return s + (sess.sprayer_count||0); }, 0);
  }

// ── Total qty used for a mix item ────────────────────────────
  function totalQty(prog, item) {
    return totalSprayers(prog) * item.qty_per_sprayer;
  }

// ── Programme detail view ─────────────────────────────────────
  function ProgDetail({ prog }) {
    var [addSession, setAddSession] = useState(false);
    var [sessionForm, setSessionForm] = useState({ date: new Date().toISOString().slice(0,10), sprayer_count:"", operator_id:"w3", notes:"" });
    var total = totalSprayers(prog);
    var sessions = (prog.sessions||[]).slice().sort(function(a,b){ return a.date>b.date?1:-1; });

function saveSession() {
      db.addFoliarSession(prog.id, sessionForm);
      setAddSession(false);
    }

return (
      <div>
        {/* Back + header */}
        <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:16 }}>
          <button onClick={function(){ setSelected(null); }}
            style={{ background:"none", border:"none", color:C.bark, fontSize:22, cursor:"pointer", lineHeight:1 }}>{"‹"}</button>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:700, fontSize:17, color:C.soil, fontFamily:"sans-serif" }}>{"🌿 "+prog.name}</div>
            <div style={{ fontSize:12, color:C.muted, marginTop:2, fontFamily:"sans-serif" }}>
              {(prog.zone_ids||[]).map(function(z){ return zoneName(z); }).join(", ")}
              {" · citerne "+prog.sprayer_volume_t+"T"}
            </div>
          </div>
          <StatusBadge status={prog.status}/>
        </div>

{/* Summary stats */}
        <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:10, marginBottom:16 }}>
          <Stat label="Sessions" value={(prog.sessions||[]).length} color={C.olive}/>
          <Stat label="Total sprayers" value={total} color={C.olive}/>
          <Stat label="Blocs" value={(prog.zone_ids||[]).length} color={C.bark}/>
          <Stat label="Volume total" value={(total*prog.sprayer_volume_t)+"T"} color={C.bark}/>
        </div>

{/* Sessions timeline */}
        <Card style={{ padding:"16px 20px", marginBottom:14 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12 }}>
            <div style={{ fontSize:12, fontWeight:700, color:C.bark, textTransform:"uppercase", fontFamily:"sans-serif" }}>Sessions</div>
            <Btn small color={C.olive} onClick={function(){ setAddSession(true); }}>+ Session</Btn>
          </div>
          {sessions.length===0 && <div style={{ color:C.muted, fontSize:13, fontFamily:"sans-serif" }}>Aucune session enregistrée.</div>}
          {sessions.map(function(sess, idx){
            return (
              <div key={sess.id} style={{ display:"flex", alignItems:"center", gap:12,
                padding:"10px 0", borderBottom: idx<sessions.length-1?"1px solid #F0EBE0":"none" }}>
                {/* Date — prominent */}
                <div style={{ background:C.citrus, color:"#fff", borderRadius:12,
                  padding:"6px 14px", fontWeight:800, fontSize:14, fontFamily:"sans-serif",
                  minWidth:110, textAlign:"center", flexShrink:0 }}>
                  📅 {sess.date}
                </div>
                {/* Sprayer count */}
                <div style={{ textAlign:"center", background:C.olive+"18", borderRadius:10, padding:"6px 14px" }}>
                  <div style={{ fontSize:20, fontWeight:800, color:C.olive, fontFamily:"sans-serif", lineHeight:1 }}>{sess.sprayer_count}</div>
                  <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>sprayers</div>
                </div>
                {sess.operator_id && (
                  <div style={{ fontSize:12, color:C.muted, fontFamily:"sans-serif" }}>{"👤 "+workerName(sess.operator_id)}</div>
                )}
                {sess.notes && <div style={{ fontSize:11, color:C.muted, fontStyle:"italic", fontFamily:"sans-serif" }}>{sess.notes}</div>}
                <div style={{ marginLeft:"auto", fontSize:12, color:C.muted, fontFamily:"sans-serif" }}>
                  {(sess.sprayer_count*prog.sprayer_volume_t)+"T appliqué"}
                </div>
              </div>
            );
          })}
          {/* Add session inline form */}
          {addSession && (
            <div style={{ marginTop:12, padding:"12px", background:"#F8F5EF", borderRadius:10 }}>
              <div style={{ fontWeight:700, fontSize:12, color:C.bark, marginBottom:8, fontFamily:"sans-serif" }}>Nouvelle session</div>
              <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
                <FInput label="Date" value={sessionForm.date} type="date"
                  onChange={function(v){ setSessionForm(function(f){ return {...f,date:v}; });}}/>
                <FInput label="Nb sprayers" value={sessionForm.sprayer_count} type="number"
                  onChange={function(v){ setSessionForm(function(f){ return {...f,sprayer_count:v}; });}}/>
                <FInput label="Opérateur" value={sessionForm.operator_id}
                  options={workers.map(function(w){ return w.id; })}
                  onChange={function(v){ setSessionForm(function(f){ return {...f,operator_id:v}; });}}/>
              </div>
              <div style={{ display:"flex", gap:8, justifyContent:"flex-end", marginTop:4 }}>
                <Btn small outline color={C.muted} onClick={function(){ setAddSession(false); }}>Annuler</Btn>
                <Btn small color={C.olive} onClick={saveSession}>Enregistrer</Btn>
              </div>
            </div>
          )}
        </Card>

{/* Mix table */}
        <Card style={{ padding:"16px 20px", marginBottom:14 }}>
          <div style={{ fontSize:12, fontWeight:700, color:C.bark, textTransform:"uppercase", marginBottom:12, fontFamily:"sans-serif" }}>Mix par citerne · Total ({total} sprayers)</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr auto auto auto", gap:8, alignItems:"center",
            padding:"4px 0", marginBottom:4, borderBottom:"1px solid #EDE8DF" }}>
            {["Produit","/ citerne","Total utilisé","Type"].map(function(h){
              return <span key={h} style={{ fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", fontFamily:"sans-serif" }}>{h}</span>;
            })}
          </div>
          {(prog.mix||[]).map(function(item){
            var prod = allProducts.find(function(p){ return p.id===item.product_id; });
            var isPhyto = item.product_table==="phyto_products";
            var cat = prod?.category || (isPhyto?"Phyto":"Engrais");
            var catColor = cat==="Fongicide"?C.info:cat==="Insecticide"?C.warning:cat==="Acaricide"?"#8B5CF6":C.success;
            return (
              <div key={item.id} style={{ display:"grid", gridTemplateColumns:"1fr auto auto auto",
                gap:8, alignItems:"center", padding:"8px 0", borderBottom:"1px solid #F5F0E8" }}>
                <span style={{ fontSize:13, fontWeight:600, color:C.soil, fontFamily:"sans-serif" }}>{item.product_name}</span>
                <span style={{ fontSize:13, fontWeight:700, color:C.bark, textAlign:"right", fontFamily:"sans-serif" }}>
                  {item.qty_per_sprayer} {item.unit}
                </span>
                <span style={{ fontSize:13, fontWeight:800, color:C.olive, textAlign:"right", fontFamily:"sans-serif" }}>
                  {totalQty(prog,item)} {item.unit}
                </span>
                <span style={{ background:catColor+"22", color:catColor, borderRadius:10,
                  padding:"2px 8px", fontSize:10, fontWeight:700, fontFamily:"sans-serif", textAlign:"center" }}>
                  {cat}
                </span>
              </div>
            );
          })}
        </Card>

{prog.notes && (
          <Card style={{ padding:"12px 16px", background:"#FFFBF0", borderLeft:"4px solid "+C.warning }}>
            <div style={{ fontSize:12, color:C.soil, fontFamily:"sans-serif" }}>{prog.notes}</div>
          </Card>
        )}
      </div>
    );
  }

// ── Programme card (list view) ────────────────────────────────
  function ProgCard({ prog }) {
    var total = totalSprayers(prog);
    var sessions = (prog.sessions||[]).slice().sort(function(a,b){ return a.date>b.date?1:-1; });
    var dates = sessions.map(function(s){ return s.date; });
    var statusColor = { active:C.success, completed:C.muted, planned:C.info }[prog.status] || C.muted;
    return (
      <Card style={{ padding:0, overflow:"hidden", cursor:"pointer", borderLeft:"4px solid "+statusColor }}
        onClick={function(){ setSelected(prog); }}>
        <div style={{ padding:"14px 18px" }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:10 }}>
            <div>
              <div style={{ fontWeight:700, fontSize:15, color:C.soil, fontFamily:"sans-serif", marginBottom:4 }}>{"🌿 "+prog.name}</div>
              <div style={{ fontSize:12, color:C.muted, fontFamily:"sans-serif" }}>
                {(prog.zone_ids||[]).map(function(z){ return zoneName(z); }).join(" · ")}
                {" · "+prog.sprayer_volume_t+"T/spray"}
              </div>
            </div>
            <StatusBadge status={prog.status}/>
          </div>

{/* Date chips */}
          <div style={{ display:"flex", gap:6, flexWrap:"wrap", marginBottom:12 }}>
            {sessions.map(function(sess){
              return (
                <span key={sess.id} style={{ display:"inline-flex", alignItems:"center", gap:5,
                  background:C.citrus, color:"#fff", borderRadius:20, padding:"4px 12px",
                  fontSize:13, fontWeight:800, fontFamily:"sans-serif" }}>
                  {"📅 "+sess.date}
                  <span style={{ background:"rgba(255,255,255,0.3)", borderRadius:12, padding:"0 7px", fontSize:12 }}>
                    {sess.sprayer_count}×
                  </span>
                </span>
              );
            })}
          </div>

{/* Stats row */}
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8 }}>
            <div style={{ textAlign:"center", background:C.olive+"12", borderRadius:8, padding:"6px 4px" }}>
              <div style={{ fontSize:18, fontWeight:800, color:C.olive, fontFamily:"sans-serif" }}>{total}</div>
              <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>sprayers</div>
            </div>
            <div style={{ textAlign:"center", background:"#F0EBE0", borderRadius:8, padding:"6px 4px" }}>
              <div style={{ fontSize:18, fontWeight:800, color:C.bark, fontFamily:"sans-serif" }}>{total*prog.sprayer_volume_t}T</div>
              <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>volume</div>
            </div>
            <div style={{ textAlign:"center", background:"#F0EBE0", borderRadius:8, padding:"6px 4px" }}>
              <div style={{ fontSize:18, fontWeight:800, color:C.bark, fontFamily:"sans-serif" }}>{(prog.mix||[]).length}</div>
              <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>produits</div>
            </div>
            <div style={{ textAlign:"center", background:"#F0EBE0", borderRadius:8, padding:"6px 4px" }}>
              <div style={{ fontSize:18, fontWeight:800, color:C.bark, fontFamily:"sans-serif" }}>{(prog.zone_ids||[]).length}</div>
              <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>blocs</div>
            </div>
          </div>
        </div>
      </Card>
    );
  }

var emptyProg = { name:"", zone_ids:[], sprayer_volume_t:2, status:"planned", notes:"" };

return (
    <div dir={rtl?"rtl":"ltr"}>
      {!selected && (
        <div>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
            <SectionTitle>🌿 Programmes Foliaires</SectionTitle>
            <Btn onClick={function(){ setForm(emptyProg); setModal("programme"); }} color={C.olive}>+ Nouveau programme</Btn>
          </div>

{programmes.length===0 && (
            <Card style={{ padding:32, textAlign:"center" }}>
              <div style={{ fontSize:32, marginBottom:8 }}>🌿</div>
              <div style={{ fontSize:14, color:C.muted, fontFamily:"sans-serif", marginBottom:12 }}>Aucun programme foliaire.</div>
              <Btn onClick={function(){ setForm(emptyProg); setModal("programme"); }} color={C.olive}>Créer un programme</Btn>
            </Card>
          )}
          <div style={{ display:"grid", gap:12 }}>
            {programmes.map(function(p){ return <ProgCard key={p.id} prog={p}/>; })}
          </div>
        </div>
      )}

{selected && <ProgDetail prog={selected}/>}

{/* New programme modal */}
      {modal==="programme" && (
        <Modal title="Nouveau programme foliaire" onClose={function(){ setModal(false); }}>
          <FInput label="Nom du programme" value={form.name||""} onChange={function(v){ setForm(function(f){ return {...f,name:v}; });}}/>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Volume citerne (T)" value={form.sprayer_volume_t||2} type="number"
              onChange={function(v){ setForm(function(f){ return {...f,sprayer_volume_t:v}; });}}/>
            <FInput label="Statut" value={form.status||"planned"}
              options={["planned","active","completed"]}
              onChange={function(v){ setForm(function(f){ return {...f,status:v}; });}}/>
          </div>
          <div style={{ fontSize:11, fontWeight:700, color:C.muted, textTransform:"uppercase", margin:"8px 0 4px", fontFamily:"sans-serif" }}>
            Blocs cibles (cochez)
          </div>
          <div style={{ display:"flex", gap:8, flexWrap:"wrap", marginBottom:12 }}>
            {zones.map(function(z){
              var sel = (form.zone_ids||[]).includes(z.id);
              return (
                <button key={z.id} onClick={function(){
                  setForm(function(f){
                    var ids = f.zone_ids||[];
                    return {...f, zone_ids: sel ? ids.filter(function(i){ return i!==z.id; }) : [...ids,z.id]};
                  });
                }} style={{ padding:"6px 14px", borderRadius:20, border:"2px solid "+(sel?C.olive:"#DDD"),
                  background:sel?C.olive:"transparent", color:sel?"#fff":C.muted,
                  cursor:"pointer", fontSize:12, fontWeight:700, fontFamily:"sans-serif" }}>
                  {z.id.toUpperCase()} – {z.name.split("–")[0].trim()}
                </button>
              );
            })}
          </div>
          <FInput label="Notes" value={form.notes||""} onChange={function(v){ setForm(function(f){ return {...f,notes:v}; });}}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline color={C.muted} onClick={function(){ setModal(false); }}>Annuler</Btn>
            <Btn color={C.olive} onClick={function(){ db.addFoliarProgramme(form); setModal(false); }}>Créer</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

function BlocAppGroup({ zoneId, zoneName, apps, dates, phiColor, maxSafe, workers, daysUntilSafe, db }) {
  var [open, setOpen] = useState(false);
  var total = apps.length;

// Group by date, sorted ascending within each date
  var byDate = {};
  apps.forEach(function(a){
    if(!byDate[a.date]) byDate[a.date]=[];
    byDate[a.date].push(a);
  });
  // Sort apps within each date by id to get consistent ordering
  Object.keys(byDate).forEach(function(d){
    byDate[d].sort(function(a,b){ return a.id>b.id?1:-1; });
  });
  var sortedDates = Object.keys(byDate).sort().reverse();

// Extract mix note from first app (shared across all — strip the citerne X/19 prefix)
  var firstApp = apps[0];
  var mixNote = "";
  if (firstApp && firstApp.notes) {
    var mixMatch = firstApp.notes.match(/Mix\/citerne:\s*(.+)$/);
    if (mixMatch) mixNote = mixMatch[1];
  }
  var operatorName = "";
  if (firstApp && workers) {
    var w = workers.find(function(w){ return w.id===firstApp.operatorId; });
    if (w) operatorName = w.name;
  }

// PHI: only warn if < 30 days (harvest is months away otherwise)
  var phiDisplay = maxSafe > 0 && maxSafe <= 30;

return (
    <Card style={{ padding:0, overflow:"hidden" }}>
      {/* ── Bloc header ───────────────────────────────────────── */}
      <div onClick={function(){ setOpen(function(o){ return !o; }); }}
        style={{ padding:"14px 18px", cursor:"pointer", display:"flex", alignItems:"center", gap:14,
                 background: open?"#FAF7F2":"#fff", borderBottom: open?"1px solid #EDE8DF":"none" }}>

{/* Zone pill */}
        <div style={{ background:C.olive, color:"#fff", borderRadius:10, padding:"4px 12px",
                      fontSize:13, fontWeight:800, fontFamily:"sans-serif", minWidth:40, textAlign:"center" }}>
          {zoneId.toUpperCase()}
        </div>

{/* Zone name + date chips */}
        <div style={{ flex:1 }}>
          <div style={{ fontWeight:700, fontSize:14, color:C.soil, fontFamily:"sans-serif", marginBottom:6 }}>{zoneName}</div>
          <div style={{ display:"flex", gap:6, flexWrap:"wrap" }}>
            {sortedDates.map(function(d){
              var count = byDate[d].length;
              return (
                <span key={d} style={{ display:"inline-flex", alignItems:"center", gap:5,
                  background:C.citrus, borderRadius:20, padding:"4px 12px",
                  fontSize:13, fontWeight:800, color:"#fff", fontFamily:"sans-serif", letterSpacing:"0.01em" }}>
                  📅 {d}
                  <span style={{ background:"rgba(255,255,255,0.3)", borderRadius:12,
                    padding:"0 7px", fontSize:12 }}>{count}×</span>
                </span>
              );
            })}
          </div>
        </div>

{/* Total + PHI */}
        <div style={{ display:"flex", gap:10, alignItems:"center", flexShrink:0 }}>
          <div style={{ textAlign:"center" }}>
            <div style={{ fontSize:24, fontWeight:800, color:C.olive, fontFamily:"sans-serif", lineHeight:1 }}>{total}</div>
            <div style={{ fontSize:10, color:C.muted, fontFamily:"sans-serif" }}>sprays</div>
          </div>
          {phiDisplay && (
            <div style={{ textAlign:"center", background:C.warning+"22", borderRadius:10, padding:"5px 10px" }}>
              <div style={{ fontSize:14, fontWeight:800, color:C.warning, fontFamily:"sans-serif" }}>{maxSafe}j</div>
              <div style={{ fontSize:9, color:C.muted, fontFamily:"sans-serif" }}>PHI</div>
            </div>
          )}
          {maxSafe !== null && maxSafe <= 0 && (
            <div style={{ background:C.success+"22", borderRadius:10, padding:"5px 10px" }}>
              <div style={{ fontSize:12, fontWeight:700, color:C.success, fontFamily:"sans-serif" }}>✓ OK</div>
            </div>
          )}
          <span style={{ fontSize:20, color:C.muted, transform:open?"rotate(90deg)":"rotate(0deg)", transition:"transform 0.2s" }}>›</span>
        </div>
      </div>

{/* ── Expanded detail ───────────────────────────────────── */}
      {open && (
        <div style={{ padding:"12px 18px" }}>
          {/* Mix summary — shown once at top */}
          {mixNote && (
            <div style={{ background:"#F0F7EB", borderRadius:10, padding:"8px 14px", marginBottom:14,
                          fontSize:12, color:C.olive, fontFamily:"sans-serif" }}>
              <span style={{ fontWeight:700 }}>Mix/citerne: </span>{mixNote}
              {operatorName && <span style={{ color:C.muted, marginLeft:10 }}>· 👤 {operatorName}</span>}
            </div>
          )}

{sortedDates.map(function(d){
            var dayApps = byDate[d];
            return (
              <div key={d} style={{ marginBottom:12 }}>
                {/* Date header */}
                <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:8 }}>
                  <div style={{ background:C.citrus, color:"#fff", borderRadius:20,
                    padding:"5px 16px", fontSize:14, fontWeight:800, fontFamily:"sans-serif" }}>
                    📅 {d}
                  </div>
                  <div style={{ flex:1, height:1, background:"#EDE8DF" }}/>
                  <span style={{ fontSize:12, color:C.muted, fontFamily:"sans-serif" }}>
                    {dayApps.length} spray{dayApps.length>1?"s":""}
                  </span>
                </div>

{/* Spray rows — compact, no repeated mix */}
                <div style={{ display:"flex", flexWrap:"wrap", gap:6, paddingLeft:8 }}>
                  {dayApps.map(function(a, idx){
                    var safe = daysUntilSafe(a);
                    return (
                      <div key={a.id} style={{ display:"flex", alignItems:"center", gap:8,
                        padding:"6px 12px", background:idx%2===0?"#FAF7F2":"#fff",
                        borderRadius:8, border:"1px solid #EDE8DF", minWidth:120 }}>
                        <div style={{ background:C.olive, color:"#fff", borderRadius:6,
                          width:24, height:24, display:"flex", alignItems:"center", justifyContent:"center",
                          fontSize:12, fontWeight:800, fontFamily:"sans-serif", flexShrink:0 }}>
                          {idx+1}
                        </div>
                        <div style={{ fontSize:12, fontFamily:"sans-serif", color:C.soil }}>
                          2T spray
                        </div>
                        {safe !== null && safe > 0 && safe <= 30 && (
                          <div style={{ fontSize:11, fontWeight:700, color:C.warning, fontFamily:"sans-serif" }}>
                            PHI {safe}j
                          </div>
                        )}
                        {safe !== null && safe <= 0 && (
                          <div style={{ fontSize:11, fontWeight:700, color:C.success, fontFamily:"sans-serif" }}>✓</div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
}

function PhytoView({ data, db, lang }) {
  const [tab, setTab] = useState("stock");
  const [productModal, setProductModal] = useState(false);
  const [appModal, setAppModal] = useState(false);
  const [form, setForm] = useState({});
  const rtl = lang==="ar";

const products  = (data.phytoProducts || []).filter(p => p.category !== "Engrais Foliaire");
  const apps      = data.phytoApplications || [];
  const workers   = data.workers           || [];
  const zones     = data.zones             || [];
  const today     = new Date().toISOString().slice(0,10);

const categories = ["Insecticide","Fongicide","Acaricide","Herbicide","Autre"];
  const methods    = ["Foliaire (citerne)","Foliaire (atomiseur)","Sol","Injection"];

// PHI warning — days until safe to harvest
  const daysUntilSafe = (app) => {
    if (!app.harvestSafeDate) return null;
    const diff = Math.ceil((new Date(app.harvestSafeDate) - new Date()) / 86400000);
    return diff;
  };

// Category color
  const catColor = (cat) => {
    if (cat==="Insecticide") return C.warning;
    if (cat==="Fongicide")   return C.info;
    if (cat==="Acaricide")   return "#8B5CF6";
    if (cat==="Herbicide")   return C.danger;
    return C.muted;
  };

const saveProduct = () => {
    db.addPhytoProduct({ ...form, stockQty:+form.stockQty||0, minStock:+form.minStock||0, pricePerUnit:+form.pricePerUnit||0, phi:+form.phi||0 });
    setProductModal(false);
  };

const TabBtn = ({id, label}) => (
    <button onClick={()=>setTab(id)} style={{ padding:"7px 16px", borderRadius:20, border:"none", cursor:"pointer", fontSize:12, fontWeight:tab===id?700:400, background:tab===id?C.warning:"transparent", color:tab===id?"#fff":C.muted }}>
      {label}
    </button>
  );

return (
    <div dir={rtl?"rtl":"ltr"}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>🧪 {tx("phyto",lang)}</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <Btn onClick={()=>{ setForm({ date:today, productId:products[0]?.id||"", zoneId:"b3", qtyUsed:"", operatorId:"w3", method:"Foliaire (citerne)", notes:"" }); setAppModal(true); }} color={C.warning} small>+ Application</Btn>
          <Btn onClick={()=>{ setForm({ name:"", category:"Insecticide", activeIngredient:"", supplier:"", unit:"L", stockQty:"", minStock:"", pricePerUnit:"", phi:"", notes:"" }); setProductModal(true); }} color={C.muted} small outline>+ Produit</Btn>
        </div>
      </div>

{/* Tabs */}
      <div style={{ display:"flex", gap:6, marginBottom:18, background:"#F0EBE3", borderRadius:24, padding:4, width:"fit-content" }}>
        <TabBtn id="stock"   label="Stock"/>
        <TabBtn id="history" label="Applications"/>
        <TabBtn id="phi"     label="Alertes PHI"/>
      </div>

{/* STOCK TAB */}
      {tab==="stock" && (
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(260px,1fr))", gap:12 }}>
          {products.map(p=>{
            const low = p.stockQty <= p.minStock;
            const empty = p.stockQty === 0;
            return (
              <Card key={p.id} style={{ padding:18, borderLeft:"4px solid " + catColor(p.category), opacity:empty?0.6:1 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:8 }}>
                  <div>
                    <span style={{ fontSize:10, fontWeight:700, color:catColor(p.category), textTransform:"uppercase", letterSpacing:"0.05em" }}>{p.category}</span>
                    <div style={{ fontWeight:700, fontSize:14, color:C.soil, marginTop:2 }}>{p.name}</div>
                    <div style={{ fontSize:11, color:C.muted }}>{p.activeIngredient}</div>
                  </div>
                  <div style={{ textAlign:"right" }}>
                    <div style={{ fontSize:22, fontWeight:800, color: empty?C.danger : low?C.warning : C.bark }}>
                      {(p.stockQty||0).toLocaleString()}
                    </div>
                    <div style={{ fontSize:10, color:C.muted }}>{p.unit}</div>
                  </div>
                </div>
                <div style={{ display:"flex", gap:8, flexWrap:"wrap", marginTop:6 }}>
                  {p.phi > 0 && <span style={{ background:"#FEF3E2", color:C.warning, padding:"2px 8px", borderRadius:12, fontSize:10, fontWeight:700 }}>PHI {p.phi}j</span>}
                  {p.pricePerUnit > 0 && <span style={{ background:C.cream, color:C.muted, padding:"2px 8px", borderRadius:12, fontSize:10 }}>{p.pricePerUnit} MAD/{p.unit}</span>}
                  {p.supplier && <span style={{ background:C.cream, color:C.muted, padding:"2px 8px", borderRadius:12, fontSize:10 }}>{p.supplier.split("–")[0].trim()}</span>}
                </div>
                {low && !empty && <div style={{ marginTop:8, fontSize:11, color:C.warning, fontWeight:700 }}>⚠️ Stock bas (min: {p.minStock} {p.unit})</div>}
                {empty && <div style={{ marginTop:8, fontSize:11, color:C.danger, fontWeight:700 }}>⚠️ Stock à confirmer</div>}
                {p.notes && <div style={{ marginTop:6, fontSize:10, color:C.muted, fontStyle:"italic" }}>{p.notes}</div>}
              </Card>
            );
          })}
        </div>
      )}

{/* APPLICATIONS TAB — grouped by bloc */}
      {tab==="history" && (() => {
        var grouped = {};
        apps.forEach(function(a) {
          var key = a.zoneId || "unknown";
          if (!grouped[key]) grouped[key] = [];
          grouped[key].push(a);
        });
        var blocOrder = ["b1","b2","b3","b4","b5","b6","b7","b8","b9","b10","b11","b12","unknown"];
        var sortedBlocs = Object.keys(grouped).sort(function(a,b){ return blocOrder.indexOf(a)-blocOrder.indexOf(b); });

if (apps.length===0) return <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucune application enregistrée.</p>;

return (
          <div style={{ display:"grid", gap:12 }}>
            {sortedBlocs.map(function(zoneId) {
              var zoneApps = grouped[zoneId].slice().sort(function(a,b){ return b.date>a.date?1:-1; });
              var zone = zones.find(function(z){ return z.id===zoneId; });
              var zoneName = zone ? zone.name : zoneId;
              // unique dates
              var dates = [...new Set(zoneApps.map(function(a){ return a.date; }))].sort().reverse();
              // PHI status
              var maxSafe = Math.max.apply(null, zoneApps.map(function(a){ return daysUntilSafe(a)||0; }));
              var phiColor = maxSafe<=0?C.success:maxSafe<=7?C.warning:C.danger;
              return (
                <BlocAppGroup key={zoneId} zoneId={zoneId} zoneName={zoneName}
                  apps={zoneApps} dates={dates} phiColor={phiColor} maxSafe={maxSafe}
                  workers={workers} daysUntilSafe={daysUntilSafe} db={db}/>
              );
            })}
          </div>
        );
      })()}

{/* PHI ALERTS TAB */}
      {tab==="phi" && (
        <div>
          <div style={{ background:"#FEF3E2", border:"1px solid " + C.warning, borderRadius:12, padding:"14px 18px", marginBottom:18, fontSize:12, color:C.bark, lineHeight:1.7 }}>
            <strong>⚠️ Délai avant récolte (PHI)</strong> — Ne pas récolter avant la date indiquée après une application phytosanitaire.
            Navel/Valencia: récolte Oct–Déc. Respecter les PHI pour conformité export.
          </div>
          {apps.filter(a=>a.harvestSafeDate).map(a=>{
            const safe = daysUntilSafe(a);
            const zone = zones.find(z=>z.id===a.zoneId);
            const ok = safe !== null && safe <= 0;
            return (
              <Card key={a.id} style={{ padding:"12px 16px", marginBottom:8, borderLeft:"4px solid " + (ok?C.success:C.warning) }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                  <div>
                    <div style={{ fontWeight:600, fontSize:13, color:C.soil }}>{a.productName} — {zone?.name||a.zoneId}</div>
                    <div style={{ fontSize:11, color:C.muted }}>Appliqué le {a.date} · PHI {a.phi}j</div>
                  </div>
                  <div style={{ textAlign:"right" }}>
                    <div style={{ fontWeight:700, fontSize:13, color:ok?C.success:C.warning }}>
                      {ok ? "✓ Récolte autorisée" : "🚫 Attendre " + safe + "j"}
                    </div>
                    <div style={{ fontSize:10, color:C.muted }}>Date sûre: {a.harvestSafeDate}</div>
                  </div>
                </div>
              </Card>
            );
          })}
          {apps.filter(a=>a.harvestSafeDate).length===0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucune application avec PHI enregistrée.</p>}
        </div>
      )}

{/* New product modal */}
      {productModal && (
        <Modal title={tx("newProduct",lang)} onClose={()=>setProductModal(false)} rtl={rtl}>
          <FInput label={tx("name",lang)} value={form.name} onChange={v=>setForm(f=>({...f,name:v}))} rtl={rtl}/>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Catégorie" value={form.category} onChange={v=>setForm(f=>({...f,category:v}))} options={categories} rtl={rtl}/>
            <FInput label="Matière active" value={form.activeIngredient} onChange={v=>setForm(f=>({...f,activeIngredient:v}))} rtl={rtl}/>
            <FInput label="Fournisseur" value={form.supplier} onChange={v=>setForm(f=>({...f,supplier:v}))} rtl={rtl}/>
            <FInput label="Unité (kg/L)" value={form.unit} onChange={v=>setForm(f=>({...f,unit:v}))} options={["L","kg","g"]} rtl={rtl}/>
            <FInput label="Stock actuel" value={form.stockQty} onChange={v=>setForm(f=>({...f,stockQty:v}))} type="number" rtl={rtl}/>
            <FInput label="Stock minimum" value={form.minStock} onChange={v=>setForm(f=>({...f,minStock:v}))} type="number" rtl={rtl}/>
            <FInput label="Prix/unité (MAD)" value={form.pricePerUnit} onChange={v=>setForm(f=>({...f,pricePerUnit:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("phi",lang)} value={form.phi} onChange={v=>setForm(f=>({...f,phi:v}))} type="number" rtl={rtl}/>
          </div>
          <FInput label={tx("notes",lang)} value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setProductModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveProduct} color={C.warning}>💾 {tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}

{/* New application modal */}
      {appModal && (
        <Modal title={tx("newApp",lang)} onClose={()=>setAppModal(false)} rtl={rtl}>
          <FInput label="Produit" value={form.productId} onChange={v=>setForm(f=>({...f,productId:v}))}
            options={products.map(p=>p.id)} optionLabels={products.map(p=>p.name)} rtl={rtl}/>
          {form.productId && (() => {
            const p = products.find(pr=>pr.id===form.productId);
            return p ? (
              <div style={{ background:"#FEF3E2", borderRadius:8, padding:"8px 12px", marginBottom:8, fontSize:12, color:C.bark }}>
                PHI: <strong>{p.phi} jours</strong> · Stock: <strong>{p.stockQty} {p.unit}</strong>
                {p.pricePerUnit > 0 ? " · " + p.pricePerUnit + " MAD/" + p.unit : ""}
              </div>
            ) : null;
          })()}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label={tx("date",lang)} value={form.date} onChange={v=>setForm(f=>({...f,date:v}))} type="date" rtl={rtl}/>
            <FInput label="Quantité utilisée" value={form.qtyUsed} onChange={v=>setForm(f=>({...f,qtyUsed:v}))} type="number" rtl={rtl}/>
            <FInput label={tx("zone",lang)} value={form.zoneId} onChange={v=>setForm(f=>({...f,zoneId:v}))}
              options={zones.map(z=>z.id)} optionLabels={zones.map(z=>z.name)} rtl={rtl}/>
            <FInput label={tx("operator",lang)} value={form.operatorId} onChange={v=>setForm(f=>({...f,operatorId:v}))}
              options={workers.map(w=>w.id)} optionLabels={workers.map(w=>w.name)} rtl={rtl}/>
          </div>
          <FInput label="Méthode" value={form.method} onChange={v=>setForm(f=>({...f,method:v}))} options={methods} rtl={rtl}/>
          <FInput label={tx("notes",lang)} value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setAppModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={saveApp} color={C.warning}>💾 {tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Consumption (Solar / Grid daily) ──────────────────────────────────────────
function ConsumptionView({ data, lang }) {
  const days = data.solarDaily || [];
  const meterReadings = data.meterReadings || [];
  const [selectedMonth, setSelectedMonth] = useState(() => {
    const now = new Date(); return now.getFullYear()+"-"+(""+(now.getMonth()+1)).padStart(2,"0");
  });
  const [meterDay, setMeterDay] = useState(() => new Date().toISOString().slice(0,10));

// Group by month
  const byMonth = {};
  days.forEach(d => {
    const m = d.date.slice(0,7);
    if (!byMonth[m]) byMonth[m] = [];
    byMonth[m].push(d);
  });
  const months = Object.keys(byMonth).sort().reverse();

// Current month days
  const curDays = (byMonth[selectedMonth]||[]).slice().sort((a,b)=>a.date.localeCompare(b.date));

// Monthly totals for summary panel
  const monthTotals = months.map(m => {
    const ds = byMonth[m];
    const cost = ds.reduce((s,d)=>s+(d.costMad||0),0);
    const saved = ds.reduce((s,d)=>s+(d.savedMad||0),0);
    const cons = ds.reduce((s,d)=>s+(d.consumedKwh||0),0);
    const pv = ds.reduce((s,d)=>s+(d.pvKwh||0),0);
    const grid = ds.reduce((s,d)=>s+(d.gridKwh||0),0);
    const pvPct = cons>0 ? (pv/cons*100) : 0;
    const label = new Date(m+"-01").toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{month:"long",year:"numeric"});
    return { month:m, label, cost, saved, cons, pv, grid, pvPct, days:ds.length };
  });

// Current month stats
  const cur = monthTotals.find(t=>t.month===selectedMonth) || { cost:0,saved:0,cons:0,pv:0,grid:0,pvPct:0,days:0 };

// Forecast: avg daily cost × days in month
  const daysInMonth = new Date(+selectedMonth.slice(0,4), +selectedMonth.slice(5,7), 0).getDate();
  const avgDailyCost = cur.days>0 ? cur.cost/cur.days : 0;
  const forecast = avgDailyCost * daysInMonth;

// Bar chart max for scaling
  const maxCons = Math.max(...curDays.map(d=>d.consumedKwh||0), 1);

return (
    <div>
      <SectionTitle>{lang==="fr"?"Consommation Électrique":"Electricity Consumption"}</SectionTitle>

{/* Month selector */}
      <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:20}}>
        {months.map(m=>(
          <button key={m} onClick={()=>setSelectedMonth(m)} style={{
            padding:"6px 14px",borderRadius:8,fontSize:12,fontWeight:700,cursor:"pointer",border:"2px solid "+(m===selectedMonth?C.citrus:"#DDD6C8"),
            background:m===selectedMonth?C.citrus:"#fff",color:m===selectedMonth?"#fff":C.soil,fontFamily:"inherit"
          }}>{new Date(m+"-01").toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{month:"short",year:"numeric"})}</button>
        ))}
      </div>

{/* Summary stats */}
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(150px,1fr))",gap:14,marginBottom:24}}>
        <Stat label={lang==="fr"?"Coût Réseau":"Grid Cost"} value={cur.cost.toFixed(0)+" DH"} color={C.danger}/>
        <Stat label={lang==="fr"?"Économisé (PV)":"Saved (PV)"} value={cur.saved.toFixed(0)+" DH"} color={C.success}/>
        <Stat label={lang==="fr"?"Prévision mois":"Month Forecast"} value={forecast.toFixed(0)+" DH"} sub={cur.days+"/"+daysInMonth+" "+( lang==="fr"?"jours":"days")} color={C.warning}/>
        <Stat label={lang==="fr"?"Consommé":"Consumed"} value={(cur.cons/1000).toFixed(1)+" MWh"} color={C.soil}/>
        <Stat label={lang==="fr"?"PV Solaire":"Solar PV"} value={cur.pvPct.toFixed(0)+"%"} sub={(cur.pv/1000).toFixed(1)+" MWh"} color={C.olive}/>
        <Stat label={lang==="fr"?"Réseau":"Grid Pull"} value={((100-cur.pvPct)||0).toFixed(0)+"%"} sub={(cur.grid/1000).toFixed(1)+" MWh"} color={C.bark}/>
      </div>

{/* Monthly comparison table */}
      <Card style={{marginBottom:24}}>
        <h3 style={{fontFamily:"'Playfair Display',serif",color:C.soil,fontSize:16,margin:"0 0 12px"}}>{lang==="fr"?"Récapitulatif Mensuel":"Monthly Summary"}</h3>
        <div style={{overflowX:"auto"}}>
          <table style={{width:"100%",borderCollapse:"collapse",fontSize:12}}>
            <thead>
              <tr style={{borderBottom:"2px solid #E8D5A3",textAlign:"left"}}>
                <th style={{padding:"8px 6px",color:C.bark}}>{lang==="fr"?"Mois":"Month"}</th>
                <th style={{padding:"8px 6px",color:C.bark,textAlign:"right"}}>{lang==="fr"?"Coût (DH)":"Cost (DH)"}</th>
                <th style={{padding:"8px 6px",color:C.bark,textAlign:"right"}}>{lang==="fr"?"Économisé":"Saved"}</th>
                <th style={{padding:"8px 6px",color:C.bark,textAlign:"right"}}>kWh</th>
                <th style={{padding:"8px 6px",color:C.bark,textAlign:"right"}}>PV %</th>
              </tr>
            </thead>
            <tbody>
              {monthTotals.map(t=>(
                <tr key={t.month} onClick={()=>setSelectedMonth(t.month)} style={{borderBottom:"1px solid #f0ebe3",cursor:"pointer",background:t.month===selectedMonth?"#FEF3E2":"transparent"}}>
                  <td style={{padding:"8px 6px",fontWeight:600,color:C.soil}}>{t.label}</td>
                  <td style={{padding:"8px 6px",textAlign:"right",fontWeight:700,color:C.danger}}>{t.cost.toFixed(0)}</td>
                  <td style={{padding:"8px 6px",textAlign:"right",fontWeight:700,color:C.success}}>{t.saved.toFixed(0)}</td>
                  <td style={{padding:"8px 6px",textAlign:"right",color:C.soil}}>{t.cons.toFixed(0)}</td>
                  <td style={{padding:"8px 6px",textAlign:"right"}}>
                    <span style={{background:t.pvPct>50?"#E8F5E9":"#FFF3E0",color:t.pvPct>50?C.success:C.warning,padding:"2px 8px",borderRadius:10,fontWeight:700,fontSize:11}}>{t.pvPct.toFixed(0)}%</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

{/* Daily breakdown with bar chart */}
      <Card>
        <h3 style={{fontFamily:"'Playfair Display',serif",color:C.soil,fontSize:16,margin:"0 0 12px"}}>
          {lang==="fr"?"Détail Journalier":"Daily Breakdown"} — {new Date(selectedMonth+"-01").toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{month:"long",year:"numeric"})}
        </h3>
        {curDays.length===0 && <div style={{color:C.muted,fontSize:13,padding:20,textAlign:"center"}}>{lang==="fr"?"Aucune donnée":"No data"}</div>}
        <div style={{display:"flex",flexDirection:"column",gap:4}}>
          {curDays.map(d=>{
            const dayLabel = new Date(d.date+"T12:00:00").toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{weekday:"short",day:"numeric"});
            const pvW = d.consumedKwh>0 ? (d.pvKwh/d.consumedKwh*100) : 0;
            const barW = d.consumedKwh/maxCons*100;
            const isHigh = d.costMad > 600;
            return (
              <div key={d.date} style={{display:"flex",alignItems:"center",gap:8,padding:"4px 0",borderBottom:"1px solid #f8f4ee"}}>
                <div style={{width:55,fontSize:11,fontWeight:600,color:C.bark,flexShrink:0}}>{dayLabel}</div>
                <div style={{flex:1,position:"relative",height:22,background:"#f5f0e8",borderRadius:6,overflow:"hidden"}}>
                  <div style={{position:"absolute",left:0,top:0,bottom:0,width:barW+"%",background:"#E0E0E0",borderRadius:6}}/>
                  <div style={{position:"absolute",left:0,top:0,bottom:0,width:(barW*pvW/100)+"%",background:C.olive,borderRadius:"6px 0 0 6px",opacity:0.8}}/>
                  <div style={{position:"absolute",left:8,top:0,bottom:0,display:"flex",alignItems:"center",fontSize:10,fontWeight:700,color:C.soil}}>
                    {d.consumedKwh.toFixed(0)} kWh
                  </div>
                </div>
                <div style={{width:70,fontSize:11,fontWeight:700,color:isHigh?C.danger:C.soil,textAlign:"right",flexShrink:0}}>
                  {d.costMad.toFixed(0)} DH {isHigh?"⚠️":""}
                </div>
                <div style={{width:42,fontSize:10,fontWeight:600,color:C.olive,textAlign:"right",flexShrink:0}}>
                  {pvW.toFixed(0)}% PV
                </div>
              </div>
            );
          })}
        </div>
      </Card>

{/* ── Meter Hourly Readings (from farm_meter_readings) ── */}
      {meterReadings.length > 0 && (() => {
        // Available dates
        const meterDates = [...new Set(meterReadings.map(r=>r.date))].sort().reverse();
        const activeMeterDay = meterDates.includes(meterDay) ? meterDay : meterDates[0];
        const dayReadings = meterReadings.filter(r=>r.date===activeMeterDay)
          .sort((a,b)=>a.hour-b.hour);
        const totalDelta = dayReadings.reduce((s,r)=>s+(r.deltaKwh||0),0);
        const totalCost = dayReadings.reduce((s,r)=>s+(r.costDh||0),0);
        const peakKwh = dayReadings.filter(r=>r.tariff==="pointe").reduce((s,r)=>s+(r.deltaKwh||0),0);
        const normKwh = dayReadings.filter(r=>r.tariff==="normales").reduce((s,r)=>s+(r.deltaKwh||0),0);
        const peakCost = dayReadings.filter(r=>r.tariff==="pointe").reduce((s,r)=>s+(r.costDh||0),0);
        const normCost = dayReadings.filter(r=>r.tariff==="normales").reduce((s,r)=>s+(r.costDh||0),0);
        const maxDelta = Math.max(...dayReadings.map(r=>r.deltaKwh||0), 1);

// Monthly summary from meter
        const meterMonth = activeMeterDay.slice(0,7);
        const monthReadings = meterReadings.filter(r=>r.date.startsWith(meterMonth) && r.deltaKwh!=null);
        const monthTotal = monthReadings.reduce((s,r)=>s+(r.deltaKwh||0),0);
        const monthCost = monthReadings.reduce((s,r)=>s+(r.costDh||0),0);
        const monthPeak = monthReadings.filter(r=>r.tariff==="pointe").reduce((s,r)=>s+(r.deltaKwh||0),0);
        const monthNorm = monthReadings.filter(r=>r.tariff==="normales").reduce((s,r)=>s+(r.deltaKwh||0),0);

return (
          <Card style={{marginTop:24}}>
            <h3 style={{fontFamily:"'Playfair Display',serif",color:C.soil,fontSize:16,margin:"0 0 16px",display:"flex",alignItems:"center",gap:8}}>
              <span style={{fontSize:20}}>⚡</span>
              {lang==="fr"?"Compteur Réseau — Lecture Horaire":"Grid Meter — Hourly Readings"}
            </h3>

{/* Date selector */}
            <div style={{display:"flex",gap:6,flexWrap:"wrap",marginBottom:16,alignItems:"center"}}>
              <span style={{fontSize:12,fontWeight:600,color:C.bark,marginRight:4}}>{lang==="fr"?"Jour:":"Day:"}</span>
              {meterDates.slice(0,14).map(d=>(
                <button key={d} onClick={()=>setMeterDay(d)} style={{
                  padding:"4px 10px",borderRadius:6,fontSize:11,fontWeight:700,cursor:"pointer",
                  border:"2px solid "+(d===activeMeterDay?"#E67E22":"#DDD6C8"),
                  background:d===activeMeterDay?"#E67E22":"#fff",color:d===activeMeterDay?"#fff":C.soil,fontFamily:"inherit"
                }}>{new Date(d+"T12:00:00").toLocaleDateString(lang==="fr"?"fr-FR":"en-US",{weekday:"short",day:"numeric",month:"short"})}</button>
              ))}
            </div>

{/* Day summary stats */}
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(120px,1fr))",gap:10,marginBottom:18}}>
              <div style={{background:"#FEF3E2",borderRadius:10,padding:"10px 14px",textAlign:"center"}}>
                <div style={{fontSize:11,fontWeight:600,color:C.bark}}>{lang==="fr"?"Conso Jour":"Day Usage"}</div>
                <div style={{fontSize:18,fontWeight:800,color:C.soil}}>{totalDelta.toFixed(1)} <span style={{fontSize:11}}>kWh</span></div>
              </div>
              <div style={{background:"#FDEDEC",borderRadius:10,padding:"10px 14px",textAlign:"center"}}>
                <div style={{fontSize:11,fontWeight:600,color:C.bark}}>{lang==="fr"?"Coût Jour":"Day Cost"}</div>
                <div style={{fontSize:18,fontWeight:800,color:C.danger}}>{totalCost.toFixed(1)} <span style={{fontSize:11}}>DH</span></div>
              </div>
              <div style={{background:"#FFF3E0",borderRadius:10,padding:"10px 14px",textAlign:"center"}}>
                <div style={{fontSize:11,fontWeight:600,color:"#E67E22"}}>Pointe (18h-23h)</div>
                <div style={{fontSize:15,fontWeight:800,color:"#E67E22"}}>{peakKwh.toFixed(1)} kWh</div>
                <div style={{fontSize:11,fontWeight:600,color:C.danger}}>{peakCost.toFixed(1)} DH</div>
              </div>
              <div style={{background:"#E8F5E9",borderRadius:10,padding:"10px 14px",textAlign:"center"}}>
                <div style={{fontSize:11,fontWeight:600,color:C.success}}>Normales</div>
                <div style={{fontSize:15,fontWeight:800,color:C.success}}>{normKwh.toFixed(1)} kWh</div>
                <div style={{fontSize:11,fontWeight:600,color:C.success}}>{normCost.toFixed(1)} DH</div>
              </div>
              <div style={{background:"#EDE7F6",borderRadius:10,padding:"10px 14px",textAlign:"center"}}>
                <div style={{fontSize:11,fontWeight:600,color:C.bark}}>{lang==="fr"?"Mois":"Month"}</div>
                <div style={{fontSize:15,fontWeight:800,color:C.soil}}>{monthTotal.toFixed(0)} kWh</div>
                <div style={{fontSize:11,fontWeight:600,color:C.danger}}>{monthCost.toFixed(0)} DH</div>
              </div>
            </div>

{/* Hourly bar chart */}
            <div style={{fontSize:12,fontWeight:700,color:C.bark,marginBottom:8}}>{lang==="fr"?"Profil horaire":"Hourly Profile"}</div>
            <div style={{display:"flex",alignItems:"flex-end",gap:2,height:140,padding:"0 4px",borderBottom:"2px solid #E8D5A3",marginBottom:4}}>
              {Array.from({length:24},(_,h)=>{
                const r = dayReadings.find(x=>x.hour===h);
                const delta = r ? (r.deltaKwh||0) : 0;
                const barH = maxDelta>0 ? (delta/maxDelta*120) : 0;
                const isPeak = h>=18 && h<23;
                const barColor = isPeak ? "#E67E22" : C.olive;
                return (
                  <div key={h} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-end",height:"100%"}} title={`${h}h: ${delta.toFixed(1)} kWh${r?" — "+(r.costDh||0).toFixed(1)+" DH":""}`}>
                    {delta>0 && <div style={{fontSize:8,fontWeight:700,color:C.bark,marginBottom:2}}>{delta.toFixed(0)}</div>}
                    <div style={{width:"100%",maxWidth:28,height:Math.max(barH,delta>0?3:0),background:barColor,borderRadius:"4px 4px 0 0",opacity:r?1:0.2,transition:"height 0.3s"}}/>
                  </div>
                );
              })}
            </div>
            <div style={{display:"flex",gap:2,padding:"0 4px"}}>
              {Array.from({length:24},(_,h)=>(
                <div key={h} style={{flex:1,textAlign:"center",fontSize:8,color:C.muted,fontWeight:h>=18&&h<23?700:400}}>{h}</div>
              ))}
            </div>

{/* Legend */}
            <div style={{display:"flex",gap:16,marginTop:12,fontSize:11,color:C.bark}}>
              <div style={{display:"flex",alignItems:"center",gap:4}}>
                <div style={{width:12,height:12,borderRadius:3,background:C.olive}}/>
                <span>Normales</span>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:4}}>
                <div style={{width:12,height:12,borderRadius:3,background:"#E67E22"}}/>
                <span>Pointe (18h-23h)</span>
              </div>
            </div>
          </Card>
        );
      })()}
    </div>
  );
}

// ── Energy ────────────────────────────────────────────────────────────────────
function EnergyView({ data, db, lang }) {
  const [previewImage, setPreviewImage] = React.useState(null);

const [modal, setModal] = useState(false);
  const [form, setForm] = useState({});
  const [importing, setImporting] = useState(false);
  const fileRef = useRef();
  const geminiKey = data.settings && data.settings.geminiKey ? data.settings.geminiKey : "";
  const rtl = lang==="ar";

const bills = (data.energyBills || []).slice().sort((a,b)=>a.period.localeCompare(b.period));
  const EMPTY = {
    period:"", billRef:"", issuedDate:"", dueDate:"", totalTTC:"",
    kwhNormal:"", kwhCreux:"", kwhPointe:"", puissanceKVA:"",
    redevancePuissance:"", provider:"SRM – Béni Mellal–Khénifra", notes:""
  };

// Chart refs
  const lineChartRef = useRef(null);
  const lineCanvasRef = useRef(null);
  const barChartRef  = useRef(null);
  const barCanvasRef  = useRef(null);

useEffect(() => {
    if (!lineCanvasRef.current || !barCanvasRef.current || bills.length < 1) return;

const labels = bills.map(b => b.period);

// Destroy old charts
    if (lineChartRef.current) { lineChartRef.current.destroy(); lineChartRef.current = null; }
    if (barChartRef.current)  { barChartRef.current.destroy();  barChartRef.current  = null; }

lineChartRef.current = new Chart(lineCanvasRef.current, {
      type: "line",
      data: {
        labels,
        datasets: [
          { label: "Total kWh",        data: bills.map(b=>b.kwhTotal||0),          borderColor:"#0EA5E9", backgroundColor:"rgba(14,165,233,0.08)", tension:0.3, pointRadius:4, borderWidth:2, fill:true },
          { label: "H. Normales kWh",  data: bills.map(b=>b.kwhNormal||0),         borderColor:"#22C55E", backgroundColor:"transparent",            tension:0.3, pointRadius:4, borderWidth:2 },
          { label: "H. Pointe kWh",    data: bills.map(b=>b.kwhPointe||0),         borderColor:"#EF4444", backgroundColor:"transparent",            tension:0.3, pointRadius:4, borderWidth:2 },
          { label: "Redevance (MAD)",  data: bills.map(b=>b.redevancePuissance||0), borderColor:"#F59E0B", backgroundColor:"transparent",            tension:0.3, pointRadius:4, borderWidth:2, borderDash:[5,3] },
        ],
      },
      options: {
        responsive:true, maintainAspectRatio:false,
        interaction:{ mode:"index", intersect:false },
        plugins:{ legend:{ position:"bottom", labels:{ boxWidth:12, font:{size:11} } }, tooltip:{ callbacks:{ label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y.toLocaleString()}` } } },
        scales:{
          x:{ grid:{display:false}, ticks:{ font:{size:10} } },
          y:{ title:{display:true, text:"kWh / MAD", font:{size:10}}, ticks:{ font:{size:10} }, grid:{ color:"#F0EBE0" } },
        },
      },
    });

barChartRef.current = new Chart(barCanvasRef.current, {
      type: "bar",
      data: {
        labels,
        datasets: [
          { label: "Puissance appelée (kVA)", data: bills.map(b=>b.puissanceKVA||0), backgroundColor: bills.map(b => (b.puissanceKVA||0) > 75 ? "#EF4444" : "#8B5CF6"), borderRadius:4 },
        ],
      },
      options: {
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{ position:"bottom", labels:{ boxWidth:12, font:{size:11} } }, tooltip:{ callbacks:{ label: ctx => ` ${ctx.parsed.y} kVA` } } },
        scales:{
          x:{ grid:{display:false}, ticks:{ font:{size:10} } },
          y:{ title:{display:true, text:"kVA", font:{size:10}}, ticks:{ font:{size:10} }, grid:{ color:"#F0EBE0" }, suggestedMin:0 },
        },
      },
    });

return () => {
      if (lineChartRef.current) lineChartRef.current.destroy();
      if (barChartRef.current)  barChartRef.current.destroy();
    };
  }, [bills.map(b=>b.id).join()]);

function processBill(files) {
    if (!geminiKey) { alert("Ajoutez votre clé API Gemini dans les Paramètres."); return; }
    setImporting(true);

Promise.all(promises).then(function(parts) {
      var fileUrls = parts.map(function(p) { return "data:" + p.inline_data.mime_type + ";base64," + p.inline_data.data; });

var prompt = "Extract data from this Moroccan electricity bill (ONE/SRM) as JSON. "
        + "The bill may contain 1 or 2 pages. "
        + "From the DETAILED consumption table page, extract: "
        + "kwhNormal (Number, 'Jour' or 'Heures Normales' volume), "
        + "kwhCreux (Number, 'Nuit' or 'Heures Creuses' volume), "
        + "kwhPointe (Number, 'Pointe' volume), "
        + "puissanceKVA (Number, subscribed/called power), "
        + "redevancePuissance (Number, fixed power charge). "
        + "From the SUMMARY page (if present), extract ONLY: "
        + "dueDate (String, YYYY-MM-DD, e.g., 'A payer avant le'), "
        + "period (String, format YYYY-MM), "
        + "billRef (String, invoice number), "
        + "issuedDate (String, YYYY-MM-DD), "
        + "totalTTC (Number, total to pay). "
        + "Return ONLY valid JSON without markdown.";

var payload = {
        contents: [{ parts: [{ text: prompt }].concat(parts) }],
        generationConfig: { temperature: 0, maxOutputTokens: 8192 }
      };

fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-pro:generateContent?key=" + geminiKey, {
        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
      })
      .then(function(r){ return r.json(); })
      .then(function(d) {
        if (d.error) throw new Error(d.error.message);
        var txt = d.candidates?.[0]?.content?.parts?.[0]?.text || "{}";
        var first = txt.indexOf('{'), last = txt.lastIndexOf('}');
        if (first !== -1 && last !== -1) txt = txt.substring(first, last + 1);
        
        console.log("Single-call extracted JSON:", txt);
        var parsed = JSON.parse(txt);
        setForm(Object.assign({}, EMPTY, parsed, { scans: fileUrls }));
        setImporting(false);
        setModal(true);
      })
      .catch(function(err) {
        console.error(err);
        alert("Erreur extraction: " + err.message);
        setImporting(false);
      });
    });
  }

const totalSpend = bills.reduce((s,b)=>s+(b.totalTTC||0),0);
  const totalKwh   = bills.reduce((s,b)=>s+(b.kwhTotal||0),0);
  const avgBill    = bills.length ? Math.round(totalSpend/bills.length) : 0;

const Bar = ({value, max, color, label}) => (
    <div style={{ marginBottom:10 }}>
      <div style={{ display:"flex", justifyContent:"space-between", fontSize:12, marginBottom:4 }}>
        <span style={{ fontWeight:600, color:C.soil }}>{label}</span>
        <span style={{ color, fontWeight:700 }}>{(value||0).toLocaleString()} kWh</span>
      </div>
      <div style={{ background:"#EEE", borderRadius:6, height:10, overflow:"hidden" }}>
        <div style={{ width:(Math.min(100, max>0?(value/max)*100:0)) + "%", height:10, background:color, borderRadius:6, transition:"width 0.4s" }}/>
      </div>
    </div>
  );

const peakColor = (b) => {
    const pct = b.kwhTotal ? (b.kwhPointe/b.kwhTotal)*100 : 0;
    if (pct > 30) return C.danger;
    if (pct > 20) return C.warning;
    return C.success;
  };

return (
    <div dir={rtl?"rtl":"ltr"}>
            {previewImage && (<div onClick={() => setPreviewImage(null)} style={{position:"fixed", top:0, left:0, right:0, bottom:0, backgroundColor:"rgba(0,0,0,0.8)", zIndex:9999, display:"flex", alignItems:"center", justifyContent:"center"}}><div style={{position:"relative"}}><img className="agro-media" src={previewImage} onClick={ev => ev.stopPropagation()} style={{maxHeight:"85vh", maxWidth:"90vw", borderRadius:8, backgroundColor:"#fff"}} /><button onClick={() => setPreviewImage(null)} style={{position:"absolute", top:-15, right:-15, background:"#E74C3C", color:"white", border:"none", borderRadius:"50%", width:30, height:30, cursor:"pointer", fontWeight:"bold", boxShadow:"0 2px 4px rgba(0,0,0,0.2)"}}>X</button></div></div>)}
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>⚡ {tx("energy",lang)}</SectionTitle>
        <div style={{ display:"flex", gap:8 }}>
          <input type="file" ref={fileRef} accept="image/*,application/pdf" multiple style={{ display:"none" }}
                 onChange={function(e){ if(e.target.files.length>0) processBill(e.target.files); e.target.value=""; }}/>
          <Btn onClick={function(){ fileRef.current.click(); }} color={C.olive} outline disabled={importing}>
            {importing ? "⏳ Scan..." : "📷 Scanner Facture"}
          </Btn>
          <Btn onClick={()=>{ setForm(EMPTY); setModal(true); }} color={C.citrus}>+ {tx("newBill",lang)}</Btn>
        </div>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))", gap:12, marginBottom:22 }}>
        <Stat label="Total facturé" value={(totalSpend.toLocaleString()) + " MAD"} color={C.danger}/>
        <Stat label="Moy. mensuelle" value={(avgBill.toLocaleString()) + " MAD"} color={C.warning}/>
        <Stat label="Total kWh" value={totalKwh.toLocaleString()} color={C.info}/>
        <Stat label="Factures" value={bills.length} color={C.muted}/>
      </div>

{bills.length > 1 && (
        <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr", gap:16, marginBottom:22 }}>
          {/* Line chart — consumption trends */}
          <Card style={{ padding:"16px 20px" }}>
            <div style={{ fontWeight:700, fontSize:13, color:C.soil, marginBottom:12 }}>📈 Consommation mensuelle — kWh & Redevance</div>
            <div style={{ height:220 }}><canvas ref={lineCanvasRef}/></div>
          </Card>
          {/* Bar chart — puissance appelée */}
          <Card style={{ padding:"16px 20px" }}>
            <div style={{ fontWeight:700, fontSize:13, color:C.soil, marginBottom:12 }}>⚡ Puissance appelée — kVA</div>
            <div style={{ fontSize:10, color:C.muted, marginBottom:8 }}>Rouge = dépasse 75 kVA</div>
            <div style={{ height:196 }}><canvas ref={barCanvasRef}/></div>
          </Card>
        </div>
      )}

<div style={{ background:"linear-gradient(135deg,#1a3a2a,#2d5a3d)", borderRadius:14, padding:"16px 20px", marginBottom:22, color:"#fff" }}>
        <div style={{ fontWeight:700, fontSize:14, marginBottom:6 }}>💡 Optimisation pompage</div>
        <div style={{ fontSize:12, lineHeight:1.7, color:"rgba(255,255,255,0.85)" }}>
          Les <strong>Heures de Pointe</strong> sont facturées à <strong>1.148 MAD/kWh</strong> vs <strong>0.903 MAD/kWh</strong> en Heures Normales — soit <strong>+27% plus cher</strong>.
          Programmer les pompes en <strong>Heures Creuses</strong> (nuit) réduit significativement la facture.
          À 70 000 MAD/mois, même <strong>10% de réduction = 7 000 MAD économisés</strong>.
        </div>
      </div>

<div style={{ display:"grid", gap:14 }}>
        {bills.map(b => {
          const total = b.kwhTotal || 1;
          const pctPointe = Math.round((b.kwhPointe||0)/total*100);
          const pctNormal = Math.round((b.kwhNormal||0)/total*100);
          const pctCreux  = Math.round((b.kwhCreux||0)/total*100);
          return (
            <Card key={b.id} style={{ padding:20 }}>
              <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:14, flexWrap:"wrap", gap:8 }}>
                <div>
                  <div style={{ fontFamily:"'Playfair Display',serif", fontWeight:700, fontSize:17, color:C.soil }}>
                    ⚡ {b.period}
                  </div>
                  <div style={{ fontSize:11, color:C.muted, marginTop:2 }}>
                    N° {b.billRef} · Émise {b.issuedDate} · Échéance {b.dueDate}
                  </div>
                  <div style={{ fontSize:11, color:C.muted }}>{b.provider}</div>
                </div>
                <div style={{ textAlign:"right" }}>
                  <div style={{ fontSize:26, fontWeight:800, color: b.paid ? C.success : C.bark, fontFamily:"'Playfair Display',serif" }}>
                    {(b.totalTTC||0).toLocaleString()} MAD
                  </div>
                  <div style={{ fontSize:11, color:C.muted, marginBottom:6 }}>TTC · HT: {(b.totalHT||0).toLocaleString()} MAD</div>
                  {b.paid
                    ? <span onClick={()=>db.markEnergyBillPaid(b.id, false)} title="Cliquer pour marquer non payée" style={{ display:"inline-block", background:"#D1FAE5", color:"#065F46", border:"1px solid #6EE7B7", borderRadius:20, padding:"3px 12px", fontSize:12, fontWeight:700, cursor:"pointer", userSelect:"none" }}>✅ Payée</span>
                    : <button onClick={()=>db.markEnergyBillPaid(b.id, true)} style={{ background:"none", border:"2px solid #D1D5DB", borderRadius:20, padding:"3px 12px", fontSize:12, fontWeight:600, color:"#6B7280", cursor:"pointer", display:"flex", alignItems:"center", gap:6, marginLeft:"auto" }}>
                        <span style={{ width:16, height:16, border:"2px solid #D1D5DB", borderRadius:"50%", display:"inline-block", flexShrink:0 }}/>
                        Marquer payée
                      </button>
                  }
                </div>
              </div>

<div style={{ marginBottom:14 }}>
                <div style={{ fontSize:12, fontWeight:700, color:C.muted, marginBottom:8, textTransform:"uppercase", letterSpacing:"0.05em" }}>
                  Consommation — {(b.kwhTotal||0).toLocaleString()} kWh total
                </div>
                <Bar value={b.kwhNormal} max={b.kwhTotal} color={C.success} label={"H. Normales (" + pctNormal + "%)"}/>
                <Bar value={b.kwhCreux}  max={b.kwhTotal} color={C.info}    label={"H. Creuses (" + pctCreux + "%)"}/>
                <Bar value={b.kwhPointe} max={b.kwhTotal} color={peakColor(b)} label={"H. Pointe (" + pctPointe + "%)"}/>
              </div>

<div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fit,minmax(150px,1fr))", gap:8, marginBottom:10 }}>
                {[
                  { label:"Conso H. Normales", val: Math.round((b.kwhNormal||0)*0.90314*1.18), unit:"MAD" },
                  { label:"Conso H. Pointe",   val: Math.round((b.kwhPointe||0)*1.14814*1.18), unit:"MAD" },
                  { label:"Redevance puissance",val: Math.round(b.redevancePuissance||0), unit:"MAD" },
                  { label:"Puissance appelée",  val: b.puissanceKVA||0, unit:"KVA" },
                ].map(item=>(
                  <div key={item.label} style={{ background:C.cream, borderRadius:8, padding:"8px 12px" }}>
                    <div style={{ fontSize:10, color:C.muted, marginBottom:2 }}>{item.label}</div>
                    <div style={{ fontSize:14, fontWeight:700, color:C.soil }}>
                      {Number(item.val).toLocaleString()} <span style={{ fontSize:10, fontWeight:400 }}>{item.unit}</span>
                    </div>
                  </div>
                ))}
              </div>

{pctPointe > 15 && (
                <div style={{ background:"#FEF3E2", border:"1px solid " + C.warning, borderRadius:8, padding:"8px 12px", fontSize:12, color:C.bark }}>
                  ⚠ <strong>{pctPointe}% de la conso en H. Pointe</strong> — planifier le pompage en H. Normales ou H. Creuses pour réduire ce coût.
                </div>
              )}

{b.notes && <div style={{ marginTop:8, fontSize:11, color:C.muted, fontStyle:"italic" }}>📝 {b.notes}</div>}
              <div style={{ display:"flex", justifyContent:"flex-end", marginTop: 8 }}>
                <button onClick={()=>{ if(window.confirm("Supprimer cette facture ?")) db.deleteEnergyBill(b.id); }} style={{ color:"#C0392B", background:"#FDECEA", border:"none", padding:"5px 10px", borderRadius:6, fontSize:11, cursor:"pointer", fontWeight:"bold" }}>🗑 Supprimer la facture</button>
              </div>
              {b.scans && b.scans.length > 0 && (
                <div style={{ display:"flex", gap:8, marginTop:12, overflowX:"auto" }}>
                  {b.scans.map((src, idx) => (
                    <span onClick={() => setPreviewImage(src)} style={{cursor:"zoom-in", display:"inline-block"}}><img src={src} style={{ height: 60, borderRadius: 6, border: "1px solid #EEE" }} alt="Scan facture" /></span>
                  ))}
                </div>
              )}
            </Card>
          );
        })}
        {bills.length===0 && <p style={{ color:C.muted, textAlign:"center", padding:32 }}>Aucune facture enregistrée.</p>}
      </div>

{modal && (
        <Modal title={tx("newBill",lang)} onClose={()=>setModal(false)} rtl={rtl}>
          {form.scans && form.scans.length > 0 && (
            <div style={{ display:"flex", gap:10, overflowX:"auto", marginBottom:16, padding:"8px", background:"#F0EBE3", borderRadius:10 }}>
              {form.scans.map((src, idx) => (
                <span onClick={() => setPreviewImage(src)} style={{cursor:"zoom-in", display:"inline-block"}}><img src={src} style={{ height: 140, borderRadius: 6, border: "1px solid #CCC" }} alt="Scan facture" /></span>
              ))}
            </div>
          )}
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Période (AAAA-MM)" value={form.period} onChange={v=>setForm(f=>({...f,period:v}))} rtl={rtl}/>
            <FInput label={tx("billRef",lang)} value={form.billRef} onChange={v=>setForm(f=>({...f,billRef:v}))} rtl={rtl}/>
            <FInput label="Date émission" value={form.issuedDate} onChange={v=>setForm(f=>({...f,issuedDate:v}))} type="date" rtl={rtl}/>
            <FInput label={tx("dueDate",lang)} value={form.dueDate} onChange={v=>setForm(f=>({...f,dueDate:v}))} type="date" rtl={rtl}/>
          </div>
          <FInput label="Total TTC (MAD)" value={form.totalTTC} onChange={v=>setForm(f=>({...f,totalTTC:v}))} type="number" rtl={rtl}/>
          <div style={{ fontSize:12, fontWeight:700, color:C.muted, margin:"10px 0 4px", textTransform:"uppercase" }}>Consommation kWh</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:"0 12px" }}>
            <FInput label="H. Normales" value={form.kwhNormal} onChange={v=>setForm(f=>({...f,kwhNormal:v}))} type="number" rtl={rtl}/>
            <FInput label="H. Creuses"  value={form.kwhCreux}  onChange={v=>setForm(f=>({...f,kwhCreux:v}))}  type="number" rtl={rtl}/>
            <FInput label="H. Pointe"   value={form.kwhPointe} onChange={v=>setForm(f=>({...f,kwhPointe:v}))} type="number" rtl={rtl}/>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 16px" }}>
            <FInput label="Puissance KVA" value={form.puissanceKVA} onChange={v=>setForm(f=>({...f,puissanceKVA:v}))} type="number" rtl={rtl}/>
            <FInput label="Redevance puissance (MAD)" value={form.redevancePuissance} onChange={v=>setForm(f=>({...f,redevancePuissance:v}))} type="number" rtl={rtl}/>
          </div>
          <FInput label={tx("notes",lang)} value={form.notes} onChange={v=>setForm(f=>({...f,notes:v}))} rtl={rtl}/>
          <div style={{ display:"flex", gap:10, justifyContent:"flex-end" }}>
            <Btn outline onClick={()=>setModal(false)} color={C.muted}>{tx("cancel",lang)}</Btn>
            <Btn onClick={save} color={C.citrus}>💾 {tx("save",lang)}</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ── Visites Terrain Tab ──────────────────────────────────────────────────────
function VisitesView({ data, db, lang }) {
  const { useState: useS, useMemo: useM } = React;
  const [expandedId, setExpandedId] = useS(null);
  const [search, setSearch] = useS('');
  const [unreviewingId, setUnreviewingId] = useS(null);

const getLocField = (field) => {
    if (!field) return '';
    if (typeof field === 'string') return field;
    return field.fr || field.en || Object.values(field)[0] || '';
  };

const reviewedVisits = useM(() => {
    const msgs = (data.messages || []).filter(m => m.media_type === 'visit_bundle' && m.actionDone);
    // Sort newest first
    return msgs.slice().sort((a, b) => {
      const da = new Date(a.created_at || a.date || 0);
      const db2 = new Date(b.created_at || b.date || 0);
      return db2 - da;
    });
  }, [data.messages]);

// Group by month
  const grouped = useM(() => {
    const map = {};
    filtered.forEach(m => {
      const dt = new Date(m.created_at || m.date || 0);
      const key = isNaN(dt) ? 'Date inconnue' : dt.toLocaleDateString('fr-FR', { year:'numeric', month:'long', timeZone:'Africa/Casablanca' });
      if (!map[key]) map[key] = [];
      map[key].push(m);
    });
    return map;
  }, [filtered]);

const monthOrder = Object.keys(grouped);

const unmarkReviewed = async (msgId) => {
    setUnreviewingId(msgId);
    try {
      await db.updateMessage(msgId, { action_done: false });
    } finally {
      setUnreviewingId(null);
    }
  };

if (reviewedVisits.length === 0) {
    return (
      <div style={{ padding:'40px 20px', textAlign:'center', color:C.muted }}>
        <div style={{ fontSize:48, marginBottom:16 }}>🔬</div>
        <div style={{ fontSize:16, fontWeight:700, color:C.soil, marginBottom:8 }}>Aucune visite revue</div>
        <div style={{ fontSize:13 }}>Marquez des visites comme "revues" depuis l'onglet Messages pour les archiver ici.</div>
      </div>
    );
  }

return (
    <div style={{ maxWidth:900, margin:'0 auto', padding:'16px 12px' }}>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:18, fontWeight:800, color:C.soil }}>🔬 Visites Terrain</div>
          <div style={{ fontSize:12, color:C.muted }}>{reviewedVisits.length} visite{reviewedVisits.length>1?'s':''} archivée{reviewedVisits.length>1?'s':''}</div>
        </div>
        <input
          type="text"
          placeholder="Rechercher..."
          value={search}
          onChange={e => setSearch(e.target.value)}
          style={{ padding:'7px 14px', border:'1px solid #E2D9D0', borderRadius:20, fontSize:13, outline:'none', background:'#fff', color:C.soil, width:200 }}
        />
      </div>

{filtered.length === 0 && (
        <div style={{ textAlign:'center', color:C.muted, padding:'30px 0', fontSize:13 }}>Aucun résultat pour "{search}"</div>
      )}

{monthOrder.map(month => (
        <div key={month} style={{ marginBottom:24 }}>
          <div style={{ fontSize:11, fontWeight:800, color:C.muted, letterSpacing:1.2, textTransform:'uppercase', marginBottom:10, paddingLeft:4, borderLeft:`3px solid ${C.citrus}`, paddingLeft:10 }}>
            {month} · {grouped[month].length} visite{grouped[month].length>1?'s':''}
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {grouped[month].map(m => {
              const isExpanded = expandedId === m.id;
              let content = {};
              try { content = typeof m.content === 'string' ? JSON.parse(m.content) : (m.content || {}); } catch(e) {}
              let notes = {};
              try { notes = typeof m.notes === 'string' ? JSON.parse(m.notes) : (m.notes || {}); } catch(e) {}

const execSum = getLocField(notes.executive_summary);
              const alerts = notes.critical_alerts || [];
              const measurements = content.measurements || [];
              const photos = (notes.photo_insights || []).filter(p => p.url);
              const visitedParcels = [...new Set(measurements.map(ms => ms.parcel_name).filter(Boolean))];

const dateStr = m.created_at
                ? new Date(m.created_at).toLocaleDateString('fr-FR', { weekday:'long', day:'numeric', month:'long', year:'numeric', timeZone:'Africa/Casablanca' })
                : m.date;
              const timeStr = m.created_at
                ? new Date(m.created_at).toLocaleTimeString('fr-FR', { hour:'2-digit', minute:'2-digit', timeZone:'Africa/Casablanca' })
                : '';

return (
                <div key={m.id} style={{ background:'#fff', border:'1px solid #E8E0D8', borderRadius:12, overflow:'hidden', boxShadow:'0 1px 4px rgba(0,0,0,0.06)' }}>
                  {/* Card header */}
                  <div style={{ padding:'12px 16px', display:'flex', alignItems:'flex-start', gap:12, cursor:'pointer', background: isExpanded ? '#FDF8F3' : '#fff' }}
                    onClick={() => setExpandedId(isExpanded ? null : m.id)}>
                    <div style={{ width:40, height:40, borderRadius:20, background:'#D1FAE5', display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, flexShrink:0 }}>🔬</div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                        <span style={{ fontWeight:800, fontSize:14, color:C.soil }}>{m.sender || 'Consultant'}</span>
                        <span style={{ fontSize:11, color:C.muted }}>{dateStr}{timeStr ? ' · ' + timeStr : ''}</span>
                        {photos.length > 0 && <span style={{ background:'#F0FDF4', color:'#166534', fontSize:10, fontWeight:700, padding:'2px 8px', borderRadius:10 }}>📸 {photos.length}</span>}
                        {alerts.length > 0 && <span style={{ background:'#FEF2F2', color:'#B91C1C', fontSize:10, fontWeight:700, padding:'2px 8px', borderRadius:10 }}>🚨 {alerts.length} alerte{alerts.length>1?'s':''}</span>}
                      </div>
                      {visitedParcels.length > 0 && (
                        <div style={{ display:'flex', flexWrap:'wrap', gap:4, marginTop:6 }}>
                          {visitedParcels.map(p => <span key={p} style={{ background:'#EFF6FF', color:'#1D4ED8', fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:10 }}>{p}</span>)}
                        </div>
                      )}
                      {execSum && !isExpanded && (
                        <div style={{ fontSize:12, color:C.muted, marginTop:5, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:600 }}>{execSum}</div>
                      )}
                    </div>
                    <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:6, flexShrink:0 }}>
                      <span style={{ fontSize:16, color:C.muted, transform: isExpanded ? 'rotate(180deg)' : 'none', transition:'transform 0.2s' }}>▼</span>
                      <button
                        onClick={e => { e.stopPropagation(); unmarkReviewed(m.id); }}
                        disabled={unreviewingId === m.id}
                        style={{ padding:'3px 10px', background:'#F0EBE3', color:C.bark, border:'none', borderRadius:12, fontSize:10, fontWeight:700, cursor:'pointer' }}
                        title="Retirer de l'archive"
                      >↩ Revenir</button>
                    </div>
                  </div>

{/* Expanded body */}
                  {isExpanded && (
                    <div style={{ borderTop:'1px solid #EDE8E2', padding:'14px 16px', display:'flex', flexDirection:'column', gap:12 }}>
                      {/* Alerts */}
                      {alerts.length > 0 && (
                        <div style={{ padding:'10px 14px', background:'#FEF2F2', borderLeft:'4px solid #EF4444', borderRadius:8 }}>
                          <div style={{ fontSize:12, fontWeight:800, color:'#B91C1C', marginBottom:4 }}>🚨 ALERTES CRITIQUES</div>
                          <ul style={{ margin:'0 0 0 18px', color:'#991B1B', fontSize:12, lineHeight:1.6 }}>
                            {alerts.map((a, i) => <li key={i}>{getLocField(a)}</li>)}
                          </ul>
                        </div>
                      )}

{/* Executive summary */}
                      {execSum && (
                        <div style={{ padding:'10px 14px', background:'#FFF8F0', borderLeft:'4px solid #F97316', borderRadius:8 }}>
                          <div style={{ fontSize:11, fontWeight:800, color:'#9A3412', marginBottom:4 }}>🔍 ANALYSE IA</div>
                          <div style={{ fontSize:13, color:'#7C2D12', lineHeight:1.6, whiteSpace:'pre-wrap' }} dir="auto">{execSum}</div>
                        </div>
                      )}

{/* Measurements table */}
                      {measurements.filter(ms => ms.type === 'soil' && ms.data).length > 0 && (
                        <div style={{ background:'#F8F9FA', borderRadius:8, padding:'10px 14px' }}>
                          <div style={{ fontSize:11, fontWeight:800, color:C.muted, marginBottom:8 }}>📊 MESURES</div>
                          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
                            <thead>
                              <tr style={{ background:'#F0EBE3' }}>
                                <th style={{ padding:'6px 10px', textAlign:'left', color:C.bark, fontWeight:700, borderRadius:'4px 0 0 4px' }}>Parcelle</th>
                                <th style={{ padding:'6px 10px', textAlign:'center', color:C.bark, fontWeight:700 }}>pH</th>
                                <th style={{ padding:'6px 10px', textAlign:'center', color:C.bark, fontWeight:700 }}>Humidité</th>
                                <th style={{ padding:'6px 10px', textAlign:'center', color:C.bark, fontWeight:700 }}>Fertilité</th>
                              </tr>
                            </thead>
                            <tbody>
                              {measurements.filter(ms => ms.type === 'soil' && ms.data).map((ms, i) => (
                                <tr key={i} style={{ borderBottom:'1px solid #E8E0D8' }}>
                                  <td style={{ padding:'6px 10px', fontWeight:600, color:C.soil }}>{ms.parcel_name || '—'}</td>
                                  <td style={{ padding:'6px 10px', textAlign:'center', color:'#4F46E5' }}>{ms.data.pH || '—'}</td>
                                  <td style={{ padding:'6px 10px', textAlign:'center', color:'#0284C7' }}>{ms.data.Moisture || '—'}</td>
                                  <td style={{ padding:'6px 10px', textAlign:'center', color:'#16A34A' }}>{ms.data.Fertility || '—'}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      )}

{/* Photos */}
                      {photos.length > 0 && (
                        <div>
                          <div style={{ fontSize:11, fontWeight:800, color:C.muted, marginBottom:8 }}>📸 PHOTOS ({photos.length})</div>
                          <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                            {photos.map((ph, i) => (
                              <div key={i} style={{ position:'relative', width:120, height:120, borderRadius:8, overflow:'hidden', border:'1px solid #E8E0D8', flexShrink:0 }}>
                                <img
                                  src={ph.url}
                                  alt={`Photo ${i+1}`}
                                  style={{ width:'100%', height:'100%', objectFit:'cover' }}
                                  onClick={() => window.open(ph.url, '_blank')}
                                  title={ph.parcel_name || ''}
                                />
                                {ph.parcel_name && (
                                  <div style={{ position:'absolute', bottom:0, left:0, right:0, background:'rgba(0,0,0,0.55)', color:'#fff', fontSize:9, fontWeight:700, padding:'3px 6px', textAlign:'center' }}>{ph.parcel_name}</div>
                                )}
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Tendances (Chart.js) ──────────────────────────────────────────────────────
// ── Farm Digital Brain — Cerveau IA Tab ──────────────────────────────────────
function CerveauTab({ data, db }) {
  const [selectedBloc, setSelectedBloc] = React.useState(null);
  const [synthesizing, setSynthesizing] = React.useState(false);
  const [synthBloc, setSynthBloc] = React.useState(null);

const CARD = { background:"#fff", border:"1px solid #E8E0D0", borderRadius:12, padding:"14px 16px" };
  const LABEL_SM = { fontSize:10, fontWeight:700, color:C.muted, textTransform:"uppercase", letterSpacing:"0.06em", marginBottom:6 };

const BLOCS = ['b1','b2','b3','b4','b5','b6','b7','b8','b9','b10','b11'];

// Normalize "Parcel N" / "Bloc N" / "bN" → "bN"
  function canonicalBloc(name) {
    if (!name) return null;
    const n = String(name).toLowerCase().trim();
    for (let i = 1; i <= 11; i++) {
      if (n === `b${i}` || n === `bloc ${i}` || n === `bloc${i}` ||
          n === `parcel ${i}` || n === `parcel${i}` ||
          n.startsWith(`b${i} `) || n.startsWith(`b${i}-`) ||
          n.startsWith(`bloc ${i} `) || n.startsWith(`parcel ${i} `)) return `b${i}`;
    }
    return null;
  }

// Build visits map {bloc → [{date, metrics, scribeNotes, photoInsights, alerts, sender}]}
  // Each visit_bundle may contain measurements for MULTIPLE parcels in the measurements array.
  const visitsByBloc = React.useMemo(() => {
    const result = {};
    (data.messages || []).forEach(msg => {
      if (msg.media_type !== 'visit_bundle' || !msg.content) return;
      try {
        const payload = typeof msg.content === 'string' ? JSON.parse(msg.content) : msg.content;
        const topBloc = canonicalBloc(payload.parcel_name || '');
        const allMeasurements = Array.isArray(payload.measurements) ? payload.measurements : [];

// Parse full Scribe AI notes
        let scribeNotes = {};
        try { scribeNotes = msg.notes ? (typeof msg.notes === 'string' ? JSON.parse(msg.notes) : msg.notes) : {}; } catch(e) {}
        const getL = (f) => { if (!f) return ''; if (typeof f === 'string') return f; return f.fr || f.en || Object.values(f)[0] || ''; };
        const execSummary = getL(scribeNotes.executive_summary);
        const detailedReport = getL(scribeNotes.detailed_agronomist_report);
        const criticalAlerts = (scribeNotes.critical_alerts || []).map(getL);
        const parcelSynthesis = scribeNotes.parcel_synthesis || [];

// photo_insights: keep per-tree observations
        const photoInsights = (scribeNotes.photo_insights || []).map(ph => ({
          parcel: ph.parcel_name || '',
          time: ph.time || '',
          description: ph.ai_insight ? (ph.ai_insight.description || '') : '',
          insight: ph.ai_insight ? getL(ph.ai_insight.insight) : '',
          transcript: ph.audio_transcription ? (getL(ph.audio_transcription.translation) || ph.audio_transcription.original_transcript || '') : '',
        })).filter(ph => ph.description || ph.transcript);

// Per-measurement soil metrics
        const byParcel = {};
        allMeasurements.forEach(m => {
          if (m.type !== 'soil' || !m.data) return;
          const bloc = canonicalBloc(m.parcel_name || '');
          if (!bloc) return;
          if (!byParcel[bloc]) byParcel[bloc] = {};
          Object.entries(m.data).forEach(([k, v]) => {
            const num = parseFloat(String(v).replace(/[^0-9.-]/g, ''));
            if (!isNaN(num)) byParcel[bloc][k] = num;
          });
        });

if (topBloc && !byParcel[topBloc] && allMeasurements.length === 0) byParcel[topBloc] = {};

const date = msg.date;

Object.entries(byParcel).forEach(([bloc, metrics]) => {
          if (!result[bloc]) result[bloc] = {};
          // Per-bloc parcel synthesis from Scribe
          const blocSynth = parcelSynthesis.find(ps => canonicalBloc(ps.parcel_name || '') === bloc);
          if (!result[bloc][date] || Object.keys(metrics).length > Object.keys(result[bloc][date].metrics || {}).length) {
            result[bloc][date] = {
              date, metrics,
              execSummary: blocSynth ? getL(blocSynth.summary) : execSummary,
              detailedReport,
              criticalAlerts,
              photoInsights: photoInsights.filter(ph => !ph.parcel || canonicalBloc(ph.parcel) === bloc || !canonicalBloc(ph.parcel)),
              sender: msg.sender || 'Consultant',
              msgId: msg.id,
            };
          }
        });
      } catch(e) { console.warn('CerveauTab parse error:', e); }
    });
    const flat = {};
    Object.entries(result).forEach(([bloc, byDate]) => {
      flat[bloc] = Object.values(byDate).sort((a,b) => b.date.localeCompare(a.date));
    });
    return flat;
  }, [data.messages]);

// parcel_brain map
  const brainMap = React.useMemo(() => {
    const m = {};
    (data.parcelBrain || []).forEach(b => { m[b.id] = b; });
    return m;
  }, [data.parcelBrain]);

// Heuristic health score (0-10) from latest metrics when no AI synthesis exists
  function computeHeuristicScore(bloc) {
    const visits = visitsByBloc[bloc];
    if (!visits || visits.length === 0) return null;
    const m = visits[0].metrics;
    let score = 7.0;
    const hum = m['Moisture'];
    if (hum != null) {
      if (hum < 30 || hum > 92) score -= 2;
      else if (hum < 42 || hum > 82) score -= 1;
    }
    const ph = m['pH'];
    if (ph != null) {
      if (ph < 6.0 || ph > 7.5) score -= 1.5;
      else if (ph < 6.3 || ph > 7.2) score -= 0.5;
    }
    return Math.max(1, Math.min(10, score));
  }

function getBlocScore(bloc) {
    const brain = brainMap[bloc];
    if (brain?.healthScore != null) return +brain.healthScore;
    return computeHeuristicScore(bloc);
  }

function scoreColor(s) {
    if (s == null) return C.muted;
    if (s >= 7.5) return '#16A34A';
    if (s >= 5.5) return '#D97706';
    return '#DC2626';
  }

// SVG inline sparkline
  function Sparkline({ values, color, width, height }) {
    var w = width || 70; var h = height || 24;
    var clean = (values || []).filter(function(v){ return v != null && !isNaN(v); });
    if (clean.length < 2) return React.createElement('span', {style:{color:'rgba(255,255,255,0.2)',fontSize:9}}, '—');
    var min = Math.min.apply(null, clean);
    var max = Math.max.apply(null, clean);
    var range = max - min || 1;
    var pts = clean.map(function(v,i){
      var x = (i/(clean.length-1))*w;
      var y = h - ((v-min)/range)*(h-4) - 2;
      return x+','+y;
    }).join(' ');
    var lx = w; var ly = h - ((clean[clean.length-1]-min)/range)*(h-4) - 2;
    return React.createElement('svg',{width:w,height:h,style:{display:'block',overflow:'visible'}},
      React.createElement('polyline',{points:pts,fill:'none',stroke:color,strokeWidth:'1.5',strokeLinecap:'round',strokeLinejoin:'round'}),
      React.createElement('circle',{cx:lx,cy:ly,r:'2.5',fill:color})
    );
  }

// Get ordered metric history for a bloc (oldest→newest)
  function metricHistory(bloc, label) {
    return (visitsByBloc[bloc]||[]).slice().reverse().map(function(v){
      var val = v.metrics[label] ?? v.metrics[label.toLowerCase()] ?? null;
      if (val == null) return null;
      return typeof val === 'number' ? val : null;
    });
  }

const METRIC_DEFS = [
    { label:'pH',       dark:'#4F46E5', unit:'' },
    { label:'Moisture', dark:'#0284C7', unit:'%', display:'Humidité' },
    { label:'Fertility',dark:'#16A34A', unit:' µs', display:'Fertilité' },
    { label:'Calibre',  dark:'#EA580C', unit:'', display:'Calibre' },
  ];

// Build timeline events for a bloc
  function getTimeline(bloc) {
    var events = [];
    // Visits
    (visitsByBloc[bloc]||[]).forEach(function(v){
      events.push({date:v.date, type:'visit', icon:'🔬', label:'Visite Lhoussain', sub:v.summary ? v.summary.slice(0,90) : ''});
    });
    // Fertigation log
    (data.fertigationLogHistory||[]).filter(function(r){ return canonicalBloc(r.blocName)===bloc; }).forEach(function(r){
      var ingr = (r.ingredients||[]).map(function(i){ return i.name; }).join(', ');
      events.push({date:r.date, type:'fertigation', icon:'💉', label:'Fertigation', sub:ingr});
    });
    // Foliar sessions — show all (farm-wide)
    (data.foliarProgrammes||[]).forEach(function(prog){
      (prog.sessions||[]).forEach(function(s){
        events.push({date:s.date, type:'foliar', icon:'🌿', label:'Foliaire: '+prog.name, sub:''});
      });
    });
    // Irrigation — show all for now (no per-bloc filter in current data model)
    (data.irrigation||[]).slice(0,30).forEach(function(irr){
      events.push({date:irr.date, type:'irrigation', icon:'💧', label:'Irrigation '+(irr.zone||''), sub:irr.notes||''});
    });
    events.sort(function(a,b){ return b.date.localeCompare(a.date); });
    return events.slice(0, 40);
  }

const typeColors = {
    visit:       {bg:'#EEF2FF', border:'#A5B4FC', text:'#4338CA'},
    fertigation: {bg:'#ECFDF5', border:'#6EE7B7', text:'#065F46'},
    foliar:      {bg:'#F7FEE7', border:'#BEF264', text:'#3F6212'},
    irrigation:  {bg:'#E0F2FE', border:'#7DD3FC', text:'#0369A1'},
  };

// Match a fertigation_log bloc_name (e.g. "Bloc 3 – Valenciana Maroc Late") to a canonical bloc id
  function fertigBlocMatch(blocName, bloc) {
    return canonicalBloc(blocName) === bloc;
  }

// Get parcel info for a bloc
  function getBlocParcel(bloc) {
    return (data.parcels || []).find(function(p){ return canonicalBloc(p.name || '') === bloc; }) || null;
  }

// Run Gemini synthesis for a bloc
  async function runSynthesis(bloc) {
    var geminiKey = data.settings && data.settings.geminiKey;
    if (!geminiKey) { alert("Ajoutez votre clé Gemini dans Paramètres."); return; }
    setSynthesizing(true); setSynthBloc(bloc);
    try {
      // ── 0. Parcel identity — crop type and variety from DB
      var parcel = getBlocParcel(bloc);
      var cropType = parcel ? (parcel.cropType || parcel.crop_type || '') : 'Unknown';
      var parcelName = parcel ? parcel.name : bloc.toUpperCase();

// ── 1. Visit history with full Scribe AI notes + per-tree photo observations
      var visits = (visitsByBloc[bloc]||[]).map(function(v){
        return {
          date: v.date,
          consultant: v.sender,
          soil_metrics: v.metrics,
          agronomist_summary: v.execSummary || '',
          detailed_report: v.detailedReport ? v.detailedReport.slice(0, 800) : '',
          critical_alerts: v.criticalAlerts || [],
          tree_observations: (v.photoInsights || []).map(function(ph){
            return (ph.parcel ? '['+ph.parcel+'] ' : '') + (ph.transcript || ph.description || '');
          }).filter(Boolean).slice(0, 20),
        };
      });

// ── 2. Fertigation log: per-event ingredient quantities for this bloc
      // Note: bloc_name in DB is full zone name e.g. "Bloc 3 – Valenciana Maroc Late"
      var fertigRaw = (data.fertigationLogHistory||[])
        .filter(function(r){ return fertigBlocMatch(r.blocName, bloc); });

// Recent daily events (last 20) for context
      var fertig = fertigRaw.slice(0, 20).map(function(r){
        return {
          date: r.date,
          time: r.timeStr || '',
          inputs: (r.ingredients||[]).map(function(i){
            return (i.amount||i.qty||'?') + ' ' + (i.unit||'') + ' ' + (i.name||'');
          }),
        };
      });

console.log('[CerveauTab] runSynthesis', bloc, '— fertigRaw:', fertigRaw.length, 'records matched');

// Monthly cumulative totals per ingredient (better signal for agronomic assessment)
      var fertigMonthly = {};
      fertigRaw.forEach(function(r){
        var month = r.date.slice(0,7);
        if (!fertigMonthly[month]) fertigMonthly[month] = {};
        (r.ingredients||[]).forEach(function(i){
          var key = i.name || 'Unknown';
          if (!fertigMonthly[month][key]) fertigMonthly[month][key] = { total: 0, unit: i.unit || '' };
          fertigMonthly[month][key].total += (parseFloat(i.amount||i.qty||0) || 0);
        });
      });
      var fertigSummary = Object.entries(fertigMonthly).sort(function(a,b){ return b[0].localeCompare(a[0]); }).slice(0,4).map(function(entry){
        var month = entry[0], totals = entry[1];
        return month + ': ' + Object.entries(totals).map(function(e){ return e[1].total.toFixed(1)+' '+e[1].unit+' '+e[0]; }).join(', ');
      });

// ── 3. Fertigation recipe currently assigned to this bloc
      // Programme groupings: Olives = B1+B2 (same recipe), Citrus = B3–B11
      var OLIVE_BLOCS = ['b1','b2'];
      var isOliveBloc = OLIVE_BLOCS.indexOf(bloc) !== -1;
      var recipeLookupBlocs = isOliveBloc ? OLIVE_BLOCS : [bloc]; // if olive, check any olive bloc
      var assignedRecipe = (data.fertigationRecipes||[]).find(function(r){
        return (r.blocs||[]).some(function(b){
          return recipeLookupBlocs.indexOf(canonicalBloc(b)) !== -1;
        });
      });
      var recipeInfo = assignedRecipe ? {
        name: assignedRecipe.name,
        variety: assignedRecipe.variety,
        applies_to: isOliveBloc ? 'Olive blocs B1 and B2 (same programme, same quantities per bloc)' : ('Citrus bloc ' + bloc.toUpperCase()),
        products: (assignedRecipe.products||[]).map(function(p){
          return (p.qty_per_ha||p.qty||'?') + ' ' + (p.unit||'') + ' ' + (p.name||p.fertilizer_name||'');
        }),
        notes: assignedRecipe.notes || '',
      } : null;

// ── 4. Foliar treatments (programme name + mix per sprayer)
      var foliar = (data.foliarProgrammes||[]).flatMap(function(p){
        var mix = (p.mix||[]).map(function(m){ return (m.qty_per_sprayer||'?')+' '+(m.unit||'')+' '+m.product_name; }).join(', ');
        return (p.sessions||[]).map(function(s){
          return { date: s.date, programme: p.name, mix: mix, sprayers: s.sprayer_count };
        });
      }).sort(function(a,b){ return b.date.localeCompare(a.date); }).slice(0, 20);

// ── 5. Phyto applications (farm-wide)
      var phyto = (data.phytoApplications||[])
        .sort(function(a,b){ return b.date.localeCompare(a.date); })
        .slice(0, 15)
        .map(function(a){
          return { date: a.date, product: a.productName, qty: a.qtyUsed+' '+a.unit, method: a.method, phi_days: a.phi };
        });

// ── 6. Leaf analyses for this parcel
      var leaves = (data.leafAnalyses||[])
        .filter(function(a){ return canonicalBloc(a.parcelle||a.zone_id||'') === bloc; })
        .sort(function(a,b){ return (b.date_analyse||'').localeCompare(a.date_analyse||''); })
        .slice(0, 5)
        .map(function(a){
          return { date: a.date_analyse, N: a.n_total, P: a.p, K: a.k, Mg: a.mg, Ca: a.ca, B: a.b, Zn: a.zn, Fe: a.fe };
        });

var isOliveBlocPrompt = isOliveBloc;
      var prompt = `You are an expert agronomist analyzing ${parcelName} (internal id: ${bloc.toUpperCase()}) at Domaine Al Baraka farm in the Souss-Massa region of Morocco.

FARM PROGRAMME STRUCTURE (important context):
- Olive programme: applies to B1 (Arbequina) and B2 (Arbosana) — they receive identical fertilizer types and quantities per bloc.
- Citrus programme: applies to B3 through B11 — all citrus blocs.
- Quantities in the fertigation log are recorded per individual bloc by the irrigateur.
- The agronomist (Lhoussain) defines the weekly programme; the irrigateur (Salah) executes and logs it daily.
${isOliveBlocPrompt ? '- Leaf mineral analyses are NOT performed on olive blocs. Do not flag the absence of leaf analysis as an issue for this bloc.' : ''}

Crop type for this bloc: ${cropType || 'Unknown — do NOT assume citrus; use only what is stated here'}.
IMPORTANT: Base your analysis strictly on the data below. Do not assume the crop type — it is specified above.

## Visit History (most recent first — includes field consultant notes and per-tree observations)
${JSON.stringify(visits, null, 2)}

## Fertigation — Monthly Cumulative Totals for ${parcelName} (last 4 months)
${fertigSummary.length > 0 ? fertigSummary.join('\n') : 'No fertigation records found'}

## Fertigation — Recent Daily Events (last 20 applications)
${JSON.stringify(fertig, null, 2)}

## Current Fertigation Recipe Assigned to ${bloc.toUpperCase()}
${recipeInfo ? JSON.stringify(recipeInfo, null, 2) : 'None assigned'}

## Foliar Treatment History (farm-wide)
${JSON.stringify(foliar, null, 2)}

## Phytosanitary Applications (farm-wide)
${JSON.stringify(phyto, null, 2)}

## Leaf Mineral Analyses for ${bloc.toUpperCase()}
${leaves.length > 0 ? JSON.stringify(leaves, null, 2) : (isOliveBlocPrompt ? 'Not applicable — leaf analyses are not conducted on olive blocs at this farm.' : 'No leaf analyses recorded yet for this bloc.')}

Based on ALL of the above — soil metrics, consultant field observations, per-tree photos, actual fertilizer inputs, foliar and phyto treatments, and leaf analyses — provide a rigorous agronomic synthesis.

Return ONLY valid JSON:
{
  "health_score": <number 1.0–10.0, 10=excellent>,
  "summary": "<2–3 sentences: current agronomic state, most important fact>",
  "open_issues": ["<issue still present or worsening, cite data>"],
  "resolved_issues": ["<issue that improved, cite evidence>"],
  "trends": ["<cross-visit trend — e.g. moisture recovering, K declining>"],
  "input_assessment": "<1–2 sentences on whether fertigation inputs match crop needs given current data>",
  "recommendations": ["<specific, actionable recommendation for next 30 days>"]
}`;

var selected = selectedBloc;
  var brain = selected ? (brainMap[selected] || null) : null;
  var synthesis = brain?.synthesis || null;

// Blocs that have at least one visit
  var blocsWithVisits = BLOCS.filter(function(b){ return (visitsByBloc[b]||[]).length > 0; });

async function runAllSyntheses() {
    if (blocsWithVisits.length === 0) { alert('Aucune visite enregistrée.'); return; }
    for (var i = 0; i < blocsWithVisits.length; i++) {
      await runSynthesis(blocsWithVisits[i]);
    }
  }

return React.createElement('div', null,
    // Header
    React.createElement('div', {style:{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:20}},
      React.createElement(SectionTitle, null, '🧠 Cerveau IA — Intelligence Agronomique'),
      React.createElement('div', {style:{display:'flex',alignItems:'center',gap:10}},
        React.createElement('div', {style:{fontSize:11,color:C.muted}},
          (data.parcelBrain||[]).length + ' blocs analysés · ' + (data.messages||[]).filter(function(m){return m.media_type==='visit_bundle';}).length + ' visites'
        ),
        blocsWithVisits.length > 0 && React.createElement('button', {
          onClick: runAllSyntheses,
          disabled: synthesizing,
          title: 'Régénérer la synthèse IA pour tous les blocs ayant des visites (' + blocsWithVisits.length + ')',
          style:{
            background: synthesizing ? '#EDE9FE' : '#7C3AED',
            border:'none', borderRadius:8,
            color: synthesizing ? '#6D28D9' : '#fff',
            padding:'6px 14px', fontSize:11, fontWeight:700, cursor: synthesizing ? 'not-allowed' : 'pointer',
            display:'flex', alignItems:'center', gap:6,
          }
        },
          synthesizing
            ? '⏳ ' + (synthBloc ? synthBloc.toUpperCase() + '…' : 'En cours…')
            : '🔄 Régénérer tous (' + blocsWithVisits.length + ')'
        )
      )
    ),

// Parcel grid — 4 columns
    React.createElement('div', {style:{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:24}},
      BLOCS.map(function(bloc){
        var visits = visitsByBloc[bloc] || [];
        var score = getBlocScore(bloc);
        var lastDate = visits[0]?.date || null;
        var latestMetrics = visits[0]?.metrics || {};
        var isSelected = selectedBloc === bloc;
        var hasBrain = !!brainMap[bloc];
        var sc = scoreColor(score);
        var parcel = getBlocParcel(bloc);
        var cropType = parcel ? (parcel.cropType || parcel.crop_type || '') : '';
        var isOlive = cropType.toLowerCase().includes('olive') || cropType.toLowerCase().includes('arbequina') || cropType.toLowerCase().includes('arbosana') || cropType.toLowerCase().includes('picholine');
        var cropIcon = isOlive ? '🫒' : '🍊';
        var cropLabel = cropType ? cropType.split('-').pop().trim().split(' ').slice(0,3).join(' ') : '';
        var fertigCount = (data.fertigationLogHistory||[]).filter(function(r){ return canonicalBloc(r.blocName)===bloc; }).length;
        return React.createElement('div', {
          key:bloc,
          onClick:function(){ setSelectedBloc(isSelected ? null : bloc); },
          style:{
            cursor:'pointer', borderRadius:12, padding:'12px 14px',
            background: isSelected ? (score>=7.5?'#EDF7F2':score>=5.5?'#FEF9EC':'#FEF0EF') : '#fff',
            border:'2px solid ' + (isSelected ? sc : (hasBrain ? '#7C3AED44' : '#E8E0D0')),
            boxShadow: isSelected ? '0 2px 8px rgba(0,0,0,0.08)' : 'none',
            transition:'all 0.18s',
          }
        },
          React.createElement('div', {style:{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:3}},
            React.createElement('div', {style:{fontWeight:700,fontSize:14,color:C.soil}}, cropIcon + ' ' + bloc.toUpperCase()),
            score != null
              ? React.createElement('div', {style:{fontWeight:800,fontSize:15,color:sc}}, score.toFixed(1))
              : React.createElement('div', {style:{fontSize:10,color:C.muted}}, 'N/A')
          ),
          cropLabel && React.createElement('div', {style:{fontSize:9,color:C.muted,marginBottom:3,fontStyle:'italic'}}, cropLabel),
          React.createElement('div', {style:{fontSize:10,color:C.muted,marginBottom:7,display:'flex',gap:8}},
            React.createElement('span', null, lastDate ? '↻ ' + lastDate : 'Aucune visite'),
            fertigCount > 0 && React.createElement('span', {style:{color:'#065F46'}}, '💉 ' + fertigCount + 'j')
          ),
          React.createElement('div', {style:{display:'flex',gap:4,flexWrap:'wrap'}},
            METRIC_DEFS.map(function(md){
              var val = latestMetrics[md.label];
              if (val == null) return null;
              return React.createElement('span', {key:md.label, style:{fontSize:9,fontWeight:700,color:'#fff',background:md.dark,borderRadius:4,padding:'2px 5px'}},
                (md.display||md.label).slice(0,3) + ': ' + val.toFixed(1) + md.unit
              );
            })
          ),
          hasBrain && React.createElement('div', {style:{fontSize:9,color:'#7C3AED',marginTop:6,fontWeight:600}}, '🧠 Synthèse IA disponible')
        );
      })
    ),

// Detail panel
    selected && React.createElement('div', {style:{...CARD, padding:20, marginBottom:20}},
      // Panel header
      React.createElement('div', {style:{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}},
        React.createElement('div', {style:{fontWeight:700,fontSize:18,color:C.soil}}, selected.toUpperCase() + ' — Fiche parcelle'),
        React.createElement('div', {style:{display:'flex',gap:8,alignItems:'center'}},
          getBlocScore(selected) != null && React.createElement('div', {style:{
            background: getBlocScore(selected)>=7.5?'#D1FAE5':getBlocScore(selected)>=5.5?'#FEF3C7':'#FEE2E2',
            border:'1.5px solid ' + scoreColor(getBlocScore(selected)),
            borderRadius:20, padding:'4px 14px', fontWeight:800, fontSize:15, color:scoreColor(getBlocScore(selected))
          }}, '⭐ ' + getBlocScore(selected).toFixed(1) + ' / 10'),
          React.createElement('button', {
            onClick:function(){ runSynthesis(selected); },
            disabled:synthesizing && synthBloc===selected,
            style:{
              background: synthesizing&&synthBloc===selected ? '#EDE9FE' : C.citrus,
              border:'none', borderRadius:8,
              color: synthesizing&&synthBloc===selected ? '#6D28D9' : '#fff',
              padding:'7px 16px', fontSize:12, fontWeight:700, cursor:'pointer'
            }
          }, synthesizing&&synthBloc===selected ? '⏳ Analyse en cours...' : '🔄 Régénérer IA')
        )
      ),

// Two-column layout: sparklines left, timeline right
      React.createElement('div', {style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:16}},

// Left: Metric sparklines
        React.createElement('div', null,
          React.createElement('div', {style:LABEL_SM}, 'Évolution des métriques'),
          METRIC_DEFS.map(function(md){
            var history = metricHistory(selected, md.label);
            var lastVal = history.filter(function(v){return v!=null;}).slice(-1)[0];
            var nPts = (visitsByBloc[selected]||[]).length;
            return React.createElement('div', {key:md.label, style:{display:'flex',alignItems:'center',gap:10,marginBottom:8,background:'#FAF6EE',borderRadius:8,padding:'8px 10px'}},
              React.createElement('div', {style:{width:78, flexShrink:0}},
                React.createElement('div', {style:{fontSize:10,fontWeight:700,color:md.dark,marginBottom:2}}, md.display||md.label),
                React.createElement('div', {style:{fontSize:13,fontWeight:800,color:C.soil}}, lastVal!=null ? lastVal.toFixed(1)+md.unit : '—')
              ),
              React.createElement(Sparkline, {values:history, color:md.dark, width:100, height:26}),
              React.createElement('div', {style:{fontSize:9,color:C.muted,marginLeft:'auto'}}, nPts + ' pts')
            );
          })
        ),

// Right: Timeline
        React.createElement('div', null,
          React.createElement('div', {style:LABEL_SM}, 'Chronologie des interventions'),
          React.createElement('div', {style:{maxHeight:240,overflowY:'auto'}},
            getTimeline(selected).slice(0,20).map(function(ev,i){
              var tc = typeColors[ev.type] || typeColors.visit;
              return React.createElement('div', {key:i, style:{display:'flex',gap:7,marginBottom:5}},
                React.createElement('div', {style:{flexShrink:0,paddingTop:2,fontSize:13}}, ev.icon),
                React.createElement('div', {style:{flex:1,background:tc.bg,border:'1px solid '+tc.border,borderRadius:7,padding:'5px 9px'}},
                  React.createElement('div', {style:{display:'flex',gap:6,alignItems:'center',marginBottom:1}},
                    React.createElement('span', {style:{fontSize:10,fontWeight:700,color:tc.text}}, ev.label),
                    React.createElement('span', {style:{fontSize:9,color:C.muted,marginLeft:'auto'}}, ev.date)
                  ),
                  ev.sub && React.createElement('div', {style:{fontSize:9,color:C.bark,lineHeight:1.3}}, ev.sub)
                )
              );
            })
          )
        )
      ),

// AI Synthesis card
      synthesis
        ? React.createElement('div', {style:{background:'#F5F3FF',border:'1px solid #C4B5FD',borderRadius:12,padding:16}},
            React.createElement('div', {style:{fontSize:10,fontWeight:700,color:'#7C3AED',marginBottom:10,textTransform:'uppercase',letterSpacing:'0.06em'}},
              '🧠 Synthèse IA · Mise à jour: ' + (brain?.updatedAt ? brain.updatedAt.slice(0,10) : '?')
            ),
            synthesis.summary && React.createElement('div', {style:{fontSize:13,color:C.soil,lineHeight:1.65,marginBottom:10}}, synthesis.summary),
            synthesis.input_assessment && React.createElement('div', {style:{background:'#ECFDF5',border:'1px solid #6EE7B7',borderRadius:8,padding:'8px 12px',marginBottom:14,fontSize:12,color:'#065F46',lineHeight:1.55}},
              React.createElement('span', {style:{fontWeight:700,marginRight:6}}, '💉 Intrants:'),
              synthesis.input_assessment
            ),
            React.createElement('div', {style:{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}},
              synthesis.open_issues?.length > 0 && React.createElement('div', null,
                React.createElement('div', {style:{fontSize:10,fontWeight:700,color:C.danger,marginBottom:5}}, '⚠ Problèmes ouverts'),
                (synthesis.open_issues||[]).map(function(iss,i){ return React.createElement('div', {key:i, style:{fontSize:11,color:C.bark,marginBottom:4,paddingLeft:8,borderLeft:'2px solid '+C.danger}}, iss); })
              ),
              synthesis.resolved_issues?.length > 0 && React.createElement('div', null,
                React.createElement('div', {style:{fontSize:10,fontWeight:700,color:C.success,marginBottom:5}}, '✓ Résolus'),
                (synthesis.resolved_issues||[]).map(function(r,i){ return React.createElement('div', {key:i, style:{fontSize:11,color:C.bark,marginBottom:4,paddingLeft:8,borderLeft:'2px solid '+C.success}}, r); })
              ),
              synthesis.trends?.length > 0 && React.createElement('div', null,
                React.createElement('div', {style:{fontSize:10,fontWeight:700,color:C.info,marginBottom:5}}, '📈 Tendances'),
                (synthesis.trends||[]).map(function(t,i){ return React.createElement('div', {key:i, style:{fontSize:11,color:C.bark,marginBottom:4,paddingLeft:8,borderLeft:'2px solid '+C.info}}, t); })
              ),
              synthesis.recommendations?.length > 0 && React.createElement('div', null,
                React.createElement('div', {style:{fontSize:10,fontWeight:700,color:C.citrus,marginBottom:5}}, '💡 Recommandations (30 jours)'),
                (synthesis.recommendations||[]).map(function(r,i){ return React.createElement('div', {key:i, style:{fontSize:11,color:C.bark,marginBottom:4,paddingLeft:8,borderLeft:'2px solid '+C.citrus}}, r); })
              )
            )
          )
        : React.createElement('div', {style:{background:'#F5F3FF',border:'1px dashed #C4B5FD',borderRadius:12,padding:20,textAlign:'center'}},
            React.createElement('div', {style:{fontSize:13,color:'#7C3AED',marginBottom:6,fontWeight:600}}, '🧠 Aucune synthèse IA pour ce bloc'),
            React.createElement('div', {style:{fontSize:11,color:C.muted}}, 'Cliquez "Régénérer IA" pour générer une analyse agronomique.')
          )
    ),

// Empty state
    !selected && Object.values(visitsByBloc).every(function(v){return v.length===0;}) &&
      React.createElement('div', {style:{textAlign:'center',padding:'48px 20px',color:C.muted,fontSize:13}},
        '📋 Aucune visite agronomique enregistrée. Les visites de Lhoussain apparaîtront ici.'
      )
  );
}

function TendancesTab({ data }) {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

useEffect(() => {
    if (!data || !data.messages) return;

// 1. Parse live data from Supabase messages
    const parcelData = {}; // Format: { "Bloc 8": { "2026-03-19": 65, "2026-03-20": 68 } }
    const allDates = new Set();

data.messages.forEach(msg => {
      if (msg.media_type === 'visit_bundle' && msg.content) {
        try {
          const payload = JSON.parse(msg.content);
          const parcelName = payload.parcel_name || "Inconnu";
          const date = msg.date;

if (payload.measurements) {
            payload.measurements.forEach(m => {
              if (m.type === 'soil' && m.data && m.data.Moisture) {
                // Extract the number from "76%"
                const moistureVal = parseFloat(m.data.Moisture.replace('%', ''));
                if (!isNaN(moistureVal)) {
                  if (!parcelData[parcelName]) parcelData[parcelName] = {};
                  parcelData[parcelName][date] = moistureVal;
                  allDates.add(date);
                }
              }
            });
          }
        } catch (e) {
          console.error("Error parsing visit bundle:", e);
        }
      }
    });

// 2. Sort dates chronologically
    const sortedDates = Array.from(allDates).sort();

// 3. Build Chart.js Datasets
    const colors = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'];
    const datasets = Object.keys(parcelData).map((parcelName, index) => {
      const color = colors[index % colors.length];
      
      // Map data points to the sorted dates, filling gaps with null
      const dataPoints = sortedDates.map(date => parcelData[parcelName][date] || null);

return {
        label: `Humidité (%) - ${parcelName}`,
        data: dataPoints,
        borderColor: color,
        backgroundColor: color.replace(')', ', 0.2)').replace('rgb', 'rgba'),
        tension: 0.4,
        spanGaps: true // Connects lines even if a day was skipped
      };
    });

// 4. Render the Chart
    if (chartInstance.current) {
      chartInstance.current.destroy();
    }
    
    const ctx = chartRef.current.getContext('2d');
    Chart.defaults.color = '#E8D5A3';
    Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';

chartInstance.current = new Chart(ctx, {
      type: 'line',
      data: {
        labels: sortedDates.length > 0 ? sortedDates : ['Aucune Donnée'],
        datasets: datasets.length > 0 ? datasets : [{ label: 'En attente de visites...', data: [] }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          title: { display: true, text: 'Évolution de l\'Humidité du Sol (Mesures OCR)', font: { size: 18 } },
          legend: { position: 'bottom' }
        },
        scales: { y: { min: 0, max: 100 } }
      }
    });

return () => {
      if (chartInstance.current) chartInstance.current.destroy();
    };
  }, [data]); // Re-run whenever data updates!

return (
    <div>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18 }}>
        <SectionTitle>📈 Tendances Agronomiques</SectionTitle>
      </div>
      <Card style={{ padding: '20px', background: '#2C1A0E', border: '1px solid rgba(255,255,255,0.1)', height: '550px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flexGrow: 1, position: 'relative' }}>
          <canvas ref={chartRef}></canvas>
        </div>
      </Card>
    </div>
  );
}

const NAV = [
  {id:"dashboard",icon:"🌿"},{id:"messages",icon:"📡"},{id:"visites",icon:"🔬"},{id:"cerveau",icon:"🧠"},{id:"consumption",icon:"📊"},{id:"expenses",icon:"💰"},
  {id:"fertigation",icon:"💉"},{id:"tendances",icon:"📈"},{id:"tasks",icon:"📋"},{id:"irrigation",icon:"💧"},
  {id:"harvest",icon:"🍊"},{id:"pests",icon:"🐛"},{id:"fertilizers",icon:"🌱"},
  {id:"workers",icon:"👷"},{id:"consultants",icon:"🧑‍💼"},{id:"analyses",icon:"🌿"},{id:"phyto",icon:"🧪"},{id:"foliaire",icon:"🌿"},{id:"energy",icon:"⚡"},
  {id:"oliveoil",icon:"🫒"},{id:"settings",icon:"⚙️"},
  {id:"about",icon:"ℹ️"},
];

const STORAGE_KEY = "domaine-albaraka-v2";

window.askAgronomist = async function(btn, data) {
        const originalText = btn.innerText;
        btn.innerText = "⏳ Analyse en cours...";
        btn.disabled = true;
        try {
            let key = "";
            const settings = localStorage.getItem("albaraka_settings");
            if(settings) key = JSON.parse(settings).geminiKey;
            if(!key) throw new Error("Clé Gemini manquante dans les Paramètres.");

const prompt = `Tu es un agronome expert au Maroc. Analyse ce rapport de type ${data.analysis_type || 'Foliaire'} pour la culture: ${data.culture} (Parcelle: ${data.parcelle}).
Données: N=${data.n_total}, P=${data.p}, K=${data.k}, Mg=${data.mg}, Ca=${data.ca}, pH=${data.pH_water || 'N/A'}, Bore=${data.b || 'N/A'}.
1. Identifie les carences ou excès critiques.
2. Donne 3 recommandations d'engrais ou d'actions correctives concrètes.
Sois concis, professionnel, et va droit au but.`;

// Delete message
  const deleteMsg = async (id) => {
    try {
      await sb.delete("chats", id);
      setMessages(prev => prev.filter(m => m.id !== id));
      setCtxMenu(null);
      console.log("🗑️ Deleted chat:", id);
    } catch(e) { console.error("Delete error:", e); }
  };

const AVATARS = {
    Brahim: "https://imzfqogxdbgqyobzhhvo.supabase.co/storage/v1/object/public/media/avatars/brahim.jpg",
    Lhoussain: "https://imzfqogxdbgqyobzhhvo.supabase.co/storage/v1/object/public/media/avatars/lhoussain.jpg",
    Jamal: "https://imzfqogxdbgqyobzhhvo.supabase.co/storage/v1/object/public/media/avatars/jamal2.jpg",
  };

// Load messages for current channel
  const loadMessages = useCallback(async () => {
    try {
      const rows = await sb.select("chats", `channel=eq.${channel}&order=created_at.asc&limit=100`);
      const mapped = (rows||[]).map(c => ({
        id:c.id, channel:c.channel, sender:c.sender, messageType:c.message_type,
        textContent:c.text_content, audioUrl:c.audio_url, audioTranscription:c.audio_transcription,
        mediaUrls:c.media_urls, replyTo:c.reply_to, createdAt:c.created_at,
        darijaText:c.darija_text, darijaAudioUrl:c.darija_audio_url,
      }));
      setMessages(mapped);
    } catch(e) { console.warn("Chat load error:", e); }
  }, [channel]);

useEffect(() => { loadMessages(); }, [channel, loadMessages]);

// Poll every 5s when open
  useEffect(() => {
    if (!open) return;
    const iv = setInterval(loadMessages, 5000);
    return () => clearInterval(iv);
  }, [open, loadMessages]);

// Count unread from chats data when closed
  useEffect(() => {
    if (!open && data.chats) {
      const recent = data.chats.filter(c => {
        const age = Date.now() - new Date(c.createdAt).getTime();
        return age < 3600000 && c.sender !== SENDER; // last hour, not from me
      });
      setUnread(recent.length);
    }
  }, [data.chats, open]);

// Scroll to bottom only when new messages arrive AND user hasn't scrolled up
  useEffect(() => {
    const hasNew = messages.length > prevMsgCountRef.current;
    prevMsgCountRef.current = messages.length;
    if (open && bottomRef.current && (hasNew && !userScrolledUpRef.current)) {
      bottomRef.current.scrollIntoView({ behavior:"smooth" });
    }
  }, [messages, open]);

// Track whether user has scrolled up
  useEffect(() => {
    const el = chatBodyRef.current;
    if (!el) return;
    const onScroll = () => {
      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
      userScrolledUpRef.current = !atBottom;
    };
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, [open]);

// Translate to Darija + generate voice clone audio (fire-and-forget)
  const translateAndSpeak = async (msgId, originalText) => {
    try {
      let geminiKey = (data.settings && data.settings.geminiKey) || "";
      // Fallback: fetch from DB if not in state
      if (!geminiKey) {
        try {
          const sRows = await sb.select("settings", "limit=1");
          geminiKey = (sRows && sRows[0] && sRows[0].gemini_key) || "";
        } catch(e2) { console.warn("Settings fetch fallback failed:", e2); }
      }
      if (!geminiKey) { console.warn("No Gemini key — skipping Darija translation"); return; }

// 1. Translate to Moroccan Darija via Gemini
      const prompt = `You are a translator specializing in Moroccan Darija (الدارجة المغربية) as spoken in the Beni Mellal region.
Translate the following message to Moroccan Darija written in Arabic script.

CRITICAL RULES:
- Use REAL Moroccan Darija — NOT Tunisian, NOT Algerian, NOT Modern Standard Arabic, NOT Egyptian.
- Moroccan Darija is distinct: it drops vowels, uses specific vocabulary, and has French loanwords.

FARM VOCABULARY (MUST USE these exact terms):
- roots/trees → "جدور" (jdoor), NEVER "غروس"
- Navel (citrus variety) → "نافل" or "نافيل", NEVER "نابل" or "نابيل"
- Valenciana (citrus variety) → "بلصيانة" (balsyana)
- bloc/parcel → "بلوك" (blok)
- irrigation → "السقي" (sqi)
- fertilisation → "التسميد" (tsmid)
- treatment/spray → "الرش" (rsh)
- pump → "لبومبة" (boomba)
- motor/dynamo → "الموتور" or "دينامو"
- well → "لبير" (lbir)
- basin/pond → "الباسان" (bassan)
- foreman → "مقدم" (mqaddem)
- workers → "الخدامة" (lkhdama)
- olives → "الزيتون" (zitoun)
- Arbosana/Arbequina → keep as-is (olive varieties)

GENERAL DARIJA:
- "How are you?" → "لاباس؟" (NOT "كيف حالك")
- "Did it work?" → "واش خدمات؟" (NOT "هل اشتغلت")
- "I want to know" → "بغيت نعرف" (NOT "أريد أن أعرف")
- "Ibrahim/Brahim" → "براهيم" (NOT "إبراهيم")
- "water" → "لما" (NOT "الماء")
- "please" → "عافاك" (NOT "من فضلك")
- "good/fine" → "مزيان" (NOT "جيد")
- "a lot" → "بزاف" (NOT "كثير")
- "now" → "دابا" (NOT "الآن")
- "why" → "علاش" (NOT "لماذا")
- "because" → "حيت" or "على حقاش" (NOT "لأن")
- "nothing" → "والو" (NOT "لا شيء")

Context: Citrus & olive farm (GNAO-KIAF) in Beni Mellal, Morocco. 8 blocs: 3,4,5,6 = Valenciana, 7,8 = Navel, 1 = Arbosana, 2 = Arbequina. The message is from the farm owner (Jamal) to his foreman (Brahim).
Return ONLY the Darija translation in Arabic script, nothing else.

Message: ${originalText}`;

// 2. Generate voice audio via ElevenLabs
      const VOICE_ID = "y9RirtVoC323dSr3E154";
      const XI_KEY = "sk_c03a2fe02c41a17a8e12151b7c7562d6a19e0d9ed5b8a7fa";
      const ttsResp = await fetch("https://api.elevenlabs.io/v1/text-to-speech/" + VOICE_ID, {
        method:"POST",
        headers:{ "xi-api-key":XI_KEY, "Content-Type":"application/json" },
        body: JSON.stringify({ text:darijaText, model_id:"eleven_multilingual_v2", voice_settings:{stability:0.4,similarity_boost:1.0,style:0.5,use_speaker_boost:true} }),
      });
      if (!ttsResp.ok) { console.error("ElevenLabs TTS error:", ttsResp.status);
        // Still save the text even if TTS fails
        await sb.update("chats", msgId, { darija_text: darijaText });
        return;
      }
      const audioBlob = await ttsResp.blob();
      console.log("🔊 TTS audio generated:", audioBlob.size, "bytes");

// 3. Upload audio to Supabase storage via REST
      const fileName = `chat/darija_${Date.now()}.mp3`;
      const upResp = await fetch(`${SB_URL}/storage/v1/object/media/${fileName}`, {
        method:"POST", headers:{ "apikey":SB_KEY, "Authorization":`Bearer ${SB_KEY}`, "Content-Type":"audio/mpeg" },
        body: audioBlob,
      });
      if (!upResp.ok) { console.error("Upload error:", upResp.status, await upResp.text());
        await sb.update("chats", msgId, { darija_text: darijaText });
        return;
      }
      const audioUrl = `${SB_URL}/storage/v1/object/public/media/${fileName}`;
      console.log("🔊 Darija audio uploaded:", audioUrl);

// 4. Update the chat message with darija text + audio URL
      await sb.update("chats", msgId, { darija_text: darijaText, darija_audio_url: audioUrl });
      console.log("✅ Darija translation + audio saved for message:", msgId);
    } catch(e) { console.error("translateAndSpeak error:", e); }
  };

// Check message urgency via Gemini (fire-and-forget)
  const checkUrgency = async (msgId, text) => {
    try {
      const geminiKey = (data.settings && data.settings.geminiKey) || "";
      if (!geminiKey) return;
      const prompt = `You are a farm alert system for a citrus/olive farm in Morocco.
Analyze this chat message and determine if it contains URGENT content that requires immediate attention.
Urgent = breakdown, leak, equipment failure, pump failure, fire, theft, disease outbreak, pest invasion, flood, animal intrusion, worker injury, chemical spill, or any safety hazard.
NOT urgent = routine questions, instructions, greetings, scheduling, reports, stock updates.

Reply with ONLY "URGENT" or "NOT_URGENT" — nothing else.

Message: ${text}`;
      const resp = await fetch(
        "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=" + geminiKey,
        { method:"POST", headers:{"Content-Type":"application/json"},
          body: JSON.stringify({ contents:[{parts:[{text:prompt}]}], generationConfig:{temperature:0} }) }
      );
      if (!resp.ok) return;
      const d = await resp.json();
      const answer = (d.candidates?.[0]?.content?.parts?.[0]?.text||"").trim().toUpperCase();
      console.log("🚨 Urgency check result:", answer);
      if (answer.includes("URGENT") && !answer.includes("NOT_URGENT") && !answer.includes("NOT URGENT")) {
        await sb.update("chats", msgId, { is_urgent: true });
        console.log("🚨 Message flagged as URGENT:", msgId);
      } else {
        console.log("✅ Message not urgent:", msgId);
      }
    } catch(e) { console.error("checkUrgency error:", e); }
  };

// Send message
  const send = async () => {
    const t = text.trim();
    if (!t || sending) return;
    setSending(true);
    try {
      const inserted = await sb.insert("chats", {
        channel, sender: SENDER, message_type:"text", text_content:t,
      });
      setText("");
      await loadMessages();
      // Fire-and-forget: translate to Darija + generate voice + check urgency
      console.log("📤 Inserted message:", inserted);
      if (inserted && inserted.id) {
        translateAndSpeak(inserted.id, t);
        checkUrgency(inserted.id, t);
      } else {
        console.warn("⚠️ No inserted.id — post-send hooks skipped. inserted=", inserted);
      }
    } catch(e) { console.error("Send error:", e); }
    setSending(false);
  };

const fmtTime = (ts) => {
    try { return new Date(ts).toLocaleTimeString("fr",{hour:"2-digit",minute:"2-digit"}); } catch(e){ return ""; }
  };

const tabStyle = (active) => ({
    flex:1, padding:"6px 0", border:"none", borderRadius:8,
    background: active ? C.citrus : "transparent",
    color: active ? "#fff" : C.muted,
    fontSize:11, fontWeight:700, cursor:"pointer",
  });

if (!open) {
    // FAB button
    return (
      <div onClick={() => { setOpen(true); setUnread(0); }} style={{
        position:"fixed", bottom:24, right:24, zIndex:9000,
        width:56, height:56, borderRadius:"50%",
        background:`linear-gradient(135deg, #06B6D4, ${C.citrus})`,
        display:"flex", alignItems:"center", justifyContent:"center",
        cursor:"pointer", boxShadow:"0 4px 20px rgba(0,0,0,0.25)",
        transition:"transform 0.2s",
      }}>
        <span style={{ fontSize:24 }}>💬</span>
        {unread > 0 && (
          <span style={{
            position:"absolute", top:-4, right:-4,
            background:C.danger, color:"#fff", fontSize:10, fontWeight:800,
            width:20, height:20, borderRadius:"50%",
            display:"flex", alignItems:"center", justifyContent:"center",
          }}>{unread}</span>
        )}
      </div>
    );
  }

return (
    <div style={{
      position:"fixed", bottom:24, right:24, zIndex:9000,
      width:380, height:520, borderRadius:16,
      background:"#fff", boxShadow:"0 8px 40px rgba(0,0,0,0.2)",
      display:"flex", flexDirection:"column", overflow:"hidden",
      border:`1px solid rgba(0,0,0,0.08)`,
    }}>
      {/* Header */}
      <div style={{
        background:`linear-gradient(135deg, ${C.soil}, ${C.bark})`,
        padding:"12px 16px", display:"flex", alignItems:"center", gap:10,
      }}>
        <span style={{ fontSize:18 }}>💬</span>
        <span style={{ color:C.sand, fontWeight:700, fontSize:14, flex:1 }}>Messagerie</span>
        <span onClick={() => setOpen(false)} style={{
          color:"rgba(255,255,255,0.6)", fontSize:20, cursor:"pointer", lineHeight:1,
        }}>✕</span>
      </div>

{/* Channel tabs */}
      <div style={{ display:"flex", gap:4, padding:"8px 12px", background:"#F9F6F0" }}>
        <button style={tabStyle(channel==="technical")} onClick={() => setChannel("technical")}>🔧 Technique</button>
        <button style={tabStyle(channel==="internal")} onClick={() => setChannel("internal")}>🔒 Interne</button>
      </div>

{/* Messages */}
      <div ref={chatBodyRef} style={{ flex:1, overflowY:"auto", padding:"8px 12px", background:"#FAFAF8" }}>
        {messages.length === 0 && (
          <div style={{ textAlign:"center", color:C.muted, fontSize:12, marginTop:40 }}>Aucun message</div>
        )}
        {messages.map((m, i) => {
          const isMe = m.sender === SENDER;
          const firstName = (m.sender||"").split(" ")[0];
          const avatar = AVATARS[firstName] || AVATARS[m.sender];
          const content = m.textContent || m.audioTranscription || "";
          // Date separator
          const prevDate = i > 0 ? new Date(messages[i-1].createdAt).toDateString() : null;
          const thisDate = new Date(m.createdAt).toDateString();
          const showDate = i === 0 || thisDate !== prevDate;
          const todayStr = new Date().toDateString();
          const dateLabel = thisDate === todayStr ? "Aujourd'hui" : new Date(m.createdAt).toLocaleDateString("fr",{day:"numeric",month:"short"});

return (
            <React.Fragment key={m.id}>
              {showDate && (
                <div style={{ textAlign:"center", margin:"10px 0 6px", fontSize:10, color:C.muted }}>
                  <span style={{ background:"#F0EBE0", padding:"2px 10px", borderRadius:10 }}>{dateLabel}</span>
                </div>
              )}
              <div style={{ display:"flex", flexDirection:isMe?"row-reverse":"row", gap:6, marginBottom:8, alignItems:"flex-end" }}>
                {/* Avatar */}
                {avatar ? (
                  <img src={avatar} style={{ width:28, height:28, borderRadius:6, objectFit:"cover", flexShrink:0 }}
                    onError={(e) => { e.target.style.display="none"; }} />
                ) : (
                  <div style={{ width:28, height:28, borderRadius:6, background:C.olive, display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", fontSize:12, fontWeight:700, flexShrink:0 }}>
                    {(m.sender||"?")[0]}
                  </div>
                )}
                {/* Bubble */}
                <div
                  onContextMenu={(e) => { e.preventDefault(); setCtxMenu({ x:e.clientX, y:e.clientY, msgId:m.id, isMe }); }}
                  style={{
                  maxWidth:"75%", padding:"8px 12px", borderRadius:12,
                  background: isMe ? "#E0F2FE" : "#fff",
                  border: isMe ? "1px solid #BAE6FD" : "1px solid #F0EBE0",
                  boxShadow:"0 1px 3px rgba(0,0,0,0.04)",
                  cursor:"context-menu",
                }}>
                  {!isMe && <div style={{ fontSize:10, fontWeight:700, color:C.citrus, marginBottom:2 }}>{m.sender}</div>}
                  {/* Reply quote */}
                  {m.replyTo && (() => {
                    const orig = messages.find(x => x.id === m.replyTo);
                    if (!orig) return null;
                    return (
                      <div style={{ background:"rgba(0,0,0,0.04)", borderLeft:`3px solid ${C.citrus}`, borderRadius:4, padding:"4px 8px", marginBottom:4, fontSize:10, color:C.muted }}>
                        <strong>{orig.sender}</strong>: {(orig.textContent||orig.audioTranscription||"").slice(0,60)}
                      </div>
                    );
                  })()}
                  {/* Audio player */}
                  {m.audioUrl && (
                    <audio controls src={m.audioUrl} style={{ width:"100%", height:28, marginBottom:4 }} />
                  )}
                  {/* Photos */}
                  {m.mediaUrls && m.mediaUrls.length > 0 && (
                    <div style={{ display:"flex", gap:4, flexWrap:"wrap", marginBottom:4 }}>
                      {(typeof m.mediaUrls === "string" ? JSON.parse(m.mediaUrls) : m.mediaUrls).map((url,j) => (
                        <img key={j} src={url} style={{ width:80, height:60, objectFit:"cover", borderRadius:6, cursor:"pointer" }}
                          onClick={() => window.open(url,"_blank")} />
                      ))}
                    </div>
                  )}
                  {content && <div style={{ fontSize:12, color:C.soil, lineHeight:1.4, whiteSpace:"pre-wrap" }}>{content}</div>}
                  <div style={{ fontSize:9, color:C.muted, textAlign:"right", marginTop:3 }}>{fmtTime(m.createdAt)}</div>
                </div>
              </div>
            </React.Fragment>
          );
        })}
        <div ref={bottomRef} />
      </div>

{/* Context menu */}
      {ctxMenu && (
        <div onClick={() => setCtxMenu(null)} style={{ position:"fixed", inset:0, zIndex:9999 }}>
          <div style={{
            position:"fixed", left:ctxMenu.x, top:ctxMenu.y,
            background:"#fff", borderRadius:8, boxShadow:"0 4px 16px rgba(0,0,0,0.18)",
            border:"1px solid #E0DAD0", overflow:"hidden", minWidth:120,
          }}>
            <div onClick={() => deleteMsg(ctxMenu.msgId)} style={{
              padding:"8px 14px", fontSize:12, cursor:"pointer", color:C.danger, fontWeight:600,
              display:"flex", alignItems:"center", gap:6,
            }}
              onMouseEnter={(e) => e.target.style.background="#FEF2F2"}
              onMouseLeave={(e) => e.target.style.background="transparent"}
            >
              🗑️ Supprimer
            </div>
          </div>
        </div>
      )}

{/* Input */}
      <div style={{ display:"flex", gap:6, padding:"10px 12px", borderTop:"1px solid #F0EBE0", background:"#fff" }}>
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key==="Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
          placeholder="Écrire un message..."
          style={{ flex:1, padding:"8px 12px", borderRadius:10, border:"1px solid #E0DAD0", fontSize:12, outline:"none" }}
        />
        <button onClick={send} disabled={sending || !text.trim()} style={{
          padding:"8px 14px", borderRadius:10, border:"none",
          background: text.trim() ? C.citrus : "#E0DAD0",
          color: text.trim() ? "#fff" : C.muted,
          fontSize:12, fontWeight:700, cursor: text.trim() ? "pointer" : "default",
        }}>
          {sending ? "..." : "➤"}
        </button>
      </div>
    </div>
  );
}

// Scroll-preserving setData: saves scrollTop before every state update, restores after paint
  // Used for background polls and all db helpers so no update ever resets scroll position.
  const setData = React.useCallback((updater) => {
    const el = document.querySelector('[data-main-scroll]');
    const top = el ? el.scrollTop : 0;
    _setData(updater);
    if (top > 0) requestAnimationFrame(() => requestAnimationFrame(() => { const el2 = document.querySelector('[data-main-scroll]'); if (el2) el2.scrollTop = top; }));
  }, []);

// ── Boot: load from Supabase, fall back to localStorage ──────
  useEffect(()=>{
    const link=document.createElement("link"); link.rel="stylesheet";
    link.href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap";
    document.head.appendChild(link);
    document.body.style.margin="0"; document.body.style.background=C.cream;
    injectPWA(INIT.settings.farmName);

setSyncStatus("loading");
    loadAllData()
      .then(d => { setData(d); setSyncStatus("ok"); setSyncMsg(""); })
      .catch(err => {
        console.error("Supabase load failed:", err);
        // fall back to localStorage
        try {
          const raw = localStorage.getItem(STORAGE_KEY);
          if (raw) { setData({...INIT,...JSON.parse(raw)}); }
        } catch(e2) {}
        setSyncStatus("error");
        setSyncMsg("Hors ligne – données locales");
      });

// Auto-refresh every 30s (silent background poll) — skip while user is editing
    const _pollInterval = setInterval(()=>{
      if (window._editingRef && window._editingRef.current) return;
      loadAllData()
        .then(d => { setData(d); setSyncStatus("ok"); setSyncMsg(""); })
        .catch(()=>{}); // stay on cached data on error
    }, 30000);
    return () => clearInterval(_pollInterval);
  },[]);

// Persist lang
  useEffect(()=>{ try{localStorage.setItem(STORAGE_KEY+"-lang",lang);}catch(e){} },[lang]);

// ── Supabase write helpers (used by child views) ──────────────
  const db = {
    // Generic optimistic update: update local state immediately, then sync to Supabase
    addTask: async (row) => {
      const id = "t"+Date.now();
      const local = {...row, id};
      setData(d=>({...d,tasks:[...d.tasks,local]}));
      setSyncStatus("saving");
      try {
        await sb.insert("tasks",{id, title:row.title, zone_id:row.zone||null, assignee_id:row.assignee||null, due_date:row.due||null, status:row.status, season:row.season, priority:row.priority, notes:row.notes||""});
        setSyncStatus("ok");
      } catch(e){ setSyncStatus("error"); setSyncMsg(e.message); }
    },
    updateTask: async (row) => {
      setData(d=>({...d,tasks:d.tasks.map(t=>t.id===row.id?row:t)}));
      setSyncStatus("saving");
      try { await sb.update("tasks",row.id,{title:row.title,zone_id:row.zone||null,assignee_id:row.assignee||null,due_date:row.due||null,status:row.status,season:row.season,priority:row.priority,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteTask: async (id) => {
      setData(d=>({...d,tasks:d.tasks.filter(t=>t.id!==id)}));
      try { await sb.delete("tasks",id); } catch(e){}
    },
    addExpense: async (row) => {
      const id = "e"+Date.now();
      const local = {...row, id};
      setData(d=>({...d,expenses:[local,...d.expenses]}));
      setSyncStatus("saving");
      try { await sb.insert("expenses",{id,category:row.category,description:row.description,amount:+row.amount,date:row.date,zone_id:row.zone||null,notes:row.notes||"",media_url:row.media_url||null}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteExpense: async (id) => {
      setData(d=>({...d,expenses:d.expenses.filter(e=>e.id!==id)}));
      try { await sb.delete("expenses",id); } catch(e){}
    },
    updateExpense: async (row) => {
      setData(d=>({...d,expenses:d.expenses.map(e=>e.id===row.id?row:e)}));
      try { await sb.update("expenses",row.id,{description:row.description,amount:+row.amount,date:row.date,notes:row.notes||"",category:row.category}); setSyncStatus("ok"); } catch(e){console.warn(e);}
    },
    addIrrigation: async (row) => {
      const id="i"+Date.now(), local={...row,id};
      setData(d=>({...d,irrigation:[local,...d.irrigation]}));
      try { await sb.insert("irrigation",{id,zone_id:row.zone,date:row.date,duration_h:+row.duration,flow_m3h:+row.flow,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteIrrigation: async (id) => { setData(d=>({...d,irrigation:d.irrigation.filter(i=>i.id!==id)})); try{await sb.delete("irrigation",id);}catch(e){} },
    addHarvest: async (row) => {
      const id="h"+Date.now(), local={...row,id,qty:+row.qty||Math.round((+row.boxes||0)*(+row.avgKg||25.08)*100)/100};
      setData(d=>({...d,harvests:[local,...d.harvests]}));
      try { await sb.insert("harvests",{id,zone_id:row.zone,date:row.date,crop:row.crop||"Orange",
        boxes:+row.boxes||0,avg_kg_per_box:+row.avgKg||25.08,
        qty_kg:local.qty,quality:row.quality||"A",notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    updateHarvest: async function(row) {
        setData(function(d){ return {...d, harvests:d.harvests.map(function(h){ return h.id===row.id?row:h; })}; });
        try { await sb.update("harvests",{date:row.date,zone_id:row.zone,boxes:row.boxes||0,
          avg_kg_per_box:row.avgKg||25.08,qty_kg:row.qty,notes:row.notes||""},"id=eq."+row.id);
          setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteHarvest: async (id) => { setData(d=>({...d,harvests:d.harvests.filter(h=>h.id!==id)})); try{await sb.delete("harvests",id);}catch(e){} },
    addPest: async (row) => {
      const id="p"+Date.now(), local={...row,id};
      setData(d=>({...d,pests:[local,...d.pests]}));
      try { await sb.insert("pests",{id,zone_id:row.zone,name:row.name,status:row.status,detected_date:row.detected,treatment:row.treatment,severity:row.severity,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deletePest: async (id) => { setData(d=>({...d,pests:d.pests.filter(p=>p.id!==id)})); try{await sb.delete("pests",id);}catch(e){} },
    addFertilizer: async (row) => {
      const id="f"+Date.now(), local={...row,id};
      setData(d=>({...d,fertilizers:[...d.fertilizers,local]}));
      try { await sb.insert("fertilizers",{id,name:row.name,type:row.type,unit:row.unit,stock_qty:+row.stockQty,min_stock:+row.minStock,season_target:+row.seasonTarget||0,supplier:row.supplier,dose_per_ha:+row.dosePerHa,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    updateFertilizer: async (row) => {
      setData(d=>({...d,fertilizers:d.fertilizers.map(f=>f.id===row.id?row:f)}));
      try { await sb.update("fertilizers",row.id,{name:row.name,type:row.type,unit:row.unit,stock_qty:+row.stockQty,min_stock:+row.minStock,season_target:+row.seasonTarget||0,supplier:row.supplier,dose_per_ha:+row.dosePerHa,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteFertilizer: async (id) => { setData(d=>({...d,fertilizers:d.fertilizers.filter(f=>f.id!==id)})); try{await sb.delete("fertilizers",id);}catch(e){} },
    addFertApp: async (row) => {
      const id="fa"+Date.now(), local={...row,id};
      const qty=+row.qtyApplied;
      setData(d=>({ ...d, fertApplications:[local,...d.fertApplications], fertilizers:d.fertilizers.map(f=>f.id===row.fertilizerId?{...f,stockQty:Math.max(0,f.stockQty-qty)}:f) }));
      try {
        await sb.insert("fert_applications",{id,fertilizer_id:row.fertilizerId,zone_id:row.zone||null,date:row.date,qty_applied:qty,frequency:row.frequency,next_due:row.nextDue||null,method:row.method,notes:row.notes||""});
        // update stock in DB too
        const fert = data.fertilizers.find(f=>f.id===row.fertilizerId);
        if(fert) await sb.update("fertilizers",fert.id,{stock_qty:Math.max(0,fert.stockQty-qty)});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteFertApp: async (id) => { setData(d=>({...d,fertApplications:d.fertApplications.filter(a=>a.id!==id)})); try{await sb.delete("fert_applications",id);}catch(e){} },
    addOO: async (row) => {
      const id="oo"+Date.now(), local={...row,id};
      setData(d=>({...d,oliveoil:[local,...d.oliveoil]}));
      try { await sb.insert("olive_oil_batches",{id,campaign:row.campaign,date:row.date,zone_id:row.zone,olives_in_kg:+row.olivesIn,oil_out_l:+row.oilOut,press_location:row.pressLocation,acidity_pct:+row.acidity,peroxides:+row.peroxides,polyphenols_mg_kg:+row.polyphenols,k232:+row.k232,k268:+row.k268,classification:row.classification,notes:row.notes||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteOO: async (id) => { setData(d=>({...d,oliveoil:d.oliveoil.filter(o=>o.id!==id)})); try{await sb.delete("olive_oil_batches",id);}catch(e){} },
    addWorker: async (row) => {
      const id="w"+Date.now(), local={...row,id};
      setData(d=>({...d,workers:[...d.workers,local]}));
      try { await sb.insert("workers",{id,name:row.name,nickname:row.nickname||"",role:row.role,phone:row.phone,active:row.active!==false,daily_rate:+row.dailyRate,pay_type:row.payType}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    updateWorker: async (row) => {
      setData(d=>({...d,workers:d.workers.map(w=>w.id===row.id?row:w)}));
      try { await sb.update("workers",row.id,{name:row.name,nickname:row.nickname||"",role:row.role,phone:row.phone,daily_rate:+row.dailyRate,pay_type:row.payType}); setSyncStatus("ok"); } catch(e){console.warn(e);}
    },
    toggleWorker: async (id, active) => {
      setData(d=>({...d,workers:d.workers.map(w=>w.id===id?{...w,active}:w)}));
      try { await sb.update("workers",id,{active}); } catch(e){}
    },
    addLeafAnalysis: async (row) => {
      var id = "la" + Date.now();
      var local = {...row, id};
      ["n_total","p","k","mg","ca","na","cl","zn","cu","mn","fe","b","nb_feuilles","poids_sec","poids_moyen_feuille"].forEach(function(f){ if(local[f]!==undefined && local[f]!=="") local[f]=parseFloat(local[f])||null; });
      setData(function(d){ return {...d, leafAnalyses:[local,...(d.leafAnalyses||[])]}; });
      setSyncStatus("saving");
      var dbRow = {
        id: id,
        date: local.date_prelevement || local.date_analyse || local.date || new Date().toISOString().slice(0,10),
        zone_id: local.zone_id || local.parcelle || "",
        variete: local.culture || local.variete || "",
        n_pct: local.n_total, p_pct: local.p, k_pct: local.k, mg_pct: local.mg, ca_pct: local.ca,
        na_ppm: local.na, cl_pct: local.cl, zn_ppm: local.zn, cu_ppm: local.cu, mn_ppm: local.mn, fe_ppm: local.fe, b_ppm: local.b,
        media_url: local.media_url || null
      };
      try {
        await sb.insert("leaf_analyses", dbRow);
        setSyncStatus("ok");
      } catch(e){ setSyncStatus("error"); setSyncMsg(e.message); }
    },
    addOoAnalysis: async (row) => {
      var id = "oo" + Date.now();
      var local = {...row, id};
      var numFields = ["acidite","indice_peroxyde","humidite","lipides","proteines","energie_kcal","energie_kj",
        "ag_satures","ag_mono_insatures","ag_poly_insatures","ag_insatures",
        "c14_0","c16_0","c16_1","c17_0","c17_1","c18_0","c18_1","c18_2","c18_3","c20_0","c20_1","c22_0"];
      numFields.forEach(function(f){ if(local[f]!==undefined && local[f]!=="") local[f]=parseFloat(local[f])||null; });
      setData(function(d){ return {...d, ooAnalyses:[local,...(d.ooAnalyses||[])]}; });
      setSyncStatus("saving");
      try { await sb.insert("oo_analyses",{id,...local}); setSyncStatus("ok"); }
      catch(e){ setSyncStatus("error"); setSyncMsg(e.message); }
    },
    addMessage: async (row) => {
      const id="msg"+Date.now(), local={...row,id};
      setData(d=>({...d,messages:[local,...(d.messages||[])]}));
      setSyncStatus("saving");
      try {
        await sb.insert("messages",{id,date:row.date,sender:row.sender,summary:row.summary,action_required:row.actionRequired||false,action_done:row.actionDone||false,tags:row.tags||"",notes:row.notes||""});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteMessage: async (id) => { setData(d=>({...d,messages:(d.messages||[]).filter(m=>m.id!==id)})); try{await sb.delete("messages",id);}catch(e){} },
    deleteMessages: async (ids) => { setData(d=>({...d,messages:(d.messages||[]).filter(m=>!ids.includes(m.id))})); ids.forEach(id => { try{sb.delete("messages",id);}catch(e){} }); },
    archiveMessage: async (id) => {
      setData(d=>({...d,messages:(d.messages||[]).filter(m=>m.id!==id)}));
      try { await sb.update("messages",id,{is_archived:true}); } catch(e){console.warn(e);}
    },
    updateMessage: async (id, patch) => {
      setData(d=>({...d,messages:(d.messages||[]).map(m=>m.id===id?{...m,actionDone:patch.action_done!==undefined?patch.action_done:m.actionDone, summary:patch.summary!==undefined?patch.summary:m.summary, notes:patch.notes!==undefined?patch.notes:m.notes, content:patch.content!==undefined?patch.content:m.content}:m)}));
      try { await sb.update("messages",id,patch); } catch(e){console.warn(e);}
    },
    addFertigationSession: async (row) => {
      const id="fs"+Date.now(), local={...row,id};
      setData(d=>({...d,fertigationSessions:[local,...(d.fertigationSessions||[])]}));
      setSyncStatus("saving");
      try {
        await sb.insert("fertigation_sessions",{id,date:row.date,recipe_id:row.recipeId,treated:row.treated,operator_id:row.operatorId,notes:row.notes||"",bloc_timings:JSON.stringify(row.blocTimings||[])});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deductFertStock: async (fertilizerId, qty) => {
      setData(d=>({...d,fertilizers:d.fertilizers.map(f=>f.id===fertilizerId?{...f,stockQty:Math.max(0,(f.stockQty||0)-qty)}:f)}));
      try {
        const fert = (await sb.select("fertilizers","id=eq."+fertilizerId))[0];
        if (fert) await sb.update("fertilizers",{stock_qty:Math.max(0,(fert.stock_qty||0)-qty)},"id=eq."+fertilizerId);
      } catch(e){console.warn("deductFertStock error:",e);}
    },
    addPhytoProduct: async (row) => {
      const id="ph"+Date.now(), local={...row,id};
      setData(d=>({...d,phytoProducts:[...(d.phytoProducts||[]),local]}));
      setSyncStatus("saving");
      try {
        await sb.insert("phyto_products",{id,name:row.name,category:row.category,active_ingredient:row.activeIngredient||"",supplier:row.supplier||"",unit:row.unit,stock_qty:row.stockQty,min_stock:row.minStock,price_per_unit:row.pricePerUnit,phi:row.phi,notes:row.notes||""});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    addPhytoApplication: async (row) => {
      const id="pa"+Date.now(), local={...row,id};
      setData(d=>({...d,phytoApplications:[local,...(d.phytoApplications||[])]}));
      setSyncStatus("saving");
      try {
        await sb.insert("phyto_applications",{id,date:row.date,product_id:row.productId,product_name:row.productName,zone_id:row.zoneId||null,qty_used:row.qtyUsed,unit:row.unit,operator_id:row.operatorId||null,method:row.method||"",phi:row.phi,harvest_safe_date:row.harvestSafeDate,notes:row.notes||""});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    updatePhytoStock: async (id, newQty) => {
      setData(d=>({...d,phytoProducts:(d.phytoProducts||[]).map(p=>p.id===id?{...p,stockQty:newQty}:p)}));
      try { await sb.update("phyto_products",{stock_qty:newQty},"id=eq."+id); } catch(e){console.warn(e);}
    },
    addEnergyBill: async (row) => {
      const id="eb"+Date.now(), local={...row,id};
      setData(d=>({...d,energyBills:[local,...(d.energyBills||[])]}));
      setSyncStatus("saving");
      try {
        await sb.insert("energy_bills",{id,period:row.period,bill_ref:row.billRef,issued_date:row.issuedDate,due_date:row.dueDate,total_ttc:row.totalTTC,total_ht:row.totalHT||null,tva:row.tva||null,kwh_normal:row.kwhNormal,kwh_creux:row.kwhCreux,kwh_pointe:row.kwhPointe,kwh_total:row.kwhTotal,puissance_kva:row.puissanceKVA,redevance_puissance:row.redevancePuissance,provider:row.provider,notes:row.notes||"", scans: row.scans||[]});
        setSyncStatus("ok");
      } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
    deleteEnergyBill: async (id) => { setData(d=>({...d,energyBills:d.energyBills.filter(b=>b.id!==id)})); try{await sb.delete("energy_bills",id);}catch(e){} },
    markEnergyBillPaid: async (id, paid) => {
      setData(d=>({...d,energyBills:(d.energyBills||[]).map(b=>b.id===id?{...b,paid}:b)}));
      try { await sb.update("energy_bills", id, { paid }); } catch(e){ console.warn("markEnergyBillPaid error:", e); }
    },
    saveParcelBrain: async (row) => {
      const local = { id:row.id, parcelName:row.parcel_name, healthScore:row.health_score, synthesis:row.synthesis, lastVisitDate:row.last_visit_date, updatedAt:row.updated_at };
      setData(d=>({...d, parcelBrain:[...(d.parcelBrain||[]).filter(b=>b.id!==row.id), local]}));
      try { await sb.upsert("parcel_brain", { id:row.id, parcel_name:row.parcel_name, health_score:row.health_score, synthesis:row.synthesis, last_visit_date:row.last_visit_date, updated_at:row.updated_at }); } catch(e){ console.warn("saveParcelBrain error:", e); }
    },
    saveSettings: async (s) => {
      setData(d=>({...d,settings:s}));
      try { await sb.upsert("settings",{id:"main",farm_name:s.farmName,location:s.location,citrus_ha:+s.citrusHa,olive_ha:+s.oliveHa,picoline_count:+s.picolineCount,gemini_key:s.geminiKey||""}); setSyncStatus("ok"); } catch(e){setSyncStatus("error");setSyncMsg(e.message);}
    },
  };

const totalHa = (data.settings.citrusHa||0) + (data.settings.oliveHa||0);

// Sync status badge
  const statusBadge = {
    loading: { icon:"⏳", text:"Chargement…",   color:"rgba(255,255,255,0.4)" },
    ok:      { icon:"☁",  text:"Synchronisé",   color:"#4ade80" },
    saving:  { icon:"⬆",  text:"Sauvegarde…",   color:C.citrus  },
    error:   { icon:"⚠",  text:syncMsg||"Erreur", color:C.warning },
  }[syncStatus] || { icon:"?", text:"", color:C.muted };

if (syncStatus === "loading") {
    return (
      <div style={{ display:"flex", alignItems:"center", justifyContent:"center", height:"100vh", background:C.cream, flexDirection:"column", gap:16 }}>
        <div style={{ fontSize:48 }}>🌳</div>
        <div style={{ fontFamily:"'Playfair Display',serif", fontSize:22, color:C.soil, fontWeight:700 }}>GNAO-KIAF</div>
        <div style={{ fontSize:13, color:C.muted }}>Chargement des données…</div>
        <div style={{ width:200, height:4, background:"#E8D5A3", borderRadius:4, overflow:"hidden" }}>
          <div style={{ width:"60%", height:4, background:C.citrus, borderRadius:4, animation:"pulse 1s infinite" }}/>
        </div>
      </div>
    );
  }

return (
    <div style={{ display:"flex", minHeight:"100vh", fontFamily:"'DM Sans',sans-serif", direction:rtl?"rtl":"ltr" }}>
      {/* Sidebar — hidden on mobile */}
      {window.innerWidth >= 768 && (
      <div style={{ width:sidebarOpen?238:64, background:`linear-gradient(180deg,${C.soil} 0%,${C.bark} 100%)`, transition:"width 0.28s ease", flexShrink:0, display:"flex", flexDirection:"column", overflow:"hidden", position:"sticky", top:0, height:"100vh", order:rtl?1:0 }}>
        <div style={{ padding:"20px 12px 14px", borderBottom:"1px solid rgba(255,255,255,0.1)" }}>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <div style={{ width:36, height:36, borderRadius:10, background:`linear-gradient(135deg,${C.citrus},${C.olive})`, display:"flex", alignItems:"center", justifyContent:"center", fontSize:19, flexShrink:0 }}>🌳</div>
            {sidebarOpen && (
              <div>
                <div style={{ color:C.sand, fontFamily:"'Playfair Display',serif", fontWeight:700, fontSize:13, lineHeight:1.2 }}>{data.settings.farmName}</div>
                <div style={{ color:C.muted, fontSize:10, marginTop:1 }}>{totalHa} ha · Maroc</div>
              </div>
            )}
          </div>
          {sidebarOpen && (
            <div style={{ display:"flex", gap:4, marginTop:10 }}>
              {Object.keys(LANGS).map(code=>(
                <button key={code} onClick={()=>setLang(code)} style={{ flex:1, padding:"3px 0", borderRadius:6, fontSize:10, fontWeight:700, border:`1.5px solid ${lang===code?C.citrus:"rgba(255,255,255,0.18)"}`, background:lang===code?"rgba(217,119,6,0.28)":"transparent", color:lang===code?C.citrus:"rgba(255,255,255,0.45)", cursor:"pointer" }}>{code.toUpperCase()}</button>
              ))}
            </div>
          )}
          <button onClick={()=>setSidebarOpen(o=>!o)} style={{ marginTop:10, background:"rgba(255,255,255,0.07)", border:"none", borderRadius:7, padding:"4px 8px", cursor:"pointer", color:C.sand, fontSize:11, width:"100%", textAlign:"center" }}>
            {sidebarOpen?(rtl?"▶":"◀ Réduire"):"▶"}
          </button>
        </div>
        <nav style={{ flex:1, padding:"8px 5px", overflowY:"auto" }}>
          {NAV.map(n=>{
            const reviewedCount = n.id==='visites' ? (data.messages||[]).filter(m=>m.media_type==='visit_bundle'&&m.actionDone).length : 0;
            return (
            <button key={n.id} onClick={()=>setView(n.id)} style={{ display:"flex", alignItems:"center", gap:9, width:"100%", padding:"9px 9px", background:view===n.id?"rgba(217,119,6,0.2)":"transparent", border:"none", borderRadius:9, color:view===n.id?C.citrus:"rgba(255,255,255,0.65)", cursor:"pointer", textAlign:rtl?"right":"left", fontSize:13, fontWeight:view===n.id?700:400, marginBottom:1, transition:"all 0.18s", borderLeft:(!rtl&&view===n.id)?`3px solid ${C.citrus}`:"3px solid transparent", borderRight:(rtl&&view===n.id)?`3px solid ${C.citrus}`:"3px solid transparent", fontFamily:"'DM Sans',sans-serif" }}>
              <span style={{ fontSize:16, flexShrink:0 }}>{n.icon}</span>
              {sidebarOpen && <span style={{ fontFamily:lang==="ar"?"Arial,sans-serif":"inherit", fontSize:13 }}>{tx(n.id,lang)}</span>}
              {sidebarOpen && reviewedCount>0 && <span style={{ marginLeft:"auto", background:"rgba(217,119,6,0.35)", color:C.citrus, fontSize:10, fontWeight:800, padding:"1px 7px", borderRadius:10 }}>{reviewedCount}</span>}
            </button>
            );
          })}
        </nav>
        {sidebarOpen && (
          <div style={{ padding:"10px 12px 14px", borderTop:"1px solid rgba(255,255,255,0.07)" }}>
            {/* Sync status */}
            <div style={{ fontSize:10, color:statusBadge.color, textAlign:"center", marginBottom:8, fontWeight:700 }}>
              {statusBadge.icon} {statusBadge.text}
            </div>
            <button onClick={()=>exportJSON(data)} style={{ width:"100%", padding:"7px 0", borderRadius:8, background:"rgba(217,119,6,0.18)", border:"1px solid rgba(217,119,6,0.4)", color:C.citrus, fontSize:11, fontWeight:700, cursor:"pointer", marginBottom:5 }}>
              ⬇ Exporter JSON
            </button>
            <button onClick={()=>{ setSyncStatus("loading"); loadAllData().then(d=>{setData(d);setSyncStatus("ok");}).catch(e=>{setSyncStatus("error");setSyncMsg(e.message);}); }} style={{ width:"100%", padding:"7px 0", borderRadius:8, background:"rgba(255,255,255,0.06)", border:"1px solid rgba(255,255,255,0.15)", color:"rgba(255,255,255,0.55)", fontSize:11, fontWeight:700, cursor:"pointer", marginBottom:5 }}>
              🔄 Actualiser
            </button>
            <div style={{ fontSize:9, color:"rgba(255,255,255,0.2)", textAlign:"center", marginTop:4 }}>📱 Ajouter à l'écran d'accueil</div>
          </div>
        )}
      </div>
      )}

{/* Main content */}
      <div data-main-scroll="1" style={{ flex:1, padding:window.innerWidth<768?"16px 14px 80px":"26px 30px", overflowY:"auto", minWidth:0, overflowAnchor:"none" }}>
        {view==="dashboard"   && <Dashboard      data={data} lang={lang} setView={setView} setMsgFilter={setMsgFilter}/>}
        {view==="visites"     && <VisitesView      data={data} db={db} lang={lang}/>}
        {view==="cerveau"     && <CerveauTab      data={data} db={db} lang={lang}/>}
        {view==="tendances"   && <TendancesTab   data={data} lang={lang}/>}
        {view==="tasks"       && <TasksView       data={data} db={db} lang={lang}/>}
        {view==="irrigation"  && <IrrigationView  data={data} db={db} lang={lang}/>}
        {view==="harvest"     && <HarvestView     data={data} db={db} lang={lang}/>}
        {view==="pests"       && <PestView        data={data} db={db} lang={lang}/>}
        {view==="fertilizers" && <FertilizersView data={data} db={db} lang={lang}/>}
        {view==="expenses"    && <ExpensesView    data={data} db={db} lang={lang} setView={setView}/>}
        {view==="workers"     && <WorkersView     data={data} db={db} lang={lang}/>}
        {view==="consultants" && <ConsultantsView data={data} db={db} lang={lang}/>}
        {view==="analyses"    && <LeafAnalysisView data={data} db={db} lang={lang}/> }
        {view==="messages"    && <MessagesView    data={data} db={db} lang={lang} msgFilter={msgFilter} setMsgFilter={setMsgFilter}/>}
        {view==="fertigation" && <FertigationView data={data} db={db} lang={lang}/>}
        {view==="phyto"       && <PhytoView      data={data} db={db} lang={lang}/>}
        {view==="foliaire"    && <FoliarView     data={data} db={db} lang={lang}/>}
        {view==="energy"      && <EnergyView      data={data} db={db} lang={lang}/>}
        {view==="consumption" && <ConsumptionView data={data} lang={lang}/>}
        {view==="oliveoil"    && <PicholineView data={data} db={db} lang={lang}/>}
        {view==="settings"    && <SettingsView    data={data} db={db} lang={lang} setLang={setLang}/>}
        {view==="about"       && <AboutView       data={data} lang={lang}/>}
      </div>

{/* Floating chat widget */}
      <FloatingChat data={data} />

{/* Mobile bottom nav */}
      {window.innerWidth < 768 && (
        <div style={{ position:"fixed", bottom:0, left:0, right:0, background:C.soil, borderTop:`1px solid rgba(255,255,255,0.1)`, display:"flex", zIndex:200, overflowX:"auto", WebkitOverflowScrolling:"touch" }}>
          {NAV.map(n=>(
            <button key={n.id} onClick={()=>setView(n.id)} style={{ flex:"0 0 auto", padding:"10px 14px", background:"none", border:"none", color:view===n.id?C.citrus:"rgba(255,255,255,0.5)", fontSize:20, cursor:"pointer", display:"flex", flexDirection:"column", alignItems:"center", gap:2 }}>
              <span>{n.icon}</span>
              <span style={{ fontSize:8, fontWeight:700, color:view===n.id?C.citrus:"rgba(255,255,255,0.4)" }}>{tx(n.id,lang).slice(0,6)}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}