import {
  MobileAssistantChatScreen,
  MobileExpandedWorkScreen,
  MobileHomeScreen,
  MobileWorkListScreen,
  MobileWorkUnitDetailScreen,
} from "@code/ui/components/mobile-product";
import { useNavigate } from "react-router";

import { useMobileWorkspace } from "@/hooks/use-mobile-workspace";

export type MobileFlowScreen =
  | "assistant-chat"
  | "home"
  | "work-list"
  | "work-unit-detail";

interface MobileFlowPageProps {
  publicDemo?: boolean;
  screen: MobileFlowScreen;
}

export const MobileFlowPage = ({
  publicDemo = false,
  screen,
}: MobileFlowPageProps) => {
  const navigate = useNavigate();
  const workspace = useMobileWorkspace();
  const homePath = publicDemo ? "/design" : "/";
  const workPath = publicDemo ? "/design/work" : "/work";
  const chatPath = publicDemo ? "/design/chat" : "/chat";
  const detailPath = publicDemo ? "/design/work/flow-08" : "/work/flow-08";

  const handleOpenUnit = () => {
    if (screen === "work-list" && !workspace.expanded) {
      workspace.setExpanded(true);
      return;
    }
    navigate(detailPath);
  };

  const screenProps = {
    composerValue: workspace.composerValue,
    onBack: () => navigate(homePath),
    onComposerChange: workspace.handleComposerChange,
    onComposerSubmit: workspace.handleComposerSubmit,
    onOpenAssistant: () => navigate(chatPath),
    onOpenUnit: handleOpenUnit,
    onViewWork: () => navigate(workPath),
    statusMessage: workspace.statusMessage,
  };

  if (screen === "assistant-chat") {
    return <MobileAssistantChatScreen {...screenProps} />;
  }
  if (screen === "home") {
    return <MobileHomeScreen {...screenProps} />;
  }
  if (screen === "work-unit-detail") {
    return <MobileWorkUnitDetailScreen {...screenProps} />;
  }
  if (workspace.expanded) {
    return <MobileExpandedWorkScreen {...screenProps} />;
  }
  return <MobileWorkListScreen {...screenProps} />;
};
