import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
import type { IS3DataProvider, IS3Object } from './interfaces.js';
import { formatSize, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-s3-keys': DeesS3Keys;
  }
}

@customElement('dees-s3-keys')
export class DeesS3Keys extends DeesElement {
  @property({ type: Object })
  public accessor dataProvider: IS3DataProvider | null = null;

  @property({ type: String })
  public accessor bucketName: string = '';

  @property({ type: String })
  public accessor currentPrefix: string = '';

  @property({ type: Number })
  public accessor refreshKey: number = 0;

  @state()
  private accessor allKeys: IS3Object[] = [];

  @state()
  private accessor prefixes: string[] = [];

  @state()
  private accessor loading: boolean = false;

  @state()
  private accessor selectedKey: string = '';

  @state()
  private accessor filterText: string = '';

  @state()
  private accessor showCreateDialog: boolean = false;

  @state()
  private accessor createDialogType: 'folder' | 'file' = 'folder';

  @state()
  private accessor createDialogPrefix: string = '';

  @state()
  private accessor createDialogName: string = '';

  // Move dialog state
  @state()
  private accessor showMoveDialog: boolean = false;

  @state()
  private accessor moveSource: { key: string; isFolder: boolean } | null = null;

  @state()
  private accessor moveDestination: string = '';

  @state()
  private accessor moveInProgress: boolean = false;

  @state()
  private accessor moveError: string | null = null;

  // Move picker dialog state
  @state()
  private accessor showMovePickerDialog: boolean = false;

  @state()
  private accessor movePickerSource: { key: string; isFolder: boolean } | null = null;

  @state()
  private accessor movePickerCurrentPrefix: string = '';

  @state()
  private accessor movePickerPrefixes: string[] = [];

  @state()
  private accessor movePickerLoading: boolean = false;

  // Rename dialog state
  @state()
  private accessor showRenameDialog: boolean = false;

  @state()
  private accessor renameSource: { key: string; isFolder: boolean } | null = null;

  @state()
  private accessor renameName: string = '';

  @state()
  private accessor renameInProgress: boolean = false;

  @state()
  private accessor renameError: string | null = null;

