@extends('layouts.app')

@section('title', 'Settings')

@section('content')
    @php
        $maxDay = $warmupSchedule->isNotEmpty() ? $warmupSchedule->max('day_number') : 1;
        $days = max(1, $maxDay);
        $remaining = max(0, $todaysCap - $todaysSent);
    @endphp

    <div class="page-head">
        <div>
            <h1>Settings</h1>
            <div class="subtitle">Control your daily sending schedule and delivery engine</div>
        </div>
    </div>

    <div class="grid grid-4" style="margin-bottom:22px;">
        <div class="stat-card">
            <div class="stat-accent accent-primary"></div>
            <div class="stat-label">Today's Cap</div>
            <div class="stat-value">{{ number_format($todaysCap) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-accent accent-ok"></div>
            <div class="stat-label">Sent Today</div>
            <div class="stat-value">{{ number_format($todaysSent) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-accent accent-warn"></div>
            <div class="stat-label">Remaining Today</div>
            <div class="stat-value">{{ number_format($remaining) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-accent accent-info"></div>
            <div class="stat-label">Warm-up Day</div>
            <div class="stat-value">{{ $currentDay }} <span style="font-size:1rem; color:var(--muted);">/ {{ $days }}</span></div>
        </div>
    </div>

    <form method="POST" action="{{ route('settings.update') }}">
        @csrf

        <div class="panel">
            <h2>Daily Sending Schedule</h2>
            <p class="muted" style="margin-top:-8px; font-size:.88rem;">
                Set the maximum emails allowed per day for each warm-up day. The schedule advances one step on each
                actual sending day. A single active day means that cap applies from day 1 (e.g. 5,000/day immediately).
            </p>
            <table>
                <thead>
                    <tr>
                        <th style="width:100px;">Day</th>
                        <th>Daily Cap (emails/day)</th>
                        <th style="width:110px; text-align:center;">Active</th>
                        <th style="width:60px;"></th>
                    </tr>
                </thead>
                <tbody id="warmup-rows">
                    @forelse ($warmupSchedule as $day)
                        <tr>
                            <td style="font-weight:600;">Day {{ $day->day_number }}</td>
                            <td>
                                <input type="number" name="warmup[{{ $day->day_number }}][daily_cap]"
                                       value="{{ $day->daily_cap }}" min="1" max="500000" required
                                       style="width:200px; margin-bottom:0;">
                                <input type="hidden" name="warmup[{{ $day->day_number }}][is_active]" value="0">
                            </td>
                            <td style="text-align:center;">
                                <input type="checkbox" name="warmup[{{ $day->day_number }}][is_active]" value="1" checked>
                            </td>
                            <td><a href="#" class="btn danger sm remove-day">✕</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="muted">No warm-up days configured yet.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" style="text-align:right; border-bottom:0;">
                            <button type="button" class="btn secondary sm" id="add-day">＋ Add Day</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="panel">
            <h2>Sending Engine</h2>
            <div class="grid grid-3">
                <div>
                    <label for="max_batch_size">Max batch size (per 2-min run)</label>
                    <input type="number" name="max_batch_size" id="max_batch_size" value="{{ $maxBatchSize }}" min="1" max="500" required>
                </div>
                <div>
                    <label for="min_batch_size">Min batch size (per 2-min run)</label>
                    <input type="number" name="min_batch_size" id="min_batch_size" value="{{ $minBatchSize }}" min="1" max="500" required>
                </div>
                <div>
                    <label for="steady_state_daily_cap">Steady-state cap (after schedule)</label>
                    <input type="number" name="steady_state_daily_cap" id="steady_state_daily_cap" value="{{ $steadyStateCap }}" min="1" max="500000" required>
                </div>
            </div>
        </div>

        <div class="panel">
            <h2>Volume Capacity</h2>
            <p class="muted" style="margin-top:-8px; font-size:.88rem;">
                With the 2-minute drip cadence there are <strong>720 dispatch slots per day</strong>.
                Here's what your batch ceiling can deliver.
            </p>
            <div class="grid grid-4">
                @foreach ([5000, 7500, 10000, 20000] as $target)
                    <div class="stat-card" style="box-shadow:none; border:1px solid var(--border);">
                        <div class="stat-accent accent-info"></div>
                        <div class="stat-label">{{ number_format($target) }} / day</div>
                        <div class="stat-value" style="font-size:1.15rem;">{{ number_format(ceil($target / max(1, $maxBatchSize))) }} runs</div>
                        <div class="stat-extra">at max batch {{ $maxBatchSize }}</div>
                    </div>
                @endforeach
            </div>
            <p class="muted" style="font-size:.82rem; margin-top:14px;">
                Theoretical ceiling at max batch {{ $maxBatchSize }}: {{ number_format(720 * max(1, $maxBatchSize)) }} emails/day.
                The relay's limits and your domain reputation (SPF/DKIM/DMARC) still apply.
            </p>
        </div>

        <div style="display:flex; gap:12px; margin-bottom:30px;">
            <button type="submit" class="btn">Save Settings</button>
            <a class="btn secondary" href="{{ route('dashboard') }}">Back to Dashboard</a>
        </div>
    </form>

    <script>
        document.getElementById('add-day').addEventListener('click', function () {
            var tbody = document.getElementById('warmup-rows');
            var rows = tbody.querySelectorAll('tr');
            var lastDay = 0;
            rows.forEach(function (row) {
                var dayCell = row.querySelector('td');
                if (dayCell) {
                    var m = (dayCell.textContent || '').match(/Day\s+(\d+)/);
                    if (m) { var d = parseInt(m[1], 10); if (d > lastDay) lastDay = d; }
                }
            });
            var next = lastDay + 1;
            var tr = document.createElement('tr');
            tr.innerHTML =
                '<td style="font-weight:600;">Day ' + next + '</td>' +
                '<td><input type="number" name="warmup[' + next + '][daily_cap]" value="' + next * 1000 + '" min="1" max="500000" required style="width:200px; margin-bottom:0;">' +
                '<input type="hidden" name="warmup[' + next + '][is_active]" value="0"></td>' +
                '<td style="text-align:center;"><input type="checkbox" name="warmup[' + next + '][is_active]" value="1" checked></td>' +
                '<td><a href="#" class="btn danger sm remove-day">✕</a></td>';
            tbody.appendChild(tr);
            bindRemove();
        });
        function bindRemove() {
            document.querySelectorAll('.remove-day').forEach(function (btn) {
                btn.removeEventListener('click', removeHandler);
                btn.addEventListener('click', removeHandler);
            });
        }
        function removeHandler(e) {
            e.preventDefault();
            e.target.closest('tr').remove();
        }
        bindRemove();
    </script>
@endsection