import { Alert, Box, Stack, Typography } from "@mui/material";
import { SettingsNav } from "@/components/common/settings-nav";
import { TASK_TEMPLATE_COPY } from "@/domain/settings/task-templates/constants/task-template-constants";
import { useTaskTemplateEditor } from "@/domain/settings/task-templates/use-cases/use-task-template-editor";
import { DeleteTaskTemplateDialog } from "./_components/task-templates/delete-task-template-dialog";
import { TaskTemplateDetailForm } from "./_components/task-templates/task-template-detail-form";
import { TaskTemplateList } from "./_components/task-templates/task-template-list";

export default function TaskTemplatesPage() {
  const {
    templatesQuery,
    templates,
    selectedId,
    isNew,
    isSaving,
    form,
    deleteConfirmOpen,
    templateName,
    selectTemplate,
    startNewTemplate,
    submitForm,
    requestDelete,
    cancelDelete,
    confirmDelete,
  } = useTaskTemplateEditor();

  const { isLoading, error } = templatesQuery;

  return (
    <Box className="p-4">
      <SettingsNav />
      <Stack spacing={1} className="mb-4">
        <Typography variant="h5">{TASK_TEMPLATE_COPY.pageTitle}</Typography>
        <Typography variant="body2" sx={{ color: "text.secondary" }}>
          {TASK_TEMPLATE_COPY.pageSubtitle}
        </Typography>
      </Stack>
      {Boolean(error) && (
        <Alert severity="error" className="mb-4">
          {error instanceof Error ? error.message : TASK_TEMPLATE_COPY.loadError}
        </Alert>
      )}
      <Box className="grid grid-cols-1 gap-4 md:grid-cols-[280px_1fr]">
        <TaskTemplateList
          isLoading={isLoading}
          selectedId={selectedId}
          templates={templates}
          onNew={startNewTemplate}
          onSelect={selectTemplate}
        />
        <TaskTemplateDetailForm
          form={form}
          isNew={isNew}
          isSelected={selectedId !== null}
          isSaving={isSaving}
          selectedId={selectedId}
          onDelete={requestDelete}
          onSubmit={submitForm}
        />
      </Box>
      <DeleteTaskTemplateDialog
        open={deleteConfirmOpen}
        templateName={templateName}
        onCancel={cancelDelete}
        onConfirm={confirmDelete}
      />
    </Box>
  );
}