import { useIdentity, useNotify, useUpload, useCollection, useEmail } from '@deplixo/sdk';
import Splash from './components/Splash.jsx';
import MainMenu from './components/MainMenu.jsx';
import FidgetsScreen from './components/FidgetsScreen.jsx';
import CarcasasScreen from './components/CarcasasScreen.jsx';

function App() {
  const [showSplash, setShowSplash] = useState(true);
  const [view, setView] = useState('menu'); // menu | fidgets | carcasas
  const { user } = useIdentity();
  const notify = useNotify();
  const upload = useUpload();
  const sendEmail = useEmail();
  const { add: addRequest } = useCollection('dl-family-requests');

  useEffect(() => {
    const t = setTimeout(() => setShowSplash(false), 1000);
    return () => clearTimeout(t);
  }, []);

  if (showSplash) return <Splash />;

  return (
    <div className="app-shell">
      <div className="wood-bg">
        <header className="app-header">
          <button
            className="brand-link"
            onClick={() => setView('menu')}
            data-testid="home-button"
            aria-label="Volver al inicio"
          >
            <span className="brand-mark">DL</span>
            <span className="brand-sub">Familia</span>
          </button>
          <div className="who">
            <span className="who-label">Familiar</span>
            <span className="who-name">{user?.name || '—'}</span>
          </div>
        </header>

        <main className="app-main">
          {view === 'menu' && <MainMenu onPick={setView} />}
          {view === 'fidgets' && (
            <FidgetsScreen
              user={user}
              notify={notify}
              sendEmail={sendEmail}
              addRequest={addRequest}
              onBack={() => setView('menu')}
            />
          )}
          {view === 'carcasas' && (
            <CarcasasScreen
              user={user}
              notify={notify}
              upload={upload}
              addRequest={addRequest}
              onBack={() => setView('menu')}
            />
          )}
        </main>

        <footer className="app-footer">
          <span>Uso privado · Familia DL</span>
        </footer>
      </div>
    </div>
  );
}

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