'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'

const STORAGE_KEY = 'gp_cookie_consent'

export type CookiePreferences = {
    necessary: boolean
    analytics: boolean
    marketing: boolean
}

function getStoredConsent(): CookiePreferences | null {
    if (typeof window === 'undefined') return null
    try {
        const raw = localStorage.getItem(STORAGE_KEY)
        if (!raw) return null
        const parsed = JSON.parse(raw) as CookiePreferences
        return {
            necessary: true,
            analytics: parsed.analytics ?? false,
            marketing: parsed.marketing ?? false,
        }
    } catch {
        return null
    }
}

function saveConsent(prefs: CookiePreferences) {
    if (typeof window === 'undefined') return
    try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
    } catch {}
}

function ToggleSwitch({
    checked,
    onChange,
    disabled = false,
}: {
    checked: boolean
    onChange: (v: boolean) => void
    disabled?: boolean
}) {
    return (
        <button
            type="button"
            role="switch"
            aria-checked={checked}
            disabled={disabled}
            onClick={() => !disabled && onChange(!checked)}
            className={`
                relative inline-flex h-7 w-12 shrink-0 rounded-full transition-colors duration-200 ease-out focus:outline-none
                ${disabled ? 'cursor-default opacity-70' : 'cursor-pointer'}
                ${checked ? 'bg-blue-400 dark:bg-blue-400' : 'bg-slate-300 dark:bg-gray-600'}
            `}
        >
            <span
                className={`
                    pointer-events-none inline-block h-6 w-6 rounded-full bg-white shadow-sm
                    transition-transform duration-200 ease-out
                    mt-0.5 ml-0.5
                    ${checked ? 'translate-x-5' : 'translate-x-0'}
                `}
            />
        </button>
    )
}

