/* ============================================================
   Nuad Now — Login, App shell, Home, BookingCard  (JSX)
   ============================================================ */
const { useState } = React;

function SvcTok({size=64}){
  const s=NN.SERVICE;
  return (
    <div className="tok" style={{background:s.bg, color:s.color, width:size, height:size}}>
      <Glyph kind={s.glyph} size={size*0.55} color={s.color}/>
    </div>
  );
}

function BookingCard({b, onCancel, onSurvey, compact}){
  const d=NN.dayInWindow(b.dateKey);
  const dnum = d? d.dnum : new Date(b.dateKey.replace(/-/g,'/')).getDate();
  const lang = window.NN_LANG||'th';
  const monRaw = new Date(b.dateKey.replace(/-/g,'/'));
  const mon = d ? d.mon : (lang==='en' ? window.EN_MON[monRaw.getMonth()] : NN.TH_MON[monRaw.getMonth()]);
  const done = b.status==='done';
  const cancellable = NN.canCancel(b);
  const timeStr = NN.slotLabel(b.slot) + (lang==='en' ? '' : ' น.');
  return (
    <div className="card flat bk fade-in">
      <div className="when">
        <div className="d" style={done?{color:'var(--ink-300)'}:null}>{dnum}</div>
        <div className="m">{mon}</div>
      </div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:'1.12rem'}}>{t('bk_service')}</div>
        <div className="muted" style={{fontSize:'.9rem'}}>
          <Icon name="clock" size={14} style={{display:'inline', verticalAlign:'-2px', marginRight:4}}/>
          {timeStr} · {NN.SERVICE.min} {t('min')}
        </div>
        {done && b.surveyDone && <span className="chip gold" style={{marginTop:8}}><Icon name="star" size={13}/> {t('bk_done_pts')}</span>}
        {done && !b.surveyDone && <span className="chip ghost" style={{marginTop:8}}><Icon name="check" size={13}/> {t('bk_pending')}</span>}
      </div>
      <div className="row" style={{gap:10, flexShrink:0}}>
        {!done && <span className="chip sage"><span className="dot" style={{background:'var(--sage)'}}></span>{t('bk_confirmed')}</span>}
        {done && b.surveyDone && <span className="chip ghost">{t('bk_completed')}</span>}
        {!compact && !done && (cancellable
          ? <button className="btn danger sm" onClick={()=>onCancel(b)}>{t('bk_cancel')}</button>
          : <span className="chip ghost"><Icon name="lock" size={13}/> {t('bk_locked')}</span>)}
        {!compact && done && !b.surveyDone &&
          <button className="btn gold sm" onClick={()=>onSurvey(b)}><Icon name="star" size={15}/> {t('bk_survey')}</button>}
      </div>
    </div>
  );
}

function FlowerField(){
  const spots=[{t:'8%',l:'6%',s:80,d:0},{t:'70%',l:'12%',s:54,d:1.5},{t:'18%',l:'88%',s:60,d:.8},{t:'78%',l:'82%',s:90,d:2.2},{t:'45%',l:'48%',s:40,d:1}];
  return (<>{spots.map((p,i)=>(
    <div key={i} className="flower-decor" style={{top:p.t, left:p.l, animationDelay:p.d+'s'}}>
      <Glyph kind="flower" size={p.s} color="var(--accent)"/>
    </div>
  ))}</>);
}

/* ============================================================
   LOGIN
   ============================================================ */
