'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 { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Separator } from '@/components/ui/separator'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Progress } from '@/components/ui/progress'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  ArrowLeft,
  Edit,
  Clock,
  Users,
  MapPin,
  Building2,
  Calendar,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Send,
  RefreshCw,
  UserPlus,
  FileText,
  History,
  MessageSquare,
  Briefcase,
  DollarSign,
  Target,
  ChevronRight,
  Ban,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { requisitions, auditLog, users, recruiterCapacity } from '@/lib/mock-data'
import { 
  STATUS_CONFIG, 
  URGENCY_CONFIG, 
  STAGE_CONFIG, 
  type Requisition,
  type CandidateStage 
} from '@/lib/types'
import { toast } from 'sonner'

function getInitials(name: string): string {
  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
}

function getDaysUntilDeadline(deadline: string): number {
  const now = new Date()
  const deadlineDate = new Date(deadline)
  return Math.ceil((deadlineDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
}

function formatDate(dateString: string): string {
  return new Date(dateString).toLocaleDateString('es-ES', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  })
}

function formatDateTime(dateString: string): string {
  return new Date(dateString).toLocaleString('es-ES', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// Status flow visualization component
function StatusFlow({ currentStatus }: { currentStatus: Requisition['status'] }) {
  const steps = [
    { key: 'borrador', label: 'Borrador', icon: FileText },
    { key: 'pendiente_rrhh', label: 'RR.HH.', icon: Users },
    { key: 'pendiente_admin', label: 'Admin', icon: Building2 },
    { key: 'reclutando', label: 'Reclutando', icon: Briefcase },
    { key: 'cerrado', label: 'Cerrado', icon: CheckCircle2 },
  ]

  const currentIndex = steps.findIndex(s => s.key === currentStatus)
  const isCancelled = currentStatus === 'cancelado'
  const isCorrection = currentStatus === 'correccion_requerida'

  return (
    <div className="relative overflow-x-auto pb-4">
      <div className="flex items-center justify-between min-w-[500px]">
        {steps.map((step, index) => {
          const Icon = step.icon
          const isCompleted = index < currentIndex && !isCancelled
          const isCurrent = step.key === currentStatus
          const isPending = index > currentIndex

          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 && !isCancelled && 'border-primary bg-primary text-primary-foreground',
                  isPending && 'border-muted-foreground/30 bg-muted text-muted-foreground',
                  isCancelled && 'border-red-500 bg-red-500 text-white',
                  isCorrection && isCurrent && 'border-amber-500 bg-amber-500 text-white'
                )}>
                  {isCompleted ? (
                    <CheckCircle2 className="h-5 w-5" />
                  ) : isCancelled ? (
                    <XCircle className="h-5 w-5" />
                  ) : (
                    <Icon className="h-5 w-5" />
                  )}
                </div>
                <span className={cn(
                  'text-xs font-medium',
                  (isCompleted || isCurrent) && 'text-foreground',
                  isPending && 'text-muted-foreground'
                )}>
                  {step.label}
                </span>
              </div>
              {index < steps.length - 1 && (
                <div className={cn(
                  'flex-1 h-0.5 mx-2 -mt-6',
                  index < currentIndex ? 'bg-emerald-500' : 'bg-muted-foreground/30'
                )} />
              )}
            </React.Fragment>
          )
        })}
      </div>
      {isCorrection && (
        <div className="mt-4 flex items-center justify-center gap-2 text-amber-600">
          <AlertTriangle className="h-4 w-4" />
          <span className="text-sm font-medium">Corrección requerida - Regresado a solicitante</span>
        </div>
      )}
    </div>
  )
}

// Recruitment stages component
function RecruitmentStages({ currentStage }: { currentStage?: CandidateStage }) {
  if (!currentStage) return null

  const stages: CandidateStage[] = ['reclutando', 'primera_entrevista', 'segunda_entrevista', 'referencias', 'examenes_medicos', 'seleccionado']
  const currentIndex = stages.indexOf(currentStage)

  return (
    <div className="space-y-3">
      {stages.map((stage, index) => {
        const config = STAGE_CONFIG[stage]
        const isCompleted = index < currentIndex
        const isCurrent = stage === currentStage

        return (
          <div key={stage} className="flex items-center gap-3">
            <div className={cn(
              'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',
              isCompleted && 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
              isCurrent && 'bg-primary text-primary-foreground',
              !isCompleted && !isCurrent && 'bg-muted text-muted-foreground'
            )}>
              {isCompleted ? <CheckCircle2 className="h-4 w-4" /> : index + 1}
            </div>
            <span className={cn(
              'text-sm',
              isCurrent && 'font-medium text-foreground',
              isCompleted && 'text-muted-foreground line-through',
              !isCompleted && !isCurrent && 'text-muted-foreground'
            )}>
              {config.label}
            </span>
          </div>
        )
      })}
    </div>
  )
}

