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

{% block title %}{{ company.name }} | JI:O{% 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-effect {
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
        }

        body {
            min-height: max(884px, 100dvh);
        }

        .btn-spring {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-spring:active {
            transform: scale(0.92);
        }

        .btn-spring:hover {
            transform: scale(1.02);
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "on-secondary-container": "#fff6f2",
                        "surface-container-high": "#20201f",
                        "inverse-on-surface": "#565555",
                        "secondary-fixed": "#ffc5a5",
                        "primary-dim": "#ff7439",
                        "error-dim": "#d7383b",
                        "on-tertiary": "#5a3900",
                        "secondary": "#f8883e",
                        "tertiary-dim": "#e89b09",
                        "surface-container-low": "#131313",
                        "inverse-primary": "#a83a00",
                        "on-primary-fixed": "#000000",
                        "surface-container": "#1a1a1a",
                        "tertiary": "#ffb951",
                        "on-secondary-fixed": "#582500",
                        "inverse-surface": "#fcf9f8",
                        "tertiary-fixed-dim": "#e89b09",
                        "on-primary": "#571a00",
                        "error-container": "#9f0519",
                        "error": "#ff716c",
                        "on-tertiary-fixed": "#301c00",
                        "on-tertiary-fixed-variant": "#593900",
                        "surface-container-lowest": "#000000",
                        "tertiary-container": "#f8a91f",
                        "surface": "#0e0e0e",
                        "secondary-dim": "#ee8137",
                        "on-primary-container": "#431200",
                        "surface-container-highest": "#262626",
                        "tertiary-fixed": "#f8a91f",
                        "on-background": "#ffffff",
                        "primary-fixed-dim": "#ff5e07",
                        "on-primary-fixed-variant": "#531900",
                        "on-error": "#490006",
                        "on-error-container": "#ffa8a3",
                        "surface-bright": "#2c2c2c",
                        "surface-variant": "#262626",
                        "outline-variant": "#484847",
                        "surface-tint": "#ff9064",
                        "on-secondary-fixed-variant": "#843c00",
                        "outline": "#767575",
                        "on-surface": "#ffffff",
                        "on-surface-variant": "#adaaaa",
                        "background": "#0e0e0e",
                        "primary": "#ff9064",
                        "primary-container": "#ff7941",
                        "primary-fixed": "#ff7941",
                        "on-secondary": "#451c00",
                        "secondary-fixed-dim": "#ffb285"
                    },
                    fontFamily: {
                        "headline": ["Plus Jakarta Sans"],
                        "body": ["Manrope"],
                        "label": ["Manrope"]
                    },
                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' }
                        }
                    },
                    animation: {
                        float: 'float 6s ease-in-out infinite',
                        'fade-in-up': 'fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards'
                    }
                }
            }
        };
    </script>
{% endblock %}

{% block body %}
{% set profileName = company.name %}
{% set profileTagline = company.category ? company.category.name : 'Unternehmen' %}
{% set heroVideo = companyVideos|first ?: communityVideos|first %}
{% set totalVideos = companyVideos|length + communityVideos|length %}

