import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { supabase } from "@/integrations/supabase/client";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export const OPEN_EDITOR_EVENT = "sinerggia:open-editor";
export const openEditorAccess = () => window.dispatchEvent(new Event(OPEN_EDITOR_EVENT));

/** Hidden access: Ctrl/Cmd + Shift + E, or triple click on the footer logo. */
export function EditorAccess() {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [mode, setMode] = useState<"login" | "setup">("login");
  const [msg, setMsg] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "e") {
        e.preventDefault();
        setOpen(true);
      }
    };
    const onOpen = () => setOpen(true);
    window.addEventListener("keydown", onKey);
    window.addEventListener(OPEN_EDITOR_EVENT, onOpen);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener(OPEN_EDITOR_EVENT, onOpen);
    };
  }, []);

  useEffect(() => {
    if (!open) return;
    setMsg(null);
    void (async () => {
      const { data: s } = await supabase.auth.getSession();
      if (s.session) {
        setOpen(false);
        void navigate({ to: "/editor" });
        return;
      }
      const { data } = await supabase.rpc("admin_exists");
      setMode(data ? "login" : "setup");
    })();
  }, [open, navigate]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setMsg(null);
    if (mode === "login") {
      const { error } = await supabase.auth.signInWithPassword({ email, password });
      setBusy(false);
      if (error) return setMsg("Usuario o contraseña incorrectos.");
      setOpen(false);
      void navigate({ to: "/editor" });
    } else {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: { emailRedirectTo: `${window.location.origin}/editor` },
      });
      setBusy(false);
      if (error) return setMsg(error.message);
      if (data.session) {
        setOpen(false);
        void navigate({ to: "/editor" });
      } else {
        setMsg("Cuenta creada. Revisa tu correo para confirmarla y después inicia sesión.");
        setMode("login");
      }
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle className="font-display text-2xl">{mode === "login" ? "Modo editor" : "Crear acceso de editor"}</DialogTitle>
          <DialogDescription>
            {mode === "login" ? "Acceso exclusivo para el equipo de Sinerggia." : "Aún no existe un editor. La primera cuenta creada será la administradora."}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={submit} className="grid gap-3">
          <Input type="email" required placeholder="Correo" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
          <Input type="password" required minLength={8} placeholder="Contraseña" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={mode === "login" ? "current-password" : "new-password"} />
          {msg && <p className="text-sm text-muted-foreground">{msg}</p>}
          <Button type="submit" disabled={busy}>{busy ? "Un momento…" : mode === "login" ? "Entrar" : "Crear acceso"}</Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}