import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
import '@shoelace-style/shoelace/dist/components/select/select.js';
import '@shoelace-style/shoelace/dist/components/option/option.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
import '@shoelace-style/shoelace/dist/components/divider/divider.js';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/badge/badge.js';
import '@shoelace-style/shoelace/dist/components/switch/switch.js';
import './approval-workflow-dialog';
import type { ApprovalWorkflow } from './tool-card';
import type { AccessRule } from '../api';

export interface RuleFormData {
  action: 'allow' | 'deny' | 'require_approval';
  condition_expression: string | null;
  condition_type: 'simple' | 'cel';
  description: string | null;
  is_enabled: boolean;
  approval_workflow_id: string | null;
}

interface SimpleCondition {
  field: string;
  operator: string;
  value: string;
}

@customElement('tool-rule-editor')
export class ToolRuleEditor extends LitElement {
  @property({ type: Boolean }) open = false;
  @property({ type: Object }) rule: AccessRule | null = null;
  @property({ type: String }) toolName = '';
  @property({ type: Array }) workflows: ApprovalWorkflow[] = [];
  @property({ type: Object }) features: { [key: string]: boolean | string[] } =
    {};
  @property({ type: Object }) toolSchema: any = null;

  @state() private _action: 'allow' | 'deny' | 'require_approval' = 'deny';
  @state() private _conditionExpression = '';
  @state() private _conditionType: 'simple' | 'cel' = 'cel';
  @state() private _description = '';
  @state() private _isEnabled = true;
  @state() private _saving = false;
  @state() private _error: string | null = null;

  // Simple condition builder state (OSS: single condition)
  @state() private _simpleField = '';
  @state() private _simpleOperator = '==';
  @state() private _simpleValue = '';

  // Advanced simple conditions (EE: multiple conditions with AND/OR)
  @state() private _conditions: SimpleCondition[] = [
    { field: '', operator: '==', value: '' },
  ];
  @state() private _conditionOperator: 'AND' | 'OR' = 'AND';
  @state() private _useCelEditor = false;

  // Approval workflow state
  @state() private _approvalWorkflowId: string | null = null;
  @state() private _approvalMode: 'human' | 'ai' = 'human';
  @state() private _showWorkflowDialog = false;
  private _initializing = false;

  private get _isEditing(): boolean {
    return this.rule !== null;
  }

  private get _hasAdvancedConditions(): boolean {
    return this.features['advanced_approvals'] === true;
  }

