Data grid

<script setup>
import { computed, ref } from 'vue';
import DomDataGrid from '../DomDataGrid.vue';

const filters = ref({
	status: { type: 'select', values: ['active', 'trial'] },
	renewalDate: { type: 'date', start: '2026-07-01', end: '2026-09-30' },
});
const sort = ref({ key: 'arr', direction: 'desc' });
const search = ref('');
const selectedKeys = ref(['acc-1005', 'acc-1014']);
const lastQuery = ref(null);

const columns = [
	{ key: 'account', label: 'Account', type: 'text', width: '15rem' },
	{
		key: 'status',
		label: 'Status',
		type: 'select',
		width: '8.5rem',
		options: [
			{ label: 'Active', value: 'active', tone: 'green' },
			{ label: 'Trial', value: 'trial', tone: 'blue' },
			{ label: 'Paused', value: 'paused', tone: 'amber' },
			{ label: 'Risk', value: 'risk', tone: 'red' },
		],
	},
	{
		key: 'plan',
		label: 'Plan',
		type: 'select',
		width: '8.5rem',
		options: [
			{ label: 'Starter', value: 'starter', tone: 'neutral' },
			{ label: 'Growth', value: 'growth', tone: 'blue' },
			{ label: 'Scale', value: 'scale', tone: 'violet' },
			{ label: 'Enterprise', value: 'enterprise', tone: 'green' },
		],
	},
	{ key: 'owner', label: 'Owner', type: 'text', width: '11rem' },
	{ key: 'seats', label: 'Seats', type: 'number', width: '6.5rem' },
	{ key: 'arr', label: 'ARR', type: 'currency', currency: 'GBP', width: '8.5rem' },
	{
		key: 'health',
		label: 'Health',
		type: 'select',
		width: '8.25rem',
		options: [
			{ label: 'Strong', value: 'strong', tone: 'green' },
			{ label: 'Watch', value: 'watch', tone: 'amber' },
			{ label: 'Weak', value: 'weak', tone: 'red' },
		],
	},
	{ key: 'region', label: 'Region', type: 'select', width: '8rem' },
	{ key: 'renewalDate', label: 'Renewal', type: 'date', width: '9.5rem' },
	{ key: 'activeUsers', label: 'Active users', type: 'number', width: '8rem' },
	{ key: 'verified', label: 'Verified', type: 'boolean', width: '7rem' },
	{ key: 'updatedAt', label: 'Updated', type: 'date', width: '9.5rem' },
];

