// Availability tab — 3-state cells (none / available / matched).
// Replicate buttons inline with person dropdown. Total hours shown.

const SLOT_HOURS = [3, 2.5, 2.5];

function AvailabilityTab({
  kind,
  selectedId,
  onSelectId,
  weekIdx,
  avail,
  schedule,        // current week's matched schedule, used to detect "matched" cells
  onToggle,
  onReplicate,
  onClearWeek,
}) {
  const { DAYS, SLOTS } = window.FS_DATA;
  const personAvail = avail[selectedId]?.[weekIdx] || {};

  let filled = 0;
  let totalHours = 0;
  for (const d of DAYS) {
    const arr = personAvail[d.id] || [false, false, false];
    arr.forEach((v, i) => { if (v) { filled++; totalHours += SLOT_HOURS[i]; } });
  }
  const total = DAYS.length * SLOTS.length;

  // Determine if a cell is matched in the schedule
  const isMatched = (dayId, slotIdx) => {
    if (!schedule) return false;
    const cell = schedule[dayId][slotIdx];
    return cell.matched.some(m =>
      kind === 'client' ? m.clientId === selectedId : m.therapistId === selectedId
    );
  };

  return (
    <div className="panel">
      <div className="person-select">
        <window.PersonPicker kind={kind} value={selectedId} onChange={onSelectId} />
        <button className="btn-sm" onClick={() => onReplicate(selectedId, weekIdx, 'rest')}>
          ⇉ To remaining
        </button>
        <button className="btn-sm" onClick={() => onReplicate(selectedId, weekIdx, 'all')}>
          ⇉ All 12 weeks
        </button>
        <button className="btn-sm" onClick={() => onClearWeek(selectedId, weekIdx)}>
          ✕ Clear
        </button>
        <div style={{marginLeft: 'auto', textAlign: 'right'}}>
          <div style={{fontSize: 9, color: 'var(--ink-500)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase'}}>
            This week
          </div>
          <div style={{fontSize: 14, fontWeight: 600, color: 'var(--ink-900)'}}>
            {filled}<span style={{color: 'var(--ink-500)', fontWeight: 500}}>/{total}</span>
            <span style={{color: 'var(--ink-500)', fontWeight: 500, marginLeft: 6}}>·</span>
            <span style={{marginLeft: 6}}>{totalHours}<span style={{fontSize: 11, color: 'var(--ink-500)', fontWeight: 500}}> hrs</span></span>
          </div>
        </div>
      </div>

      <div className="avail-grid">
        <div></div>
        {DAYS.map(d => (<div key={d.id} className="avail-head">{d.label}</div>))}
        {SLOTS.map((slot, sIdx) => (
          <React.Fragment key={slot.id}>
            <div className="avail-slot-label">
              <span>{slot.label}</span>
              <span className="slot-time">{slot.time}</span>
            </div>
            {DAYS.map(d => {
              const checked = !!personAvail[d.id]?.[sIdx];
              const matched = checked && isMatched(d.id, sIdx);
              return (
                <button
                  key={d.id + sIdx}
                  className={`avail-cell ${matched ? 'matched' : checked ? 'checked' : ''}`}
                  onClick={() => onToggle(selectedId, weekIdx, d.id, sIdx)}
                  aria-pressed={checked}
                  title={matched ? 'Available · matched in schedule' : checked ? 'Available · not yet matched' : 'Not available'}
                >
                  {checked
                    ? <span className="check-mark">✓</span>
                    : <span className="empty-dot" />}
                </button>
              );
            })}
          </React.Fragment>
        ))}
      </div>

      <div style={{display: 'flex', gap: 14, marginTop: 10, fontSize: 11, color: 'var(--ink-500)'}}>
        <span style={{display: 'inline-flex', alignItems: 'center', gap: 6}}>
          <span style={{width: 10, height: 10, borderRadius: 3, background: 'var(--cream-100)', border: '1px solid var(--ink-300)'}}></span>
          Not available
        </span>
        <span style={{display: 'inline-flex', alignItems: 'center', gap: 6}}>
          <span style={{width: 10, height: 10, borderRadius: 3, background: 'var(--green-100)', border: '1.5px solid var(--green-300)'}}></span>
          Available
        </span>
        <span style={{display: 'inline-flex', alignItems: 'center', gap: 6}}>
          <span style={{width: 10, height: 10, borderRadius: 3, background: 'var(--green-600)', border: '1.5px solid var(--green-700)'}}></span>
          Matched in schedule
        </span>
      </div>
    </div>
  );
}

window.AvailabilityTab = AvailabilityTab;