"use client";

import Link from "next/link";
import { useState } from "react";
import { Spinner } from "@/components/common/Spinner";

export function SetPasswordForm({
  token,
  companyName,
  invalidReason,
}: {
  token: string;
  companyName: string | null;
  invalidReason: string | null;
}) {
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [show, setShow] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (password.trim().length < 8) {
      setError("Šifra mora imati najmanje 8 karaktera.");
      return;
    }
    if (password !== confirm) {
      setError("Šifre se ne poklapaju.");
      return;
    }
    setBusy(true);
    try {
      const res = await fetch("/api/portal/set-password", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ token, password }),
      });
      const data = (await res.json().catch(() => ({}))) as { ok?: boolean; redirect?: string; error?: string };
      if (!res.ok || !data.ok) {
        setError(data.error || "Došlo je do greške. Pokušajte ponovo.");
        setBusy(false);
        return;
      }
      window.location.assign(data.redirect || "/portal");
    } catch {
      setError("Mrežna greška. Pokušajte ponovo.");
      setBusy(false);
    }
  }

  return (
    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6 py-12">
      {/* Brand pozadina */}
      <div aria-hidden className="absolute inset-0 bg-[linear-gradient(135deg,#07101e_0%,#0f1c32_55%,#1a1008_100%)]" />
      <div aria-hidden className="absolute inset-0 bg-[radial-gradient(ellipse_70%_55%_at_25%_85%,rgba(240,90,43,0.16),transparent)]" />
      <div aria-hidden className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-transparent via-[#f05a2b] to-transparent opacity-70" />

      <div className="relative z-10 w-full max-w-[420px]">
        {/* Logo */}
        <div className="mb-8 flex justify-center">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/images/biznisportal-logo-ondark.svg" alt="BiznisPortal" className="h-9 w-auto max-w-[13rem]" />
        </div>

        <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-7 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)] backdrop-blur-xl sm:p-8">
          {invalidReason ? (
            <div className="text-center">
              <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/6 text-2xl">
                ⚠️
              </div>
              <h1 className="font-display text-xl font-bold text-white">Link nije aktivan</h1>
              <p className="mt-2 text-sm leading-6 text-white/55">{invalidReason}</p>
              <Link
                href="/portal/login"
                className="mt-6 inline-flex h-11 items-center justify-center rounded-xl bg-[#c2410c] px-5 text-sm font-bold text-white transition hover:bg-[#a8380a]"
              >
                Idi na prijavu
              </Link>
            </div>
          ) : (
            <>
              <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-[#f05a2b]/25 bg-[#f05a2b]/10 px-3 py-1.5">
                <span className="h-2 w-2 rounded-full bg-[#f05a2b]" />
                <span className="text-[0.66rem] font-bold uppercase tracking-[0.18em] text-[#f7b49a]">
                  Profil odobren
                </span>
              </div>
              <h1 className="font-display text-2xl font-bold leading-tight tracking-[-0.02em] text-white">
                Napravite svoju šifru
              </h1>
              <p className="mt-2 text-sm leading-6 text-white/55">
                {companyName ? (
                  <>
                    Dobrodošli, <span className="font-semibold text-white/80">{companyName}</span>. Postavite
                    šifru i odmah ulazite u svoj kontrolni panel.
                  </>
                ) : (
                  <>Postavite šifru i odmah ulazite u svoj kontrolni panel.</>
                )}
              </p>

              <form onSubmit={onSubmit} className="mt-6 space-y-4">
                <div>
                  <label className="mb-1.5 block text-xs font-semibold text-white/60">Nova šifra</label>
                  <div className="relative">
                    <input
                      type={show ? "text" : "password"}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      autoComplete="new-password"
                      placeholder="Najmanje 8 karaktera"
                      className="w-full rounded-xl border border-white/12 bg-white/[0.06] px-4 py-3 pr-16 text-sm text-white placeholder:text-white/30 outline-none transition focus:border-[#f05a2b]/50 focus:bg-white/[0.09]"
                    />
                    <button
                      type="button"
                      onClick={() => setShow((s) => !s)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-[0.7rem] font-semibold text-white/50 hover:text-white/80"
                    >
                      {show ? "Sakrij" : "Prikaži"}
                    </button>
                  </div>
                </div>
                <div>
                  <label className="mb-1.5 block text-xs font-semibold text-white/60">Potvrdite šifru</label>
                  <input
                    type={show ? "text" : "password"}
                    value={confirm}
                    onChange={(e) => setConfirm(e.target.value)}
                    autoComplete="new-password"
                    placeholder="Ponovite šifru"
                    className="w-full rounded-xl border border-white/12 bg-white/[0.06] px-4 py-3 text-sm text-white placeholder:text-white/30 outline-none transition focus:border-[#f05a2b]/50 focus:bg-white/[0.09]"
                  />
                </div>

                {error ? (
                  <p className="rounded-lg border border-red-400/30 bg-red-500/10 px-3 py-2 text-xs font-medium text-red-200">
                    {error}
                  </p>
                ) : null}

                <button
                  type="submit"
                  disabled={busy}
                  className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-[#c2410c] text-sm font-bold text-white shadow-[0_12px_30px_-10px_rgba(194,65,12,0.7)] transition hover:bg-[#a8380a] active:scale-[0.99] disabled:opacity-60"
                >
                  {busy ? <Spinner className="h-4 w-4" /> : null}
                  {busy ? "Postavljam..." : "Napravi šifru i uđi u panel"}
                </button>
              </form>

              <p className="mt-5 text-center text-[0.7rem] leading-5 text-white/35">
                Postavljanjem šifre prihvatate uslove korišćenja BiznisPortal Partner sistema.
              </p>
            </>
          )}
        </div>
      </div>
    </main>
  );
}