"use client"

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

import { Plus } from "lucide-react"
import { FunctionComponent, useState } from "react"

import { useWizard } from "@shared/context/WizardContext"
import { Button, Modal } from "@shared/ui"

import { PresetCard } from "./PresetCard"
import { PresetCardSkeleton } from "./PresetCardSkeleton"
import { useDeletePreset, usePresetsQuery } from "./useCaptionPresets"
import { useVideoMetadata } from "./useVideoMetadata"
import styles from "./PresetGrid.module.scss"

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

const SKELETON_COUNT = 5

interface IPresetGridProps {
	selectedPresetId: string | null
	onSelect: (presetId: string) => void
	onEdit: (preset: CaptionPresetRead) => void
	onCreateNew: () => void
}

export const PresetGrid: FunctionComponent<IPresetGridProps> = ({
	selectedPresetId,
	onSelect,
	onEdit,
	onCreateNew,
}): JSX.Element => {
	const { primaryFileId } = useWizard()
	const { aspectRatio, isLoading: isMetadataLoading } =
		useVideoMetadata(primaryFileId)
	const { data: presets, isLoading: isPresetsLoading } = usePresetsQuery()
	const deletePreset = useDeletePreset()
	const [deleteTarget, setDeleteTarget] = useState<CaptionPresetRead | null>(
		null,
	)

	const isLoading = isPresetsLoading

	const handleConfirmDelete = () => {
		if (!deleteTarget) return
		deletePreset.mutate(
			{ params: { path: { preset_id: deleteTarget.id } } },
			{ onSettled: () => setDeleteTarget(null) },
		)
	}

	if (isLoading) {
		return (
			<div className={styles.grid} data-testid="PresetGrid">
				{Array.from({ length: SKELETON_COUNT }, (_, i) => (
					<PresetCardSkeleton key={i} aspectRatio={aspectRatio} />
				))}
			</div>
		)
	}

	return (
		<>
			<div className={styles.grid} data-testid="PresetGrid">
				{presets?.map((preset) => (
					<PresetCard
						key={preset.id}
						preset={preset}
						isSelected={selectedPresetId === preset.id}
						aspectRatio={aspectRatio}
						onSelect={() => onSelect(preset.id)}
						onEdit={() => onEdit(preset)}
						onDelete={() => setDeleteTarget(preset)}
					/>
				))}
				<div
					className={styles.createCard}
					onClick={onCreateNew}
					role="button"
					tabIndex={0}
					data-testid="PresetGrid-CreateCard"
				>
					<div className={styles.createPreview} style={{ aspectRatio }}>
						<Plus size={32} className={styles.createIcon} />
					</div>
					<span className={styles.createLabel}>Создать пресет</span>
				</div>
			</div>

			{deleteTarget && (
				<Modal
					open={!!deleteTarget}
					onOpenChange={(open) => !open && setDeleteTarget(null)}
					title="Удаление пресета"
				>
					<p>
						Удалить пресет &laquo;{deleteTarget.name}&raquo;? Это действие
						нельзя отменить.
					</p>
					<div className={styles.deleteActions}>
						<Button variant="outline" onClick={() => setDeleteTarget(null)}>
							Отмена
						</Button>
						<Button
							variant="danger"
							onClick={handleConfirmDelete}
							disabled={deletePreset.isPending}
						>
							Удалить
						</Button>
					</div>
				</Modal>
			)}
		</>
	)
}