const rows = [
	{ id: 'acc-1001', account: 'Northstar Analytics', status: 'active', plan: 'enterprise', owner: 'Amelia Hart', seats: 142, arr: 184000, health: 'strong', region: 'EMEA', renewalDate: '2026-08-19', activeUsers: 118, verified: true, updatedAt: '2026-06-10' },
	{ id: 'acc-1002', account: 'Atlas Finance', status: 'active', plan: 'scale', owner: 'Ravi Patel', seats: 84, arr: 96500, health: 'watch', region: 'NA', renewalDate: '2026-07-28', activeUsers: 62, verified: true, updatedAt: '2026-06-08' },
	{ id: 'acc-1003', account: 'Brightwell Studio', status: 'trial', plan: 'growth', owner: 'Mina Okafor', seats: 18, arr: 21400, health: 'strong', region: 'EMEA', renewalDate: '2026-09-14', activeUsers: 16, verified: false, updatedAt: '2026-06-09' },
	{ id: 'acc-1004', account: 'Cinder Labs', status: 'risk', plan: 'scale', owner: 'Theo Grant', seats: 67, arr: 81200, health: 'weak', region: 'APAC', renewalDate: '2026-10-03', activeUsers: 29, verified: true, updatedAt: '2026-06-05' },
	{ id: 'acc-1005', account: 'Orchid Health', status: 'active', plan: 'enterprise', owner: 'Laura Chen', seats: 232, arr: 268000, health: 'strong', region: 'NA', renewalDate: '2026-09-22', activeUsers: 211, verified: true, updatedAt: '2026-06-11' },
	{ id: 'acc-1006', account: 'Juniper Works', status: 'paused', plan: 'growth', owner: 'Sam Rivera', seats: 31, arr: 38200, health: 'watch', region: 'LATAM', renewalDate: '2026-11-17', activeUsers: 12, verified: false, updatedAt: '2026-05-30' },
	{ id: 'acc-1007', account: 'Signal Harbor', status: 'active', plan: 'scale', owner: 'Nora Ellis', seats: 96, arr: 112900, health: 'strong', region: 'EMEA', renewalDate: '2026-08-02', activeUsers: 88, verified: true, updatedAt: '2026-06-07' },
	{ id: 'acc-1008', account: 'Pioneer Retail', status: 'trial', plan: 'starter', owner: 'Miles Brooks', seats: 9, arr: 7800, health: 'watch', region: 'NA', renewalDate: '2026-07-12', activeUsers: 6, verified: false, updatedAt: '2026-06-03' },
	{ id: 'acc-1009', account: 'Forge Robotics', status: 'active', plan: 'enterprise', owner: 'Priya Singh', seats: 188, arr: 224500, health: 'strong', region: 'APAC', renewalDate: '2026-09-04', activeUsers: 169, verified: true, updatedAt: '2026-06-10' },
	{ id: 'acc-1010', account: 'Lakehouse Legal', status: 'risk', plan: 'growth', owner: 'Jon Bell', seats: 27, arr: 29600, health: 'weak', region: 'EMEA', renewalDate: '2026-06-26', activeUsers: 11, verified: true, updatedAt: '2026-05-28' },
	{ id: 'acc-1011', account: 'Verde Energy', status: 'active', plan: 'scale', owner: 'Iris Morgan', seats: 121, arr: 136800, health: 'watch', region: 'NA', renewalDate: '2026-10-21', activeUsers: 94, verified: true, updatedAt: '2026-06-01' },
	{ id: 'acc-1012', account: 'Kite Education', status: 'trial', plan: 'starter', owner: 'Owen Price', seats: 14, arr: 11800, health: 'strong', region: 'EMEA', renewalDate: '2026-08-31', activeUsers: 13, verified: false, updatedAt: '2026-06-06' },
	{ id: 'acc-1013', account: 'Evergreen Supply', status: 'paused', plan: 'growth', owner: 'Fatima Noor', seats: 44, arr: 48700, health: 'watch', region: 'APAC', renewalDate: '2026-12-05', activeUsers: 18, verified: true, updatedAt: '2026-05-24' },
	{ id: 'acc-1014', account: 'Mercury Media', status: 'active', plan: 'enterprise', owner: 'Caleb Stone', seats: 176, arr: 201300, health: 'strong', region: 'NA', renewalDate: '2026-07-09', activeUsers: 151, verified: true, updatedAt: '2026-06-09' },
	{ id: 'acc-1015', account: 'Sable Security', status: 'active', plan: 'scale', owner: 'Elena Rossi', seats: 72, arr: 88900, health: 'strong', region: 'EMEA', renewalDate: '2026-09-29', activeUsers: 70, verified: true, updatedAt: '2026-06-02' },
	{ id: 'acc-1016', account: 'Copper Bank', status: 'risk', plan: 'enterprise', owner: 'Daniel Kim', seats: 205, arr: 241900, health: 'weak', region: 'NA', renewalDate: '2026-08-07', activeUsers: 132, verified: true, updatedAt: '2026-05-31' },
	{ id: 'acc-1017', account: 'Bluejay Travel', status: 'trial', plan: 'growth', owner: 'Tara Lewis', seats: 22, arr: 24800, health: 'watch', region: 'LATAM', renewalDate: '2026-07-19', activeUsers: 17, verified: false, updatedAt: '2026-06-04' },
	{ id: 'acc-1018', account: 'Mosaic Civic', status: 'active', plan: 'starter', owner: 'George White', seats: 16, arr: 15800, health: 'strong', region: 'EMEA', renewalDate: '2026-09-11', activeUsers: 15, verified: true, updatedAt: '2026-06-10' },
	{ id: 'acc-1019', account: 'Harbor FreightOps', status: 'active', plan: 'scale', owner: 'Nadia Cole', seats: 109, arr: 121400, health: 'watch', region: 'APAC', renewalDate: '2026-10-13', activeUsers: 83, verified: true, updatedAt: '2026-06-07' },
	{ id: 'acc-1020', account: 'Quartz Design Co', status: 'paused', plan: 'starter', owner: 'Hugo Martin', seats: 11, arr: 9200, health: 'weak', region: 'EMEA', renewalDate: '2026-11-02', activeUsers: 4, verified: false, updatedAt: '2026-05-21' },
	{ id: 'acc-1021', account: 'Anchor Cloud', status: 'active', plan: 'enterprise', owner: 'Sofia Jensen', seats: 264, arr: 310000, health: 'strong', region: 'NA', renewalDate: '2026-07-31', activeUsers: 240, verified: true, updatedAt: '2026-06-11' },
	{ id: 'acc-1022', account: 'Violet Manufacturing', status: 'trial', plan: 'scale', owner: 'Kai Foster', seats: 58, arr: 65400, health: 'watch', region: 'APAC', renewalDate: '2026-08-24', activeUsers: 43, verified: false, updatedAt: '2026-06-01' },
	{ id: 'acc-1023', account: 'Summit Grocery', status: 'active', plan: 'growth', owner: 'Maeve Walsh', seats: 36, arr: 41800, health: 'strong', region: 'NA', renewalDate: '2026-09-16', activeUsers: 34, verified: true, updatedAt: '2026-06-06' },
	{ id: 'acc-1024', account: 'Redwood Insurance', status: 'risk', plan: 'scale', owner: 'Imani Reed', seats: 91, arr: 104200, health: 'weak', region: 'EMEA', renewalDate: '2026-07-07', activeUsers: 49, verified: true, updatedAt: '2026-05-29' },
];

