import { FileAudio, FileText, FileVideo, X } from '@phosphor-icons/react';
import styles from './PendingAttachmentRow.module.css';

export interface PendingAttachment {
	id: string;
	file: File;
	previewUrl?: string | null;
	progress?: number | null;
	error?: string | null;
}

interface PendingAttachmentRowProps {
	attachments: PendingAttachment[];
	onRemove: (id: string) => void;
}

function formatBytes(n: number): string {
	if (n < 1024) return `${n} B`;
	if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
	return `${(n / (1024 * 1024)).toFixed(1)} MB`;
}

function fileExt(name: string): string {
	const idx = name.lastIndexOf('.');
	return idx >= 0 ? name.slice(idx + 1).toUpperCase() : 'FILE';
}

/**
 * Horizontal strip of staged attachments shown above the composer.
 * Each card has a preview (image / video / icon), filename + size,
 * a remove button, and an optional progress bar during upload.
 */
export function PendingAttachmentRow({ attachments, onRemove }: PendingAttachmentRowProps) {
	if (attachments.length === 0) return null;

	return (
		<div className={styles.row}>
			{attachments.map((att) => {
				const kind = att.file.type.split('/')[0];
				const hasProgress = att.progress !== null && att.progress !== undefined;
				return (
					<div
						key={att.id}
						className={`${styles.card} ${att.error ? styles.cardError : ''}`}
					>
						<div className={styles.preview}>
							{kind === 'image' && att.previewUrl ? (
								<img
									src={att.previewUrl}
									alt={att.file.name}
									className={styles.previewImage}
								/>
							) : kind === 'video' && att.previewUrl ? (
								<video src={att.previewUrl} className={styles.previewVideo} muted />
							) : kind === 'audio' ? (
								<div className={styles.iconPreview}>
									<FileAudio size={32} weight="regular" />
								</div>
							) : kind === 'video' ? (
								<div className={styles.iconPreview}>
									<FileVideo size={32} weight="regular" />
								</div>
							) : (
								<div className={styles.iconPreview}>
									<FileText size={32} weight="regular" />
								</div>
							)}
						</div>

						<div className={styles.actions}>
							<button
								type="button"
								className={`${styles.actionButton} ${styles.actionButtonDanger}`}
								onClick={() => onRemove(att.id)}
								aria-label="Remove attachment"
								title="Remove"
							>
								<X size={16} weight="bold" />
							</button>
						</div>

						{hasProgress && (
							<div className={styles.progress}>
								<div
									className={styles.progressFill}
									style={{ width: `${Math.round((att.progress ?? 0) * 100)}%` }}
								/>
							</div>
						)}

						<div className={styles.meta}>
							<div className={styles.filename} title={att.file.name}>
								{att.file.name}
							</div>
							<div className={styles.metaBottomRow}>
								<span className={styles.size}>{formatBytes(att.file.size)}</span>
								<span className={styles.ext}>{fileExt(att.file.name)}</span>
							</div>
						</div>
					</div>
				);
			})}
		</div>
	);
}
