import { useTranslation } from "react-i18next";

import Modal from "@components/modals/Modal";
import ContentSurface from "@components/surface/ContentSurface";
import LightSurface from "@components/surface/LightSurface";

import DarkSurface from "@components/surface/DarkSurface";
import HoneyIcon from "@components/icons/HoneyIcon";
import MoneyIcon from "@components/icons/MoneyIcon";
import Pagination from "@components/atoms/Pagination";
import { useState } from "react";

const MOCK_TRANSACTIONS: {
  id: number;
  amount: number;
  date: string;
  currency: "honey" | "money";
  kind: "withdrawal" | "deposit" | "greeting" | "referral";
}[] = [
  { id: 1, amount: 500, date: "2026-03-20", currency: "honey", kind: "deposit" },
  { id: 2, amount: -150, date: "2026-03-19", currency: "money", kind: "withdrawal" },
  { id: 3, amount: 100, date: "2026-03-18", currency: "honey", kind: "greeting" },
  { id: 4, amount: 250, date: "2026-03-17", currency: "honey", kind: "referral" },
  { id: 7, amount: 75, date: "2026-03-14", currency: "money", kind: "referral" },
  { id: 8, amount: -200, date: "2026-03-13", currency: "honey", kind: "withdrawal" },
];

type Props = {
  open: boolean;
  onClose: () => void;
};

const numberFormat = new Intl.NumberFormat("en-US", { signDisplay: "exceptZero" });
const dateFormat = new Intl.DateTimeFormat("fi-FI");

export default function TransactionsHistoryModal({ open, onClose }: Props) {
  const { t } = useTranslation();

  const totalPages = 6;
  const [page, setPage] = useState(1);

  return (
    <Modal
      className="w-full flex flex-col items-center gap-2"
      open={open}
      onClose={onClose}
      title={t("transactionHistory.title")}
    >
      <span className="text-center font-bold text-xl text-[#FBE6BE]">
        {t("transactionHistory.yourTransactions")}
      </span>
      <div className="w-full flex justify-between items-center text-center font-bold text-lg">
        <ContentSurface className="rounded-full w-25">
          <DarkSurface className="rounded-full p-1.5 text-white">
            {t("transactionHistory.sum")}
          </DarkSurface>
        </ContentSurface>
        <ContentSurface className="rounded-full w-25">
          <DarkSurface className="rounded-full p-1.5 text-white">
            {t("transactionHistory.date")}
          </DarkSurface>
        </ContentSurface>
      </div>

      {MOCK_TRANSACTIONS.map(({ id, kind, date, currency, amount }) => (
        <ContentSurface key={id} className="rounded-2xl w-full">
          <LightSurface className="rounded-t-2xl rounded-b-sm flex justify-between p-2">
            <div className="flex gap-1">
              <span>{numberFormat.format(amount)}</span>
              {currency === "honey" ? <HoneyIcon /> : <MoneyIcon />}
            </div>
            <div>{dateFormat.format(new Date(date))}</div>
          </LightSurface>
          <DarkSurface className="rounded-b-2xl rounded-t-sm p-2">
            {t("transactionHistory.operationType")}: {t(`operationType.${kind}`)}
          </DarkSurface>
        </ContentSurface>
      ))}

      <Pagination value={page} total={totalPages} onChange={setPage} />
    </Modal>
  );
}
