// [REQ F6]  Zarządzanie rezerwacjami – widget "Moje rezerwacje" na dashboardzie (ostatnie 3)
// [REQ D7]  React Query – useUserReservations (useQuery) do pobierania rezerwacji zalogowanego użytkownika
import { Link } from 'react-router-dom';
import { BookOpen, XCircle, ChevronRight } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { useUserReservations } from '../hooks/useUserReservations';
import { useUpdateReservation } from '../hooks/useUpdateReservation';
import { useServices } from '../hooks/useServices';
import StatusBadge from './StatusBadge';
import styles from './MyReservations.module.scss';

const MyReservations = () => {
  const { user } = useAuth();
  const { data: reservations = [], isLoading } = useUserReservations(user?.id);
  const { data: services = [] } = useServices();
  const { mutate: updateStatus, isPending } = useUpdateReservation();

  const getService = (id) => services.find((s) => s.id === id);

  const sorted = [...reservations].sort((a, b) =>
    (a.date + a.time).localeCompare(b.date + b.time)
  );

  return (
    <div className={styles['my-res']}>
      <div className={styles['my-res__header']}>
        <BookOpen size={17} className={styles['my-res__header-icon']} />
        <h2 className={styles['my-res__title']}>My Reservations</h2>
        {reservations.length > 0 && (
          <span className={styles['my-res__count']}>{reservations.length}</span>
        )}
      </div>

      {isLoading ? (
        <p className={styles['my-res__msg']}>Loading…</p>
      ) : sorted.length === 0 ? (
        <p className={styles['my-res__msg']}>No reservations yet. Make your first booking!</p>
      ) : (
        <ul className={styles['my-res__list']}>
          {sorted.map((r) => {
            const svc = getService(r.serviceId);
            const canCancel = r.status === 'pending' || r.status === 'confirmed';
            return (
              <li key={r.id} className={styles['my-res__item']}>
                <Link
                  to={`/reservations?id=${r.id}`}
                  className={styles['my-res__item-link']}
                >
                  <div className={styles['my-res__item-top']}>
                    <span className={styles['my-res__service-name']}>
                      {svc?.name ?? r.serviceId}
                    </span>
                    <div className={styles['my-res__item-top-right']}>
                      <StatusBadge status={r.status} size="sm" />
                      <ChevronRight size={14} className={styles['my-res__chevron']} />
                    </div>
                  </div>
                  <div className={styles['my-res__item-meta']}>
                    <span>{r.date} · {r.time}</span>
                    {svc && <span className={styles['my-res__price']}>${svc.price}</span>}
                  </div>
                  {r.specialRequirements && (
                    <p className={styles['my-res__item-req']}>{r.specialRequirements}</p>
                  )}
                </Link>
                {canCancel && (
                  <button
                    className={styles['my-res__cancel-btn']}
                    onClick={() => updateStatus({ id: r.id, patch: { status: 'cancelled' } })}
                    disabled={isPending}
                  >
                    <XCircle size={13} />
                    Cancel
                  </button>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
};

export default MyReservations;
