import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { SiteLayout } from "@/components/SiteLayout";

export const Route = createFileRoute("/reset-password")({
  head: () => ({
    meta: [
      { title: "Setare parolă nouă | Laboratorul de Afaceri și Profit" },
      { name: "description", content: "Setați o parolă nouă pentru contul dvs. de client." },
      { property: "og:title", content: "Setare parolă nouă | Laboratorul de Afaceri și Profit" },
      { property: "og:description", content: "Setați o parolă nouă pentru contul dvs. de client." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: ResetPasswordPage,
});

function ResetPasswordPage() {
  const navigate = useNavigate();
  const [sesiuneOk, setSesiuneOk] = useState<boolean | null>(null);
  const [parola, setParola] = useState("");
  const [eroare, setEroare] = useState<string | null>(null);
  const [gata, setGata] = useState(false);
  const [astept, setAstept] = useState(false);

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => setSesiuneOk(!!data.session));
  }, []);

  async function salveaza(e: React.FormEvent) {
    e.preventDefault();
    setEroare(null);
    setAstept(true);
    try {
      const { error } = await supabase.auth.updateUser({ password: parola });
      if (error) {
        setEroare(error.message);
        return;
      }
      setGata(true);
      setTimeout(() => navigate({ to: "/contul-meu", replace: true }), 1500);
    } finally {
      setAstept(false);
    }
  }

  return (
    <SiteLayout>
      <div className="mx-auto flex max-w-6xl flex-col px-6 py-16">
        <div className="mx-auto w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-card">
          <h1 className="font-serif text-3xl text-foreground">Parolă nouă</h1>
          {sesiuneOk === null && <p className="mt-4 text-sm text-muted-foreground">Se verifică linkul...</p>}
          {sesiuneOk === false && (
            <>
              <p className="mt-4 text-sm text-muted-foreground">
                Linkul este invalid sau a expirat. Solicitați un email nou de resetare.
              </p>
              <a
                href="/auth"
                className="mt-6 inline-block rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:opacity-90"
              >
                Pagina de conectare
              </a>
            </>
          )}
          {sesiuneOk === true && gata && (
            <p className="mt-4 text-sm text-green-700">Parola a fost schimbată. Vă ducem în cont...</p>
          )}
          {sesiuneOk === true && !gata && (
            <form onSubmit={salveaza} className="mt-6 space-y-4">
              <div>
                <label htmlFor="parola-noua" className="mb-1 block text-sm font-medium text-foreground">
                  Parola nouă
                </label>
                <input
                  id="parola-noua"
                  type="password"
                  required
                  minLength={6}
                  value={parola}
                  onChange={(e) => setParola(e.target.value)}
                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent"
                  placeholder="Minim 6 caractere"
                />
              </div>
              {eroare && <p className="text-sm text-red-600">{eroare}</p>}
              <button
                type="submit"
                disabled={astept}
                className="w-full rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:opacity-90 disabled:opacity-60"
              >
                {astept ? "Se salvează..." : "Salvează parola"}
              </button>
            </form>
          )}
        </div>
      </div>
    </SiteLayout>
  );
}