@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | WhatsApp Chatbot')
@section('page-title', 'WhatsApp Chatbot')

@section('content')
{{-- Connection: this school's own WhatsApp Business number --}}
<div class="card card-outline card-success shadow-sm learner-card">
    <div class="card-header">
        <h3 class="card-title"><i class="fab fa-whatsapp mr-1"></i> Connection — {{ $school->name }}</h3>
        <div class="card-tools">
            @if($school->whatsappReady())
                <span class="badge badge-success p-2"><i class="fas fa-check-circle mr-1"></i> Bot live</span>
            @else
                <span class="badge badge-warning p-2"><i class="fas fa-exclamation-circle mr-1"></i> Not configured</span>
            @endif
        </div>
    </div>
    <form method="POST" action="{{ route('chatbot.settings') }}">
        @csrf @method('PUT')
        <div class="card-body">
            <p class="small text-muted">Each school uses its <strong>own</strong> WhatsApp Business number. Meta calls one webhook for the whole system; messages are routed by the number they arrive on, and every lookup stays inside that school. Switch schools from the top bar to configure another number.</p>
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group form-check mt-4">
                        <input type="checkbox" name="whatsapp_enabled" value="1" class="form-check-input" id="waBotEnabled" @checked(old('whatsapp_enabled', $school->whatsapp_enabled))>
                        <label class="form-check-label" for="waBotEnabled">Enable bot</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="fld-label">Display name</label>
                    <input name="whatsapp_display_name" value="{{ old('whatsapp_display_name', $school->whatsapp_display_name) }}" class="form-control form-control-sm" placeholder="e.g. Zillah School">
                </div>
                <div class="col-md-3">
                    <label class="fld-label">Phone Number ID <span class="text-danger">*</span> <small class="text-muted">(Meta → API Setup)</small></label>
                    <input name="whatsapp_phone_number_id" value="{{ old('whatsapp_phone_number_id', $school->whatsapp_phone_number_id) }}" class="form-control form-control-sm @error('whatsapp_phone_number_id') is-invalid @enderror" placeholder="e.g. 123456789012345">
                </div>
                <div class="col-md-3">
                    <label class="fld-label">Webhook verify token</label>
                    <input name="whatsapp_verify_token" value="{{ old('whatsapp_verify_token', $school->whatsapp_verify_token) }}" class="form-control form-control-sm" placeholder="A secret phrase you invent">
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-6">
                    <label class="fld-label">Access token <small class="text-muted">(encrypted at rest; blank keeps it)</small></label>
                    <input type="password" name="whatsapp_access_token" value="" placeholder="{{ $school->whatsapp_access_token ? 'Saved — leave blank to keep' : 'EAAG…' }}" class="form-control form-control-sm" autocomplete="new-password">
                </div>
                <div class="col-md-6">
                    <label class="fld-label">Webhook URL <small class="text-muted">(paste into Meta App → WhatsApp → Configuration)</small></label>
                    <div class="input-group input-group-sm">
                        <input value="{{ $webhookUrl }}" readonly class="form-control" id="webhookUrlField" onclick="this.select()">
                        <div class="input-group-append"><button type="button" class="btn btn-outline-secondary" onclick="navigator.clipboard.writeText(document.getElementById('webhookUrlField').value)"><i class="fas fa-copy"></i></button></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end">
            <button class="btn btn-sm btn-success"><i class="fas fa-check mr-1"></i> Save connection</button>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-lg-7">
        {{-- Commands: full CRUD --}}
        <div class="card shadow-sm learner-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-terminal mr-1"></i> Bot menu <small class="text-muted">({{ $commands->count() }})</small></h3>
                <div class="card-tools"><button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#addCmdBox"><i class="fas fa-plus mr-1"></i> Add command</button></div>
            </div>
            <div class="card-body">
                <div id="addCmdBox" class="collapse mb-3">
                    <form method="POST" action="{{ route('chatbot.commands.store') }}" class="border rounded p-2 bg-light">
                        @csrf
                        <div class="form-row align-items-end">
                            <div class="form-group col-md-3 mb-1"><label class="fld-label">Command *</label><input name="command" required class="form-control form-control-sm" placeholder="/request fees"></div>
                            <div class="form-group col-md-5 mb-1"><label class="fld-label">Description</label><input name="description" class="form-control form-control-sm" placeholder="Shown in menu"></div>
                            <div class="form-group col-md-2 mb-1"><label class="fld-label">Order</label><input name="sort" type="number" min="0" value="10" class="form-control form-control-sm"></div>
                            <div class="form-group col-md-2 mb-1"><button class="btn btn-sm btn-primary btn-block">Add</button></div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table learner-table table-hover text-nowrap mb-0">
                        <thead><tr><th>Command</th><th>Description</th><th>Status</th><th class="text-right">Actions</th></tr></thead>
                        <tbody>
                            @forelse($commands as $c)
                                <tr>
                                    <td><code>{{ $c->command }}</code></td>
                                    <td><small>{{ $c->description ?? '—' }}</small></td>
                                    <td>{!! $c->enabled ? '<span class="badge badge-success">On</span>' : '<span class="badge badge-secondary">Off</span>' !!}</td>
                                    <td class="text-right">
                                        <button class="btn btn-xs btn-outline-secondary" data-toggle="collapse" data-target="#cmdEdit{{ $c->id }}" title="Edit"><i class="fas fa-pen"></i></button>
                                        <form method="POST" action="{{ route('chatbot.commands.destroy', $c) }}" class="d-inline" onsubmit="return confirm('Remove this command?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-xs btn-outline-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                                <tr class="collapse" id="cmdEdit{{ $c->id }}">
                                    <td colspan="4">
                                        <form method="POST" action="{{ route('chatbot.commands.update', $c) }}" class="form-row align-items-end">
                                            @csrf @method('PUT')
                                            <div class="form-group col-md-3 mb-1"><input name="command" required value="{{ $c->command }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-4 mb-1"><input name="description" value="{{ $c->description }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-2 mb-1"><input name="sort" type="number" min="0" value="{{ $c->sort }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-2 mb-1">
                                                <div class="form-check mt-2"><input type="checkbox" name="enabled" value="1" class="form-check-input" @checked($c->enabled)><label class="form-check-label small">On</label></div>
                                            </div>
                                            <div class="form-group col-md-1 mb-1"><button class="btn btn-sm btn-primary btn-block"><i class="fas fa-check"></i></button></div>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted small py-3">No commands yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <p class="small text-muted mt-2 mb-0">Guardians type these exactly (leading <code>/</code> optional). The six built-ins fetch live data; free text goes to the AI layer, which may only pick one of these vetted commands — never raw data access.</p>
            </div>
        </div>

        {{-- Events: full CRUD --}}
        <div class="card shadow-sm learner-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-calendar-alt mr-1"></i> School events</h3>
                <div class="card-tools"><button class="btn btn-sm btn-primary" data-toggle="collapse" data-target="#addEvtBox"><i class="fas fa-plus mr-1"></i> Add event</button></div>
            </div>
            <div class="card-body">
                <div id="addEvtBox" class="collapse mb-3">
                    <form method="POST" action="{{ route('chatbot.events.store') }}" class="border rounded p-2 bg-light">
                        @csrf
                        <div class="form-row align-items-end">
                            <div class="form-group col-md-4 mb-1"><label class="fld-label">Title *</label><input name="title" required class="form-control form-control-sm"></div>
                            <div class="form-group col-md-3 mb-1"><label class="fld-label">Date *</label><input name="event_date" type="date" required class="form-control form-control-sm"></div>
                            <div class="form-group col-md-3 mb-1"><label class="fld-label">Location</label><input name="location" class="form-control form-control-sm"></div>
                            <div class="form-group col-md-2 mb-1"><button class="btn btn-sm btn-primary btn-block">Add</button></div>
                        </div>
                    </form>
                </div>
                <div class="table-responsive">
                    <table class="table learner-table table-hover text-nowrap mb-0">
                        <thead><tr><th>Date</th><th>Event</th><th>Public</th><th class="text-right">Actions</th></tr></thead>
                        <tbody>
                            @forelse($events as $e)
                                <tr>
                                    <td>{{ $e->event_date->format('d/m/Y') }}</td>
                                    <td class="font-weight-bold">{{ $e->title }}@if($e->location)<br><small class="text-muted">{{ $e->location }}</small>@endif</td>
                                    <td>{!! $e->is_public ? '<span class="badge badge-success">Yes</span>' : '<span class="badge badge-secondary">No</span>' !!}</td>
                                    <td class="text-right">
                                        <button class="btn btn-xs btn-outline-secondary" data-toggle="collapse" data-target="#evtEdit{{ $e->id }}" title="Edit"><i class="fas fa-pen"></i></button>
                                        <form method="POST" action="{{ route('chatbot.events.destroy', $e) }}" class="d-inline" onsubmit="return confirm('Remove this event?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-xs btn-outline-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                                <tr class="collapse" id="evtEdit{{ $e->id }}">
                                    <td colspan="4">
                                        <form method="POST" action="{{ route('chatbot.events.update', $e) }}" class="form-row align-items-end">
                                            @csrf @method('PUT')
                                            <div class="form-group col-md-4 mb-1"><input name="title" required value="{{ $e->title }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-3 mb-1"><input name="event_date" type="date" required value="{{ $e->event_date->format('Y-m-d') }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-2 mb-1"><input name="location" value="{{ $e->location }}" class="form-control form-control-sm"></div>
                                            <div class="form-group col-md-2 mb-1">
                                                <div class="form-check mt-2"><input type="checkbox" name="is_public" value="1" class="form-check-input" @checked($e->is_public)><label class="form-check-label small">Public</label></div>
                                            </div>
                                            <div class="form-group col-md-1 mb-1"><button class="btn btn-sm btn-primary btn-block"><i class="fas fa-check"></i></button></div>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted small py-3">No events yet — add PTA days, sports, closing dates.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        {{-- Linked guardians --}}
        <div class="card shadow-sm learner-card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-link mr-1"></i> Linked guardians <small class="text-muted">({{ $links->total() }})</small></h3></div>
            <div class="card-body table-responsive p-0">
                <table class="table learner-table table-hover text-nowrap mb-0">
                    <thead><tr><th>Learner</th><th>WhatsApp</th><th>Verified</th><th></th></tr></thead>
                    <tbody>
                        @forelse($links as $l)
                            <tr>
                                <td><a href="{{ route('learners.show', $l->learner_id) }}">{{ $l->learner->full_name ?? ('#'.$l->learner_id) }}</a><br><small class="text-muted">{{ $l->learner->admission_no ?? '' }} · {{ ucfirst($l->relationship) }}</small></td>
                                <td><small>{{ \App\Support\PhoneNumbers::mask($l->phone) }}</small></td>
                                <td><small>{{ $l->verified_at?->format('d/m/Y') ?? '—' }}</small></td>
                                <td class="text-right">
                                    <form method="POST" action="{{ route('chatbot.links.destroy', $l) }}" onsubmit="return confirm('Revoke this link?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-outline-danger" title="Revoke"><i class="fas fa-unlink"></i></button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted small py-3">No linked numbers yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($links->hasPages())
                <div class="card-footer">{{ $links->links() }}</div>
            @endif
        </div>

        {{-- Audit log --}}
        <div class="card shadow-sm learner-card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-list-alt mr-1"></i> Request audit <small class="text-muted">latest 50</small></h3></div>
            <div class="card-body table-responsive p-0">
                <table class="table learner-table table-hover text-nowrap mb-0">
                    <thead><tr><th>When</th><th>Command</th><th>Learner</th></tr></thead>
                    <tbody>
                        @forelse($logs as $g)
                            <tr>
                                <td><small>{{ $g->created_at->format('d/m H:i') }}</small></td>
                                <td><code>{{ $g->command }}</code></td>
                                <td><small>{{ $g->learner->full_name ?? ('#'.$g->learner_id) }}</small></td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted small py-3">No bot requests yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card shadow-sm learner-card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-shield-alt mr-1"></i> How guardians link</h3></div>
            <div class="card-body small text-muted">
                <ol class="mb-0 pl-3">
                    <li>Guardian messages this number: <code>register 12345</code> (admission no).</li>
                    <li>A 6-digit PIN goes by <strong>SMS to the phone on file</strong> (not the sender).</li>
                    <li>Guardian replies with the PIN → number links to the learner <strong>plus siblings</strong> sharing that guardian phone.</li>
                    <li>Unlinked numbers can only use <code>register</code>. Guardians reply <code>STOP</code> to unlink.</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection