// zephyr-edit.jsx — editable detail drawer + new-feature modal.
// Uses ZephyrAPI.{saveEpic, addEpic, deleteEpic} and the author hook.

const { useEpics, saveEpic, addEpic, deleteEpic } = window.ZephyrAPI;

const STATUSES = [
  { id: "done",        label: "Done" },
  { id: "in_progress", label: "In progress" },
  { id: "design",      label: "In design" },
  { id: "planned",     label: "Planned" },
  { id: "blocked",     label: "Blocked" },
  { id: "evaluating",  label: "Evaluating" },
];

const RELEASE_OPTIONS = [
  { id: "",     label: "— auto (by date) —" },
  { id: "demo", label: "Demo Release · Apr 28" },
  { id: "r1",   label: "Release 1 · 30-Day · May 28" },
  { id: "r2",   label: "Release 2 · 60-Day · Jun 27" },
  { id: "r3",   label: "Release 3 · 90-Day · Jul 27" },
];

// Format an ISO date as "Apr 28, 2026" or fall back to "—"
function fmtRelative(iso) {
  if (!iso) return "—";
  const d = new Date(iso);
  const now = new Date();
  const diffMs = now - d;
  const diffMin = Math.round(diffMs / 60000);
  if (diffMin < 1) return "just now";
  if (diffMin < 60) return `${diffMin}m ago`;
  const diffHr = Math.round(diffMin / 60);
  if (diffHr < 24) return `${diffHr}h ago`;
  const diffDay = Math.round(diffHr / 24);
  if (diffDay < 7) return `${diffDay}d ago`;
  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}

