"use client";

import * as React from "react";
import { toast } from "sonner";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ReactSelect } from "@/components/ui/react-select";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import {
  useCreateTeamSupportMemberMutation,
  useUpdateTeamSupportMemberMutation,
  useGetAllUsersQuery,
  type TeamSupportMember,
} from "@/api/rtk/teams-api";
export type SupportMemberFormData = {
  memberId: string;
  supportMemberId: string;
  supportRole?: string;
  originRole?: string;
  notes?: string;
  isActive?: boolean;
};

type Props = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSaved?: () => void;
  editItem?: TeamSupportMember | null;
};

function isAccountExecutiveRoleName(name?: string | null): boolean {
  const role = typeof name === "string" ? name.trim().toLowerCase() : "";
  return role === "ae" || role === "account executive";
}

function isBdrRoleName(name?: string | null): boolean {
  const role = typeof name === "string" ? name.trim().toLowerCase() : "";
  return (
    role === "bdr" ||
    role === "business development representative" ||
    role === "business development rep"
  );
}

const SUPPORT_SLOT_OPTIONS = [
  { value: "FRONT", label: "Front" },
  { value: "SUPPORT", label: "BDR" },
] as const;

function normalizeSupportSlot(value?: string | null): string {
  if (!value) return "";
  const trimmed = value.trim();
  if (trimmed === "FRONT" || trimmed === "SUPPORT") return trimmed;
  const lower = trimmed.toLowerCase();
  if (lower === "front" || lower === "front bdr") return "FRONT";
  if (lower === "support" || lower === "support bdr") return "SUPPORT";
  return "";
}

