/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * PetProfiles — Browse pet profiles and manage own profile [components/PetProfiles.jsx]
 * MapView — Browse nearby pets on an interactive map [components/MapView.jsx]
 * Playdates — Manage playdate requests sent and received [components/Playdates.jsx]
 * ProfileModal — Create/edit pet profile modal [components/ProfileModal.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "playdate-request-created-email", "on": "collection.add", "collection": "playdate_requests", "actions": [{"type": "email", "to": "{{record.other_owner_email}}", "subject": "New playdate request: {{record.pet_name}}", "body": "Hi {{record.other_owner_name}},\n\nA new playdate request has been created for {{record.pet_name}}.\n\nDetails:\n- From: {{record.requester_name}} ({{record.requester_email}})\n- To: {{record.other_owner_name}} ({{record.other_owner_email}})\n- Date/Time: {{record.playdate_datetime}}\n- Location: {{record.location}}\n- Message: {{record.message}}\n\nYou can accept or decline this request from the app.\n\nBest,\nDeplixo"}]}, {"name": "playdate-confirmed-email", "on": "collection.add", "collection": "confirmed_playdates", "actions": [{"type": "email", "to": "{{record.requester_email}}", "subject": "Playdate confirmed: {{record.pet_name}}", "body": "Hi {{record.requester_name}},\n\nGood news \u2014 your playdate has been confirmed for {{record.pet_name}}.\n\nConfirmation details:\n- With: {{record.other_owner_name}} ({{record.other_owner_email}})\n- Date/Time: {{record.playdate_datetime}}\n- Location: {{record.location}}\n- Notes: {{record.message}}\n\nYour playdate is all set. See you then!\n\nBest,\nDeplixo"}, {"type": "email", "to": "{{record.other_owner_email}}", "subject": "Playdate confirmed: {{record.pet_name}}", "body": "Hi {{record.other_owner_name}},\n\nGood news \u2014 your playdate has been confirmed for {{record.pet_name}}.\n\nConfirmation details:\n- With: {{record.requester_name}} ({{record.requester_email}})\n- Date/Time: {{record.playdate_datetime}}\n- Location: {{record.location}}\n- Notes: {{record.message}}\n\nYour playdate is all set. See you then!\n\nBest,\nDeplixo"}]}]}


import { useState, useEffect } from 'react';
import { useAuth } from '@deplixo/sdk';
import { PetProfiles } from './components/PetProfiles.jsx';
import { MapView } from './components/MapView.jsx';
import { Playdates } from './components/Playdates.jsx';

// PROGRESS:sc_001:complete:Setting up pet playdate matchmaker
function App() {
  const { user, loading, login, logout } = useAuth();
  const [tab, setTab] = useState('profiles');
  const [location, setLocation] = useState(null);
  const [locationStatus, setLocationStatus] = useState('idle');

  useEffect(() => {
    if (!user) {
      setLocation(null);
      setLocationStatus('idle');
      return;
    }

    if (!navigator.geolocation) {
      setLocationStatus('unsupported');
      return;
    }

    setLocationStatus('requesting');
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const coords = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        setLocation(coords);
        setLocationStatus('ready');
      },
      () => {
        setLocationStatus('denied');
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 5 * 60 * 1000,
      }
    );
  }, [user]);

  if (loading) {
    return <div className="auth-gate">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-icon">🐾</div>
          <h1 className="auth-title">PawPals</h1>
          <p className="auth-copy">Sign in with Google to manage your pet profile and plan playdates.</p>
          <button className="btn-primary auth-button" onClick={() => login('google')}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  const locationMessage =
    locationStatus === 'requesting'
      ? 'Finding your location to show nearby pets...'
      : locationStatus === 'ready'
        ? 'Showing nearby pets based on your current location.'
        : locationStatus === 'denied'
          ? 'Location access was denied. The map will use a default center.'
          : locationStatus === 'unsupported'
            ? 'Geolocation is not supported on this device.'
            : '';

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <span className="header-icon">🐾</span>
          <h1 className="header-title">PawPals</h1>
          <p className="header-subtitle">Find the perfect playdate for your pet</p>
          <div className="user-pill">
            {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : <span>👤</span>}
            <span className="user-name">{user.name}</span>
            <button className="btn-sm user-logout" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>

      <nav className="tab-bar">
        <button className={`tab-btn ${tab === 'profiles' ? 'active' : ''}`} onClick={() => setTab('profiles')}>
          <span className="tab-icon">🐕</span>
          <span className="tab-label">Pets</span>
        </button>
        <button className={`tab-btn ${tab === 'map' ? 'active' : ''}`} onClick={() => setTab('map')}>
          <span className="tab-icon">🗺️</span>
          <span className="tab-label">Map</span>
        </button>
        <button className={`tab-btn ${tab === 'playdates' ? 'active' : ''}`} onClick={() => setTab('playdates')}>
          <span className="tab-icon">💌</span>
          <span className="tab-label">Playdates</span>
        </button>
      </nav>

      <main className="main-content">
        {tab === 'profiles' && <PetProfiles currentUser={user} />}
        {tab === 'map' && <MapView currentUser={user} userLocation={location} locationStatus={locationStatus} />}
        {tab === 'playdates' && <Playdates currentUser={user} />}
        {tab === 'map' && locationMessage ? <div className="location-banner">{locationMessage}</div> : null}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);