import { AnimatePresence, motion } from 'motion/react';
import type { ReactNode } from 'react';

import { resolveInventoryItemUseEffect } from '../data/inventoryEffects';
import { buildInventoryItemDescription } from '../data/itemPresentation';
import type { Character, InventoryItem, WorldType } from '../types';
import {
  CHROME_ICONS,
  getInventoryItemVisualSrc,
  getNineSliceStyle,
  UI_CHROME,
} from '../uiAssets';
import { PixelIcon } from './PixelIcon';

function getInventoryRarityTheme(rarity: InventoryItem['rarity']) {
  switch (rarity) {
    case 'legendary':
      return {
        frameClass:
          'border-amber-400/45 bg-gradient-to-br from-amber-500/16 to-orange-500/8',
        titleClass: 'text-amber-300',
        quantityClass:
          'border-amber-300/30 bg-amber-500/14 text-amber-50 shadow-[0_0_18px_rgba(251,191,36,0.16)]',
        auraClass: 'from-amber-500/18 via-orange-500/12 to-transparent',
        glowClass: 'bg-amber-300/24',
      };
    case 'epic':
      return {
        frameClass:
          'border-fuchsia-400/40 bg-gradient-to-br from-fuchsia-500/14 to-rose-500/8',
        titleClass: 'text-fuchsia-300',
        quantityClass:
          'border-fuchsia-300/28 bg-fuchsia-500/12 text-fuchsia-50 shadow-[0_0_18px_rgba(232,121,249,0.14)]',
        auraClass: 'from-fuchsia-500/18 via-rose-500/10 to-transparent',
        glowClass: 'bg-fuchsia-300/22',
      };
    case 'rare':
      return {
        frameClass:
          'border-sky-400/40 bg-gradient-to-br from-sky-500/14 to-cyan-500/8',
        titleClass: 'text-sky-300',
        quantityClass:
          'border-sky-300/26 bg-sky-500/12 text-sky-50 shadow-[0_0_18px_rgba(56,189,248,0.14)]',
        auraClass: 'from-sky-500/18 via-cyan-500/10 to-transparent',
        glowClass: 'bg-sky-300/20',
      };
    case 'uncommon':
      return {
        frameClass:
          'border-emerald-400/35 bg-gradient-to-br from-emerald-500/12 to-lime-500/8',
        titleClass: 'text-emerald-300',
        quantityClass:
          'border-emerald-300/24 bg-emerald-500/12 text-emerald-50 shadow-[0_0_18px_rgba(74,222,128,0.12)]',
        auraClass: 'from-emerald-500/18 via-lime-500/10 to-transparent',
        glowClass: 'bg-emerald-300/18',
      };
    default:
      return {
        frameClass: 'border-white/10 bg-white/[0.04]',
        titleClass: 'text-zinc-100',
        quantityClass:
          'border-white/12 bg-white/[0.06] text-zinc-100 shadow-[0_0_18px_rgba(255,255,255,0.06)]',
        auraClass: 'from-white/10 via-white/4 to-transparent',
        glowClass: 'bg-white/10',
      };
  }
}

function getInventoryItemIcon(item: InventoryItem) {
  return getInventoryItemVisualSrc(item);
}

function buildInventoryItemSummary(
  item: InventoryItem,
  useEffect: ReturnType<typeof resolveInventoryItemUseEffect>,
) {
  return buildInventoryItemDescription(item, useEffect);
}

function buildInventorySlots(items: InventoryItem[], minimumSlotCount: number) {
  const slotCount = Math.ceil(Math.max(items.length, minimumSlotCount) / 4) * 4;
  return [
    ...items,
    ...Array.from(
      { length: Math.max(0, slotCount - items.length) },
      () => null,
    ),
  ];
}

