import React, { useState, useEffect } from 'react';
import { ProvinceSelect } from '../base/ProvinceSelect';
import { CitySelect } from '../base/CitySelect';
import { DistrictSelect } from '../base/DistrictSelect';
import { TownSelect } from '../base/TownSelect';

interface AreaSelect4LevelProps {
  provinceValue?: number | string;
  cityValue?: number | string;
  districtValue?: number | string;
  townValue?: number | string;
  onProvinceChange?: (value: number) => void;
  onCityChange?: (value: number) => void;
  onDistrictChange?: (value: number) => void;
  onTownChange?: (value: number) => void;
  disabled?: boolean;
  required?: boolean;
  className?: string;
  showLabels?: boolean;
}

export const AreaSelect4Level: React.FC<AreaSelect4LevelProps> = ({
  provinceValue = 0,
  cityValue = 0,
  districtValue = 0,
  townValue = 0,
  onProvinceChange,
  onCityChange,
  onDistrictChange,
  onTownChange,
  disabled = false,
  required = false,
  className = '',
  showLabels = true
}) => {
  const [selectedProvince, setSelectedProvince] = useState<string>(provinceValue?.toString() || '');
  const [selectedCity, setSelectedCity] = useState<string>(cityValue?.toString() || '');
  const [selectedDistrict, setSelectedDistrict] = useState<string>(districtValue?.toString() || '');
  const [selectedTown, setSelectedTown] = useState<string>(townValue?.toString() || '');

  // 处理省份变化
  const handleProvinceChange = (provinceId: string) => {
    const id = provinceId && provinceId !== 'none' ? Number(provinceId) : 0;
    setSelectedProvince(provinceId);
    setSelectedCity('');
    setSelectedDistrict('');
    setSelectedTown('');
    onProvinceChange?.(id);
  };

  // 处理城市变化
  const handleCityChange = (cityId: string) => {
    const id = cityId && cityId !== 'none' ? Number(cityId) : 0;
    setSelectedCity(cityId);
    setSelectedDistrict('');
    setSelectedTown('');
    onCityChange?.(id);
  };

  // 处理区县变化
  const handleDistrictChange = (districtId: string) => {
    const id = districtId && districtId !== 'none' ? Number(districtId) : 0;
    setSelectedDistrict(districtId);
    setSelectedTown('');
    onDistrictChange?.(id);
  };

  // 处理街道变化
  const handleTownChange = (townId: string) => {
    const id = townId && townId !== 'none' ? Number(townId) : 0;
    setSelectedTown(townId);
    onTownChange?.(id);
  };

  // 同步外部值变化
  useEffect(() => {
    setSelectedProvince(provinceValue?.toString() || '');
    setSelectedCity(cityValue?.toString() || '');
    setSelectedDistrict(districtValue?.toString() || '');
    setSelectedTown(townValue?.toString() || '');
  }, [provinceValue, cityValue, districtValue, townValue]);

  return (
    <div className={`grid grid-cols-1 md:grid-cols-4 gap-4 ${className}`}>
      <ProvinceSelect
        value={selectedProvince}
        onChange={handleProvinceChange}
        disabled={disabled}
        required={required}
        placeholder="选择省份"
        showLabel={showLabels}
        labelText="省份"
        data-testid="area-select-4level-province"
      />

      <CitySelect
        provinceId={selectedProvince}
        value={selectedCity}
        onChange={handleCityChange}
        disabled={disabled}
        required={required}
        placeholder="选择城市"
        showLabel={showLabels}
        labelText="城市"
        data-testid="area-select-4level-city"
      />

      <DistrictSelect
        cityId={selectedCity}
        value={selectedDistrict}
        onChange={handleDistrictChange}
        disabled={disabled}
        placeholder="选择区县"
        showLabel={showLabels}
        labelText="区县"
        data-testid="area-select-4level-district"
      />

      <TownSelect
        districtId={selectedDistrict}
        value={selectedTown}
        onChange={handleTownChange}
        disabled={disabled}
        placeholder="选择街道"
        showLabel={showLabels}
        labelText="街道"
        data-testid="area-select-4level-town"
      />
    </div>
  );
};