<template>
  <div class="card">
    <div class="section-header">
      <h2>Tuloslaskelma</h2>
      <div class="header-actions">
        <select v-model="selectedPeriod" @change="loadTuloslaskelma" class="period-selector">
          <option value="current">Nykyinen kausi</option>
          <option value="month">Kuukausi</option>
          <option value="quarter">Neljännes</option>
          <option value="year">Vuosi</option>
        </select>
        <input 
          type="month" 
          v-model="selectedMonth" 
          v-if="selectedPeriod === 'month'"
          @change="loadTuloslaskelma"
          class="month-input"
        >
        <input 
          type="number" 
          v-model="selectedYear" 
          v-if="selectedPeriod === 'year'"
          @change="loadTuloslaskelma"
          placeholder="Vuosi"
          min="2020"
          max="2030"
          class="year-input"
        >
        <select 
          v-model="selectedQuarter" 
          v-if="selectedPeriod === 'quarter'"
          @change="loadTuloslaskelma"
          class="quarter-input"
        >
          <option value="1">Q1 (Tammi-Maaliskuu)</option>
          <option value="2">Q2 (Huhti-Kesäkuu)</option>
          <option value="3">Q3 (Heinä-Syyskuu)</option>
          <option value="4">Q4 (Loka-Joulukuu)</option>
        </select>
        <button class="btn btn-primary" @click="exportToPDF">Export PDF</button>
        <button class="btn btn-secondary" @click="printReport">Tulosta</button>
      </div>
    </div>

    <div v-if="loading" class="loading">
      Ladataan tuloslaskelmaa...
    </div>

    <div v-else class="tuloslaskelma-container">
      <!-- Header Information -->
      <div class="report-header">
        <div class="company-info">
          <h3>{{ companyName || 'Yritys Oy' }}</h3>
          <p>Y-tunnus: {{ companyYtunnus || '1234567-8' }}</p>
        </div>
        <div class="period-info">
          <h4>Tuloslaskelma</h4>
          <p>{{ periodDescription }}</p>
        </div>
      </div>

      <!-- Profit and Loss Statement Table -->
      <table class="tuloslaskelma-table">
        <thead>
          <tr>
            <th>Tili</th>
            <th>Kuvaus</th>
            <th class="amount-column">Edellinen kausi</th>
            <th class="amount-column">Nykyinen kausi</th>
            <th class="amount-column">Muutos €</th>
            <th class="amount-column">Muutos %</th>
          </tr>
        </thead>
        <tbody>
          <!-- MYYNTITULOT (Sales Revenue) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">MYYNTITULOT</td>
          </tr>
          <template v-for="item in salesRevenue" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Myyntitulot yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(salesRevenueTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(salesRevenueTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(salesRevenueTotal.change)">{{ formatCurrency(salesRevenueTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(salesRevenueTotal.changePercent)">{{ formatPercent(salesRevenueTotal.changePercent) }}</td>
          </tr>

          <!-- MUUT TULOT (Other Revenue) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">MUUT TULOT</td>
          </tr>
          <template v-for="item in otherRevenue" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Muut tuotot yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(otherRevenueTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(otherRevenueTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(otherRevenueTotal.change)">{{ formatCurrency(otherRevenueTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(otherRevenueTotal.changePercent)">{{ formatPercent(otherRevenueTotal.changePercent) }}</td>
          </tr>

          <!-- TULOT YHTEENSÄ (Total Revenue) -->
          <tr class="total-row revenue">
            <td colspan="2">TULOT YHTEENSÄ</td>
            <td class="amount total">{{ formatCurrency(totalRevenue.previous) }}</td>
            <td class="amount total">{{ formatCurrency(totalRevenue.current) }}</td>
            <td class="amount total" :class="getChangeClass(totalRevenue.change)">{{ formatCurrency(totalRevenue.change) }}</td>
            <td class="amount total" :class="getChangeClass(totalRevenue.changePercent)">{{ formatPercent(totalRevenue.changePercent) }}</td>
          </tr>

          <!-- AINEKSIEN KÄYTTÖ JA PALVELUT (Cost of Goods Sold and Services) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">ELINKEINOTOIMINNAN KULUT</td>
          </tr>
          <template v-for="item in costOfGoods" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Ostot ja palvelut yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(costOfGoodsTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(costOfGoodsTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(costOfGoodsTotal.change)">{{ formatCurrency(costOfGoodsTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(costOfGoodsTotal.changePercent)">{{ formatPercent(costOfGoodsTotal.changePercent) }}</td>
          </tr>

          <!-- BRUTTOKATTO (Gross Profit) -->
          <tr class="total-row gross-profit">
            <td colspan="2">BRUTTOKATE</td>
            <td class="amount total">{{ formatCurrency(grossProfit.previous) }}</td>
            <td class="amount total">{{ formatCurrency(grossProfit.current) }}</td>
            <td class="amount total" :class="getChangeClass(grossProfit.change)">{{ formatCurrency(grossProfit.change) }}</td>
            <td class="amount total" :class="getChangeClass(grossProfit.changePercent)">{{ formatPercent(grossProfit.changePercent) }}</td>
          </tr>

          <!-- PERSONALIKULUT (Personnel Expenses) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">HENKILÖSTÖKULUT</td>
          </tr>
          <template v-for="item in personnelExpenses" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Henkilöstökulut yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(personnelExpensesTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(personnelExpensesTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(personnelExpensesTotal.change)">{{ formatCurrency(personnelExpensesTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(personnelExpensesTotal.changePercent)">{{ formatPercent(personnelExpensesTotal.changePercent) }}</td>
          </tr>

          <!-- MUUT MENOT (Other Expenses) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">MUUT MENOT</td>
          </tr>
          <template v-for="item in otherExpenses" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Muut menot yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(otherExpensesTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(otherExpensesTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(otherExpensesTotal.change)">{{ formatCurrency(otherExpensesTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(otherExpensesTotal.changePercent)">{{ formatPercent(otherExpensesTotal.changePercent) }}</td>
          </tr>

          <!-- POISTOT JA ALASKENNAUKSET (Depreciation and Write-downs) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">POISTOT JA ALASKIRJAUKSET</td>
          </tr>
          <template v-for="item in depreciation" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Poistot ja alaskirjaukset yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(depreciationTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(depreciationTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(depreciationTotal.change)">{{ formatCurrency(depreciationTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(depreciationTotal.changePercent)">{{ formatPercent(depreciationTotal.changePercent) }}</td>
          </tr>

          <!-- MENOT YHTEENSÄ (Total Expenses) -->
          <tr class="total-row expenses">
            <td colspan="2">MENOT YHTEENSÄ</td>
            <td class="amount total">{{ formatCurrency(totalExpenses.previous) }}</td>
            <td class="amount total">{{ formatCurrency(totalExpenses.current) }}</td>
            <td class="amount total" :class="getChangeClass(totalExpenses.change)">{{ formatCurrency(totalExpenses.change) }}</td>
            <td class="amount total" :class="getChangeClass(totalExpenses.changePercent)">{{ formatPercent(totalExpenses.changePercent) }}</td>
          </tr>

          <!-- TULOS ENNEN VEROTUSTA (Profit Before Tax) -->
          <tr class="total-row profit-before-tax">
            <td colspan="2">TULOS ENNEN VEROJA</td>
            <td class="amount total">{{ formatCurrency(profitBeforeTax.previous) }}</td>
            <td class="amount total">{{ formatCurrency(profitBeforeTax.current) }}</td>
            <td class="amount total" :class="getChangeClass(profitBeforeTax.change)">{{ formatCurrency(profitBeforeTax.change) }}</td>
            <td class="amount total" :class="getChangeClass(profitBeforeTax.changePercent)">{{ formatPercent(profitBeforeTax.changePercent) }}</td>
          </tr>

          <!-- TULOVEROT (Tax Expenses) -->
          <tr class="category-header">
            <td colspan="6" class="category-title">TULOVEROT</td>
          </tr>
          <template v-for="item in taxExpenses" :key="item.code">
            <tr class="group-header" v-if="item.isGroup">
              <td colspan="6" class="account-group-name">{{ item.name }}</td>
            </tr>
            <tr>
              <td class="account-indent">{{ item.code }}</td>
              <td class="account-name">{{ item.name }}</td>
              <td class="amount">{{ formatCurrency(item.previousAmount || 0) }}</td>
              <td class="amount">{{ formatCurrency(item.currentAmount || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.change)">{{ formatCurrency(item.change || 0) }}</td>
              <td class="amount" :class="getChangeClass(item.changePercent)">{{ formatPercent(item.changePercent || 0) }}</td>
            </tr>
          </template>
          <tr class="subtotal-row">
            <td colspan="2">Tuloverot yhteensä</td>
            <td class="amount subtotal">{{ formatCurrency(taxExpensesTotal.previous) }}</td>
            <td class="amount subtotal">{{ formatCurrency(taxExpensesTotal.current) }}</td>
            <td class="amount subtotal" :class="getChangeClass(taxExpensesTotal.change)">{{ formatCurrency(taxExpensesTotal.change) }}</td>
            <td class="amount subtotal" :class="getChangeClass(taxExpensesTotal.changePercent)">{{ formatPercent(taxExpensesTotal.changePercent) }}</td>
          </tr>

          <!-- TILINPÄÄTÖSTULOS (Net Profit) -->
          <tr class="total-row net-profit">
            <td colspan="2">TILINPÄÄTÖSTULOS</td>
            <td class="amount total">{{ formatCurrency(netProfit.previous) }}</td>
            <td class="amount total">{{ formatCurrency(netProfit.current) }}</td>
            <td class="amount total" :class="getChangeClass(netProfit.change)">{{ formatCurrency(netProfit.change) }}</td>
            <td class="amount total" :class="getChangeClass(netProfit.changePercent)">{{ formatPercent(netProfit.changePercent) }}</td>
          </tr>
        </tbody>
      </table>

      <!-- Summary Cards -->
      <div class="summary-cards">
        <div class="summary-card revenue">
          <h3>Kokonaistuotto</h3>
          <p class="amount">{{ formatCurrency(totalRevenue.current) }}</p>
          <p class="change" :class="getChangeClass(totalRevenue.changePercent)">
            {{ formatPercent(totalRevenue.changePercent) }} edelliseen kauteen
          </p>
        </div>
        <div class="summary-card expenses">
          <h3>Kulut yhteensä</h3>
          <p class="amount">{{ formatCurrency(totalExpenses.current) }}</p>
          <p class="change" :class="getChangeClass(totalExpenses.changePercent)">
            {{ formatPercent(totalExpenses.changePercent) }} edelliseen kauteen
          </p>
        </div>
        <div class="summary-card profit">
          <h3>Tilinpäätöstulos</h3>
          <p class="amount">{{ formatCurrency(netProfit.current) }}</p>
          <p class="change" :class="getChangeClass(netProfit.changePercent)">
            {{ formatPercent(netProfit.changePercent) }} edelliseen kauteen
          </p>
        </div>
        <div class="summary-card margin">
          <h3>Kate (%)</h3>
          <p class="amount">{{ formatPercent(grossMargin) }}</p>
          <p class="change" :class="getChangeClass(grossMarginChange)">
            {{ formatPercent(grossMarginChange) }} edelliseen kauteen
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'TuloslaskelmaSection',
  props: {
    activeSection: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      selectedPeriod: 'current',
      selectedMonth: new Date().toISOString().slice(0, 7),
      selectedYear: new Date().getFullYear(),
      selectedQuarter: Math.ceil((new Date().getMonth() + 1) / 3),
      companyName: '',
      companyYtunnus: '',
      tuloslaskelmaData: null,
      
      // Data from API
      salesRevenue: [],
      otherRevenue: [],
      costOfGoods: [],
      personnelExpenses: [],
      otherExpenses: [],
      depreciation: [],
      taxExpenses: []
    }
  },
  computed: {
    periodDescription() {
      switch (this.selectedPeriod) {
        case 'current':
          return 'Nykyinen kausi'
        case 'month':
          return `Kuukausi: ${this.formatMonth(this.selectedMonth)}`
        case 'quarter':
          return `Neljännes: ${this.selectedYear}`
        case 'year':
          return `Vuosi: ${this.selectedYear}`
        default:
          return 'Nykyinen kausi'
      }
    },
    
    // Calculate totals
    salesRevenueTotal() {
      return this.calculateTotal(this.salesRevenue || [])
    },
    
    otherRevenueTotal() {
      return this.calculateTotal(this.otherRevenue || [])
    },
    
    totalRevenue() {
      return this.calculateTotal([...(this.salesRevenue || []), ...(this.otherRevenue || [])])
    },
    
    costOfGoodsTotal() {
      return this.calculateTotal(this.costOfGoods || [])
    },
    
    personnelExpensesTotal() {
      return this.calculateTotal(this.personnelExpenses || [])
    },
    
    otherExpensesTotal() {
      return this.calculateTotal(this.otherExpenses || [])
    },
    
    depreciationTotal() {
      return this.calculateTotal(this.depreciation || [])
    },
    
    taxExpensesTotal() {
      return this.calculateTotal(this.taxExpenses || [])
    },
    
    totalExpenses() {
      return this.calculateTotal([
        ...(this.costOfGoods || []),
        ...(this.personnelExpenses || []),
        ...(this.otherExpenses || []),
        ...(this.depreciation || [])
      ])
    },
    
    grossProfit() {
      const salesTotal = this.salesRevenueTotal
      const costTotal = this.costOfGoodsTotal
      return {
        previous: (salesTotal.previous || 0) - (costTotal.previous || 0),
        current: (salesTotal.current || 0) - (costTotal.current || 0)
      }
    },
    
    profitBeforeTax() {
      const revenue = this.totalRevenue
      const expenses = this.totalExpenses
      return {
        previous: (revenue.previous || 0) - (expenses.previous || 0),
        current: (revenue.current || 0) - (expenses.current || 0)
      }
    },
    
    netProfit() {
      const profit = this.profitBeforeTax
      const tax = this.taxExpensesTotal
      return {
        previous: (profit.previous || 0) - (tax.previous || 0),
        current: (profit.current || 0) - (tax.current || 0)
      }
    },
    
    grossMargin() {
      const revenue = this.totalRevenue.current || 0
      const profit = this.grossProfit.current || 0
      return revenue > 0 ? (profit / revenue) * 100 : 0
    },
    
    grossMarginChange() {
      const currentMargin = this.grossMargin
      const previousRevenue = this.totalRevenue.previous || 0
      const previousProfit = this.grossProfit.previous || 0
      const previousMargin = previousRevenue > 0 ? (previousProfit / previousRevenue) * 100 : 0
      return currentMargin - previousMargin
    }
  },
  
  methods: {
    formatCurrency,
    formatDate,
    
    async loadTuloslaskelma() {
      this.loading = true
      try {
        // Load company details
        await this.loadCompanyDetails()
        
        const response = await api.get('/tuloslaskelma.php', {
          params: {
            period: this.selectedPeriod,
            month: this.selectedMonth,
            quarter: this.selectedQuarter,
            year: this.selectedYear
          }
        })
        
        if (response.data.success) {
          this.tuloslaskelmaData = response.data.data
          this.updateDataFromAPI(response.data.data)
        } else {
          console.error('API error:', response.data.message)
        }
      } catch (error) {
        console.error('Error loading tuloslaskelma:', error)
      } finally {
        this.loading = false
      }
    },
    
    async loadCompanyDetails() {
      try {
        const response = await api.get('/company.php')
        if (response.data.success) {
          const companyData = response.data.data
          this.companyName = companyData.name
          this.companyYtunnus = companyData.y_tunnus
        }
      } catch (error) {
        console.error('Error loading company details:', error)
        // Keep default values if API fails
      }
    },
    
    updateDataFromAPI(data) {
      // Update component data with API response
      const current = data.current_period || {}
      const comparison = data.comparison || {}
      
      // Update revenue data
      this.salesRevenue = this.processGroupedData(current.sales_revenue || [], comparison.sales_revenue || [])
      this.otherRevenue = this.processGroupedData(current.other_revenue || [], comparison.other_revenue || [])
      
      // Update expense data - handle grouped structure
      this.costOfGoods = this.processGroupedData(current.cost_of_goods || [], comparison.cost_of_goods || [])
      this.personnelExpenses = this.processGroupedData(current.personnel_expenses || [], comparison.personnel_expenses || [])
      this.otherExpenses = this.processGroupedData(current.other_expenses || [], comparison.other_expenses || [])
      this.depreciation = this.processGroupedData(current.depreciation || [], comparison.depreciation || [])
      this.taxExpenses = this.processGroupedData(current.tax_expenses || [], comparison.tax_expenses || [])
    },
    
    processGroupedData(currentItems, comparisonItems) {
      return currentItems.map((item, index) => {
        const comparison = comparisonItems[index] || {}
        return {
          code: item.code,
          name: item.name,
          currentAmount: item.currentAmount || 0,
          previousAmount: item.previousAmount || 0,
          change: comparison.change || 0,
          changePercent: comparison.changePercent || 0,
          isGroup: item.isGroup || false
        }
      })
    },
    
    calculateTotal(items) {
      const totals = items.reduce((acc, item) => {
        acc.previous += item.previousAmount
        acc.current += item.currentAmount
        return acc
      }, { previous: 0, current: 0 })
      
      totals.change = totals.current - totals.previous
      totals.changePercent = totals.previous !== 0 
        ? (totals.change / totals.previous) * 100 
        : 0
      
      return totals
    },
    
    getChangeClass(value) {
      if (value > 0) return 'positive'
      if (value < 0) return 'negative'
      return 'neutral'
    },
    
    formatPercent(value) {
      if (value === undefined || value === null || isNaN(value)) {
        return '0.0%'
      }
      return `${Number(value).toFixed(1)}%`
    },
    
    formatMonth(monthString) {
      const [year, month] = monthString.split('-')
      const date = new Date(year, month - 1)
      return date.toLocaleDateString('fi-FI', { year: 'numeric', month: 'long' })
    },
    
    exportToPDF() {
      // Implementation for PDF export
      window.print()
    },
    
    printReport() {
      window.print()
    }
  },
  
  mounted() {
    this.loadTuloslaskelma()
  }
}
</script>

<style scoped>
.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  color: #333 !important;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.period-selector, .month-input, .year-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  color: #333;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #333;
  background: white;
}

.company-info h3, .period-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.company-info p, .period-info p {
  margin: 0;
  color: #666;
}

.tuloslaskelma-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  background: white;
  border: 1px solid #ddd;
}

.tuloslaskelma-table th {
  background: #f8f9fa;
  padding: 12px 8px;
  text-align: left;
  border-bottom: 2px solid #333;
  font-weight: 600;
  color: #333;
}

.tuloslaskelma-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.category-header {
  background: #e9ecef;
}

.category-title {
  font-weight: 600;
  color: #333;
  text-align: left;
  padding: 8px;
}

.account-name {
  font-weight: 500;
}

.group-header {
  background: #f0f8ff;
  border-bottom: 2px solid #007bff;
}

.account-group-name {
  font-weight: 700;
  color: #007bff;
  text-align: center;
  padding: 8px;
  font-size: 1.1em;
}

.account-indent {
  padding-left: 20px;
  font-style: italic;
}

.amount-column {
  text-align: right;
  width: 120px;
}

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

.subtotal {
  font-weight: 600;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.total {
  font-weight: 700;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
}

.revenue {
  border-bottom: 3px solid #28a745;
}

.expenses {
  border-bottom: 3px solid #dc3545;
}

.gross-profit {
  border-bottom: 3px solid #17a2b8;
}

.profit-before-tax {
  border-bottom: 3px solid #ffc107;
}

.net-profit {
  border-bottom: 3px solid #28a745;
  font-size: 1.1em;
}

.positive {
  color: #28a745;
}

.negative {
  color: #dc3545;
}

.neutral {
  color: #6c757d;
}

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

.summary-card {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.summary-card.revenue {
  background-color: #d4edda;
  border-left: 4px solid #28a745;
}

.summary-card.expenses {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
}

.summary-card.profit {
  background-color: #d1ecf1;
  border-left: 4px solid #17a2b8;
}

.summary-card.margin {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

.summary-card h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1rem;
}

.summary-card .amount {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #333;
}

.summary-card .change {
  margin: 0;
  font-size: 0.9rem;
}

@media print {
  .header-actions {
    display: none;
  }
  
  .tuloslaskelma-table {
    font-size: 10pt;
  }
  
  .summary-cards {
    display: none;
  }
}
</style>
