"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ImagePlus, Loader2, RotateCcw, Save } from "lucide-react";
import { Page, PageBody, PageHeader } from "@open-mercato/ui/backend/Page";
import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
import { flash } from "@open-mercato/ui/backend/FlashMessages";
import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
import { apiCallOrThrow, readApiResultOrThrow, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const BRANDING_API = "/api/directory/organization-branding";
const BRANDING_ENTITY_ID = "directory.organization";
function OrganizationBrandingPage() {
  const t = useT();
  const queryClient = useQueryClient();
  const [logoUrl, setLogoUrl] = React.useState("");
  const [selectedFile, setSelectedFile] = React.useState(null);
  const [filePreviewUrl, setFilePreviewUrl] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const fileInputRef = React.useRef(null);
  const { runMutation } = useGuardedMutation({
    contextId: "directory.organization-branding",
    blockedMessage: t("directory.branding.errors.blocked", "Branding save was blocked.")
  });
  const { data, isLoading, error } = useQuery({
    queryKey: ["directory-organization-branding"],
    queryFn: () => readApiResultOrThrow(
      BRANDING_API,
      void 0,
      { errorMessage: t("directory.branding.errors.load", "Failed to load organization branding") }
    )
  });
  React.useEffect(() => {
    setLogoUrl(data?.logoUrl ?? "");
    setSelectedFile(null);
  }, [data?.logoUrl]);
  React.useEffect(() => {
    if (!selectedFile || typeof URL === "undefined") {
      setFilePreviewUrl(null);
      return;
    }
    const nextPreviewUrl = URL.createObjectURL(selectedFile);
    setFilePreviewUrl(nextPreviewUrl);
    return () => URL.revokeObjectURL(nextPreviewUrl);
  }, [selectedFile]);
  const currentPreviewUrl = filePreviewUrl ?? logoUrl;
  const uploadLogo = React.useCallback(async (organizationId) => {
    if (!selectedFile) return null;
    const form = new FormData();
    form.set("entityId", BRANDING_ENTITY_ID);
    form.set("recordId", organizationId);
    form.set("file", selectedFile);
    form.set("tags", JSON.stringify(["organization-logo"]));
    const upload = await readApiResultOrThrow(
      "/api/attachments",
      {
        method: "POST",
        body: form
      },
      { errorMessage: t("directory.branding.errors.upload", "Failed to upload logo") }
    );
    return upload?.item.thumbnailUrl ?? upload?.item.url ?? null;
  }, [selectedFile, t]);
  const saveBranding = React.useCallback(async (nextLogoUrl, options) => {
    if (!data) return;
    const shouldUpload = Boolean(selectedFile && !options?.skipUpload);
    setSaving(true);
    try {
      await runMutation({
        operation: async () => {
          const uploadedLogoUrl = shouldUpload ? await uploadLogo(data.organizationId) : null;
          const resolvedLogoUrl = uploadedLogoUrl ?? nextLogoUrl ?? logoUrl.trim();
          const response = await withScopedApiRequestHeaders(
            buildOptimisticLockHeader(data.updatedAt),
            () => apiCallOrThrow(
              BRANDING_API,
              {
                method: "PUT",
                headers: { "content-type": "application/json" },
                body: JSON.stringify({ logoUrl: resolvedLogoUrl || null })
              },
              { errorMessage: t("directory.branding.errors.save", "Failed to update organization branding") }
            )
          );
          return response.result;
        },
        context: {
          entityId: BRANDING_ENTITY_ID,
          recordId: data.organizationId,
          operation: "update-branding"
        },
        mutationPayload: {
          organizationId: data.organizationId,
          logoUrl: (nextLogoUrl ?? logoUrl.trim()) || null,
          hasUpload: shouldUpload
        }
      });
      await queryClient.invalidateQueries({ queryKey: ["directory-organization-branding"] });
      window.dispatchEvent(new Event("om:refresh-sidebar"));
      setSelectedFile(null);
      if (fileInputRef.current) fileInputRef.current.value = "";
      flash(t("directory.branding.flash.saved", "Organization branding updated"), "success");
    } catch (err) {
      if (surfaceRecordConflict(err, t)) return;
      const fallback = t("directory.branding.errors.save", "Failed to update organization branding");
      const message = err instanceof Error ? err.message : fallback;
      flash(message, "error");
    } finally {
      setSaving(false);
    }
  }, [data, logoUrl, queryClient, runMutation, selectedFile, t, uploadLogo]);
  const handleSubmit = React.useCallback((event) => {
    event.preventDefault();
    void saveBranding();
  }, [saveBranding]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(LoadingMessage, { label: t("directory.branding.loading", "Loading organization branding...") });
  }
  if (error || !data) {
    return /* @__PURE__ */ jsx(
      ErrorMessage,
      {
        label: t("directory.branding.errors.load", "Failed to load organization branding"),
        description: error instanceof Error ? error.message : void 0
      }
    );
  }
  return /* @__PURE__ */ jsxs(Page, { children: [
    /* @__PURE__ */ jsx(
      PageHeader,
      {
        title: t("directory.branding.title", "Organization branding"),
        description: t(
          "directory.branding.description",
          "Set the logo used in the backend sidebar for the currently selected organization."
        )
      }
    ),
    /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx("form", { className: "space-y-5", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[260px_1fr]", children: [
      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
        /* @__PURE__ */ jsx("div", { className: "flex aspect-square w-full max-w-[220px] items-center justify-center overflow-hidden rounded-lg border bg-muted/30", children: currentPreviewUrl ? /* @__PURE__ */ jsx(
          "img",
          {
            src: currentPreviewUrl,
            alt: t("directory.branding.previewAlt", "{{name}} logo preview", { name: data.organizationName }),
            className: "h-full w-full object-contain"
          }
        ) : /* @__PURE__ */ jsx(ImagePlus, { className: "size-10 text-muted-foreground", "aria-hidden": true }) }),
        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: data.organizationName }),
        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("directory.branding.currentScope", "Current organization") })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsx("label", { htmlFor: "organization-logo-file", className: "text-sm font-medium", children: t("directory.branding.file.label", "Upload logo") }),
          /* @__PURE__ */ jsx(
            Input,
            {
              ref: fileInputRef,
              id: "organization-logo-file",
              type: "file",
              accept: "image/png,image/jpeg,image/webp,image/svg+xml",
              onChange: (event) => {
                const file = event.currentTarget.files?.[0];
                if (!file) return;
                setSelectedFile(file);
              }
            }
          ),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("directory.branding.file.hint", "PNG, JPG, WebP, or SVG works best. Uploaded files are stored as organization attachments.") })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
          /* @__PURE__ */ jsx("label", { htmlFor: "organization-logo-url", className: "text-sm font-medium", children: t("directory.branding.url.label", "Logo URL") }),
          /* @__PURE__ */ jsx(
            Input,
            {
              id: "organization-logo-url",
              value: logoUrl,
              onChange: (event) => setLogoUrl(event.currentTarget.value),
              placeholder: t("directory.branding.url.placeholder", "https://example.com/logo.svg")
            }
          ),
          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("directory.branding.url.hint", "Use an external image URL or leave empty to fall back to the default Open Mercato logo.") })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: saving, children: [
            saving ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Save, { className: "mr-2 size-4", "aria-hidden": true }),
            t("directory.branding.actions.save", "Save branding")
          ] }),
          /* @__PURE__ */ jsxs(
            Button,
            {
              type: "button",
              variant: "outline",
              disabled: saving,
              onClick: () => {
                setSelectedFile(null);
                if (fileInputRef.current) fileInputRef.current.value = "";
                setLogoUrl("");
                void saveBranding("", { skipUpload: true });
              },
              children: [
                /* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 size-4", "aria-hidden": true }),
                t("directory.branding.actions.reset", "Use default logo")
              ]
            }
          )
        ] })
      ] })
    ] }) }) })
  ] });
}
export {
  OrganizationBrandingPage as default
};
//# sourceMappingURL=page.js.map
