"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Info, X } from "lucide-react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "@open-mercato/ui/primitives/button";
import { Dialog, DialogContent, DialogTitle } from "@open-mercato/ui/primitives/dialog";
import { IconButton } from "@open-mercato/ui/primitives/icon-button";
import { Switch } from "@open-mercato/ui/primitives/switch";
import { TagInput } from "@open-mercato/ui/primitives/tag-input";
import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
import { useDialogKeyHandler } from "@open-mercato/ui/hooks/useDialogKeyHandler";
import {
  MAX_ACTIVITY_TYPES,
  MAX_EVENT_CATEGORIES
} from "../../lib/calendar/preferences.js";
import { SegmentGroup } from "./editor/SegmentGroup.js";
function buildDraft(preferences, seedActivityTypes) {
  return {
    ...preferences,
    eventCategories: [...preferences.eventCategories],
    activityTypes: preferences.activityTypes.length > 0 ? [...preferences.activityTypes] : seedActivityTypes.slice(0, MAX_ACTIVITY_TYPES)
  };
}
function CalendarSettingsModal({
  open,
  preferences,
  seedActivityTypes,
  onOpenChange,
  onSave
}) {
  const t = useT();
  const [draft, setDraft] = React.useState(() => buildDraft(preferences, seedActivityTypes));
  const openRef = React.useRef(false);
  React.useEffect(() => {
    if (open && !openRef.current) setDraft(buildDraft(preferences, seedActivityTypes));
    openRef.current = open;
  }, [open, preferences, seedActivityTypes]);
  const handleSave = React.useCallback(() => {
    onSave(draft);
    onOpenChange(false);
  }, [draft, onOpenChange, onSave]);
  const handleKeyDown = useDialogKeyHandler({ onConfirm: handleSave });
  const toggle = (key) => (checked) => setDraft((current) => ({ ...current, [key]: checked }));
  const toggleRows = [
    { key: "showCrmActivities", label: t("customers.calendar.settings.showCrmActivities", "Show CRM activities on calendar") },
    { key: "aiSummaries", label: t("customers.calendar.settings.aiSummaries", "AI summaries & quick actions") },
    { key: "conflictWarnings", label: t("customers.calendar.settings.conflictWarnings", "Conflict warnings") },
    { key: "showWeekends", label: t("customers.calendar.settings.showWeekends", "Show weekends") }
  ];
  const title = t("customers.calendar.settings.title", "Customization");
  const removeTagLabel = React.useCallback(
    (tag) => t("customers.calendar.settings.removeTag", "Remove {tag}", { tag }),
    [t]
  );
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
    DialogContent,
    {
      onKeyDown: handleKeyDown,
      "aria-describedby": void 0,
      dismissible: false,
      className: "flex w-full max-w-[400px] flex-col gap-0 overflow-hidden rounded-2xl border-0 bg-card p-0 shadow-xl",
      children: [
        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start gap-3.5 border-b border-border py-4 pl-5 pr-4", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-5 text-foreground", children: title }),
            /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: t("customers.calendar.settings.subtitle", "Customise your calendar module.") })
          ] }),
          /* @__PURE__ */ jsx(
            IconButton,
            {
              variant: "ghost",
              size: "sm",
              onClick: () => onOpenChange(false),
              "aria-label": t("customers.calendar.settings.close", "Close"),
              className: "shrink-0 text-muted-foreground",
              children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-5" })
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-5", children: [
          /* @__PURE__ */ jsx(
            SettingsTagInput,
            {
              label: t("customers.calendar.settings.eventCategories", "Event Categories"),
              maxLabel: t("customers.calendar.settings.max", "(max. {count})", { count: MAX_EVENT_CATEGORIES }),
              hint: t(
                "customers.calendar.settings.eventCategoriesHint",
                "Your own grouping labels (e.g. Team Meeting, Sales Call). Offered when creating an event."
              ),
              placeholder: t("customers.calendar.settings.addCategory", "Add a category\u2026"),
              value: draft.eventCategories,
              maxTags: MAX_EVENT_CATEGORIES,
              removeTagLabel,
              onChange: (eventCategories) => setDraft((current) => ({ ...current, eventCategories }))
            }
          ),
          /* @__PURE__ */ jsx(
            SettingsTagInput,
            {
              label: t("customers.calendar.settings.activityTypes", "Activity Types"),
              maxLabel: t("customers.calendar.settings.max", "(max. {count})", { count: MAX_ACTIVITY_TYPES }),
              hint: t(
                "customers.calendar.settings.activityTypesHint",
                "The activity types your calendar surfaces when creating an event. Seeded from your workspace dictionary."
              ),
              placeholder: t("customers.calendar.settings.addType", "Add a type\u2026"),
              value: draft.activityTypes,
              maxTags: MAX_ACTIVITY_TYPES,
              removeTagLabel,
              onChange: (activityTypes) => setDraft((current) => ({ ...current, activityTypes }))
            }
          ),
          toggleRows.map((row) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
              /* @__PURE__ */ jsx(
                Switch,
                {
                  checked: draft[row.key],
                  onCheckedChange: toggle(row.key),
                  "aria-label": row.label
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "text-sm leading-5 text-foreground", children: row.label })
            ] }),
            row.key === "conflictWarnings" && draft.conflictWarnings ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 pl-11", children: [
              /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 text-muted-foreground", children: t(
                "customers.calendar.settings.conflictScopeHint",
                "Choose whose overlaps the calendar flags as conflicts."
              ) }),
              /* @__PURE__ */ jsx(
                SegmentGroup,
                {
                  ariaLabel: t("customers.calendar.settings.conflictScope", "Conflict scope"),
                  value: draft.conflictScope,
                  onChange: (conflictScope) => setDraft((current) => ({ ...current, conflictScope })),
                  options: [
                    { value: "mine", label: t("customers.calendar.settings.conflictScopeMine", "My meetings") },
                    { value: "all", label: t("customers.calendar.settings.conflictScopeAll", "All meetings") }
                  ]
                }
              )
            ] }) : null
          ] }, row.key))
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 border-t border-border px-5 py-4", children: [
          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: "flex-1", onClick: () => onOpenChange(false), children: t("customers.calendar.settings.cancel", "Cancel") }),
          /* @__PURE__ */ jsx(Button, { type: "button", className: "flex-1", onClick: handleSave, children: t("customers.calendar.settings.save", "Save Changes") })
        ] })
      ]
    }
  ) });
}
function SettingsTagInput({ label, maxLabel, hint, placeholder, value, maxTags, removeTagLabel, onChange }) {
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-5 text-foreground", children: label }),
      /* @__PURE__ */ jsx("span", { className: "text-sm leading-5 text-muted-foreground", children: maxLabel }),
      /* @__PURE__ */ jsx(SimpleTooltip, { content: hint, children: /* @__PURE__ */ jsx("span", { className: "inline-flex text-muted-foreground", tabIndex: 0, role: "img", "aria-label": hint, children: /* @__PURE__ */ jsx(Info, { "aria-hidden": true, className: "size-4" }) }) })
    ] }),
    /* @__PURE__ */ jsx(
      TagInput,
      {
        value,
        onChange,
        placeholder,
        maxTags,
        "aria-label": label,
        removeTagLabel
      }
    )
  ] });
}
export {
  CalendarSettingsModal
};
//# sourceMappingURL=CalendarSettingsModal.js.map
