import type { CSSProperties } from "react";

export type NoteCoverCategory = "gradient" | "paper" | "nature" | "space" | "minimal" | "custom";

export interface NoteCover {
  id: string;
  name: string;
  category: NoteCoverCategory;
  // "builtin" ships with Mindavio. "custom" was uploaded by a user through
  // the marketplace's "Create your own design" flow (see note_designs table).
  origin: "builtin" | "custom";
  // EUR cents. 0 = free. Paid covers are unlocked per-user via a Stripe
  // one-time purchase recorded in note_design_purchases (see use-note-design-purchases).
  price: number;
  // Full CSS background applied to the whole note page, not just a banner.
  style: CSSProperties;
  // Small flat swatch shown in the picker grid — usually the same
  // background, sometimes simplified for a cleaner thumbnail.
  swatch: CSSProperties;
  // Which foreground tone reads well over this background — drives the
  // title/breadcrumb/editor text color when this theme is active.
  tone: "light" | "dark";
  // Only set for origin: "custom" — the user who uploaded it. They always
  // get their own design for free, even if it's priced for everyone else.
  creatorId?: string;
  // "glass" (default) renders the editor as a translucent blurred card over
  // the background; "solid" makes it a normal opaque surface instead.
  // Only configurable for origin: "custom" — builtin covers always use "glass".
  editorSurface?: "glass" | "solid";
  // Explicit hex text color for custom covers, overriding the tone-based
  // light/dark default when the creator wants a specific color instead.
  textColor?: string;
}

const grain =
  "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E\")";

function grainOver(background: string): CSSProperties {
  return { backgroundImage: `${grain}, ${background}`, backgroundBlendMode: "overlay, normal" };
}

export const NOTE_COVER_CATEGORIES: NoteCoverCategory[] = [
  "gradient",
  "paper",
  "nature",
  "space",
  "minimal",
  "custom",
];

export const CATEGORY_LABELS: Record<NoteCoverCategory, string> = {
  gradient: "Gradients",
  paper: "Paper & Texture",
  nature: "Nature",
  space: "Space",
  minimal: "Minimal",
  custom: "Community",
};

