/* Alternate metaphors: Two-column (polished version of v1) + Timeline (gantt).
   Same state, different views. */

function TwoColumn({ backlog, sprintTickets, onAdd, onRemove, dragTicket, setDragTicket }) {
  const [hoverSide, setHoverSide] = React.useState(null);

  return (
    <section className="two-col">
      <div className="panel">
        <header className="panel__head">
          <div>
            <div className="panel__title">Backlog</div>
            <div className="panel__sub">{backlog.length} tickets · {backlog.reduce((s, t) => s + t.hours, 0)}h</div>
          </div>
        </header>
        <div
          className={"two-col__list" + (hoverSide === 'backlog' ? ' is-drop' : '')}
          onDragOver={e => { if (dragTicket && sprintTickets.includes(dragTicket)) { e.preventDefault(); setHoverSide('backlog'); } }}
          onDragLeave={() => setHoverSide(null)}
          onDrop={() => { if (dragTicket && sprintTickets.includes(dragTicket)) onRemove(dragTicket.id); setHoverSide(null); }}
        >
          {backlog.map(t => (
            <TwoColRow key={t.id} t={t}
              onAct={() => onAdd(t)}
              actLabel="+ Add to sprint"
              setDragTicket={setDragTicket}
            />
          ))}
        </div>
      </div>
      <div className="panel">
        <header className="panel__head">
          <div>
            <div className="panel__title">In sprint</div>
            <div className="panel__sub">{sprintTickets.length} tickets · {sprintTickets.reduce((s, t) => s + t.hours, 0)}h</div>
          </div>
        </header>
        <div
          className={"two-col__list" + (hoverSide === 'sprint' ? ' is-drop' : '')}
          onDragOver={e => { if (dragTicket && !sprintTickets.includes(dragTicket)) { e.preventDefault(); setHoverSide('sprint'); } }}
          onDragLeave={() => setHoverSide(null)}
          onDrop={() => { if (dragTicket && !sprintTickets.includes(dragTicket)) onAdd(dragTicket); setHoverSide(null); }}
        >
          {sprintTickets.map(t => (
            <TwoColRow key={t.id} t={t}
              onAct={() => onRemove(t.id)}
              actLabel="Remove"
              actDanger
              setDragTicket={setDragTicket}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function TwoColRow({ t, onAct, actLabel, actDanger, setDragTicket }) {
  const person = PEOPLE.find(p => p.id === t.assignee);
  return (
    <div className="two-col__row"
      draggable
      onDragStart={e => { setDragTicket(t); e.dataTransfer.effectAllowed = 'move'; }}
      onDragEnd={() => setDragTicket(null)}
    >
      <span className="two-col__type" data-type={t.type}>{TYPE_LABEL[t.type]}</span>
      <div className="two-col__body">
        <div className="two-col__title">{t.title}</div>
        <div className="two-col__meta">
          <code>{t.id}</code>
          <span className={"prio prio--" + t.priority.toLowerCase()}>{t.priority}</span>
          <span className="avatar avatar--sm" data-tone={person.tone}>{person.name.charAt(0)}</span>
          <span>{person.name.split(' ')[0]}</span>
        </div>
      </div>
      <div className="two-col__h">{t.hours}h</div>
      <button className={"two-col__act" + (actDanger ? " is-danger" : "")} onClick={onAct}>{actLabel}</button>
    </div>
  );
}

/* ============ TIMELINE — gantt-like, day-by-day ============ */

function Timeline({ tickets, onRemove, dragTicket, setDragTicket, onAssign }) {
  // 10 working days in the sprint
  const DAYS = ['Wed 20', 'Thu 21', 'Fri 22', 'Mon 26', 'Tue 27', 'Wed 28', 'Thu 29', 'Fri 30', 'Mon Jun 1', 'Tue Jun 2'];
  const DAY_W = 80;
  const DAY_H = 8; // hours per day

  return (
    <section className="timeline">
      <header className="timeline__head">
        <div className="timeline__head__who">Contributor</div>
        <div className="timeline__head__days" style={{ '--day-w': DAY_W + 'px' }}>
          {DAYS.map((d, i) => (
            <div key={i} className="timeline__day">
              <div className="timeline__day__lbl">{d}</div>
              <div className="timeline__day__cap">8h</div>
            </div>
          ))}
        </div>
      </header>
      {PEOPLE.map(p => {
        const b = personBucket(p, tickets);
        let dayCursor = 0;       // 0..80h cumulative
        return (
          <div key={p.id} className={"timeline__lane" + (b.overH ? " is-over" : "")}>
            <div className="timeline__who">
              <span className="avatar avatar--sm" data-tone={p.tone}>{p.name.charAt(0)}</span>
              <div>
                <div className="timeline__who__name">{p.name.split(' ')[0]}</div>
                <div className="timeline__who__h">{b.usedH}h / {b.availH}</div>
              </div>
            </div>
            <div
              className="timeline__row"
              style={{ '--day-w': DAY_W + 'px', '--days': DAYS.length }}
              onDragOver={e => { if (dragTicket) e.preventDefault(); }}
              onDrop={() => { if (dragTicket) onAssign(dragTicket, p.id); }}
            >
              {DAYS.map((_, i) => (
                <div key={i} className="timeline__cell" style={{ left: (i * DAY_W) + 'px' }} />
              ))}
              {/* PTO blocks */}
              {p.pto.map((x, i) => (
                <div key={'pto'+i} className="timeline__pto" style={{
                  left: (x.dayIdx * DAY_W) + 'px',
                  width: ((x.hours / DAY_H) * DAY_W) + 'px'
                }}>
                  PTO
                </div>
              ))}
              {b.assigned.map((t, i) => {
                // skip PTO days when laying out tickets
                while (p.pto.some(x => x.dayIdx <= (dayCursor / DAY_H) && (dayCursor / DAY_H) < x.dayIdx + x.hours / DAY_H)) {
                  dayCursor += DAY_H;
                }
                const x = (dayCursor / DAY_H) * DAY_W;
                const w = (t.hours / DAY_H) * DAY_W;
                dayCursor += t.hours;
                const over = (dayCursor) > b.availH;
                return (
                  <div key={t.id}
                    className={"timeline-tix" + (over ? " is-over" : "")}
                    style={{ left: x + 'px', width: w + 'px' }}
                    data-type={t.type}
                    draggable
                    onDragStart={e => { setDragTicket(t); e.dataTransfer.effectAllowed = 'move'; }}
                    onDragEnd={() => setDragTicket(null)}
                    title={`${t.id} · ${t.title} · ${t.hours}h`}
                  >
                    <span className="timeline-tix__type">{TYPE_LABEL[t.type]}</span>
                    <span className="timeline-tix__title">{t.id}</span>
                    <span className="timeline-tix__h">{t.hours}h</span>
                    <button className="timeline-tix__x" onClick={(e) => { e.stopPropagation(); onRemove(t.id); }}>
                      <Icon d={ICONS.x} size={9} />
                    </button>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
      <footer className="timeline__foot">
        <div className="timeline__legend">
          <span className="timeline__legend__sw timeline__legend__sw--bug" /> Bug
          <span className="timeline__legend__sw timeline__legend__sw--story" /> Story
          <span className="timeline__legend__sw timeline__legend__sw--task" /> Task
          <span className="timeline__legend__sw timeline__legend__sw--epic" /> Epic
          <span className="timeline__legend__sw timeline__legend__sw--pto" /> PTO
          <span className="timeline__legend__sw timeline__legend__sw--over" /> Over capacity
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { TwoColumn, Timeline });