@extends('layouts.admin')

@php
    $label = fn (string $group, ?string $value): string => $value === null
        ? ''
        : (trans()->has("scheduling.{$group}.{$value}") ? __("scheduling.{$group}.{$value}") : (string) str($value)->headline());
@endphp

@section('title', __('scheduling.title'))
@section('content')
<x-admin.page-header :title="__('scheduling.title')" :description="__('scheduling.description')" :eyebrow="__('scheduling.eyebrow')">
    @if($canManage)
        <x-slot:actions>
            <a class="button" href="#new-booking">{{ __('scheduling.actions.booking') }}</a>
        </x-slot:actions>
    @endif
</x-admin.page-header>

{{-- 1. KPI Summary Cards --}}
<div class="stat-grid" aria-label="Meeting Overview" style="margin-bottom: 1.5rem;">
    <div class="stat-card">
        <span>{{ app()->isLocale('ar') ? 'إجمالي المواعيد' : 'Total Meetings' }}</span>
        <strong>{{ number_format($meetings->total()) }}</strong>
    </div>
    <div class="stat-card">
        <span>{{ app()->isLocale('ar') ? 'المواعيد المؤكدة/القادمة' : 'Scheduled' }}</span>
        <strong>{{ $meetings->where('status.value', 'scheduled')->count() }}</strong>
    </div>
    <div class="stat-card">
        <span>{{ app()->isLocale('ar') ? 'أنواع الاجتماعات' : 'Meeting Types' }}</span>
        <strong>{{ $types->count() }}</strong>
    </div>
    <div class="stat-card">
        <span>{{ app()->isLocale('ar') ? 'المسؤولون النشطون' : 'Active Assignees' }}</span>
        <strong>{{ $assignees->where('is_active', true)->count() }}</strong>
    </div>
</div>