const queryPreview = computed(() => JSON.stringify(lastQuery.value || {
	search: search.value,
	filters: filters.value,
	sort: sort.value,
}, null, 2));
</script>

<template>
	<div class="w-full min-w-0">
		<DomDataGrid
			v-model:filters="filters"
			v-model:sort="sort"
			v-model:search="search"
			v-model:selected-keys="selectedKeys"
			:rows="rows"
			:columns="columns"
			title="Customer accounts"
			resource-label="accounts"
			height="35rem"
			@query-change="lastQuery = $event"
		>
			<template #toolbar-actions>
				<div class="hidden items-center gap-2 rounded-md border border-border bg-canvas px-2.5 py-1.5 text-xs font-medium text-muted-fg lg:flex">
					<span class="size-2 rounded-full bg-emerald-500"></span>
					SQL-ready query state
				</div>
			</template>
		</DomDataGrid>

		<div class="mt-4 grid gap-3 rounded-lg border border-border bg-canvas p-4 text-sm lg:grid-cols-[minmax(0,1fr)_20rem]">
			<div>
				<p class="font-semibold text-canvas-fg">Resource API shape</p>
				<p class="mt-1 leading-6 text-muted-fg">
					The grid can filter locally today, but the same <code class="text-canvas-fg">query-change</code> payload can be sent to a resource endpoint for SQL-backed search, where, order, and pagination later.
				</p>
			</div>
			<pre class="max-h-48 overflow-auto rounded-md border border-border bg-secondary/40 p-3 text-xs leading-5 text-canvas-fg">{{ queryPreview }}</pre>
		</div>
	</div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { DomDataGrid } from '../../../lib/vue';

const rows = createRows(10000);
const renderWindow = ref({
	startIndex: 0,
	endIndex: 0,
	renderedRows: 0,
	totalRows: rows.length,
});

const columns = [
	{ key: 'id', label: 'Event', type: 'number', width: '7rem' },
	{ key: 'account', label: 'Account', type: 'text', width: '15rem' },
	{
		key: 'service',
		label: 'Service',
		type: 'select',
		width: '11rem',
		options: ['Billing API', 'Checkout', 'Identity', 'Mail', 'Storage', 'Analytics'],
	},
	{
		key: 'status',
		label: 'Status',
		type: 'select',
		width: '9rem',
		options: [
			{ label: 'Healthy', value: 'healthy', tone: 'green' },
			{ label: 'Delayed', value: 'delayed', tone: 'amber' },
			{ label: 'Failed', value: 'failed', tone: 'red' },
			{ label: 'Queued', value: 'queued', tone: 'blue' },
		],
	},
	{
		key: 'region',
		label: 'Region',
		type: 'select',
		width: '8rem',
		options: ['UK', 'EU', 'US', 'CA', 'AU'],
	},
	{ key: 'requests', label: 'Requests', type: 'number', width: '9rem' },
	{ key: 'spend', label: 'Spend', type: 'currency', width: '9rem' },
	{ key: 'updatedAt', label: 'Updated', type: 'date', width: '9.5rem' },
];

const renderedRange = computed(() => {
	const window = renderWindow.value;
	if (!window.totalRows) return '0';
	return `${(window.startIndex + 1).toLocaleString()}-${window.endIndex.toLocaleString()}`;
});

function createRows(count) {
	const accounts = ['Atlas Works', 'Northstar Labs', 'Pioneer Health', 'Evergreen Finance', 'Lunar Retail', 'Cobalt Systems'];
	const services = ['Billing API', 'Checkout', 'Identity', 'Mail', 'Storage', 'Analytics'];
	const statuses = ['healthy', 'delayed', 'queued', 'healthy', 'healthy', 'failed'];
	const regions = ['UK', 'EU', 'US', 'CA', 'AU'];

	return Array.from({ length: count }, (_, index) => {
		const accountIndex = index % accounts.length;
		const serviceIndex = (index * 3) % services.length;
		const day = (index % 28) + 1;
		const month = ((index % 6) + 1).toString().padStart(2, '0');

		return {
			id: index + 1,
			account: `${accounts[accountIndex]} ${Math.floor(index / accounts.length) + 1}`,
			service: services[serviceIndex],
			status: statuses[index % statuses.length],
			region: regions[index % regions.length],
			requests: 2500 + ((index * 97) % 92000),
			spend: 150 + ((index * 37) % 18000),
			updatedAt: `2026-${month}-${day.toString().padStart(2, '0')}`,
		};
	});
}

