/* ============================================================
   BrotherVader — Food Calendar.
   Mirrors the training calendar, but for food. Log what you ate
   (name + quantity + unit), hit "Estimate calorie" to let the AI
   fill the Total Calorie box, then Save. Everything persists.
   Reuses MONTHS / DOW / keyOf from calendar.jsx (loaded first).
   ============================================================ */

const FOOD_UNITS = ["pcs", "g", "kg", "ml", "L", "cup", "tbsp", "tsp", "slice", "scoop", "serving", "oz"];

function FoodCalendar({ foods, admin, onSaveFood, onDeleteFood, today = new Date(2026, 5, 1) }) {
  const [cursor, setCursor] = useState({ y: 2026, m: 4 });
  const [selected, setSelected] = useState(null);
  const [editDay, setEditDay] = useState(null);

  const { y, m } = cursor;
  const firstDow = new Date(y, m, 1).getDay();
  const daysInMonth = new Date(y, m + 1, 0).getDate();

  const summary = (() => {
    let days = 0, cals = 0;
    for (let d = 1; d <= daysInMonth; d++) {
      const e = foods[keyOf(y, m, d)];
      if (e) { days++; cals += e.totalCalorie || 0; }
    }
    return { days, cals, avg: days ? Math.round(cals / days) : 0 };
  })();

  function navMonth(dir) {
    let nm = m + dir, ny = y;
    if (nm < 0) { nm = 11; ny--; } else if (nm > 11) { nm = 0; ny++; }
    setCursor({ y: ny, m: nm });
  }

  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const selEntry = selected ? foods[selected] : null;

  function DayCell({ d }) {
    if (!d) return <div className="cal-cell cal-empty" aria-hidden="true" />;
    const k = keyOf(y, m, d);
    const e = foods[k];
    const isToday = today.getFullYear() === y && today.getMonth() === m && today.getDate() === d;
    const isSel = selected === k;
    return (
      <button
        className={"cal-cell cal-day status-" + (e ? "food" : "none") + (isSel ? " is-sel" : "") + (isToday ? " is-today" : "")}
        onClick={() => e ? setSelected(isSel ? null : k) : (admin ? setEditDay(k) : null)}
        aria-label={`${MONTHS[m]} ${d}${e ? ", " + (e.totalCalorie || 0) + " kcal" : ", no food log"}`}>
        <span className="cal-date tnum">{d}</span>
        {e && <span className="cal-pip cal-pip-food" />}
        {e && e.totalCalorie ? <span className="cal-vol dim tnum">{Math.round(e.totalCalorie/1000*10)/10}k</span> : null}
        {isToday && <span className="cal-today-tag">TODAY</span>}
        {admin && e && <span className="cal-edit-hint"><Icons.Pen size={11}/></span>}
      </button>
    );
  }

  return (
    <section id="food" className="section">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-index">05B — THE FUEL LOG</div>
            <h2 className="section-title">Food<br/>Calendar</h2>
          </div>
          <div className="cal-stats">
            <div className="cal-stat">
              <span className="cal-stat-num display tnum"><Icons.Utensils size={20} style={{ color:"var(--ox-bright)" }}/> {summary.days}</span>
              <span className="cal-stat-lbl eyebrow">Logged days</span>
            </div>
            <div className="cal-stat">
              <span className="cal-stat-num display tnum">{(summary.cals/1000).toFixed(1)}k</span>
              <span className="cal-stat-lbl eyebrow">kcal total</span>
            </div>
            <div className="cal-stat">
              <span className="cal-stat-num display tnum">{summary.avg}</span>
              <span className="cal-stat-lbl eyebrow">avg / day</span>
            </div>
          </div>
        </Reveal>

        <Reveal className="card cal-card">
          <div className="cal-toolbar">
            <div className="cal-nav">
              <button className="pen" onClick={() => navMonth(-1)} aria-label="Previous month"><Icons.ChevL /></button>
              <div className="cal-month head">
                <span className="cal-month-name">{MONTHS[m]}</span>
                <span className="cal-month-year tnum dim">{y}</span>
              </div>
              <button className="pen" onClick={() => navMonth(1)} aria-label="Next month"><Icons.Chevron /></button>
            </div>
            <div className="cal-right">
              <div className="cal-legend">
                <span className="lg lg-food">Logged</span>
                <span className="lg lg-none">Empty</span>
              </div>
              {admin && <button className="btn btn-ghost" onClick={() => setEditDay(selected || keyOf(y, m, today.getDate() <= daysInMonth ? today.getDate() : 1))}><Icons.Plus size={14}/> Log food</button>}
            </div>
          </div>

          <div className="cal-dow">{DOW.map((d,i) => <span key={i}>{d}</span>)}</div>
          <div className="cal-grid">{cells.map((d, i) => <DayCell key={i} d={d} />)}</div>
        </Reveal>

        <FoodDetail entry={selEntry} dayKey={selected} admin={admin} onEdit={() => setEditDay(selected)} />
      </div>

      {editDay && (
        <FoodEditor dayKey={editDay} entry={foods[editDay]} onClose={() => setEditDay(null)}
          onDelete={onDeleteFood ? () => { onDeleteFood(editDay); setEditDay(null); setSelected(null); } : null}
          onSave={(e) => { onSaveFood(editDay, e); setEditDay(null); setSelected(editDay); }} />
      )}
    </section>
  );
}

