"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { ArrowRight, Eye, EyeOff } from "lucide-react";
import { signIn } from "../actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <Button
      type="submit"
      className="group h-12 w-full text-base"
      disabled={pending}
    >
      {pending ? "Signing in…" : "Sign in"}
      {!pending && (
        <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
      )}
    </Button>
  );
}

export function LoginForm({
  redirectTo,
  defaultEmail,
  defaultPassword,
}: {
  redirectTo: string;
  defaultEmail?: string;
  defaultPassword?: string;
}) {
  const [state, formAction] = useActionState(signIn, undefined);
  const [showPassword, setShowPassword] = useState(false);

  return (
    <form action={formAction} className="space-y-5">
      <input type="hidden" name="redirect" value={redirectTo} />
      <div className="space-y-2">
        <Label htmlFor="email" className="text-xs uppercase tracking-widest text-muted-foreground">
          Email
        </Label>
        <Input
          id="email"
          name="email"
          type="email"
          autoComplete="email"
          required
          defaultValue={defaultEmail}
          placeholder="you@eduadvise.in"
          className="h-12 border-0 border-b border-border bg-transparent px-0 text-base shadow-none focus-visible:border-brand-blue focus-visible:ring-0"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password" className="text-xs uppercase tracking-widest text-muted-foreground">
          Password
        </Label>
        <div className="relative">
          <Input
            id="password"
            name="password"
            type={showPassword ? "text" : "password"}
            autoComplete="current-password"
            required
            defaultValue={defaultPassword}
            placeholder="••••••••"
            className="h-12 border-0 border-b border-border bg-transparent px-0 pr-10 text-base shadow-none focus-visible:border-brand-blue focus-visible:ring-0"
          />
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-0 top-1/2 flex -translate-y-1/2 items-center justify-center p-2 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-0"
            aria-label={showPassword ? "Hide password" : "Show password"}
          >
            {showPassword ? (
              <EyeOff className="size-5" />
            ) : (
              <Eye className="size-5" />
            )}
          </button>
        </div>
      </div>
      {state?.error && (
        <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
          {state.error}
        </p>
      )}
      <SubmitButton />
    </form>
  );
}