const { useState, useEffect, useRef, useCallback } = React;

window.Modal = ({ title, onClose, children, size = '' }) => (
  <>
    <div className="mo-bg" onClick={onClose} />
    <div className={`mo-box ${size}`} onClick={e => e.stopPropagation()}>
      <div className="mo-head">
        <span className="mo-title">{title}</span>
        <button className="mo-close" onClick={onClose}><i className="fas fa-times"/></button>
      </div>
      {children}
    </div>
  </>
);

window.ConfirmModal = ({ title, message, onConfirm, onClose, danger = false }) => (
  <Modal title={title} onClose={onClose}>
    <div className="mo-body"><p style={{fontSize:'.9rem',color:'var(--t2)',lineHeight:1.6}}>{message}</p></div>
    <div className="mo-foot">
      <button className="btn btn-ghost btn-sm" onClick={onClose}>Hủy</button>
      <button className={`btn ${danger?'btn-danger':'btn-primary'} btn-sm`} onClick={()=>{onConfirm();onClose();}}>Xác nhận</button>
    </div>
  </Modal>
);

window.Badge = ({ cls, label }) => <span className={`badge ${cls}`}>{label}</span>;

window.ProgressBar = ({ pct }) => (
  <div className="prog-wrap">
    <div className={`prog-fill ${progColor(pct)}`} style={{width:`${Math.min(100,pct)}%`}} />
  </div>
);

window.EmptyState = ({ icon='fa-inbox', title='Chưa có dữ liệu', sub='' }) => (
  <div className="empty">
    <i className={`fas ${icon}`}/>
    <h3>{title}</h3>
    {sub && <p>{sub}</p>}
  </div>
);

window.Spinner = () => (
  <div style={{textAlign:'center',padding:'48px',color:'var(--t3)'}}>
    <i className="fas fa-circle-notch fa-spin" style={{fontSize:'2rem'}}/>
    <p style={{marginTop:12,fontSize:'.875rem'}}>Đang tải...</p>
  </div>
);

window.SearchBar = ({ value, onChange, placeholder='Tìm kiếm...' }) => (
  <div className="sb-search" style={{flex:1,maxWidth:320}}>
    <i className="fas fa-search"/>
    <input value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}/>
    {value && <button onClick={()=>onChange('')} style={{color:'var(--t3)',fontSize:'.8rem'}}><i className="fas fa-times"/></button>}
  </div>
);

window.Tabs = ({ tabs, active, onChange }) => (
  <div className="tabs">
    {tabs.map(t=>(
      <button key={t.id} className={`tab ${active===t.id?'act':''}`} onClick={()=>onChange(t.id)}>
        {t.icon && <i className={`fas ${t.icon}`}/>}{t.label}
        {t.count!==undefined && <span className="badge b-secondary" style={{fontSize:'.65rem',padding:'1px 6px'}}>{t.count}</span>}
      </button>
    ))}
  </div>
);

window.AvatarChip = ({ name, size=34 }) => {
  const initials = name ? name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase() : '??';
  return <div style={{width:size,height:size,borderRadius:10,flexShrink:0,background:'linear-gradient(135deg,var(--primary),var(--cyan))',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:700,fontSize:size*.28}}>{initials}</div>;
};