/* ───────────────────────────────────────────────────────────
Peak Athlete · Performance Lab v03 prototype
Team onboarding modal — Batch 1c (v01.14).
Three-mode dialog rendered when a coach without a team_uuid
needs to attach to one:
- 'pick' — initial mode picker (Join existing / Create new)
- 'join' — enter code → live preview → confirm
- 'create' — enter team name → preview generated code → confirm
Backed by window.PA_TEAMS (src/lib/teams.js), which wraps the
existing `teams` and `coaches` tables. No new schema; RLS
policies (teams_select_authed / teams_insert_authed /
coaches_update_own) handle access control.
On successful join or create, dispatches the
`pa:profile-changed` window event. AuthGate listens for it
(in index.html) and re-runs refreshProfile() so v_my_coach
reflects the new team_uuid and the CoachDeck re-renders with
real squad data.
The modal is also openable on demand for an *existing* coach
who wants to switch teams (Batch 7 feature) — not yet wired
into the UI but the helper supports it.
Inline styles match the auth.jsx aesthetic — same brand mark,
same field/input/button atoms, mobile-aware padding.
─────────────────────────────────────────────────────────── */
const { useState: useTeamOnbState, useEffect: useTeamOnbEffect } = React;
// ── Mode-picker primary action button ────────────────────────
// Big, vertically-stacked tile-style button used in pick mode.
// Title + sub on two lines, full width, hover-tinted border.
const PickButton = ({ icon, title, sub, onClick, accent }) => (
);
// ── TeamOnboardingModal ─────────────────────────────────────
// v01.31 — role prop added. When role==='athlete', the JoinPanel
// uses joinTeamAsAthlete (which lands the row in pending status,
// per live's athlete-onboarding flow). When role==='coach' or
// undefined (legacy callers), uses joinTeamAsCoach.
//
// Athletes can ONLY join existing teams — the create flow stays
// coach-only. The PickPanel hides the "Create" CTA when
// role==='athlete'.
const TeamOnboardingModal = ({ initialMode = 'pick', role, onClose, onComplete, dismissible = true }) => {
const isMobile = (window.useIsMobile || (() => false))();
const [mode, setMode] = useTeamOnbState(initialMode);
// Esc to close — only when dismissible (the empty-state-driven
// modal allows it; a future required onboarding could pass
// dismissible={false}).
useTeamOnbEffect(() => {
if (!dismissible) return undefined;
const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [dismissible, onClose]);
// Body scroll lock while open. Same lightweight pattern
// request-modals.jsx uses.
useTeamOnbEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}, []);
const handleSuccess = () => {
try { window.dispatchEvent(new CustomEvent('pa:profile-changed')); } catch (_) {}
onComplete?.();
onClose?.();
};
const cardWidth = isMobile ? '100%' : 460;
return (
);
};
// ── PickPanel ────────────────────────────────────────────────
const PickPanel = ({ onPick, onClose, dismissible, role }) => {
// v01.31 — athletes only see Join; coaches see Join + Create.
const isAthlete = role === 'athlete';
return (
{isAthlete ? 'WELCOME' : 'WELCOME, COACH'}
{isAthlete ? 'Join your team' : 'Get on a team'}
{isAthlete
? 'Enter the code your coach shared with you to request access to the team. They\'ll approve your request before you see team data.'
: 'Pick how you want to set up Performance Lab for your squad. You can switch later.'}