import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { ServicesStackParamList } from '../../../navigation/types';
import { ScreenShell, Card, Input, Button } from '../../../components';
import { useToast } from '../../../hooks/useToast';
import { useTheme } from '../../../theme';

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

export default function StopPaymentScreen({ navigation }: Props) {
  const theme = useTheme();
  const toast = useToast();
  const [account, setAccount] = useState('0000XXXX1234');
  const [chequeNumber, setChequeNumber] = useState('');
  const [reason, setReason] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = () => {
    if (!chequeNumber) {
      toast('Cheque number required', 'error', 'Please enter a valid cheque number.');
      return;
    }
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      toast('Payment Stopped', 'success', `Cheque #${chequeNumber} has been blocked.`);
      navigation.goBack();
    }, 1500);
  };

  return (
    <ScreenShell title="Stop Payment" subtitle="Block a specific cheque">
      <Card variant="default" style={styles.card}>
        <View style={styles.formGroup}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Select Account</Text>
          <Input value={account} onChangeText={setAccount} placeholder="Account Number" />
        </View>

        <View style={styles.formGroup}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Cheque Number</Text>
          <Input value={chequeNumber} onChangeText={setChequeNumber} placeholder="6-digit unique number" keyboardType="number-pad" />
        </View>

        <View style={styles.formGroup}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Reason (Optional)</Text>
          <Input value={reason} onChangeText={setReason} placeholder="e.g. Lost in transit" />
        </View>

        <Button
          title="Confirm Stop Payment"
          onPress={handleSubmit}
          loading={isLoading}
          style={styles.submitBtn}
          variant="danger"
        />
      </Card>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, gap: 16 },
  formGroup: { gap: 8 },
  label: { fontSize: 13, fontWeight: '600' },
  submitBtn: { marginTop: 16 },
});