/* @component-map
 * App — Main container, handles auth, tab switching, layout
 * Header — Top bar with logo, live indicator, user pill
 * TabBar — Tab navigation (Received, Sent, New)
 * SendSelfie — Camera capture and send form
 * SelfieList — Displays received or sent selfies with pagination
 * SelfieCard — Individual selfie card display
 * Toast — Toast notification system
 * @end-component-map */

import { useAuth, useCollection } from '@deplixo/sdk';
import { Header } from './components/Header.jsx';
import { TabBar } from './components/TabBar.jsx';
import { SendSelfie } from './components/SendSelfie.jsx';
import { SelfieList } from './components/SelfieList.jsx';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Toast } from './components/Toast.jsx';

function App() {
  const { user, loading: authLoading, logout } = useAuth();
  const { items, loading: dataLoading, add } = useCollection('selfies');
  const [tab, setTab] = useState('received');
  const [toast, setToast] = useState(null);

  const showToast = useCallback((message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3000);
  }, []);

  if (authLoading || !user) {
    return (
      <div className="app">
        <div className="loading-screen">
          <div className="loading-spinner"></div>
          <div className="loading-text">Loading SnapDrop...</div>
        </div>
      </div>
    );
  }

  const myEmail = user.email.toLowerCase();
  const received = items.filter(e => e.value.recipientEmail?.toLowerCase() === myEmail && e.value.senderEmail?.toLowerCase() !== myEmail);
  const sent = items.filter(e => e.value.senderEmail?.toLowerCase() === myEmail);

  return (
    <div className="app">
      <Header user={user} onLogout={logout} />
      <TabBar tab={tab} setTab={setTab} receivedCount={received.length} sentCount={sent.length} />
      {tab === 'send' && (
        <SendSelfie user={user} addSelfie={add} showToast={showToast} onSent={() => setTab('sent')} />
      )}
      {tab === 'received' && (
        <SelfieList entries={received} type="received" emptyIcon="📭" emptyText="No selfies received yet.<br/>Share your email so friends can snap you!" />
      )}
      {tab === 'sent' && (
        <SelfieList entries={sent} type="sent" emptyIcon="📤" emptyText="You haven't sent any selfies yet.<br/>Tap <strong>New</strong> to get started!" />
      )}
      <Toast toast={toast} />
    </div>
  );
}

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