/* global React */
const { useState: _galUseState } = React;

// Bárbara's gallery — real pieces from her instagram.
const ARTWORKS = [
  { id: "sun-and-moon",  title: "sun & moon",           medium: "digital · procreate", type: "color", year: 2026, status: "featured",  image: "assets/sun-and-moon.png" },
  { id: "golden-hour",   title: "golden hour",          medium: "digital · procreate", type: "color", year: 2026, status: "delivered", image: "assets/golden-portrait.jpg" },
  { id: "jinx-color",    title: "jinx, in blue",        medium: "watercolor",        type: "color",  year: 2025, status: "delivered", image: "assets/jinx-color.jpg" },
  { id: "magical-girl",  title: "magical girl",         medium: "ink + watercolor",  type: "color",  year: 2025, status: "delivered", image: "assets/magical-girl.jpg" },
  { id: "jinx-pencil",   title: "jinx, in pencil",      medium: "graphite",          type: "pencil", year: 2025, status: "delivered", image: "assets/jinx-pencil.jpg" },
  { id: "jotaro",        title: "jotaro",               medium: "ink",               type: "ink",    year: 2025, status: "delivered", image: "assets/jotaro.jpg" },
  { id: "eva-01",        title: "eva-01",               medium: "ink",               type: "ink",    year: 2025, status: "delivered", image: "assets/eva-01.jpg" },
  { id: "fullmetal",     title: "fullmetal",            medium: "ink",               type: "ink",    year: 2025, status: "delivered", image: "assets/fullmetal.jpg" },
  { id: "cowboy-bebop",  title: "cowboy bebop",         medium: "ink",               type: "ink",    year: 2024, status: "delivered", image: "assets/cowboy-bebop.jpg" },
  { id: "abba-totes",    title: "dancing queen & chiquitita totes", medium: "acrylic on canvas", type: "merch", year: 2024, status: "delivered", image: "assets/abba-totes.jpg" },
];

const FILTERS = [
  { id: "all",    label: "all work" },
  { id: "color",  label: "color" },
  { id: "ink",    label: "ink" },
  { id: "pencil", label: "pencil" },
  { id: "merch",  label: "merch" },
];

function PlaceholderArt({ color, title, year }) {
  return (
    <div style={{
      width: "100%",
      height: "100%",
      background: color,
      position: "relative",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute",
        top: "20%", left: "10%",
        width: "60%", height: "55%",
        borderRadius: "60% 40% 50% 50%",
        background: "rgba(42,33,24,0.07)",
        transform: "rotate(-12deg)",
        filter: "blur(2px)",
      }} />
      <div style={{
        position: "absolute",
        bottom: "8%", right: "10%",
        width: "48%", height: "52%",
        borderRadius: "55% 45% 60% 40%",
        background: "rgba(255,255,255,0.22)",
        transform: "rotate(8deg)",
        filter: "blur(1px)",
      }} />
      <div style={{
        position: "absolute",
        top: "30%", right: "25%",
        width: "30%", height: "30%",
        borderRadius: "50%",
        background: "rgba(42,33,24,0.05)",
      }} />
      <div style={{ position: "relative", textAlign: "center", padding: 16 }}>
        <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, color: "var(--ink)", letterSpacing: "-0.01em", lineHeight: 1 }}>{title}</div>
        <div style={{ fontFamily: "var(--font-hand)", fontSize: 20, color: "var(--ink-muted)", marginTop: 6 }}>{year}</div>
      </div>
    </div>
  );
}

