<template>
  <div v-if="activeSection === 'projects'" class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <h2>Projects</h2>
      <div style="display: flex; gap: 10px;">
        <input 
          type="text" 
          :value="projectSearch"
          @input="$emit('search-projects', $event.target.value)"
          placeholder="Search projects..." 
          style="padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
        >
        <button class="btn btn-primary" @click="$emit('add-project')">Add New Project</button>
        <!-- Enhanced Tasks Button with Multiple Fallbacks -->
        <button 
          class="btn btn-secondary" 
          @click="handleTasksClick"
          title="Open Tasks"
        >
          Tehtävät
        </button>
      </div>
    </div>
    
    <div v-if="projectsLoading" class="loading">
      Loading projects...
    </div>
    
    <div v-else-if="projects.length === 0" class="loading">
      No projects found. Create your first project!
    </div>
    
    <div v-else class="projects-grid">
      <div v-for="project in projects" :key="project.id" class="project-card">
        <div class="project-header">
          <h3>{{ project.project_name }}</h3>
          <span v-html="project.status_badge"></span>
        </div>
        
        <div class="project-info">
          <p><strong>Client:</strong> {{ project.customer_name || 'N/A' }}</p>
          <p class="budget">Budget: {{ project.budget ? formatCurrency(project.budget, 'EUR') : 'Not set' }}</p>
          <p><strong>Start Date:</strong> {{ formatDate(project.start_date) }}</p>
          <p><strong>End Date:</strong> {{ formatDate(project.end_date) }}</p>
        </div>
        
        <div class="project-description" v-if="project.description">
          <p>{{ project.description }}</p>
        </div>
        
        <div class="project-progress" v-if="project.progress">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: project.progress + '%' }"></div>
          </div>
          <span class="progress-text">{{ project.progress }}%</span>
        </div>
        
        <div class="project-actions">
          <button class="btn btn-primary" @click="$emit('view-project', project)">Details</button>
          <button class="btn btn-warning" @click="$emit('edit-project', project)">Edit</button>
          <button class="btn btn-danger" @click="$emit('delete-project', project.id)">Delete</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'ProjectsSectionDebug',
  props: {
    activeSection: {
      type: String,
      required: true
    },
    projects: {
      type: Array,
      required: true
    },
    projectsLoading: {
      type: Boolean,
      default: false
    },
    projectSearch: {
      type: String,
      default: ''
    }
  },
  emits: ['add-project', 'view-project', 'edit-project', 'delete-project', 'search-projects', 'show-tasks'],
  methods: {
    formatDate,
    formatCurrency,
    
    // Enhanced task handling with multiple fallbacks
    handleTasksClick() {
      console.log('Tasks button clicked - attempting to switch to tasks view')
      
      // Method 1: Direct emit
      try {
        this.$emit('show-tasks')
        console.log('Method 1: Direct emit successful')
      } catch (error) {
        console.error('Method 1 failed:', error)
      }
      
      // Method 2: Set active section directly
      setTimeout(() => {
        try {
          this.activeSection = 'tasks'
          this.$emit('section-change', 'tasks')
          console.log('Method 2: Direct section change successful')
        } catch (error) {
          console.error('Method 2 failed:', error)
        }
      }, 100)
      
      // Method 3: Force Vue reactivity
      setTimeout(() => {
        try {
          this.$forceUpdate()
          console.log('Method 3: Force update successful')
        } catch (error) {
          console.error('Method 3 failed:', error)
        }
      }, 200)
      
      // Method 4: Window location as last resort
      setTimeout(() => {
        try {
          if (typeof window !== 'undefined') {
            window.location.href = '#/tasks?section=tasks'
            console.log('Method 4: Window redirect successful')
          }
        } catch (error) {
          console.error('Method 4 failed:', error)
        }
      }, 300)
    }
  }
}
</script>

<style scoped>
h2 {
  color: #333 !important;
}

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

.no-projects {
  text-align: center;
  padding: 40px;
  color: #999;
  font-style: italic;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.project-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

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

.project-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.project-info {
  margin-bottom: 15px;
}

.project-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.project-description {
  margin-bottom: 15px;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
}

.project-progress {
  margin-bottom: 15px;
}

.project-progress {
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  background-color: #007bff;
  height: 100%;
  transition: width 0.3s ease;
}

.progress-fill {
  background-color: #28a745;
  height: 100%;
  transition: width 0.3s ease;
}

.project-actions {
  display: flex;
  gap: 10px;
}

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

.btn-small {
  padding: 6px 12px;
  font-size: 0.8em;
}

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

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

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

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

.btn-danger:hover {
  background: #c82333;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}
</style>
