import { layout, escHtml } from './layout.ts';
import type { FileRow } from '../db/files.ts';

export function fileViewPage(file: FileRow, isOwner: boolean): string {
  const rawUrl = escHtml(`/f/${file.id}/raw`);
  const safeName = escHtml(file.original_name);
  const actions = `
    <div class="file-actions">
      <a href="${rawUrl}" download="${safeName}" class="btn">Download</a>
      <a href="${rawUrl}" target="_blank" class="btn">Open</a>
    </div>`;

  const deleteForm = isOwner
    ? `<form method="POST" action="/files/${escHtml(file.id)}/delete">
      <button type="submit" class="danger">Delete</button>
    </form>`
    : '';

  let media = '';
  if (file.mime_type.startsWith('image/')) {
    media = `<img src="${rawUrl}" alt="${safeName}">`;
  } else if (file.mime_type.startsWith('video/')) {
    media = `<video controls src="${rawUrl}" preload="metadata"></video>`;
  } else if (file.mime_type.startsWith('audio/')) {
    media = `<audio controls src="${rawUrl}" preload="metadata"></audio>`;
  }

  const layoutOpts = isOwner ? { authed: true } : { hideHeader: true };

  return layout(file.original_name, `
    <div class="file-view">
      <h1>${safeName}</h1>
      ${media}
      ${actions}
      ${deleteForm}
    </div>
  `, layoutOpts);
}