/* ============ DAR AYLA OPS V2 — DRAWER RESA + CHAT LODGIFY ============ */
const { useRef } = React;

function ResaDrawer({ resa, onClose, lang, onPatch }) {
  const t = (fr,en) => lang==='EN'?en:fr;
  const open = !!resa;
  const D = window.DA_DATA;
  const [tab, setTab] = useState('details');
  const [messages, setMessages] = useState([]);
  const [draft, setDraft] = useState('');
  const [edits, setEdits] = useState({});
  const [saving, setSaving] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    if (resa) {
      setMessages(D.CHAT_THREADS[resa.chatThread] || []);
      setEdits({});
      setTab('details');
      setSaving(false);
    }
  }, [resa]);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, tab]);

  if (!resa) return <><div className="drawer-backdrop"/><div className="drawer"/></>;
  const suite = D.SUITES.find(s => s.id===resa.suiteId) || { name:'—', color:'#888', area:0, floor:'—', beds:'—', view:'—' };
  const requests = D.REQUESTS.filter(r => r.resaId === resa.id);
  const channelLabel = { 'Direct':'TAKEYS Direct', 'Airbnb':'Airbnb', 'Booking.com':'Booking.com' }[resa.canal] || resa.canal;

  function send() {
    if (!draft.trim()) return;
    const txt = draft.trim();
    const newMsg = { id: Date.now(), from:'staff', author: (window.__daUser?.name || 'Staff') + ' \u00b7 OPS',
      at: new Date().toISOString().slice(0,16).replace('T',' '), text: txt };
    setMessages([...messages.filter(m=>m.from!=='__pending__'&&m.author!=='__pending__'), newMsg]);
    setDraft('');
    if (window.DA_ACTIONS?.sendMessage) window.DA_ACTIONS.sendMessage(resa, txt);
  }

  function setEdit(key, val) { setEdits(prev => ({...prev, [key]: val})); }

  async function handleSave() {
    if (saving) return;
    const patch = {};
    if (edits.allergies !== undefined) patch.allergies = edits.allergies;
    if (edits.heureCI  !== undefined) patch.heureCI  = edits.heureCI;
    if (edits.heureCO  !== undefined) patch.heureCO  = edits.heureCO;
    if (edits.notes    !== undefined) patch.notes    = edits.notes;
    if (edits.montant  !== undefined) patch.montant  = Number(String(edits.montant).replace(/[^\d.]/g,'')) || 0;
    if (Object.keys(patch).length === 0) { onClose(); return; }
    setSaving(true);
    try {
      await fetch('/api/reservations?id=' + resa.id, {
        method: 'PATCH', headers: {'Content-Type':'application/json'},
        body: JSON.stringify(patch),
      });
      Object.assign(resa, patch);
      window.toast?.({ kind:'ok', icon:'check', title:'R\u00e9servation mise \u00e0 jour', detail: resa.voyageur });
      if (window.DA_REFRESH) window.DA_REFRESH();
    } catch(e) {
      window.toast?.({ kind:'warn', icon:'wrench', title:'Erreur sauvegarde', detail: e.message });
    }
    setSaving(false);
    onClose();
  }

  return (
    <>
      <div className={`drawer-backdrop ${open?'open':''}`} onClick={onClose}/>
      <div className={`drawer ${open?'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">{resa.refBooking}</span>
              <span className="lodgify-sync"><span className="ping"/>Lodgify · {channelLabel}</span>
              {resa.vip && <span className="pill pill-gold"><I.star/> VIP</span>}
            </div>
            <div style={{fontFamily:"'Cormorant Garamond',serif",fontStyle:'italic',fontSize:26,color:'var(--text)',lineHeight:1.05}}>
              {resa.voyageur}
            </div>
            <div style={{fontSize:12,color:'var(--muted)',marginTop:4,fontFamily:"'JetBrains Mono',monospace",letterSpacing:'.04em'}}>
              <span style={{color:suite.color}}>{'\u25CF'}</span> {suite.name} · {resa.arrivee} {'\u2192'} {resa.depart} · {resa.pax} pax · {resa.montant} MAD
            </div>
          </div>
          <button className="icon-btn" onClick={onClose}><I.close/></button>
        </div>

        <div style={{padding:'0 22px',borderBottom:'1px solid var(--border)',background:'var(--surface)'}}>
          <div className="tabs" style={{margin:0,border:0}}>
            <button className={`tab ${tab==='chat'?'on':''}`} onClick={()=>setTab('chat')}>
              {t('Conversation','Conversation')}<span className="count">{messages.filter(m=>m.from!=='__pending__').length}</span>
            </button>
            <button className={`tab ${tab==='details'?'on':''}`} onClick={()=>setTab('details')}>{t('D\u00e9tails','Details')}</button>
            <button className={`tab ${tab==='requests'?'on':''}`} onClick={()=>setTab('requests')}>
              {t('Demandes','Requests')}{requests.length>0 && <span className="count">{requests.length}</span>}
            </button>
            <button className={`tab ${tab==='timeline'?'on':''}`} onClick={()=>setTab('timeline')}>{t('Historique','Timeline')}</button>
          </div>
        </div>

        <div className="drawer-body">
          <div className="drawer-split" style={{height:'100%'}}>
            <div style={{minHeight:0,display:'flex',flexDirection:'column'}}>
              {tab==='chat' && (
                <div className="chat-wrap">
                  <div className="chat-body" ref={bodyRef}>
                    <div className="chat-day-sep">{t('Lodgify \u00b7 sync','Lodgify \u00b7 sync')}</div>
                    {messages.filter(m=>m.from!=='__pending__'&&m.author!=='__pending__').map(m => (
                      <div key={m.id} className={`chat-msg ${m.from}`}>
                        <div className="mh">
                          <span>{m.author}</span>
                          <span style={{marginLeft:'auto'}}>{m.at.slice(11,16)}</span>
                        </div>
                        <div>{m.text}</div>
                      </div>
                    ))}
                    {messages.length===0 && (
                      <div style={{textAlign:'center',padding:'40px 20px',color:'var(--muted)',fontStyle:'italic',fontFamily:"'Cormorant Garamond',serif",fontSize:16}}>
                        {t('Pas de conversation Lodgify pour cette r\u00e9servation.','No Lodgify conversation for this booking.')}
                      </div>
                    )}
                  </div>
                  <div className="chat-quick">
                    <button>{'\uD83D\uDC4B'} {t('Bienvenue','Welcome')}</button>
                    <button>{'\uD83D\uDE96'} {t('Confirmer transfert','Confirm transfer')}</button>
                    <button>{'\uD83C\uDF7D'} {t('Menu repas','Meal menu')}</button>
                    <button>{'\uD83D\uDD11'} {t('Check-in','Check-in')}</button>
                    <button>{'\uD83D\uDCCD'} {t('Adresse','Address')}</button>
                  </div>
                  <div className="chat-input-row">
                    <textarea className="chat-input" placeholder={t('R\u00e9pondre via Lodgify\u2026','Reply through Lodgify\u2026')} value={draft} onChange={e=>setDraft(e.target.value)} onKeyDown={e=>{if(e.key==='Enter'&&(e.metaKey||e.ctrlKey)){send();}}}/>
                    <button className="btn btn-accent" onClick={send} disabled={!draft.trim()}><I.send/> {t('Envoyer','Send')}</button>
                  </div>
                </div>
              )}
              {tab==='details' && (
                <div style={{padding:'18px 22px',overflowY:'auto'}}>
                  <div className="hr-label">{t('S\u00e9jour','Stay')}</div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                    <div className="input-row"><label>{t('Arriv\u00e9e','Arrival')}</label><input className="input" defaultValue={resa.arrivee} disabled style={{opacity:.7}}/></div>
                    <div className="input-row"><label>{t('Heure CI','Check-in')}</label><input className="input" defaultValue={resa.heureCI} onChange={e=>setEdit('heureCI',e.target.value)}/></div>
                    <div className="input-row"><label>{t('D\u00e9part','Departure')}</label><input className="input" defaultValue={resa.depart} disabled style={{opacity:.7}}/></div>
                    <div className="input-row"><label>{t('Heure CO','Check-out')}</label><input className="input" defaultValue={resa.heureCO} onChange={e=>setEdit('heureCO',e.target.value)}/></div>
                    <div className="input-row"><label>{t('Voyageurs','Guests')}</label><input className="input" defaultValue={resa.pax} disabled style={{opacity:.7}}/></div>
                    <div className="input-row"><label>{t('Montant','Total')}</label><input className="input" defaultValue={resa.montant} onChange={e=>setEdit('montant',e.target.value)} placeholder="MAD"/></div>
                  </div>
                  <div className="hr-label">{t('Pr\u00e9f\u00e9rences & restrictions','Preferences & restrictions')}</div>
                  <div className="input-row" style={{marginBottom:12}}><label>{t('Allergies','Allergies')}</label><input className="input" defaultValue={resa.allergies||''} onChange={e=>setEdit('allergies',e.target.value)} placeholder={t('Aucune','None')}/></div>
                  <div className="input-row" style={{marginBottom:12}}><label>{t('R\u00e9gime','Diet')}</label><input className="input" defaultValue={resa.regime?.join(', ')||''} disabled style={{opacity:.7}}/></div>
                  <div className="input-row" style={{marginBottom:12}}><label>{t('Notes internes','Internal notes')}</label><textarea className="input" rows="3" defaultValue={resa.preferences||''} onChange={e=>setEdit('notes',e.target.value)}/></div>
                  <div className="input-row"><label>{t('Table h\u00f4tes','House dinner')}</label><input className="input" defaultValue={resa.tableHotes?.join(' \u00b7 ')||''} disabled style={{opacity:.7}}/></div>
                </div>
              )}
              {tab==='requests' && (
                <div style={{padding:'18px 22px',overflowY:'auto'}}>
                  {requests.length===0 ? (
                    <div style={{padding:'40px 20px',textAlign:'center',color:'var(--muted)',fontStyle:'italic',fontFamily:"'Cormorant Garamond',serif",fontSize:16}}>
                      {t('Aucune demande active.','No active requests.')}
                    </div>
                  ) : requests.map(r => {
                    const stMap = { 'demand\u00e9':'pill-warn', '\u00e0 pr\u00e9parer':'pill-warn', 'en cours':'pill-info', 'confirm\u00e9':'pill-ok' };
                    return (
                      <div key={r.id} style={{padding:'12px 14px',background:'var(--surface-2)',border:'1px solid var(--border)',borderRadius:10,marginBottom:8}}>
                        <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:6}}>
                          <span className={`pill ${stMap[r.status]||'pill-muted'}`}><span className="dot"/>{r.status}</span>
                          <span className="tag-mono">{r.type}</span>
                          {r.due && <span className="tag-mono" style={{marginLeft:'auto'}}>{r.due.slice(11)} \u00b7 {r.due.slice(5,10)}</span>}
                        </div>
                        <div style={{fontSize:13,color:'var(--text)',marginBottom:4}}>{r.label}</div>
                        <div style={{fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
                          {r.assignee}{r.amount>0 && ` \u00b7 ${r.amount} MAD`}
                        </div>
                        {r.notes && <div style={{fontSize:12,color:'var(--text-soft)',marginTop:6,fontStyle:'italic'}}>{r.notes}</div>}
                      </div>
                    );
                  })}
                </div>
              )}
              {tab==='timeline' && (
                <div style={{padding:'18px 22px',overflowY:'auto'}}>
                  <div style={{borderLeft:'2px solid var(--border)',paddingLeft:18,paddingTop:6}}>
                    {[
                      {t:'R\u00e9servation cr\u00e9\u00e9e',d:resa.arrivee + ' \u00b7 via ' + resa.canal,when:'-7j'},
                      {t:'Paiement re\u00e7u',d:resa.montant + ' MAD',when:'-7j'},
                      {t:'Portail voyageur envoy\u00e9',d:resa.portail||'',when:'-5j'},
                      {t:'Pr\u00e9-arriv\u00e9e confirm\u00e9e',d:'Heure CI ' + resa.heureCI,when:'-1j'},
                    ].map((e,i) => (
                      <div key={i} style={{position:'relative',marginBottom:14}}>
                        <span style={{position:'absolute',left:-23,top:5,width:8,height:8,borderRadius:'50%',background:'var(--accent)',border:'2px solid var(--bg-soft)'}}/>
                        <div style={{fontSize:13,fontWeight:600,color:'var(--text)'}}>{e.t}</div>
                        <div style={{fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>{e.when} \u00b7 {e.d}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="drawer-side">
              <div className="guest-portrait">
                <div className="avatar">{resa.avatar}</div>
                <div className="nm">{resa.voyageur} {resa.vip && <I.star style={{color:'var(--gold)'}}/>}</div>
                <div className="sub">{resa.nationalite} \u00b7 {resa.langue?.join('/')||''}</div>
              </div>
              <div className="sec">
                <div className="sec-h">{t('Suite','Suite')}</div>
                <div className="kvp"><span className="k">{t('Nom','Name')}</span><span className="v">{suite.name}</span></div>
                <div className="kvp"><span className="k">{t('Surface','Area')}</span><span className="v">{suite.area} m\u00b2</span></div>
                <div className="kvp"><span className="k">{t('\u00c9tage','Floor')}</span><span className="v">{suite.floor}</span></div>
                <div className="kvp"><span className="k">{t('Vue','View')}</span><span className="v">{suite.view}</span></div>
                <div className="kvp"><span className="k">{t('Lit','Bed')}</span><span className="v">{suite.beds}</span></div>
              </div>
              <div className="sec">
                <div className="sec-h">{t('Voyageur','Guest')}</div>
                <div className="kvp"><span className="k">{t('Nationalit\u00e9','Nationality')}</span><span className="v">{resa.nationalite}</span></div>
                <div className="kvp"><span className="k">{t('Langue(s)','Language(s)')}</span><span className="v">{resa.langue?.join(', ')||''}</span></div>
                <div className="kvp"><span className="k">{t('Allergies','Allergies')}</span><span className="v">{resa.allergies||'\u2014'}</span></div>
                <div className="kvp"><span className="k">{t('R\u00e9gime','Diet')}</span><span className="v">{resa.regime?.join(', ')||'\u2014'}</span></div>
                <div className="kvp"><span className="k">{t('Petit-d\u00e9j','Breakfast')}</span><span className="v">{resa.petitDej?'\u2713':'\u2014'}</span></div>
              </div>
              <div className="sec">
                <div className="sec-h">{t('R\u00e9servation','Booking')}</div>
                <div className="kvp"><span className="k">{t('Canal','Channel')}</span><span className="v">{channelLabel}</span></div>
                <div className="kvp"><span className="k">{t('R\u00e9f\u00e9rence','Ref')}</span><span className="v mono" style={{fontSize:11}}>{resa.refBooking}</span></div>
                <div className="kvp"><span className="k">{t('Statut','Status')}</span><span className="v">{resa.statut}</span></div>
                <div className="kvp"><span className="k">{t('Montant','Total')}</span><span className="v">{resa.montant} MAD</span></div>
              </div>
              <button className="btn btn-sm" style={{width:'100%',justifyContent:'center'}}><I.link/> {t('Ouvrir portail voyageur','Open guest portal')}</button>
            </div>
          </div>
        </div>

        <div className="drawer-foot">
          <span style={{marginRight:'auto',fontSize:11,color:'var(--muted)',fontFamily:"'JetBrains Mono',monospace"}}>
            <span className="lodgify-sync"><span className="ping"/>{t('Modifications synchronis\u00e9es','Changes synced')}</span>
          </span>
          <button className="btn btn-sm btn-ghost" onClick={()=>{ if(resa.canal==='Direct') window.open('https://wa.me/','_blank'); }}><I.phone/> {resa.canal==='Direct'?'WhatsApp':resa.canal}</button>
          <button className="btn btn-sm" onClick={onClose}>{t('Annuler','Cancel')}</button>
          <button className="btn btn-sm btn-accent" onClick={handleSave} disabled={saving}>{saving ? t('Sauvegarde...','Saving...') : t('Enregistrer','Save')} {!saving && <I.check/>}</button>
        </div>
      </div>
    </>
  );
}

window.ResaDrawer = ResaDrawer;