// Calendar page — real local scheduling with edit/delete and drag reschedule

function formatPostTime(time) {
  if (!time) return "09:30";
  const [hourText, minuteText] = String(time).split(":");
  const hour = Number(hourText);
  if (Number.isNaN(hour)) return time;
  const suffix = hour >= 12 ? "PM" : "AM";
  const displayHour = hour % 12 || 12;
  return `${displayHour}:${minuteText || "00"} ${suffix}`;
}

function postDateKey(date) {
  const d = new Date(`${date}T00:00:00`);
  if (Number.isNaN(d.getTime())) return date;
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

function calendarDateKey(d) {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

function monthLabel(d) {
  return d.toLocaleDateString("en-US", { month: "long", year: "numeric" });
}

function lifecycleLabel(status) {
  return ({
    draft: "Draft",
    needs_approval: "Needs approval",
    changes_requested: "Changes requested",
    scheduled: "Scheduled",
    published: "Published",
    failed: "Failed",
    blocked: "Blocked",
    rejected: "Rejected"
  }[status] || status || "Draft");
}

function lifecyclePill(status) {
  if (status === "scheduled" || status === "published") return "green";
  if (status === "failed" || status === "blocked" || status === "rejected") return "danger";
  if (status === "draft") return "";
  return "warn";
}

function PostEditor({ post, onClose, onSave, onDelete, onDuplicate, onOpenComposer }) {
  const [caption, setCaption] = React.useState(post.caption || "");
  const [date, setDate] = React.useState(post.date || "2026-05-18");
  const [time, setTime] = React.useState(post.time || "09:30");
  const [contentType, setContentType] = React.useState(post.contentType || "feed");
  const [status, setStatus] = React.useState(post.status || "scheduled");
  const [platforms, setPlatforms] = React.useState(() => {
    const current = new Set(post.platforms || []);
    return Object.keys(Platforms).reduce((acc, id) => ({ ...acc, [id]: current.has(id) }), {});
  });

  const selectedPlatforms = Object.keys(platforms).filter((id) => platforms[id]);

  const togglePlatform = (id) => {
    const next = { ...platforms, [id]: !platforms[id] };
    if (!Object.values(next).some(Boolean)) return;
    setPlatforms(next);
  };

  const submit = () => {
    onSave(post.id, {
      caption,
      date,
      time,
      contentType,
      status,
      platforms: selectedPlatforms
    });
  };

  return (
    <div className="modal-scrim" role="presentation" onMouseDown={(event) => {
      if (event.target === event.currentTarget) onClose();
    }}>
      <div className="modal-panel" role="dialog" aria-modal="true" aria-label="Edit scheduled post">
        <div className="modal-head">
          <div>
            <div className="modal-title">Edit scheduled post</div>
            <div className="muted" style={{ fontSize: 12 }}>{post.id}</div>
          </div>
          <button className="icon-btn" aria-label="Close" onClick={onClose}><Icon.X width="18" height="18" /></button>
        </div>

        <label className="field-label">Caption</label>
        <textarea className="textarea" value={caption} onChange={(event) => setCaption(event.target.value)} style={{ minHeight: 110 }} />

        <div className="form-grid-2">
          <div>
            <label className="field-label">Date</label>
            <input className="input" type="date" value={date} onChange={(event) => setDate(event.target.value)} />
          </div>
          <div>
            <label className="field-label">Time</label>
            <input className="input" type="time" value={time} onChange={(event) => setTime(event.target.value)} />
          </div>
          <div>
            <label className="field-label">Content type</label>
            <select className="input" value={contentType} onChange={(event) => setContentType(event.target.value)}>
              <option value="feed">Feed</option>
              <option value="reel">Reel</option>
              <option value="story">Story</option>
              <option value="short">Short</option>
            </select>
          </div>
          <div>
            <label className="field-label">Status</label>
            <select className="input" value={status} onChange={(event) => setStatus(event.target.value)}>
              <option value="draft">Draft</option>
              <option value="needs_approval">Needs approval</option>
              <option value="scheduled">Scheduled</option>
              <option value="changes_requested">Changes requested</option>
              <option value="blocked">Blocked</option>
              <option value="failed">Failed</option>
              <option value="rejected">Rejected</option>
              <option value="published">Published</option>
            </select>
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <label className="field-label">Platforms</label>
          <div className="platform-toggle-grid">
            {Object.keys(Platforms).slice(0, 7).map((id) => (
              <button key={id} className={`platform-toggle ${platforms[id] ? "active" : ""}`} onClick={() => togglePlatform(id)}>
                <PlatformIcon id={id} size={18} />
                <span>{Platforms[id].name}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <label className="field-label">Activity history</label>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, maxHeight: 180, overflow: "auto", border: "1px solid var(--border)", borderRadius: 12, padding: 10, background: "var(--bg-2)" }}>
            {(post.activityHistory || []).length ? post.activityHistory.map((item) => (
              <div key={item.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 8, alignItems: "start", fontSize: 12 }}>
                <span className={`pill ${item.action.includes("rejected") || item.action.includes("failed") || item.action.includes("blocked") ? "danger" : item.action.includes("scheduled") || item.action.includes("approved") ? "green" : "warn"}`}>{item.action.replaceAll("_", " ")}</span>
                <div>
                  <div>{item.note}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{item.actor} · {new Date(item.createdAt).toLocaleString()}</div>
                </div>
              </div>
            )) : <div className="muted" style={{ fontSize: 12 }}>No activity has been recorded yet.</div>}
          </div>
        </div>

        <div className="modal-actions post-editor-actions">
          <button className="btn danger" onClick={() => onDelete(post.id)}>Delete</button>
          <button className="btn" onClick={() => onDuplicate(post.id)}>Duplicate</button>
          <button className="btn" onClick={() => onOpenComposer(post.id)}>Open in Composer</button>
          <div style={{ flex: 1 }} />
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={submit}>Save post</button>
        </div>
      </div>
    </div>
  );
}

function CalendarPostChip({ post, onOpen }) {
  const firstPlatform = post.platforms?.[0] || "instagram";
  const label = post.caption || "Untitled post";
  const customVariants = Object.values(post.variants || {}).filter((variant) => variant.useGlobalCaption === false).length;
  const mediaVariants = Object.values(post.variants || {}).filter((variant) => variant.useGlobalMedia === false).length;
  return (
    <button
      className={`calendar-post-chip ${post.status === "needs_approval" || post.status === "changes_requested" ? "needs-approval" : ""}`}
      draggable
      onDragStart={(event) => {
        event.dataTransfer.setData("text/clearcast-post-id", post.id);
        event.dataTransfer.setData("text/sharehub-post-id", post.id);
      }}
      onClick={(event) => {
        event.stopPropagation();
        onOpen(post);
      }}
      title="Tap to edit or change the date. Drag to reschedule on desktop."
    >
      <PlatformIcon id={firstPlatform} size={14} />
      <span className="calendar-post-time">{formatPostTime(post.time)}</span>
      <span className="calendar-post-title">{label}</span>
      {customVariants > 0 && <span className="pill info" style={{ fontSize: 9, padding: "1px 5px" }}>{customVariants} variants</span>}
      {mediaVariants > 0 && <span className="pill green" style={{ fontSize: 9, padding: "1px 5px" }}>{mediaVariants} media</span>}
      <span className={`pill ${lifecyclePill(post.status)}`} style={{ fontSize: 9, padding: "1px 5px", marginLeft: "auto" }}>{lifecycleLabel(post.status)}</span>
    </button>
  );
}

function CalendarPage() {
  const hub = window.useClearCast();
  const allPosts = [...(hub.data.posts || [])].sort((a, b) => `${a.date} ${a.time}`.localeCompare(`${b.date} ${b.time}`));
  const [view, setView] = React.useState("month");
  const [editingPost, setEditingPost] = React.useState(null);
  const [dragTarget, setDragTarget] = React.useState("");
  const [query, setQuery] = React.useState("");
  const [platformFilter, setPlatformFilter] = React.useState("all");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [typeFilter, setTypeFilter] = React.useState("all");
  const [selectedIds, setSelectedIds] = React.useState([]);
  const [calendarDate, setCalendarDate] = React.useState(() => new Date(2026, 4, 18));
  const today = new Date(2026, 4, 18);

  const statusGroups = {
    all: [],
    draft: ["draft"],
    needs_approval: ["needs_approval", "changes_requested"],
    scheduled: ["scheduled"],
    blocked: ["blocked", "failed", "rejected"],
    published: ["published"]
  };
  const posts = allPosts.filter((post) => {
    const text = `${post.caption || ""} ${post.status || ""} ${post.contentType || ""} ${(post.platforms || []).join(" ")}`.toLowerCase();
    if (query.trim() && !text.includes(query.trim().toLowerCase())) return false;
    if (platformFilter !== "all" && !(post.platforms || []).includes(platformFilter)) return false;
    if (typeFilter !== "all" && post.contentType !== typeFilter) return false;
    if (statusFilter !== "all" && !(statusGroups[statusFilter] || [statusFilter]).includes(post.status)) return false;
    return true;
  });
  const selectedPosts = allPosts.filter((post) => selectedIds.includes(post.id));

  React.useEffect(() => {
    setSelectedIds((ids) => ids.filter((id) => posts.some((post) => post.id === id)));
  }, [posts.map((post) => post.id).join("|")]);

  const monthStart = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 1);
  const start = new Date(monthStart);
  start.setDate(1 - start.getDay());
  const days = Array.from({ length: 42 }, (_, i) => {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    return d;
  });

  const postsByDate = posts.reduce((acc, post) => {
    const key = postDateKey(post.date);
    acc[key] = acc[key] || [];
    acc[key].push(post);
    return acc;
  }, {});

  const key = calendarDateKey;
  const isCurMonth = (d) => d.getMonth() === calendarDate.getMonth() && d.getFullYear() === calendarDate.getFullYear();
  const isToday = (d) => key(d) === key(today);
  const moveMonth = (amount) => setCalendarDate((current) => new Date(current.getFullYear(), current.getMonth() + amount, 1));
  const jumpToday = () => {
    setCalendarDate(new Date(today.getFullYear(), today.getMonth(), 1));
    setView("month");
  };

  const savePost = async (id, payload) => {
    try {
      const post = await hub.actions.updatePost(id, payload);
      setEditingPost(null);
      return post;
    } catch (error) {
      console.error(error);
      hub.toast("Could not save post");
    }
  };

  const deletePost = async (id) => {
    try {
      await hub.actions.deletePost(id);
      setEditingPost(null);
    } catch (error) {
      console.error(error);
      hub.toast("Could not delete post");
    }
  };

  const duplicatePost = async (id) => {
    try {
      const post = await hub.actions.duplicatePost(id);
      setEditingPost(post);
    } catch (error) {
      console.error(error);
      hub.toast("Could not duplicate post");
    }
  };

  const openInComposer = (id) => {
    sessionStorage.setItem("clearcast-edit-post-id", id);
    window.location.href = `${window.location.pathname}?edit=${encodeURIComponent(id)}#create`;
  };

  const reschedulePost = async (postId, date) => {
    const post = allPosts.find((item) => item.id === postId);
    if (!post || post.date === date) return;
    await savePost(postId, { ...post, date });
  };

  const toggleSelected = (id) => {
    setSelectedIds((ids) => ids.includes(id) ? ids.filter((item) => item !== id) : [...ids, id]);
  };

  const selectAllVisible = () => {
    setSelectedIds(selectedIds.length === posts.length ? [] : posts.map((post) => post.id));
  };

  const setQuickStatus = (status) => {
    setStatusFilter(status);
    setView("list");
    setSelectedIds([]);
  };

  const bulkChangeStatus = async (status) => {
    if (!selectedPosts.length) {
      hub.toast("Select posts first");
      return;
    }
    let changed = 0;
    for (const post of selectedPosts) {
      try {
        await hub.actions.updatePost(post.id, { ...post, status });
        changed += 1;
      } catch (error) {
        console.error(error);
      }
    }
    setSelectedIds([]);
    hub.toast(`Updated ${changed} posts`);
  };

  const bulkDelete = async () => {
    if (!selectedPosts.length) {
      hub.toast("Select posts first");
      return;
    }
    let deleted = 0;
    for (const post of selectedPosts) {
      try {
        await hub.actions.deletePost(post.id);
        deleted += 1;
      } catch (error) {
        console.error(error);
      }
    }
    setSelectedIds([]);
    hub.toast(`Deleted ${deleted} posts`);
  };

  const bulkDuplicate = async () => {
    if (!selectedPosts.length) {
      hub.toast("Select posts first");
      return;
    }
    let duplicated = 0;
    for (const post of selectedPosts) {
      try {
        await hub.actions.duplicatePost(post.id);
        duplicated += 1;
      } catch (error) {
        console.error(error);
      }
    }
    setSelectedIds([]);
    hub.toast(`Duplicated ${duplicated} posts as drafts`);
  };

  const recs = [
    { p: "instagram", time: "9:15 AM", lift: "+24%" },
    { p: "x", time: "11:00 AM", lift: "+18%" },
    { p: "linkedin", time: "10:30 AM", lift: "+31%" },
    { p: "tiktok", time: "7:00 PM", lift: "+42%" },
    { p: "pinterest", time: "8:00 AM", lift: "+12%" },
  ];

  const todayKey = key(today);
  const todayPosts = allPosts.filter((post) => postDateKey(post.date) === todayKey).slice(0, 5);
  const drafts = allPosts.filter((post) => post.status === "draft").length;
  const needsApproval = allPosts.filter((post) => ["needs_approval", "changes_requested"].includes(post.status)).length;
  const scheduled = allPosts.filter((post) => post.status === "scheduled").length;
  const blocked = allPosts.filter((post) => ["blocked", "failed", "rejected"].includes(post.status)).length;
  const published = allPosts.filter((post) => post.status === "published").length;
  const autoPauseOutage = hub.data.workspace?.publishingRules?.autoPauseOutage !== false;
  const unhealthyChannels = (hub.data.integrations || []).filter((item) => item.connected && (item.status === "reauth" || item.status === "limited" || item.status === "outage" || item.issues?.length)).length;

  return (
    <div className="page mobile-calendar-page">
      <div className="calendar-main-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) 320px", gap: 20 }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="calendar-toolbar" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
            <div className="calendar-month-nav" style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <button className="btn btn-sm" onClick={jumpToday} style={{ padding: "6px 10px" }}>Today</button>
              <button className="btn btn-ghost" aria-label="Previous month" onClick={() => moveMonth(-1)} style={{ padding: 6 }}><Icon.ChevronLeft width="16" height="16" /></button>
              <button className="btn btn-ghost" aria-label="Next month" onClick={() => moveMonth(1)} style={{ padding: 6 }}><Icon.ChevronRight width="16" height="16" /></button>
              <div style={{ fontSize: 18, fontWeight: 600, marginLeft: 6 }}>{monthLabel(calendarDate)}</div>
            </div>
            <div className="calendar-view-actions" style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <div className="tabs">
                {["month", "week", "day", "list"].map(v => (
                  <button key={v} className={`tab ${view === v ? "active" : ""}`} onClick={() => setView(v)}>
                    {v[0].toUpperCase() + v.slice(1)}
                  </button>
                ))}
              </div>
              <button className="btn" onClick={() => { setView("list"); setQuery(""); }}><Icon.Filter width="14" height="14" /> Filter</button>
              <button className="btn btn-primary" onClick={() => window.location.hash = "create"}><Icon.Plus width="14" height="14" /> New Post</button>
            </div>
          </div>

          <div className="calendar-filter-bar" style={{ display: "grid", gridTemplateColumns: "minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr))", gap: 10, padding: "12px 20px", borderBottom: "1px solid var(--border)", background: "var(--card)" }}>
            <div style={{ position: "relative" }}>
              <Icon.Search width="14" height="14" style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--text-3)" }} />
              <input className="input" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search calendar posts" style={{ paddingLeft: 34 }} />
            </div>
            <select className="input" value={platformFilter} onChange={(event) => setPlatformFilter(event.target.value)}>
              <option value="all">All platforms</option>
              {Object.keys(Platforms).slice(0, 7).map((id) => <option key={id} value={id}>{Platforms[id].name}</option>)}
            </select>
            <select className="input" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value)}>
              <option value="all">All statuses</option>
              <option value="draft">Drafts</option>
              <option value="needs_approval">Approval needed</option>
              <option value="scheduled">Scheduled</option>
              <option value="blocked">Blocked / failed</option>
              <option value="published">Published</option>
            </select>
            <select className="input" value={typeFilter} onChange={(event) => setTypeFilter(event.target.value)}>
              <option value="all">All content types</option>
              <option value="feed">Feed</option>
              <option value="reel">Reel</option>
              <option value="story">Story</option>
              <option value="short">Short</option>
            </select>
          </div>

          <div className="calendar-quick-filter-bar" style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 20px", borderBottom: "1px solid var(--border)", background: "var(--bg-2)" }}>
            <button className="btn btn-sm" onClick={() => setQuickStatus("draft")}>Drafts</button>
            <button className="btn btn-sm" onClick={() => setQuickStatus("needs_approval")}>Approval needed</button>
            <button className="btn btn-sm" onClick={() => setQuickStatus("blocked")}>Blocked</button>
            <button className="btn btn-sm" onClick={() => { setStatusFilter("all"); setPlatformFilter("all"); setTypeFilter("all"); setQuery(""); setSelectedIds([]); }}>Clear filters</button>
            <div className="muted" style={{ marginLeft: "auto", fontSize: 12 }}>{posts.length} visible · {selectedIds.length} selected</div>
          </div>

          {view === "list" && (
            <div className="calendar-bulk-actions" style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 20px", borderBottom: "1px solid var(--border)" }}>
              <button className="btn btn-sm" onClick={selectAllVisible}>{selectedIds.length === posts.length && posts.length ? "Clear selection" : "Select visible"}</button>
              <select className="input" disabled={!selectedIds.length} defaultValue="" onChange={(event) => {
                if (!event.target.value) return;
                bulkChangeStatus(event.target.value);
                event.target.value = "";
              }} style={{ width: 180, height: 34 }}>
                <option value="">Change status...</option>
                <option value="draft">Draft</option>
                <option value="needs_approval">Needs approval</option>
                <option value="scheduled">Scheduled</option>
                <option value="blocked">Blocked</option>
                <option value="failed">Failed</option>
                <option value="published">Published</option>
              </select>
              <button className="btn btn-sm" disabled={!selectedIds.length} onClick={bulkDuplicate}>Duplicate</button>
              <button className="btn btn-sm danger" disabled={!selectedIds.length} onClick={bulkDelete}>Delete</button>
            </div>
          )}

          {view === "list" ? (
            <div className="calendar-list">
              {posts.map((post) => (
                <div key={post.id} className="calendar-list-row" role="button" tabIndex="0" onClick={() => setEditingPost(post)}>
                  <input type="checkbox" checked={selectedIds.includes(post.id)} onChange={() => toggleSelected(post.id)} onClick={(event) => event.stopPropagation()} style={{ accentColor: "var(--accent)" }} />
                  <div className="calendar-list-date">
                    <span>{post.date}</span>
                    <b>{formatPostTime(post.time)}</b>
                  </div>
                  <div className="calendar-list-main">
                    <div>{post.caption}</div>
                    <span>{post.contentType} · {lifecycleLabel(post.status)} · {Object.values(post.variants || {}).filter((variant) => variant.useGlobalCaption === false).length} caption variants · {Object.values(post.variants || {}).filter((variant) => variant.useGlobalMedia === false).length} media variants</span>
                  </div>
                  <div className="calendar-list-platforms">
                    {(post.platforms || []).slice(0, 5).map((id) => <PlatformIcon key={id} id={id} size={18} />)}
                  </div>
                  <span className={`pill ${lifecyclePill(post.status)}`}>{lifecycleLabel(post.status)}</span>
                </div>
              ))}
              {!posts.length && <div className="empty-note" style={{ margin: 18 }}>No posts match these filters.</div>}
            </div>
          ) : (
            <>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", borderBottom: "1px solid var(--border)" }}>
                {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(d => (
                  <div key={d} style={{ padding: "10px 14px", fontSize: 11.5, color: "var(--text-3)", fontWeight: 600, textTransform: "uppercase" }}>{d}</div>
                ))}
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gridAutoRows: "minmax(128px, auto)" }}>
                {days.map((d, i) => {
                  const dateKey = key(d);
                  const dayPosts = postsByDate[dateKey] || [];
                  const cm = isCurMonth(d);
                  const tod = isToday(d);
                  const activeDrop = dragTarget === dateKey;
                  return (
                    <div
                      key={dateKey}
                      className={`calendar-day ${activeDrop ? "drop-active" : ""}`}
                      onDragOver={(event) => {
                        event.preventDefault();
                        setDragTarget(dateKey);
                      }}
                      onDragLeave={() => setDragTarget("")}
                      onDrop={(event) => {
                        event.preventDefault();
                        setDragTarget("");
                        reschedulePost(event.dataTransfer.getData("text/clearcast-post-id") || event.dataTransfer.getData("text/sharehub-post-id"), dateKey);
                      }}
                      style={{
                        borderRight: (i % 7 !== 6) ? "1px solid var(--border)" : "none",
                        borderBottom: i < 35 ? "1px solid var(--border)" : "none",
                        background: cm ? "transparent" : "rgba(0,0,0,0.18)",
                      }}
                    >
                      <div style={{
                        fontSize: 12,
                        fontWeight: tod ? 700 : 500,
                        color: tod ? "#06120d" : cm ? "var(--text)" : "var(--text-3)",
                        background: tod ? "var(--accent)" : "transparent",
                        width: tod ? 22 : "auto",
                        height: tod ? 22 : "auto",
                        borderRadius: 999,
                        display: tod ? "grid" : "block",
                        placeItems: tod ? "center" : "initial",
                        marginBottom: 6,
                      }}>{d.getDate()}</div>
                      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                        {dayPosts.slice(0, 4).map((post) => (
                          <CalendarPostChip key={post.id} post={post} onOpen={setEditingPost} />
                        ))}
                        {dayPosts.length > 4 && (
                          <button className="calendar-more" onClick={() => setView("list")}>+{dayPosts.length - 4} more</button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>

        <div className="calendar-side-panel" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card">
            <div className="card-h">
              <h3>Today — May 18</h3>
              <span className="pill green"><span className="pill-dot"/>Local queue</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {todayPosts.length ? todayPosts.map((post, i) => (
                <button key={post.id} className="today-row" onClick={() => setEditingPost(post)}>
                  <PlatformIcon id={post.platforms?.[0] || "instagram"} size={24} />
                  <div style={{ flex: 1, lineHeight: 1.25, textAlign: "left" }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500 }}>{post.caption}</div>
                    <div style={{ fontSize: 11, color: "var(--text-3)" }}>{formatPostTime(post.time)} · {lifecycleLabel(post.status)}</div>
                  </div>
                  <Icon.Dots width="14" height="14" />
                </button>
              )) : (
                <div className="empty-note">No posts scheduled for today.</div>
              )}
            </div>
          </div>

          <div className="card">
            <div className="card-h">
              <h3>Best times this week</h3>
              <Icon.Sparkles width="14" height="14" style={{ color: "var(--accent-2)" }}/>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {recs.map((r, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <PlatformIcon id={r.p} size={22} />
                  <div style={{ flex: 1, fontSize: 12.5, fontWeight: 500 }}>{Platforms[r.p].name}</div>
                  <div style={{ fontSize: 12, color: "var(--text-2)" }}>{r.time}</div>
                  <div style={{ fontSize: 11, color: "var(--accent-2)", fontWeight: 600, minWidth: 38, textAlign: "right" }}>{r.lift}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-h">
              <h3>Queue health</h3>
              <button className="btn btn-sm" disabled={!scheduled} onClick={hub.actions.runDuePublishQueue} style={{ opacity: scheduled ? 1 : 0.5 }}>Run queue</button>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <button className="queue-health-row" onClick={() => setQuickStatus("scheduled")}><span className="muted">Scheduled</span><b>{scheduled}</b></button>
              <button className="queue-health-row" onClick={() => setQuickStatus("draft")}><span className="muted">Drafts</span><b>{drafts}</b></button>
              <button className="queue-health-row" onClick={() => setQuickStatus("needs_approval")}><span className="muted">Awaiting approval</span><b style={{ color: "var(--warn)" }}>{needsApproval}</b></button>
              <button className="queue-health-row" onClick={() => setQuickStatus("blocked")}><span className="muted">Blocked / failed</span><b style={{ color: "var(--danger)" }}>{blocked}</b></button>
              <button className="queue-health-row" onClick={() => setQuickStatus("published")}><span className="muted">Published</span><b style={{ color: "var(--accent)" }}>{published}</b></button>
              <button className="queue-health-row" onClick={() => setQuickStatus("all")}><span className="muted">Total posts</span><b>{allPosts.length}</b></button>
              <button className="queue-health-row" onClick={() => { window.location.hash = "settings"; }}><span className="muted">Auto-pause outage</span><b style={{ color: autoPauseOutage ? "var(--accent-2)" : "var(--text-3)" }}>{autoPauseOutage ? "On" : "Off"}</b></button>
              <button className="queue-health-row" onClick={() => { window.location.hash = "integrations"; }}><span className="muted">Channels needing attention</span><b style={{ color: unhealthyChannels ? "var(--warn)" : "var(--accent)" }}>{unhealthyChannels}</b></button>
              <div style={{ marginTop: 6, height: 6, background: "var(--bg-2)", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ width: `${Math.min(100, Math.max(8, allPosts.length * 7))}%`, height: "100%", background: "linear-gradient(90deg, var(--accent), var(--accent-2))" }}/>
              </div>
              <div style={{ fontSize: 11, color: "var(--text-3)" }}>Approval-aware local publish queue with retry history and outage pause policy</div>
            </div>
          </div>
        </div>
      </div>
      {editingPost && (
        <PostEditor
          post={editingPost}
          onClose={() => setEditingPost(null)}
          onSave={savePost}
          onDelete={deletePost}
          onDuplicate={duplicatePost}
          onOpenComposer={openInComposer}
        />
      )}
    </div>
  );
}

window.CalendarPage = CalendarPage;