import NextAuth from "next-auth";
import { NextAuthConfig, User } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { query } from "./db";

export const config = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      async authorize(credentials, req) {
         try {
           const rows = await query(
             "SELECT id, firstname, lastname FROM users WHERE username = ? AND password = ?",
             [credentials.username as string, credentials.password as string]
           );

           if (rows && rows.length > 0) {
             const user = {
               id: rows[0].id,
               name: rows[0].firstname + " " + rows[0].lastname,
             };
             return user;
           } else {
             return null;
           }
         } catch (error) {
           console.error("Error during authentication", error);
          return null;
         }
        return null;
      },
    }),
  ],
  pages: {
    signIn: "/login",
  },
  callbacks: {
    async signIn(user: User, account, profile) {
      return true;
    },
    async redirect({ url, baseUrl }) {
      if (url.startsWith("/")) return `${baseUrl}${url}`;
      else if (url) return url;
      return `${baseUrl}/dashboard`;
    }
  },
  debug: true,
} satisfies NextAuthConfig;

export const { handlers, auth, signIn, signOut } = NextAuth(config);

"use client";

import { FormEvent, useState } from "react";
import Input from "../../components/Input";
import Button from "../../components/button";
import { useSession, signIn } from "next-auth/react";
import Link from "next/link";

export default function Page() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { data: session } = useSession();

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
      await signIn("credentials", {
        username,
        password,
        redirect: false,
      });
  };

  if (session) {
    <div>
      <h1>You are logged in </h1>
    </div>;
  }
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div className="w-96 text-center">
        <h1 className="text-4xl font-bold mb-2">
          <span className="text-primary">L</span>ife
          <span className="text-primary">G</span>uardin
        </h1>
        <p className="text-lg opacity-70">
          Introduz os teus dados para iniciares sessão
        </p>
      </div>

      <form
        className="flex flex-col space-y-4 w-96 mt-6"
        onSubmit={handleSubmit}
      >
        <Input
          type="text"
          placeholder="Username"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
        <Input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
        <Button name="Login" />
        <Link className="text-center" href="register">Ainda não tens uma conta?</Link>
      </form>
    </div>
  );
}