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 { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Settings, Bell, Globe, ChevronRight, Info } from "@/lib/icons";

const PRIMARY = "#ea580c";

export default function SettingsScreen() {
  const nav = useSirouRouter<AppRoutes>();
  return (
    <ScrollView
      className="flex-1 bg-[#f5f5f5]"
      contentContainerStyle={{ padding: 20, paddingBottom: 40 }}
      showsVerticalScrollIndicator={false}
    >
      <View className="mb-5 flex-row items-center gap-2">
        <Settings color="#18181b" size={22} strokeWidth={2} />
        <Text className="text-xl font-semibold text-gray-900">Settings</Text>
      </View>

      <Card className="mb-4 overflow-hidden rounded-xl border border-border bg-white">
        <CardHeader className="pb-2">
          <CardTitle className="text-base">Preferences</CardTitle>
        </CardHeader>
        <CardContent className="gap-0">
          <Pressable
            className="flex-row items-center justify-between border-b border-border py-3"
            onPress={() => nav.go("notifications/settings")}
          >
            <View className="flex-row items-center gap-3">
              <Bell color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Notifications</Text>
            </View>
            <ChevronRight color="#a1a1aa" size={18} strokeWidth={2} />
          </Pressable>
          <View className="flex-row items-center justify-between py-3">
            <View className="flex-row items-center gap-3">
              <Globe color="#71717a" size={20} strokeWidth={2} />
              <Text className="text-muted-foreground">Language</Text>
            </View>
            <Text className="text-gray-900">English</Text>
          </View>
        </CardContent>
      </Card>

      <Card className="mb-4 overflow-hidden rounded-xl border border-border bg-white">
        <CardHeader className="pb-2">
          <View className="flex-row items-center gap-2">
            <Info color="#71717a" size={18} strokeWidth={2} />
            <CardTitle className="text-base">About</CardTitle>
          </View>
        </CardHeader>
        <CardContent>
          <Text className="text-muted-foreground text-sm leading-5">
            Yaltopia Tickets App v1.0 — Scan. Send. Reconcile.
          </Text>
        </CardContent>
      </Card>

      <View className="rounded-xl border border-border bg-white p-4">
        <Text className="text-muted-foreground text-xs">
          API: Invoices, Proforma, Payments, Reports, Documents, Notifications —
          see swagger.json and README for integration.
        </Text>
      </View>

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