"use client"

import { useSearchParams } from "next/navigation"

import { useEffect, useState, useMemo, Suspense } from "react"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { JobCard } from "@/components/job-card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { PageSkeleton } from "@/components/loading-skeletons"
import { mockJobs } from "@/lib/mock-data"
import { jobsApi, transformApiJobToFrontend } from "@/lib/api"
import { useDebounce } from "@/hooks/use-utils"
import { useTranslation } from "@/lib/i18n"
import { Search, MapPin, Briefcase, SlidersHorizontal, X, ArrowUpDown } from "lucide-react"
import { motion, AnimatePresence } from "framer-motion"
import type { Job } from "@/lib/types"

function JobsContent() {
  const { t } = useTranslation()
  const [jobs, setJobs] = useState<Job[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [searchTerm, setSearchTerm] = useState("")
  const [locationFilter, setLocationFilter] = useState("all")
  const [typeFilter, setTypeFilter] = useState("all")
  const [workModeFilter, setWorkModeFilter] = useState("all")
  const [sortBy, setSortBy] = useState("recent")
  const [showFilters, setShowFilters] = useState(false)

  const searchParams = useSearchParams()

  useEffect(() => {
    const tech = searchParams.get("tech")
    const q = searchParams.get("q")
    const type = searchParams.get("type")

    if (tech || q) {
      setSearchTerm(tech || q || "")
      setShowFilters(true) // Show filters if searching
    }

    if (type === "remoto") {
      setWorkModeFilter("remote")
      setShowFilters(true)
    }
  }, [searchParams])

  const [currentPage, setCurrentPage] = useState(1)
  const ITEMS_PER_PAGE = 10

  useEffect(() => {
    let isMounted = true

    const fetchJobs = async () => {
      setLoading(true)
      setError(null)

      try {
        // Fetch many jobs to allow client-side filtering and pagination
        const response = await jobsApi.list({ limit: 1000, page: 1 })
        const mappedJobs = response.data.map(transformApiJobToFrontend)

        if (isMounted) {
          setJobs(mappedJobs)
        }
      } catch (err) {
        console.error("Erro ao buscar vagas", err)
        if (isMounted) {
          setError(t('jobs.error'))
          setJobs(mockJobs)
        }
      } finally {
        if (isMounted) {
          setLoading(false)
        }
      }
    }

    fetchJobs()

    return () => {
      isMounted = false
    }
  }, [])

  // Debounce search term para otimizar performance
  const debouncedSearchTerm = useDebounce(searchTerm, 300)

  // Reset page when filters change
  useEffect(() => {
    setCurrentPage(1)
  }, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy])

  // Extrair valores únicos para os filtros
  const uniqueLocations = useMemo(() => {
    const locations = jobs.map(job => job.location)
    return Array.from(new Set(locations))
  }, [jobs])

  const uniqueTypes = useMemo(() => {
    const types = jobs.map(job => job.type)
    return Array.from(new Set(types))
  }, [jobs])

  const uniqueWorkModes = useMemo(() => {
    const modes = jobs.map(job => job.workMode).filter(Boolean) as string[]
    return Array.from(new Set(modes))
  }, [jobs])

  const filteredAndSortedJobs = useMemo(() => {
    let filtered = jobs.filter((job) => {
      const matchesSearch =
        job.title.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
        job.company.toLowerCase().includes(debouncedSearchTerm.toLowerCase()) ||
        job.description.toLowerCase().includes(debouncedSearchTerm.toLowerCase())
      const matchesLocation = locationFilter === "all" || job.location.includes(locationFilter)
      const matchesType = typeFilter === "all" || job.type === typeFilter
      const matchesWorkMode = workModeFilter === "all" || job.workMode === workModeFilter

      return matchesSearch && matchesLocation && matchesType && matchesWorkMode
    })

    // Ordenação
    switch (sortBy) {
      case "recent":
        filtered.sort((a, b) => new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime())
        break
      case "title":
        filtered.sort((a, b) => a.title.localeCompare(b.title))
        break
      case "company":
        filtered.sort((a, b) => a.company.localeCompare(b.company))
        break
      case "location":
        filtered.sort((a, b) => a.location.localeCompare(b.location))
        break
      default:
        break
    }

    return filtered
  }, [debouncedSearchTerm, locationFilter, typeFilter, workModeFilter, sortBy, jobs])

  // Pagination Logic
  const totalPages = Math.ceil(filteredAndSortedJobs.length / ITEMS_PER_PAGE)
  const paginatedJobs = filteredAndSortedJobs.slice(
    (currentPage - 1) * ITEMS_PER_PAGE,
    currentPage * ITEMS_PER_PAGE
  )

  const hasActiveFilters = searchTerm || locationFilter !== "all" || typeFilter !== "all" || workModeFilter !== "all"

  const clearFilters = () => {
    setSearchTerm("")
    setLocationFilter("all")
    setTypeFilter("all")
    setWorkModeFilter("all")
  }

  return (
    <>
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-primary/10 via-primary/5 to-transparent py-12 md:py-16">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-4xl md:text-5xl font-bold text-foreground mb-4 text-balance"
            >
              {t('jobs.title')}
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-lg text-muted-foreground text-pretty"
            >
              {loading ? t('jobs.loading') : t('jobs.subtitle', { count: jobs.length })}
            </motion.p>
          </div>
        </div>
      </section>

      {/* Search and Filters Section */}
      <section className="py-8 border-b bg-background/50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-5xl mx-auto space-y-4">
            {/* Main Search Bar */}
            <div className="flex flex-col lg:flex-row gap-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder={t('jobs.search')}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 h-12"
                />
              </div>

              <div className="flex gap-2">
                <Button
                  variant="outline"
                  onClick={() => setShowFilters(!showFilters)}
                  className="h-12 gap-2"
                >
                  <SlidersHorizontal className="h-4 w-4" />
                  {t('jobs.filters.toggle')}
                  {hasActiveFilters && (
                    <Badge variant="secondary" className="ml-1 px-1 py-0 text-xs">
                      !
                    </Badge>
                  )}
                </Button>
              </div>
            </div>

            {/* Advanced Filters */}
            <AnimatePresence>
              {showFilters && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  <Card>
                    <CardContent className="p-4">
                      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        <Select value={locationFilter} onValueChange={setLocationFilter}>
                          <SelectTrigger>
                            <MapPin className="h-4 w-4 mr-2" />
                            <SelectValue placeholder={t('jobs.filters.location')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
                            {uniqueLocations.map((location) => (
                              <SelectItem key={location} value={location}>
                                {location}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>

                        <Select value={typeFilter} onValueChange={setTypeFilter}>
                          <SelectTrigger>
                            <Briefcase className="h-4 w-4 mr-2" />
                            <SelectValue placeholder={t('jobs.filters.type')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
                            {uniqueTypes.map((type) => (
                              <SelectItem key={type} value={type}>
                                {type === "full-time" ? "Tempo integral" :
                                  type === "part-time" ? "Meio período" :
                                    type === "contract" ? "Contrato" : type}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>

                        <Select value={workModeFilter} onValueChange={setWorkModeFilter}>
                          <SelectTrigger>
                            <MapPin className="h-4 w-4 mr-2" />
                            <SelectValue placeholder={t('jobs.filters.workMode')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
                            {uniqueWorkModes.map((mode) => (
                              <SelectItem key={mode} value={mode}>
                                {mode === "remote" ? t('workMode.remote') :
                                  mode === "hybrid" ? t('workMode.hybrid') :
                                    mode === "onsite" ? t('workMode.onsite') : mode}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>

                        <Select value={sortBy} onValueChange={setSortBy}>
                          <SelectTrigger>
                            <ArrowUpDown className="h-4 w-4 mr-2" />
                            <SelectValue placeholder={t('jobs.filters.order')} />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="recent">{t('jobs.sort.recent')}</SelectItem>
                            <SelectItem value="title">{t('jobs.sort.title')}</SelectItem>
                            <SelectItem value="company">{t('jobs.sort.company')}</SelectItem>
                            <SelectItem value="location">{t('jobs.sort.location')}</SelectItem>
                          </SelectContent>
                        </Select>

                        {hasActiveFilters && (
                          <Button
                            variant="outline"
                            onClick={clearFilters}
                            className="gap-2"
                          >
                            <X className="h-4 w-4" />
                            {t('jobs.reset')}
                          </Button>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Results Summary */}
            <div className="flex items-center justify-between text-sm text-muted-foreground">
              <span>
                {t('jobs.pagination.showing', {
                  from: (currentPage - 1) * ITEMS_PER_PAGE + 1,
                  to: Math.min(currentPage * ITEMS_PER_PAGE, filteredAndSortedJobs.length),
                  total: filteredAndSortedJobs.length
                })}
              </span>
              {hasActiveFilters && (
                <div className="flex items-center gap-2">
                  <span>Filtros ativos:</span>
                  {searchTerm && (
                    <Badge variant="secondary" className="gap-1">
                      "{searchTerm}"
                      <button onClick={() => setSearchTerm("")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {locationFilter !== "all" && (
                    <Badge variant="secondary" className="gap-1">
                      {locationFilter}
                      <button onClick={() => setLocationFilter("all")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {typeFilter !== "all" && (
                    <Badge variant="secondary" className="gap-1">
                      {typeFilter}
                      <button onClick={() => setTypeFilter("all")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {workModeFilter !== "all" && (
                    <Badge variant="secondary" className="gap-1">
                      {workModeFilter === "remote" ? "Remoto" :
                        workModeFilter === "hybrid" ? "Híbrido" :
                          workModeFilter === "onsite" ? "Presencial" : workModeFilter}
                      <button onClick={() => setWorkModeFilter("all")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Jobs Grid */}
      <section className="py-12">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-5xl mx-auto">
            {error && (
              <div className="mb-6 p-4 bg-amber-50 text-amber-900 rounded-lg border border-amber-200">
                {error}
              </div>
            )}

            {loading ? (
              <div className="text-center text-muted-foreground">{t('jobs.loading')}</div>
            ) : paginatedJobs.length > 0 ? (
              <div className="space-y-8">
                <motion.div layout className="grid gap-6">
                  <AnimatePresence mode="popLayout">
                    {paginatedJobs.map((job, index) => (
                      <motion.div
                        key={job.id}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -20 }}
                        transition={{ delay: index * 0.05 }}
                        layout
                      >
                        <JobCard job={job} />
                      </motion.div>
                    ))}
                  </AnimatePresence>
                </motion.div>

                {/* Pagination Controls */}
                {totalPages > 1 && (
                  <div className="flex justify-center items-center gap-2 mt-8">
                    <Button
                      variant="outline"
                      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                      disabled={currentPage === 1}
                    >
                      {t('jobs.pagination.previous')}
                    </Button>
                    <div className="text-sm text-muted-foreground px-4">
                      {currentPage} / {totalPages}
                    </div>
                    <Button
                      variant="outline"
                      onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                      disabled={currentPage === totalPages}
                    >
                      {t('jobs.pagination.next')}
                    </Button>
                  </div>
                )}
              </div>
            ) : (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="text-center py-12"
              >
                <div className="max-w-md mx-auto">
                  <Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                  <h3 className="text-lg font-semibold mb-2">{t('jobs.noResults.title')}</h3>
                  <p className="text-muted-foreground mb-4">
                    {t('jobs.noResults.desc')}
                  </p>
                  <Button
                    variant="outline"
                    onClick={clearFilters}
                    className="gap-2"
                  >
                    <X className="h-4 w-4" />
                    {t('jobs.resetFilters')}
                  </Button>
                </div>
              </motion.div>
            )}
          </div>
        </div>
      </section>
    </>
  )
}

export default function VagasPage() {
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1">
        <Suspense fallback={<PageSkeleton />}>
          <JobsContent />
        </Suspense>
      </main>
      <Footer />
    </div>
  )
}