  static styles = css`
    :host {
      display: block;
    }

    /* Ensure dialog panel is fully opaque */
    sl-dialog {
      --sl-panel-background-color: var(--sl-color-neutral-0);
      --sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
    }

    sl-dialog::part(panel) {
      background-color: var(--sl-color-neutral-0, #fff);
      opacity: 1;
    }

    sl-dialog::part(overlay) {
      background-color: hsl(240 3.8% 46.1% / 33%);
    }

    sl-dialog::part(body) {
      background-color: var(--sl-color-neutral-0, #fff);
    }

    .form-group {
      margin-bottom: var(--sl-spacing-medium);
    }

    .form-group label {
      display: block;
      font-size: var(--sl-font-size-small);
      font-weight: var(--sl-font-weight-semibold);
      color: var(--sl-color-neutral-700);
      margin-bottom: var(--sl-spacing-x-small);
    }

    .form-group .hint {
      font-size: var(--sl-font-size-x-small);
      color: var(--sl-color-neutral-500);
      margin-top: var(--sl-spacing-2x-small);
    }

    .action-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sl-spacing-small);
    }

    .action-card {
      border: 2px solid var(--sl-color-neutral-200);
      border-radius: var(--sl-border-radius-medium);
      padding: var(--sl-spacing-medium);
      cursor: pointer;
      text-align: center;
      transition: all 0.15s ease;
      background: var(--sl-color-neutral-0);
    }

    .action-card:hover {
      border-color: var(--sl-color-neutral-400);
    }

    .action-card.selected {
      border-color: var(--sl-color-primary-600);
      background: var(--sl-color-primary-50);
    }

    .action-card.deny.selected {
      border-color: var(--sl-color-danger-600);
      background: var(--sl-color-danger-50);
    }

    .action-card.approval.selected {
      border-color: var(--sl-color-primary-600);
      background: var(--sl-color-primary-50);
    }

    .action-card .action-icon {
      font-size: 1.5rem;
      margin-bottom: var(--sl-spacing-x-small);
    }

    .action-card .action-label {
      font-weight: var(--sl-font-weight-semibold);
      font-size: var(--sl-font-size-small);
    }

    .action-card .action-desc {
      font-size: var(--sl-font-size-x-small);
      color: var(--sl-color-neutral-500);
      margin-top: var(--sl-spacing-2x-small);
    }

    .condition-section {
      background: var(--sl-color-neutral-50);
      border: 1px solid var(--sl-color-neutral-200);
      border-radius: var(--sl-border-radius-medium);
      padding: var(--sl-spacing-medium);
    }

    .simple-condition {
      display: grid;
      grid-template-columns: minmax(140px, 3fr) minmax(100px, 2fr) minmax(
          80px,
          2fr
        );
      gap: var(--sl-spacing-small);
      align-items: end;
    }

    /* Make parameter select dropdown wider than the trigger */
    .param-select::part(listbox) {
      min-width: 220px;
    }

    /* Multi-condition row with delete button */
    .condition-row {
      display: flex;
      align-items: end;
      gap: var(--sl-spacing-x-small);
    }

    .condition-row .simple-condition {
      flex: 1;
    }

    .condition-row sl-icon-button {
      margin-bottom: 4px;
    }

    .condition-join {
      display: flex;
      align-items: center;
      gap: var(--sl-spacing-small);
      margin: var(--sl-spacing-x-small) 0;
      font-size: var(--sl-font-size-x-small);
      color: var(--sl-color-neutral-600);
    }

    .condition-join .join-line {
      flex: 1;
      height: 1px;
      background: var(--sl-color-neutral-300);
    }

    .join-toggle {
      cursor: pointer;
      padding: 2px 8px;
      border-radius: var(--sl-border-radius-pill);
      background: var(--sl-color-neutral-200);
      font-weight: var(--sl-font-weight-semibold);
      user-select: none;
      transition: background 0.1s ease;
    }

    .join-toggle:hover {
      background: var(--sl-color-neutral-300);
    }

    .condition-actions {
      display: flex;
      align-items: center;
      gap: var(--sl-spacing-small);
      margin-top: var(--sl-spacing-small);
    }

    .cel-toggle {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: var(--sl-spacing-x-small);
      font-size: var(--sl-font-size-x-small);
      color: var(--sl-color-neutral-600);
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: var(--sl-spacing-small);
      margin-top: var(--sl-spacing-medium);
    }

    .cel-help {
      margin-top: var(--sl-spacing-small);
      font-size: var(--sl-font-size-x-small);
      color: var(--sl-color-neutral-600);
    }

    .cel-help code {
      background: var(--sl-color-neutral-100);
      padding: 0.1em 0.3em;
      border-radius: 3px;
      font-size: 0.9em;
    }

    .args-list {
      margin-top: var(--sl-spacing-x-small);
      display: flex;
      flex-wrap: wrap;
      gap: var(--sl-spacing-2x-small);
    }

    /* Approval workflow section */
    .approval-section {
      background: var(--sl-color-neutral-50);
      border: 1px solid var(--sl-color-neutral-200);
      border-radius: var(--sl-border-radius-medium);
      padding: var(--sl-spacing-medium);
    }

    .approval-mode-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sl-spacing-small);
      margin-bottom: var(--sl-spacing-medium);
    }

    .approval-mode-card {
      border: 2px solid var(--sl-color-neutral-200);
      border-radius: var(--sl-border-radius-medium);
      padding: var(--sl-spacing-small) var(--sl-spacing-medium);
      cursor: pointer;
      text-align: center;
      transition: all 0.15s ease;
      background: var(--sl-color-neutral-0);
    }

    .approval-mode-card:hover {
      border-color: var(--sl-color-neutral-400);
    }

    .approval-mode-card.selected {
      border-color: var(--sl-color-primary-600);
      background: var(--sl-color-primary-50);
    }

    .approval-mode-card .mode-icon {
      font-size: 1.2rem;
      margin-bottom: 2px;
    }

    .approval-mode-card .mode-label {
      font-weight: var(--sl-font-weight-semibold);
      font-size: var(--sl-font-size-small);
    }

    .workflow-select-row {
      display: flex;
      align-items: end;
      gap: var(--sl-spacing-small);
    }

    .workflow-select-row sl-select {
      flex: 1;
    }
  `;

