@extends('layouts.app')
@section('title', __('Storage'))
@section('page-title', __('Storage'))
@section('page-subtitle', __('Where uploaded files are kept (local, S3, R2 …).'))

@section('content')
@include('super-admin._nav')

{{-- Usage --}}
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
    <div class="card card-pad">
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Files (public)') }}</div>
        <div class="mt-1 text-2xl font-semibold">{{ number_format($usage['files']) }}</div>
    </div>
    <div class="card card-pad">
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Used space') }}</div>
        <div class="mt-1 text-2xl font-semibold">{{ $usage['human'] }}</div>
    </div>
    <div class="card card-pad">
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Active driver') }}</div>
        <div class="mt-1 text-2xl font-semibold capitalize">{{ $currentDisk }}</div>
    </div>
</div>

<form method="POST" action="{{ route('super-admin.storage.update') }}"
      x-data="{ driver: '{{ old('default', $settings['default'] ?? $currentDisk) }}' }"
      class="space-y-6">
    @csrf

    {{-- Driver selection (radio cards) --}}
    <section class="card card-pad">
        <h2 class="text-base font-semibold mb-4">{{ __('Default driver') }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            @foreach($drivers as $value => $label)
                <label class="cursor-pointer">
                    <input type="radio" name="default" value="{{ $value }}" x-model="driver" class="peer sr-only" @checked(old('default', $settings['default'] ?? $currentDisk) === $value)>
                    <div class="rounded-xl border-2 p-4 transition
                                border-slate-200 dark:border-slate-800
                                peer-checked:border-brand-500 peer-checked:bg-brand-50 dark:peer-checked:bg-brand-900/20">
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-semibold">{{ $label }}</span>
                            <span class="w-4 h-4 rounded-full border-2 border-slate-300 peer-checked:border-brand-500 peer-checked:bg-brand-500"></span>
                        </div>
                        <div class="text-xs text-slate-500 mt-1 capitalize">{{ $value }}</div>
                    </div>
                </label>
            @endforeach
        </div>
    </section>

    {{-- S3 / R2 credentials --}}
    <section class="card card-pad space-y-5" x-show="driver === 's3' || driver === 'r2'" x-cloak>
        <div class="flex items-center justify-between">
            <h2 class="text-base font-semibold">{{ __('S3 credentials') }}</h2>
            <span class="badge-info">S3 / R2</span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="form-label">{{ __('Access key') }}</label>
                <input name="s3_key" value="{{ old('s3_key', $settings['s3_key'] ?? '') }}" class="form-input font-mono">
            </div>
            <div>
                <label class="form-label">{{ __('Secret key') }}</label>
                <input type="password" name="s3_secret" class="form-input font-mono" autocomplete="new-password"
                       placeholder="{{ !empty($settings['s3_secret']) ? '••••••••  ('.__('saved').')' : '' }}">
            </div>
            <div>
                <label class="form-label">{{ __('Region') }}</label>
                <input name="s3_region" value="{{ old('s3_region', $settings['s3_region'] ?? 'auto') }}" class="form-input">
            </div>
            <div>
                <label class="form-label">{{ __('Bucket') }}</label>
                <input name="s3_bucket" value="{{ old('s3_bucket', $settings['s3_bucket'] ?? '') }}" class="form-input">
            </div>
            <div class="sm:col-span-2">
                <label class="form-label">{{ __('Endpoint (R2 / custom)') }}</label>
                <input type="url" name="s3_endpoint" value="{{ old('s3_endpoint', $settings['s3_endpoint'] ?? '') }}" class="form-input"
                       placeholder="https://<account>.r2.cloudflarestorage.com">
            </div>
            <div class="sm:col-span-2">
                <label class="inline-flex items-center gap-2 text-sm">
                    <input type="hidden" name="s3_path_style" value="0">
                    <input type="checkbox" name="s3_path_style" value="1" class="w-4 h-4 accent-brand-600"
                           @checked(old('s3_path_style', ($settings['s3_path_style'] ?? '0') === '1'))>
                    {{ __('Use path-style endpoint (required for R2 / MinIO)') }}
                </label>
            </div>
        </div>
    </section>

    <div class="flex justify-end">
        <button type="submit" class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
    </div>
</form>

<form method="POST" action="{{ route('super-admin.storage.test') }}" class="mt-3 flex justify-end">
    @csrf
    <input type="hidden" name="disk" value="{{ $currentDisk }}">
    <button class="btn-secondary"><x-icon name="check" class="w-4 h-4"/> {{ __('Test current driver') }}</button>
</form>
@endsection