"use client";

import { FormState, postLogin, postRegister } from "@/actions/login";

import { useActionState, useEffect, useState } from "react";
import {
  Card,
  CardHeader,
  CardDescription,
  CardContent,
  CardFooter,
  CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function AuthScreen() {
  const [isReg, setReg] = useState(false);
  return <OOldform isReg={isReg} toggle={() => setReg((b) => !b)} />;
}

function OOldform({ isReg, toggle }: { isReg: boolean; toggle: () => void }) {
  const regstrings = {
    title: "Welcome to Sorlang",
    desc: "Sign up",
    button: "Sign up",
    toggle: "Have an account?",
    toggle2: "Login",
  };
  const logstrings = {
    title: "Welcome back",
    desc: "Login to Sorlang",
    button: "Login",
    toggle: "Don't have an account?",
    toggle2: "Sign up",
  };
  const [strings, setStrings] = useState(logstrings);

  useEffect(() => {
    if (isReg) setStrings(regstrings);
    else setStrings(logstrings);
  }, [isReg]);

  const [state, formAction, isPending] = useActionState<FormState, FormData>(
    isReg ? postRegister : postLogin,
    { error: "" },
    "/login",
  );
  console.log({ state });
  
  // Handle redirect after successful login
  if (state.success && state.redirect) {
    window.location.href = state.redirect;
  }
  
  return (
    <form action={formAction}>
      <div className="flex flex-col gap-6">
        <Card>
          <CardHeader className="text-center">
            <CardTitle className="text-xl">{strings.title}</CardTitle>
            <CardDescription>{strings.desc}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-6">
              <div className="grid gap-6">
                <Label>
                  Username
                  <Input placeholder="shadcn" name="username" />
                  {state.name && <p>{state.name}</p>}
                </Label>
                <Label>
                  {isReg ? (
                    "Password"
                  ) : (
                    <Label className="flex justify-between">
                      <span>Password</span>
                      <a
                        href="#"
                        className="ml-auto text-sm underline-offset-4 hover:underline"
                      >
                        Forgot your password?
                      </a>
                    </Label>
                  )}
                  <Input type="password" placeholder="..." name="password" />
                  {state.password && <p>{state.password}</p>}
                </Label>
              </div>
              <Button type="submit" className="w-full" disabled={isPending}>
                {isPending ? "Loading..." : strings.button}
              </Button>
              <div className="text-center text-sm">
                {strings.toggle}
                <a
                  onClick={toggle}
                  href="#"
                  className="underline underline-offset-4"
                >
                  {strings.toggle2}
                </a>
              </div>
            </div>
            {state.error && <p className="text-red-500">{state.error}</p>}
            {state.success && <p className="text-green-500">Login successful! Redirecting...</p>}
          </CardContent>
        </Card>
        <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
          By clicking continue, you agree to our{" "}
          <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
        </div>
      </div>
    </form>
    // <form action={formAction} aria-disabled={isPending}>
    //   {state.msg}
    //   <label>
    //     Username
    //     <input type="text" placeholder="shadcn" name="username" />
    //   </label>
    //   <label className="flex justify-between">
    //     <span>Password</span>
    //     <a
    //       href="#"
    //       className="ml-auto text-sm underline-offset-4 hover:underline"
    //     >
    //       Forgot your password?
    //     </a>
    //     <input type="password" placeholder="..." name="password" />
    //   </label>
    //   <button type="submit" className="w-full">
    //     Login
    //   </button>
    //   <div className="text-center text-sm">
    //     Don&apos;t have an account?{" "}
    //     <a href="#" className="underline underline-offset-4">
    //       Sign up
    //     </a>
    //   </div>
    // </form>
  );
}