"use client";

import ResetPasswordController from "@/actions/App/Http/Controllers/Auth/NewPasswordController";

import { login } from "@/routes";

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

import {
    Eye,
    EyeOff,
    LoaderCircle,
} from "lucide-react";

import { useState } from "react";

import logo from "../../../../public/logo.svg";

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-password.module.scss";

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

export default function ResetPassword({
    token,
    email,
}: ResetPasswordProps) {
    const [showPassword, setShowPassword] =
        useState(false);

    const [
        showConfirmPassword,
        setShowConfirmPassword,
    ] = useState(false);

    return (
        <>
            <Head title="Reset 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>
                                PASSWORD RESET
                            </span>

                            <h1>
                                Create a new
                                password
                            </h1>

                            <p>
                                Choose a strong
                                password to
                                secure your
                                TraderPlus
                                account.
                            </p>
                        </div>

                        <Form
                            {...ResetPasswordController.store.form()}
                            className={
                                styles.form
                            }
                        >
                            {({
                                processing,
                                errors,
                            }) => (
                                <>
                                    <input
                                        type="hidden"
                                        name="token"
                                        value={
                                            token
                                        }
                                    />

                                    <div
                                        className={
                                            styles.field
                                        }
                                    >
                                        <Label htmlFor="email">
                                            Email
                                            Address
                                        </Label>

                                        <Input
                                            id="email"
                                            type="email"
                                            name="email"
                                            defaultValue={
                                                email
                                            }
                                            readOnly
                                        />

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

                                    <div
                                        className={
                                            styles.field
                                        }
                                    >
                                        <Label htmlFor="password">
                                            New
                                            Password
                                        </Label>

                                        <div
                                            className={
                                                styles.passwordWrap
                                            }
                                        >
                                            <Input
                                                id="password"
                                                name="password"
                                                type={
                                                    showPassword
                                                        ? "text"
                                                        : "password"
                                                }
                                                placeholder="Enter new password"
                                                required
                                            />

                                            <span
                                                className={
                                                    styles.toggle
                                                }
                                                onClick={() =>
                                                    setShowPassword(
                                                        !showPassword
                                                    )
                                                }
                                            >
                                                {showPassword ? (
                                                    <EyeOff
                                                        size={
                                                            18
                                                        }
                                                    />
                                                ) : (
                                                    <Eye
                                                        size={
                                                            18
                                                        }
                                                    />
                                                )}
                                            </span>
                                        </div>

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

                                    <div
                                        className={
                                            styles.field
                                        }
                                    >
                                        <Label htmlFor="password_confirmation">
                                            Confirm
                                            Password
                                        </Label>

                                        <div
                                            className={
                                                styles.passwordWrap
                                            }
                                        >
                                            <Input
                                                id="password_confirmation"
                                                name="password_confirmation"
                                                type={
                                                    showConfirmPassword
                                                        ? "text"
                                                        : "password"
                                                }
                                                placeholder="Confirm password"
                                                required
                                            />

                                            <span
                                                className={
                                                    styles.toggle
                                                }
                                                onClick={() =>
                                                    setShowConfirmPassword(
                                                        !showConfirmPassword
                                                    )
                                                }
                                            >
                                                {showConfirmPassword ? (
                                                    <EyeOff
                                                        size={
                                                            18
                                                        }
                                                    />
                                                ) : (
                                                    <Eye
                                                        size={
                                                            18
                                                        }
                                                    />
                                                )}
                                            </span>
                                        </div>

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

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

                                        Reset
                                        Password
                                    </Button>
                                </>
                            )}
                        </Form>

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