// Fullscreen form wrapper for the vault tab: sticky save bar + scrollable
// content + header with a live dirty-state subtitle. Receives the
// VaultController (`ctx`) for the item-type read; imports only from shared/,
// the popup item-form component, and vault-context.

import { renderItemForm } from '../popup/components/item-form';
import { type VaultController } from './vault-context';

// ---------------------------------------------------------------------------
// Platform-aware save hint
// ---------------------------------------------------------------------------

const isMac = navigator.platform.toLowerCase().includes('mac');
const SAVE_HINT = isMac ? '⌘+S to save' : 'Ctrl+S to save';

// ---------------------------------------------------------------------------
// Fullscreen form wrapper — sticky save bar + scrollable content + header
// ---------------------------------------------------------------------------

export function renderFormWrapped(ctx: VaultController, app: HTMLElement, mode: 'add' | 'edit'): void {
  const itemType = ctx.state.selectedItem?.type ?? ctx.state.newType ?? 'login';
  const typeLabelText = itemType.replace('_', ' ');
  const titleText = mode === 'add' ? `new ${typeLabelText}` : `edit ${typeLabelText}`;
  const wrapper = document.createElement('div');
  wrapper.className = 'form-pane';
  wrapper.innerHTML = `
    <div class="fullscreen-form-header">
      <div>
        <div class="title">${titleText}</div>
        <div class="sub" id="form-dirty-sub">no changes</div>
      </div>
      <div class="hint">${SAVE_HINT}</div>
    </div>
    <div class="form-scroll" id="form-scroll"></div>
    <div class="sticky-save-bar">
      <button class="btn-secondary" id="form-cancel">cancel</button>
      <button class="btn-primary" id="form-save">save</button>
    </div>
  `;
  // Remove pane padding so form-pane can fill height cleanly
  app.style.padding = '0';
  app.style.overflow = 'hidden';
  app.replaceChildren(wrapper);

  const scrollEl = wrapper.querySelector('#form-scroll') as HTMLElement;
  renderItemForm(scrollEl, mode);

  const subEl = wrapper.querySelector('#form-dirty-sub') as HTMLElement;
  let isDirty = false;
  const markDirty = () => {
    if (isDirty) return;
    isDirty = true;
    subEl.textContent = 'unsaved · esc to cancel';
  };
  const markClean = () => {
    isDirty = false;
    subEl.textContent = 'no changes';
  };
  scrollEl.addEventListener('input', markDirty, true);
  scrollEl.addEventListener('change', markDirty, true);

  wrapper.querySelector('#form-cancel')?.addEventListener('click', () => {
    markClean();
    (scrollEl.querySelector('#cancel-btn') as HTMLButtonElement | null)?.click();
  });
  wrapper.querySelector('#form-save')?.addEventListener('click', () => {
    markClean();
    (scrollEl.querySelector('#save-btn') as HTMLButtonElement | null)?.click();
  });
}

export const __test__ = { renderFormWrapped };