{% extends 'base.html' %}

{% block title %}Financial Forecast - {{ business.name }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-8">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Financial Forecast</h1>
            <p class="text-gray-600 mt-1">{{ business.name }}</p>
        </div>
        <form method="POST" action="{% url 'regenerate_forecast' business.id %}">
            {% csrf_token %}
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-gray-900 hover:bg-gray-800 text-white text-sm font-semibold rounded-lg 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
                Regenerate Forecast
            </button>
        </form>
    </div>

    {% if latest_plan %}
    <!-- Summary Cards -->
    <div class="grid md:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <p class="text-sm font-medium text-gray-500 mb-2">Total Revenue</p>
            <p class="text-2xl font-bold text-gray-900">{{ latest_plan.projected_revenue|floatformat:0 }}</p>
            <p class="text-xs text-gray-500 mt-1">12 months</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <p class="text-sm font-medium text-gray-500 mb-2">Total Expenses</p>
            <p class="text-2xl font-bold text-gray-900">{{ latest_plan.projected_expenses|floatformat:0 }}</p>
            <p class="text-xs text-gray-500 mt-1">12 months</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <p class="text-sm font-medium text-gray-500 mb-2">Total Profit</p>
            <p class="text-2xl font-bold text-green-600">{{ latest_plan.projected_profit|floatformat:0 }}</p>
            <p class="text-xs text-gray-500 mt-1">12 months</p>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <p class="text-sm font-medium text-gray-500 mb-2">Profit Margin</p>
            <p class="text-2xl font-bold text-gray-900">{{ latest_plan.profit_margin|floatformat:1 }}%</p>
            <p class="text-xs text-gray-500 mt-1">Average</p>
        </div>
    </div>

    <!-- Chart -->
    <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">12-Month Projection</h2>
        <canvas id="forecastChart" height="100"></canvas>
    </div>

    <!-- Monthly Breakdown -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-8">
            <h2 class="text-lg font-semibold text-gray-900 mb-6">Monthly Breakdown</h2>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-900">Month</th>
                            <th class="text-right py-3 px-4 text-sm font-semibold text-gray-900">Revenue</th>
                            <th class="text-right py-3 px-4 text-sm font-semibold text-gray-900">Expenses</th>
                            <th class="text-right py-3 px-4 text-sm font-semibold text-gray-900">Profit</th>
                            <th class="text-right py-3 px-4 text-sm font-semibold text-gray-900">Cumulative</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for month_data in latest_plan.revenue_breakdown %}
                        <tr class="hover:bg-gray-50 transition">
                            <td class="py-3 px-4 text-sm font-medium text-gray-900">Month {{ month_data.month }}</td>
                            <td class="py-3 px-4 text-sm text-right text-gray-900">{{ month_data.revenue|floatformat:0 }}</td>
                            <td class="py-3 px-4 text-sm text-right text-gray-900">{{ month_data.costs|floatformat:0 }}</td>
                            <td class="py-3 px-4 text-sm text-right {% if month_data.profit > 0 %}text-green-600{% else %}text-red-600{% endif %} font-semibold">
                                {{ month_data.profit|floatformat:0 }}
                            </td>
                            <td class="py-3 px-4 text-sm text-right {% if month_data.cumulative_profit > 0 %}text-green-600{% else %}text-red-600{% endif %} font-semibold">
                                {{ month_data.cumulative_profit|floatformat:0 }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- AI Recommendations -->
    {% if latest_plan.ai_recommendations %}
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">AI Recommendations</h2>
        <div class="prose prose-sm max-w-none text-gray-700">
            {{ latest_plan.ai_recommendations|linebreaks }}
        </div>
    </div>
    {% endif %}

    {% else %}
    <!-- No Forecast -->
    <div class="bg-white rounded-2xl shadow-sm 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
        </svg>
        <h3 class="text-xl font-semibold text-gray-900 mb-2">No Forecast Available</h3>
        <p class="text-gray-600 mb-6">Generate a financial forecast to see projections for this business.</p>
        <form method="POST" action="{% url 'regenerate_forecast' business.id %}">
            {% csrf_token %}
            <button type="submit" class="inline-flex items-center px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition">
                Generate Forecast
            </button>
        </form>
    </div>
    {% endif %}

    <!-- Back Button -->
    <div>
        <a href="{% url 'business_detail' business.id %}" class="inline-flex items-center text-sm font-semibold text-gray-600 hover:text-gray-900 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 Business Details
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    {% if chart_data %}
    const chartData = {{ chart_data|safe }};

    if (chartData.length > 0) {
        const ctx = document.getElementById('forecastChart');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.map(d => d.month),
                datasets: [
                    {
                        label: 'Revenue',
                        data: chartData.map(d => d.revenue),
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Costs',
                        data: chartData.map(d => d.costs),
                        borderColor: 'rgb(239, 68, 68)',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: 'Profit',
                        data: chartData.map(d => d.profit),
                        borderColor: 'rgb(34, 197, 94)',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12,
                                family: 'Inter'
                            }
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        padding: 12,
                        cornerRadius: 8,
                        titleFont: {
                            size: 13,
                            family: 'Inter'
                        },
                        bodyFont: {
                            size: 12,
                            family: 'Inter'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            font: {
                                size: 11,
                                family: 'Inter'
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 11,
                                family: 'Inter'
                            }
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }
    {% endif %}
});
</script>
{% endblock %}