import React, { useState, useEffect } from "react";
import { Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { get } from "@/api/request";

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

interface GroupsResponse {
  code: number;
  msg: string;
  data: {
    list: Array<{
      id: number;
      chatroomId: string;
      name: string;
      avatar?: string;
      ownerWechatId?: string;
      ownerNickname?: string;
      ownerAvatar?: string;
    }>;
    total: number;
    page: number;
    limit: number;
  };
}

// 修改：支持keyword参数
const fetchGroupsList = async (params: {
  page: number;
  limit: number;
  keyword?: string;
}): Promise<GroupsResponse> => {
  const keywordParam = params.keyword
    ? `&keyword=${encodeURIComponent(params.keyword)}`
    : "";
  return get<GroupsResponse>(
    `/v1/chatroom?page=${params.page}&limit=${params.limit}${keywordParam}`
  );
};

interface GroupSelectionProps {
  selectedGroups: string[];
  onSelect: (groups: string[]) => void;
  onSelectDetail?: (groups: WechatGroup[]) => void; // 新增
  placeholder?: string;
  className?: string;
}

export default function GroupSelection({
  selectedGroups,
  onSelect,
  onSelectDetail,
  placeholder = "选择群聊",
  className = "",
}: GroupSelectionProps) {
  const [dialogOpen, setDialogOpen] = 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 openDialog = () => {
    setCurrentPage(1);
    setSearchQuery(""); // 重置搜索关键词
    setDialogOpen(true);
    fetchGroups(1, "");
  };

  // 当页码变化时，拉取对应页数据（弹窗已打开时）
  useEffect(() => {
    if (dialogOpen && currentPage !== 1) {
      fetchGroups(currentPage, searchQuery);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentPage]);

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

  // 获取群组列表API - 支持keyword
  const fetchGroups = async (page: number, keyword: string = "") => {
    setLoading(true);
    try {
      const res = await fetchGroupsList({
        page,
        limit: 20,
        keyword: keyword.trim() || undefined,
      });
      if (res && res.code === 200 && res.data) {
        setGroups(
          res.data.list.map((group) => ({
            id: group.id?.toString() || "",
            chatroomId: group.chatroomId || "",
            name: group.name || "",
            avatar: group.avatar || "",
            ownerWechatId: group.ownerWechatId || "",
            ownerNickname: group.ownerNickname || "",
            ownerAvatar: group.ownerAvatar || "",
          }))
        );
        setTotalGroups(res.data.total || 0);
        setTotalPages(Math.ceil((res.data.total || 0) / 20));
      }
    } catch (error) {
      console.error("获取群组列表失败:", error);
    } 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 = () => {
    setDialogOpen(false);
  };

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

  return (
    <>
      {/* 输入框 */}
      <div className={`relative ${className}`}>
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
          <svg
            width="20"
            height="20"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
        </span>
        <Input
          placeholder={placeholder}
          className="pl-10 h-12 rounded-xl border-gray-200 text-base"
          readOnly
          onClick={openDialog}
          value={getDisplayText()}
        />
      </div>

      {/* 群组选择弹窗 */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-w-xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden  bg-white">
          <div className="p-6">
            <DialogTitle className="text-center text-xl font-medium mb-6">
              选择群聊
            </DialogTitle>
            <div className="relative mb-4">
              <Input
                placeholder="搜索群聊"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 py-2 rounded-full border-gray-200"
              />
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              {searchQuery && (
                <Button
                  variant="ghost"
                  size="icon"
                  className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 rounded-full"
                  onClick={handleClearSearch}
                >
                  <X className="h-4 w-4" />
                </Button>
              )}
            </div>
          </div>

          <div className="flex-1 overflow-y-auto h-[50vh]">
            {loading ? (
              <div className="flex items-center justify-center h-full">
                <div className="text-gray-500">加载中...</div>
              </div>
            ) : groups.length > 0 ? (
              <div className="divide-y">
                {groups.map((group) => (
                  <label
                    key={group.id}
                    className="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer"
                    onClick={() => handleGroupToggle(group.id)}
                  >
                    <div className="mr-3 flex items-center justify-center">
                      <div
                        className={`w-5 h-5 rounded-full border ${
                          selectedGroups.includes(group.id)
                            ? "border-blue-600"
                            : "border-gray-300"
                        } flex items-center justify-center`}
                      >
                        {selectedGroups.includes(group.id) && (
                          <div className="w-3 h-3 rounded-full bg-blue-600"></div>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center space-x-3 flex-1">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-sm font-medium overflow-hidden">
                        {group.avatar ? (
                          <img
                            src={group.avatar}
                            alt={group.name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          group.name.charAt(0)
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="font-medium">{group.name}</div>
                        <div className="text-sm text-gray-500">
                          群ID: {group.chatroomId}
                        </div>
                        {group.ownerNickname && (
                          <div className="text-sm text-gray-400">
                            群主: {group.ownerNickname}
                          </div>
                        )}
                      </div>
                    </div>
                  </label>
                ))}
              </div>
            ) : (
              <div className="flex items-center justify-center h-full">
                <div className="text-gray-500">
                  {searchQuery
                    ? `没有找到包含"${searchQuery}"的群聊`
                    : "没有找到群聊"}
                </div>
              </div>
            )}
          </div>

          <div className="border-t p-4 flex items-center justify-between bg-white">
            <div className="text-sm text-gray-500">
              总计 {totalGroups} 个群聊
              {searchQuery && ` (搜索: "${searchQuery}")`}
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                disabled={currentPage === 1 || loading}
                className="px-2 py-0 h-8 min-w-0"
              >
                &lt;
              </Button>
              <span className="text-sm">
                {currentPage} / {totalPages}
              </span>
              <Button
                variant="ghost"
                size="sm"
                onClick={() =>
                  setCurrentPage(Math.min(totalPages, currentPage + 1))
                }
                disabled={currentPage === totalPages || loading}
                className="px-2 py-0 h-8 min-w-0"
              >
                &gt;
              </Button>
            </div>
          </div>

          <div className="border-t p-4 flex items-center justify-between bg-white">
            <Button
              variant="outline"
              onClick={() => setDialogOpen(false)}
              className="px-6 rounded-full border-gray-300"
            >
              取消
            </Button>
            <Button
              onClick={handleConfirm}
              className="px-6 bg-blue-600 hover:bg-blue-700 rounded-full"
            >
              确定 ({selectedGroups.length})
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}