lively/app/picker.tsx

import { useCallback, useEffect, useState } from "react";
import {
  ActivityIndicator,
  Dimensions,
  FlatList,
  Image,
  Linking,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useRouter } from "expo-router";
import * as MediaLibrary from "expo-media-library";
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
import { X } from "phosphor-react-native";
import { GlassCard, GlassButton, GlassPill } from "@/components/glass";
import { useWallpaperStore } from "@/stores/wallpaper.store";
import { requestGalleryPermission } from "@/services/media/gallery.service";
import { colors, typography, spacing, layout } from "@/theme";

const { width: SCREEN_WIDTH } = Dimensions.get("window");
const NUM_COLUMNS = 3;
const IMAGE_GAP = 2;
const IMAGE_SIZE = (SCREEN_WIDTH - IMAGE_GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS;

type Tab = "recent" | "favorites" | "albums";

interface PhotoItem {
  id: string;
  uri: string;
}

export default function PickerScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const setSourceImage = useWallpaperStore((s) => s.setSourceImage);
  const resetEditor = useWallpaperStore((s) => s.resetEditor);

  const [tab, setTab] = useState<Tab>("recent");
  const [photos, setPhotos] = useState<PhotoItem[]>([]);
  const [hasPermission, setHasPermission] = useState(false);
  const [loading, setLoading] = useState(true);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    (async () => {
      const granted = await requestGalleryPermission();
      setHasPermission(granted);
      if (granted) {
        await loadPhotos(0);
      }
      setLoading(false);
    })();
  }, []);

  const loadPhotos = useCallback(async (startOffset: number) => {
    try {
      const query = new MediaLibrary.Query()
        .eq(MediaLibrary.AssetField.MEDIA_TYPE, MediaLibrary.MediaType.IMAGE)
        .orderBy({
          key: MediaLibrary.AssetField.CREATION_TIME,
          ascending: false,
        })
        .limit(60)
        .offset(startOffset);

      const assets = await query.exe();

      // Resolve URIs from assets
      const items: PhotoItem[] = [];
      for (const asset of assets) {
        try {
          const uri = await asset.getUri();
          items.push({ id: asset.id, uri });
        } catch {
          // Skip assets that can't be resolved (corrupted, cloud-only, etc.)
        }
      }

      setPhotos((prev) => (startOffset === 0 ? items : [...prev, ...items]));
      setOffset(startOffset + assets.length);
      setHasMore(assets.length === 60);
    } catch {
      // Gallery read error — device-specific edge case
    }
  }, []);

  const loadMore = useCallback(() => {
    if (hasMore) {
      loadPhotos(offset);
    }
  }, [hasMore, offset, loadPhotos]);

  const handleSelectPhoto = useCallback(
    (item: PhotoItem) => {
      resetEditor();
      setSourceImage(item.uri);
      router.replace("/editor/new");
    },
    [router, setSourceImage, resetEditor]
  );

  if (loading) {
    return (
      <View style={[styles.container, styles.centered, { paddingTop: insets.top }]}>
        <ActivityIndicator color={colors.text.secondary} size="large" />
      </View>
    );
  }

  if (!hasPermission) {
    return (
      <View style={[styles.container, { paddingTop: insets.top }]}>
        <PermissionDenied />
      </View>
    );
  }

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      {/* Header */}
      <Animated.View entering={FadeIn.duration(300)} style={styles.header}>
        <GlassCard variant="subtle" radius="lg" padding={12}>
          <View style={styles.headerRow}>
            <Pressable onPress={() => router.back()}>
              <X size={20} color={colors.text.primary} weight="light" />
            </Pressable>
            <Text style={typography.heading}>Choisir une photo</Text>
            <View style={{ width: 24 }} />
          </View>
        </GlassCard>
      </Animated.View>

      {/* Tab pills */}
      <Animated.View entering={FadeInDown.delay(100).duration(300)} style={styles.tabs}>
        <GlassPill
          label="Récentes"
          selected={tab === "recent"}
          onPress={() => setTab("recent")}
        />
        <GlassPill
          label="Favoris"
          selected={tab === "favorites"}
          onPress={() => setTab("favorites")}
        />
        <GlassPill
          label="Albums"
          selected={tab === "albums"}
          onPress={() => setTab("albums")}
        />
      </Animated.View>

      {/* Photo grid */}
      <FlatList
        data={photos}
        numColumns={NUM_COLUMNS}
        keyExtractor={(item) => item.id}
        onEndReached={loadMore}
        onEndReachedThreshold={0.5}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={[styles.grid, photos.length === 0 && styles.centered]}
        ListEmptyComponent={
          <View style={styles.emptyGallery}>
            <Text style={[typography.bodySecondary, { textAlign: "center" }]}>
              Aucune photo trouvée dans votre galerie
            </Text>
          </View>
        }
        renderItem={({ item }) => (
          <Pressable
            onPress={() => handleSelectPhoto(item)}
            style={({ pressed }) => [
              styles.imageContainer,
              pressed && styles.imagePressed,
            ]}
          >
            <Image
              source={{ uri: item.uri }}
              style={styles.image}
              resizeMode="cover"
            />
          </Pressable>
        )}
      />
    </View>
  );
}

function PermissionDenied() {
  return (
    <View style={styles.permissionContainer}>
      <GlassCard variant="medium" radius="xl" padding={32}>
        <Text style={[typography.heading, { textAlign: "center" }]}>
          Accès aux photos requis
        </Text>
        <Text
          style={[
            typography.bodySecondary,
            { textAlign: "center", marginTop: 8, marginBottom: 20 },
          ]}
        >
          Lively a besoin d'accéder à votre galerie{"\n"}pour créer des fonds
          d'écran animés
        </Text>
        <GlassButton
          label="Ouvrir les réglages"
          onPress={() => Linking.openSettings()}
          variant="primary"
          size="md"
        />
      </GlassCard>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  header: {
    paddingHorizontal: layout.screenPadding,
    marginBottom: spacing.sm,
  },
  headerRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  tabs: {
    flexDirection: "row",
    paddingHorizontal: layout.screenPadding,
    marginBottom: spacing.md,
  },
  grid: {
    paddingBottom: 40,
  },
  imageContainer: {
    width: IMAGE_SIZE,
    height: IMAGE_SIZE,
    padding: IMAGE_GAP / 2,
  },
  image: {
    flex: 1,
  },
  imagePressed: {
    opacity: 0.7,
  },
  permissionContainer: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: layout.screenPadding + spacing.md,
  },
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  emptyGallery: {
    paddingTop: 80,
    paddingHorizontal: layout.screenPadding,
  },
});