{{-- 2. Meetings Filter & List --}}
<section class="panel form-stack">
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
        <div>
            <p class="eyebrow">{{ __('scheduling.dashboard') }}</p>
            <h2 style="margin: 0;">{{ __('scheduling.heading') }}</h2>
        </div>
    </div>

    <form class="filter-panel" method="GET" style="margin-top: 0.5rem;">
        <div class="filter-grid">
            <div class="field">
                <label for="from">{{ __('scheduling.fields.from') }}</label>
                <input id="from" name="from" type="date" value="{{ request('from') }}">
            </div>
            <div class="field">
                <label for="until">{{ __('scheduling.fields.until') }}</label>
                <input id="until" name="until" type="date" value="{{ request('until') }}">
            </div>
            <div class="field">
                <label for="status">{{ __('scheduling.fields.status') }}</label>
                <select id="status" name="status">
                    <option value="">{{ __('scheduling.all') }}</option>
                    @foreach(['scheduled','completed','cancelled','no_show'] as $v)
                        <option value="{{ $v }}" @selected(request('status')===$v)>{{ $label('statuses', $v) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label for="confirmation_status">{{ __('scheduling.fields.confirmation') }}</label>
                <select id="confirmation_status" name="confirmation_status">
                    <option value="">{{ __('scheduling.all') }}</option>
                    @foreach(['pending','queued','confirmed','declined'] as $v)
                        <option value="{{ $v }}" @selected(request('confirmation_status')===$v)>{{ $label('confirmations', $v) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label for="assignee">{{ __('scheduling.fields.assignee') }}</label>
                <select id="assignee" name="assignee">
                    <option value="">{{ __('scheduling.all') }}</option>
                    @foreach($assignees as $a)
                        <option value="{{ $a->id }}" @selected(request('assignee')==$a->id)>{{ $a->display_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label for="meeting_type">{{ __('scheduling.fields.meeting_type') }}</label>
                <select id="meeting_type" name="meeting_type">
                    <option value="">{{ __('scheduling.all') }}</option>
                    @foreach($types as $t)
                        <option value="{{ $t->id }}" @selected(request('meeting_type')==$t->id)>{{ $t->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="filter-actions" style="margin-top: 1rem; display: flex; gap: 0.75rem;">
            <a class="button button-secondary" href="{{ route('admin.meetings.index') }}">{{ app()->isLocale('ar') ? 'إعادة ضبط' : 'Reset' }}</a>
            <button class="button" type="submit">{{ __('scheduling.apply_filters') }}</button>
        </div>
    </form>

    <div class="table-wrap" style="margin-top: 1rem;">
        <table>
            <thead>
                <tr>
                    <th>{{ __('scheduling.fields.when') }}</th>
                    <th>{{ __('scheduling.fields.customer') }}</th>
                    <th>{{ __('scheduling.fields.type') }}</th>
                    <th>{{ __('scheduling.fields.assignee') }}</th>
                    <th>{{ __('scheduling.fields.state') }}</th>
                    @if($canManage)<th>{{ __('scheduling.fields.workflow') }}</th>@endif
                </tr>
            </thead>
            <tbody>
                @forelse($meetings as $meeting)
                    <tr>
                        <td>
                            <strong style="color: var(--text);">{{ $meeting->scheduled_start_at->format('Y-m-d H:i') }} UTC</strong><br>
                            <span class="muted" style="font-size: 0.8rem;">{{ $meeting->scheduled_start_at->setTimezone($meeting->customer_timezone)->format('Y-m-d H:i') }} ({{ $meeting->customer_timezone }})</span>
                        </td>
                        <td>
                            <strong>{{ $meeting->customer_name }}</strong><br>
                            <a href="mailto:{{ $meeting->customer_email }}" style="color: var(--primary); font-size: 0.85rem;">{{ $meeting->customer_email }}</a>
                        </td>
                        <td>
                            <span class="badge badge-neutral">{{ $meeting->type->name }}</span>
                        </td>
                        <td>
                            <strong>{{ $meeting->assignee_name_snapshot }}</strong><br>
                            <span class="badge {{ $meeting->assignee_kind->value === 'human' ? 'badge-primary' : 'badge-neutral' }}" style="font-size: 0.75rem;">
                                {{ $label('kinds', $meeting->assignee_kind->value) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {{ $meeting->status->value === 'scheduled' ? 'badge-success' : ($meeting->status->value === 'completed' ? 'badge-primary' : 'badge-danger') }}">
                                {{ $label('statuses', $meeting->status->value) }}
                            </span><br>
                            <span class="muted" style="font-size: 0.8rem;">{{ $label('confirmations', $meeting->confirmation_status) }}</span>
                        </td>
                        @if($canManage)
                            <td>
                                <div style="display: flex; flex-direction: column; gap: 0.4rem; min-width: 140px;">
                                    @if($meeting->status->value==='scheduled')
                                        <details style="background: var(--surface-soft); border-radius: 0.5rem; padding: 0.4rem;">
                                            <summary style="cursor: pointer; font-size: 0.825rem; font-weight: 600; color: var(--primary);">{{ __('scheduling.actions.reschedule') }}</summary>
                                            <form class="form-stack" method="POST" action="{{ route('admin.meetings.reschedule',$meeting) }}" style="margin-top: 0.5rem;">
                                                @csrf @method('PUT')
                                                <input type="hidden" name="lock_version" value="{{ $meeting->lock_version }}">
                                                <select name="schedulable_assignee_id" aria-label="{{ __('scheduling.fields.new_assignee') }}" style="font-size: 0.8rem;">
                                                    @foreach($assignees->where('is_active',true) as $a)
                                                        <option value="{{ $a->id }}" @selected($a->id===$meeting->schedulable_assignee_id)>{{ $a->display_name }}</option>
                                                    @endforeach
                                                </select>
                                                <select name="timezone" aria-label="{{ __('scheduling.fields.customer_timezone') }}" style="font-size: 0.8rem;">
                                                    @foreach($timezones as $zone)
                                                        <option value="{{ $zone }}" @selected($zone===$meeting->customer_timezone)>{{ $zone }}</option>
                                                    @endforeach
                                                </select>
                                                <input type="datetime-local" name="local_start" required aria-label="{{ __('scheduling.fields.new_local_start') }}" style="font-size: 0.8rem;">
                                                <input name="reason" maxlength="500" placeholder="{{ __('scheduling.fields.reason') }}" style="font-size: 0.8rem;">
                                                <button class="button button-secondary" style="width: 100%; font-size: 0.8rem; padding: 0.35rem;">{{ __('scheduling.actions.move') }}</button>
                                            </form>
                                        </details>
                                        <form method="POST" action="{{ route('admin.meetings.cancel',$meeting) }}" onsubmit="return confirm('{{ app()->isLocale('ar') ? 'هل أنت متأكد من إلغاء الموعد؟' : 'Are you sure you want to cancel this meeting?' }}')">
                                            @csrf @method('PUT')
                                            <input type="hidden" name="lock_version" value="{{ $meeting->lock_version }}">
                                            <button class="button button-danger" style="width: 100%; font-size: 0.8rem; padding: 0.35rem;">{{ __('scheduling.actions.cancel') }}</button>
                                        </form>
                                    @endif
                                    <form method="POST" action="{{ route('admin.meetings.state',$meeting) }}" style="display: flex; gap: 0.25rem;">
                                        @csrf @method('PUT')
                                        <input type="hidden" name="lock_version" value="{{ $meeting->lock_version }}">
                                        @if($meeting->status->value==='scheduled')
                                            <select name="status" aria-label="{{ __('scheduling.fields.meeting_status') }}" style="font-size: 0.75rem; padding: 0.25rem;">
                                                <option value="">{{ __('scheduling.actions.keep_status') }}</option>
                                                <option value="completed">{{ __('scheduling.statuses.completed') }}</option>
                                                <option value="no_show">{{ __('scheduling.statuses.no_show') }}</option>
                                            </select>
                                        @endif
                                        <select name="confirmation_status" aria-label="{{ __('scheduling.fields.confirmation_state') }}" style="font-size: 0.75rem; padding: 0.25rem;">
                                            <option value="">{{ __('scheduling.actions.keep_confirmation') }}</option>
                                            <option value="confirmed">{{ __('scheduling.confirmations.confirmed') }}</option>
                                            <option value="declined">{{ __('scheduling.confirmations.declined') }}</option>
                                        </select>
                                        <button class="button button-secondary" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;" title="{{ __('scheduling.actions.update_state') }}">✓</button>
                                    </form>
                                </div>
                            </td>
                        @endif
                    </tr>
                @empty
                    <tr><td colspan="6"><div class="empty-state">{{ __('scheduling.empty') }}</div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div style="margin-top: 1rem;">
        {{ $meetings->links() }}
    </div>
</section>

@if($canManage)
    {{-- 3. Create New Booking Card --}}
    <section class="panel form-stack" id="new-booking" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
        <div style="border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
            <p class="eyebrow">{{ __('scheduling.actions.booking') }}</p>
            <h2 style="margin: 0;">{{ __('scheduling.actions.create_booking_heading') }}</h2>
        </div>
        <form class="form-grid" method="POST" action="{{ route('admin.meetings.store') }}">
            @csrf
            <div class="field">
                <label>{{ __('scheduling.fields.type') }}</label>
                <select name="meeting_type_id">
                    @foreach($types->where('is_active',true) as $t)
                        <option value="{{ $t->id }}">{{ $t->name }} · {{ $t->duration_minutes }} {{ __('scheduling.minutes_short') }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>{{ __('scheduling.fields.assignee') }}</label>
                <select name="schedulable_assignee_id">
                    @foreach($assignees->where('is_active',true) as $a)
                        <option value="{{ $a->id }}">{{ $a->display_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>{{ __('scheduling.fields.customer_name') }}</label>
                <input name="customer_name" required maxlength="160" placeholder="اسم العميل">
            </div>
            <div class="field">
                <label>{{ __('scheduling.fields.customer_email') }}</label>
                <input name="customer_email" type="email" required placeholder="client@example.com">
            </div>
            <div class="field">
                <label>{{ __('scheduling.fields.timezone') }}</label>
                <select name="timezone">
                    @foreach($timezones as $zone)
                        <option value="{{ $zone }}" @selected($zone==='Africa/Cairo')>{{ $zone }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>{{ __('scheduling.fields.local_start') }}</label>
                <input name="local_start" type="datetime-local" required>
            </div>
            <div class="field full">
                <label>{{ __('scheduling.fields.notes') }}</label>
                <textarea name="notes" rows="3" maxlength="2000" placeholder="ملاحظات الموعد أو متطلبات العميل..."></textarea>
            </div>
            <div class="form-actions full">
                <button class="button" style="min-width: 12rem;">{{ __('scheduling.actions.create_booking') }}</button>
            </div>
        </form>
    </section>

    {{-- 4. Setup Meeting Types & Assignees --}}
    <section class="duo-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;">
        <article class="panel form-stack" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
            <div style="border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
                <h2 style="margin: 0; font-size: 1.15rem;">{{ __('scheduling.actions.add_meeting_type') }}</h2>
            </div>
            <form class="form-grid" method="POST" action="{{ route('admin.meeting-types.store') }}">
                @csrf
                <div class="field">
                    <label for="new_type_name">{{ __('scheduling.fields.name') }}</label>
                    <input id="new_type_name" name="name" placeholder="استشارة تقنية" required>
                </div>
                <div class="field">
                    <label for="new_type_slug">Slug</label>
                    <input id="new_type_slug" name="slug" placeholder="tech-consultation" required>
                </div>
                <div class="field">
                    <label for="new_type_duration">{{ __('scheduling.fields.duration_minutes') ?? 'المدة (بالدقائق)' }}</label>
                    <input id="new_type_duration" name="duration_minutes" type="number" min="5" max="480" value="30" required>
                </div>
                <div class="field">
                    <label for="new_type_channel">{{ __('scheduling.fields.channel') ?? 'القناة' }}</label>
                    <select id="new_type_channel" name="channel">
                        <option value="online">{{ __('scheduling.channels.online') }}</option>
                        <option value="phone">{{ __('scheduling.channels.phone') }}</option>
                        <option value="in_person">{{ __('scheduling.channels.in_person') }}</option>
                    </select>
                </div>
                <div class="field full">
                    <label for="new_type_location">{{ __('scheduling.fields.location') }}</label>
                    <input id="new_type_location" name="location" placeholder="Google Meet / Zoom">
                </div>
                <div class="field full">
                    <label class="checkbox" style="cursor: pointer;">
                        <input name="is_active" type="checkbox" value="1" checked>
                        <span><strong>{{ __('scheduling.active') }}</strong></span>
                    </label>
                </div>
                <div class="form-actions full">
                    <button class="button">{{ __('scheduling.actions.create_type') }}</button>
                </div>
            </form>
        </article>

        <article class="panel form-stack" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
            <div style="border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
                <h2 style="margin: 0; font-size: 1.15rem;">{{ __('scheduling.actions.register_assignee') }}</h2>
            </div>
            <form class="form-grid" method="POST" action="{{ route('admin.assignees.store') }}">
                @csrf
                <div class="field">
                    <label for="new_assignee_kind">{{ __('scheduling.fields.assignee_kind') }}</label>
                    <select id="new_assignee_kind" name="kind">
                        <option value="human">{{ __('scheduling.kinds.human') }}</option>
                        <option value="ai_agent">{{ __('scheduling.kinds.ai_agent') }}</option>
                    </select>
                </div>
                <div class="field">
                    <label for="new_assignee_user">{{ __('scheduling.fields.human_user') }}</label>
                    <select id="new_assignee_user" name="user_id">
                        <option value="">{{ __('scheduling.fields.human_user') }}</option>
                        @foreach($users as $u)
                            <option value="{{ $u->id }}">{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label for="new_assignee_display_name">{{ __('scheduling.fields.display_name') }}</label>
                    <input id="new_assignee_display_name" name="display_name" placeholder="م. محمد خالد" required>
                </div>
                <div class="field">
                    <label for="new_assignee_ai_ref">{{ __('scheduling.fields.ai_reference') }}</label>
                    <input id="new_assignee_ai_ref" name="ai_reference" placeholder="AI Agent Identifier">
                </div>
                <div class="field full">
                    <label for="new_assignee_tz">{{ __('scheduling.fields.timezone') ?? 'المنطقة الزمنية' }}</label>
                    <select id="new_assignee_tz" name="timezone">
                        @foreach($timezones as $zone)
                            <option value="{{ $zone }}" @selected($zone==='Africa/Cairo')>{{ $zone }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field full">
                    <label class="checkbox" style="cursor: pointer;">
                        <input name="is_active" type="checkbox" value="1" checked>
                        <span><strong>{{ __('scheduling.active') }}</strong></span>
                    </label>
                </div>
                <div class="form-actions full">
                    <button class="button">{{ __('scheduling.actions.register') }}</button>
                </div>
            </form>
        </article>
    </section>

    {{-- 5. Assignees Availability & Exceptions --}}
    @if($assignees->isNotEmpty())
        <section class="panel form-stack" style="border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; background: var(--surface);">
            <div style="border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem;">
                <h2 style="margin: 0; font-size: 1.25rem;">{{ app()->isLocale('ar') ? 'إعدادات جداول المواعيد والاستثناءات' : 'Assignees Availability & Exceptions' }}</h2>
            </div>

            <div style="display: flex; flex-direction: column; gap: 1.5rem;">
                @foreach($assignees as $a)
                    <article style="border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; background: var(--surface-soft);">
                        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;">
                            <div>
                                <h3 style="margin: 0; font-size: 1.1rem; color: var(--text);">{{ $a->display_name }}</h3>
                                <span class="muted" style="font-size: 0.825rem;">{{ $label('kinds', $a->kind->value) }} · {{ $a->timezone }}</span>
                            </div>
                            <span class="badge badge-neutral">{{ __('scheduling.rule_summary', ['rules' => $a->rules->count(), 'exceptions' => $a->exceptions->count()]) }}</span>
                        </div>

                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
                            <form class="panel form-stack" method="POST" action="{{ route('admin.assignees.rules.store',$a) }}" style="background: var(--surface); padding: 1rem; border-radius: 0.5rem;">
                                @csrf
                                <h4 style="margin: 0 0 0.5rem 0; font-size: 0.95rem;">{{ __('scheduling.actions.add_weekly') }}</h4>
                                <div class="field">
                                    <label>{{ __('scheduling.fields.weekday') ?? 'اليوم' }}</label>
                                    <select name="weekday">
                                        @foreach([1,2,3,4,5,6,7] as $n)
                                            <option value="{{ $n }}">{{ __('scheduling.weekdays.'.$n) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-grid">
                                    <div class="field"><label>{{ __('scheduling.fields.start_time') ?? 'من' }}</label><input name="local_start_time" type="time" required></div>
                                    <div class="field"><label>{{ __('scheduling.fields.end_time') ?? 'إلى' }}</label><input name="local_end_time" type="time" required></div>
                                </div>
                                <button class="button button-secondary" style="width: 100%; margin-top: 0.5rem;">{{ __('scheduling.actions.add_availability') }}</button>
                            </form>

                            <form class="panel form-stack" method="POST" action="{{ route('admin.assignees.exceptions.store',$a) }}" style="background: var(--surface); padding: 1rem; border-radius: 0.5rem;">
                                @csrf
                                <h4 style="margin: 0 0 0.5rem 0; font-size: 0.95rem;">{{ __('scheduling.actions.add_exception') }}</h4>
                                <div class="field">
                                    <label>{{ __('scheduling.fields.exception_kind') ?? 'نوع الاستثناء' }}</label>
                                    <select name="kind">
                                        <option value="blocked">{{ __('scheduling.exception_kinds.blocked') }}</option>
                                        <option value="available">{{ __('scheduling.exception_kinds.available') }}</option>
                                    </select>
                                </div>
                                <div class="form-grid">
                                    <div class="field"><label>{{ __('scheduling.fields.start_time') ?? 'من' }}</label><input name="local_start" type="datetime-local" required></div>
                                    <div class="field"><label>{{ __('scheduling.fields.end_time') ?? 'إلى' }}</label><input name="local_end" type="datetime-local" required></div>
                                </div>
                                <div class="field"><label>{{ __('scheduling.fields.reason') }}</label><input name="reason" maxlength="500" placeholder="{{ __('scheduling.fields.reason') }}"></div>
                                <button class="button button-secondary" style="width: 100%; margin-top: 0.5rem;">{{ __('scheduling.actions.add_exception') }}</button>
                            </form>
                        </div>
                    </article>
                @endforeach
            </div>
        </section>
    @endif
@endif
@endsection