function FoodDetail({ entry, dayKey, admin, onEdit }) {
  if (!dayKey) {
    return (
      <div className="cal-detail cal-detail-empty reveal in">
        <Icons.Utensils size={26} />
        <p className="muted">Select a day to read what was eaten.</p>
      </div>
    );
  }
  const [y, m, d] = dayKey.split("-").map(Number);
  const dateStr = `${MONTHS[m-1]} ${d}, ${y}`;
  if (!entry) {
    return (
      <div className="cal-detail cal-detail-empty reveal in" key={dayKey}>
        <p className="muted">No food logged for <strong style={{color:"var(--chalk)"}}>{dateStr}</strong>.</p>
        {admin && <button className="btn btn-primary" onClick={onEdit}><Icons.Plus size={15}/> Log this day</button>}
      </div>
    );
  }
  return (
    <div className="cal-detail reveal in" key={dayKey}>
      <div className="cal-detail-head">
        <div>
          <span className="tag tag-food">Food Day</span>
          <h3 className="display cal-detail-title">{entry.totalCalorie ? entry.totalCalorie.toLocaleString() + " kcal" : "Logged"}</h3>
          <span className="muted tnum cal-detail-date">{dateStr}</span>
        </div>
        <div className="cal-detail-meta">
          <div className="cdm">
            <span className="cdm-num display tnum">{entry.items.length}</span>
            <span className="cdm-lbl eyebrow">Items</span>
          </div>
          {admin && <button className="pen" onClick={onEdit} aria-label="Edit food"><Icons.Pen /></button>}
        </div>
      </div>

      <ul className="cal-ex-list">
        {entry.items.map((it, i) => (
          <li key={i} className="cal-ex" style={{ animationDelay: (i*55)+"ms" }}>
            <span className="cal-ex-idx tnum dim">{(i+1).toString().padStart(2,"0")}</span>
            <span className="cal-ex-name head">{it.name}</span>
            <span className="cal-ex-scheme tnum"><b>{it.qty}</b> <span className="at">{it.unit}</span></span>
          </li>
        ))}
      </ul>
      {entry.note && (
        <div className="cal-note"><span className="eyebrow">Note</span><p>{entry.note}</p></div>
      )}
    </div>
  );
}

