{% extends 'dating_app/base_dating.html' %}
{% load static %}

{% block title %}{{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }} | Guest Profile Preview{% endblock %}

{% block content %}

<style>
    .foreigner-detail-page .foreigner-detail-hero,
    .foreigner-detail-page .foreigner-detail-lower-section {
        position: relative;
        z-index: 1;
    }

    .foreigner-detail-page .foreigner-detail-hero {
        overflow: hidden;
    }

    .foreigner-detail-page .detail-card,
    .foreigner-detail-page .contact-form-card,
    .foreigner-detail-page .foreigner-summary-box {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
    }

    .foreigner-detail-page .detail-card,
    .foreigner-detail-page .foreigner-summary-box {
        padding: 1.5rem;
    }

    .foreigner-detail-page .contact-form-card {
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .foreigner-detail-page .contact-form-header,
    .foreigner-detail-page .contact-form-body {
        padding: 1.5rem;
    }

    .foreigner-detail-page .contact-form-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        background: #fff;
    }

    .foreigner-detail-page .main-profile-image-wrapper {
        border-radius: 20px;
        overflow: hidden;
    }

    .foreigner-detail-page .profile-detail-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .foreigner-detail-page .profile-detail-placeholder {
        min-height: 420px;
        border-radius: 20px;
        background: #f8f9fa;
    }

    .foreigner-detail-page .foreigner-detail-lower-section {
        clear: both;
    }

    @media (max-width: 991.98px) {
        .foreigner-detail-page .contact-form-card {
            margin-top: 0;
        }
    }
    .guest-detail-visit-stage {
        display: flex;
        align-items: center;
        gap: 0.9rem;

        padding: 0.95rem 1rem;
        border-radius: 20px;

        border: 1px solid rgba(15, 23, 42, 0.08);
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    }

    .guest-detail-visit-stage-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;
        font-size: 1.25rem;
    }

    .guest-detail-visit-stage span {
        display: block;
        font-size: 0.72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.12rem;
    }

    .guest-detail-visit-stage strong {
        display: block;
        font-size: 1rem;
        font-weight: 900;
    }

    .guest-detail-visit-stage-planning {
        background: #f8fafc;
        color: #334155;
    }

    .guest-detail-visit-stage-planning .guest-detail-visit-stage-icon {
        background: #e2e8f0;
        color: #334155;
    }

    .guest-detail-visit-stage-confirmed {
        background: #ecfdf5;
        color: #166534;
        border-color: rgba(22, 101, 52, 0.16);
    }

    .guest-detail-visit-stage-confirmed .guest-detail-visit-stage-icon {
        background: #bbf7d0;
        color: #166534;
    }

    .guest-detail-visit-stage-on_the_way {
        background: #fffbeb;
        color: #92400e;
        border-color: rgba(146, 64, 14, 0.18);
    }

    .guest-detail-visit-stage-on_the_way .guest-detail-visit-stage-icon {
        background: #fde68a;
        color: #92400e;
    }

    .guest-detail-visit-stage-arrived {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: rgba(29, 78, 216, 0.16);
    }

    .guest-detail-visit-stage-arrived .guest-detail-visit-stage-icon {
        background: #bfdbfe;
        color: #1d4ed8;
    }

    .guest-detail-visit-stage-completed {
        background: #f3f4f6;
        color: #111827;
    }

    .guest-detail-visit-stage-completed .guest-detail-visit-stage-icon {
        background: #d1d5db;
        color: #111827;
    }
</style>

