'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { propertyStatuses } from '@/lib/validations/property'
import type { PropertyStatus } from '@/lib/validations/property'

interface Props {
  propertyId: string
  currentStatus: PropertyStatus
  readOnly?: boolean
}

/**
 * Cambia el status de una Property. Al cambiar, el endpoint crea
 * automáticamente un PropertyAdvance(STATUS_CHANGE).
 */
export function PropertyActionCard({ propertyId, currentStatus, readOnly = false }: Props) {
  const router = useRouter()
  const [status, setStatus] = useState<PropertyStatus>(currentStatus)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

  async function changeStatus(newStatus: PropertyStatus) {
    if (readOnly || newStatus === status) return
    setSaving(true)
    setError('')
    setSuccess('')
    try {
      const res = await fetch(`/api/admin/properties/${propertyId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus }),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({}))
        throw new Error(err.error || `Update failed (${res.status})`)
      }
      setStatus(newStatus)
      setSuccess('Status updated.')
      router.refresh()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Update failed')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="bg-white rounded-lg shadow-sm border p-6">
      <h2 className="text-lg font-semibold mb-3 text-[#1D2019]">Pipeline status</h2>

      {error && (
        <p className="text-sm text-red-600 mb-2" role="alert">
          {error}
        </p>
      )}
      {success && (
        <p className="text-sm text-green-600 mb-2">{success}</p>
      )}

      <div className="flex flex-wrap gap-2">
        {propertyStatuses.map((s) => {
          const isCurrent = s === status
          return (
            <button
              key={s}
              onClick={() => changeStatus(s)}
              disabled={readOnly || saving || isCurrent}
              className={`text-xs px-3 py-1.5 rounded border transition ${
                isCurrent
                  ? 'bg-[#374527] text-white border-[#374527] cursor-default'
                  : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 disabled:opacity-50'
              }`}
            >
              {s.replace(/_/g, ' ')}
            </button>
          )
        })}
      </div>

      {readOnly && (
        <p className="text-xs text-gray-500 mt-3">Read-only view.</p>
      )}
    </div>
  )
}