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, useForm } from '@inertiajs/react';
import { FormEventHandler, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Briefcase, Building2, Lock, Mail, ShieldCheck, Users } from 'lucide-react';

interface ResetPasswordProps {
    token: string;
    email: string;
}

export default function ResetPassword({ token, email }: ResetPasswordProps) {
    const { t } = useTranslation();
    const { data, setData, post, processing, errors, reset } = useForm({
        token: token,
        email: email,
        password: '',
        password_confirmation: '',
    });

    useEffect(() => {
        return () => {
            reset('password', 'password_confirmation');
        };
    }, []);

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('password.store'));
    };

    function RegisterSideContent() {
        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("A Fresh Start for")} <span className='text-primary'>{t("Secure Access")}</span>
                    </h2>
                    <p className="text-gray-500 dark:text-gray-400 text-[15px] max-w-md mx-auto leading-relaxed">
                        {t("Create a new password and get back to managing your business operations with confidence.")}
                    </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("Protect Your Account")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Keep your business data secure.")}</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">
                            <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("Manage Operations")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Get back to HRM, accounting, POS, and contracts.")}</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">
                            <Briefcase 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("Handle Tasks & Sales")}</h4>
                            <p className="text-[13px] text-gray-500 dark:text-gray-400 leading-relaxed ltr:pr-2 rtl:pl-2">{t("Continue tracking products, recruitment, and orders.")}</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("Return to your employees, clients, vendors, and team.")}</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("One secure account. Everything your business ERP needs.")}</span>
                </div>
            </div>
        );
    }

    return (
        <AuthLayout
            title={t("Reset your password")}
            description={t("Please enter your new password below")}
            icon={<Lock className="h-7 w-7 text-primary" />}
            isCenteredHeader={true}
            sideContent={<RegisterSideContent />}
        >
            <Head title={t('Reset password')} />

            <form onSubmit={submit} className="space-y-5 [@media(max-height:850px)]:space-y-2 [@media(max-height:620px)]:space-y-1">
                <div className="space-y-4 [@media(max-height:850px)]:space-y-2 [@media(max-height:620px)]:space-y-1">
                    <div className="relative">
                        <Label htmlFor="email" className="text-gray-700 dark:text-gray-300 font-medium mb-2 block" required>{t("Email")}</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"
                                readOnly
                                value={data.email}
                                className="ltr:pl-10 rtl:pr-10 w-full border-gray-300 dark:border-gray-600 bg-white 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 className="relative">
                        <Label htmlFor="password" className="text-gray-700 dark:text-gray-300 font-medium mb-2 block" required>{t("Password")}</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">
                                <Lock className="h-5 w-5 text-gray-400" />
                            </div>
                            <input
                                id="password"
                                type="password"
                                required
                                autoFocus
                                tabIndex={1}
                                autoComplete="new-password"
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                placeholder="••••••••"
                                className="border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-primary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ltr:pl-10 rtl:pr-10 w-full border-gray-300 dark:border-gray-600 bg-white 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.password} />
                    </div>

                    <div className="relative">
                        <Label htmlFor="password_confirmation" className="text-gray-700 dark:text-gray-300 font-medium mb-2 block" required>{t("Confirm password")}</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">
                                <Lock className="h-5 w-5 text-gray-400" />
                            </div>
                            <input
                                id="password_confirmation"
                                type="password"
                                required
                                tabIndex={2}
                                autoComplete="new-password"
                                value={data.password_confirmation}
                                onChange={(e) => setData('password_confirmation', e.target.value)}
                                placeholder="••••••••"
                                className="border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex min-w-0 border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-primary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ltr:pl-10 rtl:pr-10 w-full border-gray-300 dark:border-gray-600 bg-white 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.password_confirmation} />
                    </div>
                </div>
                <Button
                    type="submit"
                    tabIndex={3}
                    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-md hover:shadow-lg transform hover:scale-[1.02] bg-primary"
                    disabled={processing}
                    data-test="reset-password-button"
                >
                    {processing ? 'Loading...' : t('RESET PASSWORD')}
                </Button>
            </form>
        </AuthLayout>
    );
}