import { Alert, ScrollView, Switch, Text, TouchableOpacity, View } from "react-native";
import { ScreenContainer } from "@/components/screen-container";
import { useStore } from "@/lib/store";
import { useColors } from "@/hooks/use-colors";
import { useColorScheme } from "@/hooks/use-color-scheme";
import { useContext } from "react";
import { ThemeContext } from "@/lib/theme-provider";

export default function SettingsScreen() {
  const { profile, clearAllReadings, readings } = useStore();
  const colors = useColors();
  const colorScheme = useColorScheme();
  const themeCtx = useContext(ThemeContext);
  const isDark = colorScheme === "dark";

  function handleClearAll() {
    Alert.alert(
      "Clear All Data",
      `This will permanently delete all ${readings.length} reading(s). This cannot be undone.`,
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Delete All",
          style: "destructive",
          onPress: () => clearAllReadings(),
        },
      ],
    );
  }

  return (
    <ScreenContainer>
      <ScrollView
        contentContainerStyle={{ padding: 16, paddingBottom: 40 }}
        showsVerticalScrollIndicator={false}
      >
        <Text className="text-2xl font-bold text-foreground mb-5">Settings</Text>

        {/* Profile */}
        <SectionHeader title="Profile" colors={colors} />
        <SettingRow colors={colors}>
          <Text style={{ color: colors.foreground, fontSize: 15 }}>Patient Name</Text>
          <Text style={{ color: colors.muted, fontSize: 15 }}>
            {profile?.name ?? "Not set"}
          </Text>
        </SettingRow>
        <SettingRow colors={colors}>
          <Text style={{ color: colors.foreground, fontSize: 15 }}>Total Readings</Text>
          <Text style={{ color: colors.muted, fontSize: 15 }}>{readings.length}</Text>
        </SettingRow>

        {/* Appearance */}
        <SectionHeader title="Appearance" colors={colors} />
        <SettingRow colors={colors}>
          <Text style={{ color: colors.foreground, fontSize: 15 }}>Dark Mode</Text>
          <Switch
            value={isDark}
            onValueChange={(val) => themeCtx?.setColorScheme(val ? "dark" : "light")}
            trackColor={{ false: colors.border, true: colors.primary }}
            thumbColor="#ffffff"
          />
        </SettingRow>

        {/* Data */}
        <SectionHeader title="Data" colors={colors} />
        <TouchableOpacity
          onPress={handleClearAll}
          style={{
            backgroundColor: colors.surface,
            borderRadius: 12,
            padding: 16,
            marginBottom: 1,
            borderWidth: 1,
            borderColor: colors.border,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Text style={{ color: colors.error, fontSize: 15, fontWeight: "600" }}>
            Clear All Readings
          </Text>
          <Text style={{ color: colors.muted, fontSize: 13 }}>
            {readings.length} reading{readings.length !== 1 ? "s" : ""}
          </Text>
        </TouchableOpacity>

        {/* About */}
        <SectionHeader title="About" colors={colors} />
        <SettingRow colors={colors}>
          <Text style={{ color: colors.foreground, fontSize: 15 }}>Version</Text>
          <Text style={{ color: colors.muted, fontSize: 15 }}>6.2</Text>
        </SettingRow>
        <SettingRow colors={colors}>
          <Text style={{ color: colors.foreground, fontSize: 15 }}>Storage</Text>
          <Text style={{ color: colors.muted, fontSize: 15 }}>Local device only</Text>
        </SettingRow>
        <View
          style={{
            backgroundColor: colors.surface,
            borderRadius: 12,
            padding: 16,
            marginTop: 8,
            borderWidth: 1,
            borderColor: colors.border,
          }}
        >
          <Text style={{ color: colors.muted, fontSize: 13, lineHeight: 20 }}>
            Vital Health Monitor is not a medical device. All readings are stored locally on this
            device only. No data is transmitted or shared. Do not use readings as a substitute for
            professional medical advice.
          </Text>
        </View>
      </ScrollView>
    </ScreenContainer>
  );
}

function SectionHeader({ title, colors }: { title: string; colors: any }) {
  return (
    <Text
      style={{
        color: colors.primary,
        fontSize: 12,
        fontWeight: "700",
        textTransform: "uppercase",
        letterSpacing: 1,
        marginTop: 20,
        marginBottom: 8,
      }}
    >
      {title}
    </Text>
  );
}

function SettingRow({ children, colors }: { children: React.ReactNode; colors: any }) {
  return (
    <View
      style={{
        backgroundColor: colors.surface,
        borderRadius: 12,
        padding: 16,
        marginBottom: 1,
        borderWidth: 1,
        borderColor: colors.border,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
      }}
    >
      {children}
    </View>
  );
}
