"use client";

import { useEffect, useState, useCallback, useMemo, ChangeEvent, CSSProperties } from "react";
import { useRouter } from "next/navigation";
import { Permission } from "../auth-context";
import { api } from "../api";
import { Header } from "../components/Header";
import { SatsDisplay } from "../components/SatsDisplay";
import { useRequireAuth } from "../hooks/useRequireAuth";
import { components } from "../generated/api";
import { formatDate, formatTime, getDateRange } from "../utils/date";
import { formatEur } from "../utils/exchange";
import { layoutStyles, typographyStyles, bannerStyles, buttonStyles } from "../styles/shared";
import constants from "../../../shared/constants.json";

type ExchangePriceResponse = components["schemas"]["ExchangePriceResponse"];
type ExchangeResponse = components["schemas"]["ExchangeResponse"];
type BookableSlot = components["schemas"]["BookableSlot"];
type AvailableSlotsResponse = components["schemas"]["AvailableSlotsResponse"];

// Constants from shared config
const {
  minAdvanceDays: MIN_ADVANCE_DAYS,
  maxAdvanceDays: MAX_ADVANCE_DAYS,
  lightningMaxEur: LIGHTNING_MAX_EUR,
} = constants.exchange;

type Direction = "buy" | "sell";
type BitcoinTransferMethod = "onchain" | "lightning";
type WizardStep = "details" | "booking";

/**
 * Format price for display
 */
function formatPrice(price: number): string {
  return `€${price.toLocaleString("de-DE", { maximumFractionDigits: 0 })}`;
}

