import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { router } from 'expo-router';

const ITEMS = [
  {
    key: 'account',
    title: 'Konto',
    subtitle: 'Session, Tenant-Wechsel, Logout',
    href: '/more/account',
  },
  {
    key: 'settings',
    title: 'Einstellungen',
    subtitle: 'Server-Instanz verwalten',
    href: '/more/settings',
  },
  {
    key: 'wiki',
    title: 'Wiki',
    subtitle: 'Wissen und Dokumentation',
    href: '/more/wiki',
  },
  {
    key: 'customers',
    title: 'Kunden',
    subtitle: '',
    href: '/more/customers',
  },
  {
    key: 'plants',
    title: 'Objekte',
    subtitle: '',
    href: '/more/plants',
  },
  {
    key: 'inventory',
    title: 'Kundeninventar',
    subtitle: 'Inventar und Scanner',
    href: '/more/inventory',
  },
  {
    key: 'nimbot',
    title: 'Nimbot M2',
    subtitle: 'Drucker verbinden',
    href: '/more/nimbot',
  },
];

export default function MoreScreen() {
  return (
    <View style={styles.screen}>
      <ScrollView style={styles.list} contentContainerStyle={styles.listContent}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Funktionen</Text>
          <Text style={styles.sectionSubtitle}>Weitere Bereiche und Einstellungen.</Text>
        </View>

        {ITEMS.map((item, index) => (
          <Pressable key={item.key} style={styles.row} onPress={() => router.push(item.href as any)}>
            <View style={styles.rowMain}>
              <Text style={styles.rowTitle}>{item.title}</Text>
              <Text style={styles.rowSubtitle}>{item.subtitle}</Text>
            </View>
            <Text style={styles.rowArrow}>›</Text>
            {index < ITEMS.length - 1 ? <View style={styles.rowDivider} /> : null}
          </Pressable>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  list: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  listContent: {
    paddingBottom: 24,
  },
  section: {
    paddingHorizontal: 16,
    paddingTop: 14,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
  },
  sectionTitle: {
    color: '#111827',
    fontSize: 17,
    fontWeight: '700',
  },
  sectionSubtitle: {
    color: '#6b7280',
    fontSize: 13,
    marginTop: 3,
  },
  row: {
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: '#ffffff',
    position: 'relative',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 10,
  },
  rowMain: {
    flex: 1,
    minWidth: 0,
  },
  rowTitle: {
    color: '#111827',
    fontSize: 15,
    fontWeight: '600',
  },
  rowSubtitle: {
    color: '#6b7280',
    fontSize: 13,
    marginTop: 2,
  },
  rowArrow: {
    color: '#9ca3af',
    fontSize: 24,
    lineHeight: 24,
  },
  rowDivider: {
    position: 'absolute',
    left: 16,
    right: 16,
    bottom: 0,
    height: 1,
    backgroundColor: '#e5e7eb',
  },
});