"use client";

import { CSSProperties, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Permission } from "../../auth-context";
import { tradesApi } from "../../api";
import { Header } from "../../components/Header";
import { SatsDisplay } from "../../components/SatsDisplay";
import { StatusBadge } from "../../components/StatusBadge";
import { useRequireAuth } from "../../hooks/useRequireAuth";
import { useAsyncData } from "../../hooks/useAsyncData";
import { formatDateTime } from "../../utils/date";
import { formatEur } from "../../utils/exchange";
import {
  layoutStyles,
  typographyStyles,
  bannerStyles,
  buttonStyles,
  tradeCardStyles,
} from "../../styles/shared";
import { useTranslation } from "../../hooks/useTranslation";
import { useLanguage } from "../../hooks/useLanguage";

export default function TradeDetailPage() {
  const router = useRouter();
  const params = useParams();
  const publicId = params?.id as string | undefined;
  const [cancelError, setCancelError] = useState<string | null>(null);
  const t = useTranslation("trades");
  const tExchange = useTranslation("exchange");
  const { locale } = useLanguage();

  // Map locale codes to Intl locale strings
  const intlLocale = locale === "es" ? "es-ES" : locale === "ca" ? "ca-ES" : "en-US";

  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.VIEW_OWN_EXCHANGES,
    fallbackRedirect: "/",
  });

  const {
    data: trade,
    isLoading: isLoadingTrade,
    error,
  } = useAsyncData(
    () => {
      if (!publicId) throw new Error("Trade ID is required");
      return tradesApi.getTrade(publicId);
    },
    {
      enabled: !!user && isAuthorized && !!publicId,
      onError: () => {
        // Error message is set by useAsyncData
      },
    }
  );

  if (isLoading || isLoadingTrade) {
    return (
      <main style={layoutStyles.main}>
        <div style={layoutStyles.loader}>{t("details.loading")}</div>
      </main>
    );
  }

  if (!isAuthorized) {
    return null;
  }

  if (error || (!isLoadingTrade && !trade)) {
    return (
      <main style={layoutStyles.main}>
        <Header currentPage="trades" />
        <div style={styles.content}>
          <h1 style={typographyStyles.pageTitle}>{t("details.title")}</h1>
          {error && <div style={bannerStyles.errorBanner}>{error || t("details.error")}</div>}
          <button onClick={() => router.push("/trades")} style={buttonStyles.primaryButton}>
            {t("details.backToTradesShort")}
          </button>
        </div>
      </main>
    );
  }

  if (!trade) {
    return null;
  }

  const isBuy = trade.direction === "buy";

  return (
    <main style={layoutStyles.main}>
      <Header currentPage="trades" />
      <div style={styles.content}>
        <div style={styles.header}>
          <h1 style={typographyStyles.pageTitle}>{t("details.title")}</h1>
          <button onClick={() => router.push("/trades")} style={buttonStyles.secondaryButton}>
            {t("details.backToTrades")}
          </button>
        </div>

        <div style={styles.tradeDetailCard}>
          <div style={styles.detailSection}>
            <h2 style={styles.sectionTitle}>{t("details.tradeInformation")}</h2>
            <div style={styles.detailGrid}>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.status")}</span>
                <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.time")}</span>
                <span style={styles.detailValue}>
                  {formatDateTime(trade.slot_start, intlLocale)}
                </span>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.direction")}</span>
                <span
                  style={{
                    ...styles.detailValue,
                    color: isBuy ? "#4ade80" : "#f87171",
                    fontWeight: 600,
                  }}
                >
                  {isBuy ? t("details.buyBtc") : t("details.sellBtc")}
                </span>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.paymentMethod")}</span>
                <span style={styles.detailValue}>
                  {isBuy
                    ? `${t("details.receiveVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`
                    : `${t("details.sendVia")} ${trade.bitcoin_transfer_method === "onchain" ? tExchange("transferMethod.onchain") : tExchange("transferMethod.lightning")}`}
                </span>
              </div>
            </div>
          </div>

          <div style={styles.detailSection}>
            <h2 style={styles.sectionTitle}>{t("details.amounts")}</h2>
            <div style={styles.detailGrid}>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.eurAmount")}</span>
                <span style={styles.detailValue}>{formatEur(trade.eur_amount)}</span>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.bitcoinAmount")}</span>
                <span style={{ ...styles.detailValue, ...tradeCardStyles.satsAmount }}>
                  <SatsDisplay sats={trade.sats_amount} />
                </span>
              </div>
            </div>
          </div>

          <div style={styles.detailSection}>
            <h2 style={styles.sectionTitle}>{t("details.pricing")}</h2>
            <div style={styles.detailGrid}>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.marketPrice")}</span>
                <span style={styles.detailValue}>
                  €
                  {trade.market_price_eur.toLocaleString(intlLocale, {
                    maximumFractionDigits: 0,
                  })}
                  /BTC
                </span>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.agreedPrice")}</span>
                <span style={styles.detailValue}>
                  €
                  {trade.agreed_price_eur.toLocaleString(intlLocale, {
                    maximumFractionDigits: 0,
                  })}
                  /BTC
                </span>
              </div>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.premium")}</span>
                <span style={styles.detailValue}>{trade.premium_percentage}%</span>
              </div>
            </div>
          </div>

          <div style={styles.detailSection}>
            <h2 style={styles.sectionTitle}>{t("details.timestamps")}</h2>
            <div style={styles.detailGrid}>
              <div style={styles.detailRow}>
                <span style={styles.detailLabel}>{t("details.created")}</span>
                <span style={styles.detailValue}>
                  {formatDateTime(trade.created_at, intlLocale)}
                </span>
              </div>
              {trade.cancelled_at && (
                <div style={styles.detailRow}>
                  <span style={styles.detailLabel}>{t("details.cancelled")}</span>
                  <span style={styles.detailValue}>
                    {formatDateTime(trade.cancelled_at, intlLocale)}
                  </span>
                </div>
              )}
              {trade.completed_at && (
                <div style={styles.detailRow}>
                  <span style={styles.detailLabel}>{t("details.completed")}</span>
                  <span style={styles.detailValue}>
                    {formatDateTime(trade.completed_at, intlLocale)}
                  </span>
                </div>
              )}
            </div>
          </div>

          {cancelError && <div style={bannerStyles.errorBanner}>{cancelError}</div>}
          {trade.status === "booked" && (
            <div style={styles.actionSection}>
              <button
                onClick={async () => {
                  if (!confirm(t("details.cancelConfirm"))) {
                    return;
                  }
                  try {
                    await tradesApi.cancelTrade(trade.public_id);
                    router.push("/trades");
                  } catch (err) {
                    setCancelError(err instanceof Error ? err.message : t("details.cancelTrade"));
                  }
                }}
                style={buttonStyles.secondaryButton}
              >
                {t("details.cancelTrade")}
              </button>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

const styles: Record<string, CSSProperties> = {
  content: {
    flex: 1,
    padding: "2rem",
    maxWidth: "800px",
    margin: "0 auto",
    width: "100%",
  },
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "2rem",
  },
  tradeDetailCard: {
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "12px",
    padding: "2rem",
  },
  detailSection: {
    marginBottom: "2rem",
  },
  sectionTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1.1rem",
    fontWeight: 600,
    color: "#fff",
    marginBottom: "1rem",
  },
  detailGrid: {
    display: "flex",
    flexDirection: "column",
    gap: "1rem",
  },
  detailRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0.75rem 0",
    borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
  },
  detailLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.9rem",
    color: "rgba(255, 255, 255, 0.6)",
  },
  detailValue: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.9rem",
    color: "#fff",
    fontWeight: 500,
  },
  actionSection: {
    marginTop: "2rem",
    paddingTop: "2rem",
    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
  },
};