import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

import { api, AppConfig, getToken, setToken, USER_TOKEN } from "@/src/api";
import { queryClient } from "@/src/query-client";

type User = { id: string; username: string; name: string; role: string };
type AuthCtx = {
  user: User | null;
  loading: boolean;
  login: (u: string, p: string, remember: boolean) => Promise<void>;
  logout: () => Promise<void>;
};

const Ctx = createContext<AuthCtx>(null as unknown as AuthCtx);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getToken(USER_TOKEN)
      .then((t) => (t ? api<User>("/auth/me").then(setUser) : undefined))
      .catch(() => setToken(USER_TOKEN, null, false))
      .finally(() => setLoading(false));
  }, []);

  const login = useCallback(async (username: string, password: string, remember: boolean) => {
    const res = await api<{ token: string; user: User }>("/auth/login", { method: "POST", body: { username, password } });
    await setToken(USER_TOKEN, res.token, remember);
    setUser(res.user);
  }, []);

  const logout = useCallback(async () => {
    await setToken(USER_TOKEN, null, false);
    queryClient.clear();
    setUser(null);
  }, []);

  return <Ctx.Provider value={{ user, loading, login, logout }}>{children}</Ctx.Provider>;
}

export const useAuth = () => useContext(Ctx);

// Remote app config (logo, background...) — changes in the admin panel apply without rebuild.
export function useAppConfig() {
  return useQuery({ queryKey: ["config"], queryFn: () => api<AppConfig>("/config"), staleTime: 60_000 }).data ?? {};
}