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

function MealLogIcon({ 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 MealLogItem({ id, name, cals, 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">
        <MealLogIcon 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">{cals}</span>
        </div>
        <div className="meal-log-desc">{desc}</div>
        <div className="meal-log-tags"><span className="meal-tag">{tag}</span></div>
      </div>
    </label>
  );
}

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

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

  return (
    <div className="meal-log-card" role="region" aria-label="Sample meal log">
      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Breakfast</span>
          <span className="meal-log-cals">380 kcal</span>
        </div>
        <MealLogItem
          id="breakfast"
          name="Protein-First Breakfast"
          cals="380 kcal"
          desc="Eggs, avocado toast, mixed greens"
          tag="Blood sugar balance"
          checked={!!checkedItems.breakfast}
          onToggle={toggleItem}
        />
      </div>

      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Lunch</span>
          <span className="meal-log-cals">480 kcal</span>
        </div>
        <MealLogItem
          id="lunch"
          name="Mediterranean Bowl"
          cals="480 kcal"
          desc="Quinoa, chickpeas, roasted veg, tahini"
          tag="Sustained energy"
          checked={!!checkedItems.lunch}
          onToggle={toggleItem}
        />
      </div>

      <div className="meal-log-section">
        <div className="meal-log-header">
          <span className="meal-log-time">Dinner</span>
          <span className="meal-log-cals">540 kcal</span>
        </div>
        <MealLogItem
          id="dinner"
          name="Wild Salmon & Sweet Potato"
          cals="540 kcal"
          desc="Baked salmon, roasted sweet potato, asparagus"
          tag="Magnesium for sleep"
          checked={!!checkedItems.dinner}
          onToggle={toggleItem}
        />
      </div>
    </div>
  );
}

Object.assign(window, { MealLogCard });