"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 { 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 searchParams = useSearchParams()

  // State
  const [jobs, setJobs] = useState<Job[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Filters state
  const [searchTerm, setSearchTerm] = useState("")
  const [locationFilter, setLocationFilter] = useState("")
  const [typeFilter, setTypeFilter] = useState("all")
  const [workModeFilter, setWorkModeFilter] = useState("all")
  const [sortBy, setSortBy] = useState("recent")
  const [showFilters, setShowFilters] = useState(false)

  // Advanced filters
  const [salaryMin, setSalaryMin] = useState("")
  const [salaryMax, setSalaryMax] = useState("")
  const [currencyFilter, setCurrencyFilter] = useState("all")
  const [visaSupport, setVisaSupport] = useState(false)

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1)
  const [totalJobs, setTotalJobs] = useState(0)
  const ITEMS_PER_PAGE = 10

  // Optimize search inputs
  const debouncedSearchTerm = useDebounce(searchTerm, 500)
  const debouncedLocation = useDebounce(locationFilter, 500)

  // Initial params
  useEffect(() => {
    const tech = searchParams.get("tech")
    const q = searchParams.get("q")
    const s = searchParams.get("s")
    const type = searchParams.get("type")
    const location = searchParams.get("location")
    const l = searchParams.get("l")
    const mode = searchParams.get("mode")
    const workMode = searchParams.get("workMode")

    if (tech || q || s) {
      setSearchTerm(tech || q || s || "")
      setShowFilters(true)
    }

    if (location || l) {
      setLocationFilter(location || l || "")
      setShowFilters(true)
    }

    if (type === "remote") {
      setWorkModeFilter("remote")
      setShowFilters(true)
    } else if (mode || workMode) {
      setWorkModeFilter(mode || workMode || "all")
      setShowFilters(true)
    }
  }, [searchParams])

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

  // Main Fetch Logic
  useEffect(() => {
    let isMounted = true

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

      try {
        const response = await jobsApi.list({
          page: currentPage,
          limit: ITEMS_PER_PAGE,
          q: debouncedSearchTerm || undefined,
          location: debouncedLocation || undefined,
          type: typeFilter === "all" ? undefined : typeFilter,
          workMode: workModeFilter === "all" ? undefined : workModeFilter,
          salaryMin: salaryMin ? parseFloat(salaryMin) : undefined,
          salaryMax: salaryMax ? parseFloat(salaryMax) : undefined,
          currency: currencyFilter === "all" ? undefined : currencyFilter,
          visaSupport: visaSupport || undefined,
          sortBy: sortBy || undefined,
        })

        // Transform the raw API response to frontend format
        const mappedJobs = (response.data || []).map(job => transformApiJobToFrontend(job));

        if (isMounted) {
          setJobs(mappedJobs)
          setTotalJobs(response.pagination?.total || 0)
        }
      } catch (err) {
        console.error("Error fetching jobs", err)
        if (isMounted) {
          setError(t('jobs.error'))
          setJobs([])
          setTotalJobs(0)
        }
      } finally {
        if (isMounted) {
          setLoading(false)
        }
      }
    }

    fetchJobs()

    return () => {
      isMounted = false
    }
  }, [
    currentPage,
    debouncedSearchTerm,
    debouncedLocation,
    typeFilter,
    workModeFilter,
    salaryMin,
    salaryMax,
    currencyFilter,
    visaSupport,
    sortBy,
    t,
  ])

  // Computed
  const totalPages = Math.ceil(totalJobs / ITEMS_PER_PAGE)
  const hasActiveFilters = searchTerm || locationFilter || typeFilter !== "all" || workModeFilter !== "all"

  const clearFilters = () => {
    setSearchTerm("")
    setLocationFilter("")
    setTypeFilter("all")
    setWorkModeFilter("all")
    setSalaryMin("")
    setSalaryMax("")
    setCurrencyFilter("all")
    setVisaSupport(false)
    setSortBy("recent")
  }

  const getTypeLabel = (type: string) => {
    const label = t(`jobs.types.${type}`)
    return label !== `jobs.types.${type}` ? label : type
  }

  // Hardcoded options since we don't have all data client-side
  const workModeOptions = ["remote", "hybrid", "onsite"]
  const typeOptions = ["full-time", "part-time", "contract", "dispatch"]

  return (
    <>
      {/* Hero Section */}
      <section className="relative bg-[#F0932B] py-28 md:py-40 overflow-hidden">
        {/* Imagem de fundo Vagas.jpg sem opacidade */}
        <div className="absolute inset-0 z-0">
          <img
            src="/Vagas.jpg"
            alt="Vagas"
            className="object-cover w-full h-full"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectPosition: 'center 10%' }}
            draggable={false}
          />
        </div>
        {/* Overlay preto com opacidade 20% */}
        <div className="absolute inset-0 z-10 bg-black opacity-20"></div>
        <div className="absolute inset-0 opacity-10 z-20">
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
        </div>

        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-20">
          <div className="max-w-3xl mx-auto text-center text-white">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-4xl md:text-5xl font-bold mb-4 text-balance drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]"
            >
              {t('jobs.title')}
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-lg opacity-95 text-pretty drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]"
            >
              {loading ? t('jobs.loading') : t('jobs.subtitle', { count: totalJobs })}
            </motion.p>
          </div>
        </div>
      </section>

      {/* Search and Filters Section */}
      <section className="py-8 border-b bg-white">
        <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-1 relative max-w-xs">
                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder={t('jobs.filters.location')}
                  value={locationFilter}
                  onChange={(e) => setLocationFilter(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 hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
                >
                  <SlidersHorizontal className="h-4 w-4" />
                  {t('jobs.filters.toggle')}
                  {hasActiveFilters && (
                    <Badge variant="secondary" className="ml-1 px-1 py-0 text-xs bg-[#F0932B] text-white">
                      !
                    </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 gap-4">
                        <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>
                            {typeOptions.map((type) => (
                              <SelectItem key={type} value={type}>
                                {getTypeLabel(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>
                            {workModeOptions.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') || 'Mais recentes'}</SelectItem>
                            <SelectItem value="salary_desc">{t('jobs.sort.salaryDesc') || 'Maior salário'}</SelectItem>
                            <SelectItem value="salary_asc">{t('jobs.sort.salaryAsc') || 'Menor salário'}</SelectItem>
                            <SelectItem value="relevance">{t('jobs.sort.relevance') || 'Relevância'}</SelectItem>
                          </SelectContent>
                        </Select>

                        <Select value={currencyFilter} onValueChange={setCurrencyFilter}>
                          <SelectTrigger>
                            <SelectValue placeholder="Moeda" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">Todas moedas</SelectItem>
                            <SelectItem value="BRL">R$ (BRL)</SelectItem>
                            <SelectItem value="USD">$ (USD)</SelectItem>
                            <SelectItem value="EUR">€ (EUR)</SelectItem>
                            <SelectItem value="JPY">¥ (JPY)</SelectItem>
                          </SelectContent>
                        </Select>

                        {hasActiveFilters && (
                          <Button
                            variant="outline"
                            onClick={clearFilters}
                            className="gap-2 hover:bg-red-50 hover:text-red-600 hover:border-red-300"
                          >
                            <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: Math.min((currentPage - 1) * ITEMS_PER_PAGE + 1, totalJobs),
                  to: Math.min(currentPage * ITEMS_PER_PAGE, totalJobs),
                  total: totalJobs
                })}
              </span>
              {hasActiveFilters && (
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="hidden sm:inline">Active filters:</span>
                  {searchTerm && (
                    <Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
                      "{searchTerm}"
                      <button onClick={() => setSearchTerm("")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {locationFilter && (
                    <Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
                      {locationFilter}
                      <button onClick={() => setLocationFilter("")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {typeFilter !== "all" && (
                    <Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
                      {typeFilter}
                      <button onClick={() => setTypeFilter("all")} className="ml-1">
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  )}
                  {workModeFilter !== "all" && (
                    <Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
                      {workModeFilter === "remote" ? t("workMode.remote") :
                        workModeFilter === "hybrid" ? t("workMode.hybrid") :
                          workModeFilter === "onsite" ? t("workMode.onsite") : 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 bg-white">
        <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 ? (
              <PageSkeleton />
            ) : jobs.length > 0 ? (
              <div className="space-y-8">
                <motion.div layout className="grid gap-6">
                  <AnimatePresence mode="popLayout">
                    {jobs.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}
                      className="hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
                    >
                      {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}
                      className="hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
                    >
                      {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 hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
                  >
                    <X className="h-4 w-4" />
                    {t('jobs.resetFilters')}
                  </Button>
                </div>
              </motion.div>
            )}
          </div>
        </div>
      </section>
    </>
  )
}

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