<?php
/**
 * Page projet individuelle
 */

// Récupérer le slug depuis le router
$slug = $GLOBALS['routeParams'][0] ?? null;

if (!$slug) {
    http_response_code(404);
    include __DIR__ . '/404.php';
    exit;
}

$project = getProjectBySlug($slug);

if (!$project) {
    http_response_code(404);
    include __DIR__ . '/404.php';
    exit;
}

$pageTitle = $project['title'];
$pageDescription = $project['context'] ?? "Découvrez le projet {$project['title']}";
$currentPage = 'projets';

include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>

<main>
    <article class="section">
        <div class="container-content">
            <!-- Breadcrumb -->
            <nav class="flex items-center gap-2 text-sm mb-8" aria-label="Fil d'Ariane">
                <a href="/" class="text-text-secondary hover:text-primary transition-colors">Accueil</a>
                <span class="text-text-secondary">/</span>
                <a href="/projets" class="text-text-secondary hover:text-primary transition-colors">Projets</a>
                <span class="text-text-secondary">/</span>
                <span class="text-text-primary font-medium"><?= htmlspecialchars($project['title']) ?></span>
            </nav>

            <!-- Header du projet -->
            <header class="mb-12">
                <h1 class="text-3xl lg:text-display font-bold text-text-primary mb-4">
                    <?= htmlspecialchars($project['title']) ?>
                </h1>

                <!-- Technologies -->
                <div class="flex flex-wrap gap-2 mb-6">
                    <?php foreach ($project['technologies'] ?? [] as $tech): ?>
                        <span class="badge"><?= htmlspecialchars($tech) ?></span>
                    <?php endforeach; ?>
                </div>

                <!-- Boutons d'action -->
                <div class="flex flex-wrap gap-4">
                    <?php if (!empty($project['url'])): ?>
                        <a href="<?= htmlspecialchars($project['url']) ?>" target="_blank" rel="noopener" class="btn-primary inline-flex items-center gap-2">
                            Voir le projet en ligne
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                        </a>
                    <?php endif; ?>

                    <?php if (!empty($project['github'])): ?>
                        <a href="<?= htmlspecialchars($project['github']) ?>" target="_blank" rel="noopener" class="btn-secondary inline-flex items-center gap-2">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                            </svg>
                            Voir sur GitHub
                        </a>
                    <?php endif; ?>

                    <?php if (empty($project['url']) && empty($project['github'])): ?>
                        <span class="text-text-secondary italic">Projet non disponible en ligne</span>
                    <?php endif; ?>
                </div>
            </header>

            <!-- Image principale -->
            <?php if (!empty($project['thumbnail'])): ?>
                <div class="mb-12 rounded-lg overflow-hidden bg-surface-alt">
                    <?= projectImage(
                        $project['thumbnail'],
                        $project['title'],
                        1200,
                        675,
                        false,
                        "w-full"
                    ) ?>
                </div>
            <?php endif; ?>

            <!-- Contenu -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                <!-- Colonne principale -->
                <div class="lg:col-span-2 space-y-10">
                    <!-- Contexte -->
                    <?php if (!empty($project['context'])): ?>
                        <section>
                            <h2 class="text-xl lg:text-heading font-semibold text-text-primary mb-4">Contexte</h2>
                            <p class="text-text-secondary leading-relaxed">
                                <?= nl2br(htmlspecialchars($project['context'])) ?>
                            </p>
                        </section>
                    <?php endif; ?>

                    <!-- Solution technique -->
                    <?php if (!empty($project['solution'])): ?>
                        <section>
                            <h2 class="text-xl lg:text-heading font-semibold text-text-primary mb-4">Solution Technique</h2>
                            <p class="text-text-secondary leading-relaxed">
                                <?= nl2br(htmlspecialchars($project['solution'])) ?>
                            </p>
                        </section>
                    <?php endif; ?>

                    <!-- Travail d'équipe -->
                    <?php if (!empty($project['teamwork'])): ?>
                        <section>
                            <h2 class="text-xl lg:text-heading font-semibold text-text-primary mb-4">Travail d'Équipe</h2>
                            <p class="text-text-secondary leading-relaxed">
                                <?= nl2br(htmlspecialchars($project['teamwork'])) ?>
                            </p>
                        </section>
                    <?php endif; ?>

                    <!-- Galerie -->
                    <?php if (!empty($project['screenshots'])): ?>
                        <section>
                            <h2 class="text-xl lg:text-heading font-semibold text-text-primary mb-4">Captures d'écran</h2>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <?php foreach ($project['screenshots'] as $screenshot): ?>
                                    <div class="rounded-lg overflow-hidden bg-surface-alt">
                                        <?= projectImage(
                                            $screenshot,
                                            "Capture d'écran - " . $project['title'],
                                            800,
                                            450,
                                            true,
                                            "w-full h-auto"
                                        ) ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </section>
                    <?php endif; ?>
                </div>

                <!-- Sidebar -->
                <aside class="space-y-6">
                    <!-- Durée -->
                    <div class="card">
                        <div class="card-body">
                            <h3 class="text-sm font-medium text-text-secondary mb-1">Durée du projet</h3>
                            <p class="text-lg font-semibold text-text-primary">
                                <?= htmlspecialchars($project['duration'] ?? 'Non spécifiée') ?>
                            </p>
                        </div>
                    </div>

                    <!-- Placeholder témoignage (Story 4.5) -->
                </aside>
            </div>

            <!-- Navigation bas de page -->
            <footer class="mt-16 pt-8 border-t border-border flex flex-wrap justify-between items-center gap-4">
                <a href="/projets" class="inline-flex items-center gap-2 text-text-secondary hover:text-primary transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Retour aux projets
                </a>
                <a href="/contact" class="btn-primary">
                    Me contacter
                </a>
            </footer>
        </div>
    </article>
</main>

<?php include_template('footer'); ?>
