<?php
declare(strict_types=1);
session_start();

if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}

require_once 'db/config.php';

@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');

$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');

$username = $_SESSION['username'];

try {
    $pdo = db();
    $stmt = $pdo->query("SELECT name, breed, image_path FROM horses");
    $horses = $stmt->fetchAll();
} catch (PDOException $e) {
    $horses = [];
    $error_message = "Database error: " . $e->getMessage();
}

?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Horses</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-color-start: #6a11cb;
      --bg-color-end: #2575fc;
      --text-color: #ffffff;
      --card-bg-color: rgba(255, 255, 255, 0.05);
      --card-border-color: rgba(255, 255, 255, 0.2);
    }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
      color: var(--text-color);
      min-height: 100vh;
      text-align: center;
      overflow-x: hidden;
      position: relative;
    }
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
      animation: bg-pan 20s linear infinite;
      z-index: -1;
    }
    @keyframes bg-pan {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }
    header {
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .home-link {
        color: var(--text-color);
        text-decoration: none;
        opacity: 0.8;
    }
    main {
      padding: 2rem;
    }
    h1 {
      font-size: 3rem;
      font-weight: 700;
      margin: 0 0 2rem;
      letter-spacing: -1px;
    }
    .horse-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }
    .horse-card {
      background: var(--card-bg-color);
      border: 1px solid var(--card-border-color);
      border-radius: 16px;
      padding: 1.5rem;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
      text-align: left;
      display: flex;
      flex-direction: column;
    }
    .horse-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    .horse-card h2 {
        font-size: 1.5rem;
        margin: 0 0 0.5rem;
    }
    .horse-card p {
        margin: 0 0 0.5rem;
        opacity: 0.9;
        line-height: 1.5;
    }
    .horse-card .details {
        margin-top: auto;
    }
    footer {
      padding: 1rem;
      font-size: 0.8rem;
      opacity: 0.7;
      position: relative;
      bottom: 0;
    }
    .messages {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 8px;
        text-align: center;
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        min-width: 300px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        opacity: 0;
        animation: fade-in-out 5s ease-in-out forwards;
    }
    .success {
        background-color: #4dff88;
        color: #003d14;
        border: 1px solid #00c344;
    }
    @keyframes fade-in-out {
        0% { opacity: 0; transform: translate(-50%, -40px); }
        15% { opacity: 1; transform: translate(-50%, 0); }
        85% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, -40px); }
    }
  </style>
</head>
<body>
  <?php if (isset($_SESSION['flash_message'])): ?>
    <div class="messages success">
        <p><?= htmlspecialchars($_SESSION['flash_message']) ?></p>
    </div>
    <?php unset($_SESSION['flash_message']); ?>
  <?php endif; ?>
  <header>
    <div class="user-info">
        <span>Welcome, <?= htmlspecialchars($username) ?></span>
    </div>
    <div class="user-actions" style="display: flex; align-items: center;">
        <a href="profile.php" class="profile-link">
            <img src="assets/pasted-20250910-065124-15fa0386.png" alt="Profile" style="width: 32px; height: 32px; border-radius: 50%;">
        </a>
        <a href="logout.php" class="logout-link" style="margin-left: 1rem;">Logout</a>
    </div>
  </header>
  <main>
    <h1>Our Horses</h1>
    <?php if (isset($error_message)): ?>
        <p><?= htmlspecialchars($error_message) ?></p>
    <?php elseif (empty($horses)): ?>
        <p>No horses found.</p>
    <?php else: ?>
        <div class="horse-grid">
            <?php foreach ($horses as $horse): ?>
                <div class="horse-card">
                    <?php if (!empty($horse['image_path']) && file_exists($horse['image_path'])): ?>
                        <img src="<?= htmlspecialchars($horse['image_path']) ?>" alt="<?= htmlspecialchars($horse['name']) ?>">
                    <?php endif; ?>
                    <h2><?= htmlspecialchars($horse['name']) ?></h2>
                    <div class="details">
                        
                        
                        <p><strong>Breed:</strong> <?= htmlspecialchars($horse['breed']) ?></p>
                        
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
  </main>
  <footer>
    Page rendered: <?= htmlspecialchars($now) ?> (UTC)
  </footer>
</body>
</html>