import { createFileRoute } from "@tanstack/react-router";
import { Check, Copy, RefreshCw } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAuth } from "@/lib/auth-context";
import {
  useGenerateTelegramCode,
  useTelegramStatus,
} from "@/lib/queries";

export const Route = createFileRoute("/_authenticated/settings")({
  component: SettingsPage,
});

function SettingsPage() {
  const auth = useAuth();
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setSuccess(false);

    if (newPassword !== confirmPassword) {
      setError("Las contraseñas no coinciden");
      return;
    }

    setLoading(true);
    try {
      await auth.changePassword(currentPassword, newPassword);
      setSuccess(true);
      setCurrentPassword("");
      setNewPassword("");
      setConfirmPassword("");
    } catch (err: unknown) {
      const message =
        err instanceof Error
          ? err.message
          : typeof err === "object" && err && "message" in err
            ? String((err as { message: unknown }).message)
            : "Error al cambiar la contraseña";
      setError(message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="mx-auto max-w-md space-y-8">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Configuración</h1>
        <p className="text-sm text-muted-foreground">Cambiar contraseña</p>
      </div>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <label htmlFor="email" className="text-sm font-medium">
            Email
          </label>
          <Input
            id="email"
            value={auth.session?.user.email ?? ""}
            readOnly
            className="bg-muted"
            tabIndex={-1}
          />
        </div>
        <div className="space-y-2">
          <label htmlFor="current-password" className="text-sm font-medium">
            Contraseña actual
          </label>
          <Input
            id="current-password"
            type="password"
            placeholder="••••••••"
            value={currentPassword}
            onChange={(e) => setCurrentPassword(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <label htmlFor="new-password" className="text-sm font-medium">
            Nueva contraseña
          </label>
          <Input
            id="new-password"
            type="password"
            placeholder="••••••••"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <label htmlFor="confirm-password" className="text-sm font-medium">
            Confirmar nueva contraseña
          </label>
          <Input
            id="confirm-password"
            type="password"
            placeholder="••••••••"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
        {error && <p className="text-sm text-destructive">{error}</p>}
        {success && (
          <p className="text-sm text-emerald-600">
            Contraseña actualizada correctamente
          </p>
        )}
        <Button
          type="submit"
          className="w-full"
          disabled={
            loading || !currentPassword || !newPassword || !confirmPassword
          }
        >
          {loading ? "Guardando..." : "Cambiar contraseña"}
        </Button>
      </form>

      <hr className="border-border" />

      <TelegramSection />
    </div>
  );
}

function TelegramSection() {
  const { data: status, isLoading } = useTelegramStatus();
  const {
    mutate: generateCode,
    data: newCode,
    isPending: generating,
    reset: resetCode,
  } = useGenerateTelegramCode();
  const [copied, setCopied] = useState(false);

  const code = newCode?.code;

  async function handleCopy() {
    if (!code) return;
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // fallback
      const el = document.createElement("textarea");
      el.value = code;
      document.body.appendChild(el);
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }

  function handleGenerate() {
    resetCode();
    generateCode();
  }

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-semibold tracking-tight">Telegram</h2>
        <p className="text-sm text-muted-foreground">
          Conectá tu cuenta de Telegram para recibir notificaciones
        </p>
      </div>

      {isLoading ? (
        <p className="text-sm text-muted-foreground">Cargando...</p>
      ) : status?.connected ? (
        <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-800 dark:bg-emerald-950/30">
          <p className="text-sm font-medium text-emerald-700 dark:text-emerald-400">
            ✅ Conectado a Telegram
          </p>
          <p className="mt-1 text-xs text-emerald-600 dark:text-emerald-500">
            Recibirás notificaciones de BELO aquí.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          <p className="text-sm text-muted-foreground">
            {status?.botUsername ? (
              <>
                Enviá el código a{" "}
                <strong className="font-medium text-foreground">
                  @{status.botUsername}
                </strong>{" "}
                en Telegram para conectar.
              </>
            ) : (
              "El bot no está disponible."
            )}
          </p>

          {code ? (
            <div className="flex items-center gap-2">
              <code className="flex-1 rounded-md border bg-muted px-3 py-2 text-sm font-mono tracking-widest">
                {code}
              </code>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={handleCopy}
                className="shrink-0"
              >
                {copied ? (
                  <Check className="h-4 w-4 text-emerald-500" />
                ) : (
                  <Copy className="h-4 w-4" />
                )}
              </Button>
            </div>
          ) : (
            <Button
              type="button"
              onClick={handleGenerate}
              disabled={generating || !status?.botUsername}
              className="w-full"
            >
              {generating ? (
                <>
                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                  Generando...
                </>
              ) : (
                "Generar código"
              )}
            </Button>
          )}
        </div>
      )}
    </div>
  );
}
