import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'
import { mdiCheck, mdiClose, mdiDelete, mdiPencil } from '@mdi/js'
import type { VDataTable } from 'vuetify/components'
import SyTable from './SyTable.vue'
import SyIconButton from '@/components/Customs/SyIconButton/SyIconButton.vue'
import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
import { commonTableArgTypes } from '../common/storyArgTypes'

const meta = {
	title: 'Composants/Tableaux/SyTable/Édition/Ligne par ligne',
	component: SyTable,
	decorators: [
		() => ({
			template: '<div style="padding: 20px;"><story/></div>',
		}),
	],
	parameters: {
		layout: 'fullscreen',
		controls: { hideNoControlsWarning: true },
	},
	argTypes: {
		...commonTableArgTypes,
		'item.actions': {
			description: 'Slot d\'actions par ligne. Reçoit les helpers d\'édition `{ item, isEditing, edit, save, cancel, remove }`.',
			control: undefined,
			table: {
				category: 'slots',
				type: { summary: 'slot', detail: '{ item, isEditing: boolean, edit: () => void, save: () => void, cancel: () => void, remove: () => void }' },
			},
		},
		'edit.<columnKey>': {
			description: 'Personnalise l\'éditeur d\'une cellule en édition inline. Remplacer `<columnKey>` par la clé de la colonne. Par défaut un `SyTextField`.',
			control: undefined,
			table: {
				category: 'slots',
				type: { summary: 'slot', detail: '{ item, value: unknown, update: (value: unknown) => void }' },
			},
		},
		'onEdit': {
			action: 'edit',
			description: 'Émis à l\'entrée en édition inline d\'une ligne.',
			table: {
				category: 'events',
				type: { summary: '(item: Record<string, unknown>) => void' },
			},
		},
		'onSave': {
			action: 'save',
			description: 'Émis à la validation de l\'édition inline. Reçoit la ligne mise à jour et l\'originale.',
			table: {
				category: 'events',
				type: { summary: '(updated: Record<string, unknown>, original: Record<string, unknown> | null) => void' },
			},
		},
		'onCancel': {
			action: 'cancel',
			description: 'Émis à l\'annulation de l\'édition inline.',
			table: {
				category: 'events',
				type: { summary: '(item: Record<string, unknown> | null) => void' },
			},
		},
		'onDelete': {
			action: 'delete',
			description: 'Émis au clic sur l\'action de suppression d\'une ligne.',
			table: {
				category: 'events',
				type: { summary: '(item: Record<string, unknown>) => void' },
			},
		},
	},
} satisfies Meta<typeof SyTable & typeof VDataTable>

export default meta

type Story = StoryObj<typeof meta>

const headers = [
	{ title: 'Nom', key: 'lastname', editable: true },
	{ title: 'Prénom', key: 'firstname', editable: true },
	{ title: 'Email', key: 'email', editable: true },
	{ title: 'Actions', key: 'actions', sortable: false, align: 'end' as const },
]

