import { metadata } from '@/app/metadata'
import { NotepadText } from 'lucide-react'
import { NavLinks } from '@/components/layout/NavLinks'
import { siBluesky, siGithub, siMatrix, siTelegram, type SimpleIcon } from 'simple-icons'
import { ExternalLink } from '@/components/ui/ExternalLink'
import { getGitCommitHash } from '@/utils/git'

type SocialLink = {
  icon: SimpleIcon
  url: string
}

const socialLinks: SocialLink[] = [
  {
    icon: siBluesky,
    url: 'https://bsky.app/profile/hangerthem.com',
  },
  {
    icon: siGithub,
    url: 'https://github.com/hangerthem',
  },
  {
    icon: siMatrix,
    url: 'https://matrix.to/#/@hangerthem:hangerthem.com',
  },
  {
    icon: siTelegram,
    url: 'https://t.me/hangerthem',
  },
]

const gitCommitHash = await getGitCommitHash()
const gitOriginUrl = process.env.GIT_ORIGIN_URL

export async function Sidebar() {
  return (
    <aside className="hidden lg:block w-64 shrink-0 px-4 bg-fg/5">
      <div className="sticky top-0 flex flex-col h-screen gap-4 py-4">
        <div>
          <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
            <NotepadText className="w-6 h-6" />
            <span>{metadata.title!.toString()}</span>
          </h2>
          <ul className="space-y-2">
            <NavLinks />
          </ul>
        </div>
        <div className="mt-auto flex gap-4 mx-auto">
          {socialLinks.map(({ icon, url }) => (
            <ExternalLink key={url} href={url}>
              <svg
                dangerouslySetInnerHTML={{ __html: icon.svg }}
                className="inline-block w-6 h-6 mr-1 fill-fg-dim hover:fill-accent transition-colors"
              />
            </ExternalLink>
          ))}
        </div>

        {gitCommitHash && gitOriginUrl && (
          <div className="text-xs text-fg-dim mt-2 mx-auto">
            <span>Commit: </span>
            <ExternalLink href={gitOriginUrl + '/commit/' + gitCommitHash}>
              {gitCommitHash.slice(0, 7)}
            </ExternalLink>
          </div>
        )}
      </div>
    </aside>
  )
}