// Passage — UI components.
const { useState: uS, useRef: uR, useEffect: uE, useMemo: uM } = React;

function MobileHeader({ view, onBack, title, right, leftOverride }) {
  if (view === "viewer") return null;
  return (
    <header className="m-hd">
      {leftOverride !== undefined ? leftOverride : (
        view === "album" ? (
          <button className="m-hd-back" onClick={onBack} aria-label="Back">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M15 19l-7-7 7-7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        ) : <div className="m-hd-logo">◐</div>
      )}
      <div className="m-hd-title">{title}</div>
      <div className="m-hd-right">{right}</div>
    </header>
  );
}

function ProfileStrip({ profileUser, albums, canEdit, onEdit, onLogout }) {
  const totalPhotos = albums.reduce((n, a) => n + a.photos.length, 0);
  const countries = new Set(albums.map((a) => a.country).filter(Boolean)).size;
  const avatar = albums.find((a) => a.coverUrl)?.coverUrl;
  return (
    <section className="m-profile">
      <div className="m-pf-row">
        <div className="m-pf-avatar" style={avatar ? { backgroundImage: `url(${avatar})` } : null}>
          {!avatar && <span className="m-pf-avatar-ph">◐</span>}
        </div>
        <div className="m-pf-stats">
          <div className="m-pf-stat"><b>{albums.length}</b><span>albums</span></div>
          <div className="m-pf-stat"><b>{totalPhotos}</b><span>photos</span></div>
          <div className="m-pf-stat"><b>{countries}</b><span>countries</span></div>
        </div>
      </div>
      <div className="m-pf-name">{profileUser.display || profileUser.username}</div>
      <div className="m-pf-handle">@{profileUser.username}</div>
      {profileUser.bio && <div className="m-pf-bio">{profileUser.bio}</div>}
      {canEdit && (
        <div className="m-pf-actions">
          <button className="m-btn-ghost m-btn-xs" onClick={onEdit}>Edit profile</button>
          <button className="m-btn-ghost m-btn-xs" onClick={onLogout}>Log out</button>
        </div>
      )}
    </section>
  );
}

function TabStrip({ tab, setTab, tabs }) {
  return (
    <nav className="m-tabs">
      {tabs.map((t) => (
        <button
          key={t.id}
          className={"m-tab " + (tab === t.id ? "is-active" : "")}
          onClick={() => setTab(t.id)}
        >{t.label}</button>
      ))}
    </nav>
  );
}

function AlbumsList({ albums, onOpen, onNew, canEdit }) {
  if (albums.length === 0) {
    return (
      <div className="m-empty">
        <div className="m-empty-mark">◐</div>
        <div className="m-empty-t">No albums yet</div>
        <div className="m-empty-s">{canEdit
          ? "Create your first album to start collecting photos from your trips."
          : "This gallery is still empty."}</div>
        {canEdit && <button className="m-btn-primary" onClick={onNew}>+ New album</button>}
      </div>
    );
  }
  return (
    <div className="m-albums">
      {albums.map((a, i) => (
        <figure key={a.id} className="m-alb-card" onClick={() => onOpen(a.id)}>
          <div className="m-alb-cover" style={a.coverUrl ? { backgroundImage: `url(${a.coverUrl})` } : null}>
            {!a.coverUrl && <span className="m-alb-cover-ph">◐</span>}
          </div>
          <figcaption className="m-alb-cap">
            <div className="m-alb-t">
              <span className="m-alb-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="m-alb-title">{a.title}</span>
            </div>
            <div className="m-alb-meta">
              {[a.country, [a.month, a.year].filter(Boolean).join(" "), a.photos.length + " photo" + (a.photos.length === 1 ? "" : "s")]
                .filter(Boolean).join(" · ")}
            </div>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

function AllPhotosGrid({ albums, onOpenPhoto, onNew, canEdit }) {
  const all = [];
  albums.forEach((a) => a.photos.forEach((p, idx) => all.push({ albumId: a.id, photoIdx: idx, src: p.src, title: a.title })));
  if (all.length === 0) {
    return (
      <div className="m-empty">
        <div className="m-empty-mark">◐</div>
        <div className="m-empty-t">No photos yet</div>
        <div className="m-empty-s">{canEdit ? "Photos you add to any album show up here." : "Nothing here yet."}</div>
        {canEdit && <button className="m-btn-primary" onClick={onNew}>+ New album</button>}
      </div>
    );
  }
  return (
    <div className="m-grid">
      {all.map((p, i) => (
        <button
          key={i}
          className="m-grid-cell"
          style={{ backgroundImage: `url(${p.src})` }}
          onClick={() => onOpenPhoto(p.albumId, p.photoIdx)}
          aria-label={p.title}
        />
      ))}
    </div>
  );
}

function AlbumView({ album, canEdit, onOpenPhoto, onAddPhotos, onDeleteAlbum, onEditAlbum, uploading }) {
  const inputRef = uR(null);
  const pick = () => inputRef.current && inputRef.current.click();
  const onFiles = (e) => {
    const files = Array.from(e.target.files || []);
    if (files.length) onAddPhotos(files);
    e.target.value = "";
  };
  return (
    <div className="m-album">
      <div className="m-al-hero" style={album.coverUrl ? { backgroundImage: `url(${album.coverUrl})` } : null}>
        {!album.coverUrl && <div className="m-al-hero-ph"><span>◐</span></div>}
        <div className="m-al-veil" />
        <div className="m-al-meta">
          <div className="m-al-sub">
            {[album.country, [album.month, album.year].filter(Boolean).join(" ")].filter(Boolean).join(" · ") || "New album"}
          </div>
          <h1 className="m-al-title">{album.title}</h1>
          {album.subtitle && <div className="m-al-italic">{album.subtitle}</div>}
        </div>
      </div>
      {album.caption && <p className="m-al-caption">{album.caption}</p>}
      <div className="m-al-stats">
        <div><b>{album.photos.length}</b><span>photos</span></div>
        <div><b>{album.year || "—"}</b><span>year</span></div>
        <div><b>{album.country || "—"}</b><span>country</span></div>
      </div>

      {canEdit && (
        <div className="m-al-actions">
          <button className="m-btn-ghost" onClick={pick} disabled={uploading}>
            {uploading ? "Uploading…" : (
              <>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <path d="M12 5v14M5 12h14" strokeLinecap="round" />
                </svg>
                Add photos
              </>
            )}
          </button>
          <button className="m-btn-ghost" onClick={onEditAlbum}>Edit</button>
          <button className="m-btn-ghost m-danger" onClick={onDeleteAlbum}>Delete</button>
          <input
            ref={inputRef}
            type="file"
            accept="image/*"
            multiple
            style={{ display: "none" }}
            onChange={onFiles}
          />
        </div>
      )}

      {album.photos.length === 0 ? (
        <div className="m-empty m-empty-inline">
          <div className="m-empty-s">{canEdit ? 'Tap "Add photos" to pick from your Photos library.' : "No photos in this album yet."}</div>
        </div>
      ) : (
        <div className="m-grid m-al-grid">
          {album.photos.map((p, i) => (
            <button
              key={p.id}
              className="m-grid-cell"
              style={{ backgroundImage: `url(${p.src})` }}
              onClick={() => onOpenPhoto(album.id, i)}
              aria-label={p.caption || "Photo"}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function PhotoViewer({ album, idx, canEdit, onClose, onChange, onDelete }) {
  const startX = uR(0);
  const [offset, setOffset] = uS(0);
  const [dragging, setDragging] = uS(false);

  uE(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft" && idx > 0) onChange(idx - 1);
      else if (e.key === "ArrowRight" && idx < album.photos.length - 1) onChange(idx + 1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [idx, album, onChange, onClose]);

  if (idx == null || !album) return null;
  const photo = album.photos[idx];
  if (!photo) return null;

  const onStart = (e) => {
    const t = e.touches ? e.touches[0] : e;
    startX.current = t.clientX;
    setDragging(true);
  };
  const onMove = (e) => {
    if (!dragging) return;
    const t = e.touches ? e.touches[0] : e;
    setOffset(t.clientX - startX.current);
  };
  const onEnd = () => {
    setDragging(false);
    if (offset > 60 && idx > 0) onChange(idx - 1);
    else if (offset < -60 && idx < album.photos.length - 1) onChange(idx + 1);
    setOffset(0);
  };

  return (
    <div className="m-viewer">
      <div className="m-vw-top">
        <button className="m-vw-x" onClick={onClose} aria-label="Close">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
            <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
          </svg>
        </button>
        <div className="m-vw-count">{String(idx + 1).padStart(2, "0")} / {String(album.photos.length).padStart(2, "0")}</div>
        {canEdit ? (
          <button className="m-vw-x" onClick={() => onDelete(idx)} aria-label="Delete photo">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m-8 0l1 12a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2l1-12" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        ) : <div style={{ width: 36 }} />}
      </div>
      <div
        className="m-vw-stage"
        onTouchStart={onStart} onTouchMove={onMove} onTouchEnd={onEnd}
        onMouseDown={onStart} onMouseMove={onMove} onMouseUp={onEnd} onMouseLeave={onEnd}
      >
        <img
          src={photo.src}
          alt={photo.caption || ""}
          style={{ transform: `translateX(${offset}px)`, transition: dragging ? "none" : "transform 0.25s ease" }}
          draggable={false}
        />
      </div>
      <div className="m-vw-cap">
        <div className="m-vw-t">{album.title}</div>
        {photo.caption && <div className="m-vw-s">{photo.caption}</div>}
      </div>
      <div className="m-vw-dots">
        {album.photos.map((_, i) => (
          <span key={i} className={"m-vw-dot " + (i === idx ? "is-on" : "")} />
        ))}
      </div>
    </div>
  );
}

function AlbumSheet({ open, initial, onClose, onSave, busy }) {
  const [title, setTitle] = uS("");
  const [subtitle, setSubtitle] = uS("");
  const [country, setCountry] = uS("");
  const [month, setMonth] = uS("");
  const [year, setYear] = uS("");
  const [caption, setCaption] = uS("");
  const [err, setErr] = uS("");

  uE(() => {
    if (!open) return;
    setTitle(initial?.title || "");
    setSubtitle(initial?.subtitle || "");
    setCountry(initial?.country || "");
    setMonth(initial?.month || "");
    setYear(initial?.year ? String(initial.year) : String(new Date().getFullYear()));
    setCaption(initial?.caption || "");
    setErr("");
  }, [open, initial]);

  if (!open) return null;

  const submit = async (e) => {
    e && e.preventDefault && e.preventDefault();
    if (!title.trim()) return;
    setErr("");
    try {
      await onSave({
        title: title.trim(),
        subtitle: subtitle.trim(),
        country: country.trim(),
        month: month.trim(),
        year: year ? Number(year) : null,
        caption: caption.trim(),
      });
    } catch (e) { setErr(e.message || "Error"); }
  };

  return (
    <div className="m-sheet-wrap" onClick={onClose}>
      <form className="m-sheet" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="m-sheet-hd">
          <button type="button" className="m-sheet-x" onClick={onClose}>Cancel</button>
          <div className="m-sheet-t">{initial ? "Edit album" : "New album"}</div>
          <button type="submit" className="m-sheet-ok" disabled={!title.trim() || busy}>
            {busy ? "…" : (initial ? "Save" : "Create")}
          </button>
        </div>
        <div className="m-sheet-body">
          {err && <div className="m-err">{err}</div>}
          <label className="m-field">
            <span>Title</span>
            <input autoFocus value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. Kyoto" />
          </label>
          <label className="m-field">
            <span>Subtitle</span>
            <input value={subtitle} onChange={(e) => setSubtitle(e.target.value)} placeholder="optional tagline" />
          </label>
          <div className="m-field-row">
            <label className="m-field"><span>Country</span>
              <input value={country} onChange={(e) => setCountry(e.target.value)} placeholder="Japan" />
            </label>
            <label className="m-field"><span>Month</span>
              <input value={month} onChange={(e) => setMonth(e.target.value)} placeholder="April" />
            </label>
            <label className="m-field m-field-sm"><span>Year</span>
              <input type="number" value={year} onChange={(e) => setYear(e.target.value)} />
            </label>
          </div>
          <label className="m-field">
            <span>Caption</span>
            <textarea rows="3" value={caption} onChange={(e) => setCaption(e.target.value)} placeholder="A few words about this trip." />
          </label>
        </div>
      </form>
    </div>
  );
}

function ProfileSheet({ open, initial, onClose, onSave, busy }) {
  const [display, setDisplay] = uS("");
  const [bio, setBio] = uS("");
  const [err, setErr] = uS("");
  uE(() => {
    if (!open) return;
    setDisplay(initial?.display || "");
    setBio(initial?.bio || "");
    setErr("");
  }, [open, initial]);
  if (!open) return null;
  const submit = async (e) => {
    e && e.preventDefault && e.preventDefault();
    setErr("");
    try { await onSave({ display: display.trim(), bio: bio.trim() }); }
    catch (e) { setErr(e.message || "Error"); }
  };
  return (
    <div className="m-sheet-wrap" onClick={onClose}>
      <form className="m-sheet" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="m-sheet-hd">
          <button type="button" className="m-sheet-x" onClick={onClose}>Cancel</button>
          <div className="m-sheet-t">Edit profile</div>
          <button type="submit" className="m-sheet-ok" disabled={busy}>{busy ? "…" : "Save"}</button>
        </div>
        <div className="m-sheet-body">
          {err && <div className="m-err">{err}</div>}
          <label className="m-field"><span>Display name</span>
            <input autoFocus value={display} onChange={(e) => setDisplay(e.target.value)} maxLength={64} />
          </label>
          <label className="m-field"><span>Bio</span>
            <textarea rows="4" value={bio} onChange={(e) => setBio(e.target.value)} maxLength={280} placeholder="A line about you." />
          </label>
        </div>
      </form>
    </div>
  );
}

function Fab({ onClick, label }) {
  return (
    <button className="m-fab" onClick={onClick} aria-label={label}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M12 5v14M5 12h14" strokeLinecap="round" />
      </svg>
    </button>
  );
}

function AuthPage({ mode, onDone, onSwitch }) {
  const [username, setUsername] = uS("");
  const [password, setPassword] = uS("");
  const [busy, setBusy] = uS(false);
  const [err, setErr] = uS("");
  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setErr("");
    try {
      const user = mode === "signup"
        ? await API.signup(username.trim().toLowerCase(), password)
        : await API.login(username.trim().toLowerCase(), password);
      onDone(user);
    } catch (e) { setErr(e.message || "Error"); setBusy(false); }
  };
  return (
    <div className="m-auth">
      <div className="m-auth-mark">◐</div>
      <h1 className="m-auth-t">mehapnet</h1>
      <div className="m-auth-s">{mode === "signup" ? "Create your gallery" : "Welcome back"}</div>
      <form className="m-auth-form" onSubmit={submit}>
        {err && <div className="m-err">{err}</div>}
        <label className="m-field">
          <span>Username</span>
          <input
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoCapitalize="none"
            autoCorrect="off"
            spellCheck="false"
            placeholder="your-handle"
            required
          />
        </label>
        <label className="m-field">
          <span>Password</span>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            minLength={8}
            required
          />
        </label>
        <button type="submit" className="m-btn-primary" disabled={busy}>
          {busy ? "…" : (mode === "signup" ? "Create account" : "Log in")}
        </button>
      </form>
      <div className="m-auth-alt">
        {mode === "signup" ? (
          <>Have an account? <a href="#" onClick={(e) => { e.preventDefault(); onSwitch("login"); }}>Log in</a></>
        ) : (
          <>No account yet? <a href="#" onClick={(e) => { e.preventDefault(); onSwitch("signup"); }}>Sign up</a></>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  MobileHeader, ProfileStrip, TabStrip, AlbumsList, AllPhotosGrid,
  AlbumView, PhotoViewer, AlbumSheet, ProfileSheet, Fab, AuthPage,
});