// Left rail — the day's items, filter chips, hover statusbar for one-click
// status changes. Status glyphs: ★ featured, ● used, ◌ context, ⊘ hidden.

function Rail({ items, allCount, inPost, filter, setFilter, selectedItem, setSelectedItem, setItemStatus, deleteItem, moveItemToYesterday }) {
  const filters = [
    { k: "all", l: "All" },
    { k: "in-post", l: "In post" },
    { k: "context", l: "Context" },
    { k: "hidden", l: "Hidden" },
  ];
  return (
    <aside className="rail">
      <div className="rail-head">
        <span className="label">Day's items</span>
        <span className="count">{inPost}/{allCount} in post</span>
      </div>
      <div className="filters">
        {filters.map((f) => (
          <button
            key={f.k}
            type="button"
            className={"filter" + (filter === f.k ? " on" : "")}
            onClick={() => setFilter(f.k)}>
            {f.l}
          </button>
        ))}
      </div>
      <div className="items">
        {items.length === 0 && (
          <div className="center-note">no items yet — send from telegram</div>
        )}
        {items.map((it) => (
          <ItemRow
            key={it.id}
            item={it}
            selected={selectedItem === it.id}
            onSelect={() => setSelectedItem((s) => (s === it.id ? null : it.id))}
            setStatus={(s) => setItemStatus(it.id, s)}
            onDelete={() => {
              if (confirm("Delete this item? This removes it from the inbox; if it's been posted, re-publish will drop it from the post.")) {
                if (selectedItem === it.id) setSelectedItem(null);
                deleteItem(it.id);
              }
            }}
            onMoveYesterday={() => {
              if (selectedItem === it.id) setSelectedItem(null);
              moveItemToYesterday(it.id);
            }}
          />
        ))}
      </div>
      <div className="rail-foot">
        <span>from telegram / shortcuts</span>
        <span>{allCount} today</span>
      </div>
    </aside>
  );
}

function ItemRow({ item, selected, onSelect, setStatus, onDelete, onMoveYesterday }) {
  const meta = (() => {
    const t = item.captured_at ? new Date(item.captured_at * 1000) : null;
    if (!t) return "--:--";
    return t.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
  })();

  const summary = item.caption || item.description || item.transcript || item.text_body || item.filename || "";

  const onDragStart = (e) => {
    // Note: we only know MIME-y types when inspecting on drop; set both so
    // either key works across browsers.
    e.dataTransfer.setData("application/x-postcard-item", item.id);
    e.dataTransfer.setData("text/x-postcard-item", item.id);
    e.dataTransfer.setData("text/plain", `item:${item.id}`);
    e.dataTransfer.effectAllowed = "copy";
  };

  return (
    <div
      className={"item" + (selected ? " selected" : "") + (item.status === "hidden" ? " hidden-item" : "")}
      onClick={onSelect}
      draggable
      onDragStart={onDragStart}>
      <div className="item-row">
        <div className={"thumb" + (item.kind === "photo" ? " photo" : "")}>
          <span className="thumb-kind">{KIND_LABEL[item.kind] || "OBJ"}</span>
          {item.kind === "photo" || item.kind === "video" ? (
            <img src={api.rawMediaURL(item.id)} alt="" loading="lazy"
                 onError={(e) => { e.target.style.display = "none"; }} />
          ) : (
            <span className="thumb-placeholder">
              {item.kind === "voice" && "▶"}
              {item.kind === "audio" && "♪"}
              {item.kind === "text"  && "¶"}
            </span>
          )}
          <span className={"status-glyph " + item.status}>{STATUS_GLYPH[item.status]}</span>
        </div>
        <div className="item-body">
          <div className="item-meta">
            <span className="kind">{meta}</span>
            <span>{item.kind}</span>
            {item.filename && <span className="filename" title={item.filename}>{item.filename}</span>}
          </div>
          <div className="item-text">{summary}</div>
        </div>
        <div className="statusbar" onClick={(e) => e.stopPropagation()}>
          {STATUS_ORDER.map((s) => (
            <button
              key={s}
              className={item.status === s ? "on" : ""}
              title={STATUS_LABEL[s]}
              onClick={() => setStatus(s)}>
              {STATUS_GLYPH[s]}
            </button>
          ))}
        </div>
      </div>
      {selected && <ItemPreview item={item} onDelete={onDelete} onMoveYesterday={onMoveYesterday} />}
    </div>
  );
}

function ItemPreview({ item, onDelete, onMoveYesterday }) {
  return (
    <div className="item-preview" onClick={(e) => e.stopPropagation()}>
      {item.kind === "photo" && (
        <img src={api.rawMediaURL(item.id)} alt={item.caption || item.description || ""} />
      )}
      {item.kind === "video" && (
        <video src={api.rawMediaURL(item.id)} controls preload="metadata" />
      )}
      {(item.kind === "voice" || item.kind === "audio") && (
        <audio src={api.rawMediaURL(item.id)} controls preload="metadata" />
      )}
      {item.kind === "text" && item.text_body && (
        <div className="preview-text">{item.text_body}</div>
      )}
      {item.caption && (
        <div className="preview-meta">
          <span className="preview-meta-label">caption</span>
          <span>{item.caption}</span>
        </div>
      )}
      {item.transcript && (item.kind === "voice" || item.kind === "audio") && (
        <div className="preview-meta">
          <span className="preview-meta-label">transcript</span>
          <span>{item.transcript}</span>
        </div>
      )}
      {item.description && item.kind === "photo" && (
        <div className="preview-meta">
          <span className="preview-meta-label">ai</span>
          <span>{item.description}</span>
        </div>
      )}
      <div className="preview-actions">
        <button type="button" className="preview-move" onClick={onMoveYesterday}>
          ← Move to yesterday
        </button>
        <button type="button" className="preview-delete" onClick={onDelete}>
          Delete item
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { Rail });