import { CheckUpdateLauncher } from "@/helper"
import useModalStore from "@/stores/modalStore"
import useSettingStore from "@/stores/settingStore"
import useLauncherStore from "@/stores/launcherStore"
import { toast } from "react-toastify"

export default function SettingModal({
    isOpen,
    onClose
}: {
    isOpen: boolean
    onClose: () => void
}) {
    if (!isOpen) return null

    const { setIsOpenSelfUpdateModal } = useModalStore()
    const { closingOption, setClosingOption, serverVersion,
        proxyVersion, } = useSettingStore()
    const { setUpdateData, updateData, launcherVersion } = useLauncherStore()
    const CheckUpdate = async () => {
        const launcherData = await CheckUpdateLauncher()
        if (!launcherData.isUpdate) {
            toast.success("Launcher is already up to date")
            return
        }
        setUpdateData({
            server: updateData.server,
            proxy: updateData.proxy,
            launcher: launcherData
        })

        setIsOpenSelfUpdateModal(true)
    }

    return (
        <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 backdrop-blur-sm">
            <div className="relative w-[90%] max-w-md bg-base-100 text-base-content rounded-2xl border border-purple-500/30 shadow-2xl shadow-purple-500/30 p-6">
                {/* Header */}
                <div className="flex justify-between items-center mb-6">
                    <h3 className="font-extrabold text-2xl text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-cyan-500">
                        Settings
                    </h3>
                    <button
                        className="btn btn-circle btn-sm bg-red-600 hover:bg-red-700 text-white border-none shadow-lg"
                        onClick={onClose}
                    >
                        ✕
                    </button>
                </div>

                {/* Content */}
                <div className="flex flex-col gap-6">
                    {/* Section 1: Launcher Update */}
                    <div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
                        <h4 className="font-bold text-lg mb-2">Launcher Update</h4>
                        <p className="text-sm text-info mb-3">
                            Check if your launcher is up to date.
                        </p>
                        <button
                            className="btn btn-primary bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-400 hover:to-red-500 text-white shadow-md hover:shadow-lg transition-all duration-200"
                            onClick={CheckUpdate}
                        >
                            Check for Launcher Updates
                        </button>
                    </div>

                    {/* Section 2: Closing Option */}
                    <div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
                        <h4 className="font-bold text-lg mb-2">Closing Options</h4>
                        <label className="flex items-start gap-3 cursor-pointer select-none">
                            <input
                                type="checkbox"
                                className="checkbox checkbox-primary w-5 h-5 mt-1"
                                checked={!closingOption.isAsk}
                                onChange={(e) => {
                                    setClosingOption({
                                        isMinimize: closingOption.isMinimize,
                                        isAsk: !e.target.checked
                                    })
                                }}
                            />
                            <div className="flex flex-col">
                                <span className="text-base font-medium text-info">
                                    Set do not ask again
                                </span>
                                <span className="text-sm text-accent">
                                    Next time you close the app, it will automatically{" "}
                                    {closingOption.isMinimize ? "minimize to system tray" : "quit the app"}{" "}
                                    without asking.
                                </span>
                            </div>
                        </label>
                    </div>


                    {/* Section 3: Launcher Version */}
                    <div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
                        <h4 className="font-bold text-lg mb-2">Version</h4>
                        <div className="flex flex-wrap gap-2">
                        <p className="text-base text-info">
                            Server: {serverVersion}
                        </p>
                        <p className="text-base text-info">
                            Proxy: {proxyVersion}
                        </p>

                        <p className="text-base text-info">
                            Launcher: {launcherVersion}
                        </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    )
}