shoc-frontend-new/src/app/(protected)/completion-docs/_components/completion-template-dialog.tsx

import { Dialog, DialogTitle } from "@mui/material";
import { useState } from "react";
import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
import type { CompletionTemplate } from "@/domain/completion-templates/types/completion-template";
import { CompletionTemplateDetail } from "./completion-template-detail";
import {
  CompletionTemplateDialogFooter,
  CompletionTemplateDialogHeader,
} from "./completion-template-dialog-chrome";
import { dialogHeading } from "./completion-template-dialog-heading";
import { CompletionTemplateForm } from "./completion-template-form";
import { CompletionTemplatePreview } from "./completion-template-preview";
import { DeleteCompletionTemplateDialog } from "./delete-completion-template-dialog";
import {
  useCompletionTemplateDialog,
  type CompletionTemplateDialogMode,
} from "./use-completion-template-dialog";
import type { CompletionTemplatePermissions } from "./use-completion-template-permissions";

type CompletionTemplateDialogProps = {
  /** `null` adds a new template. */
  template: CompletionTemplate | null;
  initialMode: CompletionTemplateDialogMode;
  permissions: CompletionTemplatePermissions;
  onClose: () => void;
  onSaved: (template: CompletionTemplate) => void;
};

/** View, add or edit one template beside its document preview. */
export function CompletionTemplateDialog({
  template,
  initialMode,
  permissions,
  onClose,
  onSaved,
}: CompletionTemplateDialogProps) {
  const dialog = useCompletionTemplateDialog({ template, initialMode, onClose, onSaved });
  const [confirmingDelete, setConfirmingDelete] = useState(false);
  const heading = dialogHeading(template, dialog.mode);

  return (
    <Dialog
      open
      onClose={onClose}
      maxWidth={false}
      aria-labelledby="completion-template-dialog-title"
      slotProps={{
        ...dialogBlurBackdropSlotProps,
        paper: {
          className: "flex max-h-[85vh] flex-col overflow-hidden border border-border p-0",
          style: {
            borderRadius: 12,
            width: "min(1040px, calc(100vw - 32px))",
            maxWidth: "none",
            background: "var(--color-bg-muted)",
          },
        },
      }}
    >
      <DialogTitle id="completion-template-dialog-title" className="sr-only">
        {heading.title}
      </DialogTitle>
      <CompletionTemplateDialogHeader
        title={heading.title}
        subtitle={heading.subtitle}
        onClose={onClose}
      />
      <div className="flex min-h-0 flex-1 flex-row">
        <CompletionTemplatePreview values={dialog.previewValues} isEditing={dialog.isEditing} />
        <div
          className="flex min-h-0 flex-col"
          style={{ width: "42%", background: "var(--color-bg-surface)" }}
        >
          <div className="min-h-0 flex-1 overflow-y-auto" style={{ padding: 20 }}>
            {dialog.isEditing ? (
              <CompletionTemplateForm form={dialog.form} />
            ) : (
              template !== null && <CompletionTemplateDetail template={template} />
            )}
          </div>
        </div>
      </div>
      <CompletionTemplateDialogFooter
        mode={dialog.mode}
        permissions={permissions}
        isSaving={dialog.isSaving}
        onCancel={dialog.cancel}
        onSubmit={() => void dialog.submit()}
        onEdit={dialog.startEditing}
        onDelete={() => setConfirmingDelete(true)}
      />
      {template !== null && permissions.canDelete && (
        <DeleteCompletionTemplateDialog
          template={template}
          open={confirmingDelete}
          onClose={() => setConfirmingDelete(false)}
          onDeleted={onClose}
        />
      )}
    </Dialog>
  );
}