export const NOTE_COVERS: NoteCover[] = [
  {
    id: "sunset-sky",
    name: "Sunset Sky",
    category: "gradient",
    origin: "builtin",
    price: 0,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #ff9a56 0%, #ff6b9d 45%, #6a5acd 100%)" },
    swatch: { background: "linear-gradient(135deg, #ff9a56 0%, #ff6b9d 45%, #6a5acd 100%)" },
  },
  {
    id: "ocean-deep",
    name: "Ocean Deep",
    category: "gradient",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #0ea5e9 0%, #0369a1 55%, #0c1a3a 100%)" },
    swatch: { background: "linear-gradient(135deg, #0ea5e9 0%, #0369a1 55%, #0c1a3a 100%)" },
  },
  {
    id: "mint-fresh",
    name: "Mint Fresh",
    category: "gradient",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #a7f3d0 0%, #34d399 50%, #0d9488 100%)" },
    swatch: { background: "linear-gradient(135deg, #a7f3d0 0%, #34d399 50%, #0d9488 100%)" },
  },
  {
    id: "berry-punch",
    name: "Berry Punch",
    category: "gradient",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #f472b6 0%, #a855f7 55%, #4c1d95 100%)" },
    swatch: { background: "linear-gradient(135deg, #f472b6 0%, #a855f7 55%, #4c1d95 100%)" },
  },
  {
    id: "golden-hour",
    name: "Golden Hour",
    category: "gradient",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)" },
    swatch: { background: "linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)" },
  },
  {
    id: "kraft-paper",
    name: "Kraft Paper",
    category: "paper",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: grainOver("linear-gradient(135deg, #c8a165 0%, #a9793f 100%)"),
    swatch: { background: "linear-gradient(135deg, #c8a165 0%, #a9793f 100%)" },
  },
  {
    id: "linen-cream",
    name: "Linen Cream",
    category: "paper",
    origin: "builtin",
    price: 299,
    tone: "light",
    style: grainOver("linear-gradient(135deg, #f5f0e6 0%, #e8dcc4 100%)"),
    swatch: { background: "linear-gradient(135deg, #f5f0e6 0%, #e8dcc4 100%)" },
  },
  {
    id: "dot-grid",
    name: "Dot Grid",
    category: "paper",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: {
      backgroundColor: "#12131a",
      backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px)",
      backgroundSize: "18px 18px",
    },
    swatch: {
      backgroundColor: "#12131a",
      backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.22) 1.4px, transparent 1.4px)",
      backgroundSize: "10px 10px",
    },
  },
  {
    id: "graph-paper",
    name: "Graph Paper",
    category: "paper",
    origin: "builtin",
    price: 0,
    tone: "dark",
    style: {
      backgroundColor: "#0d1b2a",
      backgroundImage:
        "linear-gradient(rgba(125,211,252,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.16) 1px, transparent 1px)",
      backgroundSize: "22px 22px",
    },
    swatch: {
      backgroundColor: "#0d1b2a",
      backgroundImage:
        "linear-gradient(rgba(125,211,252,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,0.16) 1px, transparent 1px)",
      backgroundSize: "12px 12px",
    },
  },
  {
    id: "forest-canopy",
    name: "Forest Canopy",
    category: "nature",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(160deg, #4ade80 0%, #16a34a 45%, #14532d 100%)" },
    swatch: { background: "linear-gradient(160deg, #4ade80 0%, #16a34a 45%, #14532d 100%)" },
  },
  {
    id: "cherry-blossom",
    name: "Cherry Blossom",
    category: "nature",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: {
      background:
        "radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0, transparent 40%), radial-gradient(circle at 75% 65%, rgba(255,255,255,0.25) 0, transparent 35%), linear-gradient(135deg, #ffc1d9 0%, #ff8fb3 55%, #d6537d 100%)",
    },
    swatch: { background: "linear-gradient(135deg, #ffc1d9 0%, #ff8fb3 55%, #d6537d 100%)" },
  },
  {
    id: "desert-dune",
    name: "Desert Dune",
    category: "nature",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(135deg, #fcd9a4 0%, #e8a86c 55%, #a86b3c 100%)" },
    swatch: { background: "linear-gradient(135deg, #fcd9a4 0%, #e8a86c 55%, #a86b3c 100%)" },
  },
  {
    id: "midnight-aurora",
    name: "Midnight Aurora",
    category: "space",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: {
      background:
        "radial-gradient(ellipse at 30% 20%, rgba(56,189,248,0.35) 0, transparent 45%), radial-gradient(ellipse at 70% 60%, rgba(168,85,247,0.30) 0, transparent 45%), linear-gradient(180deg, #050510 0%, #0b0b1e 100%)",
    },
    swatch: { background: "linear-gradient(135deg, #38bdf8 0%, #a855f7 55%, #050510 100%)" },
  },
  {
    id: "starfield",
    name: "Starfield",
    category: "space",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: {
      backgroundColor: "#05060f",
      backgroundImage:
        "radial-gradient(1.5px 1.5px at 20px 30px, white, transparent), radial-gradient(1.5px 1.5px at 90px 80px, white, transparent), radial-gradient(1px 1px at 140px 40px, white, transparent), radial-gradient(1px 1px at 50px 120px, white, transparent), radial-gradient(1.5px 1.5px at 170px 110px, white, transparent)",
      backgroundSize: "200px 150px",
      backgroundRepeat: "repeat",
    },
    swatch: {
      background: "#05060f",
      backgroundImage:
        "radial-gradient(1px 1px at 8px 10px, white, transparent), radial-gradient(1px 1px at 30px 24px, white, transparent), radial-gradient(1px 1px at 45px 8px, white, transparent)",
    },
  },
  {
    id: "nebula-violet",
    name: "Nebula Violet",
    category: "space",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: {
      background:
        "radial-gradient(circle at 60% 40%, rgba(217,70,239,0.45) 0, transparent 50%), radial-gradient(circle at 30% 70%, rgba(99,102,241,0.40) 0, transparent 50%), #0a0614",
    },
    swatch: { background: "linear-gradient(135deg, #d946ef 0%, #6366f1 60%, #0a0614 100%)" },
  },
  {
    id: "pure-slate",
    name: "Pure Slate",
    category: "minimal",
    origin: "builtin",
    price: 0,
    tone: "dark",
    style: { background: "#15161c" },
    swatch: { background: "#15161c" },
  },
  {
    id: "soft-fog",
    name: "Soft Fog",
    category: "minimal",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(180deg, #2a2c38 0%, #1a1b22 100%)" },
    swatch: { background: "linear-gradient(180deg, #2a2c38 0%, #1a1b22 100%)" },
  },
  {
    id: "sky-line",
    name: "Sky Line",
    category: "minimal",
    origin: "builtin",
    price: 299,
    tone: "dark",
    style: { background: "linear-gradient(180deg, #38bdf8 0%, #0a0a0d 100%)" },
    swatch: { background: "linear-gradient(180deg, #38bdf8 0%, #0a0a0d 100%)" },
  },
];

export function getNoteCover(coverId: string | null | undefined): NoteCover | null {
  if (!coverId) return null;
  return NOTE_COVERS.find((cover) => cover.id === coverId) ?? null;
}

export function formatCoverPrice(cents: number): string {
  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(cents / 100);
}