<?php
/// file: app/View/admin/media/index.php

declare(strict_types=1);

/** @var list<array<string, mixed>> $projects */
/** @var list<array<string, mixed>> $journal */
/** @var list<array<string, mixed>> $seo */
/** @var array<string, string> $settings */
/** @var array<string, mixed> $flash */

$ok = (string) ($flash['media_ok'] ?? '');
$s = static function (string $k, string $d = '') use ($settings): string {
    return $settings[$k] ?? $d;
};
$preview = static function (string $path): string {
    if ($path !== '' && str_starts_with($path, '/')) {
        return url($path);
    }

    return default_cover_fallback_url();
};
?>
<h1 class="text-2xl font-semibold text-white">Site media</h1>
<p class="mt-2 max-w-2xl text-sm text-silver-400">Replace covers and SEO images from one place. Paths are relative to the site root (e.g. <code class="text-white/70">/assets/uploads/…</code>). Upload stores files under <code class="text-white/70">/public/assets/uploads/</code>.</p>
<?php if ($ok !== ''): ?>
    <p class="mt-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-200"><?= e($ok) ?></p>
<?php endif; ?>

<section class="mt-10 rounded-xl border border-white/10 bg-charcoal/40 p-6">
    <h2 class="text-lg font-medium text-white">Global</h2>
    <p class="mt-1 text-xs text-silver-500">Default placeholder when a project or post has no cover path. Default OG image for social previews (also editable under Site settings).</p>
    <form method="post" action="<?= e(url('/admin/media/global')) ?>" enctype="multipart/form-data" class="mt-6 grid gap-6 md:grid-cols-2">
        <?= \App\Core\Csrf::field() ?>
        <div>
            <label class="text-xs text-silver-500">Default placeholder path</label>
            <input name="default_placeholder_image" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white" value="<?= e($s('default_placeholder_image', '/assets/images/placeholder.svg')) ?>">
            <label class="mt-3 block text-xs text-silver-500">Upload image</label>
            <input type="file" name="upload_placeholder" accept="image/jpeg,image/png,image/webp,image/gif" class="mt-1 w-full text-xs text-silver-400 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1.5 file:text-white">
        </div>
        <div>
            <label class="text-xs text-silver-500">Default OG image path</label>
            <input name="og_default_image" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white" value="<?= e($s('og_default_image')) ?>">
            <label class="mt-3 block text-xs text-silver-500">Upload image</label>
            <input type="file" name="upload_og" accept="image/jpeg,image/png,image/webp,image/gif" class="mt-1 w-full text-xs text-silver-400 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1.5 file:text-white">
        </div>
        <div class="md:col-span-2">
            <button type="submit" class="rounded-full bg-white px-6 py-2 text-xs font-semibold text-carbon">Save global images</button>
        </div>
    </form>
</section>

