import type { CSSProperties } from 'react'
import { projectCode, type ProjectCodeSource } from '~/domain/project-code'

export type PlateSize = 'lead' | 'mark' | 'card' | 'row'

export type PlateProps = {
	project: ProjectCodeSource
	color: string
	number: number | null
	size?: PlateSize
	showNumber?: boolean
	className?: string
}

export const projectSurface = 'plate-fill'

export function projectStyle(color: string): CSSProperties {
	return { '--plate': color } as CSSProperties
}

export function entryNumber(number: number): string {
	return String(number).padStart(4, '0')
}

export function entryMark(project: ProjectCodeSource, number: number | null): string {
	return number === null ? projectCode(project) : `${projectCode(project)}-${entryNumber(number)}`
}

const shells: Record<PlateSize, string> = {
	lead: 'flex min-h-44 flex-col justify-between gap-8 px-5 py-4',
	mark: 'flex flex-col justify-between gap-3 px-3 py-2.5',
	card: 'flex flex-col justify-between gap-1 px-2 py-1.5',
	row: 'inline-flex items-baseline gap-2.5 px-2 py-1',
}

const codeSizes: Record<PlateSize, string> = {
	lead: 'text-small tracking-plate',
	mark: 'text-micro tracking-plate',
	card: 'text-micro tracking-mark',
	row: 'text-micro tracking-label',
}

const numberSizes: Record<PlateSize, string> = {
	lead: 'text-plate leading-none',
	mark: 'text-title leading-none',
	card: 'text-small leading-none',
	row: 'text-micro',
}

export function Plate({ project, color, number, size = 'row', showNumber = true, className }: PlateProps) {
	return (
		<span
			style={projectStyle(color)}
			className={`${projectSurface} ${shells[size]} font-mono font-semibold text-paper ${className ?? ''}`}
		>
			<span className={`block uppercase ${codeSizes[size]}`}>{projectCode(project)}</span>
			{showNumber && number !== null ? (
				<span className={`block tabular-nums ${numberSizes[size]}`}>{entryNumber(number)}</span>
			) : null}
		</span>
	)
}