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

const input = ref('{"name":"Gemini","type":"AI"}')
const output = ref('')
const error = ref('')

const format = () => {
  try {
    const parsed = JSON.parse(input.value)
    output.value = JSON.stringify(parsed, null, 2)
    error.value = ''
  } catch (e: any) {
    error.value = e.message
  }
}

const minify = () => {
  try {
    const parsed = JSON.parse(input.value)
    output.value = JSON.stringify(parsed)
    error.value = ''
  } catch (e: any) {
    error.value = e.message
  }
}
</script>

<template>
  <div class="h-[calc(100vh-200px)] flex flex-col">
    <div class="flex space-x-2 mb-4">
      <button @click="format" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Prettify</button>
      <button @click="minify" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Minify</button>
    </div>

    <div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 min-h-0">
      <div class="flex flex-col">
        <label class="mb-2 text-sm font-bold text-gray-500">Input JSON</label>
        <textarea 
          v-model="input" 
          class="flex-1 w-full p-4 font-mono text-sm border rounded-lg focus:ring-2 focus:ring-blue-500 resize-none"
          :class="{'border-red-500': error}"
        ></textarea>
        <p v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</p>
      </div>
      
      <div class="flex flex-col">
        <label class="mb-2 text-sm font-bold text-gray-500">Output</label>
        <textarea 
          readonly 
          :value="output" 
          class="flex-1 w-full p-4 font-mono text-sm bg-gray-50 border rounded-lg resize-none text-gray-800"
        ></textarea>
      </div>
    </div>
  </div>
</template>
