"use client";

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

const OWNER_LAST_LOGIN_PACKAGE_KEY = "owner_last_login_package_v1";

function parsePackageText(raw: string): { email: string; tempPassword: string } | null {
  const text = raw.trim();
  if (!text) return null;

  const compact = text.match(/LOGIN_PACKAGE:([^\s|]+)\|([^\s]+)/i);
  if (compact?.[1] && compact?.[2]) {
    return { email: compact[1].trim(), tempPassword: compact[2].trim() };
  }

  const emailMatch = text.match(/Email(?: moderatora)?:\s*(.+)/i);
  const passwordMatch = text.match(/Haslo tymczasowe:\s*(.+)/i);
  if (emailMatch?.[1] && passwordMatch?.[1]) {
    return { email: emailMatch[1].trim(), tempPassword: passwordMatch[1].trim() };
  }

  return null;
}

function LoginForm() {
  const searchParams = useSearchParams();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState<string | null>(null);
  const [accessMsg, setAccessMsg] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const next = searchParams.get("next") || "/admin";
  const expired = searchParams.get("expired");

  useEffect(() => {
    if (expired === "1") {
      setAccessMsg("Sesja wygasla przez bezczynnosc. Zaloguj sie ponownie.");
    }
  }, [expired]);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr(null);
    setLoading(true);

    try {
      const res = await fetch("/api/admin/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, next }),
      });

      const data = await res.json();
      if (!res.ok || !data?.ok) {
        setErr(data?.message || "Błąd logowania");
        return;
      }

      if (typeof window !== "undefined") window.localStorage.removeItem(OWNER_LAST_LOGIN_PACKAGE_KEY);
      window.location.href = data.next || "/admin";
    } catch {
      setErr("Błąd połączenia z serwerem");
    } finally {
      setLoading(false);
    }
  }

  function fillFromAccessPackage() {
    setErr(null);
    setAccessMsg(null);
    if (typeof window === "undefined") return;
    try {
      const raw = window.localStorage.getItem(OWNER_LAST_LOGIN_PACKAGE_KEY);
      if (!raw) {
        setAccessMsg("Brak pakietu dostepu. W panelu wlasciciela kliknij najpierw: Kopiuj pakiet dostepu.");
        return;
      }
      const parsed = JSON.parse(raw) as { email?: string; tempPassword?: string; orgName?: string } | null;
      if (!parsed?.email || !parsed?.tempPassword) {
        setAccessMsg("Pakiet dostepu jest niepelny. Skopiuj go ponownie w panelu wlasciciela.");
        return;
      }
      setEmail(parsed.email);
      setPassword(parsed.tempPassword);
      setAccessMsg(
        parsed.orgName
          ? `Dane uzupelnione dla organizacji: ${parsed.orgName}.`
          : "Dane uzupelnione z pakietu dostepu."
      );
    } catch {
      setAccessMsg("Nie mozna odczytac pakietu dostepu. Skopiuj go ponownie w panelu wlasciciela.");
    }
  }

  async function pasteAccessPackageFromClipboard() {
    setErr(null);
    setAccessMsg(null);
    try {
      const clip = await navigator.clipboard.readText();
      const parsed = parsePackageText(clip);
      if (!parsed) {
        setAccessMsg("Nie znaleziono danych logowania w schowku. Najpierw kliknij: Kopiuj pakiet dostepu.");
        return;
      }
      setEmail(parsed.email);
      setPassword(parsed.tempPassword);
      setAccessMsg("Dane uzupelnione ze schowka.");
    } catch {
      setAccessMsg("Brak dostepu do schowka. Zezwol przegladarce na odczyt schowka.");
    }
  }

  function clearSavedAccessPackage() {
    setErr(null);
    setAccessMsg(null);
    if (typeof window === "undefined") return;
    window.localStorage.removeItem(OWNER_LAST_LOGIN_PACKAGE_KEY);
    setEmail("");
    setPassword("");
    setAccessMsg("Zapisany pakiet dostepu zostal wyczyszczony na tym urzadzeniu.");
  }

  return (
    <div className="mx-auto max-w-md py-10 px-4">
      <h1 className="text-2xl font-bold">Panel moderatora</h1>
      <p className="mt-2 text-gray-700">
        Zaloguj się, aby zarządzać tematami i konsultacjami.
      </p>

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

        <label className="text-sm font-medium block mb-4">
          Hasło
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="mt-2 w-full rounded-xl border p-3 outline-none focus:ring-2 focus:ring-gray-900"
            required
          />
        </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 ? "Loguję..." : "Zaloguj"}
        </button>
        <button
          type="button"
          onClick={fillFromAccessPackage}
          className="mt-2 w-full rounded-full border border-gray-300 bg-white px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-50"
        >
          Zaloguj z pakietu dostepu
        </button>
        <button
          type="button"
          onClick={pasteAccessPackageFromClipboard}
          className="mt-2 w-full rounded-full border border-gray-300 bg-white px-5 py-3 text-sm font-medium text-gray-900 hover:bg-gray-50"
        >
          Wklej pakiet dostepu
        </button>
        <button
          type="button"
          onClick={clearSavedAccessPackage}
          className="mt-2 w-full rounded-full border border-red-300 bg-white px-5 py-3 text-sm font-medium text-red-700 hover:bg-red-50"
        >
          Wyczyść zapisany pakiet dostepu
        </button>

        {err && <p className="mt-3 text-sm text-red-600">{err}</p>}
        {accessMsg && <p className="mt-2 text-sm text-blue-700">{accessMsg}</p>}

        <p className="mt-4 text-center">
          <a href="/admin/reset-hasla" className="text-sm text-gray-500 hover:underline">
            Zapomniałem hasła
          </a>
        </p>
      </form>
    </div>
  );
}

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