"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Check, ListTodo, Phone, Mail, Users, StickyNote, User } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "@open-mercato/ui/primitives/button";
import { AiActionChips } from "./AiActionChips.js";
import { isOpenInteractionStatus } from "../../lib/interactionStatus.js";
const TYPE_ICONS = {
  call: Phone,
  email: Mail,
  meeting: Users,
  note: StickyNote,
  task: ListTodo
};
function ActivityTimeline({ activities, onEdit, onMarkDone }) {
  const t = useT();
  if (activities.length === 0) {
    return /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: t("customers.timeline.empty", "No activities match the current filters.") });
  }
  return /* @__PURE__ */ jsx("div", { children: activities.map((activity, index) => {
    const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt;
    const activityYear = dateStr ? new Date(dateStr).getFullYear() : null;
    const prevDateStr = index > 0 ? activities[index - 1].scheduledAt ?? activities[index - 1].occurredAt ?? activities[index - 1].createdAt : null;
    const prevYear = prevDateStr ? new Date(prevDateStr).getFullYear() : null;
    const showYearSeparator = activityYear !== null && prevYear !== null && activityYear !== prevYear;
    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
      showYearSeparator && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-3 px-5", children: [
        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" }),
        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: t("customers.activities.yearSeparator", "{year}", { year: activityYear }) }),
        /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
      ] }),
      /* @__PURE__ */ jsx(
        TimelineEntry,
        {
          activity,
          t,
          withBorder: index < activities.length - 1,
          onEdit,
          onMarkDone
        }
      )
    ] }, activity.id);
  }) });
}
function TimelineEntry({
  activity,
  t,
  withBorder,
  onEdit,
  onMarkDone
}) {
  const dateStr = activity.scheduledAt ?? activity.occurredAt ?? activity.createdAt;
  const TypeIcon = TYPE_ICONS[activity.interactionType];
  const title = activity.title ?? activity.body ?? activity.interactionType;
  const duration = activity.duration ? ` (${activity.duration} min)` : "";
  const isOpen = isOpenInteractionStatus(activity.status);
  const [markingDone, setMarkingDone] = React.useState(false);
  const handleMarkDone = React.useCallback(async (event) => {
    event.stopPropagation();
    if (!onMarkDone || markingDone) return;
    setMarkingDone(true);
    try {
      await onMarkDone(activity.id, activity.updatedAt);
    } finally {
      setMarkingDone(false);
    }
  }, [activity.id, markingDone, onMarkDone]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: `py-2.5 ${withBorder ? "border-b border-border/60" : ""} ${onEdit ? "cursor-pointer hover:bg-accent/40 transition-colors" : ""}`,
      onClick: () => onEdit?.(activity),
      role: onEdit ? "button" : void 0,
      tabIndex: onEdit ? 0 : void 0,
      onKeyDown: onEdit ? (e) => {
        if (e.key === "Enter") onEdit(activity);
      } : void 0,
      children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-3", style: { gridTemplateColumns: "75px 32px 1fr" }, children: [
        /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
          /* @__PURE__ */ jsx("span", { className: "block text-[11px] font-semibold leading-tight text-foreground", children: formatRelativeDate(dateStr, t) }),
          /* @__PURE__ */ jsx("span", { className: "block text-[10px] leading-tight text-muted-foreground", children: formatTime(dateStr) })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-md bg-muted shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-3.5 text-muted-foreground" }) : null }),
        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
            /* @__PURE__ */ jsxs("span", { className: "block text-[12px] font-semibold leading-tight text-foreground", children: [
              title,
              duration
            ] }),
            isOpen && onMarkDone ? /* @__PURE__ */ jsxs(
              Button,
              {
                type: "button",
                variant: "default",
                size: "sm",
                disabled: markingDone,
                onClick: handleMarkDone,
                className: "shrink-0",
                children: [
                  /* @__PURE__ */ jsx(Check, { className: "size-3.5" }),
                  t("customers.activities.actions.markDone", "Mark done")
                ]
              }
            ) : null
          ] }),
          activity.body && activity.title && /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: activity.body }),
          activity.authorName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[10px] text-muted-foreground", children: [
            /* @__PURE__ */ jsx(User, { className: "size-2.5 shrink-0" }),
            /* @__PURE__ */ jsx("span", { children: t("customers.timeline.author", "by {{name}}", { name: activity.authorName }) })
          ] }),
          /* @__PURE__ */ jsx(AiActionChips, { activityType: activity.interactionType })
        ] })
      ] })
    }
  );
}
function formatRelativeDate(isoString, t) {
  try {
    const date = new Date(isoString);
    const now = /* @__PURE__ */ new Date();
    const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    const nowDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const diffDays = Math.round((nowDay.getTime() - dateDay.getTime()) / (1e3 * 60 * 60 * 24));
    if (diffDays === 0) return t("customers.timeline.date.today", "today");
    if (diffDays === 1) return t("customers.timeline.date.yesterday", "yesterday");
    return date.toLocaleDateString(void 0, { day: "numeric", month: "short" });
  } catch {
    return "";
  }
}
function formatTime(isoString) {
  try {
    return new Date(isoString).toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
  } catch {
    return "";
  }
}
export {
  ActivityTimeline
};
//# sourceMappingURL=ActivityTimeline.js.map
