// Shared date utilities
function formatDate(dateStr) {
  if (!dateStr) return "";
  const d = new Date(dateStr + "T12:00:00");
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}

function addDays(date, n) {
  const d = new Date(date); d.setDate(d.getDate() + n); return d;
}

function sameDay(a, b) {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate();
}

function getGreeting() {
  const h = new Date().getHours();
  return h < 12 ? "morning" : h < 17 ? "afternoon" : "evening";
}

// ─── Piece Drawer ─────────────────────────────────────────────────────────────

const PieceDrawer = ({ piece, onClose, onUpdate, onDelete }) => {
  const [local, setLocal] = useState(piece);
  const [showMore, setShowMore] = useState(false);
  useEffect(() => { setLocal(piece); setShowMore(false); }, [piece.id]);

  const save = (patch) => {
    setLocal(l => ({ ...l, ...patch }));
    onUpdate(piece.id, patch);
  };

  return (
    <>
      <div className="drawer-veil" onClick={onClose} />
      <div className="drawer" role="dialog">
        <div className="drawer-head">
          <div className="row-sb" style={{ marginBottom: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <FormatBadge format={local.format} />
              {local.scheduledDate && (
                <span className="pipe-date-badge">{formatDate(local.scheduledDate)} · scheduled</span>
              )}
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="btn btn-ghost btn-sm" style={{ color: "var(--accent)" }}
                onClick={() => { if (confirm(`Delete "${local.title}"?`)) onDelete(piece.id); }}>
                Delete
              </button>
              <button className="btn btn-ghost btn-sm" onClick={onClose}>
                <Icon name="x" size={14} />
              </button>
            </div>
          </div>
          <input
            className="input"
            style={{ border: "none", background: "transparent", padding: "4px 0", fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.25, color: "var(--ink)", width: "100%" }}
            value={local.title}
            onChange={e => save({ title: e.target.value })}
          />
        </div>

        <div className="drawer-body">
          {/* Stage */}
          <div className="field">
            <label>Stage</label>
            <div className="stage-pills">
              {PIECE_STAGES.map(s => (
                <button key={s}
                  className={`stage-pill${local.stage === s ? " active" : ""}`}
                  onClick={() => save({ stage: s, ...(s === "Approved" ? { approved: true } : {}) })}>
                  {s}
                </button>
              ))}
            </div>
          </div>

          {/* Format + Niche */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field">
              <label>Format</label>
              <select className="input" value={local.format} onChange={e => save({ format: e.target.value })}>
                {FORMATS.map(f => <option key={f}>{f}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Niche</label>
              <NicheSelect value={local.niche} onChange={v => save({ niche: v })} />
            </div>
          </div>

          {/* Schedule date */}
          <div className="field">
            <label>Schedule date — set to move to Calendar</label>
            <input type="date" className="input" value={local.scheduledDate || ""}
              onChange={e => save({ scheduledDate: e.target.value || null })} />
          </div>

          {/* Approval */}
          <div className={`appr${local.approved ? " ok" : ""}`}>
            <Icon name={local.approved ? "check" : "sparkle"} size={16} />
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>
                {local.approved ? "Approved by Alan" : "Awaiting approval"}
              </div>
            </div>
            <div className="appr-switch">
              <button className={local.approved ? "" : "on"} onClick={() => save({ approved: false })}>Pending</button>
              <button className={local.approved ? "on" : ""} onClick={() => save({ approved: true, stage: "Approved" })}>Approved</button>
            </div>
          </div>

          {/* CTA */}
          <div className="field">
            <label>Call to action</label>
            <input className="input" value={local.cta} placeholder="e.g. Comment GLOW for the full list"
              onChange={e => save({ cta: e.target.value })} />
          </div>

          {/* Notes */}
          <div className="field">
            <label>Notes</label>
            <textarea className="textarea" value={local.notes} placeholder="Production notes, reminders…"
              onChange={e => save({ notes: e.target.value })} />
          </div>

          {/* More details */}
          <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }}
            onClick={() => setShowMore(v => !v)}>
            {showMore ? "Hide details ↑" : "More details ↓"}
          </button>

          {showMore && <>
            <div className="field">
              <label>ManyChat keyword</label>
              <input className="input" value={local.keyword} placeholder="e.g. LINKS"
                onChange={e => save({ keyword: e.target.value.toUpperCase() })} />
            </div>
            <div className="field">
              <label>Talking points</label>
              <textarea className="textarea" style={{ minHeight: 90 }} value={local.talkingPoints}
                onChange={e => save({ talkingPoints: e.target.value })} />
            </div>
            <div className="field">
              <label>Affiliate / LTK links</label>
              <textarea className="textarea" value={local.affiliateLinks} placeholder="One product per line"
                onChange={e => save({ affiliateLinks: e.target.value })} />
            </div>
            <div className="field">
              <label>Hooks</label>
              <div className="hooks">
                {(local.hooks || []).map((h, i) => (
                  <div key={i} className="hook">
                    <select value={h.cat}
                      onChange={e => save({ hooks: local.hooks.map((x, xi) => xi === i ? { ...x, cat: e.target.value } : x) })}
                      style={{ border: "none", background: "transparent", fontFamily: "var(--sans)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, color: "var(--muted)", minWidth: 92, outline: "none", cursor: "pointer" }}>
                      {HOOK_CATEGORIES.map(c => <option key={c}>{c}</option>)}
                    </select>
                    <textarea className="hook-txt" value={h.text} rows={1}
                      onChange={e => save({ hooks: local.hooks.map((x, xi) => xi === i ? { ...x, text: e.target.value } : x) })}
                      style={{ border: "none", background: "transparent", resize: "none", fontFamily: "var(--sans)", fontSize: 13.5, color: "var(--ink)", lineHeight: 1.4, outline: "none", padding: 0, minHeight: 20, flex: 1 }} />
                    <button onClick={() => save({ hooks: local.hooks.filter((_, xi) => xi !== i) })}
                      style={{ color: "var(--muted-2)", cursor: "pointer", padding: 2, flexShrink: 0 }}>
                      <Icon name="x" size={13} />
                    </button>
                  </div>
                ))}
                {(local.hooks || []).length < 5 && (
                  <button className="btn btn-ghost btn-sm" style={{ alignSelf: "flex-start" }}
                    onClick={() => save({ hooks: [...(local.hooks || []), { cat: HOOK_CATEGORIES[0], text: "" }] })}>
                    <Icon name="plus" size={12} /> Add hook
                  </button>
                )}
              </div>
            </div>
          </>}

          <div style={{ fontSize: 11, color: "var(--muted)", textAlign: "center", marginTop: 8 }}>
            Autosaved as you type
          </div>
        </div>
      </div>
    </>
  );
};

window.PieceDrawer = PieceDrawer;
window.formatDate = formatDate;
window.addDays = addDays;
window.sameDay = sameDay;
window.getGreeting = getGreeting;