// 知乎 — search entry page. Layout based on user design spec, fictional content.

const SEARCH_BLUE = '#1772F6';
const SEARCH_PURPLE = '#8B5CF6';
const SEARCH_BG = '#0E0F12';
const SEARCH_CARD = '#16181D';
const SEARCH_FIELD = '#1A1C21';
const SEARCH_TEXT = '#EDEEF0';
const SEARCH_MUTED = '#7A8089';
const SEARCH_DIM = '#5A5F66';
const SEARCH_DIVIDER = '#1B1D22';

const HISTORY_CHIPS = ['特朗普5月13日至15日访华', '世乒赛男团决赛', '中国男团', '陆战日本'];

const GUESS_ITEMS = [
  { text: '陆战，男团决战日本队', tag: '热' },
  { text: '汪苏泷新歌《想念被吹散》', tag: '广告' },
  { text: '8名中国人赴泰国私拍短剧', tag: '热' },
  { text: '极地邮轮爆发汉坦病毒疫情', tag: '热' },
  { text: '王俊凯回应电影宣发争议', tag: '新' },
  { text: '苹果发布会爆料汇总', tag: '广告' },
];

const HOT_LIST = [
  { rank: 1, title: '中国 GDP 一季度增速公布', meta: '4382 万热度', tag: '沸' },
  { rank: 2, title: '李雪琴回应口红颜色风波', meta: '3917 万热度', tag: '热' },
  { rank: 3, title: '泰国曼谷一日游被骗 12 万', meta: '3641 万热度', tag: '新' },
  { rank: 4, title: '高校毕业生就业新政发布', meta: '3211 万热度', tag: null },
  { rank: 5, title: '中国队晋级世乒赛男团决赛', meta: '2987 万热度', tag: '热' },
  { rank: 6, title: '北京五月下旬天气预报', meta: '2854 万热度', tag: null },
  { rank: 7, title: '电动车新国标即将实施', meta: '2510 万热度', tag: null },
];

function PurpleStar({ size = 11 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
      <path
        d="M12 2l2.5 6.8L21.6 9.5l-5.3 4.8L17.8 22 12 18.3 6.2 22l1.5-7.7L2.4 9.5l7.1-.7z"
        fill={SEARCH_PURPLE}
      />
    </svg>
  );
}

