"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { RunawayLoginButton } from "@/components/site/RunawayLoginButton";

type PublicLoginFormProps = {
  action: (formData: FormData) => void;
  error?: string;
  success?: string;
};

export function PublicLoginForm({ action, error, success }: PublicLoginFormProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [credentialState, setCredentialState] = useState<"empty" | "checking" | "valid" | "invalid">("empty");
  const displayState = !email || !password ? "empty" : credentialState;

  useEffect(() => {
    if (!email || !password) {
      return;
    }

    const controller = new AbortController();
    const timer = window.setTimeout(async () => {
      setCredentialState("checking");
      try {
        const response = await fetch("/api/auth/check", {
          body: JSON.stringify({ email, password }),
          headers: { "Content-Type": "application/json" },
          method: "POST",
          signal: controller.signal
        });
        const data = await response.json() as { valid?: boolean };
        setCredentialState(data.valid ? "valid" : "invalid");
      } catch {
        if (!controller.signal.aborted) {
          setCredentialState("empty");
        }
      }
    }, 450);

    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [email, password]);

  return (
    <form action={action} className="contact-form-pro public-auth-card">
      <span className="pill">User Login</span>
      <h1 className="section-title">Welcome Back</h1>
      <p className="muted">Login to your Just Chill Nepal dashboard.</p>
      {success === "registered" ? <p className="contact-success-message">Registration received. Login now, then wait for admin approval to upload content.</p> : null}
      {error ? <p className="admin-error-message">Invalid email or password.</p> : null}
      {displayState === "invalid" ? (
        <p className="admin-error-message">With the wrong password, you will never catch the login button.</p>
      ) : null}
      <label className="field">
        Email
        <input name="email" onChange={(event) => {
          setEmail(event.target.value);
          setCredentialState("empty");
        }} required type="email" value={email} />
      </label>
      <label className="field">
        Password
        <input name="password" onChange={(event) => {
          setPassword(event.target.value);
          setCredentialState("empty");
        }} required type="password" value={password} />
      </label>
      {displayState === "valid" || displayState === "invalid" ? (
        <RunawayLoginButton enabled={displayState === "invalid"} />
      ) : null}
      <p className="muted">No account yet? <Link href="/register">Register here</Link>.</p>
    </form>
  );
}