import { useEffect, useMemo, useState } from "react";
import {
  Briefcase,
  CheckCheck,
  CheckCircle2,
  CheckSquare,
  FolderTree,
  Loader2,
  Search,
  ShieldAlert,
  ShieldCheck,
  Square,
  UserRound,
  Users,
  X,
} from "lucide-react";
import { toast } from "sonner";

import {
  getProjectAccessState,
  grantProjectAccess,
  revokeProjectAccess,
  saveProjectAccessRate,
  type ProjectAccessItem,
  type ProjectAccessRateValue,
} from "../../api/projects";
import { getPriceUnits, type PriceUnit } from "../../api/rates";
import { fetchWorkspaceMemberships, type WorkspaceMembership } from "../../api/workspaces";
import { useTranslation } from "../../hooks/useTranslation";
import { formatRateDisplay } from "../../lib/money";
import { Modal } from "../Modal";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Select } from "../ui/Select";

type Labels = {
  title: string;
  description: string;
  close: string;
  member: string;
  projects: string;
  loading: string;
  noMembers: string;
  noProjects: string;
  searchPlaceholder: string;
  allClients: string;
  selectAllVisible: string;
  clearSelection: string;
  selectClientProjects: string;
  grantSelected: string;
  revokeSelected: string;
  accessGranted: string;
  accessRevoked: string;
  memberRole: string;
  client: string;
  noClient: string;
  accessOn: string;
  accessOff: string;
  loadError: string;
  saveError: string;
  workspaceRate: string;
  projectOverride: string;
  inheritsWorkspaceRate: string;
  noRate: string;
  hourlyRatePlaceholder: string;
  currencyPlaceholder: string;
  removeRate: string;
  projectRateSaved: string;
  projectRateRemoved: string;
  projectRateSaveError: string;
  projectRateRemoveError: string;
};

type RateDraft = {
  hourlyRate: string;
  currency: string;
};

const MANAGEABLE_ROLES = new Set(["member", "guest"]);

function getMemberName(member: WorkspaceMembership) {
  return (
    member.user?.name ||
    `${member.user?.first_name || ""} ${member.user?.last_name || ""}`.trim() ||
    member.user?.mobile ||
    member.id
  );
}

function getPreferredCurrency(
  item: Pick<ProjectAccessItem, "project_rate" | "workspace_rate">,
  defaultCurrency: string,
) {
  return item.project_rate?.currency || item.workspace_rate?.currency || defaultCurrency;
}

function getDraftFromItem(item: ProjectAccessItem, defaultCurrency: string): RateDraft {
  return {
    hourlyRate: item.project_rate?.hourly_rate || "",
    currency: getPreferredCurrency(item, defaultCurrency),
  };
}

function formatRate(rate: ProjectAccessRateValue | null, labels: Labels, lang: "en" | "fa") {
  if (!rate) return labels.noRate;
  return formatRateDisplay(rate, lang);
}

