// [REQ F7]  Panel admina – tabela rezerwacji, kalendarz, blokowanie terminów
// [REQ D11] React Concurrent Mode – useTransition przy przełączaniu zakładek (nie blokuje UI)
// [REQ T1]  Podstawowe hooki – useState + useTransition
// useTransition to nowoczesny hook, który pozwala na oznaczenie pewnych stanów jako
// tymczasowe, co pozwala na lepsze zarządzanie wydajnością i płynnością interfejsu użytkownika
import { useState, useTransition } from 'react';
// gotowe ikony z lucide-react
import { Trash2, RefreshCw, CheckCircle2, XCircle, LayoutList, CalendarDays, BarChart2, Users, Lock, Unlock } from 'lucide-react';
import AdminCalendar from '../components/AdminCalendar';
import AnalyticsDashboard from '../components/AnalyticsDashboard';
import UserManagement from '../components/UserManagement';
import { useAuth } from '../context/AuthContext';
import { useReservations } from '../hooks/useReservations';
import { useDeleteReservation } from '../hooks/useDeleteReservation';
import { useUpdateReservation } from '../hooks/useUpdateReservation';
import Modal from '../components/Modal';
import ProfileView from '../components/ProfileView';
import StatusBadge from '../components/StatusBadge';
import ThemeToggle from '../components/ThemeToggle';
import ErrorBoundary from '../components/ErrorBoundary';
import styles from './AdminPage.module.scss';

