// app-extra.jsx — GroupOrder (견적), MyPage
const GENRES = ['난타', '장구난타', '트로트', '합창', '사물놀이', '행사 단체복', '기타'];
const TIMING = ['1개월 내', '2개월 내', '날짜 미정'];

// ============ GROUP ORDER (견적) ============
function GroupScreen({ go, toast }) {
  const [genre, setGenre] = React.useState('난타');
  const [people, setPeople] = React.useState(8);
  const [colors, setColors] = React.useState(['red', 'gold']);
  const [timing, setTiming] = React.useState('1개월 내');
  const [done, setDone] = React.useState(false);
  const toggle = (c) => setColors(s => s.includes(c) ? s.filter(x => x !== c) : [...s, c]);

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#F4F1EA', fontFamily: 'Noto Serif KR' }}>
      <AppHeader title="단체주문 견적" onBack={() => go('home')} />
      <div style={{ flex: 1, overflow: 'auto', padding: '0 0 8px' }}>
        {/* hero */}
        <div style={{ padding: '14px 16px 0' }}>
          <div style={{ background: 'linear-gradient(135deg,#F1EBDE,#FBF8F1)', border: `1px solid ${T.line}`, borderRadius: 18, padding: 22, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -8, top: -8, opacity: 0.14 }}><Star size={88} fill={T.gold} /></div>
            <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: T.gold }}>Group Order</div>
            <div style={{ fontFamily: '"Noto Serif KR"', fontSize: 22, fontWeight: 400, color: T.ink, lineHeight: 1.3, marginTop: 9, position: 'relative', letterSpacing: '.01em', wordBreak: 'keep-all' }}>우리 팀 단체의상,<br/>꼭 맞게 제작해 드립니다</div>
            <div style={{ fontSize: 12.5, color: T.sub, fontWeight: 300, marginTop: 9, position: 'relative', wordBreak: 'keep-all' }}>아래 항목만 골라주시면 카톡으로 1:1 견적을 보내드려요</div>
          </div>
          {/* trust row */}
          <div style={{ display: 'flex', marginTop: 12, border: `1px solid ${T.line}`, background: T.soft }}>
            {[['맞춤 제작', '치수·색 맞춤'], ['무료 자수', '팀 로고 1색'], ['5벌부터', '단체 제작']].map((t, i) => (
              <div key={i} style={{ flex: 1, padding: '13px 6px', textAlign: 'center', borderLeft: i ? `1px solid ${T.line}` : 'none' }}>
                <div style={{ fontSize: 12.5, fontWeight: 500, color: T.ink, letterSpacing: '.01em', whiteSpace: 'nowrap' }}>{t[0]}</div>
                <div style={{ fontSize: 10.5, fontWeight: 300, color: T.taupe, marginTop: 4 }}>{t[1]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 견적 입력 시트 */}
        <div style={{ margin: '20px 16px 0', padding: '4px 18px', background: T.soft, border: `1px solid ${T.line}` }}>
          <Field top n="01" label="공연 종목">
            <Chips options={GENRES} value={genre} onPick={setGenre} />
          </Field>
          <Field n="02" label="인원 수" hint="최소 4벌부터">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Stepper value={people} setValue={setPeople} min={4} max={200} />
              <span style={{ fontSize: 14, color: T.sub, fontWeight: 300 }}>명</span>
            </div>
          </Field>
          <Field n="03" label="희망 색상" hint="여러 개 선택 가능">
            <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap' }}>
              {Object.keys(COL).map(c => {
                const on = colors.includes(c); const cc = COL[c];
                return (
                  <Press key={c} onClick={() => toggle(c)} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '8px 13px 8px 8px', borderRadius: 22, border: on ? `1px solid ${T.ink}` : `1px solid ${T.line}`, background: on ? '#fff' : 'transparent' }}>
                    <span style={{ width: 18, height: 18, borderRadius: '50%', background: cc.hex, border: cc.hex === '#F4F1EA' ? '1px solid #ddd' : 'none' }} />
                    <span style={{ fontSize: 12.5, fontWeight: on ? 500 : 300, color: on ? T.ink : T.taupe }}>{cc.name}</span>
                  </Press>
                );
              })}
            </div>
          </Field>
          <Field n="04" label="희망 일정">
            <Chips options={TIMING} value={timing} onPick={setTiming} />
          </Field>
          <Field n="05" label="요청사항" hint="선택">
            <Press onClick={() => toast('카톡 상담에서 자세히 적어주셔도 돼요')} style={{ background: '#fff', border: `1px solid ${T.line}`, padding: '14px 14px', fontSize: 13, fontWeight: 300, color: T.taupe }}>예) 단원 이름 자수, 예산, 참고 사진 등</Press>
          </Field>
        </div>

        {/* 실시간 견적 요약 */}
        <div style={{ margin: '20px 16px 0', padding: 18, background: 'linear-gradient(135deg,#F1EBDE,#FBF8F1)', border: `1px solid ${T.line}` }}>
          <div style={{ fontFamily: "'Jost', sans-serif", fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: T.gold }}>Your Request</div>
          <div style={{ fontFamily: '"Noto Serif KR"', fontSize: 16, fontWeight: 400, color: T.ink, marginTop: 6, marginBottom: 12, letterSpacing: '.02em' }}>견적 요약</div>
          {[['공연 종목', genre], ['인원 수', `${people}명`], ['희망 색상', colors.length ? colors.map(c => COL[c].name).join(' · ') : '미선택'], ['희망 일정', timing]].map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, padding: '8px 0', borderTop: i ? `1px solid ${T.line}` : 'none' }}>
              <span style={{ fontSize: 12.5, fontWeight: 300, color: T.taupe, flex: '0 0 auto' }}>{r[0]}</span>
              <span style={{ fontSize: 13, fontWeight: 400, color: T.ink, textAlign: 'right' }}>{r[1]}</span>
            </div>
          ))}
          <div style={{ fontSize: 11, fontWeight: 300, color: T.taupe, marginTop: 12, lineHeight: 1.6, wordBreak: 'keep-all' }}>정확한 금액은 원단·디테일에 따라 달라집니다. 카톡 상담에서 최종 견적을 안내드려요.</div>
        </div>

        {/* 진행 절차 */}
        <div style={{ margin: '20px 16px 24px' }}>
          <div style={{ fontFamily: '"Noto Serif KR"', fontSize: 15, fontWeight: 400, color: T.ink, marginBottom: 14, letterSpacing: '.02em' }}>진행 절차</div>
          {[['01', '견적 요청', '원하는 구성을 남기고 카톡으로 전송'], ['02', '1:1 상담', '담당자가 치수·원단·금액을 안내'], ['03', '제작 · 배송', '확정 후 제작에 들어가 배송까지']].map((s, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, padding: '12px 0', borderTop: i ? `1px solid ${T.line}` : 'none' }}>
              <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 13, letterSpacing: '.08em', color: T.gold, flex: '0 0 auto', paddingTop: 1 }}>{s[0]}</span>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 400, color: T.ink }}>{s[1]}</div>
                <div style={{ fontSize: 11.5, fontWeight: 300, color: T.taupe, marginTop: 3, wordBreak: 'keep-all' }}>{s[2]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ flex: '0 0 auto', borderTop: `1px solid ${T.line}`, background: '#FBFAF6', padding: '12px 14px' }}>
        <Press onClick={() => setDone(true)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '16px', borderRadius: 14, background: T.kakao }}>
          <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .9.1 1.4.1 5.5 0 10-3.6 10-8s-4.5-8-10-8Z" fill="#3C1E1E"/></svg>
          <span style={{ fontSize: 16, fontWeight: 800, color: T.kakaoInk }}>카톡으로 견적받기</span>
        </Press>
      </div>

      <Sheet open={done} onClose={() => setDone(false)} height="auto">
        <div style={{ textAlign: 'center', padding: '14px 6px 8px', fontFamily: 'Noto Serif KR' }}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: '#EFEAE0', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Star size={40} fill={T.deep} /></div>
          <div style={{ fontFamily: '"Noto Serif KR"', fontSize: 21, color: T.ink, marginTop: 14 }}>견적 요청 접수!</div>
          <div style={{ fontSize: 13.5, color: T.sub, marginTop: 8, lineHeight: 1.6 }}>{genre} · {people}명 · {colors.map(c => COL[c].name).join('/')}<br/>카카오톡 채널로 1:1 상담을 연결할게요.</div>
          <Press onClick={() => { setDone(false); toast('카카오톡 채널 상담을 연결합니다'); }} style={{ marginTop: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '15px', borderRadius: 14, background: T.kakao }}>
            <svg width="19" height="19" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .9.1 1.4.1 5.5 0 10-3.6 10-8s-4.5-8-10-8Z" fill="#3C1E1E"/></svg>
            <span style={{ fontSize: 15, fontWeight: 800, color: T.kakaoInk }}>카카오톡으로 상담하기</span>
          </Press>
          <Press onClick={() => { setDone(false); go('home'); }} style={{ marginTop: 10, padding: '13px', color: T.muted, fontSize: 14, fontWeight: 700 }}>홈으로 돌아가기</Press>
        </div>
      </Sheet>
    </div>
  );
}

