/* Gallery — date-grouped progress photos */
const { useState, useMemo } = React;
const { Placeholder, Eyebrow, Icon } = window;

function Gallery() {
  const [filter, setFilter] = useState("all");
  // Group by date
  const groups = useMemo(() => {
    const map = {};
    window.MOCK.PHOTOS.forEach(p => {
      if (!map[p.date]) map[p.date] = [];
      map[p.date].push(p);
    });
    return Object.entries(map).sort(([a], [b]) => b.localeCompare(a));
  }, []);

  return (
    <div className="col fade-in" style={{ gap: 28 }}>
      <div className="between" style={{ alignItems: "end" }}>
        <div>
          <Eyebrow>Progress photos • Synced to your Drive folder</Eyebrow>
          <h1 className="h-hero" style={{ marginTop: 12, fontSize: 56 }}>Gallery.</h1>
        </div>
        <div className="row" style={{ gap: 10 }}>
          <div className="seg">
            <button className={filter === "all"   ? "on" : ""} onClick={() => setFilter("all")}>All</button>
            <button className={filter === "front" ? "on" : ""} onClick={() => setFilter("front")}>Front</button>
            <button className={filter === "side"  ? "on" : ""} onClick={() => setFilter("side")}>Side</button>
            <button className={filter === "back"  ? "on" : ""} onClick={() => setFilter("back")}>Back</button>
          </div>
          <button className="btn btn-primary btn-sm">
            <Icon name="upload" size={14} /> Upload photos
          </button>
        </div>
      </div>

      {/* Notice */}
      <div className="card sunken" style={{ display: "flex", gap: 16, alignItems: "center", padding: 18 }}>
        <div style={{ width: 8, height: 40, background: "var(--accent)", borderRadius: 4 }} />
        <div className="col" style={{ gap: 4, flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Photos are optional.</div>
          <div className="muted" style={{ fontSize: 13 }}>
            Upload as often as you like — front, side, and back angles. Date is read from the photo's metadata.
          </div>
        </div>
      </div>

      {/* Groups */}
      {groups.map(([date, photos]) => {
        const list = filter === "all" ? photos : photos.filter(p => p.label === filter);
        if (list.length === 0) return null;
        const d = new Date(date);
        const dateStr = d.toLocaleDateString("en-US", { weekday: "short", month: "long", day: "numeric" });
        return (
          <div key={date} className="col" style={{ gap: 14 }}>
            <div className="between" style={{ alignItems: "baseline" }}>
              <div className="row" style={{ gap: 16, alignItems: "baseline" }}>
                <h2 className="h-card" style={{ fontSize: 22, margin: 0 }}>{dateStr}</h2>
                <span className="mono muted" style={{ fontSize: 12 }}>{date}</span>
                <span className="chip">{list.length} photo{list.length === 1 ? "" : "s"}</span>
              </div>
              <button className="muted mono" style={{ fontSize: 12 }}>Compare with previous →</button>
            </div>
            <div className="grid-4">
              {list.map(p => (
                <div key={p.id} style={{ position: "relative" }}>
                  <Placeholder label={p.label + " " + date.slice(5)} ratio="3/4" />
                  <div className="row" style={{
                    position: "absolute", top: 10, left: 10, gap: 6,
                  }}>
                    <span className="chip dark" style={{ fontSize: 10, padding: "3px 8px" }}>{p.label}</span>
                  </div>
                  <button className="btn-icon btn" style={{
                    position: "absolute", top: 8, right: 8,
                    background: "rgba(0,0,0,0.6)", color: "white",
                    width: 28, height: 28,
                  }}>
                    <Icon name="x" size={12} color="white" />
                  </button>
                </div>
              ))}
            </div>
          </div>
        );
      })}

      {/* Upload prompt */}
      <div className="card" style={{
        border: "1.5px dashed var(--line)", padding: 40,
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 12,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 16,
          background: "var(--bg-soft)", display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Icon name="upload" size={22} />
        </div>
        <div style={{ fontWeight: 600 }}>Drop photos here, or click to browse</div>
        <div className="muted" style={{ fontSize: 13, maxWidth: 480 }}>
          Date is read from EXIF metadata — falls back to upload date if missing. Group these into the right week automatically.
        </div>
        <button className="btn btn-primary btn-sm" style={{ marginTop: 8 }}>Choose files</button>
      </div>
    </div>
  );
}

Object.assign(window, { Gallery });