<clear-confirm-modal>
  <div class="modal-overlay" onclick={handleOverlayClick}>
    <div class="modal" onclick={e => e.stopPropagation()}>
      <div class="modal-header">
        <h3>Clear Chat</h3>
        <button class="btn btn-ghost btn-icon" onclick={props.cbClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      </div>

      <div class="clear-warning">
        <div class="warning-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="3 6 5 6 21 6"/>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
          </svg>
        </div>
        <p>This will permanently delete <strong>all messages</strong> in <strong>{props.room?.name}</strong>.</p>
        <p class="warning-sub">This cannot be undone. The room will remain, but all chat history will be lost.</p>
      </div>

      <p if={state.error} class="error-text">{state.error}</p>

      <div class="modal-actions">
        <button type="button" class="btn btn-ghost" onclick={props.cbClose}>Cancel</button>
        <button
          class="btn btn-danger"
          onclick={handleClear}
          disabled={state.loading}
        >
          {state.loading ? 'Clearing...' : 'Clear All Messages'}
        </button>
      </div>
    </div>
  </div>

  <style>
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      animation: fadeIn 0.15s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal {
      width: 100%;
      max-width: 400px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      animation: slideUp 0.2s ease;
    }

    @keyframes slideUp {
      from { transform: translateY(16px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-md);
    }

    .modal-header h3 {
      font-size: var(--text-lg);
      font-weight: 600;
      color: var(--error, #e53e3e);
    }

    .btn-icon {
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
    }

    .clear-warning {
      margin-bottom: var(--space-md);
    }

    .warning-icon {
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-md);
      color: var(--error, #e53e3e);
    }

    .clear-warning p {
      font-size: var(--text-sm);
      color: var(--text-primary);
      line-height: 1.6;
      margin-bottom: var(--space-xs);
    }

    .warning-sub {
      color: var(--text-muted) !important;
      font-size: var(--text-xs) !important;
    }

    .error-text {
      color: var(--error, #e53e3e);
      font-size: var(--text-sm);
      margin-bottom: var(--space-sm);
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
    }

    .btn-danger {
      background: var(--error, #e53e3e);
      color: white;
      border: none;
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      font-weight: 500;
      cursor: pointer;
      font-size: var(--text-sm);
      transition: opacity 0.15s;
    }

    .btn-danger:hover:not(:disabled) {
      opacity: 0.9;
    }

    .btn-danger:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  </style>

  <script>
    import { api } from '../services/api.js'

    export default {
      state: {
        error: null,
        loading: false,
      },

      handleOverlayClick() {
        this.props.cbClose()
      },

      async handleClear() {
        this.update({ loading: true, error: null })
        try {
          await api.clearRoom(this.props.room.id)
          this.props.cbConfirm()
        } catch (err) {
          this.update({ error: err.message, loading: false })
        }
      },
    }
  </script>
</clear-confirm-modal>