function updateRenderWindow(value) {
	renderWindow.value = value;
}
</script>

<template>
	<DomDataGrid
		virtual-rows
		:virtual-row-buffer="50"
		:rows="rows"
		:columns="columns"
		:selectable="false"
		title="Usage events"
		resource-label="events"
		height="34rem"
		@render-window-change="updateRenderWindow"
	>
		<template #toolbar-actions>
			<div class="hidden flex-wrap items-center gap-2 text-xs font-medium lg:flex">
				<span class="rounded-md border border-border bg-canvas px-2.5 py-1.5 text-muted-fg">
					{{ rows.length.toLocaleString() }} in memory
				</span>
				<span data-virtual-rendered class="rounded-md border border-border bg-canvas px-2.5 py-1.5 text-muted-fg">
					{{ renderWindow.renderedRows }} mounted
				</span>
				<span data-virtual-range class="rounded-md border border-border bg-canvas px-2.5 py-1.5 text-muted-fg">
					{{ renderedRange }}
				</span>
			</div>
		</template>
	</DomDataGrid>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { DomDataGrid, DomNativeSelect } from '../../../lib/vue';

const selectedSort = ref('manual');
const sort = ref(null);
const search = ref('');

const sortPresets = [
	{
		label: 'Manual header clicks',
		value: 'manual',
		sort: null,
	},
	{
		label: 'Highest volume, easiest difficulty',
		value: 'volume-easy',
		sort: {
			key: 'searchVolume',
			direction: 'desc',
			rules: [
				{ key: 'searchVolume', direction: 'desc' },
				{ key: 'difficulty', direction: 'asc' },
			],
		},
	},
	{
		label: 'Easiest difficulty, then volume',
		value: 'easy-volume',
		sort: {
			key: 'difficulty',
			direction: 'asc',
			rules: [
				{ key: 'difficulty', direction: 'asc' },
				{ key: 'searchVolume', direction: 'desc' },
			],
		},
	},
	{
		label: 'Best opportunity score',
		value: 'opportunity',
		sort: {
			key: 'opportunity',
			direction: 'desc',
			rules: [
				{ key: 'opportunity', direction: 'desc' },
				{ key: 'searchVolume', direction: 'desc' },
				{ key: 'difficulty', direction: 'asc' },
			],
		},
	},
];

const sortOptions = sortPresets.map((preset) => ({
	label: preset.label,
	value: preset.value,
}));

const columns = [
	{ key: 'keyword', label: 'Keyword', type: 'text', width: '17rem' },
	{
		key: 'intent',
		label: 'Intent',
		type: 'select',
		width: '9rem',
		options: [
			{ label: 'Commercial', value: 'commercial', tone: 'green' },
			{ label: 'Comparison', value: 'comparison', tone: 'blue' },
			{ label: 'Informational', value: 'informational', tone: 'neutral' },
			{ label: 'Transactional', value: 'transactional', tone: 'violet' },
		],
	},
	{ key: 'searchVolume', label: 'Volume', type: 'number', width: '8rem' },
	{ key: 'difficulty', label: 'Difficulty', type: 'number', width: '8rem' },
	{ key: 'opportunity', label: 'Opportunity', type: 'number', width: '9rem' },
	{ key: 'cpc', label: 'CPC', type: 'currency', currency: 'USD', locale: 'en-US', width: '7.5rem' },
];

const rows = [
	{ id: 'kw-001', keyword: 'vue data grid', intent: 'commercial', searchVolume: 5400, difficulty: 28, cpc: 5.4 },
	{ id: 'kw-002', keyword: 'javascript spreadsheet component', intent: 'comparison', searchVolume: 5400, difficulty: 43, cpc: 7.1 },
	{ id: 'kw-003', keyword: 'editable table vue', intent: 'commercial', searchVolume: 2900, difficulty: 21, cpc: 4.8 },
	{ id: 'kw-004', keyword: 'tailwind data table', intent: 'informational', searchVolume: 8100, difficulty: 61, cpc: 3.9 },
	{ id: 'kw-005', keyword: 'server side data grid', intent: 'commercial', searchVolume: 3600, difficulty: 35, cpc: 8.2 },
	{ id: 'kw-006', keyword: 'open source data grid vue', intent: 'comparison', searchVolume: 4400, difficulty: 24, cpc: 4.6 },
	{ id: 'kw-007', keyword: 'keyword clustering tool', intent: 'transactional', searchVolume: 6600, difficulty: 48, cpc: 6.7 },
	{ id: 'kw-008', keyword: 'saas dashboard table', intent: 'informational', searchVolume: 1900, difficulty: 17, cpc: 3.2 },
	{ id: 'kw-009', keyword: 'best vue table library', intent: 'comparison', searchVolume: 5400, difficulty: 31, cpc: 5.9 },
	{ id: 'kw-010', keyword: 'crm data grid', intent: 'commercial', searchVolume: 2400, difficulty: 19, cpc: 9.4 },
].map((row) => ({
	...row,
	opportunity: Math.round(row.searchVolume * ((101 - row.difficulty) / 100)),
}));

