/* global window, React */
// ============================================================
// Trip detail — Tab 4: 3D load schematic
// ============================================================

const { useEffect, useRef } = React;

const ORDER_COLORS = [
  { fill: '#E8893C', edge: '#A8631F' }, // orange
  { fill: '#F0B830', edge: '#A8801E' }, // yellow
  { fill: '#C13333', edge: '#6B1A1A' }, // red (brand)
  { fill: '#5A3FB8', edge: '#3F2A8A' }, // purple
  { fill: '#2F7A4A', edge: '#1F5A35' }, // green
];

function drawIso(canvas, orders) {
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1;
  const W = canvas.clientWidth;
  const H = canvas.clientHeight;
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  ctx.scale(dpr, dpr);
  ctx.clearRect(0, 0, W, H);

  // Trailer: 53ft × 8.5ft × 9ft (interior). Pallet 48"×40" = 4×4 ft.
  // Grid: 13 long × 2 wide × 1 tall = 26 floor positions. We'll do 13×2 floor + double-stack for some.
  // Simplify: 13 long × 2 wide = 26 floor positions; some orders stack to 32 max.

  const isoX = (x, y) => (x - y) * 0.866;
  const isoY = (x, y) => (x + y) * 0.5;

  // Layout origin
  const scale = Math.min((W - 60) / (13 * 0.866 * 2 + 5), (H - 80) / (13 * 0.5 + 2 * 0.5 + 4));
  const PW = scale * 1.0; // pallet plan width (4ft slot)
  const PD = scale * 1.0; // pallet plan depth
  const PH = scale * 1.2; // pallet stack height (~5ft visual)

  const offX = W / 2 - (13 * 0.866 * PW) / 2 + (2 * 0.866 * PW) / 2;
  const offY = 40;

  // Build pallet placement list — each order takes N pallets in sequence
  // Floor: 13 cols × 2 rows = 26 slots. If total > 26, stack from end.
  const totalPallets = orders.reduce((a, o) => a + o.pallets, 0);
  let palettes = [];
  let orderIdx = 0;
  let inOrder = 0;
  for (let i = 0; i < totalPallets; i++) {
    while (orderIdx < orders.length && inOrder >= orders[orderIdx].pallets) {
      orderIdx++; inOrder = 0;
    }
    if (orderIdx >= orders.length) break;
    palettes.push({ orderIdx });
    inOrder++;
  }

  // Place into slots: floor first (col-major: col 0 row 0, col 0 row 1, col 1 row 0...)
  const placements = [];
  const FLOOR = 26;
  for (let i = 0; i < palettes.length; i++) {
    let col, row, layer;
    if (i < FLOOR) {
      col = Math.floor(i / 2);
      row = i % 2;
      layer = 0;
    } else {
      const j = i - FLOOR;
      col = Math.floor(j / 2);
      row = j % 2;
      layer = 1;
    }
    placements.push({ col, row, layer, orderIdx: palettes[i].orderIdx });
  }

  // Draw trailer floor outline (iso)
  function drawBox(x, y, z, w, d, h, fill, edge) {
    // x,y,z = grid coords. w,d,h = grid units.
    const x1 = offX + isoX(x, y) * PW;
    const y1 = offY + isoY(x, y) * PW - z * PH;
    const x2 = offX + isoX(x + w, y) * PW;
    const y2 = offY + isoY(x + w, y) * PW - z * PH;
    const x3 = offX + isoX(x + w, y + d) * PW;
    const y3 = offY + isoY(x + w, y + d) * PW - z * PH;
    const x4 = offX + isoX(x, y + d) * PW;
    const y4 = offY + isoY(x, y + d) * PW - z * PH;

    const ht = h * PH;

    // top
    ctx.beginPath();
    ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.lineTo(x4, y4); ctx.closePath();
    ctx.fillStyle = fill; ctx.fill();
    ctx.strokeStyle = edge; ctx.lineWidth = 1; ctx.stroke();

    // right face
    ctx.beginPath();
    ctx.moveTo(x2, y2); ctx.lineTo(x2, y2 + ht); ctx.lineTo(x3, y3 + ht); ctx.lineTo(x3, y3); ctx.closePath();
    ctx.fillStyle = shade(fill, -0.2); ctx.fill();
    ctx.strokeStyle = edge; ctx.stroke();

    // front face
    ctx.beginPath();
    ctx.moveTo(x3, y3); ctx.lineTo(x3, y3 + ht); ctx.lineTo(x4, y4 + ht); ctx.lineTo(x4, y4); ctx.closePath();
    ctx.fillStyle = shade(fill, -0.35); ctx.fill();
    ctx.strokeStyle = edge; ctx.stroke();
  }

  function shade(hex, amt) {
    const c = hex.replace('#', '');
    const r = parseInt(c.slice(0, 2), 16);
    const g = parseInt(c.slice(2, 4), 16);
    const b = parseInt(c.slice(4, 6), 16);
    const adj = (v) => Math.max(0, Math.min(255, Math.round(v + 255 * amt)));
    return `rgb(${adj(r)},${adj(g)},${adj(b)})`;
  }

  // Trailer floor (light)
  drawBox(0, 0, -0.05, 13, 2, 0.05, '#E2DED1', '#B5B2A4');

  // Trailer back wall (light vertical face)
  // Just draw a faint outline
  ctx.save();
  ctx.globalAlpha = 0.4;
  // back wall vertical (at x=0)
  const wallX = offX + isoX(0, 0) * PW;
  const wallTopY = offY + isoY(0, 0) * PW - 2.2 * PH;
  const wallBotY = offY + isoY(0, 0) * PW;
  ctx.strokeStyle = '#8E8B7E';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(wallX, wallBotY);
  ctx.lineTo(wallX, wallTopY);
  ctx.stroke();
  ctx.restore();

  // Draw pallets back-to-front (so closer ones cover farther)
  placements.sort((a, b) => {
    // draw farthest first: lower col + row first, then lower layer first
    if (a.col !== b.col) return a.col - b.col;
    if (a.row !== b.row) return a.row - b.row;
    return a.layer - b.layer;
  });

  for (const p of placements) {
    const c = ORDER_COLORS[p.orderIdx % ORDER_COLORS.length];
    drawBox(p.col, p.row, p.layer * 1.0, 0.95, 0.95, 0.95, c.fill, c.edge);
  }

  // Direction arrow + labels
  ctx.fillStyle = '#5A584D';
  ctx.font = '500 11px JetBrains Mono, monospace';
  ctx.textAlign = 'left';
  ctx.fillText('NOSE', offX + isoX(0, 1) * PW - 18, offY + isoY(0, 1) * PW + 12);
  ctx.textAlign = 'right';
  ctx.fillText('REAR DOORS →', offX + isoX(13, 1) * PW + 30, offY + isoY(13, 1) * PW + 12);

  // Capacity meter
  ctx.fillStyle = '#8E8B7E';
  ctx.font = '10px JetBrains Mono, monospace';
  ctx.textAlign = 'left';
  ctx.fillText(`${placements.length} pallets · ${Math.round((placements.length / 32) * 100)}% positions`, 12, H - 8);
}

