"use client";

import { useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";

function ResetForm() {
  const searchParams = useSearchParams();
  const tokenFromUrl = searchParams.get("token");

  // Tryb 1: Podaj email
  const [email, setEmail] = useState("");
  const [resetUrl, setResetUrl] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

  // Tryb 2: Nowe hasło (jeśli jest token w URL)
  const [newPassword, setNewPassword] = useState("");
  const [newPassword2, setNewPassword2] = useState("");
  const [done, setDone] = useState(false);

  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  // Tryb 1: Wyślij prośbę o reset
  async function handleRequestReset(e: React.FormEvent) {
    e.preventDefault();
    setErr(null);
    setMsg(null);
    setResetUrl(null);
    setLoading(true);

    try {
      const res = await fetch("/api/admin/reset-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      setMsg(data.message);
      if (data.resetUrl) setResetUrl(data.resetUrl);
    } catch {
      setErr("Błąd połączenia");
    } finally {
      setLoading(false);
    }
  }

  // Tryb 2: Zmień hasło
  async function handleChangePassword(e: React.FormEvent) {
    e.preventDefault();
    setErr(null);

    if (newPassword !== newPassword2) {
      setErr("Hasła nie są identyczne");
      return;
    }

    setLoading(true);
    try {
      const res = await fetch("/api/admin/reset-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: tokenFromUrl, newPassword }),
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        setErr(data.message || "Błąd");
        return;
      }
      setDone(true);
    } catch {
      setErr("Błąd połączenia");
    } finally {
      setLoading(false);
    }
  }

  // Tryb 2: Token w URL → formularz zmiany hasła
  if (tokenFromUrl) {
    if (done) {
      return (
        <div className="mx-auto max-w-md py-10 px-4 text-center">
          <div className="rounded-2xl border p-6">
            <p className="text-lg font-semibold text-green-700 mb-2">Hasło zmienione!</p>
            <Link href="/admin/login" className="text-sm underline">
              Zaloguj się
            </Link>
          </div>
        </div>
      );
    }

    return (
      <div className="mx-auto max-w-md py-10 px-4">
        <h1 className="text-2xl font-bold mb-2">Nowe hasło</h1>
        <form onSubmit={handleChangePassword} className="mt-6 rounded-2xl border p-6 space-y-4">
          <label className="block">
            <span className="text-sm font-medium">Nowe hasło</span>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              required
              minLength={8}
            />
          </label>
          <label className="block">
            <span className="text-sm font-medium">Powtórz hasło</span>
            <input
              type="password"
              value={newPassword2}
              onChange={(e) => setNewPassword2(e.target.value)}
              className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
              required
              minLength={8}
            />
          </label>
          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
          >
            {loading ? "Zmieniam..." : "Zmień hasło"}
          </button>
          {err && <p className="text-sm text-red-600">{err}</p>}
        </form>
      </div>
    );
  }

  // Tryb 1: Podaj email
  return (
    <div className="mx-auto max-w-md py-10 px-4">
      <h1 className="text-2xl font-bold mb-2">Zapomniałem hasła</h1>
      <p className="text-gray-700 mb-6">Podaj email, na który zarejestrowano konto moderatora.</p>

      <form onSubmit={handleRequestReset} className="rounded-2xl border p-6 space-y-4">
        <label className="block">
          <span className="text-sm font-medium">Email</span>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="mt-1 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
            required
            autoFocus
          />
        </label>

        <button
          type="submit"
          disabled={loading}
          className="w-full rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50"
        >
          {loading ? "Sprawdzam..." : "Resetuj hasło"}
        </button>

        {err && <p className="text-sm text-red-600">{err}</p>}
        {msg && <p className="text-sm text-gray-700">{msg}</p>}

        {resetUrl && (
          <div className="rounded-xl bg-gray-50 border p-4">
            <p className="text-sm text-gray-600 mb-2">
              Na razie link wyświetlamy tu (docelowo: email):
            </p>
            <a href={resetUrl} className="text-sm text-blue-600 underline break-all">
              {resetUrl}
            </a>
          </div>
        )}
      </form>

      <p className="mt-4 text-center">
        <Link href="/admin/login" className="text-sm text-gray-500 hover:underline">
          ← Wróć do logowania
        </Link>
      </p>
    </div>
  );
}

export default function ResetPasswordPage() {
  return (
    <Suspense fallback={<div className="mx-auto max-w-md py-10 px-4">Ładowanie...</div>}>
      <ResetForm />
    </Suspense>
  );
}