export function SupportMemberModal({ open, onOpenChange, onSaved, editItem }: Props) {
  const isEdit = !!editItem;

  const { data: allUsers = [] } = useGetAllUsersQuery();

  const aeUsers = React.useMemo(
    () =>
      (allUsers || []).filter((u) => isAccountExecutiveRoleName(u.role?.name)),
    [allUsers],
  );

  const bdrUsers = React.useMemo(
    () => (allUsers || []).filter((u) => isBdrRoleName(u.role?.name)),
    [allUsers],
  );

  const supportMemberOptions = React.useMemo(() => {
    const base = bdrUsers.map((u) => ({
      value: u.id,
      label: u.name || u.email,
    }));

    if (!isEdit || !editItem?.supportMemberId) {
      return base;
    }

    const current = allUsers.find((u) => u.id === editItem.supportMemberId);
    if (!current) return base;

    if (base.some((o) => o.value === current.id)) return base;

    return [
      {
        value: current.id,
        label: current.name || current.email,
      },
      ...base,
    ];
  }, [bdrUsers, allUsers, isEdit, editItem]);

  const [createMutation, { isLoading: isCreating }] = useCreateTeamSupportMemberMutation();
  const [updateMutation, { isLoading: isUpdating }] = useUpdateTeamSupportMemberMutation();

  const [form, setForm] = React.useState<SupportMemberFormData>({
    memberId: "",
    supportMemberId: "",
    supportRole: "",
    originRole: "",
    notes: "",
    isActive: true,
  });

  React.useEffect(() => {
    if (!open) return;

    if (editItem) {
      setForm({
        memberId: editItem.memberId,
        supportMemberId: editItem.supportMemberId,
        supportRole: normalizeSupportSlot(editItem.supportRole),
        originRole: editItem.originRole || "",
        notes: editItem.notes || "",
        isActive: editItem.isActive,
      });
    } else {
      setForm({
        memberId: "",
        supportMemberId: "",
        supportRole: "",
        originRole: "",
        notes: "",
        isActive: true,
      });
    }
  }, [open, editItem]);

  // Auto-populate origin role from the selected support person's catalog role
  React.useEffect(() => {
    if (form.supportMemberId) {
      const selectedUser = allUsers.find((u) => u.id === form.supportMemberId);
      if (selectedUser?.role?.name) {
        setForm((prev) => {
          // Only auto-populate if originRole is currently empty (don't override manual edits)
          if (prev.originRole && prev.originRole.trim() !== "") {
            return prev;
          }
          return {
            ...prev,
            originRole: selectedUser.role.name,
          };
        });
      }
    }
  }, [form.supportMemberId, allUsers]);

  const isLoading = isCreating || isUpdating;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!form.memberId || !form.supportMemberId || !form.supportRole) {
      toast.error("Please select the AE, BDR, and Front or Support slot");
      return;
    }

    try {
      const payload = {
        memberId: form.memberId,
        supportMemberId: form.supportMemberId,
        supportRole: form.supportRole || undefined,
        originRole: form.originRole || undefined,
        notes: form.notes || undefined,
        isActive: form.isActive,
      };

      if (isEdit && editItem) {
        await updateMutation({ id: editItem.id, body: payload }).unwrap();
        toast.success("Support assignment updated");
      } else {
        await createMutation(payload).unwrap();
        toast.success("Support member added");
      }

      onOpenChange(false);
      onSaved?.();
    } catch (err: any) {
      const message = err?.data?.message || "Failed to save support assignment";
      toast.error(message);
    }
  };

  const aeUserOptions = aeUsers.map((u) => ({
    value: u.id,
    label: u.name || u.email,
  }));

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[620px]">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>
              {isEdit ? "Edit Support Member" : "Add Support Member"}
            </DialogTitle>
            <DialogDescription>
              {isEdit
                ? "Update the support assignment between team members."
                : "Assign a BDR to support an account executive (AE)."}
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 py-4">
            {isEdit && editItem ? (
              <div className="rounded-xl border bg-muted/30 px-4 py-3 text-sm space-y-1">
                <p>
                  <span className="text-muted-foreground">Member being supported: </span>
                  <span className="font-medium">
                    {editItem.member?.name || editItem.member?.email || "—"}
                  </span>
                </p>
                <p>
                  <span className="text-muted-foreground">Support person: </span>
                  <span className="font-medium">
                    {editItem.supportMember?.name || editItem.supportMember?.email || "—"}
                  </span>
                </p>
              </div>
            ) : (
              <>
                <div className="grid gap-2">
                  <Label htmlFor="member">Account executive (AE)</Label>
                  <ReactSelect
                    id="member"
                    value={form.memberId}
                    onValueChange={(val) => setForm((f) => ({ ...f, memberId: val }))}
                    options={aeUserOptions}
                    placeholder="Select account executive"
                  />
                </div>

                <div className="grid gap-2">
                  <Label htmlFor="supportMember">BDR (support person)</Label>
                  <ReactSelect
                    id="supportMember"
                    value={form.supportMemberId}
                    onValueChange={(val) => setForm((f) => ({ ...f, supportMemberId: val }))}
                    options={supportMemberOptions}
                    placeholder="Select BDR"
                  />
                </div>
              </>
            )}

            <div className="grid gap-2">
              <Label htmlFor="supportRole">Front / BDR</Label>
              <ReactSelect
                id="supportRole"
                value={form.supportRole}
                onValueChange={(val) =>
                  setForm((f) => ({ ...f, supportRole: val }))
                }
                options={[...SUPPORT_SLOT_OPTIONS]}
                placeholder="Select Front or Support"
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="originRole">Origin role</Label>
              <Input
                id="originRole"
                value={form.originRole}
                onChange={(e) => setForm((f) => ({ ...f, originRole: e.target.value }))}
                placeholder="e.g. BDR"
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="notes">Notes</Label>
              <Textarea
                id="notes"
                value={form.notes}
                onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
                placeholder="Additional context..."
                rows={3}
              />
            </div>

            <div className="flex items-center gap-3">
              <Switch
                id="active"
                checked={form.isActive}
                onCheckedChange={(checked) => setForm((f) => ({ ...f, isActive: checked }))}
              />
              <Label htmlFor="active" className="cursor-pointer">Active</Label>
            </div>
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isLoading}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={
                isLoading ||
                !form.memberId ||
                !form.supportMemberId ||
                !form.supportRole
              }
            >
              {isLoading ? "Saving..." : isEdit ? "Update" : "Add Support Member"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}