// Location filter sheet — region → prefectures → areas

const { useState: useStateLoc, useEffect: useEffectLoc } = React;

function LocationSheet({
  open,
  onClose,
  selectedRegions,
  selectedAreas,
  onChange,
  areasByRegion,
  ensureAreas,
  countMode = 'rooms',
}) {
  const [activeRegion, setActiveRegion] = useStateLoc(REGIONS[1].name);
  const [focusedRegionKey, setFocusedRegionKey] = useStateLoc(REGIONS[1].prefs[0].key);

  useEffectLoc(() => {
    if (!open) return;
    const nextFocused = selectedRegions[0] || focusedRegionKey || REGIONS[1].prefs[0].key;
    const parentRegion = REGIONS.find(r => r.prefs.some(p => p.key === nextFocused));
    if (parentRegion) setActiveRegion(parentRegion.name);
    setFocusedRegionKey(nextFocused);
  }, [open]);

  useEffectLoc(() => {
    if (!open) return;
    const currentGroup = REGIONS.find(r => r.name === activeRegion);
    if (!currentGroup) return;
    if (currentGroup.prefs.some(p => p.key === focusedRegionKey)) return;
    const preferred = selectedRegions.find(key => currentGroup.prefs.some(p => p.key === key));
    setFocusedRegionKey(preferred || currentGroup.prefs[0].key);
  }, [activeRegion, focusedRegionKey, open, selectedRegions]);

  useEffectLoc(() => {
    if (!open || !focusedRegionKey) return;
    ensureAreas && ensureAreas(focusedRegionKey);
  }, [open, focusedRegionKey, ensureAreas]);

  if (!open) return null;
  const region = REGIONS.find(r => r.name === activeRegion);
  const focusedPref = region.prefs.find(p => p.key === focusedRegionKey) || region.prefs[0];
  const areaState = areasByRegion[focusedPref.key] || { data: [], loading: false, error: null };

  const labelOf = (key) => {
    for (const r of REGIONS) {
      const m = r.prefs.find(p => p.key === key);
      if (m) return m.label;
    }
    return key;
  };
  const areaLabelOf = (areaKey) => {
    for (const state of Object.values(areasByRegion || {})) {
      const match = (state.data || []).find(item => item.areaKey === areaKey);
      if (match) return match.name;
    }
    return areaKey;
  };
  const removeAreasForRegion = (areas, regionKey) =>
    areas.filter(areaKey => !areaKey.startsWith(regionKey + '__'));

  const toggleRegion = (key) => {
    const selected = selectedRegions.includes(key);
    const nextRegions = selected ? selectedRegions.filter(x => x !== key) : [...selectedRegions, key];
    const nextAreas = selected ? removeAreasForRegion(selectedAreas, key) : selectedAreas;
    onChange({ regions: nextRegions, areas: nextAreas });
  };
  const toggleArea = (area) => {
    const areaKey = area.areaKey;
    const regionKey = area.regionKey;
    const nextRegions = selectedRegions.includes(regionKey) ? selectedRegions : [...selectedRegions, regionKey];
    const nextAreas = selectedAreas.includes(areaKey)
      ? selectedAreas.filter(x => x !== areaKey)
      : [...selectedAreas, areaKey];
    onChange({ regions: nextRegions, areas: nextAreas });
  };
  const clearAll = () => {
    onChange({ regions: [], areas: [] });
  };

  const sheetContent = (
    <div style={sheetStyles.backdrop} onClick={onClose}>
      <div style={sheetStyles.sheet} onClick={e => e.stopPropagation()}>
        <div style={sheetStyles.grabber}/>
        <div style={sheetStyles.header}>
          <div style={sheetStyles.headerTitle}>选择地区</div>
          <button style={sheetStyles.closeBtn} onClick={onClose}>
            <Icon.Close size={18} color="#1a1a1a"/>
          </button>
        </div>

        {(selectedRegions.length > 0 || selectedAreas.length > 0) && (
          <div style={sheetStyles.chipRow}>
            {selectedRegions.map(k => (
              <div key={k} style={sheetStyles.chip} onClick={() => toggleRegion(k)}>
                {labelOf(k)}
                <Icon.Close size={12} color="#8a7256"/>
              </div>
            ))}
            {selectedAreas.map(areaKey => (
              <div key={areaKey} style={sheetStyles.areaChip} onClick={() => toggleArea({ areaKey, regionKey: areaKey.split('__')[0] })}>
                {areaLabelOf(areaKey)}
                <Icon.Close size={12} color="#9a4e34"/>
              </div>
            ))}
            <button style={sheetStyles.clearBtn} onClick={clearAll}>全部清除</button>
          </div>
        )}

        <div style={sheetStyles.body}>
          <div style={sheetStyles.regionRail}>
            {REGIONS.map(r => {
              const count = r.prefs.filter(p => selectedRegions.includes(p.key)).length;
              const active = r.name === activeRegion;
              return (
                <div
                  key={r.name}
                  style={{
                    ...sheetStyles.regionItem,
                    background: active ? '#FFFFFF' : 'transparent',
                    color: active ? '#1A1A1A' : '#6B6258',
                    fontWeight: active ? 600 : 400,
                  }}
                  onClick={() => setActiveRegion(r.name)}
                >
                  <span>{r.name}</span>
                  {count > 0 && <span style={sheetStyles.countBadge}>{count}</span>}
                </div>
              );
            })}
          </div>

          <div style={sheetStyles.prefPanel}>
            <div style={sheetStyles.panelTitle}>都道府县</div>
            <div style={sheetStyles.prefGrid}>
              {region.prefs.map(p => {
                const on = selectedRegions.includes(p.key);
                const focused = p.key === focusedPref.key;
                const areaCount = selectedAreas.filter(areaKey => areaKey.startsWith(p.key + '__')).length;
                return (
                  <button
                    key={p.key}
                    style={{
                      ...sheetStyles.prefBtn,
                      background: on ? '#1A1A1A' : '#FFFFFF',
                      color: on ? '#FAF8F5' : '#1A1A1A',
                      borderColor: on ? '#1A1A1A' : '#E4DFD6',
                      boxShadow: focused ? '0 0 0 2px rgba(198,87,43,0.18)' : 'none',
                    }}
                    onClick={() => {
                      setFocusedRegionKey(p.key);
                      if (!on) toggleRegion(p.key);
                    }}
                  >
                    <span>{p.label}</span>
                    {areaCount > 0 && <span style={sheetStyles.prefMeta}>{areaCount}个片区</span>}
                  </button>
                );
              })}
            </div>

            <div style={sheetStyles.subsection}>
              <div style={sheetStyles.subsectionHead}>
                <div>
                  <div style={sheetStyles.panelTitle}>进一步细分</div>
                  <div style={sheetStyles.panelHint}>
                    {focusedPref.label} 下的区域
                  </div>
                </div>
                {!selectedRegions.includes(focusedPref.key) && (
                  <div style={sheetStyles.disabledHint}>先选择 {focusedPref.label}</div>
                )}
              </div>

              {areaState.loading ? (
                <div style={sheetStyles.stateCard}>正在加载区域…</div>
              ) : areaState.error ? (
                <div style={sheetStyles.stateCard}>区域加载失败</div>
              ) : areaState.data.length === 0 ? (
                <div style={sheetStyles.stateCard}>当前没有更细的区域数据</div>
              ) : (
                <div style={sheetStyles.areaList}>
                  {areaState.data.map(area => {
                    const on = selectedAreas.includes(area.areaKey);
                    const enabled = selectedRegions.includes(area.regionKey);
                    const propertyNameCount = area.propertyCount ?? area.availablePropertyCount ?? area.totalPropertyCount ?? 0;
                    const roomCount = area.availableRoomCount ?? area.roomCount ?? 0;
                    const badgeText = countMode === 'properties'
                      ? `${propertyNameCount}个物件名`
                      : `${roomCount}套空房`;
                    const metaText = countMode === 'properties'
                      ? `共 ${propertyNameCount} 个物件名`
                      : `共 ${roomCount} 套空房`;
                    return (
                      <button
                        key={area.areaKey}
                        style={{
                          ...sheetStyles.areaCard,
                          opacity: enabled ? 1 : 0.55,
                          borderColor: on ? '#C6572B' : '#E4DFD6',
                          background: on ? '#FFF4EE' : '#FFFFFF',
                        }}
                        onClick={() => toggleArea(area)}
                      >
                        <div style={sheetStyles.areaTop}>
                          <div style={sheetStyles.areaName}>{area.name}</div>
                          <div style={{
                            ...sheetStyles.areaBadge,
                            background: on ? '#C6572B' : '#F4EADB',
                            color: on ? '#FFFFFF' : '#8A7256',
                          }}>
                            {badgeText}
                          </div>
                        </div>
                        <div style={sheetStyles.areaRange}>{area.range || '—'}</div>
                        <div style={sheetStyles.areaMeta}>
                          {metaText}
                        </div>
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>

        <div style={sheetStyles.footer}>
          <button style={sheetStyles.applyBtn} onClick={onClose}>
            {selectedAreas.length > 0
              ? `使用 ${selectedAreas.length} 个细分区域筛选`
              : selectedRegions.length > 0
                ? `使用 ${selectedRegions.length} 个地区筛选`
                : '关闭'}
          </button>
        </div>
      </div>
    </div>
  );

  return ReactDOM.createPortal(sheetContent, document.body);
}

const sheetStyles = {
  backdrop: { position: 'fixed', inset: 0, background: 'rgba(20,18,14,0.38)', display: 'flex', alignItems: 'flex-end', zIndex: 1000, animation: 'fadeIn 180ms ease' },
  sheet: { width: '100%', background: '#FAF8F5', borderTopLeftRadius: 20, borderTopRightRadius: 20, display: 'flex', flexDirection: 'column', height: '82dvh', minHeight: 520, maxHeight: '82dvh', boxShadow: '0 -8px 32px rgba(0,0,0,0.12)', animation: 'slideUp 260ms cubic-bezier(.2,.8,.2,1)' },
  grabber: { width: 36, height: 4, borderRadius: 2, background: '#D4CCBE', margin: '8px auto 0' },
  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px 10px' },
  headerTitle: { fontSize: 17, fontWeight: 600, color: '#1A1A1A', letterSpacing: '0.01em' },
  closeBtn: { width: 32, height: 32, borderRadius: 16, border: 'none', background: '#EFEAE0', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' },
  chipRow: { display: 'flex', flexWrap: 'wrap', gap: 6, padding: '6px 20px 12px', alignItems: 'center' },
  chip: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: '#F4EADB', fontSize: 12, color: '#8a7256', cursor: 'pointer', fontWeight: 500 },
  areaChip: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: '#FFF1E8', fontSize: 12, color: '#9a4e34', cursor: 'pointer', fontWeight: 600 },
  clearBtn: { border: 'none', background: 'transparent', color: '#6B6258', fontSize: 12, textDecoration: 'underline', cursor: 'pointer', padding: 4 },
  body: { display: 'flex', flex: 1, minHeight: 0, borderTop: '1px solid #EDE6D9' },
  regionRail: { width: 120, background: '#F2EBDE', overflowY: 'auto', paddingTop: 4 },
  regionItem: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 14px 14px 18px', fontSize: 14, cursor: 'pointer', borderLeft: '3px solid transparent' },
  countBadge: { background: '#C6572B', color: '#fff', fontSize: 10, fontWeight: 600, minWidth: 18, height: 18, borderRadius: 9, padding: '0 5px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
  prefPanel: { flex: 1, overflowY: 'auto', padding: '16px 18px 20px' },
  panelTitle: { fontSize: 12, color: '#8A7F72', fontWeight: 600, marginBottom: 10, letterSpacing: '0.06em' },
  panelHint: { fontSize: 11, color: '#8A7F72', marginTop: -6, marginBottom: 2 },
  prefGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 },
  prefBtn: { padding: '14px 10px', borderRadius: 12, border: '1px solid #E4DFD6', fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 150ms ease', display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start' },
  prefMeta: { fontSize: 10, opacity: 0.78, fontWeight: 600 },
  subsection: { marginTop: 18, paddingTop: 16, borderTop: '1px dashed #E4DFD6' },
  subsectionHead: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 10 },
  disabledHint: { fontSize: 11, color: '#B0A695', paddingTop: 2, whiteSpace: 'nowrap' },
  stateCard: { padding: '16px 14px', background: '#FFFFFF', border: '1px solid #E4DFD6', borderRadius: 12, fontSize: 12, color: '#8A7F72' },
  areaList: { display: 'flex', flexDirection: 'column', gap: 10 },
  areaCard: { padding: '12px 12px 11px', borderRadius: 14, border: '1px solid #E4DFD6', background: '#FFFFFF', textAlign: 'left', fontFamily: 'inherit', cursor: 'pointer' },
  areaTop: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 6 },
  areaName: { fontSize: 14, fontWeight: 700, color: '#1A1A1A' },
  areaBadge: { flexShrink: 0, padding: '3px 8px', borderRadius: 999, fontSize: 10, fontWeight: 700 },
  areaRange: { fontSize: 11, color: '#6B6258', lineHeight: 1.5 },
  areaMeta: { marginTop: 6, fontSize: 11, color: '#8A7F72', fontWeight: 500 },
  footer: { padding: '12px 20px 20px', borderTop: '1px solid #EDE6D9', background: '#FAF8F5' },
  applyBtn: { width: '100%', padding: '15px', borderRadius: 14, border: 'none', background: '#1A1A1A', color: '#FAF8F5', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', letterSpacing: '0.02em' },
};

Object.assign(window, { LocationSheet });