<section class="mt-10">
    <h2 class="text-lg font-medium text-white">Projects</h2>
    <div class="mt-4 space-y-6">
        <?php foreach ($projects as $p): ?>
            <?php
            $cp = (string) ($p['cover_path'] ?? '');
            $ct = (string) ($p['cover_type'] ?? 'image');
            ?>
            <div class="rounded-xl border border-white/10 bg-charcoal/40 p-4 md:flex md:gap-6">
                <div class="shrink-0">
                    <?php if ($ct === 'video' && $cp !== ''): ?>
                        <video class="h-24 w-40 rounded-lg border border-white/10 object-cover" src="<?= e($preview($cp)) ?>" muted playsinline preload="metadata"></video>
                    <?php else: ?>
                        <img class="h-24 w-40 rounded-lg border border-white/10 object-cover" src="<?= e($preview($cp)) ?>" alt="">
                    <?php endif; ?>
                </div>
                <form method="post" action="<?= e(url('/admin/media/project/' . (int) $p['id'])) ?>" enctype="multipart/form-data" class="min-w-0 flex-1 space-y-3">
                    <?= \App\Core\Csrf::field() ?>
                    <p class="font-medium text-white"><?= e((string) $p['title']) ?></p>
                    <p class="text-xs text-silver-500"><?= e((string) $p['slug']) ?></p>
                    <div class="grid gap-3 md:grid-cols-3">
                        <div>
                            <label class="text-xs text-silver-500">Cover type</label>
                            <select name="cover_type" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white">
                                <option value="image" <?= $ct === 'image' ? 'selected' : '' ?>>image</option>
                                <option value="video" <?= $ct === 'video' ? 'selected' : '' ?>>video</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="text-xs text-silver-500">Cover path</label>
                            <input name="cover_path" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white" value="<?= e($cp) ?>">
                        </div>
                    </div>
                    <div>
                        <label class="text-xs text-silver-500">Upload file (replaces path)</label>
                        <input type="file" name="upload" accept="image/jpeg,image/png,image/webp,image/gif,video/mp4,video/webm" class="mt-1 w-full text-xs text-silver-400 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1.5 file:text-white">
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <button type="submit" class="rounded-full bg-white px-5 py-1.5 text-xs font-semibold text-carbon">Save</button>
                        <a href="<?= e(url('/admin/projects/edit/' . (int) $p['id'])) ?>" class="rounded-full border border-white/20 px-5 py-1.5 text-xs text-white/80 hover:border-white/40">Full edit</a>
                    </div>
                </form>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section class="mt-12">
    <h2 class="text-lg font-medium text-white">Journal</h2>
    <div class="mt-4 space-y-6">
        <?php foreach ($journal as $j): ?>
            <?php $jp = (string) ($j['cover_path'] ?? ''); ?>
            <div class="rounded-xl border border-white/10 bg-charcoal/40 p-4 md:flex md:gap-6">
                <img class="h-24 w-40 shrink-0 rounded-lg border border-white/10 object-cover" src="<?= e($preview($jp)) ?>" alt="">
                <form method="post" action="<?= e(url('/admin/media/journal/' . (int) $j['id'])) ?>" enctype="multipart/form-data" class="min-w-0 flex-1 space-y-3">
                    <?= \App\Core\Csrf::field() ?>
                    <p class="font-medium text-white"><?= e((string) $j['title']) ?></p>
                    <div>
                        <label class="text-xs text-silver-500">Cover path</label>
                        <input name="cover_path" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white" value="<?= e($jp) ?>">
                    </div>
                    <div>
                        <label class="text-xs text-silver-500">Upload image</label>
                        <input type="file" name="upload" accept="image/jpeg,image/png,image/webp,image/gif" class="mt-1 w-full text-xs text-silver-400 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1.5 file:text-white">
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <button type="submit" class="rounded-full bg-white px-5 py-1.5 text-xs font-semibold text-carbon">Save</button>
                        <a href="<?= e(url('/admin/journal/edit/' . (int) $j['id'])) ?>" class="rounded-full border border-white/20 px-5 py-1.5 text-xs text-white/80 hover:border-white/40">Full edit</a>
                    </div>
                </form>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section class="mt-12 mb-8">
    <h2 class="text-lg font-medium text-white">SEO — Open Graph image per page</h2>
    <div class="mt-4 space-y-6">
        <?php foreach ($seo as $row): ?>
            <?php
            $pk = (string) ($row['page_key'] ?? '');
            $og = (string) ($row['og_image'] ?? '');
            ?>
            <div class="rounded-xl border border-white/10 bg-charcoal/40 p-4 md:flex md:gap-6">
                <img class="h-24 w-40 shrink-0 rounded-lg border border-white/10 object-cover" src="<?= e($preview($og)) ?>" alt="">
                <form method="post" action="<?= e(url('/admin/media/seo')) ?>" enctype="multipart/form-data" class="min-w-0 flex-1 space-y-3">
                    <?= \App\Core\Csrf::field() ?>
                    <input type="hidden" name="page_key" value="<?= e($pk) ?>">
                    <p class="font-mono text-sm text-electric-300"><?= e($pk) ?></p>
                    <div>
                        <label class="text-xs text-silver-500">OG image path</label>
                        <input name="og_image" class="mt-1 w-full rounded border border-white/10 bg-carbon px-3 py-2 text-sm text-white" value="<?= e($og) ?>">
                    </div>
                    <div>
                        <label class="text-xs text-silver-500">Upload image</label>
                        <input type="file" name="upload" accept="image/jpeg,image/png,image/webp,image/gif" class="mt-1 w-full text-xs text-silver-400 file:mr-3 file:rounded file:border-0 file:bg-white/10 file:px-3 file:py-1.5 file:text-white">
                    </div>
                    <button type="submit" class="rounded-full bg-white px-5 py-1.5 text-xs font-semibold text-carbon">Save</button>
                </form>
            </div>
        <?php endforeach; ?>
    </div>
</section>
