/* global React */
const { useEffect: _adUseEffect } = React;

function ArtworkDetail({ id, onClose }) {
  const piece = (window.ARTWORKS || []).find(p => p.id === id);

  _adUseEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  if (!piece) return null;

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(42, 33, 24, 0.65)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        zIndex: 100,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 32,
        animation: "fadeIn 200ms cubic-bezier(0.22,1,0.36,1)",
      }}
    >
      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--cream)",
          borderRadius: 24,
          overflow: "hidden",
          maxWidth: 1000,
          width: "100%",
          maxHeight: "calc(100vh - 64px)",
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          boxShadow: "0 24px 56px rgba(42,33,24,0.3)",
          animation: "riseIn 280ms cubic-bezier(0.22,1,0.36,1)",
        }}
      >
        <div style={{ background: "var(--stone)", display: "flex", alignItems: "center", justifyContent: "center", padding: 0 }}>
          {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: "36px 36px 32px", display: "flex", flexDirection: "column", gap: 20, overflow: "auto" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <Eyebrow>{piece.medium} · {piece.year}</Eyebrow>
            <button onClick={onClose} style={{
              border: 0,
              background: "transparent",
              cursor: "pointer",
              padding: 4,
              color: "var(--ink-muted)",
              display: "inline-flex",
            }}>
              <i data-lucide="x" style={{ width: 20, height: 20 }}></i>
            </button>
          </div>

          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: 56,
            color: "var(--ink)",
            margin: 0,
            lineHeight: 1,
            letterSpacing: "-0.01em",
          }}>
            {piece.title}
          </h2>

          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: 16,
            lineHeight: 1.6,
            color: "var(--ink-soft)",
            margin: 0,
          }}>
            {piece.medium}, on paper.
          </p>

          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Tag tone={piece.type === "ink" ? "outline" : piece.type === "color" ? "marigold" : piece.type === "pencil" ? "outline" : "blush"}>
              {piece.type === "merch" ? "merch" : piece.medium}
            </Tag>
            <Tag tone="outline">hand-drawn</Tag>
            <Tag tone="outline">{piece.year}</Tag>
          </div>

          <div style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid rgba(42,33,24,0.10)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
              <div>
                <Eyebrow>{piece.status === "featured" ? "★ featured piece" : piece.status === "sold" ? "sold" : "delivered"}</Eyebrow>
                <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--marigold-700)", marginTop: 6 }}>
                  one of mine 🤍
                </div>
              </div>
              <Button variant="primary" icon="arrow-right">commission something like this</Button>
            </div>
            <div style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--marigold-700)", marginTop: 14, textAlign: "right" }}>
              — Bárbara
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ArtworkDetail = ArtworkDetail;