import { useMemo } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { router } from 'expo-router';
import { useNotesStore } from '../../store/notes-store';
import { colors } from '../../theme';

export default function HomeScreen() {
  const notes = useNotesStore((state) => state.notes);
  const recentNotes = useMemo(
    () =>
      notes.map((note) => ({
        id: note.id,
        title: note.title,
        workspace: note.workspaceName,
        preview: note.body,
      })),
    [notes]
  );

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.eyebrow}>Recent notes</Text>
      <Text style={styles.title}>Capture and retrieve fast</Text>
      <Text style={styles.subtitle}>Mobile MVP focuses on recent notes, quick capture, search, and lightweight review.</Text>

      {recentNotes.map((note) => (
        <Pressable key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={styles.card}>
          <View style={styles.badgeRow}>
            <Text style={styles.badge}>{note.workspace}</Text>
          </View>
          <Text style={styles.cardTitle}>{note.title}</Text>
          <Text style={styles.cardPreview}>{note.preview}</Text>
        </Pressable>
      ))}
      {recentNotes.length === 0 ? <Text style={styles.empty}>No recent notes yet.</Text> : null}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 14,
    backgroundColor: colors.bgCanvas,
    minHeight: '100%',
  },
  eyebrow: {
    color: colors.textSecondary,
    fontSize: 13,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  title: {
    color: colors.textPrimary,
    fontSize: 30,
    fontWeight: '700',
  },
  subtitle: {
    color: colors.textSecondary,
    fontSize: 16,
    lineHeight: 22,
    marginBottom: 8,
  },
  card: {
    backgroundColor: colors.surfaceCard,
    borderWidth: 1,
    borderColor: colors.borderDefault,
    borderRadius: 16,
    padding: 16,
    gap: 10,
  },
  badgeRow: {
    flexDirection: 'row',
  },
  badge: {
    color: colors.accentPrimary,
    backgroundColor: '#14203A',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 999,
    fontWeight: '600',
    overflow: 'hidden',
  },
  cardTitle: {
    color: colors.textPrimary,
    fontSize: 18,
    fontWeight: '700',
  },
  cardPreview: {
    color: colors.textSecondary,
    fontSize: 15,
    lineHeight: 21,
  },
  empty: {
    color: colors.textSecondary,
    fontSize: 15,
  },
});
