arbret/frontend/app/trades/page.tsx

"use client";

import { useState, CSSProperties } from "react";
import { useRouter } from "next/navigation";
import { Permission } from "../auth-context";
import { tradesApi } from "../api";
import { PageLayout } from "../components/PageLayout";
import { SatsDisplay } from "../components/SatsDisplay";
import { StatusBadge } from "../components/StatusBadge";
import { EmptyState } from "../components/EmptyState";
import { ConfirmationButton } from "../components/ConfirmationButton";
import { useRequireAuth } from "../hooks/useRequireAuth";
import { useAsyncData } from "../hooks/useAsyncData";
import { useMutation } from "../hooks/useMutation";
import { formatDateTime } from "../utils/date";
import { formatEur } from "../utils/exchange";
import { typographyStyles, tradeCardStyles } from "../styles/shared";
import { useTranslation } from "../hooks/useTranslation";

export default function TradesPage() {
  const router = useRouter();
  const t = useTranslation("trades");
  const tExchange = useTranslation("exchange");
  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.VIEW_OWN_EXCHANGES,
    fallbackRedirect: "/",
  });

  const {
    data: trades = [],
    isLoading: isLoadingTrades,
    error,
    refetch: fetchTrades,
  } = useAsyncData(() => tradesApi.getTrades(), {
    enabled: !!user && isAuthorized,
    initialData: [],
  });

  const [cancellingId, setCancellingId] = useState<string | null>(null);
  const [confirmCancelId, setConfirmCancelId] = useState<string | null>(null);

  const { mutate: cancelTrade } = useMutation(
    (publicId: string) => tradesApi.cancelTrade(publicId),
    {
      onSuccess: () => {
        fetchTrades();
        setConfirmCancelId(null);
      },
    }
  );

  const handleCancel = async (publicId: string) => {
    setCancellingId(publicId);
    try {
      await cancelTrade(publicId);
    } finally {
      setCancellingId(null);
    }
  };

  const upcomingTrades = (trades ?? []).filter(
    (t) => t.status === "booked" && new Date(t.slot_start) > new Date()
  );
  const pastOrFinalTrades = (trades ?? []).filter(
    (t) => t.status !== "booked" || new Date(t.slot_start) <= new Date()
  );

  return (
    <PageLayout
      currentPage="trades"
      isLoading={isLoading}
      isAuthorized={isAuthorized}
      error={error}
      contentStyle={styles.content}
    >
      <h1 style={typographyStyles.pageTitle}>{t("page.title")}</h1>
      <p style={typographyStyles.pageSubtitle}>{t("page.subtitle")}</p>

      {isLoadingTrades ? (
        <EmptyState message={t("page.loadingTrades")} isLoading={true} />
      ) : (trades?.length ?? 0) === 0 ? (
        <EmptyState
          message={t("page.noTrades")}
          action={
            <a href="/exchange" style={styles.emptyStateLink}>
              {t("page.startTrading")}
            </a>
          }
        />
      ) : (
        <>
          {/* Upcoming Trades */}
          {upcomingTrades.length > 0 && (
            <div style={styles.section}>
              <h2 style={styles.sectionTitle}>
                {t("page.upcoming", { count: upcomingTrades.length })}
              </h2>
              <div style={tradeCardStyles.tradeList}>
                {upcomingTrades.map((trade) => {
                  const isBuy = trade.direction === "buy";
                  return (
                    <div key={trade.id} style={tradeCardStyles.tradeCard}>
                      <div style={tradeCardStyles.tradeHeader}>
                        <div style={tradeCardStyles.tradeInfo}>
                          <div style={tradeCardStyles.tradeTime}>
                            {formatDateTime(trade.slot_start)}
                          </div>
                          <div style={tradeCardStyles.tradeDetails}>
                            <span
                              style={{
                                ...tradeCardStyles.directionBadge,
                                background: isBuy
                                  ? "rgba(74, 222, 128, 0.15)"
                                  : "rgba(248, 113, 113, 0.15)",
                                color: isBuy ? "#4ade80" : "#f87171",
                              }}
                            >
                              {isBuy ? tExchange("direction.buy") : tExchange("direction.sell")}
                            </span>
                            <span
                              style={{
                                ...tradeCardStyles.directionBadge,
                                background: "rgba(167, 139, 250, 0.15)",
                                color: "#a78bfa",
                              }}
                            >
                              {isBuy
                                ? `${tExchange("bookingStep.receiveVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`
                                : `${tExchange("bookingStep.sendVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`}
                            </span>
                            <span style={tradeCardStyles.amount}>
                              {formatEur(trade.eur_amount)}
                            </span>
                            <span style={tradeCardStyles.arrow}>↔</span>
                            <span style={tradeCardStyles.satsAmount}>
                              <SatsDisplay sats={trade.sats_amount} />
                            </span>
                          </div>
                          <div style={tradeCardStyles.rateRow}>
                            <span style={tradeCardStyles.rateLabel}>{t("trade.rate")}</span>
                            <span style={tradeCardStyles.rateValue}>
                              €
                              {trade.agreed_price_eur.toLocaleString("de-DE", {
                                maximumFractionDigits: 0,
                              })}
                              /BTC
                            </span>
                          </div>
                          <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }}>
                            {""}
                          </StatusBadge>
                        </div>

                        <div style={tradeCardStyles.buttonGroup}>
                          {trade.status === "booked" && (
                            <ConfirmationButton
                              isConfirming={confirmCancelId === trade.public_id}
                              onConfirm={() => handleCancel(trade.public_id)}
                              onCancel={() => setConfirmCancelId(null)}
                              onActionClick={() => setConfirmCancelId(trade.public_id)}
                              actionLabel={t("trade.cancel")}
                              isLoading={cancellingId === trade.public_id}
                              confirmVariant="danger"
                              confirmButtonStyle={styles.confirmButton}
                            />
                          )}
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              router.push(`/trades/${trade.public_id}`);
                            }}
                            style={styles.viewDetailsButton}
                          >
                            {t("trade.viewDetails")}
                          </button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Past/Completed/Cancelled Trades */}
          {pastOrFinalTrades.length > 0 && (
            <div style={styles.section}>
              <h2 style={typographyStyles.sectionTitleMuted}>
                {t("page.history", { count: pastOrFinalTrades.length })}
              </h2>
              <div style={tradeCardStyles.tradeList}>
                {pastOrFinalTrades.map((trade) => {
                  const isBuy = trade.direction === "buy";
                  return (
                    <div
                      key={trade.id}
                      style={{
                        ...tradeCardStyles.tradeCard,
                        ...styles.tradeCardPast,
                      }}
                    >
                      <div style={tradeCardStyles.tradeTime}>
                        {formatDateTime(trade.slot_start)}
                      </div>
                      <div style={tradeCardStyles.tradeDetails}>
                        <span
                          style={{
                            ...tradeCardStyles.directionBadge,
                            background: isBuy
                              ? "rgba(74, 222, 128, 0.1)"
                              : "rgba(248, 113, 113, 0.1)",
                            color: isBuy ? "rgba(74, 222, 128, 0.7)" : "rgba(248, 113, 113, 0.7)",
                          }}
                        >
                          {isBuy ? "BUY BTC" : "SELL BTC"}
                        </span>
                        <span
                          style={{
                            ...tradeCardStyles.directionBadge,
                            background: "rgba(167, 139, 250, 0.1)",
                            color: "rgba(167, 139, 250, 0.7)",
                          }}
                        >
                          {isBuy
                            ? `Receive via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`
                            : `Send via ${trade.bitcoin_transfer_method === "onchain" ? "Onchain" : "Lightning"}`}
                        </span>
                        <span style={tradeCardStyles.amount}>{formatEur(trade.eur_amount)}</span>
                        <span style={tradeCardStyles.arrow}>↔</span>
                        <span style={tradeCardStyles.satsAmount}>
                          <SatsDisplay sats={trade.sats_amount} />
                        </span>
                      </div>
                      <div style={tradeCardStyles.buttonGroup}>
                        <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            router.push(`/trades/${trade.public_id}`);
                          }}
                          style={styles.viewDetailsButton}
                        >
                          View Details
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </>
      )}
    </PageLayout>
  );
}

// Page-specific styles (trade card styles are shared via tradeCardStyles)
const styles: Record<string, CSSProperties> = {
  content: {
    flex: 1,
    padding: "2rem",
    maxWidth: "800px",
    margin: "0 auto",
    width: "100%",
  },
  section: {
    marginBottom: "2rem",
  },
  sectionTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1.1rem",
    fontWeight: 500,
    color: "#fff",
    marginBottom: "1rem",
  },
  tradeCardPast: {
    opacity: 0.6,
    background: "rgba(255, 255, 255, 0.01)",
  },
  confirmButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.35rem 0.75rem",
    fontSize: "0.75rem",
    background: "rgba(239, 68, 68, 0.2)",
    border: "1px solid rgba(239, 68, 68, 0.3)",
    borderRadius: "6px",
    color: "#f87171",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  emptyStateLink: {
    color: "#a78bfa",
    textDecoration: "none",
  },
  viewDetailsButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.35rem 0.75rem",
    fontSize: "0.75rem",
    background: "rgba(167, 139, 250, 0.15)",
    border: "1px solid rgba(167, 139, 250, 0.3)",
    borderRadius: "6px",
    color: "#a78bfa",
    cursor: "pointer",
    transition: "all 0.2s",
  },
};