import React from 'react';

interface OwnerConfig {
  includesPhone: boolean;
  includesEmail: boolean;
  portfolioMin: number | '';
  portfolioMax: number | '';
  ownerOccupied: boolean;
  ownerType: '' | 'Company' | 'Person';
}

interface OwnerFiltersProps {
  config: OwnerConfig;
  onChange: (config: OwnerConfig) => void;
}

export function OwnerFilters({ config, onChange }: OwnerFiltersProps) {
  const set = <K extends keyof OwnerConfig>(key: K, value: OwnerConfig[K]) => {
    onChange({ ...config, [key]: value });
  };

  return (
    <div className="space-y-3">
      {/* Contact toggles */}
      <div className="flex gap-4">
        <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
          <div
            onClick={() => set('includesPhone', !config.includesPhone)}
            className={`w-9 h-5 rounded-full relative transition-colors cursor-pointer ${
              config.includesPhone ? 'bg-reo-teal' : 'bg-gray-600'
            }`}
          >
            <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
              config.includesPhone ? 'translate-x-4' : 'translate-x-0.5'
            }`} />
          </div>
          Has Phone
        </label>
        <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
          <div
            onClick={() => set('includesEmail', !config.includesEmail)}
            className={`w-9 h-5 rounded-full relative transition-colors cursor-pointer ${
              config.includesEmail ? 'bg-reo-teal' : 'bg-gray-600'
            }`}
          >
            <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
              config.includesEmail ? 'translate-x-4' : 'translate-x-0.5'
            }`} />
          </div>
          Has Email
        </label>
      </div>

      {/* Owner occupied toggle */}
      <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
        <div
          onClick={() => set('ownerOccupied', !config.ownerOccupied)}
          className={`w-9 h-5 rounded-full relative transition-colors cursor-pointer ${
            config.ownerOccupied ? 'bg-reo-teal' : 'bg-gray-600'
          }`}
        >
          <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
            config.ownerOccupied ? 'translate-x-4' : 'translate-x-0.5'
          }`} />
        </div>
        Owner Occupied
      </label>

      {/* Portfolio size */}
      <div>
        <label className="block text-xs text-gray-400 mb-1">Portfolio Size</label>
        <div className="flex gap-2">
          <input
            type="number"
            value={config.portfolioMin}
            onChange={(e) => set('portfolioMin', e.target.value === '' ? '' : Number(e.target.value))}
            placeholder="Min"
            className="w-1/2 bg-white/10 border border-gray-600 rounded px-2 py-1.5 text-sm text-white placeholder-gray-500 focus:ring-2 focus:ring-reo-teal focus:border-reo-teal outline-none"
          />
          <input
            type="number"
            value={config.portfolioMax}
            onChange={(e) => set('portfolioMax', e.target.value === '' ? '' : Number(e.target.value))}
            placeholder="Max"
            className="w-1/2 bg-white/10 border border-gray-600 rounded px-2 py-1.5 text-sm text-white placeholder-gray-500 focus:ring-2 focus:ring-reo-teal focus:border-reo-teal outline-none"
          />
        </div>
      </div>

      {/* Owner type */}
      <div>
        <label className="block text-xs text-gray-400 mb-1">Owner Type</label>
        <select
          value={config.ownerType}
          onChange={(e) => set('ownerType', e.target.value as OwnerConfig['ownerType'])}
          className="w-full bg-white/10 border border-gray-600 rounded px-2 py-1.5 text-sm text-white focus:ring-2 focus:ring-reo-teal focus:border-reo-teal outline-none"
        >
          <option value="" className="bg-reo-dark">Any</option>
          <option value="Company" className="bg-reo-dark">Company</option>
          <option value="Person" className="bg-reo-dark">Person</option>
        </select>
      </div>
    </div>
  );
}