const queryPreview = computed(() => JSON.stringify({
	search: search.value,
	sort: sort.value,
}, null, 2));

watch(selectedSort, (value) => {
	const preset = sortPresets.find((item) => item.value === value) || sortPresets[0];
	sort.value = preset.sort ? cloneSort(preset.sort) : { key: '', direction: '', rules: [] };
}, { immediate: true });

function cloneSort(value) {
	return {
		...value,
		rules: value.rules.map((rule) => ({ ...rule })),
	};
}
</script>

<template>
	<div class="w-full min-w-0 space-y-4">
		<div class="flex flex-col gap-3 rounded-lg border border-border bg-canvas p-4 lg:flex-row lg:items-end lg:justify-between">
			<div class="min-w-0">
				<p class="text-sm font-semibold text-canvas-fg">Keyword opportunity sort</p>
				<p class="mt-1 max-w-2xl text-sm leading-6 text-muted-fg">
					The selected preset sends ordered sort rules, so APIs can translate them to stable ORDER BY clauses.
				</p>
			</div>

			<DomNativeSelect
				v-model="selectedSort"
				class="w-full lg:w-80"
				label="Sort preset"
				:options="sortOptions"
				placeholder=""
			/>
		</div>

		<DomDataGrid
			v-model:sort="sort"
			v-model:search="search"
			:rows="rows"
			:columns="columns"
			:selectable="false"
			title="Keyword research"
			resource-label="keywords"
			height="27rem"
			multi-sort
		>
			<template #toolbar-actions>
				<span class="hidden rounded-md border border-border bg-canvas px-2.5 py-1.5 text-xs font-medium text-muted-fg lg:inline-flex">
					Multi-rule sort active
				</span>
			</template>
		</DomDataGrid>

		<pre class="max-h-64 overflow-auto rounded-lg border border-border bg-secondary/40 p-4 text-xs leading-5 text-canvas-fg">{{ queryPreview }}</pre>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { DomButton, DomDataGrid, DomPagination } from '@getdom/studio/vue';

const pageSize = 8;
const mode = ref('page');
const page = ref(1);
const rows = ref([]);
const loading = ref(false);
const selectedKeys = ref([]);
const search = ref('');
const filters = ref({});
const sort = ref({ key: 'updatedAt', direction: 'desc' });
const currentQuery = ref(queryFromState());
const pageInfo = ref(emptyPageInfo('page'));
const lastRequest = ref(null);
const lastResponse = ref(null);

const columns = [
	{ key: 'name', label: 'Customer', type: 'text', width: '15rem' },
	{
		key: 'status',
		label: 'Status',
		type: 'select',
		width: '8.25rem',
		options: [
			{ label: 'Active', value: 'active', tone: 'green' },
			{ label: 'Trial', value: 'trial', tone: 'blue' },
			{ label: 'Paused', value: 'paused', tone: 'amber' },
			{ label: 'Risk', value: 'risk', tone: 'red' },
		],
	},
	{ key: 'owner', label: 'Owner', type: 'text', width: '11rem' },
	{ key: 'region', label: 'Region', type: 'select', width: '7.5rem' },
	{ key: 'seats', label: 'Seats', type: 'number', width: '6.5rem' },
	{ key: 'arr', label: 'ARR', type: 'currency', currency: 'GBP', width: '8.5rem' },
	{ key: 'updatedAt', label: 'Updated', type: 'date', width: '9rem' },
];

const api = createCustomerResourceApi();
const requestPreview = computed(() => JSON.stringify(lastRequest.value || buildRequest(), null, 2));
const responsePreview = computed(() => JSON.stringify(lastResponse.value || {
	data: [],
	pageInfo: pageInfo.value,
	meta: { total: 0, returned: 0 },
}, null, 2));
const gridHeight = computed(() => mode.value === 'cursor' ? '18rem' : '30rem');

onMounted(() => {
	loadResource();
});

function queryFromState() {
	return {
		search: search.value.trim(),
		filters: filters.value,
		sort: sort.value?.direction ? sort.value : null,
	};
}

function buildRequest(next = {}) {
	const strategy = next.mode || mode.value;
	const query = next.query || currentQuery.value;

	return {
		resource: 'customers',
		query,
		pagination: strategy === 'cursor'
			? {
				strategy: 'cursor',
				cursor: next.cursor || '',
				limit: pageSize,
			}
			: {
				strategy: 'page',
				page: next.page || page.value,
				pageSize,
			},
	};
}

