'use client'

import Link from 'next/link'
import { useMemo, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { FaXmark } from 'react-icons/fa6'
import AuthSkeleton from '@/components/Skeletons/AuthSkeleton'

function cx(...classes: Array<string | false | null | undefined>) {
    return classes.filter(Boolean).join(' ')
}

function isValidEmail(email: string) {
    const s = email.trim()
    if (!s.includes('@')) return false
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s)
}

export default function ForgetPageClient() {
    // Translation
    const { t } = useTranslation()

    // States
    const [isLoading, setIsLoading] = useState(true)
    const [email, setEmail] = useState('')
    const [touched, setTouched] = useState(false)

    // Memo
    const ok = useMemo(() => isValidEmail(email), [email])

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsLoading(false)
        }, 600)
        return () => clearTimeout(timer)
    }, [])

    if (isLoading) {
        return <AuthSkeleton type="forget" />
    }

    return (
        <div className="w-full">
            <div className="mx-auto w-full max-w-[560px]">
                <div className="w-full rounded-2xl bg-white dark:bg-[#0c0d0e] shadow-2xl border border-gray-200 dark:border-gray-800">
                    <div className="px-6 py-6">
                        <div className="flex items-center justify-between">
                            <div className="text-xl font-semibold text-gray-900 dark:text-white">{t('auth.forget.title')}</div>
                        </div>

                        <p className="mt-3 text-sm text-gray-600 dark:text-gray-300">
                            {t('auth.forget.description')}
                        </p>

                        <form
                            autoComplete="off"
                            className="mt-6 space-y-5"
                            onSubmit={(e) => {
                                e.preventDefault()
                                window.alert('（Mock）已送出重設密碼連結（尚未串接）')
                            }}
                        >
                            <div>
                                <div className="text-sm text-gray-500 dark:text-gray-400">{t('auth.forget.email')}</div>
                                <div
                                    className={cx(
                                        'mt-2 flex items-center h-[50px] px-[14px] rounded-lg border transition-colors',
                                        touched && !ok ? 'border-[#ef565f]' : 'border-[#d5d7dc] dark:border-gray-700',
                                        'focus-within:border-[#acb0b9] dark:focus-within:border-gray-500'
                                    )}
                                >
                                    <input
                                        value={email}
                                        onChange={(e) => setEmail(e.target.value)}
                                        onBlur={() => setTouched(true)}
                                        name="gp_forget_email"
                                        autoComplete="off"
                                        autoCapitalize="none"
                                        autoCorrect="off"
                                        spellCheck={false}
                                        readOnly
                                        onFocus={(e) => {
                                            e.currentTarget.readOnly = false
                                        }}
                                        placeholder={t('auth.forget.emailPlaceholder')}
                                        className="w-full h-full bg-transparent text-[16px] text-gray-900 dark:text-white outline-none pr-3"
                                    />
                                    {email.length > 0 && (
                                        <button
                                            type="button"
                                            tabIndex={-1}
                                            className="w-5 h-5 rounded-full bg-[#E2E4E9] dark:bg-[#2f3137] text-[#525661] dark:text-[#D5D7DC] text-xs flex items-center justify-center"
                                            onClick={() => setEmail('')}
                                            aria-label={t('auth.forget.clear')}
                                        >
                                            <FaXmark className="w-3 h-3" />
                                        </button>
                                    )}
                                </div>
                                {touched && !ok && (
                                    <div className="mt-2 text-sm text-[#ef565f]">{t('auth.forget.errors.emailInvalid')}</div>
                                )}
                            </div>

                            <div className="pt-2">
                                <button
                                    type="submit"
                                    disabled={!ok}
                                    className={cx(
                                        'w-full h-[52px] rounded-xl text-[16px] font-medium transition-colors',
                                        ok
                                            ? 'border border-[#d5d7dc] dark:border-gray-700 hover:bg-[rgba(145,150,161,0.1)] active:bg-[rgba(23,25,28,0.3)] text-gray-900 dark:text-white'
                                            : 'bg-[#f1f2f4] dark:bg-[#232529] text-[rgba(23,25,28,0.3)] dark:text-white/30 pointer-events-none'
                                    )}
                                >
                                    {t('auth.forget.submit')}
                                </button>

                                <div className="mt-3 flex items-center justify-between text-sm">
                                    <Link
                                        href="/login"
                                        className="text-[#525661] dark:text-gray-300 hover:text-gray-900 dark:hover:text-white underline underline-offset-4"
                                    >
                                        {t('auth.forget.returnToLogin')}
                                    </Link>
                                    <Link
                                        href="/register"
                                        className="text-[#525661] dark:text-gray-300 hover:text-gray-900 dark:hover:text-white underline underline-offset-4"
                                    >
                                        {t('auth.forget.registerNew')}
                                    </Link>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}