const baseItems = [
	{ id: 1, firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
	{ id: 2, firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
	{ id: 3, firstname: 'Camille', lastname: 'Tremblay', email: 'camille.tremblay@example.com' },
]

/**
 * Édition inline + suppression ligne à ligne.
 *
 * - `editable` active le moteur ; chaque header `editable: true` devient un champ en mode édition.
 * - Le slot `#item.actions` reçoit les helpers `{ item, isEditing, edit, save, cancel, remove }`.
 * - Le composant n'altère jamais `items` : il émet `@save(updated, original)`, `@cancel`, `@delete`.
 */
export const Default: Story = {
	args: {
		suffix: 'row-editing',
		editable: true,
		selectionKey: 'id',
		hideDefaultFooter: true,
	},
	render: args => ({
		components: { SyTable, SyIconButton },
		setup() {
			const items = ref([...baseItems])

			function onSave(updated: Record<string, unknown>) {
				const index = items.value.findIndex(i => i.id === updated.id)
				if (index !== -1) {
					items.value[index] = { ...(items.value[index]), ...updated } as typeof baseItems[number]
				}
			}

			function onDelete(item: Record<string, unknown>) {
				items.value = items.value.filter(i => i.id !== item.id)
			}

			return { args, headers, items, onSave, onDelete, mdiPencil, mdiDelete, mdiCheck, mdiClose }
		},
		template: `
			<SyTable
				v-bind="args"
				:headers="headers"
				:items="items"
				@save="onSave"
				@delete="onDelete"
			>
				<template #item.actions="{ isEditing, edit, save, cancel, remove }">
					<template v-if="!isEditing">
						<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
						<SyIconButton :icon="mdiDelete" label="Supprimer" density="comfortable" color="error" @click-icon-button="remove" />
					</template>
					<template v-else>
						<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
						<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
					</template>
				</template>
			</SyTable>
		`,
	}),
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
<template>
	<SyTable
		suffix="row-editing"
		editable
		selection-key="id"
		hide-default-footer
		:headers="headers"
		:items="items"
		@save="onSave"
		@delete="onDelete"
	>
		<!-- Le slot reçoit les helpers d'édition -->
		<template #item.actions="{ isEditing, edit, save, cancel, remove }">
			<template v-if="!isEditing">
				<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
				<SyIconButton :icon="mdiDelete" label="Supprimer" density="comfortable" color="error" @click-icon-button="remove" />
			</template>
			<template v-else>
				<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
				<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
			</template>
		</template>
	</SyTable>
</template>
`,
			},
			{
				name: 'Script',
				code: `
<script setup lang="ts">
	import { ref } from 'vue'
	import { SyTable, SyIconButton } from '@cnamts/synapse'
	import { mdiCheck, mdiClose, mdiDelete, mdiPencil } from '@mdi/js'

	// Seules les colonnes \`editable: true\` deviennent éditables
	const headers = [
		{ title: 'Nom', key: 'lastname', editable: true },
		{ title: 'Prénom', key: 'firstname', editable: true },
		{ title: 'Email', key: 'email', editable: true },
		{ title: 'Actions', key: 'actions', sortable: false, align: 'end' },
	]

	const items = ref([
		{ id: 1, firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
		{ id: 2, firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
	])

	// SyTable ne mute jamais \`items\` : on persiste nous-mêmes l'item modifié
	function onSave(updated) {
		const index = items.value.findIndex(i => i.id === updated.id)
		if (index !== -1) {
			items.value[index] = { ...items.value[index], ...updated }
		}
	}

	function onDelete(item) {
		items.value = items.value.filter(i => i.id !== item.id)
	}
</script>
`,
			},
		],
	},
}

/**
 * Éditeur de cellule personnalisé via le slot `#edit.<key>`.
 * Ici la colonne « Nom » utilise un `<input>` HTML personnalisé ; les autres gardent l'éditeur par défaut.
 */
export const CustomEditor: Story = {
	args: {
		suffix: 'row-editing-custom',
		editable: true,
		selectionKey: 'id',
		hideDefaultFooter: true,
	},
	render: args => ({
		components: { SyTable, SyIconButton },
		setup() {
			const items = ref([...baseItems])

			function onSave(updated: Record<string, unknown>) {
				const index = items.value.findIndex(i => i.id === updated.id)
				if (index !== -1) {
					items.value[index] = { ...(items.value[index]), ...updated } as typeof baseItems[number]
				}
			}

			return { args, headers, items, onSave, mdiPencil, mdiDelete, mdiCheck, mdiClose }
		},
		template: `
			<SyTable
				v-bind="args"
				:headers="headers"
				:items="items"
				@save="onSave"
			>
				<template #edit.lastname="{ value, update }">
					<input
						:value="value"
						style="width:100%;padding:4px;border:1px solid #767676;border-radius:4px;background:#fff"
						@input="update($event.target.value)"
					>
				</template>
				<template #item.actions="{ isEditing, edit, save, cancel }">
					<template v-if="!isEditing">
						<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
					</template>
					<template v-else>
						<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
						<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
					</template>
				</template>
			</SyTable>
		`,
	}),
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
<template>
	<SyTable
		suffix="row-editing-custom"
		editable
		selection-key="id"
		hide-default-footer
		:headers="headers"
		:items="items"
		@save="onSave"
	>
		<!-- Éditeur personnalisé pour la colonne "Nom" (input HTML) -->
		<template #edit.lastname="{ value, update }">
			<input
				:value="value"
				style="width:100%;padding:4px;border:1px solid #767676;border-radius:4px;background:#fff"
				@input="update($event.target.value)"
			>
		</template>
		<template #item.actions="{ isEditing, edit, save, cancel }">
			<template v-if="!isEditing">
				<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
			</template>
			<template v-else>
				<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
				<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
			</template>
		</template>
	</SyTable>
</template>
`,
			},
			{
				name: 'Script',
				code: `
<script setup lang="ts">
	import { ref } from 'vue'
	import { SyTable, SyIconButton } from '@cnamts/synapse'
	import { mdiCheck, mdiClose, mdiPencil } from '@mdi/js'

	const headers = [
		{ title: 'Nom', key: 'lastname', editable: true },
		{ title: 'Prénom', key: 'firstname', editable: true },
		{ title: 'Email', key: 'email', editable: true },
		{ title: 'Actions', key: 'actions', sortable: false, align: 'end' },
	]

	const items = ref([
		{ id: 1, firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
		{ id: 2, firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
	])

	function onSave(updated) {
		const index = items.value.findIndex(i => i.id === updated.id)
		if (index !== -1) {
			items.value[index] = { ...items.value[index], ...updated }
		}
	}
</script>
`,
			},
		],
	},
}

/**
 * Éditer une colonne dont la valeur est **non primitive** (ici une `Date`), via
 * le **DatePicker du Design System**. L'éditeur texte par défaut ne gère que les
 * primitives ; pour un objet / `Date` / tableau, il faut fournir un slot
 * `#edit.<colonne>` avec un éditeur adapté (sinon aucun éditeur n'est rendu et un
 * avertissement est émis en dev). Le rendu **hors édition** passe par `#item.<colonne>`.
 *
 * Le `DatePicker` travaille avec une **chaîne formatée** (`format`) : on convertit
 * donc `Date` ↔ chaîne dans le slot pour conserver une `Date` en donnée.
 */
export const NonPrimitiveEditor: Story = {
	args: {
		suffix: 'row-editing-nonprimitive',
		editable: true,
		selectionKey: 'id',
		hideDefaultFooter: true,
	},
	render: args => ({
		components: { SyTable, SyIconButton, DatePicker },
		setup() {
			const rows = [
				{ id: 1, firstname: 'Virginie', birthdate: new Date('1985-04-12') },
				{ id: 2, firstname: 'Étienne', birthdate: new Date('1990-11-30') },
			]
			const items = ref([...rows])
			const editHeaders = [
				{ title: 'Prénom', key: 'firstname', editable: true },
				{ title: 'Naissance', key: 'birthdate', editable: true },
				{ title: 'Actions', key: 'actions', sortable: false, align: 'end' as const },
			]
			function onSave(updated: Record<string, unknown>) {
				const index = items.value.findIndex(i => i.id === updated.id)
				if (index !== -1) {
					items.value[index] = { ...items.value[index], ...updated } as typeof rows[number]
				}
			}
			// Pont Date ↔ chaîne « DD/MM/YYYY » attendue par le DatePicker du DS
			const dateToStr = (d: unknown): string =>
				d instanceof Date
					? [String(d.getDate()).padStart(2, '0'), String(d.getMonth() + 1).padStart(2, '0'), d.getFullYear()].join('/')
					: ''
			const strToDate = (s: unknown): Date | null => {
				if (typeof s !== 'string') return null
				const [dd, mm, yyyy] = s.split('/').map(Number)
				if (!dd || !mm || !yyyy) return null
				return new Date(yyyy, mm - 1, dd)
			}

			return { args, editHeaders, items, onSave, dateToStr, strToDate, mdiCheck, mdiClose, mdiPencil }
		},
		template: `
			<SyTable v-bind="args" :headers="editHeaders" :items="items" @save="onSave">
				<!-- Rendu hors édition d'une valeur objet : via #item.<colonne> -->
				<template #item.birthdate="{ item }">
					{{ item.birthdate.toLocaleDateString('fr-FR') }}
				</template>
				<!-- Édition d'une valeur non primitive : DatePicker du DS via #edit.<colonne> -->
				<template #edit.birthdate="{ value, update }">
					<DatePicker :model-value="dateToStr(value)" format="DD/MM/YYYY" density="compact" hide-details disable-error-handling @update:model-value="s => update(strToDate(s))" />
				</template>
				<template #item.actions="{ isEditing, edit, save, cancel }">
					<template v-if="!isEditing">
						<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
					</template>
					<template v-else>
						<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
						<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
					</template>
				</template>
			</SyTable>
		`,
	}),
	parameters: {
		sourceCode: [
			{
				name: 'Template',
				code: `
<template>
	<SyTable suffix="row-editing-nonprimitive" editable selection-key="id" hide-default-footer :headers="headers" :items="items" @save="onSave">
		<!-- Rendu hors édition d'une valeur non primitive -->
		<template #item.birthdate="{ item }">
			{{ item.birthdate.toLocaleDateString('fr-FR') }}
		</template>
		<!-- Éditeur adapté : DatePicker du DS (l'éditeur texte par défaut ne gère pas les objets/Date) -->
		<template #edit.birthdate="{ value, update }">
			<DatePicker :model-value="dateToStr(value)" format="DD/MM/YYYY" density="compact" hide-details disable-error-handling @update:model-value="s => update(strToDate(s))" />
		</template>
		<template #item.actions="{ isEditing, edit, save, cancel }">
			<template v-if="!isEditing">
				<SyIconButton :icon="mdiPencil" label="Éditer" density="comfortable" @click-icon-button="edit" />
			</template>
			<template v-else>
				<SyIconButton :icon="mdiCheck" label="Valider" density="comfortable" color="rgba(var(--v-theme-onSuccessVariant), 0.6)" @click-icon-button="save" />
				<SyIconButton :icon="mdiClose" label="Annuler" density="comfortable" @click-icon-button="cancel" />
			</template>
		</template>
	</SyTable>
</template>
`,
			},
			{
				name: 'Script',
				code: `
<script setup lang="ts">
	import { ref } from 'vue'
	import { SyTable, SyIconButton, DatePicker } from '@cnamts/synapse'
	import { mdiCheck, mdiClose, mdiPencil } from '@mdi/js'

	const headers = [
		{ title: 'Prénom', key: 'firstname', editable: true },
		{ title: 'Naissance', key: 'birthdate', editable: true },
		{ title: 'Actions', key: 'actions', sortable: false, align: 'end' },
	]

	const items = ref([
		{ id: 1, firstname: 'Virginie', birthdate: new Date('1985-04-12') },
		{ id: 2, firstname: 'Étienne', birthdate: new Date('1990-11-30') },
	])

	// La valeur est une Date (non primitive) : DatePicker du DS via le slot #edit,
	// avec conversion Date <-> chaîne « DD/MM/YYYY »
	const dateToStr = (d) => d instanceof Date
		? [String(d.getDate()).padStart(2, '0'), String(d.getMonth() + 1).padStart(2, '0'), d.getFullYear()].join('/')
		: ''
	const strToDate = (s) => {
		if (typeof s !== 'string') return null
		const [dd, mm, yyyy] = s.split('/').map(Number)
		if (!dd || !mm || !yyyy) return null
		return new Date(yyyy, mm - 1, dd)
	}

	function onSave(updated) {
		const index = items.value.findIndex(i => i.id === updated.id)
		if (index !== -1) {
			items.value[index] = { ...items.value[index], ...updated }
		}
	}
</script>
`,
			},
		],
	},
}