"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

type StaffOption = {
  userCode: string;
  name: string;
};

type Props = {
  leadCode: string;
  currentAssigneeCode: string | null;
  staff: StaffOption[];
};

export default function AssignLeadButton({
  leadCode,
  currentAssigneeCode,
  staff,
}: Props) {
  const router = useRouter();
  const [selected, setSelected] = useState(
    currentAssigneeCode ?? "",
  );
  const [pending, setPending] = useState(false);
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");

  async function assignLead() {
    if (pending || !selected) return;

    const target = staff.find(
      (user) => user.userCode === selected,
    );

    if (!target) {
      setError("Please select an eligible staff member.");
      return;
    }

    const confirmed = window.confirm(
      `Assign Lead ${leadCode} to ${target.name} (${target.userCode})?`,
    );

    if (!confirmed) return;

    setPending(true);
    setError("");
    setMessage("");

    try {
      const response = await fetch(
        `/api/leads/${encodeURIComponent(leadCode)}/assign`,
        {
          method: "POST",
          credentials: "same-origin",
          cache: "no-store",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            assignedToUserCode: target.userCode,
          }),
        },
      );

      const result: {
        success?: boolean;
        alreadyAssigned?: boolean;
        error?: string;
        notification?: {
          created?: boolean;
          emailDelivery?: string;
        };
      } = await response.json();

      if (response.status === 401) {
        router.push("/admin/login");
        return;
      }

      if (response.ok && result.success) {
        setMessage(
          result.alreadyAssigned
            ? "This Lead is already assigned to the selected staff member."
            : result.notification?.emailDelivery === "FAILED"
              ? "Lead assigned and notification created. Email delivery failed."
              : "Lead assigned successfully.",
        );
        router.refresh();
        return;
      }

      setError(
        result.error === "CONCURRENT_CHANGE"
          ? "Lead changed. Refresh the page and try again."
          : result.error === "INVALID_ASSIGNEE"
            ? "Selected staff member is no longer eligible."
            : result.error === "FORBIDDEN"
              ? "You do not have permission to assign this Lead."
              : result.error === "NOT_FOUND"
                ? "Lead was not found."
                : "Assignment could not be completed. Please try again.",
      );
    } catch {
      setError(
        "Network error. Check the current assignment before retrying.",
      );
    } finally {
      setPending(false);
    }
  }

  if (staff.length === 0) {
    return (
      <p className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
        No eligible staff accounts are available. Create an active
        ADMIN or SALES_CRM staff account with LEAD_VIEW and
        LEAD_UPDATE permissions before assigning this Lead.
      </p>
    );
  }

  return (
    <div className="flex flex-wrap items-end gap-3">
      <label className="grid min-w-[220px] flex-1 gap-2 text-sm font-semibold text-slate-700">
        Staff Member
        <select
          value={selected}
          disabled={pending}
          onChange={(event) => {
            setSelected(event.target.value);
            setError("");
            setMessage("");
          }}
          className="w-full rounded-xl border border-slate-300 bg-white px-4 py-3"
        >
          <option value="">Select Staff</option>
          {staff.map((user) => (
            <option key={user.userCode} value={user.userCode}>
              {user.name} ({user.userCode})
            </option>
          ))}
        </select>
      </label>

      <button
        type="button"
        onClick={assignLead}
        disabled={
          pending ||
          !selected ||
          selected === currentAssigneeCode
        }
        className="rounded-xl bg-blue-700 px-5 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50"
      >
        {pending
          ? "Assigning..."
          : currentAssigneeCode
            ? "Reassign Lead"
            : "Assign Lead"}
      </button>

      {error && (
        <p role="alert" className="w-full text-sm text-red-700">
          {error}
        </p>
      )}

      {message && (
        <p role="status" className="w-full text-sm text-green-700">
          {message}
        </p>
      )}
    </div>
  );
}