/* LightLife — interaktywna makieta aplikacji (iPhone): menu 7 dni → posiłek → karta posiłku */
const {
  Card: PDCard, MealCard: PDMealCard, MacroRing: PDMacroRing, TabBar: PDTabBar,
  Icon: PDIcon, Avatar: PDAvatar, Toast: PDToast, Button: PDButton
} = window.LightLifeDesignSystem_eb2a9e;
const PD_DATA = window.LL_DATA;

function PhoneDemo() {
  const [dayIdx, setDayIdx] = React.useState(0);
  const [mealIdx, setMealIdx] = React.useState(null); // null = lista dnia
  const [toast, setToast] = React.useState(null);
  const scrollRef = React.useRef(null);
  const notify = (title, desc) => { setToast({ title, desc }); setTimeout(() => setToast(null), 2000); };
  const week = PD_DATA.WEEK;
  const day = week[dayIdx];
  const meal = mealIdx == null ? null : day.meals[mealIdx];
  const totals = day.meals.reduce((a, x) => ({ kcal: a.kcal + x.kcal, p: a.p + x.p, f: a.f + x.f, c: a.c + x.c }), { kcal: 0, p: 0, f: 0, c: 0 });
  const goTo = (view) => { if (scrollRef.current) scrollRef.current.scrollTop = 0; view(); };

  const planView = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '10px 16px 20px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 2px 0' }}>
        <h1 style={{ font: '600 26px/1.15 var(--font-display)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-heading)' }}>Dzień dobry,<br />Karolina</h1>
        <PDAvatar src="assets/avatar-user.png" name="Karolina" size={44} />
      </div>
      <div className="day-row" role="tablist" aria-label="Dni tygodnia">
        {week.map((d, i) => (
          <button key={d.d} type="button" role="tab" aria-selected={i === dayIdx} className={'day-chip' + (i === dayIdx ? ' on' : '')}
            onClick={() => { setDayIdx(i); setMealIdx(null); }}>
            <span>{d.d}</span><b>{d.date.split('.')[0]}</b>
          </button>
        ))}
      </div>
      <PDCard shadow="sm" title={'Plan — ' + day.name} action={day.date + '.2026'}>
        {day.meals.map((x, i) => (
          <PDMealCard key={i} image={x.img} mealType={x.type} time={x.time} title={x.title} kcal={x.kcal}
            onClick={() => goTo(() => setMealIdx(i))} />
        ))}
      </PDCard>
      <PDCard shadow="sm" title="Podsumowanie dnia">
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <PDMacroRing value={totals.kcal} percent={Math.min(100, Math.round(totals.kcal / PD_DATA.KCAL_GOAL * 100))} size={96} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9 }}>
            {[['Białko', totals.p + ' g'], ['Tłuszcze', totals.f + ' g'], ['Węglowodany', totals.c + ' g']].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', font: '500 13px/1 var(--font-body)', color: 'var(--text-muted)' }}>
                <span>{k}</span><b style={{ color: 'var(--text-heading)', fontWeight: 700 }}>{v}</b>
              </div>
            ))}
          </div>
        </div>
      </PDCard>
    </div>
  );

  const mealView = meal && (
    <div style={{ paddingBottom: 24 }}>
      <div className="pm-back">
        <button type="button" onClick={() => goTo(() => setMealIdx(null))}>
          <PDIcon name="arrow-left" size={16} /> Wróć do planu
        </button>
      </div>
      <img className="pm-hero" src={meal.img} alt={meal.title} />
      <div style={{ padding: '18px 16px 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <span style={{ font: 'var(--text-overline)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>
            {meal.type} · {meal.time}
          </span>
          <h2 style={{ font: '600 24px/1.2 var(--font-display)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-heading)', marginTop: 8 }}>{meal.title}</h2>
        </div>
        <div className="pm-macro-grid">
          <div className="pm-macro"><b>{meal.kcal}</b><span>kcal</span></div>
          <div className="pm-macro"><b>{meal.p} g</b><span>białko</span></div>
          <div className="pm-macro"><b>{meal.f} g</b><span>tłuszcze</span></div>
          <div className="pm-macro"><b>{meal.c} g</b><span>węgle</span></div>
        </div>
        <PDCard shadow="sm" title="Składniki">
          <ul className="pm-list">
            {meal.ing.map((x, i) => <li key={i}>{x}</li>)}
          </ul>
        </PDCard>
        <PDCard shadow="sm" title="Przygotowanie">
          <ol className="pm-steps">
            {meal.steps.map((x, i) => <li key={i}>{x}</li>)}
          </ol>
        </PDCard>
        <PDButton variant="secondary" style={{ width: '100%', justifyContent: 'center' }}
          onClick={() => notify('Wymienniki w aplikacji', 'Pełna baza zamienników jest dostępna po zakupie planu.')}>
          Zamień posiłek
        </PDButton>
      </div>
    </div>
  );

  return (
    <IOSDevice>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--surface-page)' }}>
        <div style={{ height: 62, flex: 'none' }}></div>
        <div ref={scrollRef} style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
          {mealIdx == null ? planView : mealView}
        </div>
        <PDTabBar
          style={{ paddingBottom: 30, flex: 'none' }}
          items={[
            { id: 'plan', label: 'Plan', icon: 'calendar-days' },
            { id: 'postepy', label: 'Postępy', icon: 'bar-chart-3' },
            { id: 'czat', label: 'Czat', icon: 'message-circle' },
            { id: 'wiecej', label: 'Więcej', icon: 'ellipsis' },
          ]}
          value="plan"
          onChange={(id) => { if (id !== 'plan') notify('Dostępne w aplikacji', 'Postępy, czat i profil znajdziesz w pełnej wersji po zakupie planu.'); }}
          onAction={() => notify('Dodawanie posiłków', 'Własne posiłki dodasz w pełnej wersji aplikacji.')} />
        {toast ? (
          <div style={{ position: 'absolute', top: 74, left: 16, right: 16, zIndex: 70 }}>
            <PDToast title={toast.title} description={toast.desc} style={{ maxWidth: 'none' }} />
          </div>
        ) : null}
      </div>
    </IOSDevice>
  );
}

Object.assign(window, { PhoneDemo });