/* ============ DAR AYLA OPS V2 — PAGES (refonte fonctionnelle) ============ */

/* --- Backend spec modal --- */
function BackendSpecModal({ open, onClose }) {
  if (!open) return null;
  const reg = window.__API_REGISTRY;
  return (<>
    <div className="spec-modal-bd" onClick={onClose}/>
    <div className="spec-modal">
      <div className="spec-modal-h">
        <span className="lodgify-sync"><span className="ping"/>Spec backend · à câbler côté Claude Code</span>
        <h2 style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:24,marginLeft:8}}>Intégrations</h2>
        <button className="icon-btn" onClick={onClose} style={{marginLeft:'auto'}}><I.close/></button>
      </div>
      <div className="spec-modal-b">
        <p style={{fontSize:13,color:'var(--text-soft)',marginBottom:18,maxWidth:780}}>
          Chaque action de cette interface correspond à un appel d'API réel. Voici les services à brancher pour rendre Dar Ayla OPS pleinement fonctionnel.
        </p>
        {Object.entries(reg).map(([key, svc]) => (
          <div key={key} className="spec-svc">
            <div className="spec-svc-h">
              <strong style={{fontSize:14,color:'var(--text)',textTransform:'capitalize'}}>{key}</strong>
              <span className="tag-mono">{svc.base}</span>
              {svc.auth && <span className="tag-mono" style={{marginLeft:'auto'}}>{svc.auth}</span>}
            </div>
            {svc.endpoints && Object.entries(svc.endpoints).map(([k,e]) => (
              <div key={k} className="spec-ep">
                <span className={`verb ${e.method}`}>{e.method}</span>
                <span style={{color:'var(--text)'}}>{e.path}</span>
                <span style={{color:'var(--muted)',marginLeft:8}}>· {k}</span>
              </div>
            ))}
            {svc.databases && <div style={{marginTop:8,fontSize:11,color:'var(--muted)'}}>Databases : {Object.keys(svc.databases).join(' · ')}</div>}
            {svc.tables && <div style={{marginTop:8,fontSize:11,color:'var(--muted)'}}>Tables : {svc.tables.join(' · ')}</div>}
            {svc.sheets && <div style={{marginTop:8,fontSize:11,color:'var(--muted)'}}>Sheets : {Object.keys(svc.sheets).join(' · ')}</div>}
            {svc.templates && <div style={{marginTop:8,fontSize:11,color:'var(--muted)'}}>Templates : {svc.templates.join(' · ')}</div>}
          </div>
        ))}
      </div>
    </div>
  </>);
}
window.BackendSpecModal = BackendSpecModal;

