shoc-frontend-new/src/app/(protected)/settings/task-templates.tsx

import { useState } from "react";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
import {
  Alert,
  Box,
  Button,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  IconButton,
  List,
  ListItemButton,
  ListItemText,
  Paper,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { SettingsNav } from "@/components/common/settings-nav";
import { mapTaskTemplateToFormValues } from "@/domain/settings/task-templates/mappers/task-template-mapper";
import type {
  TaskTemplate,
  TaskTemplateFormValues,
} from "@/domain/settings/task-templates/types/task-template";
import {
  useCreateTaskTemplate,
  useDeleteTaskTemplate,
  useUpdateTaskTemplate,
} from "@/domain/settings/task-templates/use-cases/use-task-template-mutations";
import { useTaskTemplates } from "@/domain/settings/task-templates/use-cases/use-task-templates";

const emptyForm: TaskTemplateFormValues = { name: "", description: "", items: [] };

export default function TaskTemplatesPage() {
  const { data: templates = [], isLoading, error } = useTaskTemplates();
  const createTemplate = useCreateTaskTemplate();
  const updateTemplate = useUpdateTaskTemplate();
  const deleteTemplate = useDeleteTaskTemplate();

  const [selectedId, setSelectedId] = useState<string | number | "new" | null>(null);
  const [form, setForm] = useState<TaskTemplateFormValues>(emptyForm);
  const [newItemText, setNewItemText] = useState("");
  const [confirmDelete, setConfirmDelete] = useState(false);

  const isNew = selectedId === "new";
  const isSaving = createTemplate.isPending || updateTemplate.isPending;

  const handleSelect = (template: TaskTemplate) => {
    setSelectedId(template.id);
    setForm(mapTaskTemplateToFormValues(template));
    setNewItemText("");
  };

  const handleNew = () => {
    setSelectedId("new");
    setForm(emptyForm);
    setNewItemText("");
  };

  const handleAddItem = () => {
    if (!newItemText.trim()) return;
    setForm((prev) => ({
      ...prev,
      items: [...prev.items, { text: newItemText.trim(), sortOrder: prev.items.length }],
    }));
    setNewItemText("");
  };

  const handleRemoveItem = (index: number) => {
    setForm((prev) => ({
      ...prev,
      items: prev.items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })),
    }));
  };

  const handleMoveItem = (index: number, direction: -1 | 1) => {
    setForm((prev) => {
      const items = [...prev.items];
      const target = index + direction;
      if (target < 0 || target >= items.length) return prev;
      [items[index], items[target]] = [items[target], items[index]];
      return { ...prev, items: items.map((item, i) => ({ ...item, sortOrder: i })) };
    });
  };

  const handleSave = () => {
    if (!form.name.trim()) return;
    if (isNew) {
      createTemplate.mutate(form, {
        onSuccess: (result) => setSelectedId(result.id),
      });
      return;
    }
    if (selectedId && selectedId !== "new") {
      updateTemplate.mutate({ id: selectedId, values: form });
    }
  };

  const handleDelete = () => {
    if (!selectedId || selectedId === "new") return;
    deleteTemplate.mutate(selectedId, {
      onSuccess: () => {
        setSelectedId(null);
        setForm(emptyForm);
        setConfirmDelete(false);
      },
    });
  };

  return (
    <Box className="p-4">
      <SettingsNav />
      <Stack spacing={1} className="mb-4">
        <Typography variant="h5">Task List Templates</Typography>
        <Typography
          variant="body2"
          sx={{
            color: "text.secondary",
          }}
        >
          Create reusable checklists for work order dispatches
        </Typography>
      </Stack>
      {Boolean(error) && (
        <Alert severity="error" className="mb-4">
          {error instanceof Error ? error.message : "Failed to load templates"}
        </Alert>
      )}
      <Box className="grid grid-cols-1 gap-4 md:grid-cols-[280px_1fr]">
        <Paper variant="outlined" className="p-3">
          <Button fullWidth variant="contained" className="mb-3" onClick={handleNew}>
            + New Template
          </Button>
          {isLoading ? (
            <Box className="flex justify-center p-4">
              <CircularProgress size={24} />
            </Box>
          ) : (
            <List dense disablePadding>
              {templates.map((template) => (
                <ListItemButton
                  key={String(template.id)}
                  selected={selectedId === template.id}
                  onClick={() => handleSelect(template)}
                >
                  <ListItemText
                    primary={template.name}
                    secondary={`${template.items.length} items`}
                  />
                </ListItemButton>
              ))}
            </List>
          )}
        </Paper>

        <Paper variant="outlined" className="p-4">
          {!selectedId ? (
            <Typography
              className="py-10 text-center"
              sx={{
                color: "text.secondary",
              }}
            >
              Select a template or create a new one
            </Typography>
          ) : (
            <Stack spacing={3}>
              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
                <TextField
                  label="Template Name"
                  fullWidth
                  required
                  value={form.name}
                  onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                  placeholder="e.g., HVAC Inspection"
                />
                <TextField
                  label="Description"
                  fullWidth
                  value={form.description}
                  onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
                />
              </Stack>

              <Typography variant="subtitle2" className="font-semibold">
                Checklist Items ({form.items.length})
              </Typography>

              <Stack spacing={1}>
                {form.items.map((item, index) => (
                  <Box
                    key={`${item.sortOrder}-${index}`}
                    className="flex items-center gap-2 rounded border border-border p-2"
                  >
                    <Typography variant="body2" className="w-6 text-muted-foreground">
                      {index + 1}
                    </Typography>
                    <Typography variant="body2" className="flex-1">
                      {item.text}
                    </Typography>
                    <IconButton
                      size="small"
                      disabled={index === 0}
                      onClick={() => handleMoveItem(index, -1)}
                    >
                      <ArrowUpwardIcon fontSize="small" />
                    </IconButton>
                    <IconButton
                      size="small"
                      disabled={index === form.items.length - 1}
                      onClick={() => handleMoveItem(index, 1)}
                    >
                      <ArrowDownwardIcon fontSize="small" />
                    </IconButton>
                    <IconButton size="small" color="error" onClick={() => handleRemoveItem(index)}>
                      <DeleteOutlineIcon fontSize="small" />
                    </IconButton>
                  </Box>
                ))}
              </Stack>

              <Stack direction="row" spacing={1}>
                <TextField
                  fullWidth
                  size="small"
                  value={newItemText}
                  onChange={(e) => setNewItemText(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      handleAddItem();
                    }
                  }}
                  placeholder="Add checklist item..."
                />
                <Button variant="outlined" onClick={handleAddItem} disabled={!newItemText.trim()}>
                  Add
                </Button>
              </Stack>

              <Stack
                direction="row"
                spacing={2}
                sx={{
                  justifyContent: "flex-end",
                }}
              >
                {!isNew && (
                  <Button variant="outlined" color="error" onClick={() => setConfirmDelete(true)}>
                    Delete
                  </Button>
                )}
                <Button
                  variant="contained"
                  onClick={handleSave}
                  disabled={isSaving || !form.name.trim()}
                >
                  {isSaving ? "Saving..." : isNew ? "Create Template" : "Save Changes"}
                </Button>
              </Stack>
            </Stack>
          )}
        </Paper>
      </Box>
      <Dialog open={confirmDelete} onClose={() => setConfirmDelete(false)}>
        <DialogTitle>Delete Template</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Are you sure you want to delete &quot;{form.name}&quot;?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDelete(false)}>Cancel</Button>
          <Button color="error" variant="contained" onClick={handleDelete}>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}