/* global React */
// ───────────────────────────────────────────────────────────────
// Photo Store — single source of truth for the photo feed.
// Seed photos ship with the prototype; uploads land in localStorage.
// Everything is reverse-chronological: newest first.
// ───────────────────────────────────────────────────────────────

const STORAGE_KEY = "scouture.photos.v1";

// Seed feed — curated photos baked into the build, dated so reverse-chron works.
// New uploads will appear *above* these.
const SEED_PHOTOS = [
  // newest seed first
  { id: "seed-redlace",     src: "images/customer-red-lace.jpg",            caption: "Embroidered velvet, silver shoulder wrap.",   date: "2026-03-10", seed: true },
  { id: "seed-floral",      src: "images/garment-floral-mermaid.jpg",        caption: "Floral mermaid, mid-fitting.",                 date: "2026-03-04", seed: true },
  { id: "seed-yellow",      src: "images/garment-yellow-strapless.jpg",      caption: "Striped strapless, in marigold and rust.",    date: "2026-02-26", seed: true },
  { id: "seed-dashiki",     src: "images/garment-dashiki-black.jpg",         caption: "Black dashiki, full length.",                 date: "2026-02-19", seed: true },
  { id: "seed-pinkteal",    src: "images/garment-pink-teal-peplum.jpg",      caption: "Pink and teal peplum, hand-finished.",        date: "2026-02-11", seed: true },
  { id: "seed-silver",      src: "images/garment-silver-brocade.jpg",        caption: "Silver brocade, with diamanté collar.",       date: "2026-02-04", seed: true },
  { id: "seed-pinkpat",     src: "images/garment-pink-teal-pattern.jpg",     caption: "Wax-print peplum, close on the bodice.",      date: "2026-01-28", seed: true },
  { id: "seed-bluepurple",  src: "images/garment-blue-purple-twopiece.jpg",  caption: "Blue and purple two-piece with headwrap.",    date: "2026-01-21", seed: true },
  { id: "seed-pinksequin",  src: "images/garment-pink-sequin.jpg",           caption: "Pink sequins under a blue floral wrap.",      date: "2026-01-15", seed: true },
  { id: "seed-cream",       src: "images/garment-cream-ruffle.jpg",          caption: "Silk-organza ruffle blouse.",                 date: "2026-01-08", seed: true },
  { id: "seed-shop1",       src: "images/shop-mannequins-row.jpg",           caption: "The studio, four ways at once.",              date: "2025-12-20", seed: true },
  { id: "seed-shop2",       src: "images/shop-mannequins-five.jpg",          caption: "Lined up before a Saturday opening.",         date: "2025-12-12", seed: true },
  { id: "seed-tealfull",    src: "images/customer-teal-fullshot.jpg",        caption: "Teal halter, finished and worn.",             date: "2025-11-28", seed: true },
  { id: "seed-tealban",     src: "images/customer-teal-banana.jpg",          caption: "Same dress, in the banana grove.",            date: "2025-11-28", seed: true },
];

// Pinned shots — referenced by name elsewhere, never appear in the feed.
const PINNED = {
  hero:        { src: "images/susan-kente-portrait.jpg", alt: "Susan, in kente" },
  aboutQuote:  { src: "images/susan-redchair.jpg",        alt: "Susan, in adinkra-print dress" },
  about:       { src: "images/susan-cambridge.jpg",       alt: "Susan in white tailoring with kente" },
  graduation:  { src: "images/susan-graduation.jpg",      alt: "Susan in graduation kente" },
};

function loadStored() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return [];
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed : [];
  } catch (e) {
    console.warn("photo-store: failed to load", e);
    return [];
  }
}

function saveStored(photos) {
  try {
    // Only persist user-uploaded photos (seeds are baked in).
    const userOnly = photos.filter(p => !p.seed);
    localStorage.setItem(STORAGE_KEY, JSON.stringify(userOnly));
    // Notify other tabs / pages
    window.dispatchEvent(new CustomEvent("scouture:photos-changed"));
  } catch (e) {
    console.warn("photo-store: failed to save", e);
  }
}

// Returns the merged feed (uploads + seeds), reverse-chron.
function getFeed() {
  const stored = loadStored();
  const merged = [...stored, ...SEED_PHOTOS];
  // Sort by date desc; if same date, by id (uploaded ids start with "u-" + timestamp).
  merged.sort((a, b) => {
    if (a.date !== b.date) return a.date < b.date ? 1 : -1;
    return a.id < b.id ? 1 : -1;
  });
  return merged;
}

// Add new photos to the feed. `photos` is an array of {src, caption, date?}.
function addPhotos(photos) {
  const stored = loadStored();
  const now = new Date().toISOString().slice(0, 10);
  const stamped = photos.map((p, i) => ({
    id: p.id || `u-${Date.now()}-${i}`,
    src: p.src,
    caption: p.caption || "",
    date: p.date || now,
    seed: false,
  }));
  const next = [...stamped, ...stored];
  saveStored(next);
  return stamped;
}

function removePhoto(id) {
  const stored = loadStored();
  saveStored(stored.filter(p => p.id !== id));
}

function updateCaption(id, caption) {
  const stored = loadStored();
  const next = stored.map(p => p.id === id ? { ...p, caption } : p);
  saveStored(next);
}

function clearUploads() {
  saveStored([]);
}

// React hook — re-renders when the feed changes (this tab or another).
function usePhotos() {
  const [feed, setFeed] = React.useState(() => getFeed());
  React.useEffect(() => {
    const refresh = () => setFeed(getFeed());
    window.addEventListener("scouture:photos-changed", refresh);
    window.addEventListener("storage", (e) => {
      if (e.key === STORAGE_KEY) refresh();
    });
    return () => {
      window.removeEventListener("scouture:photos-changed", refresh);
    };
  }, []);
  return feed;
}

Object.assign(window, {
  PhotoStore: { getFeed, addPhotos, removePhoto, updateCaption, clearUploads, PINNED, SEED_PHOTOS },
  usePhotos,
});