"use client";

import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

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

export default function AccountSummary() {
  const router = useRouter();
  const [authorized, setAuthorized] = useState<boolean | null>(null);
  const [accountData, setAccountData] = useState<accountData[]>([]);

  async function FetchAccountDetails() {
    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);
        sessionStorage.setItem('accountData',JSON.stringify(data))
      }
    } catch {
      notifications.show({
        withBorder: true,
        color: "red",
        title: "Please try again later",
        message: "Unable to Fetch, Please try again later",
        autoClose: 5000,
      });
    }
  }

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

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

  const cellStyle = {
    border: "1px solid #ccc",
    padding: "10px",
  };

  const rows = accountData.map((acc, index) => (
    <tr key={index}>
      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.custname}</td>
      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
      <td style={{ ...cellStyle, textAlign: "right", color: '#1c7ed6', cursor: "pointer" }}
        onClick={() => router.push(`/accounts/account_statement?accNo=${acc.stAccountNo}`)}>
        {acc.stAccountNo}</td>
      <td style={{ ...cellStyle, textAlign: "right" }}>
        {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
          minimumFractionDigits: 2,
        })}
      </td>
    </tr>
  ));

  if (authorized) {
    return (
      <Paper shadow="sm" radius="md" p="md" withBorder>
        <Title order={3} mb="sm">
          Account Summary (Currency - INR)
        </Title>
        <ScrollArea>
          <Table style={{ borderCollapse: "collapse", width: "100%" }}>
            <thead>
              <tr style={{ backgroundColor: "#3385ff" }}>
                <th style={{ ...cellStyle, textAlign: "left" }}>Customer Name</th>
                <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
                <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
                <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </Table>
        </ScrollArea>
        <Text mt="sm" size="xs" c="dimmed">
          * Book Balance includes uncleared effects.
        </Text>
      </Paper>
    );
  }
  return null;
}