import { useState, useEffect, useMemo } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { formatDate } from '../utils/dateFormatter';
import { useTrip } from '../hooks/useTrip';
import PlannablesList from './plannables/PlannablesList';
import './TripDetail.css';

const TripDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [trip, setTrip] = useState(null);
  const { fetchTrip, loading, error } = useTrip();

  useEffect(() => {
    const loadTrip = async () => {
      try {
        const tripData = await fetchTrip(id);
        setTrip(tripData);
      } catch (err) {
        console.error('Error loading trip:', err);
      }
    };

    loadTrip();
  }, [id, fetchTrip]);

  // Memoize trip dates display to prevent unnecessary re-renders
  const tripDatesDisplay = useMemo(() => {
    if (!trip) return null;

    return (
      <div className="trip-dates">
        <span className="date-label">Start:</span>
        <span className="date-value">{formatDate(trip.start_date)}</span>
        <span className="date-separator">•</span>
        <span className="date-label">End:</span>
        <span className="date-value">{formatDate(trip.end_date)}</span>
      </div>
    );
  }, [trip]);

  if (loading) {
    return (
      <div className="trip-detail-loading">
        <div className="spinner"></div>
        <p>Loading trip details...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="trip-detail-error">
        <h2>Error</h2>
        <p>{error}</p>
        <Link to="/" className="btn-back">Back to Dashboard</Link>
      </div>
    );
  }

  if (!trip) {
    return null;
  }

  return (
    <div className="trip-detail">
      <header className="trip-detail-header">
        <div className="header-nav">
          <Link to="/" className="btn-back">← Back to Dashboard</Link>
        </div>
        <div className="header-content">
          <h1>{trip.name}</h1>
          {trip.description && (
            <p className="trip-description">{trip.description}</p>
          )}
          {tripDatesDisplay}
        </div>
      </header>

      <div className="trip-detail-content">
        <div className="trip-detail-sidebar">
          <PlannablesList tripId={trip.id} />
        </div>
        <div className="trip-detail-main">
          <div className="calendar-placeholder">
            <h2>Calendar View</h2>
            <p>Calendar view will be implemented here in the future</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TripDetail;