@extends('layouts.email')
@section('title', 'Settings — Ladill Email')
@section('content')
<div class="mx-auto max-w-2xl">
    <h1 class="text-xl font-semibold tracking-tight text-slate-900">Settings</h1>
    <p class="mt-0.5 text-sm text-slate-500">Defaults, preferences, and account mailbox linking.</p>

    @if($showMailboxLinkUi ?? (($linkStatus['linked_mailbox'] ?? null) || ($linkStatus['show_reminder'] ?? false)))
        <div class="mt-6 rounded-2xl border border-indigo-200 bg-white p-5 shadow-sm">
            <div class="flex items-start gap-3">
                <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50">
                    @include('partials.ladill-pro-icon')
                </span>
                <div class="min-w-0 flex-1">
                    <h2 class="text-sm font-semibold text-slate-900">Link to mailbox</h2>
                    <p class="mt-1 text-sm leading-relaxed text-slate-500">
                        Your Ladill account uses <strong class="font-medium text-slate-700">{{ $linkStatus['account_email'] ?? $account->email }}</strong>.
                        Link a mailbox so <strong class="font-medium text-slate-700">Ladill Mail</strong> opens with your Ladill sign-in.
                    </p>

                    @if($linkStatus['linked_mailbox'] ?? null)
                        <div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2.5 text-sm text-emerald-800">
                            Linked mailbox: <span class="font-semibold">{{ $linkStatus['linked_mailbox'] }}</span>
                        </div>
                        <form method="POST" action="{{ route('account.settings.mailbox-unlink') }}" class="mt-3"
                              onsubmit="return confirm('Unlink this mailbox from your Ladill account? Ladill Mail will no longer open automatically with Ladill sign-in.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-50">
                                Unlink mailbox
                            </button>
                        </form>
                    @elseif(($linkStatus['stage'] ?? '') === 'needs_domain')
                        <p class="mt-3 text-sm text-amber-800">Add and verify an email domain first.</p>
                        <a href="{{ route('email.domains.index') }}" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-indigo-700 hover:text-indigo-800">
                            Go to domains
                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                        </a>
                    @elseif(($linkStatus['stage'] ?? '') === 'needs_mailbox')
                        <p class="mt-3 text-sm text-amber-800">Create a mailbox on your verified domain first.</p>
                        <a href="{{ route('email.mailboxes.create') }}" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-indigo-700 hover:text-indigo-800">
                            Create mailbox
                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
                        </a>
                    @elseif(count($mailboxOptions) > 0)
                        <form method="POST" action="{{ route('account.settings.mailbox-link') }}" class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-end">
                            @csrf @method('PUT')
                            <div class="min-w-0 flex-1">
                                <label for="mailbox_address" class="block text-[11px] font-medium text-slate-500">Choose mailbox</label>
                                <select id="mailbox_address" name="mailbox_address" required class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                                    <option value="" disabled @selected(! old('mailbox_address'))>Select a mailbox</option>
                                    @foreach($mailboxOptions as $mailbox)
                                        <option value="{{ $mailbox['address'] }}" @selected(old('mailbox_address') === $mailbox['address'])>{{ $mailbox['address'] }}</option>
                                    @endforeach
                                </select>
                                @error('mailbox_address')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                            </div>
                            <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Link mailbox</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <form method="POST" action="{{ route('account.settings.update') }}" class="mt-6 space-y-4">
        @csrf @method('PUT')

        <div class="rounded-2xl border border-slate-200 bg-white p-5">
            <h2 class="text-sm font-semibold text-slate-900">Mailbox defaults</h2>
            <div class="mt-4 grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="block text-[11px] font-medium text-slate-500">Default mailbox quota</label>
                    <select name="default_quota_mb" class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none">
                        @php $cur = (int) ($settings->default_quota_mb ?? config('email.default_quota_mb', 10240)); @endphp
                        @foreach([1024 => '1 GB', 5120 => '5 GB', 10240 => '10 GB', 25600 => '25 GB', 51200 => '50 GB'] as $mb => $label)
                            <option value="{{ $mb }}" @selected($cur === $mb)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-[11px] font-medium text-slate-500">Notifications email</label>
                    <input type="email" name="notify_email" value="{{ old('notify_email', $settings->notify_email ?? $account->email) }}"
                           class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 bg-white p-5">
            <label class="flex items-center justify-between">
                <span>
                    <span class="block text-sm font-medium text-slate-800">Product updates</span>
                    <span class="block text-xs text-slate-400">Occasional emails about new Ladill Email features.</span>
                </span>
                <input type="checkbox" name="product_updates" value="1" @checked($settings->product_updates ?? true) class="h-5 w-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
            </label>
        </div>

        <button class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700">Save settings</button>
    </form>
</div>
@endsection