import { ScrollView, View } from "react-native";
import { Card } from "@/components/ui/Card";
import { SwitchRow } from "@/components/ui/Field";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { usePrefsStore } from "@/lib/stores/prefsStore";
import { colors, gutter } from "@/lib/theme";

export default function NotificationPrefsScreen() {
  const prefs = usePrefsStore();

  return (
    <Screen>
      <AppHeader title="Notification preferences" subtitle="SMS · Email · Push" />
      <ScrollView
        contentContainerStyle={{
          paddingHorizontal: gutter,
          paddingBottom: 40,
          gap: 14,
        }}
      >
        <Card elevated={false}>
          <Text variant="bodySm" color={colors.muted}>
            Choose how Gishen reaches you for orders, refill reminders, and updates.
          </Text>
        </Card>

        <Card padded={false} elevated={false}>
          <View style={{ paddingHorizontal: 4 }}>
            <SwitchRow
              icon="chatbubble-outline"
              title="SMS"
              subtitle="Order and pickup alerts by text"
              value={prefs.sms}
              onValueChange={(v) => prefs.setPref("sms", v)}
            />
            <SwitchRow
              icon="mail-outline"
              title="Email"
              subtitle="Receipts and statements"
              value={prefs.email}
              onValueChange={(v) => prefs.setPref("email", v)}
            />
            <SwitchRow
              icon="notifications-outline"
              title="Push"
              subtitle="Live tracking and dose reminders"
              value={prefs.push}
              onValueChange={(v) => prefs.setPref("push", v)}
              last
            />
          </View>
        </Card>

        <Card padded={false} elevated={false}>
          <View style={{ paddingHorizontal: 4 }}>
            <SwitchRow
              title="Order updates"
              subtitle="Paid, packed, out for delivery"
              value={prefs.orderUpdates}
              onValueChange={(v) => prefs.setPref("orderUpdates", v)}
            />
            <SwitchRow
              title="Refill reminders"
              subtitle="When days-of-supply is running out"
              value={prefs.refillReminders}
              onValueChange={(v) => prefs.setPref("refillReminders", v)}
            />
            <SwitchRow
              title="Offers & tips"
              subtitle="Optional marketing messages"
              value={prefs.marketing}
              onValueChange={(v) => prefs.setPref("marketing", v)}
              last
            />
          </View>
        </Card>
      </ScrollView>
    </Screen>
  );
}