/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { useState } from "react";

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

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

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

import { register } from "@/routes";
import { request } from "@/routes/password";

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

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

import {usePage} from "@inertiajs/react";

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

interface LoginProps {
    status?: string;
    canResetPassword: boolean;
}

export default function Login({
    status,
    canResetPassword,
}: LoginProps) {
    const [showPassword, setShowPassword] =
        useState(false);
    const { appSettings } =
    usePage().props as unknown as any

    return (
        <>
            <Head title="Sign In" />

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

                  <TextLink
                      href={register()}
                  >
                      Create Account
                  </TextLink>
              </div>
          </header>

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

                      <h1>
                          Welcome back
                      </h1>

                      <p>
                          Access your
                          dashboard,
                          investments,
                          signals and
                          trading
                          resources.
                      </p>
                  </div>

                  <Form
                      {...AuthenticatedSessionController.store.form()}
                      resetOnSuccess={[
                          "email",
                          "password",
                      ]}
                      className={
                          styles.form
                      }
                  >
                      {({
                          processing,
                          errors,
                      }) => (
                          <>
                              <input
                                  type="text"
                                  name="fakeusernameremembered"
                                  style={{
                                      display:
                                          "none",
                                  }}
                              />

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

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

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

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

                                      {canResetPassword && (
                                          <TextLink
                                              href={request()}
                                              className={
                                                  styles.forgot
                                              }
                                          >
                                              Forgot
                                              password?
                                          </TextLink>
                                      )}
                                  </div>

                                  <div
                                      className={
                                          styles.passwordWrap
                                      }
                                  >
                                      <Input
                                          id="password"
                                          name="password"
                                          type={
                                              showPassword
                                                  ? "text"
                                                  : "password"
                                          }
                                          placeholder="Password"
                                          autoComplete="current-password"
                                          required
                                      />

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

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

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

                                  Sign In
                              </Button>

                              <div
                                  className={
                                      styles.footerText
                                  }
                              >
                                  Don't
                                  have an
                                  account?{" "}
                                  <TextLink
                                      href={register()}
                                  >
                                      Create
                                      one
                                  </TextLink>
                              </div>
                          </>
                      )}
                  </Form>

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