// Admin: Approve Pending Activities — review self-submitted activity requests
const AwardScreen = ({ data, isMobile, setScreen, config }) => {
  const toast = useToast();
  const [stateMode, setStateMode] = React.useState('normal');
  const [items, setItems] = React.useState(() => (data.pendingApprovals || []).map(p => ({ ...p, status: 'pending' })));
  const [filter, setFilter] = React.useState('pending');

  const visible = items.filter(item =>
    filter === 'all' ? true : item.status === filter
  );

  const pendingCount = items.filter(i => i.status === 'pending').length;

  const approve = (id) => {
    setItems(prev => prev.map(i => i.id === id ? { ...i, status: 'approved' } : i));
    const item = items.find(i => i.id === id);
    if (item) toast.success(`Approved — ${item.points} pts`, `${item.submittedBy.name}'s activity has been approved and points credited.`);
  };

  const reject = (id) => {
    setItems(prev => prev.map(i => i.id === id ? { ...i, status: 'rejected' } : i));
    const item = items.find(i => i.id === id);
    if (item) toast.info('Submission rejected', `${item.submittedBy.name} will be notified.`);
  };

  if (stateMode === 'loading') {
    return (
      <div style={{position:'relative'}}>
        <div style={{position:'absolute', top:16, right:isMobile?16:48, zIndex:5}}>
          <StateModeSwitch value={stateMode} onChange={setStateMode}/>
        </div>
        <SkeletonAward isMobile={isMobile}/>
      </div>
    );
  }

  if (stateMode === 'error') {
    return (
      <div className="fade-in" style={{padding: isMobile?'20px 16px':'40px 48px', maxWidth:900, margin:'0 auto'}}>
        <div style={{display:'flex', justifyContent:'flex-end', marginBottom:12}}>
          <StateModeSwitch value={stateMode} onChange={setStateMode}/>
        </div>
        <PageError
          title="Couldn't load pending approvals"
          body="We lost connection while fetching submissions. Check your connection and retry."
          onRetry={() => setStateMode('normal')}
          onHome={() => setScreen('dashboard')}
        />
      </div>
    );
  }

  return (
    <div className="fade-in" style={{padding: isMobile?'20px 16px 32px':'40px 48px 80px', maxWidth: 900, margin:'0 auto'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:16, marginBottom:24, flexWrap:'wrap'}}>
        <div>
          <div className="t-label muted" style={{display:'flex', alignItems:'center', gap:6}}>
            <Icon name="shield" size={12}/> Manager tools
          </div>
          <h1 className="t-h1" style={{margin:'6px 0 0'}}>Point Approval</h1>
          <p className="t-body muted" style={{maxWidth:540, marginTop:8}}>
            Review activity submissions from your team. Approved entries are credited immediately.
          </p>
        </div>
        <StateModeSwitch value={stateMode} onChange={setStateMode}/>
      </div>

      {/* Filter tabs */}
      <div style={{display:'flex', gap:6, marginBottom:20, flexWrap:'wrap'}}>
        {[
          { v: 'pending',  l: `Pending${pendingCount > 0 ? ` (${pendingCount})` : ''}` },
          { v: 'approved', l: 'Approved' },
          { v: 'rejected', l: 'Rejected' },
          { v: 'all',      l: 'All' },
        ].map(opt => (
          <button key={opt.v} onClick={() => setFilter(opt.v)} style={{
            padding:'8px 16px', borderRadius:999, fontSize:13, fontWeight:500,
            background: filter === opt.v ? 'var(--nav-navy)' : 'var(--surface-muted)',
            color: filter === opt.v ? '#fff' : 'var(--text-muted)',
            border: `1px solid ${filter === opt.v ? 'var(--nav-navy)' : 'var(--border-soft)'}`,
            transition:'all 150ms ease-out',
          }}>{opt.l}</button>
        ))}
      </div>

      {stateMode === 'loading' ? (
        <SkeletonAward isMobile={isMobile} noWrapper/>
      ) : visible.length === 0 ? (
        <div className="card" style={{padding:20}}>
          {filter === 'pending' ? (
            <EmptyState
              kind="feed"
              title="No pending submissions"
              body="All caught up. When team members submit activities, they'll appear here for review."
            />
          ) : (
            <EmptyState
              kind="search"
              title={`No ${filter} submissions`}
              body="Try switching to a different filter."
              actions={[<button key="a" className="btn btn-ghost" onClick={() => setFilter('pending')}>View pending</button>]}
            />
          )}
        </div>
      ) : (
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          {visible.map(item => (
            <ApprovalCard
              key={item.id}
              item={item}
              onApprove={() => approve(item.id)}
              onReject={() => reject(item.id)}
              isMobile={isMobile}
            />
          ))}
        </div>
      )}
    </div>
  );
};

const STATUS_COLORS = { pending: 'var(--text-muted)', approved: 'var(--success)', rejected: '#EF4444' };
const STATUS_LABELS = { pending: 'Pending', approved: 'Approved', rejected: 'Rejected' };

const ApprovalCard = ({ item, onApprove, onReject, isMobile }) => (
  <article className="card fade-in" style={{padding: isMobile ? 18 : 24}}>
    <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
      <Avatar initials={item.submittedBy.initials} size={40} tone="navy"/>
      <div style={{flex:1, minWidth:0}}>
        <div style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:4}}>
          <span style={{fontWeight:600, fontSize:14}}>{item.submittedBy.name}</span>
          <span className="t-caption muted">{item.submittedBy.team}</span>
          <span style={{
            marginLeft:'auto', fontSize:11, fontWeight:600, letterSpacing:'0.04em',
            textTransform:'uppercase', color: STATUS_COLORS[item.status],
          }}>{STATUS_LABELS[item.status]}</span>
        </div>
        <div style={{display:'flex', gap:8, alignItems:'center', flexWrap:'wrap', fontSize:13, color:'var(--text-muted)', marginBottom:10}}>
          <span className="chip" style={{padding:'3px 9px', fontSize:11, background:'var(--surface-muted)', border:'1px solid var(--border-soft)'}}>{item.category}</span>
          <span>{item.activity}</span>
          <span style={{width:2, height:2, borderRadius:'50%', background:'var(--text-subtle)', flexShrink:0}}/>
          <span className="num" style={{color:'var(--accent-gold)', fontWeight:600}}>+{item.points} pts</span>
          <span style={{width:2, height:2, borderRadius:'50%', background:'var(--text-subtle)', flexShrink:0}}/>
          <span>{item.submittedOn}</span>
        </div>
        <p style={{margin:'0 0 14px', fontSize:14, lineHeight:1.6, color:'var(--text)'}}>{item.note}</p>
        {item.status === 'pending' && (
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-primary" onClick={onApprove} style={{padding:'8px 18px', fontSize:13}}>
              <Icon name="check" size={13}/> Approve
            </button>
            <button className="btn btn-ghost" onClick={onReject} style={{padding:'8px 18px', fontSize:13, color:'var(--text-muted)'}}>
              Reject
            </button>
          </div>
        )}
        {item.status === 'approved' && (
          <div style={{fontSize:12, color:'var(--success)', display:'flex', alignItems:'center', gap:4}}>
            <Icon name="check" size={12}/> Points credited to ledger
          </div>
        )}
        {item.status === 'rejected' && (
          <div style={{fontSize:12, color:'#EF4444', display:'flex', alignItems:'center', gap:4}}>
            <Icon name="x" size={12}/> Submission rejected
          </div>
        )}
      </div>
    </div>
  </article>
);

Object.assign(window, { AwardScreen });