<?php
if (function_exists('session_status')) {
    require_once __DIR__ . '/../config/db.php';
    initSecureSession();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Administrativo | Lumière Nail Salon &amp; Spa</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=Cormorant+Garamond:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../styles.css">
    <style>
        .admin-shell {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .admin-topbar {
            background: #23151d;
            color: #fff;
            padding: 0.9rem 0;
            position: sticky;
            top: 0;
            z-index: 60;
        }
        .admin-topbar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .admin-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #fff;
            text-decoration: none;
        }
        .admin-nav-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .tab-btn {
            background: rgba(255, 255, 255, 0.1);
            color: #f3dfe8;
            border: 1px solid rgba(255, 255, 255, 0.16);
            padding: 0.5rem 1rem;
            border-radius: 99px;
            font-family: inherit;
            font-size: 0.84rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .tab-btn.active, .tab-btn:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary-light);
        }
        .admin-user-bar {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.82rem;
        }
        .btn-logout {
            background: rgba(201, 59, 75, 0.25);
            color: #ffd6da;
            border: 1px solid rgba(201, 59, 75, 0.5);
            padding: 0.4rem 0.85rem;
            border-radius: 99px;
            cursor: pointer;
            font-weight: 600;
        }
        .btn-logout:hover {
            background: var(--danger);
            color: #fff;
        }
        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
            gap: 1.1rem;
            margin: 1.5rem 0;
        }
        .kpi-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1.25rem;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .kpi-label {
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
        }
        .kpi-value {
            font-family: var(--font-serif);
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            margin: 0.3rem 0;
            line-height: 1.1;
        }
        .kpi-sub {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .agenda-toolbar {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1rem 1.25rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }
        .toolbar-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.65rem;
        }
        .schedule-board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
            gap: 1.15rem;
            margin-bottom: 2.5rem;
        }
        .staff-column {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        .staff-col-header {
            background: var(--bg-soft);
            padding: 0.9rem 1.1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .staff-col-header img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--gold);
        }
        .staff-col-body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        .appointment-card {
            border: 1px solid var(--border);
            border-left: 4px solid var(--primary);
            border-radius: var(--radius-sm);
            padding: 0.85rem;
            background: #fff;
        }
        .appointment-card.status-completada {
            border-left-color: var(--success);
            background: #f6fcf9;
        }
        .appointment-card.status-cancelada {
            border-left-color: var(--danger);
            background: #fff8f8;
            opacity: 0.75;
        }
        .appt-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.35rem;
        }
        .appt-time {
            font-weight: 700;
            font-size: 0.86rem;
            color: var(--primary);
        }
        .appt-code {
            font-size: 0.72rem;
            font-weight: 700;
            background: var(--bg-soft);
            padding: 0.15rem 0.5rem;
            border-radius: 6px;
        }
        .appt-client {
            font-weight: 700;
            font-size: 0.95rem;
            margin-bottom: 0.2rem;
        }
        .appt-services {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.65rem;
        }
        .appt-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding-top: 0.55rem;
            border-top: 1px dashed var(--border);
        }
        .status-select {
            padding: 0.35rem 0.55rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            font-size: 0.78rem;
            font-weight: 600;
            background: #fff;
        }
        .staff-admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.15rem;
            margin-bottom: 2.5rem;
        }
        .staff-admin-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 1.25rem;
            box-shadow: var(--shadow-sm);
        }
        .schedule-matrix {
            display: grid;
            gap: 0.45rem;
            margin-top: 0.75rem;
            max-height: 260px;
            overflow-y: auto;
            padding: 0.65rem;
            background: var(--bg-body);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
        }
        .schedule-row {
            display: grid;
            grid-template-columns: 110px 1fr 1fr;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
        }
        .login-wrapper {
            min-height: 92vh;
            display: grid;
            place-items: center;
            padding: 1.5rem;
        }
        .login-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 2.25rem 1.85rem;
            max-width: 430px;
            width: 100%;
            box-shadow: var(--shadow-md);
        }
    </style>
