"use client"

import type { components } from "@shared/api/__generated__/openapi.types"
import type { JSX } from "react"

import { Pencil, Trash2 } from "lucide-react"
import { FunctionComponent } from "react"

import cs from "classnames"

import { StylePreview } from "./StylePreview"
import styles from "./PresetCard.module.scss"

type CaptionPresetRead = components["schemas"]["CaptionPresetRead"]
type CaptionStyleConfig = components["schemas"]["CaptionStyleConfig"]

interface IPresetCardProps {
	preset: CaptionPresetRead
	isSelected: boolean
	aspectRatio?: number
	onSelect: () => void
	onEdit: () => void
	onDelete: () => void
}

// Helper to extract style characteristics
function getStyleCharacteristics(config: CaptionStyleConfig | undefined): {
	fontFamily: string
	accentColor: string | null
	accentName: string | null
} {
	const style = config
	const fontFamily = style?.text?.font_family ?? "Inter"

	const highlightColor = style?.text?.highlight_color
	const textColor = style?.text?.text_color

	const colorMap: Record<string, string> = {
		"#FFD700": "Золотой",
		"#00ffff": "Неоновый",
		"#ffffff": "Белый",
		"#ff006e": "Розовый",
		"#cba6f7": "Пурпурный",
		"#f38ba8": "Розовый",
		"#a6e3a1": "Зеленый",
		"#f9e2af": "Желтый",
		"#89dceb": "Голубой",
	}

	const accentColor = highlightColor || textColor || null
	const accentName = accentColor ? (colorMap[accentColor] ?? null) : null

	return {
		fontFamily,
		accentColor,
		accentName,
	}
}

export const PresetCard: FunctionComponent<IPresetCardProps> = ({
	preset,
	isSelected,
	aspectRatio = 16 / 9,
	onSelect,
	onEdit,
	onDelete,
}): JSX.Element => {
	const { fontFamily, accentColor, accentName } = getStyleCharacteristics(
		preset.style_config,
	)

	return (
		<div
			className={cs(styles.presetCard, { [styles.selected]: isSelected })}
			onClick={onSelect}
			role="button"
			tabIndex={0}
		>
			<div className={styles.previewArea}>
				<StylePreview
					config={preset.style_config}
					size="small"
					aspectRatio={aspectRatio}
				/>
				{isSelected && (
					<div className={styles.selectedIndicator}>
						<svg
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="3"
						>
							<polyline points="20 6 9 17 4 12" />
						</svg>
					</div>
				)}
			</div>
			<div className={styles.cardFooter}>
				<div className={styles.presetName}>
					{preset.name}
					{preset.is_system && (
						<span className={styles.systemBadge}>Системный</span>
					)}
				</div>
				<div className={styles.styleChars}>
					{fontFamily}
					{accentColor && accentName && (
						<>
							<span className={styles.divider}>·</span>
							<span
								className={styles.colorDot}
								style={{ background: accentColor }}
							/>
							<span style={{ color: accentColor }}>{accentName}</span>
						</>
					)}
				</div>
			</div>
			{!preset.is_system && (
				<div className={styles.cardActions}>
					<button
						className={styles.iconButton}
						onClick={(e) => {
							e.stopPropagation()
							onEdit()
						}}
						title="Редактировать"
					>
						<Pencil size={14} />
					</button>
					<button
						className={styles.iconButton}
						onClick={(e) => {
							e.stopPropagation()
							onDelete()
						}}
						title="Удалить"
					>
						<Trash2 size={14} />
					</button>
				</div>
			)}
		</div>
	)
}
