import type { Card } from '../types';

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',
};

// 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 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;

  const corner = (rotated: boolean) => (
    <span
      className="absolute flex flex-col items-center leading-none"
      style={
        rotated
          ? { bottom: d.inset, right: d.inset, transform: 'rotate(180deg)' }
          : { top: d.inset, left: d.inset }
      }
    >
      <span style={{ color, fontSize: d.label, fontFamily: 'Georgia,serif', fontWeight: 700, lineHeight: 1 }}>
        {label}
      </span>
      <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">
        <span style={{ color, fontSize: d.suitLg, lineHeight: 1 }}>{symbol}</span>
      </span>
      {corner(true)}
    </button>
  );
}
