<?php

/**
 * Message Template Management View
 *
 * Renders the dashboard editor card for personalizing invitation messages
 * and lists all supported placeholders.
 *
 * Variables expected:
 *   $title     — string — Page title.
 *   $body_text — string — Existing template content.
 *   $errors    — array — Errors block.
 *   $success   — string — Success alert string.
 *
 * @package Inveetaire
 * @ref     PILOT-006
 */

/** @var string $title */
/** @var string $body_text */
/** @var array $errors */
/** @var string|null $success */

?>

<div class="space-y-6">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 tracking-tight"><?= escape_html($title) ?></h1>
            <p class="text-sm text-slate-500 mt-1">Configure the invitation message copy sent to your guests via WhatsApp.</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="<?= url('/app/couple/messaging/preview') ?>" class="btn btn-secondary btn-sm">
                📋 Guest Distribution list
            </a>
        </div>
    </div>

    <!-- Alert Notices -->
    <?php if (!empty($errors)): ?>
        <div class="alert alert-danger" role="alert">
            <ul class="list-disc pl-4 space-y-1">
                <?php foreach ($errors as $err): ?>
                    <li><?= escape_html($err) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    <?php if ($success !== null): ?>
        <div class="alert alert-success" role="alert">
            <?= escape_html($success) ?>
        </div>
    <?php endif; ?>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Editor Column -->
        <div class="lg:col-span-2 space-y-6">
            <div class="card p-0 overflow-hidden">
                <div class="p-6 border-b border-slate-100 bg-slate-50/50">
                    <h3 class="text-sm font-bold text-slate-800">Template Editor</h3>
                </div>
                
                <form action="<?= url('/app/couple/messaging/template') ?>" method="POST" class="p-6 space-y-4">
                    <?= csrf_field() ?>

                    <div class="form-group">
                        <label for="template_body" class="form-label text-xs uppercase tracking-wider text-slate-400 font-bold mb-2">Message Content</label>
                        <textarea 
                            id="template_body" 
                            name="body_text" 
                            rows="12" 
                            placeholder="Write your invitation wording here..." 
                            class="form-textarea w-full"
                            required
                        ><?= escape_html($body_text) ?></textarea>
                    </div>

                    <div class="pt-2 flex justify-end">
                        <button type="submit" class="btn btn-primary btn-md flex items-center gap-1.5">
                            <i class="fa-solid fa-floppy-disk"></i> Save Template
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Placeholders Guide Column -->
        <div class="space-y-6">
            <div class="card p-6 space-y-4">
                <h3 class="text-sm font-bold text-slate-800 pb-2 border-b border-slate-100">Supported Placeholders</h3>
                
                <p class="text-xs text-slate-500 leading-relaxed">
                    Insert these tokens into your message body text. They will be dynamically replaced for each guest pass:
                </p>

                <div class="space-y-3 pt-2">
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{guest_name}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Personal guest full name.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{invitation_url}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Unauthenticated personalized landing page link.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{groom_name}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Groom display name.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{bride_name}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Bride display name.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{couple_name}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Combined names of Groom &amp; Bride.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{holy_information}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Holy Matrimony agenda (if guest is invited).</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{reception_information}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Wedding Reception agenda (if guest is invited).</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{wedding_date}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Formatted wedding date.</span>
                    </div>
                    <div class="text-xs">
                        <code class="badge badge-primary font-mono font-bold">{{workspace_name}}</code>
                        <span class="text-slate-500 block mt-1 text-[11px]">Active workspace identifier/slug.</span>
                    </div>
                </div>

                <div class="rounded-lg bg-slate-50 border border-slate-100 p-3 text-[10px] text-slate-400 leading-relaxed mt-4">
                    <strong>Note:</strong> Unknown curly placeholders (e.g. <code>{{custom_token}}</code>) will remain untouched and safely preserved in the compiled outputs.
                </div>
            </div>
        </div>

    </div>
</div>
