'use client';

import { Suspense, useEffect, useMemo, useState } from 'react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { Briefcase, MapPin, Users } from 'lucide-react';
import { MapView, type MapMarker } from '@/components/map/MapView';
import { buildWorkerMapMarkers } from '@/components/map/workerMarkers';
import { buildJobMapMarkers } from '@/components/map/jobMarkers';
import {
  countActiveMapBrowseFilters,
  defaultMapBrowseFilters,
  MapBrowseFilterButton,
  MapBrowseFilterModal,
  type MapBrowseFilters,
} from '@/components/map/MapBrowseFilterModal';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { api } from '@/lib/api';
import { BROWSE_PAGE_SIZE, MAP_BROWSE_LIMIT } from '@/lib/pagination';
import { appendAreaQuery, getRegionMapViewport, regionLabel, regionPath, resolveBrowseRegionSlug } from '@/lib/region';
import { useRegion } from '@/contexts/RegionContext';
import { useAuth } from '@/contexts/AuthContext';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';

type CategoryOption = { id: string; name: string; slug: string; icon?: string };

function getMapEmptyMessage(
  areaLabel: string,
  filter: MapBrowseFilters['show'],
  category?: CategoryOption
) {
  if (category) {
    const trade = category.name.toLowerCase();
    if (filter === 'workers') {
      return {
        title: `No ${trade} workers in ${areaLabel}`,
        subtitle: 'Try a different trade or area, or check back later.',
      };
    }
    if (filter === 'jobs') {
      return {
        title: `No open ${trade} jobs in ${areaLabel}`,
        subtitle: 'Try a different trade or area, or post a job to get quotes.',
      };
    }
    return {
      title: `No ${trade} results in ${areaLabel}`,
      subtitle: 'Try a different trade or area, or check back later.',
    };
  }

  if (filter === 'workers') {
    return {
      title: `No workers in ${areaLabel}`,
      subtitle: 'Try another area or category, or check back later.',
    };
  }
  if (filter === 'jobs') {
    return {
      title: `No open jobs in ${areaLabel}`,
      subtitle: 'Try another area or category, or post a job to attract workers.',
    };
  }

  return {
    title: `No results for ${areaLabel}`,
    subtitle: JOBS_FEATURE_ENABLED
      ? 'No open jobs or workers match your filters. Try another area or category.'
      : 'No workers match your filters. Try another area or category.',
  };
}

