@extends('layouts.app')

@section('title', 'Ad platforms – Setting')

@section('content')
@php
    $metaConnected = $meta->isConnected();
    $metaReady = $meta->hasAppCredentials();
    $metaOk = $metaConnected && $meta->last_verify_ok;
    $adAccounts = $meta->adAccounts();
@endphp
<div class="ads-page">
    <p class="ads-back"><a href="{{ route('setting.index') }}">← Setting</a></p>

    <header class="ads-header">
        <div>
            <h1>Ad platforms</h1>
            <p class="ads-subtitle">
                Connect advertising accounts here. Start with <strong>Meta Ads</strong> (Facebook &amp; Instagram campaigns).
                Google Ads and other platforms will use the same page.
            </p>
        </div>
    </header>

    @if(session('success') || session('verify_ok'))
        <div class="alert alert-success">{{ session('success') ?: session('verify_ok') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-error">{{ $errors->first() }}</div>
    @endif

    <section class="ads-card ads-card--meta">
        <div class="ads-card__head">
            <div class="ads-brand">
                <span class="ads-brand__mark ads-brand__mark--meta" aria-hidden="true">f</span>
                <div>
                    <h2>Meta Ads</h2>
                    <p>Facebook &amp; Instagram campaigns, budget, and insights.</p>
                </div>
            </div>
            @if($metaOk)
                <span class="ads-pill ads-pill--ok">Connected</span>
            @elseif($metaConnected)
                <span class="ads-pill ads-pill--warn">Needs verification</span>
            @elseif($metaReady)
                <span class="ads-pill ads-pill--ready">Ready to connect</span>
            @else
                <span class="ads-pill">Not set up</span>
            @endif
        </div>

        <div class="ads-card__body">
            @if($metaConnected)
                <div class="ads-status">
                    <div class="ads-status__row">
                        <span class="ads-status__label">Signed in as</span>
                        <span class="ads-status__value">{{ $meta->connected_as_name ?: 'Meta account' }}</span>
                    </div>
                    @if($meta->ad_account_name || $meta->ad_account_id)
                        <div class="ads-status__row">
                            <span class="ads-status__label">Ad account</span>
                            <span class="ads-status__value">
                                {{ $meta->ad_account_name ?: 'Selected account' }}
                                @if($meta->ad_account_id)
                                    <code>{{ $meta->ad_account_id }}</code>
                                @endif
                            </span>
                        </div>
                    @endif
                    @if($meta->connected_at)
                        <div class="ads-status__row">
                            <span class="ads-status__label">Connected</span>
                            <span class="ads-status__value">{{ $meta->connected_at->timezone(config('app.timezone'))->format('M j, Y g:i A') }}</span>
                        </div>
                    @endif
                    @if($meta->last_verified_at)
                        <div class="ads-status__row">
                            <span class="ads-status__label">Last check</span>
                            <span class="ads-status__value {{ $meta->last_verify_ok ? 'ads-status__value--ok' : 'ads-status__value--bad' }}">
                                {{ $meta->last_verify_ok ? '✓' : '✗' }}
                                {{ $meta->last_verify_message }}
                                <span class="ads-status__when">({{ $meta->last_verified_at->diffForHumans() }})</span>
                            </span>
                        </div>
                    @endif
                    @if($meta->maskedAccessToken())
                        <div class="ads-status__row">
                            <span class="ads-status__label">Token</span>
                            <span class="ads-status__value">
                                <code>{{ $meta->maskedAccessToken() }}</code>
                                @if($meta->token_expires_at)
                                    · expires {{ $meta->token_expires_at->diffForHumans() }}
                                @else
                                    · does not expire
                                @endif
                            </span>
                        </div>
                    @endif
                </div>
            @endif

            <form action="{{ route('setting.ad-platforms.meta.update') }}" method="POST" class="ads-form">
                @csrf
                <h3 class="ads-form__title">App credentials</h3>
                <p class="ads-form__hint">From Meta for Developers → <strong>Avi Jewels Ads</strong>. Stored here, not in chat. Leave App Secret blank to keep the current one.</p>
                <div class="ads-grid">
                    <label class="ads-field">
                        <span>App ID</span>
                        <input type="text" name="app_id" value="{{ old('app_id', $meta->resolvedAppId()) }}" placeholder="1058…" autocomplete="off" required>
                    </label>
                    <label class="ads-field">
                        <span>Configuration ID</span>
                        <input type="text" name="config_id" value="{{ old('config_id', $meta->resolvedConfigId()) }}" placeholder="Avi Ads Connect ID" autocomplete="off" required>
                    </label>
                    <label class="ads-field ads-field--full">
                        <span>App Secret</span>
                        <input type="password" name="app_secret" value="" placeholder="{{ $meta->resolvedAppSecret() !== '' ? 'Current: '.$meta->maskedAppSecret().' — leave blank to keep' : 'Paste App Secret from Basic settings' }}" autocomplete="new-password">
                    </label>
                </div>
                <div class="ads-callback">
                    <span>Copy this into Meta → Facebook Login for Business → Settings → <strong>Valid OAuth Redirect URIs</strong>, then Save changes. App domains must be only <code>tools.avijewels.info</code> (no https).</span>
                    <code>{{ $callbackUrl }}</code>
                </div>
                <div class="ads-actions">
                    <button type="submit" class="btn btn-secondary">Save credentials</button>
                </div>
            </form>

            <div class="ads-actions ads-actions--row">
                <form action="{{ route('setting.ad-platforms.meta.connect') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn ads-btn-meta" @if(! $metaReady) disabled @endif>
                        {{ $metaConnected ? 'Reconnect with Facebook' : 'Connect with Facebook' }}
                    </button>
                </form>
                @if($metaConnected)
                    <form action="{{ route('setting.ad-platforms.meta.verify') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-primary">Verify connection</button>
                    </form>
                    <form action="{{ route('setting.ad-platforms.meta.disconnect') }}" method="POST" onsubmit="return confirm('Disconnect Meta Ads? Campaigns will no longer be readable from Tools until you connect again.');">
                        @csrf
                        <button type="submit" class="btn btn-danger">Disconnect</button>
                    </form>
                    <a href="{{ route('ads.index') }}" class="btn btn-secondary">Open Ad Manager</a>
                @endif
            </div>
            @if(! $metaReady)
                <p class="ads-note">Save App ID, App Secret, and Configuration ID before Connect with Facebook is enabled.</p>
            @endif

            @if($metaConnected && count($adAccounts) > 1)
                <form action="{{ route('setting.ad-platforms.meta.account') }}" method="POST" class="ads-form ads-form--account">
                    @csrf
                    <h3 class="ads-form__title">Active ad account</h3>
                    <p class="ads-form__hint">Facebook granted more than one account. Pick the Ads Manager account to control.</p>
                    <label class="ads-field">
                        <span>Ad account</span>
                        <select name="ad_account_id" required>
                            @foreach($adAccounts as $account)
                                @php
                                    $actId = $account['id'] !== '' ? $account['id'] : 'act_'.$account['account_id'];
                                @endphp
                                <option value="{{ $actId }}" @selected($meta->selectedAdAccountActId() === $actId)>
                                    {{ $account['name'] }} ({{ $actId }})
                                </option>
                            @endforeach
                        </select>
                    </label>
                    <div class="ads-actions">
                        <button type="submit" class="btn btn-primary">Use this account</button>
                    </div>
                </form>
            @endif
        </div>
    </section>

    <section class="ads-card ads-card--report">
        <div class="ads-card__head">
            <div class="ads-brand">
                <span class="ads-brand__mark ads-brand__mark--report" aria-hidden="true">@</span>
                <div>
                    <h2>Daily performance report</h2>
                    <p>Short email of every active Meta campaign. Read-only.</p>
                </div>
            </div>
            @if($meta->dailyReportEnabled())
                <span class="ads-pill ads-pill--ok">Scheduled</span>
            @else
                <span class="ads-pill">Off</span>
            @endif
        </div>
        <div class="ads-card__body">
            <p class="ads-form__hint">
                Compares the last 3 complete days vs the 3 before, and the last 14 complete days vs the 14 before.
                Today is excluded. Tools will not pause campaigns or change budgets.
                One email per day at 10:00 AM America/New_York (Miami). Off by default until you turn it on.
            </p>
            <form action="{{ route('setting.ad-platforms.meta.daily-report.update') }}" method="POST" class="ads-form">
                @csrf
                <label class="ads-check">
                    <input type="hidden" name="daily_report_enabled" value="0">
                    <input type="checkbox" name="daily_report_enabled" value="1" @checked(old('daily_report_enabled', $meta->dailyReportEnabled()))>
                    <span>Send this report every day</span>
                </label>
                <div class="ads-grid">
                    <label class="ads-field ads-field--full">
                        <span>Recipient email</span>
                        <input type="email" name="daily_report_email" value="{{ old('daily_report_email', $meta->dailyReportEmail()) }}" required autocomplete="email">
                    </label>
                    <label class="ads-field">
                        <span>Send time (America/New_York)</span>
                        <input type="time" name="daily_report_send_time" value="{{ old('daily_report_send_time', $meta->dailyReportSendTime()) }}" required>
                    </label>
                </div>
                <div class="ads-actions ads-actions--row">
                    <button type="submit" class="btn btn-primary">Save report settings</button>
                </div>
            </form>
            <form action="{{ route('setting.ad-platforms.meta.daily-report.test') }}" method="POST" class="ads-form" onsubmit="return confirm('Send a test report now? Nothing will change in Meta.');">
                @csrf
                <input type="hidden" name="daily_report_email" value="{{ old('daily_report_email', $meta->dailyReportEmail()) }}">
                <div class="ads-actions ads-actions--row">
                    <button type="submit" class="btn btn-secondary">Send test</button>
                </div>
                <p class="ads-form__hint" style="margin-top:0.65rem;">
                    Send test works even while the daily report is off. It uses the saved address.
                    @if(! $metaConnected)
                        Connect Meta Ads first or the test will fail.
                    @endif
                </p>
            </form>
        </div>
    </section>

    <section class="ads-card ads-card--list">
        <div class="ads-card__head">
            <div class="ads-brand">
                <span class="ads-brand__mark ads-brand__mark--meta" aria-hidden="true">f</span>
                <div>
                    <h2>AVI Customers – Auto Sync</h2>
                    <p>Add every Shopify, Payment Link, and Layaway/Story contact with a real email or phone to customer list <code>{{ $customerListAudienceId }}</code> on <code>act_673640625594279</code>. Merges duplicates. Never Replace or Remove. Does not touch the pixel or Story website audiences.</p>
                </div>
            </div>
        </div>
        <div class="ads-card__body">
            @if($customerListRun)
                <div class="ads-status">
                    <div class="ads-status__row">
                        <span class="ads-status__label">Last sync</span>
                        <span class="ads-status__value">
                            {{ $customerListRun->finished_at?->timezone(config('app.timezone'))->format('M j, Y g:i A') ?: '—' }}
                        </span>
                    </div>
                    <div class="ads-status__row">
                        <span class="ads-status__label">Read / sent / skipped / errors</span>
                        <span class="ads-status__value">
                            {{ $customerListRun->read_count }} / {{ $customerListRun->sent_count }} / {{ $customerListRun->skipped_count }} / {{ $customerListRun->error_count }}
                        </span>
                    </div>
                    @if($customerListRun->error_message)
                        <div class="ads-status__row">
                            <span class="ads-status__label">Note</span>
                            <span class="ads-status__value ads-status__value--bad">{{ $customerListRun->error_message }}</span>
                        </div>
                    @endif
                </div>
            @else
                <p class="ads-form__hint">No sync yet. Use Sync now after deploy. A daily job also runs at 5:30 AM America/New_York.</p>
            @endif
            <form action="{{ route('setting.ad-platforms.meta.customer-list-sync') }}" method="POST" class="ads-form" onsubmit="return confirm('Add Shopify, Payment Link, and Layaway/Story contacts to AVI Customers – Auto Sync? This does not replace or remove anyone and does not touch the pixel.');">
                @csrf
                <div class="ads-actions ads-actions--row">
                    <button type="submit" class="btn btn-primary" @if(! $metaConnected) disabled @endif>Sync now</button>
                </div>
                @if(! $metaConnected)
                    <p class="ads-form__hint" style="margin-top:0.65rem;">Connect Meta Ads first.</p>
                @endif
            </form>
        </div>
    </section>

    <section class="ads-card ads-card--merchant">
        <div class="ads-card__head">
            <div class="ads-brand">
                <span class="ads-brand__mark ads-brand__mark--google" aria-hidden="true">G</span>
                <div>
                    <h2>Google Merchant supplemental feed</h2>
                    <p>Regenerate the CSV Google Shopping fetches. Same URL every time.</p>
                </div>
            </div>
            @if(!empty($merchantFeedExists))
                <span class="ads-pill ads-pill--ok">Ready</span>
            @else
                <span class="ads-pill ads-pill--warn">Not generated</span>
            @endif
        </div>
        <div class="ads-card__body">
            <p class="ads-form__hint" style="margin-top:0;">
                Use this after you add or change products when you do not want to wait for the Sunday backup run.
                Does not change Shopify. After it finishes, press <strong>Update</strong> in Merchant Center if you need Google to fetch right away.
            </p>
            <p class="ads-form__hint">
                Feed URL:
                <a href="{{ $merchantFeedUrl }}" target="_blank" rel="noopener">{{ $merchantFeedUrl }}</a>
            </p>
            <p class="ads-form__hint">
                @if(!empty($merchantFeedExists) && !empty($merchantFeedGeneratedAt))
                    Last generated {{ $merchantFeedGeneratedAt }} (server time).
                @else
                    No file yet — generate once below.
                @endif
                Weekly backup: Sunday 3:30 a.m. America/New_York.
            </p>
            <form action="{{ route('setting.ad-platforms.merchant-supplemental-feed') }}" method="POST" class="ads-form" onsubmit="return confirm('Regenerate the Merchant supplemental feed now? This can take a few minutes. Shopify will not be changed.');">
                @csrf
                <button type="submit" class="btn btn-primary">Generate Merchant feed now</button>
            </form>
        </div>
    </section>

    <section class="ads-card ads-card--soon">
        <div class="ads-card__head">
            <div class="ads-brand">
                <span class="ads-brand__mark ads-brand__mark--google" aria-hidden="true">G</span>
                <div>
                    <h2>Google Ads</h2>
                    <p>Search and YouTube campaigns.</p>
                </div>
            </div>
            <span class="ads-pill">Coming soon</span>
        </div>
        <div class="ads-card__body">
            <p class="ads-soon-copy">Same layout as Meta: credentials, Connect, and Verify. Not available yet.</p>
            <button type="button" class="btn btn-secondary" disabled>Connect Google Ads</button>
        </div>
    </section>
</div>

@push('styles')
<style>
.ads-page { max-width: 760px; }
.ads-back { margin: 0 0 1rem; }
.ads-back a { color: #4b5563; text-decoration: none; font-size: 0.9rem; }
.ads-back a:hover { color: #111; text-decoration: underline; }
.ads-header { margin-bottom: 1.35rem; }
.ads-header h1 { margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 700; color: #111; }
.ads-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.ads-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ads-card--meta { border-top: 3px solid #1877f2; }
.ads-card--report { border-top: 3px solid #0f766e; }
.ads-card--merchant { border-top: 3px solid #ea4335; }
.ads-card--soon { border-top: 3px solid #e5e7eb; opacity: 0.92; }
.ads-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem 0.85rem;
}
.ads-card__body { padding: 0 1.35rem 1.35rem; }
.ads-brand { display: flex; gap: 0.85rem; align-items: flex-start; }
.ads-brand h2 { margin: 0 0 0.15rem; font-size: 1.15rem; font-weight: 700; color: #0f172a; }
.ads-brand p { margin: 0; font-size: 0.85rem; color: #64748b; }
.ads-brand__mark {
    width: 2.25rem; height: 2.25rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; color: #fff; flex-shrink: 0;
}
.ads-brand__mark--meta { background: #1877f2; }
.ads-brand__mark--report { background: #0f766e; }
.ads-brand__mark--google { background: #4285f4; }
.ads-check { display:flex; align-items:center; gap:0.55rem; font-size:0.9rem; font-weight:600; color:#0f172a; margin:0 0 0.9rem; }
.ads-check input { width:1rem; height:1rem; }
.ads-pill {
    display: inline-flex; align-items: center;
    padding: 0.22rem 0.65rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    background: #f1f5f9; color: #64748b; white-space: nowrap;
}
.ads-pill--ok { background: #d1fae5; color: #047857; }
.ads-pill--warn { background: #fef3c7; color: #b45309; }
.ads-pill--ready { background: #dbeafe; color: #1d4ed8; }
.ads-status {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.15rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.ads-status__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; align-items: start; }
.ads-status__label { font-size: 0.75rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 0.1rem; }
.ads-status__value { font-size: 0.9rem; color: #0f172a; }
.ads-status__value code { font-size: 0.78rem; background: #e2e8f0; padding: 0.1rem 0.35rem; border-radius: 4px; }
.ads-status__value--ok { color: #047857; font-weight: 600; }
.ads-status__value--bad { color: #b91c1c; font-weight: 600; }
.ads-status__when { display: block; font-weight: 500; color: #64748b; margin-top: 0.15rem; }
.ads-form { margin-top: 0.25rem; }
.ads-form__title { margin: 0 0 0.25rem; font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.ads-form__hint { margin: 0 0 0.85rem; font-size: 0.8rem; color: #64748b; line-height: 1.45; }
.ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ads-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: #374151; }
.ads-field--full { grid-column: 1 / -1; }
.ads-field input, .ads-field select {
    font: inherit; font-weight: 500; font-size: 0.95rem;
    padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
}
.ads-field input:focus, .ads-field select:focus { outline: none; border-color: #1877f2; box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15); }
.ads-callback {
    margin-top: 0.85rem; padding: 0.7rem 0.8rem; background: #f8fafc; border-radius: 8px;
    font-size: 0.78rem; color: #64748b;
}
.ads-callback code { display: block; margin-top: 0.25rem; color: #0f172a; word-break: break-all; font-size: 0.8rem; }
.ads-actions { margin-top: 1rem; }
.ads-actions--row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.ads-btn-meta { background: #1877f2; color: #fff; }
.ads-btn-meta:hover { background: #166fe5; color: #fff; }
.ads-note { margin: 0.65rem 0 0; font-size: 0.8rem; color: #b45309; }
.ads-form--account { margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px solid #e5e7eb; }
.ads-soon-copy { margin: 0 0 0.85rem; font-size: 0.88rem; color: #64748b; }
@media (max-width: 640px) {
    .ads-grid { grid-template-columns: 1fr; }
    .ads-status__row { grid-template-columns: 1fr; gap: 0.15rem; }
    .ads-card__head { flex-direction: column; }
}
</style>
@endpush
@endsection