// Content recycling (evergreen) + RSS auto-import.

function ContentPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const evergreen = data.evergreen || [];
  const feeds = data.rssFeeds || [];
  const [caption, setCaption] = React.useState("");
  const [category, setCategory] = React.useState("");
  const [feedUrl, setFeedUrl] = React.useState("");
  const [busy, setBusy] = React.useState("");

  const addEver = async () => {
    if (!caption.trim()) { hub.toast("Add a caption to recycle"); return; }
    setBusy("ever");
    try { await hub.actions.addEvergreen({ caption: caption.trim(), category: category.trim() || "General" }); setCaption(""); setCategory(""); }
    finally { setBusy(""); }
  };
  const addFeed = async () => {
    if (!/^https?:\/\//i.test(feedUrl.trim())) { hub.toast("Enter a full feed URL (http/https)"); return; }
    setBusy("feed");
    try { await hub.actions.addRssFeed({ url: feedUrl.trim() }); setFeedUrl(""); }
    finally { setBusy(""); }
  };

  return (
    <div className="page content-page">
      {/* Evergreen */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Evergreen library</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Save your best content and recycle it into new drafts whenever you need to fill the calendar.</div>
        <div style={{ display: "flex", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
          <input className="input" placeholder="Evergreen caption" value={caption} onChange={(e) => setCaption(e.target.value)} style={{ flex: 1, minWidth: 200 }} />
          <input className="input" placeholder="Category" value={category} onChange={(e) => setCategory(e.target.value)} style={{ width: 150 }} />
          <button className="btn btn-primary" disabled={busy === "ever"} onClick={addEver}><Icon.Plus width="14" height="14" /> Add</button>
        </div>
        <div style={{ display: "grid", gap: 8 }}>
          {evergreen.map((item) => (
            <div key={item.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <span className="pill" style={{ padding: "1px 7px", fontSize: 10 }}>{item.category}</span>
              <div style={{ flex: 1, minWidth: 0, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.caption}</div>
              <span className="faint" style={{ fontSize: 11 }}>recycled {item.timesPosted || 0}×</span>
              <button className="btn btn-sm btn-primary" onClick={() => hub.actions.queueEvergreen(item.id)}><Icon.Refresh width="13" height="13" /> Queue now</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteEvergreen(item.id)} style={{ color: "var(--danger)" }}>Remove</button>
            </div>
          ))}
          {!evergreen.length && <div className="muted" style={{ fontSize: 12.5 }}>No evergreen content yet — add your best posts above.</div>}
        </div>
      </div>

      {/* RSS */}
      <div className="card" style={{ padding: 20 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>RSS auto-import</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Add a blog or news feed and pull its latest items straight into your drafts.</div>
        <div style={{ display: "flex", gap: 10, marginBottom: 12, flexWrap: "wrap" }}>
          <input className="input" placeholder="https://yourblog.com/feed" value={feedUrl} onChange={(e) => setFeedUrl(e.target.value)} style={{ flex: 1, minWidth: 220 }} />
          <button className="btn btn-primary" disabled={busy === "feed"} onClick={addFeed}><Icon.Plus width="14" height="14" /> Add feed</button>
        </div>
        <div style={{ display: "grid", gap: 8 }}>
          {feeds.map((feed) => (
            <div key={feed.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <Icon.Globe width="16" height="16" style={{ color: "var(--text-3)" }} />
              <div style={{ flex: 1, minWidth: 0, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{feed.url}</div>
              <span className="faint" style={{ fontSize: 11 }}>{feed.importedCount || 0} imported</span>
              <button className="btn btn-sm btn-primary" onClick={() => hub.actions.importRssFeed(feed.id)}><Icon.Download width="13" height="13" /> Import drafts</button>
              <button className="btn btn-sm" onClick={() => hub.actions.deleteRssFeed(feed.id)} style={{ color: "var(--danger)" }}>Remove</button>
            </div>
          ))}
          {!feeds.length && <div className="muted" style={{ fontSize: 12.5 }}>No feeds yet — add one above to auto-draft from your blog.</div>}
        </div>
      </div>
    </div>
  );
}

window.ContentPage = ContentPage;