export function ProjectAccessModal({
  isOpen,
  onClose,
  workspaceId,
  labels,
  onApplied,
}: {
  isOpen: boolean;
  onClose: () => void;
  workspaceId: string;
  labels: Labels;
  onApplied: () => void;
}) {
  const [members, setMembers] = useState<WorkspaceMembership[]>([]);
  const [loadingMembers, setLoadingMembers] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState("");
  const [projectItems, setProjectItems] = useState<ProjectAccessItem[]>([]);
  const [loadingProjects, setLoadingProjects] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [memberSearchQuery, setMemberSearchQuery] = useState("");
  const [selectedClientId, setSelectedClientId] = useState("");
  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
  const [isSaving, setIsSaving] = useState(false);
  const [savingRateProjectId, setSavingRateProjectId] = useState<string | null>(null);
  const [priceUnits, setPriceUnits] = useState<PriceUnit[]>([]);
  const [rateDrafts, setRateDrafts] = useState<Record<string, RateDraft>>({});
  const { lang } = useTranslation();
  const isRtl =
    typeof document !== "undefined" && document.documentElement.dir === "rtl";

  const defaultCurrency = priceUnits[0]?.code || "USD";

  const manageableMembers = useMemo(
    () => members.filter((member) => member.is_active && MANAGEABLE_ROLES.has(member.role)),
    [members],
  );

  const filteredMembers = useMemo(() => {
    const normalizedSearch = memberSearchQuery.trim().toLowerCase();
    const baseMembers = !normalizedSearch
      ? manageableMembers
      : manageableMembers.filter((member) => {
          const memberName = getMemberName(member).toLowerCase();
          const memberMobile = member.user?.mobile?.toLowerCase() ?? "";
          return memberName.includes(normalizedSearch) || memberMobile.includes(normalizedSearch);
        });

    return [...baseMembers].sort((a, b) => {
      if (a.user.id === selectedUserId) return -1;
      if (b.user.id === selectedUserId) return 1;
      return 0;
    });
  }, [manageableMembers, memberSearchQuery, selectedUserId]);

  const clientOptions = useMemo(() => {
    const map = new Map<string, string>();
    projectItems.forEach((item) => {
      if (item.client) {
        map.set(item.client.id, item.client.name);
      }
    });
    return Array.from(map.entries()).map(([id, name]) => ({ id, name }));
  }, [projectItems]);

  const visibleProjects = useMemo(() => {
    const normalizedSearch = searchQuery.trim().toLowerCase();
    return projectItems.filter((item) => {
      const matchesClient = !selectedClientId || item.client?.id === selectedClientId;
      const matchesSearch =
        !normalizedSearch ||
        item.name.toLowerCase().includes(normalizedSearch) ||
        item.client?.name.toLowerCase().includes(normalizedSearch);
      return matchesClient && matchesSearch;
    });
  }, [projectItems, searchQuery, selectedClientId]);

  const visibleProjectIds = useMemo(() => visibleProjects.map((item) => item.id), [visibleProjects]);

  const selectedVisibleCount = useMemo(
    () => selectedProjectIds.filter((id) => visibleProjectIds.includes(id)).length,
    [selectedProjectIds, visibleProjectIds],
  );

  const currencyOptions = useMemo(() => {
    if (priceUnits.length) {
      return priceUnits.map((unit) => ({
        value: unit.code,
        label: unit.local_name ? `${unit.local_name} (${unit.code})` : `${unit.code} (${unit.name})`,
      }));
    }

    const fallbackCurrencies = Array.from(
      new Set(
        projectItems.flatMap((item) => [
          item.project_rate?.currency,
          item.workspace_rate?.currency,
          defaultCurrency,
        ]).filter(Boolean) as string[],
      ),
    );
    return fallbackCurrencies.map((code) => ({ value: code, label: code }));
  }, [defaultCurrency, priceUnits, projectItems]);

  useEffect(() => {
    if (!isOpen) {
      setSearchQuery("");
      setMemberSearchQuery("");
      setSelectedClientId("");
      setSelectedProjectIds([]);
      setRateDrafts({});
      return;
    }

    const loadDependencies = async () => {
      setLoadingMembers(true);
      const [membersResult, priceUnitsResult] = await Promise.allSettled([
        fetchWorkspaceMemberships({ workspace: workspaceId, limit: 200, offset: 0 }),
        getPriceUnits(),
      ]);

      if (membersResult.status === "fulfilled") {
        setMembers(membersResult.value.results || []);
      } else {
        toast.error(labels.loadError);
        setMembers([]);
      }

      if (priceUnitsResult.status === "fulfilled") {
        setPriceUnits(priceUnitsResult.value.results || []);
      } else {
        setPriceUnits([]);
      }

      setLoadingMembers(false);
    };

    void loadDependencies();
  }, [isOpen, labels.loadError, workspaceId]);

  useEffect(() => {
    if (!manageableMembers.length) {
      setSelectedUserId("");
      return;
    }
    if (!manageableMembers.some((member) => member.user.id === selectedUserId)) {
      setSelectedUserId(manageableMembers[0].user.id);
    }
  }, [manageableMembers, selectedUserId]);

  useEffect(() => {
    if (!isOpen || !selectedUserId) {
      setProjectItems([]);
      return;
    }

    const loadAccessState = async () => {
      setLoadingProjects(true);
      try {
        const response = await getProjectAccessState(workspaceId, selectedUserId);
        setProjectItems(response.items);
        setSelectedProjectIds([]);
      } catch {
        toast.error(labels.loadError);
        setProjectItems([]);
      } finally {
        setLoadingProjects(false);
      }
    };

    void loadAccessState();
  }, [isOpen, labels.loadError, selectedUserId, workspaceId]);

  useEffect(() => {
    if (!projectItems.length) {
      setRateDrafts({});
      return;
    }

    const nextDrafts: Record<string, RateDraft> = {};
    projectItems.forEach((item) => {
      nextDrafts[item.id] = getDraftFromItem(item, defaultCurrency);
    });
    setRateDrafts(nextDrafts);
  }, [defaultCurrency, projectItems]);

  const replaceProjectItem = (nextItem: ProjectAccessItem) => {
    setProjectItems((current) =>
      current.map((item) => (item.id === nextItem.id ? nextItem : item)),
    );
  };

  const syncRateDraftFromItem = (item: ProjectAccessItem) => {
    setRateDrafts((current) => ({
      ...current,
      [item.id]: getDraftFromItem(item, defaultCurrency),
    }));
  };

  const toggleProjectSelection = (projectId: string) => {
    setSelectedProjectIds((current) =>
      current.includes(projectId)
        ? current.filter((id) => id !== projectId)
        : [...current, projectId],
    );
  };

  const handleSelectAllVisible = () => {
    setSelectedProjectIds((current) => Array.from(new Set([...current, ...visibleProjectIds])));
  };

  const handleSelectClientProjects = () => {
    if (!selectedClientId) return;
    const clientProjectIds = visibleProjects
      .filter((item) => item.client?.id === selectedClientId)
      .map((item) => item.id);
    setSelectedProjectIds((current) => Array.from(new Set([...current, ...clientProjectIds])));
  };

  const refreshState = async () => {
    if (!selectedUserId) return;
    const response = await getProjectAccessState(workspaceId, selectedUserId);
    setProjectItems(response.items);
    setSelectedProjectIds([]);
    onApplied();
  };

  const handleMutation = async (mode: "grant" | "revoke") => {
    if (!selectedUserId || !selectedProjectIds.length) return;
    setIsSaving(true);
    try {
      if (mode === "grant") {
        await grantProjectAccess(workspaceId, selectedUserId, selectedProjectIds);
        toast.success(labels.accessGranted);
      } else {
        await revokeProjectAccess(workspaceId, selectedUserId, selectedProjectIds);
        toast.success(labels.accessRevoked);
      }
      await refreshState();
    } catch {
      toast.error(labels.saveError);
    } finally {
      setIsSaving(false);
    }
  };

  const handleRateDraftChange = (projectId: string, patch: Partial<RateDraft>) => {
    setRateDrafts((current) => ({
      ...current,
      [projectId]: {
        hourlyRate: current[projectId]?.hourlyRate || "",
        currency: current[projectId]?.currency || defaultCurrency,
        ...patch,
      },
    }));
  };

  const persistProjectRate = async (
    item: ProjectAccessItem,
    nextDraft?: Partial<RateDraft>,
  ) => {
    if (!selectedUserId || !item.has_access || savingRateProjectId) return;

    const draft = {
      ...(rateDrafts[item.id] || getDraftFromItem(item, defaultCurrency)),
      ...nextDraft,
    };
    const trimmedRate = draft.hourlyRate.trim();
    const normalizedCurrency = (draft.currency || getPreferredCurrency(item, defaultCurrency)).toUpperCase();
    const currentRate = item.project_rate;

    if (!trimmedRate) {
      if (!currentRate) {
        syncRateDraftFromItem(item);
        return;
      }

      setSavingRateProjectId(item.id);
      try {
        const response = await saveProjectAccessRate(
          workspaceId,
          selectedUserId,
          item.id,
          null,
          normalizedCurrency,
        );
        replaceProjectItem(response.item);
        syncRateDraftFromItem(response.item);
        toast.success(labels.projectRateRemoved);
      } catch (error) {
        toast.error(error instanceof Error ? error.message : labels.projectRateRemoveError);
        syncRateDraftFromItem(item);
      } finally {
        setSavingRateProjectId(null);
      }
      return;
    }

    if (
      currentRate?.hourly_rate === trimmedRate &&
      currentRate?.currency === normalizedCurrency
    ) {
      return;
    }

    setSavingRateProjectId(item.id);
    try {
      const response = await saveProjectAccessRate(
        workspaceId,
        selectedUserId,
        item.id,
        trimmedRate,
        normalizedCurrency,
      );
      replaceProjectItem(response.item);
      syncRateDraftFromItem(response.item);
      toast.success(labels.projectRateSaved);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : labels.projectRateSaveError);
      syncRateDraftFromItem(item);
    } finally {
      setSavingRateProjectId(null);
    }
  };

  const footer = (
    <>
      <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
        <div className="inline-flex h-8 min-w-8 items-center justify-center rounded-full bg-slate-200 px-2 text-xs font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200">
          {selectedProjectIds.length}
        </div>
      </div>

      <Button
        type="button"
        variant="outline"
        onClick={() => void handleMutation("grant")}
        disabled={!selectedProjectIds.length || isSaving}
        className="gap-2"
      >
        {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldCheck className="h-4 w-4" />}
        {labels.grantSelected}
      </Button>
      <Button
        type="button"
        variant="destructive"
        onClick={() => void handleMutation("revoke")}
        disabled={!selectedProjectIds.length || isSaving}
        className="gap-2"
      >
        {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldAlert className="h-4 w-4" />}
        {labels.revokeSelected}
      </Button>
    </>
  );

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={labels.title}
      maxWidth="max-w-7xl"
      footer={footer}
    >
      <div className="space-y-4">
        <p className="max-w-3xl text-sm text-slate-600 dark:text-slate-400">
          {labels.description}
        </p>

        <div className="grid w-full grid-cols-1 gap-4 lg:grid-cols-12" dir="ltr">
          <section
            dir={isRtl ? "rtl" : "ltr"}
            className="flex min-h-[640px] min-w-0 flex-col overflow-hidden rounded-3xl border border-slate-200 bg-slate-50/40 dark:border-slate-800 dark:bg-slate-950/30 lg:col-span-8"
          >
            <div className="border-b border-slate-200 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-950/40">
              <div className="mb-3 flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                <Briefcase className="h-4 w-4" />
                {labels.projects}
              </div>

              <div className="flex flex-col gap-3 xl:items-center">
                <div className="relative min-w-0 flex-1 w-full">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 rtl:left-auto rtl:right-3" />
                  <Input
                    value={searchQuery}
                    onChange={(event) => setSearchQuery(event.target.value)}
                    placeholder={labels.searchPlaceholder}
                    className="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-slate-900 outline-none transition-shadow focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-800 dark:text-white rtl:pl-4 rtl:pr-10"
                  />
                </div>

                <Select
                  value={selectedClientId}
                  onChange={setSelectedClientId}
                  options={[
                    { value: "", label: labels.allClients },
                    ...clientOptions.map((client) => ({
                      value: client.id,
                      label: client.name,
                    })),
                  ]}
                  className="w-full"
                  buttonClassName="h-11 w-full rounded-xl"
                />
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2 border-b border-slate-200 bg-white px-4 py-3 dark:border-slate-800 dark:bg-slate-900">
              <Button
                type="button"
                variant="secondary"
                size="icon"
                onClick={handleSelectAllVisible}
                disabled={!visibleProjects.length}
                title={labels.selectAllVisible}
                aria-label={labels.selectAllVisible}
              >
                <CheckCheck className="h-4 w-4" />
              </Button>

              <Button
                type="button"
                variant="secondary"
                size="icon"
                onClick={() => setSelectedProjectIds([])}
                disabled={!selectedProjectIds.length}
                title={labels.clearSelection}
                aria-label={labels.clearSelection}
              >
                <X className="h-4 w-4" />
              </Button>

              <Button
                type="button"
                variant="secondary"
                size="icon"
                onClick={handleSelectClientProjects}
                disabled={!selectedClientId}
                title={labels.selectClientProjects}
                aria-label={labels.selectClientProjects}
              >
                <FolderTree className="h-4 w-4" />
              </Button>

              <div className="ms-auto text-xs font-medium text-slate-500 dark:text-slate-400">
                {selectedVisibleCount}/{visibleProjects.length}
              </div>
            </div>

            <div className="min-h-0 flex-1 overflow-y-auto p-4">
              {loadingProjects ? (
                <div className="flex items-center gap-2 p-4 text-sm text-slate-500 dark:text-slate-400">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  {labels.loading}
                </div>
              ) : visibleProjects.length === 0 ? (
                <div className="p-5 text-sm text-slate-500 dark:text-slate-400">
                  {labels.noProjects}
                </div>
              ) : (
                <div className="grid gap-3">
                  {visibleProjects.map((item) => {
                    const isChecked = selectedProjectIds.includes(item.id);
                    const isRateSaving = savingRateProjectId === item.id;
                    const draft = rateDrafts[item.id] || getDraftFromItem(item, defaultCurrency);

                    return (
                      <div
                        key={item.id}
                        className={`rounded-2xl border px-4 py-3 transition ${
                          isChecked
                            ? "border-sky-200 bg-sky-50/60 shadow-sm dark:border-sky-500/30 dark:bg-sky-500/10"
                            : "border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900"
                        }`}
                      >
                        <button
                          type="button"
                          onClick={() => toggleProjectSelection(item.id)}
                          className="flex w-full items-start gap-3 text-start"
                        >
                          <div
                            className={`mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition ${
                              isChecked
                                ? "border-sky-500 bg-sky-500 text-white"
                                : "border-slate-300 bg-white text-slate-400 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-500"
                            }`}
                            aria-hidden="true"
                          >
                            {isChecked ? (
                              <CheckSquare className="h-3.5 w-3.5" />
                            ) : (
                              <Square className="h-3.5 w-3.5" />
                            )}
                          </div>

                          <div className="min-w-0 flex-1">
                            <div className="flex flex-wrap items-center gap-2">
                              <span className="truncate font-medium text-slate-900 dark:text-slate-100">
                                {item.name}
                              </span>
                              <span
                                className={`inline-flex items-center rounded-full px-2 py-1 text-[11px] font-medium ${
                                  item.has_access
                                    ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-200 dark:ring-1 dark:ring-emerald-400/25"
                                    : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:ring-1 dark:ring-slate-700"
                                }`}
                              >
                                {item.has_access ? labels.accessOn : labels.accessOff}
                              </span>
                            </div>

                            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                              {item.client?.name || labels.noClient}
                            </div>

                            {item.description ? (
                              <div className="mt-1 line-clamp-2 text-sm text-slate-500 dark:text-slate-400">
                                {item.description}
                              </div>
                            ) : null}
                          </div>
                        </button>

                        <div className="mt-3 border-t border-slate-200 pt-3 dark:border-slate-800">
                          <div className="grid gap-2 md:grid-cols-2">
                            <div className="rounded-xl bg-slate-100/70 px-3 py-2 dark:bg-slate-800/70">
                              <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                                {labels.workspaceRate}
                              </div>
                              <div className="mt-1 text-sm font-medium text-slate-800 dark:text-slate-100">
                                {formatRate(item.workspace_rate, labels, lang)}
                              </div>
                            </div>

                            <div className="rounded-xl bg-slate-100/70 px-3 py-2 dark:bg-slate-800/70">
                              <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                                {labels.projectOverride}
                              </div>
                              <div className="mt-1 text-sm font-medium text-slate-800 dark:text-slate-100">
                                {item.project_rate
                                  ? formatRate(item.project_rate, labels, lang)
                                  : labels.inheritsWorkspaceRate}
                              </div>
                            </div>
                          </div>

                          <div className="mt-3 flex flex-col gap-2 lg:flex-row lg:items-center">
                            <div className="grid flex-1 gap-2 sm:grid-cols-[minmax(0,1fr)_200px]">
                              <Input
                                value={draft.hourlyRate}
                                onChange={(event) =>
                                  handleRateDraftChange(item.id, { hourlyRate: event.target.value })
                                }
                                onBlur={() => void persistProjectRate(item)}
                                inputMode="decimal"
                                placeholder={labels.hourlyRatePlaceholder}
                                disabled={!item.has_access || isRateSaving}
                                className="h-10"
                              />
                              <Select
                                value={draft.currency}
                                onChange={(value) => {
                                  handleRateDraftChange(item.id, { currency: value });
                                  if (draft.hourlyRate.trim()) {
                                    void persistProjectRate(item, { currency: value });
                                  }
                                }}
                                options={currencyOptions}
                                disabled={!item.has_access || isRateSaving}
                                className="w-full"
                                buttonClassName="h-10 w-full rounded-xl"
                              />
                            </div>

                            <div className="flex items-center gap-2">
                              <Button
                                type="button"
                                variant="secondary"
                                size="icon"
                                disabled={!item.has_access || !item.project_rate || isRateSaving}
                                title={labels.removeRate}
                                aria-label={labels.removeRate}
                                onMouseDown={(event) => event.preventDefault()}
                                onClick={() => {
                                  handleRateDraftChange(item.id, { hourlyRate: "" });
                                  void persistProjectRate(item, { hourlyRate: "" });
                                }}
                              >
                                {isRateSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <X className="h-4 w-4" />}
                              </Button>
                            </div>
                          </div>

                          {!item.has_access && item.project_rate ? (
                            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
                              {labels.projectOverride}: {formatRate(item.project_rate, labels, lang)}
                            </div>
                          ) : null}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </section>

          <aside
            dir={isRtl ? "rtl" : "ltr"}
            className="flex min-h-[640px] min-w-0 flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900 lg:col-span-4"
          >
            <div className="border-b border-slate-200 bg-slate-50/80 p-4 dark:border-slate-800 dark:bg-slate-950/40">
              <div className="mb-3 flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-300">
                <Users className="h-4 w-4" />
                {labels.member}
              </div>

              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400 rtl:left-auto rtl:right-3" />
                <Input
                  value={memberSearchQuery}
                  onChange={(event) => setMemberSearchQuery(event.target.value)}
                  placeholder={labels.member}
                  className="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-slate-900 outline-none transition-shadow focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-800 dark:text-white rtl:pl-4 rtl:pr-10"
                />
              </div>
            </div>

            <div className="min-h-0 flex-1 overflow-y-auto p-3">
              <div className="grid gap-2">
                {loadingMembers ? (
                  <div className="flex items-center gap-2 p-4 text-sm text-slate-500 dark:text-slate-400">
                    <Loader2 className="h-4 w-4 animate-spin" />
                    {labels.loading}
                  </div>
                ) : filteredMembers.length === 0 ? (
                  <div className="p-4 text-sm text-slate-500 dark:text-slate-400">
                    {labels.noMembers}
                  </div>
                ) : (
                  filteredMembers.map((member) => {
                    const isActive = member.user.id === selectedUserId;

                    return (
                      <button
                        key={member.id}
                        type="button"
                        onClick={() => setSelectedUserId(member.user.id)}
                        className={`flex w-full items-start gap-3 rounded-2xl px-4 py-3 text-start transition ${
                          isActive
                            ? "bg-sky-50/80 dark:bg-sky-500/10"
                            : "hover:bg-slate-50/70 dark:hover:bg-slate-800/40"
                        }`}
                      >
                        <div
                          className={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${
                            isActive
                              ? "bg-sky-500 text-white"
                              : "bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300"
                          }`}
                        >
                          <UserRound className="h-4 w-4" />
                        </div>

                        <div className="min-w-0 flex-1">
                          <div className="flex items-center justify-between gap-2">
                            <div className="flex min-w-0 items-center gap-2">
                              <div className="truncate font-medium text-slate-900 dark:text-slate-100">
                                {getMemberName(member)}
                              </div>

                              <span className="shrink-0 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-medium capitalize text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                {member.role}
                              </span>
                            </div>

                            {isActive ? (
                              <CheckCircle2 className="h-4 w-4 shrink-0 text-sky-500 dark:text-sky-300" />
                            ) : null}
                          </div>

                          <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                            {member.user.mobile}
                          </div>
                        </div>
                      </button>
                    );
                  })
                )}
              </div>
            </div>
          </aside>
        </div>
      </div>
    </Modal>
  );
}