import Image from "next/image";
import type { Media, PlaceholderTone } from "@/content/site";

/*
 * Platzhalter als typografische Tafeln: ruhiger Farbton aus der Palette,
 * ein angeschnittener Bodoni-Buchstabe aus "ARTISTA" (bzw. die Jahreszahl
 * im Cover) und ein feines Passepartout. Sie wirken gestaltet, sind aber
 * eindeutig kein Foto und damit als Platzhalter erkennbar.
 */
type Plate = { background: string; glyph: string; italic?: boolean; style: React.CSSProperties };

// Groessen und Lagen in Container-Einheiten (cqh/cqw): der Anschnitt sieht
// in jeder Tafelgroesse gleich aus.
const TONES: Record<PlaceholderTone, Plate> = {
  cover: { background: "#ddd0bd", glyph: "27", italic: true, style: { fontSize: "92cqh", right: "-3cqw", bottom: "-20cqh" } },
  villa: { background: "#e2d6c4", glyph: "A", style: { fontSize: "105cqh", left: "5cqw", bottom: "-22cqh" } },
  terrace: { background: "#d6ccb8", glyph: "R", italic: true, style: { fontSize: "118cqh", right: "-4cqw", bottom: "-30cqh" } },
  room: { background: "#e8dfd2", glyph: "T", style: { fontSize: "112cqh", left: "22cqw", top: "-34cqh" } },
  garden: { background: "#cfcab6", glyph: "S", italic: true, style: { fontSize: "150cqh", right: "7cqw", bottom: "-58cqh" } },
  portrait: { background: "#dccfbe", glyph: "R", style: { fontSize: "92cqh", left: "-10cqw", bottom: "-14cqh" } },
  studio: { background: "#d2c9bd", glyph: "A", italic: true, style: { fontSize: "96cqh", right: "-16cqw", bottom: "-16cqh" } },
};

// Initialen auf Portraet-Platzhaltern: gross, angeschnitten am unteren Rand.
const INITIALS_STYLE: React.CSSProperties = { fontSize: "34cqh", left: "8cqw", bottom: "-4cqh", letterSpacing: "-0.03em" };

type Props = {
  media: Media;
  /** Tailwind-Klasse fuer das Seitenverhaeltnis, z. B. "aspect-[4/5]". */
  aspect: string;
  sizes: string;
  showLabel: boolean;
  priority?: boolean;
  className?: string;
  /** "arch": oben rund wie ein Rundbogenfenster (Team-Portraets). */
  shape?: "rect" | "arch";
};

const ARCH = "rounded-t-[50vw]";

/**
 * Bild oder erkennbarer Platzhalter. Platzhalter tragen in Entwicklung und
 * Staging einen sichtbaren Hinweis, damit fehlende Freigaben nicht
 * uebersehen werden.
 */
export function MediaFrame({ media, aspect, sizes, showLabel, priority, className = "", shape = "rect" }: Props) {
  const shapeClass = shape === "arch" ? ARCH : "";
  if (media.kind === "image") {
    return (
      <div className={`relative overflow-hidden bg-sand ${aspect} ${shapeClass} ${className}`}>
        <Image src={media.src} alt={media.alt} fill sizes={sizes} priority={priority} className="object-cover" />
      </div>
    );
  }
  const tone = TONES[media.tone];
  return (
    <div
      role="img"
      aria-label={`Platzhalter: ${media.label}`}
      className={`placeholder-plate relative isolate overflow-hidden ${aspect} ${shapeClass} ${className}`}
      style={{ backgroundColor: tone.background, containerType: "size" }}
    >
      <span
        aria-hidden
        className={`display pointer-events-none absolute select-none leading-none ${media.glyph ? "text-ink/[0.13]" : "text-ink/[0.07]"} ${tone.italic && !media.glyph ? "italic" : ""}`}
        style={media.glyph ? INITIALS_STYLE : tone.style}
      >
        {media.glyph ?? tone.glyph}
      </span>
      {shape === "rect" && <span aria-hidden className="pointer-events-none absolute inset-3 border border-ink/10 md:inset-4" />}
      {showLabel && (
        <span className="absolute bottom-6 left-6 bg-paper/90 px-2.5 py-1 text-xs font-semibold text-ink md:bottom-7 md:left-7">
          Platzhalter: {media.label}
        </span>
      )}
    </div>
  );
}