"use client";

import * as React from "react";
import { Loader2, Pencil } from "lucide-react";
import type { Deal } from "@/api/endpoints/deals-api";
import { useGetClosedLeadTagsQuery } from "@/api/endpoints/deal-meta-api";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { ReactSelect } from "@/components/ui/react-select";
import { useUpdateClosedLostLeadMutation } from "@/features/closed-lost-leads/hooks/use-update-closed-lost-lead-mutation";
import { toast } from "sonner";

function FieldLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="mb-1.5 block select-none font-['Lexend_Deca'] text-[10px] font-medium uppercase tracking-[0.09em] text-gray-400">
      {children}
    </label>
  );
}

export type EditClosedLostLeadDialogProps = {
  lead: Deal | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function EditClosedLostLeadDialog({
  lead,
  open,
  onOpenChange,
}: EditClosedLostLeadDialogProps) {
  const { mutateAsync: saveDetails, isPending } =
    useUpdateClosedLostLeadMutation();
  const { data: closedLeadTagCatalog = [] } = useGetClosedLeadTagsQuery(
    undefined,
    { skip: !open },
  );

  const [reason, setReason] = React.useState("");
  const [selectedClosedLeadTagId, setSelectedClosedLeadTagId] =
    React.useState("");

  React.useEffect(() => {
    if (!open || !lead) return;
    setReason(lead.lostReason?.trim() ?? "");
    setSelectedClosedLeadTagId(lead.closedLeadTags?.[0]?.id ?? "");
  }, [open, lead]);

  React.useEffect(() => {
    if (!open || selectedClosedLeadTagId || !closedLeadTagCatalog.length) {
      return;
    }
    const defaultTag =
      closedLeadTagCatalog.find((t) => t.isDefaultForClosedLost) ??
      (closedLeadTagCatalog.length === 1 ? closedLeadTagCatalog[0] : undefined);
    if (defaultTag) {
      setSelectedClosedLeadTagId(defaultTag.id);
    }
  }, [open, closedLeadTagCatalog, selectedClosedLeadTagId]);

  const closedLeadTagsConfigured = closedLeadTagCatalog.length > 0;
  const closedLeadTagOptions = React.useMemo(
    () =>
      closedLeadTagCatalog.map((t) => ({
        value: t.id,
        label: `${t.name}${t.isDefaultForClosedLost ? " (default)" : ""}`,
      })),
    [closedLeadTagCatalog],
  );

  const canSave =
    Boolean(lead) &&
    Boolean(reason.trim()) &&
    (!closedLeadTagsConfigured || Boolean(selectedClosedLeadTagId));

  const titleName =
    lead?.customerName?.trim() || lead?.leadId?.trim() || "this lead";

  const handleClose = () => {
    if (!isPending) onOpenChange(false);
  };

  const handleSave = async () => {
    if (!lead || !canSave) return;
    try {
      await saveDetails({
        id: lead.id,
        lostReason: reason.trim(),
        closedLeadTagId: selectedClosedLeadTagId || undefined,
      });
      toast.success("Closed-lost details saved");
      onOpenChange(false);
    } catch (err) {
      const msg =
        err && typeof err === "object" && "message" in err
          ? String((err as { message?: string }).message ?? "")
          : "";
      toast.error(msg.trim() || "Failed to save closed-lost details");
    }
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        if (!next) handleClose();
        else onOpenChange(true);
      }}
    >
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Pencil className="size-4 text-red-500" />
            Edit closed lead
          </DialogTitle>
          <DialogDescription>
            {titleName}: add the closed-lost reason and extra content tag.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-2">
          <div>
            <FieldLabel>Reason for loss</FieldLabel>
            <Textarea
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              placeholder="Why was this lead closed as lost?"
              className="min-h-[100px] rounded-xl border-gray-200"
              rows={4}
              autoFocus
            />
          </div>
          <div>
            <FieldLabel>Extra content tag</FieldLabel>
            {closedLeadTagsConfigured ? (
              <ReactSelect
                value={selectedClosedLeadTagId || ""}
                onValueChange={setSelectedClosedLeadTagId}
                options={closedLeadTagOptions}
                placeholder="Select a tag"
                triggerClassName="min-h-10 w-full rounded-xl border-gray-200"
              />
            ) : (
              <p className="rounded-xl border border-amber-100 bg-amber-50 px-3 py-2 text-[12px] text-amber-700">
                No closed lead tags configured — ask an admin (Extra Content).
              </p>
            )}
          </div>
        </div>
        <DialogFooter className="mt-2 gap-3 sm:gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={handleClose}
            disabled={isPending}
          >
            Cancel
          </Button>
          <Button
            type="button"
            onClick={() => void handleSave()}
            disabled={isPending || !canSave}
          >
            {isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : null}
            Save details
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

function leadNeedsClosedLostDetails(lead: Deal): boolean {
  const missingReason = !lead.lostReason?.trim();
  const missingTag = !lead.closedLeadTags?.length;
  return missingReason || missingTag;
}

export { leadNeedsClosedLostDetails };