<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>
        <button class="btn btn-secondary" @click="handleShowTasks">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>
    
    <!-- Task Management Section -->
    <TaskManagementSection v-if="activeSection === 'tasks'" />
    
    <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'
import TaskManagementSection from './TaskManagementSection.vue'

export default {
  name: 'ProjectsSection',
  components: {
    TaskManagementSection
  },
  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,
    
    handleShowTasks() {
      this.$emit('show-tasks')
    }
  }
}
</script>

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

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

.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-description p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

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

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
}

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

.progress-text {
  font-size: 12px;
  color: #666;
}

.project-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

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