</head>
<body class="admin-shell">

    <!-- ====================================================================
         VISTA DE LOGIN SEGURO
         ==================================================================== -->
    <main id="loginView" class="login-wrapper">
        <div class="login-card">
            <div style="text-align:center; margin-bottom:1.5rem;">
                <span class="brand-icon" style="margin:0 auto 0.65rem;">✦</span>
                <h1 style="font-family:var(--font-serif); font-size:1.85rem;">Panel Administrativo</h1>
                <p style="font-size:0.86rem; color:var(--text-muted);">Ingresa tus credenciales para gestionar citas, agenda y personal</p>
            </div>

            <div id="loginAlert" class="alert-box hidden"></div>

            <form id="loginForm">
                <div class="form-group">
                    <label for="loginEmail">Correo Electrónico</label>
                    <input type="email" id="loginEmail" class="form-input" value="admin@lumierenails.com" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">Contraseña</label>
                    <input type="password" id="loginPassword" class="form-input" value="admin123" required>
                </div>
                <button type="submit" id="btnLoginSubmit" class="btn-primary btn-full" style="margin-top:0.5rem;">
                    Iniciar Sesión Segura →
                </button>
            </form>

            <div style="margin-top:1.25rem; text-align:center; font-size:0.8rem; color:var(--text-muted);">
                <p>Credenciales por defecto: <code>admin@lumierenails.com</code> / <code>admin123</code></p>
                <p style="margin-top:0.5rem;"><a href="../index.html" style="color:var(--primary); font-weight:600;">← Volver al Agendador Público</a></p>
            </div>
        </div>
    </main>

    <!-- ====================================================================
         VISTA DEL DASHBOARD ADMINISTRATIVO AUTENTICADO
         ==================================================================== -->
    <div id="dashboardView" class="hidden">
        <header class="admin-topbar">
            <div class="container admin-topbar-inner">
                <a href="dashboard.php" class="admin-brand">
                    <span class="brand-icon">✦</span>
                    <div>
                        <strong style="letter-spacing:0.1em;">LUMIÈRE ADMIN</strong>
                        <span style="display:block; font-size:0.7rem; opacity:0.75;">Gestión de Salón &amp; Métricas (COP)</span>
                    </div>
                </a>

                <nav class="admin-nav-tabs" aria-label="Módulos del panel">
                    <button type="button" class="tab-btn active" data-tab="tab-agenda">📅 Agenda Visual y Ventas</button>
                    <button type="button" class="tab-btn" data-tab="tab-staff">👩‍🎨 Gestión de Personal (CRUD)</button>
                    <a href="../index.html" class="tab-btn" style="text-decoration:none;">🌐 Ver Web Pública</a>
                </nav>

                <div class="admin-user-bar">
                    <span id="adminUserBadge">👤 admin@lumierenails.com (ADMIN)</span>
                    <button type="button" id="btnLogout" class="btn-logout">Salir</button>
                </div>
            </div>
        </header>

        <main class="container" style="padding-top:1rem; padding-bottom:3rem;">
            <div id="adminToast" class="alert-box hidden" style="background:#eefaf4; color:#145a3b; border-color:#b8e6ce;"></div>

            <!-- MÓDULO 1: MÉTRICAS DE VENTAS DIARIAS + AGENDA VISUAL -->
            <section id="tab-agenda">
                <div class="kpi-grid">
                    <article class="kpi-card">
                        <span class="kpi-label">💰 Ingresos del Día (COP)</span>
                        <strong class="kpi-value" id="kpiIngresosDia">$0 COP</strong>
                        <span class="kpi-sub" id="kpiIngresosCobrados">Cobrado en completadas: $0 COP</span>
                    </article>

                    <article class="kpi-card">
                        <span class="kpi-label">✅ Citas Atendidas Hoy</span>
                        <strong class="kpi-value" id="kpiCitasAtendidas">0</strong>
                        <span class="kpi-sub" id="kpiCitasProgramadas">0 programadas pendientes</span>
                    </article>

                    <article class="kpi-card">
                        <span class="kpi-label">🏆 Manicurista Destacada</span>
                        <strong class="kpi-value" id="kpiTopStaff" style="font-size:1.55rem;">—</strong>
                        <span class="kpi-sub" id="kpiTopCount">Mayor volumen de servicios hoy</span>
                    </article>

                    <article class="kpi-card">
                        <span class="kpi-label">📈 Proyección Semanal (COP)</span>
                        <strong class="kpi-value" id="kpiProyeccionSemanal">$0 COP</strong>
                        <span class="kpi-sub" id="kpiCitasSemana">Acumulado Lunes a Domingo</span>
                    </article>
                </div>

                <div class="agenda-toolbar">
                    <div class="toolbar-group">
                        <label for="agendaDateInput" style="font-weight:700; font-size:0.86rem;">Fecha de Agenda:</label>
                        <input type="date" id="agendaDateInput" class="form-input" style="width:auto;">
                        <button type="button" id="btnTodayAgenda" class="btn-secondary" style="padding:0.5rem 0.9rem; font-size:0.82rem;">Hoy</button>
                    </div>

                    <div class="toolbar-group">
                        <span style="font-size:0.84rem; font-weight:600; color:var(--text-muted);">Vista:</span>
                        <button type="button" class="pill active" data-vista="diaria">Vista Diaria (Cronograma)</button>
                        <button type="button" class="pill" data-vista="semanal">Vista Semanal</button>
                    </div>
                </div>

                <div id="scheduleBoard" class="schedule-board"></div>
            </section>

            <!-- MÓDULO 2: GESTIÓN DE PERSONAL (CRUD TRABAJADORES + FOTO + HORARIOS) -->
            <section id="tab-staff" class="hidden">
                <div class="agenda-toolbar">
                    <div>
                        <h2 style="font-family:var(--font-serif); font-size:1.7rem;">Equipo de Manicuristas y Horarios</h2>
                        <p style="font-size:0.85rem; color:var(--text-muted);">Alta, baja, edición de perfil, foto segura en <code>/uploads/staff/</code> y turnos por día.</p>
                    </div>
                    <button type="button" id="btnOpenNewStaffModal" class="btn-primary">
                        + Registrar Nueva Manicurista
                    </button>
                </div>

                <div id="staffAdminGrid" class="staff-admin-grid"></div>
            </section>
        </main>
    </div>

    <!-- MODAL CRUD DE TRABAJADORA -->
    <div id="staffModal" class="modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="staffModalTitle">
        <div class="modal-card" style="max-width:620px; text-align:left;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
                <h2 id="staffModalTitle" style="font-family:var(--font-serif); font-size:1.65rem; margin:0;">Perfil de Manicurista</h2>
                <button type="button" id="btnCloseStaffModal" class="btn-icon">✕</button>
            </div>

            <form id="staffForm" enctype="multipart/form-data">
                <input type="hidden" name="id" id="staffIdInput" value="0">

                <div class="form-grid">
                    <div class="form-group">
                        <label for="staffNombre">Nombre Completo *</label>
                        <input type="text" id="staffNombre" name="nombre_completo" class="form-input" required placeholder="Ej. Valeria Mendoza">
                    </div>
                    <div class="form-group">
                        <label for="staffTelefono">WhatsApp (con código de país) *</label>
                        <input type="tel" id="staffTelefono" name="telefono" class="form-input" required placeholder="Ej. 573001112233">
                    </div>
                </div>

                <div class="form-grid">
                    <div class="form-group">
                        <label for="staffEspecialidad">Especialidad / Rol Artístico</label>
                        <input type="text" id="staffEspecialidad" name="especialidad" class="form-input" placeholder="Ej. Master en Acrílicas & Gel Ruso">
                    </div>
                    <div class="form-group">
                        <label for="staffFoto">Foto de Perfil (JPG, PNG, WEBP máx 3MB)</label>
                        <input type="file" id="staffFoto" name="foto" class="form-input" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
                    </div>
                </div>

                <div class="form-group">
                    <label>Asignación de Horarios de Atención (Días Laborables y Turno)</label>
                    <div id="scheduleMatrixContainer" class="schedule-matrix"></div>
                </div>

                <div style="display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.25rem;">
                    <button type="button" id="btnCancelStaffModal" class="btn-secondary">Cancelar</button>
                    <button type="submit" id="btnSaveStaff" class="btn-primary">Guardar Manicurista</button>
                </div>
            </form>
        </div>
    </div>

    <script src="admin.js" defer></script>
</body>
</html>
