kira/frontend/src/App.tsx

import { useState, useEffect } from 'react';
import Clock from './components/Clock';
import BackgroundScene from './components/BackgroundScene';
import MusicPlayer from './components/MusicPlayer';
import Timer from './components/Timer';
import Notes from './components/Notes';
import WhiteNoise from './components/WhiteNoise';
import KiraAvatar from './components/KiraAvatar';
import ChatBubble from './components/ChatBubble';
import PetZone from './components/PetZone';
import Wardrobe from './components/Wardrobe';
import Toolbar from './components/Toolbar';
import Particles from './components/Particles';
import WelcomeScreen from './components/WelcomeScreen';
import { SCENES, type Scene } from './components/scenes';
import { useConversation } from './hooks/useConversation';

export default function App() {
  const {
    messages,
    isConnected,
    isKiraSpeaking,
    isRecording,
    identified,
    preferences,
    loadingPrefs,
    identify,
    setPreference,
    sendText,
    startRecording,
    stopRecording,
    livePartial,
  } = useConversation();

  const [currentSceneId, setCurrentSceneId] = useState('cozy-room');
  const [currentOutfit, setCurrentOutfit] = useState('cozy-hoodie');
  const [currentAcc, setCurrentAcc] = useState<string | null>(null);
  const [textInput, setTextInput] = useState('');

  // Apply saved preferences once they load
  useEffect(() => {
    if (preferences.scene) setCurrentSceneId(preferences.scene);
    if (preferences.outfit) setCurrentOutfit(preferences.outfit);
    if (preferences.accessory) setCurrentAcc(preferences.accessory);
  }, [preferences.scene, preferences.outfit, preferences.accessory]);

  const currentScene: Scene = SCENES.find((s) => s.id === currentSceneId) ?? SCENES[0];

  const handleSceneChange = (id: string) => {
    setCurrentSceneId(id);
    setPreference('scene', id);
  };

  const handleOutfitChange = (id: string) => {
    setCurrentOutfit(id);
    setPreference('outfit', id);
  };

  const handleAccessoryChange = (id: string | null) => {
    setCurrentAcc(id);
    setPreference('accessory', id || '');
  };

  const handleTalkToggle = () => {
    if (isRecording) stopRecording();
    else startRecording();
  };

  const handleTextSend = () => {
    if (!textInput.trim()) return;
    sendText(textInput.trim());
    setTextInput('');
  };

  const handleWelcome = (name: string) => {
    identify(name);
  };

  // Show WelcomeScreen for first-time users
  if (!identified && !loadingPrefs) {
    const savedId = localStorage.getItem('kira-user-id');
    if (!savedId) {
      return <WelcomeScreen onComplete={handleWelcome} />;
    }
    // Has saved ID but not identified yet — show welcome with their name
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
        <div className="glass-card max-w-sm w-full p-6 text-center space-y-4">
          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 mx-auto animate-pulse-glow">
            <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
              <span className="text-2xl">🌸</span>
            </div>
          </div>
          <p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
          <WelcomeScreen onComplete={handleWelcome} />
        </div>
        <style>{`
          @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }
            50% { box-shadow: 0 0 28px rgba(216,180,254,0.5); }
          }
          .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
        `}</style>
      </div>
    );
  }

  // Main app with user's name in the greeting
  const userName = preferences.name || 'there';

  return (
    <div
      className="min-h-screen relative transition-all duration-1000"
      style={{ background: currentScene.gradient }}
    >
      <Particles type={currentScene.particles ?? 'none'} />

      <div className="relative z-20 h-screen flex flex-col">
        {/* Top toolbar */}
        <div className="px-4 pt-4">
          <Toolbar currentScene={currentSceneId} onSceneChange={handleSceneChange} />
        </div>

        {/* Main grid */}
        <div className="flex-1 overflow-y-auto px-4 py-4 scrollbar-thin">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-7xl mx-auto">

            {/* Column 1: Kira + Clock */}
            <div className="space-y-4">
              <Clock />
              <KiraAvatar
                isSpeaking={isKiraSpeaking}
                isListening={isRecording}
                outfit={currentOutfit}
                accessory={currentAcc}
                onTalkToggle={handleTalkToggle}
              />
            </div>

            {/* Column 2: Timer + Music + Notes + WhiteNoise */}
            <div className="space-y-4">
              <Timer />
              <MusicPlayer />
              <Notes />
              <WhiteNoise />
            </div>

            {/* Column 3: Chat + Text Input */}
            <div className="space-y-4">
              <ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />

              {/* Text input fallback */}
              <div className="glass-card p-3">
                {/* Subtle greeting */}
                <div className="text-[10px] text-kira-plum/30 mb-2">
                  hey {userName} ✨
                </div>
                <div className="flex gap-2">
                  <input
                    value={textInput}
                    onChange={(e) => setTextInput(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleTextSend()}
                    placeholder={`what's up, ${userName}?`}
                    className="flex-1 bg-white/60 rounded-xl px-3 py-2 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50"
                  />
                  <button onClick={handleTextSend} className="btn-kira px-3 text-sm">
                    Send
                  </button>
                </div>
                <div className="flex items-center gap-2 mt-2 text-[10px] text-kira-plum/30">
                  <span className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-kira-mint' : 'bg-red-300'}`} />
                  {isConnected ? 'connected' : 'connecting...'}
                </div>
              </div>
            </div>

            {/* Column 4: Cats + Wardrobe */}
            <div className="space-y-4">
              <PetZone />
              <Wardrobe onOutfitChange={handleOutfitChange} onAccessoryChange={handleAccessoryChange} />
            </div>

          </div>
        </div>

        {/* Bottom bar */}
        <div className="px-4 pb-4">
          <div className="glass-card px-4 py-2 flex items-center justify-between text-xs text-kira-plum/40">
            <div className="flex items-center gap-3">
              <span className={`w-2 h-2 rounded-full ${isRecording ? 'bg-red-400 animate-pulse' : isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'} inline-block`} />
              <span>{isRecording ? 'listening...' : isKiraSpeaking ? 'kira speaking' : `kira's here for you, ${userName}`}</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="hidden sm:inline">{identified ? `hi ${userName}` : 'body double mode'}</span>
              <span>🌸</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}