<script setup lang="ts">
import { ref } from 'vue'
import FxButton from '../components/FxButton.vue'
import FxInput from '../components/FxInput.vue'
import FxTable from '../components/FxTable.vue'
import type { TableColumn } from '../components/FxTable.vue'

const inputValue = ref('')
const loading = ref(false)

const sizes = ['xs', 'sm', 'md', 'xl'] as const
const variants = ['primary', 'secondary', 'success', 'danger', 'ghost'] as const

const columns: TableColumn[] = [
  { key: 'id', label: 'ID', width: '80px' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'E-Mail' },
  { key: 'role', label: 'Rolle', align: 'center' },
  { key: 'status', label: 'Status', align: 'right' }
]

const tableData = [
  { id: 1, name: 'Max Mustermann', email: 'max@example.de', role: 'Admin', status: 'Aktiv' },
  { id: 2, name: 'Anna Schmidt', email: 'anna@example.de', role: 'User', status: 'Aktiv' },
  { id: 3, name: 'Tom Mueller', email: 'tom@example.de', role: 'Editor', status: 'Inaktiv' },
  { id: 4, name: 'Lisa Weber', email: 'lisa@example.de', role: 'User', status: 'Aktiv' }
]

function simulateLoading() {
  loading.value = true
  setTimeout(() => loading.value = false, 2000)
}

const installCode = `npm install @fluxkit/ui`
const usageCode = `import FluxKitUI from '@fluxkit/ui'
import '@fluxkit/ui/style.css'

app.use(FluxKitUI)`
</script>

<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-950 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
      <div class="text-center mb-12">
        <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
          FluxKit UI
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-400">
          Vue 3 Component Library mit TailwindCSS
        </p>
        <div class="mt-4 flex justify-center gap-2">
          <span class="px-3 py-1 bg-flux-100 dark:bg-flux-900 text-flux-700 dark:text-flux-300 rounded-full text-sm">Vue 3</span>
          <span class="px-3 py-1 bg-cyan-100 dark:bg-cyan-900 text-cyan-700 dark:text-cyan-300 rounded-full text-sm">TailwindCSS</span>
          <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full text-sm">TypeScript</span>
        </div>
      </div>

      <section class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 sm:p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Buttons</h2>
        
        <div class="mb-8">
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Groessen</h3>
          <div class="flex flex-wrap items-end gap-3">
            <FxButton v-for="size in sizes" :key="size" :size="size">
              {{ size.toUpperCase() }}
            </FxButton>
          </div>
        </div>

        <div class="mb-8">
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Varianten</h3>
          <div class="flex flex-wrap gap-3">
            <FxButton v-for="variant in variants" :key="variant" :variant="variant">
              {{ variant }}
            </FxButton>
          </div>
        </div>

        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Zustaende</h3>
          <div class="flex flex-wrap gap-3">
            <FxButton disabled>Disabled</FxButton>
            <FxButton :loading="loading" @click="simulateLoading">
              {{ loading ? 'Laedt...' : 'Klick mich' }}
            </FxButton>
          </div>
          <FxButton block class="mt-4">Full Width</FxButton>
        </div>
      </section>

      <section class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 sm:p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Inputs</h2>
        
        <div class="mb-8">
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Groessen</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <FxInput v-for="size in sizes" :key="size" :size="size" :placeholder="size.toUpperCase()" />
          </div>
        </div>

        <div class="mb-8">
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Mit Label</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FxInput v-model="inputValue" label="E-Mail" type="email" placeholder="email@example.de" required />
            <FxInput label="Passwort" type="password" placeholder="Passwort eingeben" />
          </div>
        </div>

        <div>
          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Zustaende</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <FxInput disabled placeholder="Deaktiviert" />
            <FxInput error error-message="Dieses Feld ist erforderlich" placeholder="Mit Fehler" />
          </div>
        </div>
      </section>

      <section class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 sm:p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Table</h2>
        
        <div class="space-y-8">
          <div v-for="size in sizes" :key="size">
            <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
              Groesse: {{ size.toUpperCase() }}
            </h3>
            <FxTable :columns="columns" :data="tableData.slice(0, 2)" :size="size" />
          </div>
        </div>
      </section>

      <section class="bg-gray-900 rounded-2xl shadow-xl p-6 sm:p-8">
        <h2 class="text-2xl font-bold text-white mb-4">Installation</h2>
        <pre class="bg-gray-950 rounded-lg p-4 overflow-x-auto text-green-400"><code>{{ installCode }}</code></pre>
        <pre class="bg-gray-950 rounded-lg p-4 overflow-x-auto mt-4 text-gray-300"><code>{{ usageCode }}</code></pre>
      </section>

      <footer class="mt-12 text-center text-gray-500 dark:text-gray-400">
        <p>Made with FluxKit by Kronos Soulution</p>
      </footer>
    </div>
  </div>
</template>