function FoodEditor({ dayKey, entry, onClose, onSave, onDelete }) {
  const [y, m, d] = dayKey.split("-").map(Number);
  const [rows, setRows] = useState(
    entry && entry.items.length ? entry.items.map(i => ({ ...i })) : [{ name: "", qty: 1, unit: "pcs" }]
  );
  const [total, setTotal] = useState(entry ? entry.totalCalorie || 0 : 0);
  const [note, setNote] = useState(entry ? entry.note : "");
  const [breakdown, setBreakdown] = useState("");
  const [estimating, setEstimating] = useState(false);

  const setRow = (i, patch) => setRows(rows.map((r, idx) => idx === i ? { ...r, ...patch } : r));
  const addRow = () => setRows([...rows, { name: "", qty: 1, unit: "pcs" }]);
  const delRow = (i) => setRows(rows.filter((_, idx) => idx !== i));

  async function estimate() {
    const items = rows.filter(r => r.name);
    if (!items.length) { alert("Add at least one food first."); return; }
    setEstimating(true); setBreakdown("");
    try {
      const r = await API.estimateCalories(items);
      setTotal(r.total || 0);
      setBreakdown(r.breakdown || "");
    } catch (ex) { alert(ex.message || "Estimation unavailable."); }
    finally { setEstimating(false); }
  }

  function save() {
    const items = rows.filter(r => r.name).map(r => ({ name: r.name, qty: r.qty, unit: r.unit }));
    onSave({ items, totalCalorie: Number(total) || 0, note });
  }

  return (
    <Modal title={(entry ? "Edit food · " : "Log food · ") + `${MONTHS[m-1]} ${d}`} onClose={onClose} maxWidth={640}
      footer={<>
        {onDelete && entry && <button className="btn btn-danger" style={{ marginRight: "auto" }} onClick={onDelete}><Icons.Trash size={15}/> Delete</button>}
        <button className="btn" onClick={onClose}>Cancel</button>
        <button className="btn btn-primary" onClick={save}><Icons.Check size={15}/> Save</button>
      </>}>
      <div className="field">
        <label>What I ate — name · quantity · unit</label>
        <div className="logex-list">
          {rows.map((r, i) => (
            <div key={i} className="logex-row foodex-row">
              <input className="input foodex-name" value={r.name} onChange={(e)=>setRow(i,{name:e.target.value})} placeholder="e.g. Chicken breast" />
              <input className="input tnum logex-n" type="number" value={r.qty} onChange={(e)=>setRow(i,{qty:e.target.value})} aria-label="quantity" />
              <select className="select logex-u" value={r.unit} onChange={(e)=>setRow(i,{unit:e.target.value})}>
                {FOOD_UNITS.map(u => <option key={u} value={u}>{u}</option>)}
              </select>
              <button className="pen pen-sm" onClick={() => delRow(i)} aria-label="Remove"><Icons.Trash /></button>
            </div>
          ))}
        </div>
        <button className="btn" style={{ marginTop: 12 }} onClick={addRow}><Icons.Plus size={15}/> Add food</button>
      </div>

      <div className="field food-estimate">
        <div className="food-est-row">
          <button className="btn btn-ghost" onClick={estimate} disabled={estimating}>
            {estimating ? "Estimating…" : <><Icons.Flame size={15}/> Estimate calorie (AI)</>}
          </button>
          <div className="food-total">
            <label>Total Calorie</label>
            <div className="food-total-box">
              <input className="input tnum" type="number" value={total} onChange={(e)=>setTotal(e.target.value)} />
              <span className="food-kcal">kcal</span>
            </div>
          </div>
        </div>
        {breakdown && <pre className="food-breakdown">{breakdown}</pre>}
        <p className="dim" style={{ fontSize: 12, margin: "6px 0 0" }}>Click estimate any time you add or edit foods. You can also type the total yourself.</p>
      </div>

      <div className="field" style={{ marginBottom: 0 }}><label>Note</label>
        <textarea className="textarea" value={note} onChange={(e)=>setNote(e.target.value)} placeholder="How was the day's eating?" /></div>
    </Modal>
  );
}

Object.assign(window, { FoodCalendar });