import { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate, useBlocker } from "react-router-dom";
import {
  Users,
  Briefcase,
  Trash2,
  Search,
  Loader2,
} from "lucide-react";
import { toast } from "sonner";

import { createProject } from "../api/projects";
import { getClients } from "../api/clients";
import { fetchWorkspaceMemberships } from "../api/workspaces";
import { searchUserByExactMobile, type SearchedUser } from "../api/users";
import { useAppContext } from "../context/AppContext";
import { useWorkspace } from "../context/WorkspaceContext";
import { useTranslation } from "../hooks/useTranslation";
import { PROJECTS_CREATE, canWorkspace } from "../lib/permissions";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Select } from "../components/ui/Select";
import { TextAreaInput } from "../components/ui/TextAreaInput";
import { InfiniteScroll } from "../components/InfiniteScroll";
import { Modal } from "../components/Modal";

type ProjectRole = "manager" | "member";

interface LocalMember {
  localId: string;
  user: any;
  role: ProjectRole;
  isCreator?: boolean;
}

const COLORS = [
  "#3B82F6",
  "#10B981",
  "#F59E0B",
  "#EF4444",
  "#8B5CF6",
  "#EC4899",
  "#14B8A6",
  "#64748B",
];

const toEnglishDigits = (str: string) => {
  if (!str) return "";
  return str
    .replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d).toString())
    .replace(/[٠-٩]/g, (d) => "٠١٢٣٤٥٦٧٨٩".indexOf(d).toString());
};

const LIMIT = 10;

