<script setup lang="ts">
import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
import DesignerPreview from "~/components/designer/DesignerPreview.vue";
import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
import TemplatePicker from "~/components/designer/TemplatePicker.vue";

import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";

const {
  templates,
  selectedTemplate,
  selectTemplate,
  displaySize,
  templateLabel,
  productionPixelSize,
  previewUrl,
  registerCanvas,
  unregisterCanvas,
  addTextbox,
  addShape,
  addImageFromFile,
  clearDesign,
  downloadPreview,
  downloadProduction,
  exportDesign,
  isExporting,
  activeFillColor,
  activeStrokeColor,
  canStyleSelection,
  setActiveFillColor,
  setActiveStrokeColor,
  zoomLevel,
  minZoom,
  maxZoom,
  setZoom,
  zoomIn,
  zoomOut,
  resetZoom,
} = useSlipmatDesigner();

const handleTemplateSelect = (templateId: string) => {
  selectTemplate(templateId);
};

const handleExport = async () => {
  await exportDesign();
};
</script>

<template>
  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
    <AppNavbar />
    <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
      <header class="space-y-3">
        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">
          Slipmatz Designer
        </p>
        <h1 class="text-3xl font-bold text-white sm:text-4xl">
          Craft custom slipmats ready for the pressing plant.
        </h1>
        <p class="max-w-3xl text-base text-slate-300">
          Pick a template, drop in artwork, and we’ll generate both a high-fidelity
          preview and a print-ready PNG at exact specs. Everything stays within a
          circular safe zone to ensure clean results on vinyl.
        </p>
      </header>

      <section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
        <div class="space-y-6">
          <TemplatePicker
            :templates="templates"
            :selected-template-id="selectedTemplate.id"
            @select="handleTemplateSelect"
          />

          <DesignerToolbar
            :on-add-text="addTextbox"
            :on-add-circle="() => addShape('circle')"
            :on-add-rectangle="() => addShape('rect')"
            :on-clear="clearDesign"
            :on-import-image="addImageFromFile"
            :on-fill-change="setActiveFillColor"
            :on-stroke-change="setActiveStrokeColor"
            :active-fill="activeFillColor"
            :active-stroke="activeStrokeColor"
            :can-style-selection="canStyleSelection"
            :zoom="zoomLevel"
            :min-zoom="minZoom"
            :max-zoom="maxZoom"
            :on-zoom-change="setZoom"
            :on-zoom-in="zoomIn"
            :on-zoom-out="zoomOut"
            :on-zoom-reset="resetZoom"
          />

          <DesignerPreview
            :preview-url="previewUrl"
            :template-label="templateLabel"
            :production-pixels="productionPixelSize"
            :is-exporting="isExporting"
            @export="handleExport"
            @download-preview="downloadPreview"
            @download-production="downloadProduction"
          />
        </div>

        <div class="flex flex-col gap-6">
          <div class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60">
            <DesignerCanvas
              :size="displaySize"
              :background-color="selectedTemplate.backgroundColor"
              :register-canvas="registerCanvas"
              :unregister-canvas="unregisterCanvas"
            />
            <p class="mt-4 text-sm text-slate-400">
              Safe zone and bleed guides update automatically when you switch
              templates. Use the toolbar to layer text, shapes, and imagery inside the
              circular boundary.
            </p>
          </div>
        </div>
      </section>
    </div>
  </main>
</template>
