/* global React */
const { useState } = React;

function MovementIcon({ checked }) {
  if (checked) {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="11" fill="var(--ink)" />
        <path d="M7 12l3.5 3.5L17 8" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  }
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="10.5" stroke="var(--ink)" strokeWidth="1.5" />
    </svg>
  );
}

function MovementItem({ id, name, duration, desc, tag, checked, onToggle }) {
  return (
    <label className="meal-log-item">
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={() => onToggle(id)} 
        style={{ position: 'absolute', opacity: 0, width: 0, height: 0 }} 
      />
      <div className="meal-log-icon">
        <MovementIcon checked={checked} />
      </div>
      <div className="meal-log-content">
        <div className="meal-log-top">
          <span className="meal-log-name">{name}</span>
          <span className="meal-log-cals">{duration}</span>
        </div>
        <div className="meal-log-desc">{desc}</div>
        {tag && <div className="meal-log-tags"><span className="meal-tag">{tag}</span></div>}
      </div>
    </label>
  );
}

function MovementCard() {
  const [checkedItems, setCheckedItems] = useState({ morning: true });

  const toggleItem = (id) => {
    setCheckedItems((prev) => ({ ...prev, [id]: !prev[id] }));
  };

  return (
    <div className="movement-card" role="region" aria-label="Sample movement log">
      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Morning</span>
          <span className="meal-log-cals">20 min</span>
        </div>
        <MovementItem
          id="morning"
          name="Gentle Pilates"
          duration="20 min"
          desc="Low-impact core and mobility focus"
          tag="Recovery"
          checked={!!checkedItems.morning}
          onToggle={toggleItem}
        />
      </div>

      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Afternoon</span>
          <span className="meal-log-cals">30 min</span>
        </div>
        <MovementItem
          id="afternoon"
          name="Brisk Walk"
          duration="30 min"
          desc="Outdoor light cardio for circulation"
          tag="Active"
          checked={!!checkedItems.afternoon}
          onToggle={toggleItem}
        />
      </div>

      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Evening</span>
          <span className="meal-log-cals">10 min</span>
        </div>
        <MovementItem
          id="evening"
          name="Box Breathing"
          duration="10 min"
          desc="Down-regulate the nervous system for sleep"
          tag="Recovery"
          checked={!!checkedItems.evening}
          onToggle={toggleItem}
        />
      </div>
    </div>
  );
}

Object.assign(window, { MovementCard });