import React from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import type { PostSummary } from '@ai-radar/shared';
import { useTheme } from '../theme/ThemeProvider';
import { textStyle, space } from '../theme';
import { getDict } from '../lib/dictionary';
import { useSaved } from '../lib/saved';
import { StoryCard } from '../components/StoryCard';
import { EmptyState } from '../components/States';

/** Saved stories. Device-local, no account — see lib/saved.tsx. */
export function SavedScreen({ onOpen }: { onOpen: (post: PostSummary) => void }) {
  const { palette, locale, rtl } = useTheme();
  const dict = getDict(locale);
  const insets = useSafeAreaInsets();
  const { items } = useSaved();

  return (
    <ScrollView
      style={{ backgroundColor: palette.bg }}
      contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + space.s10 }]}
    >
      <Text
        style={[
          textStyle('display', locale),
          { color: palette.text, textAlign: rtl ? 'right' : 'left', marginBottom: space.s5 },
        ]}
      >
        {dict.saved}
      </Text>

      {items.length === 0 ? (
        <EmptyState title={dict.savedEmptyTitle} body={dict.savedEmptyBody} />
      ) : (
        <View>
          {items.map((post) => (
            <StoryCard key={post.slug} post={post} variant="row" onPress={onOpen} />
          ))}
        </View>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: space.s4,
    paddingTop: space.s4,
  },
});