"use client"
import { useState } from 'react';
import {
  TextInput, PasswordInput, Button, Group, Box, Radio, Text, Paper,
  Title, Stack, Alert,
} from '@mantine/core';
import { Providers } from "@/app/providers"

export default function Register() {
  const [cif, setCif] = useState('');
  const [otp, setOtp] = useState('');
  const [enteredOtp, setEnteredOtp] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [tpin, setTpin] = useState('');
  const [confirmTpin, setConfirmTpin] = useState('');
  const [errors, setErrors] = useState<string[]>([]);
  const [message, setMessage] = useState('');

  const handleSubmit = () => {
    const newErrors: string[] = [];

    // CIF validation
    if (!/^\d{10}$/.test(cif)) {
      newErrors.push('CIF should be exactly 10 numeric digits.');
    }

    // OTP validation
    if (otp !== enteredOtp) {
      newErrors.push('OTP does not match.');
    }

    // Password validation
    const strongPassword = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
    if (!strongPassword.test(password) || password !== confirmPassword) {
      newErrors.push('Password must be strong and confirmed.');
    }

    // TPIN validation
    if (!strongPassword.test(tpin) || tpin !== confirmTpin) {
      newErrors.push('TPIN must be strong and confirmed.');
    }

    if (newErrors.length > 0) {
      setErrors(newErrors);
      return;
    }

    setErrors([]);
    setMessage('Login Successfully ✅');
  };

  return (
    <Providers>
      <Box maw={600} mx="auto" p="md">
        <Title order={2} mb="md" style={{ align: "center" }}>Internet Banking Registration</Title>
        <Paper shadow="xs" p="md">
          <Stack gap="sm">
            <TextInput
              label="CIF Number"
              placeholder="Enter 10-digit CIF"
              value={cif}
              onChange={(e) => setCif(e.target.value)}
            />

            <Group grow>
              <TextInput
                label="OTP Sent"
                value={otp}
                onChange={(e) => setOtp(e.target.value)}
              />
              <TextInput
                label="Enter OTP"
                value={enteredOtp}
                onChange={(e) => setEnteredOtp(e.target.value)}
              />
            </Group>

            <Group grow>
              <PasswordInput
                label="Login Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <PasswordInput
                label="Confirm Password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
            </Group>

            <Group grow>
              <PasswordInput
                label="T-PIN"
                value={tpin}
                onChange={(e) => setTpin(e.target.value)}
              />
              <PasswordInput
                label="Confirm T-PIN"
                value={confirmTpin}
                onChange={(e) => setConfirmTpin(e.target.value)}
              />
            </Group>

            {errors.length > 0 && (
              <Alert color="red" title="Errors" mt="sm">
                {errors.map((err, index) => (
                  <Text key={index} color="red" size="sm">{err}</Text>
                ))}
              </Alert>
            )}

            {message && (
              <Alert color="green" mt="sm">
                {message}
              </Alert>
            )}

            <Button fullWidth onClick={handleSubmit}>Process</Button>
          </Stack>
        </Paper>
      </Box>
    </Providers>
  );
}