"use client";

import { FormEvent, useState } from "react";

export default function NewPasswordForm({ token }: { token: string }) {
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState(false);
  const [working, setWorking] = useState(false);

  async function submit(event: FormEvent) {
    event.preventDefault();
    if (password !== confirm) {
      setError("Lozinke se ne poklapaju.");
      return;
    }
    setWorking(true);
    setError(null);
    try {
      const response = await fetch("/api/auth/reset-password", {
        method: "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, password }),
      });
      const payload = await response.json().catch(() => null);
      if (!response.ok || !payload?.ok) {
        setError(payload?.error?.message ?? "Lozinka nije promenjena. Zatražite novi link.");
        setWorking(false);
        return;
      }
      setDone(true);
    } catch {
      setError("Server trenutno nije dostupan. Pokušajte ponovo.");
      setWorking(false);
    }
  }

  if (!token) {
    return (
      <div className="login-card">
        <div className="platform-mark">M</div>
        <p className="eyebrow">Portal za restorane</p>
        <h2>Link nije ispravan</h2>
        <p>Ovaj link za resetovanje lozinke nedostaje ili je nepotpun.</p>
        <div className="demo-note"><span>Zatražite nov link:</span> <a href="/zaboravljena-lozinka">Zaboravljena lozinka</a>.</div>
      </div>
    );
  }

  if (done) {
    return (
      <div className="login-card">
        <div className="platform-mark">M</div>
        <p className="eyebrow">Portal za restorane</p>
        <h2>Lozinka je promenjena</h2>
        <p>Prijavite se novom lozinkom.</p>
        <a className="primary-button wide" href="/login" style={{ textAlign: "center" }}>Idite na prijavu <span>→</span></a>
      </div>
    );
  }

  return (
    <form className="login-card" onSubmit={submit}>
      <div className="platform-mark">M</div>
      <p className="eyebrow">Portal za restorane</p>
      <h2>Nova lozinka</h2>
      <p>Unesite novu lozinku za svoj MeniFlow nalog.</p>
      <label>Nova lozinka
        <input type="password" value={password} minLength={12} maxLength={200} required
          autoComplete="new-password" onChange={(event) => setPassword(event.target.value)}
          placeholder="Najmanje 12 znakova" />
        <small>Najmanje 12 znakova, bar jedno slovo i jedan broj.</small>
      </label>
      <label>Ponovite lozinku
        <input type="password" value={confirm} minLength={12} maxLength={200} required
          autoComplete="new-password" onChange={(event) => setConfirm(event.target.value)} />
      </label>
      {error && <div className="auth-error" role="alert">{error}</div>}
      <button className="primary-button wide" type="submit" disabled={working}>
        {working ? "Čuvanje…" : "Sačuvajte lozinku"} <span>→</span>
      </button>
    </form>
  );
}