"use client";

import { useRouter } from "next/navigation";
import { ArrowRightFromSquare, PersonFill } from "@gravity-ui/icons";
import { signOut, useSession } from "@/lib/auth-client";

export default function SidebarFooter() {
  const router = useRouter();
  const { data: session } = useSession();

  const handleSignOut = async () => {
    await signOut({ fetchOptions: { credentials: "include" } });
    router.push("/login");
    router.refresh();
  };

  return (
    <div className="border-t border-border p-3">
      {/* User info */}
      {session?.user && (
        <div className="mb-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5">
          <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-accent-soft">
            <PersonFill className="size-3.5 text-accent" />
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium leading-tight text-foreground">
              {session.user.name || session.user.email}
            </p>
            <p className="truncate text-xs leading-tight text-muted capitalize">
              {session.user.role ?? "user"}
            </p>
          </div>
        </div>
      )}

      <button
        type="button"
        className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
        onClick={handleSignOut}
      >
        <ArrowRightFromSquare className="size-4 shrink-0" />
        <span>退出登录</span>
      </button>

      <p className="mt-2 px-2 text-[11px] text-muted/60">Helios EVCS</p>
    </div>
  );
}