import { CardBackDef, CardBackPattern } from "./online/types";

export interface BackVisual {
  background: string;
  backgroundSize?: string;
}

/**
 * Build the CSS background for a card back. Each pattern family looks visibly
 * different (not just recoloured) — luxury backs use the fancier ones.
 */
export function cardBackVisual(
  c1: string,
  c2: string,
  accent: string,
  pattern: CardBackPattern = "stripes"
): BackVisual {
  const base = `linear-gradient(160deg, ${c1}, ${c2})`;
  switch (pattern) {
    case "argyle":
      return {
        background:
          `repeating-linear-gradient(45deg, ${accent}3a 0 9px, transparent 9px 18px),` +
          `repeating-linear-gradient(-45deg, ${accent}3a 0 9px, transparent 9px 18px), ${base}`,
      };
    case "grid":
      return {
        background:
          `repeating-linear-gradient(0deg, ${accent}38 0 1.5px, transparent 1.5px 11px),` +
          `repeating-linear-gradient(90deg, ${accent}38 0 1.5px, transparent 1.5px 11px), ${base}`,
      };
    case "dots":
      return {
        background: `radial-gradient(${accent}66 1.6px, transparent 2px), ${base}`,
        backgroundSize: "10px 10px, 100% 100%",
      };
    case "rays":
      return {
        background: `repeating-conic-gradient(from 0deg at 50% 50%, ${accent}26 0deg 9deg, transparent 9deg 18deg), ${base}`,
      };
    case "scales":
      return {
        background:
          `radial-gradient(circle at 50% 100%, transparent 5px, ${accent}40 5.5px 6.5px, transparent 7px), ${base}`,
        backgroundSize: "13px 9px, 100% 100%",
      };
    case "crosshatch":
      return {
        background:
          `repeating-linear-gradient(45deg, ${accent}30 0 2px, transparent 2px 7px),` +
          `repeating-linear-gradient(-45deg, ${accent}30 0 2px, transparent 2px 7px), ${base}`,
      };
    case "royal":
      return {
        background:
          `repeating-linear-gradient(0deg, ${accent}22 0 1px, transparent 1px 9px),` +
          `repeating-linear-gradient(90deg, ${accent}22 0 1px, transparent 1px 9px),` +
          `radial-gradient(circle at 50% 42%, ${accent}38, transparent 58%), ${base}`,
      };
    case "filigree":
      return {
        background:
          `repeating-linear-gradient(45deg, ${accent}26 0 4px, transparent 4px 10px),` +
          `radial-gradient(circle at 50% 50%, ${accent}30, transparent 62%), ${base}`,
      };
    case "gem":
      return {
        background:
          `repeating-linear-gradient(60deg, ${accent}33 0 6px, transparent 6px 13px),` +
          `repeating-linear-gradient(-60deg, ${accent}33 0 6px, transparent 6px 13px), ${base}`,
      };
    case "stripes":
    default:
      return { background: `repeating-linear-gradient(45deg, ${accent}44 0 6px, transparent 6px 12px), ${base}` };
  }
}

/** Centered emblem glyph for a back (only the fancy ones carry one). */
export function cardBackMotif(pattern: CardBackPattern | undefined, motif: string | undefined): string {
  if (motif) return motif;
  return pattern == null || pattern === "stripes" ? "✦" : "";
}

/** Convenience: full visual from a CardBackDef. */
export function backVisualFromDef(b: CardBackDef): BackVisual {
  return cardBackVisual(b.c1, b.c2, b.accent, b.pattern);
}