function ArtworkCard({ piece, onOpen, density = "standard", index = 0 }) {
  const featured = piece.status === "featured";
  // varied tilts for sketchbook feel
  const tilts = [-1.2, 0.6, -0.4, 1.4, -0.8, 0.3, -1.6, 0.9, -0.2];
  const tilt = tilts[index % tilts.length];

  // mosaic mode: varying aspect ratios for visual rhythm
  const mosaicAspects = ["1", "3/4", "4/5", "1", "5/6", "1", "3/4", "1", "4/5"];
  const aspect = density === "dense" ? mosaicAspects[index % mosaicAspects.length] : "1";

  return (
    <div style={{ position: "relative" }}>
      {/* occasional tape on a few cards */}
      {index % 4 === 1 && (
        <Tape tone={piece.tone === "tide" ? "tide" : "marigold"} rotate={-8} width={64} top={-10} left={20} opacity={0.55} />
      )}
      {index % 5 === 3 && (
        <Tape tone="blush" rotate={6} width={56} top={-8} right={28} opacity={0.6} />
      )}

      <div
        onClick={() => onOpen(piece.id)}
        style={{
          background: "var(--cream)",
          borderRadius: 16,
          border: "1px solid rgba(42,33,24,0.08)",
          overflow: "hidden",
          boxShadow: "0 1px 2px rgba(42,33,24,0.06), 0 4px 14px rgba(42,33,24,0.08)",
          cursor: "pointer",
          transition: "transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms",
          position: "relative",
          transform: `rotate(${tilt}deg)`,
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = `rotate(0deg) translateY(-4px)`;
          e.currentTarget.style.boxShadow = "0 2px 4px rgba(42,33,24,0.08), 0 16px 32px rgba(42,33,24,0.14)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = `rotate(${tilt}deg)`;
          e.currentTarget.style.boxShadow = "0 1px 2px rgba(42,33,24,0.06), 0 4px 14px rgba(42,33,24,0.08)";
        }}
      >
        {featured && (
          <div style={{ position: "absolute", top: 14, left: 14, zIndex: 2 }}>
            <Tag tone="marigold">★ featured</Tag>
          </div>
        )}
        <div style={{ width: "100%", aspectRatio: aspect, overflow: "hidden", background: "var(--stone)" }}>
          {piece.image ? (
            <img src={piece.image} alt={piece.title}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          ) : (
            <PlaceholderArt color={piece.placeholderColor} title={piece.title} year={piece.year} />
          )}
        </div>
        <div style={{ padding: "16px 18px 18px" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "var(--ink)", margin: 0, fontWeight: 400, letterSpacing: "-0.01em" }}>
              {piece.title}
            </h4>
            {piece.status === "sold" && (
              <span style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 700, color: "var(--ink-muted)" }}>sold</span>
            )}
          </div>
          <div style={{
            fontFamily: "var(--font-body)",
            fontSize: 13,
            color: "var(--ink-muted)",
            marginTop: 4,
          }}>
            {piece.medium} · {piece.year}
          </div>
        </div>
      </div>
    </div>
  );
}

function Gallery({ onOpen, density = "standard" }) {
  const [filter, setFilter] = _galUseState("all");
  const visible = filter === "all" ? ARTWORKS : ARTWORKS.filter(p => p.type === filter);

  const gridStyle = density === "sparse"
    ? { gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 40 }
    : density === "dense"
    ? { gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }
    : { gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 24 };

  return (
    <section style={{ padding: "64px 0 96px", position: "relative" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "0 32px", position: "relative" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 36, flexWrap: "wrap", gap: 16 }}>
          <div style={{ position: "relative" }}>
            <Eyebrow>the work</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 56, color: "var(--ink)", margin: "8px 0 0", letterSpacing: "-0.01em", lineHeight: 1 }}>
              recent pieces
            </h2>
            <div style={{ position: "absolute", top: -12, right: -56 }}>
              <Doodle kind="asterisk" size={24} color="var(--marigold-500)" />
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {FILTERS.map(f => (
              <Tag key={f.id} active={filter === f.id} onClick={() => setFilter(f.id)}>{f.label}</Tag>
            ))}
          </div>
        </div>

        <div style={{ display: "grid", ...gridStyle }}>
          {visible.map((piece, i) => (
            <ArtworkCard key={piece.id} piece={piece} onOpen={onOpen} density={density} index={i} />
          ))}
        </div>

        {/* footer note */}
        <div style={{ marginTop: 56, textAlign: "center", position: "relative" }}>
          <MarginNote rotate={-1.5} size={26} color="var(--marigold-700)">
            more on instagram — i post the works-in-progress there 💌
          </MarginNote>
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;
window.ARTWORKS = ARTWORKS;
window.PlaceholderArt = PlaceholderArt;