'use client';

import { useState } from 'react';
import CalendrierTrajets from './CalendrierTrajets';
import ListeTrajets from './ListeTrajets';
import TrajetForm from './TrajetForm';

export default function CalendrierPageContent() {
  const [refreshTrigger, setRefreshTrigger] = useState(0);
  const [showTrajetForm, setShowTrajetForm] = useState(false);

  const handleTrajetCreated = () => {
    setRefreshTrigger((prev) => prev + 1);
  };

  return (
    <div className="flex flex-col gap-6 sm:gap-8">
      {/* En-tête avec titre et bouton */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-2">
        <div>
          <h1 className="text-2xl sm:text-3xl font-semibold text-cblack">
            Calendrier
          </h1>
          <p className="text-xs sm:text-sm text-cgray mt-1">
            Gestion des trajets et planning des chauffeurs
          </p>
        </div>
        <button
          onClick={() => setShowTrajetForm(true)}
          className="flex items-center justify-center gap-2 px-4 py-2.5 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors self-start sm:self-center shrink-0"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
          Nouveau trajet
        </button>
      </div>

      {/* Calendrier en haut */}
      <div>
        <CalendrierTrajets refreshTrigger={refreshTrigger} />
      </div>

      {/* Liste des trajets en bas, triable par période */}
      <div>
        <ListeTrajets onTrajetCreated={handleTrajetCreated} hideNewTrajetButton />
      </div>

      {/* Modal formulaire trajet */}
      {showTrajetForm && (
        <TrajetForm
          onClose={() => setShowTrajetForm(false)}
          onSuccess={() => {
            handleTrajetCreated();
            setShowTrajetForm(false);
          }}
        />
      )}
    </div>
  );
}