<template>
  <div class="layout">
    <TopBar />
    <MainPane :adding="adding" @add-ops="onAddOps" />
    <SidebarPane
      :ops="ops"
      @update-op="updateOp"
      @remove-op="removeOp"
      @move-up="moveUp"
      @move-down="moveDown"
      @clear-ops="clearOps"
    />
    <BottomBar :ops="ops" :result="result" @print="sendOps" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from './components/TopBar.vue';
import MainPane from './components/MainPane.vue';
import SidebarPane from './components/SidebarPane.vue';
import BottomBar from './components/BottomBar.vue';

const ops = ref([]);
const result = ref({ ok: true, msg: 'Listo.' });
const adding = ref(false);

function onAddOps(newOps) { if (Array.isArray(newOps) && newOps.length) ops.value = [...ops.value, ...newOps]; }
function clearOps() { ops.value = []; }
function updateOp(index, newOp) { ops.value = ops.value.map((o, i) => (i === index ? newOp : o)); }
function removeOp(index) { ops.value = ops.value.filter((_, i) => i !== index); }
function moveUp(index) { if (index <= 0) return; const a = [...ops.value]; [a[index - 1], a[index]] = [a[index], a[index - 1]]; ops.value = a; }
function moveDown(index) { if (index >= ops.value.length - 1) return; const a = [...ops.value]; [a[index + 1], a[index]] = [a[index], a[index + 1]]; ops.value = a; }

async function sendOps() {
  const res = await fetch('/api/print', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ operations: ops.value }) });
  result.value = await res.json();
}
</script>

<style>
:root {
  --bg: #0f1113;
  --fg: #ececec;
  --muted: #a9a9a9;
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --accent: #cfcfcf;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; background: linear-gradient(180deg, #0f1113 0%, #1a1d21 100%); color: var(--fg); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; }

.layout {
  display: grid;
  grid-template-areas:
    'header'
    'main'
    'sidebar'
    'footer';
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 1200px; margin: 0 auto; padding: 16px;
}

@media (min-width: 900px) {
  .layout {
    grid-template-areas:
      'header header'
      'main sidebar'
      'footer footer';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 3fr 1fr; /* 75/25 */
  }
}
</style>

