shoc-frontend-new/src/app/(protected)/settings/_components/services-registry-components.tsx

import {
  Autocomplete,
  Box,
  Button,
  Checkbox,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Divider,
  Drawer,
  FormControl,
  FormControlLabel,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  Stack,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { Droplets, Hammer, Settings2, Wrench, Zap } from "lucide-react";
import {
  SERVICE_WORK_ORDER_TYPES,
  type CompletionDocTemplateOption,
  type Service,
  type ServiceWorkOrderType,
} from "@/domain/services/types/service";
import type { ServiceForm } from "@/domain/services/use-cases/use-services-registry-controller";

const ICONS = [
  { key: "wrench", label: "Wrench", Icon: Wrench },
  { key: "droplets", label: "Droplets", Icon: Droplets },
  { key: "zap", label: "Zap", Icon: Zap },
  { key: "hammer", label: "Hammer", Icon: Hammer },
  { key: "settings", label: "Settings", Icon: Settings2 },
] as const;

export function ServiceIcon({ iconKey, size = 18 }: { iconKey: string; size?: number }) {
  const icon = ICONS.find((item) => item.key === iconKey) ?? ICONS[0];
  const Icon = icon.Icon;
  return <Icon size={size} aria-hidden="true" />;
}

type DetailsProps = {
  service: Service | null;
  open: boolean;
  canManage: boolean;
  canDeactivate: boolean;
  onClose: () => void;
  onEdit: (service: Service) => void;
  onDeactivate: (service: Service) => void;
};

export function ServiceDetailsDrawer({
  service,
  open,
  canManage,
  canDeactivate,
  onClose,
  onEdit,
  onDeactivate,
}: DetailsProps) {
  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      {service !== null && (
        <Box className="flex h-full w-[min(100vw,460px)] flex-col">
          <Box className="flex items-start justify-between p-5">
            <Box>
              <Typography variant="h6" className="font-display font-bold">
                {service.name}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Service details
              </Typography>
            </Box>
            <Chip size="small" label={service.isActive ? "Active" : "Inactive"} />
          </Box>
          <Divider />
          <Box className="flex-1 overflow-y-auto p-5">
            <Stack spacing={3}>
              <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
                <Box className="flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <ServiceIcon iconKey={service.iconKey} size={24} />
                </Box>
                <Box>
                  <Typography variant="caption" color="text.secondary">
                    Trade
                  </Typography>
                  <Typography variant="body1" className="font-semibold">
                    {service.trade}
                  </Typography>
                </Box>
              </Stack>
              <Box>
                <Typography variant="subtitle2" className="mb-1 font-semibold">
                  Work Order Types
                </Typography>
                <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap", gap: 1 }}>
                  {service.supportedWorkOrderTypes.map((type) => (
                    <Chip key={type} size="small" label={type} variant="outlined" />
                  ))}
                </Stack>
              </Box>
              <Box>
                <Typography variant="subtitle2" className="mb-1 font-semibold">
                  Completion Document
                </Typography>
                <Typography variant="body2">
                  {service.requiresCompletionDocument
                    ? service.completionDocTemplate?.name || "No template linked yet"
                    : "Not required"}
                </Typography>
              </Box>
            </Stack>
          </Box>
          <Divider />
          <Stack direction="row" spacing={1} className="p-4" sx={{ justifyContent: "flex-end" }}>
            {canManage && (
              <Button variant="outlined" onClick={() => onEdit(service)}>
                Edit
              </Button>
            )}
            {canDeactivate && service.isActive && (
              <Button color="warning" variant="contained" onClick={() => onDeactivate(service)}>
                Deactivate
              </Button>
            )}
          </Stack>
        </Box>
      )}
    </Drawer>
  );
}

type EditorProps = {
  mode: "add" | "edit" | null;
  form: ServiceForm;
  formError: string;
  trades: string[];
  templates: CompletionDocTemplateOption[];
  canChangeActiveState: boolean;
  isSaving: boolean;
  onClose: () => void;
  onSave: () => void;
  onUpdate: <K extends keyof ServiceForm>(key: K, value: ServiceForm[K]) => void;
  onToggleType: (type: ServiceWorkOrderType) => void;
};

export function ServiceEditorDrawer({
  mode,
  form,
  formError,
  trades,
  templates,
  canChangeActiveState,
  isSaving,
  onClose,
  onSave,
  onUpdate,
  onToggleType,
}: EditorProps) {
  return (
    <Drawer anchor="right" open={mode !== null} onClose={onClose}>
      <Box className="flex h-full w-[min(100vw,520px)] flex-col">
        <Box className="p-5">
          <Typography variant="h6" className="font-display font-bold">
            {mode === "add" ? "Add Service" : "Edit Service"}
          </Typography>
          <Typography variant="body2" color="text.secondary" className="mt-1">
            Register a service and whether it needs a completion document.
          </Typography>
        </Box>
        <Divider />
        <Box className="flex-1 overflow-y-auto p-5">
          <Stack spacing={2.5}>
            {Boolean(formError) && <AlertMessage message={formError} />}
            <ServiceEditorFields
              mode={mode}
              form={form}
              trades={trades}
              templates={templates}
              canChangeActiveState={canChangeActiveState}
              onUpdate={onUpdate}
              onToggleType={onToggleType}
            />
          </Stack>
        </Box>
        <Divider />
        <Stack direction="row" spacing={1} className="p-4" sx={{ justifyContent: "flex-end" }}>
          <Button onClick={onClose}>Cancel</Button>
          <Button variant="contained" onClick={onSave} disabled={isSaving}>
            {isSaving ? "Saving..." : mode === "add" ? "Add Service" : "Save Changes"}
          </Button>
        </Stack>
      </Box>
    </Drawer>
  );
}

