import { Markdown } from ':components/Markdown.tsx'
import { MemberCard } from ':components/MemberCard.tsx'
import { db } from ':src/db/mod.ts'
import { fetchProfile, userToMemberCardProps } from ':src/members/mod.ts'
import { define } from '../../../utils.ts'

export default define.page(async ({ params, url }) => {
	const uuid = params.id as ReturnType<Crypto['randomUUID']>
	const user = await db.resource.user.get({ uuid }).catch(() => undefined)

	if (!user) {
		return <h3>Membre inconnu, peut être serez vous le prochain</h3>
	}

	const memberCardProps = await userToMemberCardProps(user)
	const carnet = await fetchProfile(user.login)

	return (
		<div
			style={{
				display: 'grid',
				gridTemplateColumns: 'auto 1fr',
				gap: 'var(--_gap)',
				justifyContent: 'center',
			}}
		>
			<style>{'.markdown-body { max-width: 80dvw; }'}</style>
			<div>
				{MemberCard(memberCardProps)}
				<br />
				<a
					href={`https://${
						user.login.replace('.', '-')
					}.portfolio.${url.hostname}`}
					class='cta'
					target='_blank'
				>
					Portfolio
				</a>
				<br />
				<a
					href={`/carnet/${uuid}`}
					class='cta'
				>
					Carnet de bord
				</a>
			</div>
			<Markdown
				options={{
					baseUrl:
						`https://git.cohabit.fr/${user.login}/.carnet/raw/branch/main/index.md`,
					allowMath: true,
				}}
			>
				{carnet}
			</Markdown>
		</div>
	)
})