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

const INSIGHT_DATA = {
  id: 'luteal-pcos',
  phase: 'Luteal',
  day: 22,
  condition: 'PMOS',
  body:
    "You've been logging evening anxiety and restless sleep over the last two days. With PMOS in your luteal phase, natural progesterone drops can heighten your body's stress response. Here's what you can do today to stabilize your mood and support deeper rest tonight",
  focus: [
    { id: 'mg', label: 'Magnesium-rich dinner', icon: 'leaf' },
    { id: 'wind', label: '10-minute box breathing before bed', icon: 'moon' },
    { id: 'protein', label: 'Prioritize protein and fiber at every meal', icon: 'meal' },
  ],
};

function InsightIcon({ name }) {
  const common = { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', 'aria-hidden': true };
  if (name === 'leaf') {
    return (
      <svg {...common} fill="currentColor">
        <path d="M17,8C17,4.13 13.87,1 10,1C6.13,1 3,4.13 3,8C3,12.09 5.67,14.74 9.12,15.77C9.17,15.77 9.18,15.77 9.2,15.77C9.39,15.84 9.59,15.9 9.8,15.94C10.1,16.03 10.4,16.08 10.7,16.1C10.76,16.11 10.84,16.11 10.9,16.11C11.1,16.11 11.3,16.1 11.5,16.08C11.6,16.07 11.7,16.06 11.8,16.05C12.1,16 12.4,15.93 12.7,15.85C12.8,15.82 12.9,15.79 13,15.76C16.5,14.7 17,12.09 17,8ZM11,14.09V14.09L11,14.09L11,14.09ZM11,14.09V8H9V13.59C6.67,12.69 5,10.7 5,8C5,5.24 7.24,3 10,3C12.76,3 15,5.24 15,8C15,10.7 13.33,12.69 11,13.59V14.09Z" />
      </svg>
    );
  }
  if (name === 'moon') {
    return (
      <svg {...common} fill="currentColor">
        <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" />
      </svg>
    );
  }
  if (name === 'meal') {
    return (
      <svg {...common} fill="currentColor">
        <path d="M11,9H9V2H7V9H5V2H3V9C3,11.12 4.66,12.84 6.75,12.97V22H9.25V12.97C11.34,12.84 13,11.12 13,9V2H11V9M16,6V14H18.5V22H21V2C18.24,2 16,4.24 16,6Z" />
      </svg>
    );
  }
  return (
    <svg {...common} fill="currentColor">
      <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
    </svg>
  );
}

function InsightCard() {
  const [done, setDone] = useState({});
  const note = INSIGHT_DATA;

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

  return (
    <div className="insight-card" role="region" aria-label="Daily insight">
      <div className="insight-card-head">
        <div className="insight-card-meta">
          <span className="insight-card-phase">{note.phase} · Day {note.day}</span>
          {note.condition && <span className="insight-card-chip">{note.condition}</span>}
        </div>
        <span className="insight-card-sparkle" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M12 3L14.5 9L21 11.5L14.5 14L12 21L9.5 14L3 11.5L9.5 9L12 3Z" strokeLinejoin="round" />
          </svg>
        </span>
      </div>

      <p className="insight-card-body">{note.body}</p>

      <div className="insight-focus">
        <span className="insight-focus-label">This week&apos;s focus</span>
        <ul className="insight-focus-list">
          {note.focus.map((item) => (
            <li key={item.id}>
              <label className={'insight-focus-item' + (done[item.id] ? ' is-done' : '')}>
                <input
                  type="checkbox"
                  checked={!!done[item.id]}
                  onChange={() => toggleDone(item.id)}
                />
                <span className="insight-focus-icon"><InsightIcon name={item.icon} /></span>
                <span className="insight-focus-text">{item.label}</span>
              </label>
            </li>
          ))}
        </ul>
      </div>

      <div className="insight-card-foot">
        <span className="insight-trust-icon" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
        <span>Based on peer-reviewed cycle research</span>
      </div>
    </div>
  );
}

Object.assign(window, { InsightCard });