{% extends 'base.html' %}
{% block content %}
<section class="page-header">
    <div>
        <h2>Patient Hub</h2>
        <p class="helper-text">See real doctor availability, book without guesswork, and manage your visit history in one place.</p>
    </div>
</section>

<section class="stats-grid">
    <article class="stat-card"><span>Total Appointments</span><strong>{{ stats.total_appointments }}</strong></article>
    <article class="stat-card"><span>Upcoming</span><strong>{{ stats.upcoming }}</strong></article>
    <article class="stat-card"><span>Completed</span><strong>{{ stats.completed }}</strong></article>
    <article class="stat-card"><span>Cancelled</span><strong>{{ stats.cancelled }}</strong></article>
</section>

<article class="panel stack">
    <div class="inline-space">
        <div>
            <h3>Notifications</h3>
            <p class="helper-text">Recent reminders and appointment updates for your account.</p>
        </div>
    </div>
    {% if notifications %}
        <div class="notice-list">
            {% for notification in notifications %}
                <div class="notice-card {% if not notification.is_read %}notice-unread{% endif %}">
                    <div class="inline-space">
                        <div class="stacked-cell">
                            <strong>{{ notification.title }}</strong>
                            <span class="helper-text">{{ notification.message }}</span>
                            <span class="helper-text">{{ notification.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                        </div>
                        {% if not notification.is_read %}
                            <form method="post" action="/notifications/{{ notification.id }}/read">
                                <button type="submit" class="button-secondary">Mark read</button>
                            </form>
                        {% else %}
                            <span class="badge badge-muted">Read</span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="empty-state">No notifications yet.</p>
    {% endif %}
</article>

<section class="grid two">
    <article class="panel stack">
        <div>
            <h3>Book a New Appointment</h3>
            <p class="helper-text">Choose one of the suggested open slots first, or use the manual fallback if needed.</p>
        </div>
        <form method="post" action="/patient/book" class="stack">
            <label>Suggested available slot</label>
            <select name="slot_choice">
                <option value="">Choose from real open times</option>
                {% for option in open_slot_choices %}
                    <option value="{{ option.value }}">{{ option.label }}</option>
                {% endfor %}
            </select>
            <p class="field-note">These options are generated from active doctor schedules and already avoid booked times.</p>

            <label>Doctor</label>
            <select name="doctor_id">
                <option value="">Choose doctor for manual booking</option>
                {% for d in doctors %}
                    <option value="{{ d.id }}">{{ d.full_name }}{% if d.specialty %} · {{ d.specialty }}{% endif %} ({{ slot_counts.get(d.id, 0) }} active slot{% if slot_counts.get(d.id, 0) != 1 %}s{% endif %})</option>
                {% endfor %}
            </select>
            <label>Manual date and time (optional fallback)</label>
            <input type="datetime-local" name="scheduled_time" />
            <label>Duration minutes</label>
            <input type="number" name="duration_minutes" value="30" min="10" max="180" required />
            <label>Reason for visit</label>
            <input type="text" name="reason" placeholder="e.g. Routine checkup" />
            <button type="submit">Book appointment</button>
        </form>
    </article>

    <article class="panel stack">
        <div>
            <h3>Upcoming Visits</h3>
            <p class="helper-text">Your next scheduled appointments appear here for quick review.</p>
        </div>
        {% if upcoming_appointments %}
            <div class="stack compact-list">
                {% for a in upcoming_appointments %}
                    {% set doctor = doctor_lookup.get(a.doctor_id) %}
                    <div class="subpanel">
                        <div class="inline-space">
                            <div class="stacked-cell">
                                <strong>{{ doctor.full_name if doctor else 'Doctor #' ~ a.doctor_id }}</strong>
                                <span class="helper-text">{{ a.scheduled_time.strftime('%Y-%m-%d %H:%M') }} · {{ a.duration_minutes }} mins</span>
                                <span class="helper-text">Reason: {{ a.reason or 'Not provided' }}</span>
                                <span class="helper-text">{{ 'Doctor confirmed' if a.is_confirmed else 'Awaiting doctor confirmation' }}</span>
                                {% if a.notes %}
                                    <span class="helper-text">Latest notes: {{ a.notes }}</span>
                                {% endif %}
                            </div>
                            <span class="badge badge-success">{{ a.status.value.replace('_', ' ') }}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">No upcoming appointments yet.</p>
        {% endif %}
    </article>
</section>

<article class="panel stack">
    <div>
        <h3>Doctor Availability</h3>
        <p class="helper-text">Check each doctor's specialty, weekly schedule, and next open time before booking or rescheduling.</p>
    </div>

    <form method="get" action="/patient" class="filter-bar">
        <div class="filter-fields">
            <div class="stacked-cell">
                <label for="doctor_query">Search doctor</label>
                <input id="doctor_query" type="text" name="doctor_query" value="{{ doctor_query }}" placeholder="Name or specialty" />
            </div>
            <div class="stacked-cell">
                <label for="specialty">Specialty</label>
                <select id="specialty" name="specialty">
                    <option value="">All specialties</option>
                    {% for specialty in specialty_options %}
                        <option value="{{ specialty }}" {% if selected_specialty == specialty %}selected{% endif %}>{{ specialty }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="inline-actions wrap">
            <button type="submit" class="button-secondary">Apply filters</button>
            <a href="/patient" class="text-link-button">Clear</a>
        </div>
    </form>

    {% if doctor_availability %}
        <div class="availability-grid">
            {% for entry in doctor_availability %}
                <div class="availability-card">
                    <div class="inline-space">
                        <div class="stacked-cell">
                            <strong>{{ entry.doctor.full_name }}</strong>
                            <span class="helper-text">{{ entry.doctor.specialty or 'General Practice' }}</span>
                            <span class="helper-text">{{ entry.active_slot_count }} active weekly slot{% if entry.active_slot_count != 1 %}s{% endif %}</span>
                        </div>
                        <span class="badge {{ 'badge-info' if entry.next_open_slot else 'badge-muted' }}">
                            {{ 'Open for booking' if entry.next_open_slot else 'No openings yet' }}
                        </span>
                    </div>

                    {% if entry.next_open_slot %}
                        <div class="availability-highlight">
                            <strong>Next open slot</strong>
                            <span>{{ entry.next_open_slot.scheduled_time.strftime('%a %d %b %Y %H:%M') }}</span>
                        </div>
                    {% else %}
                        <p class="empty-state">No open slot in the next {{ availability_window_days }} days.</p>
                    {% endif %}

                    <div class="stack">
                        <span class="helper-text">Weekly schedule</span>
                        <div class="chip-list">
                            {% for schedule in entry.schedule_lines %}
                                <span class="chip">{{ schedule }}</span>
                            {% else %}
                                <span class="chip chip-muted">No active schedule published</span>
                            {% endfor %}
                        </div>
                    </div>

                    {% if entry.leave_blocks %}
                        <div class="stack">
                            <span class="helper-text">Upcoming unavailable periods</span>
                            <div class="chip-list">
                                {% for leave in entry.leave_blocks[:3] %}
                                    <span class="chip chip-muted">{{ leave.start_date.strftime('%d %b %H:%M') }} → {{ leave.end_date.strftime('%d %b %H:%M') }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if entry.open_slot_choices %}
                        <div class="stack">
                            <span class="helper-text">Open times you can book now</span>
                            <div class="chip-list">
                                {% for option in entry.open_slot_choices %}
                                    <span class="chip chip-accent">{{ option.scheduled_time.strftime('%a %d %b · %H:%M') }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p class="empty-state">No active doctors match the current search or specialty filter.</p>
    {% endif %}
</article>

{% if visit_notes %}
<article class="panel stack">
    <div>
        <h3>Recent Visit Notes</h3>
        <p class="helper-text">Review the latest notes left by doctors after completed visits.</p>
    </div>
    <div class="stack note-list">
        {% for a in visit_notes %}
            {% set doctor = doctor_lookup.get(a.doctor_id) %}
            <div class="note-card">
                <strong>{{ doctor.full_name if doctor else 'Doctor #' ~ a.doctor_id }}</strong>
                <div class="helper-text">{{ a.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</div>
                {% if a.diagnosis %}<div class="helper-text">Diagnosis: {{ a.diagnosis }}</div>{% endif %}
                {% if a.prescription %}<div class="helper-text">Advice / Prescription: {{ a.prescription }}</div>{% endif %}
                {% if a.follow_up_date %}<div class="helper-text">Follow-up: {{ a.follow_up_date.strftime('%Y-%m-%d %H:%M') }}</div>{% endif %}
                <p>{{ a.notes }}</p>
            </div>
        {% endfor %}
    </div>
</article>
{% endif %}

<article class="panel stack">
    <div>
        <h3>Appointment History</h3>
        <p class="helper-text">Cancel or reschedule any appointment that is still marked as scheduled.</p>
    </div>

    {% if appointments %}
        <div class="table-responsive">
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Doctor</th>
                        <th>When</th>
                        <th>Status</th>
                        <th>Reason / Notes</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for a in appointments %}
                    {% set doctor = doctor_lookup.get(a.doctor_id) %}
                    {% set availability = availability_lookup.get(a.doctor_id) %}
                    <tr>
                        <td>{{ a.id }}</td>
                        <td>
                            <div class="stacked-cell">
                                <strong>{{ doctor.full_name if doctor else 'Doctor #' ~ a.doctor_id }}</strong>
                                <span class="helper-text">{{ doctor.email if doctor else 'Archived doctor' }}</span>
                            </div>
                        </td>
                        <td>{{ a.scheduled_time.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td>
                            <span class="badge {{ 'badge-success' if a.status.value in ['scheduled', 'completed'] else 'badge-muted' }}">
                                {{ a.status.value.replace('_', ' ') }}
                            </span>
                        </td>
                        <td>
                            <div class="stacked-cell">
                                <span>{{ a.reason or 'No reason provided' }}</span>
                                <span class="helper-text">{{ 'Doctor confirmed' if a.is_confirmed else 'Awaiting doctor confirmation' }}</span>
                                <span class="helper-text">{{ a.notes or 'No consultation notes yet' }}</span>
                                {% if a.diagnosis %}<span class="helper-text">Diagnosis: {{ a.diagnosis }}</span>{% endif %}
                                {% if a.prescription %}<span class="helper-text">Advice / Prescription: {{ a.prescription }}</span>{% endif %}
                                {% if a.follow_up_date %}<span class="helper-text">Follow-up: {{ a.follow_up_date.strftime('%Y-%m-%d %H:%M') }}</span>{% endif %}
                            </div>
                        </td>
                        <td>
                            {% if a.status.value == 'scheduled' %}
                                <div class="stack compact-list">
                                    <form method="post" action="/patient/appointments/{{ a.id }}/cancel" class="inline">
                                        <button type="submit">Cancel</button>
                                    </form>
                                    <form method="post" action="/patient/appointments/{{ a.id }}/reschedule" class="inline wrap">
                                        <input type="datetime-local" name="new_time" required />
                                        <button type="submit">Reschedule</button>
                                    </form>
                                    {% if availability and availability.next_open_slot %}
                                        <span class="helper-text">Next open slot: {{ availability.next_open_slot.scheduled_time.strftime('%a %d %b %H:%M') }}</span>
                                    {% endif %}
                                </div>
                            {% else %}
                                <span class="helper-text">No further action</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <p class="empty-state">No appointments recorded yet. Use the booking form to schedule your first visit.</p>
    {% endif %}
</article>
{% endblock %}