'use client'

import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { Search } from 'lucide-react'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'
import { getHomeFilters } from '@/lib/searchFilters'

export default function HomePropertySearch() {
  const { language } = useLanguage()
  const searchParams = useSearchParams()
  const filters = getHomeFilters()
  const [values, setValues] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {}
    filters.forEach((f) => {
      initial[f.param] = searchParams?.get(f.param) ?? ''
    })
    return initial
  })

  useEffect(() => {
    const next: Record<string, string> = {}
    filters.forEach((f) => {
      next[f.param] = searchParams?.get(f.param) ?? ''
    })
    setValues(next)
  }, [searchParams])

  return (
    <section className="relative py-12 md:py-20 px-4 sm:px-6 bg-white border-b border-brand-accent/10">
      <div className="container mx-auto max-w-4xl">
        {/* Bloque de copy — estilo alineado con About Kevin: centrado, label + título + subtítulo */}
        <div className="mb-8 md:mb-10 text-center">
          <p className="text-xs sm:text-sm uppercase tracking-[0.3em] sm:tracking-[0.4em] text-brand-primary mb-4 sm:mb-6 font-semibold">
            {getTranslation(language, 'homeSearchCopy.label')}
          </p>
          <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-tighter uppercase mb-4 leading-tight text-brand-text">
            {getTranslation(language, 'homeSearchCopy.titleLine1')}
            <br />
            {getTranslation(language, 'homeSearchCopy.titleLine2')}
          </h2>
          <p className="text-base md:text-lg font-medium text-brand-text mb-6 max-w-2xl mx-auto">
            {getTranslation(language, 'homeSearchCopy.subtitle')}
          </p>
        </div>

        <form action={`/${language}/properties`} method="get">
          {/* Móvil: apilado en tarjeta. Desktop: una sola fila alineada */}
          <div className="bg-brand-light/50 md:bg-transparent rounded-2xl border-2 border-brand-accent/20 md:border-0 p-4 md:p-0">
            <div className="flex flex-col md:flex-row md:items-end gap-3 md:gap-4 flex-wrap">
              {filters.map((filter) => (
                <div key={filter.param} className={`min-w-0 ${filter.param === 'area' || filter.param === 'type' ? 'flex-1 md:min-w-[140px]' : 'md:w-28'}`}>
                  <label className="block text-xs font-semibold uppercase tracking-wider text-brand-primary mb-1.5">
                    {getTranslation(language, filter.labelKey)}
                  </label>
                  <select
                    name={filter.param}
                    value={values[filter.param] ?? ''}
                    onChange={(e) => setValues((prev) => ({ ...prev, [filter.param]: e.target.value }))}
                    className="w-full min-w-0 px-3 md:px-4 py-3.5 rounded-xl border-2 border-brand-accent/30 bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary text-brand-text text-base"
                    aria-label={getTranslation(language, filter.labelKey)}
                  >
                    <option value="">{getTranslation(language, 'searchFilters.any')}</option>
                    {filter.options?.filter((o) => o.value !== '').map((opt) => (
                      <option key={opt.value} value={opt.value}>
                        {opt.labelKey ? getTranslation(language, opt.labelKey) : ('label' in opt ? opt.label : opt.value) ?? opt.value}
                      </option>
                    ))}
                  </select>
                </div>
              ))}
              <button
                type="submit"
                className="w-full md:w-auto md:shrink-0 px-8 py-4 md:py-3.5 rounded-xl bg-brand-primary text-white font-semibold uppercase tracking-wide hover:bg-brand-darkGreen transition-colors flex items-center justify-center gap-2 min-h-[48px] text-base"
              >
                <Search size={20} />
                {getTranslation(language, 'homeSearch.searchButton')}
              </button>
            </div>
          </div>
        </form>

        <p className="text-center mt-6">
          <Link
            href={`/${language}/properties`}
            className="text-brand-primary font-semibold uppercase tracking-wide hover:underline"
          >
            {getTranslation(language, 'homeSearch.viewAll')} →
          </Link>
        </p>
      </div>
    </section>
  )
}