async function loadResource(options = {}) {
	const append = Boolean(options.append);
	const nextPage = options.page || page.value;
	const nextMode = options.mode || mode.value;
	const request = buildRequest({
		mode: nextMode,
		page: nextPage,
		cursor: append ? pageInfo.value.nextCursor : '',
	});

	loading.value = true;
	lastRequest.value = request;

	const response = await api.list(request);

	if (nextMode === 'cursor' && append) {
		rows.value = [...rows.value, ...response.data];
	} else {
		rows.value = response.data;
	}

	page.value = response.pageInfo.page || nextPage;
	pageInfo.value = response.pageInfo;
	lastResponse.value = response;
	loading.value = false;
}

function loadNextCursorPage() {
	if (mode.value !== 'cursor' || loading.value || !pageInfo.value.hasNextPage) return;
	loadResource({ append: true });
}

function handleQueryChange(query) {
	currentQuery.value = query;
	page.value = 1;
	pageInfo.value = emptyPageInfo(mode.value);
	loadResource({ page: 1 });
}

function setMode(nextMode) {
	if (mode.value === nextMode) return;
	mode.value = nextMode;
	page.value = 1;
	rows.value = [];
	pageInfo.value = emptyPageInfo(nextMode);
	loadResource({ mode: nextMode, page: 1 });
}

function emptyPageInfo(strategy) {
	return {
		strategy,
		page: 1,
		pageSize,
		pageCount: 1,
		total: 0,
		hasNextPage: false,
		hasPreviousPage: false,
		nextCursor: '',
	};
}

function createCustomerResourceApi() {
	const records = createCustomers();

	return {
		async list(request) {
			await wait(420);

			const queried = applyResourceQuery(records, request.query);
			const total = queried.length;
			const pagination = request.pagination || {};

			if (pagination.strategy === 'cursor') {
				const limit = positiveInteger(pagination.limit, pageSize);
				const start = cursorToIndex(pagination.cursor);
				const data = queried.slice(start, start + limit);
				const nextIndex = start + data.length;
				const hasNextPage = nextIndex < total;

				return {
					data,
					pageInfo: {
						strategy: 'cursor',
						limit,
						total,
						returned: data.length,
						hasNextPage,
						hasPreviousPage: start > 0,
						nextCursor: hasNextPage ? indexToCursor(nextIndex) : '',
					},
					meta: responseMeta(request, total, data.length),
				};
			}

			const pageSizeValue = positiveInteger(pagination.pageSize, pageSize);
			const pageCount = Math.max(1, Math.ceil(total / pageSizeValue));
			const requestedPage = positiveInteger(pagination.page, 1);
			const safePage = Math.min(pageCount, requestedPage);
			const start = (safePage - 1) * pageSizeValue;
			const data = queried.slice(start, start + pageSizeValue);

			return {
				data,
				pageInfo: {
					strategy: 'page',
					page: safePage,
					pageSize: pageSizeValue,
					pageCount,
					total,
					returned: data.length,
					hasNextPage: safePage < pageCount,
					hasPreviousPage: safePage > 1,
					nextCursor: safePage < pageCount ? indexToCursor(start + data.length) : '',
				},
				meta: responseMeta(request, total, data.length),
			};
		},
	};
}

function applyResourceQuery(records, query) {
	const normalized = query || {};
	const activeFilters = normalized.filters || {};
	const needle = String(normalized.search || '').trim().toLowerCase();
	const filtered = records.filter((record) => {
		if (needle && ![record.name, record.owner, record.region, record.status].some((value) => String(value).toLowerCase().includes(needle))) {
			return false;
		}

		return Object.entries(activeFilters).every(([key, filter]) => recordMatchesFilter(record, key, filter));
	});

	const sortRules = normalizedSortRules(normalized.sort);
	if (!sortRules.length) return filtered;

	return [...filtered].sort((a, b) => {
		for (const rule of sortRules) {
			const direction = rule.direction === 'desc' ? -1 : 1;
			const left = sortableValue(a[rule.field || rule.key]);
			const right = sortableValue(b[rule.field || rule.key]);
			if (left > right) return direction;
			if (left < right) return direction * -1;
		}
		return 0;
	});
}

function normalizedSortRules(sort) {
	if (!sort) return [];
	if (Array.isArray(sort.rules)) {
		return sort.rules.filter((rule) => rule?.key && (rule.direction === 'asc' || rule.direction === 'desc'));
	}
	if (sort.key && (sort.direction === 'asc' || sort.direction === 'desc')) return [sort];
	return [];
}

