// Week view — 7-day strip.
// Each task is a chip; clicking a chip expands its full detail inline.
// Clicking an empty area of a column opens an inline add-task row.

function WeekView({ tasks, journals, today, onUpdateTask, onAddTask, onDeleteTask,
                    onOpenJournalFor, tweaks }) {
  const U = window.CAIRN_UTIL;
  const [weekStart, setWeekStart] = React.useState(U.startOfWeek(today));
  const [quickAdd, setQuickAdd] = React.useState("");
  const [quickAddError, setQuickAddError] = React.useState(null);
  // Independent state: which chip is expanded, which column is showing add-row
  const [expandedTaskId, setExpandedTaskId] = React.useState(null);
  const [addingDay, setAddingDay] = React.useState(null);

  // Click-outside + Escape dismiss for both the expanded chip and the
  // per-day add-row. Uses mousedown so dismissal feels immediate.
  React.useEffect(() => {
    if (!expandedTaskId && !addingDay) return;
    const onKey = (e) => {
      if (e.key === "Escape") {
        setExpandedTaskId(null);
        setAddingDay(null);
      }
    };
    const onDocDown = (e) => {
      if (expandedTaskId && !e.target.closest?.(".chip")) {
        setExpandedTaskId(null);
      }
      if (addingDay && !e.target.closest?.(".wcol--adding")) {
        setAddingDay(null);
      }
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onDocDown);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onDocDown);
    };
  }, [expandedTaskId, addingDay]);

  const days = Array.from({ length: 7 }, (_, i) =>
    U.isoDate(U.addDays(U.parseISO(weekStart), i))
  );

  const handleQuickAdd = (e) => {
    if (e.key !== "Enter" || !quickAdd.trim()) return;
    const parsed = U.parseQuickAdd(quickAdd, today);
    if (!parsed || !parsed.title) {
      setQuickAddError("Couldn't parse. Try: title — 60min — leetcode — wed");
      return;
    }
    onAddTask(parsed);
    setQuickAdd("");
    setQuickAddError(null);
  };

  const weekRange = `${U.monthShort(days[0])} ${U.dayNum(days[0])} – ${U.monthShort(days[6])} ${U.dayNum(days[6])}`;

  return (
    <div className="shell week">
      <div className="week__head">
        <div>
          <h2 className="display week__title">Week</h2>
          <p className="meta week__range">{weekRange.toUpperCase()}</p>
        </div>
        <div className="week__nav">
          <button
            className="btn btn--ghost"
            onClick={() => setWeekStart(U.isoDate(U.addDays(U.parseISO(weekStart), -7)))}
          >
            ‹ Prev
          </button>
          <button
            className="btn btn--ghost"
            onClick={() => setWeekStart(U.startOfWeek(today))}
          >
            This week
          </button>
          <button
            className="btn btn--ghost"
            onClick={() => setWeekStart(U.isoDate(U.addDays(U.parseISO(weekStart), 7)))}
          >
            Next ›
          </button>
        </div>
      </div>

      {/* Quick-add */}
      <div className="week__quickadd">
        <input
          className="input quickadd__input"
          placeholder="title — 60min — leetcode — wed"
          value={quickAdd}
          onChange={(e) => { setQuickAdd(e.target.value); setQuickAddError(null); }}
          onKeyDown={handleQuickAdd}
        />
        <span className="meta-sm quickadd__hint">
          {quickAddError ? quickAddError : "Enter to add"}
        </span>
      </div>

      {/* Strip */}
      <div className="week__strip">
        {days.map((iso) => {
          const dayTasks = U.tasksOn(tasks, iso);
          const isToday = iso === today;
          const isPast = iso < today;
          const adding = addingDay === iso;
          return (
            <div
              key={iso}
              className={[
                "wcol",
                isToday ? "wcol--today" : "",
                isPast ? "wcol--past" : "",
                adding ? "wcol--adding" : "",
              ].join(" ")}
              onClick={(e) => {
                // Clicks inside chips or the add-row are handled by their own
                // handlers (stopPropagation). A bare-column click toggles the
                // add-row visibility for that day.
                if (e.target.closest(".chip, .wcol__addrow")) return;
                setAddingDay(adding ? null : iso);
              }}
            >
              <div className="wcol__head">
                <span className="meta wcol__dow">{U.weekdayShort(iso)}</span>
                <span className="meta wcol__day">{String(U.dayNum(iso)).padStart(2, "0")}</span>
              </div>

              <div className="wcol__body">
                {dayTasks.length === 0 && (
                  <div className="wcol__empty">
                    <span className="meta-sm">— —</span>
                  </div>
                )}
                {dayTasks.map((t) => (
                  <Chip
                    key={t.id}
                    task={t}
                    journals={journals}
                    expanded={expandedTaskId === t.id}
                    onToggle={() => setExpandedTaskId(expandedTaskId === t.id ? null : t.id)}
                    onDone={() => onUpdateTask(t.id, { status: "done", completedAt: U.nowLocalISOMinute() })}
                    onSkip={() => onUpdateTask(t.id, { status: "skipped" })}
                    onReplan={() => onUpdateTask(t.id, { status: "planned" })}
                    onUpdate={(p) => onUpdateTask(t.id, p)}
                    onDelete={() => { onDeleteTask(t.id); setExpandedTaskId(null); }}
                    onOpenJournal={onOpenJournalFor}
                    tweaks={tweaks}
                  />
                ))}
              </div>

              {adding && (
                <div className="wcol__addrow" onClick={(e) => e.stopPropagation()}>
                  <DayQuickAdd
                    targetDate={iso}
                    onAdd={(parsed) => {
                      onAddTask({ ...parsed, scheduledDate: iso });
                      setAddingDay(null);
                    }}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="week__legend">
        <span className="meta-sm week__legend-label">Tracks</span>
        {window.CAIRN.TRACKS.map((t) => (
          <span key={t.id} className="week__legend-item">
            <span className="legend__rule" style={{ background: t.color }} />
            <span className="meta-sm">{t.label}</span>
          </span>
        ))}
        <span className="week__legend-spacer" />
        <span className="meta-sm week__legend-hint">Click a chip · click a column to add · Esc to close</span>
      </div>
    </div>
  );
}

// Compact estimate used inside chips ("60 MIN" → "60M", "90 MIN" → "1H30")
function chipEst(min) {
  if (min < 60) return `${min}M`;
  const h = Math.floor(min / 60);
  const m = min % 60;
  if (m === 0) return `${h}H`;
  return `${h}H${m}`;
}

function Chip({ task, journals = [], expanded, onToggle, onDone, onSkip, onReplan, onUpdate, onDelete, onOpenJournal, tweaks }) {
  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 done = task.status === "done";
  const skipped = task.status === "skipped";
  const noteCount = CJ ? CJ.noteCountForTask(journals, task.id) : 0;
  const [editingTitle, setEditingTitle] = React.useState(false);
  const [draft, setDraft] = React.useState(task.title);

  // When the chip becomes un-expanded, also exit edit mode
  React.useEffect(() => {
    if (!expanded && editingTitle) setEditingTitle(false);
  }, [expanded]);

  return (
    <div
      className={[
        "chip",
        done ? "chip--done" : "",
        skipped ? "chip--skipped" : "",
        expanded ? "chip--open" : "",
      ].join(" ")}
      style={{ "--track": tr.color }}
      onClick={(e) => { e.stopPropagation(); onToggle(); }}
    >
      <div className="chip__main">
        {ordLabel && <span className="ord chip__ord">{ordLabel}</span>}
        {expanded && editingTitle ? (
          <input
            autoFocus
            className="chip__input"
            value={draft}
            onClick={(e) => e.stopPropagation()}
            onChange={(e) => setDraft(e.target.value)}
            onBlur={() => { onUpdate({ title: draft }); setEditingTitle(false); }}
            onKeyDown={(e) => {
              if (e.key === "Enter") { onUpdate({ title: draft }); setEditingTitle(false); }
              if (e.key === "Escape") { setDraft(task.title); setEditingTitle(false); }
            }}
          />
        ) : (
          <span
            className="chip__title"
            onClick={(e) => {
              if (!expanded) return; // chip click handles toggle when collapsed
              e.stopPropagation();
              setEditingTitle(true);
            }}
            title={task.title}
          >
            {task.title}
          </span>
        )}
        <span className="meta-sm chip__est">{chipEst(task.estimatedMinutes)}</span>
      </div>

      {expanded && (
        <div className="chip__detail">
          <p className="chip__deliverable text-pretty">{task.deliverable}</p>
          {task.refs && task.refs.length > 0 && (
            <div className="chip__refs">
              {window.Refs && React.createElement(window.Refs, { refs: task.refs, max: 2 })}
            </div>
          )}
          {related.length > 0 && (
            <div className="chip__relates">
              {window.Refs && React.createElement(window.Refs, { refs: related, max: 3, label: "↳ Refers to" })}
            </div>
          )}
          <div className="chip__foot">
            <span className="meta-sm chip__track">{tr.label}</span>
            <div className="chip__actions" onClick={(e) => e.stopPropagation()}>
              {onOpenJournal && (
                <button
                  className="btn btn--ghost chip__btn chip__btn--note"
                  onClick={(e) => { e.stopPropagation(); onOpenJournal(task.id); }}
                >
                  {noteCount > 0 ? `Note (${noteCount})` : "Note"}
                </button>
              )}
              {!done && !skipped && (
                <React.Fragment>
                  <button className="btn btn--ghost chip__btn" onClick={onDone}>Done</button>
                  <button className="btn btn--ghost chip__btn" onClick={onSkip}>Skip</button>
                </React.Fragment>
              )}
              {(done || skipped) && (
                <button className="btn btn--ghost chip__btn" onClick={onReplan}>Re-plan</button>
              )}
              <button className="btn btn--ghost chip__btn chip__btn--del" onClick={onDelete}>Delete</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function DayQuickAdd({ targetDate, onAdd }) {
  const U = window.CAIRN_UTIL;
  const [v, setV] = React.useState("");

  const submit = (e) => {
    if (e.key !== "Enter" || !v.trim()) return;
    const p = U.parseQuickAdd(v, targetDate);
    if (!p) return;
    onAdd(p);
    setV("");
  };

  return (
    <div className="dqa" onClick={(e) => e.stopPropagation()}>
      <input
        autoFocus
        className="input dqa__input"
        placeholder="new task — 60min — leetcode"
        value={v}
        onChange={(e) => setV(e.target.value)}
        onKeyDown={submit}
        onClick={(e) => e.stopPropagation()}
      />
    </div>
  );
}

window.WeekView = WeekView;