import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useState, type FormEvent } from "react";

import { LogoSlot } from "@/components/site/Layout";
import { useLang } from "@/lib/i18n";
import { meta } from "@/lib/meta";
import { supabase } from "@/integrations/supabase/client";
import { lovable } from "@/integrations/lovable";

export const Route = createFileRoute("/auth")({
  head: () =>
    meta(
      "සංවිධායක ඇතුළුවීම",
      "Sign in to the Thinulaka Uttamachara 2026 organizer area to prepare tribute biographies.",
    ),
  component: AuthPage,
});

function AuthPage() {
  const { t } = useLang();
  const navigate = useNavigate();
  const [mode, setMode] = useState<"in" | "up">("in");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [fullName, setFullName] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  async function submit(e: FormEvent) {
    e.preventDefault();
    setError("");
    setBusy(true);
    try {
      if (mode === "up") {
        const { data, error: err } = await supabase.auth.signUp({
          email,
          password,
          options: { data: { full_name: fullName }, emailRedirectTo: window.location.origin },
        });
        if (err) {
          setError(err.message);
          return;
        }
        if (data.session) {
          await navigate({ to: "/tribute", replace: true });
          return;
        }
        setSent(true);
        return;
      }

      const { error: err } = await supabase.auth.signInWithPassword({ email, password });
      if (err) {
        setError(err.message);
        return;
      }
      await navigate({ to: "/tribute", replace: true });
    } finally {
      setBusy(false);
    }
  }

  async function withGoogle() {
    setError("");
    setBusy(true);
    try {
      const result = await lovable.auth.signInWithOAuth("google", { redirect_uri: window.location.origin });
      if (result.error) {
        setError(result.error.message ?? "Google sign-in did not complete.");
        return;
      }
      if (result.redirected) return;
      await navigate({ to: "/tribute", replace: true });
    } finally {
      setBusy(false);
    }
  }

  const inputClass =
    "w-full rounded-sm border border-gold/30 bg-ink/40 px-4 py-3 text-foreground outline-none placeholder:text-muted-foreground/60 focus:border-gold/70";

  return (
    <section className="bg-section border-b border-border">
      <div className="mx-auto max-w-md px-5 py-24">
        <div className="gold-frame px-8 py-10">
          <div className="flex flex-col items-center text-center">
            <LogoSlot size="lg" />
            <h1 className="mt-6 text-3xl text-foreground">
              {t({ si: "සංවිධායක ඇතුළුවීම", en: "Organizer sign-in" })}
            </h1>
            <p className="mt-3 text-sm text-muted-foreground">
              {t({
                si: "මෙම කොටස උත්සවයේ සංවිධායක මණ්ඩලය සඳහා පමණි.",
                en: "This area is for the ceremony's organizing committee only.",
              })}
            </p>
          </div>

          {sent ? (
            <div className="mt-8 rounded-sm border border-gold/40 bg-gold/5 px-5 py-4 text-sm text-gold">
              {t({
                si: "ඔබේ වට්ටෝරුව ලියාපදිංචි විය. කරුණාකර තහවුරු කිරීමේ විද්‍යුත් පණිවිඩය සොයා බලා, එහි සබැඳිය ක්ලික් කරන්න.",
                en: "Your account was created. Please check your inbox and click the confirmation link we sent.",
              })}
            </div>
          ) : (
            <>
              <div className="mt-8 flex rounded-sm border border-gold/40 text-sm">
                {(["in", "up"] as const).map((m) => (
                  <button
                    key={m}
                    type="button"
                    onClick={() => {
                      setMode(m);
                      setError("");
                    }}
                    aria-pressed={mode === m}
                    className={`flex-1 px-3 py-2 transition-colors ${mode === m ? "bg-gold text-ink" : "text-gold hover:bg-gold/10"}`}
                  >
                    {m === "in"
                      ? t({ si: "ඇතුළුවීම", en: "Sign in" })
                      : t({ si: "ලියාපදිංචිය", en: "Create account" })}
                  </button>
                ))}
              </div>

              <form onSubmit={submit} className="mt-6 space-y-4">
                {mode === "up" && (
                  <div>
                    <label className="eyebrow" htmlFor="full-name">
                      {t({ si: "සම්පූර්ණ නම", en: "Full name" })}
                    </label>
                    <input
                      id="full-name"
                      className={`${inputClass} mt-2`}
                      value={fullName}
                      onChange={(e) => setFullName(e.target.value)}
                      autoComplete="name"
                      required
                    />
                  </div>
                )}
                <div>
                  <label className="eyebrow" htmlFor="email">
                    {t({ si: "විද්‍යුත් තැපැල් ලිපිනය", en: "Email" })}
                  </label>
                  <input
                    id="email"
                    type="email"
                    className={`${inputClass} mt-2`}
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    autoComplete="email"
                    required
                  />
                </div>
                <div>
                  <label className="eyebrow" htmlFor="password">
                    {t({ si: "මුල පදය", en: "Password" })}
                  </label>
                  <input
                    id="password"
                    type="password"
                    className={`${inputClass} mt-2`}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    autoComplete={mode === "up" ? "new-password" : "current-password"}
                    minLength={8}
                    required
                  />
                </div>

                {error && (
                  <p className="rounded-sm border border-gold/40 bg-gold/5 px-4 py-3 text-sm text-gold">{error}</p>
                )}

                <button
                  type="submit"
                  disabled={busy}
                  className="glow w-full rounded-sm bg-gold px-6 py-3 font-semibold text-ink hover:bg-gold/90 disabled:opacity-60"
                >
                  {busy
                    ? t({ si: "කරමින්...", en: "Please wait..." })
                    : mode === "in"
                      ? t({ si: "ඇතුළු වන්න", en: "Sign in" })
                      : t({ si: "ගිණුමක් සාදන්න", en: "Create account" })}
                </button>
              </form>

              <div className="mt-6 flex items-center gap-3 text-xs text-muted-foreground">
                <span className="gold-rule flex-1" />
                {t({ si: "හෝ", en: "or" })}
                <span className="gold-rule flex-1" />
              </div>

              <button
                type="button"
                onClick={() => void withGoogle()}
                disabled={busy}
                className="mt-4 w-full rounded-sm border border-gold/50 px-6 py-3 text-sm text-gold hover:bg-gold/10 disabled:opacity-60"
              >
                {t({ si: "Google වලිනන් ඇතුළු වන්න", en: "Continue with Google" })}
              </button>
            </>
          )}

          <p className="mt-8 text-center text-sm text-muted-foreground">
            <Link to="/" className="text-gold hover:underline">
              {t({ si: "වෙබ් අඩවිය වෙත", en: "Back to the site" })}
            </Link>
          </p>
        </div>
      </div>
    </section>
  );
}