// Search results — 매장 / 주문 / 회원 통합 검색

const SEARCH_SCOPES = [
  { value: 'all',     label: '전체' },
  { value: 'stores',  label: '매장' },
  { value: 'orders',  label: '주문' },
  { value: 'members', label: '회원' },
];

// ---------- match helpers ----------
const matchStore = (s, q) => {
  const hay = `${s.id} ${s.name} ${s.biz} ${s.cat} ${s.region} ${s.phone}`.toLowerCase();
  return hay.includes(q);
};
const matchOrder = (o, q) => {
  const hay = `${o.id} ${o.store} ${o.user} ${o.items}`.toLowerCase();
  return hay.includes(q);
};
const matchMember = (m, q) => {
  const hay = `${m.id} ${m.name} ${m.email} ${m.phone}`.toLowerCase();
  return hay.includes(q);
};

// Highlight matched substring in text
const Highlight = ({ text = '', q }) => {
  const s = String(text);
  if (!q) return <>{s}</>;
  const lower = s.toLowerCase();
  const ql = q.toLowerCase();
  const out = [];
  let i = 0;
  while (i < s.length) {
    const idx = lower.indexOf(ql, i);
    if (idx === -1) { out.push(s.slice(i)); break; }
    if (idx > i) out.push(s.slice(i, idx));
    out.push(<mark key={idx} className="hl">{s.slice(idx, idx + q.length)}</mark>);
    i = idx + q.length;
  }
  return <>{out.map((x, idx) => <React.Fragment key={idx}>{x}</React.Fragment>)}</>;
};

// ---------- result row components ----------
const StoreResultRow = ({ s, q }) => {
  const st = window.STORE_STATUS[s.status];
  return (
    <button className="search-row" type="button">
      <div className="search-row-icon ico-store">
        <Icon name="store" size={18}/>
      </div>
      <div className="search-row-main">
        <div className="search-row-title">
          <Highlight text={s.name} q={q}/>
          <span className="search-row-id"><Highlight text={s.id} q={q}/></span>
        </div>
        <div className="search-row-meta">
          <Highlight text={s.biz} q={q}/>
          <span className="sep">·</span>
          <Highlight text={s.cat} q={q}/>
          <span className="sep">·</span>
          <Highlight text={s.region} q={q}/>
          <span className="sep">·</span>
          <Highlight text={s.phone} q={q}/>
        </div>
      </div>
      <div className="search-row-side">
        <Badge tone={st.tone} dot={st.dot}>{st.label}</Badge>
        <div className="search-row-num">{window.fmtNum(s.orders30)}건 · ★{s.rating}</div>
      </div>
    </button>
  );
};

const OrderResultRow = ({ o, q }) => {
  const st = window.ORDER_STATUS[o.status];
  return (
    <button className="search-row" type="button">
      <div className="search-row-icon ico-order">
        <Icon name="cart" size={18}/>
      </div>
      <div className="search-row-main">
        <div className="search-row-title">
          <Highlight text={o.id} q={q}/>
          <span className="search-row-tag">{o.mode}</span>
        </div>
        <div className="search-row-meta">
          <Highlight text={o.store} q={q}/>
          <span className="sep">·</span>
          <Highlight text={o.user} q={q}/>
          <span className="sep">·</span>
          {o.items}
          <span className="sep">·</span>
          {o.pay}
        </div>
      </div>
      <div className="search-row-side">
        <Badge tone={st.tone}>{st.label}</Badge>
        <div className="search-row-num t-num">{window.fmtKRW(o.total)}</div>
      </div>
    </button>
  );
};

const MemberResultRow = ({ m, q }) => {
  const st = window.MEMBER_STATUS[m.status];
  const channelLabel = { kakao:'카카오', apple:'Apple', email:'이메일' }[m.channel] || m.channel;
  return (
    <button className="search-row" type="button">
      <div className="search-row-icon ico-member">
        <Icon name="user" size={18}/>
      </div>
      <div className="search-row-main">
        <div className="search-row-title">
          <Highlight text={m.name} q={q}/>
          <span className="search-row-id"><Highlight text={m.id} q={q}/></span>
        </div>
        <div className="search-row-meta">
          <Highlight text={m.email} q={q}/>
          <span className="sep">·</span>
          <Highlight text={m.phone} q={q}/>
          <span className="sep">·</span>
          {channelLabel}
          <span className="sep">·</span>
          {m.signup} 가입
        </div>
      </div>
      <div className="search-row-side">
        <Badge tone={st.tone}>{st.label}</Badge>
        <div className="search-row-num">{m.orders}건 · {window.fmtKRW(m.spent)}</div>
      </div>
    </button>
  );
};

