import { useState } from 'react'

const lessons = ['stateの更新', 'propsで値を渡す', 'Effectと通信']
const choices = ['入力するたびに結果も変わる', '検索を確定するまで結果は変わらない', '用途を決めてから選ぶ']

function Results({ items }: { items: string[] }) {
  return <div className="rounded-lg bg-white border border-slate-200 p-4"><h3 className="font-bold mb-2">子コンポーネントが受け取る結果</h3><ul aria-label="実験の検索結果" className="space-y-2 text-sm">{items.map(item => <li key={item}>{item}</li>)}</ul>{items.length === 0 && <p>一致する教材はありません。</p>}</div>
}

export function SearchStateLesson() {
  const [prediction, setPrediction] = useState<string | null>(null)
  const [draft, setDraft] = useState('')
  const [submitted, setSubmitted] = useState('')
  const [revealed, setRevealed] = useState(false)
  const [reason, setReason] = useState('')
  const results = lessons.filter(lesson => lesson.toLowerCase().includes(submitted.toLowerCase()))
  return <section aria-label="検索のstateを確かめる実験" className="mb-10 rounded-xl border border-brand-200 bg-brand-50 p-5 sm:p-6">
    <p className="t-eyebrow">Reactの実装を読む</p>
    <h2 className="t-h3 mb-3">検索の仕様を、stateとpropsに落とし込む</h2>
    <p className="text-sm leading-7 mb-4">ここでは入力途中のdraftと、検索時に確定するsubmittedを別々のstateに持ちます。結果はsubmittedから計算して、子へpropsで渡します。ボタンで確定する仕様を、どの値と処理で実現するか確認します。</p>
    <fieldset className="mb-5"><legend className="font-bold text-sm mb-2">別の検索画面を作るなら、どちらの仕様を選ぶ？</legend><div className="grid gap-2">{choices.map(choice => <label key={choice} className="text-sm flex gap-2 items-center"><input type="radio" name="search-prediction" value={choice} checked={prediction === choice} onChange={() => setPrediction(choice)} />{choice}</label>)}</div></fieldset>
    <form onSubmit={event => { event.preventDefault(); setSubmitted(draft.trim()) }}>
      <label htmlFor="lab-draft" className="block text-sm font-bold mb-2">実験用の検索語</label>
      <div className="flex gap-2"><input id="lab-draft" value={draft} onChange={event => setDraft(event.target.value)} placeholder="stateと入力" className="min-w-0 flex-1 rounded-lg border border-slate-300 bg-white p-3" /><button type="submit" className="btn">確定する</button></div>
    </form>
    <dl className="my-4 grid gap-3 sm:grid-cols-2 text-sm"><div className="bg-white rounded-lg p-3"><dt>入力中のstate：draft</dt><dd className="font-mono mt-2 break-all"><output aria-label="入力中のstate">{draft || '（空欄）'}</output></dd></div><div className="bg-white rounded-lg p-3"><dt>確定済みのstate：submitted</dt><dd className="font-mono mt-2 break-all"><output aria-label="確定済みのstate">{submitted || '（空欄）'}</output></dd></div></dl>
    <Results items={results} />
    <p className="text-sm leading-7 my-4">入力中と確定済みの値を上の表示で確認できます。入力のたびに絞る仕様へ変えるなら、resultsの計算元を何に変え、どのstateが不要になるでしょう？</p>
    <label className="block text-sm font-bold" htmlFor="lab-reason">自分の言葉で説明する（任意）</label><textarea id="lab-reason" value={reason} onChange={event => setReason(event.target.value)} className="w-full rounded-lg border border-slate-300 bg-white p-3 mt-2" placeholder="計算元を変更し、不要になる処理は…" />
    <button className="text-sm text-brand-800 underline my-3" onClick={() => setRevealed(true)}>りこの解説と比べる</button>
    {revealed && <div className="text-sm leading-7 border-t border-brand-200 pt-3"><p>別画面で選んだ仕様：{prediction ?? '未選択'}。入力のたびに絞るなら、resultsをdraftから計算し、submittedと確定処理を外せます。ここでは確定方式のコードを動かしています。draftの更新でも親コンポーネントは再レンダーされます。ただし絞り込みに使うsubmittedは変わらないため、表示する教材の内容は同じです。「再レンダーした」と「検索結果が変わった」は別のことです。</p><p className="mt-2">結果そのものをもう一つのstateとして保存しなくても、確定した語から計算できます。これは入力ごとに検索する方式が誤りという意味ではなく、確定して検索する今回の仕様です。</p><p className="mt-2 font-bold">別の場面で考える</p><p>プロフィール編集で、入力中の名前を「保存」を押すまで公開しない場合、編集用と公開用の値をどう分けますか？ 入力ごとに公開用の値まで更新する案では、何が起きるでしょう。</p><details className="mt-2"><summary>考えた後で、確認の観点を読む</summary><p>編集用の値と保存済みの値を分け、公開表示は保存済みの値を使います。入力ごとに公開用も変えると未保存の内容が見えてしまいます。実アプリではサーバーへの保存成功・失敗も別に扱う必要があります。</p></details></div>}
    <p className="text-xs text-slate-500 leading-6 mt-4">本番検索からURL連携と全教材データを除いた学習用の実装です。入力・予想・説明はこの画面内だけで扱い、保存・送信・自動採点しません。再読み込みすると消えます。</p>
  </section>
}