// ── Editable Drawer ─────────────────────────────────────────────────────────
function EditableDrawer({ epic, onClose, onChanged, author, onRequireAuthor }) {
  const [draft, setDraft] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [savedAt, setSavedAt] = React.useState(null);
  const [confirmDel, setConfirmDel] = React.useState(false);

  React.useEffect(() => {
    setDraft(epic ? { ...epic, details: [...(epic.details || [])], deps: [...(epic.deps || [])] } : null);
    setConfirmDel(false);
    setSavedAt(null);
  }, [epic?.id]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && !confirmDel) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, confirmDel]);

  if (!epic || !draft) return (
    <>
      <div className="zr-drawer-scrim" />
      <aside className="zr-drawer" aria-hidden={true} />
    </>
  );

  const D = window.ZEPHYR_DATA;
  const lane = D.workstreams.find(w => w.id === draft.lane);
  const dependents = D.epics.filter(e => (e.deps || []).includes(draft.id));

  function update(patch) {
    setDraft(d => ({ ...d, ...patch }));
  }

  async function commit(patch) {
    if (!author) { onRequireAuthor(); return; }
    const next = { ...draft, ...patch };
    setDraft(next);
    setSaving(true);
    try {
      await saveEpic(next, author);
      setSavedAt(new Date().toISOString());
      // Update parent state so cards reflect change
      onChanged({ ...next, updated_at: new Date().toISOString(), updated_by: author });
    } catch (err) {
      alert("Save failed: " + err.message);
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete() {
    if (!author) { onRequireAuthor(); return; }
    setSaving(true);
    try {
      await deleteEpic(draft.id);
      onChanged({ id: draft.id, _deleted: true });
      onClose();
    } catch (err) {
      alert("Delete failed: " + err.message);
    } finally {
      setSaving(false);
    }
  }

  return (
    <>
      <div className="zr-drawer-scrim open" onClick={onClose} />
      <aside className="zr-drawer open zr-drawer-edit" aria-hidden={false}>
        <div className="hd">
          <button className="close" onClick={onClose} aria-label="Close">✕</button>
          <div className="eb">{lane?.label || draft.lane} · {draft.id}</div>
          <input
            className="zr-edit-title"
            value={draft.title}
            onChange={e => update({ title: e.target.value })}
            onBlur={e => commit({ title: e.target.value })}
            placeholder="Untitled"
          />
          <div className="meta-row">
            <SelectChip
              value={draft.status}
              options={STATUSES.map(s => ({ value: s.id, label: s.label }))}
              onChange={v => commit({ status: v })}
              className={`zr-chip zr-chip-${draft.status}`}
            />
            <span className="sep">·</span>
            <input
              className="zr-edit-inline"
              value={draft.owner || ""}
              placeholder="owner"
              onChange={e => update({ owner: e.target.value })}
              onBlur={e => commit({ owner: e.target.value })}
              size={Math.max(8, (draft.owner || "").length)}
            />
            <span className="sep">·</span>
            <input
              className="zr-edit-inline date"
              type="date"
              value={draft.start || ""}
              onChange={e => commit({ start: e.target.value })}
            />
            <span className="sep">→</span>
            <input
              className="zr-edit-inline date"
              type="date"
              value={draft.end || ""}
              onChange={e => commit({ end: e.target.value })}
            />
          </div>
          <div className="zr-edit-meta-line">
            {saving && <span className="saving">Saving…</span>}
            {!saving && savedAt && <span className="saved">Saved {fmtRelative(savedAt)}</span>}
            {!saving && !savedAt && draft.updated_at && (
              <span className="last-edit">
                Last edited{draft.updated_by ? ` by ${draft.updated_by}` : ""} · {fmtRelative(draft.updated_at)}
              </span>
            )}
          </div>
        </div>

        <div className="body">
          <h5>Workstream</h5>
          <select
            className="zr-edit-block"
            value={draft.lane}
            onChange={e => commit({ lane: e.target.value })}
          >
            {D.workstreams.map(w => (
              <option key={w.id} value={w.id}>{w.label}</option>
            ))}
          </select>

          <h5>Release target</h5>
          <select
            className="zr-edit-block"
            value={draft.release || ""}
            onChange={e => commit({ release: e.target.value || null })}
          >
            {RELEASE_OPTIONS.map(o => (
              <option key={o.id} value={o.id}>{o.label}</option>
            ))}
          </select>

          <h5>Summary</h5>
          <textarea
            className="zr-edit-block"
            value={draft.summary || ""}
            placeholder="One-line description"
            rows={2}
            onChange={e => update({ summary: e.target.value })}
            onBlur={e => commit({ summary: e.target.value })}
          />

          <h5>Details</h5>
          <ListEditor
            items={draft.details || []}
            onChange={items => commit({ details: items })}
            placeholder="Add a detail (acceptance criteria, technical note…)"
          />

          {dependents.length > 0 && (
            <>
              <h5>Blocks</h5>
              <div>
                {dependents.map(dep => (
                  <span className="dep-chip" key={dep.id}>{dep.title}</span>
                ))}
              </div>
            </>
          )}

          <h5>Metadata</h5>
          <dl className="kv">
            <dt>Epic ID</dt><dd>{draft.id}</dd>
            <dt>Last edited by</dt><dd>{draft.updated_by || "—"}</dd>
            <dt>Last edited</dt><dd>{draft.updated_at ? new Date(draft.updated_at).toLocaleString() : "—"}</dd>
          </dl>

          <div className="zr-edit-danger">
            {!confirmDel ? (
              <button className="zr-btn-danger-ghost" onClick={() => setConfirmDel(true)}>
                Delete this feature
              </button>
            ) : (
              <div className="zr-confirm">
                <span>Delete <strong>{draft.title}</strong>? This can't be undone.</span>
                <div>
                  <button className="zr-btn-ghost" onClick={() => setConfirmDel(false)}>Cancel</button>
                  <button className="zr-btn-danger" onClick={handleDelete}>Delete</button>
                </div>
              </div>
            )}
          </div>
        </div>
      </aside>
    </>
  );
}

// ── Inline list editor (for details bullets) ────────────────────────────────
function ListEditor({ items, onChange, placeholder }) {
  const [adding, setAdding] = React.useState("");
  function update(i, val) {
    const next = [...items];
    next[i] = val;
    onChange(next);
  }
  function remove(i) {
    onChange(items.filter((_, idx) => idx !== i));
  }
  function add() {
    if (!adding.trim()) return;
    onChange([...items, adding.trim()]);
    setAdding("");
  }
  return (
    <div className="zr-list-edit">
      {items.map((it, i) => (
        <div key={i} className="zr-list-row">
          <input
            value={it}
            onChange={e => update(i, e.target.value)}
            onBlur={() => onChange(items)} // trigger save via parent
          />
          <button className="zr-list-remove" onClick={() => remove(i)} aria-label="Remove">✕</button>
        </div>
      ))}
      <div className="zr-list-row add">
        <input
          value={adding}
          placeholder={placeholder}
          onChange={e => setAdding(e.target.value)}
          onKeyDown={e => { if (e.key === "Enter") add(); }}
        />
        <button className="zr-list-add" onClick={add} disabled={!adding.trim()}>+ Add</button>
      </div>
    </div>
  );
}

// ── Small inline select rendered as a status chip ───────────────────────────
function SelectChip({ value, options, onChange, className }) {
  return (
    <span className={`zr-select-chip ${className || ""}`}>
      <select value={value} onChange={e => onChange(e.target.value)}>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </span>
  );
}

// ── New feature modal ───────────────────────────────────────────────────────
function NewFeatureModal({ open, onClose, onCreate, author, onRequireAuthor }) {
  const [draft, setDraft] = React.useState({
    title: "",
    lane: "transfer",
    status: "planned",
    owner: "",
    start: "",
    end: "",
    summary: "",
    release: "",
  });
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      const today = new Date().toISOString().slice(0, 10);
      setDraft({
        title: "", lane: "transfer", status: "planned", owner: "",
        start: today, end: "", summary: "", release: "",
      });
    }
  }, [open]);

  if (!open) return null;
  const D = window.ZEPHYR_DATA;
  const can = draft.title.trim().length > 0;

  async function submit() {
    if (!can) return;
    if (!author) { onRequireAuthor(); return; }
    setBusy(true);
    try {
      const payload = { ...draft, release: draft.release || null };
      const result = await addEpic(payload, author);
      const created = result.epic || { ...payload, updated_at: new Date().toISOString(), updated_by: author };
      onCreate(created);
      onClose();
    } catch (err) {
      alert("Create failed: " + err.message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="zr-modal-backdrop" onClick={onClose}>
      <div className="zr-modal zr-modal-wide" onClick={e => e.stopPropagation()}>
        <div className="zr-modal-head">
          <span className="eb">Roadmap · New feature</span>
          <h3>Add a feature</h3>
        </div>
        <div className="zr-modal-form">
          <label>
            <span>Title</span>
            <input
              autoFocus
              value={draft.title}
              placeholder="e.g. Audit log export"
              onChange={e => setDraft({ ...draft, title: e.target.value })}
            />
          </label>
          <label>
            <span>Workstream</span>
            <select value={draft.lane} onChange={e => setDraft({ ...draft, lane: e.target.value })}>
              {D.workstreams.map(w => (
                <option key={w.id} value={w.id}>{w.label}</option>
              ))}
            </select>
          </label>
          <label>
            <span>Status</span>
            <select value={draft.status} onChange={e => setDraft({ ...draft, status: e.target.value })}>
              {STATUSES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
            </select>
          </label>
          <label>
            <span>Owner</span>
            <input
              value={draft.owner}
              placeholder="Team or person"
              onChange={e => setDraft({ ...draft, owner: e.target.value })}
            />
          </label>
          <label>
            <span>Release</span>
            <select value={draft.release} onChange={e => setDraft({ ...draft, release: e.target.value })}>
              {RELEASE_OPTIONS.map(o => <option key={o.id} value={o.id}>{o.label}</option>)}
            </select>
          </label>
          <label>
            <span>Start</span>
            <input
              type="date"
              value={draft.start}
              onChange={e => setDraft({ ...draft, start: e.target.value })}
            />
          </label>
          <label>
            <span>Target end</span>
            <input
              type="date"
              value={draft.end}
              onChange={e => setDraft({ ...draft, end: e.target.value })}
            />
          </label>
          <label className="full">
            <span>Summary</span>
            <textarea
              rows={2}
              value={draft.summary}
              placeholder="One-line description"
              onChange={e => setDraft({ ...draft, summary: e.target.value })}
            />
          </label>
        </div>
        <div className="zr-modal-actions">
          <button className="zr-btn-ghost" onClick={onClose}>Cancel</button>
          <button className="zr-btn-primary" disabled={!can || busy} onClick={submit}>
            {busy ? "Creating…" : "Create feature"}
          </button>
        </div>
      </div>
    </div>
  );
}

// Export to window
window.ZephyrEdit = { EditableDrawer, NewFeatureModal };