@extends('layouts.admin')

@section('title', $contract->exists ? 'Edit contract' : 'New contract')

@section('content')
<h1 class="mb-2 text-2xl font-bold text-brand">{{ $contract->exists ? 'Edit contract' : 'New contract' }}</h1>
<p class="mb-6 text-sm text-slate-600">Authorization Agreement — terms auto-fill from the template (same as legacy CCAF).</p>

<div
    x-data="contractForm(@js([
        'isEdit' => $contract->exists,
        'defaultTerms' => $defaultTerms ?? '',
        'orders' => $pickerOrders ?? [],
        'contract' => [
            'first_name' => old('first_name', $contract->first_name),
            'last_name' => old('last_name', $contract->last_name),
            'email' => old('email', $contract->email),
            'phone' => old('phone', $contract->phone),
            'address_line1' => old('address_line1', $contract->address_line1),
            'address_line2' => old('address_line2', $contract->address_line2),
            'city' => old('city', $contract->city),
            'state' => old('state', $contract->state),
            'country' => old('country', $contract->country),
            'zip' => old('zip', $contract->zip),
            'amount' => old('amount', $contract->amount ?? 0),
            'notes' => old('notes', $contract->notes),
            'terms' => old('terms', $contract->terms ?: ($defaultTerms ?? '')),
            'source' => old('source', $contract->source ?: 'new'),
            'payment_method' => old('payment_method', $contract->payment_method ?: 'Default'),
            'card_type' => old('card_type', $contract->card_type),
            'card_last_four' => old('card_last_four', $contract->card_last_four),
            'card_expiration' => old('card_expiration', $contract->card_expiration),
            'shopify_order_name' => old('shopify_order_name', $contract->shopify_order_name),
        ],
        'routes' => [
            'terms' => route('admin.api.terms'),
            'build' => route('admin.api.terms.build'),
            'syncOrders' => route('admin.api.shopify-orders.sync'),
        ],
        'csrf' => csrf_token(),
        'googleMapsKey' => config('ccaf.google_maps_api_key'),
        'googleMapsCountries' => config('ccaf.google_maps_countries', ['us', 'ca']),
    ]))"
    x-init="init()"
>
<form method="POST" action="{{ $contract->exists ? route('admin.contracts.update', $contract) : route('admin.contracts.store') }}" class="space-y-6" autocomplete="off">
    @csrf
    @if($contract->exists) @method('PUT') @endif

    @if(!$contract->exists)
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <label class="label">Select customer or type new name</label>
        <div class="flex flex-wrap items-end gap-3">
            <select class="input min-w-[280px] flex-1" x-model="selectedOrderKey" @change="onOrderChange()" :disabled="syncingOrders">
                <option value="">— New customer (manual) —</option>
                <template x-for="order in orders" :key="order.order_id">
                    <option :value="order.order_id" x-text="order.tira"></option>
                </template>
            </select>
            <button type="button" class="btn-secondary text-xs whitespace-nowrap" @click="syncOrders()" :disabled="syncingOrders">
                <span x-show="!syncingOrders">Refresh orders</span>
                <span x-show="syncingOrders">Syncing…</span>
            </button>
        </div>
        <p class="mt-2 text-xs text-slate-500" x-text="ordersMessage"></p>
    </div>
    @endif

    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="mb-4 text-lg font-semibold text-brand">Customer</h2>
        <div class="grid gap-4 md:grid-cols-2">
            <div><label class="label">First name</label><input class="input" name="first_name" x-model="form.first_name" @input="debouncedRefreshTerms()" required></div>
            <div><label class="label">Last name</label><input class="input" name="last_name" x-model="form.last_name" @input="debouncedRefreshTerms()" required></div>
            <div><label class="label">Email</label><input class="input" type="email" name="email" x-model="form.email"></div>
            <div><label class="label">Phone</label><input class="input" name="phone" x-model="form.phone"></div>
            <div class="md:col-span-2">
                <label class="label">Address</label>
                <input class="input" id="ship-address" name="address_line1" x-model="form.address_line1" autocomplete="off" placeholder="Start typing an address…">
            </div>
            <div class="md:col-span-2">
                <label class="label">Address 2</label>
                <input class="input" id="address2" name="address_line2" x-model="form.address_line2" autocomplete="off">
            </div>
            <div><label class="label">City</label><input class="input" id="locality" name="city" x-model="form.city" autocomplete="off"></div>
            <div><label class="label">State</label><input class="input" id="state" name="state" x-model="form.state" autocomplete="off"></div>
            <div><label class="label">Country</label><input class="input" id="country" name="country" x-model="form.country" autocomplete="off"></div>
            <div><label class="label">Zip</label><input class="input" id="postcode" name="zip" x-model="form.zip" autocomplete="off"></div>
            <div><label class="label">Amount</label><input class="input" type="number" step="0.01" name="amount" x-model="form.amount" @input="debouncedRefreshTerms()"></div>
            @if($contract->exists && $contract->shopify_order_name)
            <div><label class="label">Shopify order</label><input class="input bg-slate-50" value="#{{ $contract->shopify_order_name }}" readonly></div>
            @endif
        </div>
        <div class="mt-4"><label class="label">Notes</label><textarea class="input" rows="3" name="notes" x-model="form.notes"></textarea></div>
    </div>

    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-lg font-semibold text-brand">Terms</h2>
            <button type="button" class="btn-secondary text-xs" @click="refreshTerms()" :disabled="loadingTerms">
                <span x-show="!loadingTerms">Regenerate from template</span>
                <span x-show="loadingTerms">Updating…</span>
            </button>
        </div>
        <p class="mb-2 text-xs text-slate-500">Template from legacy CCAF (<code>terms</code> / <code>termsnc</code>). Placeholders are replaced automatically.</p>
        <textarea class="input terms_textarea font-mono text-sm leading-relaxed" rows="8" name="terms" id="terms" x-model="form.terms"></textarea>
    </div>

    <input type="hidden" name="source" x-model="form.source">
    <input type="hidden" name="payment_method" x-model="form.payment_method">
    <input type="hidden" name="card_type" x-model="form.card_type">
    <input type="hidden" name="card_last_four" x-model="form.card_last_four">
    <input type="hidden" name="card_expiration" x-model="form.card_expiration">
    <input type="hidden" name="shopify_order_name" x-model="form.shopify_order_name">

    <div class="flex flex-wrap gap-3">
        <button class="btn-primary" type="submit" name="send_via" value="">Save draft</button>
        <button class="btn-secondary" type="submit" name="send_via" value="Email">Save & email</button>
        <button class="btn-secondary" type="submit" name="send_via" value="SMS">Save & SMS</button>
        <a href="{{ route('admin.contracts.index') }}" class="btn-secondary">Cancel</a>
    </div>
    @if(!empty($ccafTestMode))
        <p class="text-sm text-amber-800">En modo test, email/SMS se envían a <strong>{{ $ccafTestEmail }}</strong> / <strong>{{ $ccafTestPhone ?: 'TWILIO_DEBUG_TO' }}</strong>, no al cliente del formulario.</p>
    @endif
