"use client";

import PasswordResetLinkController from "@/actions/App/Http/Controllers/Auth/PasswordResetLinkController";

import { login } from "@/routes";

import { Form, Head } from "@inertiajs/react";

import { LoaderCircle } from "lucide-react";

import logo from "../../../images/logo-white.png";

import TextLink from "@/components/text-link";
import InputError from "@/components/input-error";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import styles from "./reset.module.scss";

export default function ForgotPassword({
    status,
}: {
    status?: string;
}) {
    return (
        <>
            <Head title="Forgot Password" />

            <div className={styles.reset}>
                <header className={styles.header}>
                    <div className={styles.headerInner}>
                        <TextLink href="/">
                            <img
                                src={logo}
                                alt="TraderPlus"
                                className={styles.logo}
                            />
                        </TextLink>

                        <TextLink href={login()}>
                            Back to Login
                        </TextLink>
                    </div>
                </header>

                <main className={styles.content}>
                    <div className={styles.wrapper}>
                        <div className={styles.copy}>
                            <span>ACCOUNT RECOVERY</span>

                            <h1>
                                Forgot your password?
                            </h1>

                            <p>
                                Please enter the email address associated with your account to change your password
                            </p>
                        </div>

                        {status && (
                            <div
                                className={
                                    styles.status
                                }
                            >
                                {status}
                            </div>
                        )}

                        <Form
                            {...PasswordResetLinkController.store.form()}
                            className={styles.form}
                        >
                            {({
                                processing,
                                errors,
                            }) => (
                                <>
                                    <div
                                        className={
                                            styles.field
                                        }
                                    >
                                        <Label htmlFor="email">
                                            Email
                                            Address
                                        </Label>

                                        <Input
                                            id="email"
                                            type="email"
                                            name="email"
                                            autoComplete="email"
                                            autoFocus
                                            required
                                            placeholder="you@example.com"
                                        />

                                        <InputError
                                            message={
                                                errors.email
                                            }
                                        />
                                    </div>

                                    <Button
                                        type="submit"
                                        disabled={
                                            processing
                                        }
                                        className={
                                            styles.submitBtn
                                        }
                                    >
                                        {processing && (
                                            <LoaderCircle className="h-4 w-4 animate-spin" />
                                        )}

                                        Send Reset Link
                                    </Button>
                                </>
                            )}
                        </Form>

                        <div
                            className={
                                styles.footerText
                            }
                        >
                            Remember your
                            password?{" "}
                            <TextLink
                                href={login()}
                            >
                                Sign in
                            </TextLink>
                        </div>
                    </div>
                </main>
            </div>
        </>
    );
}