// 하루결 — 더보기 / 약 / 처음 진단 / 설정

// ────────────────────────────────────────────────────────────
// 더보기 메뉴
// ────────────────────────────────────────────────────────────
function MoreScreen({ navigate }) {
  const s = useStore();
  const sections = [
    {
      title: '나의 치료',
      items: [
        { l: '진료 질문 노트', s: `${s.questions.filter(q => !q.done).length}개 정리 중`, go: 'questions', c: 'var(--hg-clay)' },
        { l: '복용 중인 약',   s: `매일 ${s.meds.filter(m => m.type === 'daily' && m.schedule.length > 0).length}가지 · 필요시 ${s.meds.filter(m => m.type !== 'daily' || m.schedule.length === 0).length}가지`, go: 'meds',      c: 'var(--hg-honey)' },
        { l: '검사지 설명',   s: '병원 검사지 용어 풀이 + 내 수치 기록',              go: 'labs',      c: 'var(--hg-rose)' },
        { l: '병원 정보',     s: s.profile.hospital,                                  go: 'settings',  c: 'var(--hg-mist)' },
      ],
    },
    {
      title: '오늘의 케어',
      items: [
        { l: '나의 목표',    s: `${s.goals.filter(g => !g.done).length}개 진행 중 · 완료 ${s.goals.filter(g => g.done).length}`, go: 'goals', c: 'var(--hg-clay)' },
        { l: '운동 스케줄',  s: '회복 일차에 맞는 운동 추천',  go: 'exercise',  c: 'var(--hg-sage)' },
        { l: '식단 일정',    s: '증상 모드별 7일 식단 + 장보기', go: 'meal-plan', c: 'var(--hg-honey)' },
        { l: '검사 가이드',  s: 'CT·MRI·피검사 금식과 준비물',   go: 'exams',     c: 'var(--hg-mist)' },
      ],
    },
    {
      title: '도움말',
      items: [
        { l: '정보 도서관',       s: '공식 자료로 정리한 가이드',     go: 'library',   c: 'var(--hg-clay)' },
        { l: '처음 진단 가이드', s: '치료 시작 시 알아두면 좋은 것', go: 'firstcare', c: 'var(--hg-sage)' },
        { l: '위험 신호',         s: '병원 콜이 필요한 증상',         go: 'emergency', c: 'var(--hg-rose)' },
      ],
    },
    {
      title: '함께하는 사람',
      items: [
        { l: '안전 확인 · 보호자 연락', s: `최근 체크 ${Math.round(hoursSince(s.safety.lastCheckIn))}시간 전`, go: 'safety', c: 'var(--hg-sage)' },
        { l: '동기와 생일',           s: `${s.buddies.length}명 · 생일까지 D-${daysUntilBirthday(s.profile.birthday) ?? '?'}`, go: 'buddies', c: 'var(--hg-honey)' },
        { l: `같은 ${getStage(s.profile.stage).label} 동료들`, s: '익명 커뮤니티 (데모)', go: 'community', c: getStage(s.profile.stage).color },
        { l: '보호자 모드로 전환', s: '환자와 다른 화면을 봐요', action: () => { s.setMode('caregiver'); navigate('cg-home'); showToast('보호자 모드'); }, c: 'var(--hg-mist)' },
      ],
    },
    {
      title: '앱',
      items: [
        { l: '내 정보 / 설정', s: '이름·진료팀·연락처',                go: 'settings', c: 'var(--hg-muted)' },
        { l: '데이터 초기화',   s: '모든 기록을 처음 상태로 되돌려요', action: () => { if (confirm('정말 모든 기록을 초기화할까요?')) s.reset(); }, c: 'var(--hg-rose)' },
      ],
    },
  ];

  return (
    <>
      <ScreenHeader title="더보기" sub="기록 · 도움말 · 설정" />

      <div style={{ padding: '0 22px 24px' }}>
        {sections.map((sec) => (
          <div key={sec.title} style={{ marginBottom: 22 }}>
            <Eyebrow style={{ marginLeft: 4 }}>{sec.title}</Eyebrow>
            <Panel style={{ padding: 4 }}>
              {sec.items.map((it, i, arr) => (
                <button key={it.l} onClick={() => { if (it.action) it.action(); else navigate(it.go); }} style={{
                  width: '100%', textAlign: 'left',
                  padding: '14px 14px',
                  display: 'flex', alignItems: 'center', gap: 12,
                  borderBottom: i < arr.length - 1 ? '1px solid var(--hg-line-soft)' : 'none',
                }}>
                  <div style={{
                    width: 4, height: 32, borderRadius: 2,
                    background: it.c,
                  }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{it.l}</div>
                    <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 500, marginTop: 2 }}>{it.s}</div>
                  </div>
                  <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
                </button>
              ))}
            </Panel>
          </div>
        ))}

        <div style={{
          padding: 14, borderRadius: 14,
          background: 'var(--hg-bg-deeper)',
          fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600,
          lineHeight: 1.6, textAlign: 'center',
        }}>
          하루결은 진료를 보조하는 기록 도구입니다.<br/>치료 변경은 반드시 담당 의료진과 상의하세요.
        </div>
      </div>
    </>
  );
}

