/* ============================================================
   Catered · Export-to-calendar screen  (window.CATExport)
   Every planned meal (breakfast / lunch / dinner) → calendar.
   ============================================================ */
const { useState: useSE } = React;

const TIME_OPTIONS = (() => {
  const out = [];
  for (let h = 6; h <= 21; h++) {
    for (const m of [0, 30]) {
      const v = `${h < 10 ? '0' + h : h}:${m === 0 ? '00' : '30'}`;
      const ampm = h < 12 ? 'AM' : 'PM';
      const h12 = ((h + 11) % 12) + 1;
      out.push({ v, l: `${h12}:${m === 0 ? '00' : '30'} ${ampm}` });
    }
  }
  return out;
})();

const CATExport = ({ state, api }) => {
  const Ic = window.CATIcons;
  const { Btn, Segmented } = window.CATComp;
  const CAT = window.CAT;
  const D = window.CATDATA;

  const [calId, setCalId] = useSE('apple');
  const [times, setTimes] = useSE(() => Object.fromEntries(D.MEALS.map((m) => [m.id, m.time])));

  const weekStarts = api.weekStarts;
  const meals = CAT.plannedMealsRange(state, weekStarts);
  const presentMeals = D.MEALS.filter((m) => meals.some((x) => x.meal === m.id));

  function eventOf(item) {
    const m = D.MEALS.find((x) => x.id === item.meal) || D.MEALS[2];
    const [hh, mm] = (times[item.meal] || m.time).split(':').map(Number);
    return CAT.eventForMeal(item, hh, mm, m.dur);
  }

  function downloadAll() {
    if (!meals.length) return;
    CAT.downloadFile(`catered-${weekStarts[0]}.ics`, CAT.buildICS(meals.map(eventOf)), 'text/calendar;charset=utf-8');
    api.toast(`Downloaded ${meals.length} meal${meals.length === 1 ? '' : 's'}.`);
  }
  function addOne(item) {
    const ev = eventOf(item);
    if (calId === 'google') window.open(CAT.googleUrl(ev), '_blank', 'noopener');
    else if (calId === 'outlook') window.open(CAT.outlookUrl(ev), '_blank', 'noopener');
    else CAT.downloadFile(`catered-${CAT.ymd(item.date)}-${item.meal}.ics`, CAT.buildICS([ev]), 'text/calendar;charset=utf-8');
  }

  const hint = {
    apple: 'Downloads an .ics file — open it to add every meal to Apple Calendar (or any app that reads .ics).',
    google: 'Add each meal to Google Calendar one tap at a time, or download an .ics to import the whole plan.',
    outlook: 'Add each meal to Outlook on the web one tap at a time, or download an .ics to import the whole plan.',
  }[calId];

  return (
    <div className="gg-container cat-page">
      <header className="cat-head cat-head-week">
        <div className="cat-head-text">
          <window.CATComp.Eyebrow>Export</window.CATComp.Eyebrow>
          <h1 className="gg-display cat-title">Send the week to your calendar.</h1>
          <p className="cat-sub">Every planned meal becomes a calendar event — so “what's for dinner” (and breakfast, and lunch) is already answered, on every phone.</p>
        </div>
        <div className="cat-shop-actions">
          <span className="cat-shop-range"><Ic.Calendar size={15} />{CAT.rangeLabel(weekStarts)}</span>
          <Segmented size="sm" value={api.scope} onChange={(v) => api.setScope(v)} options={[{ value: 1, label: '1 wk' }, { value: 2, label: '2 wks' }, { value: 4, label: '4 wks' }]} />
        </div>
      </header>

      {meals.length === 0 ? (
        <div className="cat-empty">
          <div className="cat-empty-glyph"><Ic.Calendar size={26} /></div>
          <div className="cat-empty-title">No meals to send yet</div>
          <div className="cat-empty-body">Plan a few meals on <button className="cat-inline-link" onClick={() => api.setTab('week')}>the week</button>, then come back to add them all at once.</div>
        </div>
      ) : (
        <div className="cat-export">
          <div className="cat-export-controls">
            <div className="cat-control">
              <label>Calendar</label>
              <Segmented value={calId} onChange={setCalId} options={D.CALENDARS.map((c) => ({ value: c.id, label: c.label }))} />
            </div>

            <div className="cat-control">
              <label><Ic.Clock size={14} /> Times</label>
              <div className="cat-timegrid">
                {presentMeals.map((m) => (
                  <div className="cat-timerow" key={m.id}>
                    <span className={`cat-meal-tag t-${m.tint}`}>{m.label}</span>
                    <select className="cat-select" value={times[m.id]} onChange={(e) => setTimes((t) => ({ ...t, [m.id]: e.target.value }))}>
                      {TIME_OPTIONS.map((o) => <option key={o.v} value={o.v}>{o.l}</option>)}
                    </select>
                  </div>
                ))}
              </div>
            </div>

            <p className="cat-export-hint">{hint}</p>
            <Btn variant="pop" lg block leftIcon={<Ic.Download size={18} />} onClick={downloadAll}>
              Download .ics — {meals.length} meal{meals.length === 1 ? '' : 's'}
            </Btn>
          </div>

          <div className="cat-export-list">
            <div className="cat-export-list-head">Your planned meals</div>
            {meals.map((item, idx) => {
              const m = D.MEALS.find((x) => x.id === item.meal);
              const ev = eventOf(item);
              const tl = ev.start.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
              const newWeek = weekStarts.length > 1 && (idx === 0 || meals[idx - 1].week !== item.week);
              return (
                <React.Fragment key={CAT.ymd(item.date) + item.meal}>
                  {newWeek && <div className="cat-export-weekdiv">{CAT.weekRangeLabel(item.week)}</div>}
                  <div className="cat-export-row">
                    <div className="cat-export-date">
                      <span className="cat-export-dow">{D.DAY_LABELS[item.dayIndex]}</span>
                      <span className="cat-export-day">{item.date.getDate()}</span>
                    </div>
                    <div className="cat-export-info">
                      <div className="cat-export-toprow">
                        <span className={`cat-meal-tag t-${m.tint}`}>{m.label}</span>
                        <span className="cat-export-time"><Ic.Clock size={12} />{tl}</span>
                      </div>
                      <div className="cat-export-recipe">{item.recipe.title}</div>
                    </div>
                    <button className="cat-export-add" onClick={() => addOne(item)}>
                      {calId === 'apple' ? <><Ic.Download size={15} />Save</> : <><Ic.External size={15} />Add</>}
                    </button>
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

window.CATExport = { CATExport };