import type { ImportedMediaAsset } from '../app/application-state';
import { formatBytes, formatDuration } from '../app/application-state';
import { Icon } from './Icon';

export interface MediaBinProps {
  assets: readonly ImportedMediaAsset[];
  selectedId?: string;
  onSelect: (id: string) => void;
  onRemove: (id: string) => void;
}

export function MediaBin({
  assets,
  selectedId,
  onSelect,
  onRemove,
}: MediaBinProps) {
  if (assets.length === 0) {
    return (
      <div className="media-bin__empty">
        <Icon name="video" />
        <p>Your source files will appear here.</p>
      </div>
    );
  }

  return (
    <ul className="media-list" aria-label="Imported media">
      {assets.map((asset) => {
        const video = asset.probe?.streams.find(
          (stream) => stream.type === 'video'
        );
        const audioCount =
          asset.probe?.streams.filter((stream) => stream.type === 'audio')
            .length ?? 0;
        return (
          <li key={asset.id}>
            <button
              type="button"
              className={[
                'media-card',
                selectedId === asset.id ? 'media-card--selected' : '',
              ]
                .filter(Boolean)
                .join(' ')}
              onClick={() => onSelect(asset.id)}
            >
              <span className="media-card__type">
                <Icon name={video ? 'video' : 'audio'} />
              </span>
              <span className="media-card__content">
                <strong title={asset.file.name}>{asset.file.name}</strong>
                <small>
                  {formatBytes(asset.file.size)}
                  {asset.probe?.durationSeconds !== undefined
                    ? ` · ${formatDuration(asset.probe.durationSeconds)}`
                    : ''}
                </small>
                <small className={`phase phase--${asset.phase}`}>
                  {asset.phase === 'probing'
                    ? 'Inspecting locally…'
                    : asset.phase === 'ready'
                      ? `${video ? `${video.width ?? '?'}×${video.height ?? '?'}` : 'Audio'} · ${audioCount} audio`
                      : asset.phase === 'error'
                        ? asset.error
                        : 'Queued'}
                </small>
              </span>
            </button>
            <button
              className="icon-action"
              type="button"
              aria-label={`Remove ${asset.file.name}`}
              onClick={() => onRemove(asset.id)}
            >
              <Icon name="trash" />
            </button>
          </li>
        );
      })}
    </ul>
  );
}
