'use client';

import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { MobileLayout } from '@/components/mobile-layout';
import api from '../../../../lib/api-client';
import { smartRound } from '../../../../lib/utils';
import { Search, Sparkles, Trash2, FileText } from 'lucide-react';
import { usePhotoStorage } from '@/components/delivery/photo-proof';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; }>;
}

const MEDIA_MAP_KEY = 'gcx_delivery_media_map';

const getMediaMap = (): Record<string, any> => {
  if (typeof window === 'undefined') return {};
  try {
    return JSON.parse(localStorage.getItem(MEDIA_MAP_KEY) || '{}');
  } catch {
    return {};
  }
};

export default function MyDeliveriesPage() {
  const {
    data,
    isLoading,
    isFetching,
  } = useQuery({
    queryKey: ['my-deliveries'],
    staleTime: 5_000,
    gcTime: 0,
    refetchInterval: 12_000,
    refetchIntervalInBackground: true,
    refetchOnWindowFocus: true,
    refetchOnReconnect: true,
    queryFn: async () => {
      const response = await api.get('/deliveries', {
        params: { cache_bust: Date.now(), per_page: 300 },
      });
      return response.data;
    },
  });

  const queryClient = useQueryClient();
  const { getPhoto } = usePhotoStorage();
  const [proofPackLoading, setProofPackLoading] = useState(false);

  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      await api.delete(`/deliveries/${id}`);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['my-deliveries'] });
    },
    onError: (error) => {
      alert('Failed to delete delivery');
      console.error(error);
    }
  });

  const handleDelete = (e: React.MouseEvent, id: number) => {
    e.preventDefault();
    e.stopPropagation();
    if (confirm('Are you sure you want to delete this delivery?')) {
      deleteMutation.mutate(id);
    }
  };

  const deliveries = useMemo(() => data?.data ?? [], [data]);
  const isEmpty = !isLoading && deliveries.length === 0;

  const asText = (val: any): string => {
    if (val === null || val === undefined) return '';
    if (typeof val === 'string') return val;
    if (typeof val === 'number') return String(val);
    if (typeof val === 'object') {
      // common shape {id, code, name}
      return String((val as any).name ?? (val as any).code ?? (val as any).id ?? '');
    }
    try {
      return String(val);
    } catch (_) {
      return '';
    }
  };

  const [searchTerm, setSearchTerm] = useState('');
  const [schoolFilter, setSchoolFilter] = useState('');
  const [commodityFilter, setCommodityFilter] = useState('');
  const [dateFilter, setDateFilter] = useState('');
  const [installBannerVisible, setInstallBannerVisible] = useState(false);
  const [installBannerSeconds, setInstallBannerSeconds] = useState(10);
  const installPromptRef = useRef<BeforeInstallPromptEvent | null>(null);
  const [isOnline, setIsOnline] = useState(typeof navigator !== 'undefined' ? navigator.onLine : true);

  const recentDeliveries = useMemo(() => deliveries.slice(0, 5), [deliveries]);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const setOnline = () => setIsOnline(true);
    const setOffline = () => setIsOnline(false);
    setIsOnline(navigator.onLine);
    window.addEventListener('online', setOnline);
    window.addEventListener('offline', setOffline);
    return () => {
      window.removeEventListener('online', setOnline);
      window.removeEventListener('offline', setOffline);
    };
  }, []);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const lastDismissed = Number(localStorage.getItem('gcx_install_banner_dismissed_at') || 0);
    const now = Date.now();
    const dayMs = 24 * 60 * 60 * 1000;
    const cooldownElapsed = now - lastDismissed > dayMs;
    const isStandalone = window.matchMedia?.('(display-mode: standalone)')?.matches || (window.navigator as any).standalone;

    const maybeShowBanner = () => {
      if (!isStandalone && cooldownElapsed) {
        setInstallBannerVisible(true);
        setInstallBannerSeconds(10);
        localStorage.setItem('gcx_install_banner_dismissed_at', String(Date.now()));
      }
    };

    const handleBeforeInstallPrompt = (event: Event) => {
      event.preventDefault();
      installPromptRef.current = event as BeforeInstallPromptEvent;
      maybeShowBanner();
    };

    const handleAppInstalled = () => {
      setInstallBannerVisible(false);
      localStorage.setItem('gcx_install_banner_dismissed_at', String(Date.now()));
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    window.addEventListener('appinstalled', handleAppInstalled);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.removeEventListener('appinstalled', handleAppInstalled);
    };
  }, []);

  useEffect(() => {
    if (!installBannerVisible) return;
    const interval = setInterval(() => {
      setInstallBannerSeconds((prev) => {
        if (prev <= 1) {
          clearInterval(interval);
          setInstallBannerVisible(false);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [installBannerVisible]);

  const handleInstallNow = async () => {
    const promptEvent = installPromptRef.current;
    if (promptEvent?.prompt) {
      promptEvent.prompt();
      await promptEvent.userChoice;
      installPromptRef.current = null;
    } else {
      window.open('https://support.google.com/chrome/answer/9658361', '_blank');
    }
    setInstallBannerVisible(false);
  };

  const handleDismissBanner = () => {
    localStorage.setItem('gcx_install_banner_dismissed_at', String(Date.now()));
    setInstallBannerVisible(false);
  };

  const uniqueSchools = useMemo(() => {
    const names = new Map<string, string>();
    deliveries.forEach((delivery: any) => {
      if (delivery.school_id && delivery.school_name && !names.has(String(delivery.school_id))) {
        names.set(String(delivery.school_id), delivery.school_name);
      }
    });
    return Array.from(names.entries()).map(([id, name]) => ({ id, name }));
  }, [deliveries]);

  const uniqueCommodities = useMemo(() => {
    const names = new Map<string, string>();
    deliveries.forEach((delivery: any) => {
      if (delivery.commodity_id && delivery.commodity_name && !names.has(String(delivery.commodity_id))) {
        names.set(String(delivery.commodity_id), delivery.commodity_name);
      }
    });
    return Array.from(names.entries()).map(([id, name]) => ({ id, name }));
  }, [deliveries]);

  const handleClearFilters = useCallback(() => {
    setSearchTerm('');
    setSchoolFilter('');
    setCommodityFilter('');
    setDateFilter('');
  }, []);

  const handleGenerateProofPack = useCallback(async () => {
    if (!schoolFilter) return;
    const school = uniqueSchools.find((s) => String(s.id) === String(schoolFilter));
    const schoolName = school?.name || 'School';
    const schoolDeliveries = deliveries.filter((delivery: any) => String(delivery.school_id) === String(schoolFilter));
    if (!schoolDeliveries.length) return;

    setProofPackLoading(true);
    try {
      const mediaMap = getMediaMap();
      const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
      const pageWidth = doc.internal.pageSize.getWidth();
      const margin = 40;

      doc.setFontSize(16);
      doc.text('Proof Pack - Delivery Evidence', margin, 40);
      doc.setFontSize(12);
      doc.text(`School: ${schoolName}`, margin, 60);
      doc.text(`Generated: ${new Date().toLocaleString()}`, margin, 78);

      autoTable(doc, {
        startY: 100,
        head: [["Date", "Commodity", "Quantity", "Status", "Notes"]],
        body: schoolDeliveries.map((delivery: any) => {
          const media = mediaMap[String(delivery.id)] || {};
          const transcript = media?.transcript ? String(media.transcript).slice(0, 80) : '';
          const notes = transcript || delivery.notes || '';
          return [
            delivery.delivery_date || '',
            delivery.commodity_name || '',
            smartRound(delivery.actual_quantity || 0),
            delivery.status || '',
            notes,
          ];
        }),
        styles: { fontSize: 9 },
        headStyles: { fillColor: [16, 185, 129] },
      });

      const photoEntries: Array<{ thumbnail: string; label: string }> = [];
      for (const delivery of schoolDeliveries) {
        const media = mediaMap[String(delivery.id)] || {};
        if (media?.photoId) {
          const photo = await getPhoto(media.photoId);
          if (photo?.thumbnail) {
            const meta = media?.photoMeta || {};
            const gps = meta?.location ? `${meta.location.lat?.toFixed?.(5) || ''}, ${meta.location.lng?.toFixed?.(5) || ''}`.trim() : '';
            const time = meta?.stampedAt ? new Date(meta.stampedAt).toLocaleString() : '';
            photoEntries.push({
              thumbnail: photo.thumbnail,
              label: `${delivery.delivery_date || ''} • ${delivery.commodity_name || ''}${time ? ` • ${time}` : ''}${gps ? ` • ${gps}` : ''}`,
            });
          }
        }
      }

      if (photoEntries.length) {
        doc.addPage();
        doc.setFontSize(14);
        doc.text('Proof Photos', margin, 40);

        const size = 160;
        const gap = 20;
        let x = margin;
        let y = 70;

        for (const entry of photoEntries.slice(0, 12)) {
          if (x + size > pageWidth - margin) {
            x = margin;
            y += size + 40;
          }
          if (y + size > doc.internal.pageSize.getHeight() - margin) {
            doc.addPage();
            y = 70;
            x = margin;
          }

          doc.addImage(entry.thumbnail, 'JPEG', x, y, size, size);
          doc.setFontSize(9);
          doc.text(entry.label, x, y + size + 12);
          x += size + gap;
        }
      }

      doc.save(`proof-pack-${schoolName.replace(/\s+/g, '-')}-${new Date().toISOString().split('T')[0]}.pdf`);
    } catch (error) {
      console.error('Failed to generate proof pack:', error);
      alert('Failed to generate proof pack. Please try again.');
    } finally {
      setProofPackLoading(false);
    }
  }, [deliveries, getPhoto, schoolFilter, uniqueSchools]);

  const activeFiltersCount = useMemo(() => {
    return [searchTerm.trim(), schoolFilter, commodityFilter, dateFilter].filter(Boolean).length;
  }, [commodityFilter, dateFilter, schoolFilter, searchTerm]);

  const pendingReviewCount = useMemo(() => {
    return deliveries.filter((delivery: any) => delivery.status === 'PENDING_ADMIN_REVIEW').length;
  }, [deliveries]);

  const advancedFiltersActive = Boolean(searchTerm.trim() || schoolFilter || commodityFilter || dateFilter);

  const searchResults = useMemo<Array<{ delivery: any; reasons: string[] }>>(() => {
    if (!advancedFiltersActive) return [];

    return deliveries
      .filter((delivery: any) => {
        const haystack = [
          asText(delivery.school_name),
          asText(delivery.commodity_name),
          asText(delivery.notes),
          asText(delivery.region),
          asText(delivery.delivery_date),
        ].join(' ').toLowerCase();

        const normalizedTerm = searchTerm.trim().toLowerCase();
        if (normalizedTerm && !haystack.includes(normalizedTerm)) return false;
        if (schoolFilter && String(delivery.school_id) !== schoolFilter) return false;
        if (commodityFilter && String(delivery.commodity_id) !== commodityFilter) return false;
        if (dateFilter && delivery.delivery_date !== dateFilter) return false;
        return true;
      })
      .map((delivery: any) => ({ delivery, reasons: [] as string[] }));
  }, [advancedFiltersActive, commodityFilter, dateFilter, deliveries, schoolFilter, searchTerm]);

  const renderDeliveryCard = (delivery: any, insights?: string[]) => (
    <Link href={`/field-staff/my-deliveries/${delivery.id}`} key={delivery.id} className="block">
      <div className="rounded-2xl bg-white p-4 shadow-sm transition-all active:scale-[0.99]">
          <div className="flex items-start gap-3">
            <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-100 to-cyan-100">
            <svg className="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-slate-900 truncate">{asText(delivery.school_name) || 'School'}</h3>
            <p className="text-sm text-slate-500">{asText(delivery.commodity_name) || 'Commodity'}</p>
            <div className="mt-2 flex items-center gap-2">
              <span className="text-xs text-slate-400">{asText(delivery.delivery_date)}</span>
              {delivery.status && (
                <span
                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                    delivery.status === 'COMPLETE' 
                      ? 'bg-emerald-50 text-emerald-700' 
                      : delivery.status === 'PENDING_ADMIN_REVIEW'
                      ? 'bg-amber-50 text-amber-700'
                      : 'bg-slate-100 text-slate-600'
                  }`}
                >
                  {delivery.status === 'COMPLETE' ? '✓ Complete' : delivery.status === 'PENDING_ADMIN_REVIEW' ? '⏳ Pending' : delivery.status.replace(/_/g, ' ')}
                </span>
              )}
            </div>
            {insights && insights.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-1.5">
                {insights.slice(0, 3).map((insight) => (
                  <span
                    key={insight}
                    className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700"
                  >
                    <Sparkles className="h-2.5 w-2.5" />
                    {insight}
                  </span>
                ))}
              </div>
            )}
            <button
                onClick={(e) => handleDelete(e, delivery.id)}
                className="mt-2 inline-flex items-center gap-1 rounded bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100 transition-colors"
                title="Delete delivery"
            >
                <Trash2 className="h-3 w-3" />
                Delete
            </button>
          </div>
          <div className="text-right">
            <div className="rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 px-3 py-2 shadow-lg shadow-emerald-500/30">
              <p className="text-lg font-bold text-white">{smartRound(delivery.actual_quantity)}</p>
            </div>
            <p className="mt-1 text-xs text-slate-400">units</p>
          </div>
        </div>
      </div>
    </Link>
  );

  return (
    <MobileLayout>
      <div className="max-w-full overflow-x-hidden pb-24">
        {/* Header Section */}
        <div className="bg-gradient-to-br from-emerald-500 via-teal-600 to-cyan-500 px-5 pb-16 pt-6">
          <div className="relative">
            <h1 className="text-xl font-bold text-white">My Deliveries</h1>
            <p className="mt-1 text-sm text-emerald-100">
              {deliveries.length} records captured
              {isFetching && (
                <span className="ml-2 inline-flex items-center gap-1">
                  <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white"></span>
                  Syncing…
                </span>
              )}
            </p>
          </div>
        </div>

        {/* Quick Stats - Floating Cards */}
        <div className="relative z-10 -mt-10 px-4">
          <div className="grid grid-cols-3 gap-2">
            <div className="rounded-2xl bg-white p-3 shadow-lg shadow-emerald-500/20 text-center">
              <div className={`mx-auto mb-1 flex h-8 w-8 items-center justify-center rounded-full ${isOnline ? 'bg-emerald-100' : 'bg-amber-100'}`}>
                <div className={`h-2.5 w-2.5 rounded-full ${isOnline ? 'bg-emerald-500' : 'bg-amber-500 animate-pulse'}`}></div>
              </div>
              <p className={`text-xs font-semibold ${isOnline ? 'text-emerald-600' : 'text-amber-600'}`}>
                {isOnline ? 'Online' : 'Offline'}
              </p>
            </div>
            <div className="rounded-2xl bg-white p-3 shadow-lg shadow-cyan-500/20 text-center">
              <p className="text-xl font-bold text-slate-900">{pendingReviewCount}</p>
              <p className="text-xs text-slate-500">Pending</p>
            </div>
            <div className="rounded-2xl bg-white p-3 shadow-lg shadow-teal-500/20 text-center">
              <p className="text-xl font-bold text-slate-900">{deliveries.length}</p>
              <p className="text-xs text-slate-500">Total</p>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="mt-4 space-y-4 px-4">
          {/* Search Card */}
          <div className="rounded-2xl bg-white p-4 shadow-sm">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50">
                <Search className="h-5 w-5 text-emerald-600" />
              </div>
              <div>
                <p className="text-sm font-semibold text-slate-900">Smart Search</p>
                <p className="text-xs text-slate-500">Find by school, commodity, or date</p>
              </div>
              {activeFiltersCount > 0 && (
                <span className="ml-auto rounded-full bg-emerald-500 px-2 py-0.5 text-xs font-semibold text-white">
                  {activeFiltersCount}
                </span>
              )}
            </div>

            <div className="space-y-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search everything..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full rounded-xl border-0 bg-slate-50 py-3 pl-10 pr-4 text-sm text-slate-900 placeholder:text-slate-400 focus:bg-white focus:ring-2 focus:ring-emerald-500"
                />
              </div>

              <div className="grid grid-cols-3 gap-2">
                <select
                  title="Filter by school"
                  value={schoolFilter}
                  onChange={(e) => setSchoolFilter(e.target.value)}
                  className="rounded-xl border-0 bg-slate-50 px-3 py-2.5 text-xs text-slate-700 focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="">All schools</option>
                  {uniqueSchools.map((school) => (
                    <option key={school.id} value={school.id}>
                      {school.name}
                    </option>
                  ))}
                </select>
                <select
                  title="Filter by commodity"
                  value={commodityFilter}
                  onChange={(e) => setCommodityFilter(e.target.value)}
                  className="rounded-xl border-0 bg-slate-50 px-3 py-2.5 text-xs text-slate-700 focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="">Commodity</option>
                  {uniqueCommodities.map((commodity) => (
                    <option key={commodity.id} value={commodity.id}>
                      {commodity.name}
                    </option>
                  ))}
                </select>
                <input
                  type="date"
                  title="Filter by date"
                  placeholder="Select date"
                  value={dateFilter}
                  onChange={(e) => setDateFilter(e.target.value)}
                  className="rounded-xl border-0 bg-slate-50 px-3 py-2.5 text-xs text-slate-700 focus:ring-2 focus:ring-emerald-500"
                />
              </div>

              {activeFiltersCount > 0 && (
                <button
                  onClick={handleClearFilters}
                  className="w-full rounded-xl bg-slate-100 py-2 text-xs font-medium text-slate-600 transition-all active:scale-[0.98]"
                >
                  Clear all filters
                </button>
              )}

              {schoolFilter && (
                <button
                  onClick={handleGenerateProofPack}
                  disabled={proofPackLoading}
                  className="w-full rounded-xl bg-emerald-600 py-2 text-xs font-semibold text-white transition-all active:scale-[0.98] disabled:opacity-50"
                >
                  <span className="inline-flex items-center justify-center gap-2">
                    <FileText className="h-3.5 w-3.5" />
                    {proofPackLoading ? 'Generating proof pack…' : 'Proof Pack PDF (Selected School)'}
                  </span>
                </button>
              )}
            </div>
          </div>

          {/* Install Banner */}
          {installBannerVisible && (
            <div className="rounded-2xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 p-4 shadow-xl shadow-emerald-500/30">
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/20">
                  <svg className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                </div>
                <div className="flex-1">
                  <p className="text-sm font-semibold text-white">Install GCX FSHS Field App</p>
                  <p className="text-xs text-white/80">Get offline mode & smart alerts • {installBannerSeconds}s</p>
                </div>
              </div>
              <div className="mt-3 flex gap-2">
                <button 
                  onClick={handleDismissBanner} 
                  className="flex-1 rounded-xl bg-white/20 py-2 text-xs font-semibold text-white transition-all active:scale-[0.98]"
                >
                  Later
                </button>
                <button 
                  onClick={handleInstallNow} 
                  className="flex-1 rounded-xl bg-white py-2 text-xs font-semibold text-emerald-600 transition-all active:scale-[0.98]"
                >
                  Install Now
                </button>
              </div>
            </div>
          )}

          {/* Offline Warning */}
          {!isOnline && (
            <div className="flex items-center gap-3 rounded-2xl bg-amber-50 p-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100">
                <svg className="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
                </svg>
              </div>
              <div>
                <p className="text-sm font-semibold text-amber-800">You&apos;re offline</p>
                <p className="text-xs text-amber-600">Deliveries will sync when you reconnect</p>
              </div>
            </div>
          )}

          {/* Deliveries List */}
          {isLoading ? (
            <div className="space-y-3">
              {Array.from({ length: 3 }).map((_, index) => (
                <div
                  key={index}
                  className="h-24 animate-pulse rounded-2xl bg-white shadow-sm"
                ></div>
              ))}
            </div>
          ) : isEmpty ? (
            <div className="rounded-2xl bg-white p-8 text-center shadow-sm">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
                <svg className="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
              </div>
              <p className="text-base font-semibold text-slate-700">No deliveries yet</p>
              <p className="mt-1 text-sm text-slate-500">Start by recording your first delivery</p>
              <Link
                href="/field-staff/new-delivery"
                className="mt-4 inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-emerald-500/30 transition-all active:scale-[0.98]"
              >
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                Record Delivery
              </Link>
            </div>
          ) : (
            <div className="space-y-4">
              {/* Search Results */}
              {advancedFiltersActive && (
                <div>
                  <div className="mb-3 flex items-center justify-between">
                    <p className="text-sm font-semibold text-slate-700">
                      Search Results
                      <span className="ml-2 text-xs font-normal text-slate-400">
                        {searchResults.length} found
                      </span>
                    </p>
                  </div>
                  {searchResults.length > 0 ? (
                    <div className="space-y-3">
                      {searchResults.map(({ delivery, reasons }) => renderDeliveryCard(delivery, reasons))}
                    </div>
                  ) : (
                    <div className="rounded-2xl bg-slate-50 p-6 text-center">
                      <p className="text-sm font-medium text-slate-600">No matches found</p>
                      <p className="mt-1 text-xs text-slate-500">Try adjusting your search terms</p>
                    </div>
                  )}
                </div>
              )}

              {/* Recent Deliveries */}
              {!advancedFiltersActive && (
                <div>
                  <div className="mb-3 flex items-center justify-between">
                    <p className="text-sm font-semibold text-slate-700">Recent Deliveries</p>
                    <span className="text-xs text-slate-400">Latest {recentDeliveries.length}</span>
                  </div>
                  <div className="space-y-3">
                    {recentDeliveries.map((delivery: any) => renderDeliveryCard(delivery))}
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </MobileLayout>
  );
}