{% extends 'base.html' %}

{% block title %}My Businesses - Bizness Navigator{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">My Businesses</h1>
            <p class="text-gray-600 mt-1">Manage your business projects</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 Business
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <form method="GET" class="grid md:grid-cols-3 gap-4">
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select name="status" id="status" class="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
                    <option value="">All Statuses</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if selected_status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select name="category" id="category" class="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
                    <option value="">All Categories</option>
                    {% for cat in categories %}
                    <option value="{{ cat.id }}" {% if selected_category == cat.id|stringformat:"s" %}selected{% endif %}>
                        {{ cat.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div class="flex items-end">
                <button type="submit" class="w-full px-6 py-2 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition">
                    Apply Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Business List -->
    {% if businesses %}
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for business in businesses %}
        <a href="{% url 'business_detail' business.id %}" class="group bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-lg transition overflow-hidden">
            <!-- Header -->
            <div class="bg-gray-900 p-6 text-white">
                <div class="flex items-start justify-between mb-3">
                    <h3 class="text-xl font-semibold flex-1 group-hover:text-gray-200 transition">{{ business.name }}</h3>
                    <span class="flex-shrink-0 ml-2 px-2 py-1 text-xs font-semibold rounded-full {% if business.status == 'active' %}bg-green-500{% elif business.status == 'planning' %}bg-yellow-500{% else %}bg-gray-500{% endif %}">
                        {{ business.get_status_display }}
                    </span>
                </div>
                {% if business.category %}
                <p class="text-sm text-white/80">{{ business.category.name }}</p>
                {% endif %}
            </div>

            <!-- Body -->
            <div class="p-6">
                <p class="text-gray-600 mb-4 line-clamp-2">
                    {{ business.description|truncatewords:20 }}
                </p>

                <!-- Metrics -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-blue-50 rounded-lg p-3">
                        <p class="text-xs text-blue-600 font-medium mb-1">Capital</p>
                        <p class="text-sm font-bold text-blue-900">{{ business.initial_capital|floatformat:0 }}</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-3">
                        <p class="text-xs text-green-600 font-medium mb-1">Profit/mo</p>
                        <p class="text-sm font-bold text-green-900">{{ business.monthly_profit|floatformat:0 }}</p>
                    </div>
                </div>

                <!-- Action -->
                <div class="mt-4 flex items-center text-gray-600 group-hover:text-gray-900 transition">
                    <span class="text-sm font-semibold">View Details</span>
                    <svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition" 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>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <!-- Empty State -->
    <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="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>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">No Businesses Yet</h3>
        <p class="text-gray-600 mb-6">Create your first business project</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">
            <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>
            Create Business
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}