@extends('layouts.admin', [
    'title' => 'Message Templates',
    'pageTitle' => 'Message Templates',
    'active' => 'reminders',
])

@php
    $templates = [
        ['id' => 1, 'name' => 'Booking confirmation', 'type' => 'Booking confirmation', 'channel' => 'WhatsApp', 'usage' => 'Sent after every new booking', 'status' => 'Active', 'updated' => 'Updated 2 days ago', 'message' => 'Hi {customer_name}, your booking with {business_name} is confirmed for {service_name}.'],
        ['id' => 2, 'name' => 'Appointment reminder', 'type' => 'Appointment reminder', 'channel' => 'WhatsApp', 'usage' => '24 hours before appointment', 'status' => 'Active', 'updated' => 'Updated 5 days ago', 'message' => 'Reminder: {service_name} with {staff_name} on {appointment_date} at {appointment_time}.'],
        ['id' => 3, 'name' => 'Invoice reminder', 'type' => 'Invoice reminder', 'channel' => 'Email', 'usage' => 'When invoice remains unpaid', 'status' => 'Active', 'updated' => 'Updated 1 week ago', 'message' => 'Invoice {invoice_number} for {invoice_amount} is due. Pay here: {booking_link}.'],
        ['id' => 4, 'name' => 'Cancellation notice', 'type' => 'Cancellation notice', 'channel' => 'Email', 'usage' => 'Sent after cancellation', 'status' => 'Paused', 'updated' => 'Updated 2 weeks ago', 'message' => 'Your {service_name} appointment has been cancelled. Rebook using {booking_link}.'],
        ['id' => 5, 'name' => 'Follow-up message', 'type' => 'Follow-up message', 'channel' => 'WhatsApp', 'usage' => '2 hours after completed appointment', 'status' => 'Active', 'updated' => 'Updated yesterday', 'message' => 'Thanks for visiting {business_name}. We hope you enjoyed your {service_name}.'],
    ];
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Create reusable WhatsApp and email templates with booking, appointment, invoice, and customer variables.</p>
            @include('admin.reminders.partials.nav', ['activeTab' => 'templates'])
        </div>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="grid gap-3 sm:grid-cols-[minmax(260px,420px)_170px_160px]">
                <div class="relative">
                    <x-ui.icon name="search" class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                    <input class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-11 text-sm font-medium shadow-soft outline-none placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" placeholder="Search templates..." />
                </div>
                <select class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option>All Channels</option>
                    <option>WhatsApp</option>
                    <option>Email</option>
                </select>
                <select class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option>All Types</option>
                    <option>Booking confirmation</option>
                    <option>Appointment reminder</option>
                    <option>Invoice reminder</option>
                    <option>Cancellation notice</option>
                    <option>Follow-up message</option>
                </select>
            </div>
            <x-ui.button href="{{ route('admin.reminders.templates.create') }}">
                <x-ui.icon name="plus" class="h-4 w-4" />
                New Template
            </x-ui.button>
        </div>

        <section class="grid gap-5 xl:grid-cols-2">
            @foreach ($templates as $template)
                <x-ui.card>
                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                        <div class="min-w-0">
                            <div class="flex flex-wrap items-center gap-2">
                                <h2 class="text-base font-extrabold text-booklio-dark">{{ $template['name'] }}</h2>
                                <x-ui.badge :variant="$template['channel'] === 'WhatsApp' ? 'success' : 'primary'">{{ $template['channel'] }}</x-ui.badge>
                                <x-ui.badge :variant="$template['status'] === 'Active' ? 'success' : 'muted'">{{ $template['status'] }}</x-ui.badge>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-slate-700">{{ $template['usage'] }}</p>
                            <p class="mt-3 rounded-lg bg-slate-50 p-3 text-sm leading-6 text-booklio-muted">{{ $template['message'] }}</p>
                            <p class="mt-3 text-xs font-bold text-booklio-muted">{{ $template['updated'] }}</p>
                        </div>
                        <div class="flex shrink-0 gap-2">
                            <x-ui.button size="sm" variant="secondary" href="{{ route('admin.reminders.templates.edit', $template['id']) }}">
                                <x-ui.icon name="edit" class="h-4 w-4" />
                                Edit
                            </x-ui.button>
                            <x-ui.button size="sm" variant="ghost" data-booklio-placeholder="Template duplication will be connected when reminder template CRUD is implemented.">
                                <x-ui.icon name="copy" class="h-4 w-4" />
                                Copy
                            </x-ui.button>
                        </div>
                    </div>
                </x-ui.card>
            @endforeach
        </section>

        <x-ui.card class="border-dashed bg-slate-50/60 text-center">
            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-white text-booklio-primary shadow-soft">
                <x-ui.icon name="file-text" class="h-6 w-6" />
            </div>
            <h3 class="mt-4 text-base font-extrabold text-booklio-dark">No archived templates</h3>
            <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-booklio-muted">Archived or filtered-out templates will appear here so owners can restore messages without rebuilding them.</p>
        </x-ui.card>
    </div>
@endsection