function LoadCanvas({ trip }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    drawIso(ref.current, trip.orders);
    const handler = () => drawIso(ref.current, trip.orders);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [trip]);
  return <canvas ref={ref} style={{ width: '100%', height: 320 }} />;
}

function Axle({ a }) {
  const pct = Math.min(100, Math.round((parseInt(a.value.replace(/,/g, ''), 10) / parseInt(a.limit.replace(/,/g, ''), 10)) * 100));
  return (
    <div className={`axle axle--${a.state === 'bad' ? 'bad' : a.state === 'warn' ? 'warn' : 'ok'}`}>
      <div className="axle__label">{a.name} axle</div>
      <div className="axle__value">{a.value} <span style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>lbs</span></div>
      <div className="axle__sub">limit {a.limit} lbs · {pct}%</div>
      <div className="axle__bar"><div style={{ width: `${pct}%` }}></div></div>
    </div>
  );
}

function LoadViewTab({ trip, lpStatus, onSendToLoadPlanner }) {
  const { useState: useLVState } = React;
  const [showSendModal, setShowSendModal] = useLVState(false);
  const [selectedLp, setSelectedLp] = useLVState((window.LOAD_PLANNERS || [{}])[1]?.id || 'lp-2');
  const [sendNote, setSendNote] = useLVState('');

  const lps = window.LOAD_PLANNERS || [];
  const pending = lpStatus && lpStatus.status === 'PENDING';
  const confirmed = lpStatus && lpStatus.status === 'CONFIRMED';

  const sendNow = () => {
    const lp = lps.find(l => l.id === selectedLp);
    onSendToLoadPlanner && onSendToLoadPlanner({
      planner: lp,
      note: sendNote,
      at: new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }) + ' CDT',
    });
    setShowSendModal(false);
    setSendNote('');
    window.open('https://3dloader.ibuildsolutions.in/', '_blank');
  };

  return (
    <div>
      {/* Top action band */}
      <div className="lv-action-band">
        <div className="lv-action-band__left">
          <div className="lv-action-band__title">Physical layout · confirmation</div>
          <div className="lv-action-band__sub">
            {pending ? (
              <span>
                <span className="status-dot status-dot--amber" />
                <span style={{ color: 'var(--amber-2)', fontWeight: 600 }}>Waiting for Load Planner</span> ·
                sent to <b>{lpStatus.planner.name}</b> at <span style={{ fontFamily: 'var(--font-mono)' }}>{lpStatus.at}</span>
                {lpStatus.note && <span> · "{lpStatus.note}"</span>}
              </span>
            ) : confirmed ? (
              <span>
                <span className="status-dot status-dot--green" />
                <span style={{ color: 'var(--green-2)', fontWeight: 600 }}>Load plan confirmed</span> by <b>{lpStatus.planner.name}</b> · ready to dispatch
              </span>
            ) : (
              <span>
                Spot-check pallet positions and axle distribution. For complex loads, send to Load Planner for confirmation before confirming the trip.
              </span>
            )}
          </div>
        </div>
        <div className="lv-action-band__right">
          {pending ? (
            <>
              <button className="btn" onClick={() => onSendToLoadPlanner({ kind: 'cancel' })}>Cancel request</button>
              <button className="btn btn--ghost">View on Load Planner →</button>
            </>
          ) : (
            <button className="btn btn--primary" onClick={() => setShowSendModal(true)}>
              ⇨ Send to Load Planner for confirmation
            </button>
          )}
        </div>
      </div>

      <div className="load-canvas-wrap">
        <div className="load-canvas">
          <div className="load-canvas__note">
            Load Planner manages complex load configuration. Use this view to spot-check physical feasibility for high-risk loads.
          </div>
          <LoadCanvas trip={trip} />
          <div className="load-legend">
            {trip.orders.map((o, i) => (
              <span key={o.id} className="load-legend__item">
                <span className="load-legend__swatch" style={{ background: ORDER_COLORS[i % ORDER_COLORS.length].fill }}></span>
                {o.id} · {o.pallets} pal
              </span>
            ))}
          </div>
        </div>
        <div className="axle-readouts">
          <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', marginBottom: 2 }}>
            Axle weights
          </div>
          {trip.axles.map(a => <Axle key={a.name} a={a} />)}
        </div>
      </div>

      {showSendModal && (
        <div className="modal__overlay" onClick={() => setShowSendModal(false)}>
          <div className="modal modal--narrow" onClick={(e) => e.stopPropagation()}>
            <div className="modal__head">
              <div className="modal__eyebrow">Send to Load Planner · {trip.id}</div>
              <div className="modal__title">Confirm physical load plan</div>
              <div className="modal__sub">
                Load Planner will verify pallet placement, weight distribution, and stacking constraints. Trip status will move to
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink)' }}> WAITING-LP</span>. You'll get a notification when confirmed.
              </div>
            </div>
            <div className="modal__body">
              <div className="lp-pick">
                {lps.map(lp => (
                  <label key={lp.id} className={`lp-pick__opt ${selectedLp === lp.id ? 'selected' : ''} ${!lp.online ? 'offline' : ''}`}>
                    <input type="radio" name="lp" checked={selectedLp === lp.id} onChange={() => setSelectedLp(lp.id)} disabled={!lp.online} />
                    <span className="lp-pick__avatar">{lp.initial}</span>
                    <span className="lp-pick__main">
                      <span className="lp-pick__name">{lp.name}{!lp.online && <span className="pill pill--grey" style={{ marginLeft: 6, fontSize: 9 }}>OFFLINE</span>}</span>
                      <span className="lp-pick__sub">{lp.shift} · {lp.load} active loads</span>
                    </span>
                    <span className={`lp-pick__dot ${lp.online ? 'on' : 'off'}`} />
                  </label>
                ))}
              </div>
              <div className="field">
                <label className="field__label">Note for Load Planner <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· optional</span></label>
                <textarea className="textarea" rows="3"
                  placeholder="e.g. Need to verify stacking for ORD-9201 (fragile) and balance steer axle (current 11,840 lbs)."
                  value={sendNote} onChange={e => setSendNote(e.target.value)}></textarea>
              </div>
            </div>
            <div className="modal__foot">
              <button className="btn" onClick={() => setShowSendModal(false)}>Cancel</button>
              <button className="btn btn--primary" onClick={sendNow}>
                ⇨ Send to {lps.find(l => l.id === selectedLp)?.name?.split(' ')[1] || 'Load Planner'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { LoadViewTab });