'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { WorkerCard } from '@/components/workers/WorkerCard';
import { JobCard } from '@/components/jobs/JobCard';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { Briefcase, MapPin, PlusCircle, Users } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext';
import { useRegion } from '@/contexts/RegionContext';
import { buildPostJobAuthUrl } from '@/lib/createJob';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { getCategoryTl } from '@/lib/categoryTl';
import { api } from '@/lib/api';
import { BROWSE_PAGE_SIZE } from '@/lib/pagination';
import { appendAreaQuery, regionLabel, regionPath, resolveBrowseRegionSlug } from '@/lib/region';
import { cn } from '@/lib/utils';

export default function CategoryPage() {
  const { slug } = useParams<{ slug: string }>();
  const { user } = useAuth();
  const { slug: contextSlug } = useRegion();
  const regionSlug = resolveBrowseRegionSlug(undefined, contextSlug);
  const regionName = regionLabel(regionSlug);
  const [category, setCategory] = useState<Record<string, unknown> | null>(null);
  const [workers, setWorkers] = useState<Record<string, unknown>[]>([]);
  const [jobs, setJobs] = useState<Record<string, unknown>[]>([]);
  const [tab, setTab] = useState<'workers' | 'jobs'>('workers');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!slug) return;
    setLoading(true);
    const workerParams = new URLSearchParams({
      categorySlug: slug,
      sort: 'recommended',
      limit: String(BROWSE_PAGE_SIZE),
    });
    appendAreaQuery(workerParams, regionSlug);

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

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

    Promise.all(requests)
      .then((results) => {
        setCategory(results[0].data as Record<string, unknown>);
        setWorkers(results[1].data as Record<string, unknown>[]);
        setJobs(
          JOBS_FEATURE_ENABLED && results[2]
            ? (results[2].data as Record<string, unknown>[])
            : []
        );
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [slug, regionSlug]);

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

  if (loading || !category) {
    return (
      <div className="flex items-center justify-center min-h-[50vh] text-muted">
        <div className="loading-spinner" />
      </div>
    );
  }

  const name = category.name as string;
  const tl = getCategoryTl(slug);
  const enDescription =
    (category.description as string) ||
    (JOBS_FEATURE_ENABLED
      ? `Find ${name.toLowerCase()} workers and open jobs in ${regionName}.`
      : `Find ${name.toLowerCase()} workers in ${regionName}.`);
  const heroDescription = [enDescription, tl?.descriptionTl].filter(Boolean).join(' · ');

  const mapHref = regionSlug
    ? `${regionPath(regionSlug, '/map')}?category=${slug}&filter=workers`
    : `/map?category=${slug}&filter=workers`;

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        leading={category.icon as string}
        eyebrow={`Trade category · ${regionName}${tl?.nameTl ? ` · ${tl.nameTl}` : ''}`}
        title={name}
        description={heroDescription}
        actions={
          JOBS_FEATURE_ENABLED
            ? [
                { href: mapHref, label: 'Map view', icon: MapPin, variant: 'heroOutline' },
                { href: buildPostJobAuthUrl(), label: 'Post a job', icon: PlusCircle, variant: 'accent' },
              ]
            : [
                { href: mapHref, label: 'Map view', icon: MapPin, variant: 'heroOutline' },
                {
                  href: `/workers?category=${slug}`,
                  label: 'Browse workers',
                  icon: Users,
                  variant: 'accent',
                },
              ]
        }
      />

      <div className="page-container max-w-6xl">
        {JOBS_FEATURE_ENABLED && (
          <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex flex-wrap items-center gap-2">
              <button
                type="button"
                onClick={() => setTab('workers')}
                className={cn('filter-chip gap-1.5 rounded-none', tab === 'workers' && 'filter-chip-active')}
              >
                <Users className="h-3.5 w-3.5" />
                Workers ({workers.length})
              </button>
              <button
                type="button"
                onClick={() => setTab('jobs')}
                className={cn('filter-chip gap-1.5 rounded-none', tab === 'jobs' && 'filter-chip-active')}
              >
                <Briefcase className="h-3.5 w-3.5" />
                Open jobs ({jobs.length})
              </button>
            </div>
            <p className="text-sm text-muted">
              {tab === 'workers' ? (
                <>
                  <Users className="inline h-4 w-4 mr-1 -mt-0.5 text-[var(--home-amber)]" />
                  <span className="font-semibold text-slate-900">{workers.length}</span> worker
                  {workers.length !== 1 ? 's' : ''} in {name} · {regionName}
                </>
              ) : (
                <>
                  <Briefcase className="inline h-4 w-4 mr-1 -mt-0.5 text-[var(--home-amber)]" />
                  <span className="font-semibold text-slate-900">{jobs.length}</span> open job
                  {jobs.length !== 1 ? 's' : ''} in {name}
                </>
              )}
            </p>
          </div>
        )}

        {!JOBS_FEATURE_ENABLED && (
          <p className="mb-4 text-sm text-muted">
            <Users className="inline h-4 w-4 mr-1 -mt-0.5 text-[var(--home-amber)]" />
            <span className="font-semibold text-slate-900">{workers.length}</span> worker
            {workers.length !== 1 ? 's' : ''} in {name} · {regionName}
          </p>
        )}

        {(tab === 'workers' || !JOBS_FEATURE_ENABLED) ? (
          workers.length > 0 ? (
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4">
              {workers.map((w) => (
                <WorkerCard
                  key={w.id as string}
                  worker={w as Parameters<typeof WorkerCard>[0]['worker']}
                  responsive
                />
              ))}
            </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">
                <Users className="h-7 w-7" />
              </div>
              <h3 className="home-display font-bold text-slate-900 text-lg">No workers yet</h3>
              <p className="text-sm text-muted mt-2 max-w-sm mx-auto">
                {JOBS_FEATURE_ENABLED
                  ? `No ${name.toLowerCase()} workers are listed in this category yet. Post a job to attract professionals.`
                  : `No ${name.toLowerCase()} workers are listed in this category yet. Check back soon.`}
              </p>
              {JOBS_FEATURE_ENABLED && (
                <Link href={buildPostJobAuthUrl()} className="inline-block mt-6">
                  <Button className="worker-cta-amber gap-2 rounded-none">
                    <PlusCircle className="h-4 w-4" />
                    Post a Job
                  </Button>
                </Link>
              )}
            </div>
          )
        ) : jobs.length > 0 ? (
          <div className="space-y-3 max-w-4xl">
            {jobs.map((j) => (
              <JobCard
                key={j.id as string}
                variant="listing"
                job={j as Parameters<typeof JobCard>[0]['job']}
                href={jobHref(j.id as string)}
              />
            ))}
          </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">
              <Briefcase className="h-7 w-7" />
            </div>
            <h3 className="home-display font-bold text-slate-900 text-lg">No open jobs</h3>
            <p className="text-sm text-muted mt-2 max-w-sm mx-auto">
              There are no open {name.toLowerCase()} jobs right now. Be the first to post one.
            </p>
            <Link href={buildPostJobAuthUrl()} className="inline-block mt-6">
              <Button className="worker-cta-amber gap-2 rounded-none">
                <PlusCircle className="h-4 w-4" />
                Post a Job
              </Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}