// DEPLOY_CONFIG: {"triggers": [{"name": "practice_email_reminder", "on": "collection.add", "collection": "practices", "actions": [{"type": "email", "to": "{{practice_email}}", "subject": "Upcoming Practice Reminder", "body": "Hi {{name}}, this is a reminder that your scheduled practice is coming up soon. Please be prepared and arrive on time."}]}, {"name": "session_all_members_confirmed", "on": "collection.update", "collection": "proposed_sessions", "actions": [{"type": "event", "config": {"event_type": "proposed_session_all_members_confirmed"}}]}]}
import { useEffect, useRef, useState } from 'react';
import { useAuth, usePresence, renderMap, useCollection } from '@deplixo/sdk';
import { AvailabilityGrid } from './components/AvailabilityGrid.jsx';
import { OverlapFinder } from './components/OverlapFinder.jsx';
import { PracticeSessions } from './components/PracticeSessions.jsx';

function OnlineUsers() {
  const { users } = usePresence({ status: 'online' });

  return (
    <div className="online-users">
      <span className="online-users-label">{users.length} online</span>
      <div className="online-users-list">
        {users.map(u => (
          <span key={u.id} className="online-user-pill" title={u.name}>
            <span className="online-user-dot" />
            <span className="online-user-name">{u.name}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function PracticeLocationMap({ location, label = 'Practice Location' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const marker = location?.lat != null && location?.lng != null
      ? [{
          lat: location.lat,
          lng: location.lng,
          popup: `<b>${label}</b><p>${location.name || 'Practice location'}</p>${location.address ? `<p>${location.address}</p>` : ''}`,
        }]
      : [];

    renderMap(containerRef.current, {
      center: location?.lat != null && location?.lng != null ? [location.lat, location.lng] : [40.7128, -74.006],
      zoom: location?.lat != null && location?.lng != null ? 13 : 2,
      markers: marker,
    });
  }, [location, label]);

  return <div ref={containerRef} className="practice-map" />;
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('availability');
  const [practiceLocation, setPracticeLocation] = useState('');
  const [practiceLocationName, setPracticeLocationName] = useState('');
  const [practiceLocationCoords, setPracticeLocationCoords] = useState({ lat: '', lng: '' });

  const tabs = [
    { id: 'availability', label: '🗓️ My Availability', icon: '🗓️' },
    { id: 'overlaps', label: '🔍 Find Times', icon: '🔍' },
    { id: 'sessions', label: '🎸 Sessions', icon: '🎸' },
  ];

  if (loading) return <div className="loading-container"><div className="empty-state"><span className="empty-icon-lg">🎵</span><h3>Signing you in...</h3><p>Connecting BandSync to your Google account.</p></div></div>;

  if (!user) {
    return (
      <div className="app-shell auth-gate-shell">
        <header className="app-header">
          <div className="header-content">
            <div className="logo-area">
              <span className="logo-icon">🎵</span>
              <h1 className="app-title">BandSync</h1>
            </div>
            <p className="app-subtitle">Schedule practice, find time, rock on.</p>
          </div>
        </header>
        <main className="app-main auth-gate-main">
          <div className="empty-state auth-gate-card">
            <span className="empty-icon-lg">🔐</span>
            <h3>Sign in to continue</h3>
            <p>Use Google OAuth to join your band space, manage your availability, and create sessions as your authenticated identity.</p>
            <button className="btn-primary" onClick={login}>Continue with Google</button>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="logo-area">
            <span className="logo-icon">🎵</span>
            <h1 className="app-title">BandSync</h1>
          </div>
          <p className="app-subtitle">Schedule practice, find time, rock on.</p>
          <div className="auth-user-bar">
            <div className="auth-user-info">
              {user.avatar ? <img className="auth-avatar" src={user.avatar} alt={user.name} /> : <span className="auth-avatar fallback">{(user.name || 'U').slice(0, 1).toUpperCase()}</span>}
              <div>
                <div className="auth-user-name">{user.name}</div>
                <div className="auth-user-email">{user.email}</div>
              </div>
            </div>
            <OnlineUsers />
            <button className="btn-ghost auth-logout" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        <section className="presence-banner card-animate">
          <div className="presence-banner-header">
            <h3>Practice Location</h3>
            <span className="presence-count">Shared with your band</span>
          </div>
          <div className="location-form-grid">
            <div className="form-group">
              <label className="form-label">Location name</label>
              <input
                className="input-field"
                value={practiceLocationName}
                onChange={(e) => setPracticeLocationName(e.target.value)}
                placeholder="Studio, garage, rehearsal space"
              />
            </div>
            <div className="form-group">
              <label className="form-label">Address</label>
              <input
                className="input-field"
                value={practiceLocation}
                onChange={(e) => setPracticeLocation(e.target.value)}
                placeholder="123 Main St, City, State"
              />
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Latitude</label>
                <input
                  className="input-field"
                  value={practiceLocationCoords.lat}
                  onChange={(e) => setPracticeLocationCoords(prev => ({ ...prev, lat: e.target.value }))}
                  placeholder="40.7128"
                />
              </div>
              <div className="form-group">
                <label className="form-label">Longitude</label>
                <input
                  className="input-field"
                  value={practiceLocationCoords.lng}
                  onChange={(e) => setPracticeLocationCoords(prev => ({ ...prev, lng: e.target.value }))}
                  placeholder="-74.0060"
                />
              </div>
            </div>
          </div>
          <div className="presence-users practice-location-summary">
            <span className="presence-user-pill">
              <span className="presence-dot online" />
              {practiceLocationName || 'Practice location'}
            </span>
            <span className="presence-user-pill">
              <span className="presence-dot online" />
              {practiceLocation || 'No address set yet'}
            </span>
          </div>
          <div className="practice-map-wrap">
            <PracticeLocationMap
              location={{
                name: practiceLocationName,
                address: practiceLocation,
                lat: practiceLocationCoords.lat ? Number(practiceLocationCoords.lat) : null,
                lng: practiceLocationCoords.lng ? Number(practiceLocationCoords.lng) : null,
              }}
            />
          </div>
        </section>

        {activeTab === 'availability' && <AvailabilityGrid currentUser={user} />}
        {activeTab === 'overlaps' && <OverlapFinder currentUser={user} />}
        {activeTab === 'sessions' && <PracticeSessions currentUser={user} />}
      </main>
    </div>
  );
}

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