import { useDispatch, useSelector } from "react-redux";
import {
    removeRecipientAsync,
    removeSelectedRecipient,
    updateRecipientOrder,
    TRANSACTION_TEMPLATE_TOGGLE,
    updateRecipient,
    recipientType,
} from "../../../store/slices/selectedRecipientsSlice";
import { AppDispatch, RootState } from "../../../store/store";
import { ImBin } from "react-icons/im";
import { useState } from "react";
import SigningOrderDiagram from "../../../SigningOrderDiagram ";
import { IoCloseOutline } from "react-icons/io5";
import { useParams } from "react-router-dom";
import { FiEdit } from "react-icons/fi";
import { FaUsersLine } from "react-icons/fa6";

const getInitials = (name: string) => {
    if (!name) return "";
    return name
        .split(" ")
        .map((n) => n[0])
        .join("")
        .toUpperCase();
};

type CardsData = {
    userEmail: string;
    getMinRoutingOrder: () => number;
    editRecipient: any;
    setEditRecipient: (recipient: any) => void;
    setEditCase: (string: any) => void;
    transactionTemplateToggle: string;
    editRecipientCurrentEmail: string;
    setEditRecipientCurrentEmail: (email: string) => void;
};

const RecipientCards = ({
    setEditRecipient,
    setEditCase,
    transactionTemplateToggle,
    editRecipient,
    editRecipientCurrentEmail,
    setEditRecipientCurrentEmail,
}: CardsData) => {
    const templateId = useParams<{ templateId: string }>().templateId;
    let { accountId, transactionId } = useParams<{ accountId: string; transactionId: string }>();
    const dispatch = useDispatch<AppDispatch>();

    if (!transactionId) {
        transactionId = templateId;
    }

    const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
    const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
    const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
    const [editingField, setEditingField] = useState<{ recipientId: string; fieldName: string } | null>(null);
    const [localChanges, setLocalChanges] = useState<Record<string, any>>({});
    const [errors, setErrors] = useState<Record<string, { hostName: boolean; hostEmail: boolean }>>({});

    const getRecipientIdentifier = (recipient: any) => {
        return recipient.id || recipient.uuid;
    };

    const isEditable = (recipient: any) => {
        return transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
            ? true
            : recipient.newOne || recipient.allowSenderToEdit;
    };

    const validateInPersonSignerFields = (recipient: any, updatedFields: any) => {
        if (recipient.type !== recipientType.INPERSONSIGNER) return true;
        const hostName = updatedFields.hostName ?? getCurrentValue(recipient, "hostName");
        const hostEmail = updatedFields.hostEmail ?? getCurrentValue(recipient, "hostEmail");
        const identifier = getRecipientIdentifier(recipient);
        const newErrors = { hostName: !hostName, hostEmail: !hostEmail };
        setErrors((prev) => ({ ...prev, [identifier]: newErrors }));
        return !newErrors.hostName && !newErrors.hostEmail;
    };

    const handleFieldFocus = (recipientId: string, fieldName: string) => {
        setEditingField({ recipientId, fieldName });
    };

    const handleFieldBlur = (recipient: any, fieldName: string, value: any) => {
        const identifier = getRecipientIdentifier(recipient);
        const updatedRecipient = { ...recipient, [fieldName]: value, uuid: identifier };

        if (recipient.type === recipientType.INPERSONSIGNER && (fieldName === "hostName" || fieldName === "hostEmail")) {
            if (!validateInPersonSignerFields(recipient, { [fieldName]: value })) {
                return;
            }
        }

        dispatch(updateRecipient(updatedRecipient));
        setLocalChanges((prev) => ({
            ...prev,
            [`${identifier}_${fieldName}`]: undefined,
        }));
        setEditingField(null);
        setErrors((prev) => ({ ...prev, [identifier]: { hostName: false, hostEmail: false } }));
    };

    const handleFieldChange = (recipient: any, fieldName: string, value: any) => {
        const identifier = getRecipientIdentifier(recipient);
        setLocalChanges((prev) => ({
            ...prev,
            [`${identifier}_${fieldName}`]: value,
        }));
    };

    const getCurrentValue = (recipient: any, fieldName: string) => {
        const identifier = getRecipientIdentifier(recipient);
        const localValue = localChanges[`${identifier}_${fieldName}`];
        return localValue !== undefined ? localValue : recipient[fieldName];
    };

    const hasValue = (recipient: any, fieldName: string) => {
        const currentValue = getCurrentValue(recipient, fieldName);
        return currentValue && currentValue.toString().trim() !== "";
    };

    const renderEditableField = (
        recipient: any,
        fieldName: string,
        placeholder: string,
        className = "",
        type = "text"
    ) => {
        const identifier = getRecipientIdentifier(recipient);
        const currentValue = getCurrentValue(recipient, fieldName);
        const isEditing = editingField?.recipientId === identifier && editingField?.fieldName === fieldName;
        const showValue = hasValue(recipient, fieldName);
        const error = errors[identifier]?.[fieldName];
        const editable = isEditable(recipient);

        if (isEditing && editable) {
            return (
                <div className="relative">
                    <input
                        type={type}
                        value={currentValue || ""}
                        placeholder={placeholder}
                        autoFocus
                        onFocus={() => handleFieldFocus(identifier, fieldName)}
                        onBlur={(e) => handleFieldBlur(recipient, fieldName, e.target.value)}
                        onChange={(e) => handleFieldChange(recipient, fieldName, e.target.value)}
                        onKeyPress={(e) => {
                            if (e.key === "Enter") {
                                e.currentTarget.blur();
                            }
                        }}
                        className={`w-full px-3 py-1 border ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"
                            } rounded-lg text-sm focus:outline-none focus:ring-0 focus:ring-gray-300 ${className}`}
                    />
                    {/* {error && (
                        <span className="text-red-500 text-xs absolute left-0">{`${placeholder} is required`}</span>
                    )} */}
                </div>
            );
        }

        return (
            <span
                onClick={editable ? () => handleFieldFocus(identifier, fieldName) : undefined}
                className={`${editable
                        ? "cursor-pointer hover:bg-gray-100 rounded px-1 transition-colors"
                        : "cursor-not-allowed"
                    } ${showValue ? "text-gray-800" : "text-gray-400 italic"} ${className}`}
                title={editable ? "Click to edit" : "Editing disabled"}
            >
                {showValue ? currentValue : placeholder}
            </span>
        );
    };

    const handleOrderChange = (id: string, value: number) => {
        dispatch(updateRecipientOrder({ id, routingOrder: value }));
    };

    const handleEditRecipient = (recipient: any) => {
        setEditCase("Edit");
        setEditRecipient(recipient);
        setEditRecipientCurrentEmail(recipient.id || recipient.uuid);
    };

    const handleRemoveRecipient = (recipient: any) => {
        if (!accountId || !transactionId) return;

        if (recipient.uuid) {
            dispatch(removeSelectedRecipient(recipient));
        } else {
            dispatch(
                removeRecipientAsync({
                    recipientId: recipient.id,
                    email: recipient.email,
                    accountId: accountId,
                    transactionId: transactionId,
                })
            );
        }

        if (recipients.length === 2) {
            const leftRecipient = recipients.filter((obj) => {
                if ("id" in obj && "id" in recipient) {
                    return obj.id !== recipient.id;
                }
                if ("email" in obj && "email" in recipient) {
                    return obj.email !== recipient.email;
                }
                return false;
            });
            dispatch(
                updateRecipientOrder({ id: leftRecipient[0].id || leftRecipient[0].email, routingOrder: 1 })
            );
        }
    };

    const handleTypeChange = (recipient: any, type: string) => {
        const identifier = getRecipientIdentifier(recipient);
        const updatedRecipient = { ...recipient, type, uuid: identifier };

        if (type === recipientType.SIGNER || type === recipientType.CC) {
            updatedRecipient.hostName = "";
            updatedRecipient.hostEmail = "";
            setErrors((prev) => ({ ...prev, [identifier]: { hostName: false, hostEmail: false } }));
        } else if (type === recipientType.INPERSONSIGNER) {
            if (!validateInPersonSignerFields(recipient, updatedRecipient)) {
                return;
            }
        }

        dispatch(updateRecipient(updatedRecipient));
        setEditingField(null);
    };

    return (
        <div className="w-full bg-white rounded-md shadow-sm border border-gray-200">
            {recipients.length > 0 ? (
                <>
                    {recipients.length > 1 && (
                        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-300">
                            <h3 className="text-sm font-semibold text-gray-700">
                                Recipients ({recipients.length})
                            </h3>
                            <label
                                className="flex items-center gap-2 cursor-pointer select-none"
                                onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}
                            >
                                <span className="text-xs font-medium text-gray-600">Signing Order</span>
                                <FaUsersLine className="text-[var(--primary)] mt-0.5 text-lg" />
                            </label>
                        </div>
                    )}

                    <div className="flex flex-col divide-y divide-gray-200">
                        {recipients.map((recipient, idx) => (
                            <div
                                key={recipient.email + idx}
                                className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
                                        ? "bg-neutral-100 opacity-40"
                                        : ""
                                    }`}
                            >
                                <div className="flex items-center gap-3 min-w-0">
                                    {recipients.length > 1 ? (
                                        <div className="relative">
                                            <input
                                                type="number"
                                                value={recipient.routingOrder || 1}
                                                min={1}
                                                onChange={(e) =>
                                                    handleOrderChange(
                                                        recipient.id || recipient.email,
                                                        Number(e.target.value)
                                                    )
                                                }
                                                className="w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
                                            />
                                        </div>
                                    ) : (
                                        <input
                                            type="number"
                                            disabled
                                            value={recipient.routingOrder}
                                            min={1}
                                            onChange={(e) =>
                                                handleOrderChange(
                                                    recipient.id || recipient.email,
                                                    Number(e.target.value)
                                                )
                                            }
                                            className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
                                        />
                                    )}
                                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
                                        {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
                                    </div>
                                    <div className="min-w-0">
                                        <p className="font-semibold text-gray-800 truncate text-xs flex items-center gap-0.5">
                                            {renderEditableField(recipient, "firstName", "First Name")} 
                                            {renderEditableField(recipient, "lastName", "Last Name")}
                                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
                                                <span className="flex items-center gap-2">
                                                    <span className="text-gray-400 ">| Permissions granted :</span>
                                                    <FiEdit
                                                        className={`cursor-pointer h-3 w-3 ${recipient.allowSenderToEdit
                                                                ? "text-blue-500"
                                                                : "text-gray-400"
                                                            } hover:text-blue-800`}
                                                        onClick={() =>
                                                            dispatch(
                                                                updateRecipient({
                                                                    ...recipient,
                                                                    allowSenderToEdit: !recipient.allowSenderToEdit,
                                                                    uuid: getRecipientIdentifier(recipient),
                                                                })
                                                            )
                                                        }
                                                    />
                                                    <ImBin
                                                        className={`cursor-pointer h-3 w-3 ${recipient.allowSenderToDelete
                                                                ? "text-red-500"
                                                                : "text-gray-400"
                                                            } hover:text-red-700`}
                                                        onClick={() =>
                                                            dispatch(
                                                                updateRecipient({
                                                                    ...recipient,
                                                                    allowSenderToDelete: !recipient.allowSenderToDelete,
                                                                    uuid: getRecipientIdentifier(recipient),
                                                                })
                                                            )
                                                        }
                                                    />
                                                </span>
                                            )}
                                        </p>
                                        <p className="text-xs text-gray-500 truncate flex items-center gap-1">
                                            {renderEditableField(recipient, "email", "Recipient Email", "", "email")} |
                                            <span
                                                onClick={
                                                    isEditable(recipient)
                                                        ? () => handleFieldFocus(getRecipientIdentifier(recipient), "type")
                                                        : undefined
                                                }
                                                className={`${isEditable(recipient)
                                                        ? "cursor-pointer hover:bg-gray-100"
                                                        : "cursor-not-allowed"
                                                    } rounded px-1 transition-colors`}
                                            >
                                                {recipient.type}
                                            </span>
                                            {(hasValue(recipient, "roleName") ||
                                                transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) && (
                                                    <span>
                                                        {" | Role: "}
                                                        {renderEditableField(recipient, "roleName", "Role name")}
                                                    </span>
                                                )}
                                            {recipient.type === recipientType.INPERSONSIGNER && (
                                                <>
                                                    <span className="flex items-center">
                                                        <span>{" | Host Name: "}</span>
                                                        {renderEditableField(recipient, "hostName", "Host Name")}
                                                        <span>{" | Host Email: "}</span>
                                                        {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
                                                    </span>
                                                </>
                                            )}
                                        </p>
                                        {editingField?.recipientId === getRecipientIdentifier(recipient) &&
                                            editingField?.fieldName === "type" &&
                                            isEditable(recipient) && (
                                                <div className="flex items-center gap-2 mt-1">
                                                    <label className="flex items-center gap-1">
                                                        <input
                                                            type="radio"
                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                            value={recipientType.SIGNER}
                                                            checked={recipient.type === recipientType.SIGNER}
                                                            onChange={() =>
                                                                handleTypeChange(recipient, recipientType.SIGNER)
                                                            }
                                                            onBlur={() => setEditingField(null)}
                                                            className="accent-[var(--primary)]"
                                                            disabled={!isEditable(recipient)}
                                                        />
                                                        <span className="text-xs">Signer</span>
                                                    </label>
                                                    <label className="flex items-center gap-1">
                                                        <input
                                                            type="radio"
                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                            value={recipientType.INPERSONSIGNER}
                                                            checked={recipient.type === recipientType.INPERSONSIGNER}
                                                            onChange={() =>
                                                                handleTypeChange(recipient, recipientType.INPERSONSIGNER)
                                                            }
                                                            onBlur={() => setEditingField(null)}
                                                            className="accent-[var(--primary)]"
                                                            disabled={!isEditable(recipient)}
                                                        />
                                                        <span className="text-xs">In Person Signer</span>
                                                    </label>
                                                    <label className="flex items-center gap-1">
                                                        <input
                                                            type="radio"
                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                            value={recipientType.CC}
                                                            checked={recipient.type === recipientType.CC}
                                                            onChange={() =>
                                                                handleTypeChange(recipient, recipientType.CC)
                                                            }
                                                            onBlur={() => setEditingField(null)}
                                                            className="accent-[var(--primary)]"
                                                            disabled={!isEditable(recipient)}
                                                        />
                                                        <span className="text-xs">CC</span>
                                                    </label>
                                                </div>
                                            )}
                                    </div>
                                </div>
                                {signType !== "self-sign" && (
                                    <div className="flex justify-between gap-2 items-center">
                                        <button
                                            type="button"
                                            title="Remove recipient"
                                            aria-label={`Remove recipient ${recipient.firstName}`}
                                            onClick={() => handleRemoveRecipient(recipient)}
                                            disabled={
                                                transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
                                                    ? false
                                                    : !recipient.newOne && !recipient.allowSenderToDelete
                                            }
                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
                                        >
                                            <ImBin size={16} />
                                        </button>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </>
            ) : (
                <div className="p-6 text-center text-gray-500 font-medium text-sm">
                    No Recipients Added
                </div>
            )}

            {signingOrderModal.open && (
                <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
                    <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
                        <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
                            <p className="font-semibold">Signing Order</p>
                            <div
                                onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
                                className="text-xl cursor-pointer hover:text-gray-200 transition-all"
                            >
                                <IoCloseOutline />
                            </div>
                        </div>
                        <SigningOrderDiagram signers={recipients} />
                    </div>
                </div>
            )}
        </div>
    );
};

export default RecipientCards;