import { Fragment, useEffect, useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import {
  ArrowLeft,
  PlaneTakeoff,
  Calendar,
  CalendarClock,
  Users,
  Armchair,
  Clock,
  Timer,
  ChevronRight,
  ChevronUp,
  ChevronDown,
  ChevronsUpDown,
  MapPin,
  AlertCircle,
  Loader2,
  RotateCcw,
  Trash2,
  Info,
  Pause,
  Play,
  X,
} from 'lucide-react';
import { scanApi } from '../api';
import type { Scan, Route, Flight } from '../api';
import StatusChip from '../components/StatusChip';
import type { ScanStatus } from '../components/StatusChip';
import StatCard from '../components/StatCard';
import EmptyState from '../components/EmptyState';
import { SkeletonStatCard, SkeletonTableRow } from '../components/SkeletonCard';
import ScanTimer, { formatDuration } from '../components/ScanTimer';
import { useScanTimer } from '../hooks/useScanTimer';
import { cn } from '../lib/utils';

const formatPrice = (price?: number) =>
  price != null ? `€${price.toFixed(2)}` : '—';

const formatDate = (d: string) =>
  new Date(d).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });

const WEEKDAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
const weekday = (d: string) => WEEKDAYS[new Date(d).getDay()];

export default function ScanDetails() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [scan, setScan]                   = useState<Scan | null>(null);
  const [routes, setRoutes]               = useState<Route[]>([]);
  const [loading, setLoading]             = useState(true);
  const [page, setPage]                   = useState(1);
  const [totalPages, setTotalPages]       = useState(1);
  const [sortField, setSortField]         = useState<'min_price' | 'destination' | 'flight_count'>('min_price');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
  const [expandedRoute, setExpandedRoute]   = useState<string | null>(null);
  const [flightsByDest, setFlightsByDest]   = useState<Record<string, Flight[]>>({});
  const [flightSortField, setFlightSortField] = useState<'date' | 'price'>('date');
  const [flightSortDir, setFlightSortDir]     = useState<'asc' | 'desc'>('asc');
  const [loadingFlights, setLoadingFlights] = useState<string | null>(null);
  const [rerunning, setRerunning]           = useState(false);
  const [confirmDelete, setConfirmDelete]   = useState(false);
  const [deleting, setDeleting]             = useState(false);
  const [confirmPause, setConfirmPause]     = useState(false);
  const [confirmCancel, setConfirmCancel]   = useState(false);
  const [stopping, setStopping]             = useState(false);
  const [resuming, setResuming]             = useState(false);

  // Must be called unconditionally before any early returns (Rules of Hooks)
  const timer = useScanTimer(scan);

  useEffect(() => {
    if (id) loadScanDetails();
  }, [id, page]);

  // Auto-refresh while running / pending
  useEffect(() => {
    if (!scan || (scan.status !== 'pending' && scan.status !== 'running')) return;
    const interval = setInterval(() => loadScanDetails(), 3000);
    return () => clearInterval(interval);
  }, [scan?.status, id]);

  // Re-sort when sort params change
  useEffect(() => {
    const sorted = [...routes].sort((a, b) => {
      let aVal: number | string = a[sortField] ?? (sortField === 'min_price' ? Infinity : '');
      let bVal: number | string = b[sortField] ?? (sortField === 'min_price' ? Infinity : '');
      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
      return 0;
    });
    setRoutes(sorted);
  }, [sortField, sortDirection]);

  const loadScanDetails = async () => {
    try {
      setLoading(true);
      const [scanResp, routesResp] = await Promise.all([
        scanApi.get(Number(id)),
        scanApi.getRoutes(Number(id), page, 20),
      ]);
      setScan(scanResp.data);
      setRoutes(routesResp.data.data);
      setTotalPages(routesResp.data.pagination.pages);
    } catch (err) {
      console.error('Failed to load scan details:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleSort = (field: typeof sortField) => {
    if (sortField === field) {
      setSortDirection(d => d === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDirection('asc');
    }
  };

  const handleFlightSort = (field: 'date' | 'price') => {
    if (flightSortField === field) {
      setFlightSortDir(d => d === 'asc' ? 'desc' : 'asc');
    } else {
      setFlightSortField(field);
      setFlightSortDir('asc');
    }
  };

  const sortedFlights = (flights: Flight[]) =>
    [...flights].sort((a, b) => {
      const aVal = flightSortField === 'date' ? a.date : (a.price ?? Infinity);
      const bVal = flightSortField === 'date' ? b.date : (b.price ?? Infinity);
      if (aVal < bVal) return flightSortDir === 'asc' ? -1 : 1;
      if (aVal > bVal) return flightSortDir === 'asc' ? 1 : -1;
      return 0;
    });

  const toggleFlights = async (destination: string) => {
    if (expandedRoute === destination) { setExpandedRoute(null); return; }
    setExpandedRoute(destination);
    if (flightsByDest[destination]) return;
    setLoadingFlights(destination);
    try {
      const resp = await scanApi.getFlights(Number(id), destination, 1, 200);
      setFlightsByDest(prev => ({ ...prev, [destination]: resp.data.data }));
    } catch {
      setFlightsByDest(prev => ({ ...prev, [destination]: [] }));
    } finally {
      setLoadingFlights(null);
    }
  };

  const handleRerun = async () => {
    if (!scan) return;
    setRerunning(true);
    try {
      // Compute window from stored dates so the new scan covers the same span
      const ms = new Date(scan.end_date).getTime() - new Date(scan.start_date).getTime();
      const window_months = Math.max(1, Math.round(ms / (1000 * 60 * 60 * 24 * 30)));

      // country column holds either "IT" or "BRI,BDS"
      const isAirports = scan.country.includes(',');
      const resp = await scanApi.create({
        origin: scan.origin,
        window_months,
        seat_class: scan.seat_class as 'economy' | 'premium' | 'business' | 'first',
        adults: scan.adults,
        ...(isAirports
          ? { destinations: scan.country.split(',') }
          : { country: scan.country }),
      });
      navigate(`/scans/${resp.data.id}`);
    } catch {
      // silently fall through — the navigate won't happen
    } finally {
      setRerunning(false);
    }
  };

  const handleDelete = async () => {
    if (!scan) return;
    setDeleting(true);
    try {
      await scanApi.delete(scan.id);
      navigate('/');
    } catch {
      setDeleting(false);
      setConfirmDelete(false);
    }
  };

  const handlePause = async () => {
    if (!scan) return;
    setStopping(true);
    try {
      await scanApi.pause(scan.id);
      await loadScanDetails();
    } catch {
      // fall through
    } finally {
      setStopping(false);
      setConfirmPause(false);
    }
  };

  const handleCancel = async () => {
    if (!scan) return;
    setStopping(true);
    try {
      await scanApi.cancel(scan.id);
      await loadScanDetails();
    } catch {
      // fall through
    } finally {
      setStopping(false);
      setConfirmCancel(false);
    }
  };

  const handleResume = async () => {
    if (!scan) return;
    setResuming(true);
    try {
      await scanApi.resume(scan.id);
      await loadScanDetails();
    } catch {
      // fall through
    } finally {
      setResuming(false);
    }
  };

  const SortIcon = ({ field }: { field: typeof sortField }) => {
    if (sortField !== field) return <ChevronsUpDown size={14} className="opacity-50" />;
    return sortDirection === 'asc'
      ? <ChevronUp size={14} className="text-primary" />
      : <ChevronDown size={14} className="text-primary" />;
  };

  const FlightSortIcon = ({ field }: { field: 'date' | 'price' }) => {
    if (flightSortField !== field) return <ChevronsUpDown size={12} className="opacity-50" />;
    return flightSortDir === 'asc'
      ? <ChevronUp size={12} className="text-secondary" />
      : <ChevronDown size={12} className="text-secondary" />;
  };

  const thCls = (field?: typeof sortField) => cn(
    'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider select-none',
    field
      ? cn('cursor-pointer hover:bg-surface-2 transition-colors', sortField === field ? 'text-primary' : 'text-on-surface-variant')
      : 'text-on-surface-variant',
  );

  // ── Loading skeleton ────────────────────────────────────────────
  if (loading && !scan) {
    return (
      <div className="space-y-4">
        <div className="h-4 w-48 rounded skeleton" />
        <div className="bg-surface rounded-lg shadow-level-1 p-6 h-32 skeleton" />
        <div className="grid grid-cols-3 gap-3">
          {[0, 1, 2].map(i => <SkeletonStatCard key={i} />)}
        </div>
      </div>
    );
  }

  if (!scan) {
    return (
      <EmptyState
        icon={AlertCircle}
        title="Scan not found"
        description="This scan doesn't exist or may have been deleted."
        action={{ label: '← Dashboard', onClick: () => navigate('/') }}
      />
    );
  }

  const isActive = scan.status === 'pending' || scan.status === 'running';
  const progress = scan.total_routes > 0
    ? Math.min((scan.routes_scanned / scan.total_routes) * 100, 100)
    : 0;

  return (
    <div className="space-y-4">

      {/* ── Breadcrumb ────────────────────────────────────────────── */}
      <button
        onClick={() => navigate('/')}
        className="inline-flex items-center gap-1.5 text-sm text-on-surface-variant hover:text-on-surface transition-colors"
      >
        <ArrowLeft size={16} />
        <span>Dashboard</span>
        <span className="text-outline">/</span>
        <span>Scan #{id}</span>
      </button>

      {/* ── Header card ───────────────────────────────────────────── */}
      <div className="bg-surface rounded-lg shadow-level-1 p-6">
        {/* Row 1: route + status chip */}
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-center gap-2 flex-wrap min-w-0">
            <PlaneTakeoff size={20} className="text-primary shrink-0" aria-hidden="true" />
            <h1 className="text-xl font-semibold text-on-surface">
              {scan.origin} → {scan.country}
            </h1>
            {scan.scheduled_scan_id != null && (
              <Link
                to={`/schedules`}
                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-primary-container text-on-primary-container hover:opacity-80 transition-opacity"
                title={`Scheduled scan #${scan.scheduled_scan_id}`}
              >
                <CalendarClock size={11} aria-hidden="true" />
                Scheduled
              </Link>
            )}
          </div>
          <StatusChip status={scan.status as ScanStatus} />
        </div>

        {/* Row 2: metadata */}
        <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm text-on-surface-variant">
          <span className="inline-flex items-center gap-1.5">
            <Calendar size={14} aria-hidden="true" />
            {formatDate(scan.start_date)} – {formatDate(scan.end_date)}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Users size={14} aria-hidden="true" />
            {scan.adults} adult{scan.adults !== 1 ? 's' : ''}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Armchair size={14} aria-hidden="true" />
            {scan.seat_class.charAt(0).toUpperCase() + scan.seat_class.slice(1)}
          </span>
        </div>

        {/* Row 3: created at (completed / failed) */}
        {!isActive && (
          <p className="mt-2 text-xs text-on-surface-variant inline-flex items-center gap-1.5">
            <Clock size={12} aria-hidden="true" />
            Created {formatDate(scan.created_at)}
          </p>
        )}

        {/* Row 4: actions */}
        <div className="mt-4 pt-4 border-t border-outline flex items-center justify-end gap-2 flex-wrap">

          {/* ── Active (pending / running): Pause + Cancel ── */}
          {isActive && (
            <>
              {/* Pause — inline confirm */}
              {confirmPause ? (
                <div className="inline-flex items-center gap-1.5">
                  <span className="text-sm text-on-surface-variant">Pause this scan?</span>
                  <button
                    onClick={handlePause}
                    disabled={stopping}
                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-xs bg-[#7A5200] text-white hover:bg-[#5C3D00] disabled:opacity-60 transition-colors"
                  >
                    {stopping ? 'Pausing…' : 'Yes, pause'}
                  </button>
                  <button
                    onClick={() => setConfirmPause(false)}
                    disabled={stopping}
                    className="px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 transition-colors"
                  >
                    No
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setConfirmPause(true)}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 transition-colors"
                >
                  <Pause size={14} />
                  Pause
                </button>
              )}

              {/* Cancel — inline confirm */}
              {confirmCancel ? (
                <div className="inline-flex items-center gap-1.5">
                  <span className="text-sm text-on-surface-variant">Cancel this scan?</span>
                  <button
                    onClick={handleCancel}
                    disabled={stopping}
                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-xs bg-error text-white hover:bg-error/90 disabled:opacity-60 transition-colors"
                  >
                    {stopping ? 'Cancelling…' : 'Yes, cancel'}
                  </button>
                  <button
                    onClick={() => setConfirmCancel(false)}
                    disabled={stopping}
                    className="px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 transition-colors"
                  >
                    No
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setConfirmCancel(true)}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-error/40 text-error hover:bg-error/5 transition-colors"
                >
                  <X size={14} />
                  Cancel
                </button>
              )}
            </>
          )}

          {/* ── Paused: Resume + Re-run + Delete ── */}
          {scan.status === 'paused' && (
            <>
              <button
                onClick={handleResume}
                disabled={resuming}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <Play size={14} className={resuming ? 'animate-pulse' : ''} />
                {resuming ? 'Resuming…' : 'Resume'}
              </button>

              <button
                onClick={handleRerun}
                disabled={rerunning}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <RotateCcw size={14} className={rerunning ? 'animate-spin' : ''} />
                {rerunning ? 'Starting…' : 'Re-run'}
              </button>

              {confirmDelete ? (
                <div className="inline-flex items-center gap-1.5">
                  <span className="text-sm text-on-surface-variant">Delete this scan?</span>
                  <button
                    onClick={handleDelete}
                    disabled={deleting}
                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-xs bg-error text-white hover:bg-error/90 disabled:opacity-60 transition-colors"
                  >
                    {deleting ? 'Deleting…' : 'Yes, delete'}
                  </button>
                  <button
                    onClick={() => setConfirmDelete(false)}
                    disabled={deleting}
                    className="px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 transition-colors"
                  >
                    Cancel
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setConfirmDelete(true)}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-error/40 text-error hover:bg-error/5 transition-colors"
                >
                  <Trash2 size={14} />
                  Delete
                </button>
              )}
            </>
          )}

          {/* ── Completed / Failed / Cancelled: Re-run + Delete ── */}
          {!isActive && scan.status !== 'paused' && (
            <>
              <button
                onClick={handleRerun}
                disabled={rerunning}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                <RotateCcw size={14} className={rerunning ? 'animate-spin' : ''} />
                {rerunning ? 'Starting…' : 'Re-run'}
              </button>

              {confirmDelete ? (
                <div className="inline-flex items-center gap-1.5">
                  <span className="text-sm text-on-surface-variant">Delete this scan?</span>
                  <button
                    onClick={handleDelete}
                    disabled={deleting}
                    className="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-xs bg-error text-white hover:bg-error/90 disabled:opacity-60 transition-colors"
                  >
                    {deleting ? 'Deleting…' : 'Yes, delete'}
                  </button>
                  <button
                    onClick={() => setConfirmDelete(false)}
                    disabled={deleting}
                    className="px-3 py-1.5 text-sm font-medium rounded-xs border border-outline text-on-surface hover:bg-surface-2 transition-colors"
                  >
                    Cancel
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setConfirmDelete(true)}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-xs border border-error/40 text-error hover:bg-error/5 transition-colors"
                >
                  <Trash2 size={14} />
                  Delete
                </button>
              )}
            </>
          )}
        </div>
      </div>

      {/* ── Stat cards ────────────────────────────────────────────── */}
      <div className={`grid gap-3 ${!isActive && scan.started_at && scan.completed_at ? 'grid-cols-4' : 'grid-cols-3'}`}>
        {loading ? (
          [0, 1, 2].map(i => <SkeletonStatCard key={i} />)
        ) : (
          <>
            <StatCard label="Total Routes"   value={scan.total_routes}   icon={MapPin}       variant="primary"   />
            <StatCard label="Routes Scanned" value={scan.routes_scanned} icon={ChevronDown}  variant="secondary" />
            <StatCard label="Flights Found"  value={scan.total_flights}  icon={PlaneTakeoff} variant="primary"   />
            {!isActive && scan.started_at && scan.completed_at && (
              <StatCard
                label="Scan Duration"
                value={formatDuration(timer.elapsedSeconds)}
                icon={Timer}
                variant="secondary"
              />
            )}
          </>
        )}
      </div>

      {/* ── Progress card (running / pending) ─────────────────────── */}
      {isActive && (
        <div className="bg-surface rounded-lg shadow-level-1 p-5 border border-[#A8C7FA]">
          <div className="flex items-center gap-2 mb-3">
            <Loader2 size={16} className="text-primary animate-spin shrink-0" aria-hidden="true" />
            <span className="text-sm font-medium text-on-surface">
              {scan.status === 'pending' ? 'Initializing…' : 'Scanning in progress…'}
            </span>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex-1 h-1 bg-surface-2 rounded-full overflow-hidden">
              <div
                className="h-full bg-primary rounded-full transition-all duration-300"
                style={{ width: `${progress}%` }}
              />
            </div>
            <span className="text-xs text-on-surface-variant shrink-0 w-10 text-right">
              {Math.round(progress)}%
            </span>
          </div>
          <p className="mt-2 text-xs text-on-surface-variant">
            {scan.routes_scanned} of {scan.total_routes > 0 ? scan.total_routes : '?'} routes · auto-refreshing every 3 s
          </p>
          {scan.status === 'running' && scan.started_at && (
            <ScanTimer {...timer} />
          )}
        </div>
      )}

      {/* ── Routes table ──────────────────────────────────────────── */}
      <div className="bg-surface rounded-lg shadow-level-1 overflow-hidden">
        <div className="px-5 py-4 border-b border-outline">
          <h2 className="text-sm font-semibold text-on-surface">Routes Found</h2>
        </div>

        {routes.length === 0 ? (
          <div className="px-6 py-8">
            {scan.status === 'completed' ? (
              <EmptyState
                icon={MapPin}
                title="No routes found"
                description="No direct flights for the selected airports and date range."
              />
            ) : scan.status === 'failed' ? (
              <EmptyState
                icon={AlertCircle}
                title="Scan failed"
                description={scan.error_message || 'An error occurred during the scan.'}
              />
            ) : (
              /* running/pending — progress card above handles this */
              <p className="text-center text-sm text-on-surface-variant py-4">
                Routes will appear here as they are discovered…
              </p>
            )}
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-surface-2 border-b border-outline">
                  <tr>
                    <th
                      className={thCls('destination')}
                      onClick={() => handleSort('destination')}
                    >
                      <span className="inline-flex items-center gap-1">
                        Destination <SortIcon field="destination" />
                      </span>
                    </th>
                    <th
                      className={thCls('flight_count')}
                      onClick={() => handleSort('flight_count')}
                    >
                      <span className="inline-flex items-center gap-1">
                        Flights <SortIcon field="flight_count" />
                      </span>
                    </th>
                    <th className={thCls()}>Airlines</th>
                    <th
                      className={thCls('min_price')}
                      onClick={() => handleSort('min_price')}
                    >
                      <span className="inline-flex items-center gap-1">
                        Min Price <SortIcon field="min_price" />
                      </span>
                    </th>
                    <th className={thCls()}>Avg</th>
                    <th className={thCls()}>Max</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-outline">
                  {routes.map((route) => {
                    const isExpanded = expandedRoute === route.destination;
                    return (
                      <Fragment key={route.id}>
                        <tr
                          className="hover:bg-surface-2 cursor-pointer transition-colors duration-150"
                          onClick={() => toggleFlights(route.destination)}
                        >
                          {/* Destination */}
                          <td className="px-4 py-4">
                            <div className="flex items-center gap-2">
                              <ChevronRight
                                size={16}
                                className={cn(
                                  'text-on-surface-variant shrink-0 transition-transform duration-200',
                                  isExpanded && 'rotate-90',
                                )}
                                aria-hidden="true"
                              />
                              <span className="font-mono text-primary bg-primary-container px-2 py-0.5 rounded-sm text-sm font-medium">
                                {route.destination}
                              </span>
                              <span className="text-sm text-on-surface-variant truncate max-w-[180px]">
                                {route.destination_name || route.destination_city || ''}
                              </span>
                              {/* Info icon + tooltip — only when useful name data exists */}
                              {(route.destination_name && route.destination_name !== route.destination) || route.destination_city ? (
                                <span
                                  className="relative group/tip inline-flex shrink-0"
                                  onClick={e => e.stopPropagation()}
                                >
                                  <Info size={12} className="text-on-surface-variant/40 hover:text-on-surface-variant/70 cursor-help transition-colors" />
                                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 invisible group-hover/tip:visible bg-gray-900 text-white text-xs rounded px-2 py-1 whitespace-nowrap shadow-lg">
                                    {[route.destination_name, route.destination_city].filter(s => s && s !== route.destination).join(', ')}
                                    <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900" />
                                  </span>
                                </span>
                              ) : null}
                            </div>
                          </td>
                          {/* Flights */}
                          <td className="px-4 py-4 text-sm text-on-surface">
                            {route.flight_count}
                          </td>
                          {/* Airlines */}
                          <td className="px-4 py-4 text-sm text-on-surface-variant max-w-[200px]">
                            <span className="truncate block">{route.airlines.join(', ')}</span>
                          </td>
                          {/* Min price */}
                          <td className="px-4 py-4 text-sm font-medium text-secondary">
                            {formatPrice(route.min_price)}
                          </td>
                          {/* Avg */}
                          <td className="px-4 py-4 text-sm text-on-surface-variant">
                            {formatPrice(route.avg_price)}
                          </td>
                          {/* Max */}
                          <td className="px-4 py-4 text-sm text-on-surface-variant">
                            {formatPrice(route.max_price)}
                          </td>
                        </tr>

                        {/* Expanded flights sub-row */}
                        <tr key={`${route.id}-flights`}>
                          <td colSpan={6} className="p-0">
                            <div
                              className="overflow-hidden transition-all duration-250 ease-in-out"
                              style={{ maxHeight: isExpanded ? '600px' : '0' }}
                            >
                              <div className="bg-[#F8FDF9]">
                                {loadingFlights === route.destination ? (
                                  <table className="w-full">
                                    <tbody>
                                      <SkeletonTableRow />
                                      <SkeletonTableRow />
                                      <SkeletonTableRow />
                                    </tbody>
                                  </table>
                                ) : (
                                  <table className="w-full">
                                    <thead className="bg-[#EEF7F0]">
                                      <tr>
                                        <th
                                          className="pl-12 pr-4 py-2 text-left text-xs font-semibold uppercase tracking-wider select-none cursor-pointer hover:bg-[#D4EDDA] transition-colors"
                                          onClick={() => handleFlightSort('date')}
                                        >
                                          <span className={cn('inline-flex items-center gap-1', flightSortField === 'date' ? 'text-secondary' : 'text-on-surface-variant')}>
                                            Date <FlightSortIcon field="date" />
                                          </span>
                                        </th>
                                        <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Airline</th>
                                        <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Departure</th>
                                        <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Arrival</th>
                                        <th
                                          className="px-4 py-2 text-right text-xs font-semibold uppercase tracking-wider select-none cursor-pointer hover:bg-[#D4EDDA] transition-colors"
                                          onClick={() => handleFlightSort('price')}
                                        >
                                          <span className={cn('inline-flex items-center justify-end gap-1', flightSortField === 'price' ? 'text-secondary' : 'text-on-surface-variant')}>
                                            Price <FlightSortIcon field="price" />
                                          </span>
                                        </th>
                                      </tr>
                                    </thead>
                                    <tbody className="divide-y divide-[#D4EDDA]">
                                      {sortedFlights(flightsByDest[route.destination] || []).map((f) => (
                                        <tr key={f.id} className="hover:bg-[#EEF7F0] transition-colors">
                                          <td className="pl-12 pr-4 py-2.5 text-sm text-on-surface">
                                            <span className="font-mono text-xs font-semibold text-on-surface-variant mr-2">{weekday(f.date)}</span>
                                            {f.date}
                                          </td>
                                          <td className="px-4 py-2.5 text-sm text-on-surface-variant">{f.airline || '—'}</td>
                                          <td className="px-4 py-2.5 text-sm text-on-surface-variant font-mono">{f.departure_time || '—'}</td>
                                          <td className="px-4 py-2.5 text-sm text-on-surface-variant font-mono">{f.arrival_time || '—'}</td>
                                          <td className="px-4 py-2.5 text-sm font-medium text-secondary text-right">
                                            {f.price != null ? `€${f.price.toFixed(2)}` : '—'}
                                          </td>
                                        </tr>
                                      ))}
                                      {(flightsByDest[route.destination] || []).length === 0 && (
                                        <tr>
                                          <td colSpan={5} className="pl-12 py-4 text-sm text-on-surface-variant">
                                            No flight details available
                                          </td>
                                        </tr>
                                      )}
                                    </tbody>
                                  </table>
                                )}
                              </div>
                            </div>
                          </td>
                        </tr>
                      </Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="px-5 py-3 border-t border-outline flex items-center justify-between">
                <span className="text-sm text-on-surface-variant">
                  Page {page} of {totalPages}
                </span>
                <div className="flex gap-2">
                  <button
                    onClick={() => setPage(p => p - 1)}
                    disabled={page === 1}
                    className="px-3 py-1.5 border border-outline rounded-xs text-sm text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    Previous
                  </button>
                  <button
                    onClick={() => setPage(p => p + 1)}
                    disabled={page === totalPages}
                    className="px-3 py-1.5 border border-outline rounded-xs text-sm text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                  >
                    Next
                  </button>
                </div>
              </div>
            )}
          </>
        )}
      </div>

    </div>
  );
}