  updated(changedProperties: Map<string, any>) {
    if (changedProperties.has('open') && this.open) {
      this._initForm();
    }
  }

  private _initForm() {
    this._initializing = true;
    if (this.rule) {
      this._action = this.rule.action as 'allow' | 'deny' | 'require_approval';
      this._conditionExpression = this.rule.condition_expression || '';
      this._conditionType = this.rule.condition_type as 'simple' | 'cel';
      this._description = this.rule.description || '';
      this._isEnabled = this.rule.is_enabled;

      // Approval workflow
      this._approvalWorkflowId = this.rule.approval_workflow_id || null;
      if (this._approvalWorkflowId) {
        const workflow = this.workflows.find(
          (p) => p.id === this._approvalWorkflowId
        );
        this._approvalMode =
          workflow?.approval_type === 'ai_driven' ? 'ai' : 'human';
      } else {
        this._approvalMode = 'human';
      }

      // Try to parse existing CEL expression into simple conditions
      if (this._hasAdvancedConditions && this._conditionExpression) {
        const parsed = this._parseCelExpression(this._conditionExpression);
        if (parsed) {
          this._conditions = parsed.conditions;
          this._conditionOperator = parsed.operator;
          this._useCelEditor = false;
        } else {
          // Expression is too complex for simple editor, fall back to CEL
          this._conditions = [{ field: '', operator: '==', value: '' }];
          this._conditionOperator = 'AND';
          this._useCelEditor = true;
        }
      } else if (!this._hasAdvancedConditions && this._conditionExpression) {
        // OSS mode: try to parse single condition
        const parsed = this._parseSingleCondition(this._conditionExpression);
        if (parsed) {
          this._simpleField = parsed.field;
          this._simpleOperator = parsed.operator;
          this._simpleValue = parsed.value;
        }
        this._useCelEditor = false;
      } else {
        this._conditions = [{ field: '', operator: '==', value: '' }];
        this._conditionOperator = 'AND';
        this._useCelEditor = false;
      }
    } else {
      this._action = 'deny';
      this._conditionExpression = '';
      this._conditionType = this._hasAdvancedConditions ? 'cel' : 'simple';
      this._description = '';
      this._isEnabled = true;
      this._simpleField = '';
      this._simpleOperator = '==';
      this._simpleValue = '';
      this._conditions = [{ field: '', operator: '==', value: '' }];
      this._conditionOperator = 'AND';
      this._useCelEditor = false;
      this._approvalWorkflowId = null;
      this._approvalMode = 'human';
    }
    this._showWorkflowDialog = false;
    this._error = null;
    this._saving = false;
    // Clear the guard after Shoelace has processed slotted options
    this.updateComplete.then(() => {
      this._initializing = false;
    });
  }

  /**
   * Parse a single CEL condition like `args.field == "value"` or `args.field > 100`
   */
  private _parseSingleCondition(expr: string): SimpleCondition | null {
    // Match: args.FIELD OP VALUE
    const match = expr
      .trim()
      .match(
        /^args\.(\w+)\s*(==|!=|>=|<=|>|<)\s*(?:"([^"]*)"|(\d+(?:\.\d+)?))$/
      );
    if (match) {
      return {
        field: match[1],
        operator: match[2],
        value: match[3] ?? match[4],
      };
    }

    // Match: args.FIELD.contains("value")
    const containsMatch = expr
      .trim()
      .match(/^args\.(\w+)\.contains\("([^"]*)"\)$/);
    if (containsMatch) {
      return {
        field: containsMatch[1],
        operator: 'contains',
        value: containsMatch[2],
      };
    }

    // Match: args.FIELD.startsWith("value")
    const startsMatch = expr
      .trim()
      .match(/^args\.(\w+)\.startsWith\("([^"]*)"\)$/);
    if (startsMatch) {
      return {
        field: startsMatch[1],
        operator: 'starts_with',
        value: startsMatch[2],
      };
    }

