"use client";

import { useEffect, useState, useMemo } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Card, Table, Tabs, Tag } from "antd";
import InputItem from "@/app/Components/FormItems";
import { handleChange } from "@/app/utils/form";
import { CardTitle } from "@/app/utils/CardTitle";
import { AlertMessage } from "../AlertMessage";
import { getStatusById } from "@/app/utils/status";
import { parseArrayField } from "@/app/utils/parseArrayField";
import { useSiteContext } from "@/app/Context/SiteContext";
import AvatarWithInfo from "../AvatarWithInfo";
import TeamMembers from "../TeamMembers";
import SkeletonLoader from "../Skeleton";
import { apiGetLimit } from "@/app/utils/variables";
import { errorMessage, successMessage } from "@/app/utils/alertMessages";
import PhotoUpload from "../PhotoUpload";
import GoogleIcon from "../GoogleIcon";

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function UserForm({
  form,
  setForm,
  isAdmin,
  typeFor,
  id,
  status,
  isEditMode,
}) {
  /* ===================== ROLES FETCH ===================== */
  const { currentSession, brandData } = useSiteContext();
  /* ---------- PAGINATION ---------- */
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(apiGetLimit);
  const [activeTab, setActiveTab] = useState("1");

  const queryClient = useQueryClient();

  const allUsersApiUrl = useMemo(
    () =>
      `/api/user?page=${currentPage}&limit=${pageSize}&orderby_created=true`,
    [currentPage, pageSize],
  );

  const { data, isPending: isLoading } = useQuery({
    queryKey: ["role", "status-12"],
    queryFn: () => fetcher("/api/role?status=12"),
  });

  const { data: getUser, isPending: isPendingUser } = useQuery({
    queryKey: ["user", currentSession?.user?.id],
    enabled: !!currentSession?.user?.id,
    queryFn: () => fetcher(`/api/user?user_id=${currentSession.user.id}`),
  });

  const allRoles = useMemo(() => data?.role || [], [data]);

  /* ---------- ADD TO TEAM ---------- */
  const handleAddToTeam = async (memberId) => {
    try {
      if (teamMemberIds.includes(Number(memberId))) return;

      const updatedIds = [...teamMemberIds, Number(memberId)];

      await fetch("/api/user", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          user_id: currentSession?.user?.id,
          team_members: JSON.stringify(updatedIds),
        }),
      });

      // 🔥 invalidate caches (THIS FIXES UI)
      queryClient.invalidateQueries({
        queryKey: ["user", currentSession?.user?.id],
      });

      queryClient.invalidateQueries({
        queryKey: ["team-members"],
      });

      successMessage("Added to team");
    } catch {
      errorMessage("Failed to add member");
    }
  };

  /* ---------- TEAM MEMBER IDS ---------- */
  const teamMemberIds = useMemo(() => {
    try {
      return JSON.parse(getUser?.user?.team_members || "[]").map(Number);
    } catch {
      return [];
    }
  }, [getUser?.user?.team_members]);

  const handleTabChange = (key) => {
    setActiveTab(key);

    if (key === "1") {
      // My Team tab
      queryClient.invalidateQueries({
        queryKey: ["user", currentSession?.user?.id],
      });

      queryClient.invalidateQueries({
        queryKey: ["team-members"],
      });
    }

    if (key === "2") {
      // All Users tab
      queryClient.invalidateQueries({
        queryKey: ["all-users"],
      });
    }
  };

  /* ===================== ACTIVE ROLES ===================== */

  const activeRoles = useMemo(
    () =>
      allRoles.filter(
        (role) =>
          Array.isArray(role.status) && role.status.some((s) => s.id === 12),
      ),
    [allRoles],
  );

  /* ===================== ROLE OPTIONS ===================== */

  const roleOptions = useMemo(
    () => [
      { value: "", label: "Select a role", disabled: true },
      ...activeRoles.map((role) => ({
        value: role.role_id, // number
        label: role.role_name,
      })),
    ],
    [activeRoles],
  );

  /* ===================== ACTIVE ROLE ===================== */

  const activeRole = useMemo(
    () => allRoles.find((role) => role.role_id === Number(form.role_id)),
    [allRoles, form.role_id],
  );

  /* ===================== PASSWORD STATE ===================== */

  const [plainPassword, setPlainPassword] = useState("");
  const [changePassword, setChangePassword] = useState(!isEditMode);

  /* ===================== DEFAULT STATUS ===================== */

  useEffect(() => {
    const parsedStatus = parseArrayField(form?.status);
    if (Array.isArray(parsedStatus) && parsedStatus.length) return;

    const defaultStatusId = parseArrayField(status)?.[0]?.id;
    if (!defaultStatusId) return;

    const defaultStatus = getStatusById(defaultStatusId);
    if (!defaultStatus) return;

    setForm((prev) => ({
      ...prev,
      status: [
        {
          id: defaultStatus.id,
          key: defaultStatus.key,
          label: defaultStatus.label,
        },
      ],
    }));
  }, [form?.status, status, setForm]);

  /* ===================== SYNC PRIVILEGES ===================== */

  useEffect(() => {
    if (!activeRole) return;

    setForm((prev) => ({
      ...prev,
      privileges: activeRole.privileges || [],
    }));
  }, [activeRole, setForm]);

  useEffect(() => {
   

    setForm((prev) => ({
      ...prev,
      change_to_superadmin: prev.role_id === "superadmin",
    }));
  }, [form.role_id, setForm]);

  /* ===================== ACCESS CONTROL ===================== */

  if (isAdmin?.user?.id !== 1 && typeFor === "user" && Number(id) === 1) {
    return (
      <div className="container ">
        <AlertMessage
          type="error"
          message="Access Denied: You do not have permission to view this user."
        />
      </div>
    );
  }

  /* ---------- ALL USERS ---------- */
  const { data: allUsers, isPending: isPendingAllUsers } = useQuery({
    queryKey: ["all-users", currentPage, pageSize],
    queryFn: () => fetcher(allUsersApiUrl),
    keepPreviousData: true,
  });

  /* ---------- FILTER USERS ---------- */
  const filteredAllUsers = useMemo(() => {
    if (!allUsers?.user) return [];

    return allUsers.user.filter((u) => {
      if (u.role_id === "superadmin") return false;
      if (Number(u.user_id) === Number(currentSession?.user?.id)) return false;
      return true;
    });
  }, [allUsers?.user, currentSession?.user?.id]);

  /* ---------- ALL USERS COLUMNS ---------- */
  const allUserColumns = [
    {
      title: "User",
      key: "user",
      width: "50%",
      render: (_, record) => (
        <div className="flex items-center gap-3">
          <AvatarWithInfo
            itemId={Number(record.user_id)}
            avatar={record.avatar}
          />
        
        </div>
      ),
    },
    {
      title: "Email",
      dataIndex: "email",
      key: "email",
      width: "50%",
    },
    {
      title: "Action",
      key: "action",
      align: "right",
      render: (_, record) => {
        const isMember = teamMemberIds.includes(Number(record.user_id));

        return isMember ? (
          <Tag color="green" style={{ fontSize: 11 }}>
            Member
          </Tag>
        ) : (
          <InputItem
            type="popconfirm"
            placeholder="Add to team"
            onClick={() => handleAddToTeam(record.user_id)}
            okText="Add"
            cancelText="Cancel"
            className="no-width"
            title={`Add ${record.full_name} to team?`}
            icon={<GoogleIcon name="add" size={18}/>}
          />
        );
      },
    },
  ];

  const items = [
    {
      key: "1",
      label: "My Team",
      children: isPendingUser ? (
        <SkeletonLoader />
      ) : (
        <TeamMembers
          userIds={getUser?.user?.team_members || []}
          typeFor={typeFor}
          currentSession={currentSession}
          brandData={brandData}
          editable={true}
        />
      ),
    },
    {
      key: "2",
      label: "All Users",
      children: isPendingAllUsers ? (
        <SkeletonLoader />
      ) : !filteredAllUsers.length ? (
        <AlertMessage message="No users found" />
      ) : (
        <Table
          columns={allUserColumns}
          dataSource={filteredAllUsers}
          rowKey="user_id"
          size="small"
          rowClassName={() => "crm-row"}
          scroll={{ x: true }}
          className="crm-table"
          pagination={{
            current: currentPage,
            pageSize,
            total: allUsers.pagination?.total || 0,
            showSizeChanger: true,
            onChange: (page, newPageSize) => {
              setCurrentPage(page);
              setPageSize(newPageSize);
            },
          }}
        />
      ),
    },
  ];

  /* ===================== RENDER ===================== */

  return (
    <>
      <div className="text-center min-h-[30vh] flex items-center justify-center">
        <PhotoUpload form={form} setForm={setForm} title="Upload Photo" />
      </div>

      <form className="container !my-5 grid sm:gap-5 gap-3">
        {/* ===================== CREDENTIALS ===================== */}
        <div className="grid gap-5">
          <div className="grid sm:grid-cols-2 gap-4">
            <InputItem
              type="text"
              label="Full Name"
              name="full_name"
              value={form.full_name || ""}
              required
              onChange={(e) => handleChange(e, setForm)}
            />

            <InputItem
              type="text"
              label="Username"
              name="username"
              value={form.username || ""}
              required
              onChange={(e) => handleChange(e, setForm)}
            />
          </div>

          <div className="grid sm:grid-cols-2 gap-4 ">
            <InputItem
              type="email"
              label="Email"
              name="email"
              value={form.email || ""}
              required
              onChange={(e) => handleChange(e, setForm)}
            />

            <InputItem
              type="select"
              label="Status"
              name="status"
              value={parseArrayField(form.status)}
              onChange={(e) => handleChange(e, setForm)}
              options={[getStatusById(12), getStatusById(13)]}
              arrayType
            />
          </div>

          {/* ===================== PASSWORD ===================== */}
          <div className="grid gap-3">
            {changePassword && (
              <InputItem
                type="password"
                label="Password"
                name="password"
                value={plainPassword}
                onChange={(e) => {
                  const val = e.target.value;
                  setPlainPassword(val);
                  setForm((prev) => ({ ...prev, password: val }));
                }}
                required={!isEditMode}
              />
            )}

            {isEditMode && (
              <InputItem
                type="button"
                className="no-width"
                onClick={() => {
                  setChangePassword(!changePassword);
                  setPlainPassword("");
                  setForm((prev) => ({ ...prev, password: "" }));
                }}
                title={
                  changePassword ? "Cancel Password Change" : "Change Password"
                }
              />
            )}
          </div>

          {/* ===================== ROLE ===================== */}
        {!Boolean(form.change_to_superadmin) &&  <div className="grid gap-4">
            <InputItem
              type="select"
              label="Assign Role"
              name="role_id"
              value={form.role_id ? Number(form.role_id) : ""}
              options={roleOptions}
              required
              loading={isLoading}
              onChange={(e) => handleChange(e, setForm)}
            />
          </div>
}


          {currentSession?.user?.role_id === "superadmin" && (
            <div >
              <InputItem
                type="checkbox"
                label="Is Superadmin?"
                name="change_to_superadmin"
                checked={Boolean(form.change_to_superadmin)}
                onChange={(e) => handleChange(e, setForm)}
              />
            </div>
          )}

          {/* ===================== MY TEAM ===================== */}
          {currentSession?.user?.role_type_info?.id === 2 && (
            <div >
              <Tabs
                activeKey={activeTab}
                items={items}
                onChange={handleTabChange}
              />
            </div>
          )}
        </div>
      </form>
    </>
  );
}