<?php defined('BASEPATH') or exit('No direct script access allowed');

$pageTitle = !empty($title) ? $title : lang('knowledgebase');
$attachments = json_decode((string) ($article->attachments ?? '[]'));
if (!is_array($attachments)) {
    $attachments = array();
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= html_escape($pageTitle) ?></title>
    <script>
        (function() {
            try {
                var stored = localStorage.getItem('theme');
                var preferred = stored || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
                document.documentElement.classList.toggle('dark', preferred === 'dark');
            } catch (e) {
                document.documentElement.classList.remove('dark');
            }
        })();
    </script>
    <link rel="stylesheet" href="<?= base_url('assets/css/tailwind.generated.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/css/app.css') ?>">
    <script src="<?= base_url('assets/vendor/lucide/lucide.min.js') ?>" defer></script>
    <style>
        .kb-content h1,
        .kb-content h2,
        .kb-content h3,
        .kb-content h4 {
            margin-top: 1rem;
            margin-bottom: 0.55rem;
            font-weight: 700;
            line-height: 1.35;
            color: hsl(var(--foreground));
        }

        .kb-content p,
        .kb-content li {
            margin-bottom: 0.8rem;
            color: hsl(var(--foreground));
            line-height: 1.8;
        }

        .kb-content ul,
        .kb-content ol {
            margin-left: 1.2rem;
            margin-bottom: 1rem;
        }

        .kb-content a {
            color: rgb(37 99 235);
            text-decoration: underline;
        }

        .kb-content img {
            max-width: 100%;
            height: auto;
            border-radius: 0.75rem;
            margin: 1rem 0;
            border: 1px solid hsl(var(--border));
        }

        .kb-content code {
            background: hsl(var(--muted));
            color: hsl(var(--foreground));
            border-radius: 0.35rem;
            padding: 0.15rem 0.35rem;
        }
    </style>
</head>

<body class="min-h-screen bg-background text-foreground">
    <header class="relative overflow-hidden border-b border-border bg-card">
        <div class="pointer-events-none absolute -left-24 -top-24 h-72 w-72 rounded-full bg-sky-500/15 blur-3xl"></div>
        <div class="pointer-events-none absolute -right-24 top-6 h-72 w-72 rounded-full bg-indigo-500/15 blur-3xl"></div>
        <div class="relative mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
            <div class="mb-4 flex items-center justify-between gap-3">
                <div class="flex items-center gap-2 text-sm">
                    <a href="<?= base_url('knowledgebase') ?>" class="inline-flex items-center gap-1 rounded-lg border border-border bg-card px-3 py-2 font-semibold text-foreground shadow-sm hover:bg-muted">
                        <i data-lucide="arrow-left" class="h-4 w-4"></i>
                        <?= lang('knowledgebase') ?>
                    </a>
                    <span class="text-muted-foreground">/</span>
                    <span class="rounded-lg bg-muted px-2 py-1 text-xs font-semibold text-muted-foreground"><?= html_escape((string) $article->category_name) ?></span>
                </div>
                <button type="button" data-theme-toggle class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-foreground shadow-sm hover:bg-muted">
                    <i data-lucide="moon-star" class="h-4 w-4"></i>
                </button>
            </div>

            <h1 class="max-w-4xl text-2xl font-bold tracking-tight text-foreground sm:text-4xl">
                <?= html_escape($article->title) ?>
            </h1>
            <div class="mt-3 flex flex-wrap items-center gap-2 text-xs font-semibold text-muted-foreground">
                <span class="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-1">
                    <i data-lucide="eye" class="h-3.5 w-3.5"></i>
                    <?= (int) $article->total_view ?> <?= lang('view') ?>
                </span>
                <span class="inline-flex items-center gap-1 rounded-full border border-border bg-card px-2 py-1">
                    <i data-lucide="folder-open" class="h-3.5 w-3.5"></i>
                    <?= html_escape((string) $article->category_name) ?>
                </span>
            </div>
        </div>
    </header>

    <main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-12">
            <article class="space-y-6 lg:col-span-8">
                <div class="rounded-2xl border border-border bg-card p-6 shadow-sm sm:p-8">
                    <div class="kb-content text-sm leading-7 text-foreground">
                        <?= html_entity_decode((string) $article->description) ?>
                    </div>
                </div>

                <?php if (!empty($attachments)) { ?>
                    <section class="rounded-2xl border border-border bg-card p-6 shadow-sm">
                        <h2 class="mb-4 text-lg font-semibold text-foreground"><?= lang('attachment') ?></h2>
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            <?php foreach ($attachments as $file) {
                                if (empty($file) || empty($file->fileName) || empty($file->path)) {
                                    continue;
                                }
                                $path = base_url($file->path);
                                $isImage = !empty($file->is_image) && (int) $file->is_image === 1;
                                ?>
                                <a href="<?= $path ?>" target="_blank" class="group flex items-center gap-3 rounded-xl border border-border bg-muted/25 p-3 transition hover:bg-muted/50">
                                    <div class="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-card">
                                        <?php if ($isImage) { ?>
                                            <img src="<?= $path ?>" alt="<?= html_escape($file->fileName) ?>" class="h-full w-full object-cover">
                                        <?php } else { ?>
                                            <i data-lucide="file-text" class="h-5 w-5 text-muted-foreground"></i>
                                        <?php } ?>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-semibold text-foreground"><?= html_escape($file->fileName) ?></p>
                                        <p class="text-xs text-muted-foreground"><?= !empty($file->size) ? html_escape((string) $file->size) . ' KB' : '' ?></p>
                                    </div>
                                    <i data-lucide="download" class="h-4 w-4 text-muted-foreground group-hover:text-foreground"></i>
                                </a>
                            <?php } ?>
                        </div>
                    </section>
                <?php } ?>
            </article>

            <aside class="space-y-6 lg:col-span-4">
                <section class="rounded-2xl border border-border bg-card p-4 shadow-sm">
                    <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('categories') ?></h2>
                    <div class="space-y-1">
                        <?php if (!empty($categories)) {
                            foreach ($categories as $category) {
                                $cid = (int) $category->kb_category_id;
                                $count = (int) ($category_counts[$cid] ?? 0);
                                $isCurrent = (int) $article->kb_category_id === $cid;
                                ?>
                                <a href="<?= base_url('knowledgebase?category=' . $cid) ?>" class="flex items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold transition <?= $isCurrent ? 'bg-indigo-600 text-white' : 'text-foreground hover:bg-muted' ?>">
                                    <span class="truncate"><?= html_escape($category->category) ?></span>
                                    <span class="ml-2 rounded-full px-2 py-0.5 text-[11px] <?= $isCurrent ? 'bg-white/20 text-white' : 'bg-muted text-muted-foreground' ?>"><?= $count ?></span>
                                </a>
                            <?php }
                        } ?>
                    </div>
                </section>

                <section class="rounded-2xl border border-border bg-card p-4 shadow-sm">
                    <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">Related Articles</h2>
                    <?php if (empty($related)) { ?>
                        <p class="text-sm text-muted-foreground"><?= lang('nothing_to_display') ?></p>
                    <?php } else { ?>
                        <div class="space-y-1">
                            <?php foreach ($related as $item) { ?>
                                <a href="<?= base_url('knowledgebase/article/' . (int) $item->kb_id) ?>" class="block rounded-xl px-3 py-2.5 transition hover:bg-muted">
                                    <p class="text-sm font-semibold text-foreground"><?= html_escape($item->title) ?></p>
                                    <p class="mt-0.5 text-xs text-muted-foreground"><?= (int) $item->total_view ?> <?= lang('view') ?></p>
                                </a>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </section>
            </aside>
        </div>
    </main>

    <script>
        (function() {
            const html = document.documentElement;
            const toggle = document.querySelector('[data-theme-toggle]');
            const label = document.querySelector('[data-theme-label]');

            function syncThemeLabel() {
                const isDark = html.classList.contains('dark');
            }

            if (toggle) {
                toggle.addEventListener('click', function() {
                    html.classList.toggle('dark');
                    try {
                        localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
                    } catch (e) {}
                    syncThemeLabel();
                });
            }

            function renderIcons() {
                if (window.lucide && typeof window.lucide.createIcons === 'function') {
                    window.lucide.createIcons();
                }
            }

            syncThemeLabel();
            renderIcons();
            document.addEventListener('DOMContentLoaded', renderIcons);
            window.addEventListener('load', renderIcons);
        })();
    </script>
</body>

</html>
