<mat-card class="info-card">
  <mat-card-header>
    <mat-card-title
      >⚠️️️{{ T.PLUGINS.EXPERIMENTAL_WARNING_TITLE | translate }}️️ ⚠️️️
    </mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="warning-content">
      <p>{{ T.PLUGINS.SECURITY_WARNING | translate }}</p>
      <ul>
        <li>{{ T.PLUGINS.RISK_DATA_ACCESS | translate }}</li>
        <li>{{ T.PLUGINS.RISK_MALICIOUS_CODE | translate }}</li>
        <li>{{ T.PLUGINS.RISK_SYSTEM_ACCESS | translate }}</li>
        <li>{{ T.PLUGINS.RISK_PERFORMANCE | translate }}</li>
      </ul>
      <p class="recommendation">
        <mat-icon>security</mat-icon>
        {{ T.PLUGINS.RECOMMENDATION | translate }}
      </p>
    </div>
  </mat-card-content>
</mat-card>

@if (allPlugins().length === 0) {
  <mat-card>
    <mat-card-content class="empty-state">
      <mat-icon>extension_off</mat-icon>
      <p>{{ T.PS.NO_PLUGINS_INSTALLED | translate }}</p>
    </mat-card-content>
  </mat-card>
}

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ T.PLUGINS.INSTALL_PLUGIN | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="install-warning">
      <mat-icon>info</mat-icon>
      <span>{{ T.PLUGINS.INSTALL_WARNING | translate }}</span>
    </div>
    <p>{{ T.PLUGINS.UPLOAD_PLUGIN_INSTRUCTION | translate }}</p>
    <input
      #fileInput
      type="file"
      accept=".zip"
      (change)="onFileSelected($event)"
      style="display: none"
    />
    <button
      mat-raised-button
      color="primary"
      (click)="fileInput.click()"
      [disabled]="isUploading()"
    >
      <mat-icon>upload</mat-icon>
      {{
        isUploading()
          ? (T.PLUGINS.INSTALLING | translate)
          : (T.PLUGINS.CHOOSE_PLUGIN_FILE | translate)
      }}
    </button>
    @if (uploadError()) {
      <mat-error style="margin-top: 8px; display: block">
        {{ uploadError() }}
      </mat-error>
    }

    <div style="margin-top: 16px">
      <button
        mat-button
        color="warn"
        (click)="clearPluginCache()"
        [disabled]="isUploading()"
      >
        <mat-icon>delete_sweep</mat-icon>
        {{ T.PLUGINS.CLEAR_PLUGIN_CACHE | translate }}
      </button>
    </div>
  </mat-card-content>
</mat-card>

