// 하루결 — 식단 일정 화면

function MealPlanScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const [mode, setMode] = React.useState('normal');
  const plan = MEAL_PLANS[mode];

  // 오늘 요일 인덱스 (월=0)
  const todayD = new Date(today + 'T00:00:00');
  const weekIdx = (todayD.getDay() + 6) % 7; // Sun=6, Mon=0

  const modeOptions = [
    { v: 'normal',  l: '평소' },
    { v: 'nausea',  l: '메스꺼움' },
    { v: 'mouth',   l: '구내염' },
    { v: 'fatigue', l: '피로' },
  ];

  const todayMeals = s.meals.filter(m => m.date === today);
  const quickLog = (mealName, type) => {
    s.addMeal({ date: today, time: nowHM(), name: mealName, type, amount: '권장량', memo: '식단 계획에서', tone: 'ok' });
    showToast('식사 기록됨');
  };

  return (
    <>
      <ScreenHeader
        title="식단 일정"
        sub="이번 주 식사 계획"
        back onBack={() => navigate('more')}
      />

      {/* 모드 탭 */}
      <div style={{ padding: '6px 22px 0' }}>
        <div style={{
          display: 'flex', gap: 6, padding: 4,
          background: 'var(--hg-bg-deeper)',
          borderRadius: 14, border: '1px solid var(--hg-line-soft)',
        }}>
          {modeOptions.map((t) => (
            <button key={t.v} onClick={() => setMode(t.v)} style={{
              flex: 1, textAlign: 'center', padding: '10px 0', borderRadius: 11,
              background: mode === t.v ? 'var(--hg-surface-2)' : 'transparent',
              color: mode === t.v ? 'var(--hg-sage)' : 'var(--hg-muted)',
              fontSize: 12, fontWeight: mode === t.v ? 700 : 600,
              boxShadow: mode === t.v ? '0 1px 3px rgba(74,54,32,0.08)' : 'none',
            }}>{t.l}</button>
          ))}
        </div>
      </div>

      {/* 모드 소개 */}
      <div style={{ padding: '14px 22px 0' }}>
        <Panel style={{
          padding: 16,
          background: 'linear-gradient(135deg, var(--hg-sage-tint), var(--hg-surface) 130%)',
          borderColor: 'var(--hg-sage-soft)',
        }}>
          <Eyebrow color="var(--hg-sage)">이번 주 계획</Eyebrow>
          <div className="hg-serif" style={{ fontSize: 20, fontWeight: 600, color: 'var(--hg-ink)', letterSpacing: '-0.02em', marginTop: 2 }}>
            {plan.title}
          </div>
          <div style={{ fontSize: 12, color: 'var(--hg-ink-2)', fontWeight: 500, lineHeight: 1.6, marginTop: 6 }}>
            {plan.desc}
          </div>
        </Panel>
      </div>

      {/* 7일 식단 */}
      <div style={{ padding: '16px 22px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>7일 식단</div>
          <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>탭하면 기록</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {plan.days.map((day, i) => {
            const isToday = i === weekIdx;
            return (
              <div key={i} style={{
                background: isToday ? 'var(--hg-sage-tint)' : 'var(--hg-surface)',
                border: '1px solid ' + (isToday ? 'var(--hg-sage-soft)' : 'var(--hg-line-soft)'),
                borderRadius: 18, padding: 14,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: isToday ? 'var(--hg-sage)' : 'var(--hg-bg-deeper)',
                    color: isToday ? '#fff' : 'var(--hg-muted)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: '"Noto Serif KR", serif', fontSize: 13, fontWeight: 700,
                  }}>{day.d}</div>
                  <div style={{ flex: 1, fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>
                    {isToday ? '오늘' : `${day.d}요일`}
                  </div>
                  {isToday && <Chip bg="var(--hg-sage)" color="#fff">진행 중</Chip>}
                </div>
                {[
                  { l: '아침', v: day.breakfast },
                  { l: '점심', v: day.lunch },
                  { l: '저녁', v: day.dinner },
                  { l: '간식', v: day.snack },
                ].map((m) => (
                  <button key={m.l} onClick={() => quickLog(m.v, m.l)} style={{
                    width: '100%', textAlign: 'left',
                    display: 'flex', gap: 10, alignItems: 'flex-start',
                    padding: '8px 0',
                    borderTop: '1px solid ' + (isToday ? 'rgba(143,166,126,0.2)' : 'var(--hg-line-soft)'),
                  }}>
                    <span style={{
                      minWidth: 38, fontSize: 10, fontWeight: 700,
                      color: 'var(--hg-sage)', marginTop: 1,
                    }}>{m.l}</span>
                    <span style={{ flex: 1, fontSize: 12, color: 'var(--hg-ink-2)', lineHeight: 1.6, fontWeight: 500 }}>{m.v}</span>
                    <span style={{ color: 'var(--hg-muted)', fontSize: 14, marginTop: 1 }}>＋</span>
                  </button>
                ))}
              </div>
            );
          })}
        </div>
      </div>

      {/* 장보기 리스트 */}
      <div style={{ padding: '20px 22px 0' }}>
        <Eyebrow color="var(--hg-honey)">이번 주 장보기</Eyebrow>
        <Panel>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {SHOPPING_LISTS[mode].map((item) => (
              <span key={item} style={{
                padding: '8px 12px', borderRadius: 999,
                background: 'var(--hg-honey-tint)',
                border: '1px solid var(--hg-honey-soft)',
                fontSize: 12, fontWeight: 600, color: 'var(--hg-ink-2)',
              }}>{item}</span>
            ))}
          </div>
        </Panel>
      </div>

      {/* 원칙 */}
      <div style={{ padding: '16px 22px 0' }}>
        <Eyebrow>모든 모드의 원칙</Eyebrow>
        <Panel style={{ padding: 4 }}>
          {MEAL_PRINCIPLES.map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderBottom: i < MEAL_PRINCIPLES.length - 1 ? '1px solid var(--hg-line-soft)' : 'none',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'var(--hg-sage-tint)', color: 'var(--hg-sage)',
                display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0,
              }}>{i + 1}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>{p.t}</div>
                <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 500, marginTop: 2 }}>{p.s}</div>
              </div>
            </div>
          ))}
        </Panel>
      </div>

      {/* 도서관 링크 */}
      <div style={{ padding: '16px 22px 24px' }}>
        <button onClick={() => navigate('library')} style={{
          width: '100%', padding: 14, borderRadius: 14, textAlign: 'left',
          background: 'var(--hg-surface-2)',
          border: '1px dashed var(--hg-line)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ flex: 1, fontSize: 13, color: 'var(--hg-ink-2)', fontWeight: 600 }}>
            식이·영양 가이드 자세히 보기
          </span>
          <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
        </button>
      </div>
    </>
  );
}

Object.assign(window, { MealPlanScreen });