import InputError from '@/components/ui/input-error';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth-layout';
import { Head, Link, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import { useTranslation } from 'react-i18next';
import { Building2, LinkIcon, Mail, ShieldCheck, Users } from 'lucide-react';

export default function ForgotPassword({ status }: { status?: string }) {
    const { t } = useTranslation();
    const { data, setData, post, processing, errors } = useForm({
        email: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.email'));
    };
    function ForgotPasswordSideContent() {
        return (
            <div className="w-full">
                <div className="text-center mb-10 [@media(max-height:850px)]:mb-4 [@media(max-height:620px)]:mb-2">
                    <h2 className="text-3xl lg:text-[36px] font-bold text-gray-900 dark:text-white mb-4 [@media(max-height:850px)]:mb-2 [@media(max-height:620px)]:mb-1 leading-tight">
                        {t("Get Back to")} <span className='text-primary'>{t("Your Business Operations")}</span>
                    </h2>
                    <p className="text-gray-500 dark:text-gray-400 text-[15px] max-w-md mx-auto leading-relaxed">
                        {t("Forgot your password? Recover your account securely and get back to managing your ERP system.")}
                    </p>
                </div>

                <div className="grid grid-cols-1 2xl:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10 [@media(max-height:850px)]:mb-4 [@media(max-height:620px)]:mb-2">
                    {/* Card 1 */}
                    <div className="bg-white dark:bg-gray-800 p-5 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-[0_2px_10px_rgba(0,0,0,0.02)] flex items-start rtl:space-x-reverse space-x-4">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-primary/15">
                            <ShieldCheck className="w-6 h-6 feature-icon text-primary" />
                        </div>
                        <div className="flex-1 mt-1">
                            <h4 className="font-bold text-gray-900 dark:text-white text-xs tracking-wide mb-1.5 ">{t("Verify Your Account")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Confirm your account details securely.")}</p>
                        </div>
                    </div>

                    {/* Card 2 */}
                    <div className="bg-white dark:bg-gray-800 p-5 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-[0_2px_10px_rgba(0,0,0,0.02)] flex items-start rtl:space-x-reverse space-x-4">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-primary/15">
                            <LinkIcon className="w-6 h-6 feature-icon text-primary" />
                        </div>
                        <div className="flex-1 mt-1">
                            <h4 className="font-bold text-gray-900 dark:text-white text-xs tracking-wide mb-1.5 ">{t("Recover Access")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Receive a secure link to regain access.")}</p>
                        </div>
                    </div>

                    {/* Card 3 */}
                    <div className="bg-white dark:bg-gray-800 p-5 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-[0_2px_10px_rgba(0,0,0,0.02)] flex items-start rtl:space-x-reverse space-x-4">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-primary/15">
                            <Building2 className="w-6 h-6 feature-icon text-primary" />
                        </div>
                        <div className="flex-1 mt-1">
                            <h4 className="font-bold text-gray-900 dark:text-white text-xs tracking-wide mb-1.5 ">{t("Keep Operations Moving")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Get back to your business modules and daily tasks.")}</p>
                        </div>
                    </div>

                    {/* Card 4 */}
                    <div className="bg-white dark:bg-gray-800 p-5 [@media(max-height:850px)]:p-2 [@media(max-height:620px)]:p-1 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-[0_2px_10px_rgba(0,0,0,0.02)] flex items-start rtl:space-x-reverse space-x-4">
                        <div className="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-primary/15">
                            <Users className="w-6 h-6 feature-icon text-primary" />
                        </div>
                        <div className="flex-1 mt-1">
                            <h4 className="font-bold text-gray-900 dark:text-white text-xs tracking-wide mb-1.5 ">{t("Stay Connected")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Reconnect with your team, clients, and workflows.")}</p>
                        </div>
                    </div>
                </div>

                <div className="text-center">
                    <div className="w-10 h-0.5 mx-auto mb-4 rounded-full bg-primary"></div>
                    <span className="text-[15px] text-gray-500 dark:text-gray-400">{t("Your business management is only a step away.")}</span>
                </div>
            </div>
        );
    }

    return (
        <AuthLayout
            title={t("Forgot your password?")}
            description={t("Enter your email to receive a password reset link")}
            icon={<Mail className="h-7 w-7 text-primary" />}
            status={status}
            statusType={status ? 'success' : undefined}
            sideContent={<ForgotPasswordSideContent />}
            isCenteredHeader={true}
        >
            <Head title={t('Forgot password')} />

            <form className="space-y-5 [@media(max-height:850px)]:space-y-2 [@media(max-height:620px)]:space-y-1" onSubmit={submit}>
                <div className="space-y-4 [@media(max-height:850px)]:space-y-2 [@media(max-height:620px)]:space-y-1">
                    <div>
                        <Label htmlFor="email" className="text-gray-700 dark:text-gray-300 font-medium mb-1.5 block" required>{t("Email address")}</Label>
                        <div className="relative">
                            <div className="absolute inset-y-0 ltr:left-0 rtl:right-0 ltr:pl-3 rtl:pr-3 flex items-center pointer-events-none">
                                <Mail className="h-5 w-5 text-gray-400" />
                            </div>
                            <Input
                                id="email"
                                type="email"
                                required
                                autoFocus
                                tabIndex={1}
                                autoComplete="email"
                                value={data.email}
                                onChange={(e) => setData('email', e.target.value)}
                                placeholder={t("Enter your email")}
                                className="ltr:pl-10 rtl:pr-10 w-full border border-gray-200 dark:border-gray-600 bg-transparent dark:bg-gray-800 rounded-lg transition-all duration-200 text-gray-900 dark:text-white h-11 [@media(max-height:850px)]:h-8 [@media(max-height:620px)]:h-7 [@media(max-height:850px)]:text-xs [@media(max-height:620px)]:text-[10px] ring-primary"
                            />
                        </div>
                        <InputError message={errors.email} />
                    </div>
                </div>

                <button
                    type="submit"
                    disabled={processing}
                    tabIndex={2}
                    className="w-full text-white py-2.5 [@media(max-height:850px)]:py-1.5 [@media(max-height:620px)]:py-1 [@media(max-height:850px)]:text-xs [@media(max-height:620px)]:text-[10px] text-sm font-medium tracking-wide transition-all duration-200 rounded-lg shadow-sm hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer bg-primary"
                >
                    {processing ? t("Sending...") : t("Send Reset Link")}
                </button>

                <div className="text-center">
                    <p className="text-sm text-gray-500">{t("Remember your password?")}{' '}
                        <Link
                            href={route('login')}
                            className="font-medium hover:underline text-primary"
                            tabIndex={3}
                        >
                            {t("Back to login")}
                        </Link>
                    </p>
                </div>
            </form>
        </AuthLayout>
    );
}