"use client";

import * as React from "react";
import { Loader2, Pencil } from "lucide-react";
import { toast } from "sonner";

import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
  useGetAllUsersQuery,
  useGetRolesQuery,
} from "@/api/rtk";
import { useGetTeamsQuery } from "@/api/rtk/teams-api";
import { useAuthToken } from "@/hooks/use-auth-token";
import { useBulkEditLeadsMutation } from "@/features/leads/hooks/use-bulk-edit-leads-mutation";
import type { BulkEditLeadsResult } from "@/features/leads/types";

import {
  BulkEditFields,
  buildBulkEditPayload,
  emptyBulkEditFieldsValue,
  hasBulkEditChanges,
  type BulkEditFieldsValue,
} from "./bulk-edit-fields";

export type BulkEditLeadsModalProps = {
  open: boolean;
  onClose: () => void;
  leadIds: string[];
  labelById?: Record<string, string | undefined>;
  onApplied?: (result: BulkEditLeadsResult) => void;
};

export function BulkEditLeadsModal({
  open,
  onClose,
  leadIds,
  labelById,
  onApplied,
}: BulkEditLeadsModalProps) {
  const { token } = useAuthToken();
  const [value, setValue] = React.useState<BulkEditFieldsValue>(
    emptyBulkEditFieldsValue,
  );

  React.useEffect(() => {
    if (open) {
      setValue(emptyBulkEditFieldsValue);
    }
  }, [open]);

  const { data: teams = [] } = useGetTeamsQuery(undefined, { skip: !open });
  const { data: orgRoles = [] } = useGetRolesQuery(undefined, {
    skip: !open || !token,
  });
  const { data: allUsers = [] } = useGetAllUsersQuery(undefined, {
    skip: !open || !token,
  });


  const allUsersLabelById = React.useMemo(() => {
    const map: Record<string, string | undefined> = {};
    for (const u of allUsers) {
      map[u.id] = u.name || u.email || u.id;
    }
    if (labelById) {
      for (const [id, label] of Object.entries(labelById)) {
        if (label) map[id] = label;
      }
    }
    return map;
  }, [allUsers, labelById]);

  const mutation = useBulkEditLeadsMutation();
  const isPending = mutation.isPending;
  const canApply = leadIds.length > 0 && hasBulkEditChanges(value);

  const handleApply = async () => {
    if (!canApply) return;
    const payload = buildBulkEditPayload(leadIds, value);
    try {
      const result = await mutation.mutateAsync(payload);
      const updated = result?.updated ?? 0;
      const skipped = result?.skipped ?? 0;
      if (skipped > 0) {
        toast.success(`${updated} updated · ${skipped} skipped`, {
          description:
            "Some leads could not be edited (permission or validation).",
        });
      } else {
        toast.success(`${updated} leads updated`);
      }
      onApplied?.(result);
      onClose();
    } catch (err) {
      const message =
        err instanceof Error ? err.message : "Failed to apply bulk edit";
      toast.error(message);
    }
  };

  return (
    <Dialog open={open} onOpenChange={(v) => (!v ? onClose() : undefined)}>
      <DialogContent
        className="sm:max-w-[560px] w-[96vw] p-0 overflow-hidden"
        aria-describedby={undefined}
      >
        <div className="flex items-center gap-3 px-6 pt-6 pb-4 border-b border-border/40 bg-accent/5">
          <div className="size-9 rounded-xl bg-accent flex items-center justify-center shrink-0">
            <Pencil size={16} className="text-white" />
          </div>
          <div>
            <DialogTitle className="text-[16px] font-extrabold font-['Lexend'] text-text leading-tight">
              Bulk edit
            </DialogTitle>
            <p className="text-[12px] text-gray-500 font-['Lexend_Deca'] mt-0.5">
              Update properties across {leadIds.length}{" "}
              {leadIds.length === 1 ? "lead" : "leads"}
            </p>
          </div>
        </div>

        <div className="px-6 py-5 max-h-[60vh] overflow-y-auto scrollbar-themed">
          <BulkEditFields
            value={value}
            onChange={setValue}
            teams={teams}
            labelById={allUsersLabelById}
            skipQueries={!open}
          />
        </div>

        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border/40">
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            disabled={isPending}
          >
            Cancel
          </Button>
          <Button
            size="sm"
            onClick={handleApply}
            disabled={!canApply || isPending}
            className="gap-1.5 min-w-28"
          >
            {isPending ? (
              <>
                <Loader2 size={13} className="animate-spin" /> Applying…
              </>
            ) : (
              <>
                <Pencil size={13} /> Apply to {leadIds.length}
              </>
            )}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}