// sprint-modals.jsx — Start Sprint and Complete Sprint modal flows

function Modal({ open, onClose, title, subtitle, children, footer, width = 560 }) {
  if (!open) return null;
  return ReactDOM.createPortal(
    <div className="modal-backdrop" onMouseDown={onClose}>
      <div className="modal" style={{ width }} onMouseDown={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <div className="modal-title">{title}</div>
            {subtitle && <div className="modal-subtitle">{subtitle}</div>}
          </div>
          <button className="modal-close" onClick={onClose}>
            <Icons.Close size={16}/>
          </button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>,
    document.body
  );
}

// ── Start Sprint ────────────────────────────────────────────────────
function StartSprintModal({ open, onClose, tasks, onStart, suggestedLabel }) {
  const defaultLabel = suggestedLabel || "Sprint 26";
  const [label, setLabel] = React.useState(defaultLabel);
  const [goal, setGoal] = React.useState("");
  const [team, setTeam] = React.useState("Web");
  const [duration, setDuration] = React.useState("2 weeks");
  const [selected, setSelected] = React.useState(() => new Set(tasks.slice(0, 5).map(t => t.id)));

  React.useEffect(() => {
    if (open) {
      setLabel(defaultLabel);
      setGoal("");
      setSelected(new Set(tasks.slice(0, 5).map(t => t.id)));
    }
  }, [open]);

  const toggle = (id) => setSelected(s => {
    const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  const selectedTasks = tasks.filter(t => selected.has(t.id));
  const totalPoints = selectedTasks.reduce((a, t) => a + (t.points || 0), 0);

  // Date calc
  const today = new Date();
  const end = new Date(today);
  end.setDate(end.getDate() + (duration === "1 week" ? 7 : duration === "2 weeks" ? 14 : 21));
  const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  const dates = `${fmt(today)} – ${fmt(end)}`;

  return (
    <Modal open={open} onClose={onClose}
           title="Start a new sprint"
           subtitle="Scope commits the team to a time-boxed goal"
           width={640}
           footer={
             <>
               <div style={{ flex: 1, color: "var(--ink-muted)", fontSize: 12 }}>
                 {selected.size} tasks · {totalPoints} points · ends {fmt(end)}
               </div>
               <button className="btn" onClick={onClose}>Cancel</button>
               <button className="btn btn-primary"
                       disabled={!selected.size}
                       onClick={() => onStart({ label, goal, team, dates, taskIds: [...selected] })}>
                 <Icons.Lightning/> Start {label}
               </button>
             </>
           }>
      <div className="ms-grid">
        <div className="ms-row">
          <label className="ms-label">Sprint name</label>
          <input className="ms-input" value={label} onChange={(e) => setLabel(e.target.value)}/>
        </div>
        <div className="ms-row">
          <label className="ms-label">Goal <span className="ms-optional">(optional)</span></label>
          <input className="ms-input" value={goal} onChange={(e) => setGoal(e.target.value)}
                 placeholder="e.g. Ship guest checkout end-to-end"/>
        </div>
        <div className="ms-row-split">
          <div className="ms-row">
            <label className="ms-label">Team</label>
            <div className="ms-toggle">
              {["Web", "Backend", "Mobile"].map(t => (
                <button key={t} className={team === t ? "is-active" : ""} onClick={() => setTeam(t)}>{t}</button>
              ))}
            </div>
          </div>
          <div className="ms-row">
            <label className="ms-label">Duration</label>
            <div className="ms-toggle">
              {["1 week", "2 weeks", "3 weeks"].map(d => (
                <button key={d} className={duration === d ? "is-active" : ""} onClick={() => setDuration(d)}>{d}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="ms-row">
          <label className="ms-label">Pull from backlog <span className="ms-optional">{selected.size} selected · {totalPoints} pts</span></label>
          <div className="ms-task-list">
            {tasks.map(t => {
              const epic = EPICS.find(e => e.id === t.epicId);
              return (
                <label key={t.id} className={`ms-task ${selected.has(t.id) ? "is-on" : ""}`}>
                  <input type="checkbox" checked={selected.has(t.id)} onChange={() => toggle(t.id)}/>
                  <span className="ms-task-epic-bar" style={{ background: epic?.color }}/>
                  <span className="ms-task-name">{t.name}</span>
                  <span className="ms-task-epic">{epic?.title}</span>
                  <PriorityPill prio={t.prio} fill={false}/>
                  <span className="ms-task-points">{t.points}</span>
                </label>
              );
            })}
            {!tasks.length && <div style={{ padding: 20, textAlign: "center", color: "var(--ink-muted)" }}>No unscheduled tasks</div>}
          </div>
        </div>
      </div>
    </Modal>
  );
}

// ── Plan Upcoming Sprint ───────────────────────────────────────────
// Creates a sprint with active: false so it appears under "Upcoming" until
// the team is ready to activate it.
function PlanSprintModal({ open, onClose, tasks, onPlan, suggestedLabel }) {
  const defaultLabel = suggestedLabel || "Sprint";
  const [label, setLabel] = React.useState(defaultLabel);
  const [goal, setGoal] = React.useState("");
  const [team, setTeam] = React.useState("Web");
  const [duration, setDuration] = React.useState("2 weeks");
  // Plan-ahead default: start two weeks out so it visibly sits in the future.
  const defaultStart = (() => {
    const d = new Date();
    d.setDate(d.getDate() + 14);
    return d.toISOString().slice(0, 10);
  })();
  const [startDate, setStartDate] = React.useState(defaultStart);
  const [selected, setSelected] = React.useState(() => new Set());

  React.useEffect(() => {
    if (open) {
      setLabel(defaultLabel);
      setGoal("");
      setStartDate(defaultStart);
      setSelected(new Set());
    }
  }, [open]);

  const toggle = (id) => setSelected(s => {
    const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

  const selectedTasks = tasks.filter(t => selected.has(t.id));
  const totalPoints = selectedTasks.reduce((a, t) => a + (t.points || 0), 0);

  // Date math — derive the end date from the chosen start + duration.
  const start = new Date(startDate);
  const end = new Date(start);
  end.setDate(end.getDate() + (duration === "1 week" ? 7 : duration === "2 weeks" ? 14 : 21));
  const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  const dates = `${fmt(start)} – ${fmt(end)}`;

  return (
    <Modal open={open} onClose={onClose}
           title="Plan an upcoming sprint"
           subtitle="Queue work for a future iteration — activate it when you're ready"
           width={640}
           footer={
             <>
               <div style={{ flex: 1, color: "var(--ink-muted)", fontSize: 12 }}>
                 {selected.size} task{selected.size === 1 ? "" : "s"} · {totalPoints} pts · starts {fmt(start)}
               </div>
               <button className="btn" onClick={onClose}>Cancel</button>
               <button className="btn btn-primary"
                       onClick={() => onPlan({ label, goal, team, dates, taskIds: [...selected], startDate })}>
                 <Icons.Calendar size={14}/> Plan {label}
               </button>
             </>
           }>
      <div className="ms-grid">
        <div className="ms-row">
          <label className="ms-label">Sprint name</label>
          <input className="ms-input" value={label} onChange={(e) => setLabel(e.target.value)}/>
        </div>
        <div className="ms-row">
          <label className="ms-label">Goal <span className="ms-optional">(optional)</span></label>
          <input className="ms-input" value={goal} onChange={(e) => setGoal(e.target.value)}
                 placeholder="e.g. Ship guest checkout end-to-end"/>
        </div>
        <div className="ms-row-split">
          <div className="ms-row">
            <label className="ms-label">Team</label>
            <div className="ms-toggle">
              {["Web", "Backend", "Mobile"].map(t => (
                <button key={t} className={team === t ? "is-active" : ""} onClick={() => setTeam(t)}>{t}</button>
              ))}
            </div>
          </div>
          <div className="ms-row">
            <label className="ms-label">Duration</label>
            <div className="ms-toggle">
              {["1 week", "2 weeks", "3 weeks"].map(d => (
                <button key={d} className={duration === d ? "is-active" : ""} onClick={() => setDuration(d)}>{d}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="ms-row">
          <label className="ms-label">Start date</label>
          <input className="ms-input" type="date" value={startDate}
                 onChange={(e) => setStartDate(e.target.value)} style={{ maxWidth: 220 }}/>
        </div>
        <div className="ms-row">
          <label className="ms-label">Pull from backlog <span className="ms-optional">{selected.size} selected · {totalPoints} pts</span></label>
          <div className="ms-task-list">
            {tasks.map(t => {
              const epic = EPICS.find(e => e.id === t.epicId);
              return (
                <label key={t.id} className={`ms-task ${selected.has(t.id) ? "is-on" : ""}`}>
                  <input type="checkbox" checked={selected.has(t.id)} onChange={() => toggle(t.id)}/>
                  <span className="ms-task-epic-bar" style={{ background: epic?.color }}/>
                  <span className="ms-task-name">{t.name}</span>
                  <span className="ms-task-epic">{epic?.title}</span>
                  <PriorityPill prio={t.prio} fill={false}/>
                  <span className="ms-task-points">{t.points}</span>
                </label>
              );
            })}
            {!tasks.length && <div style={{ padding: 20, textAlign: "center", color: "var(--ink-muted)" }}>No backlog tasks to pull in</div>}
          </div>
        </div>
      </div>
    </Modal>
  );
}

// ── Complete Sprint ────────────────────────────────────────────────
function CompleteSprintModal({ open, onClose, sprint, tasks, onComplete }) {
  const [carryover, setCarryover] = React.useState("next"); // next | backlog | keep
  if (!sprint) return null;

  const done = tasks.filter(t => t.status === "done");
  const incomplete = tasks.filter(t => t.status !== "done");
  const totalPts = tasks.reduce((a, t) => a + (t.points || 0), 0);
  const donePts = done.reduce((a, t) => a + (t.points || 0), 0);
  const pct = totalPts ? Math.round((donePts / totalPts) * 100) : 0;

  return (
    <Modal open={open} onClose={onClose}
           title={`Complete ${sprint.label}`}
           subtitle={`${sprint.dates} · ${sprint.team || "Team"}`}
           width={600}
           footer={
             <>
               <div style={{ flex: 1 }}/>
               <button className="btn" onClick={onClose}>Cancel</button>
               <button className="btn btn-primary"
                       onClick={() => onComplete({ carryover })}>
                 <Icons.Check size={14}/> Complete sprint
               </button>
             </>
           }>
      <div className="ms-grid">
        <div className="sprint-recap">
          <div className="recap-ring">
            <svg width="72" height="72" viewBox="0 0 72 72">
              <circle cx="36" cy="36" r="30" fill="none" stroke="#eceef2" strokeWidth="8"/>
              <circle cx="36" cy="36" r="30" fill="none" stroke="var(--status-done)" strokeWidth="8"
                      strokeDasharray={2 * Math.PI * 30}
                      strokeDashoffset={(1 - pct / 100) * 2 * Math.PI * 30}
                      strokeLinecap="round"
                      transform="rotate(-90 36 36)"/>
            </svg>
            <div className="recap-ring-label">{pct}%</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="recap-stats">
              <div><b>{done.length}</b><span>Completed</span></div>
              <div><b>{incomplete.length}</b><span>Incomplete</span></div>
              <div><b>{donePts}/{totalPts}</b><span>Points</span></div>
            </div>
            <div className="recap-bar">
              <StatusSummary tasks={tasks}/>
            </div>
          </div>
        </div>

        {incomplete.length > 0 && (
          <div className="ms-row">
            <label className="ms-label">Move {incomplete.length} incomplete task{incomplete.length === 1 ? "" : "s"} to…</label>
            <div className="carry-opts">
              {[
                { id: "next",    icon: <Icons.Lightning size={14}/>, title: "Next sprint",  desc: "Sprint 25 · Apr 21 – May 4" },
                { id: "backlog", icon: <Icons.Inbox size={14}/>,     title: "Backlog",       desc: "Plan later" },
                { id: "keep",    icon: <Icons.Flag size={14}/>,      title: "Keep in sprint", desc: "Leave on the closed sprint" },
              ].map(o => (
                <label key={o.id} className={`carry-opt ${carryover === o.id ? "is-on" : ""}`}>
                  <input type="radio" name="carry" checked={carryover === o.id} onChange={() => setCarryover(o.id)}/>
                  <div className="carry-opt-icon">{o.icon}</div>
                  <div>
                    <div className="carry-opt-title">{o.title}</div>
                    <div className="carry-opt-desc">{o.desc}</div>
                  </div>
                </label>
              ))}
            </div>
          </div>
        )}

        {incomplete.length > 0 && carryover !== "keep" && (
          <div className="incomplete-list">
            {incomplete.map(t => {
              const epic = EPICS.find(e => e.id === t.epicId);
              return (
                <div key={t.id} className="incomplete-row">
                  <span className="ms-task-epic-bar" style={{ background: epic?.color }}/>
                  <span className="ms-task-name">{t.name}</span>
                  <StatusPill status={t.status} fill={false}/>
                  <span className="ms-task-points">{t.points}</span>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </Modal>
  );
}

Object.assign(window, { Modal, StartSprintModal, PlanSprintModal, CompleteSprintModal });