import { layout, escHtml } from './layout.ts';

export function uploadPage(opts: { error?: string } = {}): string {
  const errorHtml = opts.error ? `<p class="error">${opts.error}</p>` : '';

  return layout('Upload', `
    <div class="form-container">
      <h1>Upload a file</h1>
      ${errorHtml}
      <form method="POST" action="/upload" enctype="multipart/form-data">
        <label>
          File
          <input type="file" name="file" required>
        </label>
        <button type="submit">Upload</button>
      </form>
    </div>
  `, { authed: true });
}

export function uploadResultPage(shareUrl: string, filename: string): string {
  const safeUrl = escHtml(shareUrl);
  const safeName = escHtml(filename);

  return layout('File uploaded', `
    <div class="form-container">
      <h1>File uploaded</h1>
      <p><strong>${safeName}</strong> is ready to share.</p>
      <div class="share-box">
        <input type="text" id="share-url" value="${safeUrl}" readonly>
        <button onclick="navigator.clipboard.writeText(document.getElementById('share-url').value)">Copy link</button>
      </div>
      <p><a href="/upload">Upload another</a> &middot; <a href="/files">My files</a></p>
    </div>
  `, { authed: true });
}