"use client";

import React, { useState, useEffect, useCallback } from "react";
import { $fetch } from "@/lib/api";
import { TransactionSummary, Transaction as BaseTransaction } from "../../../transaction/components/transaction-summary";
import { TransactionEditForm } from "../../../transaction/components/transaction-edit-form";
import { RejectDialog } from "../../../transaction/components/reject-dialog";
import { Button } from "@/components/ui/button";
import { useTranslations } from "next-intl";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

// Extended Transaction interface for deposit/withdraw operations
interface Transaction extends BaseTransaction {
  amount: number;
  fee: number;
  walletId: string;
  description?: string;
  referenceId?: string;
}

interface DepositModalProps {
  depositId: string | null;
  isOpen: boolean;
  onClose: () => void;
  onDepositUpdated?: () => void;
}

export const DepositModal: React.FC<DepositModalProps> = ({
  depositId,
  isOpen,
  onClose,
  onDepositUpdated,
}) => {
  const t = useTranslations("dashboard");
  const [transaction, setTransaction] = useState<Transaction | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  // Editable fields
  const [amount, setAmount] = useState("");
  const [fee, setFee] = useState("");
  const [description, setDescription] = useState("");
  const [referenceId, setReferenceId] = useState("");

  // For rejection dialog
  const [isRejectDialogOpen, setIsRejectDialogOpen] = useState(false);
  const [rejectionMessage, setRejectionMessage] = useState(
    "Please provide a reason for rejection."
  );

  // For validation errors
  const [validationErrors, setValidationErrors] = useState<{[key: string]: string}>({});
  const [generalError, setGeneralError] = useState("");

  const fetchTransaction = useCallback(async () => {
    if (!depositId) return;
    setIsLoading(true);
    try {
      const { data, error } = await $fetch({
        url: `/api/admin/finance/deposit/log/${depositId}`,
        silent: true,
      });
      if (!error && data) {
        setTransaction(data);
        setAmount(String(data.amount));
        setFee(String(data.fee));
        setDescription(data.description || "");
        setReferenceId(data.referenceId || "");
      }
    } catch (err) {
      console.error("Failed to fetch deposit", err);
    } finally {
      setIsLoading(false);
    }
  }, [depositId]);

  useEffect(() => {
    if (depositId && isOpen) {
      fetchTransaction();
    }
  }, [depositId, isOpen, fetchTransaction]);

  // Function to parse validation errors from backend response
  const parseValidationErrors = (errorMessage: string) => {
    try {
      // Try to extract validation details from the error message
      // Expected format: "Invalid request body: Schema validation error: Validation error: [{"path":"referenceId","message":"Reference Id must be at least 1 characters long."}]"
      const match = errorMessage.match(/Validation error: (\[.*\])/);
      if (match) {
        const details = JSON.parse(match[1]);
        const errors: {[key: string]: string} = {};
        details.forEach((detail: any) => {
          if (detail.path && detail.message) {
            errors[detail.path] = detail.message;
          }
        });
        return errors;
      }
      
      // If it's already a clean validation message (from our updated backend)
      if (errorMessage.includes("must be at least") || 
          errorMessage.includes("is required") || 
          errorMessage.includes("must be") ||
          errorMessage.includes("Invalid")) {
        // Try to infer the field from common patterns
        if (errorMessage.toLowerCase().includes("reference id")) {
          return { referenceId: errorMessage };
        } else if (errorMessage.toLowerCase().includes("amount")) {
          return { amount: errorMessage };
        } else if (errorMessage.toLowerCase().includes("fee")) {
          return { fee: errorMessage };
        } else if (errorMessage.toLowerCase().includes("description")) {
          return { description: errorMessage };
        }
      }
    } catch (e) {
      console.error("Failed to parse validation errors:", e);
    }
    return {};
  };

  const updateTransaction = async (newStatus: string) => {
    if (!depositId) return;
    setIsLoading(true);
    
    // Clear previous errors
    setValidationErrors({});
    setGeneralError("");
    
    try {
      // Build the payload.
      const payload: any = {
        status: newStatus,
        amount: parseFloat(amount),
        fee: parseFloat(fee),
        description,
        referenceId,
      };

      if (newStatus === "REJECTED") {
        let currentMeta = {};
        try {
          currentMeta = transaction?.metadata
            ? JSON.parse(transaction.metadata)
            : {};
        } catch (err) {
          console.error("Failed to parse metadata, using empty object", err);
        }
        payload.metadata = { ...currentMeta, message: rejectionMessage };
      } else {
        try {
          payload.metadata = transaction?.metadata
            ? JSON.parse(transaction.metadata)
            : {};
        } catch (err) {
          payload.metadata = {};
        }
      }

      const { error } = await $fetch({
        method: "PUT",
        url: `/api/admin/finance/deposit/log/${depositId}`,
        body: payload,
      });
      
      if (!error) {
        setTransaction((prev) =>
          prev
            ? {
                ...prev,
                ...payload,
                status: newStatus,
                metadata: JSON.stringify(payload.metadata),
              }
            : prev
        );
        if (newStatus === "REJECTED") {
          setIsRejectDialogOpen(false);
        }
        // Notify parent component to refresh data
        onDepositUpdated?.();
      } else {
        // Handle validation errors
        const errorMessage = typeof error === 'string' ? error : (error as any)?.message || 'Unknown error';
        const parsedErrors = parseValidationErrors(errorMessage);
        if (Object.keys(parsedErrors).length > 0) {
          setValidationErrors(parsedErrors);
        } else {
          setGeneralError(errorMessage || "Failed to update transaction");
        }
      }
    } catch (err: any) {
      console.error("Failed to update deposit", err);
      const errorMessage = err?.message || err || "An unexpected error occurred";
      const parsedErrors = parseValidationErrors(errorMessage);
      if (Object.keys(parsedErrors).length > 0) {
        setValidationErrors(parsedErrors);
      } else {
        setGeneralError(errorMessage);
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleClose = () => {
    setTransaction(null);
    setAmount("");
    setFee("");
    setDescription("");
    setReferenceId("");
    setIsRejectDialogOpen(false);
    setRejectionMessage("Please provide a reason for rejection.");
    setValidationErrors({});
    setGeneralError("");
    onClose();
  };

  if (!isOpen) return null;

  const isEditable = transaction?.status === "PENDING";

  return (
    <>
      <Sheet open={isOpen} onOpenChange={handleClose}>
        <SheetContent 
          side="right" 
          className="w-[90vw] max-w-[90vw] min-w-[90vw] p-0 overflow-hidden sm:max-w-[90vw]"
          style={{ width: '90vw', maxWidth: '90vw', minWidth: '90vw' }}
        >
          <SheetHeader className="px-6 py-4 border-b bg-muted/30">
            <SheetTitle className="text-xl font-semibold">
              Deposit Transaction Details
            </SheetTitle>
          </SheetHeader>
          
          <ScrollArea className="h-[calc(100vh-80px)]">
            <div className="p-6 space-y-8">
              {isLoading ? (
                <div className="flex items-center justify-center py-12">
                  <div className="text-center space-y-4">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
                    <p className="text-lg font-medium">Loading transaction details...</p>
                    <p className="text-sm text-muted-foreground">Please wait while we fetch the information</p>
                  </div>
                </div>
              ) : !transaction ? (
                <div className="flex items-center justify-center py-12">
                  <div className="text-center space-y-4">
                    <div className="w-16 h-16 bg-destructive/10 rounded-full flex items-center justify-center mx-auto">
                      <svg className="w-8 h-8 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                      </svg>
                    </div>
                    <div>
                      <p className="text-lg font-medium">Transaction not found</p>
                      <p className="text-sm text-muted-foreground">The requested transaction could not be located</p>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="space-y-8">
                  {/* Transaction Header */}
                  <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 rounded-xl p-6 border border-blue-200/50 dark:border-blue-800/50">
                    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                      <div className="space-y-3">
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-xl flex items-center justify-center">
                            <svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                            </svg>
                          </div>
                          <div>
                            <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Deposit Transaction</h2>
                            <p className="text-sm text-muted-foreground">Transaction ID: {transaction.id}</p>
                          </div>
                        </div>
                        
                        <div className="flex flex-wrap items-center gap-4">
                          <div className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
                            transaction.status === 'COMPLETED' ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400' :
                            transaction.status === 'PENDING' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400' :
                            transaction.status === 'REJECTED' ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400' :
                            'bg-zinc-100 text-zinc-800 dark:bg-zinc-900/20 dark:text-zinc-400'
                          }`}>
                            <div className={`w-2 h-2 rounded-full mr-2 ${
                              transaction.status === 'COMPLETED' ? 'bg-green-500' :
                              transaction.status === 'PENDING' ? 'bg-yellow-500' :
                              transaction.status === 'REJECTED' ? 'bg-red-500' : 'bg-zinc-500'
                            }`}></div>
                            {transaction.status}
                          </div>
                          
                          <div className="text-sm text-muted-foreground">
                            <svg className="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            {new Date(transaction.createdAt).toLocaleString()}
                          </div>
                        </div>
                      </div>
                      
                      <div className="text-right">
                        <div className="text-3xl font-bold text-zinc-900 dark:text-zinc-100">
                          {transaction.amount} {transaction.wallet?.currency}
                        </div>
                        <div className="text-sm text-muted-foreground">
                          Fee: {transaction.fee} {transaction.wallet?.currency}
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Transaction Details Grid */}
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* User Information */}
                    <div className="bg-white dark:bg-zinc-800/50 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700">
                      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        User Information
                      </h3>
                      <div className="space-y-3">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white font-medium">
                            {transaction.user?.firstName?.[0]}{transaction.user?.lastName?.[0]}
                          </div>
                          <div>
                            <p className="font-medium">{transaction.user?.firstName} {transaction.user?.lastName}</p>
                            <p className="text-sm text-muted-foreground">{transaction.user?.email}</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Wallet Information */}
                    <div className="bg-white dark:bg-zinc-800/50 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700">
                      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                        </svg>
                        Wallet Details
                      </h3>
                      <div className="space-y-3">
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Currency:</span>
                          <span className="font-medium">{transaction.wallet?.currency}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Type:</span>
                          <span className="font-medium">{transaction.wallet?.type}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-muted-foreground">Wallet ID:</span>
                          <span className="font-mono text-xs bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded">
                            {transaction.walletId}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Metadata Section */}
                  {transaction.metadata && (
                    <div className="bg-white dark:bg-zinc-800/50 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700">
                      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                        <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        Transaction Metadata
                      </h3>
                      <div className="bg-zinc-50 dark:bg-zinc-900/50 rounded-lg p-4">
                        <pre className="text-sm font-mono whitespace-pre-wrap overflow-x-auto">
                          {JSON.stringify(JSON.parse(transaction.metadata), null, 2)}
                        </pre>
                      </div>
                    </div>
                  )}

                  <Separator />
                  
                  {/* Edit Form */}
                  <div className="bg-white dark:bg-zinc-800/50 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700">
                    <h3 className="text-lg font-semibold mb-6 flex items-center gap-2">
                      <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                      Transaction Management
                    </h3>

                    {/* General Error Display */}
                    {generalError && (
                      <div className="mb-6 p-4 bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-lg">
                        <div className="flex items-start gap-3">
                          <svg className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                          <div>
                            <h4 className="text-sm font-medium text-red-800 dark:text-red-200">
                              Transaction Update Failed
                            </h4>
                            <p className="text-sm text-red-700 dark:text-red-300 mt-1">
                              {generalError}
                            </p>
                          </div>
                        </div>
                      </div>
                    )}
                    
                    <TransactionEditForm
                      amount={amount}
                      fee={fee}
                      description={description}
                      referenceId={referenceId}
                      onAmountChange={(e) => setAmount(e.target.value)}
                      onFeeChange={(e) => setFee(e.target.value)}
                      onDescriptionChange={(e) => setDescription(e.target.value)}
                      onReferenceIdChange={(e) => setReferenceId(e.target.value)}
                      disabled={!isEditable}
                      errors={validationErrors}
                    />
                    
                    {isEditable && (
                      <div className="flex flex-col sm:flex-row gap-4 pt-6 border-t border-zinc-200 dark:border-zinc-700 mt-6">
                        <Button
                          variant="default"
                          onClick={() => updateTransaction("COMPLETED")}
                          disabled={isLoading}
                          className="w-full sm:w-auto bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white shadow-lg hover:shadow-xl transition-all duration-200"
                        >
                          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                          Complete Transaction
                        </Button>
                        <Button
                          variant="destructive"
                          onClick={() => setIsRejectDialogOpen(true)}
                          disabled={isLoading}
                          className="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white shadow-lg hover:shadow-xl transition-all duration-200"
                        >
                          <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                          Reject Transaction
                        </Button>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </ScrollArea>
        </SheetContent>
      </Sheet>

      <RejectDialog
        open={isRejectDialogOpen}
        onOpenChange={setIsRejectDialogOpen}
        rejectionMessage={rejectionMessage}
        onRejectionMessageChange={(e) => setRejectionMessage(e.target.value)}
        onReject={() => updateTransaction("REJECTED")}
        isLoading={isLoading}
      />
    </>
  );
}; 