import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { useRef as j, useState as F, useCallback as w } from "react";
import { Upload as k, Trash2 as D, AlertCircle as P } from "lucide-react";
import { useTranslation as A } from "react-i18next";
import { e as S } from "./extractErrorMessage-C0uxTGn5.js";
function E({ kind: r, width: l, height: u, label: c = "Your Brand" }) {
  return r === "favicon" ? /* @__PURE__ */ a(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 64 64",
      width: l,
      height: u,
      style: { display: "block" },
      children: [
        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "fav-grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#6366f1" }),
          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#a855f7" })
        ] }) }),
        /* @__PURE__ */ e("rect", { x: "4", y: "4", width: "56", height: "56", rx: "14", fill: "url(#fav-grad)" }),
        /* @__PURE__ */ e(
          "path",
          {
            d: "M20 22 L32 16 L44 22 L32 28 Z M20 32 L32 26 L44 32 L32 38 Z M20 42 L32 36 L44 42 L32 48 Z",
            fill: "#ffffff",
            opacity: "0.95"
          }
        )
      ]
    }
  ) : /* @__PURE__ */ a(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 320 80",
      width: l,
      height: u,
      preserveAspectRatio: "xMidYMid meet",
      style: { display: "block" },
      children: [
        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a("linearGradient", { id: `logo-grad-${r}`, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#6366f1" }),
          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#a855f7" })
        ] }) }),
        /* @__PURE__ */ e("rect", { width: "320", height: "80", fill: "#ffffff" }),
        /* @__PURE__ */ e("rect", { x: "16", y: "16", width: "48", height: "48", rx: "10", fill: `url(#logo-grad-${r})` }),
        /* @__PURE__ */ e(
          "path",
          {
            d: "M28 30 L40 24 L52 30 L40 36 Z M28 40 L40 34 L52 40 L40 46 Z M28 50 L40 44 L52 50 L40 56 Z",
            fill: "#ffffff",
            opacity: "0.95"
          }
        ),
        /* @__PURE__ */ e(
          "text",
          {
            x: "80",
            y: "42",
            fontFamily: "system-ui, -apple-system, sans-serif",
            fontSize: "22",
            fontWeight: "700",
            fill: "#18181b",
            children: c
          }
        ),
        /* @__PURE__ */ e(
          "text",
          {
            x: "80",
            y: "60",
            fontFamily: "system-ui, -apple-system, sans-serif",
            fontSize: "11",
            fontWeight: "500",
            fill: "#71717a",
            letterSpacing: "1",
            children: "EXAMPLE · 320 × 80"
          }
        )
      ]
    }
  );
}
async function G(r) {
  try {
    const l = await r.text(), p = new DOMParser().parseFromString(l, "image/svg+xml").querySelector("svg");
    if (!p) return { width: null, height: null };
    const g = (f) => {
      if (!f) return null;
      const h = parseFloat(f);
      return Number.isFinite(h) ? h : null;
    };
    let i = g(p.getAttribute("width")), o = g(p.getAttribute("height"));
    if ((!i || !o) && p.getAttribute("viewBox")) {
      const f = p.getAttribute("viewBox").trim().split(/[\s,]+/);
      f.length === 4 && (i = i ?? g(f[2]), o = o ?? g(f[3]));
    }
    return { width: i, height: o };
  } catch {
    return { width: null, height: null };
  }
}
function T(r) {
  return r.type === "image/svg+xml" ? G(r) : r.type === "image/x-icon" || r.type === "image/vnd.microsoft.icon" ? Promise.resolve({ width: null, height: null }) : new Promise((l) => {
    const u = URL.createObjectURL(r), c = new Image();
    c.onload = () => {
      URL.revokeObjectURL(u), l({ width: c.naturalWidth, height: c.naturalHeight });
    }, c.onerror = () => {
      URL.revokeObjectURL(u), l({ width: null, height: null });
    }, c.src = u;
  });
}
function J({
  label: r,
  currentUrl: l,
  onUpload: u,
  onDelete: c,
  accept: p = "image/png,image/jpeg,image/svg+xml,image/webp,image/x-icon",
  disabled: g = !1,
  recommendedWidth: i,
  recommendedHeight: o,
  currentWidth: f,
  currentHeight: h,
  sampleKind: L,
  sampleLabel: V = "Your Brand"
}) {
  const { t: n } = A(["admin", "common"]), y = j(null), [N, x] = F(!1), [M, m] = F(null), v = w(
    async (t) => {
      m(null);
      const s = [
        "image/png",
        "image/jpeg",
        "image/jpg",
        "image/svg+xml",
        "image/webp",
        "image/x-icon",
        "image/vnd.microsoft.icon"
      ], C = 2 * 1024 * 1024;
      if (!s.includes(t.type)) {
        m(
          n("admin:uiConfiguration.errorUnsupportedType", {
            defaultValue: 'Unsupported file type "{{type}}". Allowed: PNG, JPEG, SVG, WebP, ICO.',
            type: t.type || "unknown"
          })
        );
        return;
      }
      if (t.size > C) {
        m(
          n("admin:uiConfiguration.errorFileTooLarge", {
            defaultValue: "File is too large ({{size}} MB). Maximum allowed: 2 MB.",
            size: (t.size / (1024 * 1024)).toFixed(2)
          })
        );
        return;
      }
      if (t.size === 0) {
        m(n("admin:uiConfiguration.errorEmptyFile", { defaultValue: "File is empty." }));
        return;
      }
      x(!0);
      try {
        const { width: d, height: b } = await T(t);
        if (d && b && i && o && (d > i || b > o)) {
          m(
            n("admin:uiConfiguration.errorDimensionsTooLarge", {
              defaultValue: "Image too large: {{aw}}×{{ah}}. Maximum allowed: {{rw}}×{{rh}} (smaller sizes are accepted).",
              aw: d,
              ah: b,
              rw: i,
              rh: o
            })
          ), x(!1);
          return;
        }
        await u(t, d, b);
      } catch (d) {
        m(S(d));
      } finally {
        x(!1);
      }
    },
    [u, i, o, n]
  ), z = w(
    (t) => {
      const s = t.target.files?.[0];
      s && v(s), y.current && (y.current.value = "");
    },
    [v]
  ), B = w(
    (t) => {
      t.preventDefault();
      const s = t.dataTransfer.files?.[0];
      s && v(s);
    },
    [v]
  ), R = w(async () => {
    m(null), x(!0);
    try {
      await c();
    } catch (t) {
      m(S(t));
    } finally {
      x(!1);
    }
  }, [c]);
  return /* @__PURE__ */ a("div", { className: "space-y-2", children: [
    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-[var(--text-primary)]", children: r }),
    /* @__PURE__ */ a(
      "div",
      {
        onDragOver: (t) => t.preventDefault(),
        onDrop: B,
        className: "flex items-start gap-4 p-4 rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)]",
        children: [
          /* @__PURE__ */ a("div", { className: "flex-1 min-w-0 space-y-2", children: [
            /* @__PURE__ */ e("p", { className: "text-xs text-[var(--text-secondary)]", children: n("admin:uiConfiguration.logoUploadHint", { defaultValue: "PNG, JPEG, SVG, WebP — 2 MB max." }) }),
            (i || o) && /* @__PURE__ */ a("p", { className: "text-xs text-[var(--text-muted)]", children: [
              n("admin:uiConfiguration.uploadSize", { defaultValue: "Taille d'upload recommandée" }),
              ": ",
              /* @__PURE__ */ a("span", { className: "font-mono", children: [
                i ?? "?",
                " × ",
                o ?? "?",
                " px"
              ] }),
              " ",
              /* @__PURE__ */ a("span", { className: "text-[var(--text-secondary)]", children: [
                "(",
                n("admin:uiConfiguration.uploadSizeHint", { defaultValue: "haute résolution pour écrans Retina" }),
                ")"
              ] })
            ] }),
            l && (f || h) && /* @__PURE__ */ a("p", { className: "text-xs text-[var(--text-muted)]", children: [
              n("admin:uiConfiguration.currentSize", { defaultValue: "Current" }),
              ": ",
              /* @__PURE__ */ a("span", { className: "font-mono", children: [
                f ?? "?",
                " × ",
                h ?? "?",
                " px"
              ] })
            ] }),
            /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
              /* @__PURE__ */ a(
                "button",
                {
                  type: "button",
                  disabled: g || N,
                  onClick: () => y.current?.click(),
                  className: "px-3 py-1.5 text-sm rounded-[var(--radius-button)] bg-[var(--color-accent-500)] text-white hover:bg-[var(--color-accent-600)] disabled:opacity-50 flex items-center gap-1",
                  children: [
                    /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
                    n("common:upload", { defaultValue: "Upload" })
                  ]
                }
              ),
              l && /* @__PURE__ */ a(
                "button",
                {
                  type: "button",
                  disabled: g || N,
                  onClick: R,
                  className: "px-3 py-1.5 text-sm rounded-[var(--radius-button)] bg-[var(--error-bg)] text-[var(--error-text)] border border-[var(--error-border)] hover:opacity-80 disabled:opacity-50 flex items-center gap-1",
                  children: [
                    /* @__PURE__ */ e(D, { className: "w-4 h-4" }),
                    n("common:delete", { defaultValue: "Delete" })
                  ]
                }
              )
            ] }),
            M && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 p-2 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]", children: [
              /* @__PURE__ */ e(P, { className: "w-4 h-4 text-[var(--error-text)] flex-shrink-0 mt-0.5" }),
              /* @__PURE__ */ e("p", { className: "text-xs text-[var(--error-text)] leading-tight", children: M })
            ] })
          ] }),
          /* @__PURE__ */ e(
            "input",
            {
              ref: y,
              type: "file",
              accept: p,
              onChange: z,
              className: "hidden"
            }
          ),
          i && o && (() => {
            const s = L === "favicon" ? 32 : 64, C = i / o, d = Math.round(s * C);
            return /* @__PURE__ */ e(
              "div",
              {
                className: "flex-shrink-0 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] overflow-hidden flex items-center justify-center px-3 py-2",
                style: { minWidth: d + 24 },
                title: n("admin:uiConfiguration.headerSizeHint", {
                  defaultValue: "Affichage réel dans le header : {{w}} × {{h}} px",
                  w: d,
                  h: s
                }),
                children: l ? /* @__PURE__ */ e(
                  "img",
                  {
                    src: l,
                    alt: r,
                    style: { height: s, width: "auto" },
                    className: "object-contain"
                  }
                ) : L ? /* @__PURE__ */ e(
                  E,
                  {
                    kind: L,
                    width: d,
                    height: s,
                    label: V
                  }
                ) : null
              }
            );
          })()
        ]
      }
    )
  ] });
}
export {
  J as L
};
//# sourceMappingURL=LogoUploader-MJaO1AEq.js.map
