@extends('layouts.email')
@section('title', $mailbox['address'].' — Ladill Email')
@section('content')
@php $host = 'mail.'.config('app.platform_domain'); @endphp
<div class="mx-auto max-w-2xl">
    <div class="flex items-center gap-2 text-sm text-slate-400">
        <a href="{{ route('email.mailboxes.index') }}" class="hover:text-slate-600">Mailboxes</a><span>/</span>
        <span class="text-slate-600">{{ $mailbox['address'] }}</span>
    </div>
    <div class="mt-2 flex items-center justify-between">
        <h1 class="text-xl font-semibold tracking-tight text-slate-900">{{ $mailbox['address'] }}</h1>
        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium capitalize text-slate-600">{{ $mailbox['status'] ?? '' }}</span>
    </div>

    <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-5">
        <h2 class="text-sm font-semibold text-slate-900">Connection settings</h2>
        <p class="mt-0.5 text-xs text-slate-400">Use these in any mail client, or just open webmail.</p>
        <dl class="mt-4 space-y-2 text-sm">
            <div class="flex justify-between"><dt class="text-slate-500">Username</dt><dd class="font-mono text-slate-800">{{ $mailbox['address'] }}</dd></div>
            <div class="flex justify-between"><dt class="text-slate-500">IMAP</dt><dd class="font-mono text-slate-800">{{ $host }}:993 (SSL)</dd></div>
            <div class="flex justify-between"><dt class="text-slate-500">SMTP</dt><dd class="font-mono text-slate-800">{{ $host }}:587 (STARTTLS)</dd></div>
        </dl>
        <a href="https://{{ $host }}" class="btn-primary mt-4">Open Webmail ↗</a>
    </div>

    @php
        $quotaMb = (int) ($mailbox['quota_mb'] ?? 0);
        $usedBytes = (int) ($mailbox['used_bytes'] ?? 0);
        $price = \App\Support\MailboxPricing::priceMinorFor($quotaMb);
        $tiers = \App\Support\MailboxPricing::tiers();
        $maxMb = collect($tiers)->max('mb');
        $pct = $quotaMb > 0 ? min(100, (int) round($usedBytes / ($quotaMb * 1048576) * 100)) : 0;
        $fmt = fn ($m) => config('email.currency', 'GHS').' '.number_format($m / 100, 2);
    @endphp
    <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-5">
        <div class="flex items-start justify-between">
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Storage plan</h2>
                <p class="mt-0.5 text-sm text-slate-600">
                    <span class="font-semibold">{{ \App\Support\MailboxPricing::label($quotaMb) }}</span>
                    @if($price === 0)
                        <span class="ml-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700">Free</span>
                    @else
                        <span class="ml-1 text-xs text-slate-400">{{ $fmt($price) }}/month</span>
                    @endif
                </p>
            </div>
            @if($quotaMb < $maxMb)
                <a href="{{ route('email.mailboxes.upgrade', $mailbox['id']) }}" class="btn-primary">Upgrade</a>
            @else
                <span class="rounded-lg bg-slate-100 px-3 py-2 text-xs font-medium text-slate-500">Top plan</span>
            @endif
        </div>
        @if($quotaMb > 0)
            <div class="mt-4">
                <div class="h-2 w-full overflow-hidden rounded-full bg-slate-100">
                    <div class="h-full rounded-full {{ $pct >= 90 ? 'bg-rose-500' : 'bg-indigo-500' }}" style="width: {{ max(2, $pct) }}%"></div>
                </div>
                <p class="mt-1.5 text-xs text-slate-400">{{ number_format($usedBytes / 1048576, 0) }} MB of {{ \App\Support\MailboxPricing::label($quotaMb) }} used ({{ $pct }}%)</p>
            </div>
        @endif
    </div>

    <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-5">
        <h2 class="text-sm font-semibold text-slate-900">Reset password</h2>
        <form method="POST" action="{{ route('email.mailboxes.password', $mailbox['id']) }}" class="mt-3 grid grid-cols-2 gap-3">
            @csrf @method('PATCH')
            <input type="password" name="password" required placeholder="New password" class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none">
            <input type="password" name="password_confirmation" required placeholder="Confirm" class="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none">
            <button class="col-span-2 rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Update password</button>
        </form>
    </div>

    <div class="mt-4 rounded-2xl border border-rose-200 bg-white p-5">
        <h2 class="text-sm font-semibold text-rose-700">Delete mailbox</h2>
        <p class="mt-0.5 text-xs text-slate-400">This permanently removes the mailbox and its email.</p>
        <x-confirm-dialog
            :name="'delete-mailbox-'.$mailbox['id']"
            title="Delete mailbox?"
            :message="'Delete '.$mailbox['address'].'? This cannot be undone.'"
            :action="route('email.mailboxes.destroy', $mailbox['id'])"
            method="DELETE"
            confirm-label="Delete mailbox"
            class="mt-3"
        >
            <x-slot:trigger>
                <button type="button" class="rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-700">Delete mailbox</button>
            </x-slot:trigger>
        </x-confirm-dialog>
    </div>
</div>
@endsection