<template>
  <div class="irandargah-gateway-card" :data-gateway-id="gateway.id">
    <div class="irandargah-gateway-card-header">
      <div class="irandargah-gateway-icon" v-html="gateway.icon"></div>
      <div class="irandargah-gateway-info">
        <h2 class="irandargah-gateway-title">{{ gateway.title }}</h2>
        <p class="irandargah-gateway-description">{{ gateway.description }}</p>
      </div>
      <div class="irandargah-gateway-toggle-wrapper">
        <ToggleSwitch
          :checked="gateway.enabled === 'yes'"
          @change="handleToggle"
        />
      </div>
    </div>

    <div class="irandargah-gateway-status">
      <span :class="['irandargah-status-badge', gateway.enabled === 'yes' ? 'irandargah-status-active' : 'irandargah-status-inactive']">
        {{ gateway.enabled === 'yes' ? 'فعال' : 'غیرفعال' }}
      </span>
      <span v-if="gateway.sandbox === 'yes'" class="irandargah-sandbox-badge">حالت آزمایشی</span>
    </div>

    <div class="irandargah-gateway-actions">
      <button
        class="irandargah-btn irandargah-btn-primary irandargah-settings-toggle"
        @click="showSettings = !showSettings"
      >
        <span class="btn-icon">⚙️</span>
        تنظیمات بیشتر
      </button>
    </div>

    <div v-if="showSettings" class="irandargah-gateway-settings">
      <SettingsForm :gateway="gateway" @close="showSettings = false" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import ToggleSwitch from './ToggleSwitch.vue';
import SettingsForm from './SettingsForm.vue';

export default {
  name: 'GatewayCard',
  components: {
    ToggleSwitch,
    SettingsForm
  },
  props: {
    gateway: {
      type: Object,
      required: true
    }
  },
  emits: ['toggle'],
  setup(props, { emit }) {
    const showSettings = ref(false);

    const handleToggle = (checked) => {
      emit('toggle', props.gateway.id, checked);
    };

    return {
      showSettings,
      handleToggle
    };
  }
};
</script>






