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

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- WidgetCard -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="WidgetCard — Card Widget Sederhana">
                <p class="text-body-1 mb-4">
                    <strong>WidgetCard</strong> adalah card outlined tanpa elevation yang dirancang untuk widget/statistik.
                    Memiliki margin bawah otomatis (<code>mb-6</code>) dan slot <code>default</code> untuk kontennya.
                </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 widget card</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 widget</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">{{ widgetCardCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo">
                    <v-row>
                        <v-col cols="12" md="4">
                            <WidgetCard title="Total Pengguna">
                                <div class="d-flex align-center ga-2">
                                    <v-icon color="primary" size="36">mdi-account-group</v-icon>
                                    <span class="text-h4 font-weight-bold">1,250</span>
                                </div>
                                <p class="text-caption text-medium-emphasis mt-1">+12% dari bulan lalu</p>
                            </WidgetCard>
                        </v-col>
                        <v-col cols="12" md="4">
                            <WidgetCard title="Total Penjualan">
                                <div class="d-flex align-center ga-2">
                                    <v-icon color="success" size="36">mdi-cash</v-icon>
                                    <span class="text-h4 font-weight-bold">Rp 45jt</span>
                                </div>
                                <p class="text-caption text-medium-emphasis mt-1">+8% dari bulan lalu</p>
                            </WidgetCard>
                        </v-col>
                        <v-col cols="12" md="4">
                            <WidgetCard title="Total Order">
                                <div class="d-flex align-center ga-2">
                                    <v-icon color="warning" size="36">mdi-cart</v-icon>
                                    <span class="text-h4 font-weight-bold">320</span>
                                </div>
                                <p class="text-caption text-medium-emphasis mt-1">+5% dari bulan lalu</p>
                            </WidgetCard>
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>

        <!-- ============================================================= -->
        <!-- WidgetCardv2 -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="WidgetCardv2 — Card Widget dengan Footer">
                <p class="text-body-1 mb-4">
                    <strong>WidgetCardv2</strong> adalah versi lanjutan dari WidgetCard dengan dukungan slot
                    <code>footer</code> untuk menambahkan aksi/info di bawah konten. Footer dapat
                    disembunyikan menggunakan prop <code>hideaction</code>.
                </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 widget</td></tr>
                        <tr><td><code>hideaction</code></td><td>Boolean</td><td>Jika <code>true</code>, footer disembunyikan</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</td></tr>
                        <tr><td><code>footer</code></td><td>Konten footer (aksi/info tambahan)</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">{{ widgetCardv2Code }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo — Dengan Footer">
                    <v-row>
                        <v-col cols="12" md="6">
                            <WidgetCardv2 title="Laporan Bulan Ini">
                                <div class="d-flex align-center ga-2 mb-2">
                                    <v-icon color="info" size="32">mdi-chart-bar</v-icon>
                                    <span class="text-h5 font-weight-bold">75%</span>
                                    <span class="text-body-2 text-medium-emphasis">target tercapai</span>
                                </div>
                                <v-progress-linear model-value="75" color="info" rounded height="8" />
                                <template #footer>
                                    <v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
                                    <v-spacer />
                                    <span class="text-caption text-medium-emphasis">Update: hari ini</span>
                                </template>
                            </WidgetCardv2>
                        </v-col>
                        <v-col cols="12" md="6">
                            <WidgetCardv2 title="Tanpa Footer" :hideaction="true">
                                <p class="text-body-2">
                                    Prop <code>hideaction="true"</code> menyembunyikan area footer
                                    meskipun slot footer telah diisi.
                                </p>
                                <template #footer>
                                    <span>Footer ini tidak akan terlihat</span>
                                </template>
                            </WidgetCardv2>
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            widgetCardCode: `<template>
  <WidgetCard title="Total Pengguna">
    <div class="d-flex align-center ga-2">
      <v-icon color="primary" size="36">mdi-account-group</v-icon>
      <span class="text-h4 font-weight-bold">1,250</span>
    </div>
    <p class="text-caption mt-1">+12% dari bulan lalu</p>
  </WidgetCard>
</template>

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

            widgetCardv2Code: `<template>
  <WidgetCardv2 title="Laporan Bulan Ini">
    <!-- Slot default: konten utama -->
    <div>Konten widget di sini...</div>

    <!-- Slot footer: aksi/info di bawah -->
    <template #footer>
      <v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
    </template>
  </WidgetCardv2>

  <!-- Sembunyikan footer dengan prop hideaction -->
  <WidgetCardv2 title="Tanpa Footer" :hideaction="true">
    <div>Footer tidak tampil.</div>
  </WidgetCardv2>
</template>

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