import type { Card } from '../types';
import { useCardSkin, suitIcon } from '../lib/cardSkin';

const SUIT_SYMBOL: Record<string, string> = {
  HEARTS: '♥',
  LEAVES: '♠',
  ACORNS: '♣',
  BELLS: '♦',
};

const SUIT_COLOR: Record<string, string> = {
  HEARTS: '#c40000',
  LEAVES: '#1e7a1e',
  ACORNS: '#b87a00',
  BELLS: '#0087b8',
};

const VALUE_LABEL: Record<string, string> = {
  C7: 'VII', C8: 'VIII', C9: 'IX', C10: 'X',
  LOWER: 'J', UPPER: 'Q', KING: 'K', ACE: 'A',
};

// The bell, leaf and heart icons are a touch taller than the acorn, so in the
// centre they sometimes bleed into the corner marks — nudge those three down.
const CENTER_ICON_SCALE: Record<string, number> = {
  HEARTS: 0.85,
  LEAVES: 0.85,
  BELLS: 0.85,
  ACORNS: 1,
};

// Per-size geometry. sm/md sit on the table, lg/xl are hand cards.
const DIMS = {
  sm: { w: 38, h: 54, radius: 4, inset: 3, label: 9,  suitSm: 7,  suitLg: 18 },
  md: { w: 56, h: 80, radius: 6, inset: 4, label: 12, suitSm: 10, suitLg: 30 },
  lg: { w: 60, h: 84, radius: 7, inset: 5, label: 12, suitSm: 9,  suitLg: 30 },
  xl: { w: 72, h: 100, radius: 8, inset: 6, label: 14, suitSm: 11, suitLg: 38 },
} as const;

interface Props {
  card: Card;
  onClick?: () => void;
  disabled?: boolean;
  /** Playable card on your turn — gold glow border + lift. */
  highlight?: boolean;
  size?: keyof typeof DIMS;
}

export default function CardView({ card, onClick, disabled = false, highlight = false, size = 'md' }: Props) {
  const skin = useCardSkin((s) => s.skin);
  const symbol = SUIT_SYMBOL[card.color];
  const color = SUIT_COLOR[card.color];
  const label = VALUE_LABEL[card.value];
  const d = DIMS[size];

  const interactive = !disabled && !!onClick;
  // 'illustrated' skin keeps the classic card but swaps the ♥♠♣♦ glyphs for the
  // suit-icon artwork; 'classic' uses the plain text glyphs.
  const useIcons = skin === 'illustrated';
  // With the icon artwork the bell suit reads brown, so tint its value label to
  // match instead of the classic blue.
  const labelColor = useIcons && card.color === 'BELLS' ? '#8a5a1c' : color;

  const corner = (rotated: boolean) => (
    <span
      // Icons align to the number's left edge so a wide label (VIII) doesn't shove
      // the centred icon toward the middle; classic text stays centred as before.
      className={`absolute flex flex-col leading-none ${useIcons ? 'items-start' : 'items-center'}`}
      style={
        rotated
          ? { bottom: d.inset, right: d.inset, transform: 'rotate(180deg)' }
          : { top: d.inset, left: d.inset }
      }
    >
      <span style={{ color: labelColor, fontSize: d.label, fontFamily: 'Georgia,serif', fontWeight: 700, lineHeight: 1 }}>
        {label}
      </span>
      {useIcons ? (
        <img
          src={suitIcon(card.color, 'small')}
          alt={symbol}
          draggable={false}
          style={{ height: d.suitSm * 1.25, width: 'auto', marginTop: 1 }}
          className="select-none"
        />
      ) : (
        <span style={{ color, fontSize: d.suitSm, lineHeight: 1.2 }}>{symbol}</span>
      )}
    </span>
  );

  return (
    <button
      onClick={onClick}
      disabled={disabled || !onClick}
      style={{ width: d.w, height: d.h, borderRadius: d.radius }}
      className={[
        'relative bg-white overflow-hidden flex-none transition-transform',
        highlight
          ? 'border-2 border-gold animate-g1 -translate-y-2'
          : 'border border-[#ddd8d0] shadow-[0_2px_8px_rgba(0,0,0,.35)]',
        disabled && !highlight ? 'opacity-[.35]' : '',
        interactive ? 'cursor-pointer hover:-translate-y-1 active:scale-95' : 'cursor-default',
      ].join(' ')}
    >
      {corner(false)}
      <span className="absolute inset-0 flex items-center justify-center">
        {useIcons ? (
          <img
            src={suitIcon(card.color, 'large')}
            alt={symbol}
            draggable={false}
            style={{ height: d.suitLg * CENTER_ICON_SCALE[card.color], width: 'auto' }}
            className="select-none"
          />
        ) : (
          <span style={{ color, fontSize: d.suitLg, lineHeight: 1 }}>{symbol}</span>
        )}
      </span>
      {corner(true)}
    </button>
  );
}
