<template>
  <div class="irandargah-dashboard-wrap" :data-theme="theme">
    <div class="irandargah-header">
      <div class="irandargah-header-content">
        <h1 class="irandargah-title">
          <svg class="irandargah-title-icon" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 29c-7.18 0-13-5.82-13-13S8.82 3 16 3s13 5.82 13 13-5.82 13-13 13zm-2-20v10l7 4.5L22 19l-6-3.75V9h-4z" fill="currentColor"/>
          </svg>
          درگاه‌های پرداخت ایران
        </h1>
        <div class="irandargah-header-actions">
          <button class="irandargah-theme-toggle" @click="toggleTheme">
            <span class="theme-icon-light">☀️</span>
            <span class="theme-icon-dark">🌙</span>
          </button>
        </div>
      </div>
    </div>

    <div v-if="loading" class="irandargah-loading">در حال بارگذاری...</div>

    <div v-else class="irandargah-gateways-grid">
      <GatewayCard
        v-for="gateway in gateways"
        :key="gateway.id"
        :gateway="gateway"
        @toggle="handleToggle"
      />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import GatewayCard from './components/GatewayCard.vue';
import axios from 'axios';

export default {
  name: 'App',
  components: {
    GatewayCard
  },
  setup() {
    const gateways = ref([]);
    const loading = ref(true);
    const theme = ref('light');

    const loadTheme = () => {
      const savedTheme = localStorage.getItem('irandargah_theme') || 'light';
      theme.value = savedTheme;
      document.documentElement.setAttribute('data-theme', savedTheme);
    };

    const loadGateways = async () => {
      try {
        const response = await axios.get(`${window.irandargahData.restUrl}get-gateways`, {
          headers: {
            'X-WP-Nonce': window.irandargahData.restNonce
          }
        });
        if (response.data.success) {
          gateways.value = response.data.gateways;
        }
      } catch (error) {
        console.error('Error loading gateways:', error);
      } finally {
        loading.value = false;
      }
    };

    const toggleTheme = () => {
      const newTheme = theme.value === 'light' ? 'dark' : 'light';
      theme.value = newTheme;
      localStorage.setItem('irandargah_theme', newTheme);
      document.documentElement.setAttribute('data-theme', newTheme);
    };

    const handleToggle = async (gatewayId, enabled) => {
      try {
        const response = await axios.post(
          `${window.irandargahData.restUrl}toggle-gateway`,
          {
            gateway_id: gatewayId,
            enabled: enabled
          },
          {
            headers: {
              'X-WP-Nonce': window.irandargahData.restNonce
            }
          }
        );
        if (response.data.success) {
          const gateway = gateways.value.find(g => g.id === gatewayId);
          if (gateway) {
            gateway.enabled = enabled ? 'yes' : 'no';
          }
        }
      } catch (error) {
        console.error('Error toggling gateway:', error);
      }
    };

    onMounted(() => {
      loadTheme();
      loadGateways();
    });

    return {
      gateways,
      loading,
      theme,
      toggleTheme,
      handleToggle
    };
  }
};
</script>

<style scoped>
.irandargah-loading {
  text-align: center;
  padding: 3rem;
  font-size: 1.25rem;
  color: var(--irandargah-text-secondary);
}
</style>






