'use client'

import * as React from 'react'
import { Property, FilterState } from '@/lib/types'
import { mockProperties } from '@/lib/mock-data'
import { PropertyFilters } from '@/components/property/property-filters'
import { PropertyGrid } from '@/components/property/property-grid'

interface ListingsSectionProps {
  onSelectProperty?: (property: Property) => void
}

const initialFilters: FilterState = {
  state: '',
  city: '',
  neighborhood: '',
  propertyType: '',
  priceMin: 0,
  priceMax: 0,
  bedrooms: 'any',
  parkingSpaces: 'any',
  acceptsTrade: null,
  sortBy: 'relevance',
}

function filterProperties(properties: Property[], filters: FilterState): Property[] {
  return properties.filter((property) => {
    // Filter by property type
    if (filters.propertyType && property.propertyType !== filters.propertyType) {
      return false
    }

    // Filter by price
    if (filters.priceMin > 0 && property.price < filters.priceMin) {
      return false
    }
    if (filters.priceMax > 0 && property.price > filters.priceMax) {
      return false
    }

    // Filter by bedrooms
    if (filters.bedrooms !== 'any') {
      const minBedrooms = parseInt(filters.bedrooms)
      if (property.bedrooms < minBedrooms) {
        return false
      }
    }

    // Filter by parking
    if (filters.parkingSpaces !== 'any') {
      const minParking = parseInt(filters.parkingSpaces)
      if (property.parkingSpaces < minParking) {
        return false
      }
    }

    // Filter by trade acceptance
    if (filters.acceptsTrade === true && !property.acceptsTrade) {
      return false
    }

    return true
  }).sort((a, b) => {
    switch (filters.sortBy) {
      case 'price-asc':
        return a.price - b.price
      case 'price-desc':
        return b.price - a.price
      case 'newest':
        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      default:
        return (b.isPremium ? 1 : 0) - (a.isPremium ? 1 : 0)
    }
  })
}

export function ListingsSection({ onSelectProperty }: ListingsSectionProps) {
  const [filters, setFilters] = React.useState<FilterState>(initialFilters)
  
  const filteredProperties = filterProperties(mockProperties, filters)

  return (
    <section id="imoveis" className="py-16 lg:py-24">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center max-w-2xl mx-auto mb-10">
          <span className="text-primary font-medium text-sm uppercase tracking-wider">
            Nosso Portfólio
          </span>
          <h2 className="text-3xl lg:text-4xl font-bold text-foreground mt-2 mb-4 text-balance">
            Imóveis Disponíveis
          </h2>
          <p className="text-muted-foreground">
            Explore nossa seleção de imóveis premium e encontre o lugar perfeito para você.
          </p>
        </div>

        {/* Filters */}
        <PropertyFilters
          filters={filters}
          onFiltersChange={setFilters}
          resultsCount={filteredProperties.length}
          className="mb-8"
        />

        {/* Property grid */}
        <PropertyGrid
          properties={filteredProperties}
          onSelectProperty={onSelectProperty}
        />
      </div>
    </section>
  )
}