const AdminPage = () => {
  // wyciągniecie usera z kontekstu 
  const { user, logout } = useAuth();
  // wyciągniecie danych rezerwacji z hooka useReservations, który pobiera dane z backendu
  const { data: reservations = [], isLoading, isError, refetch } = useReservations();
  // useState do przechowywania stanu aktywnej zakładki (table / calendar)
  const [activeTab, setActiveTab] = useState('table');
  // useState do przechowywania stanu głównej zakładki (reservations / analytics / users)
  const [mainTab, setMainTab] = useState('reservations');
  // useState do przechowywania stanu id rezerwacji, która ma być usunięta (do modala)
  const [targetId, setTargetId] = useState(null);
  // useState do przechowywania stanu zablokowanych dat w kalendarzu
  const [blockedDates, setBlockedDates] = useState([]);
  // useState do przechowywania stanu inputa do blokowania daty
  const [blockInput, setBlockInput] = useState('');
  //  useTransition do oznaczenia stanu mainTab jako tymczasowego
  // powoduje wykonanie tego w tle, a nie blokowanie interfejsu użytkownika podczas przełączania zakładek
  // useTransition() zwraca tablicę dwóch elementów - bolean isPending, który mówi czy aktualnie trwa przejście
  // , oraz funkcję startTransition, która służy do oznaczenia stanu jako tymczasowego
  // w tym przypadku pomijamy pierwszy element nie jest potrzbny
  const [, startTransition] = useTransition();
  // const na każdy render 
  const isModalOpen = targetId !== null;
// tworzenie funkcji handleMainTab przy pomocy funkcji strzałkowej przymającej key 
// następnie wywołanie setMainTab z key w funkcji startTransition, która oznacza stan jako tymczasowy
// co ustala że priorytet renderowania tego jest niższy niż innych stanów
  const handleMainTab = (key) => startTransition(() => setMainTab(key));

  const handleBlockDate = () => {
    // jeśli nie ma daty lub jest już zablokowana igorujemy
    if (!blockInput || blockedDates.includes(blockInput)) return;
    // dodanie daty do zablokowanych dat i posortowanie ich rosnąco
    setBlockedDates((d) => [...d, blockInput].sort());
    // wyczyszczenie inputa po dodaniu daty do zablokowanych
    setBlockInput('');
  };
  // funkcja do odblokowywania daty, która usuwa datę z tablicy zablokowanych dat
  // bierze tablice zablokowanych dat, filtruję ją tworząc nową tablicę bez wybranej daty i ustawia tę nową tablicę jako stan zablokowanych dat
  const handleUnblockDate = (date) => setBlockedDates((d) => d.filter((x) => x !== date));
  // użycie custom hooka useDeleteReservation, który zwraca funkcję mutate do usuwania rezerwacji oraz isPending do sprawdzania czy aktualnie trwa usuwanie
  // zapis isPending jako isDeleting, aby nie mylić z innymi stanami ładowania
  const { mutate: remove, isPending: isDeleting } = useDeleteReservation({
    // jeśli uda się usnąć zamykamy modal ustawiając targetId na null
    onSuccess: () => setTargetId(null),
  });
  // użycie custom hooka useUpdateReservation, który zwraca funkcję mutate do aktualizowania rezerwacji oraz isPending do sprawdzania czy aktualnie trwa aktualizacja
  // zapis isPending jako isUpdating, aby nie mylić z innymi stanami ładowania
  const { mutate: updateStatus, isPending: isUpdating } = useUpdateReservation();
  // funkcje do obsługi modala - ustawienie targetId na id rezerwacji, która ma być usunięta
  const handleDeleteClick  = (id) => setTargetId(id);
  // funkcje do obsługi modala - potwierdzenie usunięcia rezerwacji wywołuje funkcję remove z id rezerwacji
  const handleConfirm      = () => remove(targetId);
  // funkcje do obsługi modala - anulowanie usunięcia rezerwacji ustawia targetId na null - zamyka modal
  const handleCancel       = () => setTargetId(null);
  // funkcje do obsługi modala - potwierdzenie zmiany statusu rezerwacji wywołuje funkcję updateStatus z id rezerwacji i nowym statusem
  const handleConfirmRes   = (id) => updateStatus({ id, patch: { status: 'confirmed' } });
  // funkcje do obsługi modala - anulowanie zmiany statusu rezerwacji wywołuje funkcję updateStatus z id rezerwacji i statusem 'cancelled'
  const handleCancelStatus = (id) => updateStatus({ id, patch: { status: 'cancelled' } });
// renderowanie komponentu AdminPage
// styles zawiera klasy CSS z pliku AdminPage.module.scss, które są używane do stylowania komponentu

  return (
    <div className={styles['admin']}>
      <header className={styles['admin__header']}>
        <div className={styles['admin__header-inner']}>
          <div>
            <h1 className={styles['admin__heading']}>Admin Panel</h1>
            <p className={styles['admin__subtitle']}>{user?.email}</p>
          </div>
          <div className={styles['admin__header-actions']}>
            <ThemeToggle />
            <button className={styles['admin__logout-btn']} onClick={logout}>Sign out</button>
          </div>
        </div>
      </header>

      <main className={styles['admin__main']}>
        {/* Main navigation tabs */}
        <div className={styles['admin__main-tabs']}>
          {[
            { key: 'reservations', label: 'Reservations', icon: LayoutList },
            { key: 'analytics',    label: 'Analytics',    icon: BarChart2 },
            { key: 'users',        label: 'Users',        icon: Users },
          ].map(({ key, label, icon: Icon }) => (
            <button
              key={key}
              className={[styles['admin__main-tab'], mainTab === key ? styles['admin__main-tab--active'] : ''].join(' ')}
              onClick={() => handleMainTab(key)}
            >
              <Icon size={15} /> {label}
            </button>
          ))}
        </div>

        {mainTab === 'analytics' && (
          <section className={styles['admin__section']}>
            <div className={styles['admin__section-header']}>
              <h2 className={styles['admin__section-title']}>Analytics & Reporting</h2>
            </div>
            <AnalyticsDashboard reservations={reservations} />
          </section>
        )}

        {mainTab === 'users' && (
          <section className={styles['admin__section']}>
            <div className={styles['admin__section-header']}>
              <h2 className={styles['admin__section-title']}>User Management</h2>
            </div>
            <UserManagement />
          </section>
        )}

        {mainTab === 'reservations' && <div className={styles['admin__grid']}>
          {/* Reservations table / calendar */}
          <section className={styles['admin__section']}>
            <div className={styles['admin__section-header']}>
              <h2 className={styles['admin__section-title']}>All Reservations</h2>
              <div className={styles['admin__tabs']}>
                <button
                  className={[styles['admin__tab'], activeTab === 'table' ? styles['admin__tab--active'] : ''].join(' ')}
                  onClick={() => setActiveTab('table')}
                >
                  <LayoutList size={14} /> Table
                </button>
                <button
                  className={[styles['admin__tab'], activeTab === 'calendar' ? styles['admin__tab--active'] : ''].join(' ')}
                  onClick={() => setActiveTab('calendar')}
                >
                  <CalendarDays size={14} /> Calendar
                </button>
              </div>
              <button
                className={styles['admin__refresh-btn']}
                onClick={() => refetch()}
                disabled={isLoading}
              >
                <RefreshCw size={15} />
                Refresh
              </button>
            </div>

            {isError && (
              <p className={styles['admin__msg--error']}>
                Could not load reservations. Make sure the API is running on port 3001.
              </p>
            )}

            {activeTab === 'calendar' && !isLoading && (
              <div className={styles['admin__calendar-wrap']}>
                <AdminCalendar reservations={reservations} />
              </div>
            )}

            {activeTab === 'table' && isLoading ? (
              <p className={styles['admin__msg--loading']}>Loading reservations…</p>
            ) : activeTab === 'table' && reservations.length === 0 ? (
              <p className={styles['admin__msg--empty']}>No reservations found.</p>
            ) : activeTab === 'table' && (
              <div className={styles['admin__table-wrapper']}>
                <table className={styles['admin__table']}>
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>User ID</th>
                      <th>Service ID</th>
                      <th>Date</th>
                      <th>Time</th>
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {reservations.map((r) => (
                      <tr key={r.id}>
                        <td className={styles['admin__cell--mono']}>{r.id}</td>
                        <td className={styles['admin__cell--mono']}>{r.userId}</td>
                        <td className={styles['admin__cell--mono']}>{r.serviceId}</td>
                        <td>{r.date}</td>
                        <td>{r.time}</td>
                        <td><StatusBadge status={r.status} size="sm" /></td>
                        <td>
                          <div className={styles['admin__actions']}>
                            {r.status === 'pending' && (
                              <button
                                className={styles['admin__confirm-btn']}
                                onClick={() => handleConfirmRes(r.id)}
                                disabled={isUpdating}
                                aria-label={`Confirm reservation ${r.id}`}
                              >
                                <CheckCircle2 size={15} />
                              </button>
                            )}
                            {(r.status === 'pending' || r.status === 'confirmed') && (
                              <button
                                className={styles['admin__cancel-status-btn']}
                                onClick={() => handleCancelStatus(r.id)}
                                disabled={isUpdating}
                                aria-label={`Cancel reservation ${r.id}`}
                              >
                                <XCircle size={15} />
                              </button>
                            )}
                            <button
                              className={styles['admin__delete-btn']}
                              onClick={() => handleDeleteClick(r.id)}
                              disabled={isDeleting || isUpdating}
                              aria-label={`Delete reservation ${r.id}`}
                            >
                              <Trash2 size={15} />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </section>

          {/* Blocked dates + GraphQL User Profile */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
            <section className={styles['admin__section']}>
              <div className={styles['admin__section-header']}>
                <h2 className={styles['admin__section-title']}>Block / Release Dates</h2>
              </div>
              <div className={styles['admin__block-body']}>
                <div className={styles['admin__block-row']}>
                  <input
                    type="date"
                    className={styles['admin__block-input']}
                    value={blockInput}
                    min={new Date().toISOString().split('T')[0]}
                    onChange={(e) => setBlockInput(e.target.value)}
                  />
                  <button
                    className={styles['admin__block-btn']}
                    onClick={handleBlockDate}
                    disabled={!blockInput}
                  >
                    <Lock size={14} /> Block date
                  </button>
                </div>
                {blockedDates.length === 0 ? (
                  <p className={styles['admin__msg--empty']} style={{ padding: '1rem' }}>
                    No dates blocked.
                  </p>
                ) : (
                  <ul className={styles['admin__block-list']}>
                    {blockedDates.map((d) => (
                      <li key={d} className={styles['admin__block-item']}>
                        <span>{d}</span>
                        <button
                          className={styles['admin__unblock-btn']}
                          onClick={() => handleUnblockDate(d)}
                        >
                          <Unlock size={13} /> Release
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </section>

            <section className={styles['admin__section']}>
              <div className={styles['admin__section-header']}>
                <h2 className={styles['admin__section-title']}>User Profile (GraphQL)</h2>
              </div>
              <ErrorBoundary>
                <ProfileView userId={user?.id} />
              </ErrorBoundary>
            </section>
          </div>
        </div>}
      </main>

      <Modal
        isOpen={isModalOpen}
        onClose={handleCancel}
        onConfirm={handleConfirm}
        title="Delete Reservation"
        message={`Are you sure you want to permanently delete reservation "${targetId}"? This action cannot be undone.`}
        confirmLabel={isDeleting ? 'Deleting…' : 'Delete'}
        danger
      />
    </div>
  );
};

export default AdminPage;