interface RequisitionDetailPageProps {
  requisitionId: string
}

export function RequisitionDetailPage({ requisitionId }: RequisitionDetailPageProps) {
  const router = useRouter()
  const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false)
  const [assignDialogOpen, setAssignDialogOpen] = React.useState(false)
  const [cancelReason, setCancelReason] = React.useState('')
  const [selectedRecruiter, setSelectedRecruiter] = React.useState('')

  const requisition = requisitions.find(r => r.id === requisitionId)

  if (!requisition) {
    return (
      <div className="flex flex-col items-center justify-center h-[60vh]">
        <AlertTriangle className="h-12 w-12 text-muted-foreground mb-4" />
        <h2 className="text-lg font-semibold">Requisición no encontrada</h2>
        <p className="text-muted-foreground mb-4">La requisición {requisitionId} no existe.</p>
        <Button asChild>
          <Link href="/requisiciones">Volver a requisiciones</Link>
        </Button>
      </div>
    )
  }

  const status = STATUS_CONFIG[requisition.status]
  const urgency = URGENCY_CONFIG[requisition.urgency]
  const daysLeft = getDaysUntilDeadline(requisition.hardDeadline)
  const isOverdue = daysLeft < 0
  const isAtRisk = daysLeft >= 0 && daysLeft <= 7
  const progress = (requisition.vacanciesFilled / requisition.quantity) * 100

  const relatedAuditLog = auditLog.filter(log => log.entityId === requisitionId)
  const recruiters = users.filter(u => u.role === 'reclutador' && u.active)

  const handleCancel = () => {
    toast.success('Requisición cancelada', {
      description: `${requisition.id} ha sido cancelada.`,
    })
    setCancelDialogOpen(false)
    router.push('/requisiciones')
  }

  const handleAssignRecruiter = () => {
    const recruiter = recruiters.find(r => r.id === selectedRecruiter)
    toast.success('Reclutador asignado', {
      description: `${recruiter?.name} ha sido asignado a ${requisition.id}.`,
    })
    setAssignDialogOpen(false)
  }

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="flex items-start gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href="/requisiciones">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div>
            <div className="flex items-center gap-3 mb-1">
              <h1 className="text-2xl font-bold tracking-tight">{requisition.id}</h1>
              <Badge variant="outline" className={cn(status.color, status.bgColor, status.borderColor)}>
                {status.label}
              </Badge>
              <Badge variant="outline" className={cn('text-xs', urgency.color, urgency.bgColor)}>
                {urgency.label}
              </Badge>
            </div>
            <p className="text-muted-foreground">
              {requisition.positionName} - {requisition.quantity} vacante{requisition.quantity > 1 ? 's' : ''}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {requisition.status === 'borrador' && (
            <>
              <Button variant="outline" asChild>
                <Link href={`/requisiciones/${requisition.id}/editar`}>
                  <Edit className="mr-2 h-4 w-4" />
                  Editar
                </Link>
              </Button>
              <Button>
                <Send className="mr-2 h-4 w-4" />
                Enviar a Aprobación
              </Button>
            </>
          )}
          {requisition.status === 'correccion_requerida' && (
            <Button asChild>
              <Link href={`/requisiciones/${requisition.id}/editar`}>
                <RefreshCw className="mr-2 h-4 w-4" />
                Corregir y Reenviar
              </Link>
            </Button>
          )}
          {requisition.status === 'reclutando' && !requisition.recruiterId && (
            <Dialog open={assignDialogOpen} onOpenChange={setAssignDialogOpen}>
              <DialogTrigger asChild>
                <Button>
                  <UserPlus className="mr-2 h-4 w-4" />
                  Asignar Reclutador
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Asignar Reclutador</DialogTitle>
                  <DialogDescription>
                    Selecciona el reclutador que gestionará esta requisición.
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label>Reclutador</Label>
                    <Select value={selectedRecruiter} onValueChange={setSelectedRecruiter}>
                      <SelectTrigger>
                        <SelectValue placeholder="Seleccionar reclutador" />
                      </SelectTrigger>
                      <SelectContent>
                        {recruiters.map((recruiter) => {
                          const capacity = recruiterCapacity.find(c => c.recruiterId === recruiter.id)
                          return (
                            <SelectItem key={recruiter.id} value={recruiter.id}>
                              <div className="flex items-center gap-2">
                                <span>{recruiter.name}</span>
                                {capacity && (
                                  <span className="text-xs text-muted-foreground">
                                    (Score: {capacity.currentScore}/{capacity.maxThreshold})
                                  </span>
                                )}
                              </div>
                            </SelectItem>
                          )
                        })}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setAssignDialogOpen(false)}>
                    Cancelar
                  </Button>
                  <Button onClick={handleAssignRecruiter} disabled={!selectedRecruiter}>
                    Asignar
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          )}
          {!['cerrado', 'cancelado'].includes(requisition.status) && (
            <Dialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" className="text-destructive hover:text-destructive">
                  <Ban className="mr-2 h-4 w-4" />
                  Cancelar
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Cancelar Requisición</DialogTitle>
                  <DialogDescription>
                    Esta acción no se puede deshacer. La requisición quedará marcada como cancelada.
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="cancelReason">Motivo de cancelación *</Label>
                    <Textarea
                      id="cancelReason"
                      value={cancelReason}
                      onChange={(e) => setCancelReason(e.target.value)}
                      placeholder="Describe el motivo de la cancelación..."
                      rows={3}
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setCancelDialogOpen(false)}>
                    Volver
                  </Button>
                  <Button variant="destructive" onClick={handleCancel} disabled={!cancelReason.trim()}>
                    Confirmar Cancelación
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          )}
        </div>
      </div>

      {/* Status Flow */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Estado del Proceso</CardTitle>
        </CardHeader>
        <CardContent>
          <StatusFlow currentStatus={requisition.status} />
        </CardContent>
      </Card>

      {/* Main Content */}
      <div className="grid gap-6 lg:grid-cols-3">
        {/* Left Column - Details */}
        <div className="lg:col-span-2 space-y-6">
          {/* Rejection Comment */}
          {requisition.rejectionComment && (
            <Card className="border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <AlertTriangle className="h-5 w-5 text-amber-600 shrink-0 mt-0.5" />
                  <div>
                    <p className="font-medium text-amber-800 dark:text-amber-200">Corrección Requerida</p>
                    <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
                      {requisition.rejectionComment}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Info Tabs */}
          <Tabs defaultValue="detalles">
            <TabsList>
              <TabsTrigger value="detalles">Detalles</TabsTrigger>
              <TabsTrigger value="historial">Historial</TabsTrigger>
              {requisition.status === 'reclutando' && (
                <TabsTrigger value="pipeline">Pipeline</TabsTrigger>
              )}
            </TabsList>

            <TabsContent value="detalles" className="mt-4">
              <Card>
                <CardContent className="p-6 space-y-6">
                  {/* Basic Info */}
                  <div>
                    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
                      Información de la Vacante
                    </h3>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Posición</p>
                        <p className="font-medium">{requisition.positionName}</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Departamento</p>
                        <p className="font-medium">{requisition.departmentName}</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Ubicación</p>
                        <p className="font-medium">{requisition.cityName}, {requisition.countryName}</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Modalidad</p>
                        <p className="font-medium capitalize">{requisition.modalidad}</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Tipo de Contratación</p>
                        <p className="font-medium capitalize">{requisition.tipoContratacion}</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Cantidad de Vacantes</p>
                        <p className="font-medium">{requisition.quantity}</p>
                      </div>
                    </div>
                  </div>

                  <Separator />

                  {/* Justification */}
                  <div>
                    <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
                      Justificación
                    </h3>
                    <p className="text-sm leading-relaxed">{requisition.justification}</p>
                  </div>

                  {/* Compensation (if visible) */}
                  {(requisition.salaryPackage || requisition.budget) && (
                    <>
                      <Separator />
                      <div>
                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4">
                          Compensación
                        </h3>
                        <div className="grid gap-4 sm:grid-cols-2">
                          {requisition.salaryPackage && (
                            <div className="space-y-1">
                              <p className="text-sm text-muted-foreground">Paquete Salarial</p>
                              <p className="font-medium">{requisition.salaryPackage}</p>
                            </div>
                          )}
                          {requisition.budget && (
                            <div className="space-y-1">
                              <p className="text-sm text-muted-foreground">Presupuesto</p>
                              <p className="font-medium">
                                {requisition.currency} {requisition.budget.toLocaleString()}
                              </p>
                            </div>
                          )}
                        </div>
                      </div>
                    </>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="historial" className="mt-4">
              <Card>
                <CardContent className="p-6">
                  <ScrollArea className="h-[400px] pr-4">
                    <div className="relative pl-6 border-l-2 border-muted space-y-6">
                      {relatedAuditLog.map((log, index) => (
                        <div key={log.id} className="relative">
                          <div className="absolute -left-[25px] h-3 w-3 rounded-full bg-primary" />
                          <div className="space-y-1">
                            <div className="flex items-center justify-between">
                              <p className="font-medium text-sm">{log.action}</p>
                              <span className="text-xs text-muted-foreground">
                                {formatDateTime(log.createdAt)}
                              </span>
                            </div>
                            <p className="text-sm text-muted-foreground">Por {log.userName}</p>
                            {log.oldValue && log.newValue && (
                              <div className="flex items-center gap-2 text-xs mt-1">
                                <Badge variant="outline" className="text-muted-foreground">
                                  {log.oldValue}
                                </Badge>
                                <ChevronRight className="h-3 w-3 text-muted-foreground" />
                                <Badge variant="outline">
                                  {log.newValue}
                                </Badge>
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>
            </TabsContent>

            {requisition.status === 'reclutando' && (
              <TabsContent value="pipeline" className="mt-4">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Etapas de Reclutamiento</CardTitle>
                    <CardDescription>Progreso del proceso de selección</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <RecruitmentStages currentStage={requisition.currentStage} />
                  </CardContent>
                </Card>
              </TabsContent>
            )}
          </Tabs>
        </div>

        {/* Right Column - Summary */}
        <div className="space-y-6">
          {/* SLA Card */}
          <Card className={cn(
            isOverdue && 'border-red-200 dark:border-red-800',
            isAtRisk && !isOverdue && 'border-amber-200 dark:border-amber-800'
          )}>
            <CardHeader className="pb-2">
              <CardTitle className="text-base flex items-center gap-2">
                <Target className="h-4 w-4" />
                SLA
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">Fecha límite</span>
                <span className="font-medium">{formatDate(requisition.hardDeadline)}</span>
              </div>
              <div className={cn(
                'flex items-center justify-between',
                isOverdue && 'text-red-600 dark:text-red-400',
                isAtRisk && !isOverdue && 'text-amber-600 dark:text-amber-400'
              )}>
                <span className="text-sm">Días restantes</span>
                <span className="font-semibold text-lg">
                  {isOverdue ? `${Math.abs(daysLeft)} días vencido` : `${daysLeft} días`}
                </span>
              </div>
              {(isOverdue || isAtRisk) && (
                <div className={cn(
                  'flex items-center gap-2 rounded-lg p-3 text-sm',
                  isOverdue && 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
                  isAtRisk && !isOverdue && 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
                )}>
                  <AlertTriangle className="h-4 w-4 shrink-0" />
                  <span>
                    {isOverdue ? 'SLA vencido - Acción inmediata requerida' : 'SLA en riesgo - Priorizar'}
                  </span>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Progress Card */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base flex items-center gap-2">
                <Users className="h-4 w-4" />
                Progreso de Vacantes
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-end justify-between">
                <div>
                  <span className="text-3xl font-bold">{requisition.vacanciesFilled}</span>
                  <span className="text-muted-foreground"> / {requisition.quantity}</span>
                </div>
                <span className="text-sm text-muted-foreground">
                  {Math.round(progress)}% completado
                </span>
              </div>
              <Progress value={progress} className="h-2" />
              <p className="text-xs text-muted-foreground">
                {requisition.quantity - requisition.vacanciesFilled} vacante{(requisition.quantity - requisition.vacanciesFilled) !== 1 ? 's' : ''} pendiente{(requisition.quantity - requisition.vacanciesFilled) !== 1 ? 's' : ''}
              </p>
            </CardContent>
          </Card>

          {/* Requester Card */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-base">Solicitante</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-3">
                <Avatar>
                  <AvatarFallback>{getInitials(requisition.requesterName)}</AvatarFallback>
                </Avatar>
                <div>
                  <p className="font-medium">{requisition.requesterName}</p>
                  <p className="text-sm text-muted-foreground">{requisition.departmentName}</p>
                </div>
              </div>
              <Separator className="my-4" />
              <div className="space-y-2 text-sm">
                <div className="flex items-center justify-between">
                  <span className="text-muted-foreground">Fecha de creación</span>
                  <span>{formatDate(requisition.createdAt)}</span>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Recruiter Card */}
          {requisition.recruiterId && (
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-base">Reclutador Asignado</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-3">
                  <Avatar>
                    <AvatarFallback>{getInitials(requisition.recruiterName || '')}</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">{requisition.recruiterName}</p>
                    <p className="text-sm text-muted-foreground">Reclutador</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Approvals Card */}
          {(requisition.approvedByHrAt || requisition.approvedByAdminAt) && (
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-base">Aprobaciones</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {requisition.approvedByHrAt && (
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                    <span>RR.HH. - {formatDate(requisition.approvedByHrAt)}</span>
                  </div>
                )}
                {requisition.approvedByAdminAt && (
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                    <span>Administración - {formatDate(requisition.approvedByAdminAt)}</span>
                  </div>
                )}
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}