export function InventoryItemGrid({
  items,
  selectedItemId = null,
  minimumSlotCount = 16,
  onSelectItem,
}: {
  items: InventoryItem[];
  selectedItemId?: string | null;
  minimumSlotCount?: number;
  onSelectItem: (item: InventoryItem) => void;
}) {
  const inventorySlots = buildInventorySlots(items, minimumSlotCount);

  return (
    <div className="grid grid-cols-4 gap-2 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
      {inventorySlots.map((item, index) => {
        if (!item) {
          return (
            <div
              key={`empty-slot-${index}`}
              className="aspect-square rounded-xl border border-dashed border-white/8 bg-black/12"
            />
          );
        }

        const selected = selectedItemId === item.id;
        const rarityTheme = getInventoryRarityTheme(item.rarity);

        return (
          <button
            key={item.id}
            type="button"
            onClick={() => onSelectItem(item)}
            className={`relative aspect-square rounded-xl border p-1.5 transition-colors hover:border-white/25 ${rarityTheme.frameClass} ${selected ? 'ring-1 ring-amber-300/55' : ''}`}
            title={`${item.name} x${item.quantity}`}
          >
            <div className="flex h-full items-center justify-center">
              <PixelIcon
                src={getInventoryItemIcon(item)}
                className="h-9 w-9 drop-shadow-[0_4px_8px_rgba(0,0,0,0.35)] sm:h-11 sm:w-11"
              />
            </div>
            <div className="absolute bottom-1 right-1 rounded-full border border-black/30 bg-black/65 px-1.5 py-0.5 text-[10px] font-semibold text-white">
              {item.quantity}
            </div>
          </button>
        );
      })}
    </div>
  );
}

type InventoryItemDetailModalProps = {
  item: InventoryItem | null;
  playerCharacter: Character;
  worldType: WorldType | null;
  ownerLabel?: string;
  onClose: () => void;
  footer?: ReactNode;
};

export function InventoryItemDetailModal({
  item,
  playerCharacter,
  onClose,
  footer,
}: InventoryItemDetailModalProps) {
  const selectedItemUseEffect = item
    ? resolveInventoryItemUseEffect(item, playerCharacter)
    : null;
  const itemSummary = item
    ? buildInventoryItemSummary(item, selectedItemUseEffect)
    : '';
  const rarityTheme = item
    ? getInventoryRarityTheme(item.rarity)
    : getInventoryRarityTheme('common');

  return (
    <AnimatePresence>
      {item && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[78] flex items-end justify-center bg-black/78 p-3 backdrop-blur-sm sm:items-center sm:p-4"
          onClick={onClose}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.96, y: 8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 8 }}
            transition={{ duration: 0.18, ease: 'easeOut' }}
            className="pixel-nine-slice pixel-modal-shell flex max-h-[min(90vh,50rem)] w-full max-w-2xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
            style={getNineSliceStyle(UI_CHROME.modalPanel)}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="relative flex min-h-0 flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-5">
              <button
                type="button"
                onClick={onClose}
                className="absolute right-4 top-4 z-10 rounded-full border border-white/10 bg-black/25 p-1.5 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-5"
              >
                <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
              </button>

              <div
                className={`relative overflow-hidden rounded-[1.5rem] border px-4 py-5 sm:px-6 sm:py-6 ${rarityTheme.frameClass}`}
              >
                <div
                  className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${rarityTheme.auraClass}`}
                />
                <div
                  className={`pointer-events-none absolute -right-12 top-1/2 h-28 w-28 -translate-y-1/2 rounded-full blur-3xl sm:h-36 sm:w-36 ${rarityTheme.glowClass}`}
                />
                <div className="pointer-events-none absolute right-4 top-4 opacity-[0.16] sm:right-6 sm:top-5">
                  <PixelIcon
                    src={getInventoryItemIcon(item)}
                    className="h-16 w-16 drop-shadow-[0_8px_16px_rgba(0,0,0,0.3)] sm:h-20 sm:w-20"
                  />
                </div>
                <div className="relative max-w-[80%] sm:max-w-[85%]">
                  <div
                    className={`break-words text-[clamp(1.2rem,5vw,1.95rem)] font-semibold leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.35)] ${rarityTheme.titleClass}`}
                  >
                    {item.name}
                  </div>
                  <div
                    className={`mt-4 inline-flex items-center rounded-full border px-3 py-1.5 text-xs sm:text-sm ${rarityTheme.quantityClass}`}
                  >
                    数量 x{item.quantity}
                  </div>
                </div>
              </div>

              <div
                className="pixel-nine-slice pixel-panel min-h-0 flex-1"
                style={getNineSliceStyle(UI_CHROME.infoPanel)}
              >
                <div className="relative flex h-full min-h-[clamp(18rem,48vh,30rem)] flex-col overflow-hidden">
                  <div
                    className={`pointer-events-none absolute -left-10 bottom-4 h-24 w-24 rounded-full blur-3xl sm:h-32 sm:w-32 ${rarityTheme.glowClass}`}
                  />
                  <div className="relative h-full overflow-y-auto pr-1">
                    <p className="whitespace-pre-wrap text-[0.95rem] leading-7 text-zinc-100 sm:text-base sm:leading-8">
                      {itemSummary}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {footer != null ? (
              <div className="border-t border-white/10 px-4 py-3 sm:px-5">
                {footer}
              </div>
            ) : null}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}