</form>
</div>
@endsection

@push('scripts')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('contractForm', (config) => ({
        isEdit: config.isEdit,
        orders: config.orders || [],
        form: config.contract,
        routes: config.routes,
        csrf: config.csrf,
        googleMapsKey: config.googleMapsKey || '',
        googleMapsCountries: config.googleMapsCountries || ['us', 'ca'],
        selectedOrderKey: config.contract.shopify_order_name || '',
        loadingTerms: false,
        syncingOrders: false,
        ordersMessage: '',
        refreshTimer: null,

        async init() {
            if (!this.form.terms && config.defaultTerms) {
                this.form.terms = config.defaultTerms;
            }
            if (!this.isEdit) {
                if (this.orders.length === 0) {
                    await this.syncOrders(true);
                } else {
                    this.ordersMessage = `${this.orders.length} open order(s) ready (same format as legacy: 1028 / Name).`;
                }
            }
            if (!this.isEdit && this.selectedOrderKey === '') {
                this.form.source = 'new';
                this.form.payment_method = 'Default';
                this.refreshTerms();
            } else if (this.selectedOrderKey) {
                this.onOrderChange();
            }
            this.$nextTick(() => this.setupAddressAutocomplete());
        },

        setupAddressAutocomplete() {
            if (!this.googleMapsKey) {
                return;
            }

            const bindAutocomplete = () => {
                const address1Field = document.getElementById('ship-address');
                if (!address1Field || address1Field.dataset.placesBound === '1') {
                    return;
                }
                if (!window.google?.maps?.places) {
                    return;
                }

                address1Field.dataset.placesBound = '1';
                const autocomplete = new google.maps.places.Autocomplete(address1Field, {
                    componentRestrictions: { country: this.googleMapsCountries },
                    fields: ['address_components'],
                    types: ['address'],
                });

                autocomplete.addListener('place_changed', () => {
                    const place = autocomplete.getPlace();
                    if (!place?.address_components) {
                        return;
                    }

                    let address1 = '';
                    let postcode = '';
                    let city = '';
                    let state = '';
                    let country = '';

                    for (const component of place.address_components) {
                        const componentType = component.types[0];
                        switch (componentType) {
                            case 'street_number':
                                address1 = `${component.long_name} ${address1}`;
                                break;
                            case 'route':
                                address1 += component.short_name;
                                break;
                            case 'postal_code':
                                postcode = `${component.long_name}${postcode}`;
                                break;
                            case 'postal_code_suffix':
                                postcode = `${postcode}-${component.long_name}`;
                                break;
                            case 'locality':
                                city = component.long_name;
                                break;
                            case 'administrative_area_level_1':
                                state = component.short_name;
                                break;
                            case 'country':
                                country = component.long_name;
                                break;
                        }
                    }

                    this.form.address_line1 = address1.trim();
                    this.form.city = city;
                    this.form.state = state;
                    this.form.country = country;
                    this.form.zip = postcode;
                    document.getElementById('address2')?.focus();
                });
            };

            if (window.google?.maps?.places) {
                bindAutocomplete();
                return;
            }

            window.ccafPlacesCallbacks = window.ccafPlacesCallbacks || [];
            window.ccafPlacesCallbacks.push(bindAutocomplete);

            if (!window.ccafPlacesCallback) {
                window.ccafPlacesCallback = () => {
                    (window.ccafPlacesCallbacks || []).forEach((fn) => fn());
                };
            }

            if (document.getElementById('google-maps-script')) {
                return;
            }

            const script = document.createElement('script');
            script.id = 'google-maps-script';
            script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(this.googleMapsKey)}&callback=ccafPlacesCallback&libraries=places&v=weekly`;
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        },

        async syncOrders(showLoading = true) {
            if (showLoading) {
                this.syncingOrders = true;
                this.ordersMessage = 'Syncing open orders from Shopify…';
            }
            try {
                const res = await fetch(this.routes.syncOrders, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                    },
                });
                const data = await res.json();
                if (Array.isArray(data.orders)) {
                    this.orders = data.orders;
                }
                if (data.ok) {
                    this.ordersMessage = data.message || `${this.orders.length} order(s) available.`;
                } else {
                    this.ordersMessage = data.message || 'Could not sync Shopify orders. Check SHOPIFY_* credentials in .env.';
                }
            } catch (e) {
                console.error('Order sync failed', e);
                this.ordersMessage = this.orders.length
                    ? `${this.orders.length} order(s) loaded from cache. Sync failed — use Refresh orders.`
                    : 'Could not load Shopify orders. Check SHOPIFY_* credentials in .env.';
            } finally {
                this.syncingOrders = false;
            }
        },

        onOrderChange() {
            if (!this.selectedOrderKey) {
                this.form.source = 'new';
                this.form.payment_method = 'Default';
                this.form.shopify_order_name = '';
                this.fetchTemplate('Default').then(() => this.refreshTerms());
                return;
            }
            const order = this.orders.find(o => String(o.order_id) === String(this.selectedOrderKey));
            if (!order) return;
            this.applyOrder(order);
            this.fetchTemplate(order.payment_method).then(() => this.refreshTerms());
        },

        applyOrder(order) {
            this.form.source = 'site';
            this.form.shopify_order_name = order.order_name;
            this.form.first_name = order.first_name || '';
            this.form.last_name = order.last_name || '';
            this.form.email = order.email || '';
            this.form.phone = order.phone || '';
            this.form.address_line1 = order.address_line1 || '';
            this.form.address_line2 = order.address_line2 || '';
            this.form.city = order.city || '';
            this.form.state = order.state || '';
            this.form.country = order.country || '';
            this.form.zip = order.zip || '';
            this.form.amount = order.amount ?? order.total ?? 0;
            this.form.payment_method = order.payment_method || 'shopify_payments';
            this.form.card_type = order.card_type || 'N/A';
            this.form.card_last_four = order.card_last_four || 'N/A';
            this.form.card_expiration = order.card_expiration || 'N/A';
            if (order.payment_date) {
                this.form.payment_date = order.payment_date;
            }
        },

        async fetchTemplate(payment) {
            const res = await fetch(`${this.routes.terms}?payment=${encodeURIComponent(payment)}`, {
                headers: { 'Accept': 'application/json' },
            });
            const data = await res.json();
            this.form.terms = data.terms || this.form.terms;
        },

        debouncedRefreshTerms() {
            clearTimeout(this.refreshTimer);
            this.refreshTimer = setTimeout(() => this.refreshTerms(), 350);
        },

        async refreshTerms() {
            this.loadingTerms = true;
            try {
                const res = await fetch(this.routes.build, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                    },
                    body: JSON.stringify({
                        payment_method: this.form.payment_method || 'Default',
                        first_name: this.form.first_name,
                        last_name: this.form.last_name,
                        amount: this.form.amount,
                        card_type: this.form.card_type,
                        card_last_four: this.form.card_last_four,
                        card_expiration: this.form.card_expiration,
                        payment_date: this.form.payment_date || null,
                    }),
                });
                const data = await res.json();
                if (data.terms) {
                    this.form.terms = data.terms;
                }
            } catch (e) {
                console.error('Terms refresh failed', e);
            } finally {
                this.loadingTerms = false;
            }
        },
    }));
});
</script>
@endpush