import { useState } from 'react';
import {
  Title, Table, Group, Stack, Text, Card, Loader, Center, Divider, Badge,
} from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { useQuery } from '@tanstack/react-query';
import api from '../../services/api';

interface AccountLine { account_number: number; name: string; amount: string; fund_type: string; }
interface IncomeStatementData {
  from: string; to: string;
  income: AccountLine[]; expenses: AccountLine[];
  total_income: string; total_expenses: string; net_income: string;
}

export function IncomeStatementPage() {
  const [from, setFrom] = useState(new Date(new Date().getFullYear(), 0, 1));
  const [to, setTo] = useState(new Date());

  const { data, isLoading } = useQuery<IncomeStatementData>({
    queryKey: ['income-statement', from.toISOString().split('T')[0], to.toISOString().split('T')[0]],
    queryFn: async () => {
      const { data } = await api.get(`/reports/income-statement?from=${from.toISOString().split('T')[0]}&to=${to.toISOString().split('T')[0]}`);
      return data;
    },
  });

  const fmt = (v: string | number) => parseFloat(String(v || '0')).toLocaleString('en-US', { style: 'currency', currency: 'USD' });

  if (isLoading) return <Center h={300}><Loader /></Center>;

  const netIncome = parseFloat(data?.net_income || '0');

  return (
    <Stack>
      <Group justify="space-between">
        <Title order={2}>Income Statement</Title>
        <Group>
          <DateInput label="From" value={from} onChange={(v) => v && setFrom(v)} w={160} />
          <DateInput label="To" value={to} onChange={(v) => v && setTo(v)} w={160} />
        </Group>
      </Group>

      <Card withBorder>
        <Title order={4} mb="md" c="green">Income</Title>
        <Table>
          <Table.Tbody>
            {(data?.income || []).map((a) => (
              <Table.Tr key={a.account_number}>
                <Table.Td w={80}>{a.account_number}</Table.Td>
                <Table.Td>{a.name} <Badge size="xs" variant="light">{a.fund_type}</Badge></Table.Td>
                <Table.Td ta="right" ff="monospace" w={140}>{fmt(a.amount)}</Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
          <Table.Tfoot>
            <Table.Tr><Table.Td colSpan={2} fw={700}>Total Income</Table.Td>
              <Table.Td ta="right" fw={700} ff="monospace" c="green">{fmt(data?.total_income || '0')}</Table.Td></Table.Tr>
          </Table.Tfoot>
        </Table>

        <Divider my="md" />

        <Title order={4} mb="md" c="red">Expenses</Title>
        <Table>
          <Table.Tbody>
            {(data?.expenses || []).map((a) => (
              <Table.Tr key={a.account_number}>
                <Table.Td w={80}>{a.account_number}</Table.Td>
                <Table.Td>{a.name} <Badge size="xs" variant="light">{a.fund_type}</Badge></Table.Td>
                <Table.Td ta="right" ff="monospace" w={140}>{fmt(a.amount)}</Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
          <Table.Tfoot>
            <Table.Tr><Table.Td colSpan={2} fw={700}>Total Expenses</Table.Td>
              <Table.Td ta="right" fw={700} ff="monospace" c="red">{fmt(data?.total_expenses || '0')}</Table.Td></Table.Tr>
          </Table.Tfoot>
        </Table>

        <Divider my="md" />
        <Group justify="space-between" px="sm">
          <Text fw={700} size="xl">Net Income</Text>
          <Text fw={700} size="xl" ff="monospace" c={netIncome >= 0 ? 'green' : 'red'}>
            {fmt(data?.net_income || '0')}
          </Text>
        </Group>
      </Card>
    </Stack>
  );
}