{% extends 'base.html' %}
{% load math_filters %}

{% block title %}{{ business.name }} - Bizness Navigator{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto space-y-8">
    <!-- 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>
        <a href="{% url 'business_list' %}" class="hover:text-gray-900 transition">Businesses</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">{{ business.name }}</span>
    </nav>

    <!-- Header -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
            <div class="flex-1 space-y-4">
                <div class="flex items-center space-x-3">
                    <h1 class="text-3xl font-bold text-gray-900">{{ business.name }}</h1>
                    <span class="px-3 py-1 text-xs font-semibold rounded-full {% if business.status == 'active' %}bg-green-100 text-green-800{% elif business.status == 'planning' %}bg-yellow-100 text-yellow-800{% elif business.status == 'registration' %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ business.get_status_display }}
                    </span>
                </div>

                {% if business.category %}
                <p class="text-gray-600">{{ business.category.name }}</p>
                {% endif %}

                <p class="text-gray-700 leading-relaxed">{{ business.description }}</p>
            </div>

            <div class="flex flex-col gap-3">
                <a href="{% url 'financial_forecast' business.id %}" class="inline-flex items-center justify-center px-4 py-2 bg-gray-900 hover:bg-gray-800 text-white text-sm font-semibold rounded-lg transition">
                    View Forecast
                </a>
                {% if business.idea %}
                <a href="{% url 'business_idea_detail' business.idea.id %}" class="inline-flex items-center justify-center px-4 py-2 bg-white hover:bg-gray-50 text-gray-900 text-sm font-semibold rounded-lg border border-gray-300 transition">
                    View Original Idea
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Key Metrics -->
    <div class="grid md:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border-2 border-blue-200 p-6 relative overflow-hidden group hover:shadow-lg transition">
            <div class="absolute top-0 right-0 w-20 h-20 bg-blue-200 rounded-full -mr-10 -mt-10 opacity-50"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-sm font-semibold text-blue-700 mb-1">Initial Capital</p>
                <p class="text-2xl font-bold text-blue-900">{{ business.initial_capital|floatformat:0 }}</p>
                <p class="text-xs text-blue-600 mt-1">UZS</p>
            </div>
        </div>

        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl border-2 border-green-200 p-6 relative overflow-hidden group hover:shadow-lg transition">
            <div class="absolute top-0 right-0 w-20 h-20 bg-green-200 rounded-full -mr-10 -mt-10 opacity-50"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                </div>
                <p class="text-sm font-semibold text-green-700 mb-1">Monthly Revenue</p>
                <p class="text-2xl font-bold text-green-900">
                    {% if business.monthly_revenue > 0 %}
                        {{ business.monthly_revenue|floatformat:0 }}
                    {% else %}
                        {{ business.initial_capital|mul:0.15|floatformat:0 }}
                    {% endif %}
                </p>
                <p class="text-xs text-green-600 mt-1">UZS/month</p>
            </div>
        </div>

        <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl border-2 border-orange-200 p-6 relative overflow-hidden group hover:shadow-lg transition">
            <div class="absolute top-0 right-0 w-20 h-20 bg-orange-200 rounded-full -mr-10 -mt-10 opacity-50"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
                    </svg>
                </div>
                <p class="text-sm font-semibold text-orange-700 mb-1">Monthly Expenses</p>
                <p class="text-2xl font-bold text-orange-900">
                    {% if business.monthly_expenses > 0 %}
                        {{ business.monthly_expenses|floatformat:0 }}
                    {% else %}
                        {{ business.initial_capital|mul:0.08|floatformat:0 }}
                    {% endif %}
                </p>
                <p class="text-xs text-orange-600 mt-1">UZS/month</p>
            </div>
        </div>

        <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl border-2 border-purple-200 p-6 relative overflow-hidden group hover:shadow-lg transition">
            <div class="absolute top-0 right-0 w-20 h-20 bg-purple-200 rounded-full -mr-10 -mt-10 opacity-50"></div>
            <div class="relative">
                <div class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition">
                    <svg class="w-6 h-6 text-white" 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>
                </div>
                <p class="text-sm font-semibold text-purple-700 mb-1">Monthly Profit</p>
                <p class="text-2xl font-bold text-purple-900">
                    {% if business.monthly_profit != 0 %}
                        {{ business.monthly_profit|floatformat:0 }}
                    {% else %}
                        {{ business.initial_capital|mul:0.07|floatformat:0 }}
                    {% endif %}
                </p>
                <p class="text-xs text-purple-600 mt-1">UZS/month</p>
            </div>
        </div>
    </div>

    <!-- Performance -->
    <div class="grid md:grid-cols-2 gap-6">
        <!-- ROI Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
            <h2 class="text-lg font-semibold text-gray-900 mb-6">Return on Investment</h2>
            <div class="space-y-6">
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <span class="text-sm font-medium text-gray-600">Annual ROI</span>
                        <span class="text-3xl font-bold text-gray-900">{{ business.roi_percentage|floatformat:1 }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-600 h-2 rounded-full transition-all duration-1000" style="width: {% if business.roi_percentage > 100 %}100{% else %}{{ business.roi_percentage|floatformat:0 }}{% endif %}%"></div>
                    </div>
                </div>

                <div class="pt-6 border-t border-gray-200 space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">Break-even Period</span>
                        <span class="text-sm font-semibold text-gray-900">{{ business.break_even_months|floatformat:1 }} months</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">Yearly Profit</span>
                        <span class="text-sm font-semibold text-gray-900">{{ business.yearly_profit|floatformat:0 }} UZS</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-600">Performance Rating</span>
                        <span class="text-sm font-semibold text-gray-900">{{ business.get_performance_rating }}/5</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Legal Info Card -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
            <h2 class="text-lg font-semibold text-gray-900 mb-6">Legal Information</h2>
            <div class="space-y-4">
                {% if business.inn %}
                <div>
                    <p class="text-sm font-medium text-gray-500 mb-1">Tax ID (INN)</p>
                    <p class="text-base text-gray-900">{{ business.inn }}</p>
                </div>
                {% endif %}

                {% if business.legal_form %}
                <div>
                    <p class="text-sm font-medium text-gray-500 mb-1">Legal Form</p>
                    <p class="text-base text-gray-900">{{ business.legal_form }}</p>
                </div>
                {% endif %}

                {% if business.registration_date %}
                <div>
                    <p class="text-sm font-medium text-gray-500 mb-1">Registration Date</p>
                    <p class="text-base text-gray-900">{{ business.registration_date|date:"F d, Y" }}</p>
                </div>
                {% endif %}

                <div>
                    <p class="text-sm font-medium text-gray-500 mb-1">Created</p>
                    <p class="text-base text-gray-900">{{ business.created_at|date:"F d, Y" }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Plans -->
    {% if financial_plans %}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-semibold text-gray-900">Financial Plans</h2>
            <a href="{% url 'financial_forecast' business.id %}" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition">
                View All
            </a>
        </div>

        <div class="space-y-4">
            {% for plan in financial_plans %}
            <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-medium text-gray-900">{{ plan.period_start|date:"M Y" }} - {{ plan.period_end|date:"M Y" }}</p>
                        <p class="text-sm text-gray-600 mt-1">{{ plan.duration_months }} months forecast</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-gray-600">Projected Profit</p>
                        <p class="text-lg font-semibold text-gray-900">{{ plan.projected_profit|floatformat:0 }} UZS</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Actions -->
    <div class="flex gap-4">
        <a href="{% url 'business_list' %}" class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-lg border border-gray-300 transition">
            Back to Businesses
        </a>
        <a href="{% url 'financial_forecast' business.id %}" class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition">
            View Financial Forecast
        </a>
    </div>
</div>
{% endblock %}