/* watchlist.jsx — Watchlist & analysis posts: tickers floated as ideas, NOT
   positions. Grouped by week, click a card to read the full post. */

function weekStartMs(ts) {
  const d = new Date(ts);
  const dow = (d.getDay() + 6) % 7; // Monday = 0
  d.setHours(0, 0, 0, 0);
  d.setDate(d.getDate() - dow);
  return d.getTime();
}

function WatchlistCard({ entry, analysts, onDelete }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={cx("wl-card", open && "open")} onClick={() => setOpen(o => !o)}>
      <div className="wl-head">
        <AnalystChip analyst={entry.analyst} analysts={analysts} />
        <span className={cx("wl-kind", entry.kind)}>{entry.kind}</span>
        <span className="wl-meta mono">{entry.channel} · {fmtTime(entry.ts, { short: true })}</span>
        <span style={{ flex: 1 }} />
        {onDelete && (
          <button
            className="icon-btn danger"
            title="Delete post"
            onClick={async (e) => { e.stopPropagation(); if (await confirmDialog({ title: "Delete post", message: "Remove this watchlist / analysis post?", confirmLabel: "Delete", danger: true })) onDelete(entry.id); }}
          >{I("trash", { size: 14 })}</button>
        )}
      </div>
      {entry.tickers && entry.tickers.length > 0 && (
        <div className="wl-tickers">
          {entry.tickers.map(t => <span key={t} className="wl-tick">${t}</span>)}
        </div>
      )}
      {entry.title && <div className="wl-title">{entry.title}</div>}
      {open && entry.raw && <div className="wl-raw">{entry.raw}</div>}
    </div>
  );
}

function Watchlist({ entries, analysts, onDelete }) {
  const [filter, setFilter] = useState("");
  const [kind, setKind] = useState("all");

  const filtered = useMemo(() => {
    const fl = filter.toLowerCase().trim();
    return (entries || []).filter(e => {
      if (kind !== "all" && e.kind !== kind) return false;
      if (!fl) return true;
      return (e.analyst || "").toLowerCase().includes(fl)
        || (e.tickers || []).some(t => String(t).toLowerCase().includes(fl))
        || (e.title || "").toLowerCase().includes(fl)
        || (e.raw || "").toLowerCase().includes(fl);
    });
  }, [entries, filter, kind]);

  const weeks = useMemo(() => {
    const m = new Map();
    for (const e of filtered) {
      const w = weekStartMs(e.ts);
      if (!m.has(w)) m.set(w, []);
      m.get(w).push(e);
    }
    return [...m.entries()].sort((a, b) => b[0] - a[0]);
  }, [filtered]);

  return (
    <div>
      <div className="filterbar" style={{ gridTemplateColumns: "1fr auto" }}>
        <input className="input search" placeholder="Filter by ticker, analyst, or text…" value={filter} onChange={e => setFilter(e.target.value)} />
        <div className="seg">
          {[["all", "All"], ["watchlist", "Watchlists"], ["analysis", "Analysis"]].map(([v, l]) => (
            <button key={v} className={cx("seg-btn", kind === v && "on")} onClick={() => setKind(v)}>{l}</button>
          ))}
        </div>
      </div>

      {weeks.length === 0 && (
        <div className="empty" style={{ padding: 60 }}>
          No watchlist or analysis posts yet. These appear when an analyst floats tickers as ideas (not a position).
        </div>
      )}

      {weeks.map(([w, list]) => {
        const sources = new Set(list.map(e => e.analyst)).size;
        const tickers = new Set(list.flatMap(e => e.tickers || [])).size;
        return (
          <div key={w} className="wl-week">
            <div className="wl-week-hdr">
              <span className="wl-week-title">Week of {fmtDay(w)}</span>
              <span className="wl-week-meta mono">{list.length} post{list.length === 1 ? "" : "s"} · {sources} source{sources === 1 ? "" : "s"} · {tickers} ticker{tickers === 1 ? "" : "s"}</span>
            </div>
            <div className="wl-list">
              {list.map(e => <WatchlistCard key={e.id} entry={e} analysts={analysts} onDelete={onDelete} />)}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Watchlist });