{% extends "base.html" %}
{% set title = location.name + " - Weather Details" %}

{% block head %}
<style>
.weather-detail-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
}

.forecast-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin: 5px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    color: white;
}

.historical-chart {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.growing-summary {
    background: #e8f5e8;
    border: 1px solid #28a745;
    border-radius: 10px;
    padding: 20px;
}

.vpd-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 5px;
}

.vpd-optimal { background-color: #28a745; }
.vpd-low { background-color: #ffc107; }
.vpd-high { background-color: #dc3545; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('user_weather.my_weather_dashboard') }}">My Weather</a></li>
                    <li class="breadcrumb-item active">{{ location.name }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1><i data-feather="map-pin" class="me-2"></i>{{ location.name }}</h1>
                    <p class="text-muted mb-0">
                        <i data-feather="navigation" class="me-1"></i>ZIP: {{ location.zip_code }} | 
                        <i data-feather="home" class="me-1"></i>{{ location.growing_type|title }}
                        {% if location.microclimate_notes %}
                        <br><small>{{ location.microclimate_notes }}</small>
                        {% endif %}
                    </p>
                </div>
                <div>
                    <a href="{{ url_for('user_weather.my_weather_dashboard') }}" class="btn btn-outline-primary">
                        <i data-feather="arrow-left" class="me-2"></i>Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Current Weather -->
    {% if current_weather %}
    <div class="row">
        <div class="col-12">
            <div class="weather-detail-card">
                <h3 class="mb-4"><i data-feather="thermometer" class="me-2"></i>Current Conditions</h3>
                <div class="row">
                    <div class="col-md-3">
                        <div class="metric-card text-center">
                            <div style="font-size: 3rem; font-weight: bold;">
                                {{ "%.1f"|format(current_weather.temperature) }}°C
                            </div>
                            <div>Temperature</div>
                            {% if current_weather.temperature_min and current_weather.temperature_max %}
                            <small>{{ "%.1f"|format(current_weather.temperature_min) }}° / {{ "%.1f"|format(current_weather.temperature_max) }}°</small>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="metric-card text-center">
                            <div style="font-size: 3rem; font-weight: bold;">
                                {{ "%.0f"|format(current_weather.humidity) }}%
                            </div>
                            <div>Humidity</div>
                            <small>{% if current_weather.humidity < 50 %}Low{% elif current_weather.humidity > 70 %}High{% else %}Good{% endif %}</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="metric-card text-center">
                            <div style="font-size: 2rem; font-weight: bold;">
                                {{ "%.1f"|format(current_weather.wind_speed) }}
                            </div>
                            <div>Wind (km/h)</div>
                            <small>{{ "%.0f"|format(current_weather.wind_direction) }}° direction</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="metric-card text-center">
                            {% if current_weather.vpd %}
                            <div style="font-size: 2rem; font-weight: bold;">
                                {{ "%.2f"|format(current_weather.vpd) }}
                                <span class="vpd-indicator {% if current_weather.vpd < 0.8 %}vpd-low{% elif current_weather.vpd > 1.2 %}vpd-high{% else %}vpd-optimal{% endif %}"></span>
                            </div>
                            <div>VPD (kPa)</div>
                            <small>{% if current_weather.vpd < 0.8 %}Too Low{% elif current_weather.vpd > 1.2 %}Too High{% else %}Optimal{% endif %}</small>
                            {% else %}
                            <div style="font-size: 2rem; font-weight: bold;">
                                {{ "%.0f"|format(current_weather.pressure) }}
                            </div>
                            <div>Pressure (hPa)</div>
                            <small>Atmospheric pressure</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                {% if current_weather.description %}
                <div class="text-center mt-3">
                    <h5>{{ current_weather.get_weather_description() }}</h5>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Weather Alerts -->
    {% if alerts %}
    <div class="row mb-4">
        <div class="col-12">
            <h3><i data-feather="alert-triangle" class="me-2"></i>Weather Alerts</h3>
            {% for alert in alerts %}
            <div class="alert alert-{{ 'danger' if alert.severity == 'critical' else 'warning' if alert.severity == 'high' else 'info' }}">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h5 class="alert-heading">{{ alert.title }}</h5>
                        <p>{{ alert.message }}</p>
                        {% if alert.orchid_care_advice %}
                        <hr>
                        <p class="mb-0"><strong>Orchid Care Advice:</strong> {{ alert.orchid_care_advice }}</p>
                        {% endif %}
                    </div>
                    <button class="btn btn-sm btn-outline-secondary" onclick="acknowledgeAlert({{ alert.id }})">
                        <i data-feather="check"></i>
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- 7-Day Forecast -->
    {% if forecast %}
    <div class="row mb-4">
        <div class="col-12">
            <h3><i data-feather="calendar" class="me-2"></i>7-Day Forecast</h3>
            <div class="row">
                {% for day in forecast[:7] %}
                <div class="col-md-1 col-sm-2 col-3">
                    <div class="forecast-card">
                        <div class="fw-bold small">{{ day.recorded_at.strftime('%a') }}</div>
                        <div class="small text-muted">{{ day.recorded_at.strftime('%m/%d') }}</div>
                        <div class="my-2">
                            {% if day.weather_code %}
                            <small>{{ day.get_weather_description() }}</small>
                            {% endif %}
                        </div>
                        <div class="fw-bold">
                            {% if day.temperature_max %}{{ "%.0f"|format(day.temperature_max) }}°{% endif %}
                        </div>
                        <div class="text-muted small">
                            {% if day.temperature_min %}{{ "%.0f"|format(day.temperature_min) }}°{% endif %}
                        </div>
                        {% if day.precipitation %}
                        <div class="small">
                            <i data-feather="cloud-rain" style="width: 12px; height: 12px;"></i>
                            {{ "%.1f"|format(day.precipitation) }}mm
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Growing Conditions Summary -->
    {% if growing_summary and not growing_summary.error %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="growing-summary">
                <h3><i data-feather="trending-up" class="me-2"></i>Growing Conditions Summary (Last {{ growing_summary.period_days }} Days)</h3>
                <div class="row">
                    <div class="col-md-4">
                        <h5>Temperature</h5>
                        {% if growing_summary.temperature.avg %}
                        <p><strong>Average:</strong> {{ "%.1f"|format(growing_summary.temperature.avg) }}°C</p>
                        <p><strong>Range:</strong> {{ "%.1f"|format(growing_summary.temperature.min) }}°C - {{ "%.1f"|format(growing_summary.temperature.max) }}°C</p>
                        {% endif %}
                    </div>
                    <div class="col-md-4">
                        <h5>Humidity</h5>
                        {% if growing_summary.humidity.avg %}
                        <p><strong>Average:</strong> {{ "%.0f"|format(growing_summary.humidity.avg) }}%</p>
                        <p><strong>Range:</strong> {{ "%.0f"|format(growing_summary.humidity.min) }}% - {{ "%.0f"|format(growing_summary.humidity.max) }}%</p>
                        {% endif %}
                    </div>
                    <div class="col-md-4">
                        <h5>VPD</h5>
                        {% if growing_summary.vpd.avg %}
                        <p><strong>Average:</strong> {{ "%.2f"|format(growing_summary.vpd.avg) }} kPa</p>
                        <p><strong>Optimal:</strong> {{ growing_summary.vpd.optimal_range }}</p>
                        {% endif %}
                        <p><strong>Orchid-Friendly Days:</strong> {{ growing_summary.orchid_friendly_days }} / {{ growing_summary.data_points }}</p>
                    </div>
                </div>
                
                {% if growing_summary.recommendations %}
                <div class="mt-3">
                    <h5>Recommendations</h5>
                    <ul>
                        {% for rec in growing_summary.recommendations %}
                        <li>{{ rec }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Historical Data Chart Placeholder -->
    {% if historical %}
    <div class="row">
        <div class="col-12">
            <div class="historical-chart">
                <h3><i data-feather="bar-chart-2" class="me-2"></i>Recent Weather History</h3>
                <p class="text-muted">Temperature and humidity trends for the past week</p>
                <div class="row">
                    {% for day in historical[-7:] %}
                    <div class="col">
                        <div class="text-center">
                            <div class="small text-muted">{{ day.recorded_at.strftime('%m/%d') }}</div>
                            <div class="fw-bold">{{ "%.1f"|format(day.temperature) if day.temperature else '--' }}°C</div>
                            <div class="small">{{ "%.0f"|format(day.humidity) if day.humidity else '--' }}%</div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<script>
function acknowledgeAlert(alertId) {
    fetch(`{{ url_for('user_weather.acknowledge_alert', alert_id=0) }}`.replace('0', alertId), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error acknowledging alert');
        }
    });
}
</script>
{% endblock %}