function SearchPage({ onBack, initialQuery }) {
  const [query, setQuery] = React.useState(initialQuery || '特朗普5月13日至15日访华');
  const inputRef = React.useRef(null);
  React.useEffect(() => { inputRef.current?.focus(); }, []);

  return (
    <div style={{
      position: 'absolute', inset: 0, background: SEARCH_BG,
      color: SEARCH_TEXT, display: 'flex', flexDirection: 'column',
      fontFamily: '"PingFang SC", "Noto Sans SC", -apple-system, system-ui',
    }}>
      <div style={{ height: 38, flexShrink: 0 }}/>

      {/* Outer line frame — wraps back arrow + input + AI/search row */}
      <div style={{
        margin: '2px 10px 8px', flexShrink: 0,
        border: '1px solid #2D3138',
        borderRadius: 3, padding: '4px 6px 5px',
      }}>
        {/* Row 1: back + input */}
        <div style={{ display: 'flex', alignItems: 'center', height: 18, gap: 6 }}>
          <div onClick={onBack} style={{
            fontSize: 16, color: SEARCH_TEXT, cursor: 'pointer',
            width: 12, display: 'flex',
            alignItems: 'center', justifyContent: 'center',
            lineHeight: 1, flexShrink: 0,
          }}>‹</div>
          <input
            ref={inputRef}
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder=""
            style={{
              background: 'transparent', border: 'none', outline: 'none',
              color: SEARCH_DIM, fontSize: 10, flex: 1, padding: 0,
              fontFamily: 'inherit', minWidth: 0,
              caretColor: SEARCH_BLUE,
            }}
          />
          {query && (
            <span onClick={() => setQuery('')} style={{
              cursor: 'pointer',
              width: 11, height: 11, borderRadius: 6,
              background: '#3A3E45', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 7, marginLeft: 4, flexShrink: 0,
              lineHeight: 1,
            }}>✕</span>
          )}
        </div>

        {/* Row 2: AI 搜索 (aligned with back arrow column) | 搜索 button */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginTop: 4, // AI box aligns flush-left with back arrow column
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 3,
            padding: '2px 6px 2px 4px', borderRadius: 9,
            background: '#2A2E35', color: '#fff', fontSize: 9,
            cursor: 'pointer',
          }}>
            <PurpleStar size={10}/>
            <span>AI 搜索</span>
          </div>
          <div style={{
            padding: '2px 12px', borderRadius: 10,
            background: SEARCH_BLUE, color: '#fff',
            fontSize: 10, fontWeight: 500, cursor: 'pointer',
            lineHeight: 1.3,
          }}>搜索</div>
        </div>
      </div>

      {/* Scroll body */}
      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '4px 12px 70px' }}>
        <SearchSection title="历史搜索" right={
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={SEARCH_MUTED} strokeWidth="2">
            <path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/>
          </svg>
        }>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            {HISTORY_CHIPS.map((c, i) => (
              <div key={i} onClick={() => setQuery(c)} style={{
                padding: '3px 8px', borderRadius: 10,
                background: SEARCH_CARD, fontSize: 9,
                color: SEARCH_TEXT, cursor: 'pointer',
                maxWidth: 130, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                lineHeight: 1.4,
              }}>{c}</div>
            ))}
          </div>
        </SearchSection>

        <SearchSection title="猜你想搜" right={<span style={{ fontSize: 9, color: SEARCH_MUTED }}>换一换 ↻</span>}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 14px' }}>
            {GUESS_ITEMS.map((g, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 4,
                fontSize: 9.5, color: SEARCH_TEXT,
                overflow: 'hidden', cursor: 'pointer',
              }}>
                <span style={{
                  flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{g.text}</span>
                {g.tag && <SmallTag kind={g.tag}/>}
              </div>
            ))}
          </div>
        </SearchSection>

        <SearchSection title="大家都在搜" right={<span style={{ fontSize: 9, color: SEARCH_MUTED }}>完整热榜 ›</span>}>
          <div>
            {HOT_LIST.map((h, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 7,
                padding: '5px 0',
                borderBottom: i < HOT_LIST.length - 1 ? `1px solid ${SEARCH_DIVIDER}` : 'none',
              }}>
                <span style={{
                  width: 12, fontSize: 10, fontWeight: 700,
                  color: h.rank <= 3 ? '#FF7A45' : SEARCH_MUTED,
                  fontFamily: '"DIN Alternate", system-ui',
                  paddingTop: 1, flexShrink: 0,
                }}>{h.rank}</span>
                <div style={{ flex: 1, overflow: 'hidden' }}>
                  <div style={{
                    fontSize: 10.5, color: SEARCH_TEXT,
                    display: 'flex', alignItems: 'center', gap: 4,
                    lineHeight: 1.35,
                  }}>
                    <span style={{
                      flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>{h.title}</span>
                    {h.tag && <SmallTag kind={h.tag}/>}
                  </div>
                  <div style={{ fontSize: 8.5, color: SEARCH_MUTED, marginTop: 1 }}>{h.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </SearchSection>
      </div>
    </div>
  );
}

function SearchSection({ title, right, children }) {
  return (
    <div style={{ marginTop: 12 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 6,
      }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: SEARCH_TEXT }}>{title}</span>
        {right && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, cursor: 'pointer' }}>{right}</span>
        )}
      </div>
      {children}
    </div>
  );
}

function SmallTag({ kind }) {
  // Outlined square. 热/沸 red, 新 blue, 广告 gray.
  const palette = {
    '热': '#F4444A',
    '沸': '#F4444A',
    '新': '#3F8DFF',
    '广告': '#6C7079',
  };
  const color = palette[kind] || '#6C7079';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 3px', minWidth: 12, height: 12,
      border: `1px solid ${color}`, borderRadius: 2,
      color, fontSize: 8, fontWeight: 600,
      flexShrink: 0, lineHeight: 1, background: 'transparent',
    }}>{kind}</span>
  );
}

Object.assign(window, { SearchPage });