"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Phone, Mail, Users, StickyNote, Clock, AlertCircle, CalendarClock, Check, MoreHorizontal, Plus } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Button } from "@open-mercato/ui/primitives/button";
import { IconButton } from "@open-mercato/ui/primitives/icon-button";
import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
const TYPE_ICONS = {
  call: Phone,
  email: Mail,
  meeting: Users,
  note: StickyNote
};
function PlannedActivitiesSection({ activities, onComplete, onSchedule, onEdit, onCancel }) {
  const t = useT();
  if (activities.length === 0) return null;
  const now = /* @__PURE__ */ new Date();
  const classified = activities.map((activity) => {
    const scheduledDate = activity.scheduledAt ? new Date(activity.scheduledAt) : null;
    const isOverdue = scheduledDate ? scheduledDate < now : false;
    return { ...activity, isOverdue };
  });
  const overdue = classified.filter((a) => a.isOverdue);
  const upcoming = classified.filter((a) => !a.isOverdue);
  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", children: [
        /* @__PURE__ */ jsx(CalendarClock, { className: "size-4 text-muted-foreground" }),
        t("customers.timeline.planned.title", "Planned activities"),
        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground", children: activities.length }),
        overdue.length > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs font-medium text-destructive", children: [
          /* @__PURE__ */ jsx(AlertCircle, { className: "size-3" }),
          overdue.length,
          " ",
          t("customers.timeline.planned.overdueCount", "overdue")
        ] })
      ] }),
      onSchedule && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-7 text-xs", onClick: onSchedule, children: [
        /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-3" }),
        t("customers.timeline.planned.schedule", "Schedule")
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "divide-y", children: [
      overdue.map((activity) => {
        const TypeIcon = TYPE_ICONS[activity.interactionType];
        return /* @__PURE__ */ jsxs(
          "div",
          {
            className: "flex items-center gap-3 border-l-2 border-l-destructive px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors",
            onClick: () => onEdit?.(activity),
            role: "button",
            tabIndex: 0,
            onKeyDown: (e) => {
              if (e.key === "Enter") onEdit?.(activity);
            },
            children: [
              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-8 rounded-full bg-destructive/10 shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-4 text-destructive" }) : /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive" }) }),
              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium block truncate", children: activity.title ?? activity.body ?? activity.interactionType }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
                  /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 font-medium text-destructive", children: t("customers.timeline.planned.overdue", "Overdue") }),
                  /* @__PURE__ */ jsx("span", { children: activity.scheduledAt ? formatRelativeOverdue(activity.scheduledAt, t) : "" }),
                  activity.authorName && /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsx("span", { children: "\xB7" }),
                    /* @__PURE__ */ jsx("span", { children: activity.authorName })
                  ] })
                ] })
              ] }),
              onComplete && /* @__PURE__ */ jsxs(
                Button,
                {
                  type: "button",
                  variant: "outline",
                  size: "sm",
                  className: "h-7 shrink-0 text-xs",
                  onClick: (event) => {
                    event.stopPropagation();
                    onComplete(activity.id);
                  },
                  children: [
                    /* @__PURE__ */ jsx(Check, { className: "mr-1 size-3" }),
                    t("customers.timeline.planned.markDone", "Mark done")
                  ]
                }
              ),
              /* @__PURE__ */ jsxs(Popover, { children: [
                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "xs", "aria-label": t("customers.timeline.more", "More"), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" }) }) }),
                /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-40 p-1", children: [
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "button",
                      variant: "ghost",
                      size: "sm",
                      className: "w-full justify-start text-xs",
                      onClick: (event) => {
                        event.stopPropagation();
                        onEdit?.(activity);
                      },
                      children: t("customers.timeline.planned.reschedule", "Reschedule")
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "button",
                      variant: "ghost",
                      size: "sm",
                      className: "w-full justify-start text-xs text-destructive hover:text-destructive",
                      onClick: (event) => {
                        event.stopPropagation();
                        onCancel?.(activity.id);
                      },
                      children: t("customers.timeline.planned.cancel", "Cancel")
                    }
                  )
                ] })
              ] })
            ]
          },
          activity.id
        );
      }),
      upcoming.map((activity) => {
        const TypeIcon = TYPE_ICONS[activity.interactionType];
        return /* @__PURE__ */ jsxs(
          "div",
          {
            className: "flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 transition-colors",
            onClick: () => onEdit?.(activity),
            role: "button",
            tabIndex: 0,
            onKeyDown: (e) => {
              if (e.key === "Enter") onEdit?.(activity);
            },
            children: [
              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-8 rounded-full bg-muted shrink-0", children: TypeIcon ? /* @__PURE__ */ jsx(TypeIcon, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Clock, { className: "size-4 text-muted-foreground" }) }),
              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium block truncate", children: activity.title ?? activity.body ?? activity.interactionType }),
                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
                  /* @__PURE__ */ jsx("span", { children: activity.scheduledAt ? formatScheduledDate(activity.scheduledAt) : "" }),
                  activity.authorName && /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsx("span", { children: "\xB7" }),
                    /* @__PURE__ */ jsx("span", { children: activity.authorName })
                  ] })
                ] })
              ] }),
              /* @__PURE__ */ jsxs(Popover, { children: [
                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "xs", "aria-label": t("customers.timeline.more", "More"), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" }) }) }),
                /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-40 p-1", children: [
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "button",
                      variant: "ghost",
                      size: "sm",
                      className: "w-full justify-start text-xs",
                      onClick: (event) => {
                        event.stopPropagation();
                        onEdit?.(activity);
                      },
                      children: t("customers.timeline.planned.reschedule", "Reschedule")
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "button",
                      variant: "ghost",
                      size: "sm",
                      className: "w-full justify-start text-xs text-destructive hover:text-destructive",
                      onClick: (event) => {
                        event.stopPropagation();
                        onCancel?.(activity.id);
                      },
                      children: t("customers.timeline.planned.cancel", "Cancel")
                    }
                  )
                ] })
              ] })
            ]
          },
          activity.id
        );
      })
    ] })
  ] });
}
function formatRelativeOverdue(isoString, t) {
  try {
    const date = new Date(isoString);
    const now = /* @__PURE__ */ new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
    if (diffDays <= 0) return t("customers.timeline.planned.overdueToday", "due today");
    if (diffDays === 1) return t("customers.timeline.planned.overdueSince", "since yesterday");
    return t("customers.timeline.planned.overdueDays", "overdue {{days}} days", { days: diffDays });
  } catch {
    return "";
  }
}
function formatScheduledDate(isoString) {
  try {
    const date = new Date(isoString);
    const now = /* @__PURE__ */ new Date();
    const tomorrow = new Date(now);
    tomorrow.setDate(tomorrow.getDate() + 1);
    const dayName = date.toLocaleDateString(void 0, { weekday: "short" });
    const dateStr = date.toLocaleDateString(void 0, { day: "numeric", month: "short" });
    const timeStr = date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
    if (date.toDateString() === tomorrow.toDateString()) {
      return `Tomorrow ${timeStr}`;
    }
    return `${dayName}, ${dateStr} \xB7 ${timeStr}`;
  } catch {
    return isoString;
  }
}
export {
  PlannedActivitiesSection
};
//# sourceMappingURL=PlannedActivitiesSection.js.map
