<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard — TCCP Admin</title>
    <link rel="icon" href="{{ url_for('static', filename='images/logo.png') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: #f4f6f9; color: #333; min-height: 100vh; }
        .topbar {
            background: linear-gradient(135deg, #1a7a7a, #5b2d8e); padding: 16px 32px;
            display: flex; justify-content: space-between; align-items: center; color: #fff;
        }
        .topbar h1 { font-size: 1.1rem; font-weight: 700; }
        .topbar-links { display: flex; gap: 16px; align-items: center; }
        .topbar-links a { color: rgba(255,255,255,0.8); font-size: 0.85rem; text-decoration: none; }
        .topbar-links a:hover { color: #fff; }
        .main { max-width: 1000px; margin: 32px auto; padding: 0 24px; }
        .flash { padding: 12px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 0.88rem; }
        .flash-success { background: #d1fae5; color: #065f46; }
        .flash-danger { background: #fee2e2; color: #991b1b; }
        .flash-info { background: #dbeafe; color: #1e40af; }
        .panel { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 28px; overflow: hidden; }
        .panel-header { padding: 20px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
        .panel-header h2 { font-size: 1rem; font-weight: 700; color: #333; }
        .panel-body { padding: 24px; }
        .form-row { display: flex; gap: 16px; margin-bottom: 14px; }
        .form-row .fg { flex: 1; }
        label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; color: #555; }
        input, textarea { width: 100%; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.9rem; }
        input:focus, textarea:focus { outline: none; border-color: #1a7a7a; box-shadow: 0 0 0 2px rgba(26,122,122,0.1); }
        textarea { min-height: 80px; resize: vertical; }
        .btn { padding: 10px 22px; border: none; border-radius: 50px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; }
        .btn-primary { background: linear-gradient(135deg, #1a7a7a, #22a1a1); color: #fff; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,122,122,0.3); }
        .btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 6px; }
        .btn-success { background: #d1fae5; color: #065f46; }
        .btn-danger { background: #fee2e2; color: #991b1b; }
        .btn-outline { background: transparent; border: 1px solid #e5e7eb; color: #555; }
        .quote-item { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: start; gap: 16px; }
        .quote-item:last-child { border-bottom: none; }
        .quote-text { flex: 1; }
        .quote-text blockquote { font-style: italic; font-size: 0.9rem; color: #444; margin-bottom: 4px; }
        .quote-text cite { font-size: 0.78rem; color: #888; font-style: normal; }
        .active-badge { display: inline-block; padding: 2px 10px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; background: #d1fae5; color: #065f46; }
        .msg-item { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
        .msg-item:last-child { border-bottom: none; }
        .msg-meta { font-size: 0.78rem; color: #888; margin-top: 6px; }
        .unread { background: #fefce8; }
        .badge { display: inline-block; padding: 2px 8px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; background: #fee2e2; color: #991b1b; }
    </style>
</head>
<body>
    <div class="topbar">
        <h1>🏠 TCCP Admin</h1>
        <div class="topbar-links">
            <a href="{{ url_for('index') }}" target="_blank">View Website</a>
            <a href="{{ url_for('admin_logout') }}">Logout</a>
        </div>
    </div>

    <div class="main">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% for cat, msg in messages %}
        <div class="flash flash-{{ cat }}">{{ msg }}</div>
        {% endfor %}
        {% endwith %}

        <!-- ADD QUOTE -->
        <div class="panel">
            <div class="panel-header">
                <h2>✨ Publish Inspirational Quote</h2>
            </div>
            <div class="panel-body">
                <form method="POST" action="{{ url_for('admin_quote_add') }}">
                    <div class="form-row">
                        <div class="fg">
                            <label>Quote Text *</label>
                            <textarea name="text" placeholder="Type your inspirational quote here..." required></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="fg">
                            <label>Author (optional)</label>
                            <input type="text" name="author" placeholder="e.g. Nelson Mandela">
                        </div>
                        <div style="display:flex;align-items:flex-end;">
                            <button type="submit" class="btn btn-primary">Publish Quote</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- EXISTING QUOTES -->
        <div class="panel">
            <div class="panel-header">
                <h2>📝 All Quotes ({{ quotes|length }})</h2>
            </div>
            {% if quotes %}
            {% for q in quotes %}
            <div class="quote-item">
                <div class="quote-text">
                    <blockquote>"{{ q.text }}"</blockquote>
                    {% if q.author %}<cite>— {{ q.author }}</cite>{% endif %}
                    {% if q.is_active %}<span class="active-badge" style="margin-left:8px;">ACTIVE</span>{% endif %}
                </div>
                <div style="display:flex;gap:6px;flex-shrink:0;">
                    {% if not q.is_active %}
                    <form method="POST" action="{{ url_for('admin_quote_activate', qid=q.id) }}" style="display:inline;">
                        <button class="btn btn-sm btn-success" title="Activate">✓</button>
                    </form>
                    {% endif %}
                    <form method="POST" action="{{ url_for('admin_quote_delete', qid=q.id) }}" style="display:inline;"
                        onsubmit="return confirm('Delete this quote?');">
                        <button class="btn btn-sm btn-danger" title="Delete">✕</button>
                    </form>
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div style="padding:40px;text-align:center;color:#888;">No quotes yet. Add one above!</div>
            {% endif %}
        </div>

        <!-- MESSAGES -->
        <div class="panel">
            <div class="panel-header">
                <h2>📬 Contact Messages</h2>
                {% if unread > 0 %}<span class="badge">{{ unread }} unread</span>{% endif %}
            </div>
            {% if messages %}
            {% for m in messages %}
            <div class="msg-item {{ 'unread' if not m.is_read }}">
                <div style="display:flex;justify-content:space-between;align-items:start;">
                    <div>
                        <strong style="font-size:0.9rem;">{{ m.name }}</strong>
                        <span style="font-size:0.78rem;color:#888;margin-left:8px;">{{ m.email }}</span>
                        {% if m.subject %}<div style="font-size:0.88rem;font-weight:600;margin-top:4px;">{{ m.subject }}</div>{% endif %}
                        <p style="font-size:0.85rem;color:#555;margin-top:6px;">{{ m.message[:200] }}{% if m.message|length > 200 %}...{% endif %}</p>
                        <div class="msg-meta">{{ m.created_at.strftime('%d %b %Y, %H:%M') }}</div>
                    </div>
                    {% if not m.is_read %}
                    <form method="POST" action="{{ url_for('admin_message_read', mid=m.id) }}">
                        <button class="btn btn-sm btn-outline" title="Mark read">✓ Read</button>
                    </form>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% else %}
            <div style="padding:40px;text-align:center;color:#888;">No messages yet.</div>
            {% endif %}
        </div>

        <!-- CHANGE PASSWORD -->
        <div class="panel">
            <div class="panel-header"><h2>🔒 Change Password</h2></div>
            <div class="panel-body">
                <form method="POST" action="{{ url_for('admin_change_password') }}">
                    <div class="form-row">
                        <div class="fg">
                            <label>Current Password</label>
                            <input type="password" name="old_password" required>
                        </div>
                        <div class="fg">
                            <label>New Password</label>
                            <input type="password" name="new_password" required>
                        </div>
                        <div style="display:flex;align-items:flex-end;">
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
