{% extends 'base.html.twig' %}

{% block title %}Profil | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}profile-screen stitch-page{% endblock %}

{% block stylesheets %}
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .glass-nav {
            background: rgba(38, 38, 38, 0.8);
            backdrop-filter: blur(20px);
        }

        .kinetic-gradient {
            background: linear-gradient(135deg, #ff9064 0%, #ff7941 100%);
        }

        body {
            min-height: max(884px, 100dvh);
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "secondary-fixed-dim": "#ffb285",
                        "surface-container-high": "#20201f",
                        "on-tertiary": "#5a3900",
                        "primary-container": "#ff7941",
                        "error-container": "#9f0519",
                        "primary-fixed": "#ff7941",
                        "tertiary": "#ffb951",
                        "inverse-on-surface": "#565555",
                        "surface-dim": "#0e0e0e",
                        "surface-container": "#1a1a1a",
                        "inverse-primary": "#a83a00",
                        "tertiary-fixed": "#f8a91f",
                        "surface-container-highest": "#262626",
                        "surface": "#0e0e0e",
                        "tertiary-dim": "#e89b09",
                        "background": "#0e0e0e",
                        "surface-container-lowest": "#000000",
                        "primary": "#ff9064",
                        "tertiary-container": "#f8a91f",
                        "outline": "#767575",
                        "on-tertiary-container": "#4d3100",
                        "inverse-surface": "#fcf9f8",
                        "on-tertiary-fixed-variant": "#593900",
                        "tertiary-fixed-dim": "#e89b09",
                        "on-surface": "#ffffff",
                        "on-error": "#490006",
                        "on-primary": "#571a00",
                        "on-secondary-container": "#fff6f2",
                        "on-primary-fixed-variant": "#531900",
                        "secondary-container": "#9a4600",
                        "on-secondary-fixed-variant": "#843c00",
                        "on-tertiary-fixed": "#301c00",
                        "surface-tint": "#ff9064",
                        "outline-variant": "#484847",
                        "primary-fixed-dim": "#ff5e07",
                        "primary-dim": "#ff7439",
                        "on-error-container": "#ffa8a3",
                        "on-primary-container": "#431200",
                        "error": "#ff716c",
                        "secondary": "#f8883e",
                        "on-background": "#ffffff",
                        "surface-variant": "#262626",
                        "surface-container-low": "#131313",
                        "on-secondary-fixed": "#582500",
                        "error-dim": "#d7383b",
                        "surface-bright": "#2c2c2c",
                        "on-secondary": "#451c00",
                        "secondary-dim": "#ee8137",
                        "secondary-fixed": "#ffc5a5",
                        "on-surface-variant": "#adaaaa",
                        "on-primary-fixed": "#000000"
                    },
                    fontFamily: {
                        "headline": ["Plus Jakarta Sans"],
                        "body": ["Manrope"],
                        "label": ["Manrope"]
                    },
                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "1.5rem", "full": "9999px"}
                }
            }
        };
    </script>
{% endblock %}

{% block body %}
{% set profileName = profileUser.displayName ?: (profileUser.companyName ?: 'Wanted User') %}
{% set profileCity = profileUser.city ?: 'Deutschland' %}

