"use client"

import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { Loader2, PlusCircle } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { adminCompaniesApi, jobsApi, type AdminCompany, type CreateJobPayload } from "@/lib/api"

type ApplicationChannel = "email" | "url" | "phone"

type LocationResult = {
  id: number
  name: string
  type: "city" | "state"
  country_id: number
  state_id?: number
  region_name?: string
}

type ApiCountry = {
  id: number
  name: string
  iso2: string
}

export default function DashboardNewJobPage() {
  const [loading, setLoading] = useState(false)
  const [loadingCompanies, setLoadingCompanies] = useState(true)
  const [companies, setCompanies] = useState<AdminCompany[]>([])

  const [formData, setFormData] = useState({
    companyId: "",
    title: "",
    description: "",
    location: "",
    country: "",
    employmentType: "",
    workMode: "",
    workingHours: "",
    salaryMin: "",
    salaryMax: "",
    salaryType: "monthly",
    currency: "BRL",
    salaryNegotiable: false,
    languageLevel: "",
    applicationChannel: "email" as ApplicationChannel,
    applicationEmail: "",
    applicationUrl: "",
    applicationPhone: "",
    resumeRequirement: "optional",
    visaSupport: false,
    status: "draft",
  })

  // Location autocomplete state
  const [apiCountries, setApiCountries] = useState<ApiCountry[]>([])
  const [locationIds, setLocationIds] = useState<{ cityId: number | null; regionId: number | null }>({ cityId: null, regionId: null })
  const [locationResults, setLocationResults] = useState<LocationResult[]>([])
  const [locationSearching, setLocationSearching] = useState(false)
  const [showLocationDropdown, setShowLocationDropdown] = useState(false)
  const locationRef = useRef<HTMLDivElement>(null)

  // Load companies
  useEffect(() => {
    adminCompaniesApi.list(undefined, 1, 100)
      .then((data) => setCompanies(data.data ?? []))
      .catch(() => toast.error("Falha ao carregar empresas"))
      .finally(() => setLoadingCompanies(false))
  }, [])

  // Load countries for location autocomplete
  useEffect(() => {
    const apiBase = process.env.NEXT_PUBLIC_API_URL || ""
    fetch(`${apiBase}/api/v1/locations/countries`)
      .then((r) => r.json())
      .then((data: ApiCountry[]) => setApiCountries(data))
      .catch(() => {})
  }, [])

  const selectedCountryId = useMemo(
    () => apiCountries.find((c) => c.iso2 === formData.country)?.id ?? null,
    [apiCountries, formData.country]
  )

  const searchLocation = useCallback((query: string, countryId: number) => {
    const apiBase = process.env.NEXT_PUBLIC_API_URL || ""
    setLocationSearching(true)
    fetch(`${apiBase}/api/v1/locations/search?q=${encodeURIComponent(query)}&country_id=${countryId}`)
      .then((r) => r.json())
      .then((data) => {
        setLocationResults(Array.isArray(data) ? data : [])
        setShowLocationDropdown(true)
      })
      .catch(() => setLocationResults([]))
      .finally(() => setLocationSearching(false))
  }, [])

  useEffect(() => {
    const query = formData.location.trim()
    if (query.length < 2 || !selectedCountryId) {
      setLocationResults([])
      setShowLocationDropdown(false)
      return
    }
    const timer = setTimeout(() => searchLocation(query, selectedCountryId), 350)
    return () => clearTimeout(timer)
  }, [formData.location, selectedCountryId, searchLocation])

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (locationRef.current && !locationRef.current.contains(e.target as Node)) {
        setShowLocationDropdown(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [])

  const set = (field: string, value: string | boolean) =>
    setFormData((prev) => ({ ...prev, [field]: value }))

  const canSubmit =
    formData.title.trim().length >= 5 &&
    formData.description.trim().length >= 20 &&
    formData.companyId !== ""

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!canSubmit) {
      toast.error("Preencha os campos obrigatórios")
      return
    }

    setLoading(true)
    try {
      const payload: CreateJobPayload = {
        companyId: formData.companyId,
        title: formData.title,
        description: formData.description,
        location: formData.location || undefined,
        ...(locationIds.cityId && { cityId: locationIds.cityId }),
        ...(locationIds.regionId && { regionId: locationIds.regionId }),
        employmentType: (formData.employmentType as CreateJobPayload["employmentType"]) || undefined,
        workMode: (formData.workMode as CreateJobPayload["workMode"]) || undefined,
        workingHours: formData.workingHours || undefined,
        salaryMin: formData.salaryMin ? parseFloat(formData.salaryMin) : undefined,
        salaryMax: formData.salaryMax ? parseFloat(formData.salaryMax) : undefined,
        salaryType: (formData.salaryType as CreateJobPayload["salaryType"]) || undefined,
        currency: (formData.currency as CreateJobPayload["currency"]) || undefined,
        salaryNegotiable: formData.salaryNegotiable,
        languageLevel: formData.languageLevel || undefined,
        visaSupport: formData.visaSupport,
        requirements: {
          resumeRequirement: formData.resumeRequirement,
          applicationChannel: formData.applicationChannel,
          applicationEmail: formData.applicationChannel === "email" ? formData.applicationEmail : null,
          applicationUrl: formData.applicationChannel === "url" ? formData.applicationUrl : null,
          applicationPhone: formData.applicationChannel === "phone" ? formData.applicationPhone : null,
        },
        status: formData.status as CreateJobPayload["status"],
      }

      await jobsApi.create(payload)
      toast.success("Vaga cadastrada com sucesso!")
      setFormData({
        companyId: "",
        title: "",
        description: "",
        location: "",
        country: "",
        employmentType: "",
        workMode: "",
        workingHours: "",
        salaryMin: "",
        salaryMax: "",
        salaryType: "monthly",
        currency: "BRL",
        salaryNegotiable: false,
        languageLevel: "",
        applicationChannel: "email",
        applicationEmail: "",
        applicationUrl: "",
        applicationPhone: "",
        resumeRequirement: "optional",
        visaSupport: false,
        status: "draft",
      })
      setLocationIds({ cityId: null, regionId: null })
    } catch (error: any) {
      toast.error(error.message || "Falha ao cadastrar vaga")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Nova vaga</h1>
        <p className="text-muted-foreground mt-1">Preencha os dados da vaga. Os campos marcados com * são obrigatórios.</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Empresa e Status */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <PlusCircle className="h-5 w-5" /> Empresa e status
            </CardTitle>
          </CardHeader>
          <CardContent className="grid md:grid-cols-2 gap-4">
            <div>
              <Label>Empresa *</Label>
              {loadingCompanies ? (
                <div className="h-10 px-3 flex items-center text-sm text-muted-foreground border rounded-md">
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" /> Carregando...
                </div>
              ) : (
                <Select value={formData.companyId} onValueChange={(v) => set("companyId", v)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione uma empresa" />
                  </SelectTrigger>
                  <SelectContent>
                    {companies.length === 0 ? (
                      <SelectItem value="__none" disabled>Nenhuma empresa disponível</SelectItem>
                    ) : (
                      companies.map((c) => (
                        <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
                      ))
                    )}
                  </SelectContent>
                </Select>
              )}
            </div>

            <div>
              <Label>Status</Label>
              <Select value={formData.status} onValueChange={(v) => set("status", v)}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="draft">Rascunho</SelectItem>
                  <SelectItem value="review">Em revisão</SelectItem>
                  <SelectItem value="open">Aberta</SelectItem>
                  <SelectItem value="paused">Pausada</SelectItem>
                  <SelectItem value="closed">Encerrada</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* Dados da vaga */}
        <Card>
          <CardHeader>
            <CardTitle>Dados da vaga</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="title">Título da vaga *</Label>
              <Input
                id="title"
                maxLength={255}
                placeholder="Ex: Desenvolvedor(a) Full Stack Sênior"
                value={formData.title}
                onChange={(e) => set("title", e.target.value)}
              />
              <p className="text-xs text-muted-foreground mt-1">{formData.title.length}/255 caracteres</p>
            </div>

            <div>
              <Label htmlFor="description">Descrição da vaga *</Label>
              <Textarea
                id="description"
                rows={6}
                placeholder="Descreva responsabilidades, requisitos e diferenciais..."
                value={formData.description}
                onChange={(e) => set("description", e.target.value)}
              />
            </div>

            <div>
              <Label>Idioma da descrição</Label>
              <Select value={formData.languageLevel} onValueChange={(v) => set("languageLevel", v)}>
                <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="pt">Português</SelectItem>
                  <SelectItem value="en">English</SelectItem>
                  <SelectItem value="es">Español</SelectItem>
                  <SelectItem value="ja">日本語</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* Localização */}
        <Card>
          <CardHeader>
            <CardTitle>Localização</CardTitle>
          </CardHeader>
          <CardContent className="grid md:grid-cols-2 gap-4">
            <div>
              <Label>País</Label>
              <Select value={formData.country} onValueChange={(v) => {
                set("country", v)
                set("location", "")
                setLocationIds({ cityId: null, regionId: null })
              }}>
                <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                <SelectContent>
                  {apiCountries.length > 0
                    ? apiCountries.map((c) => (
                        <SelectItem key={c.id} value={c.iso2}>{c.name}</SelectItem>
                      ))
                    : ["US","BR","PT","ES","GB","DE","FR","JP"].map((iso) => (
                        <SelectItem key={iso} value={iso}>{iso}</SelectItem>
                      ))
                  }
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label>Cidade / Estado</Label>
              <div ref={locationRef} className="relative">
                <Input
                  placeholder={formData.country ? "Digite para buscar..." : "Selecione um país primeiro"}
                  value={formData.location}
                  disabled={!formData.country}
                  autoComplete="off"
                  onChange={(e) => {
                    set("location", e.target.value)
                    setLocationIds({ cityId: null, regionId: null })
                  }}
                  onFocus={() => {
                    if (locationResults.length > 0) setShowLocationDropdown(true)
                  }}
                />
                {locationSearching && (
                  <div className="absolute right-3 top-2.5">
                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                  </div>
                )}
                {showLocationDropdown && locationResults.length > 0 && (
                  <div className="absolute z-50 mt-1 w-full rounded-md border bg-white shadow-md max-h-60 overflow-y-auto">
                    {locationResults.map((result) => (
                      <button
                        key={`${result.type}-${result.id}`}
                        type="button"
                        className="flex w-full items-center justify-between px-3 py-2 text-left hover:bg-gray-50"
                        onMouseDown={(e) => {
                          e.preventDefault()
                          const label = result.region_name
                            ? `${result.name}, ${result.region_name}`
                            : result.name
                          set("location", label)
                          setLocationIds({
                            cityId: result.type === "city" ? result.id : null,
                            regionId: result.type === "state" ? result.id : (result.state_id ?? null),
                          })
                          setShowLocationDropdown(false)
                        }}
                      >
                        <span>
                          <span className="text-sm font-medium">{result.name}</span>
                          {result.region_name && (
                            <span className="ml-1 text-xs text-muted-foreground">— {result.region_name}</span>
                          )}
                        </span>
                        <span className={`rounded px-1.5 py-0.5 text-xs ${result.type === "city" ? "bg-blue-50 text-blue-600" : "bg-emerald-50 text-emerald-600"}`}>
                          {result.type}
                        </span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>

            <div>
              <Label>Modo de trabalho</Label>
              <Select value={formData.workMode} onValueChange={(v) => set("workMode", v)}>
                <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="onsite">Presencial</SelectItem>
                  <SelectItem value="hybrid">Híbrido</SelectItem>
                  <SelectItem value="remote">Remoto</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center gap-2 pt-6">
              <Checkbox
                id="visaSupport"
                checked={formData.visaSupport}
                onCheckedChange={(v) => set("visaSupport", v === true)}
              />
              <Label htmlFor="visaSupport">Oferece suporte de visto</Label>
            </div>
          </CardContent>
        </Card>

        {/* Contrato e Salário */}
        <Card>
          <CardHeader>
            <CardTitle>Contrato e salário</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label>Tipo de contrato</Label>
                <Select value={formData.employmentType} onValueChange={(v) => set("employmentType", v)}>
                  <SelectTrigger><SelectValue placeholder="Selecione" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="permanent">Permanente</SelectItem>
                    <SelectItem value="full-time">Tempo integral</SelectItem>
                    <SelectItem value="part-time">Meio período</SelectItem>
                    <SelectItem value="contract">Contrato (PJ)</SelectItem>
                    <SelectItem value="dispatch">Terceirizado</SelectItem>
                    <SelectItem value="temporary">Temporário</SelectItem>
                    <SelectItem value="training">Estágio/Trainee</SelectItem>
                    <SelectItem value="voluntary">Voluntário</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="workingHours">Jornada de trabalho</Label>
                <Input
                  id="workingHours"
                  placeholder="Ex: 9h às 18h, 40h/semana"
                  value={formData.workingHours}
                  onChange={(e) => set("workingHours", e.target.value)}
                />
              </div>
            </div>

            <div className="grid md:grid-cols-4 gap-4">
              <div>
                <Label>Moeda</Label>
                <Select value={formData.currency} onValueChange={(v) => set("currency", v)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="BRL">BRL — R$</SelectItem>
                    <SelectItem value="USD">USD — $</SelectItem>
                    <SelectItem value="EUR">EUR — €</SelectItem>
                    <SelectItem value="GBP">GBP — £</SelectItem>
                    <SelectItem value="JPY">JPY — ¥</SelectItem>
                    <SelectItem value="CNY">CNY — ¥</SelectItem>
                    <SelectItem value="AED">AED — د.إ</SelectItem>
                    <SelectItem value="CAD">CAD — $</SelectItem>
                    <SelectItem value="AUD">AUD — $</SelectItem>
                    <SelectItem value="CHF">CHF — Fr</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label>Período</Label>
                <Select value={formData.salaryType} onValueChange={(v) => set("salaryType", v)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hourly">Por hora</SelectItem>
                    <SelectItem value="daily">Por dia</SelectItem>
                    <SelectItem value="weekly">Por semana</SelectItem>
                    <SelectItem value="monthly">Por mês</SelectItem>
                    <SelectItem value="yearly">Por ano</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="salaryMin">Salário mínimo</Label>
                <Input
                  id="salaryMin"
                  type="number"
                  min="0"
                  placeholder="3000"
                  value={formData.salaryMin}
                  onChange={(e) => set("salaryMin", e.target.value)}
                />
              </div>

              <div>
                <Label htmlFor="salaryMax">Salário máximo</Label>
                <Input
                  id="salaryMax"
                  type="number"
                  min="0"
                  placeholder="6000"
                  value={formData.salaryMax}
                  onChange={(e) => set("salaryMax", e.target.value)}
                />
              </div>
            </div>

            <div className="flex items-center gap-2">
              <Checkbox
                id="salaryNegotiable"
                checked={formData.salaryNegotiable}
                onCheckedChange={(v) => set("salaryNegotiable", v === true)}
              />
              <Label htmlFor="salaryNegotiable">Salário negociável</Label>
            </div>
          </CardContent>
        </Card>

        {/* Candidaturas */}
        <Card>
          <CardHeader>
            <CardTitle>Candidaturas</CardTitle>
            <CardDescription>Como os candidatos devem se candidatar à vaga.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label>Canal de candidatura</Label>
                <Select value={formData.applicationChannel} onValueChange={(v) => set("applicationChannel", v as ApplicationChannel)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="email">E-mail</SelectItem>
                    <SelectItem value="url">Link externo</SelectItem>
                    <SelectItem value="phone">Telefone</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label>Currículo</Label>
                <Select value={formData.resumeRequirement} onValueChange={(v) => set("resumeRequirement", v)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="required">Obrigatório</SelectItem>
                    <SelectItem value="optional">Opcional</SelectItem>
                    <SelectItem value="none">Não solicitado</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {formData.applicationChannel === "email" && (
              <div>
                <Label htmlFor="appEmail">E-mail para candidatura</Label>
                <Input
                  id="appEmail"
                  type="email"
                  placeholder="jobs@empresa.com"
                  value={formData.applicationEmail}
                  onChange={(e) => set("applicationEmail", e.target.value)}
                />
              </div>
            )}

            {formData.applicationChannel === "url" && (
              <div>
                <Label htmlFor="appUrl">Link externo (HTTPS)</Label>
                <Input
                  id="appUrl"
                  placeholder="https://empresa.com/carreiras"
                  value={formData.applicationUrl}
                  onChange={(e) => set("applicationUrl", e.target.value)}
                />
              </div>
            )}

            {formData.applicationChannel === "phone" && (
              <div>
                <Label htmlFor="appPhone">Telefone (com DDI)</Label>
                <Input
                  id="appPhone"
                  placeholder="+55 11 99999-8888"
                  value={formData.applicationPhone}
                  onChange={(e) => set("applicationPhone", e.target.value)}
                />
              </div>
            )}
          </CardContent>
        </Card>

        <Button type="submit" disabled={loading || !canSubmit} size="lg">
          {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
          Criar vaga
        </Button>
      </form>
    </div>
  )
}