<!-- src/routes/(app)/[stateSlug]/[countySlug]/+page.svelte -->
<script lang="ts">
    import { page } from '$app/stores';
    import { onMount } from 'svelte';
    import { newEnglandStates } from '../../../../lib/states';
    import { api } from '$lib/api';
    import type { Listing, OilPrice, County } from '$lib/api';
    import { fade, fly } from 'svelte/transition';
    import {
        ChevronLeft,
        ChevronUp,
        ChevronDown,
        Flame,
        Phone,
        MapPin,
        DollarSign,
        Droplets,
        Wrench,
        Globe,
        Clock,
        Info,
        AlertCircle,
    } from 'lucide-svelte';

    const { stateSlug, countySlug } = $page.params as { stateSlug: string; countySlug: string };
    let countyData: County | null = null;
    let listings: Listing[] = [];
    let oilPrices: OilPrice[] = [];
    let loading = true;
    let listingsLoading = false;
    let error: string | null = null;
    let listingsError: string | null = null;
    let sortColumn = 'price_per_gallon';
    let sortDirection = 'asc';

    // Market Prices sorting
    let marketSortColumn = 'date';
    let marketSortDirection = 'desc';

    // Staggered section reveal
    let headerVisible = false;
    let premiumVisible = false;
    let marketVisible = false;

    onMount(async () => {
        const result = await api.state.getCounty(stateSlug, countySlug);

        if (result.error) {
            error = result.error;
            countyData = null;
        } else {
            countyData = result.data;
            await fetchAllPrices();
        }

        loading = false;

        // Stagger section reveals
        headerVisible = true;
        setTimeout(() => { premiumVisible = true; }, 250);
        setTimeout(() => { marketVisible = true; }, 500);
    });

    async function fetchAllPrices() {
        if (!countyData) return;

        listingsLoading = true;
        listingsError = null;

        const [listingsResult, oilPricesResult] = await Promise.all([
            api.listings.getByCounty(countyData.id),
            api.oilPrices.getByCounty(countyData.id)
        ]);

        if (listingsResult.error) {
            listingsError = 'Failed to load listings';
        } else {
            listings = listingsResult.data || [];
            sortListings();
        }

        // Oil prices failure is non-critical - just show empty
        oilPrices = (oilPricesResult.data || []).filter(p => p.price !== 0);
        sortMarketPrices(); // Sort immediately after fetching

        listingsLoading = false;
    }

    function sortListings() {
        listings = [...listings].sort((a, b) => {
            let aValue = a[sortColumn as keyof Listing];
            let bValue = b[sortColumn as keyof Listing];

            // Handle string sorting
            if (typeof aValue === 'string' && typeof bValue === 'string') {
                const comparison = aValue.localeCompare(bValue);
                return sortDirection === 'asc' ? comparison : -comparison;
            }

            // Handle number sorting
            if (typeof aValue === 'number' && typeof bValue === 'number') {
                return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;
            }

            // Handle boolean sorting
            if (typeof aValue === 'boolean' && typeof bValue === 'boolean') {
                const aNum = aValue ? 1 : 0;
                const bNum = bValue ? 1 : 0;
                return sortDirection === 'asc' ? aNum - bNum : bNum - aNum;
            }

            return 0;
        });
    }

    function handleSort(column: string) {
        if (sortColumn === column) {
            sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
        } else {
            sortColumn = column;
            sortDirection = 'asc';
        }
        sortListings();
    }

    function sortMarketPrices() {
        oilPrices = [...oilPrices].sort((a, b) => {
            // Handle date sorting specifically
            if (marketSortColumn === 'date') {
                // Prefer scrapetimestamp for accurate sorting, fallback to date string parsing
                const timeA = a.scrapetimestamp ? new Date(a.scrapetimestamp).getTime() : (a.date ? new Date(a.date).getTime() : 0);
                const timeB = b.scrapetimestamp ? new Date(b.scrapetimestamp).getTime() : (b.date ? new Date(b.date).getTime() : 0);
                
                const valA = isNaN(timeA) ? 0 : timeA;
                const valB = isNaN(timeB) ? 0 : timeB;

                return marketSortDirection === 'asc' ? valA - valB : valB - valA;
            }

            let aValue: any = a[marketSortColumn as keyof OilPrice];
            let bValue: any = b[marketSortColumn as keyof OilPrice];

            if (marketSortColumn === 'price') {
                 // Sort null prices to the bottom regardless of direction usually, or treat as extreme?
                 // Let's treat null as Infinity for Asc (Low to High) so it goes to bottom
                 // And -Infinity for Desc (High to Low) so it goes to bottom?
                 // Actually standard practice is nulls last.
                 const pA = a.price ?? (marketSortDirection === 'asc' ? Infinity : -Infinity);
                 const pB = b.price ?? (marketSortDirection === 'asc' ? Infinity : -Infinity);
                 return marketSortDirection === 'asc' ? pA - pB : pB - pA;
            }

            // Fallback string compare (e.g. name)
            if (typeof aValue === 'string' && typeof bValue === 'string') {
                return marketSortDirection === 'asc' 
                    ? aValue.localeCompare(bValue) 
                    : bValue.localeCompare(aValue);
            }
             
            return 0;
        });
    }

    function handleMarketSort(event: Event) {
        const target = event.target as HTMLSelectElement;
        const value = target.value;
        
        // Split value into column and direction if needed, or manageable logic
        // The dropdown values will be like "price-asc", "date-desc", etc.
        const [column, direction] = value.split('-');
        if (column && direction) {
            marketSortColumn = column;
            marketSortDirection = direction;
            sortMarketPrices();
        }
    }

    function getStateName(stateAbbr: string): string {
        const state = newEnglandStates.find(s => s.id === stateAbbr);
        return state ? state.name : stateAbbr;
    }

    /**
     * Format a date string into a friendly relative or short date.
     */
    function formatDate(dateStr: string | undefined | null): string {
        if (!dateStr) return 'N/A';
        try {
            const date = new Date(dateStr);
            const now = new Date();
            const diffMs = now.getTime() - date.getTime();
            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
            if (diffDays === 0) return 'Today';
            if (diffDays === 1) return 'Yesterday';
            if (diffDays < 7) return `${diffDays} days ago`;
            if (diffDays < 30) {
                const weeks = Math.floor(diffDays / 7);
                return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
            }
            return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
        } catch {
            return dateStr;
        }
    }

    /**
     * Format online ordering status into human-readable text.
     */
    function formatOnlineOrdering(value: string): string {
        if (value === 'online_only') return 'Online Only';
        if (value === 'both') return 'Phone & Online';
        return 'Phone Only';
    }

    function formatScrapeDate(dateStr: string | null | undefined): string {
        if (!dateStr) return '';
        try {
            const date = new Date(dateStr);
            return date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: '2-digit' });
        } catch {
            return '';
        }
    }
