---
import type { Courses } from '../../../types/codyops-courses';
import type { Careers } from '../../../types/codyops-careers';
import { toSnakeCase, fromSnakeCase } from '../../../utils';
import { slugifyCourse } from '../../../utils/text';

type Props = {
  career: Careers;
};

const { career }: Props = Astro.props;

// Group courses by category
const groupedCourses = career.courses?.reduce((acc, courseItem) => {
  const course = courseItem.codyops_courses_id;
  if (course) {
    const category = course.category;
    if (!acc[category]) {
      acc[category] = { courses: [], totalCategoryMinutes: 0 };
    }
    acc[category].courses.push(course);
    if (course.totalCourseMinutes) {
      acc[category].totalCategoryMinutes += course.totalCourseMinutes;
    }
  }
  return acc;
}, {} as Record<string, { courses: Courses[]; totalCategoryMinutes: number }>);

---

<section id="program" class="container content-space-t-3 career__section">
	<h2 class="career-subtitle text-white text-center mb-5">Programa de Carrera</h2>
  <div class="text-center text-white mb-4">
    Total Carrera: {career.totalCareerHours?.toFixed(1)} horas
  </div>
  <div class="accordion accordion-btn-icon-start">
    {groupedCourses && Object.entries(groupedCourses).map(([category, { courses, totalCategoryMinutes }]) => (
      <div class="accordion-item">
        <div class="accordion-header" id={`heading-${toSnakeCase(category)}`}>
          <a
            class="accordion-button collapsed"
            id={`collab&produc_devopspage-${toSnakeCase(category)}`}
            role="button"
            data-bs-toggle="collapse"
            data-bs-target={`#${toSnakeCase(category)}`}
            aria-expanded="true"
            aria-controls={toSnakeCase(category)}
          >
            <div class="flex-grow-1 ps-3">
              <div class="row">
                <div class="col-8 text-white">{fromSnakeCase(category)}</div>
                <!-- End Col -->

                <div class="col-4 text-end">
                  <div class="row">
                    <div class="col-lg-6"></div>
                    <!-- End Col -->

                    <div class="col-lg-6">
                      <span class="small text-white">{(totalCategoryMinutes / 60).toFixed(1)} hours</span>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Col -->
              </div>
              <!-- End Row -->
            </div>
          </a>
        </div>
          <div id={toSnakeCase(category)} class="accordion-collapse collapse" aria-labelledby={`heading-${toSnakeCase(category)}`}>
          <div class="accordion-body" style='margin-top: 1rem;'>
            <!-- List Group -->
            <div class="list-group list-group-flush list-group-no-gutters">
              {
                courses.map((course: Courses)=>(
                  <div class="list-group-item text-muted">
                    <div class="row">
                      <div class="col-8">
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <i class="bi bi bi-arrow-right"></i>
                          </div>
                          <div class="flex-grow-1 ms-2">
                      <a href={`/cursos/${slugifyCourse(course.name+'-'+course.level)}/`} class="small text-white"
                      >{course.name}
                        <span class="badge bg-course text-dark rounded-pill ms-1">{course.level}</span></a
                      >
                          </div>
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-4 text-end">
                        <div class="row">
                          <div class="col-lg-6"></div>
                          <!-- End Col -->

                          <div class="col-lg-6">
                            <span class="small text-white">{course.totalCourseHours?.toFixed(1)} hours</span>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Col -->
                    </div>
                  </div>
                ))
              }

            </div>
            <!-- End List Group -->
          </div>
        </div>
      </div>
    ))}

  </div>
</section>
