<template>
  <div v-if="activeSection === 'chart-of-accounts'" class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <h2>Chart of Accounts</h2>
      <div style="display: flex; gap: 10px;">
        <input 
          type="text" 
          :value="accountSearch"
          @input="$emit('search-accounts', $event.target.value)"
          placeholder="Search accounts..." 
          style="padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
        >
        <button class="btn btn-primary" @click="$emit('add-account')">Add New Account</button>
      </div>
    </div>
    
    <div v-if="accountsLoading" class="loading">
      Loading accounts...
    </div>
    
    <div v-else-if="accounts.length === 0" class="loading">
      No accounts found. Create your first account!
    </div>
    
    <div v-else>
      <div class="account-summary">
        <div class="summary-card">
          <h3>Total Assets</h3>
          <p class="amount">{{ formatCurrency(totalAssets) }}</p>
        </div>
        <div class="summary-card">
          <h3>Total Liabilities</h3>
          <p class="amount">{{ formatCurrency(totalLiabilities) }}</p>
        </div>
        <div class="summary-card">
          <h3>Total Equity</h3>
          <p class="amount">{{ formatCurrency(totalEquity) }}</p>
        </div>
      </div>
      
      <table class="table">
        <thead>
          <tr>
            <th>Account Number</th>
            <th>Account Name</th>
            <th>Type</th>
            <th>Category</th>
            <th>Description</th>
            <th>Opening Balance</th>
            <th>Current Balance</th>
            <th>VAT %</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="account in accounts" :key="account.id" :class="{ 'inactive': !account.is_active }">
            <td>{{ account.account_number }}</td>
            <td>{{ account.account_name }}</td>
            <td>
              <span :class="['account-type', account.account_type]">
                {{ formatAccountType(account.account_type) }}
              </span>
            </td>
            <td class="category">{{ getAccountCategory(account.account_type) }}</td>
            <td>{{ account.description || '-' }}</td>
            <td class="currency">{{ formatCurrency(account.opening_balance, 'EUR') }}</td>
            <td class="currency">{{ formatCurrency(account.current_balance, 'EUR') }}</td>
            <td class="vat-percentage">{{ formatVAT(account.vat_percentage) }}</td>
            <td>
              <span :class="['status-badge', account.is_active ? 'active' : 'inactive']">
                {{ account.is_active ? 'Active' : 'Inactive' }}
              </span>
            </td>
            <td>
              <div class="actions">
                <button class="btn btn-primary" @click="$emit('view-account', account)">View</button>
                <button class="btn btn-warning" @click="$emit('edit-account', account)">Edit</button>
                <button class="btn btn-danger" @click="$emit('delete-account', account.id)">Delete</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { formatCurrency, formatDate } from '../../utils/locale.js'

export default {
  name: 'ChartOfAccountsSection',
  props: {
    activeSection: {
      type: String,
      required: true
    },
    accounts: {
      type: Array,
      required: true
    },
    accountsLoading: {
      type: Boolean,
      default: false
    },
    accountSearch: {
      type: String,
      default: ''
    }
  },
  emits: ['add-account', 'view-account', 'edit-account', 'delete-account', 'search-accounts'],
  computed: {
    totalAssets() {
      return this.accounts
        .filter(acc => acc.account_type === 'asset' && acc.is_active)
        .reduce((sum, acc) => sum + parseFloat(acc.current_balance || 0), 0)
    },
    totalLiabilities() {
      return this.accounts
        .filter(acc => acc.account_type === 'liability' && acc.is_active)
        .reduce((sum, acc) => sum + parseFloat(acc.current_balance || 0), 0)
    },
    totalEquity() {
      return this.accounts
        .filter(acc => acc.account_type === 'equity' && acc.is_active)
        .reduce((sum, acc) => sum + parseFloat(acc.current_balance || 0), 0)
    }
  },
  methods: {
    formatCurrency,
    formatDate,
    formatVAT(percentage) {
      if (percentage === null || percentage === undefined || percentage === 0) {
        return '-'
      }
      return `${parseFloat(percentage).toFixed(2)}%`
    },
    formatAccountType(type) {
      const types = {
        'asset': 'Vasta-omaisuus',
        'liability': 'Velat',
        'equity': 'Oma pääoma',
        'revenue': 'Tuotot',
        'expense': 'Kulut'
      }
      return types[type] || type
    },
    getAccountCategory(type) {
      const categories = {
        'asset': '1000-1999',
        'liability': '2000-2999',
        'equity': '3000-3999',
        'revenue': '4000-4999',
        'expense': '5000-5999'
      }
      return categories[type] || type
    }
  }
}
</script>

<style scoped>
.loading {
  text-align: center;
  padding: 40px;
  color: #333;
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.summary-card:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.summary-card:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.summary-card h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.summary-card .amount {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th,
.table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.table tbody tr:hover {
  background-color: #f8f9fa;
}

.table tbody tr.inactive {
  opacity: 0.6;
  background-color: #f8f9fa;
}

.account-type {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.account-type.asset {
  background-color: #e3f2fd;
  color: #1976d2;
}

.account-type.liability {
  background-color: #fce4ec;
  color: #c2185b;
}

.account-type.equity {
  background-color: #e8f5e8;
  color: #388e3c;
}

.account-type.revenue {
  background-color: #fff3e0;
  color: #f57c00;
}

.account-type.expense {
  background-color: #ffebee;
  color: #d32f2f;
}

.currency {
  text-align: right;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.vat-percentage {
  text-align: center;
  font-weight: 600;
  color: #495057;
}

.category {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #6c757d;
  background-color: #f8f9fa;
  padding: 2px 4px;
  border-radius: 3px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.inactive {
  background-color: #f8d7da;
  color: #721c24;
}

.actions {
  display: flex;
  gap: 5px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
}

.btn-warning:hover {
  background-color: #e0a800;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
}
</style>