</script>

<!-- SEO -->
<svelte:head>
    {#if countyData}
        <title>Heating Oil Prices in {countyData.name}, {getStateName(countyData.state)} | Biz Hero</title>
        <meta name="description" content="Compare heating oil and biofuel prices from local dealers in {countyData.name}, {getStateName(countyData.state)}. Find the best deals today." />
    {:else}
        <title>County Not Found | Biz Hero</title>
    {/if}
</svelte:head>


{#if loading}
    <!-- ============================================================ -->
    <!-- LOADING STATE                                                 -->
    <!-- ============================================================ -->
    <div class="py-6 px-2">
        <!-- Skeleton breadcrumb -->
        <div class="skeleton-box h-4 w-48 mb-6"></div>

        <!-- Skeleton header -->
        <div class="text-center pb-6">
            <div class="skeleton-box h-8 w-32 mx-auto mb-4 rounded-full"></div>
            <div class="skeleton-box h-10 w-64 mx-auto mb-3"></div>
            <div class="skeleton-box h-5 w-80 mx-auto"></div>
        </div>

        <!-- Skeleton table area -->
        <div class="price-section mt-4">
            <div class="skeleton-box h-7 w-44 mb-4"></div>
            <div class="space-y-3">
                {#each Array(4) as _, i}
                    <div class="skeleton-box h-20 stagger-{(i % 6) + 1} opacity-0 animate-fade-in"></div>
                {/each}
            </div>
        </div>
    </div>

{:else if countyData}

    <!-- ============================================================ -->
    <!-- BREADCRUMB                                                    -->
    <!-- ============================================================ -->
    <nav class="mb-6 px-2" aria-label="Breadcrumb">
        <ol class="flex items-center gap-1 text-sm">
            <li>
                <a
                    href="/"
                    class="inline-flex items-center gap-1 text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary rounded"
                >
                    <ChevronLeft size={14} />
                    <span>All States</span>
                </a>
            </li>
            <li class="text-base-content/40" aria-hidden="true">/</li>
            <li>
                <a
                    href="/{stateSlug}"
                    class="text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary rounded"
                >
                    {getStateName(countyData.state)}
                </a>
            </li>
            <li class="text-base-content/40" aria-hidden="true">/</li>
            <li class="font-medium text-base-content" aria-current="page">{countyData.name}</li>
        </ol>
    </nav>


    <!-- ============================================================ -->
    <!-- COUNTY HEADER                                                 -->
    <!-- ============================================================ -->
    {#if headerVisible}
        <section class="text-center pb-4 md:pb-6 px-2" in:fly={{ y: 24, duration: 500 }}>
            <!-- Accent badge -->
            <div class="flex justify-center mb-4">
                <div class="accent-badge">
                    <Flame size={18} class="text-oil-orange-500" />
                    <span>Heating Oil Prices</span>
                </div>
            </div>

            <!-- County name -->
            <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold leading-tight text-base-content mb-2 px-2">
                {countyData.name}
            </h1>

            <!-- State context -->
            <p class="text-lg sm:text-xl text-base-content/70 max-w-xl mx-auto leading-relaxed px-4 mb-1">
                {getStateName(countyData.state)}
            </p>

            <!-- Subtitle -->
            <p class="text-base text-base-content/50 max-w-xl mx-auto leading-relaxed px-4">
                Compare heating oil prices from local dealers
            </p>
        </section>
    {/if}


    <!-- ============================================================ -->
    <!-- LISTINGS CONTENT                                              -->
    <!-- ============================================================ -->
    {#if listingsLoading}
        <!-- Skeleton loading for listings -->
        <div class="px-2 mt-4">
            <div class="price-section">
                <div class="skeleton-box h-7 w-44 mb-4"></div>
                <div class="space-y-3">
                    {#each Array(3) as _, i}
                        <div class="skeleton-box h-24 stagger-{(i % 6) + 1} opacity-0 animate-fade-in"></div>
                    {/each}
                </div>
            </div>
        </div>

    {:else if listingsError}
        <!-- Error state -->
        <div class="max-w-lg mx-auto px-2 mt-4">
            <div class="alert alert-error shadow-sm">
                <AlertCircle size={20} />
                <div>
                    <h3 class="font-bold">Could not load dealer prices</h3>
                    <p class="text-sm">{listingsError}</p>
                </div>
            </div>
        </div>

    {:else}

        <!-- ============================================================ -->
        <!-- PREMIUM DEALERS SECTION                                       -->
        <!-- ============================================================ -->
        {#if premiumVisible && listings.length > 0}
            <section class="px-2 mt-4" in:fly={{ y: 20, duration: 400 }}>
                <div class="price-section">
                    <!-- Section header -->
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
                        <div>
                            <h2 class="text-2xl sm:text-3xl font-bold text-base-content flex items-center gap-2">
                                <div class="value-icon !w-9 !h-9 sm:!w-10 sm:!h-10 flex-shrink-0">
                                    <DollarSign size={20} />
                                </div>
                                Premium Dealers
                            </h2>
                            <p class="text-base text-base-content/50 mt-1">
                                Verified local dealers with current pricing
                            </p>
                        </div>
                        {#if listings.length > 0}
                            <div class="text-sm text-base-content/40">
                                {listings.length} dealer{listings.length !== 1 ? 's' : ''} listed
                            </div>
                        {/if}
                    </div>

                    {#if listings.length === 0}
                        <!-- Empty state -->
                        <div class="text-center py-10">
                            <div class="value-icon mx-auto mb-4">
                                <Flame size={28} />
                            </div>
                            <p class="text-lg font-semibold text-base-content mb-1">No premium dealers listed yet</p>
                            <p class="text-base text-base-content/50">Check back soon for local dealer pricing.</p>
                        </div>
                    {:else}

                        <!-- ======================== -->
                        <!-- DESKTOP TABLE            -->
                        <!-- ======================== -->
                        <div class="hidden lg:block">
                            <div class="price-table-wrap">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-base-300 bg-base-200/50">
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'company_name'}
                                                    on:click={() => handleSort('company_name')}
                                                >
                                                    Company
                                                    {#if sortColumn === 'company_name'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'town'}
                                                    on:click={() => handleSort('town')}
                                                >
                                                    Town
                                                    {#if sortColumn === 'town'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'price_per_gallon'}
                                                    on:click={() => handleSort('price_per_gallon')}
                                                >
                                                    Price / Gal
                                                    {#if sortColumn === 'price_per_gallon'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'bio_percent'}
                                                    on:click={() => handleSort('bio_percent')}
                                                >
                                                    Bio %
                                                    {#if sortColumn === 'bio_percent'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'service'}
                                                    on:click={() => handleSort('service')}
                                                >
                                                    Service
                                                    {#if sortColumn === 'service'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'phone'}
                                                    on:click={() => handleSort('phone')}
                                                >
                                                    Contact
                                                    {#if sortColumn === 'phone'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                            <th class="text-left px-4 py-3">
                                                <button
                                                    class="sort-header inline-flex items-center gap-1"
                                                    class:is-active={sortColumn === 'last_edited'}
                                                    on:click={() => handleSort('last_edited')}
                                                >
                                                    Updated
                                                    {#if sortColumn === 'last_edited'}
                                                        {#if sortDirection === 'asc'}
                                                            <ChevronUp size={14} />
                                                        {:else}
                                                            <ChevronDown size={14} />
                                                        {/if}
                                                    {/if}
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {#each listings.filter(l => l.phone) as listing, i}
                                            <tr
                                                class="border-b border-base-300/50 last:border-b-0
                                                       {i % 2 === 1 ? 'bg-base-200/30' : ''}
                                                       hover:bg-primary/5 transition-colors duration-100"
                                            >
                                                <!-- Company name -->
                                                <td class="px-4 py-4">
                                                    <div class="flex flex-col">
                                                        <span class="text-base font-semibold text-base-content">
                                                            {listing.company_name}
                                                        </span>
                                                        {#if listing.url}
                                                            <a href={listing.url} target="_blank" rel="noopener noreferrer" class="text-xs text-primary hover:underline flex items-center gap-1 mt-0.5" on:click|stopPropagation>
                                                                <Globe size={10} />
                                                                Visit Website
                                                            </a>
                                                        {/if}
                                                    </div>
                                                </td>

                                                <!-- Town -->
                                                <td class="px-4 py-4">
                                                    <span class="text-sm text-base-content/70">
                                                        {listing.town || '--'}
                                                    </span>
                                                </td>

                                                <!-- Price (THE HERO) -->
                                                <td class="px-4 py-4">
                                                    <div class="price-hero">
                                                        ${listing.price_per_gallon.toFixed(2)}
                                                    </div>
                                                    {#if listing.price_per_gallon_cash}
                                                        <div class="price-secondary mt-0.5">
                                                            Cash: ${listing.price_per_gallon_cash.toFixed(2)}
                                                        </div>
                                                    {/if}
                                                </td>

                                                <!-- Bio % -->
                                                <td class="px-4 py-4">
                                                    <div class="inline-flex items-center gap-1 text-sm text-base-content/70">
                                                        <Droplets size={14} class="text-primary/60" />
                                                        {listing.bio_percent}%
                                                    </div>
                                                </td>

                                                <!-- Service -->
                                                <td class="px-4 py-4">
                                                    {#if listing.service}
                                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-success/15 text-success">
                                                            <Wrench size={12} />
                                                            Yes
                                                        </span>
                                                    {:else}
                                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-base-300/50 text-base-content/40">
                                                            No
                                                        </span>
                                                    {/if}
                                                </td>

                                                <!-- Contact -->
                                                <td class="px-4 py-4">
                                                    <div class="space-y-1">
                                                        {#if listing.phone}
                                                            <a
                                                                href="tel:{listing.phone}"
                                                                class="inline-flex items-center gap-1 text-sm text-primary hover:underline font-medium"
                                                            >
                                                                <Phone size={13} />
                                                                {listing.phone}
                                                            </a>
                                                        {:else}
                                                            <span class="text-sm text-base-content/40"></span>
                                                        {/if}
                                                        <div class="text-xs text-base-content/40 flex items-center gap-1">
                                                            <Globe size={11} />
                                                            {formatOnlineOrdering(listing.online_ordering)}
                                                        </div>
                                                    </div>
                                                </td>

                                                <!-- Last Updated -->
                                                <td class="px-4 py-4">
                                                    <span class="text-sm text-base-content/50 flex items-center gap-1">
                                                        <Clock size={13} />
                                                        {formatDate(listing.last_edited)}
                                                    </span>
                                                </td>
                                            </tr>
                                        {/each}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- ======================== -->
                        <!-- MOBILE SORT CONTROLS     -->
                        <!-- ======================== -->
                        <div class="lg:hidden mb-4 flex items-center gap-2">
                            <label for="mobile-sort" class="text-sm font-medium text-base-content/60 flex-shrink-0">Sort by:</label>
                            <select
                                id="mobile-sort"
                                class="select select-bordered select-sm flex-1 bg-base-100 text-base-content text-sm"
                                bind:value={sortColumn}
                                on:change={sortListings}
                            >
                                <option value="price_per_gallon">Price (Low to High)</option>
                                <option value="company_name">Company Name</option>
                                <option value="town">Town</option>
                                <option value="bio_percent">Bio %</option>
                                <option value="service">Service Available</option>
                                <option value="last_edited">Last Updated</option>
                            </select>
                            <button
                                class="btn btn-sm btn-square btn-ghost border border-base-300"
                                on:click={() => { sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; sortListings(); }}
                                aria-label="Toggle sort direction"
                            >
                                {#if sortDirection === 'asc'}
                                    <ChevronUp size={16} />
                                {:else}
                                    <ChevronDown size={16} />
                                {/if}
                            </button>
                        </div>

                        <!-- ======================== -->
                        <!-- MOBILE CARDS             -->
                        <!-- ======================== -->
                        <div class="lg:hidden space-y-3">
                            {#each listings.filter(l => l.phone) as listing, i}
                                <div class="listing-card stagger-{(i % 6) + 1} opacity-0 animate-fade-in-up">
                                    <!-- Top row: Company + Price -->
                                    <div class="flex items-start justify-between gap-3 mb-3">
                                        <div class="min-w-0 flex-1">
                                            <h3 class="text-lg font-bold text-base-content leading-tight truncate">
                                                {listing.company_name}
                                            </h3>
                                            {#if listing.url}
                                                <a href={listing.url} target="_blank" rel="noopener noreferrer" class="text-xs text-primary hover:underline flex items-center gap-1 mt-0.5" on:click|stopPropagation>
                                                    <Globe size={11} />
                                                    Visit Website
                                                </a>
                                            {/if}
                                            {#if listing.town}
                                                <p class="text-sm text-base-content/50 flex items-center gap-1 mt-0.5">
                                                    <MapPin size={13} />
                                                    {listing.town}
                                                </p>
                                            {/if}
                                        </div>
                                        <div class="text-right flex-shrink-0">
                                            <div class="price-hero !text-2xl">
                                                ${listing.price_per_gallon.toFixed(2)}
                                            </div>
                                            <div class="text-xs text-base-content/40 mt-0.5">per gallon</div>
                                        </div>
                                    </div>

                                    <!-- Cash price callout (if different) -->
                                    {#if listing.price_per_gallon_cash}
                                        <div class="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-success/8 border border-success/15">
                                            <DollarSign size={15} class="text-success flex-shrink-0" />
                                            <span class="text-sm font-semibold text-base-content">
                                                Cash Price: ${listing.price_per_gallon_cash.toFixed(2)}/gal
                                            </span>
                                        </div>
                                    {/if}

                                    <!-- Details grid -->
                                    <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm border-t border-base-300/50 pt-3">
                                        <!-- Bio % -->
                                        <div class="flex items-center gap-1.5">
                                            <Droplets size={14} class="text-primary/60 flex-shrink-0" />
                                            <span class="text-base-content/60">Bio:</span>
                                            <span class="font-medium text-base-content">{listing.bio_percent}%</span>
                                        </div>

                                        <!-- Service -->
                                        <div class="flex items-center gap-1.5">
                                            <Wrench size={14} class="text-base-content/40 flex-shrink-0" />
                                            <span class="text-base-content/60">Service:</span>
                                            {#if listing.service}
                                                <span class="font-medium text-success">Yes</span>
                                            {:else}
                                                <span class="text-base-content/40">No</span>
                                            {/if}
                                        </div>

                                        <!-- Online ordering -->
                                        <div class="flex items-center gap-1.5">
                                            <Globe size={14} class="text-base-content/40 flex-shrink-0" />
                                            <span class="text-base-content/60">Order:</span>
                                            <span class="font-medium text-base-content">{formatOnlineOrdering(listing.online_ordering)}</span>
                                        </div>

                                        <!-- Last updated -->
                                        <div class="flex items-center gap-1.5">
                                            <Clock size={14} class="text-base-content/40 flex-shrink-0" />
                                            <span class="text-base-content/60">{formatDate(listing.last_edited)}</span>
                                        </div>
                                    </div>

                                    <!-- Phone CTA -->
                                    {#if listing.phone}
                                        <div class="mt-3 pt-3 border-t border-base-300/50">
                                            <a
                                                href="tel:{listing.phone}"
                                                class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg
                                                       bg-primary/10 text-primary font-semibold text-sm
                                                       hover:bg-primary/20 active:bg-primary/30
                                                       transition-colors duration-150 w-full justify-center sm:w-auto"
                                            >
                                                <Phone size={16} />
                                                {listing.phone}
                                            </a>
                                        </div>
                                    {/if}
                                </div>
                            {/each}
                        </div>
                    {/if}
                </div>
            </section>
        {/if}


        <!-- ============================================================ -->
        <!-- MARKET PRICES SECTION (scraped data)                          -->
        <!-- ============================================================ -->
        {#if marketVisible && oilPrices.length > 0}
            <section class="px-2 mt-6 sm:mt-8" in:fly={{ y: 20, duration: 400 }}>
                <div class="price-section">
                    <!-- Section header -->
                    <div class="mb-4 flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h2 class="text-2xl sm:text-3xl font-bold text-base-content flex items-center gap-2">
                                <div class="value-icon !w-9 !h-9 sm:!w-10 sm:!h-10 flex-shrink-0">
                                    <Flame size={20} />
                                </div>
                                Market Prices
                            </h2>
                            <div class="info-note mt-2">
                                <Info size={14} class="flex-shrink-0" />
                                <span>Market prices collected from public sources</span>
                            </div>
                        </div>

                        <!-- Sort Dropdown -->
                        <div class="flex items-center gap-2">
                            <label for="market-sort" class="text-sm font-medium text-base-content/60 flex-shrink-0 hidden md:block">Sort by:</label>
                            <select
                                id="market-sort"
                                class="select select-bordered select-sm w-full md:w-auto bg-base-100 text-base-content text-sm"
                                on:change={handleMarketSort}
                            >
                                <option value="date-desc" selected={marketSortColumn === 'date' && marketSortDirection === 'desc'}>Last Updated (Newest)</option>
                                <option value="price-asc" selected={marketSortColumn === 'price' && marketSortDirection === 'asc'}>Price (Low to High)</option>
                                <option value="price-desc" selected={marketSortColumn === 'price' && marketSortDirection === 'desc'}>Price (High to Low)</option>
                                <option value="name-asc" selected={marketSortColumn === 'name' && marketSortDirection === 'asc'}>Name (A-Z)</option>
                            </select>
                        </div>
                    </div>

                    <!-- Desktop table -->
                    <div class="hidden md:block">
                        <div class="price-table-wrap">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-base-300 bg-base-200/50">
                                        <th class="text-left px-4 py-3">
                                            <span class="sort-header">Company</span>
                                        </th>
                                        <th class="text-left px-4 py-3">
                                            <span class="sort-header">Price / Gal</span>
                                        </th>
                                        <th class="text-left px-4 py-3">
                                            <span class="sort-header">Phone</span>
                                        </th>
                                        <th class="text-left px-4 py-3">
                                            <span class="sort-header">URL</span>
                                        </th>
                                        <th class="text-left px-4 py-3">
                                            <span class="sort-header">Last Updated</span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {#each oilPrices.filter(op => op.phone) as op, i}
                                        <tr
                                            class="border-b border-base-300/50 last:border-b-0
                                                   {i % 2 === 1 ? 'bg-base-200/30' : ''}
                                                   hover:bg-primary/5 transition-colors duration-100"
                                        >
                                            <td class="px-4 py-3">
                                                <span class="text-base font-semibold text-base-content">
                                                    {op.name || 'Unknown'}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3">
                                                <span class="price-hero !text-xl">
                                                    {op.price != null ? `$${op.price.toFixed(2)}` : 'N/A'}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3">
                                                {#if op.phone}
                                                    <a
                                                        href="tel:{op.phone}"
                                                        class="inline-flex items-center gap-1 text-sm text-primary hover:underline font-medium"
                                                    >
                                                        <Phone size={13} />
                                                        {op.phone}
                                                    </a>
                                                {:else}
                                                    <span class="text-sm text-base-content/40"></span>
                                                {/if}
                                            </td>
                                            <td class="px-4 py-3">
                                                {#if op.url}
                                                    <a
                                                        href="{op.url}"
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        class="inline-flex items-center gap-1 text-sm text-primary hover:underline font-medium"
                                                    >
                                                        <Globe size={13} />
                                                        Visit
                                                    </a>
                                                {:else}
                                                    <span class="text-sm text-base-content/40">N/A</span>
                                                {/if}
                                            </td>
                                            <td class="px-4 py-3">
                                                <span class="text-sm text-base-content/50 flex items-center gap-1">
                                                    <Clock size={13} />
                                                    {formatScrapeDate(op.scrapetimestamp) || op.date || 'N/A'}
                                                </span>
                                            </td>
                                        </tr>
                                    {/each}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Mobile cards -->
                    <div class="md:hidden space-y-3">
                        {#each oilPrices.filter(op => op.phone) as op, i}
                            <div class="listing-card stagger-{(i % 6) + 1} opacity-0 animate-fade-in-up">
                                <div class="flex items-center justify-between gap-3 mb-2">
                                    <div class="min-w-0 flex-1">
                                        <span class="text-base font-semibold text-base-content block truncate">
                                            {op.name || 'Unknown'}
                                        </span>
                                        <span class="text-xs text-base-content/40 flex items-center gap-1 mt-0.5">
                                            <Clock size={11} />
                                            Last Updated: {formatScrapeDate(op.scrapetimestamp) || op.date || 'N/A'}
                                        </span>
                                    </div>
                                    <div class="price-hero !text-2xl flex-shrink-0">
                                        {op.price != null ? `$${op.price.toFixed(2)}` : 'N/A'}
                                    </div>
                                </div>
                                
                                <!-- Contact info section -->
                                {#if op.phone || op.url}
                                    <div class="border-t border-base-300/50 pt-2 mt-2 space-y-1">
                                        {#if op.phone}
                                            <a
                                                href="tel:{op.phone}"
                                                class="inline-flex items-center gap-1.5 text-sm text-primary hover:underline font-medium"
                                            >
                                                <Phone size={13} />
                                                {op.phone}
                                            </a>
                                        {/if}
                                        {#if op.url}
                                            <div>
                                                <a
                                                    href="{op.url}"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    class="inline-flex items-center gap-1.5 text-sm text-primary hover:underline font-medium"
                                                >
                                                    <Globe size={13} />
                                                    Visit Website
                                                </a>
                                            </div>
                                        {/if}
                                    </div>
                                {/if}
                            </div>
                        {/each}
                    </div>
                </div>
            </section>
        {/if}


        <!-- ============================================================ -->
        <!-- EMPTY STATE (when both sections are empty)                    -->
        <!-- ============================================================ -->
        {#if listings.length === 0 && oilPrices.length === 0 && premiumVisible}
            <section class="text-center py-12 px-2" in:fade={{ duration: 300 }}>
                <div class="value-icon mx-auto mb-4">
                    <DollarSign size={28} />
                </div>
                <p class="text-xl font-semibold text-base-content mb-2">No pricing data available yet</p>
                <p class="text-base text-base-content/50 max-w-sm mx-auto">
                    We are working on gathering pricing information for {countyData.name}. Check back soon!
                </p>
            </section>
        {/if}

    {/if}


    <!-- ============================================================ -->
    <!-- BACK NAVIGATION (subtle, bottom)                              -->
    <!-- ============================================================ -->
    <section class="pb-8 pt-6 text-center px-2">
        <a
            href="/{stateSlug}"
            class="inline-flex items-center gap-1 text-sm text-base-content/50 hover:text-primary transition-colors focus:outline-none focus:ring-2 focus:ring-primary rounded px-2 py-1"
        >
            <ChevronLeft size={14} />
            <span>Back to {getStateName(countyData.state)}</span>
        </a>
    </section>

{:else if error}
    <!-- ============================================================ -->
    <!-- ERROR STATE — County Not Found                                -->
    <!-- ============================================================ -->
    <div class="text-center py-16 px-2">
        <div class="mb-6">
            <div class="value-icon mx-auto mb-4">
                <AlertCircle size={28} />
            </div>
            <h1 class="text-3xl font-bold text-error mb-3">County Not Found</h1>
            <p class="text-base-content/60 text-lg max-w-md mx-auto">
                {error}
            </p>
        </div>
        <a href="/{stateSlug}" class="inline-flex items-center gap-1 text-primary hover:underline font-medium">
            <ChevronLeft size={16} />
            Back to state
        </a>
    </div>
{/if}