export default function ProjectCreate() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { user } = useAppContext();
  const { activeWorkspace } = useWorkspace();
  const currentUserId = user?.id || "";
  const canCreateProject = canWorkspace(activeWorkspace?.my_role, PROJECTS_CREATE);

  // Project Detail States
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [color, setColor] = useState(COLORS[0]);
  const [client, setClient] = useState("");
  const [clientsList, setClientsList] = useState<any[]>([]);

  // Workspace List & Pagination States
  const [workspaceMembers, setWorkspaceMembers] = useState<any[]>([]);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  
  // Member Management States
  const [members, setMembers] = useState<LocalMember[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [addAllMembers, setAddAllMembers] = useState(false);
  const [isAddingAll, setIsAddingAll] = useState(false);

  // External Search States
  const [searchResult, setSearchResult] = useState<SearchedUser | null>(null);
  const [isSearching, setIsSearching] = useState(false);
  const [searchError, setSearchError] = useState(false);
  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const [isSaving, setIsSaving] = useState(false);
  const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);

  const hasUnsavedChanges = name.trim() !== "" || description.trim() !== "" || members.length > 1;

  useEffect(() => {
    if (activeWorkspace && !canCreateProject) {
      toast.error("You do not have permission to create projects.");
      navigate("/projects");
    }
  }, [activeWorkspace, canCreateProject, navigate]);

  useBlocker(({ currentLocation, nextLocation }) => {
    if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
      return !window.confirm(t.confirmLeave || "You have unsaved changes. Are you sure you want to leave?");
    }
    return false;
  });

  // EXACT same pagination structure as EditWorkspace.tsx
  useEffect(() => {
    if (activeWorkspace?.id) {
      const workspaceId = activeWorkspace.id;

      setName("");
      setDescription("");
      setColor(COLORS[0]);
      setClient("");
      setClientsList([]);
      setWorkspaceMembers([]);
      setSearchQuery("");
      setSearchResult(null);
      setSearchError(false);
      setAddAllMembers(false);
      
      // Reset pagination state
      setOffset(0);
      setHasMore(true);
      setIsLoadingData(true);

      if (user?.id) {
        setMembers([{ localId: user.id, user: user, role: "manager", isCreator: true }]);
      } else {
        setMembers([]);
      }

      const loadInitialData = async () => {
        try {
          const clientsRes = await getClients(workspaceId);
          setClientsList(clientsRes.results || []);
          
          const res = await fetchWorkspaceMemberships({
            workspace: workspaceId,
            limit: LIMIT,
            offset: 0,
          });
          const results = res.results || (Array.isArray(res) ? res : []);
          
          setWorkspaceMembers(results);
          setOffset(LIMIT);
          setHasMore(res.next ? true : results.length >= LIMIT);
        } catch (err) {
          console.error("Failed to fetch initial data", err);
          toast.error("Failed to load initial data.");
        } finally {
          setIsLoadingData(false);
        }
      };
      
      loadInitialData();
    }
  }, [activeWorkspace?.id, user?.id]);

  // EXACT same LoadMore logic and deduplication as EditWorkspace.tsx
  const loadMoreMembers = useCallback(async () => {
    if (isLoadingMore || !hasMore || !activeWorkspace?.id) return;
    try {
      setIsLoadingMore(true);
      
      const res = await fetchWorkspaceMemberships({ 
        workspace: activeWorkspace.id, 
        limit: LIMIT, 
        offset: offset 
      });
      const results = res.results || (Array.isArray(res) ? res : []);
      
      setWorkspaceMembers((prev) => {
        // Safe deduplication to avoid React key warnings breaking the DOM observer
        const existingIds = new Set(prev.map(m => m.id));
        const newItems = results.filter((item: any) => !existingIds.has(item.id));
        return [...prev, ...newItems];
      });
      
      setOffset(prev => prev + LIMIT);
      setHasMore(res.next ? true : results.length >= LIMIT);
      
    } catch (error) {
      console.error("Failed to load more members", error);
    } finally {
      setIsLoadingMore(false);
    }
  }, [activeWorkspace?.id, isLoadingMore, hasMore, offset]);

  // Unified Search Logic
  useEffect(() => {
    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
    const cleanQuery = toEnglishDigits(searchQuery.trim());
    setSearchError(false);

    if (cleanQuery.length >= 10 && /^\d+$/.test(cleanQuery)) {
      searchTimeoutRef.current = setTimeout(async () => {
        setIsSearching(true);
        try {
          const foundUser = await searchUserByExactMobile(cleanQuery);
          if (foundUser && foundUser.id) {
            if (foundUser.id === currentUserId) {
              setSearchResult(null);
            } else {
              setSearchResult(foundUser);
              setSearchError(false);
            }
          } else {
            setSearchResult(null);
            setSearchError(true);
          }
        } catch (error) {
          setSearchResult(null);
          setSearchError(true);
        } finally {
          setIsSearching(false);
        }
      }, 500);
    } else {
      setSearchResult(null);
    }
    return () => {
      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
    };
  }, [searchQuery, currentUserId]);

  const handleAddMember = (userToAdd: any) => {
    if (members.some((m) => m.user.id === userToAdd.id)) return;
    const newMember: LocalMember = {
      localId: Math.random().toString(36).substr(2, 9),
      user: userToAdd,
      role: "member",
    };
    setMembers((prev) => [newMember, ...prev]);
    setSearchQuery("");
    setSearchResult(null);
  };

  const handleToggleAddAllMembers = async () => {
    if (addAllMembers) {
      setMembers((prev) => prev.filter(m => m.isCreator || m.role === "manager"));
      setAddAllMembers(false);
    } else {
      if (!activeWorkspace?.id) return;
      setIsAddingAll(true);
      try {
        let currentOffset = 0;
        let continueFetching = true;
        const allWsMembers: any[] = [];

        while (continueFetching) {
          const res = await fetchWorkspaceMemberships({
            workspace: activeWorkspace.id,
            limit: 50,
            offset: currentOffset,
          });
          const fetchedResults = res.results || (Array.isArray(res) ? res : []);
          allWsMembers.push(...fetchedResults);
          if (res.next) {
            currentOffset += 50;
          } else {
            continueFetching = false;
          }
        }

        const newMembersToAdd = allWsMembers
          .map((wm) => wm.user)
          .filter((u) => u && u.id !== currentUserId && !members.some((m) => m.user.id === u.id));

        const localMembers: LocalMember[] = newMembersToAdd.map((u) => ({
          localId: Math.random().toString(36).substr(2, 9),
          user: u,
          role: "member",
        }));

        setMembers((prev) => [...prev, ...localMembers]);
        setAddAllMembers(true);
      } catch (error) {
        toast.error("Could not add all workspace members.");
      } finally {
        setIsAddingAll(false);
      }
    }
  };

  const openDeleteModal = (userId: string) => {
    setMemberIdToDelete(userId);
    setIsDeleteDialogOpen(true);
  };

  const handleDeleteMember = () => {
    if (!memberIdToDelete) return;
    setMembers(members.filter((m) => m.user.id !== memberIdToDelete));
    setIsDeleteDialogOpen(false);
    setMemberIdToDelete(null);
  };

  const handleChangeRole = (userId: string, newRole: string) => {
    setMembers(
      members.map((m) => (m.user.id === userId ? { ...m, role: newRole as ProjectRole } : m))
    );
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || !activeWorkspace) return;

    try {
      setIsSaving(true);
      const membersPayload = members
        .filter((m) => !m.isCreator)
        .map((m) => ({ user_id: m.user.id, role: m.role }));

      const projectPayload: any = {
        name,
        description,
        color,
        workspace: activeWorkspace.id,
        members: membersPayload,
      };
      if (client) projectPayload.client = client;

      const newProject = await createProject(projectPayload);

      window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
      toast.success(t.projects?.createSuccess || "Project created successfully.");
      navigate("/projects");
    } catch (error: any) {
      toast.error(error.message || t.projects?.createError || "Failed to create project.");
    } finally {
      setIsSaving(false);
    }
  };

  // Prepare unified display list
  const filteredWorkspaceMembers = workspaceMembers.filter((m) => {
    const q = searchQuery.trim().toLowerCase();
    if (!q) return true;
    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
    const phone = toEnglishDigits(m.user.mobile || "");
    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
  });

  const workspaceMemberUserIds = new Set(filteredWorkspaceMembers.map((m) => m.user.id));

  const externalAddedMembers = members.filter((m) => {
    if (workspaceMemberUserIds.has(m.user.id)) return false;
    const q = searchQuery.trim().toLowerCase();
    if (!q) return true;
    const fullName = `${m.user.first_name || ""} ${m.user.last_name || ""}`.toLowerCase();
    const phone = toEnglishDigits(m.user.mobile || "");
    return fullName.includes(q) || phone.includes(toEnglishDigits(q));
  });

  const displayList = [
    ...externalAddedMembers.map((m) => ({ listId: m.localId, user: m.user })),
    ...filteredWorkspaceMembers.map((m) => ({ listId: m.id || m.user.id, user: m.user }))
  ];

  if (!activeWorkspace) {
    return null;
  }

  return (
    <div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
      <h1 className="text-2xl font-bold text-slate-800 dark:text-slate-200 mb-6 shrink-0">
        {t.projects?.createNew || "Create New Project"}
      </h1>

      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
        <div className="w-full lg:w-1/3 lg:max-w-md bg-white dark:bg-slate-900 rounded-lg shadow-sm border border-slate-200 dark:border-slate-800 overflow-y-auto">
          <form id="create-project-form" onSubmit={handleSubmit} className="flex flex-col h-full p-6">
            <div className="flex-1 space-y-6">
              <div className="flex flex-col gap-3">
                <div className="flex items-center gap-4">
                  <div className="h-10 w-10 rounded-lg shrink-0 shadow-sm" style={{ backgroundColor: color }} />
                  <Input
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder={t.projects?.namePlaceholder || "Project name..."}
                    required
                  />
                </div>
                <div className="flex flex-wrap gap-2 mt-2">
                  {COLORS.map((c) => (
                    <button
                      key={c}
                      type="button"
                      onClick={() => setColor(c)}
                      className={`w-5 h-5 rounded-full transition-all duration-150 shrink-0 ${
                        color === c
                          ? "ring-2 ring-offset-2 ring-offset-white dark:ring-offset-slate-800 ring-blue-500 scale-110 shadow-md"
                          : "hover:scale-110 shadow-sm"
                      }`}
                      style={{ backgroundColor: c }}
                      aria-label={`Select color ${c}`}
                    />
                  ))}
                </div>
              </div>

              <div>
                <label className="text-slate-700 dark:text-slate-300 mb-2 flex items-center gap-2">
                  <Briefcase size={16} />
                  {t.projects?.client || "Client"}
                </label>
                <Select
                  value={client}
                  onChange={setClient}
                  options={[
                    { value: "", label: t.projects?.noClient || "No Client" },
                    ...clientsList.map((c) => ({ value: c.id, label: c.name })),
                  ]}
                  className="w-full"
                  buttonClassName="w-full"
                />
              </div>

              <div>
                <label className="block text-slate-700 dark:text-slate-300 mb-2">
                  {t.projects?.descriptionLabel || "Description (Optional)"}
                </label>
                <TextAreaInput
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder={t.projects?.descriptionPlaceholder || "Add more details..."}
                  rows={4}
                />
              </div>
            </div>

            <div className="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3 shrink-0">
              <Button variant="ghost" type="button" onClick={() => navigate("/projects")}>
                {t.cancel || "Cancel"}
              </Button>
              <Button type="submit" disabled={isSaving || !name.trim()}>
                {isSaving && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
                {t.create || "Create"}
              </Button>
            </div>
          </form>
        </div>

        <div className="w-full lg:w-2/3 flex flex-col min-h-0 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 shadow-sm rounded-lg border">
          <div className="p-4 border-b border-slate-200 dark:border-slate-700 shrink-0 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
                <Users size={18} />
                {t.projects?.projectMembers || "Project Members"}
              </h3>
              <Button
                type="button"
                variant={addAllMembers ? "destructive" : "outline"}
                disabled={isAddingAll || isLoadingData}
                onClick={handleToggleAddAllMembers}
              >
                {isAddingAll && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {addAllMembers 
                  ? (t.projects?.removeAllWorkspaceMembers || "Remove All") 
                  : (t.projects?.addAllWorkspaceMembers || "Add All")}
              </Button>
            </div>
            
            <div className="relative">
              <Search className="absolute inset-s-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
              <Input
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder={t.projects?.searchWorkspaceMembers || "Search by name or enter mobile number..."}
                className="ps-10"
              />
              {isSearching && (
                <Loader2 className="animate-spin absolute inset-e-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
              )}
            </div>

            {searchError && (
              <p className="text-xs text-red-500 dark:text-red-400 mt-2">
                {t.projects?.userNotFound || "No user found with this mobile number."}
              </p>
            )}

            {searchResult && !searchError && (
              <div className="p-3 border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-900/20 rounded-md flex items-center justify-between mt-2">
                <div className="flex items-center gap-3">
                  {searchResult.profile_picture ? (
                    <img 
                        src={searchResult.profile_picture} 
                        alt={searchResult.first_name} 
                        className="w-10 h-10 rounded-full object-cover shadow-sm" 
                    />
                  ) : (
                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
                        {searchResult.first_name?.[0] || "U"}
                    </div>
                  )}
                  <div className="flex flex-col">
                    <span className="text-sm font-semibold text-slate-800 dark:text-slate-200">
                      {searchResult.first_name} {searchResult.last_name}
                    </span>
                    <span className="text-xs text-slate-500 dark:text-slate-400">
                      {searchResult.mobile}
                    </span>
                  </div>
                </div>
                <Button
                  type="button"
                  variant="default"
                  size="sm"
                  disabled={members.some((m) => m.user.id === searchResult.id)}
                  onClick={() => handleAddMember(searchResult)}
                >
                  {members.some((m) => m.user.id === searchResult.id)
                    ? (t.projects?.alreadyInProject || "Already Added")
                    : (t.projects?.addToProject || "Add to Project")}
                </Button>
              </div>
            )}
          </div>
          
          <div className="flex-1 overflow-y-auto p-2">
            {isLoadingData ? (
              <div className="p-4 text-sm text-slate-500 flex justify-center items-center gap-2">
                <Loader2 className="h-5 w-5 animate-spin" />
                {t.loading || "Loading..."}
              </div>
            ) : (
              <InfiniteScroll
                onLoadMore={loadMoreMembers}
                hasMore={hasMore && searchQuery.trim().length === 0} 
                isLoading={isLoadingMore}
              >
                {displayList.length === 0 ? (
                  <div className="p-4 text-sm text-slate-500 text-center">
                    {t.projects?.noWorkspaceMembers || "No members found."}
                  </div>
                ) : (
                  <ul className="divide-y divide-slate-100 dark:divide-slate-700/50">
                    {displayList.map((item) => {
                      const addedMemberData = members.find((mm) => mm.user.id === item.user.id);
                      const isAdded = !!addedMemberData;

                      return (
                        <li key={item.listId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 gap-3 hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors rounded-lg">
                          <div className="flex items-center gap-3">
                            {item.user.profile_picture ? (
                              <img 
                                src={item.user.profile_picture} 
                                alt={item.user.first_name} 
                                className="w-9 h-9 rounded-full object-cover shadow-sm" 
                              />
                            ) : (
                              <div className="w-9 h-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm flex-shrink-0">
                                {item.user.first_name?.[0] || "U"}
                              </div>
                            )}
                            <div className="flex flex-col">
                              <span className="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-2">
                                {item.user.first_name} {item.user.last_name}
                                {addedMemberData?.isCreator && (
                                  <span className="text-[10px] bg-slate-200 dark:bg-slate-600 px-2 py-0.5 rounded-full text-slate-600 dark:text-slate-300 font-bold">
                                    {t.projects?.creator || "Creator"}
                                  </span>
                                )}
                              </span>
                              <span className="text-xs text-slate-500 dark:text-slate-400">
                                {item.user.mobile}
                              </span>
                            </div>
                          </div>

                          <div>
                            {isAdded ? (
                              <div className="flex items-center gap-2">
                                {!addedMemberData.isCreator && (
                                  <Select
                                    value={addedMemberData.role}
                                    onChange={(val) => handleChangeRole(item.user.id, val)}
                                    options={[
                                      { value: "member", label: t.projects?.roles?.member || "Member" },
                                      { value: "manager", label: t.projects?.roles?.manager || "Manager" },
                                    ]}
                                    buttonClassName="text-xs h-8 w-28"
                                  />
                                )}
                                {!addedMemberData.isCreator && (
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    className="h-8 w-8 shrink-0 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
                                    onClick={() => openDeleteModal(item.user.id)}
                                  >
                                    <Trash2 size={16} />
                                  </Button>
                                )}
                              </div>
                            ) : (
                              <Button
                                type="button"
                                variant="secondary"
                                onClick={() => handleAddMember(item.user)}
                              >
                                {t.projects?.addToProject || "Add to Project"}
                              </Button>
                            )}
                          </div>
                        </li>
                      );
                    })}
                  </ul>
                )}
              </InfiniteScroll>
            )}
          </div>
        </div>
      </div>

      <Modal
        isOpen={isDeleteDialogOpen}
        onClose={() => setIsDeleteDialogOpen(false)}
        title={t.projects?.confirmDeleteTitle || "Remove Member"}
        description={
          t.projects?.confirmDeleteDesc || "Are you sure you want to remove this member from the project?"
        }
      >
        <div className="flex justify-end gap-3 mt-6">
          <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
            {t.cancel || "Cancel"}
          </Button>
          <Button variant="destructive" onClick={handleDeleteMember}>
            {t.remove || "Remove"}
          </Button>
        </div>
      </Modal>
    </div>
  );
}