import React from 'react';

const PROPERTY_TYPES: Record<string, string[]> = {
  Commercial: ['Office', 'Retail', 'Mixed Use', 'Hotel/Motel', 'Shopping Center'],
  Industrial: ['Warehouse', 'Manufacturing', 'Flex Space', 'Distribution'],
  Multifamily: ['Multi Family (General)', 'Apartment', 'Condo', 'Co-op', 'Townhouse'],
  Land: ['Vacant Land', 'Development Site', 'Agricultural'],
  'Special Purpose': ['Religious', 'Medical', 'Parking', 'Marina', 'Self Storage'],
};

interface PropertyTypeSelectorProps {
  selected: string[];
  onChange: (types: string[]) => void;
}

export function PropertyTypeSelector({ selected, onChange }: PropertyTypeSelectorProps) {
  const toggle = (type: string) => {
    onChange(
      selected.includes(type)
        ? selected.filter((t) => t !== type)
        : [...selected, type]
    );
  };

  const toggleCategory = (category: string) => {
    const types = PROPERTY_TYPES[category];
    const allSelected = types.every((t) => selected.includes(t));
    if (allSelected) {
      onChange(selected.filter((t) => !types.includes(t)));
    } else {
      const newSelected = new Set([...selected, ...types]);
      onChange(Array.from(newSelected));
    }
  };

  return (
    <div className="space-y-3">
      {Object.entries(PROPERTY_TYPES).map(([category, types]) => {
        const catCount = types.filter((t) => selected.includes(t)).length;
        return (
          <div key={category}>
            <button
              onClick={() => toggleCategory(category)}
              className="flex items-center gap-2 text-xs font-semibold text-gray-300 uppercase tracking-wider mb-1.5 hover:text-reo-teal transition-colors"
            >
              <span className={`w-3.5 h-3.5 rounded border flex items-center justify-center text-[10px] ${
                catCount === types.length ? 'bg-reo-teal border-reo-teal text-white' :
                catCount > 0 ? 'bg-reo-teal/30 border-reo-teal text-white' : 'border-gray-500'
              }`}>
                {catCount === types.length ? '✓' : catCount > 0 ? '–' : ''}
              </span>
              {category}
              {catCount > 0 && <span className="text-reo-teal font-normal">({catCount})</span>}
            </button>
            <div className="grid grid-cols-2 gap-x-2 gap-y-1 pl-5">
              {types.map((type) => (
                <label
                  key={type}
                  className="flex items-center gap-1.5 text-sm text-gray-300 hover:text-white cursor-pointer"
                >
                  <input
                    type="checkbox"
                    checked={selected.includes(type)}
                    onChange={() => toggle(type)}
                    className="rounded border-gray-500 text-reo-teal focus:ring-reo-teal bg-transparent w-3.5 h-3.5"
                  />
                  <span className="truncate">{type}</span>
                </label>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}
