<template>
  <ToolLayout>
    <template #header>
      <h1 class="text-xl font-semibold text-gray-900 dark:text-white">Docker Converter</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Convert between 'docker run' commands and Docker Compose YAML.</p>
    </template>
    
    <template #content>
      <div class="h-full flex flex-col space-y-4">
        
        <!-- Docker Run Input -->
        <div class="flex-1 flex flex-col">
          <div class="flex items-center justify-between mb-2">
            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Docker Run Command</label>
            <button @click="convertToCompose" class="text-xs text-blue-600 hover:text-blue-500">Convert to Compose ↓</button>
          </div>
          <textarea
            v-model="dockerRun"
            class="flex-1 w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono text-xs resize-none"
            placeholder="docker run -d -p 80:80 nginx"
          ></textarea>
        </div>

        <!-- Compose Output -->
        <div class="flex-1 flex flex-col">
          <div class="flex items-center justify-between mb-2">
             <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Docker Compose (YAML)</label>
             <button @click="convertToRun" class="text-xs text-blue-600 hover:text-blue-500">Convert to Run ↑</button>
          </div>
          <textarea
            v-model="dockerCompose"
            class="flex-1 w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 font-mono text-xs resize-none"
            placeholder="version: '3.3'&#10;services:..."
          ></textarea>
        </div>

        <div v-if="error" class="text-red-500 text-xs">{{ error }}</div>

      </div>
    </template>
  </ToolLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import composerize from 'composerize';
import decomposerize from 'decomposerize';
import ToolLayout from '../../components/ToolLayout.vue';

const dockerRun = ref('');
const dockerCompose = ref('');
const error = ref('');

const convertToCompose = () => {
  if (!dockerRun.value) return;
  try {
    dockerCompose.value = composerize(dockerRun.value);
    error.value = '';
  } catch (e: any) {
    error.value = 'Error converting to Compose: ' + e.message;
  }
};

const convertToRun = () => {
  if (!dockerCompose.value) return;
  try {
    // Decomposerize types might be missing or different
    const result = decomposerize(dockerCompose.value);
    dockerRun.value = result;
    error.value = '';
  } catch (e: any) {
    error.value = 'Error converting to Run: ' + e.message;
  }
};
</script>
