// Project card — supports poster image + hover-play video preview

function toCSS(aspect) {
  var map = { "16:9": "16 / 9", "9:16": "9 / 16", "1:1": "1 / 1", "21:9": "21 / 9", "3:2": "3 / 2", "4:3": "4 / 3", "2:3": "2 / 3" };
  return map[aspect] || (aspect ? aspect.replace(":", " / ") : "16 / 9");
}

function ProjectCard({ project, density = "regular", onOpen }) {
  var ar = toCSS(project.aspect);
  var videoRef = React.useRef(null);

  var handleMouseEnter = function() {
    if (videoRef.current) {
      videoRef.current.currentTime = 0;
      videoRef.current.play().catch(function() {});
    }
  };
  var handleMouseLeave = function() {
    if (videoRef.current) {
      videoRef.current.pause();
      videoRef.current.currentTime = 0;
    }
  };

  return (
    <article
      className={"pcard pcard-" + density}
      onClick={function() { if (onOpen) onOpen(project); }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="pcard-media" style={{ aspectRatio: ar }}>
        {/* Poster image */}
        {project.posterUrl && (
          <img
            className="pcard-poster"
            src={project.posterUrl}
            alt={project.title}
            loading="lazy"
          />
        )}
        {/* Preview video — plays on hover */}
        {project.previewVideo && (
          <video
            ref={videoRef}
            className="pcard-video"
            src={project.previewVideo}
            muted
            loop
            playsInline
            preload="none"
            poster={project.posterUrl || undefined}
          ></video>
        )}
        {/* Fallback — dark surface when no media yet */}
        {!project.posterUrl && !project.previewVideo && (
          <div className="pcard-placeholder"></div>
        )}
        {/* Corner brackets — revealed on hover */}
        <div className="pcard-brackets">
          <span className="pcb pcb-tl"></span><span className="pcb pcb-tr"></span>
          <span className="pcb pcb-bl"></span><span className="pcb pcb-br"></span>
        </div>
        {/* Hover overlay — PLAYING indicator + AR badge */}
        <div className="pcard-bottom">
          <span className="pcard-playing">PLAYING ●</span>
          <span className="pcard-ar">{project.aspect}</span>
        </div>
        <div className="pcard-hover-line"></div>
      </div>
      {/* Title and meta below the card */}
      <div className="pcard-info">
        <span className="pcard-title">{project.title}</span>
        {project.desc && <p className="pcard-desc">{project.desc}</p>}
        <div className="pcard-meta">
          <span className="pcard-client">{project.client}</span>
          <span className="pcard-year">{project.year}</span>
        </div>
      </div>
    </article>
  );
}

// List row variant
function ProjectRow({ project, onOpen }) {
  return (
    <button
      className="prow"
      onClick={function() { if (onOpen) onOpen(project); }}
    >
      <span className="prow-idx">{String(project._idx).padStart(2, "0")}</span>
      <span className="prow-title">{project.title}</span>
      <span className="prow-meta">
        <span className="prow-year">{project.year}</span>
        <span className="prow-dot">·</span>
        <span className="prow-client">{project.client}</span>
        <span className="prow-dot">·</span>
        <span className="prow-type">{project.type.join(", ")}</span>
      </span>
      <span className="prow-tags">
        {project.tags.slice(0, 2).map(function(t) {
          return <span key={t} className="prow-tag">{t}</span>;
        })}
      </span>
      <span className="prow-arrow">→</span>
    </button>
  );
}

function ListPreview({ project, x, y }) {
  var videoRef = React.useRef(null);

  React.useEffect(function() {
    if (videoRef.current) {
      videoRef.current.currentTime = 0;
      videoRef.current.play().catch(function() {});
    }
  }, [project.id]);

  var W = 280;
  var left = x + 28;
  if (left + W > window.innerWidth - 16) left = x - W - 28;
  var top = Math.max(16, Math.min(y - 80, window.innerHeight - 200));

  return (
    <div className="list-preview" style={{ left: left, top: top }}>
      {project.previewVideo
        ? <video key={project.id} ref={videoRef} src={project.previewVideo} muted loop playsInline className="list-preview-media" />
        : project.posterUrl
        ? <img src={project.posterUrl} alt={project.title} className="list-preview-media" />
        : <div className="list-preview-empty" />
      }
    </div>
  );
}

Object.assign(window, { ProjectCard, ProjectRow, ListPreview });