// Step 2 — Share Your Skills

function StepSkills({ data, onUpdate }) {
  const highRiskIds = ['openWounds', 'cardiovascular', 'alcohol'];

  function toggleRisk(id, checked) {
    const updated = checked
      ? [...data.healthRisks, id]
      : data.healthRisks.filter(r => r !== id);
    onUpdate({ healthRisks: updated });
  }

  const hasHighRisk = data.healthRisks.some(r => highRiskIds.includes(r));

  return (
    <div>
      <h2 className="rs-step-title">Share your skills</h2>
      <p className="rs-step-desc">Be honest — cold water affects all swimmers regardless of skill level.</p>

      {/* Swimming level */}
      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Swimming level</h3>
        </div>
        <div className="usa-card__body">
          <fieldset style={{ border: 'none', margin: 0, padding: 0 }}>
            <legend className="usa-hint" style={{ marginBottom: 'var(--sp-2)', display: 'block' }}>
              Select the level that best describes your current ability.
            </legend>
            {SWIM_LEVELS.map(skill => (
              <div
                key={skill.level}
                className={`rs-skill-card ${data.swimmingLevel === skill.level ? 'rs-skill-card--selected' : ''}`}
                onClick={() => onUpdate({ swimmingLevel: skill.level })}
                role="radio"
                aria-checked={data.swimmingLevel === skill.level}
                tabIndex={0}
                onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onUpdate({ swimmingLevel: skill.level }); } }}
                aria-label={`Swimming level ${skill.level}: ${skill.title}`}
              >
                <div className="rs-skill-card__radio" aria-hidden="true"></div>
                <div style={{ flex: 1 }}>
                  <div className={`rs-skill-badge rs-skill-badge--${skill.level}`}>Level {skill.level}</div>
                  <div className="rs-skill-card__title">{skill.title}</div>
                  <div className="rs-skill-card__desc">{skill.desc}</div>
                  <div className="rs-skill-card__desc" style={{ marginTop: 2, fontSize: 'var(--fs-2)' }}>{skill.detail}</div>
                </div>
              </div>
            ))}
          </fieldset>
        </div>
      </div>

      {/* Cold water experience */}
      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Cold water experience</h3>
        </div>
        <div className="usa-card__body">
          <div className="usa-checkbox">
            <input
              className="usa-checkbox__input"
              type="checkbox"
              id="cold-water-exp"
              checked={data.coldWaterExperience}
              onChange={e => onUpdate({ coldWaterExperience: e.target.checked })}
            />
            <label className="usa-checkbox__label" htmlFor="cold-water-exp">
              <div className="usa-checkbox__label-text">
                <span className="usa-checkbox__label-title">I have experience swimming in cold water (below 70°F)</span>
                <span className="usa-checkbox__label-desc">Helps you recognize and manage cold shock responses</span>
              </div>
            </label>
          </div>

          <div className="rs-info-box" style={{ marginTop: 'var(--sp-2)' }}>
            <p className="rs-info-box__title">Cold water facts</p>
            <ul className="rs-info-box__list">
              <li>Cold shock can occur in water as warm as 77°F</li>
              <li>1 in 5 cold-water deaths occur within the first minute</li>
              <li>Muscle control loss begins after 10–30 minutes</li>
              <li>Cold water impairs breathing and decision-making</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Health checklist */}
      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Health conditions today</h3>
        </div>
        <div className="usa-card__body">
          <p className="usa-hint" style={{ marginBottom: 'var(--sp-2)' }}>
            Check any conditions that apply to you right now.
          </p>
          <fieldset style={{ border: 'none', margin: 0, padding: 0 }}>
            <legend className="sr-only">Current health risk factors</legend>
            {HEALTH_RISKS.map(risk => {
              const isChecked = data.healthRisks.includes(risk.id);
              return (
                <div key={risk.id}>
                  <div className="usa-checkbox">
                    <input
                      className="usa-checkbox__input"
                      type="checkbox"
                      id={`risk-${risk.id}`}
                      checked={isChecked}
                      onChange={e => toggleRisk(risk.id, e.target.checked)}
                    />
                    <label className="usa-checkbox__label" htmlFor={`risk-${risk.id}`}>
                      <div className="usa-checkbox__label-text">
                        <span className="usa-checkbox__label-title">
                          {risk.label}
                          {risk.severity === 'high' && (
                            <span style={{ marginLeft: 6, fontSize: 'var(--fs-2)', color: 'var(--theme-color-error)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                              {' '}High risk
                            </span>
                          )}
                        </span>
                        {isChecked && (
                          <span className={`usa-checkbox__label-warn${risk.severity === 'medium' ? ' usa-checkbox__label-warn--medium' : ''}`}>
                            {risk.warning}
                          </span>
                        )}
                      </div>
                    </label>
                  </div>
                </div>
              );
            })}
          </fieldset>

          {hasHighRisk && (
            <div className="usa-alert usa-alert--error" role="alert" style={{ marginTop: 'var(--sp-2)' }}>
              <div>
                <p className="usa-alert__heading">High-risk conditions identified</p>
                <p className="usa-alert__text">
                  Consider postponing your river activity or consulting a healthcare provider before proceeding.
                </p>
              </div>
            </div>
          )}

          {data.healthRisks.length === 0 && (
            <div className="usa-alert usa-alert--success" role="status" aria-live="polite" style={{ marginTop: 'var(--sp-2)' }}>
              <div>
                <p className="usa-alert__text">No health conditions identified — good to continue.</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepSkills });