// Top bar, trip menu, publish panel, theme tweaks.

const { useState, useEffect, useRef, useMemo } = React;

const STATUS_ORDER = ["featured", "used", "context", "hidden"];
const STATUS_LABEL = {
  featured: "Featured",
  used: "Used",
  context: "Context",
  hidden: "Hidden",
};
const STATUS_GLYPH = {
  featured: "★",
  used: "●",
  context: "◌",
  hidden: "⊘",
};
const KIND_LABEL = { photo: "IMG", voice: "VOX", video: "VID", audio: "AUD", text: "TXT" };

const toLocalISO = (dt) => {
  const y = dt.getFullYear();
  const m = String(dt.getMonth() + 1).padStart(2, "0");
  const d = String(dt.getDate()).padStart(2, "0");
  return `${y}-${m}-${d}`;
};
const addDays = (iso, n) => {
  const [y, m, d] = iso.split("-").map(Number);
  return toLocalISO(new Date(y, m - 1, d + n));
};
const humanDate = (iso) => {
  const [y, m, d] = iso.split("-").map(Number);
  const dt = new Date(y, m - 1, d);
  return dt.toLocaleDateString("en", { weekday: "long", day: "numeric", month: "long" });
};
const kicker = (iso, trip) => {
  const [y, m, d] = iso.split("-").map(Number);
  const dt = new Date(y, m - 1, d);
  const mon = dt.toLocaleDateString("en", { month: "short" }).toLowerCase();
  return `${(trip.title || trip.slug).toLowerCase()} · ${d} ${mon} ${y}`;
};

// ---------- TopBar ----------
function TopBar({
  trip, trips, date, status, dirty, wordCount, inPostCount, featuredCount, contextCount, hiddenCount,
  publishedAt, isDraft, onToggleDraft, onDate, onSwitchTrip, onNewTrip, onPublish,
}) {
  const [tripOpen, setTripOpen] = useState(false);
  const [publishOpen, setPublishOpen] = useState(false);
  const brandRef = useRef();
  const pubRef = useRef();

  useEffect(() => {
    const close = (e) => {
      if (brandRef.current && !brandRef.current.contains(e.target)) setTripOpen(false);
      if (pubRef.current && !pubRef.current.contains(e.target)) setPublishOpen(false);
    };
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, []);

  const publishLabel = (() => {
    if (status.kind === "saving")        return "Saving…";
    if (isDraft)                         return "Unpublish";
    if (status.kind === "edited")        return "Publish update";
    if (status.kind === "published")     return "Published";
    return "Publish";
  })();

  const publishClass =
    (dirty || isDraft) && status.kind !== "saving"
      ? "btn btn-primary update"
      : "btn btn-primary";

  // dt day-index in trip (visual hint, "Day NN / MM")
  const tripDays = useMemo(() => {
    if (!trip || !trip.created_at) return { n: null, total: null };
    return { n: null, total: null };
  }, [trip]);

  return (
    <header className="topbar">
      <div className="brand" ref={brandRef} onClick={(e) => { e.stopPropagation(); setTripOpen((v) => !v); }}>
        <div className="brand-mark">p</div>
        <div className="brand-name">Postcard</div>
        <div className="brand-trip">{(trip.title || trip.slug).toLowerCase()}</div>
        {tripOpen && (
          <div className="trip-menu" onClick={(e) => e.stopPropagation()}>
            <div className="trip-menu-head">
              trips · <em>active</em> is where telegram uploads land
            </div>
            {(trips || []).map((t) => (
              <div key={t.slug}
                className={"trip-row" + (t.slug === trip.slug ? " viewing" : "")}
                onClick={() => { setTripOpen(false); onSwitchTrip(t, { activate: false }); }}>
                <span className="trip-row-title">{t.title || t.slug}</span>
                {t.is_active ? (
                  <span className="trip-row-pill active">active</span>
                ) : (
                  <button
                    type="button"
                    className="trip-row-pill ghost"
                    onClick={(e) => { e.stopPropagation(); setTripOpen(false); onSwitchTrip(t, { activate: true }); }}
                    title="Make this the trip Telegram uploads land on">
                    set active
                  </button>
                )}
                <span className="slug">{t.slug}</span>
              </div>
            ))}
            <div className="trip-row new" onClick={() => { setTripOpen(false); onNewTrip(); }}>
              + new trip
            </div>
          </div>
        )}
      </div>

      <div className="daynav">
        <button className="daynav-arrow" title="Previous day" onClick={() => onDate(addDays(date, -1))}>‹</button>
        <div className="daynav-date">
          <span>{humanDate(date)}</span>
        </div>
        <div className="daynav-spacer" />
        <button className="daynav-arrow" title="Next day" onClick={() => onDate(addDays(date, 1))}>›</button>
        <div className={`status ${status.kind || ""}`}>
          <span className="dot" />
          {status.label}
        </div>
      </div>

      <div className="publish-wrap" ref={pubRef}>
        <button
          className={publishClass}
          disabled={status.kind === "saving"}
          onClick={(e) => { e.stopPropagation(); setPublishOpen((v) => !v); }}>
          {publishLabel}
        </button>
        <div className={"publish-panel" + (publishOpen ? " open" : "")}>
          {isDraft ? (
            <>
              <h4>Keep {humanDate(date)} as a private draft.</h4>
              <p>
                Pull from site will remove this day's files from git entirely.
                Local edits and media stay intact — toggle draft off and publish
                to push it back out.
              </p>
              <div className="publish-summary">
                <div>Body <b>{wordCount} word{wordCount === 1 ? "" : "s"}</b></div>
                <div>Status <b>private</b></div>
                {publishedAt && <div style={{ marginTop: 6 }}>Last published <b>{publishedAt}</b></div>}
              </div>
            </>
          ) : (
            <>
              <h4>Publish update to {humanDate(date)}?</h4>
              <p>
                This rewrites the public day to match your current draft.
                Unused and hidden items drop from the record.
              </p>
              <div className="publish-summary">
                <div>Body <b>{wordCount} word{wordCount === 1 ? "" : "s"}</b></div>
                <div>In post <b>{inPostCount} item{inPostCount === 1 ? "" : "s"}</b> · {featuredCount} featured · {inPostCount - featuredCount} used</div>
                <div>Dropping <b>{contextCount + hiddenCount}</b> (context &amp; hidden)</div>
                {publishedAt && <div style={{ marginTop: 6 }}>Last published <b>{publishedAt}</b></div>}
              </div>
            </>
          )}

          <label className="publish-draft-toggle">
            <input
              type="checkbox"
              checked={!!isDraft}
              onChange={(e) => onToggleDraft(e.target.checked)} />
            Keep as draft (don't publish to the site)
          </label>

          <div className="publish-actions">
            <button onClick={() => setPublishOpen(false)}>Cancel</button>
            <button className="confirm" onClick={async () => {
              setPublishOpen(false);
              // Ensure any pending draft-toggle patch has landed before the
              // publish call so the server sees the right is_draft value.
              await Promise.resolve();
              onPublish();
            }}>
              {isDraft ? "Pull from site" : (status.kind === "edited" ? "Publish update" : "Publish")}
            </button>
          </div>
        </div>
      </div>
    </header>
  );
}

// ---------- Toast ----------
function Toast({ msg, kind }) {
  if (!msg) return null;
  return <div className={"toast" + (kind === "err" ? " err" : "")}>{msg}</div>;
}

// ---------- Tweaks (theme switcher) ----------
function Tweaks({ show, theme, setTheme }) {
  const themes = [
    { k: "paper", l: "Paper", chips: ["#F4EFE5", "#1E1B16", "#B85C3A"] },
    { k: "bone",  l: "Bone",  chips: ["#ECECE8", "#15181C", "#3E6A8C"] },
    { k: "dusk",  l: "Dusk",  chips: ["#161412", "#EDE6D6", "#D98A4A"] },
  ];
  return (
    <div id="tweaks" className={show ? "on" : ""}>
      <h5><span>Tweaks</span><span style={{ color: "var(--ink-3)" }}>theme</span></h5>
      <div className="swatches">
        {themes.map((t) => (
          <div key={t.k} className={"swatch" + (theme === t.k ? " on" : "")} onClick={() => setTheme(t.k)}>
            <div className="swatch-chips">
              {t.chips.map((c, i) => <div key={i} className="swatch-chip" style={{ background: c }} />)}
            </div>
            <span>{t.l}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  TopBar, Toast, Tweaks,
  STATUS_ORDER, STATUS_LABEL, STATUS_GLYPH, KIND_LABEL,
  toLocalISO, addDays, humanDate, kicker,
});