'use client'

import { useState } from 'react'
import { getTranslation, type Language } from '@/lib/i18n'
import type { CategoryNodeDTO } from '@/lib/api/cms'

const CMS = (process.env.NEXT_PUBLIC_CMS_URL || 'https://cms.kevinvictorrealestate.com').replace(
  /\/+$/,
  ''
)

const STEPS = ['stepProperty', 'stepPricing', 'stepContact', 'stepPhotos'] as const

interface Props {
  lang: Language
  categories: CategoryNodeDTO[]
}

export default function OwnerForm({ lang, categories }: Props) {
  const t = (k: string) => getTranslation(lang, k)
  const [step, setStep] = useState(0)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [done, setDone] = useState(false)

  // Un solo objeto para todo el formulario: los campos se leen por nombre
  // al enviar, así que añadir un campo es añadirle una key aquí.
  const [form, setForm] = useState({
    // propiedad
    categorySlug: '',
    title: '',
    description: '',
    amenities: '',
    address: '',
    // precios
    nightlyRate: '',
    cleaningFee: '',
    minNights: '1',
    bedrooms: '',
    bathrooms: '',
    guests: '',
    // contacto
    hostName: '',
    guestEmail: '',
    hostPhone: '',
    website: '',
  })

  const [files, setFiles] = useState<File[]>([])

  function set<K extends keyof typeof form>(key: K, value: string) {
    setForm((f) => ({ ...f, [key]: value }))
  }

  const vacacionales = categories.find((c) => c.kind === 'VACATION')

  /** Valida el paso actual antes de avanzar. Devuelve el texto de error. */
  function validateCurrent(): string | null {
    if (step === 0) {
      if (form.title.trim().length < 5) return 'Title: at least 5 characters.'
      if (form.description.trim().length < 20) return 'Description: at least 20 characters.'
    }
    if (step === 1) {
      const rate = Number(form.nightlyRate)
      if (!Number.isFinite(rate) || rate <= 0) return 'Nightly rate must be greater than 0.'
    }
    if (step === 2) {
      if (form.hostName.trim().length < 2) return 'Name: at least 2 characters.'
      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.guestEmail)) return 'Invalid email.'
    }
    return null
  }

  function next() {
    const err = validateCurrent()
    if (err) {
      setError(err)
      return
    }
    setError(null)
    setStep((s) => Math.min(s + 1, STEPS.length - 1))
  }

  async function submit() {
    const err = validateCurrent()
    if (err) {
      setError(err)
      return
    }
    setBusy(true)
    setError(null)

    try {
      const amenities = form.amenities
        .split(',')
        .map((a) => a.trim())
        .filter(Boolean)
        .slice(0, 30)

      const payload = {
        title: form.title.trim(),
        description: form.description.trim(),
        nightlyRate: Number(form.nightlyRate),
        cleaningFee: form.cleaningFee ? Number(form.cleaningFee) : undefined,
        minNights: Number(form.minNights) || 1,
        bedrooms: form.bedrooms ? Number(form.bedrooms) : undefined,
        bathrooms: form.bathrooms ? Number(form.bathrooms) : undefined,
        guests: form.guests ? Number(form.guests) : undefined,
        amenities,
        address: form.address.trim() || undefined,
        categorySlug: form.categorySlug || undefined,
        hostName: form.hostName.trim(),
        guestEmail: form.guestEmail.trim(),
        hostPhone: form.hostPhone.trim() || undefined,
        website: form.website || undefined,
      }

      const res = await fetch(`${CMS}/api/public/rentals/`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })

      const json = await res.json().catch(() => ({}) as Record<string, unknown>)
      if (!res.ok) {
        setError(
          (json.detail as string) || (json.error as string) || t('rentals.errorGeneric')
        )
        return
      }

      const rentalId = (json.rental as { id?: string } | undefined)?.id
      if (rentalId && files.length > 0) {
        const fd = new FormData()
        for (const f of files) fd.append('files', f)
        const up = await fetch(`${CMS}/api/public/rentals/${rentalId}/images/`, {
          method: 'POST',
          body: fd,
        })
        // La propiedad ya quedó publicada aunque las fotos fallen: avisamos
        // pero no damos el alta por perdida.
        if (!up.ok) {
          setError('Property published, but some photos failed to upload.')
          setDone(true)
          return
        }
      }

      setDone(true)
    } catch {
      setError(t('rentals.errorGeneric'))
    } finally {
      setBusy(false)
    }
  }

  if (done) {
    return (
      <div className="rounded-lg border border-green-200 bg-green-50 p-8 text-center">
        <h2 className="mb-2 text-2xl font-semibold text-green-900">{t('rentals.successTitle')}</h2>
        <p className="text-green-800">{t('rentals.successIntro')}</p>
        {error && <p className="mt-4 text-sm text-amber-800">{error}</p>}
      </div>
    )
  }

  const input =
    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-brand-primary focus:outline-none'
  const label = 'mb-1 block text-sm font-medium text-gray-700'

  return (
    <div className="mx-auto max-w-2xl">
      {/* Indicador de pasos */}
      <ol className="mb-8 flex flex-wrap gap-2 text-sm">
        {STEPS.map((s, i) => (
          <li
            key={s}
            className={
              i === step
                ? 'rounded-full bg-brand-primary px-3 py-1 font-semibold text-white'
                : i < step
                  ? 'rounded-full bg-green-100 px-3 py-1 text-green-800'
                  : 'rounded-full bg-gray-100 px-3 py-1 text-gray-500'
            }
          >
            {i + 1}. {t(`rentals.${s}`)}
          </li>
        ))}
      </ol>

      <div className="space-y-4">
        {step === 0 && (
          <>
            {vacacionales && vacacionales.children.length > 0 && (
              <div>
                <label className={label} htmlFor="categorySlug">
                  {t('rentals.formCategory')}
                </label>
                <select
                  id="categorySlug"
                  className={input}
                  value={form.categorySlug}
                  onChange={(e) => set('categorySlug', e.target.value)}
                >
                  <option value="">—</option>
                  {vacacionales.children.map((c) => (
                    <option key={c.id} value={c.slug}>
                      {c.name}
                    </option>
                  ))}
                </select>
              </div>
            )}

            <div>
              <label className={label} htmlFor="title">
                {t('rentals.formTitle')}
              </label>
              <input
                id="title"
                className={input}
                value={form.title}
                onChange={(e) => set('title', e.target.value)}
              />
            </div>

            <div>
              <label className={label} htmlFor="description">
                {t('rentals.formDescription')}
              </label>
              <textarea
                id="description"
                rows={6}
                className={input}
                value={form.description}
                onChange={(e) => set('description', e.target.value)}
              />
            </div>

            <div>
              <label className={label} htmlFor="amenities">
                {t('rentals.formAmenities')}
              </label>
              <input
                id="amenities"
                className={input}
                value={form.amenities}
                onChange={(e) => set('amenities', e.target.value)}
              />
            </div>

            <div>
              <label className={label} htmlFor="address">
                {t('rentals.formAddress')}
              </label>
              <input
                id="address"
                className={input}
                value={form.address}
                onChange={(e) => set('address', e.target.value)}
              />
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <div>
              <label className={label} htmlFor="nightlyRate">
                {t('rentals.formNightlyRate')}
              </label>
              <input
                id="nightlyRate"
                type="number"
                min="1"
                step="1"
                className={input}
                value={form.nightlyRate}
                onChange={(e) => set('nightlyRate', e.target.value)}
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className={label} htmlFor="cleaningFee">
                  {t('rentals.formCleaningFee')}
                </label>
                <input
                  id="cleaningFee"
                  type="number"
                  min="0"
                  step="1"
                  className={input}
                  value={form.cleaningFee}
                  onChange={(e) => set('cleaningFee', e.target.value)}
                />
              </div>
              <div>
                <label className={label} htmlFor="minNights">
                  {t('rentals.formMinNights')}
                </label>
                <input
                  id="minNights"
                  type="number"
                  min="1"
                  max="90"
                  className={input}
                  value={form.minNights}
                  onChange={(e) => set('minNights', e.target.value)}
                />
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4">
              <div>
                <label className={label} htmlFor="bedrooms">
                  {t('rentals.bedrooms')}
                </label>
                <input
                  id="bedrooms"
                  type="number"
                  min="0"
                  className={input}
                  value={form.bedrooms}
                  onChange={(e) => set('bedrooms', e.target.value)}
                />
              </div>
              <div>
                <label className={label} htmlFor="bathrooms">
                  {t('rentals.bathrooms')}
                </label>
                <input
                  id="bathrooms"
                  type="number"
                  min="0"
                  step="0.5"
                  className={input}
                  value={form.bathrooms}
                  onChange={(e) => set('bathrooms', e.target.value)}
                />
              </div>
              <div>
                <label className={label} htmlFor="guests">
                  {t('rentals.guests')}
                </label>
                <input
                  id="guests"
                  type="number"
                  min="1"
                  className={input}
                  value={form.guests}
                  onChange={(e) => set('guests', e.target.value)}
                />
              </div>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <div>
              <label className={label} htmlFor="hostName">
                {t('rentals.yourName')}
              </label>
              <input
                id="hostName"
                className={input}
                value={form.hostName}
                onChange={(e) => set('hostName', e.target.value)}
              />
            </div>
            <div>
              <label className={label} htmlFor="guestEmail">
                {t('rentals.yourEmail')}
              </label>
              <input
                id="guestEmail"
                type="email"
                className={input}
                value={form.guestEmail}
                onChange={(e) => set('guestEmail', e.target.value)}
              />
            </div>
            <div>
              <label className={label} htmlFor="hostPhone">
                {t('rentals.yourPhone')}
              </label>
              <input
                id="hostPhone"
                className={input}
                value={form.hostPhone}
                onChange={(e) => set('hostPhone', e.target.value)}
              />
            </div>

            {/* Honeypot: invisible para humanos, relleno = bot. El CMS lo
                rechaza; el label existe para que los bots lo llenen. */}
            <div className="hidden" aria-hidden="true">
              <label htmlFor="website">{t('rentals.honeypotLabel')}</label>
              <input
                id="website"
                tabIndex={-1}
                autoComplete="off"
                value={form.website}
                onChange={(e) => set('website', e.target.value)}
              />
            </div>
          </>
        )}

        {step === 3 && (
          <div>
            <label className={label} htmlFor="photos">
              {t('rentals.formPhotos')}
            </label>
            <input
              id="photos"
              type="file"
              accept="image/jpeg,image/png,image/webp"
              multiple
              className={input}
              onChange={(e) => setFiles(Array.from(e.target.files ?? []).slice(0, 12))}
            />
            <p className="mt-1 text-xs text-gray-500">{t('rentals.formPhotosHint')}</p>
            {files.length > 0 && (
              <p className="mt-2 text-sm text-gray-700">
                {files.length} · {files.map((f) => f.name).join(', ')}
              </p>
            )}
          </div>
        )}
      </div>

      {error && (
        <p role="alert" className="mt-4 rounded bg-red-50 p-3 text-sm text-red-700">
          {error}
        </p>
      )}

      <div className="mt-8 flex gap-3">
        {step > 0 && (
          <button
            type="button"
            onClick={() => {
              setError(null)
              setStep((s) => s - 1)
            }}
            className="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium"
          >
            {t('rentals.back')}
          </button>
        )}

        {step < STEPS.length - 1 ? (
          <button
            type="button"
            onClick={next}
            className="rounded-lg bg-brand-primary px-5 py-2 text-sm font-medium text-white hover:bg-brand-darkGreen"
          >
            {t('rentals.next')}
          </button>
        ) : (
          <button
            type="button"
            onClick={submit}
            disabled={busy}
            className="rounded-lg bg-brand-primary px-5 py-2 text-sm font-medium text-white hover:bg-brand-darkGreen disabled:opacity-50"
          >
            {busy ? t('rentals.submitting') : t('rentals.submit')}
          </button>
        )}
      </div>
    </div>
  )
}