import React, { useState, useEffect } from "react";
import {
  SearchOutlined,
  CloseOutlined,
  ArrowLeftOutlined,
  ArrowRightOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import { Button, Input } from "antd";
import { Popup, Toast } from "antd-mobile";
import { getGroupList } from "./api";
import style from "./index.module.scss";

// 群组接口类型
interface WechatGroup {
  id: string;
  chatroomId: string;
  name: string;
  avatar: string;
  ownerWechatId: string;
  ownerNickname: string;
  ownerAvatar: string;
}

// 组件属性接口
interface GroupSelectionProps {
  selectedGroups: string[];
  onSelect: (groups: string[]) => void;
  onSelectDetail?: (groups: WechatGroup[]) => void;
  placeholder?: string;
  className?: string;
  visible?: boolean;
  onVisibleChange?: (visible: boolean) => void;
  selectedListMaxHeight?: number;
  showInput?: boolean;
  showSelectedList?: boolean;
  readonly?: boolean;
  onConfirm?: (selectedIds: string[], selectedItems: WechatGroup[]) => void; // 新增
}

export default function GroupSelection({
  selectedGroups,
  onSelect,
  onSelectDetail,
  placeholder = "选择群聊",
  className = "",
  visible,
  onVisibleChange,
  selectedListMaxHeight = 300,
  showInput = true,
  showSelectedList = true,
  readonly = false,
  onConfirm,
}: GroupSelectionProps) {
  const [popupVisible, setPopupVisible] = useState(false);
  const [groups, setGroups] = useState<WechatGroup[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalGroups, setTotalGroups] = useState(0);
  const [loading, setLoading] = useState(false);

  // 获取已选群聊详细信息
  const selectedGroupObjs = selectedGroups
    .map((id) => groups.find((g) => g.id === id))
    .filter(Boolean) as WechatGroup[];

  // 删除已选群聊
  const handleRemoveGroup = (id: string) => {
    if (readonly) return;
    onSelect(selectedGroups.filter((g) => g !== id));
  };

  // 受控弹窗逻辑
  const realVisible = visible !== undefined ? visible : popupVisible;
  const setRealVisible = (v: boolean) => {
    if (onVisibleChange) onVisibleChange(v);
    if (visible === undefined) setPopupVisible(v);
  };

  // 打开弹窗
  const openPopup = () => {
    if (readonly) return;
    setCurrentPage(1);
    setSearchQuery("");
    setRealVisible(true);
    fetchGroups(1, "");
  };

  // 当页码变化时，拉取对应页数据（弹窗已打开时）
  useEffect(() => {
    if (realVisible && currentPage !== 1) {
      fetchGroups(currentPage, searchQuery);
    }
  }, [currentPage, realVisible, searchQuery]);

  // 搜索防抖
  useEffect(() => {
    if (!realVisible) return;
    const timer = setTimeout(() => {
      setCurrentPage(1);
      fetchGroups(1, searchQuery);
    }, 500);
    return () => clearTimeout(timer);
  }, [searchQuery, realVisible]);

  // 获取群组列表API - 支持keyword
  const fetchGroups = async (page: number, keyword: string = "") => {
    setLoading(true);
    try {
      const params: any = {
        page,
        limit: 20,
      };
      if (keyword.trim()) {
        params.keyword = keyword.trim();
      }

      const res = await getGroupList(params);

      if (res && Array.isArray(res.list)) {
        setGroups(
          res.list.map((group: any) => ({
            id: group.id?.toString() || "",
            chatroomId: group.chatroomId || "",
            name: group.name || "",
            avatar: group.avatar || "",
            ownerWechatId: group.ownerWechatId || "",
            ownerNickname: group.ownerNickname || "",
            ownerAvatar: group.ownerAvatar || "",
          }))
        );
        setTotalGroups(res.total || 0);
        setTotalPages(Math.ceil((res.total || 0) / 20));
      }
    } catch (error) {
      console.error("获取群组列表失败:", error);
      Toast.show({ content: "获取群组列表失败", position: "top" });
    } finally {
      setLoading(false);
    }
  };

  // 处理群组选择
  const handleGroupToggle = (groupId: string) => {
    let newIds: string[];
    if (selectedGroups.includes(groupId)) {
      newIds = selectedGroups.filter((id) => id !== groupId);
    } else {
      newIds = [...selectedGroups, groupId];
    }
    onSelect(newIds);
    if (onSelectDetail) {
      const selectedObjs = groups.filter((g) => newIds.includes(g.id));
      onSelectDetail(selectedObjs);
    }
  };

  // 获取显示文本
  const getDisplayText = () => {
    if (selectedGroups.length === 0) return "";
    return `已选择 ${selectedGroups.length} 个群聊`;
  };

  // 确认按钮逻辑
  const handleConfirm = () => {
    setRealVisible(false);
    if (onConfirm) {
      onConfirm(selectedGroups, selectedGroupObjs);
    }
  };

  // 清空搜索
  const handleClearSearch = () => {
    setSearchQuery("");
    setCurrentPage(1);
    fetchGroups(1, "");
  };

  return (
    <>
      {/* 输入框 */}
      {showInput && (
        <div className={`${style.inputWrapper} ${className}`}>
          <Input
            placeholder={placeholder}
            value={getDisplayText()}
            onClick={openPopup}
            prefix={<SearchOutlined />}
            allowClear={!readonly}
            size="large"
            readOnly={readonly}
            disabled={readonly}
            style={
              readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
            }
          />
        </div>
      )}
      {/* 已选群聊列表窗口 */}
      {showSelectedList && selectedGroupObjs.length > 0 && (
        <div
          className={style.selectedListWindow}
          style={{
            maxHeight: selectedListMaxHeight,
            overflowY: "auto",
            marginTop: 8,
            border: "1px solid #e5e6eb",
            borderRadius: 8,
            background: "#fff",
          }}
        >
          {selectedGroupObjs.map((group) => (
            <div
              key={group.id}
              className={style.selectedListRow}
              style={{
                display: "flex",
                alignItems: "center",
                padding: "4px 8px",
                borderBottom: "1px solid #f0f0f0",
                fontSize: 14,
              }}
            >
              <div
                style={{
                  flex: 1,
                  minWidth: 0,
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {group.name || group.chatroomId || group.id}
              </div>
              {!readonly && (
                <Button
                  type="text"
                  icon={<DeleteOutlined />}
                  size="small"
                  style={{
                    marginLeft: 4,
                    color: "#ff4d4f",
                    border: "none",
                    background: "none",
                    minWidth: 24,
                    height: 24,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                  onClick={() => handleRemoveGroup(group.id)}
                />
              )}
            </div>
          ))}
        </div>
      )}
      {/* 弹窗 */}
      <Popup
        visible={realVisible && !readonly}
        onMaskClick={() => setRealVisible(false)}
        position="bottom"
        bodyStyle={{ height: "100vh" }}
      >
        <div className={style.popupContainer}>
          <div className={style.popupHeader}>
            <div className={style.popupTitle}>选择群聊</div>
            <div className={style.searchWrapper}>
              <Input
                placeholder="搜索群聊"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                disabled={readonly}
                prefix={<SearchOutlined />}
                allowClear
                size="large"
              />
              <SearchOutlined className={style.searchIcon} />
              {searchQuery && !readonly && (
                <Button
                  type="text"
                  icon={<CloseOutlined />}
                  size="small"
                  className={style.clearBtn}
                  onClick={handleClearSearch}
                  style={{
                    color: "#ff4d4f",
                    border: "none",
                    background: "none",
                    minWidth: 24,
                    height: 24,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                />
              )}
            </div>
          </div>
          <div className={style.groupList}>
            {loading ? (
              <div className={style.loadingBox}>
                <div className={style.loadingText}>加载中...</div>
              </div>
            ) : groups.length > 0 ? (
              <div className={style.groupListInner}>
                {groups.map((group) => (
                  <label
                    key={group.id}
                    className={style.groupItem}
                    onClick={() => !readonly && handleGroupToggle(group.id)}
                  >
                    <div className={style.radioWrapper}>
                      <div
                        className={
                          selectedGroups.includes(group.id)
                            ? style.radioSelected
                            : style.radioUnselected
                        }
                      >
                        {selectedGroups.includes(group.id) && (
                          <div className={style.radioDot}></div>
                        )}
                      </div>
                    </div>
                    <div className={style.groupInfo}>
                      <div className={style.groupAvatar}>
                        {group.avatar ? (
                          <img
                            src={group.avatar}
                            alt={group.name}
                            className={style.avatarImg}
                          />
                        ) : (
                          group.name.charAt(0)
                        )}
                      </div>
                      <div className={style.groupDetail}>
                        <div className={style.groupName}>{group.name}</div>
                        <div className={style.groupId}>
                          群ID: {group.chatroomId}
                        </div>
                        {group.ownerNickname && (
                          <div className={style.groupOwner}>
                            群主: {group.ownerNickname}
                          </div>
                        )}
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            ) : (
              <div className={style.emptyBox}>
                <div className={style.emptyText}>
                  {searchQuery
                    ? `没有找到包含"${searchQuery}"的群聊`
                    : "没有找到群聊"}
                </div>
              </div>
            )}
          </div>
          {/* 分页栏 */}
          <div className={style.paginationRow}>
            <div className={style.totalCount}>总计 {totalGroups} 个群聊</div>
            <div className={style.paginationControls}>
              <Button
                type="text"
                size="small"
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1 || loading}
                className={style.pageBtn}
                style={{ borderRadius: 16 }}
              >
                <ArrowLeftOutlined />
              </Button>
              <span className={style.pageInfo}>
                {currentPage} / {totalPages}
              </span>
              <Button
                type="text"
                size="small"
                onClick={() =>
                  setCurrentPage(Math.min(totalPages, currentPage + 1))
                }
                disabled={currentPage === totalPages || loading}
                className={style.pageBtn}
                style={{ borderRadius: 16 }}
              >
                <ArrowRightOutlined />
              </Button>
            </div>
          </div>
          {/* 底部按钮栏 */}
          <div className={style.popupFooter}>
            <div className={style.selectedCount}>
              已选择 {selectedGroups.length} 个群聊
            </div>
            <div className={style.footerBtnGroup}>
              <Button type="default" onClick={() => setRealVisible(false)}>
                取消
              </Button>
              <Button type="primary" onClick={handleConfirm}>
                确定
              </Button>
            </div>
          </div>
        </div>
      </Popup>
    </>
  );
}