// ---------- group section ----------
const ResultGroup = ({ title, count, total, onMore, children }) => (
  <section className="search-group">
    <header className="search-group-h">
      <div className="search-group-title">
        {title}
        <span className="badge-counter badge-counter-muted">{count}</span>
      </div>
      {total > count && onMore && (
        <button className="search-group-more" onClick={onMore}>
          {total - count}건 더 보기 <Icon name="chevRight" size={14}/>
        </button>
      )}
    </header>
    <div className="search-group-body">{children}</div>
  </section>
);

// ---------- main page ----------
const SearchResults = ({ query = '', setQuery, setScope, scope = 'all' }) => {
  const q = (query || '').trim().toLowerCase();

  const storeHits  = q ? window.STORES.filter(s => matchStore(s, q)) : [];
  const orderHits  = q ? window.ORDERS.filter(o => matchOrder(o, q)) : [];
  const memberHits = q ? window.MEMBERS.filter(m => matchMember(m, q)) : [];
  const total = storeHits.length + orderHits.length + memberHits.length;

  const tabs = [
    { value: 'all',     label: '전체',  count: total },
    { value: 'stores',  label: '매장',  count: storeHits.length },
    { value: 'orders',  label: '주문',  count: orderHits.length },
    { value: 'members', label: '회원',  count: memberHits.length },
  ];

  // 빈 검색어
  if (!q) {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <h1>검색</h1>
            <div className="sub">상단 검색창에 매장명·주문번호·회원 정보를 입력해 주세요.</div>
          </div>
        </div>
        <div className="card" style={{ padding: 0 }}>
          <div className="search-empty">
            <div className="search-empty-icon"><Icon name="search" size={28}/></div>
            <div className="search-empty-title">무엇을 찾고 계신가요?</div>
            <div className="search-empty-desc">매장명·매장ID(ST-), 주문번호(YP-), 회원명·전화·이메일·회원ID(U-)로 검색할 수 있어요.</div>
            <div className="search-empty-chips">
              <button className="search-chip" onClick={() => setQuery && setQuery('할매김밥')}>할매김밥</button>
              <button className="search-chip" onClick={() => setQuery && setQuery('YP-260510')}>YP-260510</button>
              <button className="search-chip" onClick={() => setQuery && setQuery('010-')}>010-</button>
              <button className="search-chip" onClick={() => setQuery && setQuery('강남')}>강남</button>
              <button className="search-chip" onClick={() => setQuery && setQuery('cony')}>cony</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 결과 없음
  if (total === 0) {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <h1>"<span style={{ color: 'var(--color-fg-strong)' }}>{query}</span>" 검색 결과</h1>
            <div className="sub">매장 · 주문 · 회원 통합 검색</div>
          </div>
        </div>
        <div className="card" style={{ padding: 0 }}>
          <Tabs items={tabs} value={scope} onChange={setScope}/>
          <div className="search-empty">
            <div className="search-empty-icon"><Icon name="info" size={28}/></div>
            <div className="search-empty-title">검색 결과가 없습니다</div>
            <div className="search-empty-desc">검색어를 다시 확인하거나, 일부만 입력해 다시 시도해 주세요.</div>
          </div>
        </div>
      </div>
    );
  }

  const showAll     = scope === 'all';
  const showStores  = showAll || scope === 'stores';
  const showOrders  = showAll || scope === 'orders';
  const showMembers = showAll || scope === 'members';

  // '전체' 탭에서는 카테고리별 상위 3건만 미리보기
  const storeShow  = showAll ? storeHits.slice(0, 3)  : storeHits;
  const orderShow  = showAll ? orderHits.slice(0, 3)  : orderHits;
  const memberShow = showAll ? memberHits.slice(0, 3) : memberHits;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>"<span className="search-q-hl">{query}</span>" 검색 결과 <span className="search-h-count">{window.fmtNum(total)}건</span></h1>
          <div className="sub">매장 · 주문 · 회원 통합 검색</div>
        </div>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <Tabs items={tabs} value={scope} onChange={setScope}/>

        <div className="search-results">
          {showStores && storeHits.length > 0 && (
            <ResultGroup
              title="매장"
              count={storeShow.length}
              total={storeHits.length}
              onMore={showAll ? () => setScope('stores') : null}>
              {storeShow.map(s => <StoreResultRow key={s.id} s={s} q={q}/>)}
            </ResultGroup>
          )}

          {showOrders && orderHits.length > 0 && (
            <ResultGroup
              title="주문"
              count={orderShow.length}
              total={orderHits.length}
              onMore={showAll ? () => setScope('orders') : null}>
              {orderShow.map(o => <OrderResultRow key={o.id} o={o} q={q}/>)}
            </ResultGroup>
          )}

          {showMembers && memberHits.length > 0 && (
            <ResultGroup
              title="회원"
              count={memberShow.length}
              total={memberHits.length}
              onMore={showAll ? () => setScope('members') : null}>
              {memberShow.map(m => <MemberResultRow key={m.id} m={m} q={q}/>)}
            </ResultGroup>
          )}
        </div>
      </div>
    </div>
  );
};