export default function ExchangePage() {
  const router = useRouter();
  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.CREATE_EXCHANGE,
    fallbackRedirect: "/",
  });

  // Wizard state
  const [wizardStep, setWizardStep] = useState<WizardStep>("details");

  // Price and config state
  const [priceData, setPriceData] = useState<ExchangePriceResponse | null>(null);
  const [isPriceLoading, setIsPriceLoading] = useState(true);
  const [priceError, setPriceError] = useState<string | null>(null);
  const [lastPriceUpdate, setLastPriceUpdate] = useState<Date | null>(null);

  // Trade form state
  const [direction, setDirection] = useState<Direction>("buy");
  const [bitcoinTransferMethod, setBitcoinTransferMethod] =
    useState<BitcoinTransferMethod>("onchain");
  const [eurAmount, setEurAmount] = useState<number>(10000); // €100 in cents

  // Date/slot selection state
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [availableSlots, setAvailableSlots] = useState<BookableSlot[]>([]);
  const [selectedSlot, setSelectedSlot] = useState<BookableSlot | null>(null);
  const [isLoadingSlots, setIsLoadingSlots] = useState(false);
  const [datesWithAvailability, setDatesWithAvailability] = useState<Set<string>>(new Set());
  const [isLoadingAvailability, setIsLoadingAvailability] = useState(true);

  // UI state
  const [error, setError] = useState<string | null>(null);
  const [existingTradeId, setExistingTradeId] = useState<number | null>(null);
  const [isBooking, setIsBooking] = useState(false);

  // Compute dates
  const dates = useMemo(() => getDateRange(MIN_ADVANCE_DAYS, MAX_ADVANCE_DAYS), []);

  // Config from API
  const config = priceData?.config;
  const eurMin = config?.eur_min ?? 100;
  const eurMax = config?.eur_max ?? 3000;
  const eurIncrement = config?.eur_increment ?? 20;

  // Compute trade details
  const price = priceData?.price;
  const marketPrice = price?.market_price ?? 0;
  const premiumPercent = price?.premium_percentage ?? 5;

  // Calculate agreed price based on direction
  const agreedPrice = useMemo(() => {
    if (!marketPrice) return 0;
    if (direction === "buy") {
      return marketPrice * (1 + premiumPercent / 100);
    } else {
      return marketPrice * (1 - premiumPercent / 100);
    }
  }, [marketPrice, premiumPercent, direction]);

  // Calculate sats amount
  const satsAmount = useMemo(() => {
    if (!agreedPrice) return 0;
    const eurValue = eurAmount / 100;
    const btcAmount = eurValue / agreedPrice;
    return Math.floor(btcAmount * 100_000_000);
  }, [eurAmount, agreedPrice]);

  // Check if Lightning is disabled due to threshold
  const isLightningDisabled = useMemo(() => {
    return eurAmount > LIGHTNING_MAX_EUR * 100;
  }, [eurAmount]);

  // Auto-switch to onchain if Lightning becomes disabled
  useEffect(() => {
    if (isLightningDisabled && bitcoinTransferMethod === "lightning") {
      setBitcoinTransferMethod("onchain");
    }
  }, [isLightningDisabled, bitcoinTransferMethod]);

  // Fetch price data
  const fetchPrice = useCallback(async () => {
    setIsPriceLoading(true);
    setPriceError(null);

    try {
      const data = await api.get<ExchangePriceResponse>("/api/exchange/price");
      setPriceData(data);
      setLastPriceUpdate(new Date());

      if (data.error) {
        setPriceError(data.error);
      }
      if (data.price?.is_stale) {
        setPriceError("Price is stale. Trade booking may be blocked.");
      }
    } catch (err) {
      console.error("Failed to fetch price:", err);
      setPriceError("Failed to load price data");
    } finally {
      setIsPriceLoading(false);
    }
  }, []);

  // Auto-refresh price every 60 seconds
  useEffect(() => {
    if (!user || !isAuthorized) return;

    fetchPrice();
    const interval = setInterval(fetchPrice, 60000);
    return () => clearInterval(interval);
  }, [user, isAuthorized, fetchPrice]);

  // Fetch slots for a date
  const fetchSlots = useCallback(async (date: Date) => {
    setIsLoadingSlots(true);
    setError(null);
    setAvailableSlots([]);
    setSelectedSlot(null);

    try {
      const dateStr = formatDate(date);
      const data = await api.get<AvailableSlotsResponse>(`/api/exchange/slots?date=${dateStr}`);
      setAvailableSlots(data.slots);
    } catch (err) {
      console.error("Failed to fetch slots:", err);
      setError("Failed to load available slots");
    } finally {
      setIsLoadingSlots(false);
    }
  }, []);

  // Fetch availability for all dates when entering booking step
  useEffect(() => {
    if (!user || !isAuthorized || wizardStep !== "booking") return;

    const fetchAllAvailability = async () => {
      setIsLoadingAvailability(true);
      const availabilitySet = new Set<string>();

      const promises = dates.map(async (date) => {
        try {
          const dateStr = formatDate(date);
          const data = await api.get<AvailableSlotsResponse>(`/api/exchange/slots?date=${dateStr}`);
          if (data.slots.length > 0) {
            availabilitySet.add(dateStr);
          }
        } catch (err) {
          console.error(`Failed to fetch availability for ${formatDate(date)}:`, err);
        }
      });

      await Promise.all(promises);
      setDatesWithAvailability(availabilitySet);
      setIsLoadingAvailability(false);
    };

    fetchAllAvailability();
  }, [user, isAuthorized, dates, wizardStep]);

  useEffect(() => {
    if (selectedDate && user && isAuthorized) {
      fetchSlots(selectedDate);
    }
  }, [selectedDate, user, isAuthorized, fetchSlots]);

  const handleDateSelect = (date: Date) => {
    const dateStr = formatDate(date);
    if (datesWithAvailability.has(dateStr)) {
      setSelectedDate(date);
    }
  };

  const handleSlotSelect = (slot: BookableSlot) => {
    setSelectedSlot(slot);
    setError(null);
  };

  const handleContinueToBooking = () => {
    setWizardStep("booking");
    setError(null);
  };

  const handleBackToDetails = () => {
    setWizardStep("details");
    setSelectedDate(null);
    setSelectedSlot(null);
    setError(null);
  };

  const handleAmountChange = (value: number) => {
    // Clamp to valid range and snap to increment
    const minCents = eurMin * 100;
    const maxCents = eurMax * 100;
    const incrementCents = eurIncrement * 100;

    // Clamp value
    let clamped = Math.max(minCents, Math.min(maxCents, value));

    // Snap to nearest increment
    clamped = Math.round(clamped / incrementCents) * incrementCents;

    setEurAmount(clamped);
  };

  const handleAmountInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value.replace(/[^0-9]/g, "");
    if (inputValue === "") {
      setEurAmount(eurMin * 100);
      return;
    }
    const eurValue = parseInt(inputValue, 10);
    handleAmountChange(eurValue * 100);
  };

  const handleBook = async () => {
    if (!selectedSlot) return;

    setIsBooking(true);
    setError(null);
    setExistingTradeId(null);

    try {
      await api.post<ExchangeResponse>("/api/exchange", {
        slot_start: selectedSlot.start_time,
        direction,
        bitcoin_transfer_method: bitcoinTransferMethod,
        eur_amount: eurAmount,
      });

      // Redirect to trades page after successful booking
      router.push("/trades");
    } catch (err) {
      let errorMessage = "Failed to book trade";
      if (err instanceof Error) {
        // Check if it's an ApiError with detail in data
        if ("data" in err && err.data && typeof err.data === "object") {
          const data = err.data as { detail?: string };
          errorMessage = data.detail || err.message;
        } else {
          errorMessage = err.message;
        }
      }
      setError(errorMessage);

      // Check if it's a "same day" error and extract trade ID
      const tradeIdMatch = errorMessage.match(/Trade ID: (\d+)/);
      if (tradeIdMatch) {
        setExistingTradeId(parseInt(tradeIdMatch[1], 10));
      } else {
        setExistingTradeId(null);
      }

      setIsBooking(false);
    }
  };

  const cancelSlotSelection = () => {
    setSelectedSlot(null);
    setError(null);
  };

  if (isLoading) {
    return (
      <main style={layoutStyles.main}>
        <div style={layoutStyles.loader}>Loading...</div>
      </main>
    );
  }

  if (!isAuthorized) {
    return null;
  }

  const isPriceStale = priceData?.price?.is_stale ?? false;

  return (
    <main style={layoutStyles.main}>
      <Header currentPage="exchange" />
      <div style={styles.content}>
        <h1 style={typographyStyles.pageTitle}>Exchange Bitcoin</h1>
        <p style={typographyStyles.pageSubtitle}>Buy or sell Bitcoin with a 5% premium</p>

        {error && (
          <div style={bannerStyles.errorBanner}>
            {error}
            {existingTradeId && (
              <div style={styles.errorLink}>
                <a href={`/trades/${existingTradeId}`} style={styles.errorLinkAnchor}>
                  View your existing trade →
                </a>
              </div>
            )}
          </div>
        )}

        {/* Price Display */}
        <div style={styles.priceCard}>
          {isPriceLoading && !priceData ? (
            <div style={styles.priceLoading}>Loading price...</div>
          ) : priceError && !priceData?.price ? (
            <div style={styles.priceError}>{priceError}</div>
          ) : (
            <>
              <div style={styles.priceRow}>
                <span style={styles.priceLabel}>Market:</span>
                <span style={styles.priceValue}>{formatPrice(marketPrice)}</span>
                <span style={styles.priceDivider}>•</span>
                <span style={styles.priceLabel}>Our price:</span>
                <span style={styles.priceValue}>{formatPrice(agreedPrice)}</span>
                <span style={styles.premiumBadge}>
                  {direction === "buy" ? "+" : "-"}
                  {premiumPercent}%
                </span>
              </div>
              {lastPriceUpdate && (
                <div style={styles.priceTimestamp}>
                  Updated {lastPriceUpdate.toLocaleTimeString()}
                  {isPriceStale && <span style={styles.staleWarning}> (stale)</span>}
                </div>
              )}
            </>
          )}
        </div>

        {/* Step Indicator */}
        <div style={styles.stepIndicator}>
          <div
            style={{
              ...styles.step,
              ...(wizardStep === "details" ? styles.stepActive : styles.stepCompleted),
            }}
          >
            <span style={styles.stepNumber}>1</span>
            <span style={styles.stepLabel}>Exchange Details</span>
          </div>
          <div style={styles.stepDivider} />
          <div
            style={{
              ...styles.step,
              ...(wizardStep === "booking" ? styles.stepActive : {}),
            }}
          >
            <span style={styles.stepNumber}>2</span>
            <span style={styles.stepLabel}>Book Appointment</span>
          </div>
        </div>

        {/* Step 1: Exchange Details */}
        {wizardStep === "details" && (
          <div style={styles.tradeCard}>
            {/* Direction Selector */}
            <div style={styles.directionRow}>
              <button
                onClick={() => setDirection("buy")}
                style={{
                  ...styles.directionBtn,
                  ...(direction === "buy" ? styles.directionBtnBuyActive : {}),
                }}
              >
                Buy BTC
              </button>
              <button
                onClick={() => setDirection("sell")}
                style={{
                  ...styles.directionBtn,
                  ...(direction === "sell" ? styles.directionBtnSellActive : {}),
                }}
              >
                Sell BTC
              </button>
            </div>

            {/* Payment Method Selector */}
            <div style={styles.paymentMethodSection}>
              <div style={styles.paymentMethodLabel}>
                Payment Method <span style={styles.required}>*</span>
              </div>
              <div style={styles.paymentMethodRow}>
                <button
                  onClick={() => setBitcoinTransferMethod("onchain")}
                  disabled={false}
                  style={{
                    ...styles.paymentMethodBtn,
                    ...(bitcoinTransferMethod === "onchain" ? styles.paymentMethodBtnActive : {}),
                  }}
                >
                  <span style={styles.paymentMethodIcon}>🔗</span>
                  <span>Onchain</span>
                </button>
                <button
                  onClick={() => setBitcoinTransferMethod("lightning")}
                  disabled={isLightningDisabled}
                  style={{
                    ...styles.paymentMethodBtn,
                    ...(bitcoinTransferMethod === "lightning" ? styles.paymentMethodBtnActive : {}),
                    ...(isLightningDisabled ? styles.paymentMethodBtnDisabled : {}),
                  }}
                >
                  <span style={styles.paymentMethodIcon}>⚡</span>
                  <span>Lightning</span>
                </button>
              </div>
              {isLightningDisabled && (
                <div style={styles.thresholdMessage}>
                  Lightning payments are only available for amounts up to €{LIGHTNING_MAX_EUR}
                </div>
              )}
            </div>

            {/* Amount Section */}
            <div style={styles.amountSection}>
              <div style={styles.amountHeader}>
                <span style={styles.amountLabel}>Amount (EUR)</span>
                <div style={styles.amountInputWrapper}>
                  <span style={styles.amountCurrency}>€</span>
                  <input
                    type="text"
                    value={Math.round(eurAmount / 100)}
                    onChange={handleAmountInputChange}
                    style={styles.amountInput}
                  />
                </div>
              </div>
              <input
                type="range"
                min={eurMin * 100}
                max={eurMax * 100}
                step={eurIncrement * 100}
                value={eurAmount}
                onChange={(e) => setEurAmount(Number(e.target.value))}
                style={styles.slider}
              />
              <div style={styles.amountRange}>
                <span>{formatEur(eurMin * 100)}</span>
                <span>{formatEur(eurMax * 100)}</span>
              </div>
            </div>

            {/* Trade Summary */}
            <div style={styles.tradeSummary}>
              {direction === "buy" ? (
                <p style={styles.summaryText}>
                  You buy{" "}
                  <strong style={styles.satsValue}>
                    <SatsDisplay sats={satsAmount} />
                  </strong>
                  , you sell <strong>{formatEur(eurAmount)}</strong>
                </p>
              ) : (
                <p style={styles.summaryText}>
                  You buy <strong>{formatEur(eurAmount)}</strong>, you sell{" "}
                  <strong style={styles.satsValue}>
                    <SatsDisplay sats={satsAmount} />
                  </strong>
                </p>
              )}
            </div>

            {/* Continue Button */}
            <button
              onClick={handleContinueToBooking}
              disabled={isPriceStale || !priceData?.price}
              style={{
                ...styles.continueButton,
                ...(isPriceStale || !priceData?.price ? buttonStyles.buttonDisabled : {}),
              }}
            >
              Continue to Booking
            </button>
          </div>
        )}

        {/* Step 2: Booking */}
        {wizardStep === "booking" && (
          <>
            {/* Trade Summary Card */}
            <div style={styles.summaryCard}>
              <div style={styles.summaryHeader}>
                <span style={styles.summaryTitle}>Your Exchange</span>
                <button onClick={handleBackToDetails} style={styles.editButton}>
                  Edit
                </button>
              </div>
              <div style={styles.summaryDetails}>
                <span
                  style={{
                    ...styles.summaryDirection,
                    color: direction === "buy" ? "#4ade80" : "#f87171",
                  }}
                >
                  {direction === "buy" ? "Buy" : "Sell"} BTC
                </span>
                <span style={styles.summaryDivider}>•</span>
                <span>{formatEur(eurAmount)}</span>
                <span style={styles.summaryDivider}>↔</span>
                <span style={styles.satsValue}>
                  <SatsDisplay sats={satsAmount} />
                </span>
                <span style={styles.summaryDivider}>•</span>
                <span style={styles.summaryPaymentMethod}>
                  {direction === "buy" ? "Receive via " : "Send via "}
                  {bitcoinTransferMethod === "onchain" ? "Onchain" : "Lightning"}
                </span>
              </div>
            </div>

            {/* Date Selection */}
            <div style={styles.section}>
              <h2 style={styles.sectionTitle}>Select a Date</h2>
              <div style={styles.dateGrid}>
                {dates.map((date) => {
                  const dateStr = formatDate(date);
                  const isSelected = selectedDate && formatDate(selectedDate) === dateStr;
                  const hasAvailability = datesWithAvailability.has(dateStr);
                  const isDisabled = !hasAvailability || isLoadingAvailability;

                  return (
                    <button
                      key={dateStr}
                      data-testid={`date-${dateStr}`}
                      onClick={() => handleDateSelect(date)}
                      disabled={isDisabled}
                      style={{
                        ...styles.dateButton,
                        ...(isSelected ? styles.dateButtonSelected : {}),
                        ...(isDisabled ? styles.dateButtonDisabled : {}),
                      }}
                    >
                      <div style={styles.dateWeekday}>
                        {date.toLocaleDateString("en-US", { weekday: "short" })}
                      </div>
                      <div style={styles.dateDay}>
                        {date.toLocaleDateString("en-US", {
                          month: "short",
                          day: "numeric",
                        })}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Available Slots */}
            {selectedDate && (
              <div style={styles.section}>
                <h2 style={styles.sectionTitle}>
                  Available Slots for{" "}
                  {selectedDate.toLocaleDateString("en-US", {
                    weekday: "long",
                    month: "long",
                    day: "numeric",
                  })}
                </h2>

                {isLoadingSlots ? (
                  <div style={styles.emptyState}>Loading slots...</div>
                ) : availableSlots.length === 0 ? (
                  <div style={styles.emptyState}>No available slots for this date</div>
                ) : (
                  <div style={styles.slotGrid}>
                    {availableSlots.map((slot) => {
                      const isSelected = selectedSlot?.start_time === slot.start_time;
                      return (
                        <button
                          key={slot.start_time}
                          onClick={() => handleSlotSelect(slot)}
                          style={{
                            ...styles.slotButton,
                            ...(isSelected ? styles.slotButtonSelected : {}),
                          }}
                        >
                          {formatTime(slot.start_time)}
                        </button>
                      );
                    })}
                  </div>
                )}
              </div>
            )}

            {/* Confirm Booking */}
            {selectedSlot && (
              <div style={styles.confirmCard}>
                <h3 style={styles.confirmTitle}>Confirm Trade</h3>
                <div style={styles.confirmDetails}>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>Time:</span>
                    <span style={styles.confirmValue}>
                      {formatTime(selectedSlot.start_time)} - {formatTime(selectedSlot.end_time)}
                    </span>
                  </div>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>Direction:</span>
                    <span
                      style={{
                        ...styles.confirmValue,
                        color: direction === "buy" ? "#4ade80" : "#f87171",
                      }}
                    >
                      {direction === "buy" ? "Buy BTC" : "Sell BTC"}
                    </span>
                  </div>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>EUR:</span>
                    <span style={styles.confirmValue}>{formatEur(eurAmount)}</span>
                  </div>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>BTC:</span>
                    <span style={{ ...styles.confirmValue, ...styles.satsValue }}>
                      <SatsDisplay sats={satsAmount} />
                    </span>
                  </div>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>Rate:</span>
                    <span style={styles.confirmValue}>{formatPrice(agreedPrice)}/BTC</span>
                  </div>
                  <div style={styles.confirmRow}>
                    <span style={styles.confirmLabel}>Payment:</span>
                    <span style={styles.confirmValue}>
                      {direction === "buy" ? "Receive via " : "Send via "}
                      {bitcoinTransferMethod === "onchain" ? "Onchain" : "Lightning"}
                    </span>
                  </div>
                </div>

                <div style={styles.buttonRow}>
                  <button
                    onClick={handleBook}
                    disabled={isBooking || isPriceStale}
                    style={{
                      ...styles.bookButton,
                      background:
                        direction === "buy"
                          ? "linear-gradient(135deg, #4ade80 0%, #22c55e 100%)"
                          : "linear-gradient(135deg, #f87171 0%, #ef4444 100%)",
                      ...(isBooking || isPriceStale ? buttonStyles.buttonDisabled : {}),
                    }}
                  >
                    {isBooking
                      ? "Booking..."
                      : isPriceStale
                        ? "Price Stale"
                        : `Confirm ${direction === "buy" ? "Buy" : "Sell"}`}
                  </button>
                  <button
                    onClick={cancelSlotSelection}
                    disabled={isBooking}
                    style={styles.cancelButton}
                  >
                    Cancel
                  </button>
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </main>
  );
}

// Page-specific styles
const styles: Record<string, CSSProperties> = {
  content: {
    flex: 1,
    padding: "2rem",
    maxWidth: "900px",
    margin: "0 auto",
    width: "100%",
  },
  priceCard: {
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "12px",
    padding: "1rem 1.5rem",
    marginBottom: "1.5rem",
  },
  priceRow: {
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
    flexWrap: "wrap",
  },
  priceLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.9rem",
  },
  priceValue: {
    fontFamily: "'DM Mono', monospace",
    color: "#fff",
    fontSize: "1.1rem",
    fontWeight: 500,
  },
  priceDivider: {
    color: "rgba(255, 255, 255, 0.2)",
    margin: "0 0.25rem",
  },
  premiumBadge: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    fontWeight: 600,
    padding: "0.2rem 0.5rem",
    borderRadius: "4px",
    marginLeft: "0.25rem",
    background: "rgba(255, 255, 255, 0.1)",
    color: "rgba(255, 255, 255, 0.7)",
  },
  priceTimestamp: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    color: "rgba(255, 255, 255, 0.4)",
    marginTop: "0.5rem",
  },
  staleWarning: {
    color: "#f87171",
    fontWeight: 600,
  },
  priceLoading: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    textAlign: "center" as const,
  },
  priceError: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "#f87171",
    textAlign: "center" as const,
  },
  stepIndicator: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "1rem",
    marginBottom: "2rem",
  },
  step: {
    display: "flex",
    alignItems: "center",
    gap: "0.5rem",
    opacity: 0.4,
  },
  stepActive: {
    opacity: 1,
  },
  stepCompleted: {
    opacity: 0.7,
  },
  stepNumber: {
    fontFamily: "'DM Mono', monospace",
    width: "28px",
    height: "28px",
    borderRadius: "50%",
    background: "rgba(255, 255, 255, 0.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "0.875rem",
    fontWeight: 600,
    color: "#fff",
  },
  stepLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "#fff",
  },
  stepDivider: {
    width: "40px",
    height: "1px",
    background: "rgba(255, 255, 255, 0.2)",
  },
  tradeCard: {
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "12px",
    padding: "1.5rem",
    marginBottom: "2rem",
  },
  directionRow: {
    display: "flex",
    gap: "0.5rem",
    marginBottom: "1.5rem",
  },
  directionBtn: {
    flex: 1,
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1rem",
    fontWeight: 600,
    padding: "0.875rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "rgba(255, 255, 255, 0.6)",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  directionBtnBuyActive: {
    background: "rgba(74, 222, 128, 0.15)",
    border: "1px solid #4ade80",
    color: "#4ade80",
  },
  directionBtnSellActive: {
    background: "rgba(248, 113, 113, 0.15)",
    border: "1px solid #f87171",
    color: "#f87171",
  },
  amountSection: {
    marginBottom: "1.5rem",
  },
  amountHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "0.75rem",
  },
  amountLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.7)",
    fontSize: "0.9rem",
  },
  amountInputWrapper: {
    display: "flex",
    alignItems: "center",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    padding: "0.5rem 0.75rem",
  },
  amountCurrency: {
    fontFamily: "'DM Mono', monospace",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "1rem",
    marginRight: "0.25rem",
  },
  amountInput: {
    fontFamily: "'DM Mono', monospace",
    fontSize: "1.25rem",
    fontWeight: 600,
    color: "#fff",
    background: "transparent",
    border: "none",
    outline: "none",
    width: "80px",
    textAlign: "right" as const,
  },
  slider: {
    width: "100%",
    height: "8px",
    appearance: "none" as const,
    background: "rgba(255, 255, 255, 0.1)",
    borderRadius: "4px",
    outline: "none",
    cursor: "pointer",
  },
  amountRange: {
    display: "flex",
    justifyContent: "space-between",
    marginTop: "0.5rem",
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    color: "rgba(255, 255, 255, 0.4)",
  },
  tradeSummary: {
    background: "rgba(255, 255, 255, 0.02)",
    borderRadius: "8px",
    padding: "1rem",
    textAlign: "center" as const,
    marginBottom: "1.5rem",
  },
  summaryText: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.8)",
    fontSize: "0.95rem",
    margin: 0,
  },
  satsValue: {
    fontFamily: "'DM Mono', monospace",
    color: "#f7931a", // Bitcoin orange
  },
  continueButton: {
    width: "100%",
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1rem",
    fontWeight: 600,
    padding: "0.875rem",
    background: "linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%)",
    border: "none",
    borderRadius: "8px",
    color: "#fff",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  summaryCard: {
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "12px",
    padding: "1rem 1.5rem",
    marginBottom: "1.5rem",
  },
  summaryHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "0.5rem",
  },
  summaryTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "rgba(255, 255, 255, 0.5)",
  },
  editButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    color: "#a78bfa",
    background: "transparent",
    border: "none",
    cursor: "pointer",
    padding: 0,
  },
  summaryDetails: {
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
    flexWrap: "wrap",
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1rem",
    color: "#fff",
  },
  summaryDirection: {
    fontWeight: 600,
  },
  summaryDivider: {
    color: "rgba(255, 255, 255, 0.3)",
  },
  summaryPaymentMethod: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "rgba(255, 255, 255, 0.6)",
  },
  paymentMethodSection: {
    marginBottom: "1.5rem",
  },
  paymentMethodLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.7)",
    fontSize: "0.9rem",
    marginBottom: "0.75rem",
  },
  required: {
    color: "#f87171",
  },
  paymentMethodRow: {
    display: "flex",
    gap: "0.5rem",
  },
  paymentMethodBtn: {
    flex: 1,
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.95rem",
    fontWeight: 600,
    padding: "0.875rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "rgba(255, 255, 255, 0.6)",
    cursor: "pointer",
    transition: "all 0.2s",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "0.5rem",
  },
  paymentMethodBtnActive: {
    background: "rgba(167, 139, 250, 0.15)",
    border: "1px solid #a78bfa",
    color: "#a78bfa",
  },
  paymentMethodBtnDisabled: {
    opacity: 0.4,
    cursor: "not-allowed",
  },
  paymentMethodIcon: {
    fontSize: "1.2rem",
  },
  thresholdMessage: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    color: "rgba(251, 146, 60, 0.9)",
    marginTop: "0.5rem",
    padding: "0.5rem",
    background: "rgba(251, 146, 60, 0.1)",
    borderRadius: "6px",
    border: "1px solid rgba(251, 146, 60, 0.2)",
  },
  errorLink: {
    marginTop: "0.75rem",
    paddingTop: "0.75rem",
    borderTop: "1px solid rgba(255, 255, 255, 0.1)",
  },
  errorLinkAnchor: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "#a78bfa",
    textDecoration: "none",
    fontWeight: 500,
    fontSize: "0.9rem",
  },
  section: {
    marginBottom: "2rem",
  },
  sectionTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1.1rem",
    fontWeight: 500,
    color: "#fff",
    marginBottom: "1rem",
  },
  dateGrid: {
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
  },
  dateButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.75rem 1rem",
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "10px",
    cursor: "pointer",
    minWidth: "90px",
    textAlign: "center" as const,
    transition: "all 0.2s",
  },
  dateButtonSelected: {
    background: "rgba(167, 139, 250, 0.15)",
    border: "1px solid #a78bfa",
  },
  dateButtonDisabled: {
    opacity: 0.4,
    cursor: "not-allowed",
    background: "rgba(255, 255, 255, 0.01)",
    border: "1px solid rgba(255, 255, 255, 0.04)",
  },
  dateWeekday: {
    color: "#fff",
    fontWeight: 500,
    fontSize: "0.875rem",
    marginBottom: "0.25rem",
  },
  dateDay: {
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.8rem",
  },
  slotGrid: {
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
  },
  slotButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.6rem 1.25rem",
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "8px",
    color: "#fff",
    cursor: "pointer",
    fontSize: "0.9rem",
    transition: "all 0.2s",
  },
  slotButtonSelected: {
    background: "rgba(167, 139, 250, 0.15)",
    border: "1px solid #a78bfa",
  },
  emptyState: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.4)",
    padding: "1rem 0",
  },
  confirmCard: {
    background: "rgba(255, 255, 255, 0.03)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "12px",
    padding: "1.5rem",
    maxWidth: "400px",
  },
  confirmTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1.1rem",
    fontWeight: 500,
    color: "#fff",
    marginBottom: "1rem",
  },
  confirmDetails: {
    marginBottom: "1.5rem",
  },
  confirmRow: {
    display: "flex",
    justifyContent: "space-between",
    padding: "0.5rem 0",
    borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
  },
  confirmLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.875rem",
  },
  confirmValue: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "#fff",
    fontSize: "0.875rem",
    fontWeight: 500,
  },
  buttonRow: {
    display: "flex",
    gap: "0.75rem",
  },
  bookButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    flex: 1,
    padding: "0.875rem",
    border: "none",
    borderRadius: "8px",
    color: "#fff",
    fontWeight: 600,
    cursor: "pointer",
    transition: "all 0.2s",
  },
  cancelButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.875rem 1.25rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "rgba(255, 255, 255, 0.7)",
    cursor: "pointer",
    transition: "all 0.2s",
  },
};