"use client";

import React from 'react';
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper, Switch } from '@mantine/core';
import { IconBuildingBank, IconEye } from '@tabler/icons-react';
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Providers } from "../../providers";
import { notifications } from '@mantine/notifications';

interface accountData {
    stAccountNo: string;
    stAccountType: string;
    stAvailableBalance: string;
    custname: string;
    activeAccounts: string;
}

export default function Home() {
    const [authorized, SetAuthorized] = useState<boolean | null>(null);
    const router = useRouter();
    const [accountData, SetAccountData] = useState<accountData[]>([]);
    const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
    const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
    const selectedDAData = depositAccounts.find(acc => acc.stAccountNo === selectedDA);
    const loanAccounts = accountData.filter(acc => acc.stAccountType === "LN");
    const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
    const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
    const [showBalance, setShowBalance] = useState(false);


    async function handleFetchUserDetails() {
        // e.preventDefault();
        try {
            const token = localStorage.getItem("access_token");
            const response = await fetch('api/customer', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
            });
            const data = await response.json();
            if (response.ok && Array.isArray(data)) {
                SetAccountData(data);
                if (data.length > 0) {
                    const firstDeposit = data.find(acc => acc.stAccountType !== "LN");
                    const firstLoan = data.find(acc => acc.stAccountType === "LN");
                    if (firstDeposit) setSelectedDA(firstDeposit.stAccountNo);
                    if (firstLoan) setSelectedLN(firstLoan.stAccountNo);
                }
            }
            else { throw new Error(); }
        }
        catch {
            notifications.show({
                withBorder: true,
                color: "red",
                title: "Please try again later",
                message: "Unable to Fetch, Please try again later",
                autoClose: 5000,
            });
        }
    }

    async function handleGetAccountStatement(accountNo: string) {
        router.push(`/accounts/account_statement?accNo=${accountNo}`);
    }

    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            SetAuthorized(false);
            router.push("/login");
        }
        else {
            SetAuthorized(true);
        }
    }, []);

    useEffect(() => {
        if (authorized) {
            handleFetchUserDetails();
        }
    }, [authorized]);

    if (authorized) {
        return (
            <Providers>
                <div>
                    <Title order={4} style={{ padding: "10px" }}>Accounts Overview</Title>
                    <Group
                        style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}>
                        <IconEye size={20} />
                        <Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
                        <Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
                            onChange={(event) => setShowBalance(event.currentTarget.checked)} />
                    </Group>
                    <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '15px' }}>
                        <Group grow gap="xl">
                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
                                <Group gap='xs'>
                                    <IconBuildingBank size={25} />
                                    <Text fw={700}>Deposit Account</Text>
                                    <Select
                                        // placeholder="Select A/C No"
                                        data={depositAccounts.map(acc => ({
                                            value: acc.stAccountNo,
                                            label: `${acc.stAccountType}- ${acc.stAccountNo}`
                                        }))}
                                        value={selectedDA}
                                        // @ts-ignore
                                        onChange={setSelectedDA}
                                        size="xs"
                                        styles={{
                                            input: {
                                                backgroundColor: "white",
                                                color: "black",
                                                marginLeft: 5,
                                                width: 140
                                            }
                                        }}
                                    />
                                </Group>
                                <Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
                                <Title order={2} mt="md">
                                    {showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
                                </Title>
                                <Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>Get Statement</Button>
                            </Paper>
                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
                                <Group gap='xs'>
                                    <IconBuildingBank size={25} />
                                    <Text fw={700}>Loan Account</Text>
                                    <Select
                                        placeholder="Select A/C No"
                                        data={loanAccounts.map(acc => ({
                                            value: acc.stAccountNo,
                                            label: `${acc.stAccountType}- ${acc.stAccountNo}`
                                        }))}
                                        value={selectedLN}
                                        // @ts-ignore
                                        onChange={setSelectedLN}
                                        size="xs"
                                        styles={{
                                            input: {
                                                backgroundColor: "white",
                                                color: "black",
                                                marginLeft: 30,
                                                width: 140
                                            }
                                        }}
                                    />
                                </Group>
                                <Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
                                <Title order={2} mt="md">
                                    {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
                                </Title>
                                <Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>Get Statement</Button>
                            </Paper>
                            <Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
                                <Title order={5} mb="sm">Important Links</Title>
                                {/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</Title> */}
                                <Stack gap="xs">
                                    <Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
                                    <Button variant="light" color="blue" fullWidth>Branch Locator</Button>
                                    <Button variant="light" color="blue" fullWidth>Customer Care</Button>
                                    <Button variant="light" color="blue" fullWidth>FAQs</Button>
                                </Stack>
                                {/* <Group>
                                <TextInput
                                    label="Loan Amount"
                                    placeholder=""
                                />
                                <TextInput
                                    label="Interest Rate(%)"
                                    placeholder=""
                                />
                                <TextInput
                                    label="Loan Tenure(Years)"
                                    placeholder=""
                                />
                                <Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
                            </Group> */}
                            </Paper>
                        </Group>
                    </div>
                    <div
                        style={{
                            flex: 1,
                            marginTop: 0,
                            padding: "20px",
                            display: "flex",
                            // alignItems: "center",
                            justifyContent: "left",
                        }}
                    >
                        <Box>
                            <Title order={4}>Send Money</Title>
                            <Group mt="sm">
                                <Select
                                    placeholder="Own / Other Accounts"
                                    data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
                                    style={{ width: 180 }}
                                />
                                <Select
                                    placeholder="Select Account"
                                    data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
                                    style={{ width: 180 }}
                                />
                                <Input placeholder="₹0.00" style={{ width: 100 }} />
                                <Button>Proceed</Button>
                            </Group>
                        </Box>
                    </div>
                </div>
            </Providers>
        );
    }
}