import React, { useMemo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { ServicesStackParamList } from '../../../navigation/types';
import { ScreenShell } from '../../../components';
import { ServiceGridItem } from '../../home/components/ServiceGridItem';
import { useTheme, fontFamily } from '../../../theme';
import { ChequeAnimation } from '../components/ChequeAnimation';
import { FeatureKey } from '../../../constants/featureKeys';
import { useEnabledItems } from '../../../features';

type Props = NativeStackScreenProps<ServicesStackParamList, 'ChequeServicesHub'>;

export default function ChequeServicesHubScreen({ navigation }: Props) {
  const theme = useTheme();

  const options = useMemo(
    () => [
      {
        id: 'request',
        feature: FeatureKey.SERVICES_CHEQUE_BOOK_REQUEST,
        title: 'Book Request',
        icon: 'book-outline',
        iconColor: theme.colors.info,
        onPress: () => navigation.navigate('ChequeBookRequest'),
      },
      {
        id: 'stop',
        feature: FeatureKey.SERVICES_CHEQUE_STOP_PAYMENT,
        title: 'Stop Payment',
        icon: 'stop-circle-outline',
        iconColor: theme.colors.danger,
        onPress: () => navigation.navigate('StopPayment'),
      },
      {
        /**
         * Its key has always been `services.cheque.positivePay` — a child of
         * this hub — but the only tile pointing at it lived on the
         * service-requests hub. That hub is off, which left the screen
         * reachable by global search alone. This is where it belongs.
         */
        id: 'positive_pay',
        feature: FeatureKey.SERVICES_CHEQUE_POSITIVE_PAY,
        title: 'Positive Pay',
        icon: 'shield-checkmark-outline',
        iconColor: theme.colors.primary,
        onPress: () => navigation.navigate('PositivePay'),
      },
      {
        id: 'track',
        feature: FeatureKey.SERVICES_CHEQUE_TRACKING,
        title: 'Track Cheques',
        icon: 'git-compare-outline',
        iconColor: theme.colors.success,
        onPress: () => navigation.navigate('ChequeTracking'),
      },
    ],
    [navigation, theme]
  );

  const visibleOptions = useEnabledItems(options);


  return (
    <ScreenShell title="Cheque Services" subtitle="Manage all your cheque-related needs">
      {/* Animated cheque illustration */}
      <ChequeAnimation />

      {/* Quick info strip */}
      <View style={[styles.infoStrip, { backgroundColor: `${theme.colors.primary}08`, borderColor: `${theme.colors.primary}12` }]}>
        <View style={[styles.infoDot, { backgroundColor: theme.colors.accent }]} />
        <Text style={[styles.infoText, { color: theme.colors.textSecondary }]}>
          Request, track, register, or stop cheques — all in one place
        </Text>
      </View>

      {/* Service grid */}
      <View style={styles.grid}>
        {visibleOptions.map((opt) => (
          <ServiceGridItem key={opt.id} {...opt} />
        ))}
      </View>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingTop: 8,
  },
  infoStrip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    borderRadius: 12,
    borderWidth: 1,
    paddingHorizontal: 14,
    paddingVertical: 12,
    marginBottom: 16,
  },
  infoDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
  },
  infoText: {
    fontSize: 12,
    fontFamily: fontFamily.semibold,
    flex: 1,
    lineHeight: 17,
  },
});