"use client";

import { useEffect } from "react";
import { useAppSelector } from "@/hooks/useAppDispatch";
import { useRouter } from "next/navigation";

import { useState } from "react";
import apiClient from "@/lib/apiClient";
import GlobalLoadingOverlay from "@/components/ui/GlobalLoadingOverlay";
import AppModal from "@/components/AppModal";
import { useToast } from "@/components/ui/ToastContext";

export default function ReferralPage() {
  const role = useAppSelector((state) => state.user.role);
  const router = useRouter();
  const showToast = useToast();
  useEffect(() => {
    if (role !== "AGENCY") {
      router.replace("/dashboard");
    }
  }, [role, router]);
  const [percentage, setPercentage] = useState(20);
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState("");
  const [loading, setLoading] = useState(false);
  const [activeModal, setActiveModal] = useState<{
    type: "requestSent" | "inviteSent" | "creatorAlreadyMapped";
    creatorEmail?: string;
  } | null>(null);

  const validateEmail = (value: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!value) {
      return "Email is required";
    }
    if (!emailRegex.test(value)) {
      return "Please enter a valid email address";
    }
    return "";
  };

  const handleEmailChange = (value: string) => {
    setEmail(value);
    if (emailError) {
      setEmailError(validateEmail(value));
    }
  };

  const handleChange = (value: string) => {
    let newValue = Number(value);

    if (newValue < 0) newValue = 0;
    if (newValue > 100) newValue = 100;
    setPercentage(newValue);
  };

  const getModalConfig = () => {
    if (!activeModal) {
      return null;
    }

    if (activeModal.type === "requestSent") {
      return {
        title: "Request Sent",
        body: `A request has been sent to ${activeModal.creatorEmail || email}. The creator will be added to your agency account once they approve the request.`,
        buttonLabel: "Done",
      };
    }

    if (activeModal.type === "creatorAlreadyMapped") {
      return {
        title: "Creator Already Mapped",
        body: "This creator account is already mapped to another agency and cannot be added to your account.",
        buttonLabel: "Close",
      };
    }

    return {
      title: "Invite Sent",
      body: "Referral invite sent successfully.",
      buttonLabel: "Done",
    };
  };

  const handleCloseModal = () => {
    const shouldRefreshCreatorList = activeModal?.type === "requestSent";
    setActiveModal(null);

    if (shouldRefreshCreatorList) {
      router.push("/dashboard");
      router.refresh();
    }
  };

  const generateReferralLink = async () => {
    if (loading) {
      return;
    }

    const error = validateEmail(email);
    if (error) {
      setEmailError(error);
      return;
    }

    setLoading(true);
    try {
      const res = await apiClient.post("/accounts/invite-creator", {
        email: email.trim(),
        revenueSharePercentage: percentage,
      });

      const responseStatus = String(
        res?.data?.data?.status || res?.data?.status || "",
      ).toLowerCase();

      if (responseStatus === "pending") {
        setActiveModal({
          type: "requestSent",
          creatorEmail: email.trim(),
        });
      } else {
        setActiveModal({ type: "inviteSent" });
      }

      setEmail("");
      setPercentage(20);
      setEmailError("");
    } catch (error: unknown) {
      const statusCode =
        typeof error === "object" && error !== null && "response" in error
          ? (error as { response?: { status?: number } }).response?.status
          : undefined;

      const backendMessage =
        (typeof error === "object" &&
        error !== null &&
        "response" in error &&
        typeof (error as { response?: { data?: { message?: string } } })
          .response?.data?.message === "string"
          ? (error as { response?: { data?: { message?: string } } }).response
              ?.data?.message
          : undefined) ||
        (error instanceof Error ? error.message : undefined) ||
        "Failed to send referral link. Please try again.";

      if (statusCode === 409) {
        const normalizedMessage = backendMessage.toLowerCase();
        if (normalizedMessage.includes("already mapped to another agency")) {
          setActiveModal({ type: "creatorAlreadyMapped" });
          return;
        }

        showToast(backendMessage);
        return;
      }

      showToast(backendMessage);
    } finally {
      setLoading(false);
    }
  };

  const modalConfig = getModalConfig();

  return (
    <div className="pcoded-main-container bg-color-light webContent">
      <GlobalLoadingOverlay show={loading} />
      <AppModal
        isOpen={Boolean(activeModal && modalConfig)}
        onClose={handleCloseModal}
        title={modalConfig?.title}
        bodyClassName="p-3 p-md-4"
      >
        <p className="text-md mb-3">{modalConfig?.body}</p>
        <div className="d-flex justify-content-end">
          <button
            type="button"
            className="button-style btn-first h-40 px-3"
            onClick={handleCloseModal}
          >
            {modalConfig?.buttonLabel}
          </button>
        </div>
      </AppModal>
      <div className="pcoded-content">
        {/* Main Section */}
        <div className="row g-3 g-xl-4 py-3">
          <div className="col-xxl-6 col-xl-7 col-lg-8 col-md-9 col-12 mx-auto">
            <div className="card border shadow-none rounded-4 performance-card h-auto mb-3">
              <div className="card-body platform-cards p-3 p-md-4">
                <h3 className="text-xl color-content fw-600 mb-1">
                  Invite Creator
                </h3>

                <p className="text-md mb-3">
                  Set your agency&apos;s revenue share across all brands and enter
                  your creator&apos;s email address to invite them to join your
                  agency on Influential.
                </p>

                <p className="text-sm mb-3">
                  This percentage represents the share of earnings your agency
                  will keep across all brands for the invited creator. For
                  example, if you set 20%, your agency will receive 20% and the
                  creator will receive 80%. You can edit it later for
                  individual creators.
                </p>

                {/* Revenue Percentage */}
                <div className="revPercentage bg-color-light border rounded-4 p-2 p-md-3 mb-3">
                  <div className="d-md-flex justify-content-between align-items-center gap-3 w-100 mb-2">
                    <label
                      htmlFor="slider"
                      className="form-label text-md fw-600 color-content w-100 mb-2 mb-md-0"
                    >
                      Revenue Share Percentage
                    </label>

                    <div className="w-130 d-flex align-items-center gap-1">
                      <input
                        type="number"
                        id="inputBox"
                        min="0"
                        max="100"
                        step="1"
                        value={percentage}
                        onChange={(e) => handleChange(e.target.value)}
                        className="form-control h-32 text-md fw-500 m-0 p-2"
                      />
                      %
                    </div>
                  </div>

                  <input
                    type="range"
                    id="slider"
                    min="0"
                    max="100"
                    step="1"
                    value={percentage}
                    onChange={(e) => handleChange(e.target.value)}
                    className="w-100"
                  />

                  <div className="d-flex justify-content-between align-items-center gap-2 w-100 mt-1">
                    <span className="text-sm fw-400 color-content opacity-75 m-0">
                      0%
                    </span>

                    <span className="text-sm fw-400 color-content opacity-75 m-0">
                      50%
                    </span>

                    <span className="text-sm fw-400 color-content opacity-75 m-0">
                      100%
                    </span>
                  </div>
                </div>

                {/* Email Input */}
                <div className="mb-3">
                  <label
                    htmlFor="email"
                    className="form-label text-md fw-600 color-content mb-2"
                  >
                    Creator Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    placeholder="Enter creator's email address"
                    value={email}
                    onChange={(e) => handleEmailChange(e.target.value)}
                    onBlur={() => setEmailError(validateEmail(email))}
                    className={`form-control h-40 text-md fw-500 m-0 p-2 ${emailError ? "is-invalid" : ""}`}
                  />
                  {emailError && (
                    <div className="invalid-feedback text-sm">{emailError}</div>
                  )}
                </div>

                {/* Generate Button */}
                <button
                  type="button"
                  id="generateBtn"
                  onClick={generateReferralLink}
                  disabled={loading}
                  className="button-style btn-first h-40 w-100 m-0"
                >
                  {loading ? "Sending..." : "Invite Creator"}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}