export default function CookieConsent() {
    const { t } = useTranslation()
    const [mounted, setMounted] = useState(false)
    const [showBanner, setShowBanner] = useState(false)
    const [showModal, setShowModal] = useState(false)
    const [prefs, setPrefs] = useState<CookiePreferences>({
        necessary: true,
        analytics: false,
        marketing: false,
    })

    useEffect(() => {
        setMounted(true)
    }, [])

    useEffect(() => {
        if (!mounted) return
        const stored = getStoredConsent()
        if (stored === null) {
            setShowBanner(true)
        } else {
            setPrefs(stored)
        }
    }, [mounted])

    const hideBanner = () => setShowBanner(false)

    const handleAcceptAll = () => {
        const all: CookiePreferences = { necessary: true, analytics: true, marketing: true }
        saveConsent(all)
        setPrefs(all)
        hideBanner()
    }

    const handleRejectUnnecessary = () => {
        const necessaryOnly: CookiePreferences = { necessary: true, analytics: false, marketing: false }
        saveConsent(necessaryOnly)
        setPrefs(necessaryOnly)
        hideBanner()
    }

    const handleSaveFromModal = () => {
        saveConsent(prefs)
        setShowModal(false)
        hideBanner()
    }

    if (!mounted || !showBanner) return null

    return (
        <>
            <div
                className="fixed bottom-0 left-0 right-0 z-[9998] border-t border-slate-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e] shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.4)]"
                role="dialog"
                aria-label={t('cookie.manageCookie')}
            >
                <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed flex-1">
                        {t('cookie.message')}
                        <Link
                            href="/privacy"
                            className="text-[#0182FF] dark:text-blue-400  ml-1"
                        >
                            {t('cookie.learnMore')}
                        </Link>
                    </p>
                    <div className="flex flex-wrap items-center gap-2 shrink-0">
                        <button
                            type="button"
                            onClick={() => setShowModal(true)}
                            className="px-4 py-2.5 rounded-lg text-sm font-medium text-slate-700 dark:text-gray-300 bg-slate-100 dark:bg-neutral-900 hover:bg-slate-200 dark:hover:bg-gray-700 transition-colors"
                        >
                            {t('cookie.manageCookie')}
                        </button>
                        <button
                            type="button"
                            onClick={handleRejectUnnecessary}
                            className="px-4 py-2.5 rounded-lg text-sm font-medium text-slate-700 dark:text-gray-300 bg-slate-100 dark:bg-neutral-900 hover:bg-slate-200 dark:hover:bg-gray-700 transition-colors"
                        >
                            {t('cookie.rejectUnnecessary')}
                        </button>
                        <button
                            type="button"
                            onClick={handleAcceptAll}
                            className="px-4 py-2.5 rounded-lg text-sm font-medium text-white bg-black hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-200 transition-colors"
                        >
                            {t('cookie.acceptAll')}
                        </button>
                    </div>
                </div>
            </div>

            {showModal && (
                <>
                    <div
                        className="fixed inset-0 z-[9999] bg-black/50 dark:bg-black/60"
                        aria-hidden
                        onClick={() => setShowModal(false)}
                    />
                    <div
                        className="fixed left-4 right-4 top-1/2 -translate-y-1/2 z-[10000] max-w-lg mx-auto max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-[#0c0d0e] border border-slate-200 dark:border-gray-800 shadow-xl p-6"
                        role="dialog"
                        aria-modal="true"
                        aria-label={t('cookie.modalTitle')}
                    >
                        <h2 className="text-lg font-semibold text-[#17191c] dark:text-white mb-5">
                            {t('cookie.modalTitle')}
                        </h2>
                        <div className="space-y-5">
                            {/* 絕對必要的 Cookie */}
                            <div className="flex gap-4 items-start">
                                <div className="flex-1 min-w-0">
                                    <h3 className="text-sm font-medium text-[#17191c] dark:text-white mb-1">
                                        {t('cookie.necessaryTitle')}
                                    </h3>
                                    <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed">
                                        {t('cookie.necessaryDesc')}
                                    </p>
                                </div>
                                <div className="shrink-0 pt-0.5">
                                    <ToggleSwitch checked={true} onChange={() => {}} disabled />
                                </div>
                            </div>

                            {/* 分析型 Cookie */}
                            <div className="flex gap-4 items-start">
                                <div className="flex-1 min-w-0">
                                    <h3 className="text-sm font-medium text-[#17191c] dark:text-white mb-1">
                                        {t('cookie.analyticsTitle')}
                                    </h3>
                                    <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed">
                                        {t('cookie.analyticsDesc')}
                                    </p>
                                </div>
                                <div className="shrink-0 pt-0.5">
                                    <ToggleSwitch
                                        checked={prefs.analytics}
                                        onChange={(v) => setPrefs((p) => ({ ...p, analytics: v }))}
                                    />
                                </div>
                            </div>

                            {/* 行銷績效 Cookie */}
                            <div className="flex gap-4 items-start">
                                <div className="flex-1 min-w-0">
                                    <h3 className="text-sm font-medium text-[#17191c] dark:text-white mb-1">
                                        {t('cookie.marketingTitle')}
                                    </h3>
                                    <p className="text-sm text-slate-600 dark:text-gray-400 leading-relaxed">
                                        {t('cookie.marketingDesc')}
                                    </p>
                                </div>
                                <div className="shrink-0 pt-0.5">
                                    <ToggleSwitch
                                        checked={prefs.marketing}
                                        onChange={(v) => setPrefs((p) => ({ ...p, marketing: v }))}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="mt-6 flex justify-end gap-2">
                            <button
                                type="button"
                                onClick={() => setShowModal(false)}
                                className="px-4 py-2 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-100 dark:hover:bg-gray-800"
                            >
                                {t('common.cancel')}
                            </button>
                            <button
                                type="button"
                                onClick={handleSaveFromModal}
                                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-black hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
                            >
                                {t('cookie.save')}
                            </button>
                        </div>
                    </div>
                </>
            )}
        </>
    )
}