frontend/app/components/home/tab-content.tsx

import { DateTime } from "luxon";
import type { Colle, UserPreferences } from "~/lib/api";
import { Badge } from "~/components/ui/badge";
import ColleCard from "~/components/home/colle-card";
import ColleCardSkeleton from "~/components/home/skeleton-card";

type TabContentProps = {
  tabTitle: string;
  emptyCollesText: string;
  isLoading: boolean;
  colles: Colle[];
  isSorted?: boolean;
  preferences: UserPreferences;
};

const WEEK_DAYS = [
  "Lundi",
  "Mardi",
  "Mercredi",
  "Jeudi",
  "Vendredi",
  "Samedi",
  "Dimanche",
];

export default function TabContent({
  tabTitle,
  emptyCollesText,
  isLoading,
  colles,
  isSorted,
  preferences,
}: TabContentProps) {
  const collesByDay: Record<string, Colle[]> = {};
  colles.forEach((colle) => {
    const date = DateTime.fromISO(colle.date);
    const dayName = WEEK_DAYS[date.weekday - 1]; // Luxon weekday is 1-7 (Mon-Sun)
    if (!collesByDay[dayName]) {
      collesByDay[dayName] = [];
    }
    collesByDay[dayName].push(colle);
  });

  const days = WEEK_DAYS.filter(
    (day) => collesByDay[day] && collesByDay[day].length > 0
  );
  for (const day of days) {
    collesByDay[day]?.sort((a, b) => a?.date - b?.date)
    if (!isSorted) {
      collesByDay[day].reverse()
    }
  }
  // If not sorted, reverse the order of days
  if (!isSorted) {
    days.reverse();
  }

  return (
    <>
      <h2 className="text-2xl font-semibold mb-6">{tabTitle}</h2>
      {isLoading ? (
        <div className="space-y-8">
          {WEEK_DAYS.slice(0, 2).map((day) => (
            <div key={day} className="space-y-4">
              <div className="flex items-center gap-2">
                <h3 className="text-xl font-medium">{day}</h3>
                <Badge variant="outline" className="text-sm">
                  Chargement...
                </Badge>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {Array(3)
                  .fill(0)
                  .map((_, i) => (
                    <ColleCardSkeleton key={i} />
                  ))}
              </div>
            </div>
          ))}
        </div>
      ) : colles.length === 0 ? (
        <div className="text-center py-8 text-muted-foreground">
          {emptyCollesText}
        </div>
      ) : (
        <div className="space-y-8">
          {days.map((day) => (
            <div key={day} className="space-y-4">
              <div className="flex items-center gap-2">
                <h3 className="text-xl font-medium">{day}</h3>
                <Badge variant="outline" className="text-sm">
                  {collesByDay[day].length} colle
                  {collesByDay[day].length !== 1 ? "s" : ""}
                </Badge>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {collesByDay[day].map((colle) => (
                  <ColleCard
                    key={colle.id}
                    colle={colle}
                    onToggleFavorite={() => {}}
                    isFavorite={false}
                    preferences={preferences}
                    // TODO: Implement favorite toggle
                    // onToggleFavorite={handleToggleFavorite}
                    // isFavorite={isFavorite(colle)}
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </>
  );
}