"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { Textarea } from "@open-mercato/ui/primitives/textarea";
import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
import { Label } from "@open-mercato/ui/primitives/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@open-mercato/ui/primitives/select";
import { Separator } from "@open-mercato/ui/primitives/separator";
import { JsonDisplay } from "@open-mercato/ui/backend/JsonDisplay";
import { useT } from "@open-mercato/shared/lib/i18n/context";
function MobileTaskForm({
  task,
  formData,
  comments,
  submitting,
  isCompletable,
  isOverdue,
  onFieldChange,
  onCommentsChange,
  onSubmit,
  onCancel,
  getStatusBadgeClass
}) {
  const t = useT();
  const fieldValue = (fieldName) => {
    const val = formData[fieldName];
    if (val == null || val === false) return "";
    if (typeof val === "boolean") return "";
    return val;
  };
  const renderFormField = (fieldName, fieldSchema) => {
    const fieldType = fieldSchema.type || "string";
    const fieldTitle = fieldSchema.title || fieldName;
    const fieldDescription = fieldSchema.description;
    const required = task.formSchema?.required?.includes(fieldName) || false;
    const enumValues = fieldSchema.enum;
    if (enumValues && Array.isArray(enumValues)) {
      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
          fieldTitle,
          required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
        ] }),
        fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
        /* @__PURE__ */ jsxs(
          Select,
          {
            value: fieldValue(fieldName) ? String(fieldValue(fieldName)) : void 0,
            onValueChange: (value) => onFieldChange(fieldName, value ?? ""),
            children: [
              /* @__PURE__ */ jsx(SelectTrigger, { id: fieldName, size: "lg", "aria-required": required, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("workflows.tasks.detail.form.selectOption") }) }),
              /* @__PURE__ */ jsx(SelectContent, { children: enumValues.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, children: value }, value)) })
            ]
          }
        )
      ] }, fieldName);
    }
    switch (fieldType) {
      case "string":
        if (fieldSchema.maxLength && fieldSchema.maxLength > 200) {
          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
            /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
              fieldTitle,
              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
            ] }),
            fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
            /* @__PURE__ */ jsx(
              Textarea,
              {
                id: fieldName,
                value: fieldValue(fieldName),
                onChange: (e) => onFieldChange(fieldName, e.target.value),
                required,
                rows: 4,
                className: "text-base"
              }
            )
          ] }, fieldName);
        }
        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
            fieldTitle,
            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
          ] }),
          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
          /* @__PURE__ */ jsx(
            Input,
            {
              type: fieldSchema.format === "email" ? "email" : fieldSchema.format === "date" ? "date" : "text",
              id: fieldName,
              value: fieldValue(fieldName),
              onChange: (e) => onFieldChange(fieldName, e.target.value),
              required,
              className: "h-11 text-base"
            }
          )
        ] }, fieldName);
      case "number":
      case "integer":
        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
            fieldTitle,
            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
          ] }),
          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
          /* @__PURE__ */ jsx(
            Input,
            {
              type: "number",
              id: fieldName,
              value: fieldValue(fieldName),
              onChange: (e) => onFieldChange(fieldName, e.target.value ? Number(e.target.value) : ""),
              required,
              step: fieldType === "integer" ? 1 : "any",
              className: "h-11 text-base"
            }
          )
        ] }, fieldName);
      case "boolean":
        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 h-11", children: [
            /* @__PURE__ */ jsx(
              Checkbox,
              {
                id: fieldName,
                checked: !!formData[fieldName],
                onCheckedChange: (checked) => onFieldChange(fieldName, !!checked)
              }
            ),
            /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "font-medium", children: [
              fieldTitle,
              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
            ] })
          ] }),
          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription })
        ] }, fieldName);
      default:
        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
            fieldTitle,
            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
          ] }),
          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
          /* @__PURE__ */ jsx(
            Input,
            {
              type: "text",
              id: fieldName,
              value: fieldValue(fieldName),
              onChange: (e) => onFieldChange(fieldName, e.target.value),
              required,
              className: "h-11 text-base"
            }
          )
        ] }, fieldName);
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 pb-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold", children: task.taskName }),
      /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(task.status)}`, children: t(`workflows.tasks.statuses.${task.status}`) })
    ] }),
    task.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: task.description }),
    isOverdue && /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text font-medium", children: t("workflows.tasks.detail.overdueWarning") }) }),
    /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2.5", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.tasks.detail.sections.taskInfo") }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
            t("workflows.tasks.fields.createdAt"),
            ":"
          ] }),
          /* @__PURE__ */ jsx("span", { className: "text-right text-xs", children: new Date(task.createdAt).toLocaleString() })
        ] }),
        task.dueDate && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
            t("workflows.tasks.fields.dueDate"),
            ":"
          ] }),
          /* @__PURE__ */ jsx("span", { className: `text-right text-xs ${isOverdue ? "text-status-error-text font-medium" : ""}`, children: new Date(task.dueDate).toLocaleString() })
        ] }),
        task.assignedTo && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
            t("workflows.tasks.detail.assignedTo"),
            ":"
          ] }),
          /* @__PURE__ */ jsx("span", { className: "text-right", children: task.assignedTo })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
            t("workflows.tasks.detail.workflowInstance"),
            ":"
          ] }),
          /* @__PURE__ */ jsxs(
            Link,
            {
              href: `/backend/instances/${task.workflowInstanceId}`,
              className: "text-primary hover:underline text-xs font-mono",
              children: [
                task.workflowInstanceId.slice(0, 8),
                "..."
              ]
            }
          )
        ] })
      ] })
    ] }),
    !isCompletable && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.tasks.detail.cannotComplete") }) }),
    isCompletable && /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
      task.formSchema?.properties && /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(Separator, {}),
        /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: t("workflows.tasks.detail.sections.form") }),
        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.keys(task.formSchema.properties).map(
          (fieldName) => renderFormField(fieldName, task.formSchema.properties[fieldName])
        ) })
      ] }),
      !task.formSchema?.properties && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.tasks.detail.noFormSchema") }) }),
      /* @__PURE__ */ jsx(Separator, {}),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsxs(Label, { htmlFor: "m-comments", children: [
          t("workflows.tasks.detail.comments"),
          " (",
          t("workflows.tasks.detail.optional"),
          ")"
        ] }),
        /* @__PURE__ */ jsx(
          Textarea,
          {
            id: "m-comments",
            value: comments,
            onChange: (e) => onCommentsChange(e.target.value),
            rows: 3,
            className: "text-base",
            placeholder: t("workflows.tasks.detail.commentsPlaceholder")
          }
        )
      ] }),
      /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 border-t bg-background p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
        /* @__PURE__ */ jsx(
          Button,
          {
            type: "submit",
            disabled: submitting,
            className: "flex-1 h-11",
            children: submitting ? t("workflows.tasks.detail.submitting") : t("workflows.tasks.detail.completeTask")
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            type: "button",
            variant: "outline",
            onClick: onCancel,
            disabled: submitting,
            className: "h-11",
            children: t("common.cancel")
          }
        )
      ] }) })
    ] }),
    task.status === "COMPLETED" && task.formData && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Separator, {}),
      /* @__PURE__ */ jsx(
        JsonDisplay,
        {
          data: task.formData,
          title: t("workflows.tasks.detail.sections.submittedData"),
          maxInitialDepth: 2
        }
      ),
      task.comments && /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-3", children: [
        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground mb-1", children: [
          t("workflows.tasks.detail.comments"),
          ":"
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: task.comments })
      ] })
    ] })
  ] });
}
export {
  MobileTaskForm
};
//# sourceMappingURL=MobileTaskForm.js.map
