import { View, ScrollView, Switch } from "react-native";
import { useSirouRouter } from "@sirou/react-native";
import { AppRoutes } from "@/lib/routes";
import { useState } from "react";
import { Text } from "@/components/ui/text";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function NotificationSettingsScreen() {
  const nav = useSirouRouter<AppRoutes>();
  const [invoiceReminders, setInvoiceReminders] = useState(true);
  const [daysBeforeDue, setDaysBeforeDue] = useState(2);
  const [newsAlerts, setNewsAlerts] = useState(true);
  const [reportReady, setReportReady] = useState(true);

  return (
    <ScrollView
      className="flex-1 bg-background"
      contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
    >
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Notification settings</CardTitle>
        </CardHeader>
        <CardContent className="gap-4">
          <View className="flex-row items-center justify-between">
            <Text className="text-gray-900">Invoice reminders</Text>
            <Switch
              value={invoiceReminders}
              onValueChange={setInvoiceReminders}
            />
          </View>
          <View className="flex-row items-center justify-between">
            <Text className="text-gray-900">News & announcements</Text>
            <Switch value={newsAlerts} onValueChange={setNewsAlerts} />
          </View>
          <View className="flex-row items-center justify-between">
            <Text className="text-gray-900">Report ready</Text>
            <Switch value={reportReady} onValueChange={setReportReady} />
          </View>
        </CardContent>
      </Card>

      <Button variant="outline" onPress={() => nav.back()}>
        <Text className="font-medium">Back</Text>
      </Button>
    </ScrollView>
  );
}