portal-requisicion-vacantes/components/pages/new-requisition-page.tsx

'use client'

import * as React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Separator } from '@/components/ui/separator'
import {
  ArrowLeft,
  ArrowRight,
  Save,
  Send,
  MapPin,
  Building2,
  Briefcase,
  FileText,
  DollarSign,
  CheckCircle2,
  AlertCircle,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { countries, cities, departments, positions, currentUser, getCitiesByCountry } from '@/lib/mock-data'
import { toast } from 'sonner'

type FormStep = 'ubicacion' | 'vacante' | 'justificacion' | 'compensacion' | 'revision'

const STEPS: { key: FormStep; label: string; icon: React.ElementType }[] = [
  { key: 'ubicacion', label: 'Ubicación', icon: MapPin },
  { key: 'vacante', label: 'Vacante', icon: Briefcase },
  { key: 'justificacion', label: 'Justificación', icon: FileText },
  { key: 'compensacion', label: 'Compensación', icon: DollarSign },
  { key: 'revision', label: 'Revisión', icon: CheckCircle2 },
]

interface FormData {
  countryId: string
  cityId: string
  departmentId: string
  positionId: string
  quantity: number
  modalidad: 'presencial' | 'remoto' | 'hibrido'
  tipoContratacion: 'nuevo' | 'reemplazo' | 'temporal'
  justification: string
  urgency: 'normal' | 'alta' | 'critica'
  salaryPackage: string
  budget: string
  currency: string
}

function StepIndicator({ currentStep }: { currentStep: FormStep }) {
  const currentIndex = STEPS.findIndex(s => s.key === currentStep)

  return (
    <div className="flex items-center justify-between mb-8">
      {STEPS.map((step, index) => {
        const Icon = step.icon
        const isCompleted = index < currentIndex
        const isCurrent = step.key === currentStep

        return (
          <React.Fragment key={step.key}>
            <div className="flex flex-col items-center gap-2">
              <div className={cn(
                'flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors',
                isCompleted && 'border-emerald-500 bg-emerald-500 text-white',
                isCurrent && 'border-primary bg-primary text-primary-foreground',
                !isCompleted && !isCurrent && 'border-muted-foreground/30 bg-muted text-muted-foreground'
              )}>
                {isCompleted ? (
                  <CheckCircle2 className="h-5 w-5" />
                ) : (
                  <Icon className="h-5 w-5" />
                )}
              </div>
              <span className={cn(
                'text-xs font-medium hidden sm:block',
                (isCompleted || isCurrent) && 'text-foreground',
                !isCompleted && !isCurrent && 'text-muted-foreground'
              )}>
                {step.label}
              </span>
            </div>
            {index < STEPS.length - 1 && (
              <div className={cn(
                'flex-1 h-0.5 mx-2',
                index < currentIndex ? 'bg-emerald-500' : 'bg-muted-foreground/30'
              )} />
            )}
          </React.Fragment>
        )
      })}
    </div>
  )
}

export function NewRequisitionPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = React.useState<FormStep>('ubicacion')
  const [errors, setErrors] = React.useState<Partial<Record<keyof FormData, string>>>({})
  const [formData, setFormData] = React.useState<FormData>({
    countryId: '',
    cityId: '',
    departmentId: '',
    positionId: '',
    quantity: 1,
    modalidad: 'presencial',
    tipoContratacion: 'nuevo',
    justification: '',
    urgency: 'normal',
    salaryPackage: '',
    budget: '',
    currency: 'USD',
  })

  const availableCities = formData.countryId ? getCitiesByCountry(formData.countryId) : []

  const updateFormData = (field: keyof FormData, value: string | number) => {
    setFormData(prev => ({ ...prev, [field]: value }))
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: undefined }))
    }
    // Reset city when country changes
    if (field === 'countryId') {
      setFormData(prev => ({ ...prev, cityId: '' }))
    }
  }

  const validateStep = (step: FormStep): boolean => {
    const newErrors: Partial<Record<keyof FormData, string>> = {}

    if (step === 'ubicacion') {
      if (!formData.countryId) newErrors.countryId = 'Selecciona un país'
      if (!formData.cityId) newErrors.cityId = 'Selecciona una ciudad'
      if (!formData.departmentId) newErrors.departmentId = 'Selecciona un departamento'
    }

    if (step === 'vacante') {
      if (!formData.positionId) newErrors.positionId = 'Selecciona una posición'
      if (formData.quantity < 1) newErrors.quantity = 'La cantidad debe ser al menos 1'
    }

    if (step === 'justificacion') {
      if (!formData.justification.trim()) newErrors.justification = 'La justificación es obligatoria'
      if (formData.justification.length < 20) newErrors.justification = 'Proporciona una justificación más detallada (mín. 20 caracteres)'
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const goToNextStep = () => {
    if (!validateStep(currentStep)) return

    const currentIndex = STEPS.findIndex(s => s.key === currentStep)
    if (currentIndex < STEPS.length - 1) {
      setCurrentStep(STEPS[currentIndex + 1].key)
    }
  }

  const goToPreviousStep = () => {
    const currentIndex = STEPS.findIndex(s => s.key === currentStep)
    if (currentIndex > 0) {
      setCurrentStep(STEPS[currentIndex - 1].key)
    }
  }

  const handleSaveDraft = () => {
    toast.success('Borrador guardado', {
      description: 'La requisición se ha guardado como borrador.',
    })
  }

  const handleSubmit = () => {
    toast.success('Requisición enviada', {
      description: 'La requisición ha sido enviada para aprobación de RR.HH.',
    })
    router.push('/requisiciones')
  }

  const selectedCountry = countries.find(c => c.id === formData.countryId)
  const selectedCity = cities.find(c => c.id === formData.cityId)
  const selectedDepartment = departments.find(d => d.id === formData.departmentId)
  const selectedPosition = positions.find(p => p.id === formData.positionId)

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {/* Header */}
      <div className="flex items-center gap-4 mb-6">
        <Button variant="ghost" size="icon" asChild>
          <Link href="/requisiciones">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Nueva Requisición</h1>
          <p className="text-muted-foreground">
            Completa el formulario para solicitar una nueva vacante
          </p>
        </div>
      </div>

      {/* Step Indicator */}
      <StepIndicator currentStep={currentStep} />

      {/* Form Card */}
      <Card>
        <CardContent className="p-6">
          {/* Step 1: Ubicación */}
          {currentStep === 'ubicacion' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-lg font-semibold mb-1">Ubicación</h2>
                <p className="text-sm text-muted-foreground">
                  Define el país, ciudad y departamento de la vacante
                </p>
              </div>

              <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="country">País *</Label>
                  <Select value={formData.countryId} onValueChange={(v) => updateFormData('countryId', v)}>
                    <SelectTrigger className={cn(errors.countryId && 'border-destructive')}>
                      <SelectValue placeholder="Seleccionar país" />
                    </SelectTrigger>
                    <SelectContent>
                      {countries.map((country) => (
                        <SelectItem key={country.id} value={country.id}>
                          {country.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.countryId && (
                    <p className="text-xs text-destructive flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" />
                      {errors.countryId}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="city">Ciudad *</Label>
                  <Select 
                    value={formData.cityId} 
                    onValueChange={(v) => updateFormData('cityId', v)}
                    disabled={!formData.countryId}
                  >
                    <SelectTrigger className={cn(errors.cityId && 'border-destructive')}>
                      <SelectValue placeholder={formData.countryId ? "Seleccionar ciudad" : "Primero selecciona un país"} />
                    </SelectTrigger>
                    <SelectContent>
                      {availableCities.map((city) => (
                        <SelectItem key={city.id} value={city.id}>
                          {city.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.cityId && (
                    <p className="text-xs text-destructive flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" />
                      {errors.cityId}
                    </p>
                  )}
                </div>

                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="department">Departamento *</Label>
                  <Select value={formData.departmentId} onValueChange={(v) => updateFormData('departmentId', v)}>
                    <SelectTrigger className={cn(errors.departmentId && 'border-destructive')}>
                      <SelectValue placeholder="Seleccionar departamento" />
                    </SelectTrigger>
                    <SelectContent>
                      {departments.map((dept) => (
                        <SelectItem key={dept.id} value={dept.id}>
                          {dept.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.departmentId && (
                    <p className="text-xs text-destructive flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" />
                      {errors.departmentId}
                    </p>
                  )}
                </div>
              </div>

              {/* Requester Info */}
              <div className="rounded-lg bg-muted/50 p-4">
                <p className="text-sm text-muted-foreground mb-2">Solicitante</p>
                <p className="font-medium">{currentUser.name}</p>
                <p className="text-sm text-muted-foreground">{currentUser.email}</p>
              </div>
            </div>
          )}

          {/* Step 2: Vacante */}
          {currentStep === 'vacante' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-lg font-semibold mb-1">Información de la Vacante</h2>
                <p className="text-sm text-muted-foreground">
                  Define la posición, cantidad y tipo de contratación
                </p>
              </div>

              <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="position">Posición *</Label>
                  <Select value={formData.positionId} onValueChange={(v) => updateFormData('positionId', v)}>
                    <SelectTrigger className={cn(errors.positionId && 'border-destructive')}>
                      <SelectValue placeholder="Seleccionar posición" />
                    </SelectTrigger>
                    <SelectContent>
                      {positions.map((pos) => (
                        <SelectItem key={pos.id} value={pos.id}>
                          {pos.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.positionId && (
                    <p className="text-xs text-destructive flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" />
                      {errors.positionId}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label htmlFor="quantity">Cantidad de Vacantes *</Label>
                  <Input
                    id="quantity"
                    type="number"
                    min={1}
                    value={formData.quantity}
                    onChange={(e) => updateFormData('quantity', parseInt(e.target.value) || 1)}
                    className={cn(errors.quantity && 'border-destructive')}
                  />
                  {errors.quantity && (
                    <p className="text-xs text-destructive flex items-center gap-1">
                      <AlertCircle className="h-3 w-3" />
                      {errors.quantity}
                    </p>
                  )}
                </div>

                <div className="space-y-2">
                  <Label>Modalidad *</Label>
                  <RadioGroup
                    value={formData.modalidad}
                    onValueChange={(v) => updateFormData('modalidad', v)}
                    className="flex gap-4"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="presencial" id="presencial" />
                      <Label htmlFor="presencial" className="font-normal">Presencial</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="hibrido" id="hibrido" />
                      <Label htmlFor="hibrido" className="font-normal">Híbrido</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="remoto" id="remoto" />
                      <Label htmlFor="remoto" className="font-normal">Remoto</Label>
                    </div>
                  </RadioGroup>
                </div>

                <div className="space-y-2 sm:col-span-2">
                  <Label>Tipo de Contratación *</Label>
                  <RadioGroup
                    value={formData.tipoContratacion}
                    onValueChange={(v) => updateFormData('tipoContratacion', v)}
                    className="flex gap-4"
                  >
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="nuevo" id="nuevo" />
                      <Label htmlFor="nuevo" className="font-normal">Nueva posición</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="reemplazo" id="reemplazo" />
                      <Label htmlFor="reemplazo" className="font-normal">Reemplazo</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="temporal" id="temporal" />
                      <Label htmlFor="temporal" className="font-normal">Temporal</Label>
                    </div>
                  </RadioGroup>
                </div>
              </div>
            </div>
          )}

          {/* Step 3: Justificación */}
          {currentStep === 'justificacion' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-lg font-semibold mb-1">Justificación</h2>
                <p className="text-sm text-muted-foreground">
                  Explica el motivo de la requisición y su nivel de urgencia
                </p>
              </div>

              <div className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="justification">Justificación de la Requisición *</Label>
                  <Textarea
                    id="justification"
                    value={formData.justification}
                    onChange={(e) => updateFormData('justification', e.target.value)}
                    placeholder="Describe el motivo por el cual se necesita esta contratación, el impacto en el negocio y cualquier contexto relevante..."
                    rows={5}
                    className={cn(errors.justification && 'border-destructive')}
                  />
                  <div className="flex items-center justify-between">
                    {errors.justification ? (
                      <p className="text-xs text-destructive flex items-center gap-1">
                        <AlertCircle className="h-3 w-3" />
                        {errors.justification}
                      </p>
                    ) : (
                      <p className="text-xs text-muted-foreground">
                        Mínimo 20 caracteres
                      </p>
                    )}
                    <p className="text-xs text-muted-foreground">
                      {formData.justification.length} caracteres
                    </p>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label>Nivel de Urgencia *</Label>
                  <RadioGroup
                    value={formData.urgency}
                    onValueChange={(v) => updateFormData('urgency', v)}
                    className="grid gap-3"
                  >
                    <div className="flex items-start space-x-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
                      <RadioGroupItem value="normal" id="normal" className="mt-0.5" />
                      <div>
                        <Label htmlFor="normal" className="font-medium">Normal</Label>
                        <p className="text-sm text-muted-foreground">
                          Proceso estándar de reclutamiento según SLA definido
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start space-x-3 rounded-lg border border-amber-200 bg-amber-50/50 p-4 dark:border-amber-800 dark:bg-amber-950/30">
                      <RadioGroupItem value="alta" id="alta" className="mt-0.5" />
                      <div>
                        <Label htmlFor="alta" className="font-medium">Alta</Label>
                        <p className="text-sm text-muted-foreground">
                          Requiere atención prioritaria, impacto operativo significativo
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start space-x-3 rounded-lg border border-red-200 bg-red-50/50 p-4 dark:border-red-800 dark:bg-red-950/30">
                      <RadioGroupItem value="critica" id="critica" className="mt-0.5" />
                      <div>
                        <Label htmlFor="critica" className="font-medium">Crítica</Label>
                        <p className="text-sm text-muted-foreground">
                          Urgencia máxima, afecta operaciones críticas del negocio
                        </p>
                      </div>
                    </div>
                  </RadioGroup>
                </div>
              </div>
            </div>
          )}

          {/* Step 4: Compensación */}
          {currentStep === 'compensacion' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-lg font-semibold mb-1">Compensación</h2>
                <p className="text-sm text-muted-foreground">
                  Define el paquete salarial y presupuesto (opcional, visible solo para roles autorizados)
                </p>
              </div>

              <div className="grid gap-6 sm:grid-cols-2">
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="salaryPackage">Paquete Salarial</Label>
                  <Input
                    id="salaryPackage"
                    value={formData.salaryPackage}
                    onChange={(e) => updateFormData('salaryPackage', e.target.value)}
                    placeholder="Ej: $15,000 - $20,000 MXN mensual"
                  />
                  <p className="text-xs text-muted-foreground">
                    Rango salarial propuesto para la posición
                  </p>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="budget">Presupuesto Mensual</Label>
                  <Input
                    id="budget"
                    type="number"
                    value={formData.budget}
                    onChange={(e) => updateFormData('budget', e.target.value)}
                    placeholder="0"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="currency">Moneda</Label>
                  <Select value={formData.currency} onValueChange={(v) => updateFormData('currency', v)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="USD">USD - Dólar Estadounidense</SelectItem>
                      <SelectItem value="MXN">MXN - Peso Mexicano</SelectItem>
                      <SelectItem value="COP">COP - Peso Colombiano</SelectItem>
                      <SelectItem value="PEN">PEN - Sol Peruano</SelectItem>
                      <SelectItem value="CLP">CLP - Peso Chileno</SelectItem>
                      <SelectItem value="ARS">ARS - Peso Argentino</SelectItem>
                      <SelectItem value="DOP">DOP - Peso Dominicano</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="rounded-lg bg-muted/50 p-4 text-sm text-muted-foreground">
                <p className="font-medium text-foreground mb-1">Nota de privacidad</p>
                <p>
                  La información de compensación solo será visible para roles autorizados (RR.HH. y Administración).
                </p>
              </div>
            </div>
          )}

          {/* Step 5: Revisión */}
          {currentStep === 'revision' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-lg font-semibold mb-1">Revisión Final</h2>
                <p className="text-sm text-muted-foreground">
                  Verifica que toda la información sea correcta antes de enviar
                </p>
              </div>

              <div className="space-y-4">
                {/* Location Summary */}
                <div className="rounded-lg border p-4">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-medium flex items-center gap-2">
                      <MapPin className="h-4 w-4 text-primary" />
                      Ubicación
                    </h3>
                    <Button variant="ghost" size="sm" onClick={() => setCurrentStep('ubicacion')}>
                      Editar
                    </Button>
                  </div>
                  <div className="grid gap-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">País:</span>
                      <span>{selectedCountry?.name || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Ciudad:</span>
                      <span>{selectedCity?.name || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Departamento:</span>
                      <span>{selectedDepartment?.name || '-'}</span>
                    </div>
                  </div>
                </div>

                {/* Vacancy Summary */}
                <div className="rounded-lg border p-4">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-medium flex items-center gap-2">
                      <Briefcase className="h-4 w-4 text-primary" />
                      Vacante
                    </h3>
                    <Button variant="ghost" size="sm" onClick={() => setCurrentStep('vacante')}>
                      Editar
                    </Button>
                  </div>
                  <div className="grid gap-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Posición:</span>
                      <span>{selectedPosition?.name || '-'}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Cantidad:</span>
                      <span>{formData.quantity}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Modalidad:</span>
                      <span className="capitalize">{formData.modalidad}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Tipo:</span>
                      <span className="capitalize">{formData.tipoContratacion}</span>
                    </div>
                  </div>
                </div>

                {/* Justification Summary */}
                <div className="rounded-lg border p-4">
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-medium flex items-center gap-2">
                      <FileText className="h-4 w-4 text-primary" />
                      Justificación
                    </h3>
                    <Button variant="ghost" size="sm" onClick={() => setCurrentStep('justificacion')}>
                      Editar
                    </Button>
                  </div>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Urgencia:</span>
                      <span className="capitalize">{formData.urgency}</span>
                    </div>
                    <p className="text-muted-foreground mt-2">{formData.justification || '-'}</p>
                  </div>
                </div>

                {/* Compensation Summary */}
                {(formData.salaryPackage || formData.budget) && (
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between mb-3">
                      <h3 className="font-medium flex items-center gap-2">
                        <DollarSign className="h-4 w-4 text-primary" />
                        Compensación
                      </h3>
                      <Button variant="ghost" size="sm" onClick={() => setCurrentStep('compensacion')}>
                        Editar
                      </Button>
                    </div>
                    <div className="grid gap-2 text-sm">
                      {formData.salaryPackage && (
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Paquete:</span>
                          <span>{formData.salaryPackage}</span>
                        </div>
                      )}
                      {formData.budget && (
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Presupuesto:</span>
                          <span>{formData.currency} {parseInt(formData.budget).toLocaleString()}</span>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Navigation Buttons */}
          <Separator className="my-6" />
          
          <div className="flex items-center justify-between">
            <div>
              {currentStep !== 'ubicacion' && (
                <Button variant="outline" onClick={goToPreviousStep}>
                  <ArrowLeft className="mr-2 h-4 w-4" />
                  Anterior
                </Button>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" onClick={handleSaveDraft}>
                <Save className="mr-2 h-4 w-4" />
                Guardar Borrador
              </Button>
              {currentStep !== 'revision' ? (
                <Button onClick={goToNextStep}>
                  Siguiente
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              ) : (
                <Button onClick={handleSubmit}>
                  <Send className="mr-2 h-4 w-4" />
                  Enviar a Aprobación
                </Button>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}