'use client';

import { useEffect, useState } from 'react';
import { MdInfoOutline } from 'react-icons/md';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import { InfoSVG, LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';

interface HotCategoryRulesProps {
    minApplication: number;
    isSaving: boolean;
    onSave: (value: number) => void;
}

const HotCategoryRules = ({ minApplication, isSaving, onSave }: HotCategoryRulesProps) => {
    const [value, setValue] = useState(String(minApplication ?? ''));
    const [isDirty, setIsDirty] = useState(false);

    useEffect(() => {
        setValue(String(minApplication ?? ''));
        setIsDirty(false);
    }, [minApplication]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
        setIsDirty(true);
    };

    const handleSave = () => {
        const parsed = parseInt(value, 10);
        if (!Number.isNaN(parsed)) {
            onSave(parsed);
        }
    };

    const displayMinApplications = (() => {
        const parsed = parseInt(value, 10);
        if (!Number.isNaN(parsed)) return parsed;
        return minApplication ?? 0;
    })();

    return (
        <div className="mb-5">
            <h4 className="text-sm font-semibold text-neutral-900 mb-1">1. Hot Campaign Rules</h4>
            <p className="text-xs text-neutral-500 mb-4">
                Campaigns will be automatically added to Hot based on the rules below.
            </p>

            <div className="flex items-center gap-1.5 mb-1.5">
                <label className="text-xs text-neutral-600">Minimum Applications</label>
                {/* <div className="relative group">
                    <InfoSVG customClass="w-4 h-4 text-neutral-400 cursor-pointer" />
                    <div className="absolute left-0 top-full mt-1 w-64 rounded-xl border border-neutral-100 bg-white px-3 py-2 text-xs text-neutral-600 shadow-md z-10 hidden group-hover:block">
                        Set the minimum number of applications a campaign must receive to be automatically added to Hot.
                    </div>
                </div> */}
            </div>

            <input
                type="number"
                min={0}
                value={value}
                onChange={handleChange}
                className="w-full max-w-xs bg-lightGray/50 focus:outline-primary border border-transparent py-2.5 px-3 text-sm rounded-xl"
            />
            <p className="text-xs text-neutral-500 mt-2 mb-4">
                Campaigns with {displayMinApplications} or more applications will be added to Hot automatically.
            </p>

            <div className="flex items-start gap-2 rounded-lg border border-blue-100 bg-blue-50 px-3 py-3 mb-4">
                <MdInfoOutline size={18} className="text-blue-600 shrink-0 mt-0.5" />
                <p className="text-xs text-blue-600 leading-relaxed">
                    Campaigns that meet the above rule will be automatically added to the top of the Hot list by created date (newest first).
                </p>
            </div>

            {isDirty && (
                <PrimaryButton
                    buttonType="button"
                    customClass="flex items-center justify-center min-w-28"
                    disabled={isSaving}
                    onClick={handleSave}
                >
                    Save {isSaving && <LoaderSVG customClass="ml-2" />}
                </PrimaryButton>
            )}
        </div>
    );
};

export default HotCategoryRules;