// src/PhotoCard.jsx — placeholder photo card with sepia/teal tinted frame
// Visual stand-in until the association plugs in real photos.

const PhotoCard = ({ photo, onClick }) => {
  // Build a deterministic placeholder background using the photo's hue
  const hue = photo.hue ?? 30;
  const frameStyle = {
    background:
      `linear-gradient(135deg, hsl(${hue}, 35%, 72%) 0%, hsl(${hue + 10}, 28%, 48%) 100%)`,
  };

  return (
    <div className="photo-card" onClick={onClick} role="button" tabIndex={0}>
      <div className="photo-frame" style={frameStyle}>
        <PhotoPlaceholderArt kind={photo.kind} year={photo.year} />
        <div className="photo-watermark">PLACEHOLDER</div>
      </div>
      <div className="photo-meta">
        <div className="photo-title">{photo.title}</div>
        <div className="photo-date">
          <span className="dot" />
          {photo.year} · {photo.kind}
        </div>
      </div>
    </div>
  );
};

// A tiny illustrative SVG inside the photo frame so it doesn't look empty.
// Different glyphs per kind / topic.
const PhotoPlaceholderArt = ({ kind, year }) => {
  return (
    <svg
      viewBox="0 0 200 150"
      preserveAspectRatio="xMidYMid slice"
      style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        opacity: .55, mixBlendMode: "multiply",
      }}
    >
      <defs>
        <pattern id="grain" patternUnits="userSpaceOnUse" width="3" height="3">
          <circle cx="1" cy="1" r=".4" fill="rgba(0,0,0,.18)" />
        </pattern>
      </defs>
      {/* horizon */}
      <rect x="0" y="95" width="200" height="55" fill="rgba(70,40,15,.25)" />
      {/* sky vignette */}
      <rect x="0" y="0" width="200" height="100" fill="url(#grain)" />
      {/* generic silhouette suggestion */}
      <g fill="rgba(15,30,40,.55)">
        <rect x="20" y="60" width="30" height="40" />
        <polygon points="20,60 35,40 50,60" />
        <rect x="60" y="65" width="20" height="35" />
        <polygon points="60,65 70,52 80,65" />
        <rect x="100" y="50" width="40" height="50" />
        <polygon points="100,50 120,30 140,50" />
        <rect x="115" y="65" width="10" height="20" fill="rgba(255,250,235,.4)" />
        <rect x="155" y="68" width="22" height="32" />
        <polygon points="155,68 166,55 177,68" />
      </g>
      {/* date stamp */}
      <text x="180" y="142" textAnchor="end"
        fontFamily="ui-monospace, monospace"
        fontSize="9" fill="rgba(255,250,235,.85)"
        letterSpacing="1">
        {year}
      </text>
    </svg>
  );
};

const SourceCard = ({ source, onClick }) => (
  <div className="source-card" onClick={onClick} role="button" tabIndex={0}>
    <div className="kind">
      {source.kind === "Photo" && "◧ "}
      {source.kind === "Document" && "✎ "}
      {source.kind === "Témoignage" && "✦ "}
      {source.kind}
    </div>
    <div className="title">{source.title}</div>
    <div className="meta">{source.meta}</div>
  </div>
);

Object.assign(window, { PhotoCard, SourceCard });