<script lang="ts">
	import { cn } from '../../helper/cls.js';
	import type { FilePreviewProps } from '../../index.js';

	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();

	function formatFileSize(bytes: number): string {
		if (bytes === 0) return '0 B';
		const k = 1024;
		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))}${sizes[i]}`;
	}
</script>

{#if files.length > 0}
	<ul class={cn('mt-6 space-y-3', className)}>
		{#each files as file, i (i)}
			<li
				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
					'bg-danger-50 ring-danger-100': file.status === 'error',
					'bg-success-50 ring-success-100': file.status === 'success',
					'ring-primary-100/30 bg-white': file.status === 'uploading'
				})}
			>
				<div class="flex flex-1 items-center gap-3">
					<!-- File Icon -->
					<div
						class={cn('flex size-10 items-center justify-center rounded-full', {
							'bg-danger-100 text-danger-500': file.status === 'error',
							'bg-success-100 text-success-500': file.status === 'success',
							'bg-primary-100 text-primary-500': file.status === 'uploading'
						})}
					>
						<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
							<path
								fill="currentColor"
								d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
							/>
						</svg>
					</div>

					<div class="flex-1">
						<!-- Filename and Size -->
						<div class="mb-1 flex items-center justify-between">
							<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
							<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
						</div>

						<!-- Status Information -->
						{#if file.status === 'uploading'}
							<div class="bg-default-100 h-1.5 w-full rounded-full">
								<div
									class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
									style="width: {file.progress || 0}%"
								></div>
							</div>
							<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
						{:else if file.status === 'error'}
							<div class="flex items-center justify-between">
								<span class="text-danger-500 text-sm">Upload failed!</span>
								<span class="text-danger-600 cursor-help text-sm font-medium"
									>Please try again!</span
								>
							</div>
						{:else if file.status === 'success'}
							<p class="text-success-500 text-sm">Upload Successful!</p>
						{/if}
					</div>
				</div>

				<button
					type="button"
					aria-label="Delete file"
					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
						'bg-danger-100 text-danger-500': file.status === 'error',
						'bg-success-100 text-success-500': file.status === 'success',
						'bg-default-100 text-default-500': file.status === 'uploading'
					})}
					onclick={() => (file.FileID ? ondelete?.(file.FileID, i) : ondelete?.('', i))}
					disabled={file.status === 'uploading'}
				>
					<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
						<path
							fill="currentColor"
							d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
						/>
					</svg>
				</button>
			</li>
		{/each}
	</ul>
{/if}
