/* ============ DAR AYLA OPS V2 — DASHBOARD (Today) ============ */

function KPI({ label, value, unit, sub, delta, accent, spark }) {
  return (
    <div className={`kpi ${accent?'is-accent':''}`}>
      <div className="kpi-h">
        <span className="kpi-l">{label}</span>
        {delta != null && <span className={`kpi-d ${delta>=0?'up':'dn'} mono`}>{delta>=0?'↑':'↓'} {Math.abs(delta)}%</span>}
      </div>
      <div className="kpi-v">{value}{unit && <span className="unit">{unit}</span>}</div>
      {sub && <div className="kpi-sub">{sub}</div>}
      {spark && <Sparkline data={spark}/>}
    </div>
  );
}

function Sparkline({ data }) {
  const w=120, h=32;
  const max = Math.max(...data), min = Math.min(...data);
  const span = max-min || 1;
  const pts = data.map((v,i) => [i*(w/(data.length-1)), h-((v-min)/span)*(h-4)-2]);
  const line = pts.map((p,i)=>`${i?'L':'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  return <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none"><path className="area" d={area}/><path className="line" d={line}/></svg>;
}

function SuiteCard({ suite, status, onClick }) {
  const t = (fr,en) => window.__lang==='EN'?en:fr;
  const statusMap = {
    'occupée':   { pill: t('Occupée','Occupied'), cls: 'pill-accent' },
    'check-in':  { pill: t('Check-in','Check-in'), cls: 'pill-ok' },
    'check-out': { pill: t('Check-out','Check-out'), cls: 'pill-warn' },
    'ci-co':     { pill: t('Turnover','Turnover'), cls: 'pill-warn' },
    'ménage':    { pill: t('Ménage','Cleaning'), cls: 'pill-warn' },
    'libre':     { pill: t('Libre','Available'), cls: 'pill-muted' },
  };
  const s = statusMap[status.kind] || statusMap['libre'];
  return (
    <div className="suite-card" onClick={onClick}>
      <span className="swatch" style={{background:suite.color}}/>
      <div className="suite-card-h">
        <div>
          <div className="suite-name">{suite.name}</div>
          <div className="suite-meta">{suite.area}m² · {suite.floor} · {suite.view}</div>
        </div>
        <span className={`pill ${s.cls}`}><span className="dot"/>{s.pill}</span>
      </div>
      {status.resa ? (<>
        <div className="suite-guest">{status.resa.voyageur}{status.resa.vip && <I.star style={{color:'var(--gold)',marginLeft:6,verticalAlign:'-1px'}}/>}</div>
        <div className="suite-dates">{status.resa.arrivee.slice(5)} → {status.resa.depart.slice(5)} · {status.resa.pax}p</div>
      </>) : (
        <div className="suite-guest" style={{color:'var(--muted)',fontWeight:400,fontStyle:'italic',fontFamily:"'Cormorant Garamond',serif",fontSize:14}}>{t('En attente d’arrivée','Awaiting next guest')}</div>
      )}
      <div className="suite-tags">
        {status.menage && status.menage.status!=='fait' && <span className="pill pill-warn"><I.broom width="10" height="10"/>{status.menage.type}</span>}
        {status.menage && status.menage.status==='fait' && <span className="pill pill-ok"><I.check/>{t('Recouche OK','Turn-down OK')}</span>}
        {status.requests > 0 && <span className="pill pill-accent"><I.bell width="10" height="10"/>{status.requests}</span>}
      </div>
    </div>
  );
}

function ActivityFeed({ items, lang }) {
  return (
    <div className="activity-list">
      {items.map(a => (
        <div key={a.id} className="activity-item">
          <div className={`activity-icon ${a.icon}`}>
            {a.icon==='arrival'   && <I.arrowR width="14" height="14"/>}
            {a.icon==='departure' && <I.arrowL width="14" height="14"/>}
            {a.icon==='cleaning'  && <I.broom width="14" height="14"/>}
            {a.icon==='message'   && <I.inbox width="14" height="14"/>}
            {a.icon==='request'   && <I.bell width="14" height="14"/>}
            {a.icon==='incident'  && <I.wrench width="14" height="14"/>}
          </div>
          <div className="activity-text"><span className="who">{a.who}</span> · {a.text}</div>
          <div className="activity-time">{a.at.slice(11,16)}</div>
        </div>
      ))}
    </div>
  );
}

function ArrivalsTodayCard({ resas, onOpen, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  return (
    <div className="card">
      <div className="card-h">
        <div>
          <span className="eyebrow">{t('Arrivées','Arrivals')} · {resas.length}</span>
          <h3>{t('Ils arrivent aujourd’hui','Arriving today')}</h3>
        </div>
        <button className="btn btn-sm">{t('Préparer','Prepare')} <I.arrowR/></button>
      </div>
      {resas.length===0 ? (
        <div style={{padding:'18px 0',color:'var(--muted)',fontSize:13}}>{t('Aucune arrivée prévue','No arrivals today')}</div>
      ) : resas.map(r => {
        const suite = window.DA_DATA.SUITES.find(s => s.id===r.suiteId);
        return (
          <div key={r.id} style={{display:'grid',gridTemplateColumns:'auto 1fr auto',gap:12,padding:'10px 0',borderBottom:'1px dashed var(--border-soft)',alignItems:'center'}} onClick={()=>onOpen(r)}>
            <div style={{width:34,height:34,borderRadius:'50%',background:suite.color,display:'grid',placeItems:'center',color:'#1a0f08',fontWeight:700,fontSize:12,fontFamily:"'JetBrains Mono',monospace"}}>{r.avatar}</div>
            <div style={{minWidth:0}}>
              <div style={{fontSize:13,fontWeight:600,color:'var(--text)'}}>{r.voyageur} {r.vip && <I.star style={{color:'var(--gold)'}}/>}</div>
              <div style={{fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>{suite.name} · {r.heureCI} · {r.pax}p · {r.canal}</div>
            </div>
            <button className="btn btn-sm btn-ghost"><I.arrowR/></button>
          </div>
        );
      })}
    </div>
  );
}

function PendingRequestsCard({ reqs, onOpen, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const top = reqs.slice(0,5);
  return (
    <div className="card">
      <div className="card-h">
        <div>
          <span className="eyebrow">{t('Demandes en cours','Open requests')} · {reqs.length}</span>
          <h3>{t('À traiter','To handle')}</h3>
        </div>
        <button className="btn btn-sm" onClick={()=>onOpen()}>{t('Tout voir','View all')} <I.arrowR/></button>
      </div>
      {top.map(r => {
        const resa = window.DA_DATA.RESERVATIONS.find(x => x.id===r.resaId);
        const suite = resa ? window.DA_DATA.SUITES.find(s=>s.id===resa.suiteId) : null;
        const stMap = { 'demandé':'pill-warn', 'à préparer':'pill-warn', 'en cours':'pill-info', 'confirmé':'pill-ok' };
        return (
          <div key={r.id} style={{padding:'9px 0',borderBottom:'1px dashed var(--border-soft)'}}>
            <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:3}}>
              <span className={`pill ${stMap[r.status]||'pill-muted'}`}><span className="dot"/>{r.status}</span>
              <span className="tag-mono">{r.type}</span>
              <span className="tag-mono" style={{marginLeft:'auto'}}>{r.due.slice(11)} · {r.due.slice(5,10)}</span>
            </div>
            <div style={{fontSize:13,color:'var(--text)'}}>{r.label}</div>
            <div style={{fontSize:11,color:'var(--muted)',marginTop:2,fontFamily:"'JetBrains Mono',monospace"}}>
              {suite?.name} · {resa?.voyageur} · {r.assignee}
              {r.amount > 0 && ` · ${r.amount} MAD`}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function HousekeepingCard({ tasks, onToggle, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  return (
    <div className="card">
      <div className="card-h">
        <div>
          <span className="eyebrow">{t('Ménages du jour','Housekeeping today')}</span>
          <h3>{t('Planning des chambres','Suite turnover')}</h3>
        </div>
        <span className="tag-mono">{tasks.filter(x=>x.status==='fait').length} / {tasks.length}</span>
      </div>
      {tasks.map(m => {
        const suite = window.DA_DATA.SUITES.find(s=>s.id===m.suiteId);
        const done = m.status==='fait';
        return (
          <div key={m.id} className={`task-row ${done?'done':''}`}>
            <button className={`task-check ${done?'done':''}`} onClick={(e)=>{e.stopPropagation();onToggle(m.id);}}>
              {done && <I.check/>}
            </button>
            <div className="task-meta">
              <div className="task-title">{suite.name} · {m.type}</div>
              <div className="task-sub">
                {done ? `${t('Terminé','Done')} ${m.completedAt||''}`
                      : m.startedAt ? `${t('Démarré','Started')} ${m.startedAt}`
                      : m.notes ? m.notes.slice(0,60) + (m.notes.length>60?'…':'')
                      : t('Non démarré','Not started')}
              </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>
          </div>
        );
      })}
    </div>
  );
}

function InboxPreview({ threads, onOpen, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  return (
    <div className="card">
      <div className="card-h">
        <div>
          <span className="eyebrow">{t('Lodgify · derniers messages','Lodgify · latest')}</span>
          <h3>{t('Messages voyageurs','Guest messages')}</h3>
        </div>
        <span className="lodgify-sync"><span className="ping"/>{t('Live','Live')}</span>
      </div>
      {threads.map(({resa, last}) => {
        const suite = window.DA_DATA.SUITES.find(s=>s.id===resa.suiteId);
        return (
          <div key={resa.id} style={{padding:'10px 0',borderBottom:'1px dashed var(--border-soft)',cursor:'pointer'}} onClick={()=>onOpen(resa)}>
            <div style={{display:'flex',gap:10,alignItems:'flex-start'}}>
              <div style={{width:30,height:30,borderRadius:'50%',background:suite.color,display:'grid',placeItems:'center',color:'#1a0f08',fontSize:11,fontWeight:700,flex:'none'}}>{resa.avatar}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <strong style={{fontSize:13,color:'var(--text)'}}>{resa.voyageur}</strong>
                  <span className="tag-mono">{suite.name}</span>
                  <span className="tag-mono" style={{marginLeft:'auto'}}>{last.at.slice(11,16)}</span>
                </div>
                <div style={{fontSize:12,color:'var(--text-soft)',marginTop:3,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{last.text}</div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function DraggableKPIs({ lang, kpis }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const allKpis = [
    { id:'occ', accent:true, label:t('Occupation','Occupancy'), value:kpis.occPct, unit:'%', sub:`${kpis.active} / 9 suites`, delta:+8, spark:[62,58,71,68,75,82,67,kpis.occPct] },
    { id:'arr', label:t('Arrivées','Arrivals'), value:kpis.arrivals, sub:t('Aujourd’hui','Today') },
    { id:'dep', label:t('Départs','Departures'), value:kpis.departures, sub:t('Aujourd’hui','Today') },
    { id:'req', label:t('Demandes','Requests'), value:kpis.pendingReq, sub:t('À traiter','Open'), delta:-12 },
    { id:'rev', label:t('Recettes ce mois','Revenue MTD'), value:'412', unit:'k MAD', sub:t('Avril 2026','April 2026'), delta:+18, spark:[180,220,260,300,340,380,400,412] },
    { id:'rate', label:t('Note voyageurs','Guest rating'), value:'4.94', unit:'/5', sub:'Lodgify · 142 avis', delta:+0.3 },
    { id:'adr', label:'ADR', value:'2 480', unit:'MAD', sub:t('Tarif moyen','Average rate'), delta:+5 },
    { id:'rev2', label:'RevPAR', value:'1 920', unit:'MAD', sub:t('30 derniers jours','Last 30 days'), delta:+11 },
  ];
  const [order, setOrder] = useState(() => {
    try { return JSON.parse(localStorage.getItem('da_kpi_order')) || ['occ','arr','dep','req','rev','rate']; }
    catch { return ['occ','arr','dep','req','rev','rate']; }
  });
  const [dragId, setDragId] = useState(null);
  const persist = (next) => { setOrder(next); localStorage.setItem('da_kpi_order', JSON.stringify(next)); };
  const onDragStart = (e, id) => { setDragId(id); e.dataTransfer.effectAllowed='move'; };
  const onDragOver = (e, id) => {
    e.preventDefault();
    if (!dragId || dragId===id) return;
    const next = [...order];
    const from = next.indexOf(dragId), to = next.indexOf(id);
    if (from<0 || to<0) return;
    next.splice(from,1); next.splice(to,0,dragId);
    persist(next);
  };
  const onDragEnd = () => setDragId(null);
  const visible = order.map(id => allKpis.find(k => k.id===id)).filter(Boolean);
  const hidden = allKpis.filter(k => !order.includes(k.id));
  const addKpi = (id) => persist([...order, id]);
  const removeKpi = (id) => persist(order.filter(x => x!==id));

  return (
    <>
      <div className="kpi-strip">
        {visible.map(k => (
          <div key={k.id}
               draggable
               onDragStart={(e)=>onDragStart(e,k.id)}
               onDragOver={(e)=>onDragOver(e,k.id)}
               onDragEnd={onDragEnd}
               className={`kpi-drag-wrap ${dragId===k.id?'dragging':''}`}
               style={{position:'relative'}}>
            <KPI {...k}/>
            <button className="kpi-remove" onClick={()=>removeKpi(k.id)} title={t('Retirer','Remove')}>×</button>
            <span className="kpi-grip" title={t('Glisser pour réordonner','Drag to reorder')}>⋮⋮</span>
          </div>
        ))}
      </div>
      {hidden.length>0 && (
        <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:24,fontSize:11,alignItems:'center'}}>
          <span style={{color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace",letterSpacing:'.1em',textTransform:'uppercase'}}>{t('Ajouter','Add')} :</span>
          {hidden.map(k => (
            <button key={k.id} className="btn btn-sm btn-ghost" onClick={()=>addKpi(k.id)}>+ {k.label}</button>
          ))}
        </div>
      )}
    </>
  );
}

function PageToday({ kpis, onOpenResa, lang }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const D = window.DA_DATA;
  const today = D.todayStr;

  const suiteStatus = D.SUITES.map(s => {
    const resa = D.RESERVATIONS.find(r => r.suiteId===s.id && r.arrivee <= today && r.depart > today);
    const arrives = D.RESERVATIONS.find(r => r.suiteId===s.id && r.arrivee===today);
    const departs = D.RESERVATIONS.find(r => r.suiteId===s.id && r.depart===today);
    const menage = D.HOUSEKEEPING.find(m => m.suiteId===s.id && m.date===today);
    const requests = D.REQUESTS.filter(rq => rq.resaId === resa?.id && rq.status !== 'résolu' && rq.status !== 'fait').length;
    let kind = 'libre';
    if (arrives && departs) kind = 'ci-co';
    else if (arrives) kind = 'check-in';
    else if (departs) kind = 'check-out';
    else if (resa) kind = 'occupée';
    else if (menage && menage.status !== 'fait') kind = 'ménage';
    return { suite: s, status: { kind, resa: resa || arrives || departs, menage, requests } };
  });

  const arrivals = D.RESERVATIONS.filter(r => r.arrivee === today);
  const inbox = Object.entries(D.CHAT_THREADS)
    .map(([id, msgs]) => {
      const last = msgs.filter(m => m.from!=='__pending__' && m.author!=='__pending__').slice(-1)[0];
      const resa = D.RESERVATIONS.find(r => r.chatThread === id);
      return last && resa ? { resa, last } : null;
    })
    .filter(Boolean)
    .sort((a,b) => (b.last.at||'').localeCompare(a.last.at||''))
    .slice(0,4);

  const todayMng = D.HOUSEKEEPING.filter(m => m.date === today);

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">{new Date(today).toLocaleDateString(lang==='EN'?'en-GB':'fr-FR',{weekday:'long',day:'numeric',month:'long',year:'numeric'})}</div>
          <h1>{t('Bonjour Larissa','Good morning Larissa')}</h1>
          <p>{t('9 suites · 6 occupées · 2 arrivées · 1 départ. La maison vous attend.','9 suites · 6 occupied · 2 arrivals · 1 departure. The house is ready for you.')}</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-sm"><I.filter/> {t('Filtres','Filters')}</button>
          <button className="btn btn-sm btn-accent"><I.plus/> {t('Nouvelle réservation','New booking')}</button>
        </div>
      </div>

      <DraggableKPIs lang={lang} kpis={kpis}/>

      <div className="sec-title">
        <h2>{t('État des suites','Suites status')}</h2>
        <span className="eyebrow">{t('Vue d’ensemble','Overview')}</span>
        <div className="grow"/>
        <button className="btn btn-sm btn-ghost">{t('Voir le calendrier','See calendar')} <I.arrowR/></button>
      </div>
      <div className="suite-strip" style={{marginBottom:28}}>
        {suiteStatus.map(({suite, status}) => (
          <SuiteCard key={suite.id} suite={suite} status={status} onClick={() => status.resa && onOpenResa(status.resa)}/>
        ))}
      </div>

      <div className="dash-grid">
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          <ArrivalsTodayCard resas={arrivals} onOpen={onOpenResa} lang={lang}/>
          <HousekeepingCard tasks={todayMng} onToggle={()=>{}} lang={lang}/>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:20}}>
          <InboxPreview threads={inbox} onOpen={onOpenResa} lang={lang}/>
          <PendingRequestsCard reqs={D.REQUESTS} onOpen={onOpenResa} lang={lang}/>
          <div className="card">
            <div className="card-h"><div><span className="eyebrow">{t('Activité','Activity')}</span><h3>{t('Fil temps réel','Live feed')}</h3></div></div>
            <ActivityFeed items={D.ACTIVITY} lang={lang}/>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KPI, Sparkline, SuiteCard, ActivityFeed, ArrivalsTodayCard, PendingRequestsCard, HousekeepingCard, InboxPreview, PageToday });