'use client'

import * as React from 'react'
import { Search, SlidersHorizontal, X, ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import { FilterState } from '@/lib/types'
import { states, cities, neighborhoods, propertyTypes } from '@/lib/mock-data'
import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from '@/components/ui/sheet'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'

interface PropertyFiltersProps {
  filters: FilterState
  onFiltersChange: (filters: FilterState) => void
  resultsCount?: number
  className?: string
}

const bedroomOptions = [
  { value: 'any', label: 'Qualquer' },
  { value: '1', label: '1+' },
  { value: '2', label: '2+' },
  { value: '3', label: '3+' },
  { value: '4', label: '4+' },
]

const parkingOptions = [
  { value: 'any', label: 'Qualquer' },
  { value: '1', label: '1+' },
  { value: '2', label: '2+' },
  { value: '3', label: '3+' },
]

const sortOptions = [
  { value: 'relevance', label: 'Relevância' },
  { value: 'price-asc', label: 'Menor Preço' },
  { value: 'price-desc', label: 'Maior Preço' },
  { value: 'newest', label: 'Mais Recentes' },
]

function formatPriceLabel(value: number): string {
  if (value >= 1000000) {
    return `R$ ${(value / 1000000).toFixed(1)}M`
  }
  return `R$ ${(value / 1000).toFixed(0)}K`
}

export function PropertyFilters({ 
  filters, 
  onFiltersChange,
  resultsCount,
  className 
}: PropertyFiltersProps) {
  const [isOpen, setIsOpen] = React.useState(false)
  const [localFilters, setLocalFilters] = React.useState(filters)

  const updateFilter = <K extends keyof FilterState>(key: K, value: FilterState[K]) => {
    const newFilters = { ...localFilters, [key]: value }
    
    // Reset dependent filters
    if (key === 'state') {
      newFilters.city = ''
      newFilters.neighborhood = ''
    }
    if (key === 'city') {
      newFilters.neighborhood = ''
    }
    
    setLocalFilters(newFilters)
    onFiltersChange(newFilters)
  }

  const clearFilters = () => {
    const clearedFilters: FilterState = {
      state: '',
      city: '',
      neighborhood: '',
      propertyType: '',
      priceMin: 0,
      priceMax: 0,
      bedrooms: 'any',
      parkingSpaces: 'any',
      acceptsTrade: null,
      sortBy: 'relevance',
    }
    setLocalFilters(clearedFilters)
    onFiltersChange(clearedFilters)
  }

  const hasActiveFilters = 
    filters.state || 
    filters.city || 
    filters.neighborhood || 
    filters.propertyType || 
    filters.priceMin > 0 || 
    filters.priceMax > 0 ||
    filters.bedrooms !== 'any' ||
    filters.parkingSpaces !== 'any' ||
    filters.acceptsTrade !== null

  const availableCities = filters.state ? cities[filters.state] || [] : []
  const availableNeighborhoods = filters.city ? neighborhoods[filters.city] || [] : []

  return (
    <div className={cn('w-full', className)}>
      {/* Desktop Filters */}
      <div className="hidden lg:block">
        <div className="bg-card rounded-xl border border-border/50 p-4 shadow-sm">
          {/* First row - Location filters */}
          <div className="grid grid-cols-4 gap-3 mb-3">
            <Select value={filters.state} onValueChange={(v) => updateFilter('state', v)}>
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                {states.map((state) => (
                  <SelectItem key={state.value} value={state.value}>
                    {state.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select 
              value={filters.city} 
              onValueChange={(v) => updateFilter('city', v)}
              disabled={!filters.state}
            >
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Cidade" />
              </SelectTrigger>
              <SelectContent>
                {availableCities.map((city) => (
                  <SelectItem key={city.value} value={city.value}>
                    {city.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select 
              value={filters.neighborhood} 
              onValueChange={(v) => updateFilter('neighborhood', v)}
              disabled={!filters.city}
            >
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Bairro" />
              </SelectTrigger>
              <SelectContent>
                {availableNeighborhoods.map((nb) => (
                  <SelectItem key={nb.value} value={nb.value}>
                    {nb.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select 
              value={filters.propertyType} 
              onValueChange={(v) => updateFilter('propertyType', v)}
            >
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Tipo de Imóvel" />
              </SelectTrigger>
              <SelectContent>
                {propertyTypes.map((type) => (
                  <SelectItem key={type.value} value={type.value}>
                    {type.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Second row - Property details */}
          <div className="grid grid-cols-6 gap-3 items-end">
            <div className="col-span-2 flex gap-2">
              <div className="flex-1">
                <Label className="text-xs text-muted-foreground mb-1 block">Preço mínimo</Label>
                <Input
                  type="number"
                  placeholder="R$ 0"
                  value={filters.priceMin || ''}
                  onChange={(e) => updateFilter('priceMin', Number(e.target.value))}
                  className="bg-background"
                />
              </div>
              <div className="flex-1">
                <Label className="text-xs text-muted-foreground mb-1 block">Preço máximo</Label>
                <Input
                  type="number"
                  placeholder="Sem limite"
                  value={filters.priceMax || ''}
                  onChange={(e) => updateFilter('priceMax', Number(e.target.value))}
                  className="bg-background"
                />
              </div>
            </div>

            <Select value={filters.bedrooms} onValueChange={(v) => updateFilter('bedrooms', v)}>
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Quartos" />
              </SelectTrigger>
              <SelectContent>
                {bedroomOptions.map((opt) => (
                  <SelectItem key={opt.value} value={opt.value}>
                    {opt.value === 'any' ? 'Quartos' : `${opt.label} Quartos`}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={filters.parkingSpaces} onValueChange={(v) => updateFilter('parkingSpaces', v)}>
              <SelectTrigger className="bg-background">
                <SelectValue placeholder="Vagas" />
              </SelectTrigger>
              <SelectContent>
                {parkingOptions.map((opt) => (
                  <SelectItem key={opt.value} value={opt.value}>
                    {opt.value === 'any' ? 'Vagas' : `${opt.label} Vagas`}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <div className="flex items-center gap-2">
              <Checkbox
                id="accepts-trade"
                checked={filters.acceptsTrade === true}
                onCheckedChange={(checked) => 
                  updateFilter('acceptsTrade', checked === true ? true : null)
                }
              />
              <Label htmlFor="accepts-trade" className="text-sm cursor-pointer">
                Aceita Permuta
              </Label>
            </div>

            {hasActiveFilters && (
              <Button 
                variant="ghost" 
                size="sm"
                onClick={clearFilters}
                className="text-muted-foreground hover:text-foreground"
              >
                <X className="size-4 mr-1" />
                Limpar
              </Button>
            )}
          </div>
        </div>

        {/* Results and Sort */}
        <div className="flex items-center justify-between mt-4 px-1">
          <p className="text-sm text-muted-foreground">
            {resultsCount !== undefined && (
              <span className="font-medium text-foreground">{resultsCount}</span>
            )} imóveis encontrados
          </p>
          <Select value={filters.sortBy} onValueChange={(v) => updateFilter('sortBy', v as FilterState['sortBy'])}>
            <SelectTrigger className="w-44 bg-card">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {sortOptions.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Mobile Filters */}
      <div className="lg:hidden">
        <div className="flex items-center gap-2 mb-4">
          <Sheet open={isOpen} onOpenChange={setIsOpen}>
            <SheetTrigger asChild>
              <Button variant="outline" className="flex-1 justify-start bg-card">
                <SlidersHorizontal className="size-4 mr-2" />
                Filtros
                {hasActiveFilters && (
                  <span className="ml-auto size-5 rounded-full bg-primary text-primary-foreground text-xs flex items-center justify-center">
                    {[filters.state, filters.city, filters.propertyType, filters.bedrooms !== 'any', filters.parkingSpaces !== 'any', filters.acceptsTrade].filter(Boolean).length}
                  </span>
                )}
              </Button>
            </SheetTrigger>
            <SheetContent side="bottom" className="h-[85vh] overflow-auto">
              <SheetHeader className="pb-4 border-b">
                <SheetTitle>Filtros</SheetTitle>
              </SheetHeader>
              
              <div className="py-4 space-y-4">
                {/* Location Section */}
                <Collapsible defaultOpen>
                  <CollapsibleTrigger className="flex items-center justify-between w-full py-2">
                    <span className="font-medium">Localização</span>
                    <ChevronDown className="size-4 text-muted-foreground" />
                  </CollapsibleTrigger>
                  <CollapsibleContent className="space-y-3 pt-2">
                    <Select value={localFilters.state} onValueChange={(v) => setLocalFilters({...localFilters, state: v, city: '', neighborhood: ''})}>
                      <SelectTrigger>
                        <SelectValue placeholder="Estado" />
                      </SelectTrigger>
                      <SelectContent>
                        {states.map((state) => (
                          <SelectItem key={state.value} value={state.value}>
                            {state.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <Select 
                      value={localFilters.city} 
                      onValueChange={(v) => setLocalFilters({...localFilters, city: v, neighborhood: ''})}
                      disabled={!localFilters.state}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Cidade" />
                      </SelectTrigger>
                      <SelectContent>
                        {(cities[localFilters.state] || []).map((city) => (
                          <SelectItem key={city.value} value={city.value}>
                            {city.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <Select 
                      value={localFilters.neighborhood} 
                      onValueChange={(v) => setLocalFilters({...localFilters, neighborhood: v})}
                      disabled={!localFilters.city}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Bairro" />
                      </SelectTrigger>
                      <SelectContent>
                        {(neighborhoods[localFilters.city] || []).map((nb) => (
                          <SelectItem key={nb.value} value={nb.value}>
                            {nb.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </CollapsibleContent>
                </Collapsible>

                {/* Property Type Section */}
                <Collapsible defaultOpen>
                  <CollapsibleTrigger className="flex items-center justify-between w-full py-2">
                    <span className="font-medium">Tipo de Imóvel</span>
                    <ChevronDown className="size-4 text-muted-foreground" />
                  </CollapsibleTrigger>
                  <CollapsibleContent className="pt-2">
                    <Select 
                      value={localFilters.propertyType} 
                      onValueChange={(v) => setLocalFilters({...localFilters, propertyType: v})}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Selecionar tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        {propertyTypes.map((type) => (
                          <SelectItem key={type.value} value={type.value}>
                            {type.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </CollapsibleContent>
                </Collapsible>

                {/* Price Section */}
                <Collapsible defaultOpen>
                  <CollapsibleTrigger className="flex items-center justify-between w-full py-2">
                    <span className="font-medium">Preço</span>
                    <ChevronDown className="size-4 text-muted-foreground" />
                  </CollapsibleTrigger>
                  <CollapsibleContent className="space-y-3 pt-2">
                    <div>
                      <Label className="text-xs text-muted-foreground mb-1 block">Mínimo</Label>
                      <Input
                        type="number"
                        placeholder="R$ 0"
                        value={localFilters.priceMin || ''}
                        onChange={(e) => setLocalFilters({...localFilters, priceMin: Number(e.target.value)})}
                      />
                    </div>
                    <div>
                      <Label className="text-xs text-muted-foreground mb-1 block">Máximo</Label>
                      <Input
                        type="number"
                        placeholder="Sem limite"
                        value={localFilters.priceMax || ''}
                        onChange={(e) => setLocalFilters({...localFilters, priceMax: Number(e.target.value)})}
                      />
                    </div>
                  </CollapsibleContent>
                </Collapsible>

                {/* Details Section */}
                <Collapsible defaultOpen>
                  <CollapsibleTrigger className="flex items-center justify-between w-full py-2">
                    <span className="font-medium">Detalhes</span>
                    <ChevronDown className="size-4 text-muted-foreground" />
                  </CollapsibleTrigger>
                  <CollapsibleContent className="space-y-3 pt-2">
                    <div>
                      <Label className="text-xs text-muted-foreground mb-1 block">Quartos</Label>
                      <Select 
                        value={localFilters.bedrooms} 
                        onValueChange={(v) => setLocalFilters({...localFilters, bedrooms: v})}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {bedroomOptions.map((opt) => (
                            <SelectItem key={opt.value} value={opt.value}>
                              {opt.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label className="text-xs text-muted-foreground mb-1 block">Vagas</Label>
                      <Select 
                        value={localFilters.parkingSpaces} 
                        onValueChange={(v) => setLocalFilters({...localFilters, parkingSpaces: v})}
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {parkingOptions.map((opt) => (
                            <SelectItem key={opt.value} value={opt.value}>
                              {opt.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center gap-2 py-2">
                      <Checkbox
                        id="accepts-trade-mobile"
                        checked={localFilters.acceptsTrade === true}
                        onCheckedChange={(checked) => 
                          setLocalFilters({...localFilters, acceptsTrade: checked === true ? true : null})
                        }
                      />
                      <Label htmlFor="accepts-trade-mobile" className="cursor-pointer">
                        Aceita Permuta
                      </Label>
                    </div>
                  </CollapsibleContent>
                </Collapsible>
              </div>

              <SheetFooter className="border-t pt-4 gap-2">
                <Button 
                  variant="outline" 
                  onClick={() => {
                    clearFilters()
                    setIsOpen(false)
                  }}
                  className="flex-1"
                >
                  Limpar
                </Button>
                <SheetClose asChild>
                  <Button 
                    onClick={() => onFiltersChange(localFilters)}
                    className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
                  >
                    Aplicar Filtros
                  </Button>
                </SheetClose>
              </SheetFooter>
            </SheetContent>
          </Sheet>

          <Select value={filters.sortBy} onValueChange={(v) => updateFilter('sortBy', v as FilterState['sortBy'])}>
            <SelectTrigger className="w-36 bg-card">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {sortOptions.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* Results count mobile */}
        <p className="text-sm text-muted-foreground mb-4">
          <span className="font-medium text-foreground">{resultsCount ?? 0}</span> imóveis encontrados
        </p>
      </div>
    </div>
  )
}