/* Day view — timeline grid with draggable reservations */
const { fmtTime: fmtT2 } = window.SEATIQ_HELPERS;

function DayView({ tables, sections, reservations, selectedId, onSelect, onMove, onBlock, granularity = 30, now }) {
  const startMin = 11 * 60;     // 11:00
  const endMin   = 23 * 60 + 30; // 23:30
  const SLOT_W   = granularity === 15 ? 36 : granularity === 30 ? 60 : 100;
  const totalMin = endMin - startMin;
  const px = (mins) => ((mins - startMin) / granularity) * SLOT_W;

  // Major ticks every hour, minor every gran
  const ticks = [];
  for (let m = startMin; m <= endMin; m += granularity) {
    ticks.push(m);
  }
  const totalW = px(endMin);

  // Drag state
  const [drag, setDrag] = useState(null); // { resId, startX, origStart, origTable }
  const rightRef = useRef(null);

  const onMouseDownRes = (e, res) => {
    if (res.status === 'finished') return;
    e.preventDefault();
    setDrag({
      resId: res.id,
      startX: e.clientX,
      startY: e.clientY,
      origStart: res.start,
      origTable: res.table,
      currentDx: 0,
      currentDy: 0,
    });
    onSelect(res.id);
  };

  useEffect(() => {
    if (!drag) return;
    const onMove2 = (e) => {
      setDrag(d => d ? { ...d, currentDx: e.clientX - d.startX, currentDy: e.clientY - d.startY } : null);
    };
    const onUp = (e) => {
      const dx = e.clientX - drag.startX;
      const dy = e.clientY - drag.startY;
      const slotsShifted = Math.round(dx / SLOT_W);
      const newStart = drag.origStart + slotsShifted * granularity;
      // Find new table by Y
      const allRows = document.querySelectorAll('[data-table-id]');
      let newTable = drag.origTable;
      allRows.forEach(row => {
        const r = row.getBoundingClientRect();
        if (e.clientY >= r.top && e.clientY <= r.bottom) {
          newTable = row.dataset.tableId;
        }
      });
      if (newStart !== drag.origStart || newTable !== drag.origTable) {
        onMove(drag.resId, { start: newStart, table: newTable });
      }
      setDrag(null);
    };
    window.addEventListener('mousemove', onMove2);
    window.addEventListener('mouseup', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove2);
      window.removeEventListener('mouseup', onUp);
    };
  }, [drag, granularity, SLOT_W, onMove]);

  const resByTable = useMemo(() => {
    const m = {};
    reservations.forEach(r => {
      (m[r.table] = m[r.table] || []).push(r);
    });
    return m;
  }, [reservations]);

  const nowMin = now.getHours() * 60 + now.getMinutes();
  const nowVisible = nowMin >= startMin && nowMin <= endMin;

  return (
    <div className="timeline-wrap">
      <div className="timeline" style={{minWidth: 200 + totalW}}>
        {/* Header with time ticks */}
        <div className="tl-header">
          <div className="tl-header-left">Bord</div>
          <div className="tl-header-right" style={{width: totalW}}>
            {ticks.map(m => {
              const isMajor = m % 60 === 0;
              if (granularity === 15 && m % 30 !== 0) return null; // skip every other when 15m
              return (
                <div key={m}
                  className={`tl-tick ${isMajor ? 'major' : ''}`}
                  style={{left: px(m), width: SLOT_W}}>
                  {fmtT2(m)}
                </div>
              );
            })}
          </div>
        </div>

        {/* Rows by section */}
        {sections.map(sec => {
          const secTables = sec.tableIds.map(id => tables.find(t => t.id === id)).filter(Boolean);
          const secRes = secTables.flatMap(t => resByTable[t.id] || []);
          const covers = secRes.filter(r => r.status !== 'finished' && r.status !== 'blocked').reduce((a,r) => a + r.pax, 0);
          return (
            <React.Fragment key={sec.id}>
              <div className="section-row">
                <div className="left">
                  <span>{sec.label}</span>
                  <span style={{color: 'var(--muted)', fontWeight: 600, fontSize: 10, letterSpacing: '0.08em'}}>
                    {secTables.length} BORDE · {covers} COVERS
                  </span>
                </div>
                <div className="right" style={{width: totalW, position: 'relative'}}>
                  {/* show subtle grid lines in section header too */}
                </div>
              </div>
              {secTables.map(t => {
                const rows = resByTable[t.id] || [];
                return (
                  <div key={t.id} className="tl-row" data-table-id={t.id}>
                    <div className="tl-row-left">
                      <div className="tname">{t.name}</div>
                      <div className="tcap"><Icon name="user" size={11}/> {t.cap[0]}–{t.cap[1]}</div>
                    </div>
                    <div className="tl-row-right" style={{width: totalW}}>
                      {/* vertical grid lines */}
                      {ticks.map(m => (
                        <div key={m} className={`tl-grid-line ${m % 60 === 0 ? 'major' : ''}`} style={{left: px(m)}}/>
                      ))}
                      {/* NOW line */}
                      {nowVisible && (
                        <div className="now-line" style={{left: px(nowMin)}} />
                      )}
                      {/* reservations */}
                      {rows.map(r => {
                        const isDragging = drag?.resId === r.id;
                        const dx = isDragging ? drag.currentDx : 0;
                        const dy = isDragging ? drag.currentDy : 0;
                        return (
                          <div key={r.id}
                            className={`res status-${r.status} ${selectedId === r.id ? 'selected' : ''} ${isDragging ? 'dragging' : ''}`}
                            style={{
                              left: px(r.start) + dx,
                              width: px(r.end) - px(r.start) - 4,
                              transform: isDragging ? `translateY(${dy}px)` : 'none',
                            }}
                            onMouseDown={(e) => onMouseDownRes(e, r)}
                            onClick={(e) => { e.stopPropagation(); onSelect(r.id); }}>
                            <div className="top">
                              <span className="name">{r.name}</span>
                              <span className="pax"><Icon name="user" size={10} stroke={2.4}/> {r.pax}</span>
                            </div>
                            <div className="meta">
                              <span>{fmtT2(r.start)} – {fmtT2(r.end)}</span>
                              {r.tags?.includes('VIP') && <span className="tag">VIP</span>}
                              {r.allergies?.length > 0 && <span className="tag" style={{background: 'rgba(224,83,58,0.18)', color: '#6E2114'}}>!</span>}
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

window.DayView = DayView;