"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import Link from "next/link";
import { Mail, Phone, Star, MoreHorizontal, ArrowUpRight, Unlink } from "lucide-react";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Badge } from "@open-mercato/ui/primitives/badge";
import { Button } from "@open-mercato/ui/primitives/button";
import { Avatar } from "@open-mercato/ui/primitives/avatar";
import { IconButton } from "@open-mercato/ui/primitives/icon-button";
import { Popover, PopoverContent, PopoverTrigger } from "@open-mercato/ui/primitives/popover";
import { formatDate, formatFallbackLabel } from "./utils.js";
const sourceColorMap = {
  linkedin: "border-status-info-icon text-status-info-icon",
  email: "border-status-success-icon text-status-success-icon",
  web_form: "border-status-info-icon text-status-info-icon",
  "web form": "border-status-info-icon text-status-info-icon",
  referral: "border-status-warning-icon text-status-warning-icon",
  customer_referral: "border-status-warning-icon text-status-warning-icon",
  "customer referral": "border-status-warning-icon text-status-warning-icon",
  partner_referral: "border-status-warning-icon text-status-warning-icon",
  "partner referral": "border-status-warning-icon text-status-warning-icon",
  event: "border-status-info-icon text-status-info-icon",
  "conference/event": "border-status-info-icon text-status-info-icon",
  cold_outreach: "border-status-neutral-icon text-status-neutral-icon",
  "cold outreach": "border-status-neutral-icon text-status-neutral-icon",
  facebook: "border-status-info-icon text-status-info-icon",
  typeform: "border-status-info-icon text-status-info-icon",
  other: "border-status-neutral-icon text-status-neutral-icon"
};
const temperatureConfig = {
  hot: { filled: 5, dotClassName: "bg-status-error-icon", labelKey: "customers.temperature.hot", fallback: "Hot Client" },
  warm: { filled: 4, dotClassName: "bg-status-warning-icon", labelKey: "customers.temperature.warm", fallback: "High Interest" },
  high: { filled: 4, dotClassName: "bg-status-warning-icon", labelKey: "customers.temperature.high", fallback: "High Interest" },
  neutral: { filled: 3, dotClassName: "bg-status-info-icon", labelKey: "customers.temperature.neutral", fallback: "Engaged" },
  medium: { filled: 3, dotClassName: "bg-status-info-icon", labelKey: "customers.temperature.medium", fallback: "Engaged" },
  cool: { filled: 2, dotClassName: "bg-status-neutral-icon", labelKey: "customers.temperature.cool", fallback: "Low Activity" },
  low: { filled: 2, dotClassName: "bg-status-neutral-icon", labelKey: "customers.temperature.low", fallback: "Low Activity" },
  cold: { filled: 1, dotClassName: "bg-status-neutral-icon", labelKey: "customers.temperature.cold", fallback: "At Risk" }
};
function splitSourceTags(source) {
  if (typeof source !== "string") return [];
  return source.split(/[;,|]/).map((entry) => entry.trim()).filter((entry, index, array) => entry.length > 0 && array.indexOf(entry) === index);
}
function PersonCard({ person, isStarred, onToggleStar, onUnlink }) {
  const t = useT();
  const sourceTags = React.useMemo(() => splitSourceTags(person.source), [person.source]);
  const temperature = React.useMemo(() => {
    const value = typeof person.temperature === "string" ? person.temperature.trim().toLowerCase() : "";
    return value in temperatureConfig ? temperatureConfig[value] : null;
  }, [person.temperature]);
  const linkedDate = React.useMemo(() => formatDate(person.linkedAt ?? person.createdAt), [person.createdAt, person.linkedAt]);
  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card p-4", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
        /* @__PURE__ */ jsx(Avatar, { label: person.displayName, size: "lg", variant: "monochrome" }),
        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [
            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-sm font-bold leading-5 text-foreground", children: person.displayName }),
            onToggleStar && /* @__PURE__ */ jsx(
              IconButton,
              {
                type: "button",
                variant: "ghost",
                size: "sm",
                onClick: () => onToggleStar(person.id),
                className: "h-auto shrink-0 p-0 text-muted-foreground hover:text-status-warning-icon",
                "aria-label": t("customers.people.card.toggleStar", "Toggle star"),
                children: /* @__PURE__ */ jsx(Star, { className: cn("size-3.5", isStarred && "fill-status-warning-icon text-status-warning-icon") })
              }
            )
          ] }),
          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
            person.jobTitle && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "max-w-full truncate px-2 py-0.5 text-xs font-semibold", children: person.jobTitle }),
            person.status && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "shrink-0 px-2 py-0.5 text-xs font-medium", children: [
              /* @__PURE__ */ jsx("span", { className: "mr-1 inline-block size-1.5 rounded-full bg-status-success-icon" }),
              person.status
            ] })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsxs(Popover, { children: [
        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
          IconButton,
          {
            type: "button",
            variant: "ghost",
            size: "xs",
            className: "shrink-0",
            "aria-label": t("customers.people.card.more", "More"),
            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
          }
        ) }),
        /* @__PURE__ */ jsx(PopoverContent, { align: "end", className: "w-36 p-1", children: onUnlink && /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "sm",
            className: "w-full justify-start text-xs text-destructive hover:text-destructive",
            onClick: () => onUnlink(person.id),
            children: [
              /* @__PURE__ */ jsx(Unlink, { className: "mr-1.5 size-3" }),
              t("customers.people.card.unlink", "Unlink")
            ]
          }
        ) })
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2 border-t pt-3 text-xs text-foreground", children: [
      person.primaryEmail && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
        /* @__PURE__ */ jsx(Mail, { className: "size-3 shrink-0 text-muted-foreground" }),
        /* @__PURE__ */ jsx("span", { className: "break-all", children: person.primaryEmail })
      ] }),
      person.primaryPhone && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
        /* @__PURE__ */ jsx(Phone, { className: "size-3 shrink-0 text-muted-foreground" }),
        /* @__PURE__ */ jsx("span", { className: "break-all", children: person.primaryPhone })
      ] }),
      (person.lifecycleStage || linkedDate) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsx("span", { className: "truncate", children: person.lifecycleStage ?? t("customers.people.card.defaultStage", "customer") }),
        linkedDate ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
          /* @__PURE__ */ jsx("span", { className: "truncate", children: t("customers.people.card.linkedOn", "Linked {{date}}", { date: linkedDate }) })
        ] }) : null
      ] })
    ] }),
    (temperature || sourceTags.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-3 border-t pt-3 sm:flex-row sm:items-start sm:justify-between", children: [
      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 space-y-1", children: sourceTags.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("p", { className: "text-overline font-bold uppercase tracking-wide text-muted-foreground", children: t("customers.people.card.source", "Source") }),
        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: sourceTags.map((sourceTag) => {
          const normalized = sourceTag.toLowerCase().replace(/\s+/g, "_");
          return /* @__PURE__ */ jsx(
            Badge,
            {
              variant: "outline",
              className: cn(
                "max-w-full truncate px-2 py-0.5 text-xs font-semibold",
                sourceColorMap[normalized] ?? sourceColorMap[sourceTag.toLowerCase()] ?? "border-border text-muted-foreground"
              ),
              children: formatFallbackLabel(sourceTag)
            },
            sourceTag
          );
        }) })
      ] }) : null }),
      temperature ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 sm:ml-auto sm:text-right", children: [
        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 text-overline font-bold text-muted-foreground sm:justify-end", children: /* @__PURE__ */ jsx("span", { children: t(temperature.labelKey, temperature.fallback) }) }),
        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 sm:justify-end", children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
          "span",
          {
            className: cn(
              "inline-block size-2 rounded-full border border-border/70",
              index < temperature.filled ? temperature.dotClassName : "bg-muted"
            )
          },
          index
        )) })
      ] }) : null
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-2 border-t pt-3 sm:flex-row sm:flex-wrap", children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          asChild: true,
          type: "button",
          variant: "outline",
          size: "sm",
          className: "h-8 w-full text-xs font-semibold sm:min-w-[9rem] sm:flex-1",
          children: /* @__PURE__ */ jsxs(Link, { href: `/backend/customers/people-v2/${person.id}`, children: [
            /* @__PURE__ */ jsx(ArrowUpRight, { className: "mr-1 size-3" }),
            t("customers.people.card.open", "Open person")
          ] })
        }
      ),
      onUnlink && /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "outline",
          size: "sm",
          className: "h-8 w-full border-destructive/30 text-xs font-semibold text-destructive hover:bg-destructive/10 sm:min-w-[7rem] sm:flex-none",
          onClick: () => onUnlink(person.id),
          children: t("customers.people.card.unlink", "Unlink")
        }
      )
    ] })
  ] });
}
export {
  PersonCard
};
//# sourceMappingURL=PersonCard.js.map
