// Backlog view — editorial list, drag-to-schedule via inline week strip.

function BacklogView({ tasks, journals, today, onUpdateTask, onAddTask, onDeleteTask,
                       onAddJournal, onUpdateJournal, onDeleteJournal, tweaks }) {
  const U = window.CAIRN_UTIL;
  const backlogTasks = U.backlog(tasks);
  const [quickAdd, setQuickAdd] = React.useState("");
  const [scheduleFor, setScheduleFor] = React.useState(null); // task id

  const handleQuickAdd = (e) => {
    if (e.key !== "Enter" || !quickAdd.trim()) return;
    const parsed = U.parseQuickAdd(quickAdd, today);
    if (!parsed) return;
    onAddTask({ ...parsed, scheduledDate: null });
    setQuickAdd("");
  };

  // Mini week strip for scheduling
  const weekStart = U.startOfWeek(today);
  const stripDays = Array.from({ length: 14 }, (_, i) =>
    U.isoDate(U.addDays(U.parseISO(weekStart), i))
  );

  const handleSchedule = (taskId, iso) => {
    onUpdateTask(taskId, { scheduledDate: iso });
    setScheduleFor(null);
  };

  const handleSendToToday = (taskId) => handleSchedule(taskId, today);
  const handleSendToTomorrow = (taskId) =>
    handleSchedule(taskId, U.isoDate(U.addDays(U.parseISO(today), 1)));

  return (
    <div className="shell backlog">
      <div className="backlog__head">
        <div>
          <h2 className="display backlog__title">Backlog</h2>
          <p className="meta backlog__count">
            {backlogTasks.length === 0
              ? "EMPTY"
              : `${String(backlogTasks.length).padStart(2, "0")} QUEUED · ${U.formatHM(U.sumMinutes(backlogTasks))} TOTAL`}
          </p>
        </div>
      </div>

      <div className="backlog__quickadd">
        <input
          className="input quickadd__input"
          placeholder="title — 60min — leetcode  (no date → backlog)"
          value={quickAdd}
          onChange={(e) => setQuickAdd(e.target.value)}
          onKeyDown={handleQuickAdd}
        />
        <span className="meta-sm quickadd__hint">Enter to add</span>
      </div>

      {backlogTasks.length === 0 && (
        <p className="backlog__empty text-pretty">No tasks queued.</p>
      )}

      <ul className="backlog__list">
        {backlogTasks.map((t) => (
          <BacklogRow
            key={t.id}
            task={t}
            journals={journals}
            scheduling={scheduleFor === t.id}
            onScheduleOpen={() => setScheduleFor(scheduleFor === t.id ? null : t.id)}
            onSendToToday={() => handleSendToToday(t.id)}
            onSendToTomorrow={() => handleSendToTomorrow(t.id)}
            onScheduleDate={(iso) => handleSchedule(t.id, iso)}
            onUpdate={(p) => onUpdateTask(t.id, p)}
            onDelete={() => onDeleteTask(t.id)}
            onAddJournal={onAddJournal}
            onUpdateJournal={onUpdateJournal}
            onDeleteJournal={onDeleteJournal}
            stripDays={stripDays}
            today={today}
          />
        ))}
      </ul>
    </div>
  );
}

