{% extends "base.html" %}

{% block title %}ATP Dashboard - {{ suite_slug }}{% endblock %}

{% block content %}
<!-- Marketplace detail page content rendered by React -->
<div id="marketplace-detail-root" data-slug="{{ suite_slug }}"></div>
{% endblock %}

{% block scripts %}
<script type="text/babel">
    const { useState, useEffect } = React;

    // Star rating display
    function StarRating({ rating, count }) {
        const stars = [];
        for (let i = 1; i <= 5; i++) {
            const fill = i <= Math.round(rating || 0);
            stars.push(
                <svg key={i} className={`w-5 h-5 ${fill ? 'text-yellow-400' : 'text-gray-300'}`}
                     fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
            );
        }
        return (
            <div className="flex items-center gap-1">
                {stars}
                {count !== undefined && (
                    <span className="text-sm text-gray-500 ml-1">({count} ratings)</span>
                )}
            </div>
        );
    }

    // Version list
    function VersionList({ versions }) {
        if (!versions || versions.length === 0) {
            return <p className="text-gray-500">No versions available</p>;
        }
        return (
            <div className="space-y-3">
                {versions.map(v => (
                    <div key={v.id} className="border border-gray-200 rounded-lg p-4">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <span className="font-semibold">v{v.version}</span>
                                {v.is_latest && (
                                    <span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs">Latest</span>
                                )}
                                {v.is_deprecated && (
                                    <span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs">Deprecated</span>
                                )}
                                {v.breaking_changes && (
                                    <span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs">Breaking</span>
                                )}
                            </div>
                            <span className="text-sm text-gray-500">{v.test_count} tests</span>
                        </div>
                        {v.changelog && (
                            <p className="text-sm text-gray-600 mt-2">{v.changelog}</p>
                        )}
                        <div className="text-xs text-gray-400 mt-2">
                            {v.downloads} downloads
                            {v.released_at && ` | Released ${new Date(v.released_at).toLocaleDateString()}`}
                        </div>
                    </div>
                ))}
            </div>
        );
    }

    // Review list
    function ReviewList({ reviews }) {
        if (!reviews || reviews.length === 0) {
            return <p className="text-gray-500">No reviews yet</p>;
        }
        return (
            <div className="space-y-4">
                {reviews.map(r => (
                    <div key={r.id} className="border-b border-gray-200 pb-4">
                        <div className="flex items-center justify-between mb-1">
                            <div className="flex items-center gap-2">
                                <StarRating rating={r.rating} />
                                <span className="font-medium text-sm">{r.username || 'User'}</span>
                            </div>
                            <span className="text-xs text-gray-400">
                                {new Date(r.created_at).toLocaleDateString()}
                            </span>
                        </div>
                        {r.title && <p className="font-medium text-gray-900">{r.title}</p>}
                        {r.content && <p className="text-sm text-gray-600 mt-1">{r.content}</p>}
                        {r.version_reviewed && (
                            <span className="text-xs text-gray-400 mt-1 inline-block">
                                Reviewed v{r.version_reviewed}
                            </span>
                        )}
                    </div>
                ))}
            </div>
        );
    }

    // Suite detail page
    function SuiteDetailPage() {
        const slug = document.getElementById('marketplace-detail-root').dataset.slug;
        const [suite, setSuite] = useState(null);
        const [loading, setLoading] = useState(true);
        const [error, setError] = useState(null);
        const [activeTab, setActiveTab] = useState('overview');

        useEffect(() => {
            const fetchSuite = async () => {
                try {
                    const response = await fetch(`/api/marketplace/${slug}`);
                    if (response.ok) {
                        setSuite(await response.json());
                    } else {
                        setError('Suite not found');
                    }
                } catch (err) {
                    setError('Failed to load suite');
                } finally {
                    setLoading(false);
                }
            };
            fetchSuite();
        }, [slug]);

        if (loading) return <div className="text-center py-12 text-gray-500">Loading...</div>;
        if (error) return (
            <div className="container mx-auto px-4 py-12 text-center">
                <p className="text-red-500 text-lg">{error}</p>
                <a href="/marketplace" className="text-blue-600 hover:underline mt-4 inline-block">
                    Back to Marketplace
                </a>
            </div>
        );
        if (!suite) return null;

        const tabs = [
            { id: 'overview', label: 'Overview' },
            { id: 'versions', label: `Versions (${suite.versions ? suite.versions.length : 0})` },
            { id: 'reviews', label: `Reviews (${suite.total_ratings})` },
        ];

        return (
            <div className="container mx-auto px-4 py-6">
                <nav className="mb-4">
                    <a href="/marketplace" className="text-blue-600 hover:underline text-sm">
                        &larr; Back to Marketplace
                    </a>
                </nav>

                <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
                    <div className="flex items-start justify-between">
                        <div>
                            <div className="flex items-center gap-3 mb-2">
                                <h1 className="text-2xl font-bold text-gray-900">{suite.name}</h1>
                                {suite.is_verified && (
                                    <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">Verified</span>
                                )}
                                {suite.is_featured && (
                                    <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-sm">Featured</span>
                                )}
                            </div>
                            <p className="text-gray-600 mb-3">{suite.description || suite.short_description}</p>
                            <StarRating rating={suite.average_rating} count={suite.total_ratings} />
                        </div>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-4 pt-4 border-t border-gray-200">
                        <div>
                            <p className="text-xs text-gray-500">Publisher</p>
                            <p className="font-medium">{suite.publisher_name}</p>
                        </div>
                        <div>
                            <p className="text-xs text-gray-500">Version</p>
                            <p className="font-medium">v{suite.latest_version}</p>
                        </div>
                        <div>
                            <p className="text-xs text-gray-500">License</p>
                            <p className="font-medium">{suite.license_type}</p>
                        </div>
                        <div>
                            <p className="text-xs text-gray-500">Downloads</p>
                            <p className="font-medium">{suite.total_downloads.toLocaleString()}</p>
                        </div>
                        <div>
                            <p className="text-xs text-gray-500">Tests</p>
                            <p className="font-medium">{suite.test_count}</p>
                        </div>
                    </div>

                    {suite.tags && suite.tags.length > 0 && (
                        <div className="flex flex-wrap gap-2 mt-3">
                            {suite.tags.map((tag, i) => (
                                <span key={i} className="px-2 py-1 bg-blue-50 text-blue-700 rounded text-sm">{tag}</span>
                            ))}
                        </div>
                    )}

                    {suite.github_url && (
                        <div className="mt-3">
                            <a href={suite.github_url} target="_blank" rel="noopener noreferrer"
                               className="text-sm text-blue-600 hover:underline">
                                View on GitHub &rarr;
                            </a>
                        </div>
                    )}
                </div>

                <div className="border-b border-gray-200 mb-6">
                    <nav className="flex gap-4">
                        {tabs.map(tab => (
                            <button key={tab.id}
                                onClick={() => setActiveTab(tab.id)}
                                className={`py-3 px-1 border-b-2 text-sm font-medium ${
                                    activeTab === tab.id
                                        ? 'border-blue-500 text-blue-600'
                                        : 'border-transparent text-gray-500 hover:text-gray-700'
                                }`}>
                                {tab.label}
                            </button>
                        ))}
                    </nav>
                </div>

                {activeTab === 'overview' && (
                    <div className="bg-white rounded-lg shadow-sm border p-6">
                        <h2 className="text-lg font-semibold mb-3">About this suite</h2>
                        <p className="text-gray-600 whitespace-pre-wrap">
                            {suite.description || 'No detailed description available.'}
                        </p>
                        <div className="mt-4 pt-4 border-t border-gray-200">
                            <h3 className="font-medium mb-2">Details</h3>
                            <dl className="grid grid-cols-2 gap-2 text-sm">
                                <dt className="text-gray-500">Category</dt>
                                <dd>{suite.category}</dd>
                                <dt className="text-gray-500">Source</dt>
                                <dd>{suite.source_type}</dd>
                                <dt className="text-gray-500">Published</dt>
                                <dd>{suite.published_at ? new Date(suite.published_at).toLocaleDateString() : 'N/A'}</dd>
                                <dt className="text-gray-500">Last Updated</dt>
                                <dd>{new Date(suite.updated_at).toLocaleDateString()}</dd>
                            </dl>
                        </div>
                    </div>
                )}

                {activeTab === 'versions' && (
                    <div className="bg-white rounded-lg shadow-sm border p-6">
                        <h2 className="text-lg font-semibold mb-3">Versions</h2>
                        <VersionList versions={suite.versions} />
                    </div>
                )}

                {activeTab === 'reviews' && (
                    <div className="bg-white rounded-lg shadow-sm border p-6">
                        <h2 className="text-lg font-semibold mb-3">Reviews</h2>
                        <ReviewList reviews={suite.recent_reviews} />
                    </div>
                )}
            </div>
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('marketplace-detail-root'));
    root.render(<SuiteDetailPage />);
</script>
{% endblock %}