/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * TripList — List of trips with create/edit [components/TripList.jsx]
 * TripDetail — Single trip view with day-by-day activities [components/TripDetail.jsx]
 * DayPlanner — Day activities + map view [components/DayPlanner.jsx]
 * PackingChecklist — Packing list management [components/PackingChecklist.jsx]
 * @end-component-map */

import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, useProxy } from '@deplixo/sdk';
import { TripList } from './components/TripList.jsx';
import { TripDetail } from './components/TripDetail.jsx';
import { PackingChecklist } from './components/PackingChecklist.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const { fetch: proxyFetch, loading: proxyLoading } = useProxy();
  const sharedTrips = useCollection('shared-itineraries', { personal: true });
  const sharedLinks = useCollection('trip-share-links', { personal: true });
  const tripsCollection = useCollection('trips', { personal: true });

  const [activeTab, setActiveTab] = useState('trips');
  const [selectedTripId, setSelectedTripId] = useState(null);
  const [shareDraft, setShareDraft] = useState('');
  const [shareError, setShareError] = useState('');
  const [sharedView, setSharedView] = useState({ tripId: null, dayId: null });
  const [weatherCache, setWeatherCache] = useState({});
  const [weatherError, setWeatherError] = useState('');

  const parseShareUrl = (value) => {
    try {
      const url = new URL(value);
      const tripId = url.searchParams.get('trip') || url.searchParams.get('tripId');
      const dayId = url.searchParams.get('day') || url.searchParams.get('dayId');
      const token = url.searchParams.get('token') || url.searchParams.get('share');
      const view = url.searchParams.get('view');
      return {
        tripId,
        dayId,
        token,
        view,
      };
    } catch {
      const tripMatch = value.match(/[?&](?:trip|tripId)=([^&]+)/i);
      const dayMatch = value.match(/[?&](?:day|dayId)=([^&]+)/i);
      const tokenMatch = value.match(/[?&](?:token|share)=([^&]+)/i);
      const viewMatch = value.match(/[?&]view=([^&]+)/i);
      return {
        tripId: tripMatch ? decodeURIComponent(tripMatch[1]) : null,
        dayId: dayMatch ? decodeURIComponent(dayMatch[1]) : null,
        token: tokenMatch ? decodeURIComponent(tokenMatch[1]) : null,
        view: viewMatch ? decodeURIComponent(viewMatch[1]) : null,
      };
    }
  };

  const findSharedPayload = (tripId, dayId) => {
    const items = sharedTrips?.items || [];
    return items.find((item) => {
      if (dayId) return item.tripId === tripId && item.dayId === dayId;
      return item.tripId === tripId && !item.dayId;
    }) || null;
  };

  const isSharedLinkValid = (parsed) => {
    if (!parsed.tripId) return false;
    if (!parsed.token) return false;
    const links = sharedLinks?.items || [];
    return links.some((item) => item.token === parsed.token && item.tripId === parsed.tripId && (!item.expiresAt || new Date(item.expiresAt).getTime() > Date.now()));
  };

  const getTripForWeather = (tripId) => {
    const trips = tripsCollection?.items || [];
    return trips.find((trip) => trip.id === tripId || trip.tripId === tripId) || null;
  };

  const getDayForWeather = (trip, dayId) => {
    if (!trip || !dayId || !Array.isArray(trip.days)) return null;
    return trip.days.find((day) => day.id === dayId) || null;
  };

  const buildWeatherQuery = (trip, day) => {
    const destination = trip?.destination || trip?.name || 'Travel destination';
    const date = day?.date || trip?.startDate || '';
    return { destination, date };
  };

  const loadWeather = async (tripId, dayId = null) => {
    if (!tripId) return;
    const cacheKey = `${tripId}:${dayId || 'trip'}`;
    if (weatherCache[cacheKey]) return;

    const trip = getTripForWeather(tripId);
    const day = getDayForWeather(trip, dayId);
    const { destination, date } = buildWeatherQuery(trip, day);

    try {
      setWeatherError('');
      const query = encodeURIComponent(`${destination}${date ? ` ${date}` : ''}`.trim());
      const data = await proxyFetch(`https://api.weatherapi.com/v1/forecast.json?key=${WEATHER_KEY}&q=${query}&days=3&aqi=no&alerts=no`, {
        method: 'GET',
      });
      const forecastDay = data?.forecast?.forecastday?.[0]?.day || null;
      const current = data?.current || null;
      const summary = forecastDay?.condition?.text || current?.condition?.text || 'Weather unavailable';
      const temp = forecastDay?.avgtemp_c ?? current?.temp_c;
      const icon = forecastDay?.condition?.icon || current?.condition?.icon || '';
      const location = data?.location?.name || destination;
      setWeatherCache((prev) => ({
        ...prev,
        [cacheKey]: {
          summary,
          temp,
          icon,
          location,
          sourceDate: date,
        },
      }));
    } catch (error) {
      setWeatherError('Unable to load weather right now.');
      setWeatherCache((prev) => ({
        ...prev,
        [cacheKey]: {
          summary: 'Weather unavailable',
          temp: null,
          icon: '',
          location: destination,
          sourceDate: date,
        },
      }));
    }
  };

  const applySharedLink = (raw) => {
    const parsed = parseShareUrl(raw.trim());
    if (!parsed.tripId || !parsed.token) {
      setShareError('Please paste a valid shared itinerary link.');
      return;
    }
    if (!isSharedLinkValid(parsed)) {
      setShareError('This share link is invalid or has expired.');
      return;
    }
    setShareError('');
    setSharedView({
      tripId: parsed.tripId,
      dayId: parsed.dayId,
    });
    setSelectedTripId(parsed.tripId);
    setActiveTab('detail');
  };

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const tripId = params.get('trip') || params.get('tripId');
    const dayId = params.get('day') || params.get('dayId');
    const token = params.get('token') || params.get('share');
    if (tripId && token) {
      const parsed = { tripId, dayId, token };
      if (isSharedLinkValid(parsed)) {
        setSharedView({ tripId, dayId });
        setSelectedTripId(tripId);
        setActiveTab('detail');
      }
    }
  }, [sharedLinks?.items]);

  useEffect(() => {
    if (sharedView.tripId) {
      loadWeather(sharedView.tripId, sharedView.dayId);
      return;
    }
    if (selectedTripId) {
      loadWeather(selectedTripId, null);
    }
  }, [sharedView.tripId, sharedView.dayId, selectedTripId, tripsCollection?.items]);

  const handleSelectTrip = (tripId) => {
    setSharedView({ tripId: null, dayId: null });
    setSelectedTripId(tripId);
    setActiveTab('detail');
  };

  const handleBack = () => {
    setSelectedTripId(null);
    setSharedView({ tripId: null, dayId: null });
    setActiveTab('trips');
  };

  const activeSharedPayload = useMemo(() => {
    if (!sharedView.tripId) return null;
    return findSharedPayload(sharedView.tripId, sharedView.dayId);
  }, [sharedView, sharedTrips?.items]);

  const activeWeatherKey = sharedView.tripId
    ? `${sharedView.tripId}:${sharedView.dayId || 'trip'}`
    : selectedTripId
      ? `${selectedTripId}:trip`
      : null;

  const activeWeather = activeWeatherKey ? weatherCache[activeWeatherKey] : null;

  const renderWeatherCard = () => {
    if (!activeWeatherKey) return null;
    return (
      <div className="weather-card">
        <div className="weather-card-header">
          <div>
            <div className="weather-card-title">Weather preview</div>
            <div className="weather-card-subtitle">
              {sharedView.tripId
                ? sharedView.dayId
                  ? 'Forecast for the selected shared day'
                  : 'Forecast for the shared trip'
                : 'Forecast for your selected trip'}
            </div>
          </div>
          {proxyLoading ? <span className="weather-loading">Loading...</span> : null}
        </div>
        {weatherError ? <div className="weather-error">{weatherError}</div> : null}
        <div className="weather-card-body">
          {activeWeather?.icon ? <img className="weather-icon" src={`https:${activeWeather.icon}`} alt={activeWeather.summary} /> : null}
          <div>
            <div className="weather-summary">{activeWeather?.summary || 'Loading weather...'}</div>
            <div className="weather-location">{activeWeather?.location || 'Destination'}</div>
            {activeWeather?.temp !== null && activeWeather?.temp !== undefined ? (
              <div className="weather-temp">{Math.round(activeWeather.temp)}°C</div>
            ) : null}
          </div>
        </div>
      </div>
    );
  };

  const renderSharedItinerary = () => {
    if (!sharedView.tripId || !activeSharedPayload) return null;
    return (
      <div className="shared-itinerary">
        <div className="detail-header">
          <div className="view-header">
            <div>
              <h2 className="detail-title">Shared Itinerary</h2>
              <div className="detail-destination">{activeSharedPayload.destination || 'Travel plan'}</div>
              <div className="detail-dates">
                {sharedView.dayId ? `Day view: ${sharedView.dayId}` : 'Full trip view'}
              </div>
            </div>
            <div className="header-actions">
              <button
                className="btn-secondary"
                onClick={() => {
                  const url = new URL(window.location.href);
                  url.searchParams.set('trip', sharedView.tripId);
                  if (sharedView.dayId) url.searchParams.set('day', sharedView.dayId);
                  const copyText = url.toString();
                  navigator.clipboard?.writeText(copyText);
                }}
              >
                Copy Link
              </button>
            </div>
          </div>
          <p className="view-subtitle">
            This itinerary was shared with you. You can view trip details without signing in.
          </p>
        </div>
        {renderWeatherCard()}
        <div className="shared-card">
          <div className="shared-meta-row">
            <span className="trip-badge">Shared</span>
            <span className="shared-meta">Trip ID: {activeSharedPayload.tripId}</span>
          </div>
          <h3>{activeSharedPayload.name || 'Untitled trip'}</h3>
          <p>{activeSharedPayload.description || 'No description provided.'}</p>
          {activeSharedPayload.days && Array.isArray(activeSharedPayload.days) ? (
            <div className="shared-days">
              {activeSharedPayload.days
                .filter((day) => !sharedView.dayId || day.id === sharedView.dayId)
                .map((day) => (
                  <div key={day.id} className="shared-day-card">
                    <div className="shared-day-title">{day.title || day.name || `Day ${day.dayNumber || ''}`}</div>
                    <div className="shared-day-subtitle">{day.date || ''}</div>
                    {day.activities && Array.isArray(day.activities) && (
                      <ul className="shared-activity-list">
                        {day.activities.map((activity, index) => (
                          <li key={activity.id || index}>
                            <strong>{activity.time || 'All day'}</strong> — {activity.name || activity.title || 'Activity'}
                            {activity.location ? ` • ${activity.location}` : ''}
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                ))}
            </div>
          ) : null}
        </div>
      </div>
    );
  };

  const renderView = () => {
    if (sharedView.tripId && activeSharedPayload) {
      return renderSharedItinerary();
    }
    if (activeTab === 'detail' && selectedTripId) {
      return (
        <>
          {renderWeatherCard()}
          <TripDetail tripId={selectedTripId} onBack={handleBack} user={user} />
        </>
      );
    }
    if (activeTab === 'packing') {
      return <PackingChecklist user={user} />;
    }
    return <TripList onSelectTrip={handleSelectTrip} user={user} />;
  };

  if (loading) {
    return (
      <div className="app-shell">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">✈️</span>
            <h1 className="header-title">Trip Planner</h1>
          </div>
        </header>
        <main className="app-main auth-gate">
          <div className="empty-state">
            <div className="empty-icon">🔐</div>
            <h3>Signing you in...</h3>
            <p>Please wait while we load your personal trips.</p>
          </div>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">✈️</span>
            <h1 className="header-title">Trip Planner</h1>
          </div>
        </header>
        <main className="app-main auth-gate">
          <div className="empty-state">
            <div className="empty-icon">🗝️</div>
            <h3>Personal trips require sign-in</h3>
            <p>Sign in with Google to create, view, and manage your private trips.</p>
            <div className="empty-actions">
              <button className="btn-primary" onClick={() => login('google')}>
                Continue with Google
              </button>
            </div>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <span className="header-icon">✈️</span>
          <h1 className="header-title">Trip Planner</h1>
        </div>
        <div className="header-user">
          <div className="user-chip" title={user.email || user.name}>
            {user.avatar ? (
              <img className="user-avatar" src={user.avatar} alt={user.name} />
            ) : (
              <span className="user-avatar-fallback">{(user.name || 'U').slice(0, 1).toUpperCase()}</span>
            )}
            <span className="user-name">{user.name}</span>
          </div>
          <button className="btn-back" onClick={logout}>Sign Out</button>
        </div>
      </header>
      <main className="app-main">
        <div className="share-link-panel">
          <div className="view-header">
            <div>
              <h2 className="view-title">Open a shared itinerary</h2>
              <div className="view-subtitle">Paste a link from a travel companion to view their shared trip or day.</div>
            </div>
          </div>
          <div className="share-link-row">
            <input
              className="share-link-input"
              value={shareDraft}
              onChange={(e) => setShareDraft(e.target.value)}
              placeholder="Paste shareable itinerary link"
            />
            <button className="btn-primary" onClick={() => applySharedLink(shareDraft)}>
              Open Link
            </button>
          </div>
          {shareError ? <div className="share-link-error">{shareError}</div> : null}
        </div>
        {renderView()}
      </main>
      <nav className="tab-bar">
        <button
          className={`tab-btn ${activeTab === 'trips' || activeTab === 'detail' ? 'active' : ''}`}
          onClick={() => { setSharedView({ tripId: null, dayId: null }); setSelectedTripId(null); setActiveTab('trips'); }}
        >
          <span className="tab-icon">🗺️</span>
          <span className="tab-label">My Trips</span>
        </button>
        <button
          className={`tab-btn ${activeTab === 'packing' ? 'active' : ''}`}
          onClick={() => setActiveTab('packing')}
        >
          <span className="tab-icon">🧳</span>
          <span className="tab-label">Packing</span>
        </button>
      </nav>
    </div>
  );
}

// PROGRESS:sc_001:complete:Setting up trip planner shell
ReactDOM.createRoot(document.getElementById("root")).render(<App />);