import React, { useState, useMemo } from 'react';
import dynamic from 'next/dynamic';

const MapWithNoSSR = dynamic(() => import('./MapComponent'), {
  ssr: false,
  loading: () => (
    <div className="tw-flex tw-items-center tw-justify-center tw-h-full tw-bg-white tw-rounded-3xl">
      <p className="tw-text-gray-500 tw-animate-pulse font-barlow">Cargando mapa...</p>
    </div>
  ),
});

// Interfaces para TypeScript
interface SelectOption {
  value: string;
  label: string;
}

interface CustomSelectProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  options: SelectOption[];
  placeholder: string;
  bgClass?: string;
}

// Componente de Select con Flecha Personalizada
const CustomSelect = ({ value, onChange, options, placeholder, bgClass = "tw-bg-white" }: CustomSelectProps) => (
  <div className="tw-relative tw-w-full">
    <select 
      value={value} 
      onChange={onChange} 
      className={`tw-w-full ${bgClass} tw-border-none tw-rounded-xl tw-p-4 tw-pr-10 tw-text-gray-500 tw-text-sm tw-shadow-sm tw-outline-none tw-appearance-none tw-cursor-pointer font-barlow`}
    >
      <option value="">{placeholder}</option>
      {options.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
    </select>
    <div className="tw-absolute tw-inset-y-0 tw-right-4 tw-flex tw-items-center tw-pointer-events-none">
      <svg className="tw-w-4 tw-h-4 tw-text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
      </svg>
    </div>
  </div>
);

const PropertyExplorer = () => {
  const [locationFilter, setLocationFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [sizeFilter, setSizeFilter] = useState('');

  const activeFiltersCount = [locationFilter, typeFilter, statusFilter, sizeFilter].filter(Boolean).length;

  const clearFilters = () => {
    setLocationFilter('');
    setTypeFilter('');
    setStatusFilter('');
    setSizeFilter('');
  };

  const mockProperties = [
    { id: '1', name: 'Loma Bonita Residencial', location: 'Tampico', status: 'SOLD OUT', bedrooms: 3, bathrooms: 3.5, models: '3 modelos', sqm: '248.89 m²', imageUrl: '/images/Mapa/loma-bonita.jpg', coordinates: [22.2543, -97.8634] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '2', name: 'Encinos Residencial', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 2.5, models: '4 modelos', sqm: '163.52 m²', imageUrl: '/images/Mapa/encinos-residencial.jpg', coordinates: [22.3958, -97.9351] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '3', name: 'Torre 829', location: 'Tampico', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 3, models: '4 modelos', sqm: '220.86 m²', imageUrl: '/images/Mapa/torre-829.jpg', coordinates: [22.2810, -97.8280] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '4', name: 'Townhouses', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 4.5, models: '2 modelos', sqm: '327.20 m²', imageUrl: '/images/Mapa/townhouses.jpg', coordinates: [22.4100, -97.9100] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '5', name: 'Coto Báltico', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 2.5, models: '5 modelos', sqm: '178.62 m²', imageUrl: '/images/Mapa/coto-baltico.jpg', coordinates: [22.3850, -97.9250] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '6', name: 'Torre Sorrento', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 3.5, models: '7 modelos', sqm: '149.37 m²', imageUrl: '/images/Mapa/torre-sorrento.jpg', coordinates: [22.3720, -97.9180] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '7', name: 'Torre Milos', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 2, bathrooms: 2, models: '2 modelos', sqm: '153.00 m²', imageUrl: '/images/Mapa/torre-milos.jpg', coordinates: [22.3680, -97.9150] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '8', name: 'Conjunto Cárdenas', location: 'Tampico', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 2, models: '12 Deptos', sqm: '79.68 m²', imageUrl: '/images/Mapa/conjunto-cardenas.jpg', coordinates: [22.2650, -97.8550] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '9', name: 'Arecas', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 2, bathrooms: 2, models: 'Prototipos', sqm: '87.20 m²', imageUrl: '/images/Mapa/arecas.jpg', coordinates: [22.4250, -97.9320] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '10', name: 'Conjunto Escuadrón 201', location: 'Tampico', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 3.5, models: '6 Casas', sqm: '153.56 m²', imageUrl: '/images/Mapa/escuadron-201.jpg', coordinates: [22.2750, -97.8450] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '11', name: 'Coto Jade', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 2, bathrooms: 1.5, models: '2 modelos', sqm: '80.39 m²', imageUrl: '/images/Mapa/coto-jade.jpg', coordinates: [22.4150, -97.9420] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '12', name: 'Paseos de Floresta', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 3, bathrooms: 2.5, models: '', sqm: '114.49 m²', imageUrl: '/images/Mapa/paseos-de-floresta.jpg', coordinates: [22.4300, -97.9500] as [number, number], whatsapp: '521234567890', externalUrl: '#' },
    { id: '13', name: 'Vista Laguna', location: 'Altamira', status: 'DISPONIBLE', bedrooms: 2, bathrooms: 1.5, models: '3 modelos', sqm: '80.39 m²', imageUrl: '/images/Mapa/vista-laguna.jpg', coordinates: [22.4400, -97.9600] as [number, number], whatsapp: '521234567890', externalUrl: '#' }
  ];

  const handleMarkerClick = (id: string) => {
    const element = document.getElementById(`card-${id}`);
    if (element) {
      // Cambiamos 'nearest' por 'center' para que la tarjeta quede bien en medio de la pantalla
      element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
      
      // Clases de Tailwind para un resaltado mucho más notorio
      const highlightClasses = [
        'tw-ring-4',             // Borde más grueso
        'tw-ring-[#8C745B]',     // Color del borde
        'tw-ring-offset-4',      // Separación entre la tarjeta y el borde
        'tw-scale-[1.03]',       // Ligero efecto de zoom
        'tw-shadow-2xl',         // Sombra mucho más grande
        'tw-z-10'                // Asegura que se sobreponga a las demás tarjetas
      ];

      // Agregamos las clases
      element.classList.add(...highlightClasses);

      // Aumentamos un poco el tiempo a 2.5 segundos para que el usuario alcance a verlo bien
      setTimeout(() => {
        element.classList.remove(...highlightClasses);
      }, 2500);
    }
  };

  const filteredProperties = useMemo(() => {
    return mockProperties.filter(prop => {
      const matchesLocation = locationFilter === '' || prop.location.toLowerCase() === locationFilter.toLowerCase();
      const name = prop.name.toLowerCase();
      const matchesType = typeFilter === '' || 
        (typeFilter === 'casa' && (name.includes('residencial') || name.includes('coto') || name.includes('house') || name.includes('floresta') || name.includes('arecas'))) ||
        (typeFilter === 'depa' && (name.includes('torre') || name.includes('conjunto') || name.includes('deptos') || name.includes('laguna') || name.includes('sorrento')));
      const matchesStatus = statusFilter === '' || prop.status.replace(/\s/g, '').toLowerCase() === statusFilter.toLowerCase();
      const areaValue = parseFloat(prop.sqm.replace(/[^\d.]/g, ''));
      const matchesSize = sizeFilter === '' || 
        (sizeFilter === 'small' && areaValue < 150) || 
        (sizeFilter === 'large' && areaValue >= 150);

      return matchesLocation && matchesType && matchesStatus && matchesSize;
    });
  }, [locationFilter, typeFilter, statusFilter, sizeFilter]);

  return (
    <div className="tw-bg-white font-barlow">
      {/* 1. CABECERA */}
      <header className="tw-container tw-mx-auto tw-pt-16 tw-pb-10 tw-px-4 md:tw-px-10 tw-max-w-[1440px]">
        <div className="tw-flex tw-flex-col md:tw-flex-row tw-justify-between tw-items-start md:tw-items-end tw-gap-6">
          <div className="tw-max-w-xl">
            <h3 className="tw-text-[#ae9c80] tw-font-bold tw-uppercase tw-tracking-widest tw-text-sm tw-mb-4">Donde tu inversión se consolida</h3>
            <h2 className="tw-text-4xl md:tw-text-6xl tw-font-bold tw-text-[#ae9c80] tw-leading-tight">Ciudades para<br />vivir plenamente</h2>
          </div>
          <div className="md:tw-w-1/3">
            <p className="tw-text-[#545353] tw-text-lg tw-leading-relaxed">Descubre nuestros desarrollos y contáctanos para obtener más información.</p>
          </div>
        </div>
      </header>

      {/* 2. CONTENIDO PRINCIPAL */}
      <main className="tw-bg-[#f4f4f4] tw-py-10">
        <div className="tw-container tw-mx-auto tw-px-4 md:tw-px-10 tw-max-w-[1440px] tw-flex tw-flex-col">
          
          {/* MAPA MÓVIL */}
          <div className="tw-order-1 lg:tw-hidden tw-mb-6">
             <div className="tw-rounded-3xl tw-overflow-hidden tw-shadow-sm tw-h-[450px]">
               <MapWithNoSSR properties={filteredProperties} onMarkerClick={handleMarkerClick} />
             </div>
          </div>

          {/* BARRA DE FILTROS */}
          <div className="tw-order-2 tw-mb-8">
            {/* DESPLEGABLE MÓVIL */}
            <details className="tw-group lg:tw-hidden tw-bg-white tw-rounded-xl tw-shadow-sm tw-overflow-hidden">
              <summary className="tw-p-5 tw-font-bold tw-text-[#ae9c80] tw-flex tw-justify-between tw-items-center tw-list-none tw-cursor-pointer">
                 <div className="tw-flex tw-items-center tw-gap-3">
                   <div className="tw-bg-[#ae9c80] tw-text-white tw-w-6 tw-h-6 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[10px]">{activeFiltersCount}</div>
                   <span className="tw-uppercase tw-tracking-wider tw-text-sm">Filtrar Propiedades</span>
                 </div>
                 <svg className="tw-w-5 tw-h-5 tw-transition-transform tw-duration-300 group-open:tw-rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                 </svg>
              </summary>
              <div className="tw-p-5 tw-pt-0 tw-flex tw-flex-col tw-gap-4">
                <CustomSelect value={locationFilter} onChange={(e) => setLocationFilter(e.target.value)} placeholder="Ubicación" bgClass="tw-bg-[#f9f9f9]" options={[{value: "tampico", label: "Tampico"}, {value: "altamira", label: "Altamira"}]} />
                <CustomSelect value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)} placeholder="Tipo" bgClass="tw-bg-[#f9f9f9]" options={[{value: "casa", label: "Casas / Residencial"}, {value: "depa", label: "Departamentos / Torres"}]} />
                <CustomSelect value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} placeholder="Etapa" bgClass="tw-bg-[#f9f9f9]" options={[{value: "disponible", label: "Disponible"}, {value: "soldout", label: "Sold Out"}]} />
                <CustomSelect value={sizeFilter} onChange={(e) => setSizeFilter(e.target.value)} placeholder="Metros²" bgClass="tw-bg-[#f9f9f9]" options={[{value: "small", label: "Menos de 150 m²"}, {value: "large", label: "150 m² o más"}]} />
                <button onClick={clearFilters} className="tw-text-red-400 tw-text-xs tw-font-bold tw-uppercase tw-pt-2 tw-text-left">Limpiar filtros</button>
              </div>
            </details>

            {/* BARRA DESKTOP */}
            <div className="tw-hidden lg:tw-flex lg:tw-flex-row lg:tw-items-center tw-gap-6">
              <div className="tw-flex-1 tw-grid tw-grid-cols-4 tw-gap-4">
                <CustomSelect value={locationFilter} onChange={(e) => setLocationFilter(e.target.value)} placeholder="Ubicación" options={[{value: "tampico", label: "Tampico"}, {value: "altamira", label: "Altamira"}]} />
                <CustomSelect value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)} placeholder="Tipo de Propiedad" options={[{value: "casa", label: "Casas / Residencial"}, {value: "depa", label: "Departamentos / Torres"}]} />
                <CustomSelect value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} placeholder="Etapa" options={[{value: "disponible", label: "Disponible"}, {value: "soldout", label: "Sold Out"}]} />
                <CustomSelect value={sizeFilter} onChange={(e) => setSizeFilter(e.target.value)} placeholder="M² Construcción" options={[{value: "small", label: "Menos de 150 m²"}, {value: "large", label: "150 m² o más"}]} />
              </div>
              <div className="tw-flex tw-items-center tw-justify-end tw-gap-6 tw-min-w-[220px]">
                <span className="tw-text-gray-400 tw-text-sm">{activeFiltersCount} Filtros</span>
                <button onClick={clearFilters} className="tw-text-gray-400 hover:tw-text-[#ae9c80] tw-text-sm tw-underline tw-underline-offset-4 transition-colors">Limpiar filtros</button>
              </div>
            </div>
          </div>

          <div className="tw-order-3 tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-8 tw-items-start">
            <div className="tw-hidden lg:tw-block tw-rounded-3xl tw-overflow-hidden tw-shadow-sm lg:tw-h-[800px] lg:tw-sticky lg:tw-top-10">
              <MapWithNoSSR properties={filteredProperties} onMarkerClick={handleMarkerClick} />
            </div>

            <div className="tw-flex tw-overflow-x-auto tw-p-4 tw-pb-6 tw-gap-4 tw-snap-x tw-snap-mandatory lg:tw-grid lg:tw-grid-cols-2 lg:tw-overflow-y-auto lg:tw-max-h-[790px] lg:tw-p-4 scroll-custom">
                {filteredProperties.map((prop) => (
                  <div key={prop.id} id={`card-${prop.id}`} className="tw-min-w-[85vw] tw-snap-center sm:tw-min-w-[300px] lg:tw-min-w-0 tw-bg-white tw-rounded-2xl tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-transition-all tw-duration-300">
                    <div className="tw-h-52 tw-relative">
                      <div className="tw-absolute tw-inset-0 tw-bg-cover tw-bg-center" style={{ backgroundImage: `url(${prop.imageUrl})` }} />
                      <span className={`tw-absolute tw-bottom-3 tw-left-4 tw-px-3 tw-py-1 tw-text-[10px] tw-font-bold tw-rounded-md ${prop.status === 'SOLD OUT' ? 'tw-bg-gray-200 tw-text-gray-600' : 'tw-bg-[#D4E8B0] tw-text-[#4A5D23]'}`}>
                        {prop.status}
                      </span>
                    </div>
                    <div className="tw-p-5 tw-flex tw-flex-col tw-gap-3">
                      <h4 className="tw-font-bold tw-text-lg tw-text-gray-800 tw-leading-tight">{prop.name}</h4>
                      <div className="tw-flex tw-items-center tw-justify-between tw-text-xs tw-text-gray-600">
                        <span className="tw-flex tw-items-center tw-gap-1.5"><img src="/images/Mapa/ubicacion.png" alt="" className="tw-w-3.5 tw-h-3.5 tw-object-contain" />{prop.location}</span>
                        {prop.models && <span className="tw-flex tw-items-center tw-gap-1.5"><img src="/images/Mapa/modelos.png" alt="" className="tw-w-3.5 tw-h-3.5 tw-object-contain" />{prop.models}</span>}
                      </div>
                      <div className="tw-grid tw-grid-cols-3 tw-gap-1 tw-mt-1 tw-pt-3 tw-border-t tw-border-gray-50 tw-text-[10px] tw-text-gray-500 tw-font-medium">
                        <span className="tw-flex tw-items-center tw-gap-1"><img src="/images/Mapa/recamaras.png" alt="" className="tw-w-3.5 tw-h-3.5 tw-object-contain" />{prop.bedrooms} Rec.</span>
                        <span className="tw-flex tw-items-center tw-gap-1"><img src="/images/Mapa/banos.png" alt="" className="tw-w-3.5 tw-h-3.5 tw-object-contain" />{prop.bathrooms} Baños</span>
                        <span className="tw-flex tw-items-center tw-gap-1"><img src="/images/Mapa/metros-cuadrados.png" alt="" className="tw-w-3.5 tw-h-3.5 tw-object-contain" />{prop.sqm}</span>
                      </div>
                      <div className="tw-mt-4 tw-flex tw-gap-2">
                        <a href={`https://wa.me/${prop.whatsapp}`} target="_blank" rel="noopener noreferrer" className="tw-flex-1 tw-flex tw-items-center tw-justify-center tw-gap-2 tw-bg-[#25D366] tw-text-white tw-py-2.5 tw-rounded-xl tw-text-[10px] tw-font-bold tw-uppercase hover:tw-bg-[#1da851] hover:tw-text-white transition-colors">Contactar</a>
                        <a href={prop.externalUrl} className="tw-flex-1 tw-text-center tw-bg-[#8C745B] tw-text-white tw-py-2.5 tw-rounded-xl tw-text-[10px] tw-font-bold tw-uppercase hover:tw-bg-[#76614c] hover:tw-text-white transition-colors">Conoce más</a>
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </main>

      <style jsx>{`
        .scroll-custom::-webkit-scrollbar { width: 6px; }
        .scroll-custom::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 10px; }
        summary::-webkit-details-marker { display: none; }
      `}</style>
    </div>
  );
};

export default PropertyExplorer;