// Locked view — read-only shareable schedule, print-friendly. All 12 weeks.

function LockedView({ allSchedules, onPrint }) {
  const { WEEKS, DAYS, SLOTS, getClient, getTherapist } = window.FS_DATA;

  return (
    <div>
      <div className="page-head" style={{marginBottom: 16}}>
        <div>
          <h1 className="page-title">Locked summer schedule</h1>
          <div className="page-sub">Print or save as PDF to attach to family & therapist emails.</div>
        </div>
        <div className="head-actions">
          <button className="btn-sm primary" onClick={onPrint}>⎙ Save as PDF / Print</button>
        </div>
      </div>

      <div className="locked-paper">
        <div className="locked-head">
          <div>
            <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8}}>
              <div className="brand-mark" style={{width: 36, height: 36, fontSize: 15}}>F</div>
              <div>
                <div style={{fontSize: 20, fontWeight: 700, color: 'var(--ink-900)'}}>Famspring</div>
                <div style={{fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase'}}>In-home ABA therapy</div>
              </div>
            </div>
            <h2 className="locked-title">Summer 2026 schedule</h2>
            <div style={{fontSize: 13, color: 'var(--ink-700)', marginTop: 4}}>
              June 15 – September 4, 2026 · 12 weeks
            </div>
          </div>
          <div style={{fontSize: 12, color: 'var(--ink-500)', textAlign: 'right'}}>
            <div>Locked & shared</div>
            <div style={{fontSize: 11, marginTop: 2}}>Prepared by Niru Madhavan, BCBA</div>
          </div>
        </div>

        {WEEKS.map(w => (
          <div key={w.id} className="locked-week" style={{marginBottom: 32}}>
            <h3 style={{fontSize: 15, fontWeight: 600, margin: '0 0 12px', color: 'var(--green-700)'}}>
              Week of {w.month} {w.day}
            </h3>
            <div className="locked-week-grid">
              <div className="lcell lhead"></div>
              {DAYS.map(d => <div key={d.id} className="lcell lhead">{d.label}</div>)}
              {SLOTS.map((slot, sIdx) => (
                <React.Fragment key={slot.id}>
                  <div className="lcell lhead">
                    <div>{slot.label}</div>
                    <div style={{fontWeight: 400, textTransform: 'none', letterSpacing: 0, marginTop: 2, fontSize: 10}}>{slot.time}</div>
                  </div>
                  {DAYS.map(d => {
                    const cell = allSchedules[w.id][d.id][sIdx];
                    return (
                      <div key={d.id + sIdx} className="lcell">
                        {cell.matched.length === 0 && cell.unmatched.length === 0 && (
                          <span style={{color: 'var(--ink-300)'}}>—</span>
                        )}
                        {cell.matched.map(m => {
                          const c = getClient(m.clientId);
                          const t = getTherapist(m.therapistId);
                          return (
                            <span key={m.clientId} className="lpair">
                              <strong>{c.name.split(' ')[0]}</strong> · {t.name}
                            </span>
                          );
                        })}
                        {cell.unmatched.length > 0 && (
                          <span style={{color: 'var(--accent-coral)', fontSize: 10, fontWeight: 600, display: 'block', marginTop: 4}}>
                            {cell.unmatched.length} unmatched
                          </span>
                        )}
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
          </div>
        ))}

        <div style={{marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--ink-300)', fontSize: 11, color: 'var(--ink-500)'}}>
          Questions? Reach Niru at <strong style={{color: 'var(--ink-700)'}}>niru@famspring.com</strong> · <strong style={{color: 'var(--ink-700)'}}>famspring.com</strong>
        </div>
      </div>
    </div>
  );
}

window.LockedView = LockedView;