<template>
  <div>
    <header>
      <div class="container">
        <!-- Login Section -->
        <LoginSection
          :is-logged-in="isLoggedIn"
          :login-form="loginForm"
          :login-error="loginError"
          @login="login"
          @update:login-form="loginForm = $event"
        />
      
        <!-- Navigation Tabs -->
        <NavigationTabs
          :active-section="activeSection"
          @section-change="activeSection = $event"
        />
      </div>
    </header>
    
    <main class="container">
      <!-- Items Section -->
      <ItemsSection
        :active-section="activeSection"
        :items="items"
        :loading="loading"
        @add-item="showAddModal"
        @view-details="viewItemDetails"
        @edit-item="editItem"
        @delete-item="deleteItem"
      />
      
      <!-- Clients Section -->
      <ClientsSection
        :active-section="activeSection"
        :clients="clients"
        :clients-loading="clientsLoading"
        :client-search="clientSearch"
        @add-client="showAddClientModal"
        @edit-client="editClient"
        @delete-client="deleteClient"
        @search-clients="searchClients"
      />
      
      <!-- Accounting Section -->
      <AccountingSection
        :active-section="activeSection"
        :invoices="invoices"
        :invoices-loading="invoicesLoading"
        :invoice-search="invoiceSearch"
        @add-invoice="showAddInvoiceModal"
        @view-invoice="viewInvoice"
        @edit-invoice="editInvoice"
        @delete-invoice="deleteInvoice"
        @search-invoices="searchInvoices"
      />
      
      <!-- Item Modal -->
      <ItemModal
        :show="showModal"
        :is-editing="isEditing"
        :form-data="formData"
        @close="closeModal"
        @save="saveItem"
        @update:form-data="formData = $event"
        @file-upload="handleFileUpload"
      />
      
      <!-- Other modals would go here - keeping them in App.vue for now -->
      <!-- Item Details Modal, Client Modal, Invoice Modal, etc. -->
      
    </main>
  </div>
</template>

<script>
import LoginSection from './components/common/LoginSection.vue'
import NavigationTabs from './components/common/NavigationTabs.vue'
import ItemsSection from './components/items/ItemsSection.vue'
import ClientsSection from './components/clients/ClientsSection.vue'
import AccountingSection from './components/accounting/AccountingSection.vue'
import ItemModal from './components/items/ItemModal.vue'

export default {
  name: 'App',
  components: {
    LoginSection,
    NavigationTabs,
    ItemsSection,
    ClientsSection,
    AccountingSection,
    ItemModal
  },
  data() {
    return {
      // Authentication
      isLoggedIn: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginError: '',
      
      // Navigation
      activeSection: 'items',
      
      // Items
      items: [],
      loading: false,
      showModal: false,
      isEditing: false,
      formData: {
        name: '',
        description: '',
        serial_number: '',
        picture: '',
        quantity: '',
        price: ''
      },
      
      // Clients
      clients: [],
      clientsLoading: false,
      clientSearch: '',
      
      // Accounting
      invoices: [],
      invoicesLoading: false,
      invoiceSearch: ''
    }
  },
  methods: {
    // Authentication methods
    async login() {
      try {
        // Login logic here
        this.isLoggedIn = true
      } catch (error) {
        this.loginError = 'Login failed'
      }
    },
    
    // Navigation methods
    setActiveSection(section) {
      this.activeSection = section
    },
    
    // Items methods
    showAddModal() {
      this.isEditing = false
      this.formData = {
        name: '',
        description: '',
        serial_number: '',
        picture: '',
        quantity: '',
        price: ''
      }
      this.showModal = true
    },
    
    viewItemDetails(item) {
      // View item details logic
    },
    
    editItem(item) {
      this.isEditing = true
      this.formData = { ...item }
      this.showModal = true
    },
    
    async deleteItem(id) {
      // Delete item logic
    },
    
    async saveItem() {
      // Save item logic
      this.showModal = false
    },
    
    closeModal() {
      this.showModal = false
    },
    
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        // Handle file upload
        const reader = new FileReader()
        reader.onload = (e) => {
          this.formData.picture = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    
    // Clients methods
    showAddClientModal() {
      // Show add client modal
    },
    
    editClient(client) {
      // Edit client logic
    },
    
    async deleteClient(id) {
      // Delete client logic
    },
    
    searchClients(searchTerm) {
      this.clientSearch = searchTerm
      // Search clients logic
    },
    
    // Accounting methods
    showAddInvoiceModal() {
      // Show add invoice modal
    },
    
    viewInvoice(invoice) {
      // View invoice logic
    },
    
    editInvoice(invoice) {
      // Edit invoice logic
    },
    
    async deleteInvoice(id) {
      // Delete invoice logic
    },
    
    searchInvoices(searchTerm) {
      this.invoiceSearch = searchTerm
      // Search invoices logic
    }
  }
}
</script>

<style>
/* Global styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

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

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

.btn-success {
  background-color: #28a745;
  color: white;
}

.btn-success:hover {
  background-color: #1e7e34;
}

.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;
}

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

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

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

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

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

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.error-message {
  color: #e74c3c;
  margin-top: 10px;
  padding: 10px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}
</style>
