"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { accountSessionResponseSchema } from "@/lib/contracts/accounts";
import { clubSessionResponseSchema } from "@/lib/contracts/club-accounts";
import { coachSessionResponseSchema } from "@/lib/contracts/coaches";

type AccessMode = "signin" | "signup";
type AccountType = "coach" | "club";

type CoachInvite = {
  id: string;
  email: string | null;
  token: string;
  clubId: string;
  clubName: string;
  acceptedAt: string | null;
  createdAt: string;
};

function modeButtonClass(active: boolean) {
  return active
    ? "border-[#c4d600]/70 bg-[#c4d600]/15 text-white"
    : "border-white/10 bg-black/20 text-white/65 hover:border-white/20 hover:text-white";
}

function roleButtonClass(active: boolean) {
  return active
    ? "border-[#c4d600]/70 bg-[#c4d600]/15 text-white"
    : "border-white/10 bg-black/20 text-white/65 hover:border-white/20 hover:text-white";
}

export function CoachAccessPageClient() {
  const searchParams = useSearchParams();
  const inviteToken = searchParams.get("invite");
  const [mode, setMode] = useState<AccessMode>(searchParams.get("mode") === "signup" ? "signup" : "signin");
  const [accountType, setAccountType] = useState<AccountType | null>(inviteToken ? "coach" : null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [invite, setInvite] = useState<CoachInvite | null>(null);
  const errorId = "coach-access-error";
  const busyMessage = busy ? (mode === "signin" ? "Entrando a tu cuenta." : "Creando tu cuenta.") : "";

  useEffect(() => {
    if (!inviteToken) {
      return;
    }

    const id = window.setTimeout(() => {
      void (async () => {
        const response = await fetch(`/api/coaches/invites/${inviteToken}`, { cache: "no-store" });
        const payload = await response.json().catch(() => null);
        if (!response.ok) {
          setInvite(null);
          setError("Este link ya no es valido.");
          return;
        }

        setInvite(payload.invite as CoachInvite);
        setAccountType("coach");
        setMode("signup");
      })();
    }, 0);

    return () => window.clearTimeout(id);
  }, [inviteToken]);

  async function handleSignIn(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    setBusy(true);
    setError(null);

    const response = await fetch("/api/account/session", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: String(formData.get("email") ?? ""),
        password: String(formData.get("password") ?? ""),
        ...(inviteToken ? { inviteToken } : {}),
      }),
    });

    const payload = await response.json().catch(() => null);
    if (!response.ok) {
      if (payload?.error === "DATABASE_UNAVAILABLE") {
        setError("No pudimos conectar con la base de datos. Levanta Postgres local o revisa DATABASE_URL.");
      } else if (payload?.error === "INVITE_NOT_FOUND") {
        setError("Este link ya no es valido.");
      } else if (payload?.error === "INVITE_EMAIL_MISMATCH") {
        setError("Ese email no coincide con la invitacion.");
      } else {
        setError("Email o contrasena incorrectos.");
      }
      setBusy(false);
      return;
    }

    const parsed = accountSessionResponseSchema.parse(payload);
    window.location.href = parsed.accountType === "club" ? "/clubs" : "/coaches/settings";
  }

  async function handleSignUp(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!accountType) return;

    const formData = new FormData(event.currentTarget);
    setBusy(true);
    setError(null);

    const response = await fetch(accountType === "coach" ? "/api/coaches/accounts" : "/api/clubs/accounts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(
        accountType === "coach"
          ? {
              name: String(formData.get("name") ?? ""),
              email: String(formData.get("email") ?? ""),
              password: String(formData.get("password") ?? ""),
              passwordConfirmation: String(formData.get("passwordConfirmation") ?? ""),
              ...(inviteToken ? { inviteToken } : {}),
            }
          : {
              name: String(formData.get("name") ?? ""),
              email: String(formData.get("email") ?? ""),
              password: String(formData.get("password") ?? ""),
              passwordConfirmation: String(formData.get("passwordConfirmation") ?? ""),
            }
      ),
    });

    const payload = await response.json().catch(() => null);
    if (!response.ok) {
      if (payload?.error === "DATABASE_UNAVAILABLE") {
        setError("No pudimos conectar con la base de datos. Levanta Postgres local o revisa DATABASE_URL.");
      } else if (payload?.error === "ACCOUNT_EMAIL_CONFLICT") {
        setError("Ese email ya tiene una cuenta. Haz sign in.");
      } else if (payload?.error === "CLUB_SLUG_CONFLICT") {
        setError("Ya existe un club con un nombre muy parecido.");
      } else if (payload?.error === "INVITE_NOT_FOUND") {
        setError("Este link ya no es valido.");
      } else if (payload?.error === "INVITE_EMAIL_MISMATCH") {
        setError("Ese email no coincide con la invitacion.");
      } else {
        setError("No pudimos crear la cuenta.");
      }
      setBusy(false);
      return;
    }

    if (accountType === "coach") {
      coachSessionResponseSchema.parse(payload);
      window.location.href = "/coaches/settings";
      return;
    }

    clubSessionResponseSchema.parse(payload);
    window.location.href = "/clubs";
  }

  return (
    <section className="mt-8 space-y-6 text-white">
      <div className="flex gap-3">
        <button
          type="button"
          className={`rounded-full border px-5 py-2 text-sm transition ${modeButtonClass(mode === "signin")}`}
          onClick={() => {
            setMode("signin");
            setError(null);
          }}
        >
          Sign in
        </button>
        <button
          type="button"
          className={`rounded-full border px-5 py-2 text-sm transition ${modeButtonClass(mode === "signup")}`}
          onClick={() => {
            setMode("signup");
            setError(null);
          }}
        >
          Sign up
        </button>
      </div>

      {invite ? (
        <div className="rounded-[1.5rem] border border-[#c4d600]/30 bg-[#c4d600]/10 p-5 text-sm text-white/85">
          Invitacion para coach: el club <span className="text-white">{invite.clubName}</span> quiere sumarte.
          {invite.email ? (
            <>
              {" "}
              Este link estaba reservado para <span className="text-white">{invite.email}</span>.
            </>
          ) : null}
        </div>
      ) : null}

      {mode === "signin" ? (
        <div className="max-w-xl rounded-[1.75rem] border border-white/10 bg-[#0f140f]/80 p-6">
          <p className="text-xs uppercase tracking-[0.2em] text-[#c4d600]">Sign in</p>
          <h2 className="mt-2 text-2xl font-semibold">Entra a tu cuenta</h2>
          <p className="mt-2 text-sm text-white/65">
            {invite ? "Si ya tienes cuenta, entra y te sumamos al club." : "Entra con tu email y tu contrasena."}
          </p>
          <form className="mt-5 space-y-4" onSubmit={handleSignIn} aria-describedby={error ? errorId : undefined}>
            <div role="status" aria-live="polite" className="sr-only">{busyMessage}</div>
            <label className="block text-sm text-white/70">
              Email
              <input
                name="email"
                type="email"
                required
                defaultValue={invite?.email ?? ""}
                readOnly={Boolean(invite?.email)}
                aria-invalid={error ? true : undefined}
                aria-describedby={error ? errorId : undefined}
                className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
              />
            </label>
            <label className="block text-sm text-white/70">
              Contrasena
              <input
                name="password"
                type="password"
                required
                aria-invalid={error ? true : undefined}
                aria-describedby={error ? errorId : undefined}
                className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
              />
            </label>
            <Button type="submit" className="h-11 w-full rounded-xl text-sm font-medium" disabled={busy}>
              {busy ? "Entrando..." : "Sign in"}
            </Button>
          </form>
          <p className="mt-4 text-sm text-white/60">
            No tienes cuenta?{" "}
            <button
              type="button"
              className="text-white underline underline-offset-4"
              onClick={() => {
                setMode("signup");
                setError(null);
              }}
            >
              Sign up
            </button>
          </p>
        </div>
      ) : (
        <div className="space-y-6">
          {!accountType ? (
            <div className="grid gap-3 md:grid-cols-2">
              <button
                type="button"
                className={`rounded-[1.5rem] border px-5 py-5 text-left transition ${roleButtonClass(accountType === "coach")}`}
                onClick={() => {
                  setAccountType("coach");
                  setError(null);
                }}
              >
                <p className="text-xs uppercase tracking-[0.2em] text-[#c4d600]">Coach</p>
                <h2 className="mt-2 text-2xl font-semibold">Crear cuenta como coach</h2>
                <p className="mt-2 text-sm text-white/65">Luego veras si perteneces a un club o no.</p>
              </button>
              <button
                type="button"
                className={`rounded-[1.5rem] border px-5 py-5 text-left transition ${roleButtonClass(accountType === "club")}`}
                onClick={() => {
                  setAccountType("club");
                  setError(null);
                }}
              >
                <p className="text-xs uppercase tracking-[0.2em] text-[#c4d600]">Club</p>
                <h2 className="mt-2 text-2xl font-semibold">Crear cuenta como club</h2>
                <p className="mt-2 text-sm text-white/65">Luego veras tus coaches y generaras links para invitarlos.</p>
              </button>
            </div>
          ) : (
            <div className="max-w-xl rounded-[1.75rem] border border-white/10 bg-[#0f140f]/80 p-6">
              <div className="flex items-center justify-between gap-3">
                <div>
                  <p className="text-xs uppercase tracking-[0.2em] text-[#c4d600]">Sign up</p>
                  <h2 className="mt-2 text-2xl font-semibold">{accountType === "club" ? "Cuenta de club" : "Cuenta de coach"}</h2>
                </div>
                {!invite ? (
                  <button
                    type="button"
                    className="text-sm text-white/60 underline underline-offset-4"
                    onClick={() => {
                      setAccountType(null);
                      setError(null);
                    }}
                  >
                    Cambiar
                  </button>
                ) : null}
              </div>
              <form className="mt-5 space-y-4" onSubmit={handleSignUp} aria-describedby={error ? errorId : undefined}>
                <div role="status" aria-live="polite" className="sr-only">{busyMessage}</div>
                <label className="block text-sm text-white/70">
                  {accountType === "club" ? "Nombre del club" : "Nombre del coach"}
                  <input
                    name="name"
                    required
                    aria-invalid={error ? true : undefined}
                    aria-describedby={error ? errorId : undefined}
                    className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
                  />
                </label>
                <label className="block text-sm text-white/70">
                  Email
                  <input
                    name="email"
                    type="email"
                    required
                    defaultValue={invite?.email ?? ""}
                    readOnly={Boolean(invite?.email)}
                    aria-invalid={error ? true : undefined}
                    aria-describedby={error ? errorId : undefined}
                    className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
                  />
                </label>
                <label className="block text-sm text-white/70">
                  Crea una contrasena
                  <input
                    name="password"
                    type="password"
                    required
                    aria-invalid={error ? true : undefined}
                    aria-describedby={error ? errorId : undefined}
                    className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
                  />
                </label>
                <label className="block text-sm text-white/70">
                  Repite la contrasena
                  <input
                    name="passwordConfirmation"
                    type="password"
                    required
                    aria-invalid={error ? true : undefined}
                    aria-describedby={error ? errorId : undefined}
                    className="mt-2 h-11 w-full rounded-xl border border-white/15 bg-black/30 px-3 text-sm text-white"
                  />
                </label>
                <Button type="submit" className="h-11 w-full rounded-xl text-sm font-medium" disabled={busy}>
                  {busy ? "Creando..." : "Crear cuenta"}
                </Button>
              </form>
            </div>
          )}
        </div>
      )}

      {error ? <p id={errorId} role="alert" className="rounded-xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">{error}</p> : null}
    </section>
  );
}