import { View, ScrollView, Pressable } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";
import { Bell, Settings, ChevronRight } from "@/lib/icons";

const MOCK_NOTIFICATIONS = [
  {
    id: "1",
    title: "Invoice reminder",
    body: "Invoice #2 to Robin Murray is due in 2 days.",
    time: "2h ago",
    read: false,
  },
  {
    id: "2",
    title: "Payment received",
    body: "Payment of $500 received for Invoice #4.",
    time: "1d ago",
    read: true,
  },
  {
    id: "3",
    title: "Proforma submission",
    body: "Vendor A submitted a quote for Marketing Landing Page.",
    time: "2d ago",
    read: true,
  },
];

export default function NotificationsScreen() {
  const nav = useSirouRouter<AppRoutes>();
  return (
    <ScrollView
      className="flex-1 bg-background"
      contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
    >
      <View className="mb-4 flex-row items-center justify-between">
        <View className="flex-row items-center gap-2">
          <Bell color="#18181b" size={22} strokeWidth={2} />
          <Text className="text-xl font-semibold text-gray-900">
            Notifications
          </Text>
        </View>
        <Pressable
          className="flex-row items-center gap-1"
          onPress={() => nav.go("notifications/settings")}
        >
          <Settings color="#ea580c" size={18} strokeWidth={2} />
          <Text className="text-primary font-medium">Settings</Text>
        </Pressable>
      </View>

      {MOCK_NOTIFICATIONS.map((n) => (
        <Card
          key={n.id}
          className={`mb-2 ${!n.read ? "border-primary/30" : ""}`}
        >
          <CardContent className="py-3">
            <Text className="font-semibold text-gray-900">{n.title}</Text>
            <Text className="text-muted-foreground mt-1 text-sm">{n.body}</Text>
            <Text className="text-muted-foreground mt-1 text-xs">{n.time}</Text>
          </CardContent>
        </Card>
      ))}
    </ScrollView>
  );
}