  public static styles = [
    cssManager.defaultStyles,
    themeDefaultStyles,
    css`
      :host {
        display: block;
        height: 100%;
        overflow: hidden;
      }

      .keys-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .filter-bar {
        padding: 12px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
      }

      .filter-input {
        width: 100%;
        padding: 8px 12px;
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.3)')};
        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
        border-radius: 6px;
        color: ${cssManager.bdTheme('#18181b', '#fff')};
        font-size: 14px;
      }

      .filter-input:focus {
        outline: none;
        border-color: ${cssManager.bdTheme('#a1a1aa', '#404040')};
      }

      .filter-input::placeholder {
        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
      }

      .keys-list {
        flex: 1;
        overflow-y: auto;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      thead {
        position: sticky;
        top: 0;
        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
        z-index: 1;
      }

      th {
        text-align: left;
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#71717a', '#666')};
        text-transform: uppercase;
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
      }

      td {
        padding: 8px 12px;
        font-size: 13px;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#2a2a3e')};
      }

      tr:hover td {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.03)')};
      }

      tr.selected td {
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(255, 255, 255, 0.08)')};
      }

      .key-cell {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }

      .key-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }

      .folder-icon {
        color: #fbbf24;
      }

      .key-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .size-cell {
        color: ${cssManager.bdTheme('#71717a', '#888')};
        font-variant-numeric: tabular-nums;
      }

      .empty-state {
        padding: 32px;
        text-align: center;
        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
      }

      .dialog-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
      }

      .dialog {
        background: ${cssManager.bdTheme('#ffffff', '#1e1e1e')};
        border-radius: 12px;
        padding: 24px;
        min-width: 400px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      }

      .dialog-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#18181b', '#fff')};
      }

      .dialog-location {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#888')};
        margin-bottom: 12px;
        font-family: monospace;
      }

      .dialog-input {
        width: 100%;
        padding: 10px 12px;
        background: ${cssManager.bdTheme('#f4f4f5', '#141414')};
        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#333')};
        border-radius: 6px;
        color: ${cssManager.bdTheme('#18181b', '#fff')};
        font-size: 14px;
        margin-bottom: 8px;
        box-sizing: border-box;
      }

      .dialog-input:focus {
        outline: none;
        border-color: ${cssManager.bdTheme('#a1a1aa', '#e0e0e0')};
      }

      .dialog-hint {
        font-size: 11px;
        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
        margin-bottom: 16px;
      }

      .dialog-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
      }

      .dialog-btn {
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .dialog-btn-cancel {
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
        color: ${cssManager.bdTheme('#71717a', '#aaa')};
      }

      .dialog-btn-cancel:hover {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
        color: ${cssManager.bdTheme('#18181b', '#fff')};
      }

      .dialog-btn-create {
        background: ${cssManager.bdTheme('#e5e7eb', '#404040')};
        border: none;
        color: ${cssManager.bdTheme('#18181b', '#fff')};
      }

      .dialog-btn-create:hover {
        background: ${cssManager.bdTheme('#d4d4d8', '#505050')};
      }

      .dialog-btn-create:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Move dialog styles */
      .move-summary {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
      }

      .move-item {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
      }

      .move-item:last-child {
        margin-bottom: 0;
      }

      .move-label {
        color: ${cssManager.bdTheme('#71717a', '#888')};
        min-width: 40px;
      }

      .move-path {
        color: ${cssManager.bdTheme('#3f3f46', '#e0e0e0')};
        font-family: monospace;
        font-size: 12px;
        word-break: break-all;
      }

      .move-error {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #f87171;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 13px;
      }

      /* Move picker dialog styles */
      .move-picker-dialog {
        min-width: 450px;
        max-height: 500px;
      }

      .picker-breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 12px;
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
        border-radius: 6px;
        margin-bottom: 12px;
        font-size: 12px;
        overflow-x: auto;
      }

      .picker-crumb {
        color: ${cssManager.bdTheme('#71717a', '#888')};
        cursor: pointer;
        white-space: nowrap;
      }

      .picker-crumb:hover {
        color: ${cssManager.bdTheme('#18181b', '#fff')};
      }

      .picker-separator {
        color: ${cssManager.bdTheme('#d4d4d8', '#555')};
      }

      .picker-list {
        max-height: 280px;
        overflow-y: auto;
        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
        border-radius: 6px;
        margin-bottom: 16px;
        min-height: 100px;
      }

      .picker-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        cursor: pointer;
        color: #fbbf24;
      }

      .picker-item:hover {
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
      }

      .picker-item .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }

      .picker-item .name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .picker-empty {
        padding: 24px;
        text-align: center;
        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
        font-size: 13px;
      }
    `,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await this.loadObjects();
  }

