"use client";
import React, { useState } from "react";
import {
    Text,
    Title,
    Box,
    Image,
    Card,
    Checkbox,
    Button,
    Group,
    Grid,
    Container,
    ActionIcon,
    Divider,
} from "@mantine/core";
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import logo from "@/app/image/logo1.jpg";
import { IconLogout } from "@tabler/icons-react";

type Mandate = {
    id: string;
    category: string;
    amount: number;
    maxAmount: number;
    name: string;
    frequency: string;
    firstCollection: string;
    finalCollection: string;
};

const MandateCard = ({
    mandate,
    onAccept,
    onReject,
}: {
    mandate: Mandate;
    onAccept: (id: string) => void;
    onReject: (id: string) => void;
}) => {
    const [agreed, setAgreed] = useState(false);

    return (
        <Card shadow="sm" radius="md" p="lg" withBorder>
            <Text fw={600}>{mandate.category}</Text>
            <Text size="sm" mt="xs">
                Amount: ₹{mandate.amount}
            </Text>
            <Text size="sm">Max Amount: ₹{mandate.maxAmount}</Text>
            <Text size="sm">Name: {mandate.name}</Text>
            <Text size="sm">Frequency: {mandate.frequency}</Text>
            <Text size="sm">First Collection: {mandate.firstCollection}</Text>
            <Text size="sm">Final Collection: {mandate.finalCollection}</Text>

            <Checkbox
                mt="md"
                label="I agree for the debit of mandate processing charges"
                checked={agreed}
                onChange={(e) => setAgreed(e.currentTarget.checked)}
            />

            <Group mt="md" grow>
                <Button
                    variant="outline"
                    color="red"
                    disabled={!agreed}
                    onClick={() => onReject(mandate.id)}
                >
                    Reject
                </Button>
                <Button
                    color="green"
                    disabled={!agreed}
                    onClick={() => onAccept(mandate.id)}
                >
                    Accept
                </Button>
            </Group>
        </Card>
    );
};

export default function MandatePage() {
    const router = useRouter();
    const [mandates] = useState<Mandate[]>([
        {
            id: "1",
            category: "Insurance Premium",
            amount: 11743,
            maxAmount: 11743,
            name: "LIFE INSURANCE CORPORATION",
            frequency: "YEAR",
            firstCollection: "2025-09-20",
            finalCollection: "2038-03-28",
        },
        {
            id: "2",
            category: "Loan EMI",
            amount: 8500,
            maxAmount: 8500,
            name: "XYZ BANK",
            frequency: "MONTH",
            firstCollection: "2025-10-01",
            finalCollection: "2030-10-01",
        },
        
    ]);

    const handleAccept = (id: string) => {
        alert(`Accepted mandate ${id}`);
    };

    const handleReject = (id: string) => {
        alert(`Rejected mandate ${id}`);
    };
    const handleLogout = () => {
        localStorage.removeItem("access_token");
        router.push("/eMandate/login"); // redirect to login page
    };

    return (
        <Providers>
            <div
                style={{
                    backgroundColor: "#f8f9fa",
                    minHeight: "100vh",
                    display: "flex",
                    flexDirection: "column",
                }}
            >
                {/* HEADER */}
                <Box
                    style={{
                        position: "fixed",
                        top: 0,
                        left: 0,
                        width: "100%",
                        height: "12%",
                        zIndex: 100,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        padding: "0 0.5rem",
                        background:
                            "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
                        borderBottom: "1px solid black",
                    }}
                >
                    <Box style={{ display: "flex", alignItems: "center" }}>
                        <Image
                            src={logo}
                            component={NextImage}
                            fit="contain"
                            alt="ebanking"
                            style={{ width: "70px", height: "70px", flexShrink: 0 }}
                        />
                        <Title
                            order={2}
                            style={{
                                fontFamily: "Roboto",
                                marginLeft: "1rem",
                                color: "white",
                            }}
                        >
                            THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
                        </Title>
                    </Box>

                    {/* Logout Icon */}
                    <ActionIcon
                        variant="subtle"
                        color="white"
                        size="lg"
                        onClick={handleLogout}
                        title="Logout"
                    >
                        <IconLogout size={28} stroke={1.5} />
                    </ActionIcon>
                </Box>

                {/* WELCOME BAR */}
                <Box
                    style={{
                        position: "fixed",
                        top: "70px", // directly below header
                        left: 0,
                        width: "100%",
                        padding: "0.3rem 1rem",
                        backgroundColor: "#e6ffff",
                        zIndex: 90,
                    }}
                >
                    <Text fw={500} style={{ fontFamily: "inter", fontSize: "20px" }}>
                        Welcome, John Doe
                    </Text>
                    <Text size="xs" c="dimmed" style={{ marginBottom: "4px" }}>
                        Login Time: 9/24/2025, 12:52:05 PM
                    </Text>
                    <Title order={4} ta="center" style={{ margin: 0 }}>
                        KCCB E-Mandate
                    </Title>
                    <Divider size="xs" color='#99c2ff' />
                </Box>

                {/* CONTENT */}
                <Box
                    style={{
                        flex: 1,
                        marginTop: "160px", // header + welcome bar height
                        marginBottom: "40px", // leave space for footer
                        // padding: "1rem",
                        backgroundColor: "#e6ffff",
                        overflowY: "auto",
                    }}
                >
                    <Container size="lg">
                        <Grid>
                            {mandates.map((mandate) => (
                                <Grid.Col span={{ base: 12, sm: 6 }} key={mandate.id}>
                                    <MandateCard
                                        mandate={mandate}
                                        onAccept={handleAccept}
                                        onReject={handleReject}
                                    />
                                </Grid.Col>
                            ))}
                        </Grid>
                    </Container>
                </Box>

                {/* FOOTER */}
                <Box
                    style={{
                        position: "fixed",
                        bottom: 0,
                        left: 0,
                        width: "100%",
                        height: "40px",
                        backgroundColor: "#f8f9fa",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderTop: "1px solid #ddd",
                    }}
                >
                    <Text c="dimmed" size="xs">
                        © 2025 The Kangra Central Co-Operative Bank
                    </Text>
                </Box>
            </div>
        </Providers>
    );
}