import { View, ScrollView, Switch } from 'react-native';
import { router } from 'expo-router';
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 [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={() => router.back()}>
        <Text className="font-medium">Back</Text>
      </Button>
    </ScrollView>
  );
}