import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Switch,
} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { Feather, Ionicons, MaterialIcons } from '@expo/vector-icons';
import * as Haptics from 'expo-haptics';

interface ToggleItem {
  type: 'toggle';
  icon: string;
  iconFamily: 'Feather' | 'Ionicons' | 'MaterialIcons';
  iconBg: string;
  label: string;
  toggleKey: string;
}

interface NavItem {
  type: 'nav';
  icon: string;
  iconFamily: 'Feather' | 'Ionicons' | 'MaterialIcons';
  iconBg: string;
  label: string;
  value?: string;
}

interface DestructiveItem {
  type: 'destructive';
  icon: string;
  iconFamily: 'Feather' | 'Ionicons' | 'MaterialIcons';
  iconBg: string;
  label: string;
}

type SettingItem = ToggleItem | NavItem | DestructiveItem;

interface SettingSection {
  title?: string;
  items: SettingItem[];
}

const SECTIONS: SettingSection[] = [
  {
    items: [
      { type: 'nav', icon: 'wifi', iconFamily: 'Feather', iconBg: '#3b82f6', label: 'Wi-Fi', value: 'HomeNetwork' },
      { type: 'nav', icon: 'bluetooth', iconFamily: 'Feather', iconBg: '#3b82f6', label: 'Bluetooth', value: 'On' },
      { type: 'nav', icon: 'signal-cellular-alt', iconFamily: 'MaterialIcons', iconBg: '#22c55e', label: 'Cellular', value: '' },
    ],
  },
  {
    items: [
      { type: 'nav', icon: 'notifications', iconFamily: 'Ionicons', iconBg: '#ef4444', label: 'Notifications', value: '' },
      { type: 'nav', icon: 'volume-2', iconFamily: 'Feather', iconBg: '#ef4444', label: 'Sounds & Haptics', value: '' },
      { type: 'nav', icon: 'moon', iconFamily: 'Feather', iconBg: '#6366f1', label: 'Focus', value: '' },
      { type: 'nav', icon: 'sun', iconFamily: 'Feather', iconBg: '#f59e0b', label: 'Screen Time', value: '' },
    ],
  },
  {
    items: [
      { type: 'nav', icon: 'settings', iconFamily: 'Feather', iconBg: '#71717a', label: 'General', value: '' },
      { type: 'nav', icon: 'accessibility', iconFamily: 'MaterialIcons', iconBg: '#3b82f6', label: 'Accessibility', value: '' },
      { type: 'toggle', icon: 'lock', iconFamily: 'Feather', iconBg: '#71717a', label: 'Privacy & Security', toggleKey: 'privacy' },
      { type: 'nav', icon: 'shield', iconFamily: 'Feather', iconBg: '#22c55e', label: 'VPN', value: 'Off' },
    ],
  },
  {
    items: [
      { type: 'nav', icon: 'camera', iconFamily: 'Feather', iconBg: '#71717a', label: 'Camera', value: '' },
      { type: 'nav', icon: 'headphones', iconFamily: 'Feather', iconBg: '#6366f1', label: 'Music', value: '' },
      { type: 'toggle', icon: 'map-pin', iconFamily: 'Feather', iconBg: '#3b82f6', label: 'Location Services', toggleKey: 'location' },
    ],
  },
  {
    items: [
      { type: 'destructive', icon: 'log-out', iconFamily: 'Feather', iconBg: '#ef4444', label: 'Sign Out' },
    ],
  },
];

type IconFamily = 'Feather' | 'Ionicons' | 'MaterialIcons';

function SettingIcon({ family, name, size, color }: { family: IconFamily; name: string; size: number; color: string }) {
  if (family === 'Ionicons') return <Ionicons name={name as any} size={size} color={color} />;
  if (family === 'MaterialIcons') return <MaterialIcons name={name as any} size={size} color={color} />;
  return <Feather name={name as any} size={size} color={color} />;
}