@for (plugin of allPlugins(); track plugin.manifest.id) {
  <mat-card>
    <mat-card-header>
      <div mat-card-avatar>
        <plugin-icon
          [pluginId]="plugin.manifest.id"
          [size]="40"
          fallbackIcon="extension"
        ></plugin-icon>
      </div>
      <mat-card-title>{{ plugin.manifest.name }}</mat-card-title>
      <mat-card-subtitle>
        v{{ plugin.manifest.version }}
        @if (isPluginLoading(plugin)) {
          <mat-chip color="accent">
            <mat-icon class="loading-icon">autorenew</mat-icon>
            {{ T.PLUGINS.LOADING_PLUGIN | translate }}
          </mat-chip>
        }
      </mat-card-subtitle>
      <div class="plugin-controls">
        @if (plugin.manifest?.jsonSchemaCfg && plugin.isEnabled) {
          <button
            mat-icon-button
            (click)="openConfigDialog(plugin)"
            [disabled]="isPluginLoading(plugin)"
            [matTooltip]="T.PLUGINS.CONFIGURE | translate"
          >
            <mat-icon>settings</mat-icon>
          </button>
        }
        <mat-slide-toggle
          [checked]="plugin.isEnabled"
          [disabled]="!canEnablePlugin(plugin) || isPluginLoading(plugin)"
          (change)="onPluginToggle(plugin, $event)"
          [attr.aria-label]="
            T.PLUGINS.TOGGLE_PLUGIN | translate: { pluginName: plugin.manifest.name }
          "
        >
        </mat-slide-toggle>
      </div>
    </mat-card-header>

    <mat-card-content>
      <p>{{ getPluginDescription(plugin) }}</p>

      @if (plugin.error) {
        <mat-error>
          <mat-icon>error</mat-icon>
          {{ plugin.error }}
        </mat-error>
      }

      @if (requiresNodeExecution(plugin) && !IS_ELECTRON) {
        <mat-error style="margin-top: 8px">
          <mat-icon>desktop_windows</mat-icon>
          {{ getNodeExecutionMessage() }}
        </mat-error>
      }

      <table>
        <tr>
          <th>{{ T.PLUGINS.ID | translate }}</th>
          <td>{{ plugin.manifest.id }}</td>
        </tr>
        @if (plugin.manifest.minSupVersion) {
          <tr>
            <th>{{ T.PLUGINS.MIN_VERSION | translate }}</th>
            <td>{{ plugin.manifest.minSupVersion }}</td>
          </tr>
        }
        <tr>
          <th>{{ T.PLUGINS.LANGUAGES | translate }}</th>
          <td>
            <span [class.current-lang-supported]="supportsCurrentLanguage(plugin)">
              {{ getPluginLanguages(plugin) }}
            </span>
            @if (supportsCurrentLanguage(plugin)) {
              <mat-icon class="lang-check">check_circle</mat-icon>
            }
          </td>
        </tr>
      </table>

      @if (
        (plugin.manifest.hooks && plugin.manifest.hooks.length > 0) ||
        (plugin.manifest.permissions && plugin.manifest.permissions.length > 0)
      ) {
        <collapsible [title]="getPermissionsHooksTitle(plugin)">
          @if (plugin.manifest.permissions && plugin.manifest.permissions.length > 0) {
            <div class="plugin-info-section">
              <div class="label">{{ T.PLUGINS.PERMISSIONS | translate }}:</div>
              <mat-chip-set>
                @for (permission of plugin.manifest.permissions; track permission) {
                  <mat-chip>{{ permission }}</mat-chip>
                }
              </mat-chip-set>
            </div>
          }
          @if (plugin.manifest.hooks && plugin.manifest.hooks.length > 0) {
            <div class="plugin-info-section">
              <div class="label">{{ T.PLUGINS.HOOKS | translate }}:</div>
              <mat-chip-set>
                @for (hook of plugin.manifest.hooks; track hook) {
                  <mat-chip>{{ hook }}</mat-chip>
                }
              </mat-chip-set>
            </div>
          }
        </collapsible>
      }
    </mat-card-content>

    @if (isUploadedPlugin(plugin)) {
      <mat-card-actions [align]="'end'">
        <button
          mat-button
          color="warn"
          (click)="removeUploadedPlugin(plugin)"
          [disabled]="isUploading()"
        >
          <mat-icon>delete</mat-icon>
          {{ T.PLUGINS.REMOVE | translate }}
        </button>
      </mat-card-actions>
    }
  </mat-card>
}

<mat-card class="community-plugins-card">
  <mat-card-header>
    <mat-card-title>Community Plugins</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div
      class="warning-content"
      style="margin-bottom: 16px; color: var(--warn)"
    >
      <p>
        <strong>⚠️ WARNING:</strong> These plugins are developed by the community and are
        <strong>NOT</strong> reviewed or guaranteed by the Super Productivity team.
        Install and use them at your own risk. They might contain malicious code or break
        your application.
      </p>
    </div>

    <div class="community-plugins-list">
      @for (plugin of communityPlugins(); track plugin.name) {
        <div class="community-plugin-item">
          <h3 class="plugin-name">
            <a
              [href]="plugin.url"
              target="_blank"
              >{{ plugin.name }}</a
            >
          </h3>
          <p class="plugin-desc">{{ plugin.shortDescription }}</p>
        </div>
      }
    </div>

    <div style="margin-top: 16px; text-align: center">
      <a
        href="https://github.com/super-productivity/super-productivity/blob/master/src/assets/community-plugins.json"
        target="_blank"
        mat-button
        color="primary"
      >
        <mat-icon>add</mat-icon>
        Get your plugin to show up here
      </a>
    </div>
  </mat-card-content>
</mat-card>

<div class="bottom-bar"></div>
