import { useState } from 'react';
// Link jest potrzebny do nawigacji w aplikacji React - zmiana widoku na inną ścieżkę
import { Link } from 'react-router-dom';
// Ikony z lucide-react do wyświetlania ikon w aplikacji React
import { BookOpen, UserCog } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { useUserReservations } from '../hooks/useUserReservations';
import SlotFinder from '../components/SlotFinder';
import AvailabilitySearch from '../components/AvailabilitySearch';
import BookingWizard from '../components/BookingWizard';
import MyReservations from '../components/MyReservations';
import ThemeToggle from '../components/ThemeToggle';
import ProfileEditModal from '../components/ProfileEditModal';
import styles from './DashboardPage.module.scss';
// funkcja DashboardPage to komponent strony głównej dla zalogowanego użytkownika, który wyświetla jego rezerwacje, pozwala na wyszukiwanie dostępnych slotów i zarządzanie profilem
const DashboardPage = () => {
  // desrukturyzacja user i logout z useAuth - pobieramy zalogowanego użytkownika i funkcję wylogowania z kontekstu
  const { user, logout } = useAuth();
  // useState do przechowywania stanu prefillSlot, który jest używany do wstępnego wypełnienia formularza rezerwacji wybranym slotem
  const [prefillSlot, setPrefillSlot] = useState(null);
  // useState do przechowywania stanu profileOpen, który jest używany do otwierania i zamykania modala edycji profilu
  const [profileOpen, setProfileOpen] = useState(false);
  // custom hook useUserReservations pobiera rezerwacje zalogowanego użytkownika z API i zwraca je w data
  const { data: reservations = [] } = useUserReservations(user?.id);
  // activeCount to zmienna, która przechowuje liczbę aktywnych rezerwacji (pending lub confirmed) dla zalogowanego użytkownika
  const activeCount = reservations.filter(
    (r) => r.status === 'pending' || r.status === 'confirmed'
  ).length;
  

  return (
    <div className={styles['dashboard']}>
      <header className={styles['dashboard__header']}>
        <div className={styles['dashboard__header-inner']}>
          <div>
            <h1 className={styles['dashboard__title']}>Welcome back</h1>
            <p className={styles['dashboard__subtitle']}>{user?.email}</p>
          </div>
          <div className={styles['dashboard__header-actions']}>
            <Link to="/reservations" className={styles['dashboard__res-link']}>
              <BookOpen size={15} />
              My Reservations
              {activeCount > 0 && (
                <span className={styles['dashboard__res-badge']}>{activeCount}</span>
              )}
            </Link>
            <button
              className={styles['dashboard__logout-btn']}
              onClick={() => setProfileOpen(true)}
            >
              <UserCog size={15} /> Profile
            </button>
            <ThemeToggle />
            <button className={styles['dashboard__logout-btn']} onClick={logout}>Sign out</button>
          </div>
        </div>
      </header>

      <main className={styles['dashboard__main']}>
        <AvailabilitySearch onSelectSlot={setPrefillSlot} />

        <SlotFinder onSelectSlot={setPrefillSlot} />

        <div className={styles['dashboard__grid']}>
          <section className={styles['dashboard__booking']}>
            <BookingWizard
              prefillSlot={prefillSlot}
              onPrefillUsed={() => setPrefillSlot(null)}
            />
          </section>
          <aside className={styles['dashboard__aside']}>
            <MyReservations />
          </aside>
        </div>
      </main>

      <ProfileEditModal isOpen={profileOpen} onClose={() => setProfileOpen(false)} />
    </div>
  );
};

export default DashboardPage;
