// Businesses, Stores, Approvals pages

const Businesses = () => {
  const [tab, setTab] = React.useState('all');
  const rows = [
    { id:'BIZ-1042', name:'(주)할매에프앤비', ceo:'김할매', regNo:'123-45-67890', stores:3, contact:'02-555-1042', status:'active', joined:'2025-04-10' },
    { id:'BIZ-1077', name:'바삭푸드', ceo:'이바삭', regNo:'234-56-78901', stores:2, contact:'02-555-1077', status:'active', joined:'2025-05-01' },
    { id:'BIZ-1108', name:'일분에프앤비', ceo:'정도시락', regNo:'345-67-89012', stores:1, contact:'02-555-1108', status:'paused', joined:'2025-06-20' },
    { id:'BIZ-1133', name:'커피림보', ceo:'박림보', regNo:'456-78-90123', stores:5, contact:'02-555-1133', status:'active', joined:'2025-03-07' },
    { id:'BIZ-1156', name:'빵지베이커리', ceo:'최빵지', regNo:'567-89-01234', stores:1, contact:'02-555-1156', status:'active', joined:'2025-07-29' },
    { id:'BIZ-1189', name:'(주)한그릇에프앤비', ceo:'서한그릇', regNo:'678-90-12345', stores:4, contact:'031-555-1189', status:'active', joined:'2025-08-13' },
    { id:'BIZ-1255', name:'(주)고기랩', ceo:'노고기', regNo:'789-01-23456', stores:2, contact:'02-555-1255', status:'review', joined:'2025-11-01' },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>사업자 관리</h1>
          <div className="sub">사업자 등록 정보 및 운영중인 매장을 관리합니다 · 총 {rows.length}개사</div>
        </div>
        <div className="actions">
          <button className="btn btn-ghost"><Icon name="download" size={14}/>내보내기</button>
          <button className="btn btn-primary"><Icon name="plus" size={14}/>사업자 등록</button>
        </div>
      </div>

      <div className="table-wrap">
        <Tabs items={[
          { value:'all', label:'전체', count: rows.length },
          { value:'active', label:'운영중', count: rows.filter(r=>r.status==='active').length },
          { value:'paused', label:'일시정지', count: rows.filter(r=>r.status==='paused').length },
          { value:'review', label:'검토중', count: rows.filter(r=>r.status==='review').length },
        ]} value={tab} onChange={setTab}/>
        <div className="table-toolbar">
          <input className="input" placeholder="사업자명, 대표자, 사업자등록번호" style={{ flex:1, maxWidth:340 }}/>
          <select className="select"><option>전체 지역</option><option>서울</option><option>경기</option></select>
          <select className="select"><option>등록일 ↓</option><option>매장수 ↓</option></select>
          <button className="btn btn-ghost btn-sm"><Icon name="filter" size={14}/>필터</button>
        </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>가입일</th><th>상태</th><th></th>
          </tr></thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.id}>
                <td className="checkbox-cell"><span className="checkbox"></span></td>
                <td className="t-mono">{r.id}</td>
                <td><div style={{ fontWeight:600 }}>{r.name}</div><div style={{ fontSize:12, color:'var(--text-3)' }}>대표 {r.ceo}</div></td>
                <td className="t-mono">{r.regNo}</td>
                <td><Badge tone="brand">{r.stores}개</Badge></td>
                <td>{r.contact}</td>
                <td style={{ color:'var(--text-3)' }}>{r.joined}</td>
                <td>
                  {r.status==='active' && <Badge tone="success" dot="success">운영중</Badge>}
                  {r.status==='paused' && <Badge tone="warn" dot="warn">일시정지</Badge>}
                  {r.status==='review' && <Badge tone="info">검토중</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)' }}>총 {rows.length}건</span>
          <Pager total={1} current={1}/>
        </div>
      </div>
    </div>
  );
};

