'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">OCPP 1.6-J • v0.1.0</p>
    </div>
  )
}