// テーマ① AI検索基盤 — 検索バー + フィルタ + AI回答（引用つき）+ PDFビューア
const ThemeSearch = ({ onBack }) => {
  const d = CXDATA;
  const [axis, setAxis] = useState('all');     // all | 論文AI | ナレッジAI
  const [year, setYear] = useState('全期間');
  const [method, setMethod] = useState('全工法');
  const [submitted, setSubmitted] = useState(true);
  const [pdf, setPdf] = useState(null);        // open source in viewer

  const Filters = (
    <div className="cx-card pad" style={{padding:16}}>
      <div style={{fontSize:12,fontWeight:700,color:'var(--c-text-2)',marginBottom:10,display:'flex',alignItems:'center',gap:6,whiteSpace:'nowrap'}}>
        <CXIcon name="filter" size={14}/>フィルタ
      </div>
      <div style={{fontSize:11.5,color:'var(--c-text-3)',margin:'10px 0 6px',whiteSpace:'nowrap'}}>対象</div>
      <div style={{display:'flex',flexDirection:'column',gap:4}}>
        {['all','論文AI','ナレッジAI'].map(a=>(
          <button key={a} className={`cx-nav${axis===a?' active':''}`} style={{fontSize:13}} onClick={()=>setAxis(a)}>
            <CXIcon name={a==='論文AI'?'book':a==='ナレッジAI'?'db':'layers'} size={15}/>{a==='all'?'すべて':a}
          </button>
        ))}
      </div>
      <div style={{fontSize:11.5,color:'var(--c-text-3)',margin:'14px 0 6px'}}>発行年度</div>
      <select className="cx-input" style={{height:38}} value={year} onChange={e=>setYear(e.target.value)}>
        {d.searchFilters.years.map(y=><option key={y}>{y}</option>)}
      </select>
      <div style={{fontSize:11.5,color:'var(--c-text-3)',margin:'14px 0 6px'}}>工法</div>
      <select className="cx-input" style={{height:38}} value={method} onChange={e=>setMethod(e.target.value)}>
        {d.searchFilters.methods.map(m=><option key={m}>{m}</option>)}
      </select>
      <div style={{marginTop:16,padding:'12px',background:'var(--c-surface)',borderRadius:10,fontSize:11.5,color:'var(--c-text-2)',lineHeight:1.7}}>
        ハイブリッド検索（BM25 + ベクトル / RRF）→ リランカ → LLM が回答を生成します。
      </div>
    </div>
  );

  return (
    <div style={{display:'grid',gridTemplateColumns:'230px 1fr',height:'100%',minHeight:0}}>
      <aside className="cx-side" style={{padding:16}}>
        <div className="cx-nav" onClick={onBack} style={{color:'var(--c-text-2)',fontWeight:700,marginBottom:8}}>
          <CXIcon name="chevronLeft" size={16}/>ポータルへ
        </div>
        {Filters}
      </aside>

      <div className="cx-main">
        <PageHeader crumb="ポータル / AI検索基盤" title="ナレッジ統合検索"/>
        {/* search bar */}
        <div style={{display:'flex',gap:10,marginBottom:18}}>
          <div className="cx-search" style={{flex:1,width:'auto',height:48,borderRadius:12,padding:'0 16px'}}>
            <CXIcon name="search" size={18} color="#989898"/>
            <input defaultValue={d.searchQuery} style={{fontSize:14}} onKeyDown={e=>e.key==='Enter'&&setSubmitted(true)}/>
          </div>
          <Btn size="lg" icon="sparkles" onClick={()=>setSubmitted(true)}>AIに聞く</Btn>
        </div>

        {submitted && (
          <div className="cx-grid2" style={{gridTemplateColumns: pdf?'1fr 1fr':'1fr', alignItems:'start', transition:'all .2s'}}>
            <div>
              {/* AI回答 */}
              <div className="cx-answer" style={{marginBottom:18}}>
                <div className="ai-row"><CXIcon name="sparkles" size={15}/>AI回答<span style={{marginLeft:'auto',color:'var(--c-text-3)',fontWeight:500,fontSize:11}}>3件の資料を参照</span></div>
                <p>{renderWithCites(d.searchAnswer, setPdf, d.searchSources)}</p>
                <div style={{display:'flex',gap:8,marginTop:16,paddingTop:14,borderTop:'1px solid #d8e6fb'}}>
                  <span style={{fontSize:12,color:'var(--c-text-3)'}}>この回答は役に立ちましたか？</span>
                  <button className="cx-icon-btn" style={{width:28,height:28}} title="役に立った"><CXIcon name="arrowUp" size={15}/></button>
                  <button className="cx-icon-btn" style={{width:28,height:28}} title="改善が必要"><CXIcon name="arrowDown" size={15}/></button>
                </div>
              </div>
              {/* 参照元 */}
              <div className="cx-sec-h" style={{margin:'0 2px 12px'}}><h2 style={{fontSize:14}}>参照元</h2><div className="line"/></div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {d.searchSources.filter(s=>axis==='all'||s.kind===axis).map(s=>(
                  <div className="cx-source" key={s.n} onClick={()=>setPdf(s)}>
                    <span className="num">{s.n}</span>
                    <div style={{flex:1}}>
                      <div style={{fontSize:13.5,fontWeight:700,marginBottom:4}}>{s.title}</div>
                      <div style={{fontSize:11.5,color:'var(--c-text-3)',display:'flex',gap:8,alignItems:'center'}}>
                        <Chip tone={s.kind==='論文AI'?'primary':'accent'}>{s.kind}</Chip>{s.meta}
                      </div>
                    </div>
                    <CXIcon name="chevronRight" size={16} color="#989898"/>
                  </div>
                ))}
              </div>
            </div>

            {/* PDFビューア */}
            {pdf && (
              <div className="cx-card" style={{overflow:'hidden',position:'sticky',top:0}}>
                <div className="cx-card-h">
                  <span className="num" style={{width:20,height:20,borderRadius:5,background:'var(--c-primary)',color:'#fff',fontSize:11,fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center'}}>{pdf.n}</span>
                  <h3 style={{fontSize:13.5,flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{pdf.title}</h3>
                  <button className="cx-icon-btn" style={{width:28,height:28}} onClick={()=>setPdf(null)}><CXIcon name="x" size={16}/></button>
                </div>
                <div style={{background:'#eef1f5',padding:20,display:'flex',justifyContent:'center'}}>
                  <div style={{width:'100%',maxWidth:420,aspectRatio:'1/1.3',background:'#fff',boxShadow:'var(--c-shadow-2)',borderRadius:3,padding:'28px 26px'}}>
                    <div style={{fontSize:12,fontWeight:700,lineHeight:1.5,marginBottom:12}}>{pdf.title}</div>
                    <div style={{fontSize:9,color:'#989898',marginBottom:16}}>{pdf.meta}</div>
                    {Array.from({length:9}).map((_,i)=>(
                      <div key={i} style={{height:6,background:i===3?'var(--c-primary-bg)':'#eef1f5',borderRadius:3,marginBottom:7,width:(i%3===2?'72%':'100%')}}/>
                    ))}
                    <div style={{marginTop:14,padding:10,background:'var(--c-primary-bg)',borderRadius:6,fontSize:10,color:'var(--c-primary)',lineHeight:1.6}}>
                      ハイライト：引用[{pdf.n}]の該当箇所
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

// inline citation renderer
function renderWithCites(text, setPdf, sources) {
  const parts = text.split(/(\[\d\])/g);
  return parts.map((p,i)=>{
    const m = p.match(/^\[(\d)\]$/);
    if (m) { const n=+m[1]; return <span key={i} className="cx-cite" onClick={()=>setPdf(sources.find(s=>s.n===n))}>{n}</span>; }
    return <React.Fragment key={i}>{p}</React.Fragment>;
  });
}

window.ThemeSearch = ThemeSearch;