'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { ArrowRight, Shield, Star, Briefcase, Users, MapPin, Wrench, Heart, Server, Smartphone } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { CategoryBrowseSection } from '@/components/categories/CategoryBrowseSection';
import { WorkerCard } from '@/components/workers/WorkerCard';
import { JobCard } from '@/components/jobs/JobCard';
import { HomeSearchBox } from '@/components/home/HomeSearchBox';
import { api } from '@/lib/api';
import {
  appendAreaQuery,
  homePath,
  regionLabel,
  regionPath,
  isDefaultPhilippinesBrowse,
  SERVICE_AREA_LABELS,
  resolveBrowseRegionSlug,
} from '@/lib/region';
import { BrandLogo } from '@/components/brand/BrandLogo';
import { buildPostJobAuthUrl } from '@/lib/createJob';
import { useRegion } from '@/contexts/RegionContext';
import { useLanguage } from '@/contexts/LanguageContext';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';

interface HomePageContentProps {
  regionSlug?: string;
}

export function HomePageContent({ regionSlug: regionSlugFromPath }: HomePageContentProps) {
  const [categories, setCategories] = useState<Record<string, unknown>[]>([]);
  const [workers, setWorkers] = useState<Record<string, unknown>[]>([]);
  const [jobs, setJobs] = useState<Record<string, unknown>[]>([]);
  const [workersLoading, setWorkersLoading] = useState(true);
  const { slug: contextSlug, regionReady } = useRegion();
  const { t } = useLanguage();

  const slug = resolveBrowseRegionSlug(regionSlugFromPath, contextSlug);
  const label = slug ? regionLabel(slug) : SERVICE_AREA_LABELS.ENTIRE_PHILIPPINES;
  const isRegionalBrowse = !isDefaultPhilippinesBrowse(slug);

  const links = useMemo(() => {
    const base = slug ? regionPath(slug) : '';
    return {
      home: slug ? homePath(slug) : '/',
      workers: slug ? `${base}/workers` : '/workers',
      jobs: slug ? `${base}/jobs` : '/jobs',
      map: slug ? `${base}/map` : '/map',
      postJob: buildPostJobAuthUrl(),
      becomeWorker: '/become-worker',
      categories: '/categories',
    };
  }, [slug]);

  useEffect(() => {
    if (!regionReady) return;

    setWorkersLoading(true);
    setWorkers([]);

    const workerParams = new URLSearchParams({ sort: 'recommended', limit: '8' });
    const categoryParams = new URLSearchParams({ limit: '50' });
    appendAreaQuery(workerParams, slug);
    appendAreaQuery(categoryParams, slug);

    let cancelled = false;

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

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

    Promise.all(requests)
      .then((results) => {
        if (cancelled) return;
        const [categoriesRes, workersRes, jobsRes] = results as [
          { data: Record<string, unknown>[] },
          { data: Record<string, unknown>[] },
          { data: Record<string, unknown>[] } | undefined,
        ];
        setCategories(categoriesRes.data);
        setWorkers(workersRes.data);
        setJobs(JOBS_FEATURE_ENABLED && jobsRes ? jobsRes.data : []);
      })
      .catch(console.error)
      .finally(() => {
        if (!cancelled) setWorkersLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [slug, regionReady]);

  const headline = isRegionalBrowse
    ? t(`Skilled workers in ${label}`, `Bihasang workers sa ${label}`)
    : t('Hire skilled workers near you', 'Umupa ng bihasang workers malapit sa iyo');

  const support = isRegionalBrowse
    ? t(
        `Verified carpenters, plumbers, electricians, and more available in ${label}.`,
        `Verified na karpintero, tubero, elektrisyan, at iba pa sa ${label}.`
      )
    : t(
        'Find verified tradespeople across the Philippines — message them directly.',
        'Maghanap ng verified na manggagawa sa buong Pilipinas — i-message sila direkta.'
      );

  return (
    <div className="home-page">
      <section className="home-hero">
        <div className="home-hero-inner mx-auto max-w-5xl px-4 py-14 md:py-20 lg:py-24">
          <BrandLogo variant="stacked" className="home-rise home-display" />
          <h1 className="home-rise home-rise-delay-1 home-display mt-4 max-w-3xl text-3xl sm:text-4xl md:text-5xl lg:text-[3.25rem] font-bold leading-[1.08] text-white">
            {headline}
          </h1>
          <p className="home-rise home-rise-delay-2 mt-4 max-w-xl text-base md:text-lg text-slate-300 leading-relaxed">
            {support}
          </p>

          <HomeSearchBox
            className="home-rise home-rise-delay-3 relative z-30 mt-8"
            categories={categories as Parameters<typeof HomeSearchBox>[0]['categories']}
            workersHref={links.workers}
          />

          <div className="home-rise home-rise-delay-3 relative z-0 mt-5 flex flex-wrap items-center gap-3">
            <Link href={links.workers}>
              <Button size="sm" className="bg-white text-slate-900 hover:bg-slate-100 shadow-none">
                <Users className="h-4 w-4" />
                {t('Browse directory', 'Tingnan ang directory')}
              </Button>
            </Link>
            <Link href={links.map}>
              <Button variant="heroOutline" size="sm" className="gap-1.5 border-white/25">
                <MapPin className="h-4 w-4" />
                {t('View map', 'Tingnan ang mapa')}
              </Button>
            </Link>
            {JOBS_FEATURE_ENABLED ? (
              <Link href={links.postJob}>
                <Button variant="heroGhost" size="sm">
                  <Briefcase className="h-4 w-4" />
                  {t('Post a job', 'Mag-post ng trabaho')}
                </Button>
              </Link>
            ) : (
              <Link
                href={links.becomeWorker}
                className="inline-flex items-center gap-1.5 text-sm font-semibold text-amber-300/90 hover:text-amber-200 transition-colors"
              >
                {t('Are you a worker?', 'Ikaw ba ay worker?')}
                <ArrowRight className="h-4 w-4" />
              </Link>
            )}
          </div>
        </div>
      </section>

      <CategoryBrowseSection
        categories={categories as Parameters<typeof CategoryBrowseSection>[0]['categories']}
        viewAllHref={links.categories}
        regionLabel={isRegionalBrowse ? label : undefined}
        variant="home"
      />

      {JOBS_FEATURE_ENABLED && jobs.length > 0 && (
        <section className="px-4 py-12 md:py-14 bg-surface border-b border-border">
          <div className="mx-auto max-w-6xl">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between mb-8">
              <div>
                <span className="home-section-label">{t('Open work', 'Bukas na trabaho')}</span>
                <h2 className="home-section-title">
                  {isRegionalBrowse
                    ? t(`Jobs in ${label}`, `Trabaho sa ${label}`)
                    : t('Open jobs nearby', 'Bukas na trabaho malapit sa iyo')}
                </h2>
                <p className="mt-2 text-sm text-muted max-w-lg">
                  {t('Latest opportunities from people who need help.', 'Pinakabagong oportunidad mula sa nangangailangan ng tulong.')}
                </p>
              </div>
              <Link href={links.jobs} className="section-link shrink-0">
                {t('See all jobs', 'Tingnan lahat ng jobs')}
              </Link>
            </div>
            <div className="space-y-3">
              {jobs.map((job) => (
                <JobCard
                  key={job.id as string}
                  variant="listing"
                  job={job as Parameters<typeof JobCard>[0]['job']}
                  href={`/jobs/${job.id as string}`}
                />
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="home-workers px-4 py-12 md:py-16 border-b border-border">
        <div className="mx-auto max-w-6xl">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between mb-8">
            <div>
              <span className="home-section-label">{t('In the directory', 'Sa directory')}</span>
              <h2 className="home-section-title">
                {isRegionalBrowse
                  ? t(`Featured workers in ${label}`, `Featured workers sa ${label}`)
                  : t('Featured workers', 'Featured workers')}
              </h2>
              <p className="mt-2 text-sm text-muted max-w-lg">
                {t(
                  'Recommended for strong reviews, experience, and complete profiles.',
                  'Rekomendado dahil sa reviews, experience, at kumpletong profile.'
                )}
              </p>
            </div>
            <Link href={`${links.workers}?sort=recommended`} className="section-link shrink-0 inline-flex items-center gap-1">
              {t('See all workers', 'Tingnan lahat ng workers')}
              <ArrowRight className="h-3.5 w-3.5" />
            </Link>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
            {workersLoading ? (
              Array.from({ length: 8 }).map((_, i) => (
                <div
                  key={i}
                  className="h-52 rounded-none border border-border bg-slate-100 animate-pulse"
                />
              ))
            ) : workers.length > 0 ? (
              workers.map((worker) => (
                <WorkerCard
                  key={worker.id as string}
                  worker={worker as Parameters<typeof WorkerCard>[0]['worker']}
                  responsive
                />
              ))
            ) : (
              <p className="col-span-full text-sm text-muted py-10 text-center border border-dashed border-border">
                {isRegionalBrowse
                  ? t(
                      `No workers listed in ${label} yet. Try a wider region or check back soon.`,
                      `Wala pang workers sa ${label}. Subukan ang mas malawak na lugar o bumalik mamaya.`
                    )
                  : t('No workers available yet.', 'Wala pang available na workers.')}
              </p>
            )}
          </div>
        </div>
      </section>

      <section className="home-trust px-4 py-12 md:py-16">
        <div className="mx-auto max-w-6xl">
          <div className="max-w-2xl mb-10">
            <span className="home-section-label">{t('How it works', 'Paano ito gumagana')}</span>
            <h2 className="home-display text-2xl md:text-3xl font-bold text-white">
              {t('From search to hire, in three steps', 'Mula paghahanap hanggang pag-hire, sa tatlong hakbang')}
            </h2>
          </div>
          <div className="grid gap-8 md:grid-cols-3 md:gap-10">
            <div className="home-trust-step" data-step="01">
              <h3 className="home-display text-lg font-bold text-white">
                {t('Pick a trade', 'Pumili ng trabaho')}
              </h3>
              <p className="mt-2 text-sm text-slate-400 leading-relaxed">
                {t(
                  'Browse carpenters, plumbers, electricians, and other skilled workers near you.',
                  'Tingnan ang karpintero, tubero, elektrisyan, at iba pang bihasang workers malapit sa iyo.'
                )}
              </p>
            </div>
            <div className="home-trust-step" data-step="02">
              <h3 className="home-display text-lg font-bold text-white">
                {t('Check the profile', 'Suriin ang profile')}
              </h3>
              <p className="mt-2 text-sm text-slate-400 leading-relaxed">
                {t(
                  'See ratings, skills, service areas, and verification before you reach out.',
                  'Tingnan ang ratings, skills, service areas, at verification bago kang makipag-ugnayan.'
                )}
              </p>
            </div>
            <div className="home-trust-step" data-step="03">
              <h3 className="home-display text-lg font-bold text-white">
                {t('Message directly', 'Mag-message direkta')}
              </h3>
              <p className="mt-2 text-sm text-slate-400 leading-relaxed">
                {t(
                  'Contact the worker, discuss the job, and arrange the work on your terms.',
                  'Makipag-ugnayan sa worker, pag-usapan ang trabaho, at ayusin ang detalye ayon sa usapan ninyo.'
                )}
              </p>
            </div>
          </div>

          <div className="mt-12 flex flex-wrap gap-x-8 gap-y-3 border-t border-white/10 pt-8 text-sm text-slate-300">
            <span className="inline-flex items-center gap-2">
              <Shield className="h-4 w-4 text-amber-400" />
              {t('ID-checked verification', 'May ID check na verification')}
            </span>
            <span className="inline-flex items-center gap-2">
              <Star className="h-4 w-4 text-amber-400" />
              {t('Real ratings & reviews', 'Tunay na ratings at reviews')}
            </span>
            <span className="inline-flex items-center gap-2">
              <Wrench className="h-4 w-4 text-amber-400" />
              {t('Built for blue-collar work', 'Para sa blue-collar na trabaho')}
            </span>
          </div>
        </div>
      </section>

      <section className="home-sponsor px-4 py-12 md:py-16 border-b border-border">
        <div className="mx-auto max-w-6xl">
          <div className="max-w-2xl">
            <span className="home-section-label">{t('Support the platform', 'Suportahan ang platform')}</span>
            <h2 className="home-section-title">
              {t('Sponsor eHandyHire', 'I-sponsor ang eHandyHire')}
            </h2>
            <p className="mt-2 text-sm text-muted max-w-lg leading-relaxed">
              {t(
                'Voluntary support keeps listings, profiles, and messaging available — without middleman fees on hires.',
                'Ang boluntaryong support ang nagpapanatiling available ng listings, profiles, at messaging — walang middleman fees sa pag-hire.'
              )}
            </p>
          </div>

          <div className="mt-8 grid gap-6 sm:grid-cols-3">
            <div className="home-sponsor-point">
              <Server className="h-5 w-5 text-[var(--home-amber)]" />
              <div>
                <p className="home-display text-base font-bold text-slate-900">
                  {t('Hosting & uptime', 'Hosting at uptime')}
                </p>
                <p className="mt-1 text-sm text-muted leading-relaxed">
                  {t(
                    'Servers, storage for portfolio photos, and reliable access for workers and customers.',
                    'Servers, storage para sa portfolio photos, at maaasahang access para sa workers at customers.'
                  )}
                </p>
              </div>
            </div>
            <div className="home-sponsor-point">
              <Smartphone className="h-5 w-5 text-[var(--home-amber)]" />
              <div>
                <p className="home-display text-base font-bold text-slate-900">
                  {t('Product & messaging', 'Product at messaging')}
                </p>
                <p className="mt-1 text-sm text-muted leading-relaxed">
                  {t(
                    'Keep building directory tools, chat, verification, and map discovery.',
                    'Patuloy na pagbuo ng directory tools, chat, verification, at map discovery.'
                  )}
                </p>
              </div>
            </div>
            <div className="home-sponsor-point">
              <Heart className="h-5 w-5 text-[var(--home-amber)]" />
              <div>
                <p className="home-display text-base font-bold text-slate-900">
                  {t('Community first', 'Community muna')}
                </p>
                <p className="mt-1 text-sm text-muted leading-relaxed">
                  {t(
                    'Sponsorship funds the platform — not wages. Workers stay independent.',
                    'Ang sponsorship ay para sa platform — hindi sahod. Independent pa rin ang workers.'
                  )}
                </p>
              </div>
            </div>
          </div>

          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Link href="/sponsor">
              <Button
                size="lg"
                className="gap-2 rounded-none bg-[var(--home-ink)] text-white hover:bg-[var(--home-ink)]/90 shadow-none"
              >
                <Heart className="h-4 w-4" />
                {t('Become a sponsor', 'Maging sponsor')}
              </Button>
            </Link>
            <Link href="/sponsor" className="section-link inline-flex items-center gap-1">
              {t('See how to donate', 'Tingnan kung paano mag-donate')}
              <ArrowRight className="h-3.5 w-3.5" />
            </Link>
          </div>
        </div>
      </section>

      <section className="home-cta px-4 py-14 md:py-16">
        <div className="relative z-[1] mx-auto max-w-6xl grid gap-10 lg:grid-cols-2 lg:items-center">
          <div>
            <span className="home-section-label">{t('Get started', 'Magsimula')}</span>
            <h2 className="home-display text-2xl md:text-3xl font-bold text-white leading-tight">
              {JOBS_FEATURE_ENABLED
                ? isRegionalBrowse
                  ? t(`Need help in ${label}?`, `Kailangan mo ba ng tulong sa ${label}?`)
                  : t('Need help getting work done?', 'Kailangan mo ba ng tulong sa trabaho?')
                : isRegionalBrowse
                  ? t(`Looking for help in ${label}?`, `Naghahanap ng tulong sa ${label}?`)
                  : t('Looking for the right worker?', 'Naghahanap ng tamang worker?')}
            </h2>
            <p className="mt-3 text-slate-300 text-sm md:text-base max-w-md leading-relaxed">
              {JOBS_FEATURE_ENABLED
                ? t(
                    'Post your job for free or browse the directory and message verified workers nearby.',
                    'Mag-post ng trabaho nang libre o tingnan ang directory at i-message ang verified workers malapit sa iyo.'
                  )
                : t(
                    'Open the directory, compare profiles, and message the professional who fits your job.',
                    'Buksan ang directory, ikumpara ang profiles, at i-message ang propesyonal na bagay sa trabaho mo.'
                  )}
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              {JOBS_FEATURE_ENABLED ? (
                <Link href={links.postJob}>
                  <Button size="lg" className="bg-[var(--home-amber)] hover:bg-[var(--home-amber-soft)] text-white shadow-none">
                    {t('Post a job', 'Mag-post ng trabaho')}
                  </Button>
                </Link>
              ) : (
                <Link href={links.workers}>
                  <Button size="lg" className="bg-[var(--home-amber)] hover:bg-[var(--home-amber-soft)] text-white shadow-none">
                    {t('Browse workers', 'Tingnan ang workers')}
                  </Button>
                </Link>
              )}
              <Link href={links.map}>
                <Button variant="heroOutline" size="lg" className="border-white/25">
                  {t('Explore the map', 'Tingnan ang mapa')}
                </Button>
              </Link>
            </div>
          </div>

          <div className="border border-white/15 bg-white/5 px-6 py-7 md:px-8 md:py-8">
            <p className="home-display text-xl font-bold text-white">
              {t('Offer your trade', 'Ialok ang iyong trabaho')}
            </p>
            <p className="mt-2 text-sm text-slate-300 leading-relaxed">
              {t(
                'Join the directory, list your skills and areas, and get discovered by customers who need your work.',
                'Sumali sa directory, ilista ang skills at lugar mo, at matagpuan ng mga customer na nangangailangan ng serbisyo mo.'
              )}
            </p>
            <Link href={links.becomeWorker} className="mt-5 inline-flex">
              <Button variant="heroOutline" size="lg" className="border-amber-400/50 text-amber-200 hover:bg-amber-400/10 hover:text-amber-100 hover:border-amber-300">
                {t('Become a worker', 'Maging worker')}
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}