function recordMatchesFilter(record, key, filter) {
	if (!filter) return true;
	const value = record[key];

	if (filter.type === 'select') {
		const values = Array.isArray(filter.values) ? filter.values.map(String) : [];
		return !values.length || values.includes(String(value));
	}

	if (filter.type === 'number' || filter.type === 'currency') {
		const number = Number(value);
		if (filter.min !== '' && filter.min !== null && filter.min !== undefined && number < Number(filter.min)) return false;
		if (filter.max !== '' && filter.max !== null && filter.max !== undefined && number > Number(filter.max)) return false;
		return true;
	}

	if (filter.type === 'date') {
		const date = String(value).slice(0, 10);
		if (filter.start && date < filter.start) return false;
		if (filter.end && date > filter.end) return false;
		return true;
	}

	const haystack = String(value ?? '').toLowerCase();
	const text = String(filter.value ?? '').trim().toLowerCase();
	if (!text) return true;
	if (filter.operator === 'equals') return haystack === text;
	if (filter.operator === 'starts') return haystack.startsWith(text);
	return haystack.includes(text);
}

function sortableValue(value) {
	if (typeof value === 'number') return value;
	return String(value ?? '').toLowerCase();
}

function responseMeta(request, total, returned) {
	return {
		total,
		returned,
		requestedAt: new Date().toISOString(),
		resource: request.resource,
		query: request.query,
	};
}

function positiveInteger(value, fallback) {
	const number = Math.floor(Number(value));
	return Number.isFinite(number) && number > 0 ? number : fallback;
}

function indexToCursor(index) {
	return `customer:${index}`;
}

function cursorToIndex(cursor) {
	const match = String(cursor || '').match(/^customer:(\d+)$/);
	return match ? Number(match[1]) : 0;
}

function wait(ms) {
	return new Promise((resolve) => {
		window.setTimeout(resolve, ms);
	});
}

function createCustomers() {
	const names = [
		'Northstar Analytics',
		'Atlas Finance',
		'Brightwell Studio',
		'Cinder Labs',
		'Orchid Health',
		'Juniper Works',
		'Signal Harbor',
		'Pioneer Retail',
		'Forge Robotics',
		'Lakehouse Legal',
		'Verde Energy',
		'Kite Education',
	];
	const owners = ['Amelia Hart', 'Ravi Patel', 'Mina Okafor', 'Theo Grant', 'Laura Chen', 'Sam Rivera'];
	const regions = ['EMEA', 'NA', 'APAC', 'LATAM'];
	const statuses = ['active', 'trial', 'paused', 'risk'];

	return Array.from({ length: 48 }, (_, index) => {
		const status = statuses[index % statuses.length];
		return {
			id: `acc-${String(index + 1001).padStart(4, '0')}`,
			name: names[index % names.length],
			status,
			owner: owners[index % owners.length],
			region: regions[index % regions.length],
			seats: 8 + (index * 17) % 260,
			arr: 7800 + (index * 13750) % 318000,
			updatedAt: `2026-06-${String(index % 18 + 1).padStart(2, '0')}`,
		};
	});
}
</script>

<template>
	<div class="w-full min-w-0 space-y-4">
		<div class="flex flex-col gap-3 rounded-lg border border-border bg-canvas p-4 sm:flex-row sm:items-center sm:justify-between">
			<div>
				<p class="text-sm font-semibold text-canvas-fg">Remote customer resource</p>
				<p class="mt-1 text-sm leading-6 text-muted-fg">
					The grid asks for rows; the mock API applies search, filters, sort, and pagination.
				</p>
			</div>
			<div class="inline-grid grid-cols-2 rounded-full border border-border bg-secondary/60 p-1 text-sm font-medium">
				<button
					type="button"
					class="rounded-full px-3 py-1.5 transition"
					:class="mode === 'page' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
					@click="setMode('page')"
				>
					Pages
				</button>
				<button
					type="button"
					class="rounded-full px-3 py-1.5 transition"
					:class="mode === 'cursor' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
					@click="setMode('cursor')"
				>
					Forever
				</button>
			</div>
		</div>

		<DomDataGrid
			v-model:filters="filters"
			v-model:sort="sort"
			v-model:search="search"
			v-model:selected-keys="selectedKeys"
			:rows="rows"
			:columns="columns"
			:loading="loading && !rows.length"
			:total-rows="pageInfo.total"
			remote
			title="Customers"
			resource-label="customers"
			:height="gridHeight"
			@query-change="handleQueryChange"
			@viewport-end="loadNextCursorPage"
		>
			<template #toolbar-actions>
				<span class="hidden rounded-md border border-border bg-canvas px-2.5 py-1.5 text-xs font-medium text-muted-fg lg:inline-flex">
					{{ pageInfo.returned || rows.length }} returned / {{ pageInfo.total || 0 }} total
				</span>
			</template>
		</DomDataGrid>

		<DomPagination
			v-if="mode === 'page'"
			:page="page"
			:page-size="pageSize"
			:total="pageInfo.total"
			:disabled="loading"
			@update:page="loadResource({ page: $event })"
		/>

		<div v-else class="flex flex-col gap-3 rounded-lg border border-border bg-canvas p-4 sm:flex-row sm:items-center sm:justify-between">
			<p class="text-sm text-muted-fg">
				Loaded {{ rows.length }} of {{ pageInfo.total || 0 }} customers with cursor pagination.
			</p>
			<DomButton
				variant="secondary"
				size="sm"
				:loading="loading"
				:disabled="!pageInfo.hasNextPage"
				@click="loadNextCursorPage"
			>
				Load next page
			</DomButton>
		</div>

		<div class="grid gap-3 lg:grid-cols-2">
			<div class="rounded-lg border border-border bg-canvas p-4">
				<p class="text-sm font-semibold text-canvas-fg">Request</p>
				<pre class="mt-3 max-h-72 overflow-auto rounded-md bg-secondary/40 p-3 text-xs leading-5 text-canvas-fg">{{ requestPreview }}</pre>
			</div>
			<div class="rounded-lg border border-border bg-canvas p-4">
				<p class="text-sm font-semibold text-canvas-fg">Response</p>
				<pre class="mt-3 max-h-72 overflow-auto rounded-md bg-secondary/40 p-3 text-xs leading-5 text-canvas-fg">{{ responsePreview }}</pre>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { DomDataGrid } from '../../../lib/vue';
