import { useEffect } from "react";

const DOFUS_SHIMMER_STYLE_ID = "dofus-icon-shimmer";

function injectShimmerStyle() {
  if (document.getElementById(DOFUS_SHIMMER_STYLE_ID)) return;
  const style = document.createElement("style");
  style.id = DOFUS_SHIMMER_STYLE_ID;
  style.textContent = `
    @keyframes dofus-shimmer {
      from { filter: brightness(1); }
      to   { filter: brightness(1.35); }
    }
  `;
  document.head.appendChild(style);
}

// Mapping statique gid (Google Sheets ID) -> URL icône via api.dofusdb.fr
// Pattern URL : https://api.dofusdb.fr/img/items/{iconId}.png
const DOFUS_ICON_BASE = "https://api.dofusdb.fr/img/items";
export const GID_TO_ICON: Record<string, string> = {
  "474870200":  `${DOFUS_ICON_BASE}/23009.png`, // Dofawa
  "743703882":  `${DOFUS_ICON_BASE}/23025.png`, // Dofus Argenté
  "103963898":  `${DOFUS_ICON_BASE}/23006.png`, // Dofus Cawotte
  "1075294690": `${DOFUS_ICON_BASE}/23022.png`, // Dokoko
  "1567240526": `${DOFUS_ICON_BASE}/23020.png`, // Dofus des Veilleurs
  "1011508069": `${DOFUS_ICON_BASE}/23002.png`, // Dofus Emeraude
  "2045137654": `${DOFUS_ICON_BASE}/23001.png`, // Dofus Pourpre
  "1967508888": `${DOFUS_ICON_BASE}/23032.png`, // Domakuro
  "1382359191": `${DOFUS_ICON_BASE}/23033.png`, // Dorigami
  "1413546794": `${DOFUS_ICON_BASE}/23003.png`, // Dofus Turquoise
  "1641656252": `${DOFUS_ICON_BASE}/23005.png`, // Dofus des Glaces
  "953522228":  `${DOFUS_ICON_BASE}/23023.png`, // Dofus Abyssal
  "818597042":  `${DOFUS_ICON_BASE}/23039.png`, // Dofoozbz
  "1021129660": `${DOFUS_ICON_BASE}/23016.png`, // Dofus Nébuleux
  "595670723":  `${DOFUS_ICON_BASE}/23004.png`, // Dofus Vulbis
  "544349966":  `${DOFUS_ICON_BASE}/23008.png`, // Dofus Tacheté
  "1150302145": `${DOFUS_ICON_BASE}/23024.png`, // Dofus Forgelave
  "882278553":  `${DOFUS_ICON_BASE}/23007.png`, // Dofus Ebène
  "200570588":  `${DOFUS_ICON_BASE}/23011.png`, // Dofus Ivoire
  "1209269839": `${DOFUS_ICON_BASE}/23012.png`, // Dofus Ocre
  "462784268":  `${DOFUS_ICON_BASE}/23027.png`, // Dofus Argenté Scintillant
  "1543573905": `${DOFUS_ICON_BASE}/23034.png`, // Dofus Cauchemar
  "1007491889": `${DOFUS_ICON_BASE}/23035.png`, // Dom de Pin
  "1047555165": `${DOFUS_ICON_BASE}/23036.png`, // Dofus Sylvestre
  "2105601828": `${DOFUS_ICON_BASE}/23029.png`, // Dofus Cacao
  "474510463":  `${DOFUS_ICON_BASE}/23017.png`, // Dokille
  "62476099":   `${DOFUS_ICON_BASE}/23018.png`, // Dolmanax
  "1873654554": `${DOFUS_ICON_BASE}/23019.png`, // Dotruche
  "360188709":  `${DOFUS_ICON_BASE}/23010.png`, // Dofus Kaliptus
};

export function DofusIcon({ gid, pct, size = 44, left = 0 }: { gid: string; pct: number; size?: number; left?: number }) {
  useEffect(injectShimmerStyle, []);

  const iconUrl = GID_TO_ICON[gid] ?? null;
  if (!iconUrl) return null;

  // L'icône colorée est clippée du bas vers le haut selon pct.
  // clipPath: inset(top right bottom left) — on réduit depuis le haut.
  const filledClip = `inset(${100 - pct}% 0 0 0)`;

  return (
    <div style={{
      position: "absolute",
      top: 0,
      left,
      width: size,
      height: size,
      filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.6))",
      zIndex: 2,
      flexShrink: 0,
    }}>
      {/* Calque grisé (base) */}
      <img
        src={iconUrl}
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "contain",
          filter: "grayscale(1) brightness(0.45)",
          userSelect: "none",
          pointerEvents: "none",
        }}
      />
      {/* Calque coloré, progressivement révélé du bas vers le haut */}
      {pct > 0 && (
        <img
          src={iconUrl}
          alt=""
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "contain",
            clipPath: filledClip,
            userSelect: "none",
            pointerEvents: "none",
            animation: "dofus-shimmer 2s ease-in-out infinite alternate",
          }}
        />
      )}
    </div>
  );
}
