import * as React from "react";
import {
  Box,
  Container,
  Grid,
  CircularProgress,
  Alert,
  ToggleButton,
  ToggleButtonGroup
} from "@mui/material";

import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
import HistoryChart from "./components/HistoryChart";
import {
  AggregatedDashboardData
} from "./components/HistoryChart";

import {
  fetchLatestTransactions,
  fetchAggregatedExpenses,
  fetchAggregatedIncome,
} from "./utils/dashboardLoader";

export default function Dashboard() {
  const [latest, setLatest] = React.useState<{
    expense: LatestItem[];
    income: LatestItem[];
  }>({
    expense: [],
    income: []
  });
  const palette = {
  expense: {
      primary: "#d32f2f",
      light: "#fdecea",
      dark: "#9a0007",
      text: "#b71c1c"
    },
    income: {
      primary: "#2e7d32",
      light: "#e8f5e9",
      dark: "#1b5e20",
      text: "#1b5e20"
    }
  };

  const [aggregated, setAggregated] = React.useState<{
    expense: AggregatedDashboardData | null;
    income: AggregatedDashboardData | null;
  }>({
    expense: null,
    income: null
  });

  const [mode, setMode] = React.useState<"expense" | "income">("expense");
  const [period, setPeriod] = React.useState<"rolling" | "calendar">("rolling");
  const [comparison, setComparison] = React.useState(false);

  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  const colors = palette[mode];
  // -------- LOAD ONCE --------
  React.useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);

        const [
          latestExpense,
          latestIncome,
          expenseData,
          incomeData
        ] = await Promise.all([
          fetchLatestTransactions("expense"),
          fetchLatestTransactions("income"),
          fetchAggregatedExpenses(),
          fetchAggregatedIncome()
        ]);

        setLatest({
          expense: latestExpense,
          income: latestIncome
        });

        setAggregated({
          expense: expenseData,
          income: incomeData
        });

      } catch (err: any) {
        console.error(err);
        setError(err.message || "Failed to load dashboard data");
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, []);

  const currentData = aggregated[mode];
  if (!currentData) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
        <CircularProgress />
      </Box>
    );
  }
  const currentLatest = latest[mode];

  // -------- UI STATES --------
  if (loading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Container sx={{ mt: 4 }}>
        <Alert severity="error">{error}</Alert>
      </Container>
    );
  }

  return (
    <Container
      sx={{
        mt: 4,
        mb: 4,
        background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
        borderRadius: 4,
        p: 2
      }}
    >
      {/* -------- TOGGLE -------- */}
      <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
        <ToggleButtonGroup
          value={mode}
          exclusive
          onChange={(_, val) => val && setMode(val)}
          sx={{
            borderRadius: 3,
            overflow: "hidden",
            "& .MuiToggleButton-root": {
              px: 3,
              textTransform: "none",
              color: "text.secondary"
            },
            "&.Mui-selected": {
              bgcolor: colors.primary,
              color: "white",
              borderColor: colors.primary
            },
          }}
        >
          <ToggleButton value="expense">Expenses</ToggleButton>
          <ToggleButton value="income">Income</ToggleButton>
        </ToggleButtonGroup>
      </Box>

      <Grid container spacing={4} direction="row">

        <Grid size={12}>
          <HistoryChart
            header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
            summary="Interactive chronological tracking"
            tabs={["Daily", "Weekly", "Monthly"]}
            data={currentData.chartData}
            period={period}
            onPeriodChange={setPeriod}
            comparison={comparison}
            setComparison={setComparison}
            colorScheme={colors}
          />
        </Grid>

        <Grid size={12}>
          <LatestItemsList
            title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
            items={currentLatest}
            onViewAll={() => {}}
            accentColor={colors.primary}
          />
        </Grid>

      </Grid>
    </Container>
  );
}