const Calendar = ({ pieces, onPieceAdd, setOpenPieceId }) => {
  const [calDate, setCalDate] = useState(new Date());
  const [quickAdd, setQuickAdd] = useState(null); // { date: "YYYY-MM-DD" }

  const year = calDate.getFullYear();
  const month = calDate.getMonth();

  // Build dayMap: "YYYY-MM-DD" -> [piece, ...]
  const dayMap = useMemo(() => {
    const map = {};
    pieces.filter(p => p.scheduledDate).forEach(p => {
      if (!map[p.scheduledDate]) map[p.scheduledDate] = [];
      map[p.scheduledDate].push(p);
    });
    return map;
  }, [pieces]);

  const firstDay = new Date(year, month, 1);
  const startDay = new Date(firstDay);
  const dow = startDay.getDay();
  startDay.setDate(startDay.getDate() + (dow === 0 ? -6 : 1 - dow));

  const days = Array.from({ length: 42 }, (_, i) => addDays(startDay, i));
  const today = new Date();
  const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

  const fmtKey = d =>
    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;

  const monthLabel = calDate.toLocaleDateString("en-US", { month: "long", year: "numeric" });

  return (
    <div>
      <div className="pagehead">
        <div>
          <div className="eyebrow">Content Calendar</div>
          <h1>Calendar</h1>
          <p className="sub">Everything with a date lives here. Click a day to add.</p>
        </div>
      </div>

      <div className="cal-view">
        <div className="cal-nav">
          <button className="btn btn-ghost btn-sm" onClick={() => setCalDate(new Date(year, month - 1, 1))}>← Prev</button>
          <div className="cal-month-label serif">{monthLabel}</div>
          <button className="btn btn-ghost btn-sm" onClick={() => setCalDate(new Date(year, month + 1, 1))}>Next →</button>
          <button className="btn btn-ghost btn-sm" style={{ marginLeft: "auto" }} onClick={() => setCalDate(new Date())}>Today</button>
        </div>

        <div className="cal-grid">
          {WEEKDAYS.map(d => <div key={d} className="cal-weekday">{d}</div>)}
          {days.map((d, i) => {
            const key = fmtKey(d);
            const dayPieces = dayMap[key] || [];
            const isToday = sameDay(d, today);
            const inMonth = d.getMonth() === month;
            return (
              <div key={i}
                className={`cal-day${isToday ? " today" : ""}${!inMonth ? " other-month" : ""}`}
                onClick={() => { if (!quickAdd) setQuickAdd({ date: key }); }}>
                <div className="cal-day-num">
                  {isToday ? <span className="cal-today-badge">{d.getDate()}</span> : d.getDate()}
                </div>
                {dayPieces.map(p => (
                  <div key={p.id}
                    className={`cal-chip${p.niche ? " niche-" + p.niche : ""}`}
                    onClick={e => { e.stopPropagation(); setOpenPieceId(p.id); }}
                    title={p.title}>
                    <span className="cal-chip-fmt">
                      {p.format === "Video" ? "▶" : p.format === "Carousel" ? "⊡" : "●"}
                    </span>
                    <span className="cal-chip-topic">{p.title}</span>
                    {p.approved && <span className="cal-chip-ok">✓</span>}
                  </div>
                ))}
              </div>
            );
          })}
        </div>

        <div className="cal-legend">
          {Object.entries(NICHES).map(([k, v]) => (
            <span key={k} className={`tag ${v.cls}`} style={{ fontSize: 10 }}>{v.label}</span>
          ))}
        </div>
      </div>

      {quickAdd && (
        <QuickAddPiece
          date={quickAdd.date}
          onAdd={piece => { onPieceAdd(piece); setOpenPieceId(piece.id); setQuickAdd(null); }}
          onClose={() => setQuickAdd(null)}
        />
      )}
    </div>
  );
};

const QuickAddPiece = ({ date, onAdd, onClose }) => {
  const [title, setTitle] = useState("");
  const [format, setFormat] = useState("Video");
  const [niche, setNiche] = useState("");

  const d = new Date(date + "T12:00:00");
  const label = d.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" });

  const handle = () => {
    if (!title.trim()) return;
    onAdd({
      id: "p-" + Date.now(),
      title: title.trim(), format, niche,
      stage: "Idea", scheduledDate: date, approved: false,
      cta: "", keyword: "", notes: "", hooks: [], talkingPoints: "", affiliateLinks: "",
    });
  };

  return (
    <>
      <div className="drawer-veil" onClick={onClose} />
      <div className="quick-add-modal">
        <div className="row-sb" style={{ marginBottom: 16 }}>
          <div className="eyebrow">{label}</div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <input className="input" autoFocus placeholder="What's it about?"
          value={title} onChange={e => setTitle(e.target.value)}
          onKeyDown={e => e.key === "Enter" && handle()}
          style={{ marginBottom: 12 }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 16 }}>
          <select className="input" value={format} onChange={e => setFormat(e.target.value)}>
            {FORMATS.map(f => <option key={f}>{f}</option>)}
          </select>
          <NicheSelect value={niche} onChange={setNiche} />
        </div>
        <button className="btn btn-primary" style={{ width: "100%" }} onClick={handle}>
          Add to calendar
        </button>
      </div>
    </>
  );
};

window.Calendar = Calendar;