/* --- Calendar avec prix --- */
function PageCalendar({ onOpenResa, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const days = 14;
  const start = new Date(D.TODAY); start.setDate(start.getDate() - 2);
  const dates = Array.from({length: days}, (_, i) => { const d = new Date(start); d.setDate(d.getDate()+i); return d; });
  const fmt = (d) => d.toISOString().slice(0,10);
  const todayStr = D.todayStr;

  const isOccupied = (suiteId, dateStr) => D.RESERVATIONS.some(r => r.suiteId===suiteId && r.arrivee <= dateStr && r.depart > dateStr);

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Vue 14 jours · prix dynamiques','14-day view · dynamic pricing')}</div>
          <h1>{t('Calendrier','Calendar')}</h1>
          <p>{t('Tarif affiché sur dates libres. Click pour modifier · drag pour replanifier.','Price shown on free dates. Click to edit · drag to reschedule.')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.notImplemented(t('Navigation 14j précédents','Previous 14d'))}><I.arrowL/></button>
          <span className="tag-mono" style={{padding:'0 8px'}}>{dates[0].toLocaleDateString('fr-FR',{day:'numeric',month:'short'})} → {dates[days-1].toLocaleDateString('fr-FR',{day:'numeric',month:'short'})}</span>
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.notImplemented(t('Navigation 14j suivants','Next 14d'))}><I.arrowR/></button>
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('Calendrier')}>{t('Export CSV','Export CSV')}</button>
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Nouvelle réservation','New booking'))}><I.plus/> {t('Réservation','Booking')}</button>
        </div>
      </div>

      <div className="timeline-wrap" style={{'--days': days}}>
        <div className="timeline-head">
          <div className="corner">{t('Suite · 9','Suites · 9')}</div>
          <div className="timeline-days">
            {dates.map(d => {
              const isToday = fmt(d) === todayStr;
              const dow = d.getDay();
              return (
                <div key={fmt(d)} className={`timeline-day ${isToday?'today':''} ${(dow===0||dow===6)?'weekend':''}`}>
                  <div className="dow">{d.toLocaleDateString(lang==='EN'?'en-GB':'fr-FR',{weekday:'short'}).slice(0,3)}</div>
                  <div className="dom">{d.getDate()}</div>
                </div>
              );
            })}
          </div>
        </div>
        {D.SUITES.map(suite => {
          const resasForSuite = D.RESERVATIONS.filter(r => r.suiteId===suite.id);
          return (
            <div className="timeline-row" key={suite.id}>
              <div className="timeline-suite">
                <span className="swatch" style={{background:suite.color}}/>
                <div className="meta">
                  <div className="nm">{suite.name}</div>
                  <div className="sub">{suite.basePrice} → {suite.highSeasonPrice} MAD</div>
                </div>
              </div>
              <div className="timeline-cells">
                {dates.map(d => {
                  const ds = fmt(d);
                  const isToday = ds === todayStr;
                  const dow = d.getDay();
                  const occ = isOccupied(suite.id, ds);
                  const price = D.priceFor(suite.id, ds);
                  const isWE = dow===5 || dow===6;
                  return (
                    <div key={ds} className={`cell ${isToday?'today':''} ${(dow===0||dow===6)?'weekend':''}`}
                         onClick={() => !occ && DA_ACTIONS.setPriceForDate(suite.id, ds, price)}
                         style={{cursor: occ?'default':'pointer'}}>
                      {!occ && <span className={`cal-price ${isWE?'is-weekend':''}`}>{price}</span>}
                    </div>
                  );
                })}
                {resasForSuite.map(r => {
                  const arr = new Date(r.arrivee);
                  const dep = new Date(r.depart);
                  const startIdx = Math.max(0, Math.round((arr - start)/86400000));
                  const endIdx = Math.min(days, Math.round((dep - start)/86400000));
                  if (endIdx <= 0 || startIdx >= days) return null;
                  const left = (startIdx/days)*100;
                  const width = ((endIdx - startIdx)/days)*100;
                  const nights = Math.round((dep - arr)/86400000);
                  return (
                    <div key={r.id} className={`tl-resa ${r.vip?'vip':''}`}
                         style={{left:`${left}%`,width:`calc(${width}% - 4px)`,'--bar-color':suite.color}}
                         onClick={() => onOpenResa(r)}>
                      <span className="who">{r.voyageur.split(' ')[0]}{r.vip && <I.star style={{color:'var(--gold)',marginLeft:4}}/>}</span>
                      <span className="nights">{nights}n · {Math.round(r.montant/nights)}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div style={{display:'flex',gap:14,marginTop:16,flexWrap:'wrap',alignItems:'center'}}>
        <span className="pill pill-accent"><span className="dot"/>{t('Confirmée','Confirmed')}</span>
        <span className="pill pill-gold"><span className="dot"/>VIP</span>
        <span className="pill pill-warn"><span className="dot"/>{t('Aujourd’hui','Today')}</span>
        <span className="pill pill-muted"><span className="dot"/>{t('Week-end (tarif +)','Weekend (price +)')}</span>
        <div style={{marginLeft:'auto',fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
          {t('Click sur date libre → édite tarif Lodgify','Click free date → edits Lodgify rate')}
        </div>
      </div>
    </div>
  );
}

/* --- Suites : catalogue + édition --- */
function PageSuites({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [editing, setEditing] = useState(null);

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('9 suites · catalogue','9 suites · catalog')}</div>
          <h1>{t('Suites','Suites')}</h1>
          <p>{t('Catalogue éditable. Chaque suite est synchronisée avec Lodgify (description publique) et Notion (fiche interne).','Editable catalog. Each suite syncs to Lodgify (public listing) and Notion (internal record).')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('Suites')}>{t('Export','Export')}</button>
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Ajout suite','Add suite'))}><I.plus/> {t('Suite','Suite')}</button>
        </div>
      </div>

      <div className="suites-grid">
        {D.SUITES.map(s => (
          <div key={s.id} className="suite-tile" onClick={() => setEditing(s)}>
            <div className="suite-tile-cover" style={{background:`linear-gradient(135deg, ${s.color}, ${s.color}cc 70%, #00000044)`}}>
              {s.name}
            </div>
            <div style={{fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace",letterSpacing:'.06em',textTransform:'uppercase'}}>{s.feature}</div>
            <div className="suite-meta-grid">
              <span><b>{s.area}m²</b> · {s.floor}</span>
              <span><b>{s.beds}</b></span>
              <span>{s.view}</span>
              <span>{s.capacity} pax max</span>
            </div>
            <div className="suite-tile-price">{s.basePrice} <small>→ {s.highSeasonPrice} MAD/nuit</small></div>
            <div style={{marginTop:8}}>
              {s.amenities.slice(0,3).map(a => <span key={a} className="amenity-chip">{a}</span>)}
              {s.amenities.length > 3 && <span className="amenity-chip">+{s.amenities.length-3}</span>}
            </div>
            <div style={{display:'flex',gap:6,marginTop:12}}>
              <button className="btn btn-sm btn-ghost" onClick={(e)=>{e.stopPropagation();setEditing(s);}}><I.edit/> {t('Éditer','Edit')}</button>
              <button className="btn btn-sm btn-ghost" onClick={(e)=>{e.stopPropagation();DA_ACTIONS.openNotionPage(s.name, s.notion);}}><I.link/> Notion</button>
            </div>
          </div>
        ))}
      </div>

      {editing && <SuiteEditor suite={editing} onClose={()=>setEditing(null)} lang={lang}/>}
    </div>
  );
}

function SuiteEditor({ suite, onClose, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const [form, setForm] = useState({...suite});
  const set = (k,v) => setForm(f => ({...f, [k]:v}));
  const save = () => {
    Object.assign(suite, form);
    DA_ACTIONS.saveSuite(form);
    onClose();
  };
  return (<>
    <div className="drawer-backdrop open" onClick={onClose}/>
    <div className="drawer open">
      <div className="drawer-head">
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:'flex',gap:10,alignItems:'center',marginBottom:6}}>
            <span className="tag-mono">SUITE · {suite.id}</span>
            <span className="lodgify-sync"><span className="ping"/>Sync Lodgify + Notion</span>
          </div>
          <div style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:26,color:'var(--text)'}}>
            {form.name}
          </div>
        </div>
        <button className="icon-btn" onClick={onClose}><I.close/></button>
      </div>
      <div className="drawer-body" style={{padding:'22px'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <div className="input-row"><label>{t('Nom','Name')}</label><input className="input" value={form.name} onChange={e=>set('name',e.target.value)}/></div>
          <div className="input-row"><label>{t('Caractère','Feature')}</label><input className="input" value={form.feature} onChange={e=>set('feature',e.target.value)}/></div>
          <div className="input-row"><label>{t('Surface (m²)','Area (m²)')}</label><input className="input" type="number" value={form.area} onChange={e=>set('area',+e.target.value)}/></div>
          <div className="input-row"><label>{t('Étage','Floor')}</label><input className="input" value={form.floor} onChange={e=>set('floor',e.target.value)}/></div>
          <div className="input-row"><label>{t('Lit','Bed')}</label><input className="input" value={form.beds} onChange={e=>set('beds',e.target.value)}/></div>
          <div className="input-row"><label>{t('Vue','View')}</label><input className="input" value={form.view} onChange={e=>set('view',e.target.value)}/></div>
          <div className="input-row"><label>{t('Capacité','Capacity')}</label><input className="input" type="number" value={form.capacity} onChange={e=>set('capacity',+e.target.value)}/></div>
          <div className="input-row"><label>{t('Couleur','Color')}</label><input className="input" type="color" value={form.color} onChange={e=>set('color',e.target.value)}/></div>
        </div>
        <div className="hr-label" style={{marginTop:18}}>{t('Tarification','Pricing')}</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <div className="input-row"><label>{t('Tarif base (MAD)','Base rate (MAD)')}</label><input className="input" type="number" value={form.basePrice} onChange={e=>set('basePrice',+e.target.value)}/></div>
          <div className="input-row"><label>{t('Haute saison (MAD)','High season (MAD)')}</label><input className="input" type="number" value={form.highSeasonPrice} onChange={e=>set('highSeasonPrice',+e.target.value)}/></div>
        </div>
        <div className="hr-label" style={{marginTop:18}}>{t('Équipements','Amenities')}</div>
        <div style={{marginBottom:14}}>
          {form.amenities.map((a,i) => <span key={i} className="amenity-chip" onClick={()=>set('amenities', form.amenities.filter((_,j)=>j!==i))} style={{cursor:'pointer'}}>{a} ✕</span>)}
        </div>
        <div className="hr-label">{t('Liens','Links')}</div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <button className="integration-badge notion" onClick={()=>DA_ACTIONS.openNotionPage(form.name, form.notion)}><I.link width="11" height="11"/> Notion</button>
          <button className="integration-badge lodgify" onClick={()=>DA_ACTIONS.notImplemented('Ouverture Lodgify property')}><I.link width="11" height="11"/> Lodgify property</button>
          <button className="integration-badge drive" onClick={()=>DA_ACTIONS.notImplemented('Photos Google Drive')}><I.link width="11" height="11"/> Photos · Drive</button>
        </div>
      </div>
      <div className="drawer-foot">
        <span style={{marginRight:'auto',fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
          PATCH · Notion + Lodgify property update
        </span>
        <button className="btn btn-sm" onClick={onClose}>{t('Annuler','Cancel')}</button>
        <button className="btn btn-sm btn-accent" onClick={save}>{t('Enregistrer','Save')} <I.check/></button>
      </div>
    </div>
  </>);
}

/* --- Inbox --- */
function PageInbox({ onOpenResa, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [filter, setFilter] = useState('all');

  // Build threads from /api/messages data (stored in CHAT_THREADS as {threadId: []})
  // AND from reservations that have active stays (so the page is never empty)
  const msgThreadIds = Object.keys(D.CHAT_THREADS);

  // Get threads from /api/messages response stored on DA_DATA
  const apiMessages = D._rawMessages || [];

  // Build display list: merge API messages with reservation data
  const threads = [];

  // First: show threads from Lodgify /api/messages
  apiMessages.forEach(msg => {
    const resa = D.RESERVATIONS.find(r => r.id === msg.id || r.chatThread === String(msg.id));
    threads.push({
      id: msg.id,
      resa: resa,
      guest: msg.guest || (resa?.voyageur) || '—',
      channel: msg.channel || (resa?.canal) || '',
      lastMsg: msg.lastMsg || '',
      unread: msg.unread,
      urgent: msg.urgent,
      receivedAt: msg.receivedAt,
      property: msg.property,
    });
  });

  // If no API messages, show reservations with active/upcoming stays
  if (threads.length === 0) {
    const today = D.todayStr;
    D.RESERVATIONS.filter(r => r.depart >= today).forEach(r => {
      threads.push({
        id: r.id,
        resa: r,
        guest: r.voyageur,
        channel: r.canal,
        lastMsg: '',
        unread: false,
        urgent: false,
        receivedAt: r.arrivee,
      });
    });
  }

  const filtered = threads.filter(th => {
    if (filter==='unread') return th.unread;
    if (filter==='vip') return th.resa?.vip;
    return true;
  });

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Lodgify · {t('Boîte unifiée','Unified inbox')}</div>
          <h1>{t('Messages voyageurs','Guest messages')}</h1>
          <p>{t('Tous les canaux (Airbnb, Booking, Direct) consolidés via Lodgify.','All channels (Airbnb, Booking, Direct) consolidated via Lodgify.')}</p>
        </div>
        <div className="page-actions">
          <span className="lodgify-sync"><span className="ping"/>{t('Connecté','Connected')}</span>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${filter==='all'?'on':''}`} onClick={()=>setFilter('all')}>{t('Tous','All')}<span className="count">{threads.length}</span></button>
        <button className={`tab ${filter==='unread'?'on':''}`} onClick={()=>setFilter('unread')}>{t('Non lus','Unread')}<span className="count">{threads.filter(x=>x.unread).length}</span></button>
        <button className={`tab ${filter==='vip'?'on':''}`} onClick={()=>setFilter('vip')}>VIP<span className="count">{threads.filter(x=>x.resa?.vip).length}</span></button>
      </div>

      <div className="card" style={{padding:0}}>
        {filtered.length === 0 && (
          <div style={{padding:40,textAlign:'center',color:'var(--muted)',fontStyle:'italic',fontFamily:"'Cormorant Garamond',serif",fontSize:16}}>
            {t('Aucun message pour le moment.','No messages at the moment.')}
          </div>
        )}
        {filtered.map(th => {
          const suite = th.resa ? D.SUITES.find(s => s.id===th.resa.suiteId) : null;
          return (
            <div key={th.id} onClick={()=>{ if(th.resa) onOpenResa(th.resa); }}
                 style={{display:'grid',gridTemplateColumns:'auto 1fr auto',gap:14,padding:'14px 18px',borderBottom:'1px solid var(--border-soft)',cursor: th.resa?'pointer':'default',alignItems:'center',background: th.unread?'var(--accent-soft)':'transparent'}}>
              <div style={{width:38,height:38,borderRadius:'50%',background:suite?.color||'var(--accent)',display:'grid',placeItems:'center',color:'#1a0f08',fontWeight:700,fontSize:13,fontFamily:"'JetBrains Mono',monospace",flex:'none'}}>{th.resa?.avatar || th.guest.slice(0,2).toUpperCase()}</div>
              <div style={{minWidth:0}}>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <strong style={{fontSize:14,color:'var(--text)'}}>{th.guest} {th.resa?.vip && <I.star style={{color:'var(--gold)'}}/>}</strong>
                  {suite && <span className="tag-mono">{suite.name}</span>}
                  <span className="tag-mono">{th.channel}</span>
                  {th.unread && <span className="pill pill-accent" style={{fontSize:10}}><span className="dot"/>{t('Nouveau','New')}</span>}
                </div>
                <div style={{fontSize:13,color: th.unread?'var(--text)':'var(--text-soft)',marginTop:3,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',fontWeight: th.unread?500:400}}>
                  {th.lastMsg || <em>{t('Pas encore de message','No message yet')}</em>}
                </div>
              </div>
              <div style={{textAlign:'right',display:'flex',flexDirection:'column',gap:4,alignItems:'flex-end'}}>
                <span className="tag-mono">{th.receivedAt ? new Date(th.receivedAt).toLocaleDateString(lang==='EN'?'en-GB':'fr-FR',{day:'numeric',month:'short'}) : '—'}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* --- Cleaning --- */
function PageCleaning({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [, force] = useState(0);
  const refresh = () => force(x=>x+1);
  const today = D.todayStr;
  const todayTasks = D.HOUSEKEEPING.filter(m => m.date === today);
  const upcoming = D.HOUSEKEEPING.filter(m => m.date > today);

  const TaskRow = ({ m, future }) => {
    const suite = D.SUITES.find(s => s.id===m.suiteId);
    const done = m.status==='fait';
    return (
      <div className={`task-row ${done?'done':''}`}>
        {future ? (
          <span style={{width:22,height:22,borderRadius:'50%',background:'var(--surface-3)',display:'grid',placeItems:'center',fontSize:9,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>{m.date.slice(5)}</span>
        ) : (
          <button className={`task-check ${done?'done':''}`} onClick={()=>{DA_ACTIONS.toggleTask(m);refresh();}}>{done && <I.check/>}</button>
        )}
        <div className="task-meta">
          <div className="task-title">
            <span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:suite.color,marginRight:8,verticalAlign:'middle'}}/>
            {suite.name} · {m.type}
          </div>
          <div className="task-sub">{m.notes || (done ? `${t('Terminé','Done')} ${m.completedAt||''}` : m.startedAt ? `${t('Démarré','Started')} ${m.startedAt}` : t('À faire','To do'))}</div>
        </div>
        <div className="task-right">
          <span className="assignee-chip"><span className="avatar">{m.assignee[0]}</span>{m.assignee}</span>
          {m.priority==='high' && <span className="pill pill-warn" style={{fontSize:10}}><span className="dot"/>{t('Prio','Prio')}</span>}
          <div className="action-bar">
            {!done && !future && <button title={t('Démarrer','Start')} onClick={()=>{DA_ACTIONS.startTask(m);refresh();}}><I.broom width="13" height="13"/></button>}
            <button title="WhatsApp" onClick={()=>DA_ACTIONS.whatsappStaff({name:m.assignee, whatsapp:''}, `${suite.name} · ${m.type}`)}><I.phone width="12" height="12"/></button>
            <button title={t('Modifier','Edit')} onClick={()=>DA_ACTIONS.notImplemented(t('Édition tâche','Edit task'))}><I.edit/></button>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Turnover · 9 suites','Turnover · 9 suites')}</div>
          <h1>{t('Ménages & turnover','Housekeeping')}</h1>
          <p>{t('Khadija, Naïma, Salma · WhatsApp + log Supabase + Notion log.','Khadija, Naïma, Salma · WhatsApp + Supabase + Notion log.')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('Ménages')}>{t('Export','Export')}</button>
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.syncDrive()}><I.link/> Drive</button>
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Nouvelle tâche','New task'))}><I.plus/> {t('Tâche','Task')}</button>
        </div>
      </div>

      <div className="kpi-strip" style={{gridTemplateColumns:'repeat(4,1fr)'}}>
        <KPI accent label={t('Aujourd’hui','Today')} value={todayTasks.length} sub={`${todayTasks.filter(t=>t.status==='fait').length} ${t('terminés','done')}`}/>
        <KPI label={t('Prio haute','High prio')} value={todayTasks.filter(t=>t.priority==='high').length}/>
        <KPI label={t('À venir 7j','Next 7 days')} value={upcoming.length}/>
        <KPI label={t('Linge bas stock','Low linen')} value="2" delta={-1}/>
      </div>

      <div className="sec-title"><h2>{t('Aujourd’hui','Today')}</h2><span className="eyebrow">{today}</span></div>
      {todayTasks.map(m => <TaskRow key={m.id} m={m}/>)}

      <div className="sec-title" style={{marginTop:24}}><h2>{t('À venir','Upcoming')}</h2></div>
      {upcoming.map(m => <TaskRow key={m.id} m={m} future/>)}
    </div>
  );
}

/* --- Requests with Notion / Lodgify / WhatsApp links --- */
function PageRequests({ onOpenResa, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [, force] = useState(0);
  const refresh = () => force(x=>x+1);
  const stMap = { 'demandé':'pill-warn', 'à préparer':'pill-warn', 'en cours':'pill-info', 'confirmé':'pill-ok' };
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Conciergerie','Concierge')} · Notion + Lodgify + WhatsApp</div>
          <h1>{t('Demandes voyageurs','Guest requests')}</h1>
          <p>{t('Chaque demande est liée à sa réservation et synchronisée avec Notion (database conciergerie) et Lodgify (timeline).','Each request links to its booking and syncs with Notion (concierge DB) and Lodgify (timeline).')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('Demandes')}>{t('Export','Export')}</button>
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Nouvelle demande','New request'))}><I.plus/> {t('Nouvelle','New')}</button>
        </div>
      </div>

      <div className="card" style={{padding:0}}>
        <table className="inv-table">
          <thead><tr>
            <th>{t('Statut','Status')}</th>
            <th>{t('Type','Type')}</th>
            <th>{t('Demande','Request')}</th>
            <th>{t('Voyageur · Suite','Guest · Suite')}</th>
            <th>{t('Échéance','Due')}</th>
            <th>{t('Affecté','Assigned')}</th>
            <th style={{textAlign:'right'}}>MAD</th>
            <th>{t('Liens','Links')}</th>
          </tr></thead>
          <tbody>
            {D.REQUESTS.map(r => {
              const resa = D.RESERVATIONS.find(x => x.id===r.resaId);
              const suite = resa ? D.SUITES.find(s => s.id===resa.suiteId) : null;
              const next = { 'demandé':'à préparer', 'à préparer':'en cours', 'en cours':'confirmé', 'confirmé':'demandé' };
              return (
                <tr key={r.id}>
                  <td onClick={()=>{DA_ACTIONS.updateRequestStatus(r, next[r.status]);refresh();}} style={{cursor:'pointer'}}>
                    <span className={`pill ${stMap[r.status]||'pill-muted'}`}><span className="dot"/>{r.status}</span>
                  </td>
                  <td><span className="tag-mono">{r.type}</span></td>
                  <td style={{color:'var(--text)',cursor:'pointer'}} onClick={() => resa && onOpenResa(resa)}>{r.label}</td>
                  <td>{resa?.voyageur} · <span style={{color:suite?.color}}>{suite?.name}</span></td>
                  <td className="mono" style={{fontSize:12}}>{r.due.slice(5,10)} · {r.due.slice(11)}</td>
                  <td>{r.assignee}</td>
                  <td style={{textAlign:'right'}} className="mono">{r.amount>0 ? r.amount : '—'}</td>
                  <td>
                    <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
                      <span className="integration-badge notion" onClick={()=>DA_ACTIONS.openNotionPage(r.label, r.notion)} title="Notion">N</span>
                      <span className="integration-badge lodgify" onClick={()=>DA_ACTIONS.openLodgifyThread(resa)} title="Lodgify">L</span>
                      {r.whatsapp && <span className="integration-badge whatsapp" onClick={()=>DA_ACTIONS.whatsappStaff({name:r.assignee, whatsapp:r.whatsapp}, r.label)} title="WhatsApp">W</span>}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <div style={{marginTop:10,fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
        {t('Click sur statut pour le changer · click sur ligne pour ouvrir la réservation','Click status to update · click row to open booking')}
      </div>
    </div>
  );
}

/* --- Inventory : 3 vues (cartes/tableau/sheet), actionnable --- */
function PageInventory({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [view, setView] = useState('table');
  const [, force] = useState(0);
  const refresh = () => force(x=>x+1);
  const cats = ['Linge','Mini-bar','Cuisine','Hygiène'];

  const adjust = (i, delta) => { DA_ACTIONS.adjustStock(i, delta); refresh(); };

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Stocks · 4 catégories · sync Google Sheets','Stock · 4 categories · Google Sheets sync')}</div>
          <h1>{t('Inventaire','Inventory')}</h1>
          <p>{t('Linge, mini-bar, cuisine, hygiène. Synchronisé avec Google Sheets et Notion. Alertes automatiques.','Linen, minibar, kitchen, hygiene. Synced with Google Sheets and Notion. Auto alerts.')}</p>
        </div>
        <div className="page-actions">
          <div className="view-switcher">
            <button className={view==='table'?'on':''} onClick={()=>setView('table')}>{t('Tableau','Table')}</button>
            <button className={view==='cards'?'on':''} onClick={()=>setView('cards')}>{t('Cartes','Cards')}</button>
            <button className={view==='sheet'?'on':''} onClick={()=>setView('sheet')}>{t('Sheets','Sheets')}</button>
          </div>
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.syncDrive()}><I.link/> {t('Sync Drive','Sync Drive')}</button>
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('Inventaire')}>CSV</button>
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Ajout article','Add item'))}><I.plus/> {t('Article','Item')}</button>
        </div>
      </div>

      {cats.map(cat => {
        const items = D.INVENTORY.filter(i => i.category===cat);
        return (
          <div key={cat} className="card" style={{marginBottom:16, padding: view==='cards'?20:0}}>
            <div className="card-h" style={view!=='cards'?{padding:'14px 18px',borderBottom:'1px solid var(--border-soft)',marginBottom:0}:{}}>
              <div><span className="eyebrow">{cat}</span><h3>{cat} · {items.length} {t('articles','items')}</h3></div>
              <span className="tag-mono">{items.filter(i=>i.alert).length} {t('alertes','alerts')}</span>
            </div>
            {view==='table' && (
              <table className="inv-table">
                <thead><tr>
                  <th>{t('Article','Item')}</th>
                  <th>{t('Stock','Stock')}</th>
                  <th style={{width:'25%'}}>{t('Niveau','Level')}</th>
                  <th>{t('Min','Min')}</th>
                  <th>{t('Fournisseur','Supplier')}</th>
                  <th>{t('Dernier','Last')}</th>
                  <th>{t('Actions','Actions')}</th>
                </tr></thead>
                <tbody>
                  {items.map(i => {
                    const ratio = i.stock / i.min;
                    const cls = ratio < 0.7 ? 'crit' : ratio < 1 ? 'low' : '';
                    return (
                      <tr key={i.id}>
                        <td style={{color:'var(--text)',fontWeight:500}}>{i.item} {i.alert && <span className="pill pill-warn" style={{fontSize:9,marginLeft:6}}><span className="dot"/>{t('Bas','Low')}</span>}</td>
                        <td>
                          <div className="inv-stock-edit">
                            <button onClick={()=>adjust(i,-1)}>−</button>
                            <input value={i.stock} readOnly/>
                            <button onClick={()=>adjust(i,+1)}>+</button>
                          </div>
                          <span style={{marginLeft:6,fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>{i.unit}</span>
                        </td>
                        <td>
                          <div className={`inv-stock-bar ${cls}`}>
                            <i style={{width: Math.min(100, (i.stock/(i.min*1.5))*100) + '%'}}/>
                            <span className="min-mark" style={{left: Math.min(100, (i.min/(i.min*1.5))*100) + '%'}}/>
                          </div>
                        </td>
                        <td className="mono" style={{color:'var(--muted)'}}>{i.min}</td>
                        <td>{i.supplier}</td>
                        <td className="mono" style={{fontSize:11,color:'var(--muted)'}}>{i.lastRestock}</td>
                        <td>
                          <div className="action-bar">
                            <button title={t('Commander','Reorder')} onClick={()=>DA_ACTIONS.reorderItem(i)}><I.send/></button>
                            <button title={t('Sync Sheet','Sync Sheet')} onClick={()=>DA_ACTIONS.syncDrive()}><I.link/></button>
                            <button title={t('Supprimer','Remove')} onClick={()=>DA_ACTIONS.notImplemented(t('Suppression','Removal'))}><I.close/></button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
            {view==='cards' && (
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(220px,1fr))',gap:10,marginTop:8}}>
                {items.map(i => (
                  <div key={i.id} style={{padding:'12px 14px',background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:10}}>
                    <div style={{fontSize:12,color:'var(--text)',fontWeight:600,marginBottom:6}}>{i.item}</div>
                    <div style={{display:'flex',gap:6,alignItems:'center',marginBottom:6}}>
                      <div className="inv-stock-edit">
                        <button onClick={()=>adjust(i,-1)}>−</button>
                        <input value={i.stock} readOnly/>
                        <button onClick={()=>adjust(i,+1)}>+</button>
                      </div>
                      <span style={{fontSize:10,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>/ min {i.min} {i.unit}</span>
                    </div>
                    <div style={{fontSize:10,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>{i.supplier}</div>
                    {i.alert && <div style={{marginTop:6}}><span className="pill pill-warn" style={{fontSize:9}}><span className="dot"/>{t('Bas','Low')}</span></div>}
                  </div>
                ))}
              </div>
            )}
            {view==='sheet' && (
              <div style={{padding:14}}>
                <div className="coming-soon">
                  <strong>Google Sheets · embed</strong>
                  <span>{t('Vue tableur en lecture/écriture directe — branchée sur','Spreadsheet view read/write — bound to')} <span className="mono">{window.__API_REGISTRY.drive.sheets.inventory}</span></span>
                </div>
                <table className="inv-table">
                  <thead><tr>
                    {['ID','Article','Catégorie','Stock','Unité','Min','Fournisseur','Dernier appro','Alerte'].map(h => <th key={h}>{h}</th>)}
                  </tr></thead>
                  <tbody>
                    {items.map(i => (
                      <tr key={i.id} style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11}}>
                        <td>{i.id}</td><td style={{color:'var(--text)'}}>{i.item}</td><td>{i.category}</td>
                        <td>{i.stock}</td><td>{i.unit}</td><td>{i.min}</td>
                        <td>{i.supplier}</td><td>{i.lastRestock}</td><td>{i.alert?'⚠':'—'}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

/* --- Incidents : actionnable --- */
function PageIncidents({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [, force] = useState(0);
  const refresh = () => force(x=>x+1);
  const open = D.INCIDENTS.filter(i => i.status !== 'résolu');
  const closed = D.INCIDENTS.filter(i => i.status === 'résolu');

  const Card = ({ inc }) => {
    const suite = D.SUITES.find(s => s.id===inc.suiteId);
    return (
      <div className={`incident-card ${inc.priority} ${inc.status==='résolu'?'resolved':''}`}>
        <div className="swatch"/>
        <div>
          <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:3}}>
            <span style={{display:'inline-block',width:8,height:8,borderRadius:2,background:suite.color}}/>
            <strong style={{fontSize:13,color:'var(--text)'}}>{suite.name}</strong>
            <span className="tag-mono">{inc.reportedAt.slice(5,16)}</span>
            {inc.photos>0 && <span className="tag-mono">📷 {inc.photos}</span>}
          </div>
          <div style={{fontSize:14,color:'var(--text)'}}>{inc.title}</div>
          <div style={{fontSize:11,color:'var(--muted)',marginTop:3,fontFamily:"'JetBrains Mono',monospace"}}>
            {t('Signalé par','Reported by')} {inc.reportedBy} · {t('Affecté','Assigned')} {inc.assignee} · ETA {inc.eta}
          </div>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:6,alignItems:'flex-end'}}>
          <span className={`pill ${inc.status==='résolu'?'pill-ok':inc.status==='en cours'?'pill-info':inc.status==='planifié'?'pill-warn':'pill-muted'}`}><span className="dot"/>{inc.status}</span>
          {inc.status!=='résolu' && (
            <div className="action-bar">
              <button title="WhatsApp" onClick={()=>DA_ACTIONS.whatsappStaff({name:inc.assignee, whatsapp:''}, inc.title)}><I.phone width="12" height="12"/></button>
              <button title={t('Résoudre','Resolve')} onClick={()=>{DA_ACTIONS.resolveIncident(inc);refresh();}}><I.check/></button>
            </div>
          )}
        </div>
      </div>
    );
  };
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Maintenance · Incidents','Maintenance · Issues')}</div>
          <h1>{t('Maintenance','Maintenance')}</h1>
          <p>{t('Photos uploadées vers Google Drive · ETA notifié sur WhatsApp prestataire.','Photos uploaded to Google Drive · ETA notified to vendor via WhatsApp.')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Signaler incident','Report issue'))}><I.plus/> {t('Signaler','Report')}</button>
        </div>
      </div>
      <div className="sec-title"><h2>{t('Ouverts','Open')}</h2><span className="eyebrow">{open.length}</span></div>
      {open.map(inc => <Card key={inc.id} inc={inc}/>)}
      <div className="sec-title" style={{marginTop:24}}><h2>{t('Résolus','Resolved')}</h2><span className="eyebrow">{closed.length}</span></div>
      {closed.map(inc => <Card key={inc.id} inc={inc}/>)}
    </div>
  );
}

/* --- Vendors : WhatsApp principal + espace partenaire (à venir) --- */
function PageVendors({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Carnet d’adresses','Address book')}</div>
          <h1>{t('Prestataires','Vendors')}</h1>
          <p>{t('Communications via WhatsApp Business. Notifications automatiques (mission, brief, paiement).','Communications via WhatsApp Business. Automatic notifications (assignment, brief, payment).')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.notImplemented(t('Ajout prestataire','Add vendor'))}><I.plus/> {t('Ajouter','Add')}</button>
        </div>
      </div>

      <div className="coming-soon">
        <strong>À venir</strong>
        <span>{t('Espace partenaire dédié — chaque prestataire pourra accéder à ses missions, brief, photos et historique de paiements via une mini-app.','Dedicated partner space — each vendor will access their missions, brief, photos and payment history via a mini-app.')}</span>
      </div>

      <div className="vendor-grid">
        {D.VENDORS.map(v => (
          <div key={v.id} className="vendor-card">
            <div className="avatar">{v.name.split(' ').map(x=>x[0]).slice(0,2).join('')}</div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:14,fontWeight:600,color:'var(--text)'}}>{v.name}</div>
              <div style={{fontSize:11,color:'var(--muted)',marginTop:2}}>{v.role} · {v.city}</div>
              <div style={{display:'flex',gap:10,marginTop:8,fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
                <span><I.star style={{color:'var(--gold)',verticalAlign:'-1px'}}/> {v.rating}</span>
                <span>{v.missions} {t('missions','missions')}</span>
              </div>
              <div style={{display:'flex',gap:6,marginTop:10,flexWrap:'wrap'}}>
                {v.whatsapp && <button className="btn btn-sm btn-accent" onClick={()=>DA_ACTIONS.whatsappStaff(v, t('Bonjour, mission Dar Ayla','Hello, Dar Ayla mission'))}><I.phone/> WhatsApp</button>}
                <button className="btn btn-sm btn-ghost" onClick={()=>DA_ACTIONS.callVendor(v)}><I.phone/> {t('Appeler','Call')}</button>
                <button className="btn btn-sm btn-ghost" disabled style={{opacity:.5}} title={t('Bientôt','Soon')}>{t('Espace partenaire','Partner space')} <I.arrowR/></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- Mobile view (inchangé) --- */
function PageMobile({ lang, onOpenResa }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const today = D.todayStr;
  const todayTasks = D.HOUSEKEEPING.filter(m => m.date === today);
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('PWA · iOS / Android','PWA · iOS / Android')}</div>
          <h1>{t('App équipe terrain','Team field app')}</h1>
          <p>{t('Vue mobile pour les femmes de chambre, chauffeurs, prestataires. Notifications push + WhatsApp.','Mobile view for housekeepers, drivers, vendors. Push notifications + WhatsApp.')}</p>
        </div>
      </div>
      <div className="mobile-frame">
        <div className="mobile-status">
          <span>9:41</span>
          <span style={{display:'flex',gap:6}}><span>●●●●</span><span>WiFi</span><span>96%</span></span>
        </div>
        <div className="mobile-app">
          <div style={{padding:'4px 4px 14px'}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:'.22em',textTransform:'uppercase',color:'var(--muted)'}}>
              {new Date().toLocaleDateString(lang==='EN'?'en-GB':'fr-FR',{weekday:'long',day:'numeric',month:'short'})}
            </div>
            <div style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:28,marginTop:2}}>{t('Bonjour Khadija','Hello Khadija')}</div>
            <div style={{fontSize:12,color:'var(--muted)',marginTop:4}}>{t('3 tâches aujourd’hui · 1 en cours','3 tasks today · 1 in progress')}</div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:14}}>
            <div className="kpi" style={{padding:'10px 12px'}}>
              <div className="kpi-l">{t('À faire','To do')}</div>
              <div className="kpi-v" style={{fontSize:24,marginTop:4}}>{todayTasks.filter(t=>t.status!=='fait').length}</div>
            </div>
            <div className="kpi is-accent" style={{padding:'10px 12px'}}>
              <div className="kpi-l">{t('Prio','Prio')}</div>
              <div className="kpi-v" style={{fontSize:24,marginTop:4,color:'var(--accent)'}}>{todayTasks.filter(t=>t.priority==='high').length}</div>
            </div>
          </div>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:'.22em',textTransform:'uppercase',color:'var(--muted)',marginBottom:8}}>{t('Mes tâches','My tasks')}</div>
          {todayTasks.slice(0,4).map(m => {
            const suite = D.SUITES.find(s => s.id===m.suiteId);
            const done = m.status==='fait';
            return (
              <div key={m.id} className={`task-row ${done?'done':''}`} style={{padding:'10px 12px',marginBottom:6}}>
                <button className={`task-check ${done?'done':''}`}>{done && <I.check/>}</button>
                <div className="task-meta">
                  <div className="task-title" style={{fontSize:12}}>{suite.name} · {m.type}</div>
                  <div className="task-sub" style={{fontSize:10}}>{m.notes ? m.notes.slice(0,40)+'…' : (m.startedAt ? `${t('Démarré','Started')} ${m.startedAt}` : t('À faire','To do'))}</div>
                </div>
                {m.priority==='high' && <span style={{width:6,height:6,borderRadius:'50%',background:'var(--warn)',alignSelf:'center'}}/>}
              </div>
            );
          })}
        </div>
        <div className="mobile-tabbar">
          <div className="mobile-tab on"><I.home/>{t('Auj.','Today')}</div>
          <div className="mobile-tab"><I.broom/>{t('Tâches','Tasks')}</div>
          <div className="mobile-tab"><I.bell/>{t('Demandes','Requests')}</div>
          <div className="mobile-tab"><I.box/>Stock</div>
          <div className="mobile-tab"><I.users/>{t('Équipe','Team')}</div>
        </div>
      </div>
    </div>
  );
}

/* --- Reservations (liste + filtre + clic → drawer) --- */
function PageReservations({ onOpenResa, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const [filter, setFilter] = useState('active');
  const today = D.todayStr;

  const filtered = D.RESERVATIONS.filter(r => {
    if (filter==='active')   return r.arrivee <= today && r.depart > today;
    if (filter==='upcoming') return r.arrivee > today;
    if (filter==='past')     return r.depart <= today;
    return true;
  }).sort((a,b) => a.arrivee.localeCompare(b.arrivee));

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{D.RESERVATIONS.length} {t('réservations','bookings')} · Notion + Lodgify</div>
          <h1>{t('Réservations','Bookings')}</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm" onClick={()=>DA_ACTIONS.exportCSV('reservations')}>{t('Export CSV','Export CSV')}</button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${filter==='active'?'on':''}`} onClick={()=>setFilter('active')}>{t('En cours','Active')}<span className="count">{D.RESERVATIONS.filter(r=>r.arrivee<=today&&r.depart>today).length}</span></button>
        <button className={`tab ${filter==='upcoming'?'on':''}`} onClick={()=>setFilter('upcoming')}>{t('À venir','Upcoming')}<span className="count">{D.RESERVATIONS.filter(r=>r.arrivee>today).length}</span></button>
        <button className={`tab ${filter==='past'?'on':''}`} onClick={()=>setFilter('past')}>{t('Passées','Past')}<span className="count">{D.RESERVATIONS.filter(r=>r.depart<=today).length}</span></button>
        <button className={`tab ${filter==='all'?'on':''}`} onClick={()=>setFilter('all')}>{t('Toutes','All')}<span className="count">{D.RESERVATIONS.length}</span></button>
      </div>

      <div className="card" style={{padding:0,overflow:'hidden'}}>
        <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
          <thead>
            <tr style={{background:'var(--surface)',borderBottom:'1px solid var(--border)',textAlign:'left'}}>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Voyageur','Guest')}</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>Suite</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Arrivée','Arrival')}</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Départ','Departure')}</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Canal','Channel')}</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Montant','Total')}</th>
              <th style={{padding:'10px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--muted)',fontWeight:600}}>{t('Statut','Status')}</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr><td colSpan="7" style={{padding:40,textAlign:'center',color:'var(--muted)',fontStyle:'italic',fontFamily:"'Cormorant Garamond',serif",fontSize:16}}>
                {t('Aucune réservation dans cette catégorie.','No bookings in this category.')}
              </td></tr>
            )}
            {filtered.map(r => {
              const suite = D.SUITES.find(s => s.id===r.suiteId);
              const stMap = {'En cours':'pill-info','Confirmée':'pill-ok','Arrivée aujourd\u2019hui':'pill-accent','Départ aujourd\u2019hui':'pill-warn'};
              return (
                <tr key={r.id} onClick={()=>onOpenResa(r)} style={{borderBottom:'1px solid var(--border-soft)',cursor:'pointer',transition:'background .1s'}}
                    onMouseEnter={e=>e.currentTarget.style.background='var(--surface)'} onMouseLeave={e=>e.currentTarget.style.background=''}>
                  <td style={{padding:'12px 14px'}}>
                    <div style={{display:'flex',gap:8,alignItems:'center'}}>
                      <div style={{width:30,height:30,borderRadius:'50%',background:suite?.color||'var(--muted)',display:'grid',placeItems:'center',color:'#fff',fontWeight:700,fontSize:11,fontFamily:"'JetBrains Mono',monospace",flexShrink:0}}>{r.avatar}</div>
                      <div>
                        <div style={{fontWeight:600,color:'var(--text)'}}>{r.voyageur} {r.vip && <I.star style={{color:'var(--gold)'}}/>}</div>
                        <div style={{fontSize:11,color:'var(--muted)'}}>{r.nationalite} · {r.pax} pax</div>
                      </div>
                    </div>
                  </td>
                  <td style={{padding:'12px 14px',color:'var(--text)'}}><span style={{color:suite?.color||'var(--muted)'}}>●</span> {suite?.name||'—'}</td>
                  <td style={{padding:'12px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:12,color:'var(--text)'}}>{r.arrivee}<div style={{fontSize:10,color:'var(--muted)'}}>{r.heureCI}</div></td>
                  <td style={{padding:'12px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:12,color:'var(--text)'}}>{r.depart}<div style={{fontSize:10,color:'var(--muted)'}}>{r.heureCO}</div></td>
                  <td style={{padding:'12px 14px'}}><span className="tag-mono">{r.canal}</span></td>
                  <td style={{padding:'12px 14px',fontFamily:"'JetBrains Mono',monospace",fontSize:12,fontWeight:600,color:'var(--text)'}}>{r.montant} MAD</td>
                  <td style={{padding:'12px 14px'}}><span className={`pill ${stMap[r.statut]||'pill-muted'}`}><span className="dot"/>{r.statut||'—'}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* --- Finances (CA réel depuis réservations) --- */
function PageFinances({ lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const now = new Date();
  const monthStr = now.toLocaleDateString(lang==='EN'?'en-GB':'fr-FR',{month:'long',year:'numeric'});

  const thisMonth = D.RESERVATIONS.filter(r => {
    const dep = r.depart || '';
    return dep.slice(0,7) === now.toISOString().slice(0,7);
  });
  const caTotal = thisMonth.reduce((s,r) => s + (r.montant||0), 0);
  const commTakeys = Math.round(caTotal * 0.20);
  const netProprio = caTotal - commTakeys;

  const bySuite = {};
  thisMonth.forEach(r => {
    const suite = D.SUITES.find(s=>s.id===r.suiteId);
    const name = suite?.name || r.suiteId || 'Autre';
    bySuite[name] = (bySuite[name]||0) + (r.montant||0);
  });

  const byCanal = {};
  thisMonth.forEach(r => {
    const c = r.canal || 'Direct';
    byCanal[c] = (byCanal[c]||0) + (r.montant||0);
  });

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{t('Hébergement · commission · extras','Accommodation · commission · extras')}</div>
          <h1>{t('Finances','Finance')}</h1>
          <p>{monthStr} · {thisMonth.length} {t('réservations','bookings')}</p>
        </div>
      </div>

      <div className="kpi-strip">
        <div className="kpi"><div className="kpi-l">{t('CA Hébergement','Accommodation Revenue')}</div><div className="kpi-v">{caTotal.toLocaleString()} <small>MAD</small></div></div>
        <div className="kpi"><div className="kpi-l">{t('Commission TAKEYS (20%)','TAKEYS Commission (20%)')}</div><div className="kpi-v">{commTakeys.toLocaleString()} <small>MAD</small></div></div>
        <div className="kpi"><div className="kpi-l">{t('Net propriétaire','Owner net')}</div><div className="kpi-v">{netProprio.toLocaleString()} <small>MAD</small></div></div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginTop:20}}>
        <div className="card">
          <div className="hr-label">{t('Par suite','By suite')}</div>
          <table style={{width:'100%',fontSize:13}}>
            <tbody>
              {Object.entries(bySuite).sort((a,b)=>b[1]-a[1]).map(([name,ca]) => (
                <tr key={name} style={{borderBottom:'1px solid var(--border-soft)'}}>
                  <td style={{padding:'8px 0',color:'var(--text)',fontWeight:500}}>{name}</td>
                  <td style={{padding:'8px 0',textAlign:'right',fontFamily:"'JetBrains Mono',monospace",fontSize:12}}>{ca.toLocaleString()} MAD</td>
                  <td style={{padding:'8px 0 8px 12px',textAlign:'right',fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:'var(--muted)'}}>{caTotal ? Math.round(ca/caTotal*100) : 0}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="hr-label">{t('Par canal','By channel')}</div>
          <table style={{width:'100%',fontSize:13}}>
            <tbody>
              {Object.entries(byCanal).sort((a,b)=>b[1]-a[1]).map(([canal,ca]) => (
                <tr key={canal} style={{borderBottom:'1px solid var(--border-soft)'}}>
                  <td style={{padding:'8px 0',color:'var(--text)',fontWeight:500}}>{canal}</td>
                  <td style={{padding:'8px 0',textAlign:'right',fontFamily:"'JetBrains Mono',monospace",fontSize:12}}>{ca.toLocaleString()} MAD</td>
                  <td style={{padding:'8px 0 8px 12px',textAlign:'right',fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:'var(--muted)'}}>{caTotal ? Math.round(ca/caTotal*100) : 0}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageCalendar, PageInbox, PageCleaning, PageRequests, PageInventory, PageIncidents, PageVendors, PageMobile, PageSuites, PageReservations, PageFinances, BackendSpecModal });