@extends('layouts.admin')
@section('title', $customer->exists ? 'Edit Customer' : 'New Customer')
@section('heading', $customer->exists ? 'Edit Customer' : 'New Customer')
@section('subheading', $customer->exists
    ? 'Update customer information and manage account details.'
    : 'Add a customer before issuing them a licence.')

{{-- Save and Cancel live in the top bar via the HTML form attribute, so they are
     reachable without scrolling past a long form. --}}
@section('header-actions')
    <a href="{{ route('customers.index') }}"
       class="hidden rounded-xl border border-slate-200 px-3.5 py-2 text-sm font-semibold text-slate-600
              transition hover:bg-slate-50 sm:inline-flex dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
        Cancel
    </a>
    <button type="submit" form="customer-form" data-save
            class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-brand-600 to-brand-500 px-4 py-2
                   text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg
                   disabled:pointer-events-none disabled:opacity-60">
        <x-icon name="save" class="size-4" />
        {{ $customer->exists ? 'Save Customer' : 'Create Customer' }}
    </button>
@endsection

@section('content')
    @php
        $max     = \App\Http\Requests\CustomerRequest::MAX;
        $license = $customer->exists ? $customer->currentLicense() : null;
        $lastSeen = $customer->exists ? $customer->lastVerificationAt() : null;
    @endphp

    <div class="mx-auto max-w-7xl" x-data="{
            dirty: false,
            saving: false,
            init() {
                // A half-typed edit is easy to lose to a stray click on the
                // sidebar. Warn rather than auto-save: a partial write to a live
                // customer record is worse than a lost draft.
                const form = this.$refs.form;
                form.addEventListener('input', () => { this.dirty = true; });
                form.addEventListener('submit', () => { this.dirty = false; this.saving = true; });
                window.addEventListener('beforeunload', (e) => {
                    if (! this.dirty) return;
                    e.preventDefault();
                    e.returnValue = '';
                });
            },
         }">

        <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">

            {{-- ── Form ────────────────────────────────────────────── --}}
            <form id="customer-form" x-ref="form" method="POST"
                  action="{{ $customer->exists ? route('customers.update', $customer) : route('customers.store') }}">
                @csrf
                @if ($customer->exists) @method('PUT') @endif

                <div class="surface overflow-hidden">
                    <div class="flex items-center gap-3 border-b border-slate-200 px-5 py-4 dark:border-slate-700/60">
                        <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600
                                     dark:bg-brand-500/10 dark:text-brand-400">
                            <x-icon name="users" class="size-5" />
                        </span>
                        <div class="min-w-0">
                            <h2 class="text-sm font-bold text-slate-900 dark:text-white">Customer Information</h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400">Fields marked with an asterisk are required.</p>
                        </div>
                    </div>

                    <div class="space-y-4 p-5">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <x-form-field name="company_name" label="Company Name" icon="package" required autofocus
                                          :value="$customer->company_name" :max="$max['company_name']" />

                            <x-form-field name="name" label="Contact Name" icon="users" required
                                          :value="$customer->name" :max="$max['name']" />

                            <x-form-field name="email" label="Email" type="email" icon="mail" required
                                          :value="$customer->email" :max="$max['email']"
                                          helper="Used to identify the customer; must be unique." />

                            <x-form-field name="mobile" label="Mobile" type="tel" icon="phone"
                                          :value="$customer->mobile" :max="$max['mobile']"
                                          placeholder="03001234567" />
                        </div>

                        <x-form-textarea name="address" label="Address" icon="map-pin" rows="3"
                                         :value="$customer->address" :max="$max['address']"
                                         placeholder="Enter complete address…" />

                        <x-form-textarea name="notes" label="Notes" icon="note" rows="4"
                                         :value="$customer->notes" :max="$max['notes']"
                                         placeholder="Anything worth remembering about this customer…" />
                    </div>

                    <div class="flex flex-wrap items-center gap-2.5 border-t border-slate-200 bg-slate-50/60 px-5 py-4
                                dark:border-slate-700/60 dark:bg-slate-800/40">
                        <button type="submit" :disabled="saving"
                                class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-brand-600 to-brand-500
                                       px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition
                                       hover:-translate-y-0.5 hover:shadow-lg disabled:pointer-events-none disabled:opacity-60">
                            <x-icon name="save" class="size-4" x-show="! saving" />
                            <svg x-show="saving" x-cloak class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity=".25" />
                                <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
                            </svg>
                            <span x-text="saving ? 'Saving…' : '{{ $customer->exists ? 'Save Customer' : 'Create Customer' }}'"></span>
                        </button>

                        <a href="{{ route('customers.index') }}"
                           class="inline-flex items-center gap-2 rounded-xl border border-slate-200 px-4 py-2.5 text-sm
                                  font-semibold text-slate-600 transition hover:bg-white
                                  dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                            <x-icon name="x" class="size-4" /> Cancel
                        </a>

                        <span x-show="dirty" x-cloak class="ml-auto flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400">
                            <span class="size-1.5 rounded-full bg-amber-500"></span> Unsaved changes
                        </span>
                    </div>
                </div>
            </form>

            {{-- ── Summary ─────────────────────────────────────────── --}}
            <aside class="space-y-4">
                @if ($customer->exists)
                    <div class="surface surface-hover overflow-hidden">
                        <div class="flex flex-col items-center gap-3 bg-gradient-to-b from-brand-50 to-transparent px-5 py-6
                                    dark:from-brand-500/10">
                            <x-avatar :initials="$customer->initials()" :seed="$customer->company_name"
                                      class="!size-16 !rounded-2xl !text-lg" />
                            <div class="min-w-0 text-center">
                                <h3 class="truncate text-base font-bold text-slate-900 dark:text-white">{{ $customer->company_name }}</h3>
                                <p class="truncate text-xs text-slate-500 dark:text-slate-400">{{ $customer->email }}</p>
                            </div>
                            <x-badge :status="$customer->licenseStatus()" />
                        </div>

                        <dl class="divide-y divide-slate-100 px-5 pb-4 dark:divide-slate-700/60">
                            {{-- Zero-padded from the real primary key: an identifier
                                 to quote on an invoice, not a new stored field. --}}
                            <x-info-row label="Customer ID" icon="shield"
                                        :value="'#CUS-' . str_pad((string) $customer->id, 6, '0', STR_PAD_LEFT)" />
                            <x-info-row label="Member Since" icon="calendar"
                                        :value="$customer->created_at?->format('d M Y') ?? '—'" />
                            <x-info-row label="Current Package" icon="package"
                                        :value="$customer->currentPackageName() ?: 'None'" />
                            <x-info-row label="Total Licences" icon="key" :value="$customer->licenses->count()" />
                            <x-info-row label="Active Licences" icon="check-circle" tone="ok"
                                        :value="$customer->licenses->filter(fn ($l) => $l->isUsable())->count()" />
                            <x-info-row label="Connected Domains" icon="globe" :value="$customer->domains->count()" />
                            <x-info-row label="Revenue" icon="currency" tone="ok"
                                        :value="'Rs ' . number_format($customer->revenue())" />
                            <x-info-row label="Last Verification" icon="activity"
                                        :value="$lastSeen?->diffForHumans() ?? 'Never'" />
                            <x-info-row label="Last Updated" icon="clock"
                                        :value="$customer->updated_at?->diffForHumans() ?? '—'" />
                        </dl>
                    </div>

                    {{-- Connected domains: real rows, or an honest empty line. --}}
                    <x-panel title="Connected Domains" :subtitle="$customer->domains->count() . ' registered'">
                        @forelse ($customer->domains as $domain)
                            <div class="flex items-center justify-between gap-3 border-b border-slate-100 py-2 last:border-0 dark:border-slate-700/60">
                                <span class="min-w-0">
                                    <span class="block truncate text-sm font-medium text-slate-800 dark:text-slate-100">{{ $domain->domain }}</span>
                                    <span class="block text-xs text-slate-500 dark:text-slate-400">
                                        {{ $domain->cms_version ? 'v'.$domain->cms_version : 'Version not reported' }}
                                    </span>
                                </span>
                                <span class="shrink-0 text-xs text-slate-500 dark:text-slate-400">
                                    {{ $domain->last_verification_at?->diffForHumans(short: true) ?? 'Never' }}
                                </span>
                            </div>
                        @empty
                            <p class="profile-empty">No installation has activated yet.</p>
                        @endforelse
                    </x-panel>

                    <x-panel title="Recent Activity" subtitle="Latest licence events">
                        @forelse ($activity as $log)
                            <div class="flex items-start justify-between gap-3 border-b border-slate-100 py-2 last:border-0 dark:border-slate-700/60">
                                <span class="min-w-0 text-xs">
                                    <span class="block truncate font-medium capitalize text-slate-700 dark:text-slate-200">
                                        {{ str_replace('_', ' ', $log->event) }}
                                    </span>
                                    @if ($log->domain)
                                        <span class="block truncate text-slate-500 dark:text-slate-400">{{ $log->domain }}</span>
                                    @endif
                                </span>
                                <span class="shrink-0 text-xs text-slate-500 dark:text-slate-400">
                                    {{ $log->created_at?->diffForHumans(short: true) }}
                                </span>
                            </div>
                        @empty
                            <p class="profile-empty">Nothing has happened on this account yet.</p>
                        @endforelse
                    </x-panel>
                @else
                    <div class="surface p-5 text-center">
                        <span class="mx-auto grid size-12 place-items-center rounded-2xl bg-brand-50 text-brand-600
                                     dark:bg-brand-500/10 dark:text-brand-400">
                            <x-icon name="plus-user" class="size-6" />
                        </span>
                        <h3 class="mt-3 text-sm font-bold text-slate-900 dark:text-white">New customer</h3>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            Licences, domains and activity appear here once this customer is saved and a licence is issued.
                        </p>
                    </div>
                @endif

                <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 p-4
                            dark:border-amber-500/30 dark:bg-amber-500/10">
                    <x-icon name="alert" class="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
                    <p class="text-xs leading-relaxed text-amber-800 dark:text-amber-300">
                        Please verify all customer information before saving. The email address identifies this
                        customer and must stay unique.
                    </p>
                </div>
            </aside>
        </div>
    </div>
@endsection