const Stores = () => {
  const [selected, setSelected] = React.useState(null);
  const [view, setView] = React.useState('list');
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>매장 관리</h1>
          <div className="sub">노출중인 매장과 운영 상태를 관리합니다 · 총 {STORES.length}개</div>
        </div>
        <div className="actions">
          <Seg items={[{value:'list',label:'목록'},{value:'grid',label:'카드'}]} value={view} onChange={setView}/>
          <button className="btn btn-ghost"><Icon name="download" size={14}/>내보내기</button>
          <button className="btn btn-primary"><Icon name="plus" size={14}/>매장 추가</button>
        </div>
      </div>

      <div className="stat-grid" style={{ gridTemplateColumns:'repeat(4,1fr)' }}>
        <MiniStat label="영업중" value={`${STORES.filter(s=>s.status==='open').length}개`} tone="success"/>
        <MiniStat label="일시정지" value={`${STORES.filter(s=>s.status==='paused').length}개`} tone="warn"/>
        <MiniStat label="마감" value={`${STORES.filter(s=>s.status==='closed').length}개`} tone="info"/>
        <MiniStat label="평균 평점" value="4.6 ★" tone="success"/>
      </div>

      <div className="table-wrap" style={{ marginTop: 14 }}>
        <div className="table-toolbar">
          <input className="input" placeholder="매장명, 사업자, 지역" style={{ flex:1, maxWidth:340 }}/>
          <select className="select"><option>전체 카테고리</option>{CATEGORIES.map(c=><option key={c}>{c}</option>)}</select>
          <select className="select"><option>전체 지역</option><option>서울</option><option>경기</option></select>
          <select className="select"><option>전체 상태</option><option>영업중</option><option>일시정지</option><option>마감</option></select>
          <button className="btn btn-ghost btn-sm"><Icon name="filter" size={14}/>필터</button>
        </div>
        {view === 'list' ? (
          <table className="table">
            <thead><tr>
              <th className="checkbox-cell"><span className="checkbox"></span></th>
              <th>매장ID</th><th>매장명</th><th>카테고리</th><th>지역</th><th style={{textAlign:'right'}}>30일 주문</th><th style={{textAlign:'right'}}>30일 매출</th><th>평점</th><th>상태</th><th>최근 주문</th><th></th>
            </tr></thead>
            <tbody>
              {STORES.map(s => {
                const st = STORE_STATUS[s.status];
                return (
                  <tr key={s.id} onClick={()=>setSelected(s)} style={{ cursor:'pointer' }}>
                    <td className="checkbox-cell" onClick={e=>e.stopPropagation()}><span className="checkbox"></span></td>
                    <td className="t-mono">{s.id}</td>
                    <td>
                      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                        <div className="thumb">{s.cat[0]}</div>
                        <div>
                          <div style={{ fontWeight:600 }}>{s.name}</div>
                          <div style={{ fontSize:12, color:'var(--text-3)' }}>{s.biz}</div>
                        </div>
                      </div>
                    </td>
                    <td><Badge tone="neutral">{s.cat}</Badge></td>
                    <td style={{ color:'var(--text-2)' }}>{s.region}</td>
                    <td style={{ textAlign:'right', fontWeight:600 }}>{fmtNum(s.orders30)}건</td>
                    <td style={{ textAlign:'right', fontWeight:600 }}>{fmtKRW(s.sales30)}</td>
                    <td>★ {s.rating} <span style={{ color:'var(--text-3)', fontSize:12 }}>({s.reviews})</span></td>
                    <td><Badge tone={st.tone} dot={st.dot}>{st.label}</Badge></td>
                    <td style={{ color:'var(--text-3)', fontSize:12.5 }}>{s.lastOrder}</td>
                    <td onClick={e=>e.stopPropagation()}><button className="btn-icon"><Icon name="moreV" size={16}/></button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        ) : (
          <div style={{ padding: 16, display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:14 }}>
            {STORES.map(s => {
              const st = STORE_STATUS[s.status];
              return (
                <div key={s.id} className="card" style={{ padding:0, overflow:'hidden', cursor:'pointer' }} onClick={()=>setSelected(s)}>
                  <div style={{ height: 120, background:'linear-gradient(135deg, #FFF1E6, #FFE3D0)', display:'grid', placeItems:'center', color:'var(--brand)', fontSize:32, fontWeight:800 }}>{s.cat[0]}</div>
                  <div style={{ padding:14 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <div style={{ fontWeight:700, flex:1 }}>{s.name}</div>
                      <Badge tone={st.tone} dot={st.dot}>{st.label}</Badge>
                    </div>
                    <div style={{ fontSize:12, color:'var(--text-3)', marginTop:4 }}>{s.cat} · {s.region}</div>
                    <div style={{ display:'flex', gap:10, marginTop:12, paddingTop:12, borderTop:'1px dashed var(--border)' }}>
                      <div style={{ flex:1 }}>
                        <div style={{ fontSize:11, color:'var(--text-3)' }}>30일 매출</div>
                        <div style={{ fontWeight:700, fontSize:14 }}>{fmtKRW(s.sales30)}</div>
                      </div>
                      <div>
                        <div style={{ fontSize:11, color:'var(--text-3)' }}>평점</div>
                        <div style={{ fontWeight:700, fontSize:14 }}>★ {s.rating}</div>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        <div className="table-foot">
          <span style={{ fontSize:13, color:'var(--text-3)' }}>총 {STORES.length}건</span>
          <Pager total={3} current={1}/>
        </div>
      </div>

      <Drawer open={!!selected} onClose={()=>setSelected(null)} title={selected?.name || ''}
        footer={<>
          <button className="btn btn-ghost">메뉴 보기</button>
          <button className="btn btn-danger-ghost">일시정지</button>
          <button className="btn btn-primary">매장 수정</button>
        </>}
      >
        {selected && <StoreDetail store={selected}/>}
      </Drawer>
    </div>
  );
};

const StoreDetail = ({ store }) => {
  const st = STORE_STATUS[store.status];
  return (
    <div>
      <div style={{ height: 140, background:'linear-gradient(135deg, #FFF1E6, #FFE3D0)', borderRadius:12, display:'grid', placeItems:'center', color:'var(--brand)', fontSize:42, fontWeight:800, marginBottom: 14 }}>{store.cat[0]}</div>
      <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 16 }}>
        <Badge tone={st.tone} dot={st.dot}>{st.label}</Badge>
        <Badge tone="neutral">{store.cat}</Badge>
        <span style={{ marginLeft:'auto', fontSize:13, color:'var(--text-3)' }}>★ {store.rating} · 리뷰 {store.reviews}</span>
      </div>
      <h4 style={{ margin:'16px 0 10px', fontSize:13, color:'var(--text-3)', fontWeight:600 }}>매장 정보</h4>
      <dl className="spec">
        <dt>매장ID</dt><dd className="t-mono">{store.id}</dd>
        <dt>사업자</dt><dd>{store.biz}</dd>
        <dt>주소</dt><dd>{store.region} 강남대로 123</dd>
        <dt>전화</dt><dd>{store.phone}</dd>
        <dt>운영시간</dt><dd>10:00 - 22:00 (라스트오더 21:30)</dd>
        <dt>가입일</dt><dd>{store.joined}</dd>
        <dt>최근 주문</dt><dd>{store.lastOrder}</dd>
      </dl>
      <h4 style={{ margin:'24px 0 10px', fontSize:13, color:'var(--text-3)', fontWeight:600 }}>최근 30일 성과</h4>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10 }}>
        <div className="card" style={{ padding:14 }}>
          <div style={{ fontSize:12, color:'var(--text-3)' }}>매출</div>
          <div style={{ fontSize:18, fontWeight:700, marginTop:2 }}>{fmtKRW(store.sales30)}</div>
        </div>
        <div className="card" style={{ padding:14 }}>
          <div style={{ fontSize:12, color:'var(--text-3)' }}>주문</div>
          <div style={{ fontSize:18, fontWeight:700, marginTop:2 }}>{store.orders30}건</div>
        </div>
        <div className="card" style={{ padding:14 }}>
          <div style={{ fontSize:12, color:'var(--text-3)' }}>객단가</div>
          <div style={{ fontSize:18, fontWeight:700, marginTop:2 }}>{fmtKRW(Math.round(store.sales30/Math.max(store.orders30,1)))}</div>
        </div>
      </div>
    </div>
  );
};

const Approvals = () => {
  const [tab, setTab] = React.useState('biz');
  const [selected, setSelected] = React.useState(null);
  const filterMap = { biz:'BA', store:'ST', menu:'MN', bank:'BK' };
  const filtered = APPROVALS.filter(a => a.id.startsWith(filterMap[tab]));
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>승인 관리</h1>
          <div className="sub">사업자, 매장, 메뉴, 정산계좌 승인 요청을 처리합니다</div>
        </div>
        <div className="actions">
          <button className="btn btn-soft"><Icon name="flask" size={14}/>더미데이터</button>
        </div>
      </div>

      <div className="stat-grid" style={{ gridTemplateColumns:'repeat(4,1fr)' }}>
        <MiniStat label="대기" value={`${APPROVALS.filter(a=>a.status==='pending').length}건`} tone="warn"/>
        <MiniStat label="검토중" value={`${APPROVALS.filter(a=>a.status==='review').length}건`} tone="info"/>
        <MiniStat label="오늘 처리" value="12건" tone="success"/>
        <MiniStat label="평균 처리시간" value="4시간 22분" tone="info"/>
      </div>

      <div className="table-wrap" style={{ marginTop:14 }}>
        <Tabs items={[
          { value:'biz', label:'사업자', count: APPROVALS.filter(a=>a.id.startsWith('BA')).length },
          { value:'store', label:'매장', count: APPROVALS.filter(a=>a.id.startsWith('ST')).length },
          { value:'menu', label:'메뉴', count: APPROVALS.filter(a=>a.id.startsWith('MN')).length },
          { value:'bank', label:'정산계좌', count: APPROVALS.filter(a=>a.id.startsWith('BK')).length },
        ]} value={tab} onChange={setTab}/>
        <div className="table-toolbar">
          <select className="select" style={{ minWidth: 130 }}><option>전체 상태</option><option>대기</option><option>검토중</option><option>승인</option><option>반려</option></select>
          <input className="input" placeholder="요청ID, 신청자" style={{ flex:1, maxWidth:280 }}/>
          <button className="btn btn-ghost btn-sm"><Icon name="calendar" size={14}/>2026.05.01 - 05.10</button>
        </div>
        <table className="table">
          <thead><tr>
            <th>요청 ID</th><th>요청 유형</th><th>대상</th><th>요청자</th><th>요청일</th><th>상태</th><th></th>
          </tr></thead>
          <tbody>
            {filtered.map(a => {
              const s = APPROVAL_STATUS[a.status];
              return (
                <tr key={a.id}>
                  <td className="t-mono">{a.id}</td>
                  <td>{a.kind}</td>
                  <td style={{ color:'var(--text-2)' }}>{a.subject}</td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <Avatar name={a.applicant[0]} tone={a.role==='관리자'?'blue':'brand'} size={26}/>
                      <div>
                        <div style={{ fontWeight:600, fontSize:13 }}>{a.applicant}</div>
                        <Badge tone={a.role==='관리자'?'info':'brand'}>{a.role}</Badge>
                      </div>
                    </div>
                  </td>
                  <td style={{ color:'var(--text-3)' }}>{a.date}</td>
                  <td><Badge tone={s.tone}>{s.label}</Badge></td>
                  <td>
                    <div className="row-actions">
                      {a.status === 'pending' || a.status === 'review' ? (
                        <>
                          <button className="btn btn-sm btn-ghost" onClick={()=>setSelected(a)}>상세</button>
                          <button className="btn btn-sm btn-primary">승인</button>
                          <button className="btn btn-sm btn-danger-ghost">반려</button>
                        </>
                      ) : (
                        <button className="btn btn-sm btn-ghost" onClick={()=>setSelected(a)}>상세</button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="table-foot">
          <span style={{ fontSize:13, color:'var(--text-3)' }}>총 {filtered.length}건</span>
          <Pager total={1} current={1}/>
        </div>
      </div>

      <Drawer open={!!selected} onClose={()=>setSelected(null)} title={`승인 요청 ${selected?.id || ''}`}
        footer={selected && (selected.status==='pending'||selected.status==='review') ? <>
          <button className="btn btn-danger-ghost">반려</button>
          <button className="btn btn-ghost">검토 보류</button>
          <button className="btn btn-primary">승인 처리</button>
        </> : <button className="btn btn-ghost" onClick={()=>setSelected(null)}>닫기</button>}
      >
        {selected && <ApprovalDetail item={selected}/>}
      </Drawer>
    </div>
  );
};

const ApprovalDetail = ({ item }) => {
  const s = APPROVAL_STATUS[item.status];
  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
        <Badge tone={s.tone}>{s.label}</Badge>
        <span style={{ fontSize:13, color:'var(--text-3)' }}>요청 {item.date}</span>
      </div>
      <h4 style={{ margin:'0 0 12px', fontSize:16 }}>{item.kind}</h4>
      <dl className="spec">
        <dt>대상</dt><dd>{item.subject}</dd>
        <dt>신청자</dt><dd>{item.applicant} <Badge tone={item.role==='관리자'?'info':'brand'}>{item.role}</Badge></dd>
        <dt>요청 ID</dt><dd className="t-mono">{item.id}</dd>
        <dt>요청 채널</dt><dd>사장님 앱</dd>
      </dl>
      <h4 style={{ margin:'24px 0 10px', fontSize:13, color:'var(--text-3)', fontWeight:600 }}>제출 서류</h4>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {['사업자등록증.pdf','대표자 신분증.jpg','통장 사본.jpg'].map(f => (
          <div key={f} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', border:'1px solid var(--border)', borderRadius:8 }}>
            <div style={{ width:32, height:32, borderRadius:6, background:'var(--bg)', display:'grid', placeItems:'center', color:'var(--text-2)' }}><Icon name="image" size={16}/></div>
            <div style={{ flex:1, fontSize:13.5 }}>{f}</div>
            <button className="btn btn-sm btn-ghost"><Icon name="eye" size={12}/>보기</button>
          </div>
        ))}
      </div>
      <h4 style={{ margin:'24px 0 10px', fontSize:13, color:'var(--text-3)', fontWeight:600 }}>처리 메모</h4>
      <textarea className="input" style={{ width:'100%', height: 90, padding:10, resize:'vertical' }} placeholder="승인/반려 사유를 입력하세요"/>
    </div>
  );
};

Object.assign(window, { Businesses, Stores, Approvals });