<script setup>
import { computed } from 'vue'
import { Head } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import {
    ChartPieIcon,
    DocumentIcon,
    FolderIcon,
    InformationCircleIcon,
} from '@heroicons/vue/24/outline'

const props = defineProps({
    account:         { type: Object, required: true },
    breakdown:       { type: Array,  default: () => [] },
    top_files:       { type: Array,  default: () => [] },
    top_directories: { type: Array,  default: () => [] },
    stale:           { type: Boolean, default: false },
    phase_warning:   { type: Object, default: null },
})

const totalBytes = computed(() => (props.breakdown || []).reduce((sum, b) => sum + (b.bytes || 0), 0))

const percent = (bytes) => totalBytes.value > 0 ? (bytes / totalBytes.value * 100).toFixed(1) : 0

const humanBytes = (b) => {
    if (b < 1024) return b + ' B'
    if (b < 1024 ** 2) return (b / 1024).toFixed(1) + ' KB'
    if (b < 1024 ** 3) return (b / 1024 / 1024).toFixed(1) + ' MB'
    return (b / 1024 / 1024 / 1024).toFixed(2) + ' GB'
}

const usageColor = (pct) => {
    if (pct >= 90) return 'bg-red-500'
    if (pct >= 75) return 'bg-amber-500'
    return 'bg-emerald-500'
}
</script>

<template>
    <Head title="Disk Kullanım Analizi" />
    <CustomerLayout>
        <template #header>Disk Kullanım Analizi</template>

        <div class="mb-4 rounded-xl border border-indigo-200 bg-indigo-50 p-4 text-sm text-indigo-900">
            <div class="flex gap-3">
                <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-indigo-600" />
                <div>
                    <strong>Disk Usage Analyzer:</strong> Hesabının hangi klasör/dosyalarının ne kadar yer kapladığını gör.
                    En büyük dosyaları sil/sıkıştır → quota'yı boşalt.
                </div>
            </div>
        </div>

        <!-- Total quota bar -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <h3 class="font-semibold">Toplam Quota Durumu</h3>
                <span class="text-sm font-mono">{{ humanBytes(account.usage_bytes) }} / {{ humanBytes(account.quota_bytes || totalBytes * 2) }}</span>
            </div>
            <div class="h-4 overflow-hidden rounded-full bg-slate-200">
                <div :class="['h-full transition-all', usageColor(account.usage_percent)]" :style="{ width: Math.min(account.usage_percent || 50, 100) + '%' }"></div>
            </div>
            <p class="mt-2 text-right text-xs text-slate-500">%{{ account.usage_percent || 50 }} dolu</p>
        </div>

        <!-- Per-category breakdown -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="mb-4 flex items-center gap-2 font-semibold">
                <ChartPieIcon class="h-5 w-5 text-indigo-500" /> Kategori Bazlı Dağılım
            </h3>

            <!-- Stacked bar -->
            <div class="mb-4 h-8 overflow-hidden rounded-lg flex">
                <div v-for="b in breakdown" :key="b.name" :class="b.color" :style="{ width: percent(b.bytes) + '%' }"
                     :title="`${b.name}: ${humanBytes(b.bytes)} (${percent(b.bytes)}%)`"></div>
            </div>

            <!-- Per-category rows -->
            <div class="space-y-2">
                <div v-for="b in breakdown" :key="b.name" class="flex items-center gap-3">
                    <div :class="['h-3 w-3 rounded-sm flex-shrink-0', b.color]"></div>
                    <div class="text-xl">{{ b.icon }}</div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between gap-2">
                            <div class="font-mono text-sm font-semibold">{{ b.name }}</div>
                            <div class="text-xs text-slate-600">
                                <span class="font-mono">{{ humanBytes(b.bytes) }}</span>
                                <span class="ml-2 text-slate-400">({{ percent(b.bytes) }}%)</span>
                            </div>
                        </div>
                        <p class="text-xs text-slate-500">{{ b.description }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Top files -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="mb-3 flex items-center gap-2 font-semibold">
                    <DocumentIcon class="h-5 w-5 text-amber-500" /> En Büyük Dosyalar
                </h3>
                <ul class="space-y-2">
                    <li v-for="f in top_files" :key="f.path" class="flex items-center justify-between gap-2 rounded bg-slate-50 p-2 text-xs">
                        <div class="flex-1 min-w-0">
                            <div class="font-mono text-slate-700 truncate" :title="f.path">{{ f.path }}</div>
                            <div class="text-[10px] text-slate-400">{{ f.mime }}</div>
                        </div>
                        <span class="font-mono font-semibold text-slate-900">{{ humanBytes(f.bytes) }}</span>
                    </li>
                </ul>
            </div>

            <!-- Top directories -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="mb-3 flex items-center gap-2 font-semibold">
                    <FolderIcon class="h-5 w-5 text-amber-500" /> En Büyük Klasörler
                </h3>
                <ul class="space-y-2">
                    <li v-for="d in top_directories" :key="d.path" class="flex items-center justify-between gap-2 rounded bg-slate-50 p-2 text-xs">
                        <div class="flex-1 min-w-0">
                            <div class="font-mono text-slate-700 truncate" :title="d.path">📁 {{ d.path }}</div>
                            <div class="text-[10px] text-slate-400">{{ d.file_count.toLocaleString('tr-TR') }} dosya</div>
                        </div>
                        <span class="font-mono font-semibold text-slate-900">{{ humanBytes(d.bytes) }}</span>
                    </li>
                </ul>
            </div>
        </div>

        <div v-if="phase_warning" class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
            <div class="flex gap-3">
                <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-amber-600" />
                <div>{{ phase_warning.message }}</div>
            </div>
        </div>
    </CustomerLayout>
</template>