type EditorFieldsProps = Pick<
  EditorProps,
  "mode" | "form" | "trades" | "templates" | "canChangeActiveState" | "onUpdate" | "onToggleType"
>;

function ServiceEditorFields({
  mode,
  form,
  trades,
  templates,
  canChangeActiveState,
  onUpdate,
  onToggleType,
}: EditorFieldsProps) {
  return (
    <>
      <Typography variant="subtitle2" className="font-semibold">
        Service Information
      </Typography>
      <TextField
        label="Service Name"
        value={form.name}
        required
        fullWidth
        onChange={(event) => onUpdate("name", event.target.value)}
        placeholder="e.g., HVAC Inspection"
      />
      <FormControl fullWidth required>
        <InputLabel id="service-trade-label">Trade</InputLabel>
        <Select
          labelId="service-trade-label"
          label="Trade"
          value={form.trade}
          onChange={(event) => onUpdate("trade", event.target.value)}
        >
          {trades.map((trade) => (
            <MenuItem key={trade} value={trade}>
              {trade}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <FormControl fullWidth required>
        <InputLabel id="service-icon-label">Icon</InputLabel>
        <Select
          labelId="service-icon-label"
          label="Icon"
          value={form.iconKey}
          onChange={(event) => onUpdate("iconKey", event.target.value)}
          renderValue={(value) => {
            const icon = ICONS.find((item) => item.key === value);
            return icon ? (
              <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
                <icon.Icon size={18} />
                <span>{icon.label}</span>
              </Stack>
            ) : (
              "Pick an icon"
            );
          }}
        >
          {ICONS.map(({ key, label, Icon }) => (
            <MenuItem key={key} value={key}>
              <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
                <Icon size={18} />
                <span>{label}</span>
              </Stack>
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>Pre-selected from the Trade; you can change it.</FormHelperText>
      </FormControl>
      <Typography variant="subtitle2" className="font-semibold">
        Supported Work Order Types
      </Typography>
      <Stack direction="row" sx={{ flexWrap: "wrap", gap: 1 }}>
        {SERVICE_WORK_ORDER_TYPES.map((type) => (
          <FormControlLabel
            key={type}
            control={
              <Checkbox
                checked={form.supportedWorkOrderTypes.includes(type)}
                onChange={() => onToggleType(type)}
              />
            }
            label={type}
          />
        ))}
      </Stack>
      {mode === "edit" && canChangeActiveState && (
        <FormControlLabel
          control={
            <Switch
              checked={form.isActive ?? true}
              onChange={(event) => onUpdate("isActive", event.target.checked)}
            />
          }
          label="Active"
        />
      )}
      <Divider />
      <Typography variant="subtitle2" className="font-semibold">
        Completion Document
      </Typography>
      <FormControlLabel
        control={
          <Switch
            checked={form.requiresCompletionDocument}
            onChange={(event) => {
              onUpdate("requiresCompletionDocument", event.target.checked);
              if (!event.target.checked) onUpdate("completionDocTemplateId", null);
            }}
          />
        }
        label="Requires completion document"
      />
      {form.requiresCompletionDocument && (
        <Autocomplete
          options={templates}
          value={templates.find((template) => template.id === form.completionDocTemplateId) ?? null}
          onChange={(_, template) => onUpdate("completionDocTemplateId", template?.id ?? null)}
          getOptionLabel={(template) => template.name}
          isOptionEqualToValue={(option, value) => String(option.id) === String(value.id)}
          renderInput={(params) => (
            <TextField {...params} label="Linked Template" placeholder="Select a template" />
          )}
        />
      )}
      <Typography variant="caption" color="text.secondary">
        Manage the document&apos;s own content on the Completion Document Templates page.
      </Typography>
    </>
  );
}

function AlertMessage({ message }: { message: string }) {
  return (
    <Box className="rounded border border-red-200 bg-red-50 p-2 text-sm text-red-700">
      {message}
    </Box>
  );
}

type DeactivateProps = {
  service: Service | null;
  open: boolean;
  isPending: boolean;
  onClose: () => void;
  onConfirm: () => void;
};

export function DeactivateServiceDialog({
  service,
  open,
  isPending,
  onClose,
  onConfirm,
}: DeactivateProps) {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Deactivate this service?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {service?.name} will no longer be selectable for new work orders. Existing work orders
          will keep showing this service.
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button color="warning" variant="contained" onClick={onConfirm} disabled={isPending}>
          Deactivate
        </Button>
      </DialogActions>
    </Dialog>
  );
}