import { useEffect, useRef, useState } from 'react';
import { useAuth, playSound } from '@deplixo/sdk';
import { CapsuleList } from './components/CapsuleList.jsx';
import { CreateCapsule } from './components/CreateCapsule.jsx';
import { CapsuleViewer } from './components/CapsuleViewer.jsx';

// PROGRESS:sc_001:complete:Setting up your time capsule vault
function App() {
  const { user, loading, logout } = useAuth();
  const [view, setView] = useState('list');
  const [selectedCapsule, setSelectedCapsule] = useState(null);
  const [unlockPlaybackKey, setUnlockPlaybackKey] = useState(0);
  const prevUnlockStateRef = useRef(null);

  function handleCreate() {
    setView('create');
    setSelectedCapsule(null);
  }

  function handleBack() {
    setView('list');
    setSelectedCapsule(null);
  }

  function handleViewCapsule(capsule) {
    setSelectedCapsule(capsule);
    setView('viewer');
  }

  function handleCapsuleCreated() {
    setView('list');
  }

  useEffect(() => {
    if (!selectedCapsule || view !== 'viewer') {
      prevUnlockStateRef.current = null;
      return;
    }

    const isUnlocked = Boolean(
      selectedCapsule.unlocked ||
      selectedCapsule.isUnlocked ||
      selectedCapsule.status === 'unlocked' ||
      (selectedCapsule.unlockDate && new Date(selectedCapsule.unlockDate) <= new Date())
    );

    const wasUnlocked = prevUnlockStateRef.current;
    if (wasUnlocked === false && isUnlocked) {
      playSound('@ding');
      setUnlockPlaybackKey((key) => key + 1);
    }

    prevUnlockStateRef.current = isUnlocked;
  }, [selectedCapsule, view]);

  if (loading) return <div className="auth-screen">Signing in...</div>;
  if (!user) return <div className="auth-screen">Please sign in to continue.</div>;

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-inner">
          <div className="logo-area">
            <span className="logo-icon">⏳</span>
            <div>
              <h1 className="app-title">Time Capsule</h1>
              <p className="app-subtitle">Letters to your future self</p>
            </div>
          </div>
          <div className="header-actions">
            <div className="user-chip">
              {user.avatar ? <img src={user.avatar} alt={user.name} className="user-avatar" /> : <span className="user-avatar-placeholder">{user.name?.[0] || 'U'}</span>}
              <span className="user-name">{user.name}</span>
            </div>
            <button className="btn-secondary btn-sm" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>
      <main className="app-main">
        {view === 'list' && (
          <CapsuleList userId={user.id} onCreateNew={handleCreate} onViewCapsule={handleViewCapsule} />
        )}
        {view === 'create' && (
          <CreateCapsule userId={user.id} onBack={handleBack} onCreated={handleCapsuleCreated} />
        )}
        {view === 'viewer' && selectedCapsule && selectedCapsule.userId === user.id && (
          <CapsuleViewer key={unlockPlaybackKey} userId={user.id} capsule={selectedCapsule} onBack={handleBack} />
        )}
      </main>
      <footer className="app-footer">
        <p>Seal your memories. Open them when the time is right.</p>
      </footer>
    </div>
  );
}

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