/* ============================================================
   Nuad Now — Admin backend + Post-it Board
   ============================================================ */
const { useState:useSt } = React;

function AdminDays({bookings, cfgVer, onChange}){
  const now = NN.parseKey(NN.TODAY_KEY);
  const [ym,setYm]=useSt({y:now.getFullYear(), m:now.getMonth()});
  const lang = window.NN_LANG||'th';

  const first=new Date(ym.y,ym.m,1);
  const startPad=first.getDay();
  const daysInMonth=new Date(ym.y,ym.m+1,0).getDate();
  const cells=[];
  for(let i=0;i<startPad;i++) cells.push(null);
  for(let d=1;d<=daysInMonth;d++) cells.push(new Date(ym.y,ym.m,d));

  const curIdx=now.getFullYear()*12+now.getMonth();
  const viewIdx=ym.y*12+ym.m;
  const canPrev=viewIdx>curIdx;
  const canNext=viewIdx<curIdx+3;
  const move=(dir)=>{ let m=ym.m+dir,y=ym.y; if(m<0){m=11;y--;} if(m>11){m=0;y++;} setYm({y,m}); };

  const dayBooked=(k)=> NN.SLOTS.reduce((a,s)=>a+NN.bookedCount(k,s.id,bookings),0);
  const openCount=cells.filter(d=>d && NN.isOpenDay(NN.ymd(d))).length;

  const toggle=(d)=>{ const k=NN.ymd(d); if(k<NN.TODAY_KEY) return; NN.toggleOpen(k); onChange(); };
  const openWeekdays=()=>{ cells.forEach(d=>{ if(!d) return; const k=NN.ymd(d); if(k>=NN.TODAY_KEY && [2,4].includes(d.getDay()) && !NN.isOpenDay(k)) NN.toggleOpen(k); }); onChange(); };
  const closeAll=()=>{ cells.forEach(d=>{ if(!d) return; const k=NN.ymd(d); if(k>=NN.TODAY_KEY && NN.isOpenDay(k)) NN.toggleOpen(k); }); onChange(); };

  const monthLabel = lang==='en'
    ? `${window.EN_MON_FULL[ym.m]} ${ym.y}`
    : `${NN.TH_MON_FULL[ym.m]} ${ym.y+543}`;
  const dowLabels = lang==='en'
    ? window.EN_DOW.map(d=>d.slice(0,2))
    : NN.TH_DOW;

  return (
    <div className="fade-in">
      <div className="row" style={{gap:10, marginBottom:4}}>
        <span style={{color:'var(--accent)'}}><Icon name="lock" size={24}/></span>
        <h1 style={{fontSize:'1.7rem'}}>{t('ad_title')}</h1>
        <span className="chip plum">{t('ad_badge')}</span>
      </div>
      <p className="muted" style={{marginTop:0, marginBottom:18}}>{t('ad_desc')}</p>

      <div className="grid admin-grid" style={{gridTemplateColumns:'1.7fr 1fr', alignItems:'start'}}>
        <div className="card pad">
          <div className="row" style={{justifyContent:'space-between', marginBottom:16}}>
            <button className="iconbtn" onClick={()=>canPrev&&move(-1)} disabled={!canPrev} style={!canPrev?{opacity:.4}:null}><Icon name="chevL" size={20}/></button>
            <h3 style={{fontSize:'1.3rem'}}>{monthLabel}</h3>
            <button className="iconbtn" onClick={()=>canNext&&move(1)} disabled={!canNext} style={!canNext?{opacity:.4}:null}><Icon name="chevR" size={20}/></button>
          </div>
          <div className="cal-head">{dowLabels.map((d,i)=><div key={i}>{d}</div>)}</div>
          <div className="cal">
            {cells.map((d,i)=>{
              if(!d) return <div key={i} className="cell empty"></div>;
              const k=NN.ymd(d);
              const past=k<NN.TODAY_KEY;
              const open=NN.isOpenDay(k);
              const today=k===NN.TODAY_KEY;
              const bk=open?dayBooked(k):0;
              return (
                <button key={i} className={`cell ${open?'open':''} ${past?'past':''} ${today?'today':''}`}
                  onClick={()=>!past&&toggle(d)} disabled={past}>
                  {bk>0 && <span className="bdot">{Array.from({length:Math.min(bk,5)}).map((_,j)=><i key={j}/>)}</span>}
                  <span className="dn">{d.getDate()}</span>
                  <span className="sub">{past?'':(open ? t('ad_open_lbl') : t('ad_close_lbl'))}</span>
                </button>
              );
            })}
          </div>
          <div className="legend">
            <span><span className="sw" style={{background:'var(--accent)'}}></span> {t('lg_open')}</span>
            <span><span className="sw" style={{background:'var(--paper)'}}></span> {t('lg_closed')}</span>
            <span><span className="dot" style={{background:'var(--gold)', width:7, height:7}}></span> {t('lg_booked')}</span>
          </div>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          <div className="card pad" style={{textAlign:'center', background:'var(--accent-50)', borderColor:'var(--accent-100)'}}>
            <div style={{fontFamily:'var(--font-display)', fontWeight:800, fontSize:'2.6rem', color:'var(--accent)', lineHeight:1}}>{openCount}</div>
            <div className="muted" style={{marginTop:4}}>{t('ad_count')}</div>
          </div>
          <div className="card pad">
            <h3 style={{fontSize:'1.15rem', marginBottom:12}}>{t('ad_shortcuts')}</h3>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <button className="btn secondary block" onClick={openWeekdays}><Icon name="check" size={16}/> {t('ad_open_all')}</button>
              <button className="btn secondary block" onClick={closeAll}><Icon name="x" size={16}/> {t('ad_close_all')}</button>
            </div>
            <hr className="hr"/>
            <div className="kv"><span className="k">{t('ad_slots')}</span><span className="v">{NN.SLOTS.length} {t('ad_rounds')}</span></div>
            <div className="kv"><span className="k">{t('ad_cap')}</span><span className="v">{NN.CAPACITY} {t('ad_queues')}</span></div>
            <div className="kv"><span className="k">{t('ad_therapist')}</span><span className="v">{NN.THERAPIST_COUNT} {t('ad_people')}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   POST-IT BOARD
   ============================================================ */
function Board({notes, user, onAdd, onLike, onDelete, likedNotes=[], canLike=true}){
  const [open,setOpen]=useSt(false);
  const [text,setText]=useSt('');
  const [color,setColor]=useSt(NN.NOTE_COLORS[0]);
  const me = user || NN.USER;
  const myNick = me.nickname || me.name || '';
  const myReal = `${me.thai_firstname||me.english_firstname||''} ${me.thai_lastname||me.english_lastname||''}`.trim() || me.dept || '';
  const submit=()=>{
    if(!text.trim()) return;
    onAdd({ id:'n_'+Math.random().toString(36).slice(2,7), author:myNick, dept:myReal,
      text:text.trim(), color, tilt:(Math.random()*6-3), created:Date.now() });
    setText(''); setColor(NN.NOTE_COLORS[0]); setOpen(false);
  };
  const sorted=[...notes].sort((a,b)=>b.created-a.created);
  return (
    <div className="fade-in">
      <div className="row" style={{justifyContent:'space-between', marginBottom:6, flexWrap:'wrap', gap:12}}>
        <div className="row" style={{gap:10}}>
          <span style={{color:'var(--accent)'}}><Icon name="gift" size={24}/></span>
          <h1 style={{fontSize:'1.7rem'}}>{t('bd_title')}</h1>
        </div>
        <button className="btn" onClick={()=>setOpen(true)}><Icon name="plus" size={18}/> {t('bd_write')}</button>
      </div>
      <p className="muted" style={{marginTop:0, marginBottom:8}}>{t('bd_sub')}</p>
      <div className="chip ghost" style={{marginBottom:20}}>
        <Icon name="heart" size={14}/> {canLike ? t('bd_can_like') : t('bd_liked_out')}
      </div>

      <div className="board">
        {sorted.map(n=>{
          const mine = me.employee_id ? n.authorId===me.employee_id : n.author===myNick;
          const liked = likedNotes.includes(n.id);
          const disabled = mine || liked || !canLike;
          return (
            <div key={n.id} className="note" style={{background:n.color, transform:`rotate(${n.tilt}deg)`}}>
              <span className="pin"></span>
              <div className="txt">{n.text}</div>
              <div className="row" style={{justifyContent:'space-between', alignItems:'flex-end', marginTop:14}}>
                <div style={{display:'flex', alignItems:'center', gap:6}}>
                  <div className="by" style={{margin:0}}>— {n.author}{mine?' '+t('bd_you'):''} · {n.dept}</div>
                  {mine && onDelete &&
                    <button onClick={()=>onDelete(n.id)} title="ลบโพสต์อิทของฉัน"
                      style={{border:'none', background:'rgba(87,69,54,.1)', borderRadius:'50%', width:20, height:20,
                        cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
                        color:'var(--ink-300)', flexShrink:0, padding:0, lineHeight:1, fontSize:'0.75rem'}}
                      onMouseEnter={e=>e.currentTarget.style.background='rgba(198,106,92,.2)'}
                      onMouseLeave={e=>e.currentTarget.style.background='rgba(87,69,54,.1)'}>
                      ✕
                    </button>}
                </div>
                <button onClick={()=>!disabled && onLike(n)} disabled={disabled}
                  title={mine ? t('bd_mine') : (liked ? t('bd_liked') : (!canLike ? t('bd_limit') : t('bd_like')))}
                  style={{display:'inline-flex', alignItems:'center', gap:5, border:'none', cursor:disabled?'default':'pointer',
                    background:liked?'rgba(198,106,92,.18)':'rgba(87,69,54,.08)', color:liked?'var(--bad)':'#7a6857',
                    borderRadius:'999px', padding:'5px 11px', fontFamily:'var(--font-display)', fontWeight:700, fontSize:'.85rem',
                    opacity:(disabled&&!liked)?.5:1, transition:'transform .1s'}}>
                  <Icon name="heart" size={15} style={liked?{fill:'var(--bad)'}:null}/> {n.likes}
                </button>
              </div>
            </div>
          );
        })}
      </div>

      {open && ReactDOM.createPortal(
        <div className="overlay" onClick={()=>setOpen(false)}>
          <div className="modal" onClick={e=>e.stopPropagation()} style={{maxWidth:460, textAlign:'left'}}>
            <h2 style={{fontSize:'1.4rem', textAlign:'center'}}>{t('bd_modal_title')}</h2>
            <p className="muted center" style={{margin:'6px 0 16px'}}>{t('bd_modal_as')} <b>คุณ{myNick}</b></p>
            <div className="note" style={{background:color, transform:'none', margin:'0 0 16px', boxShadow:'2px 6px 14px -5px rgba(74,43,34,.4)'}}>
              <span className="pin"></span>
              <textarea value={text} onChange={e=>setText(e.target.value)} maxLength={140} autoFocus
                placeholder={t('bd_ph')}
                style={{width:'100%', border:'none', background:'transparent', resize:'none', fontFamily:'var(--font-body)',
                  fontSize:'1.06rem', color:'#574536', minHeight:84, outline:'none'}}/>
              <div className="by">— {myNick} · {myReal}</div>
            </div>
            <div className="swatches" style={{marginBottom:18}}>
              {NN.NOTE_COLORS.map(c=>(
                <button key={c} className={color===c?'on':''} style={{background:c}} onClick={()=>setColor(c)}></button>
              ))}
            </div>
            <div className="row" style={{gap:10, justifyContent:'center'}}>
              <button className="btn secondary" onClick={()=>setOpen(false)}>{t('cancel')}</button>
              <button className="btn" disabled={!text.trim()} onClick={submit}><Icon name="check" size={16}/> {t('bd_post')}</button>
            </div>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
}

Object.assign(window, { AdminDays, Board });