<?php
declare(strict_types=1);
require_once __DIR__ . '/auth_helper.php';
require_login();
require_role(['Admin', 'Adviser', 'Officer']);

$position_id = $_GET['position_id'] ?? '';
if (!$position_id) die("Position ID required");

$pdo = db();
$pStmt = $pdo->prepare("SELECT p.*, e.title as election_title, e.id as election_id FROM positions p JOIN elections e ON p.election_id = e.id WHERE p.id = ?");
$pStmt->execute([$position_id]);
$position = $pStmt->fetch();

if (!$position) die("Position not found");

$candidates = $pdo->prepare("SELECT c.*, u.name, u.student_id FROM candidates c JOIN users u ON c.user_id = u.id WHERE c.position_id = ?");
$candidates->execute([$position_id]);
$candidates = $candidates->fetchAll();

// Get all users who could be candidates (could be improved with search)
$users = $pdo->query("SELECT id, name, student_id FROM users WHERE role = 'Voter' LIMIT 100")->fetchAll();
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Manage Candidates | <?= htmlspecialchars($position['name']) ?></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;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/dashboard.css?v=<?= time() ?>">
  <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="dashboard-body <?= ($user['theme'] ?? 'light') === 'dark' ? 'dark-theme' : '' ?>">
  <?php require_once 'includes/sidebar.php'; ?>

  <div class="main-wrapper">
    <?php require_once 'includes/header.php'; ?>

    <main class="dashboard-content animate-fade-in">
      <div class="dashboard-header">
        <div>
          <h1 style="margin: 0; font-size: 1.75rem; color: #1e293b;">Candidates for <?= htmlspecialchars($position['name']) ?></h1>
          <p class="welcome-msg" style="margin-top: 4px;"><?= htmlspecialchars($position['election_title']) ?></p>
        </div>
        <div>
          <a href="view_election.php?id=<?= $position['election_id'] ?>" style="display: flex; align-items: center; gap: 8px; color: #4f46e5; font-weight: 600; text-decoration: none; background: #ffffff; padding: 10px 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
            <i data-lucide="arrow-left" style="width: 16px;"></i>
            Back to Election
          </a>
        </div>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 24px;">
        <div style="background: #ffffff; border: 1px solid #f3f4f6; border-radius: 16px; padding: 24px; height: fit-content;">
          <h3 style="margin-top: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 20px;">Add New Candidate</h3>
          <form action="api/add_candidate.php" method="POST">
            <input type="hidden" name="position_id" value="<?= $position_id ?>">
            <input type="hidden" name="election_id" value="<?= $position['election_id'] ?>">
            
            <div style="margin-bottom: 16px;">
              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #64748b; margin-bottom: 6px;">Select Student</label>
              <select name="user_id" style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; outline: none; background: #ffffff; font-size: 0.875rem;" required>
                <option value="">-- Choose Student --</option>
                <?php foreach ($users as $u): ?>
                  <option value="<?= $u['id'] ?>"><?= htmlspecialchars($u['name']) ?> (<?= $u['student_id'] ?>)</option>
                <?php endforeach; ?>
              </select>
            </div>

            <div style="margin-bottom: 16px;">
              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #64748b; margin-bottom: 6px;">Party Name</label>
              <input type="text" name="party_name" style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 0.875rem;" placeholder="e.g. Independent">
            </div>

            <div style="margin-bottom: 24px;">
              <label style="display: block; font-size: 0.75rem; font-weight: 600; color: #64748b; margin-bottom: 6px;">Manifesto</label>
              <textarea name="manifesto" rows="4" style="width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; outline: none; font-size: 0.875rem; font-family: inherit;" placeholder="Briefly describe the candidate's goals..."></textarea>
            </div>

            <button type="submit" style="width: 100%; background: #4f46e5; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;">
              <i data-lucide="user-plus" style="width: 18px;"></i>
              Register Candidate
            </button>
          </form>
        </div>

        <div style="background: #ffffff; border: 1px solid #f3f4f6; border-radius: 16px; overflow: hidden;">
          <div style="padding: 24px; border-bottom: 1px solid #f3f4f6;">
            <h3 style="margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b;">Registered Candidates</h3>
          </div>
          
          <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse;">
              <thead>
                <tr style="background: #f9fafb; border-bottom: 1px solid #f3f4f6;">
                  <th style="padding: 12px 24px; text-align: left; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase;">Student Info</th>
                  <th style="padding: 12px 24px; text-align: left; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase;">Party Affiliation</th>
                  <th style="padding: 12px 24px; text-align: left; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase;">Status</th>
                  <th style="padding: 12px 24px; text-align: right; font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase;">Actions</th>
                </tr>
              </thead>
              <tbody>
                <?php if (empty($candidates)): ?>
                  <tr>
                    <td colspan="4" style="padding: 48px; text-align: center; color: #94a3b8;">
                      <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
                        <i data-lucide="users" style="width: 48px; height: 48px; color: #e2e8f0;"></i>
                        <span>No candidates have been registered for this position yet.</span>
                      </div>
                    </td>
                  </tr>
                <?php else: ?>
                  <?php foreach ($candidates as $c): ?>
                    <tr style="border-bottom: 1px solid #f3f4f6; transition: background 0.2s;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='transparent'">
                      <td style="padding: 16px 24px;">
                        <div style="display: flex; align-items: center; gap: 12px;">
                          <div style="width: 36px; height: 36px; background: #e0e7ff; color: #4f46e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem;">
                            <?= strtoupper(substr($c['name'], 0, 1)) ?>
                          </div>
                          <div>
                            <div style="font-weight: 600; color: #1e293b;"><?= htmlspecialchars($c['name']) ?></div>
                            <div style="font-size: 0.75rem; color: #64748b;"><?= $c['student_id'] ?></div>
                          </div>
                        </div>
                      </td>
                      <td style="padding: 16px 24px;">
                        <span style="background: #f1f5f9; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: #475569;">
                          <?= htmlspecialchars($c['party_name'] ?: 'Independent') ?>
                        </span>
                      </td>
                      <td style="padding: 16px 24px;">
                        <span style="padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: <?= $c['approved'] ? '#dcfce7' : '#f1f5f9' ?>; color: <?= $c['approved'] ? '#166534' : '#475569' ?>;">
                          <?= $c['approved'] ? 'Approved' : 'Pending' ?>
                        </span>
                      </td>
                      <td style="padding: 16px 24px; text-align: right;">
                        <form action="api/toggle_candidate_approval.php" method="POST" style="display:inline;">
                          <input type="hidden" name="id" value="<?= $c['id'] ?>">
                          <button type="submit" style="background: <?= $c['approved'] ? '#fef2f2' : '#f0f9ff' ?>; color: <?= $c['approved'] ? '#ef4444' : '#0ea5e9' ?>; border: 1px solid <?= $c['approved'] ? '#fee2e2' : '#e0f2fe' ?>; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.2s;">
                            <?= $c['approved'] ? 'Revoke Approval' : 'Approve' ?>
                          </button>
                        </form>
                      </td>
                    </tr>
                  <?php endforeach; ?>
                <?php endif; ?>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    lucide.createIcons();
  </script>
</body>
</html>

