"use client";
import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import useAvatarStore from "@/stores/avatarStore";
import { FastAverageColor } from 'fast-average-color';
import NextImage from 'next/image';
import ParseText from '../parseText';
import useLocaleStore from '@/stores/localeStore';
import { calcAffixBonus, calcBaseStat, calcBaseStatRaw, calcBonusStatRaw, calcMainAffixBonus, calcMainAffixBonusRaw, calcPromotion, calcSubAffixBonusRaw, convertToRoman, getNameChar, replaceByParam } from '@/helper';
import useUserDataStore from '@/stores/userDataStore';
import { traceShowCaseMap } from '@/constant/traceConstant';
import { StatusAddType } from '@/types';
import { mappingStats } from '@/constant/constant';
import useLightconeStore from '@/stores/lightconeStore';
import { useTranslations } from 'next-intl';
import useAffixStore from '@/stores/affixStore';
import useRelicStore from '@/stores/relicStore';
import { toast } from 'react-toastify';
import RelicShowcase from './relicShowcase';


export default function ShowCaseInfo() {
  const { avatarSelected, mapAvatarInfo } = useAvatarStore()
  const { mapLightconeInfo } = useLightconeStore()
  const { mapMainAffix, mapSubAffix } = useAffixStore()
  const { avatars } = useUserDataStore()
  const [avgColor, setAvgColor] = useState('#222');
  const imgRef = useRef(null);
  const cardRef = useRef(null)
  const { locale } = useLocaleStore()
  const transI18n = useTranslations("DataPage")
  const { mapRelicInfo } = useRelicStore()

  const handleSaveImage = useCallback(() => {
    if (cardRef.current === null || !avatarSelected) {
      toast.error("Avatar showcase not found!");
      return;
    }

    import("html2canvas-pro")
      .then(({ default: html2canvas }) =>
        html2canvas(cardRef.current!, {
          scale: 2,
          backgroundColor: "#000000",
          allowTaint: false,
          useCORS: true
        })
      )
      .then((canvas: HTMLCanvasElement) => {
        const link = document.createElement("a");
        link.download = `${getNameChar(locale, transI18n, avatarSelected)}_showcase.png`;
        link.href = canvas.toDataURL("image/png");
        link.click();
      })
      .catch((e) => {
        console.log(e)
        toast.error("Error generating showcase card!");
      });
  }, [avatarSelected, locale, transI18n]);

  useEffect(() => {
    if (!avatarSelected?.id) return;
    const fac = new FastAverageColor();
    const img = new Image();

    img.crossOrigin = 'anonymous';
    img.src = `${process.env.CDN_URL}/spriteoutput/avatardrawcard/${avatarSelected?.id}.png`;

    img.onload = () => {
      fac.getColorAsync(img)
        .then((color) => {
          setAvgColor(color.hex);
        })
        .catch(e => console.error("Vẫn lỗi CORS:", e));
    };
    return () => {
      fac.destroy();
      img.onload = null;
    };
  }, [avatarSelected]);

  const avatarInfo = useMemo(() => {
    if (!avatarSelected) return
    return mapAvatarInfo[avatarSelected.id]
  }, [avatarSelected, mapAvatarInfo])

  const avatarSkillTree = useMemo(() => {
    if (!avatarSelected || !avatars[avatarSelected.id]) return {}
    if (avatars[avatarSelected.id].enhanced) {
      return avatarInfo?.Enhanced[avatars[avatarSelected.id].enhanced.toString()].SkillTrees || {}
    }
    return avatarInfo?.SkillTrees || {}
  }, [avatarSelected, avatarInfo, avatars])

  const avatarData = useMemo(() => {
    if (!avatarSelected) return
    return avatars[avatarSelected.id]
  }, [avatarSelected, avatars])

  const avatarProfile = useMemo(() => {
    if (!avatarSelected || !avatarData) return
    return avatarData?.profileList?.[avatarData?.profileSelect]
  }, [avatarSelected, avatarData])

  const lightconeStats = useMemo(() => {
    if (!avatarSelected || !avatarProfile?.lightcone || !mapLightconeInfo[avatarProfile?.lightcone?.item_id]) return
    const promotion = calcPromotion(avatarProfile?.lightcone?.level)
    const atkStat = calcBaseStat(
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseAttack,
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseAttackAdd,
      0,
      avatarProfile?.lightcone?.level
    )
    const hpStat = calcBaseStat(
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseHP,
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseHPAdd,
      0,
      avatarProfile?.lightcone?.level
    )
    const defStat = calcBaseStat(
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseDefence,
      mapLightconeInfo[avatarProfile?.lightcone?.item_id].Stats[promotion].BaseDefenceAdd,
      0,
      avatarProfile?.lightcone?.level
    )
    return {
      attack: atkStat,
      hp: hpStat,
      def: defStat,
    }
  }, [avatarSelected, mapLightconeInfo, avatarProfile])

  const relicEffects = useMemo(() => {
    const avatar = avatars[avatarSelected?.id || ""];
    const relicCount: { [key: string]: number } = {};
    if (avatar) {
      for (const relic of Object.values(avatar.profileList[avatar.profileSelect].relics)) {
        if (relicCount[relic.relic_set_id]) {
          relicCount[relic.relic_set_id]++;
        } else {
          relicCount[relic.relic_set_id] = 1;
        }
      }
    }
    const listEffects: { key: string, count: number }[] = [];
    Object.entries(relicCount).forEach(([key, value]) => {
      if (value >= 2) {
        listEffects.push({ key: key, count: value });
      }
    });
    return listEffects;
  }, [avatars, avatarSelected]);

  const relicStats = useMemo(() => {
    if (!avatarSelected || !avatarProfile?.relics || !mapMainAffix || !mapSubAffix) return

    return Object.entries(avatarProfile?.relics).map(([key, value]) => {
      const mainAffixMap = mapMainAffix["5" + key]
      const subAffixMap = mapSubAffix["5"]
      if (!mainAffixMap || !subAffixMap) return
      return {
        img: `${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${value.relic_set_id}_${key}.png`,
        mainAffix: {
          property: mainAffixMap?.[value?.main_affix_id]?.property,
          level: value?.level,
          valueAffix: calcMainAffixBonus(mainAffixMap?.[value?.main_affix_id], value?.level),
          detail: mappingStats?.[mainAffixMap?.[value?.main_affix_id]?.property]
        },
        subAffix: value?.sub_affixes?.map((subValue) => {
          return {
            property: subAffixMap?.[subValue?.sub_affix_id]?.property,
            valueAffix: calcAffixBonus(subAffixMap?.[subValue?.sub_affix_id], subValue?.step, subValue?.count),
            detail: mappingStats?.[subAffixMap?.[subValue?.sub_affix_id]?.property],
            step: subValue?.step,
            count: subValue?.count
          }
        })
      }
    })
  }, [avatarSelected, avatarProfile, mapMainAffix, mapSubAffix])

  const totalSubStats = useMemo(() => {
    if (!relicStats?.length) return 0
    return (relicStats ?? []).reduce((acc, relic) => {
      const subAffixList = relic?.subAffix ?? []
      return acc + subAffixList.reduce((subAcc, subAffix) => {
        if (avatarInfo?.Relics?.SubAffixPropertyList.findIndex(it => it === subAffix.property) !== -1) {
          return subAcc + (subAffix?.count ?? 0)
        }
        return subAcc
      }, 0)
    }, 0)
  }, [relicStats, avatarInfo])

  const characterStats = useMemo(() => {
    if (!avatarSelected || !avatarData) return
    const charPromotion = calcPromotion(avatarData.level)

    const statsData: Record<string, {
      value: number,
      base: number,
      name: string,
      icon: string,
      unit: string,
      round: number
    }> = {
      HP: {
        value: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPAdd,
          avatarData.level
        ),
        base: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.HPAdd,
          avatarData.level
        ),
        name: "HP",
        icon: "/icon/hp.webp",
        unit: "",
        round: 0
      },
      ATK: {
        value: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackAdd,
          avatarData.level
        ),
        base: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.AttackAdd,
          avatarData.level
        ),
        name: "ATK",
        icon: "/icon/attack.webp",
        unit: "",
        round: 0
      },
      DEF: {
        value: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceAdd,
          avatarData.level
        ),
        base: calcBaseStatRaw(
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceBase,
          mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.DefenceAdd,
          avatarData.level
        ),
        name: "DEF",
        icon: "/icon/defence.webp",
        unit: "",
        round: 0
      },
      SPD: {
        value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.SpeedBase || 0,
        base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.SpeedBase || 0,
        name: "SPD",
        icon: "/icon/speed.webp",
        unit: "",
        round: 1
      },
      CRITRate: {
        value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalChance || 0,
        base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalChance || 0,
        name: "CRIT Rate",
        icon: "/icon/crit-rate.webp",
        unit: "%",
        round: 1
      },
      CRITDmg: {
        value: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalDamage || 0,
        base: mapAvatarInfo?.[avatarSelected.id]?.Stats[charPromotion]?.CriticalDamage || 0,
        name: "CRIT DMG",
        icon: "/icon/crit-damage.webp",
        unit: "%",
        round: 1
      },
      BreakEffect: {
        value: 0,
        base: 0,
        name: "Break Effect",
        icon: "/icon/break-effect.webp",
        unit: "%",
        round: 1
      },
      EffectRES: {
        value: 0,
        base: 0,
        name: "Effect RES",
        icon: "/icon/effect-res.webp",
        unit: "%",
        round: 1
      },
      EnergyRate: {
        value: 0,
        base: 0,
        name: "Energy Rate",
        icon: "/icon/energy-rate.webp",
        unit: "%",
        round: 1
      },
      EffectHitRate: {
        value: 0,
        base: 0,
        name: "Effect Hit Rate",
        icon: "/icon/effect-hit-rate.webp",
        unit: "%",
        round: 1
      },
      HealBoost: {
        value: 0,
        base: 0,
        name: "Healing Boost",
        icon: "/icon/healing-boost.webp",
        unit: "%",
        round: 1
      },
      PhysicalAdd: {
        value: 0,
        base: 0,
        name: "Physical Boost",
        icon: "/icon/physical-add.webp",
        unit: "%",
        round: 1
      },
      FireAdd: {
        value: 0,
        base: 0,
        name: "Fire Boost",
        icon: "/icon/fire-add.webp",
        unit: "%",
        round: 1
      },
      IceAdd: {
        value: 0,
        base: 0,
        name: "Ice Boost",
        icon: "/icon/ice-add.webp",
        unit: "%",
        round: 1
      },
      ThunderAdd: {
        value: 0,
        base: 0,
        name: "Thunder Boost",
        icon: "/icon/thunder-add.webp",
        unit: "%",
        round: 1
      },
      WindAdd: {
        value: 0,
        base: 0,
        name: "Wind Boost",
        icon: "/icon/wind-add.webp",
        unit: "%",
        round: 1
      },
      QuantumAdd: {
        value: 0,
        base: 0,
        name: "Quantum Boost",
        icon: "/icon/quantum-add.webp",
        unit: "%",
        round: 1
      },
      ImaginaryAdd: {
        value: 0,
        base: 0,
        name: "Imaginary Boost",
        icon: "/icon/imaginary-add.webp",
        unit: "%",
        round: 1
      },
      ElationAdd: {
        value: 0,
        base: 0,
        name: "Elation Boost",
        icon: "/icon/IconJoy.webp",
        unit: "%",
        round: 1
      }
    }

    if (avatarProfile?.lightcone && mapLightconeInfo[avatarProfile?.lightcone?.item_id]) {
      const lightconePromotion = calcPromotion(avatarProfile?.lightcone?.level)
      statsData.HP.value += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
        avatarProfile?.lightcone?.level
      )
      statsData.HP.base += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
        avatarProfile?.lightcone?.level
      )
      statsData.ATK.value += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
        avatarProfile?.lightcone?.level
      )
      statsData.ATK.base += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
        avatarProfile?.lightcone?.level
      )
      statsData.DEF.value += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
        avatarProfile?.lightcone?.level
      )
      statsData.DEF.base += calcBaseStatRaw(
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
        mapLightconeInfo?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
        avatarProfile?.lightcone?.level
      )

      const bonusData = mapLightconeInfo[avatarProfile?.lightcone?.item_id].Bonus?.[avatarProfile?.lightcone.rank - 1]
      if (bonusData && bonusData.length > 0) {
        const bonusSpd = bonusData.filter((bonus) => bonus.type === "BaseSpeed")
        const bonusOther = bonusData.filter((bonus) => bonus.type !== "BaseSpeed")
        bonusSpd.forEach((bonus) => {
          statsData.SPD.value += bonus.value
          statsData.SPD.base += bonus.value
        })
        bonusOther.forEach((bonus) => {
          const statsBase = mappingStats?.[bonus.type]?.baseStat
          if (statsBase && statsData[statsBase]) {
            statsData[statsBase].value += calcBonusStatRaw(bonus.type, statsData[statsBase].base, bonus.value)
          }
        })
      }
    }
    if (avatarSkillTree) {
      Object.values(avatarSkillTree).forEach((value) => {
        if (value?.["1"]
          && value?.["1"]?.PointID
          && typeof avatarData?.data?.skills?.[value?.["1"]?.PointID] === "number"
          && avatarData?.data?.skills?.[value?.["1"]?.PointID] !== 0
          && value?.["1"]?.StatusAddList
          && value?.["1"].StatusAddList.length > 0) {
          value?.["1"]?.StatusAddList.forEach((status) => {
            const statsBase = mappingStats?.[status?.PropertyType]?.baseStat
            if (statsBase && statsData[statsBase]) {
              statsData[statsBase].value += calcBonusStatRaw(status?.PropertyType, statsData[statsBase].base, status.Value)
            }
          })
        }
      })
    }



    if (avatarProfile?.relics && mapMainAffix && mapSubAffix) {
      Object.entries(avatarProfile?.relics).forEach(([key, value]) => {
        const mainAffixMap = mapMainAffix["5" + key]
        const subAffixMap = mapSubAffix["5"]
        if (!mainAffixMap || !subAffixMap) return
        const mainStats = mappingStats?.[mainAffixMap?.[value.main_affix_id]?.property]?.baseStat
        if (mainStats && statsData[mainStats]) {
          statsData[mainStats].value += calcMainAffixBonusRaw(mainAffixMap?.[value.main_affix_id], value.level, statsData[mainStats].base)
        }
        value?.sub_affixes.forEach((subValue) => {
          const subStats = mappingStats?.[subAffixMap?.[subValue.sub_affix_id]?.property]?.baseStat
          if (subStats && statsData[subStats]) {
            statsData[subStats].value += calcSubAffixBonusRaw(subAffixMap?.[subValue.sub_affix_id], subValue.step, subValue.count, statsData[subStats].base)
          }
        })
      })
    }

    if (relicEffects && relicEffects.length > 0) {
      relicEffects.forEach((relic) => {
        const dataBonus = mapRelicInfo?.[relic.key]?.Bonus
        if (!dataBonus || Object.keys(dataBonus).length === 0) return
        Object.entries(dataBonus || {}).forEach(([key, value]) => {
          if (relic.count < Number(key)) return
          value.forEach((bonus) => {
            const statsBase = mappingStats?.[bonus.type]?.baseStat
            if (statsBase && statsData[statsBase]) {
              statsData[statsBase].value += calcBonusStatRaw(bonus.type, statsData[statsBase].base, bonus.value)
            }
          })
        })
      })
    }


    return statsData
  }, [
    avatarSelected,
    avatarData,
    mapAvatarInfo,
    avatarProfile?.lightcone,
    avatarProfile?.relics,
    mapLightconeInfo,
    mapMainAffix,
    mapSubAffix,
    relicEffects,
    mapRelicInfo,
    avatarSkillTree
  ])

  const applyBrightness = useCallback((hex: string, brightness: number): string => {
    const r = Math.round(parseInt(hex.slice(1, 3), 16) * brightness);
    const g = Math.round(parseInt(hex.slice(3, 5), 16) * brightness);
    const b = Math.round(parseInt(hex.slice(5, 7), 16) * brightness);

    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
  }, [])

  const getImageSkill = useCallback((icon: string | undefined, status: StatusAddType | undefined) => {
    if (!icon) return
    if (icon.startsWith("SkillIcon")) {
      return `${process.env.CDN_URL}/spriteoutput/skillicons/avatar/${avatarSelected?.id}/${icon}`
    } else if (status && mappingStats[status.PropertyType]) {
      return mappingStats[status.PropertyType].icon
    }
    else if (icon.startsWith("Icon")) {
      return `${process.env.CDN_URL}/spriteoutput/trace/${icon}`
    }
    return ""
  }, [avatarSelected?.id])

  return (
    <div className="flex flex-col justify-start m-1 text-white">
      <div className="flex items-center justify-start mt-4 mb-4">
        <button className="btn btn-success w-24 text-sm" onClick={handleSaveImage}>Save Img</button>
      </div>

      <div className="overflow-auto">
        <div
          ref={cardRef}
          className=" relative min-h-162.5 w-400 rounded-3xl transition-all duration-500 overflow-hidden"
          style={{
            backgroundColor: `${applyBrightness(avgColor, 0.3)}`,
            backdropFilter: "blur(50px)",
            WebkitBackdropFilter: "blur(50px)",
          }}
        >
          <div className="absolute bottom-2 left-4 z-10">
            <span className="shadow-black [text-shadow:1px_1px_2px_var(--tw-shadow-color)]"></span>
          </div>
          <div className="flex flex-row items-center">
            <div
              className="relative min-h-162.5 w-[24%]"
            >
              <div className="flex justify-center items-center w-full h-full overflow-hidden">
                {avatarSelected && (
                  <NextImage
                    ref={imgRef}
                    unoptimized
                    crossOrigin="anonymous"
                    src={`${process.env.CDN_URL}/spriteoutput/avatardrawcard/${avatarSelected?.id}.png`}
                    className="object-contain scale-[2] overflow-hidden"
                    alt="Character Preview"
                    width={1024}
                    height={1024}
                    priority={true}
                    style={{
                      position: 'absolute',
                      top: `130px`,
                      left: `0px`,
                    }}
                  />
                )}
              </div>
            </div>

            <div
              className="relative flex min-h-162.5 w-[76%] flex-row items-center gap-3.5 rounded-3xl pl-10 z-10 transition-all duration-500"
              style={{
                backgroundColor: `${applyBrightness(avgColor, 0.5)}`,
                backdropFilter: "blur(50px)",
                WebkitBackdropFilter: "blur(50px)",
              }}
            >

              <div className="absolute top-4 left-3">
                {avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
                  <div className="flex flex-col items-center gap-2 py-2">
                    {avatarInfo?.RankIcon?.map((src, index) => {
                      const isActive = avatarData?.data?.rank > index;
                      return (
                        <div
                          key={index}
                          className="relative flex items-center justify-center"
                          style={{
                            transition: "transform 0.3s ease, filter 0.3s ease",
                          }}
                        >

                          {isActive && (
                            <div
                              className="absolute inset-0 rounded-full pointer-events-none"
                              style={{
                                background: "radial-gradient(circle, rgba(250,204,21,0.35) 0%, transparent 70%)",
                                filter: "blur(6px)",
                                zIndex: 0,
                              }}
                            />
                          )}

                          <div
                            className="relative rounded-full p-[2.5px]"
                            style={{
                              background: isActive
                                ? "linear-gradient(135deg, #facc15, #f59e0b, #facc15)"
                                : "rgba(255,255,255,0.15)",
                              boxShadow: isActive
                                ? "0 0 10px rgba(250,204,21,0.5), 0 0 24px rgba(250,204,21,0.2)"
                                : "0 2px 6px rgba(0,0,0,0.4)",
                              transition: "background 0.3s ease, box-shadow 0.3s ease",
                              zIndex: 1,
                            }}
                          >
                            <div
                              className="rounded-full overflow-hidden"
                              style={{
                                padding: "2px",
                                background: "#1e2230",
                              }}
                            >
                              <NextImage
                                src={src ?? null}
                                alt="Rank Icon"
                                width={125}
                                height={125}
                                unoptimized
                                crossOrigin="anonymous"
                                className="block rounded-full object-contain"
                                style={{
                                  width: "44px",
                                  height: "44px",
                                  filter: isActive
                                    ? "grayscale(0) brightness(1.05) saturate(1.1)"
                                    : "grayscale(0.7) brightness(0.55)",
                                  transition: "filter 0.3s ease",
                                }}
                              />
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}

              </div>

              <div className="flex h-162.5 w-1/3 flex-col justify-between py-3 pl-8">
                <div className="flex h-full flex-col justify-between">
                  <div>
                    <div className="flex flex-row items-center justify-between">
                      <ParseText className="text-3xl" text={getNameChar(locale, transI18n, avatarSelected || undefined)} locale={locale} />
                    </div>
                    <div className="flex flex-row items-center gap-4 mt-2">
                      <div className="text-2xl text-[#d8b46e]">Lv. <span className="text-white">{avatarData?.level}</span>/<span className="text-neutral-400">80</span></div>
                      <span className="px-1.5 py-0.5 rounded-full text-lg font-bold text-[#E6D5B5] bg-[#5c4022] border-2 border-[#d8b46e] shadow-[0_0_10px_rgba(250,204,21,0.3)] select-none">
                        {totalSubStats}
                      </span>

                      {avatarSelected && (
                        <div className="flex gap-1">
                          <NextImage
                            unoptimized
                            crossOrigin="anonymous"
                            src={`/icon/${avatarSelected?.baseType.toLowerCase()}.webp`}
                            alt="Path Icon"
                            width={32}
                            height={32}
                            className="h-auto w-8"
                          />
                          <NextImage
                            unoptimized
                            crossOrigin="anonymous"
                            src={`/icon/${avatarSelected?.damageType.toLowerCase()}.webp`}
                            alt="Element Icon"
                            width={32}
                            height={32}
                            className="h-auto w-8" />

                        </div>
                      )}

                    </div>
                  </div>

                  <div className="relative flex h-56.25 w-auto flex-row items-center">
                    {avatarSelected && (
                      <div className="absolute inset-0 flex items-center justify-center">
                        <NextImage
                          unoptimized
                          crossOrigin="anonymous"
                          src={`/icon/${avatarSelected?.baseType.toLowerCase()}.webp`}
                          alt="Path Icon"
                          width={160}
                          height={160}
                          className="h-40 w-40 opacity-20"
                        />
                      </div>
                    )}

                    <div className="flex flex-col gap-4">
                      {avatarData && avatarInfo && avatarSkillTree && traceShowCaseMap[avatarSelected?.baseType || ""]
                        && Object.values(traceShowCaseMap[avatarSelected?.baseType || ""] || []).map((item, index) => {

                          return (
                            <div key={`row-${index}`} className="flex flex-row items-center">
                              {item.map((btn, idx) => {
                                const size = btn.size || "small";
                                const isBig = size === "big";
                                const isMedium = size === "medium";
                                const isBigMemory = size === "big-memory";

                                const sizeClass = isBigMemory ? "w-12 h-12 mx-1" : isBig ? "w-12 h-12 mx-1" : isMedium ? "w-10 h-10" : "w-8 h-8";

                                const imageSize = isBigMemory ? "w-10" : isBig ? "w-10" : isMedium ? "w-8" : "w-6";

                                const bgColor = isBigMemory
                                  ? "bg-[#2a1a39]/80"
                                  : isBig
                                    ? "bg-[#2b1d00]/80"
                                    : isMedium
                                      ? "bg-[#2b1d00]/50"
                                      : "bg-[#000000]/50";

                                const filterClass = isBigMemory
                                  ? "filter sepia brightness-80 hue-rotate-[280deg] saturate-400 contrast-130"
                                  : isBig
                                    ? "filter sepia brightness-150 hue-rotate-15 saturate-200"
                                    : "";

                                if (!avatarSkillTree?.[btn.id]) {
                                  return null;
                                }
                                return (
                                  <div key={`item-${idx}`} className="relative flex flex-row items-center">
                                    <div
                                      className={
                                        `relative flex items-center justify-center ${sizeClass} 
                                        rounded-full ${bgColor} border-2 border-gray-500
                                        ${avatarData.data.skills[avatarSkillTree?.[btn.id]?.["1"]?.PointID] ? "" : "opacity-50"}
                                      `}
                                    >
                                      {
                                        (() => {
                                          const skillImg = getImageSkill(
                                            avatarInfo.SkillTrees?.[btn.id]?.["1"]?.Icon,
                                            avatarSkillTree?.[btn.id]?.["1"]?.StatusAddList[0]
                                          );

                                          return skillImg ? (
                                            <NextImage
                                              src={skillImg}
                                              unoptimized
                                              crossOrigin="anonymous"
                                              alt={btn.id}
                                              width={125}
                                              height={125}
                                              className={`h-full ${imageSize} ${filterClass}`}
                                            />
                                          ) : null;
                                        })()
                                      }

                                      {(isBig || isBigMemory) && (
                                        <span className="absolute bottom-0 left-0 text-[12px] text-white bg-black/70 px-1 rounded-sm">
                                          {avatarData?.data?.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] ? avatarData?.data?.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] : 1}
                                        </span>
                                      )}
                                    </div>

                                    {btn.isLink && idx < item.length - 1 && (
                                      <div className="w-3 h-0.75 bg-white opacity-80 mx-1" />
                                    )}
                                  </div>
                                );
                              })}
                            </div>

                          )
                        })}
                    </div>

                  </div>
                  {avatarProfile && avatarProfile?.lightcone && lightconeStats ? (
                    <div className="flex flex-row items-center justify-center mb-2">

                      <div className="relative w-36 h-48">
                        {/* Background SVG Border (offset top-left) */}
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="absolute w-full h-full z-10"
                          style={{
                            color: '#f59e0b',
                            opacity: 0.7,
                            top: '0px',
                            left: '-1px'
                          }}
                          viewBox="0 0 5 7"
                        >
                          <path
                            fill="none"
                            stroke="currentColor"
                            strokeOpacity="0.9"
                            strokeWidth="0.065"
                            d="m.301.032-.269.25v6.436l.303.25h4.364l.269-.25V.282l-.269-.25z"
                          />
                        </svg>

                        {/* Card Image */}
                        <NextImage
                          className="absolute object-contain rounded-xl z-9 w-[95%]"
                          unoptimized
                          crossOrigin="anonymous"
                          src={`${process.env.CDN_URL}/spriteoutput/lightconemaxfigures/${avatarProfile?.lightcone.item_id}.png`}
                          alt="Lightcone Image"
                          width={904}
                          height={1206}
                          priority
                          style={{
                            top: '0px',
                            left: '6px',
                          }}
                        />

                        {/* Top SVG Border (offset bottom-right) */}
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="absolute w-full h-full z-8"
                          style={{
                            color: '#f59e0b',
                            opacity: 0.8,
                            bottom: '0px',
                            right: '-4px'
                          }}
                          viewBox="0 0 5 7"
                        >
                          <path
                            fill="none"
                            stroke="currentColor"
                            strokeOpacity="0.9"
                            strokeWidth="0.065"
                            d="m.301.032-.269.25v6.436l.303.25h4.364l.269-.25V.282l-.269-.25z"
                          />
                          <path
                            d="M.34.004 0 .268v6.464l.33.233L4.71 7 5 6.732V.268L4.71 0Zm.01.06L4.693.03l.22.268.023 6.406-.25.233-4.34.02-.25-.253L.018.297z"
                            style={{
                              fill: 'currentColor',
                              opacity: 0.3
                            }}
                          />
                        </svg>

                        {/* Stars */}
                        <div
                          className="absolute text-yellow-500 font-bold z-10"
                          style={{
                            writingMode: 'vertical-rl',
                            left: '-0.5rem',
                            top: '0.5rem',
                            fontSize: '1.1rem',
                            letterSpacing: '-0.1em',
                            textShadow: `
                            0 0 0.2em #f59e0b,
                            0 0 0.4em #f59e0b,
                            0 0 0.8em #f59e0b,
                            -0.05em -0.05em 0.05em rgba(0,0,0,0.7),
                            0.05em 0.05em 0.05em rgba(0,0,0,0.7)
                          `
                          }}
                        >
                          {[...Array(
                            Number(
                              mapLightconeInfo[avatarProfile?.lightcone?.item_id]?.Rarity?.[
                              mapLightconeInfo[avatarProfile?.lightcone?.item_id]?.Rarity.length - 1
                              ] || 0
                            )
                          )].map((_, i) => (
                            <span key={i}>✦</span>
                          ))}
                        </div>
                      </div>


                      <div className="flex w-2/5 flex-col gap-2 text-white ml-2 h-full">
                        <div className="flex flex-col h-full">
                          <div className="flex items-center h-full">
                            <div className="w-1 h-[70%] bg-yellow-400 mr-2 rounded" />
                            <ParseText
                              className="text-lg font-semibold"
                              locale={locale}
                              text={mapLightconeInfo[avatarProfile?.lightcone?.item_id].Name}
                            />

                          </div>
                          <div className="flex items-center gap-2 mt-1 text-sm text-[#d8b46e]">
                            <div className="h-6 w-6 flex items-center justify-center rounded-full bg-[#5c4022] border border-[#d8b46e] text-[#d8b46e] text-xs font-medium">
                              {convertToRoman(avatarProfile?.lightcone?.rank)}
                            </div>
                            <span>
                              Lv. <span className="text-white">{avatarProfile.lightcone.level}</span>/<span className="text-neutral-400">80</span>
                            </span>
                          </div>
                        </div>

                        <div className="flex justify-center items-center flex-col gap-1 mt-1 ">
                          <div className="flex gap-1 text-sm ">
                            <div className="flex items-center gap-1 rounded bg-black/30 px-1 w-fit py-1">
                              <NextImage
                                unoptimized
                                crossOrigin="anonymous"
                                src="/icon/hp.webp"
                                alt="HP"
                                width={16}
                                height={16}
                                className="w-4 h-4"
                              />
                              <span>{
                                lightconeStats?.hp
                              }</span>
                            </div>
                            <div className="flex items-center gap-1 rounded bg-black/30 px-1 w-fit py-1">
                              <NextImage
                                src="/icon/attack.webp"
                                unoptimized
                                crossOrigin="anonymous"
                                alt="ATK"
                                width={16}
                                height={16}
                                className="w-4 h-4"
                              />
                              <span>{lightconeStats?.attack}</span>
                            </div>

                          </div>
                          <div className="flex items-center gap-1 rounded bg-black/30 px-1 w-fit py-1">
                            <NextImage
                              unoptimized
                              crossOrigin="anonymous"
                              src="/icon/defence.webp"
                              alt="DEF"
                              width={16}
                              height={16}
                              className="w-4 h-4"
                            />
                            <span>{lightconeStats?.def}</span>
                          </div>
                        </div>
                      </div>

                    </div>
                  ) : (<div className="flex h-1/4 items-center text-lg">
                    {transI18n("noLightconeEquipped")}
                  </div>)}
                </div>

              </div>

              <div className="flex h-162.5 w-1/3 flex-col justify-between py-3 z-10">
                <div className="flex w-full flex-col justify-between gap-y-0.5 text-base h-125">
                  {Object.entries(characterStats || {})?.map(([key, stat], index) => {
                    if (!stat || (key.includes("Add") && stat.value === 0)) return null
                    return (
                      <div key={index} className="flex flex-row items-center justify-between">
                        <div className="flex flex-row items-center">
                          <NextImage src={stat?.icon || ""}
                            unoptimized
                            crossOrigin="anonymous"
                            alt="Stat Icon"
                            width={40}
                            height={40}
                            className="h-auto w-10 p-2"
                          />
                          <span className="font-bold">{stat.name}</span>
                        </div>
                        <div className="ml-3 mr-3 grow border rounded opacity-50" />
                        <div className="flex cursor-default flex-col text-right font-bold">{
                          stat.value ? stat.unit === "%" ? (stat.value * 100).toFixed(stat.round) : stat.value.toFixed(stat.round) : 0
                        }{stat.unit}</div>
                      </div>
                    )
                  })}
                  <hr />
                </div>

                <div className="flex flex-col items-center gap-1 w-full my-2">
                  {relicEffects.map((setEffect, index) => {
                    const relicInfo = mapRelicInfo[setEffect.key];
                    if (!relicInfo) return null;
                    return (
                      <div key={index} className="flex w-full flex-row justify-between text-left">
                        <div
                          className="font-bold truncate max-w-full mr-1"
                          style={{
                            fontSize: 'clamp(0.5rem, 2vw, 1rem)'
                          }}
                          dangerouslySetInnerHTML={{
                            __html: replaceByParam(
                              relicInfo.Name,
                              []
                            )
                          }}
                        />
                        <div>
                          <span className="black-blur bg-black/30 flex w-5 justify-center rounded px-1.5 py-0.5">{setEffect.count}</span>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>

              <div className="w-1/3 z-10">
                <div className="flex h-162.5 flex-col justify-between py-3 mr-1 text-lg w-full" >

                  {relicStats?.map((relic, index) => {
                    if (!relic || !avatarInfo) return null
                    return (
                      <RelicShowcase key={index} relic={relic} avatarInfo={avatarInfo} />
                    )
                  })}

                  {(!relicStats || !relicStats?.length) && (
                    <div className="flex flex-col items-center justify-center">
                      <div className="text-center p-6">
                        <span className="text-lg text-white">{transI18n("noRelicEquipped")}</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>
  );
}
