web/src/components/swap-review-modal.tsx

'use client';

import { Button } from '@/components/ui/button';
import { ArrowDown, X } from 'lucide-react';
import type { TokenDetails } from '@/hooks/usePartyPlanner';
import type { GasEstimate } from '@/hooks/usePartyPool';
import { useToast } from '@/components/ui/toast';

interface SwapReviewModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  fromToken: TokenDetails | null;
  toToken: TokenDetails | null;
  fromAmount: string;
  toAmount: string;
  slippage: number;
  gasEstimate: GasEstimate | null;
  fee: bigint | null;
  onConfirm: () => void;
  isSwapping: boolean;
}

export function SwapReviewModal({
  open,
  onOpenChange,
  fromToken,
  toToken,
  fromAmount,
  toAmount,
  slippage,
  gasEstimate,
  fee,
  onConfirm,
  isSwapping,
}: SwapReviewModalProps) {
  if (!open) return null;

  // Calculate exchange rate
  const exchangeRate = fromAmount && toAmount && parseFloat(fromAmount) > 0
    ? (parseFloat(toAmount) / parseFloat(fromAmount)).toFixed(6)
    : '0';

  // Format fee
  const feeFormatted = fee && toToken
    ? (Number(fee) / Math.pow(10, toToken.decimals)).toFixed(6)
    : '0';

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"
        onClick={() => onOpenChange(false)}
      />

      {/* Modal */}
      <div className="fixed left-[50%] top-[50%] z-50 w-full max-w-md translate-x-[-50%] translate-y-[-50%] animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]">
        <div className="bg-background border rounded-lg shadow-lg p-6">
          {/* Header */}
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold">Review Swap</h2>
            <button
              onClick={() => onOpenChange(false)}
              className="rounded-sm opacity-70 hover:opacity-100 transition-opacity"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

          <div className="space-y-4">
            {/* From Token */}
            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
              <div>
                <div className="text-sm text-muted-foreground">You pay</div>
                <div className="text-2xl font-semibold">{fromAmount}</div>
              </div>
              <div className="text-xl font-medium">{fromToken?.symbol}</div>
            </div>

            {/* Arrow */}
            <div className="flex justify-center">
              <ArrowDown className="h-5 w-5 text-muted-foreground" />
            </div>

            {/* To Token */}
            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
              <div>
                <div className="text-sm text-muted-foreground">You receive</div>
                <div className="text-2xl font-semibold">{toAmount}</div>
              </div>
              <div className="text-xl font-medium">{toToken?.symbol}</div>
            </div>

            {/* Details */}
            <div className="space-y-2 pt-2">
              {/* Exchange Rate */}
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Rate</span>
                <span className="font-medium">
                  1 {fromToken?.symbol} = {exchangeRate} {toToken?.symbol}
                </span>
              </div>

              {/* Fee */}
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Fee</span>
                <span className="font-medium">{feeFormatted} {toToken?.symbol}</span>
              </div>

              {/* Slippage */}
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Slippage Tolerance</span>
                <span className="font-medium">{slippage}%</span>
              </div>

              {/* Network Fee */}
              {gasEstimate && (
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">Network Fee</span>
                  <span className="font-medium">
                    {gasEstimate.estimatedCostUsd.startsWith('<') ? gasEstimate.estimatedCostUsd : `$${gasEstimate.estimatedCostUsd}`}
                  </span>
                </div>
              )}
            </div>

            {/* Approve and Swap Button */}
            <Button
              className="w-full h-12 text-lg"
              onClick={onConfirm}
              disabled={isSwapping}
            >
              {isSwapping ? 'Swapping...' : 'Approve and Swap'}
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}