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

export const Route = createFileRoute("/auth")({
  head: () => ({
    meta: [
      { title: "Contul meu — conectare | Laboratorul de Afaceri și Profit" },
      {
        name: "description",
        content:
          "Conectați-vă în contul dvs. de client Laboratorul de Afaceri și Profit sau creați un cont nou.",
      },
      { property: "og:title", content: "Contul meu — conectare | Laboratorul de Afaceri și Profit" },
      {
        property: "og:description",
        content: "Conectați-vă în contul dvs. de client sau creați un cont nou.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: AuthPage,
});

type Mode = "login" | "signup" | "reset";

function AuthPage() {
  const navigate = useNavigate();
  const [mode, setMode] = useState<Mode>("login");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [numeFirma, setNumeFirma] = useState("");
  const [telefon, setTelefon] = useState("");
  const [eroare, setEroare] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [astept, setAstept] = useState(false);

  // Dacă utilizatorul este deja conectat, îl ducem direct în cont.
  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      if (data.session) navigate({ to: "/contul-meu", replace: true });
    });
  }, [navigate]);

  async function trimite(e: React.FormEvent) {
    e.preventDefault();
    setEroare(null);
    setInfo(null);
    setAstept(true);
    try {
      if (mode === "login") {
        const { error } = await supabase.auth.signInWithPassword({ email, password });
        if (error) {
          setEroare(
            error.message === "Invalid login credentials"
              ? "Email sau parolă greșită. Încercați din nou."
              : error.message,
          );
          return;
        }
        navigate({ to: "/contul-meu", replace: true });
      } else if (mode === "signup") {
        const { data, error } = await supabase.auth.signUp({
          email,
          password,
          options: {
            emailRedirectTo: window.location.origin,
            data: { nume_firma: numeFirma || null, telefon: telefon || null },
          },
        });
        if (error) {
          setEroare(error.message);
          return;
        }
        if (data.session) {
          navigate({ to: "/contul-meu", replace: true });
        } else {
          setInfo(
            "Vă mulțumim! V-am trimis un email de confirmare. Deschideți linkul din email pentru a activa contul, apoi conectați-vă.",
          );
          setMode("login");
        }
      } else {
        const { error } = await supabase.auth.resetPasswordForEmail(email, {
          redirectTo: `${window.location.origin}/reset-password`,
        });
        if (error) {
          setEroare(error.message);
          return;
        }
        setInfo("V-am trimis un email cu instrucțiuni pentru resetarea parolei.");
        setMode("login");
      }
    } finally {
      setAstept(false);
    }
  }

  const titlu = mode === "signup" ? "Creează un cont" : mode === "reset" ? "Resetare parolă" : "Conectare";

  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">{titlu}</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            {mode === "signup"
              ? "Creați-vă contul de client pentru a putea colabora cu noi online."
              : mode === "reset"
                ? "Introduceți adresa de email și vă trimitem instrucțiuni de resetare."
                : `Conectați-vă în contul dvs. de client ${FIRMA.nume}.`}
          </p>

          <form onSubmit={trimite} className="mt-6 space-y-4">
            {mode === "signup" && (
              <>
                <div>
                  <label htmlFor="nume-firma" className="mb-1 block text-sm font-medium text-foreground">
                    Numele firmei dvs.
                  </label>
                  <input
                    id="nume-firma"
                    type="text"
                    value={numeFirma}
                    onChange={(e) => setNumeFirma(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="SC Exemplu SRL"
                  />
                </div>
                <div>
                  <label htmlFor="telefon" className="mb-1 block text-sm font-medium text-foreground">
                    Telefon
                  </label>
                  <input
                    id="telefon"
                    type="tel"
                    value={telefon}
                    onChange={(e) => setTelefon(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="07xx xxx xxx"
                  />
                </div>
              </>
            )}
            <div>
              <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
                Email
              </label>
              <input
                id="email"
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(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="nume@exemplu.ro"
              />
            </div>
            {mode !== "reset" && (
              <div>
                <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
                  Parolă
                </label>
                <input
                  id="password"
                  type="password"
                  required
                  minLength={6}
                  value={password}
                  onChange={(e) => setPassword(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>}
            {info && <p className="text-sm text-green-700">{info}</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 procesează..."
                : mode === "signup"
                  ? "Creează contul"
                  : mode === "reset"
                    ? "Trimite email de resetare"
                    : "Conectare"}
            </button>
          </form>

          <div className="mt-6 flex flex-col gap-2 text-sm text-muted-foreground">
            {mode === "login" && (
              <>
                <button
                  type="button"
                  onClick={() => {
                    setMode("signup");
                    setEroare(null);
                    setInfo(null);
                  }}
                  className="text-left underline underline-offset-4 hover:text-foreground"
                >
                  Nu aveți cont? Creați unul nou
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setMode("reset");
                    setEroare(null);
                    setInfo(null);
                  }}
                  className="text-left underline underline-offset-4 hover:text-foreground"
                >
                  Ați uitat parola?
                </button>
              </>
            )}
            {mode !== "login" && (
              <button
                type="button"
                onClick={() => {
                  setMode("login");
                  setEroare(null);
                  setInfo(null);
                }}
                className="text-left underline underline-offset-4 hover:text-foreground"
              >
                Înapoi la conectare
              </button>
            )}
          </div>
        </div>
      </div>
    </SiteLayout>
  );
}