'use client'

import { Check, ChevronDown, Home, Plus } from 'lucide-react'
import { useState } from 'react'
import { usePropertyStore } from '../lib/properties/store'
import { cn } from '@/lib/utils'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/primitives/dropdown-menu'
import { NewPropertyDialog } from './new-property-dialog'
import { usePropertyScene } from '../lib/models/hooks'

/**
 * PropertyDropdown - Shows active property and allows switching between properties
 */
export function PropertyDropdown() {
  usePropertyScene() // Load and auto-save property scenes

  // Use property store
  const properties = usePropertyStore(state => state.properties)
  const activeProperty = usePropertyStore(state => state.activeProperty)
  const isLoading = usePropertyStore(state => state.isLoading)
  const setActiveProperty = usePropertyStore(state => state.setActiveProperty)
  const fetchProperties = usePropertyStore(state => state.fetchProperties)

  const [isNewPropertyDialogOpen, setIsNewPropertyDialogOpen] = useState(false)

  const handlePropertySelect = async (propertyId: string) => {
    await setActiveProperty(propertyId)
  }

  const handleAddNew = () => {
    setIsNewPropertyDialogOpen(true)
  }

  const handlePropertyCreated = async (propertyId: string) => {
    // Set the newly created property as active (this will also fetch properties)
    await setActiveProperty(propertyId)
  }

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
            className="flex h-9 items-center gap-2 rounded-lg border border-border bg-background/95 px-3 text-sm shadow-lg backdrop-blur-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 focus:outline-none"
            disabled={isLoading}
            type="button"
          >
            <Home className="h-4 w-4" />
            <span className="max-w-[150px] truncate">
              {activeProperty
                ? activeProperty.name
                : properties.length > 0
                  ? 'Select Property'
                  : 'Add Property'}
            </span>
            <ChevronDown className="h-3 w-3 opacity-50" />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-[280px]">
          {/* Property list */}
          {properties.length > 0 ? (
            <div className="max-h-[300px] overflow-y-auto">
              {properties.map((property) => (
                <DropdownMenuItem
                  className={cn(
                    'cursor-pointer text-sm',
                    activeProperty?.id === property.id && 'cursor-default bg-accent',
                  )}
                  key={property.id}
                  onClick={() =>
                    activeProperty?.id === property.id ? null : handlePropertySelect(property.id)
                  }
                >
                  <div className="flex w-full items-center justify-between gap-2">
                    <div className="flex-1 truncate font-medium">{property.name}</div>
                    {activeProperty?.id === property.id && (
                      <Check className="h-4 w-4 shrink-0 text-primary" />
                    )}
                  </div>
                </DropdownMenuItem>
              ))}
            </div>
          ) : (
            <div className="px-2 py-3 text-center text-muted-foreground text-sm">
              No properties yet
            </div>
          )}

          {/* Add new property option */}
          <DropdownMenuItem className="cursor-pointer" onClick={handleAddNew}>
            <Plus className="mr-2 h-4 w-4" />
            <span>Add new property</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <NewPropertyDialog
        open={isNewPropertyDialogOpen}
        onOpenChange={setIsNewPropertyDialogOpen}
        onSuccess={handlePropertyCreated}
      />
    </>
  )
}