    // Match: args.FIELD.endsWith("value")
    const endsMatch = expr.trim().match(/^args\.(\w+)\.endsWith\("([^"]*)"\)$/);
    if (endsMatch) {
      return {
        field: endsMatch[1],
        operator: 'ends_with',
        value: endsMatch[2],
      };
    }

    return null;
  }

  /**
   * Parse a CEL expression into multiple simple conditions joined by && or ||
   */
  private _parseCelExpression(
    expr: string
  ): { conditions: SimpleCondition[]; operator: 'AND' | 'OR' } | null {
    // Try splitting by && first, then ||
    for (const [separator, op] of [
      [' && ', 'AND'],
      [' || ', 'OR'],
    ] as const) {
      const parts = expr.split(separator);
      const conditions: SimpleCondition[] = [];
      let allParsed = true;

      for (const part of parts) {
        const parsed = this._parseSingleCondition(part.trim());
        if (parsed) {
          conditions.push(parsed);
        } else {
          allParsed = false;
          break;
        }
      }

      if (allParsed && conditions.length > 0) {
        return { conditions, operator: op };
      }
    }

    // Single condition (no separator)
    const single = this._parseSingleCondition(expr.trim());
    if (single) {
      return { conditions: [single], operator: 'AND' };
    }

    return null;
  }

  private _getToolArguments(): string[] {
    if (!this.toolSchema?.properties) return [];
    return Object.keys(this.toolSchema.properties);
  }

  private _buildSimpleExpression(): string {
    if (!this._simpleField || !this._simpleValue) return '';
    return this._buildConditionExpression(
      this._simpleField,
      this._simpleOperator,
      this._simpleValue
    );
  }

  private _buildConditionExpression(
    field: string,
    operator: string,
    value: string
  ): string {
    if (!field || !value) return '';

    const fieldRef = `args.${field}`;
    const numVal = Number(value);
    const isNumber = !isNaN(numVal) && value.trim() !== '';

    switch (operator) {
      case '==':
        return isNumber
          ? `${fieldRef} == ${numVal}`
          : `${fieldRef} == "${value}"`;
      case '!=':
        return isNumber
          ? `${fieldRef} != ${numVal}`
          : `${fieldRef} != "${value}"`;
      case '>':
        return `${fieldRef} > ${isNumber ? numVal : `"${value}"`}`;
      case '>=':
        return `${fieldRef} >= ${isNumber ? numVal : `"${value}"`}`;
      case '<':
        return `${fieldRef} < ${isNumber ? numVal : `"${value}"`}`;
      case '<=':
        return `${fieldRef} <= ${isNumber ? numVal : `"${value}"`}`;
      case 'contains':
        return `${fieldRef}.contains("${value}")`;
      case 'starts_with':
        return `${fieldRef}.startsWith("${value}")`;
      case 'ends_with':
        return `${fieldRef}.endsWith("${value}")`;
      default:
        return `${fieldRef} ${operator} "${value}"`;
    }
  }

  private _buildMultiConditionExpression(): string {
    const parts = this._conditions
      .map((c) => this._buildConditionExpression(c.field, c.operator, c.value))
      .filter((p) => p.length > 0);
    if (parts.length === 0) return '';
    if (parts.length === 1) return parts[0];
    const joiner = this._conditionOperator === 'AND' ? ' && ' : ' || ';
    return parts.join(joiner);
  }

  private _addCondition() {
    this._conditions = [
      ...this._conditions,
      { field: '', operator: '==', value: '' },
    ];
  }

  private _removeCondition(index: number) {
    if (this._conditions.length <= 1) return;
    this._conditions = this._conditions.filter((_, i) => i !== index);
  }

  private _updateCondition(
    index: number,
    key: keyof SimpleCondition,
    value: string
  ) {
    this._conditions = this._conditions.map((c, i) =>
      i === index ? { ...c, [key]: value } : c
    );
  }

  private _toggleJoinOperator() {
    this._conditionOperator = this._conditionOperator === 'AND' ? 'OR' : 'AND';
  }

  private _handleSave() {
    let conditionExpr: string | null = null;

    if (this._hasAdvancedConditions) {
      if (this._useCelEditor) {
        conditionExpr = this._conditionExpression.trim() || null;
      } else {
        conditionExpr = this._buildMultiConditionExpression() || null;
      }
    } else {
      // OSS simple mode
      conditionExpr = this._buildSimpleExpression() || null;
    }

    // Read the workflow select value directly from the DOM as a safety net
    // in case sl-change events were suppressed during initialization.
    let approvalWorkflowId: string | null = this._approvalWorkflowId;
    if (this._action === 'require_approval') {
      const workflowSelect = this.shadowRoot?.querySelector(
        '.workflow-select-row sl-select'
      ) as any;
      if (workflowSelect) {
        approvalWorkflowId = workflowSelect.value || null;
      }
    } else {
      approvalWorkflowId = null;
    }

    const formData: RuleFormData = {
      action: this._action,
      condition_expression: conditionExpr,
      condition_type: conditionExpr ? 'cel' : 'simple',
      description: this._description.trim() || null,
      is_enabled: this._isEnabled,
      approval_workflow_id: approvalWorkflowId,
    };

    this.dispatchEvent(
      new CustomEvent('save-rule', {
        detail: {
          rule: this.rule,
          formData,
        },
        bubbles: true,
        composed: true,
      })
    );
  }

  private _handleClose() {
    this.dispatchEvent(
      new CustomEvent('close', { bubbles: true, composed: true })
    );
  }

  private _renderOperatorSelect(
    value: string,
    onChange: (val: string) => void
  ) {
    return html`
      <sl-select
        size="small"
        value=${value}
        @sl-change=${(e: Event) => onChange((e.target as any).value)}
      >
        <sl-option value="==">equals</sl-option>
        <sl-option value="!=">not equals</sl-option>
        <sl-option value=">">greater than</sl-option>
        <sl-option value=">=">greater or equal</sl-option>
        <sl-option value="<">less than</sl-option>
        <sl-option value="<=">less or equal</sl-option>
        <sl-option value="contains">contains</sl-option>
        <sl-option value="starts_with">starts with</sl-option>
        <sl-option value="ends_with">ends with</sl-option>
      </sl-select>
    `;
  }

  private _renderFieldInput(value: string, onChange: (val: string) => void) {
    const args = this._getToolArguments();
    if (args.length > 0) {
      return html`
        <sl-select
          class="param-select"
          size="small"
          value=${value}
          @sl-change=${(e: Event) => onChange((e.target as any).value)}
          placeholder="Select parameter"
        >
          ${args.map((arg) => html`<sl-option value=${arg}>${arg}</sl-option>`)}
        </sl-select>
      `;
    }
    return html`
      <sl-input
        size="small"
        value=${value}
        @sl-input=${(e: Event) => onChange((e.target as any).value)}
        placeholder="e.g., command"
      ></sl-input>
    `;
  }

  private _renderConditionEditor() {
    if (!this._hasAdvancedConditions) {
      // Simple mode (OSS): single condition
      return html`
        <div class="condition-section">
          <div class="simple-condition">
            <div>
              <label>Parameter</label>
              ${this._renderFieldInput(
                this._simpleField,
                (v) => (this._simpleField = v)
              )}
            </div>
            <div>
              <label>Operator</label>
              ${this._renderOperatorSelect(
                this._simpleOperator,
                (v) => (this._simpleOperator = v)
              )}
            </div>
            <div>
              <label>Value</label>
              <sl-input
                size="small"
                value=${this._simpleValue}
                @sl-input=${(e: Event) =>
                  (this._simpleValue = (e.target as any).value)}
                placeholder="e.g., production"
              ></sl-input>
            </div>
          </div>
          ${this._simpleField && this._simpleValue
            ? html`<div
                class="cel-help"
                style="margin-top: var(--sl-spacing-small);"
              >
                Expression: <code>${this._buildSimpleExpression()}</code>
              </div>`
            : ''}
        </div>
      `;
    }

    // Advanced mode (EE)
    if (this._useCelEditor) {
      return this._renderCelEditor();
    }

    return this._renderMultiConditionEditor();
  }

  private _renderMultiConditionEditor() {
    const args = this._getToolArguments();
    const builtExpr = this._buildMultiConditionExpression();

    return html`
      <div class="condition-section">
        ${this._conditions.map((cond, i) => {
          const isLast = i === this._conditions.length - 1;
          return html`
            <div class="condition-row">
              <div class="simple-condition">
                <div>
                  ${i === 0 ? html`<label>Parameter</label>` : ''}
                  ${this._renderFieldInput(cond.field, (v) =>
                    this._updateCondition(i, 'field', v)
                  )}
                </div>
                <div>
                  ${i === 0 ? html`<label>Operator</label>` : ''}
                  ${this._renderOperatorSelect(cond.operator, (v) =>
                    this._updateCondition(i, 'operator', v)
                  )}
                </div>
                <div>
                  ${i === 0 ? html`<label>Value</label>` : ''}
                  <sl-input
                    size="small"
                    value=${cond.value}
                    @sl-input=${(e: Event) =>
                      this._updateCondition(
                        i,
                        'value',
                        (e.target as any).value
                      )}
                    placeholder="e.g., production"
                  ></sl-input>
                </div>
              </div>
              ${this._conditions.length > 1
                ? html`<sl-icon-button
                    name="x-lg"
                    label="Remove condition"
                    style="font-size: 0.75rem;"
                    @click=${() => this._removeCondition(i)}
                  ></sl-icon-button>`
                : ''}
            </div>
            ${!isLast
              ? html`
                  <div class="condition-join">
                    <span class="join-line"></span>
                    <span
                      class="join-toggle"
                      @click=${() => this._toggleJoinOperator()}
                      >${this._conditionOperator}</span
                    >
                    <span class="join-line"></span>
                  </div>
                `
              : ''}
          `;
        })}

        <div class="condition-actions">
          <sl-button
            size="small"
            variant="text"
            @click=${() => this._addCondition()}
          >
            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
            Add condition
          </sl-button>
          <span class="cel-toggle">
            <sl-switch
              size="small"
              ?checked=${this._useCelEditor}
              @sl-change=${(e: Event) => {
                const checked = (e.target as any).checked;
                if (checked) {
                  // Pre-populate CEL editor with the built expression
                  this._conditionExpression = builtExpr;
                }
                this._useCelEditor = checked;
              }}
            >
              CEL editor
            </sl-switch>
          </span>
        </div>

        ${builtExpr
          ? html`<div
              class="cel-help"
              style="margin-top: var(--sl-spacing-small);"
            >
              Expression: <code>${builtExpr}</code>
            </div>`
          : ''}
      </div>
    `;
  }

  private _renderCelEditor() {
    const args = this._getToolArguments();

    return html`
      <div class="condition-section">
        <sl-textarea
          label="CEL Expression"
          size="small"
          rows="3"
          value=${this._conditionExpression}
          @sl-input=${(e: Event) =>
            (this._conditionExpression = (e.target as any).value)}
          placeholder='e.g., args.amount > 1000 && args.currency == "USD"'
          help-text="Leave empty for a catch-all rule (matches all calls)"
        ></sl-textarea>
        <div class="cel-help">
          <strong>Available variables:</strong> <code>args.*</code> (tool
          arguments), <code>tool_name</code>, <code>user_id</code><br />
          <strong>Examples:</strong>
          <code>args.command.contains("rm")</code>,
          <code>args.amount > 100</code>,
          <code>args.env == "production"</code>
        </div>
        ${args.length > 0
          ? html`
              <div class="args-list">
                <strong
                  style="font-size: var(--sl-font-size-x-small); color: var(--sl-color-neutral-600);"
                  >Tool parameters:</strong
                >
                ${args.map(
                  (arg) =>
                    html`<sl-badge variant="neutral" pill>${arg}</sl-badge>`
                )}
              </div>
            `
          : ''}

        <div class="condition-actions">
          <span class="cel-toggle">
            <sl-switch
              size="small"
              ?checked=${this._useCelEditor}
              @sl-change=${() => (this._useCelEditor = false)}
            >
              CEL editor
            </sl-switch>
          </span>
        </div>
      </div>
    `;
  }

  private _renderApprovalSection() {
    const hasAdvanced = this._hasAdvancedConditions;
    const humanWorkflows = this.workflows.filter(
      (p) => p.approval_type !== 'ai_driven'
    );
    const aiWorkflows = this.workflows.filter(
      (p) => p.approval_type === 'ai_driven'
    );

    return html`
      <div class="form-group">
        <label>Approval Configuration</label>
        <div class="approval-section">
          ${hasAdvanced
            ? html`
                <div class="approval-mode-cards">
                  <div
                    class="approval-mode-card ${this._approvalMode === 'human'
                      ? 'selected'
                      : ''}"
                    @click=${() => {
                      this._approvalMode = 'human';
                      this._approvalWorkflowId = null;
                    }}
                  >
                    <div class="mode-icon">
                      <sl-icon name="person-check"></sl-icon>
                    </div>
                    <div class="mode-label">Human Approval</div>
                  </div>
                  <div
                    class="approval-mode-card ${this._approvalMode === 'ai'
                      ? 'selected'
                      : ''}"
                    @click=${() => {
                      this._approvalMode = 'ai';
                      this._approvalWorkflowId = null;
                    }}
                  >
                    <div class="mode-icon">
                      <sl-icon name="robot"></sl-icon>
                    </div>
                    <div class="mode-label">AI Approval</div>
                  </div>
                </div>
              `
            : ''}

          <div class="workflow-select-row">
            <sl-select
              size="small"
              hoist
              placeholder="Select an approval workflow..."
              .value=${this._approvalWorkflowId || ''}
              clearable
              @sl-change=${(e: Event) => {
                if (this._initializing) return;
                const val = (e.target as any).value;
                this._approvalWorkflowId = val || null;
              }}
              @sl-clear=${() => {
                this._approvalWorkflowId = null;
              }}
            >
              ${this._approvalMode === 'ai'
                ? html`
                    ${aiWorkflows.length === 0
                      ? html`<sl-option disabled value=""
                          >No AI workflows — create one below</sl-option
                        >`
                      : aiWorkflows.map(
                          (p) =>
                            html`<sl-option value=${p.id}>${p.name}</sl-option>`
                        )}
                  `
                : html`
                    ${humanWorkflows.length === 0
                      ? html`<sl-option disabled value=""
                          >No workflows — create one below</sl-option
                        >`
                      : humanWorkflows.map(
                          (p) =>
                            html`<sl-option value=${p.id}>${p.name}</sl-option>`
                        )}
                  `}
            </sl-select>
            <sl-button
              size="small"
              variant="text"
              @click=${() => {
                this._showWorkflowDialog = true;
              }}
            >
              <sl-icon slot="prefix" name="plus-lg"></sl-icon>
              New
            </sl-button>
          </div>

          ${this._approvalMode === 'ai' &&
          hasAdvanced &&
          !this._approvalWorkflowId
            ? html`<div
                class="hint"
                style="margin-top: var(--sl-spacing-small);"
              >
                Select an existing AI workflow or create a new one to configure
                model, prompt, confidence threshold, and fallback behavior.
              </div>`
            : ''}
        </div>
      </div>
    `;
  }

  private _handleWorkflowDialogSaved(e: CustomEvent) {
    e.stopPropagation();
    const savedWorkflow = e.detail?.workflow;
    this._showWorkflowDialog = false;

    if (savedWorkflow?.id) {
      // Add the new workflow to the local list immediately so the sl-select
      // has a matching option before the parent's async refresh completes.
      if (!this.workflows.find((p) => p.id === savedWorkflow.id)) {
        this.workflows = [...this.workflows, savedWorkflow];
      }
      // Auto-select the newly created workflow
      this._approvalWorkflowId = savedWorkflow.id;
      // Detect approval mode from the saved workflow type
      this._approvalMode =
        savedWorkflow.approval_type === 'ai_driven' ? 'ai' : 'human';
    }

    // Notify parent to refresh the workflows list
    this.dispatchEvent(
      new CustomEvent('workflow-created', {
        bubbles: true,
        composed: true,
      })
    );
  }

  private _handleWorkflowDialogClose(e: Event) {
    e.stopPropagation();
    this._showWorkflowDialog = false;
  }

  render() {
    return html`
      <sl-dialog
        label="${this._isEditing ? 'Edit' : 'Add'} Access Rule${this.toolName
          ? ` — ${this.toolName}`
          : ''}"
        ?open=${this.open}
        @sl-request-close=${this._handleClose}
        style="--width: 560px; --sl-panel-background-color: var(--sl-color-neutral-0);"
      >
        ${this._error
          ? html`<sl-alert
              variant="danger"
              open
              closable
              @sl-after-hide=${() => (this._error = null)}
            >
              <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
              ${this._error}
            </sl-alert>`
          : ''}

        <div class="form-group">
          <label>Action</label>
          <div class="action-cards">
            <div
              class="action-card deny ${this._action === 'deny'
                ? 'selected'
                : ''}"
              @click=${() => (this._action = 'deny')}
            >
              <div class="action-icon">
                <sl-icon
                  name="x-octagon-fill"
                  style="font-size: 1.5rem; color: var(--sl-color-danger-500);"
                ></sl-icon>
              </div>
              <div class="action-label">Deny</div>
              <div class="action-desc">Block execution</div>
            </div>
            <div
              class="action-card approval ${this._action === 'require_approval'
                ? 'selected'
                : ''}"
              @click=${() => (this._action = 'require_approval')}
            >
              <div class="action-icon">
                <sl-icon
                  name="shield-lock-fill"
                  style="font-size: 1.5rem; color: var(--sl-color-primary-500);"
                ></sl-icon>
              </div>
              <div class="action-label">Require Approval</div>
              <div class="action-desc">Human or AI review</div>
            </div>
            <div
              class="action-card ${this._action === 'allow' ? 'selected' : ''}"
              @click=${() => (this._action = 'allow')}
            >
              <div class="action-icon">
                <sl-icon
                  name="check-circle-fill"
                  style="font-size: 1.5rem; color: var(--sl-color-success-500);"
                ></sl-icon>
              </div>
              <div class="action-label">Allow</div>
              <div class="action-desc">Execute freely</div>
            </div>
          </div>
        </div>

        ${this._action === 'require_approval'
          ? this._renderApprovalSection()
          : ''}

        <sl-divider></sl-divider>

        <div class="form-group">
          <label>Condition (when does this rule apply?)</label>
          <div class="hint">
            Leave empty for a catch-all rule that matches all calls.
          </div>
          ${this._renderConditionEditor()}
        </div>

        ${this._action === 'deny'
          ? html`
              <div class="form-group">
                <sl-textarea
                  label="Denial Message"
                  size="small"
                  rows="2"
                  value=${this._description}
                  @sl-input=${(e: Event) =>
                    (this._description = (e.target as any).value)}
                  placeholder="This operation is not allowed because..."
                  help-text="This message is returned to the AI agent when the call is denied."
                ></sl-textarea>
              </div>
            `
          : ''}
        ${this._action === 'require_approval'
          ? html`
              <div class="form-group">
                <sl-input
                  label="Description"
                  size="small"
                  value=${this._description}
                  @sl-input=${(e: Event) =>
                    (this._description = (e.target as any).value)}
                  placeholder="e.g., High-value transaction review"
                  help-text="Helps approvers understand why this rule exists."
                ></sl-input>
              </div>
            `
          : ''}
        ${this._action === 'allow'
          ? html`
              <div class="form-group">
                <sl-input
                  label="Description (optional)"
                  size="small"
                  value=${this._description}
                  @sl-input=${(e: Event) =>
                    (this._description = (e.target as any).value)}
                  placeholder="e.g., Low-risk read-only operations"
                ></sl-input>
              </div>
            `
          : ''}

        <div class="dialog-footer">
          <sl-button variant="default" @click=${this._handleClose}>
            Cancel
          </sl-button>
          <sl-button
            variant="primary"
            ?loading=${this._saving}
            @click=${this._handleSave}
          >
            ${this._isEditing ? 'Update Rule' : 'Add Rule'}
          </sl-button>
        </div>
      </sl-dialog>

      <approval-workflow-dialog
        ?open=${this._showWorkflowDialog}
        .existingPolicies=${this.workflows}
        .features=${this.features}
        @saved=${this._handleWorkflowDialogSaved}
        @close=${this._handleWorkflowDialogClose}
      ></approval-workflow-dialog>
    `;
  }
}