function BacklogRow({ task, journals = [], scheduling, onScheduleOpen, onSendToToday, onSendToTomorrow,
                     onScheduleDate, onUpdate, onDelete,
                     onAddJournal, onUpdateJournal, onDeleteJournal,
                     stripDays, today }) {
  const U = window.CAIRN_UTIL;
  const CJ = window.CAIRN_JOURNAL;
  const tr = U.track(task.track);
  const related = U.relatedRefs(task);
  const ordLabel = U.ordinalLabel(task);
  const [editing, setEditing] = React.useState(null);
  const [draft, setDraft] = React.useState("");

  const startEdit = (field) => { setEditing(field); setDraft(task[field] || ""); };
  const commit = () => {
    if (editing) onUpdate({ [editing]: draft });
    setEditing(null);
  };

  // Journal note state — mirrors TaskCard pattern.
  const noteEntries = CJ ? CJ.entriesForTask(journals, task.id) : [];
  const latestNote = noteEntries[noteEntries.length - 1] || null;
  const noteCount = noteEntries.length;
  const [openNoteId, setOpenNoteId] = React.useState(null);
  const [pendingCloseId, setPendingCloseId] = React.useState(null);
  const openEntry = openNoteId
    ? (journals.find(j => j.id === openNoteId) || null)
    : null;

  React.useEffect(() => {
    if (!pendingCloseId) return;
    const current = journals.find(j => j.id === pendingCloseId);
    if (current && CJ && CJ.entryIsBlank(current, task)) {
      onDeleteJournal(pendingCloseId);
    }
    setPendingCloseId(null);
  }, [pendingCloseId, journals]);

  const handleNoteClick = () => {
    if (openNoteId) {
      setPendingCloseId(openNoteId);
      setOpenNoteId(null);
      return;
    }
    if (latestNote) { setOpenNoteId(latestNote.id); return; }
    const seed = CJ ? CJ.seedFromTask(task) : { title: "" };
    const id = onAddJournal({
      taskId: task.id,
      linkedTitleSnapshot: task.title,
      title: seed.title || "",
      body: "",
    });
    setOpenNoteId(id);
  };

  const handleNoteSave = ({ title, body }) => {
    if (!openNoteId) return;
    onUpdateJournal(openNoteId, { title, body });
  };

  const handleNoteClose = () => {
    if (openNoteId) setPendingCloseId(openNoteId);
    setOpenNoteId(null);
  };

  const handleNoteDelete = (id) => {
    onDeleteJournal(id);
    setOpenNoteId(null);
  };

  const noteSeedFocus = CJ ? CJ.seedFromTask(task).autoFocus : "title";
  const editorAutoFocus = openEntry && (openEntry.title || openEntry.body)
    ? "body"
    : noteSeedFocus;

  return (
    <li className="brow">
      <div className="brow__main">
        <span className="brow__rail">
          <span className={"ord brow__ord" + (ordLabel ? "" : " ord--none")}>{ordLabel || "—"}</span>
          <span className="brow__mark" style={{ background: tr.color }} />
        </span>
        <div className="brow__body">
          {editing === "title" ? (
            <input
              autoFocus
              className="brow__title-input"
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onBlur={commit}
              onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") setEditing(null); }}
            />
          ) : (
            <h3 className="brow__title" onClick={() => startEdit("title")}>
              {task.title}
            </h3>
          )}
          {editing === "deliverable" ? (
            <textarea
              autoFocus
              className="brow__deliverable-input"
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onBlur={commit}
              onKeyDown={(e) => { if (e.key === "Escape") setEditing(null); }}
            />
          ) : (
            <p className="brow__deliverable text-pretty" onClick={() => startEdit("deliverable")}>
              {task.deliverable || <span className="brow__placeholder">No deliverable. Click to add.</span>}
            </p>
          )}
          {task.refs && task.refs.length > 0 && (
            <div className="brow__refs">
              {window.Refs && React.createElement(window.Refs, { refs: task.refs })}
            </div>
          )}
          {related.length > 0 && (
            <div className="brow__relates">
              {window.Refs && React.createElement(window.Refs, { refs: related, max: 5, label: "↳ Refers to" })}
            </div>
          )}
        </div>
        <div className="brow__meta">
          <span className="meta-sm brow__track">{tr.label}</span>
          <span className="meta-sm brow__est">{U.formatHM(task.estimatedMinutes)}</span>
          {noteCount > 0 && (
            <span className="meta-sm brow__notes">
              {noteCount} {noteCount === 1 ? "NOTE" : "NOTES"}
            </span>
          )}
        </div>
      </div>

      <div className="brow__actions">
        {onAddJournal && (
          <button
            className="btn btn--ghost brow__act brow__act--note"
            aria-pressed={openNoteId ? "true" : "false"}
            onClick={handleNoteClick}
          >
            {noteCount > 0 ? `Note (${noteCount})` : "Note"}
          </button>
        )}
        <button className="btn btn--ghost brow__act" onClick={onSendToToday}>Today</button>
        <button className="btn btn--ghost brow__act" onClick={onSendToTomorrow}>Tomorrow</button>
        <button className="btn btn--ghost brow__act" onClick={onScheduleOpen}>
          {scheduling ? "Close" : "Schedule…"}
        </button>
        <button className="btn btn--ghost brow__act brow__act--del" onClick={onDelete}>Delete</button>
      </div>

      {openNoteId && window.JournalEditor && (
        <div className="brow__note-editor">
          {React.createElement(window.JournalEditor, {
            host: "brow",
            task: task,
            entry: openEntry,
            autoFocus: editorAutoFocus,
            onSave: handleNoteSave,
            onDelete: handleNoteDelete,
            onClose: handleNoteClose,
          })}
        </div>
      )}

      {scheduling && (
        <div className="brow__scheduler">
          <div className="brow__strip">
            {stripDays.map((iso) => (
              <button
                key={iso}
                className={`brow__day ${iso === today ? "brow__day--today" : ""}`}
                onClick={() => onScheduleDate(iso)}
              >
                <span className="meta-sm brow__day-dow">{U.weekdayShort(iso).slice(0,1)}</span>
                <span className="mono brow__day-num">{String(U.dayNum(iso)).padStart(2, "0")}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </li>
  );
}

window.BacklogView = BacklogView;