{% extends 'base.html' %}

{% block title %}{{ idea.title }} - Bizness Navigator{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-6">
    <!-- Breadcrumbs -->
    <nav class="flex items-center space-x-2 text-sm text-gray-500">
        <a href="{% url 'dashboard' %}" class="hover:text-gray-900 transition">Dashboard</a>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
        </svg>
        <span class="text-gray-900 font-medium">{{ idea.title }}</span>
    </nav>

    <!-- Header -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <div class="flex justify-between items-start mb-6">
            <div class="flex-1">
                <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ idea.title }}</h1>
                {% if idea.category %}
                <p class="text-lg text-gray-600">{{ idea.category.name }}</p>
                {% endif %}
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-500">Created</p>
                <p class="text-lg font-semibold text-gray-900">{{ idea.created_at|date:"M d, Y" }}</p>
            </div>
        </div>
    </div>

    <!-- Key Metrics -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
            <p class="text-sm text-gray-600 mb-2">Investment Required</p>
            <p class="text-2xl font-bold text-blue-600">{{ idea.investment_required|floatformat:0 }}</p>
            <p class="text-xs text-gray-500 mt-1">UZS</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
            <p class="text-sm text-gray-600 mb-2">Monthly Profit</p>
            <p class="text-2xl font-bold text-green-600">{{ idea.potential_profit|floatformat:0 }}</p>
            <p class="text-xs text-gray-500 mt-1">UZS</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
            <p class="text-sm text-gray-600 mb-2">Payback Period</p>
            <p class="text-2xl font-bold text-purple-600">{{ idea.payback_period }}</p>
            <p class="text-xs text-gray-500 mt-1">months</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-6 text-center">
            <p class="text-sm text-gray-600 mb-2">Annual ROI</p>
            <p class="text-2xl font-bold text-orange-600">{{ roi_months|floatformat:0 }}%</p>
            <p class="text-xs text-gray-500 mt-1">return on investment</p>
        </div>
    </div>

    <!-- Description -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Business Model Description</h2>
        <p class="text-gray-700 leading-relaxed whitespace-pre-wrap">{{ idea.description }}</p>
    </div>

    <!-- Target Audience -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Target Audience</h2>
        <p class="text-gray-700 leading-relaxed">{{ idea.target_audience }}</p>
    </div>

    <!-- Market Analysis -->
    {% if idea.market_analysis %}
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-4">Market Analysis</h2>
        <div class="prose max-w-none text-gray-700">
            {{ idea.market_analysis|safe }}
        </div>
    </div>
    {% endif %}

    <!-- Risks and Opportunities -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {% if idea.trends_data.risks %}
        <div class="bg-white rounded-xl border border-red-200 p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Risks</h3>
            <ul class="space-y-2">
                {% for risk in idea.trends_data.risks %}
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    <span class="text-gray-700">{{ risk }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}

        {% if idea.trends_data.recommendations %}
        <div class="bg-white rounded-xl border border-green-200 p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-4">Recommendations</h3>
            <ul class="space-y-2">
                {% for rec in idea.trends_data.recommendations %}
                <li class="flex items-start">
                    <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span class="text-gray-700">{{ rec }}</span>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>

    <!-- Call to Action -->
    <div class="bg-gray-900 rounded-2xl p-8 text-white">
        <div class="flex flex-col md:flex-row justify-between items-center gap-6">
            <div>
                <h3 class="text-2xl font-bold mb-2">Ready to Start?</h3>
                <p class="text-white/80">Create a business from this idea right now</p>
            </div>
            <div class="flex gap-4">
                <a href="{% url 'create_business_from_idea' idea.id %}" class="inline-flex items-center px-8 py-3 bg-white hover:bg-gray-100 text-gray-900 font-semibold rounded-lg transition">
                    Create Business
                </a>
                <a href="{% url 'generate_idea' %}" class="inline-flex items-center px-8 py-3 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg border border-white/20 transition">
                    New Idea
                </a>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="text-center">
        <a href="{% url 'dashboard' %}" class="inline-flex items-center text-gray-600 hover:text-gray-900 font-medium transition">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Back to Dashboard
        </a>
    </div>
</div>
{% endblock %}