'use client'

import { useState, useEffect, useRef } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowRight, ArrowLeft } from 'lucide-react'
import { getProperties, getPropertyCardImage } from '@/lib/properties'
import type { PropertyMeta } from '@/lib/properties'
import { getTranslation } from '@/lib/i18n'
import { useLanguage } from '@/lib/LanguageContext'
import type { Language } from '@/lib/i18n'

type CarouselItem = { slug: string; title: string; location: string; price: string; image: string }

const CARD_WIDTH = 320
const GAP = 24
const VISIBLE_DESKTOP = 4
const VISIBLE_TABLET = 3
const VISIBLE_MOBILE = 2

/** Solo propiedades destacadas (cargadas manualmente en lib/properties). Sin API. */
export default function HomePropertiesCarousel() {
  const { language } = useLanguage()
  const lang = language as Language
  const [items, setItems] = useState<CarouselItem[]>([])
  const [index, setIndex] = useState(0)
  const [visibleCount, setVisibleCount] = useState(VISIBLE_DESKTOP)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const list = getProperties()
    setItems(
      list.map((p) => ({
        slug: p.slug,
        title: (p.title && typeof p.title === 'object' ? p.title[lang] : '') as string,
        location: (p.location && typeof p.location === 'object' ? p.location[lang] : '') as string,
        price: (p.price && typeof p.price === 'object' ? p.price[lang] : '') as string,
        image: getPropertyCardImage(p as PropertyMeta),
      }))
    )
  }, [lang])

  useEffect(() => {
    const updateVisible = () => {
      const w = typeof window !== 'undefined' ? window.innerWidth : 1024
      if (w < 640) setVisibleCount(VISIBLE_MOBILE)
      else if (w < 1024) setVisibleCount(VISIBLE_TABLET)
      else setVisibleCount(VISIBLE_DESKTOP)
    }
    updateVisible()
    window.addEventListener('resize', updateVisible)
    return () => window.removeEventListener('resize', updateVisible)
  }, [])

  const maxIndex = Math.max(0, items.length - visibleCount)
  const goNext = () => setIndex((i) => Math.min(i + 1, maxIndex))
  const goPrev = () => setIndex((i) => Math.max(0, i - 1))

  if (items.length === 0) return null

  return (
    <section className="py-16 sm:py-20 md:py-24 bg-white border-t border-brand-accent/10">
      <div className="container mx-auto px-4 sm:px-6 mb-10 sm:mb-12 flex flex-col sm:flex-row sm:items-end justify-between gap-4">
        <div>
          <span className="text-[10px] uppercase tracking-[0.5em] text-brand-primary font-bold mb-2 block">
            {getTranslation(language, 'properties.listSubtitle')}
          </span>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-extrabold tracking-tighter uppercase leading-tight">
            {getTranslation(language, 'properties.listTitle')}
          </h2>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={goPrev}
            disabled={index === 0}
            className="w-10 h-10 rounded-full border-2 border-brand-accent/40 flex items-center justify-center text-brand-text hover:border-brand-primary hover:text-brand-primary disabled:opacity-40 disabled:pointer-events-none transition-colors"
            aria-label={getTranslation(language, 'properties.viewAll')}
          >
            <ArrowLeft size={18} />
          </button>
          <button
            type="button"
            onClick={goNext}
            disabled={index >= maxIndex}
            className="w-10 h-10 rounded-full border-2 border-brand-accent/40 flex items-center justify-center text-brand-text hover:border-brand-primary hover:text-brand-primary disabled:opacity-40 disabled:pointer-events-none transition-colors"
            aria-label={getTranslation(language, 'properties.viewAll')}
          >
            <ArrowRight size={18} />
          </button>
          <Link
            href={`/${language}/our-properties`}
            className="inline-flex items-center gap-2 text-xs sm:text-sm font-bold uppercase tracking-widest border-b-2 border-black pb-1.5 hover:text-brand-primary hover:border-brand-primary transition-colors"
          >
            {getTranslation(language, 'properties.viewAll')}
            <ArrowRight size={14} />
          </Link>
        </div>
      </div>

      <div ref={containerRef} className="container mx-auto px-4 sm:px-6 overflow-hidden">
        <div
          className="flex gap-4 sm:gap-6 transition-transform duration-300 ease-out"
          style={{
            transform: `translateX(-${index * (CARD_WIDTH + GAP)}px)`,
          }}
        >
          {items.map((item) => (
            <Link
              key={item.slug}
              href={`/${language}/properties/${item.slug}`}
              className="group flex-shrink-0 w-[280px] sm:w-[300px] md:w-[320px]"
            >
              <div className="relative aspect-[4/5] rounded-xl sm:rounded-2xl overflow-hidden bg-gray-100 mb-4">
                {item.image ? (
                  <Image
                    src={item.image}
                    alt={item.title || item.slug}
                    fill
                    sizes="(max-width: 640px) 280px, (max-width: 768px) 300px, 320px"
                    className="object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-brand-text/50 text-sm">
                    {getTranslation(language, 'properties.noImage')}
                  </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                <div className="absolute bottom-4 left-4 right-4 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity">
                  <span className="text-white text-[10px] font-bold uppercase tracking-widest border border-white/80 px-3 py-1.5 rounded-lg">
                    {getTranslation(language, 'properties.viewProperty')}
                  </span>
                </div>
              </div>
              <h3 className="text-base sm:text-lg font-bold uppercase tracking-tight text-black group-hover:text-brand-primary transition-colors mb-1">
                {item.title}
              </h3>
              {item.location && (
                <p className="text-xs text-gray-600 mb-1">{item.location}</p>
              )}
              {item.price && (
                <p className="text-sm font-semibold text-brand-primary">{item.price}</p>
              )}
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}