// 복용 중인 약 — screen-meds.jsx에서 정의됩니다.

// ────────────────────────────────────────────────────────────
// 처음 진단 가이드
// ────────────────────────────────────────────────────────────
function FirstCareScreen({ navigate }) {
  const steps = [
    { n: 1, title: '내 암의 기준 정보 정리', body: '병기, ER/PR, HER2, Ki-67, 림프절 여부, 수술 전/후 치료 계획을 한 장에 모아두세요.', tone: 'clay' },
    { n: 2, title: '치료 순서 이해하기',     body: '수술·항암·방사선·호르몬·표적 치료는 사람마다 순서가 달라요. 왜 이 순서인지 꼭 물어보세요.', tone: 'sage' },
    { n: 3, title: '진료 동행 준비',         body: '보호자는 녹음 가능 여부 확인, 질문·복용약 목록, 검사지를 챙기면 좋아요.', tone: 'honey' },
    { n: 4, title: '정보 과부하 줄이기',     body: '검색보다 담당 진료팀 계획을 기준으로. 온라인 정보는 출처와 업데이트 날짜를 확인하세요.', tone: 'mist' },
  ];
  const toneMap = {
    clay:  { c: 'var(--hg-clay)',  bg: 'var(--hg-clay-tint)',  soft: 'var(--hg-clay-soft)' },
    sage:  { c: 'var(--hg-sage)',  bg: 'var(--hg-sage-tint)',  soft: 'var(--hg-sage-soft)' },
    honey: { c: 'var(--hg-honey)', bg: 'var(--hg-honey-tint)', soft: 'var(--hg-honey-soft)' },
    mist:  { c: 'var(--hg-mist)',  bg: 'var(--hg-mist-tint)',  soft: 'var(--hg-mist-soft)' },
  };

  return (
    <>
      <div style={{ position: 'relative', height: 320 }}>
        <MoodImage src={IMG.window} alt="창가 빛" style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(42,36,29,0.0) 30%, rgba(42,36,29,0.7) 100%)',
        }} />
        <div style={{ position: 'absolute', top: 56, left: 22 }}>
          <button onClick={() => navigate('more')} aria-label="뒤로" style={{
            width: 38, height: 38, borderRadius: '50%',
            background: 'rgba(255,253,247,0.86)', color: 'var(--hg-ink)',
            backdropFilter: 'blur(10px)',
            display: 'grid', placeItems: 'center', fontSize: 18,
          }}>‹</button>
        </div>
        <div style={{ position: 'absolute', left: 22, right: 22, bottom: 26, color: '#fff' }}>
          <div style={{ fontSize: 11, fontWeight: 700, marginBottom: 8, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.85 }}>처음이신 분께</div>
          <div className="hg-serif" style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.25 }}>
            서두르지 않아도<br/>괜찮아요
          </div>
          <div style={{ fontSize: 13, marginTop: 10, opacity: 0.9, lineHeight: 1.6 }}>
            지금부터 차근차근 정리할 4가지.<br/>한 번에 다 알 필요 없어요.
          </div>
        </div>
      </div>

      <div style={{ padding: '22px 22px 0' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {steps.map((s) => {
            const t = toneMap[s.tone];
            return (
              <div key={s.n} style={{
                padding: 18, borderRadius: 20,
                background: 'var(--hg-surface)',
                border: '1px solid var(--hg-line-soft)',
                boxShadow: 'var(--hg-shadow-sm)',
                display: 'flex', gap: 14,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 14, flexShrink: 0,
                  background: t.bg, color: t.c,
                  display: 'grid', placeItems: 'center',
                  fontFamily: '"Noto Serif KR", serif', fontSize: 20, fontWeight: 600,
                  border: `1px solid ${t.soft}`,
                }}>{s.n}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--hg-ink)', marginBottom: 6, letterSpacing: '-0.01em' }}>{s.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--hg-ink-2)', lineHeight: 1.7 }}>{s.body}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '16px 22px 0' }}>
        <div style={{
          padding: 18, borderRadius: 22,
          background: 'linear-gradient(135deg, #2A241D, #4A4137)',
          color: '#fff', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -30, top: -30, width: 120, height: 120, borderRadius: '50%', background: 'rgba(217,166,108,0.18)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--hg-honey)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>보호자가 계신가요?</div>
            <div className="hg-serif" style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 10 }}>혼자 다 기억하지 마세요</div>
            <div style={{ fontSize: 12, lineHeight: 1.7, opacity: 0.85, marginBottom: 14 }}>
              보호자 모드를 켜면 식사·체온·증상을 함께 기록하고, 진료 동행도 함께 준비할 수 있어요.
            </div>
            <button onClick={() => navigate('settings')} style={{
              background: 'var(--hg-honey)', color: 'var(--hg-ink)',
              padding: '12px 18px', borderRadius: 999,
              fontSize: 13, fontWeight: 700,
            }}>보호자 초대하기 →</button>
          </div>
        </div>
      </div>

      <div style={{ padding: '16px 22px 24px' }}>
        <div style={{
          padding: 14, borderRadius: 14,
          background: 'var(--hg-bg-deeper)',
          fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600,
          lineHeight: 1.6, textAlign: 'center',
        }}>
          하루결은 진료를 보조하는 기록 도구입니다.<br/>치료 변경은 반드시 담당 의료진과 상의하세요.
        </div>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// 설정 / 프로필
// ────────────────────────────────────────────────────────────
function SettingsScreen({ navigate }) {
  const s = useStore();
  const [form, setForm] = React.useState(s.profile);

  const save = () => { s.setProfile(form); showToast('저장됨'); navigate('more'); };

  return (
    <>
      <ScreenHeader title="내 정보 / 설정" sub="언제든 수정할 수 있어요"
        back onBack={() => navigate('more')} />

      <div style={{ padding: '0 22px 24px' }}>
        <Eyebrow style={{ marginLeft: 4, marginTop: 8 }}>환자</Eyebrow>
        <Panel style={{ padding: 18, marginBottom: 18 }}>
          <label className="hg-label">이름</label>
          <input className="hg-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}/>

          <label className="hg-label" style={{ marginTop: 14 }}>진단명</label>
          <input className="hg-input" value={form.diagnosis} onChange={(e) => setForm({ ...form, diagnosis: e.target.value })}/>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
            <div>
              <label className="hg-label">현재 차수</label>
              <input type="number" className="hg-input" value={form.cycle} onChange={(e) => setForm({ ...form, cycle: +e.target.value })}/>
            </div>
            <div>
              <label className="hg-label">총 차수</label>
              <input type="number" className="hg-input" value={form.cycleTotal} onChange={(e) => setForm({ ...form, cycleTotal: +e.target.value })}/>
            </div>
          </div>

          <label className="hg-label" style={{ marginTop: 14 }}>병기 (Stage)</label>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {STAGES.map(st => (
              <button key={st.id} onClick={() => setForm({ ...form, stage: st.id })} style={{
                flex: '1 1 auto', minWidth: 60,
                padding: '10px 8px', borderRadius: 12,
                background: form.stage === st.id ? st.color : st.bg,
                color: form.stage === st.id ? '#fff' : st.color,
                fontSize: 13, fontWeight: 700,
                border: '1px solid ' + (form.stage === st.id ? 'transparent' : st.color + '22'),
              }}>{st.label}</button>
            ))}
          </div>
          {form.stage && (
            <div style={{
              marginTop: 8, padding: 10, borderRadius: 10,
              background: 'var(--hg-bg-deeper)',
              fontSize: 11, color: 'var(--hg-ink-2)', fontWeight: 500, lineHeight: 1.6,
            }}>{getStage(form.stage).short}</div>
          )}

          <label className="hg-label" style={{ marginTop: 14 }}>생일</label>
          <input type="date" className="hg-input" value={form.birthday || ''} onChange={(e) => setForm({ ...form, birthday: e.target.value })}/>

          <label className="hg-label" style={{ marginTop: 14 }}>최근 투여일</label>
          <input type="date" className="hg-input" value={form.cycleStartDate} onChange={(e) => setForm({ ...form, cycleStartDate: e.target.value })}/>
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>진료팀</Eyebrow>
        <Panel style={{ padding: 18, marginBottom: 18 }}>
          <label className="hg-label">병원·진료과</label>
          <input className="hg-input" value={form.hospital} onChange={(e) => setForm({ ...form, hospital: e.target.value })}/>

          <label className="hg-label" style={{ marginTop: 14 }}>담당 의사</label>
          <input className="hg-input" value={form.doctor} onChange={(e) => setForm({ ...form, doctor: e.target.value })}/>

          <label className="hg-label" style={{ marginTop: 14 }}>병원 응급 전화</label>
          <input type="tel" className="hg-input" value={form.hospitalPhone} onChange={(e) => setForm({ ...form, hospitalPhone: e.target.value })}/>
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>커뮤니티 프로필</Eyebrow>
        <Panel style={{ padding: 18, marginBottom: 18 }}>
          <ChatProfileEditor form={form} setForm={setForm}/>
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>보호자</Eyebrow>
        <Panel style={{ padding: 18, marginBottom: 18 }}>
          <label className="hg-label">이름</label>
          <input className="hg-input" value={form.caregiverName} onChange={(e) => setForm({ ...form, caregiverName: e.target.value })}/>

          <label className="hg-label" style={{ marginTop: 14 }}>연락처</label>
          <input type="tel" className="hg-input" value={form.caregiverPhone} onChange={(e) => setForm({ ...form, caregiverPhone: e.target.value })}/>

          <button onClick={() => { s.setMode('caregiver'); navigate('cg-home'); showToast('보호자 모드'); }} style={{
            marginTop: 16, width: '100%', padding: 14, borderRadius: 14,
            background: 'var(--hg-mist-tint)', border: '1px solid var(--hg-mist-soft)',
            color: 'var(--hg-mist)', fontSize: 13, fontWeight: 700,
          }}>보호자 모드로 전환 →</button>
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>마음 챙김</Eyebrow>
        <Panel style={{ padding: 4, marginBottom: 18 }}>
          <button onClick={() => {
            const next = !s.encEnabled;
            Store.save(K.encEnabled, next);
            showToast(next ? '응원 메시지 켜짐' : '응원 메시지 꺼짐');
          }} style={{
            width: '100%', textAlign: 'left', padding: '14px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 12,
              background: 'var(--hg-honey-tint)', color: 'var(--hg-honey)',
              display: 'grid', placeItems: 'center', flexShrink: 0,
              fontSize: 18,
            }}>♡</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>매일 응원 메시지 받기</div>
              <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 500, marginTop: 2 }}>앱을 열 때 따뜻한 한마디</div>
            </div>
            <div style={{
              width: 44, height: 26, borderRadius: 999,
              background: s.encEnabled ? 'var(--hg-clay)' : 'var(--hg-line)',
              position: 'relative', transition: 'background 200ms',
            }}>
              <div style={{
                position: 'absolute', top: 3, left: s.encEnabled ? 21 : 3,
                width: 20, height: 20, borderRadius: '50%',
                background: '#fff', transition: 'left 200ms',
                boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
              }}/>
            </div>
          </button>
          <button onClick={() => {
            localStorage.removeItem(K.encShown);
            showToast('지금 응원 메시지가 떠요');
            setTimeout(() => window.location.reload(), 600);
          }} style={{
            width: '100%', textAlign: 'left', padding: '14px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
            borderTop: '1px solid var(--hg-line-soft)',
          }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--hg-clay-tint)', color: 'var(--hg-clay)', display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 16 }}>↻</div>
            <div style={{ flex: 1, fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>지금 응원 메시지 보기</div>
            <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
          </button>
        </Panel>

        <PrimaryButton onClick={save}>저장</PrimaryButton>
      </div>
    </>
  );
}

Object.assign(window, { MoreScreen, FirstCareScreen, SettingsScreen });

// ────────────────────────────────────────────────────────────
// 커뮤니티 프로필 편집기 (별칭 + 아바타)
// ────────────────────────────────────────────────────────────
function ChatProfileEditor({ form, setForm }) {
  const fileRef = React.useRef(null);
  const emojis = ['🌸','🌿','☀️','🌙','☕','🤍','🌱','🌷','🍀','🦋','📚','🧸','🕊️','🌻','🍵','🌾'];
  const isPhoto = form.chatAvatar && form.chatAvatar.startsWith('data:');

  const onPhoto = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    if (file.size > 800 * 1024) {
      showToast('800KB 이하 이미지로 부탁드려요');
      return;
    }
    const reader = new FileReader();
    reader.onload = () => setForm({ ...form, chatAvatar: reader.result });
    reader.readAsDataURL(file);
  };

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
        <div style={{
          width: 64, height: 64, borderRadius: '50%',
          background: isPhoto ? '#000' : 'var(--hg-clay-tint)',
          backgroundImage: isPhoto ? `url(${form.chatAvatar})` : 'none',
          backgroundSize: 'cover', backgroundPosition: 'center',
          display: 'grid', placeItems: 'center',
          fontSize: 30, lineHeight: 1,
          border: '1px solid var(--hg-line)',
          flexShrink: 0,
        }}>
          {!isPhoto && (form.chatAvatar || '🌸')}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--hg-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>채팅에서 보이는 이름</div>
          <input
            className="hg-input"
            style={{ marginTop: 4 }}
            value={form.chatNick || ''}
            onChange={(e) => setForm({ ...form, chatNick: e.target.value })}
            placeholder="예: 봄을 기다리는"
            maxLength={14}
          />
        </div>
      </div>

      <label className="hg-label">아바타</label>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {emojis.map(em => (
          <button key={em} onClick={() => setForm({ ...form, chatAvatar: em })} style={{
            width: 42, height: 42, borderRadius: 12,
            background: form.chatAvatar === em ? 'var(--hg-clay-tint)' : 'var(--hg-bg-deeper)',
            border: '1px solid ' + (form.chatAvatar === em ? 'var(--hg-clay)' : 'var(--hg-line-soft)'),
            fontSize: 22, lineHeight: 1,
          }}>{em}</button>
        ))}
      </div>

      <input ref={fileRef} type="file" accept="image/*" onChange={onPhoto} style={{ display: 'none' }}/>
      <button onClick={() => fileRef.current && fileRef.current.click()} style={{
        marginTop: 12, width: '100%', padding: 12, borderRadius: 12,
        background: 'var(--hg-surface)', border: '1px dashed var(--hg-line)',
        fontSize: 13, fontWeight: 700, color: 'var(--hg-ink-2)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}>
        <svg width="16" height="16" viewBox="0 0 22 22" fill="none">
          <rect x="3" y="5" width="16" height="13" rx="2" stroke="currentColor" strokeWidth="1.6"/>
          <circle cx="11" cy="12" r="3" stroke="currentColor" strokeWidth="1.6"/>
          <path d="M8 5l1-2h4l1 2" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
        </svg>
        직접 사진 올리기
      </button>
      <div style={{ marginTop: 8, padding: 10, borderRadius: 10, background: 'var(--hg-bg-deeper)', fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, lineHeight: 1.6 }}>
        익명 닉네임을 권장합니다. 사적인 정보는 노출하지 마세요.
      </div>
    </>
  );
}

Object.assign(window, { ChatProfileEditor });