<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complaint #{{ complaint.id|slice:":8" }}</title>
    <style>
        @page {
            size: A4;
            margin: 2cm;

            @top-center {
                content: "PX360 - Patient Experience Management";
                font-size: 10pt;
                color: #666;
            }

            @bottom-center {
                content: "Page " counter(page) " of " counter(pages);
                font-size: 9pt;
                color: #999;
            }
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 11pt;
            line-height: 1.5;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .document {
            max-width: 210mm;
            margin: 0 auto;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .header h1 {
            margin: 0 0 10px 0;
            font-size: 18pt;
            font-weight: 600;
        }

        .header .meta {
            font-size: 10pt;
            opacity: 0.9;
        }

        .header .meta div {
            margin: 3px 0;
        }

        .section {
            margin-bottom: 25px;
            page-break-inside: avoid;
        }

        .section-title {
            font-size: 14pt;
            font-weight: 600;
            color: #667eea;
            border-bottom: 2px solid #667eea;
            padding-bottom: 8px;
            margin-bottom: 15px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 15px;
        }

        .info-item {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #667eea;
        }

        .info-label {
            font-size: 9pt;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .info-value {
            font-size: 11pt;
            color: #212529;
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 9pt;
            font-weight: 600;
        }

        .badge-open { background: #e3f2fd; color: #1976d2; }
        .badge-in_progress { background: #fff3e0; color: #f57c00; }
        .badge-resolved { background: #e8f5e9; color: #388e3c; }
        .badge-closed { background: #f5f5f5; color: #616161; }
        .badge-cancelled { background: #ffebee; color: #d32f2f; }

        .badge-low { background: #e8f5e9; color: #388e3c; }
        .badge-medium { background: #fff3e0; color: #f57c00; }
        .badge-high { background: #ffebee; color: #d32f2f; }
        .badge-critical { background: #880e4f; color: #fff; }

        .description-box {
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            line-height: 1.6;
        }

        .ai-section {
            background: linear-gradient(135deg, #f3e5f5 0%, #e8eaf6 100%);
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .ai-section .section-title {
            color: #7b1fa2;
            border-bottom-color: #7b1fa2;
        }

        .ai-box {
            background: white;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #7b1fa2;
        }

        .ai-box .ai-label {
            font-size: 9pt;
            color: #7b1fa2;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .emotion-bar {
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
        }

        .emotion-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
        }

        .resolution-box {
            background: #e8f5e9;
            border: 1px solid #c8e6c9;
            border-radius: 6px;
            padding: 15px;
        }

        .resolution-box .resolution-label {
            font-size: 9pt;
            color: #2e7d32;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .timeline-entry {
            padding-left: 20px;
            border-left: 3px solid #667eea;
            margin-bottom: 15px;
        }

        .timeline-entry .timestamp {
            font-size: 9pt;
            color: #666;
            margin-bottom: 5px;
        }

        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #dee2e6;
            text-align: center;
            color: #666;
            font-size: 9pt;
        }

        .footer .generated {
            margin-bottom: 10px;
        }

        .confidence-score {
            font-size: 10pt;
            font-weight: 600;
            color: #7b1fa2;
        }

        .staff-card {
            background: #e3f2fd;
            border-left: 4px solid #1976d2;
            padding: 12px;
            border-radius: 6px;
            margin-top: 10px;
        }

        .suggestion-box {
            background: linear-gradient(135deg, #e8f5e9 0%, #e1f5fe 100%);
            border: 1px solid #4caf50;
            border-radius: 6px;
            padding: 15px;
        }

        .page-break {
            page-break-before: always;
        }
    </style>
</head>
<body>
    <div class="document">
        <!-- Header -->
        <div class="header">
            <h1>{{ complaint.title }}</h1>
            <div class="meta">
                <div>
                    <strong>ID:</strong> {{ complaint.id|slice:":8" }}
                    <strong> • Status:</strong>
                    <span class="badge badge-{{ complaint.status }}">{{ complaint.get_status_display }}</span>
                    <strong> • Severity:</strong>
                    <span class="badge badge-{{ complaint.severity }}">{{ complaint.get_severity_display }}</span>
                </div>
                <div>
                    <strong>Patient:</strong> {{ complaint.patient.get_full_name }} (MRN: {{ complaint.patient.mrn }})
                </div>
                <div>
                    <strong>Hospital:</strong> {{ complaint.hospital.name_en }}
                    {% if complaint.department %}
                    <strong> • Department:</strong> {{ complaint.department.name_en }}
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Basic Information -->
        <div class="section">
            <h2 class="section-title">Complaint Information</h2>
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Category</div>
                    <div class="info-value">
                        <span class="badge" style="background: #e0e0e0;">{{ complaint.get_category_display }}</span>
                        {% if complaint.subcategory %}
                        <span style="margin-left: 8px;">/ {{ complaint.subcategory }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">Source</div>
                    <div class="info-value">{{ complaint.get_source_display }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Priority</div>
                    <div class="info-value">
                        <span class="badge" style="background: #e3f2fd; color: #1976d2;">{{ complaint.get_priority_display }}</span>
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">Encounter ID</div>
                    <div class="info-value">
                        {% if complaint.encounter_id %}
                        {{ complaint.encounter_id }}
                        {% else %}
                        <em>N/A</em>
                        {% endif %}
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">Created Date</div>
                    <div class="info-value">{{ complaint.created_at|date:"F d, Y H:i" }}</div>
                </div>
                <div class="info-item">
                    <div class="info-label">SLA Deadline</div>
                    <div class="info-value">{{ complaint.due_at|date:"F d, Y H:i" }}</div>
                </div>
            </div>
        </div>

        <!-- Description -->
        <div class="section">
            <h2 class="section-title">Complaint Description</h2>
            <div class="description-box">
                {{ complaint.description|linebreaks }}
            </div>
        </div>

        <!-- Staff Assignment -->
        {% if complaint.staff %}
        <div class="section">
            <h2 class="section-title">Staff Assignment</h2>
            <div class="staff-card">
                <div class="info-label">Assigned Staff Member</div>
                <div class="info-value" style="margin-top: 8px;">
                    <strong>{{ complaint.staff.get_full_name }}</strong>
                    {% if complaint.staff.first_name_ar or complaint.staff.last_name_ar %}
                    <br><span style="color: #666;">({{ complaint.staff.first_name_ar }} {{ complaint.staff.last_name_ar }})</span>
                    {% endif %}
                    {% if complaint.staff.job_title %}
                    <br><span style="color: #666; font-size: 10pt;">{{ complaint.staff.job_title }}</span>
                    {% endif %}
                </div>
                {% if complaint.metadata.ai_analysis.extracted_staff_name %}
                <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #bbdefb; font-size: 9pt; color: #666;">
                    <em>AI Extracted: "{{ complaint.metadata.ai_analysis.extracted_staff_name }}"</em>
                    {% if complaint.metadata.ai_analysis.staff_confidence %}
                    (Confidence: {{ complaint.metadata.ai_analysis.staff_confidence|mul:100|floatformat:0 }}%)
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- AI Analysis -->
        {% if complaint.short_description or complaint.suggested_action or complaint.emotion %}
        <div class="section ai-section">
            <h2 class="section-title">
                <span style="margin-right: 8px;">🤖</span>AI Analysis
            </h2>

            <!-- Emotion Analysis -->
            {% if complaint.emotion %}
            <div class="ai-box">
                <div class="ai-label">Emotion Analysis</div>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <span class="badge" style="background: #7b1fa2; color: white;">
                            {{ complaint.get_emotion_display }}
                        </span>
                        <span class="confidence-score" style="margin-left: 10px;">
                            Confidence: {{ complaint.emotion_confidence|mul:100|floatformat:0 }}%
                        </span>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <div style="display: flex; justify-content: space-between; font-size: 9pt; color: #666; margin-bottom: 3px;">
                        <span>Intensity</span>
                        <span>{{ complaint.emotion_intensity|floatformat:2 }} / 1.0</span>
                    </div>
                    <div class="emotion-bar">
                        <div class="emotion-fill" style="width: {{ complaint.emotion_intensity|mul:100 }}%;"></div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- AI Summary -->
            {% if complaint.short_description %}
            <div class="ai-box">
                <div class="ai-label">AI Summary</div>
                <div style="line-height: 1.6; color: #333;">
                    {{ complaint.short_description }}
                </div>
            </div>
            {% endif %}

            <!-- Suggested Action -->
            {% if complaint.suggested_action %}
            <div class="suggestion-box">
                <div class="ai-label" style="color: #2e7d32;">
                    <span style="margin-right: 5px;">⚡</span>Suggested Action
                </div>
                <div style="line-height: 1.6; color: #1b5e20;">
                    {{ complaint.suggested_action }}
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Resolution -->
        {% if complaint.resolution %}
        <div class="section page-break">
            <h2 class="section-title">Resolution</h2>
            <div class="resolution-box">
                <div class="resolution-label">
                    <span style="margin-right: 5px;">✓</span>Complaint Resolved
                </div>
                <div style="line-height: 1.6; color: #2e7d32; margin-bottom: 15px;">
                    {{ complaint.resolution|linebreaks }}
                </div>
                <div style="font-size: 9pt; color: #666;">
                    <strong>Resolved by:</strong> {{ complaint.resolved_by.get_full_name }}
                    <br>
                    <strong>Resolved on:</strong> {{ complaint.resolved_at|date:"F d, Y H:i" }}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Footer -->
        <div class="footer">
            <div class="generated">
                Generated on {% now "F d, Y H:i" %}
            </div>
            <div style="margin-top: 5px; color: #999; font-size: 8pt;">
                PX360 - Patient Experience Management System
            </div>
            <div style="margin-top: 5px; color: #999; font-size: 8pt;">
                AlHammadi Group
            </div>
        </div>
    </div>
</body>
</html>
