// WTS Cyprus — PBC: cross-engagement Staff Review Inbox (F14)
const { useState: useStateI, useMemo: useMemoI } = React;

const URGENCY_OPTS = [
  { value: 'all',      label: 'All' },
  { value: 'overdue',  label: 'Overdue' },
  { value: 'due_soon', label: 'Due soon' },
  { value: 'on_track', label: 'On track' },
];

const urgencyOf = (deadline) => {
  if (!deadline) return 'on_track';
  const now = new Date('2025-05-16T00:00:00Z');
  const d = new Date(deadline);
  const days = (d - now) / 86400000;
  if (days < 0) return 'overdue';
  if (days <= 5) return 'due_soon';
  return 'on_track';
};
const URGENCY_TAG = {
  overdue:  { label: 'Overdue',  cls: 'wts-tag--overdue' },
  due_soon: { label: 'Due soon', cls: 'wts-tag--stale' },
  on_track: { label: 'On track', cls: '' },
};

const ReviewInbox = ({ role, userId, onOpenEngagement }) => {
  const toast = useToast();
  const engagements = useMemoI(() => visibleEngagementsForRole(role, userId), [role, userId]);
  const baseItems = useMemoI(() => getSubmittedItems(engagements), [engagements]);

  const [urgency, setUrgency]   = useStateI('all');
  const [engFilter, setEng]     = useStateI('all');
  const [slFilter, setSl]       = useStateI('all');
  const [search, setSearch]     = useStateI('');
  const [resolved, setResolved] = useStateI({}); // id -> 'accepted' | 'change_requested'
  const [openId, setOpenId]     = useStateI(null);
  const [over, setOver]         = useStateI({});

  const items = useMemoI(() => baseItems.map(i => over[i.id] || i).filter(i => !resolved[i.id]), [baseItems, over, resolved]);

  const engOptions = useMemoI(() => engagements.filter(e => baseItems.some(i => i.engagementId === e.id)), [engagements, baseItems]);
  const slOptions  = useMemoI(() => [...new Set(engagements.map(e => e.serviceLine))], [engagements]);

  const filtered = useMemoI(() => items.filter(it => {
    const eng = getEngagementById(it.engagementId);
    if (urgency !== 'all' && urgencyOf(it.deadline) !== urgency) return false;
    if (engFilter !== 'all' && it.engagementId !== engFilter) return false;
    if (slFilter !== 'all' && eng.serviceLine !== slFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      if (!it.label.toLowerCase().includes(q) && !eng.client.toLowerCase().includes(q)) return false;
    }
    return true;
  }).sort((a, b) => new Date(a.deadline) - new Date(b.deadline)), [items, urgency, engFilter, slFilter, search]);

  const counts = useMemoI(() => ({
    overdue:  items.filter(i => urgencyOf(i.deadline) === 'overdue').length,
    due_soon: items.filter(i => urgencyOf(i.deadline) === 'due_soon').length,
  }), [items]);

  const accept = (it) => { setResolved(r => ({ ...r, [it.id]: 'accepted' })); toast.success('Accepted', it.label); };
  const onUpdate = (ni) => {
    setOver(o => ({ ...o, [ni.id]: ni }));
    if (ni.status !== 'submitted') { setResolved(r => ({ ...r, [ni.id]: ni.status })); setOpenId(null); }
  };
  const openItem = filtered.find(i => i.id === openId) || items.find(i => i.id === openId);

  return (
    <div className="ck-page">
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Review inbox</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>
            {items.length} submission{items.length !== 1 ? 's' : ''} awaiting review
            {counts.overdue > 0 && <> · <span style={{ color: 'var(--destructive)' }}>{counts.overdue} overdue</span></>}
          </div>
        </div>
      </div>

      <div className="wts-filter-row">
        <Segmented options={URGENCY_OPTS} value={urgency} onChange={setUrgency} />
        <div style={{ flex: 1 }} />
        <div className="wts-select-wrap">
          <Icon name="folder-open" size={14} style={{ opacity: 0.4 }} />
          <select className="wts-select" value={engFilter} onChange={e => setEng(e.target.value)}>
            <option value="all">All engagements</option>
            {engOptions.map(e => <option key={e.id} value={e.id}>{e.client}</option>)}
          </select>
          <Icon name="chevron-down" size={13} style={{ opacity: 0.4 }} />
        </div>
        <div className="wts-select-wrap">
          <Icon name="layers" size={14} style={{ opacity: 0.4 }} />
          <select className="wts-select" value={slFilter} onChange={e => setSl(e.target.value)}>
            <option value="all">All service lines</option>
            {slOptions.map(sl => <option key={sl} value={sl}>{serviceLineLabel(sl)}</option>)}
          </select>
          <Icon name="chevron-down" size={13} style={{ opacity: 0.4 }} />
        </div>
        <div className="wts-search-wrap">
          <Icon name="search" size={14} style={{ opacity: 0.4 }} />
          <input className="wts-search" placeholder="Search items..." value={search} onChange={e => setSearch(e.target.value)} />
        </div>
      </div>

      <Card style={{ padding: 0, gap: 0 }}>
        <CardContent style={{ padding: 0 }}>
          {filtered.length === 0 ? (
            <div className="wts-empty">
              <div className="wts-empty__icon" style={{ background: 'hsl(142 50% 94%)' }}><Icon name="check" size={20} style={{ opacity: 0.7 }} /></div>
              <div className="wts-empty__title">Inbox zero</div>
              <div className="wts-empty__sub">Nothing awaiting review across your engagements.</div>
            </div>
          ) : (
            <table className="ck-table wts-asks-table">
              <thead>
                <tr>
                  <th>Engagement / item</th>
                  <th style={{ width: 110 }}>Service line</th>
                  <th style={{ width: 190 }}>Submitted</th>
                  <th style={{ width: 110 }}>Urgency</th>
                  <th style={{ width: 190 }}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(it => {
                  const eng = getEngagementById(it.engagementId);
                  const meta = ITEM_TYPE_META[it.type];
                  const urg = urgencyOf(it.deadline);
                  const tag = URGENCY_TAG[urg];
                  const summary = itemValueSummary(it);
                  return (
                    <tr key={it.id} className="wts-row-clickable" onClick={() => setOpenId(it.id)}>
                      <td>
                        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginBottom: 2 }}>{eng.client} · {eng.period}</div>
                        <div style={{ fontWeight: 500, color: 'var(--foreground)', fontSize: 13.5, display: 'flex', alignItems: 'center', gap: 7 }}>
                          <Icon name={meta.icon} size={13} style={{ opacity: 0.55 }} /> {it.label}
                        </div>
                      </td>
                      <td><span className="ck-badge ck-badge--secondary">{serviceLineLabel(eng.serviceLine)}</span></td>
                      <td style={{ fontSize: 12.5, color: summary ? 'var(--foreground)' : 'var(--muted-foreground)', maxWidth: 190, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{summary || '—'}</td>
                      <td>{tag.cls ? <span className={cn('wts-tag', tag.cls)}>{tag.label}</span> : <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{tag.label}</span>}</td>
                      <td onClick={e => e.stopPropagation()}>
                        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                          <Button size="sm" onClick={() => accept(it)}><Icon name="check" size={12} /> Accept</Button>
                          <Button variant="outline" size="sm" onClick={() => setOpenId(it.id)}>Review</Button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </CardContent>
      </Card>

      <Drawer open={!!openItem} onClose={() => setOpenId(null)} width={500}>
        {openItem && <RequestItemPanel item={openItem} eng={getEngagementById(openItem.engagementId)} onClose={() => setOpenId(null)} onUpdate={onUpdate} />}
      </Drawer>
    </div>
  );
};

Object.assign(window, { ReviewInbox });