"use client";

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

import type { BdrToAeHandoffPreview } from "@/api/users/types";
import { useGetRolesQuery } from "@/api/endpoints";
import { ContributorUserPicker, pickRoleIdFromOrgRoles } from "@/components/deals/contributor-user-picker";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

type BdrToAeHandoffDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  preview: BdrToAeHandoffPreview | null | undefined;
  isLoadingPreview: boolean;
  isSubmitting: boolean;
  promotedUserName: string;
  onRefresh: () => void;
  onConfirm: (payload: {
    defaultReplacementBdrId: string;
    replacementBdrByLeadId: Record<string, string>;
  }) => void;
};

export function BdrToAeHandoffDialog({
  open,
  onOpenChange,
  preview,
  isLoadingPreview,
  isSubmitting,
  promotedUserName,
  onRefresh,
  onConfirm,
}: BdrToAeHandoffDialogProps) {
  const { data: roles = [] } = useGetRolesQuery(undefined, { skip: !open });

  const bdrRoleId = React.useMemo(
    () =>
      pickRoleIdFromOrgRoles(roles, [
        "bdr",
        "business development representative",
        "business development rep",
      ]),
    [roles],
  );

  const [defaultBdrId, setDefaultBdrId] = React.useState("");
  const [perLeadOverrides, setPerLeadOverrides] = React.useState<
    Record<string, string>
  >({});
  const [expandedOverrides, setExpandedOverrides] = React.useState(false);

  React.useEffect(() => {
    if (!open) {
      setDefaultBdrId("");
      setPerLeadOverrides({});
      setExpandedOverrides(false);
    }
  }, [open]);

  const leads = preview?.leads ?? [];
  const blockingIds = new Set(preview?.blockingLeadIds ?? []);
  const canProceed = preview?.canProceed ?? false;

  const allLeadsHaveBdr = React.useMemo(() => {
    if (!defaultBdrId.trim()) return false;
    return leads.every((lead) => {
      const override = perLeadOverrides[lead.id]?.trim();
      return Boolean(override || defaultBdrId.trim());
    });
  }, [leads, defaultBdrId, perLeadOverrides]);

  const handleConfirm = () => {
    if (!canProceed || !allLeadsHaveBdr) return;
    onConfirm({
      defaultReplacementBdrId: defaultBdrId.trim(),
      replacementBdrByLeadId: perLeadOverrides,
    });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[92vh] w-[95vw] max-w-5xl overflow-y-auto">
        <DialogHeader>
          <DialogTitle>BDR → AE handoff</DialogTitle>
          <DialogDescription>
            {promotedUserName} will become AE on their BDR-assigned leads. Assign
            a replacement BDR for each lead before saving the role change.
          </DialogDescription>
        </DialogHeader>

        {isLoadingPreview ? (
          <div className="flex items-center justify-center py-12 text-muted-foreground">
            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
            Loading assigned leads…
          </div>
        ) : (
          <div className="space-y-4">
            {!canProceed && leads.length > 0 && (
              <div className="flex gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                <div className="space-y-1">
                  <p className="font-medium">
                    Some leads already have an AE assigned
                  </p>
                  <p>
                    Reassign those leads manually, then refresh this list before
                    promoting the user.
                  </p>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="mt-1"
                    onClick={onRefresh}
                  >
                    <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
                    Refresh
                  </Button>
                </div>
              </div>
            )}

            {leads.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No BDR-assigned leads found. The role change can proceed without
                handoff.
              </p>
            ) : (
              <>
                <div className="space-y-2">
                  <Label>Replacement BDR (all leads)</Label>
                  <ContributorUserPicker
                    value={defaultBdrId ? [defaultBdrId] : []}
                    onChange={(ids) => setDefaultBdrId(ids[0] ?? "")}
                    roleId={bdrRoleId}
                    forBulkAssign
                    placeholder="Select replacement BDR for all leads"
                    emptyListMessage="No BDR users found"
                  />
                </div>

                <div className="flex items-center justify-between">
                  <p className="text-sm text-muted-foreground">
                    {leads.length} lead{leads.length === 1 ? "" : "s"} assigned
                    as BDR
                  </p>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => setExpandedOverrides((v) => !v)}
                  >
                    {expandedOverrides ? "Hide" : "Customize"} per-lead BDR
                  </Button>
                </div>

                <div className="rounded-md border">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Lead</TableHead>
                        <TableHead>Stage</TableHead>
                        <TableHead>Current AE</TableHead>
                        {expandedOverrides && (
                          <TableHead>Replacement BDR</TableHead>
                        )}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {leads.map((lead) => {
                        const isBlocking = blockingIds.has(lead.id);
                        return (
                          <TableRow
                            key={lead.id}
                            className={cn(isBlocking && "bg-amber-50/80")}
                          >
                            <TableCell className="font-medium">
                              {lead.customerName}
                              {isBlocking && (
                                <span className="mt-0.5 block text-xs text-amber-700">
                                  Already has AE — fix before promoting
                                </span>
                              )}
                            </TableCell>
                            <TableCell>{lead.stageName}</TableCell>
                            <TableCell>
                              {lead.currentAes.length > 0
                                ? lead.currentAes.map((a) => a.name).join(", ")
                                : "—"}
                            </TableCell>
                            {expandedOverrides && (
                              <TableCell className="min-w-[240px]">
                                <ContributorUserPicker
                                  value={
                                    perLeadOverrides[lead.id]
                                      ? [perLeadOverrides[lead.id]]
                                      : []
                                  }
                                  onChange={(ids) => {
                                    const next = { ...perLeadOverrides };
                                    const val = ids[0] ?? "";
                                    if (val) next[lead.id] = val;
                                    else delete next[lead.id];
                                    setPerLeadOverrides(next);
                                  }}
                                  roleId={bdrRoleId}
                                  forBulkAssign
                                  disabled={isBlocking}
                                  placeholder="Use default BDR"
                                  className="w-full"
                                />
                              </TableCell>
                            )}
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </div>

                {expandedOverrides && (
                  <p className="text-xs text-muted-foreground">
                    Per-lead overrides use the bulk BDR above when left empty.
                    Use the user picker at the top for all leads, or expand rows
                    with custom pickers below.
                  </p>
                )}
              </>
            )}
          </div>
        )}

        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button
            type="button"
            onClick={handleConfirm}
            disabled={
              isSubmitting ||
              isLoadingPreview ||
              !canProceed ||
              (leads.length > 0 && !allLeadsHaveBdr)
            }
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Saving…
              </>
            ) : (
              "Confirm promotion"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

/** Show API error message from RTK mutation failures. */
export function toastUserMutationError(e: unknown, fallback: string) {
  let message = fallback;
  if (e && typeof e === "object" && "data" in e) {
    const d = (e as { data?: { message?: string | string[] } }).data;
    if (typeof d?.message === "string") message = d.message;
    else if (Array.isArray(d?.message)) message = d.message.join(", ");
  }
  toast.error(message);
}