"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { useRouter } from "@/i18n/routing";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import {
  Upload,
  ArrowLeft,
  Image as ImageIcon,
  Package,
  Save,
  Loader2,
  Info,
  Lock,
  Rocket,
  AlertCircle,
  CheckCircle2,
  Copy,
  ExternalLink,
} from "lucide-react";
import Image from "next/image";
import { useUserStore } from "@/store/user";
import { useNftStore } from "@/store/nft/nft-store";
import { $fetch } from "@/lib/api";
import { imageUploader } from "@/utils/upload";
import { toast } from "sonner";

const editCollectionSchema = z.object({
  name: z.string().min(1, "Collection name is required").max(255),
  symbol: z.string().min(1, "Symbol is required").max(10).toUpperCase(),
  description: z.string().max(1000).optional(),
  categoryId: z.string().min(1, "Category is required"),
  maxSupply: z.number().min(1).optional(),
  mintPrice: z.number().min(0).optional(),
  royaltyPercentage: z.number().min(0).max(50),
  isPublic: z.boolean(),
});

type EditCollectionFormData = z.infer<typeof editCollectionSchema>;

interface EditCollectionClientProps {
  initialCollection: any;
}

export default function EditCollectionClient({ initialCollection }: EditCollectionClientProps) {
  const router = useRouter();
  const { user } = useUserStore();
  const { categories, fetchCategories } = useNftStore();

  const [logoImage, setLogoImage] = useState<string>(initialCollection.logoImage || "");
  const [bannerImage, setBannerImage] = useState<string>(initialCollection.bannerImage || "");
  const [uploadingLogo, setUploadingLogo] = useState(false);
  const [uploadingBanner, setUploadingBanner] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [dragActiveLogo, setDragActiveLogo] = useState(false);
  const [dragActiveBanner, setDragActiveBanner] = useState(false);
  const [isDeploying, setIsDeploying] = useState(false);
  const logoInputRef = useRef<HTMLInputElement>(null);
  const bannerInputRef = useRef<HTMLInputElement>(null);

  const form = useForm<EditCollectionFormData>({
    // @ts-ignore - Complex type inference causing build issues
    resolver: zodResolver(editCollectionSchema),
    defaultValues: {
      name: initialCollection.name || "",
      symbol: initialCollection.symbol || "",
      description: initialCollection.description || "",
      categoryId: initialCollection.categoryId || initialCollection.category?.id || "",
      maxSupply: initialCollection.maxSupply || undefined,
      mintPrice: initialCollection.mintPrice ? parseFloat(initialCollection.mintPrice) : undefined,
      royaltyPercentage: initialCollection.royaltyPercentage ? parseFloat(initialCollection.royaltyPercentage) : 2.5,
      isPublic: initialCollection.isPublic ?? true,
    },
  });

  useEffect(() => {
    if (user) {
      fetchCategories();
    }
  }, [user, fetchCategories]);

  const handleImageUpload = useCallback(async (
    file: File,
    type: "logo" | "banner"
  ) => {
    if (!file.type.startsWith("image/")) {
      toast.error("Please select an image file");
      return;
    }

    const setUploading = type === "logo" ? setUploadingLogo : setUploadingBanner;
    const setImage = type === "logo" ? setLogoImage : setBannerImage;

    setUploading(true);
    try {
      const uploadedUrl = await imageUploader({ file, dir: 'nft-collections', size: { maxWidth: 1200, maxHeight: 1200 } });
      if (uploadedUrl) {
        setImage(uploadedUrl);
        toast.success(`${type === "logo" ? "Logo" : "Banner"} uploaded successfully`);
      }
    } catch (error) {
      console.error("Error uploading image:", error);
      toast.error("Failed to upload image");
    } finally {
      setUploading(false);
    }
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent, type: "logo" | "banner") => {
      e.preventDefault();
      const setDragActive = type === "logo" ? setDragActiveLogo : setDragActiveBanner;
      setDragActive(false);

      const file = e.dataTransfer.files[0];
      if (file) {
        handleImageUpload(file, type);
      }
    },
    [handleImageUpload]
  );

  const onSubmit = async (data: EditCollectionFormData) => {
    if (!logoImage) {
      toast.error("Please upload a logo image");
      return;
    }

    setIsSubmitting(true);
    try {
      const { error } = await $fetch({
        url: `/api/nft/collection/${initialCollection.id}`,
        method: "PUT",
        body: {
          ...data,
          logoImage,
          bannerImage,
        },
      });

      if (error) {
        toast.error(typeof error === 'string' ? error : "Failed to update collection");
        return;
      }

      toast.success("Collection updated successfully!");
      router.push("/nft/creator");
    } catch (error) {
      console.error("Error updating collection:", error);
      toast.error("Failed to update collection");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDeployCollection = async () => {
    if (!initialCollection) return;

    setIsDeploying(true);
    try {
      const response = await $fetch({
        url: "/api/nft/contract/deploy",
        method: "POST",
        body: {
          collectionId: initialCollection.id,
          chain: initialCollection.chain,
          standard: initialCollection.standard || "ERC721",
          name: initialCollection.name,
          symbol: initialCollection.symbol,
          baseURI: initialCollection.baseURI,
          maxSupply: initialCollection.maxSupply,
          royaltyPercentage: initialCollection.royaltyPercentage,
          mintPrice: initialCollection.mintPrice,
          isPublicMint: initialCollection.isPublicMint
        }
      });

      if (response.data) {
        toast.success(`Collection deployed successfully! Contract: ${response.data.contractAddress}`);
        // Refresh collection data
        window.location.reload();
      }
    } catch (error: any) {
      console.error("Error deploying collection:", error);
      toast.error(error.message || "Failed to deploy collection");
    } finally {
      setIsDeploying(false);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    toast.success("Copied to clipboard!");
  };

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 py-8">
      <div className="container max-w-4xl">
        <Button
          variant="ghost"
          onClick={() => router.back()}
          className="mb-6"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Collections
        </Button>

        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2">Edit Collection</h1>
          <p className="text-muted-foreground">
            Update your collection details and settings
          </p>
        </div>

        {/* Deployment Status Banner */}
        {initialCollection.contractAddress ? (
          <Card className="mb-6 border-emerald-200 dark:border-emerald-900/50 bg-emerald-50 dark:bg-emerald-950/20">
            <CardContent className="p-6">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-emerald-100 dark:bg-emerald-900/30 rounded-full">
                  <CheckCircle2 className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-emerald-900 dark:text-emerald-100 mb-2">
                    Collection Deployed to Blockchain
                  </h3>
                  <p className="text-sm text-emerald-800 dark:text-emerald-200 mb-3">
                    This collection is permanently deployed on the {initialCollection.chain} blockchain.
                    Contract details below are immutable and cannot be changed.
                  </p>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <div className="flex items-center gap-2">
                      <span className="text-xs font-semibold text-emerald-700 dark:text-emerald-400">Contract:</span>
                      <code className="text-xs bg-emerald-100 dark:bg-emerald-900/50 px-2 py-1 rounded text-emerald-800 dark:text-emerald-300">
                        {initialCollection.contractAddress.slice(0, 10)}...{initialCollection.contractAddress.slice(-8)}
                      </code>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-6 w-6 p-0"
                        onClick={() => copyToClipboard(initialCollection.contractAddress)}
                      >
                        <Copy className="h-3 w-3" />
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        className="h-6 w-6 p-0"
                        onClick={() => window.open(`https://etherscan.io/address/${initialCollection.contractAddress}`, "_blank")}
                      >
                        <ExternalLink className="h-3 w-3" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card className="mb-6 border-amber-200 dark:border-amber-900/50 bg-amber-50 dark:bg-amber-950/20">
            <CardContent className="p-6">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-amber-100 dark:bg-amber-900/30 rounded-full">
                  <AlertCircle className="h-6 w-6 text-amber-600 dark:text-amber-400" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-amber-900 dark:text-amber-100 mb-2">
                    Collection Not Yet Deployed
                  </h3>
                  <p className="text-sm text-amber-800 dark:text-amber-200 mb-4">
                    This collection exists only in the database. Deploy it to the blockchain to start minting NFTs.
                    Once deployed, some details like name, symbol, and supply will become immutable.
                  </p>
                  <Button
                    onClick={handleDeployCollection}
                    disabled={isDeploying}
                    className={`bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white`}
                  >
                    {isDeploying ? (
                      <>
                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                        Deploying...
                      </>
                    ) : (
                      <>
                        <Rocket className="h-4 w-4 mr-2" />
                        Deploy to Blockchain
                      </>
                    )}
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            {/* Images */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <ImageIcon className="h-5 w-5" />
                  Collection Images
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                {/* Logo Image */}
                <div>
                  <FormLabel className="text-base mb-3 block">Logo Image *</FormLabel>
                  <div
                    onDragOver={(e) => {
                      e.preventDefault();
                      setDragActiveLogo(true);
                    }}
                    onDragLeave={() => setDragActiveLogo(false)}
                    onDrop={(e) => handleDrop(e, "logo")}
                    className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                      dragActiveLogo
                        ? "border-primary bg-primary/5"
                        : "border-zinc-200 dark:border-zinc-800"
                    }`}
                  >
                    {logoImage ? (
                      <div className="space-y-4">
                        <div className="relative w-48 h-48 mx-auto">
                          <Image
                            src={logoImage}
                            alt="Logo preview"
                            fill
                            className="object-cover rounded-lg"
                          />
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => logoInputRef.current?.click()}
                          disabled={uploadingLogo}
                        >
                          {uploadingLogo ? (
                            <>
                              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                              Uploading...
                            </>
                          ) : (
                            <>
                              <Upload className="h-4 w-4 mr-2" />
                              Change Logo
                            </>
                          )}
                        </Button>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        <Upload className="h-12 w-12 mx-auto text-muted-foreground" />
                        <div>
                          <Button
                            type="button"
                            variant="outline"
                            onClick={() => logoInputRef.current?.click()}
                            disabled={uploadingLogo}
                          >
                            {uploadingLogo ? (
                              <>
                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                                Uploading...
                              </>
                            ) : (
                              <>
                                <Upload className="h-4 w-4 mr-2" />
                                Upload Logo
                              </>
                            )}
                          </Button>
                          <p className="text-xs text-muted-foreground mt-2">
                            Recommended: 500x500px, max 5MB
                          </p>
                        </div>
                      </div>
                    )}
                    <input
                      ref={logoInputRef}
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => {
                        const file = e.target.files?.[0];
                        if (file) handleImageUpload(file, "logo");
                      }}
                    />
                  </div>
                </div>

                {/* Banner Image */}
                <div>
                  <FormLabel className="text-base mb-3 block">Banner Image (Optional)</FormLabel>
                  <div
                    onDragOver={(e) => {
                      e.preventDefault();
                      setDragActiveBanner(true);
                    }}
                    onDragLeave={() => setDragActiveBanner(false)}
                    onDrop={(e) => handleDrop(e, "banner")}
                    className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
                      dragActiveBanner
                        ? "border-primary bg-primary/5"
                        : "border-zinc-200 dark:border-zinc-800"
                    }`}
                  >
                    {bannerImage ? (
                      <div className="space-y-4">
                        <div className="relative w-full h-48 mx-auto">
                          <Image
                            src={bannerImage}
                            alt="Banner preview"
                            fill
                            className="object-cover rounded-lg"
                          />
                        </div>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => bannerInputRef.current?.click()}
                          disabled={uploadingBanner}
                        >
                          {uploadingBanner ? (
                            <>
                              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                              Uploading...
                            </>
                          ) : (
                            <>
                              <Upload className="h-4 w-4 mr-2" />
                              Change Banner
                            </>
                          )}
                        </Button>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        <Upload className="h-12 w-12 mx-auto text-muted-foreground" />
                        <div>
                          <Button
                            type="button"
                            variant="outline"
                            onClick={() => bannerInputRef.current?.click()}
                            disabled={uploadingBanner}
                          >
                            {uploadingBanner ? (
                              <>
                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                                Uploading...
                              </>
                            ) : (
                              <>
                                <Upload className="h-4 w-4 mr-2" />
                                Upload Banner
                              </>
                            )}
                          </Button>
                          <p className="text-xs text-muted-foreground mt-2">
                            Recommended: 1400x400px, max 10MB
                          </p>
                        </div>
                      </div>
                    )}
                    <input
                      ref={bannerInputRef}
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => {
                        const file = e.target.files?.[0];
                        if (file) handleImageUpload(file, "banner");
                      }}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Basic Information */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Package className="h-5 w-5" />
                  Basic Information
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base flex items-center gap-2">
                        Collection Name *
                        {initialCollection.contractAddress && (
                          <Badge variant="secondary" className="text-xs">
                            <Lock className="h-3 w-3 mr-1" />
                            Immutable
                          </Badge>
                        )}
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., My Awesome Collection"
                          {...field}
                          disabled={!!initialCollection.contractAddress}
                        />
                      </FormControl>
                      {initialCollection.contractAddress && (
                        <FormDescription className="text-amber-600 dark:text-amber-400">
                          Cannot be changed after deployment to blockchain
                        </FormDescription>
                      )}
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="symbol"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base flex items-center gap-2">
                        Symbol *
                        {initialCollection.contractAddress && (
                          <Badge variant="secondary" className="text-xs">
                            <Lock className="h-3 w-3 mr-1" />
                            Immutable
                          </Badge>
                        )}
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., MAC"
                          {...field}
                          maxLength={10}
                          disabled={!!initialCollection.contractAddress}
                        />
                      </FormControl>
                      <FormDescription>
                        Short identifier for your collection (2-10 characters)
                        {initialCollection.contractAddress && (
                          <span className="block text-amber-600 dark:text-amber-400 mt-1">
                            Cannot be changed after deployment to blockchain
                          </span>
                        )}
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base">Description</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder="Describe your collection..."
                          rows={4}
                          {...field}
                        />
                      </FormControl>
                      <FormDescription>
                        Tell collectors what makes your collection special
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="categoryId"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base">Category *</FormLabel>
                      <Select onValueChange={field.onChange} value={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Select a category" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {Array.isArray(categories) && categories.length > 0 ? (
                            categories.map((category: any) => (
                              <SelectItem key={category.id} value={category.id}>
                                {category.name}
                              </SelectItem>
                            ))
                          ) : (
                            <div className="px-2 py-1.5 text-sm text-muted-foreground">
                              No categories available
                            </div>
                          )}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </CardContent>
            </Card>

            {/* Blockchain Info (Read-only) */}
            <Card className="border-zinc-300 dark:border-zinc-700">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Lock className="h-5 w-5" />
                  Blockchain Information (Immutable)
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
                  <span className="text-sm font-medium">Blockchain:</span>
                  <Badge variant="secondary">{initialCollection.chain}</Badge>
                </div>
                <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
                  <span className="text-sm font-medium">Network:</span>
                  <Badge variant="secondary">{initialCollection.network}</Badge>
                </div>
                <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
                  <span className="text-sm font-medium">Token Standard:</span>
                  <Badge variant="secondary">{initialCollection.standard}</Badge>
                </div>
                {initialCollection.contractAddress && (
                  <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
                    <span className="text-sm font-medium">Contract Address:</span>
                    <code className="text-xs bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
                      {initialCollection.contractAddress.slice(0, 6)}...{initialCollection.contractAddress.slice(-4)}
                    </code>
                  </div>
                )}
                <div className="flex items-center gap-2 text-xs text-muted-foreground p-2">
                  <Info className="h-4 w-4" />
                  <span>These blockchain properties cannot be changed after collection creation for security reasons.</span>
                </div>
              </CardContent>
            </Card>

            {/* Collection Settings */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Package className="h-5 w-5" />
                  Collection Settings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <FormField
                  control={form.control}
                  name="royaltyPercentage"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base">Creator Royalty (%)</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.1"
                          min="0"
                          max="50"
                          placeholder="2.5"
                          {...field}
                          onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
                        />
                      </FormControl>
                      <FormDescription>
                        Percentage of sales you'll receive on secondary markets (0-50%)
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="maxSupply"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base flex items-center gap-2">
                        Maximum Supply (Optional)
                        {initialCollection.contractAddress && (
                          <Badge variant="secondary" className="text-xs">
                            <Lock className="h-3 w-3 mr-1" />
                            Immutable
                          </Badge>
                        )}
                      </FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          min="1"
                          placeholder="Leave empty for unlimited"
                          {...field}
                          value={field.value || ""}
                          onChange={(e) => field.onChange(e.target.value ? parseInt(e.target.value) : undefined)}
                          disabled={!!initialCollection.contractAddress}
                        />
                      </FormControl>
                      <FormDescription>
                        Maximum number of NFTs that can be minted in this collection
                        {initialCollection.contractAddress && (
                          <span className="block text-amber-600 dark:text-amber-400 mt-1">
                            Cannot be changed after deployment to blockchain
                          </span>
                        )}
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="mintPrice"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-base">Mint Price (Optional)</FormLabel>
                      <FormControl>
                        <Input
                          type="number"
                          step="0.0001"
                          min="0"
                          placeholder="0.0001"
                          {...field}
                          value={field.value || ""}
                          onChange={(e) => field.onChange(e.target.value ? parseFloat(e.target.value) : undefined)}
                        />
                      </FormControl>
                      <FormDescription>
                        Price to mint each NFT (in {initialCollection.currency || "native currency"})
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="isPublic"
                  render={({ field }) => (
                    <FormItem className="flex items-center justify-between p-4 border rounded-lg">
                      <div>
                        <FormLabel className="text-base">Public Collection</FormLabel>
                        <FormDescription className="mt-1">
                          Make this collection visible to everyone
                        </FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </CardContent>
            </Card>

            {/* Submit Button */}
            <div className="flex gap-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.back()}
                disabled={isSubmitting}
                className="flex-1"
              >
                Cancel
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting || uploadingLogo || uploadingBanner}
                className="flex-1"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                    Updating...
                  </>
                ) : (
                  <>
                    <Save className="h-4 w-4 mr-2" />
                    Update Collection
                  </>
                )}
              </Button>
            </div>
          </form>
        </Form>
      </div>
    </div>
  );
}