{% extends 'base.html' %}

{% block title %}Dashboard - Bizness Navigator{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Welcome Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Welcome back, {{ user.username }}</h1>
            <p class="text-gray-600 mt-1">Manage your businesses and ideas</p>
        </div>
        <a href="{% url 'generate_idea' %}" class="inline-flex items-center px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            New Idea
        </a>
    </div>

    <!-- Stats Grid -->
    <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>
            <p class="text-sm font-medium text-gray-600 mb-1">Total Businesses</p>
            <p class="text-3xl font-bold text-gray-900">{{ total_businesses }}</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-600" 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>
            </div>
            <p class="text-sm font-medium text-gray-600 mb-1">Active</p>
            <p class="text-3xl font-bold text-gray-900">{{ active_businesses }}</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </div>
            </div>
            <p class="text-sm font-medium text-gray-600 mb-1">Ideas Created</p>
            <p class="text-3xl font-bold text-gray-900">{{ recent_ideas|length }}</p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl border border-gray-200 p-8">
        <h2 class="text-xl font-semibold text-gray-900 mb-6">Quick Actions</h2>
        <div class="grid md:grid-cols-3 gap-4">
            <a href="{% url 'generate_idea' %}" class="group flex items-start p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-blue-600 transition">
                    <svg class="w-5 h-5 text-blue-600 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="font-semibold text-gray-900">Idea Generator</p>
                    <p class="text-sm text-gray-600 mt-1">Create new business idea</p>
                </div>
            </a>

            <a href="{% url 'locations:search' %}" class="group flex items-start p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-green-600 transition">
                    <svg class="w-5 h-5 text-green-600 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="font-semibold text-gray-900">Location Check</p>
                    <p class="text-sm text-gray-600 mt-1">Validate business location</p>
                </div>
            </a>

            <a href="{% url 'business_list' %}" class="group flex items-start p-4 border border-gray-200 rounded-lg hover:border-gray-300 hover:bg-gray-50 transition">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-purple-600 transition">
                    <svg class="w-5 h-5 text-purple-600 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="font-semibold text-gray-900">My Businesses</p>
                    <p class="text-sm text-gray-600 mt-1">Manage projects</p>
                </div>
            </a>
        </div>
    </div>

    <!-- My Businesses -->
    {% if businesses %}
    <div class="bg-white rounded-xl border border-gray-200 p-8">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-semibold text-gray-900">My Businesses</h2>
            <a href="{% url 'business_list' %}" class="text-sm font-semibold text-gray-600 hover:text-gray-900 transition">
                View All
            </a>
        </div>
        <div class="grid md:grid-cols-2 gap-4">
            {% for business in businesses|slice:":4" %}
            <a href="{% url 'business_detail' business.id %}" class="group border border-gray-200 rounded-lg p-4 hover:border-gray-300 hover:bg-gray-50 transition">
                <div class="flex items-start justify-between mb-3">
                    <h3 class="font-semibold text-gray-900 group-hover:text-gray-700">{{ business.name }}</h3>
                    <span class="flex-shrink-0 px-2 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{% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ business.get_status_display }}
                    </span>
                </div>
                <p class="text-sm text-gray-600 mb-3 line-clamp-2">{{ business.description|truncatewords:15 }}</p>
                <div class="flex items-center justify-between text-sm text-gray-500">
                    <span>Capital: {{ business.initial_capital|floatformat:0 }} UZS</span>
                    {% if business.category %}
                    <span>{{ business.category.name }}</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Recent Ideas -->
    {% if recent_ideas %}
    <div class="bg-white rounded-xl border border-gray-200 p-8">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-semibold text-gray-900">Recent Ideas</h2>
        </div>
        <div class="space-y-4">
            {% for idea in recent_ideas %}
            <div class="border-l-4 border-purple-500 pl-4 py-2 hover:bg-gray-50 transition">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <h3 class="font-semibold text-gray-900">{{ idea.title }}</h3>
                        <p class="text-sm text-gray-600 mt-1">{{ idea.description|truncatewords:20 }}</p>
                        <div class="flex gap-4 mt-2 text-xs text-gray-500">
                            <span>Investment: {{ idea.investment_required|floatformat:0 }} UZS</span>
                            <span>Profit: {{ idea.potential_profit|floatformat:0 }} UZS/mo</span>
                            <span>Payback: {{ idea.payback_period }} months</span>
                        </div>
                    </div>
                    <a href="{% url 'business_idea_detail' idea.id %}" class="ml-4 text-sm font-semibold text-gray-600 hover:text-gray-900 whitespace-nowrap transition">
                        Details
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="bg-white rounded-xl border border-gray-200 p-12 text-center">
        <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
        </svg>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Start Your Entrepreneurial Journey</h3>
        <p class="text-gray-600 mb-6">Generate your first AI-powered business idea</p>
        <a href="{% url 'generate_idea' %}" class="inline-flex items-center px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition">
            Create First Idea
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}