/* ============================================================
   Catered · Week screen  (window.CATWeek)
   Plan one or several weeks at once. Dinner is the anchor;
   breakfast & lunch are opt-in. Scope selector spans weeks.
   ============================================================ */
const { useState: useSW } = React;

const SCOPES = [{ value: 1, label: '1 week' }, { value: 2, label: '2 weeks' }, { value: 4, label: '4 weeks' }];

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

  const [picker, setPicker] = useSW(null); // { week, date, meal }
  const [q, setQ] = useSW('');

  const weekStarts = api.weekStarts;
  const thisMonday = CAT.ymd(CAT.mondayOf(new Date()));

  function openPicker(week, date, meal) { setPicker({ week, date, meal }); setQ(''); }
  function pick(id) { api.setSlot(picker.week, picker.date, picker.meal, id); setPicker(null); }

  let plannedCount = 0;
  for (const ws of weekStarts) plannedCount += CAT.plannedMeals(state, ws).length;

  const pickerMeal = picker ? D.MEALS.find((m) => m.id === picker.meal) : null;
  const order = state.recipeOrder
    .filter((id) => { const r = state.recipes[id]; return r && (!q.trim() || r.title.toLowerCase().includes(q.trim().toLowerCase())); })
    .sort((a, b) => {
      const ma = (state.recipes[a].meal || 'dinner') === picker?.meal ? 0 : 1;
      const mb = (state.recipes[b].meal || 'dinner') === picker?.meal ? 0 : 1;
      return ma - mb;
    });

  function Stepper({ week, ds, meal, slot }) {
    const n = slot.servings || D.DEFAULT_SERVINGS;
    return (
      <div className="cat-servings">
        <button onClick={() => api.bumpServings(week, ds, meal, -1)} aria-label="Fewer"><Ic.Minus size={12} /></button>
        <span className="cat-servings-n">{n}<i> serving{n === 1 ? '' : 's'}</i></span>
        <button onClick={() => api.bumpServings(week, ds, meal, 1)} aria-label="More"><Ic.Plus size={12} /></button>
      </div>
    );
  }

  function WeekBlock({ ws }) {
    const monday = CAT.parseYmd(ws);
    const plan = state.plans[ws] || {};
    const days = [];
    for (let i = 0; i < 7; i++) {
      const date = CAT.addDays(monday, i);
      days.push({ i, date, ds: CAT.ymd(date), today: CAT.isToday(date), meals: CAT.dayMeals(plan[CAT.ymd(date)]) });
    }
    return (
      <section className="cat-weekblock">
        {weekStarts.length > 1 && (
          <div className="cat-weekblock-head">
            <span className="cat-weekblock-label">{CAT.weekRangeLabel(ws)}</span>
            {ws === thisMonday && <span className="cat-weekblock-now">This week</span>}
            <span className="cat-weekblock-line" />
          </div>
        )}
        <div className="cat-week-grid">
          {days.map(({ i, date, ds, today, meals }) => {
            const emptyExtras = D.MEALS.filter((m) => m.id !== 'dinner' && !(meals[m.id] && meals[m.id].recipeId));
            return (
              <div className={`cat-day${today ? ' today' : ''}`} key={ds}>
                <div className="cat-day-head">
                  <span className="cat-day-name">{D.DAY_LABELS[i]}</span>
                  <span className="cat-day-num">{date.getDate()}</span>
                  {today && <span className="cat-today-dot" title="Today" />}
                </div>
                <div className="cat-day-meals">
                  {D.MEALS.map((m) => {
                    const slot = meals[m.id];
                    const r = slot && slot.recipeId ? state.recipes[slot.recipeId] : null;
                    if (r) {
                      return (
                        <div className={`cat-meal cat-meal-${m.id}`} key={m.id}>
                          <div className="cat-meal-top">
                            <span className={`cat-meal-tag t-${m.tint}`}>{m.label}</span>
                            <button className="cat-meal-x" aria-label="Remove" onClick={() => api.clearSlot(ws, ds, m.id)}><Ic.X size={12} /></button>
                          </div>
                          <div className="cat-meal-title">{r.title}</div>
                          <Stepper week={ws} ds={ds} meal={m.id} slot={slot} />
                        </div>
                      );
                    }
                    if (m.id === 'dinner') {
                      return (
                        <button className="cat-slot-empty" key={m.id} onClick={() => openPicker(ws, ds, 'dinner')}>
                          <Ic.Plus size={17} /><span>Add dinner</span>
                        </button>
                      );
                    }
                    return null;
                  })}
                </div>
                {emptyExtras.length > 0 && (
                  <div className="cat-day-add">
                    {emptyExtras.map((m) => (
                      <button className="cat-addmeal" key={m.id} onClick={() => openPicker(ws, ds, m.id)}>
                        <Ic.Plus size={13} />{m.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </section>
    );
  }

  return (
    <div className="gg-container cat-page">
      <header className="cat-head cat-head-week">
        <div className="cat-head-text">
          <window.CATComp.Eyebrow>The week{api.scope > 1 ? 's' : ''}</window.CATComp.Eyebrow>
          <h1 className="gg-display cat-title">What's on this week?</h1>
          <p className="cat-sub">Drop a recipe on dinner — or add breakfast and lunch too. Plan several weeks at once with the selector.</p>
        </div>
        <div className="cat-weekbar">
          <div className="cat-weekstrip">
            <button className="cat-iconbtn" onClick={() => api.navigateWeek(-1)} aria-label="Earlier"><Ic.ChevronLeft size={18} /></button>
            <div className="cat-weeklabel">{CAT.rangeLabel(weekStarts)}</div>
            <button className="cat-iconbtn" onClick={() => api.navigateWeek(1)} aria-label="Later"><Ic.ChevronRight size={18} /></button>
            <Btn variant="secondary" sm onClick={api.gotoThisWeek}>This week</Btn>
          </div>
          <div className="cat-scope">
            <span className="cat-scope-label">Show</span>
            <Segmented size="sm" value={api.scope} onChange={(v) => api.setScope(v)} options={SCOPES} />
          </div>
        </div>
      </header>

      {weekStarts.map((ws) => <WeekBlock ws={ws} key={ws} />)}

      <div className="cat-week-foot">
        <div className="cat-week-foot-text">
          {plannedCount === 0 ? 'Nothing planned yet.' : `${plannedCount} meal${plannedCount === 1 ? '' : 's'} planned across ${weekStarts.length} week${weekStarts.length === 1 ? '' : 's'}.`}
        </div>
        <div className="cat-week-foot-actions">
          <Btn variant="secondary" sm leftIcon={<Ic.Cart size={16} />} onClick={() => api.setTab('shopping')} disabled={plannedCount === 0}>Shopping list</Btn>
          <Btn variant="pop" sm leftIcon={<Ic.CalendarPlus size={16} />} onClick={() => api.setTab('export')} disabled={plannedCount === 0}>Add to calendar</Btn>
        </div>
      </div>

      <Modal open={!!picker} onClose={() => setPicker(null)}
        title={pickerMeal ? `Pick ${pickerMeal.label.toLowerCase()}` : 'Pick a meal'}
        subtitle={picker ? `For ${CAT.parseYmd(picker.date).toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}` : ''}>
        <div className="cat-picker-search">
          <Ic.Search size={16} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search your recipes…" autoFocus />
        </div>
        <div className="cat-picker-list">
          {order.length === 0 ? (
            <div className="cat-picker-empty">
              {state.recipeOrder.length === 0 ? 'No recipes yet — add some on the Recipes tab first.' : 'No matches.'}
            </div>
          ) : order.map((id) => {
            const r = state.recipes[id];
            const rm = D.MEALS.find((m) => m.id === (r.meal || 'dinner'));
            const domain = CAT.sourceDomainOf(r.source_url) || 'by hand';
            return (
              <button className="cat-pick" key={id} onClick={() => pick(id)}>
                <div className={`cat-pick-thumb${r.image_url ? '' : ' placeholder'}`}
                  style={r.image_url ? { backgroundImage: `url('${r.image_url}')` } : null}>
                  {!r.image_url && <Ic.Fork size={18} />}
                </div>
                <div className="cat-pick-text">
                  <div className="cat-pick-title">{r.title}</div>
                  <div className="cat-pick-meta">{rm ? rm.label : 'Dinner'} · {domain}</div>
                </div>
                <Ic.Plus size={18} />
              </button>
            );
          })}
        </div>
      </Modal>
    </div>
  );
};

window.CATWeek = { CATWeek };