function LoginScreen({onLogin, lang, onLangChange}){
  const [username,setUsername]=useState('');
  const [pw,setPw]=useState('');
  const [err,setErr]=useState('');
  const [loading,setLoading]=useState(false);
  const submit=async(e)=>{ e.preventDefault();
    if(!username.trim()){ setErr(t('login_err_em')); return; }
    if(!pw.trim()){ setErr(t('login_err_pw')); return; }
    setLoading(true); setErr('');
    const { user, error } = await DB.login(username, pw);
    setLoading(false);
    if(error){ setErr(error); return; }
    onLogin(user);
  };
  return (
    <div className="app-bg" style={{position:'fixed', display:'flex', alignItems:'center', justifyContent:'center', padding:24, overflowY:'auto', overflowX:'hidden'}}>
      <FlowerField/>
      {/* language toggle on login */}
      <button onClick={onLangChange} style={{
        position:'fixed', top:14, right:14, zIndex:10,
        background:'rgba(252,248,241,.9)', border:'2px solid var(--ink)',
        borderRadius:'var(--r-pill)', padding:'4px 12px', cursor:'pointer',
        fontFamily:'var(--font-display)', fontWeight:700, fontSize:'.85rem', color:'var(--ink)',
      }}>{t('lang_switch')}</button>
      <div className="card login-card" style={{position:'relative', zIndex:2, width:'min(860px,100%)', display:'grid', gridTemplateColumns:'1fr 1fr', overflow:'hidden', padding:0}}>
        <div className="hide-sm" style={{background:'linear-gradient(160deg, var(--accent-50), var(--accent-100))', padding:'40px 30px', position:'relative', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-start', borderRight:'2.5px solid var(--cream-300)'}}>
          <Logo h={48}/>
          <div style={{position:'relative', marginTop:22, width:'100%', display:'flex', justifyContent:'center'}}>
            <Bubble tail="tail-bl" lead style={{position:'absolute', top:-6, zIndex:3, width:240, textAlign:'center'}}>
              {t('login_bubble')}<br/><span style={{fontWeight:400, fontSize:'.92rem'}}>{t('login_bubble2')}</span>
            </Bubble>
            <Mascot w={230} style={{marginTop:118}}/>
          </div>
        </div>
        <div className="pad-lg" style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
          <h1 style={{fontSize:'2rem'}}>{t('login_title')}</h1>
          <p className="muted" style={{marginTop:6}}>{t('login_sub')}</p>
          <form onSubmit={submit} style={{marginTop:22, display:'flex', flexDirection:'column', gap:16}}>
            <div className="field">
              <label>{t('login_username')}</label>
              <div className="input-wrap">
                <span className="ic"><Icon name="user" size={20}/></span>
                <input className="input" type="text" value={username}
                  onChange={e=>{setUsername(e.target.value);setErr('');}}
                  placeholder={t('login_username_ph')} autoCapitalize="off" autoComplete="username"/>
              </div>
            </div>
            <div className="field">
              <label>{t('login_pw')}</label>
              <div className="input-wrap">
                <span className="ic"><Icon name="lock" size={20}/></span>
                <input className="input" type="password" value={pw}
                  onChange={e=>{setPw(e.target.value);setErr('');}}
                  placeholder={t('login_pw_ph')} autoComplete="current-password"/>
              </div>
            </div>
            {err && <div style={{color:'var(--bad)', fontSize:'.92rem'}}>{err}</div>}
            <button className="btn lg block" type="submit" disabled={loading}>
              {loading ? <span>{'⏳'}</span> : t('login_btn')}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   APP SHELL
   ============================================================ */
function Shell({tab, setTab, user, points, onLogout, onLangChange, children}){
  const tabs=[
    {id:'home',label:t('nav_home'),icon:'home'},
    {id:'book',label:t('nav_book'),icon:'cal_plus'},
    {id:'mine',label:t('nav_mine'),icon:'calendar'},
    {id:'rank',label:t('nav_rank'),icon:'trophy'},
    {id:'board',label:t('nav_board'),icon:'gift'},
  ];
  const isAdmin = user.role==='admin';
  return (
    <div className="shell">
      <div className="app-bg"><FlowerField/></div>
      <div className="topbar">
        <div className="brand"><Logo h={40}/></div>
        <nav className="nav">
          {tabs.map(t_=>( // use t_ to avoid shadowing global t
            <button key={t_.id} className={`navlink ${tab===t_.id?'active':''}`} onClick={()=>setTab(t_.id)}>
              <Icon name={t_.icon} size={19}/><span className="txt">{t_.label}</span>
            </button>
          ))}
        </nav>
        <div className="spacer"></div>
        <button className="chip gold hide-md" style={{cursor:'pointer'}} onClick={()=>setTab('rank')}>
          <Icon name="star" size={14}/> {points} {t('pts')}
        </button>
        <div className="row hide-md" style={{gap:10}}>
          <div style={{textAlign:'right', lineHeight:1.1}}>
            <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:'.95rem'}}>คุณ{user.nickname||user.name}</div>
            <div className="muted" style={{fontSize:'.78rem'}}>{user.dept}</div>
          </div>
          <GenderAvatar gender={user.gender} name={user.nickname||user.name} size={40}/>
        </div>
        {/* language toggle */}
        <button onClick={onLangChange} style={{
          background:'var(--cream-100)', border:'2px solid var(--ink)', borderRadius:'var(--r-pill)',
          padding:'4px 10px', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700,
          fontSize:'.82rem', color:'var(--ink)', flexShrink:0,
        }}>{t('lang_switch')}</button>
        {isAdmin &&
          <button className="iconbtn" title={t('admin_tt')} onClick={()=>setTab('admin')}
            style={tab==='admin'?{background:'var(--accent)', color:'#fff'}:null}><Icon name="lock" size={20}/></button>}
        <button className="iconbtn" title={t('logout_tt')} onClick={onLogout}><Icon name="logout" size={20}/></button>
      </div>
      <div className="content">{children}</div>
      <nav className="bottom-nav">
        {tabs.map(t_=>(
          <button key={t_.id} className={`bnav-item ${tab===t_.id?'active':''}`} onClick={()=>setTab(t_.id)}>
            <Icon name={t_.icon} size={22}/>
            <span>{t_.label}</span>
          </button>
        ))}
        {isAdmin &&
          <button className={`bnav-item ${tab==='admin'?'active':''}`} onClick={()=>setTab('admin')}>
            <Icon name="lock" size={22}/>
            <span>{t('nav_admin')}</span>
          </button>}
        <button className="bnav-item" onClick={onLangChange}>
          <Icon name="spark" size={22}/>
          <span>{t('lang_switch')}</span>
        </button>
      </nav>
    </div>
  );
}

/* ============================================================
   HOME
   ============================================================ */
function Home({user, bookings, allBookings, points, pointState, onBook, onGoMine, onGoRank, onGoBoard, onSurvey}){
  const upcoming = bookings.filter(b=>b.status==='confirmed' && !NN.isPast(b.dateKey))
    .sort((a,b)=>(a.dateKey+a.slot).localeCompare(b.dateKey+b.slot));
  const pend = NN.pendingSurveys(bookings);
  const lb = NN.leaderboard(pointState);
  const me = lb.find(r=>r.me);
  const nextOpen = NN.openDays().filter(d=>NN.dayBookable(d.key,bookings,allBookings)>0).slice(0,4);
  const lastDay = NN.WINDOW[NN.WINDOW.length-1];
  const thisMonthBooked = NN.monthBooking(NN.TODAY_KEY.slice(0,7), bookings);

  return (
    <div className="fade-in">
      <div className="row" style={{gap:10, marginBottom:18}}>
        <span style={{color:'var(--gold-600)'}}><Icon name="sun" size={26}/></span>
        <h1 style={{fontSize:'1.7rem'}}>{NN.greeting()}, คุณ{user.thai_firstname||user.nickname||user.name} 👋</h1>
      </div>

      {pend.length>0 &&
        <div className="card flat pad survey-banner fade-in" style={{background:'var(--gold-100)', borderColor:'var(--gold-600)', display:'flex', alignItems:'center', gap:14, marginBottom:18}}>
          <span style={{color:'var(--gold-600)'}}><Icon name="bell" size={26}/></span>
          <div style={{flex:1}}>
            <b style={{fontFamily:'var(--font-display)'}}>{t('surv_title')}</b>
            <div className="muted" style={{fontSize:'.9rem'}}>{t('surv_sub').replace('{{date}}', NN.fmtDateShort(pend[0].dateKey))}</div>
          </div>
          <button className="btn gold sm" onClick={()=>onSurvey(pend[0])}>{t('surv_btn')}</button>
        </div>}

      <div className="grid home-grid" style={{gridTemplateColumns:'1.55fr 1fr', alignItems:'start'}}>
        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          {/* hero */}
          <div className="card pad-lg" style={{background:'linear-gradient(150deg, var(--accent-50), var(--accent-100))', position:'relative', overflow:'hidden', minHeight:230}}>
            <div className='hero-content' style={{maxWidth:'64%'}}>
              <span className="chip plum" style={{marginBottom:12}}><Icon name="heart" size={14}/> {t('welfare')}</span>
              <h2 style={{fontSize:'1.8rem', lineHeight:1.2, marginTop:6}}>{t('hero_title').split('\n').map((l,i)=><span key={i}>{l}{i===0&&<br/>}</span>)}</h2>
              <p className="muted" style={{margin:'10px 0 16px', fontSize:'.95rem'}}>
                {t('hero_sub')}<br/>{t('hero_up_to')} {NN.fmtDateShort(lastDay.key)}
              </p>
              <button className="btn lg" onClick={onBook}><Icon name="plus" size={20}/> {t('hero_btn')}</button>
              {thisMonthBooked &&
                <div className="chip ghost" style={{marginTop:12}}><Icon name="check" size={13}/> {t('hero_booked')}</div>}
            </div>
            <Mascot w={186} style={{position:'absolute', right:-6, bottom:-16}} className="bob hero-mascot"/>
          </div>

          {/* next open days */}
          <div className="card pad">
            <div className="row section-row" style={{justifyContent:'space-between', marginBottom:14}}>
              <h3 style={{fontSize:'1.2rem'}}>{t('open_title')}</h3>
              <span className="chip ghost hide-sm">{t('nav_home')==='Home'?'Tue & Thu':'เปิด อังคาร & พฤหัสฯ'}</span>
            </div>
            {nextOpen.length===0
              ? <p className="muted center" style={{padding:'16px 0'}}>{t('open_empty')}</p>
              : <div className="dates">
                  {nextOpen.map(d=>{
                    const free=NN.dayBookable(d.key,bookings,allBookings);
                    return (
                      <button key={d.key} className="datecard" onClick={onBook} style={{flexBasis:'92px'}}>
                        <div className="dow">{d.offset===0 ? t('today') : NN.dowLabel(d.date)}</div>
                        <div className="dnum">{d.dnum}</div>
                        <div className="mon">{window.NN_LANG==='en' ? window.EN_MON[d.date.getMonth()] : d.mon}</div>
                        <div style={{fontSize:'.7rem', marginTop:4, color:'var(--sage-600)', fontFamily:'var(--font-display)', fontWeight:600}}>{t('open_free')} {NN.dayBookable(d.key,bookings,allBookings)}/{NN.CAPACITY*2}</div>
                      </button>
                    );
                  })}
                </div>}
          </div>
        </div>

        {/* right column */}
        <div style={{display:'flex', flexDirection:'column', gap:18}}>
          {/* points / rank */}
          <button className="card pad" onClick={onGoRank} style={{textAlign:'center', background:'var(--gold-100)', borderColor:'var(--gold-600)', cursor:'pointer'}}>
            <div style={{color:'var(--gold-600)', display:'flex', justifyContent:'center', marginBottom:4}}><Icon name="trophy" size={30}/></div>
            <div style={{fontFamily:'var(--font-display)', fontWeight:800, fontSize:'2.6rem', color:'var(--gold-600)', lineHeight:1}}>{points}</div>
            <div className="muted" style={{marginTop:2}}>{t('pts_score')} · {t('pts_rank')} {me?me.rank:'-'} {t('pts_of')} {lb.length} {t('pts_ppl')}</div>
            <div className="chip gold" style={{marginTop:10}}>{t('pts_see')} <Icon name="chevR" size={13}/></div>
          </button>

          {/* daily quests */}
          <div className="card pad">
            <h3 style={{fontSize:'1.2rem', marginBottom:12}}>{t('quest_title')}</h3>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <div className="row" style={{gap:8}}>
                <span style={{width:22, height:22, borderRadius:'50%', background:'var(--sage)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', flexShrink:0}}><Icon name="check" size={14}/></span>
                <div style={{flex:1, fontSize:'.88rem', minWidth:0}}>{t('quest_checkin')}</div>
                <span className="chip sage" style={{fontSize:'.74rem', flexShrink:0, padding:'.25em .6em'}}>{t('quest_ok')}</span>
              </div>
              <button className="row" onClick={onGoBoard} style={{gap:8, background:'none', border:'none', padding:0, cursor:'pointer', textAlign:'left', width:'100%'}}>
                <span style={{width:22, height:22, borderRadius:'50%', background:'var(--blush)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink)', flexShrink:0}}><Icon name="heart" size={13}/></span>
                <div style={{flex:1, fontSize:'.88rem', minWidth:0}}>{t('quest_like')}</div>
                <span className="chip gold" style={{fontSize:'.74rem', flexShrink:0, padding:'.25em .6em'}}>{t('quest_done')}</span>
              </button>
            </div>
            <p className="muted" style={{fontSize:'.8rem', marginTop:12, marginBottom:0}}>{t('quest_footer')}</p>
          </div>

          {/* upcoming */}
          <div className="card pad">
            <div className="row" style={{justifyContent:'space-between', marginBottom:14}}>
              <h3 style={{fontSize:'1.2rem'}}>{t('myq_title')}</h3>
              {upcoming.length>0 && <button className="btn ghost sm" onClick={onGoMine}>{t('see_all')} <Icon name="chevR" size={15}/></button>}
            </div>
            {upcoming.length===0
              ? <div className="center muted" style={{padding:'20px 0'}}>
                  <Glyph kind="flower" size={40} color="var(--cream-300)"/>
                  <div style={{marginTop:8}}>{t('myq_empty')}</div>
                </div>
              : <div style={{display:'flex', flexDirection:'column', gap:12}}>
                  {upcoming.map(b=> <BookingCard key={b.id} b={b} compact/>)}
                </div>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SvcTok, BookingCard, LoginScreen, Shell, Home, FlowerField });