<div class="font-body selection:bg-primary selection:text-on-primary">
    <header class="feed-shell-header">
        <nav class="feed-shell-topnav">
            <div class="feed-shell-topnav-left" aria-hidden="true"></div>
            <a class="feed-shell-logo-wrap feed-shell-logo-center" href="{{ path('app_feed') }}" aria-label="Zum Feed">
                <img src="{{ asset('assets/img/top_logo.png') }}" alt="Wanted Logo">
            </a>
            <div class="feed-shell-topnav-right">
                <a href="{{ path('app_logout') }}" class="feed-shell-filter-toggle" aria-label="Logout" title="Logout">
                    <span class="material-symbols-outlined">logout</span>
                </a>
                <button type="button" class="feed-shell-location-btn" onclick="history.back()" aria-label="Zurueck">
                    <span class="material-symbols-outlined">arrow_back</span>
                </button>
                <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="feed-shell-user" aria-label="Profil">
                    {% if app.user and app.user.avatarPath %}
                        <img src="{{ app.user.avatarPath }}" alt="Profil">
                    {% else %}
                        <span class="material-symbols-outlined">person</span>
                    {% endif %}
                </a>
            </div>
        </nav>
    </header>

    <main class="max-w-screen-xl mx-auto px-6 pb-32 pt-24">
        <header class="flex flex-col md:flex-row items-center md:items-end gap-8 mb-16 relative">
            <div class="relative group">
                <div class="w-32 h-32 md:w-48 md:h-48 rounded-xl overflow-hidden shadow-2xl bg-surface-container">
                    {% if profileUser.avatarPath %}
                        <img src="{{ profileUser.avatarPath }}" alt="{{ profileName }}" class="w-full h-full object-cover">
                    {% else %}
                        <div class="w-full h-full grid place-items-center text-4xl font-bold">{{ profileName|slice(0,1)|upper }}</div>
                    {% endif %}
                </div>
                <div class="absolute -bottom-2 -right-2 kinetic-gradient px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest text-on-primary">
                    {{ isCustomer ? 'Seeker' : 'Business' }}
                </div>
            </div>
            <div class="flex-1 text-center md:text-left">
                <h1 class="text-5xl md:text-7xl font-headline font-extrabold tracking-tighter mb-2">{{ profileName }}</h1>
                <p class="text-on-surface-variant text-lg font-medium mb-6">Mitglied seit {{ profileUser.createdAt|date('Y') }} • {{ profileCity }}</p>
                <div class="flex flex-wrap justify-center md:justify-start gap-4">
                    {% if isOwner %}
                        <a href="{{ path('app_profile_edit') }}" class="kinetic-gradient text-on-primary font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-xl">edit</span>
                            Edit Profile
                        </a>
                    {% endif %}
                    <button type="button" class="bg-surface-container-highest text-on-surface font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                        <span class="material-symbols-outlined text-xl">share</span>
                        Share Profile
                    </button>
                </div>
            </div>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <section class="lg:col-span-8 space-y-8">
                {% if isCustomer and (videosUploadedForCompanies|length > 0 or isOwner) %}
                <div class="space-y-6">
                    <div class="flex justify-between items-end">
                        <h2 class="text-3xl font-headline font-bold">Fuer Anbieter hochgeladen</h2>
                        {% if videosUploadedForCompanies|length %}
                            <span class="text-primary font-bold text-sm">{{ videosUploadedForCompanies|length }} Video{% if videosUploadedForCompanies|length != 1 %}s{% endif %}</span>
                        {% endif %}
                    </div>
                    {% if videosUploadedForCompanies|length %}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {% for video in videosUploadedForCompanies %}
                                {% set co = video.company %}
                                {% set coProfileId = co ? spotlightCompanyProfileIds[co.id]|default(null) : null %}
                                <article class="group relative aspect-[4/5] rounded-xl overflow-hidden bg-surface-container transition-all hover:scale-[1.02]">
                                    <a href="{{ path('app_feed') }}#video-{{ video.id }}" class="absolute inset-0 z-[1]" aria-label="{{ video.title }} im Feed oeffnen"></a>
                                    <div class="relative z-0 pointer-events-none h-full">
                                    {% if video.thumbnailUrl %}
                                        <img src="{{ video.thumbnailUrl }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                                    {% elseif video.playbackUrl %}
                                        <video src="{{ video.playbackUrl }}" class="w-full h-full object-cover" muted playsinline preload="metadata"></video>
                                    {% else %}
                                        <div class="w-full h-full bg-[radial-gradient(circle_at_20%_15%,#2d3134_0%,#1a1a1a_55%,#111_100%)] opacity-80 group-hover:opacity-100 transition-opacity"></div>
                                    {% endif %}
                                    </div>
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-[2] pointer-events-none"></div>
                                    <div class="absolute bottom-0 p-6 w-full z-[3] pointer-events-none">
                                        <span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded mb-3 inline-block">Spotlight</span>
                                        <h3 class="text-xl font-headline font-bold leading-tight">{{ video.title }}</h3>
                                        <div class="flex items-center justify-between mt-4 gap-2 pointer-events-auto">
                                            {% if co %}
                                                {% if coProfileId %}
                                                    <a href="{{ path('app_profile_show', { id: coProfileId }) }}" class="text-white/90 text-sm font-semibold hover:text-primary truncate relative z-[4]">{{ co.name }}</a>
                                                {% else %}
                                                    <span class="text-white/70 text-sm truncate">{{ co.name }}</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="text-white/70 text-sm">Anbieter</span>
                                            {% endif %}
                                            <span class="font-bold text-primary shrink-0">Im Feed</span>
                                        </div>
                                    </div>
                                </article>
                            {% endfor %}
                        </div>
                    {% elseif isOwner %}
                        <div class="rounded-xl bg-surface-container-low border border-outline-variant/20 p-6 text-on-surface-variant">
                            Du hast noch keine Videos fuer einen Anbieter hochgeladen. Im Upload waehlst du den passenden Betrieb — diese Clips erscheinen dann hier und auf dem Profil des Anbieters unter &quot;User uploaded Videos&quot;.
                        </div>
                    {% endif %}
                </div>
                {% endif %}

                <div class="flex justify-between items-end">
                    <h2 class="text-3xl font-headline font-bold">My Favorites</h2>
                    <span class="text-primary font-bold text-sm">{{ (favoriteCompanies|length) + (favoriteVideos|length) }} gespeichert</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {% for company in favoriteCompanies %}
                        {% set companyProfileId = favoriteCompanyProfileIds[company.id]|default(null) %}
                        <a href="{% if companyProfileId %}{{ path('app_profile_show', { id: companyProfileId }) }}{% else %}#{% endif %}" class="group relative aspect-[4/5] rounded-xl overflow-hidden bg-surface-container transition-all hover:scale-[1.02] {% if not companyProfileId %}pointer-events-none opacity-75{% endif %}">
                            {% if company.heroImagePath %}
                                <img src="{{ company.heroImagePath }}" alt="{{ company.name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                            {% else %}
                                <div class="w-full h-full bg-[radial-gradient(circle_at_20%_15%,#333_0%,#1a1a1a_55%,#111_100%)] opacity-80 group-hover:opacity-100 transition-opacity"></div>
                            {% endif %}
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 p-6 w-full">
                                <span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded mb-3 inline-block">{{ company.category ? company.category.name : 'Unternehmen' }}</span>
                                <h3 class="text-2xl font-headline font-bold leading-tight">{{ company.name }}</h3>
                                <div class="flex items-center justify-between mt-4">
                                    <span class="text-white/70 text-sm">{{ company.city ?: 'Deutschland' }}</span>
                                    <span class="font-bold text-primary">Unternehmen</span>
                                </div>
                            </div>
                            <span class="absolute top-4 right-4 bg-black/40 backdrop-blur-md p-2 rounded-full text-primary">
                                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
                            </span>
                        </a>
                    {% endfor %}
                    {% for video in favoriteVideos %}
                        <a href="{{ path('app_feed') }}#video-{{ video.id }}" class="group relative aspect-[4/5] rounded-xl overflow-hidden bg-surface-container transition-all hover:scale-[1.02]">
                            {% if video.thumbnailUrl %}
                                <img src="{{ video.thumbnailUrl }}" alt="{{ video.title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                            {% elseif video.playbackUrl %}
                                <video src="{{ video.playbackUrl }}" class="w-full h-full object-cover" muted playsinline preload="metadata"></video>
                            {% else %}
                                <div class="w-full h-full bg-[radial-gradient(circle_at_20%_15%,#2d3134_0%,#1a1a1a_55%,#111_100%)] opacity-80 group-hover:opacity-100 transition-opacity"></div>
                            {% endif %}
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 p-6 w-full">
                                <span class="bg-tertiary/20 text-tertiary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded mb-3 inline-block">Video</span>
                                <h3 class="text-xl font-headline font-bold leading-tight">{{ video.title }}</h3>
                                <div class="flex items-center justify-between mt-4">
                                    <span class="text-white/70 text-sm">{{ video.company ? video.company.name : (video.ownerName ?: 'Wanted') }}</span>
                                    <span class="font-bold text-tertiary">Gespeichert</span>
                                </div>
                            </div>
                            <span class="absolute top-4 right-4 bg-black/40 backdrop-blur-md p-2 rounded-full text-tertiary">
                                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bookmark</span>
                            </span>
                        </a>
                    {% endfor %}
                    {% if favoriteCompanies is empty and favoriteVideos is empty %}
                        <div class="md:col-span-2 rounded-xl bg-surface-container-low border border-outline-variant/20 p-6 text-on-surface-variant">
                            Noch keine Favoriten gespeichert. Speichere Unternehmen oder Videos im Feed, um sie hier zu sehen.
                        </div>
                    {% endif %}
                </div>
            </section>

            <aside class="lg:col-span-4 space-y-12">
                <div class="space-y-6">
                    <h2 class="text-2xl font-headline font-bold">Letzte Aktivitaet</h2>
                    <div class="space-y-4">
                        {% for a in recentActivities %}
                            <a href="{{ a.href }}" class="bg-surface-container-low p-4 rounded-xl flex gap-4 items-center hover:bg-surface-container-highest transition-colors {% if a.href == '#' %}pointer-events-none opacity-80{% endif %}">
                                <div class="w-12 h-12 rounded-lg flex items-center justify-center shrink-0
                                    {% if a.tone == 'primary' %}bg-primary/10 text-primary
                                    {% elseif a.tone == 'tertiary' %}bg-tertiary/10 text-tertiary
                                    {% else %}bg-secondary/10 text-secondary{% endif %}">
                                    <span class="material-symbols-outlined">{{ a.icon }}</span>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-sm font-bold truncate">{{ a.title }}</p>
                                    <p class="text-xs text-on-surface-variant truncate">{{ a.subtitle }}</p>
                                    <p class="text-[11px] text-on-surface-variant/80 mt-0.5">{{ a.timeAgo }}</p>
                                </div>
                            </a>
                        {% else %}
                            <p class="text-sm text-on-surface-variant rounded-xl bg-surface-container-low p-4">
                                Noch keine Aktivitaet. Like oder speichere Videos im Feed und favorisiere Unternehmen.
                            </p>
                        {% endfor %}
                    </div>
                </div>

                {% if isOwner %}
                <div class="space-y-6">
                    <h2 class="text-2xl font-headline font-bold">Einstellungen</h2>
                    <div class="bg-surface-container rounded-xl overflow-hidden">
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_profile_edit') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">settings</span>
                                <span class="font-medium">Konto bearbeiten</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_faq') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">payments</span>
                                <span class="font-medium">Zahlungen &amp; FAQ</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_faq') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">notifications</span>
                                <span class="font-medium">Hilfe &amp; Benachrichtigungen</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_imprint') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">article</span>
                                <span class="font-medium">Impressum</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_privacy') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">policy</span>
                                <span class="font-medium">Datenschutz</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_terms') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">gavel</span>
                                <span class="font-medium">Nutzungsbedingungen</span>
                            </div>
                            <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                        </a>
                        <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group text-error" href="{{ path('app_logout') }}">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined">logout</span>
                                <span class="font-medium">Abmelden</span>
                            </div>
                        </a>
                    </div>
                </div>
                {% endif %}
            </aside>
        </div>
    </main>

    <nav class="mobile-bottom-nav" aria-label="Hauptnavigation">
        <a href="{{ path('app_feed') }}" aria-label="Home"><span class="material-symbols-outlined">home_app_logo</span></a>
        <a href="{{ path('app_feed') }}" aria-label="Entdecken"><span class="material-symbols-outlined">explore</span></a>
        <a href="{{ path('app_video_upload') }}" aria-label="Erstellen"><span class="material-symbols-outlined">add_circle</span></a>
        <a href="{{ path('app_faq') }}" aria-label="Hilfe und FAQ"><span class="material-symbols-outlined">help</span></a>
        <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="is-active" aria-label="Profil"><span class="material-symbols-outlined">person</span></a>
    </nav>
</div>
{% endblock %}