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 { registerForPushNotifications } from "@/hooks/useRegisterPushToken";

import { useLocalSearchParams } from "expo-router";

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

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

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

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);

  async function sendPushNotification() {

    const expoPushToken = await registerForPushNotifications();

    if (expoPushToken) {

      const message = {

        to: expoPushToken,

        sound: "default",

        title: "Oi meu querido",

        body: "Vamo escutar um The Doors",

        data: { screen: "notifications" },

      };

      await fetch("https://exp.host/--/api/v2/push/send", {

        method: "POST",

        headers: {

          Accept: "application/json",

          "Accept-encoding": "gzip, deflate",

          "Content-Type": "application/json",

        },

        body: JSON.stringify(message),

      });

    }

  }

  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>

          <Button title="Quer ver uma coisa?" onPress={sendPushNotification} />

        </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,

  },

});