function MapPageContent({ regionSlug: regionSlugFromPath }: { regionSlug?: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const { slug: contextSlug } = useRegion();
  const regionSlug = resolveBrowseRegionSlug(regionSlugFromPath, contextSlug);
  const { user } = useAuth();
  const initialFilter = searchParams.get('filter');
  const [filters, setFilters] = useState<MapBrowseFilters>(() => {
    let show: MapBrowseFilters['show'] =
      initialFilter === 'jobs' || initialFilter === 'workers' ? initialFilter : 'all';
    if (!JOBS_FEATURE_ENABLED) {
      show = show === 'jobs' ? 'workers' : show === 'all' ? 'workers' : show;
    }
    return {
      show,
      categorySlug: searchParams.get('category') || '',
      gender: searchParams.get('gender') || '',
    };
  });
  const [filterOpen, setFilterOpen] = useState(false);
  const [categories, setCategories] = useState<CategoryOption[]>([]);
  const [jobs, setJobs] = useState<Record<string, unknown>[]>([]);
  const [workers, setWorkers] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);

  const { show: filter, categorySlug, gender } = filters;
  const label = regionLabel(regionSlug);
  const { center: mapCenter, zoom: mapZoom } = getRegionMapViewport(regionSlug);
  const activeFilterCount = useMemo(() => countActiveMapBrowseFilters(filters), [filters]);

  const selectedCategory = categories.find((c) => c.slug === categorySlug);
  const emptyMessage = getMapEmptyMessage(label, filter, selectedCategory);

  const syncBrowseParams = (next: MapBrowseFilters) => {
    const params = new URLSearchParams();
    if (next.show !== 'all') params.set('filter', next.show);
    if (next.categorySlug) params.set('category', next.categorySlug);
    if (next.gender) params.set('gender', next.gender);
    const query = params.toString();
    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
  };

  const handleFiltersChange = (next: MapBrowseFilters) => {
    setFilters(next);
    syncBrowseParams(next);
  };

  useEffect(() => {
    api<{ data: CategoryOption[] }>('/categories?limit=50')
      .then((res) => setCategories(res.data))
      .catch(console.error);
  }, []);

  useEffect(() => {
    setLoading(true);
    const workerParams = new URLSearchParams({ limit: String(MAP_BROWSE_LIMIT) });
    appendAreaQuery(workerParams, regionSlug);
    if (categorySlug) workerParams.set('categorySlug', categorySlug);
    if (gender) workerParams.set('gender', gender);

    const requests: Promise<{ data: Record<string, unknown>[] }>[] = [
      api<{ data: Record<string, unknown>[] }>(`/workers?${workerParams}`),
    ];

    if (JOBS_FEATURE_ENABLED) {
      const jobParams = new URLSearchParams({ status: 'OPEN', limit: String(MAP_BROWSE_LIMIT) });
      appendAreaQuery(jobParams, regionSlug);
      if (categorySlug) jobParams.set('categorySlug', categorySlug);
      requests.unshift(api<{ data: Record<string, unknown>[] }>(`/jobs?${jobParams}`));
    }

    Promise.all(requests)
      .then((results) => {
        if (JOBS_FEATURE_ENABLED) {
          setJobs(results[0].data);
          setWorkers(results[1].data);
        } else {
          setJobs([]);
          setWorkers(results[0].data);
        }
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [regionSlug, categorySlug, gender]);

  const jobHref = (id: string) =>
    user?.role === 'WORKER' ? `/worker/jobs/${id}` : `/jobs/${id}`;

  const markers = useMemo<MapMarker[]>(() => {
    const result: MapMarker[] = [];

    if (JOBS_FEATURE_ENABLED && (filter === 'all' || filter === 'jobs')) {
      result.push(...buildJobMapMarkers(jobs, jobHref));
    }

    if (filter === 'all' || filter === 'workers') {
      result.push(...buildWorkerMapMarkers(workers, categorySlug, regionSlug));
    }

    return result;
  }, [filter, jobs, workers, user?.role, categorySlug, regionSlug]);

  const jobCount = markers.filter((m) => m.type === 'job').length;
  const workerCount = markers.filter((m) => m.type === 'worker').length;

  return (
    <>
      <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap items-center gap-3 text-sm text-muted">
          {JOBS_FEATURE_ENABLED && (
            <span className="inline-flex items-center gap-1.5">
              <span className="inline-block h-2 w-2 rounded-full bg-emerald-600" />
              <span className="font-semibold text-slate-900 tabular-nums">{jobCount}</span> job
              {jobCount !== 1 ? 's' : ''}
            </span>
          )}
          <span className="inline-flex items-center gap-1.5">
            <span className="inline-block h-2 w-2 rounded-full bg-[var(--home-amber)]" />
            <span className="font-semibold text-slate-900 tabular-nums">{workerCount}</span> worker
            {workerCount !== 1 ? 's' : ''}
          </span>
          {selectedCategory ? <span>· {selectedCategory.name}</span> : null}
          {activeFilterCount > 0 ? <span>· filtered</span> : null}
        </div>
        <MapBrowseFilterButton activeCount={activeFilterCount} onClick={() => setFilterOpen(true)} />
      </div>

      <MapBrowseFilterModal
        open={filterOpen}
        onClose={() => setFilterOpen(false)}
        filters={filters}
        onChange={handleFiltersChange}
        categories={categories}
        jobCount={jobCount}
        workerCount={workerCount}
      />

      <p className="mb-3 hidden text-xs text-muted sm:block">Tap a pin for details</p>

      <div className="relative h-[calc(100vh-18rem)] min-h-[420px] max-h-[720px] overflow-hidden border border-[#e2ddd2]">
        <MapView
          markers={markers}
          defaultCenter={mapCenter}
          defaultZoom={mapZoom}
          focusOnRegion
          className="h-full w-full"
        />
        {loading && (
          <div className="absolute top-3 left-3 z-10 flex items-center gap-2 border border-[#e2ddd2] bg-white/95 px-3 py-1.5 text-xs text-muted shadow-sm">
            <div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-[var(--home-amber)] border-t-transparent" />
            Loading pins…
          </div>
        )}
        {!loading && markers.length === 0 && (
          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center bg-[var(--home-sand)]/80 p-8 text-center">
            <div className="mb-3 flex h-12 w-12 items-center justify-center bg-[var(--home-ink)] text-white">
              <MapPin className="h-6 w-6" />
            </div>
            <p className="home-display font-medium text-slate-900">{emptyMessage.title}</p>
            <p className="mt-1 max-w-sm text-sm text-muted">{emptyMessage.subtitle}</p>
          </div>
        )}
      </div>
    </>
  );
}

export function MapPageView({ regionSlug: regionSlugFromPath }: { regionSlug?: string }) {
  const { slug: contextSlug } = useRegion();
  const regionSlug = resolveBrowseRegionSlug(regionSlugFromPath, contextSlug);
  const label = regionLabel(regionSlug);
  const jobsHref = regionSlug ? regionPath(regionSlug, '/jobs') : '/jobs';
  const workersHref = regionSlug ? regionPath(regionSlug, '/workers') : '/workers';

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={`Map · ${label}`}
        title="Map View"
        description={
          JOBS_FEATURE_ENABLED
            ? `Explore open jobs and workers across ${label} on an interactive map. Filter by trade and tap pins for details.`
            : `Explore workers across ${label} on an interactive map. Filter by trade and tap pins for details.`
        }
        actions={
          JOBS_FEATURE_ENABLED
            ? [
                { href: jobsHref, label: 'Find jobs', icon: Briefcase, variant: 'heroOutline' },
                { href: workersHref, label: 'Find workers', icon: Users, variant: 'accent' },
              ]
            : [
                { href: workersHref, label: 'Find workers', icon: Users, variant: 'accent' },
                { href: '/categories', label: 'Browse trades', icon: MapPin, variant: 'heroOutline' },
              ]
        }
      />

      <div className="page-container max-w-6xl">
        <Suspense
          fallback={
            <div className="flex justify-center py-24">
              <div className="loading-spinner" />
            </div>
          }
        >
          <MapPageContent regionSlug={regionSlug} />
        </Suspense>
      </div>
    </div>
  );
}