<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="sm" :safe-area="true">
    <scroll-view class="canvas-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="canvas-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="canvas-demo-hero">
          <XtfText class="canvas-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="canvas-demo-title" level="display" color="inverse" text="Canvas" />
          <XtfText class="canvas-demo-intro" level="caption" color="inverse" text="Canvas 绘图，支持手写、命令图层、历史与导出。" />
        </view>

        <view class="canvas-demo-section">
          <view class="canvas-demo-heading-row">
            <view class="canvas-demo-heading-copy">
              <XtfText class="canvas-demo-section-title" level="h3" text="绘图工作区" />
              <XtfText class="canvas-demo-section-desc" level="caption" color="secondary" :text="toolLabel" />
            </view>
            <view class="canvas-demo-count">
              <text class="canvas-demo-count-value">{{ strokes.length }}</text>
              <text class="canvas-demo-count-label">strokes</text>
            </view>
          </view>

          <view class="canvas-demo-surface-wrap">
            <XtfCanvas
              ref="canvasRef"
              canvas-id="xtf-canvas-demo"
              width="100%"
              :height="500"
              background-color="#ffffff"
              :drawing="drawing"
              :tool="tool"
              :stroke-color="strokeColor"
              :stroke-width="tool == 'eraser' ? 24 : 7"
              :show-grid="showGrid"
              :grid-size="32"
              empty-text="在画布上拖动开始手写"
              v-model:strokes="strokes"
              v-model:commands="commands"
              @ready="handleReady"
              @change="handleChange"
              @export="handleExport"
              @error="handleError"
            />
          </view>

          <view class="canvas-demo-toolbar">
            <text class="canvas-demo-status-label">允许绘制</text><switch id="canvas-drawing" :checked="drawing" @change="drawing = $event.detail.value" />
          </view>
          <view class="canvas-demo-toolbar">
            <view class="canvas-demo-tool"><XtfButton label="画笔" :type="tool == 'pen' ? 'solid' : 'outline'" block @click="selectPen" /></view>
            <view class="canvas-demo-tool canvas-demo-tool-gap"><XtfButton label="橡皮" :type="tool == 'eraser' ? 'solid' : 'outline'" theme="warning" block @click="selectEraser" /></view>
            <view class="canvas-demo-tool canvas-demo-tool-gap"><XtfButton :label="showGrid ? '关闭网格' : '显示网格'" type="light" theme="info" block @click="toggleGrid" /></view>
          </view>

          <view class="canvas-demo-toolbar">
            <view class="canvas-demo-tool"><XtfButton label="撤销" type="outline" block @click="undo" /></view>
            <view class="canvas-demo-tool canvas-demo-tool-gap"><XtfButton label="重做" type="outline" block @click="redo" /></view>
            <view class="canvas-demo-tool canvas-demo-tool-gap"><XtfButton label="清空" type="light" theme="danger" block @click="clearCanvas" /></view>
          </view>
        </view>

        <view class="canvas-demo-section">
          <XtfText class="canvas-demo-section-title" level="h3" text="基础命令" />
          <XtfText class="canvas-demo-section-desc" level="caption" color="secondary" text="覆盖 rect、circle、ellipse、roundrect、arc、line、points、polygon、path、text 与 icon。" />
          <view class="canvas-demo-toolbar">
            <view class="canvas-demo-tool"><XtfButton id="canvas-load-commands" label="加载命令" type="light" block @click="loadCommands" /></view>
            <view class="canvas-demo-tool canvas-demo-tool-gap"><XtfButton label="清除命令" type="outline" block @click="clearCommandLayer" /></view>
          </view>
          <view class="canvas-demo-status-row">
            <text class="canvas-demo-status-label">受控命令</text>
            <text class="canvas-demo-status-value">{{ commands.length }}</text>
          </view>
        </view>

        <view class="canvas-demo-section">
          <XtfText class="canvas-demo-section-title" level="h3" text="导出" />
          <XtfText class="canvas-demo-section-desc" level="caption" color="secondary" text="导出后展示真实 PNG 图片及返回结果。" />
          <XtfButton id="canvas-export" label="导出 dataUrl" block @click="exportCanvas" />
          <view class="canvas-demo-export-panel">
            <text class="canvas-demo-export-state">{{ exportStatus }}</text>
            <text class="canvas-demo-export-data">{{ exportPreview }}</text>
            <image v-if="exportImage.length > 0" class="canvas-demo-export-image" :src="exportImage" mode="aspectFit" />
          </view>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfCanvas from "@/uni_modules/xtf-linkuiunix/components/xtf-canvas/xtf-canvas.uvue"
import type { XtfCanvasCommand, XtfCanvasExportResult, XtfCanvasPathSegment, XtfCanvasPoint, XtfCanvasStroke } from "@/uni_modules/xtf-linkuiunix/libs/canvas"

const canvasRef = ref<any>(null)
const tool = ref("pen")
const drawing = ref(true)
const strokeColor = ref("#0f172a")
const showGrid = ref(true)
const strokes = ref<XtfCanvasStroke[]>([])
const commands = ref<XtfCanvasCommand[]>([])
const exportStatus = ref("等待导出")
const exportPreview = ref("尚未生成 dataUrl")
const exportImage = ref("")

const toolLabel = computed((): string => tool.value == "eraser" ? "橡皮模式，拖动可擦除画布内容" : "画笔模式，拖动记录受控 strokes")

function point(x: number, y: number): XtfCanvasPoint {
  return { x: x, y: y }
}

