<template>
  <div :class="['app', isDark ? 'theme-dark' : 'theme-light']">
    <header class="topbar">
      <h1>JSON 格式化工具</h1>
      <button class="theme-toggle" @click="toggleTheme">
        {{ isDark ? '☀️ 亮色' : '🌙 暗色' }}
      </button>
    </header>
    <JsonFormatter />
  </div>
</template>

<script setup lang="ts">
import JsonFormatter from './components/JsonFormatter.vue'
import { useTheme } from './composables/useTheme'

const { isDark, toggleTheme } = useTheme()
</script>

<style>
.app { min-height: 100vh; transition: background .2s; }
.theme-light { background: #fff; color: #222; }
.theme-dark  { background: #1a1a1a; color: #eee; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #ddd; }
.topbar h1 { font-size: 18px; margin: 0; }
.theme-toggle { padding: 6px 12px; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
</style>

<template>
  <div class="formatter">
    <div class="panel input">
      <div class="panel-header">
        <span>输入 JSON</span>
        <select v-model.number="indent">
          <option :value="2">2 空格缩进</option>
          <option :value="4">4 空格缩进</option>
          <option :value="0">压缩成一行</option>
        </select>
      </div>
      <textarea
        v-model="rawInput"
        spellcheck="false"
        placeholder='{ "name": "luoxuancong" }'
      />
    </div>

    <div class="panel output">
      <div class="panel-header">
        <span>格式化结果</span>
        <button :disabled="!output" @click="copy">复制</button>
      </div>
      <pre v-if="output" class="result">{{ output }}</pre>
      <div v-else-if="error" class="error">
        ❌ {{ error.message }}（第 {{ error.line }} 行）
      </div>
      <div v-else class="empty">输入 JSON 后会显示格式化结果</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface ParseError { message: string; line: number; col: number }

const sample = '{"name":"罗玄聪","blog":"https://www.lxc666.cn","tags":["Vue3","TypeScript","AI"]}'
const rawInput = ref(sample)
const indent = ref<0 | 2 | 4>(2)
const error = ref<ParseError | null>(null)

const output = computed(() => {
  if (!rawInput.value.trim()) {
    error.value = null
    return ''
  }
  try {
    const obj = JSON.parse(rawInput.value)
    error.value = null
    return indent.value === 0
      ? JSON.stringify(obj)
      : JSON.stringify(obj, null, indent.value)
  } catch (e) {
    const msg = (e as Error).message
    const match = msg.match(/position (\d+)/)
    const pos = match ? Number(match[1]) : 0
    const before = rawInput.value.slice(0, pos)
    const line = before.split('\n').length
    const col = pos - before.lastIndexOf('\n')
    error.value = { message: msg, line, col }
    return ''
  }
})

watch(rawInput, () => {/* 仅触发 output 重算 */})

async function copy() {
  if (!output.value) return
  try {
    await navigator.clipboard.writeText(output.value)
    alert('已复制到剪贴板')
  } catch {
    alert('复制失败，请手动选择文本')
  }
}
</script>

<style scoped>
.formatter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px; height: calc(100vh - 80px);
}
.panel {
  display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 6px; overflow: hidden;
}
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #ccc;
  background: rgba(127,127,127,.1);
  font-size: 13px;
}
.input textarea, .output pre {
  flex: 1; margin: 0; padding: 12px; font-family: 'Fira Code', monospace;
  font-size: 13px; line-height: 1.5; background: transparent; color: inherit;
  border: 0; outline: 0; resize: none; overflow: auto;
}
.error { padding: 12px; color: #e74c3c; }
.empty { padding: 12px; color: #888; }

@media (max-width: 768px) {
  .formatter { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; min-height: calc(100vh - 80px); }
}
</style>

<pre v-if="lines.length" class="result">
  <span
    v-for="(ln, idx) in lines"
    :key="idx"
    :class="{ 'error-line': error?.line === idx + 1 }"
  >{{ ln }}<br/></span>
</pre>