// WTS Cyprus — TP: Studies list
const { useState: useStateTL, useMemo: useMemoTL } = React;

const STUDY_STATUS_OPTS = [
  { value: 'all',      label: 'All' },
  { value: 'draft',    label: 'Draft' },
  { value: 'running',  label: 'Running' },
  { value: 'review',   label: 'Review' },
  { value: 'complete', label: 'Complete' },
  { value: 'archived', label: 'Archived' },
];

// Map an engagement label (from STUDIES.engagement) back to a real engagement record
const _engagementForStudy = (engLabel) => ENGAGEMENTS.find(e => e.client.includes(engLabel.split(' ')[0]) || e.name.includes(engLabel) || engLabel.includes(e.client.split(' ')[0]));

const StudiesList = ({ role, userId, onOpenStudy, onNewStudy }) => {
  const [statusFilter, setStatusFilter] = useStateTL('all');
  const [search,       setSearch]       = useStateTL('');
  const [creator,      setCreator]      = useStateTL('all');

  const visible = useMemoTL(() => {
    let xs = STUDIES.slice();
    if (role === 'staff') xs = xs.filter(s => s.createdBy === userId);
    return xs;
  }, [role, userId]);

  const counts = useMemoTL(() => ({
    active:    visible.filter(s => s.status === 'running' || s.status === 'review' || s.status === 'draft').length,
    completed: visible.filter(s => s.status === 'complete').length,
  }), [visible]);

  const creatorOptions = useMemoTL(() => USERS.filter(u => u.role === 'staff'), []);

  const filtered = useMemoTL(() => {
    return visible.filter(s => {
      if (statusFilter !== 'all' && s.status !== statusFilter) return false;
      if (creator !== 'all' && s.createdBy !== creator) return false;
      if (search) {
        const q = search.toLowerCase();
        if (!s.name.toLowerCase().includes(q) && !s.engagement.toLowerCase().includes(q)) return false;
      }
      return true;
    });
  }, [visible, statusFilter, creator, search]);

  const clearFilters = () => { setStatusFilter('all'); setSearch(''); setCreator('all'); };

  return (
    <div className="ck-page">
      <div className="ck-page__header">
        <div>
          <div className="ck-page__title">Comparable studies</div>
          <div className="ck-muted" style={{ marginTop: 5 }}>
            {counts.active} active{counts.completed > 0 && <> · {counts.completed} completed</>}
          </div>
        </div>
        <Button onClick={onNewStudy}><Icon name="plus" size={14} /> New study</Button>
      </div>

      <div className="wts-filter-row">
        <Segmented options={STUDY_STATUS_OPTS} value={statusFilter} onChange={setStatusFilter} />
        <div style={{ flex: 1 }} />
        {(role === 'partner' || role === 'admin') && (
          <div className="wts-select-wrap">
            <Icon name="user" size={14} style={{ opacity: 0.4 }} />
            <select className="wts-select" value={creator} onChange={(e) => setCreator(e.target.value)}>
              <option value="all">All creators</option>
              {creatorOptions.map(u => <option key={u.id} value={u.id}>{u.name}</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 studies..." 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"><Icon name="bar-chart-3" size={20} style={{ opacity: 0.55 }} /></div>
              <div className="wts-empty__title">{visible.length === 0 ? 'No studies yet' : 'No studies match your filters'}</div>
              <div className="wts-empty__sub">{visible.length === 0 ? 'Create your first study to start benchmarking comparables.' : 'Try a different filter combination.'}</div>
              {visible.length === 0 ? (
                <Button onClick={onNewStudy} style={{ marginTop: 6 }}><Icon name="plus" size={14} /> New study</Button>
              ) : (
                <button type="button" className="wts-link wts-link--button" onClick={clearFilters}>Clear filters</button>
              )}
            </div>
          ) : (
            <table className="ck-table wts-studies-table">
              <thead>
                <tr>
                  <th>Study</th>
                  <th style={{ width: 90,  textAlign: 'right' }}>Candidates</th>
                  <th style={{ width: 220 }}>Verdict breakdown</th>
                  <th style={{ width: 200 }}>Analyst progress</th>
                  <th style={{ width: 130 }}>Created by</th>
                  <th style={{ width: 110 }}>Status</th>
                  <th style={{ width: 32 }}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(s => {
                  const breakdown = studyVerdictBreakdown(s.id);
                  const creator = getUserById(s.createdBy);
                  return (
                    <tr key={s.id} className="wts-row-clickable" onClick={() => onOpenStudy(s.id)}>
                      <td>
                        <div style={{ fontWeight: 500, color: 'var(--foreground)', fontSize: 13.5 }}>{s.name}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 2 }}>{s.engagement}</div>
                      </td>
                      <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontSize: 13 }}>
                        {s.status === 'draft' ? '—' : s.candidates}
                      </td>
                      <td>
                        {s.status === 'draft' ? (
                          <span style={{ color: 'var(--muted-foreground)', fontSize: 12.5 }}>—</span>
                        ) : s.status === 'running' ? (
                          <span style={{ color: 'var(--muted-foreground)', fontSize: 12.5, fontStyle: 'italic' }}>processing…</span>
                        ) : (
                          <div className="wts-ai-breakdown">
                            <span><i className="wts-dot wts-dot--green" /> {breakdown.accept} accept</span>
                            <span><i className="wts-dot wts-dot--red"   /> {breakdown.reject} reject</span>
                            <span><i className="wts-dot" style={{ background: 'hsl(220 9% 70%)' }} /> {breakdown.pending} pending</span>
                          </div>
                        )}
                      </td>
                      <td>
                        {(s.status === 'draft' || s.status === 'running') ? (
                          <span style={{ color: 'var(--muted-foreground)', fontSize: 12.5 }}>{s.status === 'running' ? <><Icon name="loader-2" size={11} className="wts-spin" style={{ opacity: 0.6, marginRight: 5, verticalAlign: '-2px' }} />running</> : '—'}</span>
                        ) : (
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <div style={{ flex: 1 }}>
                              <ProgressBar value={s.reviewed} max={s.candidates} />
                            </div>
                            <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>
                              {s.reviewed} / {s.candidates}
                            </span>
                          </div>
                        )}
                      </td>
                      <td style={{ fontSize: 12.5, color: 'var(--muted-foreground)' }}>{creator ? creator.name.split(' ')[0] + ' ' + creator.name.split(' ')[1][0] + '.' : '—'}</td>
                      <td>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                          <StatusBadge status={s.status} />
                          {s.status === 'running' && <span className="wts-pulse-dot" />}
                        </span>
                      </td>
                      <td><Icon name="chevron-right" size={15} style={{ opacity: 0.3 }} className="wts-row-chevron" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

Object.assign(window, { StudiesList });