  updated(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('bucketName') || changedProperties.has('currentPrefix') || changedProperties.has('refreshKey')) {
      this.loadObjects();
    }
  }

  private async loadObjects() {
    if (!this.dataProvider) return;
    this.loading = true;
    try {
      const result = await this.dataProvider.listObjects(this.bucketName, this.currentPrefix, '/');
      this.allKeys = result.objects;
      this.prefixes = result.prefixes;
    } catch (err) {
      console.error('Error loading objects:', err);
      this.allKeys = [];
      this.prefixes = [];
    }
    this.loading = false;
  }

  private handleFilterInput(e: Event) {
    this.filterText = (e.target as HTMLInputElement).value;
  }

  private selectKey(key: string, isFolder: boolean) {
    this.selectedKey = key;

    if (isFolder) {
      this.dispatchEvent(
        new CustomEvent('navigate', {
          detail: { prefix: key },
          bubbles: true,
          composed: true,
        })
      );
    } else {
      this.dispatchEvent(
        new CustomEvent('key-selected', {
          detail: { key },
          bubbles: true,
          composed: true,
        })
      );
    }
  }

  private get filteredItems() {
    const filter = this.filterText.toLowerCase();
    const folders = this.prefixes
      .filter((p) => !filter || getFileName(p).toLowerCase().includes(filter))
      .map((p) => ({ key: p, isFolder: true, size: undefined as number | undefined }));
    const files = this.allKeys
      .filter((o) => !filter || getFileName(o.key).toLowerCase().includes(filter))
      .map((o) => ({ key: o.key, isFolder: false, size: o.size }));
    return [...folders, ...files];
  }

  private handleItemContextMenu(event: MouseEvent, key: string, isFolder: boolean) {
    if (!this.dataProvider) return;
    event.preventDefault();

    if (isFolder) {
      DeesContextmenu.openContextMenuWithOptions(event, [
        {
          name: 'Open',
          iconName: 'lucide:folderOpen',
          action: async () => {
            this.selectKey(key, true);
          },
        },
        {
          name: 'Copy Path',
          iconName: 'lucide:copy',
          action: async () => {
            await navigator.clipboard.writeText(key);
          },
        },
        {
          name: 'Rename',
          iconName: 'lucide:pencil',
          action: async () => this.openRenameDialog(key, true),
        },
        { divider: true },
        {
          name: 'Move to...',
          iconName: 'lucide:folderInput',
          action: async () => this.openMovePickerDialog(key, true),
        },
        { divider: true },
        {
          name: 'New Folder Inside',
          iconName: 'lucide:folderPlus',
          action: async () => this.openCreateDialog('folder', key),
        },
        {
          name: 'New File Inside',
          iconName: 'lucide:filePlus',
          action: async () => this.openCreateDialog('file', key),
        },
        { divider: true },
        {
          name: 'Delete Folder',
          iconName: 'lucide:trash2',
          action: async () => {
            if (confirm(`Delete folder "${getFileName(key)}" and all its contents?`)) {
              const success = await this.dataProvider!.deletePrefix(this.bucketName, key);
              if (success) {
                await this.loadObjects();
              }
            }
          },
        },
      ]);
    } else {
      DeesContextmenu.openContextMenuWithOptions(event, [
        {
          name: 'Preview',
          iconName: 'lucide:eye',
          action: async () => {
            this.selectKey(key, false);
          },
        },
        {
          name: 'Download',
          iconName: 'lucide:download',
          action: async () => {
            const url = await this.dataProvider!.getObjectUrl(this.bucketName, key);
            const link = document.createElement('a');
            link.href = url;
            link.download = getFileName(key);
            link.click();
          },
        },
        {
          name: 'Copy Path',
          iconName: 'lucide:copy',
          action: async () => {
            await navigator.clipboard.writeText(key);
          },
        },
        {
          name: 'Rename',
          iconName: 'lucide:pencil',
          action: async () => this.openRenameDialog(key, false),
        },
        { divider: true },
        {
          name: 'Move to...',
          iconName: 'lucide:folderInput',
          action: async () => this.openMovePickerDialog(key, false),
        },
        { divider: true },
        {
          name: 'Delete',
          iconName: 'lucide:trash2',
          action: async () => {
            if (confirm(`Delete file "${getFileName(key)}"?`)) {
              const success = await this.dataProvider!.deleteObject(this.bucketName, key);
              if (success) {
                await this.loadObjects();
              }
            }
          },
        },
      ]);
    }
  }

  private handleEmptySpaceContextMenu(event: MouseEvent) {
    if ((event.target as HTMLElement).closest('tr')) return;
    event.preventDefault();

    DeesContextmenu.openContextMenuWithOptions(event, [
      {
        name: 'New Folder',
        iconName: 'lucide:folderPlus',
        action: async () => this.openCreateDialog('folder', this.currentPrefix),
      },
      {
        name: 'New File',
        iconName: 'lucide:filePlus',
        action: async () => this.openCreateDialog('file', this.currentPrefix),
      },
    ]);
  }

  private openCreateDialog(type: 'folder' | 'file', prefix: string) {
    this.createDialogType = type;
    this.createDialogPrefix = prefix;
    this.createDialogName = '';
    this.showCreateDialog = true;
  }

  private async handleCreate() {
    if (!this.createDialogName.trim() || !this.dataProvider) return;

    const name = this.createDialogName.trim();
    let path: string;

    if (this.createDialogType === 'folder') {
      path = this.createDialogPrefix + name + '/.keep';
    } else {
      path = this.createDialogPrefix + name;
    }

    const ext = name.split('.').pop()?.toLowerCase() || '';
    const contentType = this.createDialogType === 'file' ? getContentType(ext) : 'application/octet-stream';
    const content = this.createDialogType === 'file' ? getDefaultContent(ext) : '';

    const success = await this.dataProvider.putObject(
      this.bucketName,
      path,
      btoa(content),
      contentType
    );

    if (success) {
      this.showCreateDialog = false;
      await this.loadObjects();
    }
  }

  private renderCreateDialog() {
    if (!this.showCreateDialog) return '';

    const isFolder = this.createDialogType === 'folder';
    const title = isFolder ? 'Create New Folder' : 'Create New File';
    const placeholder = isFolder ? 'folder-name or path/to/folder' : 'filename.txt or path/to/file.txt';

    return html`
      <div class="dialog-overlay" @click=${() => this.showCreateDialog = false}>
        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
          <div class="dialog-title">${title}</div>
          <div class="dialog-location">
            Location: ${this.bucketName}/${this.createDialogPrefix}
          </div>
          <input
            type="text"
            class="dialog-input"
            placeholder=${placeholder}
            .value=${this.createDialogName}
            @input=${(e: InputEvent) => this.createDialogName = (e.target as HTMLInputElement).value}
            @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
          />
          <div class="dialog-hint">
            Use "/" to create nested ${isFolder ? 'folders' : 'path'} (e.g., ${isFolder ? 'parent/child' : 'folder/file.txt'})
          </div>
          <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.showCreateDialog = false}>
              Cancel
            </button>
            <button
              class="dialog-btn dialog-btn-create"
              ?disabled=${!this.createDialogName.trim()}
              @click=${() => this.handleCreate()}
            >
              Create
            </button>
          </div>
        </div>
      </div>
    `;
  }

  // --- Move picker dialog ---

  private async openMovePickerDialog(key: string, isFolder: boolean) {
    this.movePickerSource = { key, isFolder };
    this.movePickerCurrentPrefix = '';
    this.showMovePickerDialog = true;
    await this.loadMovePickerPrefixes('');
  }

  private async navigateMovePicker(prefix: string) {
    this.movePickerCurrentPrefix = prefix;
    await this.loadMovePickerPrefixes(prefix);
  }

  private async loadMovePickerPrefixes(prefix: string) {
    if (!this.dataProvider) return;
    this.movePickerLoading = true;
    try {
      const result = await this.dataProvider.listObjects(this.bucketName, prefix, '/');
      this.movePickerPrefixes = result.prefixes;
    } catch {
      this.movePickerPrefixes = [];
    }
    this.movePickerLoading = false;
  }

  private selectMoveDestination(destPrefix: string) {
    if (!this.movePickerSource) return;
    this.closeMovePickerDialog();
    this.initiateMove(this.movePickerSource.key, this.movePickerSource.isFolder, destPrefix);
  }

  private closeMovePickerDialog() {
    this.showMovePickerDialog = false;
    this.movePickerSource = null;
    this.movePickerCurrentPrefix = '';
    this.movePickerPrefixes = [];
  }

  // --- Move confirmation dialog ---

  private initiateMove(sourceKey: string, isFolder: boolean, destPrefix: string) {
    const validation = validateMove(sourceKey, destPrefix);

    if (!validation.valid) {
      this.moveSource = { key: sourceKey, isFolder };
      this.moveDestination = destPrefix;
      this.moveError = validation.error!;
      this.showMoveDialog = true;
      return;
    }

    this.moveSource = { key: sourceKey, isFolder };
    this.moveDestination = destPrefix;
    this.moveError = null;
    this.showMoveDialog = true;
  }

  private async executeMove() {
    if (!this.moveSource || !this.dataProvider) return;

    this.moveInProgress = true;

    try {
      const sourceName = getFileName(this.moveSource.key);
      const destKey = this.moveDestination + sourceName;

      let result: { success: boolean; error?: string };
      if (this.moveSource.isFolder) {
        result = await this.dataProvider.movePrefix(
          this.bucketName,
          this.moveSource.key,
          destKey
        );
      } else {
        result = await this.dataProvider.moveObject(
          this.bucketName,
          this.moveSource.key,
          destKey
        );
      }

      if (result.success) {
        this.closeMoveDialog();
        await this.loadObjects();
      } else {
        this.moveError = result.error || 'Move operation failed';
      }
    } catch (err) {
      this.moveError = `Error: ${err}`;
    }

    this.moveInProgress = false;
  }

  private closeMoveDialog() {
    this.showMoveDialog = false;
    this.moveSource = null;
    this.moveDestination = '';
    this.moveError = null;
    this.moveInProgress = false;
  }

  // --- Rename dialog methods ---

  private openRenameDialog(key: string, isFolder: boolean) {
    this.renameSource = { key, isFolder };
    this.renameName = getFileName(key);
    this.renameError = null;
    this.showRenameDialog = true;

    this.updateComplete.then(() => {
      const input = this.shadowRoot?.querySelector('.rename-dialog-input') as HTMLInputElement;
      if (input) {
        input.focus();
        if (!isFolder) {
          const lastDot = this.renameName.lastIndexOf('.');
          if (lastDot > 0) {
            input.setSelectionRange(0, lastDot);
          } else {
            input.select();
          }
        } else {
          input.select();
        }
      }
    });
  }

  private async executeRename() {
    if (!this.renameSource || !this.renameName.trim() || !this.dataProvider) return;

    const newName = this.renameName.trim();
    const currentName = getFileName(this.renameSource.key);

    if (newName === currentName) {
      this.renameError = 'Name is the same as current';
      return;
    }
    if (!newName) {
      this.renameError = 'Name cannot be empty';
      return;
    }
    if (newName.includes('/')) {
      this.renameError = 'Name cannot contain "/"';
      return;
    }

    this.renameInProgress = true;
    this.renameError = null;

    try {
      const parentPrefix = getParentPrefix(this.renameSource.key);
      const newKey = parentPrefix + newName + (this.renameSource.isFolder ? '/' : '');

      let result: { success: boolean; error?: string };
      if (this.renameSource.isFolder) {
        result = await this.dataProvider.movePrefix(this.bucketName, this.renameSource.key, newKey);
      } else {
        result = await this.dataProvider.moveObject(this.bucketName, this.renameSource.key, newKey);
      }

      if (result.success) {
        this.closeRenameDialog();
        await this.loadObjects();
      } else {
        this.renameError = result.error || 'Rename failed';
      }
    } catch (err) {
      this.renameError = `Error: ${err}`;
    }
    this.renameInProgress = false;
  }

  private closeRenameDialog() {
    this.showRenameDialog = false;
    this.renameSource = null;
    this.renameName = '';
    this.renameError = null;
    this.renameInProgress = false;
  }

  private renderRenameDialog() {
    if (!this.showRenameDialog || !this.renameSource) return '';

    const isFolder = this.renameSource.isFolder;
    const title = isFolder ? 'Rename Folder' : 'Rename File';

    return html`
      <div class="dialog-overlay" @click=${() => this.closeRenameDialog()}>
        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
          <div class="dialog-title">${title}</div>
          <div class="dialog-location">
            Location: ${this.bucketName}/${getParentPrefix(this.renameSource.key)}
          </div>
          ${this.renameError ? html`<div class="move-error">${this.renameError}</div>` : ''}
          <input
            type="text"
            class="dialog-input rename-dialog-input"
            placeholder=${isFolder ? 'folder-name' : 'filename.ext'}
            .value=${this.renameName}
            @input=${(e: InputEvent) => {
              this.renameName = (e.target as HTMLInputElement).value;
              this.renameError = null;
            }}
            @keydown=${(e: KeyboardEvent) => {
              if (e.key === 'Enter') this.executeRename();
              if (e.key === 'Escape') this.closeRenameDialog();
            }}
          />
          <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel"
                    @click=${() => this.closeRenameDialog()}
                    ?disabled=${this.renameInProgress}>Cancel</button>
            <button class="dialog-btn dialog-btn-create"
                    @click=${() => this.executeRename()}
                    ?disabled=${this.renameInProgress || !this.renameName.trim()}>
              ${this.renameInProgress ? 'Renaming...' : 'Rename'}
            </button>
          </div>
        </div>
      </div>
    `;
  }

  private renderMoveDialog() {
    if (!this.showMoveDialog || !this.moveSource) return '';

    const sourceName = getFileName(this.moveSource.key);

    return html`
      <div class="dialog-overlay" @click=${() => this.closeMoveDialog()}>
        <div class="dialog" @click=${(e: Event) => e.stopPropagation()}>
          <div class="dialog-title">Move ${this.moveSource.isFolder ? 'Folder' : 'File'}</div>

          ${this.moveError ? html`
            <div class="move-error">${this.moveError}</div>
          ` : html`
            <div class="move-summary">
              <div class="move-item">
                <span class="move-label">From:</span>
                <span class="move-path">${this.moveSource.key}</span>
              </div>
              <div class="move-item">
                <span class="move-label">To:</span>
                <span class="move-path">${this.moveDestination}${sourceName}</span>
              </div>
            </div>
          `}

          <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel"
                    @click=${() => this.closeMoveDialog()}
                    ?disabled=${this.moveInProgress}>
              Cancel
            </button>
            ${!this.moveError ? html`
              <button class="dialog-btn dialog-btn-create"
                      @click=${() => this.executeMove()}
                      ?disabled=${this.moveInProgress}>
                ${this.moveInProgress ? 'Moving...' : 'Move'}
              </button>
            ` : ''}
          </div>
        </div>
      </div>
    `;
  }

  private renderMovePickerDialog() {
    if (!this.showMovePickerDialog || !this.movePickerSource) return '';

    const sourceName = getFileName(this.movePickerSource.key);
    const sourceParent = getParentPrefix(this.movePickerSource.key);

    return html`
      <div class="dialog-overlay" @click=${() => this.closeMovePickerDialog()}>
        <div class="dialog move-picker-dialog" @click=${(e: Event) => e.stopPropagation()}>
          <div class="dialog-title">Move "${sourceName}" to...</div>

          <div class="picker-breadcrumb">
            <span class="picker-crumb" @click=${() => this.navigateMovePicker('')}>
              ${this.bucketName}
            </span>
            ${getPathSegments(this.movePickerCurrentPrefix).map(seg => html`
              <span class="picker-separator">/</span>
              <span class="picker-crumb" @click=${() => this.navigateMovePicker(seg)}>
                ${getFileName(seg)}
              </span>
            `)}
          </div>

          <div class="picker-list">
            ${this.movePickerLoading ? html`<div class="picker-empty">Loading...</div>` : ''}
            ${!this.movePickerLoading && this.movePickerPrefixes.filter(p => p !== this.movePickerSource!.key).length === 0 ? html`
              <div class="picker-empty">No subfolders</div>
            ` : ''}
            ${this.movePickerPrefixes
              .filter(p => p !== this.movePickerSource!.key)
              .map(prefix => html`
                <div class="picker-item"
                     @click=${() => this.navigateMovePicker(prefix)}
                     @dblclick=${() => this.selectMoveDestination(prefix)}>
                  <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                  </svg>
                  <span class="name">${getFileName(prefix)}</span>
                </div>
              `)}
          </div>

          <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel" @click=${() => this.closeMovePickerDialog()}>
              Cancel
            </button>
            <button class="dialog-btn dialog-btn-create"
                    @click=${() => this.selectMoveDestination(this.movePickerCurrentPrefix)}
                    ?disabled=${this.movePickerCurrentPrefix === sourceParent}>
              Move Here
            </button>
          </div>
        </div>
      </div>
    `;
  }

  render() {
    return html`
      <div class="keys-container">
        <div class="filter-bar">
          <input
            type="text"
            class="filter-input"
            placeholder="Filter files..."
            .value=${this.filterText}
            @input=${this.handleFilterInput}
          />
        </div>

        <div class="keys-list" @contextmenu=${(e: MouseEvent) => this.handleEmptySpaceContextMenu(e)}>
          ${this.loading
            ? html`<div class="empty-state">Loading...</div>`
            : this.filteredItems.length === 0
              ? html`<div class="empty-state">No objects found</div>`
              : html`
                  <table>
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th style="width: 100px;">Size</th>
                      </tr>
                    </thead>
                    <tbody>
                      ${this.filteredItems.map(
                        (item) => html`
                          <tr
                            class="${this.selectedKey === item.key ? 'selected' : ''}"
                            @click=${() => this.selectKey(item.key, item.isFolder)}
                            @contextmenu=${(e: MouseEvent) => this.handleItemContextMenu(e, item.key, item.isFolder)}
                          >
                            <td>
                              <div class="key-cell">
                                ${item.isFolder
                                  ? html`
                                      <svg class="key-icon folder-icon" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                                      </svg>
                                    `
                                  : html`
                                      <svg class="key-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                      </svg>
                                    `}
                                <span class="key-name">${getFileName(item.key)}</span>
                              </div>
                            </td>
                            <td class="size-cell">
                              ${item.isFolder ? '-' : formatSize(item.size)}
                            </td>
                          </tr>
                        `
                      )}
                    </tbody>
                  </table>
                `}
        </div>
      </div>
      ${this.renderCreateDialog()}
      ${this.renderMoveDialog()}
      ${this.renderMovePickerDialog()}
      ${this.renderRenameDialog()}
    `;
  }
}