/* app.jsx — Smart OPD demo, simplified two-step flow:
 * VoiceMode (ChatGPT-style fullscreen voice) -> Summary (ScreenAIAdvanced).
 */

const KIOSK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scenario": "fever"
}/*EDITMODE-END*/;

function App({ onFrameChange }) {
  const [step, setStep] = useState(0); // 0 = voice, 1 = summary
  const [tweaks, setTweak] = useTweaks(KIOSK_DEFAULTS);
  const T = useT();

  const scenario = window.SCENARIOS[tweaks.scenario] || window.SCENARIOS.fever;

  useEffect(() => { if (onFrameChange) onFrameChange(false); }, []);

  const goSummary = () => setStep(1);
  const restart = () => setStep(0);

  return (
    <div className="kiosk-root" style={{
      width: 1080, height: 1920, position: 'relative',
      background: '#000', display: 'flex', flexDirection: 'column',
      fontFamily: "'Anuphan','IBM Plex Sans Thai',system-ui,sans-serif",
      color: K.ink, overflow: 'hidden',
    }}>
      {step === 0 && <ScreenVoice scenario={scenario} onComplete={goSummary}/>}
      {step === 1 && <ScreenAIAdvanced scenario={scenario} onNext={restart}/>}

      <KioskTweaks tweaks={tweaks} setTweak={setTweak} step={step} setStep={setStep} scenario={tweaks.scenario}/>
    </div>
  );
}

function KioskTweaks({ tweaks, setTweak, step, setStep }) {
  const T = useT();
  return (
    <TweaksPanel title="Tweaks · COE Demo">
      <TweakSection title="Scenario">
        <TweakSelect value={tweaks.scenario} onChange={v => setTweak('scenario', v)} options={[
          { value: 'fever', label: T({ th: 'ไข้ + ไอ + เจ็บคอ -> อายุรกรรม', en: 'Fever + cough -> Internal Medicine' }) },
          { value: 'knee',  label: T({ th: 'ปวดเข่า -> กระดูกและข้อ', en: 'Knee pain -> Orthopedics' }) },
          { value: 'chest', label: T({ th: 'เจ็บหน้าอก -> ฉุกเฉิน', en: 'Chest pain -> ER' }) },
        ]}/>
      </TweakSection>

      <TweakSection title={T({ th: 'หน้าจอ', en: 'Step' })}>
        <TweakSelect value={String(step)} onChange={v => setStep(parseInt(v, 10))}
          options={[
            { value: '0', label: T({ th: '1. โหมดเสียง', en: '1. Voice mode' }) },
            { value: '1', label: T({ th: '2. สรุปผล', en: '2. Summary' }) },
          ]}/>
      </TweakSection>
    </TweaksPanel>
  );
}

window.App = App;