%# /templates/chelsea.html.ep

% layout 'default';
% title 'Chelsea Weather Dashboard';

<% content_for 'head' => begin %>
<style>
    /* Weather Dashboard Styling */
    :root {
        --bg: #0f172a; --card: #1e293b; --border: #334155;
        --text: #f8fafc;
        --dim: #94a3b8; --accent: #38bdf8;
    }

    body { 
        background: var(--bg);
        color: var(--text); 
        font-family: 'Inter', system-ui, -apple-system, sans-serif; 
        margin: 0; 
        scroll-behavior: smooth;
    }

    .container { 
        max-width: 900px; 
        margin: 0 auto;
        padding: 15px; 
    }

    /* Sticky Navigation */
    .jump-nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(10px);
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: center;
        -webkit-overflow-scrolling: touch;
    }

    .jump-nav a {
        background: var(--bg-card);
        color: var(--dim);
        padding: 6px 14px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .jump-nav a:hover { 
        color: var(--accent); 
        border-color: var(--accent);
        background: rgba(56, 189, 248, 0.1);
    }

    .header { 
        display: flex;
        justify-content: space-between; 
        align-items: center; 
        padding-bottom: 20px; 
        border-bottom: 2px solid var(--border); 
        margin-bottom: 20px;
    }

    /* Day Section - Collapsible Container */
    .day-section { 
        background: var(--card); 
        border-radius: 12px; 
        margin-bottom: 1rem;
        overflow: hidden; 
        border: 1px solid var(--border); 
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    /* Header is now clickable with an arrow indicator */
    .day-header { 
        background: #334155; 
        padding: 15px 20px;
        font-weight: 700; 
        color: var(--accent); 
        font-size: 1.2rem; 
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
    }

    /* Arrow Indicator */
    .day-header::after {
        content: '▼';
        font-size: 0.8rem;
        transition: transform 0.3s ease;
        opacity: 0.7;
    }

    /* Rotate arrow when expanded */
    .day-section.expanded .day-header::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    table { width: 100%; border-collapse: collapse; margin: 0; }

    /* Collapsed state: Hide table by default */
    .day-section table {
        display: none;
    }

    /* Expanded state: Show table */
    .day-section.expanded table {
        display: table;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    th { 
        background: rgba(15, 23, 42, 0.5);
        color: var(--dim); 
        font-size: 0.65rem; 
        text-transform: uppercase; 
        padding: 12px; 
        letter-spacing: 0.05em;
    }

    td { 
        padding: 14px 8px;
        border-bottom: 1px solid var(--border); 
        text-align: center; 
        font-size: 0.95rem; 
    }

    tr:hover { background: rgba(255, 255, 255, 0.02); }

    /* Condition Coloring */
    .wind-vlow { color: #94a3b8; } 
    .wind-low { color: #4ade80; } 
    .wind-med { color: #fbbf24; } 
    .wind-high { color: #f87171; } 
    .wind-extreme { color: #f43f5e; font-weight: 900; }

    .temp-cool { color: #60a5fa; } 
    .temp-mild { color: #4ade80; } 
    .temp-warm { color: #fbbf24; } 
    .temp-hot { color: #f97316; } 
    .temp-vhot { color: #ef4444; font-weight: 800; }

    .time-cell { font-weight: 700; color: var(--text); white-space: nowrap; }
    .unit { font-size: 0.7rem; color: var(--dim); margin-left: 2px; }

    /* Mobile Optimization */
    @media (max-width: 600px) {
        .hide-mobile { display: none; }
        .jump-nav { justify-content: flex-start; padding-left: 10px; }
        td, th { padding: 12px 4px; font-size: 0.85rem; }
        h1 { font-size: 1.5rem; }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        
        // 1. Toggle visibility when clicking the Day Header
        document.querySelectorAll('.day-header').forEach(header => {
            header.addEventListener('click', () => {
                const section = header.parentElement;
                section.classList.toggle('expanded');
            });
        });

        // 2. Handle Jump Links: Expand target section and smooth scroll
        document.querySelectorAll('.jump-nav a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const targetId = link.getAttribute('href');
                const targetSection = document.querySelector(targetId);

                if (targetSection) {
                    // Expand the target day
                    targetSection.classList.add('expanded');
                    
                    // Smooth scroll to it
                    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    
                    // Update URL hash manually
                    history.pushState(null, null, targetId);
                }
            });
        });

        // 3. Handle Deep Linking (e.g. refresh on specific day)
        if (window.location.hash) {
            const targetSection = document.querySelector(window.location.hash);
            if (targetSection) {
                targetSection.classList.add('expanded');
                setTimeout(() => {
                    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 100);
            }
        }
    });
</script>
<% end %>

<div class="container">
    <div class="header">
        <h1>🏖️ Chelsea Forecast</h1>
        <a href="/chelsea" style="background:var(--accent); color:#0f172a; padding:8px 16px; border-radius:8px; font-weight:700; text-decoration:none; font-size:0.85rem;">REFRESH</a>
    </div>

    <% if (scalar @$forecast > 0) { %>
        
        <nav class="jump-nav">
            <% for my $day (@$forecast) { %>
                <% my $short_name = (split(',', $day->{label}))[0]; %>
                <a href="#day-<%= $short_name %>"><%= $short_name %></a>
            <% } %>
        </nav>

        <% for my $day (@$forecast) { %>
            <% my $anchor_id = (split(',', $day->{label}))[0]; %>
            <div class="day-section" id="day-<%= $anchor_id %>">
                <div class="day-header"><%= $day->{label} %></div>
                <table>
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Cond</th>
                            <th>Temp</th>
                            <th>Wind</th>
                            <th class="hide-mobile">Gusts</th>
                            <th>Waves</th>
                            <th>Rain</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for my $r (@{$day->{rows}}) { %>
                            <tr>
                                <td class="time-cell"><%= $r->{time} %></td>
                                <td style="font-size:1.4rem;"><%= $r->{icon} %></td>
                                <td class="<%= $r->{t_class} %>" style="font-weight:700;"><%= $r->{temp} %>°</td>
                                <td class="<%= $r->{w_class} %>" style="font-weight:700;">
                                    <%= $r->{ws_kmh} %><span class="unit">km/h</span>
                                </td>
                                <td class="hide-mobile" style="color:#94a3b8;">
                                    <%= $r->{wg_kmh} %><span class="unit">km/h</span>
                                </td>
                                <td style="color:#60a5fa; font-weight:600;">
                                    <%= $r->{wh} %><span class="unit">m</span>
                                </td>
                                <td style="color:#38bdf8;">
                                    <%= $r->{rain} %><span class="unit">mm</span>
                                </td>
                            </tr>
                        <% } %>
                    </tbody>
                </table>
            </div>
        <% } %>

    <% } else { %>
        <div style="text-align:center; padding: 60px 20px;">
            <h2 style="color: #ef4444;">⚠️ Scraper Error</h2>
            <p style="color: var(--dim);">The forecast data could not be retrieved from the source. Please check the server logs.</p>
        </div>
    <% } %>
</div>