"use client";

import { FormEvent, useState } from "react";

export default function ForgotPasswordForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [sent, setSent] = useState(false);
  const [working, setWorking] = useState(false);

  async function submit(event: FormEvent) {
    event.preventDefault();
    setWorking(true);
    setError(null);
    try {
      const response = await fetch("/api/auth/forgot-password", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok || !payload?.ok) {
        setError(payload?.error?.message ?? "Zahtev nije uspeo. Pokušajte ponovo.");
        setWorking(false);
        return;
      }
      setSent(true);
    } catch {
      setError("Server trenutno nije dostupan. Pokušajte ponovo.");
      setWorking(false);
    }
  }

  if (sent) {
    return (
      <div className="login-card">
        <div className="platform-mark">M</div>
        <p className="eyebrow">Portal za restorane</p>
        <h2>Proverite email</h2>
        <p>
          Ako <strong>{email}</strong> ima MeniFlow nalog, poslali smo uputstvo za
          resetovanje lozinke. Link važi 1 sat.
        </p>
        <div className="demo-note"><span>Setili ste se lozinke?</span> <a href="/login">Prijavite se</a>.</div>
      </div>
    );
  }

  return (
    <form className="login-card" onSubmit={submit}>
      <div className="platform-mark">M</div>
      <p className="eyebrow">Portal za restorane</p>
      <h2>Zaboravljena lozinka</h2>
      <p>Unesite email sa kojim ste registrovani. Poslaćemo vam link za novu lozinku.</p>
      <label>Email adresa
        <input type="email" value={email} required autoComplete="email"
          onChange={(event) => setEmail(event.target.value)} placeholder="vi@restoran.rs" />
      </label>
      {error && <div className="auth-error" role="alert">{error}</div>}
      <button className="primary-button wide" type="submit" disabled={working}>
        {working ? "Slanje…" : "Pošaljite link"} <span>→</span>
      </button>
      <div className="demo-note"><span>Setili ste se lozinke?</span> <a href="/login">Prijavite se</a>.</div>
    </form>
  );
}