<div class="bg-surface text-on-surface">
    <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="JI:O 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="pt-[120px] pb-32 px-6 max-w-2xl mx-auto">
        <section class="flex flex-col items-center text-center mb-10">
            <div class="relative mb-4 animate-float">
                <div class="w-32 h-32 rounded-full p-1 bg-gradient-to-tr from-primary to-primary-container">
                    <div class="w-full h-full rounded-full border-4 border-surface overflow-hidden">
                        {% if profileUser.avatarPath %}
                            <img class="w-full h-full object-cover" src="{{ profileUser.avatarPath }}" alt="{{ profileName }}">
                        {% elseif company.heroImagePath %}
                            <img class="w-full h-full object-cover" src="{{ company.heroImagePath }}" alt="{{ profileName }}">
                        {% else %}
                            <div class="w-full h-full grid place-items-center text-3xl font-bold">{{ profileName|slice(0,1)|upper }}</div>
                        {% endif %}
                    </div>
                </div>
                {% if providerRatingAggregate %}
                    <div class="absolute bottom-1 right-1 bg-surface-container-highest border border-primary/20 text-primary px-2 py-0.5 rounded-full flex items-center gap-1 shadow-lg backdrop-blur-md">
                        <span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
                        <span class="text-xs font-bold font-label">{{ providerRatingAggregate.avg|number_format(1, ',', '') }}</span>
                    </div>
                {% endif %}
            </div>
            <h1 class="text-3xl font-extrabold tracking-tight mb-1 text-on-surface flex items-center justify-center flex-wrap">
                {{ profileName }}
                {% if providerRatingAggregate and providerRatingAggregate.avg >= 4 and providerRatingAggregate.count >= 3 %}
                    <span class="inline-flex items-center gap-1 ml-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse shadow-[0_0_15px_rgba(255,92,0,0.1)]">
                        <span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">verified</span>
                        Top Rated
                    </span>
                {% endif %}
            </h1>
            <p class="text-on-surface-variant font-medium mb-6">{{ profileTagline }}</p>

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-8 w-full py-6 border-y border-outline-variant/15 mb-8">
                <div class="flex flex-col">
                    <span class="text-xl font-bold font-headline">{{ totalVideos }}</span>
                    <span class="text-[10px] font-semibold uppercase tracking-widest text-on-surface-variant font-label">Videos</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-xl font-bold font-headline">{% if providerRatingAggregate %}{{ providerRatingAggregate.avg|number_format(1, ',', '') }}{% else %}—{% endif %}</span>
                    <span class="text-[10px] font-semibold uppercase tracking-widest text-on-surface-variant font-label">Bewertung{% if providerRatingAggregate %} ({{ providerRatingAggregate.count }}){% endif %}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-xl font-bold font-headline">{{ likesCount }}</span>
                    <span class="text-[10px] font-semibold uppercase tracking-widest text-on-surface-variant font-label">Likes</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-xl font-bold font-headline" data-favorite-count>{{ favoritesCount|default(0) }}</span>
                    <span class="text-[10px] font-semibold uppercase tracking-widest text-on-surface-variant font-label">Favoriten</span>
                </div>
            </div>

            {% if isOwner %}
                <div class="w-full mb-6">
                    <a
                        href="{{ path('app_wanted_plus') }}"
                        class="w-full flex items-center justify-between p-4 rounded-2xl bg-gradient-to-r from-tertiary to-primary text-on-primary-fixed font-bold shadow-xl shadow-primary/20 btn-spring group overflow-hidden relative no-underline"
                    >
                        <span class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" aria-hidden="true"></span>
                        <span class="flex items-center gap-3 relative z-10 min-w-0">
                            <span class="bg-on-primary/20 p-2 rounded-xl flex items-center justify-center shrink-0">
                                <span class="material-symbols-outlined text-xl" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
                            </span>
                            <span class="text-left min-w-0">
                                <span class="block text-xs opacity-80 uppercase tracking-widest font-label">Premium Mitgliedschaft</span>
                                <span class="block text-lg font-headline truncate">Upgrade to JI:O+</span>
                            </span>
                        </span>
                        <span class="material-symbols-outlined text-2xl relative z-10 shrink-0" aria-hidden="true">chevron_right</span>
                    </a>
                </div>
            {% endif %}

            <div class="flex gap-3 w-full">
                {% if isOwner %}
                    <a href="{{ path('app_profile_edit') }}" class="flex-1 py-4 px-6 rounded-full font-bold text-sm bg-surface-container-highest text-on-surface transition-all">
                        Bearbeiten
                    </a>
                {% endif %}
                <button type="button" class="{{ isOwner ? 'flex-[1.5]' : 'flex-1' }} py-4 px-6 rounded-full font-bold text-sm bg-gradient-to-r from-primary to-primary-container text-on-primary shadow-lg shadow-primary/20 transition-all">
                    Kontakt
                </button>
                {% if canFavorite|default(false) %}
                    <button
                        type="button"
                        class="w-14 h-14 rounded-full border border-primary/25 bg-surface-container-highest text-on-surface inline-flex items-center justify-center transition-all"
                        data-favorite-company-btn
                        data-favorite-url="{{ path('api_company_favorite', {id: company.id}) }}"
                        data-favorite-state="{{ isFavorite ? '1' : '0' }}"
                        data-csrf-token="{{ csrf_token('company_favorite_' ~ company.id) }}"
                        aria-label="Unternehmen zu Favoriten hinzufuegen"
                    >
                        <span class="material-symbols-outlined" data-favorite-company-icon style="font-variation-settings: 'FILL' {{ isFavorite ? '1' : '0' }}, 'wght' 500, 'GRAD' 0, 'opsz' 24;">favorite</span>
                    </button>
                {% endif %}
            </div>
        </section>

        <section class="mb-10 p-5 rounded-xl bg-surface-container-low border border-outline-variant/10">
            <h3 class="text-sm font-bold uppercase tracking-widest text-primary mb-4">Profilangaben</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                <div class="rounded-lg bg-surface-container px-3 py-2">
                    <p class="text-on-surface-variant text-xs">Kategorie</p>
                    <p class="font-semibold">{{ company.category ? company.category.name : 'Nicht gesetzt' }}</p>
                </div>
                <div class="rounded-lg bg-surface-container px-3 py-2">
                    <p class="text-on-surface-variant text-xs">Stadt</p>
                    <p class="font-semibold">{{ company.city ?: 'Nicht gesetzt' }}</p>
                </div>
                <div class="rounded-lg bg-surface-container px-3 py-2">
                    <p class="text-on-surface-variant text-xs">Telefon</p>
                    <p class="font-semibold">{{ company.phone ?: 'Nicht gesetzt' }}</p>
                </div>
                <div class="rounded-lg bg-surface-container px-3 py-2">
                    <p class="text-on-surface-variant text-xs">Instagram</p>
                    <p class="font-semibold">{{ company.instagram ?: 'Nicht gesetzt' }}</p>
                </div>
                <div class="rounded-lg bg-surface-container px-3 py-2 sm:col-span-2">
                    <p class="text-on-surface-variant text-xs">Website</p>
                    <p class="font-semibold break-all">{{ company.website ?: 'Nicht gesetzt' }}</p>
                </div>
                <div class="rounded-lg bg-surface-container px-3 py-2 sm:col-span-2">
                    <p class="text-on-surface-variant text-xs">Adresse</p>
                    <p class="font-semibold">{{ company.address ?: 'Nicht gesetzt' }}</p>
                </div>
            </div>
        </section>

        {% if profileIntroVideo is defined and profileIntroVideo %}
            <section class="mb-10 p-5 rounded-xl bg-surface-container-low border border-outline-variant/10">
                <h3 class="text-sm font-bold uppercase tracking-widest text-primary mb-4">Profilvideo</h3>
                {% if profileIntroVideo.moderationStatus == 'approved' and profileIntroVideo.playbackUrl %}
                    <div class="aspect-video rounded-xl overflow-hidden bg-black">
                        <video class="w-full h-full object-cover" src="{{ profileIntroVideo.playbackUrl }}" controls playsinline preload="metadata" {% if profileIntroVideo.thumbnailUrl %}poster="{{ profileIntroVideo.thumbnailUrl }}"{% endif %}></video>
                    </div>
                {% elseif profileIntroVideo.moderationStatus == 'pending' %}
                    <div class="rounded-xl border border-primary/25 bg-surface-container px-4 py-8 text-center">
                        <span class="material-symbols-outlined text-primary text-4xl mb-2 inline-block" aria-hidden="true">hourglass_top</span>
                        <p class="text-on-surface font-semibold">Profilvideo wird geprueft</p>
                        <p class="text-on-surface-variant text-sm mt-2">Sobald das Team freigibt, erscheint es hier. Dein Account ist weiterhin aktiv.</p>
                    </div>
                {% endif %}
            </section>
        {% endif %}

        <section class="mb-12">
            <div class="flex items-end justify-between mb-6">
                <h2 class="text-xl font-bold tracking-tight">Unternehmensvideos</h2>
                <span class="text-primary text-xs font-bold font-label uppercase tracking-wider">{{ companyVideos|length }} Clip{% if companyVideos|length != 1 %}s{% endif %}</span>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2 relative aspect-[16/10] rounded-xl overflow-hidden bg-surface-container group">
                    {% set heroCompany = companyVideos|first %}
                    {% if heroCompany and heroCompany.thumbnailUrl %}
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="{{ heroCompany.thumbnailUrl }}" alt="{{ heroCompany.title }}">
                    {% elseif heroCompany and heroCompany.playbackUrl %}
                        <video class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="{{ heroCompany.playbackUrl }}" muted playsinline preload="metadata" loop></video>
                    {% else %}
                        <div class="w-full h-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant text-sm px-4 text-center">Noch keine eigenen Unternehmensclips</div>
                    {% endif %}
                    {% if heroCompany %}
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
                    <div class="absolute bottom-4 left-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-full bg-primary/20 backdrop-blur-md flex items-center justify-center border border-primary/30">
                            <span class="material-symbols-outlined text-primary text-sm" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
                        </div>
                        <span class="text-xs font-semibold text-white/90">{{ heroCompany.title }}</span>
                    </div>
                    {% endif %}
                </div>

                {% for video in companyVideos|slice(1, 3) %}
                    <div class="aspect-square rounded-xl overflow-hidden bg-surface-container">
                        {% if video.thumbnailUrl %}
                            <img class="w-full h-full object-cover hover:scale-110 transition-transform duration-500" src="{{ video.thumbnailUrl }}" alt="{{ video.title }}">
                        {% elseif video.playbackUrl %}
                            <video class="w-full h-full object-cover hover:scale-110 transition-transform duration-500" src="{{ video.playbackUrl }}" muted playsinline preload="metadata" loop></video>
                        {% else %}
                            <div class="w-full h-full bg-surface-container-highest"></div>
                        {% endif %}
                    </div>
                {% endfor %}
                <div class="aspect-square rounded-xl overflow-hidden bg-surface-container relative">
                    <div class="w-full h-full bg-surface-container-highest opacity-60"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-lg font-bold text-white">+{{ (companyVideos|length - 4) > 0 ? (companyVideos|length - 4) : 0 }}</span>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="flex items-end justify-between mb-6">
                <h2 class="text-xl font-bold tracking-tight">User uploaded Videos</h2>
                <span class="text-primary text-xs font-bold font-label uppercase tracking-wider">{{ communityVideos|length }} Clip{% if communityVideos|length != 1 %}s{% endif %}</span>
            </div>
            <div class="grid grid-cols-2 gap-4">
                {% for video in communityVideos %}
                    <a href="{{ path('app_feed') }}#video-{{ video.id }}" class="aspect-[4/5] rounded-xl overflow-hidden bg-surface-container block relative group">
                        {% if video.thumbnailUrl %}
                            <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="{{ video.thumbnailUrl }}" alt="{{ video.title }}">
                        {% elseif video.playbackUrl %}
                            <video class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" src="{{ video.playbackUrl }}" muted playsinline preload="metadata" loop></video>
                        {% else %}
                            <div class="w-full h-full bg-surface-container-highest"></div>
                        {% endif %}
                        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-transparent to-transparent opacity-90"></div>
                        <div class="absolute bottom-3 left-3 right-3">
                            <p class="text-xs font-semibold text-white/95 line-clamp-2">{{ video.title }}</p>
                            {% if video.ownerName %}
                                <p class="text-[10px] text-white/60 mt-1 truncate">von {{ video.ownerName }}</p>
                            {% endif %}
                        </div>
                    </a>
                {% else %}
                    <div class="col-span-2 rounded-xl bg-surface-container-low border border-outline-variant/10 p-6 text-on-surface-variant text-sm text-center">
                        Noch keine User-Uploads fuer dieses Profil.
                    </div>
                {% endfor %}
            </div>
        </section>

        <section class="mt-12 p-6 rounded-xl bg-surface-container-low border border-outline-variant/10">
            <h3 class="text-sm font-bold uppercase tracking-widest text-primary mb-3">About {{ profileName }}</h3>
            <p class="text-on-surface-variant text-sm leading-relaxed">
                {{ company.description ?: 'Professionelles Unternehmen mit Fokus auf hochwertige Dienstleistungen und starke Community-Praesenz.' }}
            </p>
        </section>
    </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_how_it_works') }}" aria-label="So funktioniert JI:O"><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_company_show', {slug: company.slug}) }}" aria-label="Unternehmen"><span class="material-symbols-outlined">storefront</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>
{% if canFavorite|default(false) %}
    <script>
        (() => {
            const favoriteBtn = document.querySelector('[data-favorite-company-btn]');
            const favoriteIcon = document.querySelector('[data-favorite-company-icon]');
            const favoriteCount = document.querySelector('[data-favorite-count]');
            if (!favoriteBtn || !favoriteIcon || !favoriteCount) {
                return;
            }

            const setFavoriteState = (isFavorite) => {
                favoriteBtn.dataset.favoriteState = isFavorite ? '1' : '0';
                favoriteIcon.style.fontVariationSettings = `'FILL' ${isFavorite ? 1 : 0}, 'wght' 500, 'GRAD' 0, 'opsz' 24`;
                favoriteBtn.classList.toggle('text-primary', isFavorite);
                favoriteBtn.classList.toggle('border-primary/45', isFavorite);
            };

            setFavoriteState(favoriteBtn.dataset.favoriteState === '1');

            favoriteBtn.addEventListener('click', async () => {
                if (favoriteBtn.dataset.loading === '1') {
                    return;
                }
                favoriteBtn.dataset.loading = '1';
                try {
                    const response = await fetch(favoriteBtn.dataset.favoriteUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: `_token=${encodeURIComponent(favoriteBtn.dataset.csrfToken || '')}`,
                    });
                    if (!response.ok) {
                        return;
                    }
                    const data = await response.json();
                    setFavoriteState(Boolean(data.isFavorite));
                    if (typeof data.favorites === 'number') {
                        favoriteCount.textContent = String(data.favorites);
                    }
                } finally {
                    favoriteBtn.dataset.loading = '0';
                }
            });
        })();
    </script>
{% endif %}
{% endblock %}