// テーマ② 簡易報告ウィザード — 高齢・不慣れな作業者向け。大きなボタン・1ステップ1操作。
const ReportWizard = ({ proj, onClose, onDone }) => {
  const d = CXDATA;
  const [step, setStep] = useState(0);          // 0..3, 4=完了
  const [pile, setPile] = useState(null);
  const [cycle, setCycle] = useState(null);
  const [depth, setDepth] = useState('12.5');
  const [photo, setPhoto] = useState(false);

  const STEPS = ['杭をえらぶ', 'サイクル', '伝票しゃしん', 'かくにん'];
  const canNext = [pile, cycle, true, true][step];

  const next = () => { if (step < 3) setStep(step+1); else setStep(4); };
  const prev = () => { if (step > 0) setStep(step-1); };

  // 完了画面
  if (step === 4) {
    return (
      <div className="cx-wizard">
        <div className="wz-done">
          <div className="ok"><CXIcon name="check" size={56} color="#fff"/></div>
          <h2>報告できました</h2>
          <p>{pile}・{cycle}・改良長 {depth}m を記録しました。<br/>立会チェックの後、正式記録になります。</p>
          <div className="wz-foot center">
            <Btn size="lg" icon="check" onClick={onDone}>ホームにもどる</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cx-wizard">
      {/* ヘッダー */}
      <div className="wz-top">
        <button className="wz-close" onClick={onClose}><CXIcon name="x" size={22}/>とじる</button>
        <div className="wz-title">今日の施工結果を報告</div>
        <div className="wz-proj">{proj?.name || '川崎区 護岸補強 地盤改良工事'}</div>
      </div>

      {/* 進捗ドット */}
      <div className="wz-steps">
        {STEPS.map((s,i)=>(
          <div key={s} className={`wz-dot${i===step?' on':''}${i<step?' done':''}`}>
            <span className="n">{i<step?<CXIcon name="check" size={18}/>:i+1}</span>
            <span className="l">{s}</span>
          </div>
        ))}
      </div>

      {/* 本体 */}
      <div className="wz-body">
        {step===0 && (
          <>
            <div className="wz-q">どの杭ですか？</div>
            <div className="wz-grid">
              {d.reportPiles.map(p=>(
                <button key={p} className={`wz-pick${pile===p?' sel':''}`} onClick={()=>setPile(p)}>
                  <CXIcon name="beaker" size={26}/>{p}
                </button>
              ))}
            </div>
          </>
        )}

        {step===1 && (
          <>
            <div className="wz-q">施工サイクルをえらぶ</div>
            <div className="wz-list">
              {d.reportCycles.map(c=>(
                <button key={c} className={`wz-row${cycle===c?' sel':''}`} onClick={()=>setCycle(c)}>
                  <span>{c}</span>{cycle===c && <CXIcon name="check" size={24} color="#0b57c4"/>}
                </button>
              ))}
            </div>
            <div className="wz-q" style={{marginTop:28}}>改良長（m）</div>
            <div className="wz-stepper">
              <button onClick={()=>setDepth(v=>(Math.max(0,(+v-0.5)).toFixed(1)))}><CXIcon name="x" size={22}/></button>
              <div className="num">{depth}<small>m</small></div>
              <button onClick={()=>setDepth(v=>((+v+0.5).toFixed(1)))}><CXIcon name="plus" size={22}/></button>
            </div>
          </>
        )}

        {step===2 && (
          <>
            <div className="wz-q">伝票の写真をとる</div>
            <p className="wz-help">スラリー比重は写真から自動で読み取ります。手入力は不要です。</p>
            <button className={`wz-photo${photo?' got':''}`} onClick={()=>setPhoto(true)}>
              {photo ? (
                <><CXIcon name="checkCircle" size={48} color="#2f8f5b"/><div>読み取りました</div><div className="sg">スラリー比重 1.82 / 配合 W/C 100%</div></>
              ) : (
                <><CXIcon name="camera" size={48} color="#0b57c4"/><div>タップして写真をとる</div></>
              )}
            </button>
          </>
        )}

        {step===3 && (
          <>
            <div className="wz-q">これでよろしいですか？</div>
            <div className="wz-confirm">
              <div className="row"><span>杭番号</span><b>{pile}</b></div>
              <div className="row"><span>サイクル</span><b>{cycle}</b></div>
              <div className="row"><span>改良長</span><b>{depth} m</b></div>
              <div className="row"><span>スラリー比重</span><b>{photo?'1.82（写真OCR）':'未取得'}</b></div>
              <div className="row"><span>日時</span><b>本日 14:30</b></div>
              <div className="row"><span>記録者</span><b>{d.user.name}</b></div>
            </div>
          </>
        )}
      </div>

      {/* フッター（大ボタン） */}
      <div className="wz-foot">
        {step>0 ? <Btn kind="sec" size="lg" icon="chevronLeft" onClick={prev}>もどる</Btn> : <span/>}
        <Btn size="lg" onClick={next} disabled={!canNext}>
          {step===3 ? 'この内容で報告する' : 'つぎへ'}{step<3 && <CXIcon name="chevronRight" size={18}/>}
        </Btn>
      </div>
    </div>
  );
};
window.ReportWizard = ReportWizard;