// Pairings tab — Clients in a column, ordered list of preferred therapists per client.

const { useState: useStateP } = React;

function PairingsTab({ pairings, onAdd, onRemove, onReorder }) {
  const [selectedClient, setSelectedClient] = useStateP(window.FS_DATA.CLIENTS[0].id);
  const [pickerOpen, setPickerOpen] = useStateP(false);

  const list = pairings[selectedClient] || [];
  const client = window.FS_DATA.getClient(selectedClient);
  const therapists = window.FS_DATA.THERAPISTS;

  return (
    <div className="panel" style={{padding: '24px 28px 32px'}}>
      <div className="panel-head" style={{alignItems: 'flex-start'}}>
        <div>
          <div className="panel-eyebrow">Pairings</div>
          <h3 className="panel-title" style={{marginTop: 4}}>Which therapists each client prefers, in priority order</h3>
          <div className="muted" style={{fontSize: 13, marginTop: 6, maxWidth: 560}}>
            The matcher tries the first therapist on the list. If they're unavailable or already booked, it tries the next, and so on.
            Same-location matches only.
          </div>
        </div>
      </div>

      <div className="pairings-grid">
        <div>
          <div className="panel-eyebrow" style={{padding: '0 10px', marginBottom: 8}}>Clients</div>
          <div className="client-list">
            {window.FS_DATA.CLIENTS.map(c => (
              <div
                key={c.id}
                className={`client-row ${c.id === selectedClient ? 'selected' : ''}`}
                onClick={() => setSelectedClient(c.id)}
              >
                <window.Avatar id={c.id} short={c.short} size={28} />
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 13, fontWeight: 600}}>{c.name}</div>
                  <div style={{fontSize: 11, color: 'var(--ink-500)', marginTop: 1}}>
                    <window.LocChip loc={c.loc} small />
                    <span style={{marginLeft: 6}}>{(pairings[c.id] || []).length} preferred</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="panel-eyebrow" style={{padding: '0 10px', marginBottom: 8}}>
            Therapists by priority — {client.name}
          </div>
          <div className="priority-list">
            {list.map((tid, idx) => {
              const t = window.FS_DATA.getTherapist(tid);
              const cLocs = Array.isArray(client.loc) ? client.loc : [client.loc];
              const tLocs = Array.isArray(t.loc) ? t.loc : [t.loc];
              const isCrossLoc = !cLocs.some(l => tLocs.includes(l));
              return (
                <div key={tid} className="priority-row">
                  <div className="priority-num">{idx + 1}</div>
                  <window.Avatar id={t.id} short={t.short} size={28} />
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontSize: 14, fontWeight: 600}}>{t.name}</div>
                    <div style={{fontSize: 11, color: 'var(--ink-500)', marginTop: 1, display: 'flex', alignItems: 'center', gap: 6}}>
                      <window.LocChip loc={t.loc} small />
                      <span>{t.title}</span>
                      {isCrossLoc && (
                        <span style={{color: 'var(--accent-coral)', fontWeight: 600}}>
                          ⚠ Different location — won't be matched
                        </span>
                      )}
                    </div>
                  </div>
                  <button
                    className="priority-icon-btn"
                    onClick={() => onReorder(selectedClient, idx, idx - 1)}
                    disabled={idx === 0}
                    style={idx === 0 ? {opacity: 0.3, cursor: 'not-allowed'} : {}}
                    title="Move up"
                  >▲</button>
                  <button
                    className="priority-icon-btn"
                    onClick={() => onReorder(selectedClient, idx, idx + 1)}
                    disabled={idx === list.length - 1}
                    style={idx === list.length - 1 ? {opacity: 0.3, cursor: 'not-allowed'} : {}}
                    title="Move down"
                  >▼</button>
                  <button
                    className="priority-icon-btn"
                    onClick={() => onRemove(selectedClient, idx)}
                    title="Remove"
                    style={{color: 'var(--accent-coral)'}}
                  >✕</button>
                </div>
              );
            })}
            <button className="priority-add" onClick={() => setPickerOpen(true)}>
              + Add a therapist preference
            </button>
          </div>
        </div>
      </div>

      {pickerOpen && (
        <window.PickerModal
          title={`Add a therapist for ${client.name}`}
          hint={`${client.name} is at ${(Array.isArray(client.loc) ? client.loc : [client.loc]).map(l => window.FS_DATA.getLoc(l)?.label || l).join(' / ')}. Same-location matches only.`}
          items={therapists}
          excludeIds={list}
          onPick={(tid) => onAdd(selectedClient, tid)}
          onClose={() => setPickerOpen(false)}
        />
      )}
    </div>
  );
}

window.PairingsTab = PairingsTab;