import EditNameCell from './EditNameCell.vue';
import RowActionsCell from './RowActionsCell.vue';

const rows = ref([
	{ id: 'usr-1001', name: 'Maya Chen', email: 'maya@example.com', role: 'Product', status: 'pending', lastActive: '2026-06-17' },
	{ id: 'usr-1002', name: 'Jon Bell', email: 'jon@example.com', role: 'Engineering', status: 'active', lastActive: '2026-06-16' },
	{ id: 'usr-1003', name: 'Priya Shah', email: 'priya@example.com', role: 'Design', status: 'active', lastActive: '2026-06-12' },
	{ id: 'usr-1004', name: 'Noah Reed', email: 'noah@example.com', role: 'Support', status: 'paused', lastActive: '2026-06-08' },
	{ id: 'usr-1005', name: 'Amina Yusuf', email: 'amina@example.com', role: 'Operations', status: 'pending', lastActive: '2026-06-06' },
	{ id: 'usr-1006', name: 'Leo Morgan', email: 'leo@example.com', role: 'Sales', status: 'active', lastActive: '2026-06-04' },
]);
const lastEvent = ref('Custom cell events will appear here.');

const columns = [
	{
		key: 'name',
		label: 'User',
		type: 'text',
		width: '18rem',
		component: EditNameCell,
	},
	{ key: 'role', label: 'Team', type: 'text', width: '10rem' },
	{
		key: 'status',
		label: 'Status',
		type: 'select',
		width: '8rem',
		options: [
			{ label: 'Active', value: 'active', tone: 'green' },
			{ label: 'Pending', value: 'pending', tone: 'amber' },
			{ label: 'Paused', value: 'paused', tone: 'neutral' },
		],
	},
	{ key: 'lastActive', label: 'Last active', type: 'date', width: '9rem' },
	{
		key: 'actions',
		label: 'Actions',
		width: '13rem',
		align: 'right',
		sortable: false,
		filterable: false,
		searchable: false,
		component: RowActionsCell,
	},
];

function handleCellUpdate(event) {
	const target = rows.value.find((row) => row.id === event.row.id);
	if (!target) return;

	const field = event.column.field || event.column.key;
	target[field] = event.value;
	lastEvent.value = `Saved ${event.column.label.toLowerCase()} for ${target.id}: ${event.value}`;
}

function handleCellAction(event) {
	const target = rows.value.find((row) => row.id === event.row.id);
	if (!target) return;

	if (event.action === 'approve') {
		target.status = 'active';
		lastEvent.value = `Approved ${target.name} (${target.id}).`;
		return;
	}

	if (event.action === 'delete') {
		rows.value = rows.value.filter((row) => row.id !== target.id);
		lastEvent.value = `Deleted ${target.name} (${target.id}).`;
		return;
	}

	lastEvent.value = `Viewing ${target.name} (${target.id}).`;
}
</script>

<template>
	<div class="w-full min-w-0">
		<DomDataGrid
			:rows="rows"
			:columns="columns"
			:selectable="false"
			:show-row-numbers="false"
			:show-column-letters="false"
			title="Team members"
			resource-label="users"
			height="22rem"
			@cell-update="handleCellUpdate"
			@cell-action="handleCellAction"
		>
			<template #toolbar-actions>
				<span class="hidden rounded-md border border-border bg-canvas px-2.5 py-1.5 text-xs font-medium text-muted-fg lg:inline-flex">
					{{ lastEvent }}
				</span>
			</template>
		</DomDataGrid>
	</div>
</template>