'use client';

import { Suspense, useEffect, useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { CategoryCard, CategoryCardSkeleton } from '@/components/categories/CategoryCard';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { Search, MapPin, Users, LayoutGrid, Briefcase } from 'lucide-react';
import { api } from '@/lib/api';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { appendAreaQuery, regionLabel, resolveBrowseRegionSlug } from '@/lib/region';
import { useRegion } from '@/contexts/RegionContext';
import { useLanguage } from '@/contexts/LanguageContext';

function CategoriesContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { slug: contextSlug } = useRegion();
  const { t } = useLanguage();
  const regionSlug = resolveBrowseRegionSlug(undefined, contextSlug);
  const label = regionLabel(regionSlug);
  const initialSearch = searchParams.get('search') || '';
  const [categories, setCategories] = useState<Record<string, unknown>[]>([]);
  const [search, setSearch] = useState(initialSearch);
  const [loading, setLoading] = useState(true);

  const fetchCategories = (query: string) => {
    setLoading(true);
    const params = new URLSearchParams({ limit: '50' });
    if (query) params.set('search', query);
    appendAreaQuery(params, regionSlug);
    api<{ data: Record<string, unknown>[] }>(`/categories?${params}`)
      .then((res) => setCategories(res.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    fetchCategories(initialSearch);
  }, [initialSearch, regionSlug]);

  const handleSearch = () => {
    const params = new URLSearchParams();
    if (search.trim()) params.set('search', search.trim());
    const query = params.toString();
    router.replace(query ? `/categories?${query}` : '/categories', { scroll: false });
    fetchCategories(search.trim());
  };

  const stats = useMemo(() => {
    const workerTotal = categories.reduce(
      (sum, cat) => sum + ((cat._count as { workerSkills?: number })?.workerSkills ?? 0),
      0
    );
    const jobTotal = categories.reduce(
      (sum, cat) => sum + ((cat._count as { jobs?: number })?.jobs ?? 0),
      0
    );
    return { workerTotal, jobTotal };
  }, [categories]);

  return (
    <>
      <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
        <div className="relative min-w-0 flex-1">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            type="text"
            placeholder={t(
              'Search trades — plumber, tubero, labandera...',
              'Maghanap ng trabaho — plumber, tubero, labandera...'
            )}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
            className="search-input-icon h-11"
          />
        </div>
        <Button onClick={handleSearch} size="sm" className="h-9 shrink-0 px-4 worker-cta-amber rounded-none">
          {t('Search', 'Maghanap')}
        </Button>
      </div>

      {!loading && categories.length > 0 && (
        <div className="mb-5 flex flex-wrap gap-x-6 gap-y-2 border-b border-[#e2ddd2] pb-4 text-sm text-muted">
          <span className="inline-flex items-center gap-1.5">
            <LayoutGrid className="h-4 w-4 text-[var(--home-amber)]" />
            <span className="font-semibold text-slate-900 tabular-nums">{categories.length}</span>
            {t('trades', 'trabaho')}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Users className="h-4 w-4 text-[var(--home-amber)]" />
            <span className="font-semibold text-slate-900 tabular-nums">{stats.workerTotal}</span>
            {t('workers', 'workers')}
          </span>
          {JOBS_FEATURE_ENABLED && (
            <span className="inline-flex items-center gap-1.5">
              <Briefcase className="h-4 w-4 text-[var(--home-amber)]" />
              <span className="font-semibold text-slate-900 tabular-nums">{stats.jobTotal}</span>
              {t('open jobs', 'open jobs')}
            </span>
          )}
        </div>
      )}

      {loading ? (
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5 sm:gap-4">
          {Array.from({ length: 12 }).map((_, i) => (
            <CategoryCardSkeleton key={i} />
          ))}
        </div>
      ) : categories.length > 0 ? (
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5 sm:gap-4">
          {categories.map((cat) => (
            <CategoryCard
              key={cat.id as string}
              category={cat as Parameters<typeof CategoryCard>[0]['category']}
              variant="default"
            />
          ))}
        </div>
      ) : (
        <div className="border border-dashed border-[#d6d0c4] bg-[#fffdf9] py-16 px-6 text-center">
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center bg-[var(--home-ink)] text-white">
            <LayoutGrid className="h-7 w-7" />
          </div>
          <h3 className="home-display font-bold text-slate-900 text-lg">
            {t('No categories found', 'Walang nahanap na category')}
          </h3>
          <p className="text-sm text-muted mt-2 max-w-sm mx-auto">
            {search
              ? t(
                  `No trades match "${search}". Try a different keyword.`,
                  `Walang trabahong tumugma sa "${search}". Subukan ang ibang keyword.`
                )
              : t(
                  'No service categories are available right now.',
                  'Wala pang available na service categories.'
                )}
          </p>
          {search && (
            <Button
              variant="outline"
              className="mt-6 rounded-none border-[#d6d0c4]"
              onClick={() => {
                setSearch('');
                router.replace('/categories');
                fetchCategories('');
              }}
            >
              {t('Clear search', 'I-clear ang search')}
            </Button>
          )}
        </div>
      )}
    </>
  );
}

export default function CategoriesPage() {
  const { slug: contextSlug } = useRegion();
  const { t } = useLanguage();
  const label = regionLabel(contextSlug);

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={t(`Trades · ${label}`, `Mga trabaho · ${label}`)}
        title={t('Service Categories', 'Mga Kategorya ng Serbisyo')}
        description={t(
          `Find skilled workers for every trade in ${label} — from home repairs to personal services.`,
          `Maghanap ng bihasang workers para sa bawat trabaho sa ${label} — mula home repairs hanggang personal services.`
        )}
        actions={[
          { href: '/workers', label: t('Find workers', 'Hanapin ang workers'), icon: Users, variant: 'accent' },
          {
            href: '/map?filter=workers',
            label: t('Workers map', 'Mapa ng workers'),
            icon: MapPin,
            variant: 'heroOutline',
          },
        ]}
      />

      <div className="page-container max-w-6xl">
        <p className="mb-5 text-sm text-muted leading-relaxed">
          {t(
            `Tap a trade to browse workers in ${label}.`,
            `Pindutin ang isang trabaho para makita ang mga worker sa ${label}.`
          )}
        </p>
        <Suspense
          fallback={
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5 sm:gap-4">
              {Array.from({ length: 12 }).map((_, i) => (
                <CategoryCardSkeleton key={i} />
              ))}
            </div>
          }
        >
          <CategoriesContent />
        </Suspense>
      </div>
    </div>
  );
}