function Field({ n, label, hint, top, children }) {
  return (
    <div style={{ padding: '20px 0', borderTop: top ? 'none' : `1px solid ${T.line}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
        {n && <span style={{ fontFamily: "'Jost', sans-serif", fontSize: 11, letterSpacing: '.14em', color: T.gold }}>{n}</span>}
        <span style={{ fontSize: 15, fontWeight: 400, color: T.ink, letterSpacing: '.02em' }}>{label}</span>
        {hint && <span style={{ marginLeft: 'auto', fontSize: 11, fontWeight: 300, color: T.taupe, whiteSpace: 'nowrap' }}>{hint}</span>}
      </div>
      {children}
    </div>
  );
}
function Chips({ options, value, onPick }) {
  return (
    <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap' }}>
      {options.map(o => {
        const on = value === o;
        return <Press key={o} onClick={() => onPick(o)} style={{ padding: '10px 17px', borderRadius: 22, background: on ? T.soft : 'transparent', border: on ? `1px solid ${T.ink}` : `1px solid ${T.line}`, color: on ? T.ink : T.taupe, fontSize: 13.5, fontWeight: on ? 500 : 300, letterSpacing: '.02em' }}>{o}</Press>;
      })}
    </div>
  );
}

// ============ MY PAGE ============
function MyScreen({ go, user, login, orders, toast }) {
  const menu = [
    ['주문 / 배송 내역', orders.length ? `${orders.length}건` : '내역 없음', 'orders'],
    ['단체주문 견적', '5벌 이상 · 카톡 1분 견적', 'group'],
    ['이용안내 · 주의사항', '주문제작 · 환불 · 배송', 'guide'],
    ['자주 묻는 질문', '사이즈 · 제작기간 · 교환', 'faq'],
    ['약관 · 사업자정보', '', 'terms'],
    ['카카오톡 채널', '1:1 상담 · 제작 문의', 'kakao'],
  ];
  const goMenu = (k) => {
    if (k === 'group') return go('group');
    if (k === 'guide') return go('guide', { tab: 'guide' });
    if (k === 'faq') return go('guide', { tab: 'faq' });
    if (k === 'terms') return go('guide', { tab: 'terms' });
    if (k === 'orders') return toast(orders.length ? '주문 상세는 카톡으로 안내드려요' : '아직 주문 내역이 없어요');
    toast('카카오톡 채널로 연결됩니다');
    window.open(CONTACT.kakaoChat, '_blank', 'noopener');
  };
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#F4F1EA', fontFamily: 'Noto Serif KR' }}>
      <div style={{ flex: '0 0 auto', background: '#FBFAF6', borderBottom: `1px solid ${T.line}`, padding: '6px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 48 }}>
          <span style={{ fontSize: 19, fontWeight: 800, color: T.ink }}>마이 STAR</span>
          <StarLogo size={20} sub="" />
        </div>
        <div style={{ padding: '14px 0 18px' }}>
          {user ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{ width: 54, height: 54, borderRadius: 27, background: T.yellow, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Star size={28} fill={T.ink} /></div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ fontSize: 17, fontWeight: 800, color: T.ink }}>{user.name}님</span><span style={{ fontSize: 10.5, fontWeight: 700, color: T.deep, background: '#EFEAE0', padding: '2px 7px', borderRadius: 6 }}>카카오 연동</span></div>
                <div style={{ fontSize: 12.5, color: T.muted, marginTop: 3 }}>{user.phone}</div>
              </div>
            </div>
          ) : (
            <Press onClick={login} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '15px', borderRadius: 12, background: T.kakao }}>
              <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7l-1 3.6c-.1.4.3.7.6.5l4.3-2.8c.4 0 .9.1 1.4.1 5.5 0 10-3.6 10-8s-4.5-8-10-8Z" fill="#3C1E1E"/></svg>
              <span style={{ fontSize: 15, fontWeight: 800, color: T.kakaoInk }}>카카오로 시작하기 · 가입 없이</span>
            </Press>
          )}
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px 20px' }}>
        {orders.length > 0 && (
          <div style={{ background: '#FBFAF6', borderRadius: 16, padding: 16, marginBottom: 14 }}>
            <SectionTitle>최근 주문</SectionTitle>
            {orders.map((o, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
                <div style={{ width: 46, height: 46, borderRadius: 10, background: o.img ? `#EAE4D9 url("${o.img}") center 20%/cover` : T.yellow, flex: '0 0 46px' }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: T.ink }}>{o.first}{o.count > 1 ? ` 외 ${o.count - 1}건` : ''}</div>
                  <div style={{ fontSize: 12, color: T.deep, fontWeight: 700, marginTop: 3 }}>제작 준비중 · {o.eta}</div>
                </div>
                <span style={{ fontSize: 14, fontWeight: 800, color: T.ink, whiteSpace: 'nowrap' }}>{KRW(o.total)}</span>
              </div>
            ))}
          </div>
        )}
        <div style={{ background: '#FBFAF6', borderRadius: 16, overflow: 'hidden' }}>
          {menu.map((m, i) => (
            <Press key={i} onClick={() => goMenu(m[2])} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px', borderTop: i ? `1px solid ${T.line}` : 'none' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: T.ink }}>{m[0]}</div>
                {m[1] && <div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>{m[1]}</div>}
              </div>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#C9C2B6" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </Press>
          ))}
        </div>
      </div>
      <NavBar active="my" onNav={go} />
    </div>
  );
}

Object.assign(window, { GroupScreen, MyScreen, Field, Chips });