import { useMemo, useState } from 'react';
import { Gallery } from './components/Gallery.jsx';
import { SightingMap } from './components/SightingMap.jsx';
import { AddSighting } from './components/AddSighting.jsx';
import { SightingDetail } from './components/SightingDetail.jsx';
import { useAuth, useCollection } from '@deplixo/sdk';

// PROGRESS:sc_001:complete:Setting up your nature journal
function App() {
  const { user, loading, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('gallery');
  const [showAddModal, setShowAddModal] = useState(false);
  const [selectedSighting, setSelectedSighting] = useState(null);
  const [searchQuery, setSearchQuery] = useState('');
  const collection = useCollection('sightings', { personal: true });

  const tabs = [
    { id: 'gallery', label: 'Gallery', icon: '🌿' },
    { id: 'map', label: 'Map', icon: '🗺️' },
  ];

  const normalizedQuery = searchQuery.trim().toLowerCase();

  const filteredSightings = useMemo(() => {
    const items = collection.items || [];

    if (!normalizedQuery) return items;

    return items.filter(item => {
      const name = `${item.name || ''} ${item.plantName || ''} ${item.commonName || ''}`.toLowerCase();
      const location = `${item.location || ''} ${item.address || ''} ${item.place || ''} ${item.city || ''} ${item.region || ''}`.toLowerCase();
      return name.includes(normalizedQuery) || location.includes(normalizedQuery);
    });
  }, [collection.items, normalizedQuery]);

  const filteredCollection = {
    ...collection,
    items: filteredSightings,
    count: filteredSightings.length,
  };

  const handleSelectSighting = sighting => {
    setSelectedSighting(sighting);
  };

  if (loading) {
    return (
      <div className="auth-gate-shell">
        <div className="auth-gate-card">
          <div className="auth-gate-icon">🌱</div>
          <h1 className="auth-gate-title">Nature Journal</h1>
          <p className="auth-gate-text">Signing you in...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="auth-gate-shell">
        <div className="auth-gate-card">
          <div className="auth-gate-icon">🌿</div>
          <h1 className="auth-gate-title">Nature Journal</h1>
          <p className="auth-gate-text">
            Sign in with Google to keep your sightings and journal entries personal.
          </p>
          <a className="auth-gate-btn" href="#" onClick={e => e.preventDefault()}>
            Continue with Google
          </a>
          <p className="auth-gate-note">Google sign-in is handled by Deplixo auth.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <h1 className="app-title">🌱 Nature Journal</h1>
          <p className="app-subtitle">Document your botanical discoveries</p>
        </div>
        <div className="header-actions">
          <div className="user-pill" title={user.email || user.name}>
            <span className="user-avatar">{(user.name || 'U').slice(0, 1).toUpperCase()}</span>
            <span className="user-name">{user.name}</span>
          </div>
          <button className="auth-btn" onClick={logout}>
            Sign Out
          </button>
          <button className="add-btn" onClick={() => setShowAddModal(true)}>
            + Log Sighting
          </button>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-item ${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="main-content">
        <div className="search-row">
          <div className="search-wrapper app-search-wrapper">
            <span className="search-icon">🔎</span>
            <input
              className="search-input"
              type="search"
              value={searchQuery}
              onChange={e => setSearchQuery(e.target.value)}
              placeholder="Search plant name or location"
              aria-label="Search plant name or location"
            />
            {searchQuery && (
              <button
                className="search-clear"
                onClick={() => setSearchQuery('')}
                aria-label="Clear search"
                title="Clear search"
              >
                ×
              </button>
            )}
          </div>
          <div className="search-results-count" aria-live="polite">
            {normalizedQuery
              ? `${filteredSightings.length} result${filteredSightings.length === 1 ? '' : 's'}`
              : `${collection.count || 0} sighting${(collection.count || 0) === 1 ? '' : 's'}`}
          </div>
        </div>

        {normalizedQuery && filteredSightings.length === 0 && (
          <div className="empty-state search-empty-state">
            <div className="empty-icon">🌱</div>
            <h2 className="empty-title">No matching sightings</h2>
            <p className="empty-text">Try a different plant name or location keyword.</p>
          </div>
        )}

        {!normalizedQuery || filteredSightings.length > 0 ? (
          <>
            {activeTab === 'gallery' && (
              <Gallery collection={filteredCollection} onSelect={handleSelectSighting} />
            )}
            {activeTab === 'map' && (
              <SightingMap collection={filteredCollection} onSelect={handleSelectSighting} />
            )}
          </>
        ) : null}
      </main>

      {showAddModal && <AddSighting collection={collection} onClose={() => setShowAddModal(false)} />}

      {selectedSighting && (
        <SightingDetail
          sighting={selectedSighting}
          collection={collection}
          onClose={() => setSelectedSighting(null)}
        />
      )}
    </div>
  );
}

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