{% extends "base.html" %}
{%- import "partials/carousel.html" as carousel -%}

{% block title %}{{ item.title }} - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page item-page"{% endblock %}

{% block head %}
<meta property="og:title" content="{{ item.title }} - {{ creator_username }}">
<meta property="og:description" content="{{ item.description }}">
<meta property="og:type" content="product">
<meta property="og:url" content="{{ host_url }}/i/{{ item.id }}">
<link rel="canonical" href="{{ host_url }}/i/{{ item.id }}">
<meta property="og:site_name" content="Makenot.work">
<meta property="product:price:amount" content="{{ item.price }}">
{% if item.cover_image_url.is_some() || project_cover_image_url.is_some() %}<meta name="twitter:card" content="summary_large_image">{% else %}<meta name="twitter:card" content="summary">{% endif %}
<meta name="twitter:title" content="{{ item.title }} - {{ creator_username }}">
<meta name="twitter:description" content="{{ item.description }}">
{% if let Some(img) = item.cover_image_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:image" content="{{ img }}">
{% else if let Some(img) = project_cover_image_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta property="og:image" content="{{ host_url }}/static/images/og-card.png">
<meta name="twitter:image" content="{{ host_url }}/static/images/og-card.png">
{% endif %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "{{ item.title_json()|safe }}",
    "description": "{{ item.description_json()|safe }}",
    "url": "{{ host_url }}/i/{{ item.id }}",
    "brand": {
        "@type": "Person",
        "name": "{{ creator_username }}",
        "url": "{{ host_url }}/u/{{ creator_username }}"
    },
    "offers": {
        "@type": "Offer",
        "price": "{{ item.price_decimal() }}",
        "priceCurrency": "USD",
        "availability": "https://schema.org/InStock",
        "url": "{{ host_url }}/i/{{ item.id }}"
    },
    "category": "{{ item.item_type }}"{% if let Some(img) = item.cover_image_url %},
    "image": "{{ img }}"{% endif %}
}
</script>
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <nav class="breadcrumb">
            <div>
                <a href="/">Home</a> /
                <a href="/u/{{ creator_username }}">{{ creator_username }}</a> /
                <a href="/p/{{ project_slug }}">{{ project_title }}</a> /
                <span>{{ item.title }}</span>
            </div>
            {% if is_owner %}
            <a href="/dashboard/item/{{ item.id }}" class="breadcrumb-edit-link">Edit Item</a>
            {% endif %}
        </nav>

        <div class="item-layout{% if item.cover_image_url.is_none() && item.item_type != "video" %} no-media{% endif %}">
            {% match item.content %}
            {% when ItemContent::Video with { video_s3_key, cover_url, .. } %}
            <div class="item-media content-section">
                <div id="video-container">
                    <video id="item-player" controls preload="metadata"
                           {% if let Some(url) = cover_url %}poster="{{ url }}"{% endif %}
                           class="video-player">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
            {% when _ %}
            {% if item.cover_image_url.is_some() %}
            <div class="item-media content-section">
                {% if let Some(img) = item.cover_image_url %}
                <img src="{{ img }}" alt="{{ item.title }}" class="item-cover-img">
                {% endif %}
            </div>
            {% endif %}
            {% endmatch %}

            <div class="item-details content-section">
                <h1 class="item-title">{{ item.title }}</h1>
                <div class="item-creator">
                    by <a href="/u/{{ creator_username }}">{{ creator_username }}</a>
                </div>

                <div class="item-price">{{ item.price }}</div>

                {# AI disclosure tier — visible before purchase per
                   site-docs/public/about/generative-ai.md. #}
                <div class="item-ai-tier">
                    <span class="badge ai-tier ai-tier-{{ item.ai_tier }}">{{ item.ai_tier.label() }}</span>
                </div>

                <div class="item-meta">
                    <div class="meta-item">
                        <div class="meta-label">Type</div>
                        <div class="meta-value">{{ item.item_type }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Released</div>
                        <div class="meta-value">{{ item.release_date }}</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">Sales</div>
                        <div class="meta-value">{{ item.sales_count }}</div>
                    </div>
                </div>

                <div class="item-tags">
                    {% for tag in item.tags %}
                    <a href="/discover?tag={{ tag.slug }}" class="tag tag-link{% if tag.is_primary %} tag-primary{% endif %}">{{ tag.name }}</a>
                    {% endfor %}
                </div>

                {% if !item.listed %}
                <div class="bundle-notice bundle-notice-inline">
                    <p class="bundle-notice-title">Included in a bundle</p>
                    <p class="bundle-notice-desc">This item isn't sold separately. You can get it as part of:</p>
                    {% for bundle in containing_bundles %}
                    <p class="bundle-notice-entry"><a href="/i/{{ bundle.id }}">{{ bundle.title }}</a> <span class="bundle-notice-price">{{ bundle.price }}</span></p>
                    {% endfor %}
                    {% if containing_bundles.is_empty() %}
                    <p class="bundle-notice-empty">No bundles currently available for this item.</p>
                    {% endif %}
                </div>
                {% else %}
                {# Assisted items disclose AI use above the buy CTA so
                   fans see it before purchase. Handmade and Generated
                   carry the badge above; only Assisted owes prose. #}
                {% if let crate::db::AiTier::Assisted = item.ai_tier %}
                {% if let Some(disclosure) = item.ai_disclosure.as_ref() %}
                <div class="ai-disclosure">
                    <div class="ai-disclosure-label">AI use</div>
                    <div class="ai-disclosure-text">{{ disclosure }}</div>
                </div>
                {% endif %}
                {% endif %}

                <div class="purchase-box card-muted">
                    <h3>What's included:</h3>
                    <ul>
                        {% if item.item_type == "bundle" %}
                        <li>{{ bundle_items.len() }} items in this bundle</li>
                        {% endif %}
                        <li>Lifetime access to all versions</li>
                        <li>Automatic update notifications</li>
                        <li>Direct creator support</li>
                    </ul>
                </div>

                {% if has_access %}
                <a href="/l/{{ item.id }}" class="btn-primary">View in library &rarr;</a>
                {% else if item.is_free %}
                <button class="btn-primary"
                        hx-post="/api/library/add/{{ item.id }}"
                        hx-swap="outerHTML">Add to Library - Free</button>
                {% else %}
                <details class="promo-details">
                    <summary class="promo-summary">Have a promo code?</summary>
                    <form hx-post="/api/promo-codes/claim"
                          hx-swap="outerHTML"
                          class="promo-form">
                        <input type="hidden" name="item_id" value="{{ item.id }}">
                        <input type="text" name="code" placeholder="Enter code" required
                               class="promo-input">
                        <button class="btn-secondary nowrap" type="submit">Apply</button>
                    </form>
                </details>

                {% if item.pwyw_enabled %}
                <a href="/purchase/{{ item.id }}" class="btn-primary">Pay What You Want - {{ item.price }}</a>
                {% else %}
                <a href="/purchase/{{ item.id }}" class="btn-primary">Buy Once - {{ item.price }}</a>
                {% endif %}

                <div class="payment-note">
                    Secure payment processing
                </div>
                {% endif %}
                {% endif %}

                {% if session_user.is_some() %}
                {% if !is_owner %}
                <div class="action-row">
                    <button class="btn-secondary full-width-btn" id="cart-btn"
                            onclick="toggleCart('{{ item.id }}')">{% if in_cart %}In Cart{% else %}Add to Cart{% endif %}</button>
                </div>
                <div class="action-row-tight">
                    <button class="btn-secondary full-width-btn" id="wishlist-btn"
                            onclick="toggleWishlist('{{ item.id }}')">{% if is_wishlisted %}Wishlisted{% else %}Add to Wishlist{% endif %}</button>
                </div>
                {% endif %}
                <div class="action-row-tight collection-picker-anchor">
                    <button class="btn-secondary full-width-btn{% if collection_count > 0 %} saved{% endif %}"
                            data-collection-trigger data-item-id="{{ item.id }}" data-collection-label
                            onclick="openCollectionPicker('{{ item.id }}', this)">{% if collection_count > 0 %}Saved ({{ collection_count }}){% else %}Save to collection{% endif %}</button>
                </div>
                {% endif %}
            </div>
        </div>

        {% if !gallery.is_empty() %}
        <section class="item-gallery content-section">
            {% call carousel::carousel("item-gallery", gallery) %}
        </section>
        {% endif %}

        <section class="item-description content-section">
            <h2 class="section-header">Description</h2>
            <div>
                <p>{{ item.description }}</p>
            </div>
        </section>

        {% if !sections.is_empty() %}
        <section class="item-sections content-section">
            <div class="section-tabs">
                {% for section in sections %}
                <button class="section-tab{% if loop.first %} is-selected{% endif %}"
                        data-tab="section-{{ section.slug }}"
                        onclick="switchSectionTab(this, 'section-{{ section.slug }}')">{{ section.title }}</button>
                {% endfor %}
            </div>
            {% for section in sections %}
            <div class="section-panel{% if loop.first %} active{% endif %}" id="section-{{ section.slug }}">
                {{ section.body_html|safe }}
            </div>
            {% endfor %}
        </section>
        {% endif %}

        {% if item.license_preset.is_some() %}
        <section class="item-description content-section">
            <h2 class="section-header">License</h2>
            <p class="license-preset-name">
                {% if item.license_preset.as_deref() == Some("personal_use") %}Personal Use Only
                {% else if item.license_preset.as_deref() == Some("royalty_free") %}Royalty-Free Commercial
                {% else if item.license_preset.as_deref() == Some("mit") %}MIT License
                {% else if item.license_preset.as_deref() == Some("apache2") %}Apache License 2.0
                {% else if item.license_preset.as_deref() == Some("cc_by_4") %}CC BY 4.0
                {% else if item.license_preset.as_deref() == Some("cc_by_nc_4") %}CC BY-NC 4.0
                {% else if item.license_preset.as_deref() == Some("cc0") %}Public Domain (CC0)
                {% else if item.license_preset.as_deref() == Some("custom") %}Custom License
                {% else %}License
                {% endif %}
            </p>
            <details>
                <summary class="license-summary">View full license text</summary>
                <pre class="license-text" id="license-text-content">Loading...</pre>
                <script>
                (function() {
                    var details = document.currentScript.closest('details');
                    var loaded = false;
                    details.addEventListener('toggle', function() {
                        if (details.open && !loaded) {
                            loaded = true;
                            fetch('/api/items/{{ item.id }}/license.txt')
                                .then(function(r) { return r.text(); })
                                .then(function(t) { document.getElementById('license-text-content').textContent = t; })
                                .catch(function() { document.getElementById('license-text-content').textContent = 'Failed to load license text.'; });
                        }
                    });
                })();
                </script>
            </details>
            <p class="license-download">
                <a href="/api/items/{{ item.id }}/license.txt" download="LICENSE.txt">Download LICENSE.txt</a>
            </p>
        </section>
        {% endif %}

        {% if !bundle_items.is_empty() %}
        <section class="bundle-contents content-section">
            <h2 class="section-header">What's Included ({{ bundle_items.len() }} items)</h2>
            {% for child in bundle_items %}
            <div class="bundle-child list-row">
                <span class="bundle-child-type">{{ child.item_type }}</span>
                <span class="bundle-child-title">
                    {% if child.listed %}
                    <a href="/i/{{ child.id }}">{{ child.title }}</a>
                    {% else %}
                    {{ child.title }}
                    {% endif %}
                </span>
                {% if child.price_cents > 0 %}
                <span class="bundle-child-price">{{ child.price }}</span>
                {% else %}
                <span class="bundle-child-price">Free</span>
                {% endif %}
            </div>
            {% endfor %}
        </section>
        {% endif %}

        {% if !containing_bundles.is_empty() && !item.listed %}
        <section class="bundle-notice">
            <p>This item is available as part of:</p>
            {% for bundle in containing_bundles %}
            <p class="bundle-list-entry"><a href="/i/{{ bundle.id }}">{{ bundle.title }} - {{ bundle.price }}</a></p>
            {% endfor %}
        </section>
        {% endif %}

        {% include "partials/discussion_section.html" %}

        <footer class="item-footer">
            <p>Powered by <a href="/">Makenot<span class="dot">.</span>work</a> &middot; Fair distribution for creatives of all kinds</p>
            <p class="footer-links">
                {% if is_owner %}
                <a href="/dashboard/item/{{ item.id }}">Edit</a> &middot;
                <a href="/dashboard/item/{{ item.id }}#embed">Embed</a> &middot;
                {% endif %}
                <a href="/i/{{ item.id }}" data-copy-link>Copy link</a> &middot;
                {% if session_user.is_some() %}
                <a href="javascript:void(0)" onclick="document.getElementById('report-modal').classList.remove('hidden')">Report this item</a> &middot;
                {% else %}
                <a href="/login">Report this item</a> &middot;
                {% endif %}
                <a href="/policy">Policy</a>
            </p>
        </footer>
    </div>

    {% if session_user.is_some() %}
    {% let report_target_type = "item" %}
    {% let report_target_id = item.id %}
    {% let report_has_labels = true %}
    {% include "partials/report_modal.html" %}
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
function switchSectionTab(btn, panelId) {
    document.querySelectorAll('.section-tab').forEach(function(t) { t.classList.remove('is-selected'); });
    document.querySelectorAll('.section-panel').forEach(function(p) { p.classList.remove('active'); });
    btn.classList.add('is-selected');
    var panel = document.getElementById(panelId);
    if (panel) panel.classList.add('active');
    history.replaceState(null, '', '#' + panelId);
}

(function() {
    var hash = window.location.hash.replace('#', '');
    if (hash) {
        var panel = document.getElementById(hash);
        var tab = document.querySelector('[data-tab="' + hash + '"]');
        if (panel && tab) switchSectionTab(tab, hash);
    }
})();

(function() {
    var player = document.getElementById('item-player');
    if (player) {
        var loaded = false;
        player.addEventListener('play', function loadSrc() {
            if (!loaded) {
                loaded = true;
                player.pause();
                fetch('/api/stream/{{ item.id }}')
                    .then(function(r) {
                        if (!r.ok) throw new Error('Stream unavailable');
                        return r.json();
                    })
                    .then(function(data) {
                        player.src = data.stream_url;
                        player.play();
                    })
                    .catch(function(err) {
                        showToast(err.message || 'Could not load video');
                    });
            }
        }, { once: true });
    }
})();
</script>

<script>
(function() {
    window.toggleWishlist = function(itemId) {
        var btn = document.getElementById('wishlist-btn');
        fetch('/api/wishlists/' + itemId, { method: 'POST', headers: csrfHeaders() })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.wishlisted) {
                    btn.textContent = 'Wishlisted';
                } else {
                    btn.textContent = 'Add to Wishlist';
                }
            });
    };

    window.toggleCart = function(itemId) {
        var btn = document.getElementById('cart-btn');
        fetch('/api/cart/' + itemId, { method: 'POST', headers: csrfHeaders() })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.in_cart) {
                    btn.textContent = 'In Cart';
                    showToast('Added to cart. Buying multiple items together saves the creator on processing fees.', 'info');
                } else {
                    btn.textContent = 'Add to Cart';
                }
            })
            .catch(function(err) {
                showToast(err.message || 'Failed to update cart');
            });
    };
})();
</script>
{% endblock %}