import type { VerifyDetailResponseDto } from "@/entities/statistics/model/general-verification-interface";
import { Button, Input } from "@common/components";

import OperatorsComponents from "./OperatorsComponents";

type ClauseZone = "" | "zone-condition" | "zone-result";

interface FormulaComponentsProps {
    data?: VerifyDetailResponseDto | null;
    index?: number;
    zone?: ClauseZone;
    groupBy?: boolean;
    onGroupByChange?: (checked: boolean) => void;
    onDelete?: () => void;
    onOperatorChange?: (value: string) => void;
    handleFomulaDialog?: (
        show: boolean,
        data?: VerifyDetailResponseDto | null,
        index?: number,
    ) => void;
    vrfcClsfCd?: string;
}

const zoneClassName: Record<ClauseZone, string> = {
    "": "bg-[#f9fafb]",
    "zone-condition": "bg-[#eef4ff]",
    "zone-result": "bg-[#fff4ea]",
};

/** 저장용 백틱 래핑은 숨기고 사용자에게만 표시 */
const stripBacktickWrap = (value: string) => {
    if (value.length >= 2 && value.startsWith("`") && value.endsWith("`")) {
        return value.slice(1, -1);
    }
    return value;
};

const FormulaComponents = ({
    data,
    index,
    zone = "",
    groupBy = false,
    onGroupByChange,
    onDelete,
    onOperatorChange,
    handleFomulaDialog,
    vrfcClsfCd,
}: FormulaComponentsProps) => {
    const cmprOpert = data?.cmprOpert;
    const displayFormula = data
        ? stripBacktickWrap(data.kornArtopnEqtnCn ?? "")
        : "";

    return (
        <div
            className={`mb-1.5 flex items-center gap-2.5 rounded-md px-2.5 py-2 ${zoneClassName[zone]}`}
        >
            <Button
                type="button"
                size="icon"
                className="formulaDeleteBtn size-[2.6rem] shrink-0 rounded-full !bg-[#f24e5b] hover:!bg-[#d63c48]"
                color="red"
                onClick={onDelete}
            >
                <i className="ri-subtract-fill text-[16px]" />
            </Button>
            <Input
                className="h-[3.6rem] flex-1 !cursor-pointer rounded-md border-[#d8dce3] text-[13px]"
                placeholder="클릭하여 수식을 등록해주세요."
                id={`formulaInput-${index ?? 0}`}
                value={displayFormula}
                title={displayFormula}
                onClick={() => handleFomulaDialog?.(true, data, index)}
                readOnly
            />
            <div className="w-[200px] shrink-0 [&_button]:!h-[3.6rem] [&_button]:!w-[200px] [&_button]:min-w-[200px] [&_button]:max-w-[200px]">
                <OperatorsComponents
                    cmprOpert={cmprOpert}
                    onValueChange={onOperatorChange}
                />
            </div>
            {vrfcClsfCd !== "TOTAL" &&
                <label className="flex w-[96px] shrink-0 items-center justify-end gap-1.5 text-[#4b5563] cursor-pointer">
                    <input
                        type="checkbox"
                        className="cursor-pointer accent-[#3a6df0]"
                        checked={groupBy}
                        onChange={(e) => onGroupByChange?.(e.target.checked)}
                    />
                    group by
                </label>
            }
        </div>
    );
};

export default FormulaComponents;