// Step 3 — Pick Your Activity Tools

function RadioGroup({ legend, hint, options, value, onChange, name }) {
  return (
    <fieldset style={{ border: 'none', margin: 0, padding: 0, marginBottom: 'var(--sp-3)' }}>
      <legend className="usa-label" style={{ marginBottom: 'var(--sp-05)' }}>{legend}</legend>
      {hint && <p className="usa-hint" style={{ marginBottom: 'var(--sp-1)' }}>{hint}</p>}
      {options.map(opt => (
        <div key={opt.value} className="usa-radio">
          <input
            className="usa-radio__input"
            type="radio"
            id={`${name}-${opt.value}`}
            name={name}
            value={opt.value}
            checked={value === opt.value}
            onChange={() => onChange(opt.value)}
          />
          <label className="usa-radio__label" htmlFor={`${name}-${opt.value}`}>
            <div className="usa-radio__label-text">
              <span className="usa-radio__label-title">{opt.title}</span>
              {opt.desc && (
                <span className={opt.warn ? 'usa-radio__label-warn' : 'usa-radio__label-desc'}>
                  {opt.desc}
                </span>
              )}
            </div>
          </label>
        </div>
      ))}
    </fieldset>
  );
}

function StepTools({ data, onUpdate }) {
  function setEquip(key, val) {
    onUpdate({ equipment: { ...data.equipment, [key]: val } });
  }

  function toggleEmergency(id, checked) {
    const updated = checked
      ? [...data.equipment.emergency, id]
      : data.equipment.emergency.filter(x => x !== id);
    setEquip('emergency', updated);
  }

  return (
    <div>
      <h2 className="rs-step-title">Pick your activity tools</h2>
      <p className="rs-step-desc">Select the safety equipment you will have with you today.</p>

      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Personal flotation device (PFD)</h3>
        </div>
        <div className="usa-card__body">
          <RadioGroup
            legend="Select your PFD type"
            name="pfd"
            options={PFD_OPTIONS}
            value={data.equipment.lifejacket}
            onChange={val => setEquip('lifejacket', val)}
          />
          {data.equipment.lifejacket === 'none' && (
            <div className="usa-alert usa-alert--warning" role="note">
              <div>
                <p className="usa-alert__text">
                  A PFD is the single most effective safety measure for river activities.
                  Wearing one is strongly recommended at all times on or near the water.
                </p>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Thermal protection</h3>
        </div>
        <div className="usa-card__body">
          <RadioGroup
            legend="Select thermal protection"
            hint={data.waterTemp < 70 ? `Water is ${data.waterTemp}°F — thermal protection is strongly advised.` : undefined}
            name="thermal"
            options={THERMAL_OPTIONS}
            value={data.equipment.thermalProtection}
            onChange={val => setEquip('thermalProtection', val)}
          />
        </div>
      </div>

      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Protective footwear</h3>
        </div>
        <div className="usa-card__body">
          <RadioGroup
            legend="Select footwear"
            name="footwear"
            options={FOOTWEAR_OPTIONS}
            value={data.equipment.footwear}
            onChange={val => setEquip('footwear', val)}
          />
        </div>
      </div>

      <div className="usa-card">
        <div className="usa-card__header">
          <h3 className="usa-card__header-title">Emergency equipment</h3>
        </div>
        <div className="usa-card__body">
          <p className="usa-hint" style={{ marginBottom: 'var(--sp-2)' }}>
            Select all items you will carry today.
          </p>
          <fieldset style={{ border: 'none', margin: 0, padding: 0 }}>
            <legend className="sr-only">Emergency equipment checklist</legend>
            {EMERGENCY_ITEMS.map(item => (
              <div key={item.id} className="usa-checkbox">
                <input
                  className="usa-checkbox__input"
                  type="checkbox"
                  id={`emerg-${item.id}`}
                  checked={data.equipment.emergency.includes(item.id)}
                  onChange={e => toggleEmergency(item.id, e.target.checked)}
                />
                <label className="usa-checkbox__label" htmlFor={`emerg-${item.id}`}>
                  <div className="usa-checkbox__label-text">
                    <span className="usa-checkbox__label-title">{item.label}</span>
                    <span className="usa-checkbox__label-desc">{item.desc}</span>
                  </div>
                </label>
              </div>
            ))}
          </fieldset>

          {data.equipment.emergency.length === 0 && (
            <div className="usa-alert usa-alert--warning" role="note" style={{ marginTop: 'var(--sp-2)' }}>
              <div>
                <p className="usa-alert__text">
                  At minimum, carry a whistle and a waterproof phone case.
                  Emergency signaling has saved lives in remote river locations.
                </p>
              </div>
            </div>
          )}

          {data.equipment.emergency.length > 0 && (
            <p style={{ fontSize: 'var(--fs-3)', color: 'var(--theme-color-success-darker)', marginTop: 'var(--sp-2)', fontWeight: 'var(--fw-semibold)' }}>
              ✓ {data.equipment.emergency.length} emergency item{data.equipment.emergency.length > 1 ? 's' : ''} selected
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RadioGroup, StepTools });