/* ============================================================
   ZERO — Roadmap & Product (Kanban). window.Screens.Roadmap
   ============================================================ */
(function () {
  const { useState } = React;
  const I = window.Icon;
  const { Priority, Badge } = window.UI;
  const D = window.DATA;

  const COLS = ['Ideas', 'Planned', 'In Progress', 'Review', 'Done'];
  const COL_HUE = { Ideas: 'var(--tx-2)', Planned: 'var(--teal)', 'In Progress': 'var(--violet-2)', Review: 'var(--amber)', Done: 'var(--green)' };
  const COL_LABEL = { Ideas: 'Ideias', Planned: 'Planejado', 'In Progress': 'Em Andamento', Review: 'Revisão', Done: 'Concluído' };

  function RoadCard({ c, onDragStart }) {
    return (
      <div draggable onDragStart={onDragStart} className="lift"
        style={{ padding: 13, borderRadius: 12, background: 'var(--bg-2)', border: '1px solid var(--line)', cursor: 'grab' }}>
        <div className="row between" style={{ marginBottom: 8 }}>
          <Badge soft="oklch(1 0 0 /.05)" color="var(--tx-2)">{c.tag}</Badge>
          <Priority level={c.pri} />
        </div>
        <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.4, marginBottom: 10 }}>{c.title}</div>
        {c.prog != null && (
          <div className="row gap8" style={{ marginBottom: 10 }}>
            <div className="track grow"><i style={{ width: c.prog + '%', background: c.hue }} /></div>
            <span className="mono" style={{ fontSize: 10, color: 'var(--tx-3)' }}>{c.prog}%</span>
          </div>
        )}
        <div className="row between">
          <div className="row gap6">
            <span className="avatar" style={{ width: 20, height: 20, fontSize: 9, background: c.hue }}>{c.owner[0]}</span>
            <span style={{ fontSize: 11, color: 'var(--tx-2)' }}>{c.owner}</span>
          </div>
          <span className="mono row gap4" style={{ fontSize: 10.5, color: 'var(--tx-3)' }}><I.clock w={12} />{c.est}</span>
        </div>
      </div>
    );
  }

  function Roadmap() {
    const [board, setBoard] = useState(() => JSON.parse(JSON.stringify(D.roadmap)));
    const [drag, setDrag] = useState(null); // {col, id}
    const [over, setOver] = useState(null);

    function onDrop(col) {
      if (!drag) return;
      if (drag.col === col) { setDrag(null); setOver(null); return; }
      setBoard(prev => {
        const next = { ...prev };
        const card = next[drag.col].find(c => c.id === drag.id);
        next[drag.col] = next[drag.col].filter(c => c.id !== drag.id);
        next[col] = [card, ...next[col]];
        return next;
      });
      setDrag(null); setOver(null);
    }

    const totals = COLS.map(c => board[c].length);

    return (
      <div className="page" style={{ maxWidth: 1600 }}>
        <div className="row between wrap gap12" style={{ marginBottom: 18 }}>
          <div className="row gap16 wrap">
            <Stat label="Em andamento" value={board['In Progress'].length} hue="var(--violet-2)" />
            <Stat label="Entregue no tri" value={board['Done'].length} hue="var(--green)" />
            <Stat label="Velocidade" value="42 pts" hue="var(--teal)" />
            <Stat label="Tempo de ciclo" value="3,4d" hue="var(--amber)" />
          </div>
          <div className="row gap8">
            <button className="btn"><I.filter w={15} /> Filtrar</button>
            <button className="btn btn-primary"><I.plus w={15} /> Nova issue</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14, alignItems: 'start' }}>
          {COLS.map((col, ci) => (
            <div key={col}
              onDragOver={e => { e.preventDefault(); setOver(col); }}
              onDragLeave={() => setOver(o => o === col ? null : o)}
              onDrop={() => onDrop(col)}
              style={{ borderRadius: 14, padding: 10, minHeight: 200,
                background: over === col ? 'color-mix(in oklab,'+COL_HUE[col]+', transparent 90%)' : 'oklch(0.165 0.013 265 /.5)',
                border: '1px solid ' + (over === col ? 'color-mix(in oklab,'+COL_HUE[col]+', transparent 60%)' : 'var(--line)'),
                transition: 'all .15s ease' }}>
              <div className="row between" style={{ padding: '4px 6px 12px' }}>
                <div className="row gap8">
                  <span style={{ width: 8, height: 8, borderRadius: 3, background: COL_HUE[col] }} />
                  <span style={{ fontSize: 12.5, fontWeight: 700 }}>{COL_LABEL[col]}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--tx-3)' }}>{totals[ci]}</span>
                </div>
                <button className="btn btn-icon btn-sm" style={{ padding: 4 }}><I.plus w={14} /></button>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {board[col].map(c => (
                  <RoadCard key={c.id} c={c} onDragStart={() => setDrag({ col, id: c.id })} />
                ))}
                {board[col].length === 0 && (
                  <div className="placeholder-img" style={{ height: 64, fontSize: 10.5 }}>solte aqui</div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  function Stat({ label, value, hue }) {
    return (
      <div className="panel" style={{ padding: '10px 16px', minWidth: 120 }}>
        <div style={{ fontSize: 11, color: 'var(--tx-2)' }}>{label}</div>
        <div className="row gap6" style={{ alignItems: 'baseline' }}>
          <span style={{ width: 7, height: 7, borderRadius: 2, background: hue }} />
          <span className="tnum" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.03em' }}>{value}</span>
        </div>
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Roadmap = Roadmap;
})();