import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  Search,
  ChevronLeft,
  ChevronRight,
  Filter,
  Plus,
  Trash2,
  Loader2,
  Building2,
  ListOrdered,
} from "lucide-react";
import { paymentService } from "@/services";
import { cn } from "@/lib/utils";
import { useAdminRole } from "@/hooks/use-admin-role";
import { toast } from "sonner";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";

export default function PaymentRequestsPage() {
  const { canCreateBusinessData } = useAdminRole();
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");

  // Create Modal State
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState<any>({
    paymentRequestNumber: `PAYREQ-${new Date().getFullYear()}-${Math.floor(100 + Math.random() * 900)}`,
    customerName: "",
    customerEmail: "",
    customerPhone: "",
    amount: 0,
    currency: "USD",
    issueDate: new Date().toISOString(),
    dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
    description: "",
    notes: "",
    taxAmount: 0,
    discountAmount: 0,
    status: "DRAFT",
    paymentId: "",
    customerId: "",
    accounts: [
      {
        bankName: "Yaltopia Bank",
        accountName: "Yaltopia Tech PLC",
        accountNumber: "",
        currency: "ETB",
      },
    ],
    items: [{ description: "", quantity: 1, unitPrice: 0, total: 0 }],
  });

  const { data: requestsData, isLoading: requestsLoading } = useQuery({
    queryKey: ["admin", "payment-requests", page, search],
    queryFn: () =>
      paymentService.getPaymentRequests({
        page,
        limit: 10,
        search: search || undefined,
      }),
  });

  const createMutation = useMutation({
    mutationFn: (data: any) => paymentService.createPaymentRequest(data),
    onSuccess: () => {
      toast.success("Payment request created successfully");
      setIsModalOpen(false);
      queryClient.invalidateQueries({
        queryKey: ["admin", "payment-requests"],
      });
    },
    onError: () => {
      toast.error("Failed to create payment request");
    },
  });

  const handleCreate = (e: React.FormEvent) => {
    e.preventDefault();
    createMutation.mutate(formData);
  };

  const addItem = () => {
    setFormData({
      ...formData,
      items: [
        ...formData.items,
        { description: "", quantity: 1, unitPrice: 0, total: 0 },
      ],
    });
  };

  const removeItem = (idx: number) => {
    setFormData({
      ...formData,
      items: formData.items.filter((_: any, i: number) => i !== idx),
    });
  };

  const handleItemChange = (idx: number, field: string, value: any) => {
    const newItems = [...formData.items];
    newItems[idx] = { ...newItems[idx], [field]: value };

    // Auto-calculate total
    if (field === "quantity" || field === "unitPrice") {
      newItems[idx].total = newItems[idx].quantity * newItems[idx].unitPrice;
    }

    const newAmount = newItems.reduce((sum, item) => sum + item.total, 0);
    setFormData({ ...formData, items: newItems, amount: newAmount });
  };

  const addAccount = () => {
    setFormData({
      ...formData,
      accounts: [
        ...formData.accounts,
        { bankName: "", accountName: "", accountNumber: "", currency: "ETB" },
      ],
    });
  };

  const removeAccount = (idx: number) => {
    setFormData({
      ...formData,
      accounts: formData.accounts.filter((_: any, i: number) => i !== idx),
    });
  };

  const handleAccountChange = (idx: number, field: string, value: any) => {
    const newAccounts = [...formData.accounts];
    newAccounts[idx] = { ...newAccounts[idx], [field]: value };
    setFormData({ ...formData, accounts: newAccounts });
  };

  const formatCurrency = (amount: number | any) => {
    const val = typeof amount === "number" ? amount : 0;
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    }).format(val);
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "PAID":
        return "text-emerald-600 bg-emerald-50";
      case "SENT":
        return "text-blue-600 bg-blue-50";
      case "OPENED":
        return "text-amber-600 bg-amber-50";
      case "EXPIRED":
      case "CANCELLED":
        return "text-red-600 bg-red-50";
      default:
        return "text-gray-600 bg-gray-50";
    }
  };

  return (
    <div className="space-y-8 max-w-7xl mx-auto bg-white p-4 min-h-screen">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
            Payment Requests
          </h1>
          <p className="text-gray-500 mt-1">
            Manage outbound customer requests.
          </p>
        </div>
        {canCreateBusinessData && (
          <div className="flex items-center gap-2">
            <Button
              className="h-9 rounded-none bg-slate-900 border-none uppercase text-[10px] font-bold tracking-widest px-6"
              onClick={() => setIsModalOpen(true)}
            >
              <Plus className="w-4 h-4 mr-2" />
              New Request
            </Button>
          </div>
        )}
      </div>

      <Card className="border shadow-none rounded-none">
        <CardHeader className="border-b pb-4 flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-xs font-bold uppercase tracking-widest text-gray-400">
            Request Queue
          </CardTitle>
          <div className="flex items-center gap-2">
            <div className="relative w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                className="pl-10 h-9 rounded-none border-gray-200 text-xs"
                placeholder="Search Customer..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <Button
              variant="outline"
              size="sm"
              className="h-9 rounded-none border-gray-200"
            >
              <Filter className="w-4 h-4 mr-2" /> Filter
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead className="bg-gray-50 border-b">
                <tr>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Request #
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Customer
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Amount
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                    Due Date
                  </th>
                  <th className="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest text-right">
                    Status
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {requestsLoading ? (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-20 text-center text-gray-400 animate-pulse font-medium"
                    >
                      Loading requests...
                    </td>
                  </tr>
                ) : requestsData?.data && requestsData.data.length > 0 ? (
                  requestsData.data.map((request) => (
                    <tr key={request.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-tighter">
                        {request.paymentRequestNumber}
                      </td>
                      <td className="px-6 py-4">
                        <div className="flex flex-col">
                          <span className="text-sm font-bold text-gray-900">
                            {request.customerName}
                          </span>
                          <span className="text-[10px] text-gray-400">
                            {request.customerEmail}
                          </span>
                        </div>
                      </td>
                      <td className="px-6 py-4 text-sm font-bold text-gray-900">
                        {formatCurrency(request.amount)}
                      </td>
                      <td className="px-6 py-4 text-sm text-gray-500">
                        {new Date(request.dueDate).toLocaleDateString()}
                      </td>
                      <td className="px-6 py-4 text-right">
                        <span
                          className={cn(
                            "px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest rounded-none border",
                            getStatusColor(request.status),
                          )}
                        >
                          {request.status}
                        </span>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td
                      colSpan={5}
                      className="px-6 py-20 text-center text-gray-400 italic"
                    >
                      No records found.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
        {requestsData?.meta && (
          <div className="p-4 border-t flex items-center justify-between bg-gray-50/30">
            <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">
              Page {requestsData.meta.page} of {requestsData.meta.totalPages}
            </p>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 rounded-none"
                disabled={!requestsData.meta.hasPreviousPage}
                onClick={() => setPage((p) => p - 1)}
              >
                <ChevronLeft className="w-4 h-4" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                className="h-8 w-8 rounded-none"
                disabled={!requestsData.meta.hasNextPage}
                onClick={() => setPage((p) => p + 1)}
              >
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>
        )}
      </Card>

      {/* Create Modal */}
      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0 rounded-none border-slate-200">
          <form
            onSubmit={handleCreate}
            className="flex flex-col h-full bg-slate-50"
          >
            <DialogHeader className="p-8 pb-6 bg-white border-b border-slate-100">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="px-2 py-0.5 bg-slate-900 text-white text-[9px] font-black uppercase tracking-widest">
                      Draft
                    </span>
                    <DialogTitle className="text-xl font-bold tracking-tight text-slate-900">
                      Issue Payment Request
                    </DialogTitle>
                  </div>
                  <DialogDescription className="text-xs font-medium text-slate-400">
                    Draft a formal financial request for outbound settlement.
                  </DialogDescription>
                </div>
              </div>
            </DialogHeader>

            <ScrollArea className="flex-1">
              <div className="p-8 space-y-10">
                {/* Header Info */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="space-y-2">
                    <Label className="text-[10px] font-black uppercase tracking-widest text-slate-400">
                      Reference Number
                    </Label>
                    <Input
                      value={formData.paymentRequestNumber}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          paymentRequestNumber: e.target.value,
                        })
                      }
                      className="rounded-none border-slate-200 h-10 font-mono text-xs font-bold"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-[10px] font-black uppercase tracking-widest text-slate-400">
                      Issue Date
                    </Label>
                    <Input
                      type="date"
                      value={formData.issueDate.split("T")[0]}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          issueDate: new Date(e.target.value).toISOString(),
                        })
                      }
                      className="rounded-none border-slate-200 h-10 text-xs"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-[10px] font-black uppercase tracking-widest text-slate-400">
                      Due Date
                    </Label>
                    <Input
                      type="date"
                      value={formData.dueDate.split("T")[0]}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          dueDate: new Date(e.target.value).toISOString(),
                        })
                      }
                      className="rounded-none border-slate-200 h-10 text-xs text-rose-600 font-bold"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
                  {/* Customer Details */}
                  <div className="space-y-6">
                    <div className="flex items-center gap-2 mb-4">
                      <div className="w-1 h-4 bg-slate-900" />
                      <h3 className="text-[10px] font-black uppercase tracking-widest text-slate-900">
                        Recipient Details
                      </h3>
                    </div>
                    <div className="grid gap-4">
                      <div className="grid gap-2">
                        <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                          Customer Name
                        </Label>
                        <Input
                          placeholder="e.g. Acme Corp"
                          value={formData.customerName}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              customerName: e.target.value,
                            })
                          }
                          className="rounded-none border-slate-200 h-10 text-xs"
                          required
                        />
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Email Address
                          </Label>
                          <Input
                            type="email"
                            placeholder="billing@acme.com"
                            value={formData.customerEmail}
                            onChange={(e) =>
                              setFormData({
                                ...formData,
                                customerEmail: e.target.value,
                              })
                            }
                            className="rounded-none border-slate-200 h-10 text-xs text-slate-500"
                          />
                        </div>
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Phone Number
                          </Label>
                          <Input
                            placeholder="+1 (555) 000-0000"
                            value={formData.customerPhone}
                            onChange={(e) =>
                              setFormData({
                                ...formData,
                                customerPhone: e.target.value,
                              })
                            }
                            className="rounded-none border-slate-200 h-10 text-xs"
                          />
                        </div>
                      </div>
                      <div className="grid gap-2">
                        <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                          Customer ID (External)
                        </Label>
                        <Input
                          placeholder="CUST-001"
                          value={formData.customerId}
                          onChange={(e) =>
                            setFormData({
                              ...formData,
                              customerId: e.target.value,
                            })
                          }
                          className="rounded-none border-slate-200 h-10 text-xs"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Financials & Logic */}
                  <div className="space-y-6">
                    <div className="flex items-center gap-2 mb-4">
                      <div className="w-1 h-4 bg-slate-900" />
                      <h3 className="text-[10px] font-black uppercase tracking-widest text-slate-900">
                        Financial Basis
                      </h3>
                    </div>
                    <div className="grid gap-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Currency
                          </Label>
                          <Select
                            value={formData.currency}
                            onValueChange={(v) =>
                              setFormData({ ...formData, currency: v })
                            }
                          >
                            <SelectTrigger className="rounded-none border-slate-200 h-10 text-xs">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent className="rounded-none">
                              <SelectItem value="USD">USD - Dollar</SelectItem>
                              <SelectItem value="ETB">ETB - Birr</SelectItem>
                              <SelectItem value="EUR">EUR - Euro</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Description
                          </Label>
                          <Input
                            placeholder="Service payment"
                            value={formData.description}
                            onChange={(e) =>
                              setFormData({
                                ...formData,
                                description: e.target.value,
                              })
                            }
                            className="rounded-none border-slate-200 h-10 text-xs"
                          />
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Tax Amount
                          </Label>
                          <Input
                            type="number"
                            value={formData.taxAmount}
                            onChange={(e) =>
                              setFormData({
                                ...formData,
                                taxAmount: parseFloat(e.target.value) || 0,
                              })
                            }
                            className="rounded-none border-slate-200 h-10 text-xs"
                          />
                        </div>
                        <div className="grid gap-2">
                          <Label className="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                            Discount
                          </Label>
                          <Input
                            type="number"
                            value={formData.discountAmount}
                            onChange={(e) =>
                              setFormData({
                                ...formData,
                                discountAmount: parseFloat(e.target.value) || 0,
                              })
                            }
                            className="rounded-none border-slate-200 h-10 text-xs"
                          />
                        </div>
                      </div>
                      <div className="grid gap-2 pt-2">
                        <div className="bg-slate-900 p-4 flex flex-col items-end justify-center">
                          <span className="text-[8px] font-black uppercase tracking-widest text-slate-500 mb-1">
                            Estimated Total
                          </span>
                          <span className="text-2xl font-black text-white tabular-nums">
                            {formatCurrency(
                              formData.amount +
                                formData.taxAmount -
                                formData.discountAmount,
                            )}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Line Items */}
                <div className="space-y-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <ListOrdered className="w-4 h-4 text-slate-400" />
                      <h3 className="text-[10px] font-black uppercase tracking-widest text-slate-900">
                        Line Items
                      </h3>
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      className="text-[10px] font-black uppercase tracking-widest h-8 text-blue-600 hover:text-blue-700"
                      onClick={addItem}
                    >
                      + Link Item
                    </Button>
                  </div>
                  <div className="border border-slate-200 divide-y divide-slate-100 bg-white shadow-sm">
                    {formData.items.map((item: any, idx: number) => (
                      <div
                        key={idx}
                        className="p-4 grid grid-cols-12 gap-4 items-end group"
                      >
                        <div className="col-span-6 space-y-2">
                          <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                            Description
                          </Label>
                          <Input
                            value={item.description}
                            onChange={(e) =>
                              handleItemChange(
                                idx,
                                "description",
                                e.target.value,
                              )
                            }
                            className="rounded-none border-slate-200 h-8 text-[11px]"
                          />
                        </div>
                        <div className="col-span-2 space-y-2">
                          <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                            Qty
                          </Label>
                          <Input
                            type="number"
                            value={item.quantity}
                            onChange={(e) =>
                              handleItemChange(
                                idx,
                                "quantity",
                                parseInt(e.target.value) || 0,
                              )
                            }
                            className="rounded-none border-slate-200 h-8 text-xs text-center"
                          />
                        </div>
                        <div className="col-span-2 space-y-2">
                          <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                            Unit Price
                          </Label>
                          <Input
                            type="number"
                            value={item.unitPrice}
                            onChange={(e) =>
                              handleItemChange(
                                idx,
                                "unitPrice",
                                parseFloat(e.target.value) || 0,
                              )
                            }
                            className="rounded-none border-slate-200 h-8 text-xs"
                          />
                        </div>
                        <div className="col-span-2 flex items-center justify-end gap-2">
                          <span className="text-xs font-bold text-slate-900 min-w-16 text-right">
                            {formatCurrency(item.total)}
                          </span>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-slate-400 hover:text-rose-600 opacity-0 group-hover:opacity-100 transition-opacity"
                            onClick={() => removeItem(idx)}
                          >
                            <Trash2 className="w-3.5 h-3.5" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Settlement Accounts */}
                <div className="space-y-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Building2 className="w-4 h-4 text-slate-400" />
                      <h3 className="text-[10px] font-black uppercase tracking-widest text-slate-900">
                        Settlement Accounts
                      </h3>
                    </div>
                    <Button
                      type="button"
                      variant="ghost"
                      className="text-[10px] font-black uppercase tracking-widest h-8 text-blue-600 hover:text-blue-700"
                      onClick={addAccount}
                    >
                      + Add Target
                    </Button>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {formData.accounts.map((acc: any, idx: number) => (
                      <div
                        key={idx}
                        className="relative p-6 bg-white border border-slate-200 space-y-4 group"
                      >
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="absolute right-2 top-2 h-7 w-7 text-slate-300 hover:text-rose-600 opacity-0 group-hover:opacity-100"
                          onClick={() => removeAccount(idx)}
                        >
                          <Trash2 className="w-3 h-3" />
                        </Button>
                        <div className="space-y-3">
                          <div className="grid gap-1">
                            <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                              Bank Name
                            </Label>
                            <Input
                              value={acc.bankName}
                              onChange={(e) =>
                                handleAccountChange(
                                  idx,
                                  "bankName",
                                  e.target.value,
                                )
                              }
                              className="rounded-none border-slate-200 h-8 text-[11px] font-bold"
                            />
                          </div>
                          <div className="grid gap-1">
                            <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                              Account Name
                            </Label>
                            <Input
                              value={acc.accountName}
                              onChange={(e) =>
                                handleAccountChange(
                                  idx,
                                  "accountName",
                                  e.target.value,
                                )
                              }
                              className="rounded-none border-slate-200 h-8 text-[11px]"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            <div className="grid gap-1">
                              <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                                Account #
                              </Label>
                              <Input
                                value={acc.accountNumber}
                                onChange={(e) =>
                                  handleAccountChange(
                                    idx,
                                    "accountNumber",
                                    e.target.value,
                                  )
                                }
                                className="rounded-none border-slate-200 h-8 text-[11px] font-mono"
                              />
                            </div>
                            <div className="grid gap-1">
                              <Label className="text-[8px] font-bold uppercase tracking-widest text-slate-400">
                                Curr
                              </Label>
                              <Select
                                value={acc.currency}
                                onValueChange={(v) =>
                                  handleAccountChange(idx, "currency", v)
                                }
                              >
                                <SelectTrigger className="rounded-none border-slate-200 h-8 text-[10px]">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent className="rounded-none">
                                  <SelectItem value="USD">USD</SelectItem>
                                  <SelectItem value="ETB">ETB</SelectItem>
                                  <SelectItem value="EUR">EUR</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="space-y-4 pt-4">
                  <div className="grid gap-2">
                    <Label className="text-[10px] font-black uppercase tracking-widest text-slate-400">
                      Administrative Notes
                    </Label>
                    <Textarea
                      placeholder="Enter internal notes or customer-facing terms..."
                      value={formData.notes}
                      onChange={(e) =>
                        setFormData({ ...formData, notes: e.target.value })
                      }
                      className="rounded-none border-slate-200 min-h-[80px] text-xs resize-none p-4"
                    />
                  </div>
                </div>
              </div>
            </ScrollArea>

            <DialogFooter className="p-8 bg-white border-t border-slate-100 flex items-center justify-between sm:justify-between">
              <Button
                type="button"
                variant="ghost"
                className="rounded-none uppercase text-[10px] font-black tracking-widest text-slate-400 hover:text-slate-900"
                onClick={() => setIsModalOpen(false)}
              >
                Discard
              </Button>
              <Button
                type="submit"
                disabled={createMutation.isPending}
                className="rounded-none bg-slate-900 hover:bg-black text-white px-12 h-11 uppercase text-[10px] font-black tracking-widest shadow-lg shadow-slate-200"
              >
                {createMutation.isPending ? (
                  <Loader2 className="w-4 h-4 animate-spin" />
                ) : (
                  "Authorize & Send Request"
                )}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}