// ? 典型的“單體”組件，充滿條件判斷
function Composer({ 
  onSubmit, 
  isThread, 
  isEditingMessage, 
  initialText, 
  onCancel 
}) {
  return (
    <div className="composer">
      {/* 只有非編輯模式才支持拖拽 */}
      {!isEditingMessage && <DropZone />}
      
      <Header />
      <Input defaultValue={initialText} />
      
      {/* 線程模式下的額外選項(xiàng) */}
      {isThread && <Checkbox label="Also send to channel" />}
      
      <Footer>
        {/* 只有非編輯模式才顯示附件按鈕 */}
        {!isEditingMessage && <AttachmentButton />}
        
        {/* 提交按鈕邏輯復(fù)雜 */}
        {isEditingMessage ? (
           <>
             <Button onClick={onCancel}>Cancel</Button>
             <Button onClick={onSubmit}>Save</Button>
           </>
        ) : (
           <Button onClick={onSubmit}>Send</Button>
        )}
      </Footer>
    </div>
  );
}

// 1. 創(chuàng)建 Context
const ComposerContext = createContext(null);

// 2. Provider 組件：管理狀態(tài)和對外接口
const ComposerProvider = ({ children, state, actions, meta }) => {
  return (
    <ComposerContext.Provider value={{ state, actions, meta }}>
      {children}
    </ComposerContext.Provider>
  );
};

// 3. 子組件：消費(fèi) Context
const ComposerInput = () => {
  const { state, actions } = useContext(ComposerContext);
  return (
    <input 
      value={state.text} 
      onChange={(e) => actions.update(e.target.value)} 
    />
  );
};

// ... 其他子組件 (Composer.Header, Composer.Footer, etc.)

function ChannelComposer() {
  // 使用自定義 Hook 獲取全局頻道邏輯
  const { state, actions } = useChannelLogic(); 

  return (
    <Composer.Provider state={state} actions={actions}>
      <Composer.DropZone />
      <Composer.Frame>
        <Composer.Header />
        <Composer.Input />
        <Composer.Footer>
          {/* 使用封裝好的通用操作組 */}
          <Composer.CommonActions /> 
          <Composer.SubmitButton />
        </Composer.Footer>
      </Composer.Frame>
    </Composer.Provider>
  );
}

function EditMessageComposer({ messageId, initialText, onCancel }) {
  const { state, actions } = useEditMessageLogic(messageId, initialText);

  return (
    <Composer.Provider state={state} actions={actions}>
      {/* 移除 DropZone */}
      <Composer.Frame>
        <Composer.Header />
        <Composer.Input />
        <Composer.Footer>
          {/* 手動列出需要的 Action，而不是用通用的 */}
          <Composer.FormatText />
          <Composer.Emoji />
          
          {/* 自定義底部按鈕布局 */}
          <div className="flex gap-2">
            <Button onClick={onCancel}>Cancel</Button>
            <Button onClick={actions.submit}>Save</Button>
          </div>
        </Composer.Footer>
      </Composer.Frame>
    </Composer.Provider>
  );
}

function ForwardMessageDialog() {
  // 1. 狀態(tài)提升：在父組件控制狀態(tài)
  const [text, setText] = useState("");
  const inputRef = useRef(null);

  // 定義符合 Provider 接口的 state 和 actions
  const state = { text };
  const actions = { 
    update: setText, 
    submit: () => console.log("Forwarding:", text) 
  };

  return (
    <Dialog>
      {/* 2. 將本地狀態(tài)注入 Provider */}
      <Composer.Provider state={state} actions={actions} meta={{ inputRef }}>
        
        {/* UI 部分 */}
        <Composer.Frame>
          <Composer.Input /> 
          <Composer.Footer>
             {/* 只有少量的操作按鈕 */}
             <Composer.Emoji />
          </Composer.Footer>
        </Composer.Frame>

        {/* 3. 外部按鈕也可以消費(fèi)同一個(gè) Context */}
        <Dialog.Footer>
           <CopyLinkButton />
           {/* 這個(gè)按鈕在 Composer 外部，但能觸發(fā)提交 */}
           <ForwardButton /> 
        </Dialog.Footer>

      </Composer.Provider>
    </Dialog>
  );
}

// 外部按鈕實(shí)現(xiàn)
const ForwardButton = () => {
  // 因?yàn)楸话?Composer.Provider 內(nèi)，依然可以訪問 context
  const { actions } = useContext(ComposerContext);
  return <Button onClick={actions.submit}>Forward</Button>;
}