{{ define "plugin_manual_import" }}
<!-- Manual Plugin Import Modal -->
<div id="manualImportModal" 
     class="modal" 
     x-data="{ step: 'upload', uploadProgress: 0, importFile: null }"
     x-show="$store.pluginImport.showModal"
     x-cloak
     @keydown.escape.window="$store.pluginImport.showModal = false">
  
  <div class="modal-backdrop" @click="$store.pluginImport.showModal = false"></div>
  
  <div class="modal-content" style="max-width: 600px;">
    <div class="modal-header">
      <h2>{{ T "plugins.import.title" }}</h2>
      <button class="btn-icon" @click="$store.pluginImport.showModal = false">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <!-- Step 1: File Upload -->
      <div x-show="step === 'upload'">
        <div class="info-panel mb-3">
          <p><strong>{{ T "plugins.import.upload_title" }}</strong></p>
          <p class="text-sm">{{ T "plugins.import.formats" }}</p>
          <p class="text-sm text-warning">
            ⚠️ {{ T "plugins.import.warning" }}
          </p>
        </div>

        <div class="form-group">
          <label for="pluginArchive">{{ T "plugins.import.archive" }}</label>
          <input type="file" 
                 id="pluginArchive"
                 accept=".tar.gz,.tgz"
                 @change="importFile = $event.target.files[0]"
                 class="form-control">
        </div>

        <div class="form-group">
          <label for="pluginSignature">{{ T "plugins.import.signature" }}</label>
          <input type="file" 
                 id="pluginSignature"
                 accept=".sig"
                 class="form-control">
        </div>

        <div class="mt-3">
          <button class="btn btn-primary"
                  @click="step = 'verify'"
                  :disabled="!importFile">
            {{ T "plugins.import.next_verify" }}
          </button>
          <button class="btn btn-secondary"
                  @click="$store.pluginImport.showModal = false">
            {{ T "common.cancel" }}
          </button>
        </div>
      </div>

      <!-- Step 2: Signature Verification -->
      <div x-show="step === 'verify'">
        <div class="info-panel mb-3">
          <h3>{{ T "plugins.import.verification" }}</h3>
          <p class="text-sm">{{ T "plugins.import.verifying" }}</p>
        </div>

        <div class="verification-status">
          <div class="status-item">
            <span class="status-icon">⏳</span>
            <span>{{ T "plugins.import.check_integrity" }}</span>
          </div>
          <div class="status-item">
            <span class="status-icon">⏳</span>
            <span>{{ T "plugins.import.check_signature" }}</span>
          </div>
          <div class="status-item">
            <span class="status-icon">⏳</span>
            <span>{{ T "plugins.import.check_manifest" }}</span>
          </div>
        </div>

        <div class="mt-3">
          <button class="btn btn-primary"
                  @click="step = 'confirm'">
            {{ T "plugins.import.verification_passed" }}
          </button>
          <button class="btn btn-secondary"
                  @click="step = 'upload'">
            {{ T "common.back" }}
          </button>
        </div>
      </div>

      <!-- Step 3: Confirmation -->
      <div x-show="step === 'confirm'">
        <div class="plugin-details mb-3">
          <h3>{{ T "plugins.import.info" }}</h3>
          <table class="table-sm">
            <tr>
              <td><strong>{{ T "plugins.import.name" }}</strong></td>
              <td x-text="$store.pluginImport.pluginName || 'Sample Payment Plugin'"></td>
            </tr>
            <tr>
              <td><strong>{{ T "plugins.import.version" }}</strong></td>
              <td x-text="$store.pluginImport.version || '1.0.0'"></td>
            </tr>
            <tr>
              <td><strong>{{ T "plugins.import.developer" }}</strong></td>
              <td x-text="$store.pluginImport.developer || 'Trusted Developer Inc.'"></td>
            </tr>
            <tr>
              <td><strong>{{ T "plugins.import.trust_tier" }}</strong></td>
              <td>
                <span class="badge badge-warning">{{ T "plugins.import.unverified" }}</span>
              </td>
            </tr>
            <tr>
              <td><strong>{{ T "plugins.import.permissions" }}</strong></td>
              <td>
                <ul class="permission-list text-sm">
                  <li>🔐 {{ T "plugins.import.perm_network" }}</li>
                  <li>💳 {{ T "plugins.import.perm_transactions" }}</li>
                  <li>📊 {{ T "plugins.import.perm_sales" }}</li>
                </ul>
              </td>
            </tr>
          </table>
        </div>

        <div class="form-group">
          <label>
            <input type="checkbox" x-model="$store.pluginImport.acceptRisk">
            {{ T "plugins.import.acknowledge" }}
          </label>
        </div>

        <div class="mt-3">
          <button class="btn btn-primary"
                  @click="step = 'installing'"
                  :disabled="!$store.pluginImport.acceptRisk">
            {{ T "plugins.import.install" }}
          </button>
          <button class="btn btn-secondary"
                  @click="step = 'verify'">
            {{ T "common.back" }}
          </button>
        </div>
      </div>

      <!-- Step 4: Installing -->
      <div x-show="step === 'installing'">
        <div class="install-progress">
          <h3>{{ T "plugins.import.installing" }}</h3>
          <div class="progress-bar">
            <div class="progress-fill" 
                 :style="'width: ' + uploadProgress + '%'"></div>
          </div>
          <p class="text-sm text-center mt-2" x-text="uploadProgress + '%'"></p>
        </div>

        <!-- Simulate progress -->
        <div x-init="
          let interval = setInterval(() => {
            if (uploadProgress < 100) {
              uploadProgress += 10;
            } else {
              clearInterval(interval);
              step = 'complete';
            }
          }, 200)
        "></div>
      </div>

      <!-- Step 5: Complete -->
      <div x-show="step === 'complete'">
        <div class="success-panel text-center">
          <div class="success-icon mb-3">✓</div>
          <h3>{{ T "plugins.import.success" }}</h3>
          <p class="text-sm">
            {{ T "plugins.import.success_note" }}
          </p>
        </div>

        <div class="mt-3 text-center">
          <button class="btn btn-primary"
                  @click="$store.pluginImport.showModal = false; window.location.reload()">
            {{ T "common.done" }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.verification-status .status-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  gap: 0.75rem;
}

.status-icon {
  font-size: 1.25rem;
}

.permission-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.permission-list li {
  padding: 0.25rem 0;
}

.progress-bar {
  width: 100%;
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  transition: width 0.3s ease;
}

.success-panel {
  padding: 2rem;
  background: #f0f8f0;
  border-radius: 8px;
  border: 2px solid #4CAF50;
}

.success-icon {
  font-size: 4rem;
  color: #4CAF50;
  font-weight: bold;
}

.install-progress {
  padding: 2rem 1rem;
  text-align: center;
}
</style>
{{ end }}