import {

  StyleSheet,

  ScrollView,

  KeyboardAvoidingView,

} from "react-native";

import { Text } from "@/components/ui/Text";

import { useState, useEffect } from "react";

import * as Notifications from "expo-notifications";

import { useLocalSearchParams } from "expo-router";

import { StatusBar } from "expo-status-bar";

import { SafeAreaView } from "react-native-safe-area-context";

import { Colors, Spacing } from "@/constants/theme";

import { Card } from "@/components/ui/Cards";

import { Section, SectionHeader } from "@/components/ui/Sections";

type NotificationParams = {

  title?: string;

  body?: string;

  notificationId?: string;

};

type ReceivedNotification = {

  title?: string;

  body?: string;

};

export default function NotificationsPage() {

  const params = useLocalSearchParams<NotificationParams>();

  const [liveNotification, setLiveNotification] = useState<ReceivedNotification | null>(null);

  useEffect(() => {

    const sub = Notifications.addNotificationReceivedListener((n) => {

      setLiveNotification({

        title: n.request.content.title ?? undefined,

        body: n.request.content.body ?? undefined,

      });

    });

    return () => sub.remove();

  }, []);

  const displayed = liveNotification ?? (params.title || params.body ? { title: params.title, body: params.body } : null);

  return (

    <SafeAreaView style={styles.container}>

      <StatusBar style={"dark"} />

      <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>

        <ScrollView

          contentContainerStyle={styles.scrollContainer}

          showsVerticalScrollIndicator={false}

        >

          <Section>

            <SectionHeader title="Recebidas" />

            {displayed ? (

              <Card style={{ padding: Spacing.cardGap }}>

                <Text>Title: {displayed.title}</Text>

                <Text>Body: {displayed.body}</Text>

              </Card>

            ) : (

              <Card style={{ padding: Spacing.cardGap }}>

                <Text>Nenhuma notificação recebida.</Text>

              </Card>

            )}

          </Section>

        </ScrollView>

      </KeyboardAvoidingView>

    </SafeAreaView>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: Colors.light.background,

  },

  keyboardView: {

    flex: 1,

  },

  scrollContainer: {

    flexGrow: 1,

    paddingHorizontal: 24,

    justifyContent: "flex-start",

    minHeight: "100%",

  },

  header: {

    alignItems: "flex-start",

    marginBottom: 40,

  },

});