'use client'
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronDown, Check, ArrowRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import { STATUS_LABELS, STATUS_COLORS, type OperationStatus } from '@/types'
import { toast } from 'sonner'

const STATUSES: OperationStatus[] = [
  'consulta_recibida',
  'reserva_realizada',
  'documentacion_pendiente',
  'documentacion_completa',
  'contrato_en_confeccion',
  'enviado_propietario',
  'enviado_inquilino',
  'correcciones',
  'listo_para_firma',
  'firmado',
  'archivado',
]

interface StatusChangerProps {
  currentStatus: OperationStatus
  onStatusChange?: (status: OperationStatus) => void
}

export function StatusChanger({ currentStatus, onStatusChange }: StatusChangerProps) {
  const [open, setOpen] = useState(false)
  const [status, setStatus] = useState<OperationStatus>(currentStatus)

  const currentIndex = STATUSES.indexOf(status)
  const nextStatus = STATUSES[currentIndex + 1]

  const handleChange = (newStatus: OperationStatus) => {
    setStatus(newStatus)
    setOpen(false)
    onStatusChange?.(newStatus)
    toast.success(`Estado actualizado: ${STATUS_LABELS[newStatus]}`)
  }

  const handleNext = () => {
    if (nextStatus) handleChange(nextStatus)
  }

  return (
    <div className="flex items-center gap-2">
      {/* Avanzar a la siguiente etapa rápido */}
      {nextStatus && (
        <button
          onClick={handleNext}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
        >
          <ArrowRight size={13} />
          Pasar a: {STATUS_LABELS[nextStatus]}
        </button>
      )}

      {/* Selector manual de cualquier estado */}
      <div className="relative">
        <button
          onClick={() => setOpen(!open)}
          className={cn(
            'flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors',
            STATUS_COLORS[status],
            'hover:opacity-80'
          )}
        >
          {STATUS_LABELS[status]}
          <ChevronDown size={13} className={cn('transition-transform', open && 'rotate-180')} />
        </button>

        <AnimatePresence>
          {open && (
            <>
              <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
              <motion.div
                initial={{ opacity: 0, y: -8, scale: 0.95 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, y: -8, scale: 0.95 }}
                transition={{ duration: 0.12 }}
                className="absolute right-0 top-full mt-1 z-20 bg-card border border-border rounded-xl shadow-xl overflow-hidden w-56"
              >
                <p className="text-xs font-semibold text-muted-foreground px-3 pt-3 pb-1">Cambiar etapa</p>
                {STATUSES.map((s, i) => (
                  <button
                    key={s}
                    onClick={() => handleChange(s)}
                    className={cn(
                      'w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-accent transition-colors',
                      s === status && 'bg-accent'
                    )}
                  >
                    <span className={cn(
                      'w-2 h-2 rounded-full flex-shrink-0',
                      i < currentIndex && 'bg-green-400',
                      i === currentIndex && 'bg-primary',
                      i > currentIndex && 'bg-muted-foreground/30',
                    )} />
                    <span className={cn(s === status && 'font-semibold text-foreground', 'flex-1')}>
                      {STATUS_LABELS[s]}
                    </span>
                    {s === status && <Check size={13} className="text-primary" />}
                  </button>
                ))}
              </motion.div>
            </>
          )}
        </AnimatePresence>
      </div>
    </div>
  )
}