<div class="foreigner-detail-page">

    <section class="foreigner-detail-hero py-5 bg-light">
        <div class="container">

            <div class="alert alert-light border rounded-4 mb-4">
                <strong>Dating partner access:</strong>
                This guest profile is available only for approved local dating partners through the dating partner portal.
                Contact details are protected until the correct mutual-interest and confirmation conditions are met.
            </div>

            <div class="row g-5 align-items-start">
                <div class="col-lg-7">
                    <div class="detail-card mb-4">
                        {% if profile.profile_image %}
                            <div class="main-profile-image-wrapper">
                                <img src="{{ profile.profile_image.url }}"
                                     class="img-fluid profile-detail-image w-100"
                                     alt="{{ profile.lead.full_name|default:profile.user.username }}"
                                     style="max-height: 520px; object-fit: cover;">
                            </div>
                        {% else %}
                            <div class="profile-detail-placeholder d-flex align-items-center justify-content-center">
                                <i class="bi bi-person-badge fs-1 text-muted"></i>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <div class="col-lg-5">
                    <span class="section-mini-title">Guest Profile</span>

                    <h1 class="fw-bold mb-3">
                        {{ profile.lead.full_name|default:profile.user.get_full_name|default:profile.user.username }}
                    </h1>

                    <div class="package-detail-price mb-3">
                        {% if profile.lead.nationality %}
                            {{ profile.lead.nationality }}
                        {% else %}
                            International Guest
                        {% endif %}
                    </div>

                    {% if is_dating_partner_authenticated %}
                        <div class="guest-detail-visit-stage guest-detail-visit-stage-{{ profile.visit_stage }} mb-4">
                            <div class="guest-detail-visit-stage-icon">
                                {% if profile.visit_stage == 'planning' %}
                                    <i class="bi bi-calendar-heart"></i>
                                {% elif profile.visit_stage == 'confirmed' %}
                                    <i class="bi bi-patch-check-fill"></i>
                                {% elif profile.visit_stage == 'on_the_way' %}
                                    <i class="bi bi-airplane-engines-fill"></i>
                                {% elif profile.visit_stage == 'arrived' %}
                                    <i class="bi bi-geo-alt-fill"></i>
                                {% elif profile.visit_stage == 'completed' %}
                                    <i class="bi bi-check-circle-fill"></i>
                                {% else %}
                                    <i class="bi bi-info-circle-fill"></i>
                                {% endif %}
                            </div>

                            <div>
                                <span>Current Visit Stage</span>
                                <strong>{{ profile.get_visit_stage_display }}</strong>
                            </div>
                        </div>
                    {% endif %}

                    <p class="lead text-muted mb-4">
                        {% if profile.lead.message %}
                            {{ profile.lead.message|truncatechars:180 }}
                        {% else %}
                            Approved guest profile available inside the dating partner portal.
                        {% endif %}
                    </p>

                    <div class="foreigner-summary-box mb-4">
                        <h6 class="fw-bold mb-3">Guest Summary</h6>

                        <p class="mb-2">
                            <strong>Nationality:</strong>
                            {{ profile.lead.nationality|default:"Not specified" }}
                        </p>

                        <p class="mb-2">
                            <strong>Current Country:</strong>
                            {{ profile.lead.country|default:"Not specified" }}
                        </p>

                        <p class="mb-2">
                            <strong>Gender:</strong>
                            {% if profile.lead.gender %}
                                {{ profile.lead.get_gender_display }}
                            {% else %}
                                Not specified
                            {% endif %}
                        </p>

                        <p class="mb-2">
                            <strong>Monthly Budget:</strong>
                            {% if profile.lead.monthly_budget %}
                                {{ profile.lead.get_monthly_budget_display }}
                            {% else %}
                                Not specified
                            {% endif %}
                        </p>

                        <p class="mb-2">
                            <strong>Expected Arrival:</strong>
                            {{ profile.lead.expected_arrival_date|default:"Not specified" }}
                        </p>

                        {% if is_dating_partner_authenticated %}
                            <p class="mb-2">
                                <strong>Visit Stage:</strong>
                                {{ profile.get_visit_stage_display }}
                            </p>
                        {% endif %}

                        <p class="mb-2">
                            <strong>Duration of Stay:</strong>
                            {{ profile.lead.duration_of_stay|default:"Not specified" }}
                        </p>

                        <p class="mb-2">
                            <strong>Remote Worker:</strong>
                            {% if profile.lead.remote_worker %}Yes{% else %}No{% endif %}
                        </p>

                        <p class="mb-0">
                            <strong>Interested Package:</strong>
                            {% if profile.lead.interested_package %}
                                {{ profile.lead.interested_package.name }}
                            {% else %}
                                Not specified
                            {% endif %}
                        </p>

                        {% if can_view_contact_details %}
                            <hr>
                            <p class="mb-2">
                                <strong>Email:</strong>
                                {{ profile.lead.email|default:"Not provided" }}
                            </p>

                            <p class="mb-0">
                                <strong>WhatsApp:</strong>
                                {{ profile.lead.whatsapp_number|default:"Not provided" }}
                            </p>
                        {% endif %}
                    </div>

                    {% if mutual_interest_exists %}
                        <div class="alert alert-success rounded-4">
                            <h6 class="fw-bold mb-2">Mutual Interest Exists</h6>
                            <p class="mb-0">
                                Both sides have shown interest. If your account is confirmed, contact details may be available
                                according to the platform’s safety process.
                            </p>
                        </div>
                    {% endif %}

                    {% if existing_interest %}
                        <div class="alert alert-info rounded-4">
                            <h6 class="fw-bold mb-2">Interest Already Submitted</h6>
                            <p class="mb-2">
                                You have already expressed interest in this guest profile.
                            </p>

                            <p class="mb-0">
                                <strong>Status:</strong> {{ existing_interest.get_status_display }}
                            </p>

                            {% if existing_interest.message %}
                                <p class="mb-0 mt-2">
                                    <strong>Your Message:</strong> {{ existing_interest.message }}
                                </p>
                            {% endif %}
                        </div>
                    {% else %}
                        {% if can_notify_interest %}
                            <form method="post" action="{% url 'dating_app:express_foreigner_interest' profile.pk %}">
                                {% csrf_token %}

                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Optional Message</label>
                                    <textarea name="message"
                                              rows="4"
                                              class="form-control"
                                              placeholder="Write a short respectful message about your interest..."></textarea>
                                </div>

                                <button type="submit" class="btn btn-dark btn-lg w-100 mb-3">
                                    Express Interest in This Guest
                                </button>
                            </form>

                            <div class="small text-muted">
                                By expressing interest, you notify our team that you want to move forward with this guest profile
                                through the proper review and coordination process.
                            </div>
                        {% else %}
                            <button type="button" class="btn btn-secondary btn-lg w-100 mb-3" disabled>
                                Express Interest Locked
                            </button>

                            <div class="alert alert-warning rounded-4 mb-0">
                                <strong>Arrangement access required.</strong><br>
                                Your local dating partner account must be confirmed and have arrangement access before you can
                                submit interest requests for guest profiles.
                            </div>
                        {% endif %}
                    {% endif %}

                    <div class="d-grid gap-2 mt-4">
                        <a href="{% url 'dating_app:public_foreigners_list' %}" class="btn btn-outline-secondary">
                            Back to Guest Profiles
                        </a>

                        <a href="{% url 'dating_app:dating_partner_dashboard' %}" class="btn btn-outline-dark">
                            My Dating Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-white foreigner-detail-lower-section">
        <div class="container">
            <div class="row g-4 align-items-start">
                <div class="col-lg-8">
                    <div class="detail-card mb-4">
                        <h3 class="fw-bold mb-3">About / Guest Notes</h3>

                        <div class="text-muted">
                            {% if profile.lead.message %}
                                {{ profile.lead.message|linebreaks }}
                            {% else %}
                                No additional notes provided.
                            {% endif %}
                        </div>
                    </div>

                    <div class="detail-card mb-4">
                        <h5 class="fw-bold mb-3">Communication & Safety Note</h5>

                        {% if can_view_contact_details %}
                            <div class="text-muted mb-0">
                                Contact details are visible because mutual interest exists and your dating partner account
                                is confirmed. Please continue communication respectfully and safely.
                            </div>
                        {% else %}
                            <div class="text-muted mb-0">
                                Guest contact details are not publicly exposed. Contact access becomes available only after
                                mutual interest and required confirmation conditions are satisfied.
                            </div>
                        {% endif %}
                    </div>

                    <div class="detail-card mb-4">
                        <h5 class="fw-bold mb-3">Mutual Interest Process</h5>

                        <div class="text-muted mb-0">
                            A safer connection is created when a guest expresses interest in a local dating partner and the
                            local dating partner also expresses interest in the guest. After mutual interest and confirmation,
                            contact access or date arrangement support can move forward through the platform.
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="contact-form-card shadow-sm">
                        <div class="contact-form-header">
                            <h4 class="fw-bold mb-2">Access & Safety Status</h4>
                            <p class="text-muted mb-0">
                                Contact details are controlled to protect both the international guest and the local dating partner.
                            </p>
                        </div>

                        <div class="contact-form-body">
                            <div class="mb-3">
                                <strong>Guest Profile Status:</strong><br>
                                {% if profile.status == 'approved' %}
                                    <span class="text-success">Approved</span>
                                {% else %}
                                    <span class="text-warning">{{ profile.get_status_display }}</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Guest Profile Access:</strong><br>
                                {% if profile.is_public %}
                                    <span class="text-success">Public profile</span>
                                {% else %}
                                    <span class="text-secondary">Private profile</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Guest Visit Stage:</strong><br>

                                {% if profile.visit_stage == 'planning' %}
                                    <span class="text-secondary">
                                        <i class="bi bi-calendar-heart me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% elif profile.visit_stage == 'confirmed' %}
                                    <span class="text-success">
                                        <i class="bi bi-patch-check-fill me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% elif profile.visit_stage == 'on_the_way' %}
                                    <span class="text-warning">
                                        <i class="bi bi-airplane-engines-fill me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% elif profile.visit_stage == 'arrived' %}
                                    <span class="text-primary">
                                        <i class="bi bi-geo-alt-fill me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% elif profile.visit_stage == 'completed' %}
                                    <span class="text-dark">
                                        <i class="bi bi-check-circle-fill me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% else %}
                                    <span class="text-muted">
                                        <i class="bi bi-info-circle-fill me-1"></i>
                                        {{ profile.get_visit_stage_display }}
                                    </span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Your Dating Partner Status:</strong><br>
                                {% if dating_partner_is_confirmed %}
                                    <span class="text-success">Confirmed dating partner</span>
                                {% else %}
                                    <span class="text-warning">Approved but not confirmed</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Private Profile Viewing:</strong><br>
                                {% if can_view_private_listings %}
                                    <span class="text-success">Private viewing enabled</span>
                                {% else %}
                                    <span class="text-warning">Public-only viewing</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Your Interest:</strong><br>
                                {% if existing_interest %}
                                    <span class="text-success">{{ existing_interest.get_status_display }}</span>
                                {% else %}
                                    <span class="text-muted">Not submitted yet</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Guest Interest in You:</strong><br>
                                {% if foreigner_interest_in_partner %}
                                    <span class="text-success">{{ foreigner_interest_in_partner.get_status_display }}</span>
                                {% else %}
                                    <span class="text-muted">Not yet expressed</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Mutual Interest:</strong><br>
                                {% if mutual_interest_exists %}
                                    <span class="text-success">Yes, mutual interest exists</span>
                                {% else %}
                                    <span class="text-warning">Not yet mutual</span>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <strong>Contact Detail Access:</strong><br>
                                {% if can_view_contact_details %}
                                    <span class="text-success">Unlocked</span>

                                    <div class="small mt-2">
                                        <strong>Email:</strong> {{ profile.lead.email|default:"Not provided" }}<br>
                                        <strong>WhatsApp:</strong> {{ profile.lead.whatsapp_number|default:"Not provided" }}
                                    </div>
                                {% else %}
                                    <span class="text-warning">
                                        Locked until mutual interest and confirmation conditions are satisfied.
                                    </span>
                                {% endif %}
                            </div>

                            <div class="mb-0">
                                <strong>Next Step:</strong><br>
                                {% if can_view_contact_details %}
                                    You can communicate carefully using the contact details made available through the platform.
                                {% elif can_notify_interest and not existing_interest %}
                                    You can express interest in this guest profile if you want to move forward.
                                {% elif existing_interest and not mutual_interest_exists %}
                                    Wait until the guest also expresses interest or our team reviews the next step.
                                {% else %}
                                    Complete the required confirmation/access process before moving further.
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

{% endblock %}