// app.jsx — main shell + tweaks

const { useState: useS, useEffect: useE, useMemo: useM } = React;

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  const role = ROLES[t.role] || ROLES.physicist;
  const scenario = SCENARIOS[t.scenario] || SCENARIOS.normal;

  const [tab, setTab] = useS('workspace');
  const [pipelinePatient, setPipelinePatient] = useS(t.patient || 'zhang');

  // Sheets
  const [planReview, setPlanReview] = useS({ open: false, patientId: null });
  const [igrt, setIgrt] = useS({ open: false, patientId: null });
  const [reject, setReject] = useS({ open: false, patientId: null });
  const [roleSheet, setRoleSheet] = useS(false);

  // sync patient tweak ↔ pipeline tab selection
  useE(() => { setPipelinePatient(t.patient); }, [t.patient]);

  // when scenario changes, force-open the right alert? — no, keep gentle, just show in workspace
  // when tweaks change role and we have role-irrelevant tab open, ok

  const onOpenTask = (task) => {
    if (task.node === 'review') setPlanReview({ open: true, patientId: task.patient });
    else if (task.node === 'igrt') setIgrt({ open: true, patientId: task.patient });
    else if (task.pri === 'blocked' || task.tag === '驳回') setReject({ open: true, patientId: task.patient });
    else setPlanReview({ open: true, patientId: task.patient });
  };

  const onOpenPatient = (pid) => {
    setPipelinePatient(pid);
    setTweak('patient', pid);
    setTab('pipeline');
  };

  const onAlert = (alert) => {
    if (!alert) return;
    if (alert.level === 'urgent') setIgrt({ open: true, patientId: alert.patient });
    else setReject({ open: true, patientId: alert.patient });
  };

  let screen;
  if (tab === 'workspace') {
    screen = <ScreenWorkspace
      role={role} scenario={scenario}
      onOpenTask={onOpenTask} onOpenPatient={onOpenPatient}
      onAlert={onAlert} onRoleClick={() => setRoleSheet(true)}
    />;
  } else if (tab === 'tasks') {
    screen = <ScreenTasks role={role} scenario={scenario} onOpenTask={onOpenTask}/>;
  } else if (tab === 'pipeline') {
    screen = <ScreenPipeline role={role} scenario={scenario} patientId={pipelinePatient}
      onRoleClick={() => setRoleSheet(true)} />;
  } else if (tab === 'files') {
    screen = <ScreenFiles role={role} onRoleClick={() => setRoleSheet(true)} />;
  } else if (tab === 'insights') {
    screen = <ScreenInsights role={role} onRoleClick={() => setRoleSheet(true)} />;
  }

  return (
    <>
      <div style={{
        position:'relative',
        width:'100%',
        minHeight:'100vh',
        height:'100dvh',
        background: 'var(--bg)',
        overflow:'hidden',
      }}>
        <div className="scroll" style={{ height:'100%', overflowY: 'auto', paddingBottom: 8 }}>
          {screen}
        </div>

        <PlanReviewSheet open={planReview.open} onClose={() => setPlanReview({open:false, patientId:null})} patientId={planReview.patientId || 'zhang'} role={role}/>
        <IgrtSheet open={igrt.open} onClose={() => setIgrt({open:false, patientId:null})} patientId={igrt.patientId || 'li'}/>
        <RejectSheet open={reject.open} onClose={() => setReject({open:false, patientId:null})} patientId={reject.patientId || 'wang'}/>
        <RoleSwitcher open={roleSheet} onClose={() => setRoleSheet(false)} currentRoleId={role.id} onPick={(r) => setTweak('role', r)}/>

        <BottomTabs current={tab} onChange={setTab}/>
      </div>

      <TweaksPanel>
        <TweakSection label="角色 / 工作台" />
        <TweakSelect
          label="角色"
          value={t.role}
          options={[
            { value:'physician',   label:'放疗医生 · 医生台' },
            { value:'physicist',   label:'物理师 · 物理台' },
            { value:'dosimetrist', label:'剂量师 · 计划台' },
            { value:'therapist',   label:'放疗技师 · 治疗台' },
            { value:'nurse',       label:'调度护士 · 调度台' },
          ]}
          onChange={(v) => setTweak('role', v)}
        />

        <TweakSection label="患者 · 示例" />
        <TweakRadio
          label="聚焦患者"
          value={t.patient}
          options={[
            { value:'zhang', label:'张明' },
            { value:'li',    label:'李华' },
            { value:'wang',  label:'王芳' },
          ]}
          onChange={(v) => { setTweak('patient', v); setPipelinePatient(v); }}
        />

        <TweakSection label="场景 · 状态" />
        <TweakSelect
          label="当前场景"
          value={t.scenario}
          options={[
            { value:'normal',   label:'A. 正常进行' },
            { value:'rejected', label:'B. 审核驳回' },
            { value:'oot',      label:'C. IGRT 超阈' },
          ]}
          onChange={(v) => setTweak('scenario', v)}
        />
        <div style={{ fontSize: 11, color: 'rgba(41,38,27,0.6)', lineHeight: 1.45, padding: '4px 0 2px' }}>
          {SCENARIOS[t.scenario]?.desc}
        </div>

        <TweakSection label="快捷打开" />
        <TweakButton label="打开计划审核" onClick={() => setPlanReview({ open: true, patientId: t.patient })}/>
        <TweakButton label="打开 IGRT 超阈" onClick={() => setIgrt({ open: true, patientId: 'li' })}/>
        <TweakButton label="打开驳回详情" onClick={() => setReject({ open: true, patientId: 'wang' })}/>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('stage')).render(<App />);