// Members, Reviews, Admins, Service pages

const Members = () => {
  const [tab, setTab] = React.useState('all');
  const filtered = tab === 'all' ? MEMBERS : MEMBERS.filter(m => m.status === tab);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>회원 관리</h1>
          <div className="sub">전체 회원 정보를 조회하고 관리합니다 · 총 {MEMBERS.length.toLocaleString()}명 (실 {fmtNum(18204)})</div>
        </div>
        <div className="actions">
          <button className="btn btn-ghost"><Icon name="download" size={14}/>회원 내보내기</button>
          <button className="btn btn-primary"><Icon name="upload" size={14}/>일괄 알림</button>
        </div>
      </div>

      <div className="stat-grid">
        <Stat icon="user" label="전체 회원" value="18,204명" delta="+11.7%" deltaTone="up" foot="이번달 신규 1,082명"/>
        <Stat icon="star" label="VIP 회원" value="412명" delta="+8" deltaTone="up" foot="누적 ₩300,000+" tone="green"/>
        <Stat icon="users" label="활성 회원" value="14,728명" delta="80.9%" deltaTone="up" foot="최근 30일 활동" tone="blue"/>
        <Stat icon="info" label="휴면/정지" value="3,476명" delta="-2.1%" deltaTone="down" foot="휴면 90일+" tone="purple"/>
      </div>

      <div className="table-wrap" style={{ marginTop:14 }}>
        <Tabs items={[
          { value:'all', label:'전체', count: MEMBERS.length },
          { value:'active', label:'활성' },
          { value:'vip', label:'VIP' },
          { value:'dormant', label:'휴면' },
          { value:'suspended', label:'정지' },
        ]} value={tab} onChange={setTab}/>
        <div className="table-toolbar">
          <input className="input" placeholder="회원ID, 이름, 이메일, 전화번호" style={{ flex:1, maxWidth:340 }}/>
          <select className="select"><option>가입 채널</option><option>카카오</option><option>애플</option><option>이메일</option></select>
          <select className="select"><option>가입일 순</option><option>주문수 순</option><option>구매액 순</option></select>
        </div>
        <table className="table">
          <thead><tr>
            <th className="checkbox-cell"><span className="checkbox"></span></th>
            <th>회원ID</th><th>회원</th><th>연락처</th><th>채널</th><th>가입일</th><th style={{textAlign:'right'}}>주문</th><th style={{textAlign:'right'}}>총 구매액</th><th>최근 활동</th><th>상태</th><th></th>
          </tr></thead>
          <tbody>
            {filtered.map(m => {
              const s = MEMBER_STATUS[m.status];
              return (
                <tr key={m.id}>
                  <td className="checkbox-cell"><span className="checkbox"></span></td>
                  <td className="t-mono">{m.id}</td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <Avatar name={m.name[0]} tone={['brand','blue','green','pink','yellow','purple'][m.id.charCodeAt(2)%6]} size={30}/>
                      <div>
                        <div style={{ fontWeight:600 }}>{m.name}</div>
                        <div style={{ fontSize:12, color:'var(--text-3)' }}>{m.email}</div>
                      </div>
                    </div>
                  </td>
                  <td className="t-mono">{m.phone}</td>
                  <td><Badge tone={m.channel==='kakao'?'yellow':m.channel==='apple'?'neutral':'info'}>{m.channel === 'kakao' ? 'Kakao' : m.channel === 'apple' ? 'Apple' : '이메일'}</Badge></td>
                  <td style={{ color:'var(--text-3)' }}>{m.signup}</td>
                  <td style={{ textAlign:'right', fontWeight:600 }}>{m.orders}건</td>
                  <td style={{ textAlign:'right', fontWeight:600 }}>{fmtKRW(m.spent)}</td>
                  <td style={{ color:'var(--text-3)', fontSize:12.5 }}>{m.lastSeen}</td>
                  <td><Badge tone={s.tone}>{s.label}</Badge></td>
                  <td><div className="row-actions"><button className="btn btn-sm btn-ghost">상세</button></div></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="table-foot">
          <span style={{ fontSize:13, color:'var(--text-3)' }}>총 {filtered.length}건</span>
          <Pager total={5} current={1}/>
        </div>
      </div>
    </div>
  );
};

const Reviews = () => {
  const [tab, setTab] = React.useState('all');
  const filtered =
    tab === 'all' ? REVIEWS :
    tab === 'flagged' ? REVIEWS.filter(r => r.flagged) :
    tab === 'hidden' ? REVIEWS.filter(r => r.status === 'hidden') :
    REVIEWS.filter(r => r.rating <= 2);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>리뷰 관리</h1>
          <div className="sub">고객 리뷰를 모니터링하고 신고된 리뷰를 처리합니다</div>
        </div>
        <div className="actions">
          <button className="btn btn-ghost"><Icon name="download" size={14}/>내보내기</button>
        </div>
      </div>

      <div className="stat-grid">
        <Stat icon="star" label="전체 리뷰" value="2,847건" delta="+128" deltaTone="up" foot="이번 달 신규"/>
        <Stat icon="checkCircle" label="평균 평점" value="4.6 ★" delta="+0.1" deltaTone="up" foot="전월 대비" tone="green"/>
        <Stat icon="info" label="신고된 리뷰" value="3건" delta="처리 필요" deltaTone="down" foot="검토 대기" tone="purple"/>
        <Stat icon="users" label="응답률" value="78%" delta="+4.2%" deltaTone="up" foot="사장님 답글" tone="blue"/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginTop:14 }}>
        <div className="table-wrap">
          <Tabs items={[
            { value:'all', label:'전체', count: REVIEWS.length },
            { value:'flagged', label:'신고됨', count: REVIEWS.filter(r=>r.flagged).length },
            { value:'low', label:'낮은 평점', count: REVIEWS.filter(r=>r.rating<=2).length },
            { value:'hidden', label:'숨김', count: REVIEWS.filter(r=>r.status==='hidden').length },
          ]} value={tab} onChange={setTab}/>
          <div className="table-toolbar">
            <input className="input" placeholder="매장, 회원, 본문" style={{ flex:1, maxWidth:300 }}/>
            <select className="select"><option>전체 평점</option><option>5점</option><option>4점</option><option>3점</option><option>2점</option><option>1점</option></select>
          </div>
          <div style={{ display:'flex', flexDirection:'column' }}>
            {filtered.map(r => (
              <div key={r.id} style={{ padding:'16px 18px', borderBottom:'1px solid var(--border)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                  <Avatar name={r.user[0]} tone="neutral" size={28}/>
                  <div style={{ flex:1 }}>
                    <div style={{ fontWeight:600, fontSize:13.5 }}>{r.user} <span style={{ color:'var(--text-3)', fontWeight:400, fontSize:12.5 }}>· {r.store}</span></div>
                    <div style={{ fontSize:12, color:'var(--text-3)' }}>{r.date} · {r.id}</div>
                  </div>
                  <div style={{ color: r.rating>=4 ? 'var(--success)' : r.rating>=3 ? 'var(--warn)' : 'var(--danger)', fontWeight:700, fontSize:14 }}>
                    {'★'.repeat(r.rating)}{'☆'.repeat(5-r.rating)}
                  </div>
                  {r.flagged && <Badge tone="danger">신고됨</Badge>}
                  {r.status === 'hidden' && <Badge tone="neutral">숨김</Badge>}
                </div>
                <div style={{ fontSize:13.5, color:'var(--text-2)', lineHeight:1.55 }}>{r.text}</div>
                <div style={{ display:'flex', gap:6, marginTop:10 }}>
                  <button className="btn btn-sm btn-ghost"><Icon name="eye" size={12}/>{r.status === 'hidden' ? '복원' : '숨김'}</button>
                  <button className="btn btn-sm btn-ghost">사장님에게 알림</button>
                  {r.flagged && <button className="btn btn-sm btn-danger-ghost"><Icon name="trash" size={12}/>삭제</button>}
                  <span style={{ marginLeft:'auto', fontSize:12, color:'var(--text-3)' }}>도움돼요 12 · 답글 {r.flagged?0:3}</span>
                </div>
              </div>
            ))}
          </div>
          <div className="table-foot">
            <span style={{ fontSize:13, color:'var(--text-3)' }}>총 {filtered.length}건</span>
            <Pager total={1} current={1}/>
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div className="card">
            <div className="card-h"><h3>평점 분포</h3></div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {[{r:5,c:1842,p:65},{r:4,c:602,p:21},{r:3,c:228,p:8},{r:2,c:114,p:4},{r:1,c:61,p:2}].map(b => (
                <div key={b.r} style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ width: 28, fontSize:13, fontWeight:600 }}>{b.r}★</span>
                  <div style={{ flex:1, height:8, borderRadius:999, background:'var(--bg)', overflow:'hidden' }}>
                    <div style={{ width:`${b.p}%`, height:'100%', background: b.r>=4 ? 'var(--success)' : b.r===3 ? 'var(--warn)' : 'var(--danger)' }}/>
                  </div>
                  <span style={{ fontSize:12, color:'var(--text-3)', width: 56, textAlign:'right' }}>{fmtNum(b.c)}건</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-h"><h3>최근 신고 사유</h3></div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:13 }}>
              {[
                { t:'욕설/비방', n: 8 },
                { t:'허위 정보', n: 5 },
                { t:'스팸/광고', n: 3 },
                { t:'개인정보 노출', n: 2 },
                { t:'기타', n: 4 },
              ].map(r => (
                <div key={r.t} style={{ display:'flex', alignItems:'center' }}>
                  <span style={{ flex:1 }}>{r.t}</span>
                  <Badge tone="neutral">{r.n}</Badge>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Admins = () => {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>관리자 관리</h1>
          <div className="sub">YumYum 운영 관리자 계정과 권한을 관리합니다</div>
        </div>
        <div className="actions">
          <button className="btn btn-ghost">권한 그룹</button>
          <button className="btn btn-primary"><Icon name="plus" size={14}/>관리자 추가</button>
        </div>
      </div>

      <div className="table-wrap">
        <div className="table-toolbar">
          <input className="input" placeholder="이름, 이메일" style={{ flex:1, maxWidth:300 }}/>
          <select className="select"><option>전체 권한</option><option>슈퍼관리자</option><option>운영자</option><option>개발자</option></select>
        </div>
        <table className="table">
          <thead><tr>
            <th>관리자ID</th><th>이름</th><th>이메일</th><th>권한</th><th>소속</th><th>최근 접속</th><th>상태</th><th></th>
          </tr></thead>
          <tbody>
            {ADMINS.map(a => (
              <tr key={a.id}>
                <td className="t-mono">{a.id}</td>
                <td>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <Avatar name={a.name[0]} tone={a.role==='슈퍼관리자'?'brand':'neutral'} size={30}/>
                    <span style={{ fontWeight:600 }}>{a.name}</span>
                  </div>
                </td>
                <td className="t-mono">{a.email}</td>
                <td><Badge tone={a.role==='슈퍼관리자'?'brand':a.role==='개발자'?'info':'neutral'}>{a.role}</Badge></td>
                <td>{a.team}</td>
                <td style={{ color:'var(--text-3)' }}>{a.last}</td>
                <td>{a.status==='active' ? <Badge tone="success" dot="success">활성</Badge> : <Badge tone="neutral" dot="neutral">비활성</Badge>}</td>
                <td>
                  <div className="row-actions">
                    <button className="btn btn-sm btn-ghost">권한</button>
                    <button className="btn btn-sm btn-ghost">수정</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const ServiceCategories = () => (
  <div className="page">
    <div className="page-head">
      <div>
        <h1>서비스 관리 · 카테고리</h1>
        <div className="sub">홈 화면에 노출되는 음식 카테고리를 관리합니다</div>
      </div>
      <div className="actions"><button className="btn btn-primary"><Icon name="plus" size={14}/>카테고리 추가</button></div>
    </div>
    <div className="card">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(160px, 1fr))', gap:12 }}>
        {CATEGORIES.map((c, i) => (
          <div key={c} style={{ padding:14, border:'1px solid var(--border)', borderRadius:12, display:'flex', flexDirection:'column', gap:8 }}>
            <div style={{ width:48, height:48, borderRadius:12, background:`linear-gradient(135deg, ${i%3===0?'#FFF1E6':i%3===1?'#FFF7CC':'#FDE9F3'}, white)`, display:'grid', placeItems:'center', fontSize:22, color:'var(--brand)', fontWeight:800 }}>{c[0]}</div>
            <div style={{ fontWeight:600 }}>{c}</div>
            <div style={{ fontSize:12, color:'var(--text-3)' }}>매장 {Math.floor(20 + Math.random()*60)}개 · 노출중</div>
            <div style={{ display:'flex', gap:6, marginTop:'auto' }}>
              <button className="btn btn-sm btn-ghost" style={{ flex:1 }}>편집</button>
              <button className="btn-icon" style={{ border:'1px solid var(--border)', borderRadius:6 }}><Icon name="moreV" size={14}/></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const ServiceBanners = () => (
  <div className="page">
    <div className="page-head">
      <div>
        <h1>서비스 관리 · 배너 / 공지</h1>
        <div className="sub">홈 배너와 공지사항을 관리합니다</div>
      </div>
      <div className="actions"><button className="btn btn-primary"><Icon name="plus" size={14}/>새 배너</button></div>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14 }}>
      {[
        { t:'2% 수수료 안내', s:'사장님께 드리는 수수료 안내', c:'#FFE3D0', live:true },
        { t:'5월 신규 매장 모집', s:'서울/경기 지역 매장 모집중', c:'#FFF7CC', live:true },
        { t:'리뷰 작성 이벤트', s:'리뷰 작성하고 1,000원 쿠폰', c:'#FDE9F3', live:false },
        { t:'어린이날 픽업 이벤트', s:'5/5 - 5/8 한정', c:'#E8F0FC', live:false },
      ].map(b => (
        <div key={b.t} className="card" style={{ padding:0, overflow:'hidden' }}>
          <div style={{ height:140, background:`linear-gradient(135deg, ${b.c}, white)`, padding:20, display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
            <div style={{ fontSize:18, fontWeight:700 }}>{b.t}</div>
            <div style={{ fontSize:13, color:'var(--text-2)', marginTop:4 }}>{b.s}</div>
          </div>
          <div style={{ padding:14, display:'flex', alignItems:'center', gap:10 }}>
            {b.live ? <Badge tone="success" dot="success">노출중</Badge> : <Badge tone="neutral">예약</Badge>}
            <span style={{ fontSize:12, color:'var(--text-3)' }}>2026.05.01 - 05.31</span>
            <button className="btn btn-sm btn-ghost" style={{ marginLeft:'auto' }}>편집</button>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ServicePolicies = () => {
  const [tab, setTab] = React.useState('terms');
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>서비스 관리 · 약관 / FAQ</h1>
          <div className="sub">서비스 약관과 자주 묻는 질문을 관리합니다</div>
        </div>
        <div className="actions"><button className="btn btn-primary"><Icon name="plus" size={14}/>{tab==='terms'?'약관 추가':'FAQ 추가'}</button></div>
      </div>
      <div className="table-wrap">
        <Tabs items={[
          { value:'terms', label:'약관', count:5 },
          { value:'faq', label:'FAQ', count:24 },
        ]} value={tab} onChange={setTab}/>
        {tab === 'terms' ? (
          <table className="table">
            <thead><tr><th>약관명</th><th>버전</th><th>적용일</th><th>상태</th><th></th></tr></thead>
            <tbody>
              {[
                { n:'서비스 이용약관', v:'v3.2', d:'2026-04-01', s:'active' },
                { n:'개인정보 처리방침', v:'v2.8', d:'2026-04-01', s:'active' },
                { n:'위치정보 이용약관', v:'v1.4', d:'2026-04-01', s:'active' },
                { n:'사장님 입점 계약서', v:'v2.0', d:'2026-03-15', s:'active' },
                { n:'전자금융거래 약관', v:'v1.2', d:'2026-04-15', s:'review' },
              ].map(t => (
                <tr key={t.n}>
                  <td style={{ fontWeight:600 }}>{t.n}</td>
                  <td className="t-mono">{t.v}</td>
                  <td style={{ color:'var(--text-3)' }}>{t.d}</td>
                  <td>{t.s==='active' ? <Badge tone="success">시행중</Badge> : <Badge tone="warn">검토중</Badge>}</td>
                  <td><div className="row-actions"><button className="btn btn-sm btn-ghost">편집</button></div></td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div style={{ padding:8 }}>
            {[
              { c:'주문/픽업', q:'픽업 시간을 변경할 수 있나요?', n:412 },
              { c:'주문/픽업', q:'주문 후 매장에서 음식이 준비될 때까지 얼마나 걸리나요?', n:289 },
              { c:'결제/환불', q:'결제 취소는 어떻게 하나요?', n:201 },
              { c:'결제/환불', q:'쿠폰은 어떻게 사용하나요?', n:178 },
              { c:'계정', q:'회원 탈퇴는 어떻게 하나요?', n:121 },
              { c:'계정', q:'본인인증이 안 됩니다.', n:88 },
            ].map((f,i) => (
              <div key={i} style={{ padding:'14px 16px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:14 }}>
                <Badge tone="neutral">{f.c}</Badge>
                <div style={{ flex:1, fontWeight:500 }}>{f.q}</div>
                <span style={{ fontSize:12, color:'var(--text-3)' }}>조회 {fmtNum(f.n)}</span>
                <button className="btn btn-sm btn-ghost">편집</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Members, Reviews, Admins, ServiceCategories, ServiceBanners, ServicePolicies });