// ---------- topbar typeahead dropdown ----------
const SearchTypeahead = ({ query, onSelectResult, onSeeAll, onClose }) => {
  const q = (query || '').trim().toLowerCase();
  if (!q) return null;

  const storeHits  = window.STORES.filter(s => matchStore(s, q)).slice(0, 3);
  const orderHits  = window.ORDERS.filter(o => matchOrder(o, q)).slice(0, 3);
  const memberHits = window.MEMBERS.filter(m => matchMember(m, q)).slice(0, 3);
  const total = storeHits.length + orderHits.length + memberHits.length;

  return (
    <div className="search-typeahead" onMouseDown={(e) => e.preventDefault()}>
      {total === 0 ? (
        <div className="search-typeahead-empty">
          <Icon name="search" size={16}/>
          <span>"{query}" 와(과) 일치하는 결과가 없습니다</span>
        </div>
      ) : (
        <>
          {storeHits.length > 0 && (
            <div className="search-typeahead-group">
              <div className="search-typeahead-label">매장</div>
              {storeHits.map(s => (
                <button key={s.id} className="search-typeahead-item" onClick={() => onSelectResult('stores')}>
                  <Icon name="store" size={14}/>
                  <span className="ta-title"><Highlight text={s.name} q={q}/></span>
                  <span className="ta-meta"><Highlight text={s.id} q={q}/> · <Highlight text={s.region} q={q}/></span>
                </button>
              ))}
            </div>
          )}
          {orderHits.length > 0 && (
            <div className="search-typeahead-group">
              <div className="search-typeahead-label">주문</div>
              {orderHits.map(o => (
                <button key={o.id} className="search-typeahead-item" onClick={() => onSelectResult('orders')}>
                  <Icon name="cart" size={14}/>
                  <span className="ta-title"><Highlight text={o.id} q={q}/></span>
                  <span className="ta-meta"><Highlight text={o.store} q={q}/> · {window.fmtKRW(o.total)}</span>
                </button>
              ))}
            </div>
          )}
          {memberHits.length > 0 && (
            <div className="search-typeahead-group">
              <div className="search-typeahead-label">회원</div>
              {memberHits.map(m => (
                <button key={m.id} className="search-typeahead-item" onClick={() => onSelectResult('members')}>
                  <Icon name="user" size={14}/>
                  <span className="ta-title"><Highlight text={m.name} q={q}/></span>
                  <span className="ta-meta"><Highlight text={m.id} q={q}/> · <Highlight text={m.email} q={q}/></span>
                </button>
              ))}
            </div>
          )}
        </>
      )}
      <div className="search-typeahead-foot">
        <button className="search-typeahead-all" onClick={onSeeAll}>
          <Icon name="search" size={14}/>
          <span>"<b>{query}</b>" 전체 결과 보기</span>
          <span className="ta-kbd">Enter ↵</span>
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { SearchResults, SearchTypeahead });