export default function SettingsScreen() {
  const [toggles, setToggles] = useState<Record<string, boolean>>({
    privacy: false,
    location: true,
  });

  const handleToggle = (key: string) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    setToggles((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const handleNav = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  const handleDestructive = () => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
  };

  const renderItem = (item: SettingItem, isLast: boolean) => {
    if (item.type === 'toggle') {
      return (
        <View>
          <View style={styles.row}>
            <View style={[styles.iconBox, { backgroundColor: item.iconBg }]}>
              <SettingIcon family={item.iconFamily} name={item.icon} size={16} color="#fff" />
            </View>
            <Text style={styles.rowLabel}>{item.label}</Text>
            <Switch
              value={toggles[item.toggleKey] ?? false}
              onValueChange={() => handleToggle(item.toggleKey)}
              trackColor={{ false: '#e4e4e7', true: '#22c55e' }}
              thumbColor="#fff"
              ios_backgroundColor="#e4e4e7"
            />
          </View>
          {!isLast && <View style={styles.separator} />}
        </View>
      );
    }

    if (item.type === 'destructive') {
      return (
        <View>
          <TouchableOpacity style={styles.row} activeOpacity={0.6} onPress={handleDestructive}>
            <View style={[styles.iconBox, { backgroundColor: item.iconBg }]}>
              <SettingIcon family={item.iconFamily} name={item.icon} size={16} color="#fff" />
            </View>
            <Text style={styles.destructiveLabel}>{item.label}</Text>
          </TouchableOpacity>
          {!isLast && <View style={styles.separator} />}
        </View>
      );
    }

    return (
      <View>
        <TouchableOpacity style={styles.row} activeOpacity={0.6} onPress={handleNav}>
          <View style={[styles.iconBox, { backgroundColor: item.iconBg }]}>
            <SettingIcon family={item.iconFamily} name={item.icon} size={16} color="#fff" />
          </View>
          <Text style={styles.rowLabel}>{item.label}</Text>
          <View style={styles.navRight}>
            {item.value ? <Text style={styles.navValue}>{item.value}</Text> : null}
            <Feather name="chevron-right" size={16} color="#a1a1aa" />
          </View>
        </TouchableOpacity>
        {!isLast && <View style={styles.separator} />}
      </View>
    );
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.safe} edges={['top', 'bottom']}>
        <ScrollView
          style={styles.scroll}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}
        >
          <Text style={styles.screenTitle}>Settings</Text>

          {/* Profile Card */}
          <TouchableOpacity style={styles.profileCard} activeOpacity={0.7} onPress={handleNav}>
            <View style={styles.avatarRing}>
              <View style={styles.avatar}>
                <Text style={styles.avatarInitials}>AJ</Text>
              </View>
            </View>
            <View style={styles.profileInfo}>
              <Text style={styles.profileName}>Alex Johnson</Text>
              <Text style={styles.profileSub}>Account, Cloud Storage & Purchases</Text>
            </View>
            <Feather name="chevron-right" size={18} color="#a1a1aa" />
          </TouchableOpacity>

          {/* Sections */}
          {SECTIONS.map((section, sIdx) => (
            <View key={sIdx} style={styles.section}>
              {section.title ? <Text style={styles.sectionTitle}>{section.title}</Text> : null}
              <View style={styles.sectionCard}>
                {section.items.map((item, iIdx) =>
                  <View key={iIdx}>{renderItem(item, iIdx === section.items.length - 1)}</View>
                )}
              </View>
            </View>
          ))}

          <Text style={styles.footer}>Version 1.0.0 (42)</Text>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#f4f4f5',
  },
  scroll: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 48,
  },
  screenTitle: {
    fontSize: 32,
    fontWeight: '700',
    color: '#18181b',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 12,
    lineHeight: 38,
  },
  profileCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginHorizontal: 16,
    marginBottom: 8,
    borderRadius: 12,
    padding: 16,
    gap: 12,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 2 },
  },
  avatarRing: {
    padding: 2,
    borderRadius: 30,
    borderWidth: 2,
    borderColor: '#6366f1',
  },
  avatar: {
    width: 52,
    height: 52,
    borderRadius: 26,
    backgroundColor: '#6366f1',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarInitials: {
    fontSize: 20,
    fontWeight: '700',
    color: '#fff',
    lineHeight: 24,
  },
  profileInfo: {
    flex: 1,
  },
  profileName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#18181b',
    lineHeight: 22,
  },
  profileSub: {
    fontSize: 12,
    fontWeight: '400',
    color: '#71717a',
    lineHeight: 17,
    marginTop: 2,
  },
  section: {
    marginTop: 24,
    paddingHorizontal: 16,
  },
  sectionTitle: {
    fontSize: 13,
    fontWeight: '500',
    color: '#71717a',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
    marginBottom: 8,
    marginLeft: 4,
  },
  sectionCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOpacity: 0.04,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 1 },
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 10,
    minHeight: 44,
    gap: 12,
    backgroundColor: '#fff',
  },
  iconBox: {
    width: 30,
    height: 30,
    borderRadius: 7,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rowLabel: {
    flex: 1,
    fontSize: 16,
    fontWeight: '400',
    color: '#18181b',
    lineHeight: 22,
  },
  destructiveLabel: {
    flex: 1,
    fontSize: 16,
    fontWeight: '400',
    color: '#ef4444',
    lineHeight: 22,
  },
  navRight: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  navValue: {
    fontSize: 15,
    fontWeight: '400',
    color: '#a1a1aa',
    lineHeight: 20,
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#e4e4e7',
    marginLeft: 54,
  },
  footer: {
    textAlign: 'center',
    fontSize: 13,
    fontWeight: '400',
    color: '#a1a1aa',
    marginTop: 32,
  },
});