<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
import UiTableCard from '@/components/shared/UiTableCard.vue';
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';

const tableHeaders = [
    { title: 'Nama', key: 'name' },
    { title: 'Email', key: 'email' },
    { title: 'Status', key: 'status' },
];
const tableItems = [
    { name: 'Budi Santoso', email: 'budi@email.com', status: 'Aktif' },
    { name: 'Siti Rahayu', email: 'siti@email.com', status: 'Nonaktif' },
    { name: 'Ahmad Fauzi', email: 'ahmad@email.com', status: 'Aktif' },
];
</script>

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- CardHeaderFooter -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="CardHeaderFooter — Card dengan Header dan Footer">
                <p class="text-body-1 mb-4">
                    <strong>CardHeaderFooter</strong> adalah card outlined yang menyediakan area
                    <em>header</em> (judul), <em>konten</em> (slot default), dan <em>footer</em> (slot footer)
                    yang dipisahkan oleh garis pembatas.
                </p>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><code>title</code></td><td>String</td><td>Judul card di bagian header</td></tr>
                    </tbody>
                </v-table>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Slot</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><code>default</code></td><td>Konten utama antara header dan footer</td></tr>
                        <tr><td><code>footer</code></td><td>Konten footer (tombol aksi, info, dsb.)</td></tr>
                    </tbody>
                </v-table>

                <UiChildCard title="Contoh Penggunaan" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ cardHeaderFooterCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo" class="mb-6">
                    <v-row>
                        <v-col cols="12" md="6">
                            <CardHeaderFooter title="Form Pendaftaran">
                                <v-text-field label="Nama Lengkap" variant="outlined" density="compact" class="mb-3" />
                                <v-text-field label="Email" variant="outlined" density="compact" />
                                <template #footer>
                                    <v-btn color="primary">Simpan</v-btn>
                                    <v-btn variant="text" class="ml-2">Batal</v-btn>
                                </template>
                            </CardHeaderFooter>
                        </v-col>
                        <v-col cols="12" md="6">
                            <CardHeaderFooter title="Konfirmasi Hapus">
                                <v-alert type="warning" variant="tonal" class="mb-0">
                                    Apakah Anda yakin ingin menghapus data ini?
                                </v-alert>
                                <template #footer>
                                    <v-spacer />
                                    <v-btn color="error" class="mr-2">Hapus</v-btn>
                                    <v-btn variant="outlined">Batal</v-btn>
                                </template>
                            </CardHeaderFooter>
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>

        <!-- ============================================================= -->
        <!-- UiTableCard -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="UiTableCard — Card Wrapper untuk Tabel">
                <p class="text-body-1 mb-4">
                    <strong>UiTableCard</strong> adalah card khusus sebagai wrapper tabel data. Slot
                    <code>default</code> ditempatkan langsung setelah divider (tanpa padding ekstra)
                    agar tabel bisa full-width sesuai card.
                </p>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><code>title</code></td><td>String</td><td>Judul di atas tabel</td></tr>
                    </tbody>
                </v-table>

                <UiChildCard title="Contoh Penggunaan" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiTableCardCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo" class="mb-6">
                    <UiTableCard title="Daftar Pengguna">
                        <v-data-table
                            :headers="tableHeaders"
                            :items="tableItems"
                            hide-default-footer
                            density="compact"
                        />
                    </UiTableCard>
                </UiChildCard>
            </UiParentCard>
        </v-col>

        <!-- ============================================================= -->
        <!-- UiParentCardLogo -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="UiParentCardLogo — Card dengan Logo Aplikasi">
                <p class="text-body-1 mb-4">
                    <strong>UiParentCardLogo</strong> sama seperti UiParentCard tetapi menampilkan
                    <em>Logo aplikasi</em> (komponen <code>Logo.vue</code>) di header alih-alih teks judul.
                    Cocok digunakan pada halaman auth (login, register, dsb.).
                </p>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Slot</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><code>default</code></td><td>Konten utama di bawah logo</td></tr>
                        <tr><td><code>action</code></td><td>Aksi di sebelah kanan logo</td></tr>
                    </tbody>
                </v-table>

                <UiChildCard title="Contoh Penggunaan" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardLogoCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo">
                    <v-row justify="center">
                        <v-col cols="12" md="5">
                            <UiParentCardLogo>
                                <template #action>
                                    <v-chip color="primary" size="small">v1.0</v-chip>
                                </template>
                                <p class="text-body-2 text-center mt-2">
                                    Silakan masuk untuk melanjutkan. Slot <code>default</code> berisi
                                    form login atau konten lainnya.
                                </p>
                            </UiParentCardLogo>
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            cardHeaderFooterCode: `<template>
  <CardHeaderFooter title="Form Pendaftaran">
    <!-- Slot default: konten di antara header & footer -->
    <v-text-field label="Nama Lengkap" variant="outlined" />
    <v-text-field label="Email" variant="outlined" />

    <!-- Slot footer: tombol aksi -->
    <template #footer>
      <v-btn color="primary">Simpan</v-btn>
      <v-btn variant="text">Batal</v-btn>
    </template>
  </CardHeaderFooter>
</template>

<script setup lang="ts">
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
<\/script>`,

            uiTableCardCode: `<template>
  <UiTableCard title="Daftar Pengguna">
    <!-- Letakkan v-data-table atau v-table langsung sebagai slot default -->
    <v-data-table
      :headers="headers"
      :items="items"
      hide-default-footer
    />
  </UiTableCard>
</template>

<script setup lang="ts">
import UiTableCard from '@/components/shared/UiTableCard.vue';

const headers = [
  { title: 'Nama', key: 'name' },
  { title: 'Email', key: 'email' },
];
const items = [
  { name: 'Budi', email: 'budi@email.com' },
];
<\/script>`,

            uiParentCardLogoCode: `<template>
  <!-- Cocok untuk halaman auth / landing -->
  <UiParentCardLogo>
    <template #action>
      <v-chip color="primary" size="small">v1.0</v-chip>
    </template>

    <!-- Konten form login/register di sini -->
    <LoginForm />
  </UiParentCardLogo>
</template>

<script setup lang="ts">
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
<\/script>`,
        };
    }
};
</script>
