App.js

// STEP 1 — The app entry point. Everything is wired together here.
// WHY: App.js is what Expo mounts first. We keep it as the "container": it owns
// the state and the data-loading, then hands plain data down to dumb components.
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet, StatusBar, SafeAreaView } from 'react-native';
import SearchBar from './src/components/SearchBar';
import CurrentWeather from './src/components/CurrentWeather';
import Forecast from './src/components/Forecast';
import { getWeather } from './src/api/weather';
import { theme } from './src/theme';

export default function App() {
  // STEP 7 — State: the four things the screen can be in.
  // WHY: query (the text box), data (the loaded weather), loading + error.
  // Render is a pure function of this state — change state, UI follows.
  const [query, setQuery] = useState('Bhandara');
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // STEP 8 — load(): fetch, then move state into the right slot.
  async function load(city) {
    if (!city.trim()) return;
    setLoading(true);
    setError(null);
    try {
      const result = await getWeather(city.trim());
      setData(result);
    } catch (e) {
      setError(e.message);
      setData(null);
    } finally {
      setLoading(false);          // WHY: finally → loading clears on success AND failure
    }
  }

  // STEP 9 — useEffect with [] runs once on mount: load a default city.
  // WHY: so the app shows something useful the moment it opens.
  useEffect(() => {
    load('Bhandara');
  }, []);

  return (
    <SafeAreaView style={styles.safe}>
      <StatusBar barStyle="light-content" />
      <View style={styles.header}>
        <Text style={styles.brand}>WeatherNow</Text>
        <SearchBar value={query} onChangeText={setQuery} onSubmit={() => load(query)} />
      </View>

      {/* STEP 10 — Render branches on state: loading → spinner, error → message,
          data → the real screen. This is the whole app's logic, in one place. */}
      <View style={styles.body}>
        {loading && <ActivityIndicator size="large" color="#fff" style={{ marginTop: 40 }} />}
        {error && !loading && <Text style={styles.error}>{error} 🤷</Text>}
        {data && !loading && (
          <>
            <CurrentWeather place={data.place} current={data.current} />
            <Forecast days={data.days} />
          </>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: theme.primary },
  header: { paddingHorizontal: theme.pad, paddingTop: 12, paddingBottom: 8 },
  brand: { color: theme.muted, fontSize: 13, marginBottom: 8 },
  body: { flex: 1, paddingHorizontal: theme.pad, paddingBottom: theme.pad },
  error: { color: theme.text, textAlign: 'center', marginTop: 40, fontSize: 16 },
});