function buildCommands(): XtfCanvasCommand[] {
  const pathSegments: XtfCanvasPathSegment[] = [
    { type: "move", x: 24, y: 184 },
    { type: "bezier", cp1x: 58, cp1y: 145, cp2x: 88, cp2y: 223, x: 122, y: 184 }
  ]
  return [
    { id: "demo-rect", type: "rect", x: 18, y: 20, width: 58, height: 38, fillColor: "#dbeafe", stroke: true, strokeColor: "#2563eb", lineWidth: 2 },
    { id: "demo-circle", type: "circle", x: 112, y: 39, radius: 20, fillColor: "#dcfce7", stroke: true, strokeColor: "#16a34a", lineWidth: 2 },
    { id: "demo-ellipse", type: "ellipse", x: 174, y: 39, radiusX: 31, radiusY: 18, fillColor: "#fef3c7", stroke: true, strokeColor: "#d97706", lineWidth: 2 },
    { id: "demo-roundrect", type: "roundrect", x: 220, y: 20, width: 76, height: 38, radius: 10, fillColor: "#fee2e2", stroke: true, strokeColor: "#dc2626", lineWidth: 2 },
    { id: "demo-arc", type: "arc", x: 42, y: 105, radius: 25, startAngle: 0, endAngle: Math.PI * 1.5, fill: false, stroke: true, strokeColor: "#7c3aed", lineWidth: 5 },
    { id: "demo-line", type: "line", x: 85, y: 82, x2: 143, y2: 126, strokeColor: "#0891b2", lineWidth: 4 },
    { id: "demo-points", type: "points", points: [point(170, 89), point(188, 105), point(206, 89), point(224, 105)], size: 9, fillColor: "#db2777" },
    { id: "demo-polygon", type: "polygon", points: [point(250, 126), point(275, 80), point(300, 126)], fillColor: "#e0e7ff", stroke: true, strokeColor: "#4f46e5", lineWidth: 2 },
    { id: "demo-path", type: "path", segments: pathSegments, fill: false, stroke: true, strokeColor: "#ea580c", lineWidth: 4 },
    { id: "demo-text", type: "text", x: 145, y: 193, text: "XTF Canvas", fontSize: 19, fillColor: "#0f172a" },
    { id: "demo-icon", type: "icon", name: "star", x: 272, y: 176, size: 38, anchor: "center", fillColor: "#facc15", stroke: true, strokeColor: "#a16207", lineWidth: 2 }
  ]
}

function selectPen(): void { tool.value = "pen" }
function selectEraser(): void { tool.value = "eraser" }
function toggleGrid(): void { showGrid.value = !showGrid.value }
function undo(): void { if (canvasRef.value != null) canvasRef.value.undo() }
function redo(): void { if (canvasRef.value != null) canvasRef.value.redo() }
function clearCanvas(): void { if (canvasRef.value != null) canvasRef.value.clear() }
function loadCommands(): void { commands.value = buildCommands() }
function clearCommandLayer(): void { commands.value = [] }

function exportCanvas(): void {
  exportStatus.value = "正在导出"
  if (canvasRef.value == null) {
    exportStatus.value = "画布未就绪"
    return
  }
  const result = canvasRef.value.exportImage() as XtfCanvasExportResult | null
  if (result == null) exportStatus.value = "导出失败"
}

function handleReady(_payload: any): void {
  exportStatus.value = "画布已就绪"
}

function handleChange(payload: any): void {
  if (payload != null && payload.reason != null) exportStatus.value = "最近操作：" + payload.reason.toString()
}

function handleExport(result: XtfCanvasExportResult): void {
  exportImage.value = result.dataUrl
  exportStatus.value = "导出成功 · " + result.width.toString() + " × " + result.height.toString()
  exportPreview.value = result.dataUrl.length > 72 ? result.dataUrl.slice(0, 72) + "..." : result.dataUrl
}

function handleError(payload: any): void {
  exportStatus.value = payload != null && payload.message != null ? "错误：" + payload.message.toString() : "画布发生错误"
}
</script>

<style>
.canvas-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.canvas-demo-page { display: flex; flex-direction: column; flex-shrink: 0; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.canvas-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.canvas-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.canvas-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.canvas-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.9; }
.canvas-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.canvas-demo-heading-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.canvas-demo-heading-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.canvas-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.canvas-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.canvas-demo-count { display: flex; flex-direction: column; align-items: flex-end; margin-left: 20rpx; }
.canvas-demo-count-value { color: #0f766e; font-size: 32rpx; font-weight: 700; }
.canvas-demo-count-label { margin-top: 2rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 18rpx; }
.canvas-demo-surface-wrap { display: flex; flex-direction: column; width: 100%; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; overflow: hidden; }
.canvas-demo-toolbar { display: flex; flex-direction: row; width: 100%; margin-top: 16rpx; }
.canvas-demo-tool { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.canvas-demo-tool-gap { margin-left: 12rpx; }
.canvas-demo-status-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 16rpx; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.canvas-demo-status-label { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.canvas-demo-status-value { color: #0f766e; font-size: 26rpx; font-weight: 700; }
.canvas-demo-export-panel { display: flex; flex-direction: column; margin-top: 16rpx; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #ecfdf5); }
.canvas-demo-export-state { color: #047857; font-size: 24rpx; font-weight: 600; }
.canvas-demo-export-data { margin-top: 8rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; line-height: 1.4; }
.canvas-demo-export-image { margin-top: 16rpx; width: 100%; height: 320rpx; background-color: #ffffff; }
</style>
