@extends('layouts.app')

@section('title', 'Storage Management')

@section('content')
<div>
    <div class="flex justify-between items-center mb-6">
        <div>
            <h2 class="text-3xl font-bold text-white">Storage Management</h2>
            <p class="text-gray-400 text-sm mt-1">Manajemen penyimpanan rekaman dan file media</p>
        </div>
    </div>

    <!-- Storage Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-surface border border-border rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-medium text-gray-400">Total Storage</h3>
                <i data-lucide="hard-drive" class="w-5 h-5 text-blue-400"></i>
            </div>
            <div class="text-2xl font-bold text-white mb-1">
                {{ number_format($stats['total']['size_gb'] ?? 0, 2) }} GB
            </div>
            <p class="text-xs text-gray-500">
                {{ number_format($stats['total']['size_bytes'] ?? 0) }} bytes
            </p>
        </div>

        <div class="bg-surface border border-border rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-medium text-gray-400">Total Files</h3>
                <i data-lucide="file" class="w-5 h-5 text-green-400"></i>
            </div>
            <div class="text-2xl font-bold text-white mb-1">
                {{ number_format($stats['total']['files'] ?? 0) }}
            </div>
            <p class="text-xs text-gray-500">
                Files tersimpan
            </p>
        </div>

        <div class="bg-surface border border-border rounded-xl p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-medium text-gray-400">Total Size (MB)</h3>
                <i data-lucide="database" class="w-5 h-5 text-purple-400"></i>
            </div>
            <div class="text-2xl font-bold text-white mb-1">
                {{ number_format($stats['total']['size_mb'] ?? 0, 2) }} MB
            </div>
            <p class="text-xs text-gray-500">
                Total ukuran file
            </p>
        </div>
    </div>

    <!-- Storage by Type -->
    <div class="bg-surface border border-border rounded-xl p-6 mb-6">
        <h3 class="text-lg font-semibold text-white mb-4">Storage by Directory</h3>
        <div class="space-y-4">
            @php
                $directoryLabels = [
                    'stream-recordings' => ['label' => 'Stream Recordings', 'icon' => 'video', 'color' => 'blue'],
                    'audio-recordings' => ['label' => 'Audio Recordings', 'icon' => 'headphones', 'color' => 'green'],
                    'audio-logs' => ['label' => 'Audio Logs', 'icon' => 'radio', 'color' => 'purple'],
                    'ptt-messages' => ['label' => 'PTT Messages', 'icon' => 'mic', 'color' => 'orange'],
                    'evidence' => ['label' => 'Evidence', 'icon' => 'file', 'color' => 'red'],
                ];
            @endphp
            @if(isset($stats['directories']) && is_array($stats['directories']))
                @foreach($stats['directories'] as $dir => $dirStats)
                @php
                    $label = $directoryLabels[$dir]['label'] ?? ucfirst(str_replace('-', ' ', $dir));
                    $icon = $directoryLabels[$dir]['icon'] ?? 'folder';
                    $color = $directoryLabels[$dir]['color'] ?? 'gray';
                @endphp
                <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-{{ $color }}-500/20 flex items-center justify-center">
                            <i data-lucide="{{ $icon }}" class="w-5 h-5 text-{{ $color }}-400"></i>
                        </div>
                        <div>
                            <div class="text-sm font-medium text-white">{{ $label }}</div>
                            <div class="text-xs text-gray-500">
                                {{ number_format($dirStats['files'] ?? 0) }} files
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-semibold text-white">
                            {{ number_format($dirStats['size_mb'] ?? 0, 2) }} MB
                        </div>
                        <div class="text-xs text-gray-500">
                            @if(($stats['total']['size_bytes'] ?? 0) > 0)
                                {{ number_format((($dirStats['size_bytes'] ?? 0) / $stats['total']['size_bytes']) * 100, 1) }}%
                            @else
                                0%
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="text-center text-gray-400 py-8">
                    <i data-lucide="folder-x" class="w-12 h-12 mx-auto mb-2 text-gray-600"></i>
                    <p>Tidak ada data storage</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Actions -->
    <div class="bg-surface border border-border rounded-xl p-6">
        <h3 class="text-lg font-semibold text-white mb-4">Storage Actions</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 bg-white/5 rounded-lg border border-white/10">
                <h4 class="text-sm font-medium text-white mb-2">Archive Old Recordings</h4>
                <p class="text-xs text-gray-400 mb-4">Arsipkan rekaman yang lebih dari 90 hari</p>
                <form method="POST" action="{{ route('storage.archive') }}" class="flex gap-2">
                    @csrf
                    <input type="hidden" name="directory" value="recordings">
                    <input type="hidden" name="days_old" value="90">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition">
                        Archive Now
                    </button>
                </form>
            </div>

            <div class="p-4 bg-white/5 rounded-lg border border-white/10">
                <h4 class="text-sm font-medium text-white mb-2">Cleanup Old Files</h4>
                <p class="text-xs text-gray-400 mb-4">Hapus file yang lebih dari 365 hari</p>
                <form method="POST" action="{{ route('storage.cleanup') }}" class="flex gap-2" onsubmit="return confirm('Apakah Anda yakin ingin menghapus file lama?')">
                    @csrf
                    <input type="hidden" name="directory" value="recordings">
                    <input type="hidden" name="days_old" value="365">
                    <input type="hidden" name="delete" value="true">
                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
                        Cleanup Now
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    if (window.lucide) {
        lucide.createIcons();
    }
</script>
@endpush
@endsection