// Shared chat UI atoms (JSX) — window.ChatUI. Load after React/Babel, before admin-chat.jsx / student-chat.jsx.
(function(){
const overlay={position:'fixed',inset:0,background:'rgba(6,10,22,.62)',backdropFilter:'blur(3px)',display:'grid',placeItems:'center',zIndex:900,padding:16};
const box={width:'100%',maxWidth:380,background:'var(--navy-900)',border:'1px solid var(--border-gold)',borderRadius:'var(--radius)',padding:'22px 22px 18px',boxShadow:'var(--shadow)'};
const btnBase={padding:'10px 18px',borderRadius:999,fontFamily:'var(--font-body)',fontWeight:700,fontSize:'.86rem',cursor:'pointer',border:'1px solid transparent'};
const btnGhost={...btnBase,background:'var(--surface)',border:'1px solid var(--border)',color:'var(--ink-dim)'};
const btnDanger={...btnBase,background:'rgba(248,113,113,.14)',border:'1px solid rgba(248,113,113,.45)',color:'#fca5a5'};
const btnGold={...btnBase,background:'linear-gradient(135deg,var(--gold-2),var(--gold))',color:'#1a1303'};

function ConfirmModal({title,body,confirmLabel='Delete',danger=true,onConfirm,onCancel}){
  return <div style={overlay} onClick={onCancel}>
    <div style={box} onClick={e=>e.stopPropagation()}>
      <div style={{fontWeight:700,fontSize:'1.05rem',color:'var(--ink)',marginBottom:9,fontFamily:'var(--font-display)'}}>{title}</div>
      <div style={{color:'var(--ink-dim)',fontSize:'.88rem',lineHeight:1.55,marginBottom:22}}>{body}</div>
      <div style={{display:'flex',gap:10,justifyContent:'flex-end'}}>
        <button style={btnGhost} onClick={onCancel}>Cancel</button>
        <button style={danger?btnDanger:btnGold} onClick={onConfirm}>{confirmLabel}</button>
      </div>
    </div>
  </div>;
}
function CheckOne({color}){ return <svg width="14" height="10" viewBox="0 0 16 11" fill="none"><path d="M1 5.5L5.5 10 15 1" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>; }
function CheckTwo({color}){ return <svg width="17" height="10" viewBox="0 0 20 11" fill="none"><path d="M1 5.5L5.5 10 12 3" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/><path d="M7 5.5L11.5 10 19 1" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>; }
function Ticks({seen}){ const color= seen ? 'var(--gold-2)' : 'var(--ink-faint)'; return <span style={{display:'inline-flex',marginLeft:4,verticalAlign:'middle'}} title={seen?'Seen':'Delivered'}><CheckTwo color={color}/></span>; }

// 3-state presence dot for chat heads: active (green) / idle (crescent) / offline (gray).
function PresenceDot({state,size=10}){
  const base={position:'absolute',bottom:-1,right:-1,width:size,height:size,borderRadius:'50%',border:'2px solid var(--navy-900)',display:'grid',placeItems:'center'};
  if(state==='active') return <span style={{...base,background:'#4ade80'}} title="Active now"/>;
  if(state==='idle') return <span style={{...base,background:'#1b2340'}} title="Idle"><svg width={size*0.62} height={size*0.62} viewBox="0 0 10 10"><path d="M6.6 1.2a4 4 0 100 7.6A4.6 4.6 0 016.6 1.2z" fill="#f5d97a"/></svg></span>;
  return <span style={{...base,background:'#6b7280'}} title="Offline"/>;
}

const REACTS=['❤️','👍','🔥','😂'];
function ReactionBar({mine,active,counts,onToggle}){
  if(!counts && !active) return null;
  return <div style={{display:'flex',gap:4,flexWrap:'wrap',marginTop:4,justifyContent:mine?'flex-end':'flex-start'}}>
    {REACTS.filter(e=>counts&&counts[e]).map(e=> <button key={e} onClick={()=>onToggle(e)} style={{display:'flex',alignItems:'center',gap:3,padding:'2px 7px',borderRadius:999,border:'1px solid '+(active===e?'var(--border-gold)':'var(--border)'),background:active===e?'var(--gold-soft)':'var(--surface)',fontSize:'.74rem',cursor:'pointer',color:'var(--ink-dim)'}}>{e}<span style={{fontFamily:'var(--font-mono)',fontSize:'.68rem'}}>{counts[e]}</span></button>)}
  </div>;
}
function ReactPicker({onPick}){
  return <div style={{display:'flex',gap:2,padding:'4px 6px',borderRadius:999,background:'var(--navy-900)',border:'1px solid var(--border)',boxShadow:'var(--shadow)'}}>
    {REACTS.map(e=> <button key={e} onClick={()=>onPick(e)} style={{border:'none',background:'none',cursor:'pointer',fontSize:'1rem',padding:'2px 4px',lineHeight:1}}>{e}</button>)}
  </div>;
}
function TypingDots(){ return <span style={{display:'inline-flex',gap:3,alignItems:'center'}}><i className="cg-typedot"/><i className="cg-typedot"/><i className="cg-typedot"/></span>; }

window.ChatUI = { ConfirmModal, Ticks, ReactionBar, ReactPicker, TypingDots, PresenceDot, REACTS };
})();