import React from 'react';
import AnimatedCount from './AnimatedCount';
import {
  GameplayRoundCard,
  isArtistCard,
  isBeatmapCard,
  isMapperCard,
} from './types';

type Props = {
  slot: 'a' | 'b';
  card: GameplayRoundCard;
  onPick?: (slot: 'a' | 'b') => void;
  disabled?: boolean;
  selected?: boolean;
  compact?: boolean;
  reveal?: {
    show: boolean;
    value: number;
    valueSuffix: string;
    isWinner: boolean;
    isWrongSelection: boolean;
  };
};

const getBackgroundImage = (card: GameplayRoundCard) => {
  if (isBeatmapCard(card)) {
    return card.backgroundImageUrl;
  }

  if (isMapperCard(card)) {
    return card.bannerUrl || card.fallbackVisual;
  }

  if (isArtistCard(card)) {
    return card.imageUrl || card.fallbackVisual;
  }

  return null;
};

const getStatusClasses = ({
  selected,
  reveal,
}: Pick<Props, 'selected' | 'reveal'>) => {
  if (reveal?.show && reveal.isWinner) {
    return 'border-emerald-500/80 ring-2 ring-emerald-500/60';
  }

  if (reveal?.show && reveal.isWrongSelection) {
    return 'border-red-500/80 ring-2 ring-red-500/60';
  }

  if (selected) {
    return 'border-[#ff66aa]/80 ring-2 ring-[#ff66aa]/50';
  }

  return 'border-white/10 hover:border-white/30';
};

const AvatarFallback = ({ label }: { label: string }) => (
  <div className="flex h-16 w-16 items-center justify-center rounded-full border border-white/20 bg-white/10 text-lg font-semibold text-white shadow-sm shadow-black/30">
    {label.charAt(0).toUpperCase()}
  </div>
);

const AvatarImage = ({ src, alt }: { src?: string | null; alt: string }) => {
  if (!src) {
    return <AvatarFallback label={alt} />;
  }

  return (
    <div
      aria-label={alt}
      className="h-16 w-16 rounded-full border border-white/30 bg-cover bg-center shadow-sm shadow-black/30"
      role="img"
      style={{ backgroundImage: `url(${src})` }}
    />
  );
};

export default function GuessCard({
  slot,
  card,
  onPick,
  disabled = false,
  selected = false,
  compact = false,
  reveal,
}: Props) {
  const backgroundImage = getBackgroundImage(card);
  const wrapperClasses = [
    'group relative w-full overflow-hidden rounded-3xl border bg-[#131722] text-left text-white transition duration-150 ease-out',
    compact ? 'min-h-[280px]' : 'min-h-[360px] md:min-h-[520px]',
    disabled || !onPick ? 'cursor-default' : 'cursor-pointer',
    getStatusClasses({ selected, reveal }),
  ].join(' ');

  const body = (
    <>
      <div
        className="absolute inset-0 bg-cover bg-center"
        style={
          backgroundImage
            ? {
                backgroundImage: `url(${backgroundImage})`,
              }
            : undefined
        }
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/25 via-black/45 to-black/90" />
      <div className="absolute left-4 top-4 z-10 rounded-full border border-white/20 bg-black/40 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-white/85 backdrop-blur-sm">
        {slot}
      </div>

      <div className="relative z-10 flex h-full flex-col justify-between p-5 md:p-6">
        <div />

        {isBeatmapCard(card) && (
          <div className="space-y-4">
            <div className="flex flex-wrap items-center gap-2">
              <span className="rounded-full bg-white/10 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-white/75">
                {card.status}
              </span>
              <span className="rounded-full bg-black/30 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em] text-white/65">
                {card.difficultyName}
              </span>
            </div>
            <div>
              <p className="max-w-[18ch] text-2xl font-semibold leading-tight md:text-4xl">
                {card.title}
              </p>
              <p className="mt-2 text-sm text-white/78 md:text-base">
                {card.artistName}
              </p>
            </div>
            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/20 p-3 backdrop-blur-sm">
              <AvatarImage alt={card.mapperName} src={card.mapperAvatarUrl} />
              <div>
                <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55">
                  Mapped by
                </p>
                <p className="text-lg font-medium text-white">{card.mapperName}</p>
              </div>
            </div>
          </div>
        )}

        {isMapperCard(card) && (
          <div className="flex flex-1 flex-col items-center justify-end gap-5 pb-3 text-center md:justify-center md:pb-0">
            <AvatarImage alt={card.name} src={card.avatarUrl} />
            <div className="space-y-2">
              <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55">
                Featured mapper
              </p>
              <p className="text-3xl font-semibold leading-tight md:text-5xl">
                {card.name}
              </p>
            </div>
          </div>
        )}

        {isArtistCard(card) && (
          <div className="flex flex-1 items-end pb-3 md:items-center md:justify-center md:pb-0">
            <div className="w-full rounded-[28px] border border-white/10 bg-black/25 p-5 text-center backdrop-blur-sm">
              <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55">
                Featured artist
              </p>
              <p className="mt-3 text-3xl font-semibold leading-tight md:text-5xl">
                {card.name}
              </p>
            </div>
          </div>
        )}

        <div className="pt-4">
          {reveal?.show ? (
            <div className="rounded-2xl border border-white/10 bg-black/30 px-4 py-3 backdrop-blur-sm">
              <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55">
                Revealed
              </p>
              <p className="mt-1 text-3xl font-semibold md:text-4xl">
                <AnimatedCount value={reveal.value} />
              </p>
              <p className="mt-1 text-sm text-white/70">{reveal.valueSuffix}</p>
            </div>
          ) : (
            <div className="rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-sm text-white/78 backdrop-blur-sm">
              Pick the card you think hides the higher value.
            </div>
          )}
        </div>
      </div>
    </>
  );

  if (!onPick) {
    return <div className={wrapperClasses}>{body}</div>;
  }

  return (
    <button
      aria-label={`Choose ${slot.toUpperCase()}`}
      className={wrapperClasses}
      disabled={disabled}
      onClick={() => onPick(slot)}
      type="button"
    >
      {body}
    </button>
  );
}
