"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Building2, Loader2, Pencil, X } from "lucide-react";
import { Button } from "@open-mercato/ui/primitives/button";
import { FormHeader } from "@open-mercato/ui/backend/forms";
import { VersionHistoryAction } from "@open-mercato/ui/backend/version-history";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { readApiResultOrThrow } from "@open-mercato/ui/backend/utils/apiCall";
import { cn } from "@open-mercato/shared/lib/utils";
import { CompanySelectField } from "../formConfig.js";
import {
  InlineTextEditor,
  InlineDictionaryEditor,
  InlineNextInteractionEditor
} from "./InlineEditors.js";
function PersonHighlights({
  person,
  profile,
  validators,
  onDisplayNameSave,
  onPrimaryEmailSave,
  onPrimaryPhoneSave,
  onStatusSave,
  onNextInteractionSave,
  onDelete,
  isDeleting,
  onCompanySave,
  utilityActions
}) {
  const router = useRouter();
  const t = useT();
  const runMutation = React.useCallback(async (operation) => operation(), []);
  const [editingCompany, setEditingCompany] = React.useState(false);
  const [companyDraftId, setCompanyDraftId] = React.useState("");
  const [company, setCompany] = React.useState(null);
  const [companyLoading, setCompanyLoading] = React.useState(false);
  const [companyError, setCompanyError] = React.useState(null);
  const [companySaving, setCompanySaving] = React.useState(false);
  const companyHref = React.useMemo(
    () => company ? `/backend/customers/companies/${encodeURIComponent(company.id)}` : null,
    [company]
  );
  const isCompanyInteractive = !editingCompany && !companyLoading && !companyError && Boolean(companyHref);
  const navigateToCompany = React.useCallback(() => {
    if (!companyHref) return;
    router.push(companyHref);
  }, [companyHref]);
  const handleCompanyClick = React.useCallback(
    (event) => {
      if (!isCompanyInteractive || !companyHref) return;
      const target = event.target;
      if (target.closest("button")) return;
      if (event.defaultPrevented) return;
      if (event.button !== 0) return;
      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
        if (typeof window !== "undefined") {
          window.open(companyHref, "_blank", "noopener,noreferrer");
        }
        return;
      }
      navigateToCompany();
    },
    [companyHref, isCompanyInteractive, navigateToCompany]
  );
  const handleCompanyKeyDown = React.useCallback(
    (event) => {
      if (!isCompanyInteractive) return;
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        navigateToCompany();
      }
    },
    [isCompanyInteractive, navigateToCompany]
  );
  const activeCompanyId = profile?.companyEntityId ?? null;
  const historyFallbackId = profile?.id && profile.id !== person.id ? profile.id : void 0;
  const loadCompany = React.useCallback(async (companyId) => {
    if (!companyId) {
      setCompany(null);
      return;
    }
    setCompanyLoading(true);
    setCompanyError(null);
    try {
      const payload = await readApiResultOrThrow(
        `/api/customers/companies?id=${encodeURIComponent(companyId)}`,
        void 0,
        { errorMessage: t("customers.people.detail.company.loadError", "Unable to load company information.") }
      );
      const items = Array.isArray(payload?.items) ? payload.items : [];
      const item = items.find((entry) => {
        if (!entry) return false;
        const rawId = entry.id;
        if (typeof rawId === "string") return rawId === companyId;
        if (typeof rawId === "number") return String(rawId) === companyId;
        return false;
      });
      if (item && typeof item.display_name === "string") {
        setCompany({ id: companyId, name: item.display_name });
      } else if (item && typeof item.displayName === "string") {
        setCompany({ id: companyId, name: item.displayName });
      } else {
        setCompany({ id: companyId, name: t("customers.people.detail.company.unknown", "Unknown company") });
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : t("customers.people.detail.company.loadError", "Unable to load company.");
      setCompanyError(message);
      setCompany(null);
    } finally {
      setCompanyLoading(false);
    }
  }, [t]);
  React.useEffect(() => {
    setCompanyDraftId(activeCompanyId ?? "");
    loadCompany(activeCompanyId).catch(() => {
    });
  }, [activeCompanyId, loadCompany]);
  const handleCompanySave = React.useCallback(async () => {
    if (companySaving) return;
    setCompanySaving(true);
    setCompanyError(null);
    const nextId = companyDraftId.trim();
    try {
      await runMutation(async () => {
        await onCompanySave(nextId.length ? nextId : null);
      });
      await loadCompany(nextId.length ? nextId : null);
      setEditingCompany(false);
    } catch (err) {
      const message = err instanceof Error ? err.message : t("customers.people.detail.company.saveError", "Unable to update company.");
      setCompanyError(message);
    } finally {
      setCompanySaving(false);
    }
  }, [companyDraftId, companySaving, loadCompany, onCompanySave, runMutation, t]);
  const handleCompanyClear = React.useCallback(async () => {
    if (companySaving) return;
    setCompanySaving(true);
    setCompanyError(null);
    try {
      await runMutation(async () => {
        await onCompanySave(null);
      });
      await loadCompany(null);
      setCompanyDraftId("");
      setEditingCompany(false);
    } catch (err) {
      const message = err instanceof Error ? err.message : t("customers.people.detail.company.saveError", "Unable to update company.");
      setCompanyError(message);
    } finally {
      setCompanySaving(false);
    }
  }, [companySaving, loadCompany, onCompanySave, runMutation, t]);
  const companyPanel = /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "group rounded-lg border bg-muted/30 p-3",
        isCompanyInteractive ? "cursor-pointer transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : null
      ),
      role: isCompanyInteractive ? "link" : void 0,
      tabIndex: isCompanyInteractive ? 0 : void 0,
      onClick: handleCompanyClick,
      onKeyDown: handleCompanyKeyDown,
      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
          /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs uppercase tracking-wide text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Building2, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
            t("customers.people.detail.company.label", "Company")
          ] }),
          editingCompany ? /* @__PURE__ */ jsxs(
            "div",
            {
              className: "space-y-3",
              onKeyDown: (event) => {
                if (event.key === "Escape") {
                  event.preventDefault();
                  if (!companySaving) {
                    setEditingCompany(false);
                    setCompanyError(null);
                    setCompanyDraftId(activeCompanyId ?? "");
                  }
                }
                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
                  event.preventDefault();
                  if (!companySaving) {
                    void handleCompanySave();
                  }
                }
              },
              children: [
                /* @__PURE__ */ jsx(
                  CompanySelectField,
                  {
                    value: companyDraftId || void 0,
                    onChange: (next) => setCompanyDraftId(next ?? ""),
                    labels: {
                      placeholder: t("customers.people.form.company.placeholder"),
                      addLabel: t("customers.people.form.company.add"),
                      addPrompt: t("customers.people.form.company.prompt"),
                      dialogTitle: t("customers.people.form.company.dialogTitle"),
                      inputLabel: t("customers.people.form.company.inputLabel"),
                      inputPlaceholder: t("customers.people.form.company.inputPlaceholder"),
                      emptyError: t("customers.people.form.dictionary.errorRequired"),
                      cancelLabel: t("customers.people.form.dictionary.cancel"),
                      saveLabel: t("customers.people.form.dictionary.save"),
                      errorLoad: t("customers.people.form.dictionary.errorLoad"),
                      errorSave: t("customers.people.form.dictionary.error"),
                      loadingLabel: t("customers.people.form.company.loading")
                    }
                  }
                ),
                companyError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text", children: companyError }) : null,
                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
                  /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: handleCompanySave, disabled: companySaving, children: [
                    companySaving ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-3.5 w-3.5 animate-spin" }) : null,
                    t("ui.forms.actions.save")
                  ] }),
                  /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => {
                    setEditingCompany(false);
                    setCompanyError(null);
                    setCompanyDraftId(activeCompanyId ?? "");
                  }, disabled: companySaving, children: t("ui.forms.actions.cancel") }),
                  /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: handleCompanyClear, disabled: companySaving, children: t("ui.forms.actions.clear") })
                ] })
              ]
            }
          ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 text-sm", children: companyLoading ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-muted-foreground", children: [
            /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
            t("customers.people.detail.company.loading", "Loading company\u2026")
          ] }) : company ? /* @__PURE__ */ jsx("span", { className: "text-primary transition group-hover:underline", children: t("customers.people.detail.company.current", void 0, { company: company.name }) }) : companyError ? /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error-text", children: companyError }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("customers.people.detail.company.empty", "No company assigned") }) })
        ] }),
        /* @__PURE__ */ jsxs(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "icon",
            onClick: () => {
              if (companySaving) return;
              setEditingCompany((prev) => !prev);
              setCompanyError(null);
              setCompanyDraftId(activeCompanyId ?? "");
            },
            className: editingCompany ? "opacity-100" : "opacity-0 transition-opacity duration-150 group-hover:opacity-100 hover:opacity-100 focus-visible:opacity-100",
            children: [
              editingCompany ? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }),
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: editingCompany ? t("ui.forms.actions.cancel") : t("ui.forms.actions.edit") })
            ]
          }
        )
      ] })
    }
  );
  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsx(
      FormHeader,
      {
        mode: "detail",
        backHref: "/backend/customers/people",
        backLabel: t("customers.people.detail.actions.backToList"),
        utilityActions: /* @__PURE__ */ jsxs(Fragment, { children: [
          utilityActions,
          /* @__PURE__ */ jsx(
            VersionHistoryAction,
            {
              config: {
                resourceKind: "customers.person",
                resourceId: person.id,
                resourceIdFallback: historyFallbackId,
                organizationId: person.organizationId ?? void 0
              },
              t
            }
          )
        ] }),
        title: /* @__PURE__ */ jsx(
          InlineTextEditor,
          {
            label: t("customers.people.form.displayName.label"),
            value: person.displayName,
            placeholder: t("customers.people.form.displayName.placeholder"),
            emptyLabel: t("customers.people.detail.noValue"),
            validator: validators.displayName,
            onSave: onDisplayNameSave,
            hideLabel: true,
            variant: "plain",
            activateOnClick: true,
            triggerClassName: "opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100",
            containerClassName: "max-w-full"
          }
        ),
        onDelete: () => {
          onDelete();
        },
        isDeleting,
        deleteLabel: t("customers.people.list.actions.delete")
      }
    ),
    companyPanel,
    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [
      /* @__PURE__ */ jsx(
        InlineTextEditor,
        {
          label: t("customers.people.detail.highlights.primaryEmail"),
          value: person.primaryEmail || "",
          placeholder: t("customers.people.form.primaryEmail"),
          emptyLabel: t("customers.people.detail.noValue"),
          type: "email",
          validator: validators.email,
          recordId: person.id,
          activateOnClick: true,
          onSave: onPrimaryEmailSave
        }
      ),
      /* @__PURE__ */ jsx(
        InlineTextEditor,
        {
          label: t("customers.people.detail.highlights.primaryPhone"),
          value: person.primaryPhone || "",
          placeholder: t("customers.people.form.primaryPhone"),
          emptyLabel: t("customers.people.detail.noValue"),
          type: "tel",
          validator: validators.phone,
          recordId: person.id,
          activateOnClick: true,
          onSave: onPrimaryPhoneSave
        }
      ),
      /* @__PURE__ */ jsx(
        InlineDictionaryEditor,
        {
          label: t("customers.people.detail.highlights.status"),
          value: person.status ?? null,
          emptyLabel: t("customers.people.detail.noValue"),
          activateOnClick: true,
          onSave: onStatusSave,
          kind: "statuses"
        }
      ),
      /* @__PURE__ */ jsx(
        InlineNextInteractionEditor,
        {
          label: t("customers.people.detail.highlights.nextInteraction"),
          valueAt: person.nextInteractionAt || null,
          valueName: person.nextInteractionName || null,
          valueRefId: person.nextInteractionRefId || null,
          valueIcon: person.nextInteractionIcon || null,
          valueColor: person.nextInteractionColor || null,
          emptyLabel: t("customers.people.detail.noValue"),
          onSave: onNextInteractionSave,
          activateOnClick: true
        }
      )
    ] })
  ] });
}
var PersonHighlights_default = PersonHighlights;
export {
  PersonHighlights,
  PersonHighlights_default as default
};
//# sourceMappingURL=PersonHighlights.js.map
