"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import DOMPurify from "isomorphic-dompurify";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  ArrowLeft,
  Save,
  Plus,
  Trash2,
  X,
  ChevronDown,
  ChevronUp,
} from "lucide-react";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";
import {
  customPackageDataStore,
  type DayPlan,
  type PackageLocation,
  type PackageVehicle,
} from "@/features/packages/services/custom-packages.service";
import { vehicleDataStore } from "@/features/vehicles/services/vehicles.service";
import {
  customPackageFormSchema,
  type CustomPackageFormInput,
} from "@/lib/validations/custom-packages";

interface PackageFormClientProps {
  mode: "add" | "edit";
  packageId?: string;
}

export function PackageFormClient({ mode, packageId }: PackageFormClientProps) {
  const router = useRouter();
  const toast = useToastEnhanced();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [expandedDays, setExpandedDays] = useState<Set<number>>(new Set([1]));

  const existingPackage = packageId
    ? customPackageDataStore.getPackageById(packageId)
    : undefined;
  const availableVehicles = vehicleDataStore.getActiveVehicles();

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<CustomPackageFormInput>({
    resolver: zodResolver(customPackageFormSchema),
    defaultValues: existingPackage
      ? {
          cityName: existingPackage.cityName,
          category: existingPackage.category,
          dayPlans: existingPackage.dayPlans,
        }
      : {
          cityName: "",
          category: "spiritual",
          dayPlans: [],
        },
  });

  const dayPlans = watch("dayPlans") || [];
  const _cityName = watch("cityName");
  const category = watch("category");

  const handleImageUpload = (
    dayIndex: number,
    locationIndex: number,
    file: File
  ) => {
    if (!file.type.startsWith("image/")) {
      toast.error({
        title: "Invalid File",
        description: "Please upload an image file (JPG, PNG, GIF, etc.)",
      });
      return;
    }

    const reader = new FileReader();
    reader.onloadend = () => {
      const updatedDayPlans = [...dayPlans];
      updatedDayPlans[dayIndex].locations[locationIndex].image =
        reader.result as string;
      setValue("dayPlans", updatedDayPlans);
    };
    reader.readAsDataURL(file);
  };

  const toggleDayExpansion = (dayNumber: number) => {
    setExpandedDays((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(dayNumber)) {
        newSet.delete(dayNumber);
      } else {
        newSet.add(dayNumber);
      }
      return newSet;
    });
  };

  const addDayPlan = (dayNumber: number) => {
    const newDayPlan: DayPlan = {
      dayNumber,
      locations: [],
      vehicles: [],
      pricing: {
        b2cWeekdayPerHead: 0,
        b2cWeekendPerHead: 0,
        b2bAgentPricing: 0,
      },
    };
    setValue("dayPlans", [...dayPlans, newDayPlan]);
    setExpandedDays((prev) => new Set([...prev, dayNumber]));
  };

  const removeDayPlan = (dayNumber: number) => {
    setValue(
      "dayPlans",
      dayPlans.filter((d) => d.dayNumber !== dayNumber)
    );
    setExpandedDays((prev) => {
      const newSet = new Set(prev);
      newSet.delete(dayNumber);
      return newSet;
    });
  };

  const addLocation = (dayIndex: number) => {
    const newLocation: PackageLocation = {
      id: `loc_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      name: "",
      image: "",
      itineraryDescription: "",
      otherDetails: "",
    };
    const updatedDayPlans = [...dayPlans];
    updatedDayPlans[dayIndex].locations.push(newLocation);
    setValue("dayPlans", updatedDayPlans);
  };

  const removeLocation = (dayIndex: number, locationIndex: number) => {
    const updatedDayPlans = [...dayPlans];
    updatedDayPlans[dayIndex].locations.splice(locationIndex, 1);
    setValue("dayPlans", updatedDayPlans);
  };

  const addVehicle = (dayIndex: number) => {
    const newVehicle: PackageVehicle = {
      id: `veh_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      vehicleId: "",
      vehicleName: "",
      vehiclePhoto: "",
      perDayPrice: 0,
    };
    const updatedDayPlans = [...dayPlans];
    updatedDayPlans[dayIndex].vehicles.push(newVehicle);
    setValue("dayPlans", updatedDayPlans);
  };

  const removeVehicle = (dayIndex: number, vehicleIndex: number) => {
    const updatedDayPlans = [...dayPlans];
    updatedDayPlans[dayIndex].vehicles.splice(vehicleIndex, 1);
    setValue("dayPlans", updatedDayPlans);
  };

  const handleVehicleSelect = (
    dayIndex: number,
    vehicleIndex: number,
    vehicleId: string
  ) => {
    const vehicle = availableVehicles.find((v) => v.id === vehicleId);
    if (vehicle) {
      const updatedDayPlans = [...dayPlans];
      updatedDayPlans[dayIndex].vehicles[vehicleIndex] = {
        ...updatedDayPlans[dayIndex].vehicles[vehicleIndex],
        vehicleId: vehicle.id,
        vehicleName: vehicle.name,
        vehiclePhoto: vehicle.photo,
        perDayPrice: vehicle.perDayPrice,
      };
      setValue("dayPlans", updatedDayPlans);
    }
  };

  const onSubmit = async (data: CustomPackageFormInput) => {
    setIsSubmitting(true);

    // Sanitize all text inputs
    const sanitizedData = {
      cityName: DOMPurify.sanitize(data.cityName.trim()),
      category: data.category,
      dayPlans: data.dayPlans.map((day) => ({
        ...day,
        locations: day.locations.map((loc) => ({
          ...loc,
          name: DOMPurify.sanitize(loc.name.trim()),
          itineraryDescription: DOMPurify.sanitize(
            loc.itineraryDescription.trim()
          ),
          otherDetails: DOMPurify.sanitize(loc.otherDetails.trim()),
        })),
      })),
    };

    try {
      if (mode === "add") {
        customPackageDataStore.addPackage(
          sanitizedData.cityName,
          sanitizedData.category,
          sanitizedData.dayPlans
        );
        toast.success({
          title: "Package Added",
          description: `Custom package for ${sanitizedData.cityName} has been created successfully.`,
        });
      } else if (packageId) {
        customPackageDataStore.updatePackage(
          packageId,
          sanitizedData.cityName,
          sanitizedData.category,
          sanitizedData.dayPlans
        );
        toast.success({
          title: "Package Updated",
          description: `Custom package for ${sanitizedData.cityName} has been updated successfully.`,
        });
      }
      router.push("/admin/custom-packages");
    } catch {
      toast.error({
        title: "Error",
        description: "Failed to save the package. Please try again.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const availableDays = Array.from({ length: 15 }, (_, i) => i + 1).filter(
    (day) => !dayPlans.some((d) => d.dayNumber === day)
  );

  return (
    <section
      aria-labelledby="package-form-heading"
      className="admin-section max-w-5xl"
    >
      <header className="admin-page-header">
        <div className="flex items-center gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => router.back()}
            aria-label="Go back"
          >
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 id="package-form-heading" className="admin-page-title">
              {mode === "add"
                ? "Add New Custom Package"
                : "Edit Custom Package"}
            </h1>
            <p className="admin-page-description">
              {mode === "add"
                ? "Create a new multi-day tour package"
                : "Update package details and itinerary"}
            </p>
          </div>
        </div>
      </header>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
        {/* Step 1: City Setup */}
        <Card>
          <CardHeader>
            <CardTitle>Step 1: City Setup</CardTitle>
            <CardDescription>
              Enter the city name and category for this custom package
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="cityName">
                City Name <span className="text-destructive">*</span>
              </Label>
              <Input
                id="cityName"
                {...register("cityName")}
                placeholder="e.g., Varanasi, Ayodhya, Haridwar"
                aria-invalid={!!errors.cityName}
                aria-describedby={
                  errors.cityName ? "cityName-error" : undefined
                }
              />
              {errors.cityName && (
                <p id="cityName-error" className="text-sm text-destructive">
                  {errors.cityName.message}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="category">
                Category <span className="text-destructive">*</span>
              </Label>
              <Select
                value={category}
                onValueChange={(value: any) => setValue("category", value)}
              >
                <SelectTrigger id="category" aria-invalid={!!errors.category}>
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="adventure">Adventure</SelectItem>
                  <SelectItem value="thrill">Thrill</SelectItem>
                  <SelectItem value="suspense">Suspense</SelectItem>
                  <SelectItem value="spiritual">Spiritual</SelectItem>
                  <SelectItem value="others">Others</SelectItem>
                </SelectContent>
              </Select>
              {errors.category && (
                <p className="text-sm text-destructive">
                  {errors.category.message}
                </p>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Step 2: Day Plans */}
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Step 2: Day Plans</CardTitle>
                <CardDescription>
                  Select days and add locations, vehicles, and pricing for each
                  day
                </CardDescription>
              </div>
              {availableDays.length > 0 && (
                <Select onValueChange={(value) => addDayPlan(Number(value))}>
                  <SelectTrigger className="w-48" aria-label="Add new day plan">
                    <SelectValue placeholder="Add New Day Plan" />
                  </SelectTrigger>
                  <SelectContent>
                    {availableDays.map((day) => (
                      <SelectItem key={day} value={String(day)}>
                        Day {day}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            {dayPlans.length === 0 ? (
              <div className="text-center py-8 text-muted-foreground">
                <p>
                  No day plans added yet. Select a day from the dropdown to get
                  started.
                </p>
              </div>
            ) : (
              dayPlans.map((dayPlan, dayIndex) => {
                const isExpanded = expandedDays.has(dayPlan.dayNumber);
                return (
                  <Card key={dayPlan.dayNumber} className="border-2">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <Badge
                            variant="default"
                            className="text-base px-3 py-1"
                          >
                            Day {dayPlan.dayNumber}
                          </Badge>
                          <span className="text-sm text-muted-foreground">
                            {dayPlan.locations.length} location(s),{" "}
                            {dayPlan.vehicles.length} vehicle(s)
                          </span>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() =>
                              toggleDayExpansion(dayPlan.dayNumber)
                            }
                            aria-label={
                              isExpanded
                                ? "Collapse day plan"
                                : "Expand day plan"
                            }
                          >
                            {isExpanded ? (
                              <ChevronUp className="h-5 w-5" />
                            ) : (
                              <ChevronDown className="h-5 w-5" />
                            )}
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            onClick={() => removeDayPlan(dayPlan.dayNumber)}
                            aria-label="Remove day plan"
                          >
                            <X className="h-5 w-5 text-destructive" />
                          </Button>
                        </div>
                      </div>
                    </CardHeader>

                    {isExpanded && (
                      <CardContent className="space-y-6">
                        {/* Locations */}
                        <div className="space-y-4">
                          <div className="flex items-center justify-between">
                            <h4 className="font-semibold">Locations</h4>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => addLocation(dayIndex)}
                            >
                              <Plus className="mr-2 h-4 w-4" />
                              Add Location
                            </Button>
                          </div>

                          {dayPlan.locations.length === 0 ? (
                            <p className="text-sm text-muted-foreground text-center py-4">
                              No locations added yet
                            </p>
                          ) : (
                            dayPlan.locations.map((location, locationIndex) => (
                              <Card key={location.id} className="p-4">
                                <div className="flex items-start justify-between mb-4">
                                  <h5 className="font-medium">
                                    Location {locationIndex + 1}
                                  </h5>
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    onClick={() =>
                                      removeLocation(dayIndex, locationIndex)
                                    }
                                    aria-label="Remove location"
                                  >
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                  </Button>
                                </div>
                                <div className="grid gap-4 sm:grid-cols-2">
                                  <div className="space-y-2">
                                    <Label
                                      htmlFor={`dayPlans.${dayIndex}.locations.${locationIndex}.name`}
                                    >
                                      Location Name{" "}
                                      <span className="text-destructive">
                                        *
                                      </span>
                                    </Label>
                                    <Input
                                      id={`dayPlans.${dayIndex}.locations.${locationIndex}.name`}
                                      {...register(
                                        `dayPlans.${dayIndex}.locations.${locationIndex}.name`
                                      )}
                                      placeholder="e.g., Kashi Vishwanath Temple"
                                    />
                                    {errors.dayPlans?.[dayIndex]?.locations?.[
                                      locationIndex
                                    ]?.name && (
                                      <p className="text-sm text-destructive">
                                        {
                                          errors.dayPlans[dayIndex]
                                            ?.locations?.[locationIndex]?.name
                                            ?.message
                                        }
                                      </p>
                                    )}
                                  </div>

                                  <div className="space-y-2">
                                    <Label
                                      htmlFor={`dayPlans.${dayIndex}.locations.${locationIndex}.image`}
                                    >
                                      Image{" "}
                                      <span className="text-destructive">
                                        *
                                      </span>
                                    </Label>
                                    <div className="flex items-center gap-2">
                                      <Input
                                        id={`dayPlans.${dayIndex}.locations.${locationIndex}.image`}
                                        type="file"
                                        accept="image/*"
                                        onChange={(e) => {
                                          const file = e.target.files?.[0];
                                          if (file) {
                                            handleImageUpload(
                                              dayIndex,
                                              locationIndex,
                                              file
                                            );
                                          }
                                        }}
                                        className="cursor-pointer"
                                      />
                                      {location.image && (
                                        <div className="relative h-10 w-10 rounded border overflow-hidden flex-shrink-0">
                                          <img
                                            src={
                                              location.image ||
                                              "/placeholder.png"
                                            }
                                            alt="Preview"
                                            className="h-full w-full object-cover"
                                          />
                                        </div>
                                      )}
                                    </div>
                                    {errors.dayPlans?.[dayIndex]?.locations?.[
                                      locationIndex
                                    ]?.image && (
                                      <p className="text-sm text-destructive">
                                        {
                                          errors.dayPlans[dayIndex]
                                            ?.locations?.[locationIndex]?.image
                                            ?.message
                                        }
                                      </p>
                                    )}
                                  </div>

                                  <div className="space-y-2 sm:col-span-2">
                                    <Label
                                      htmlFor={`dayPlans.${dayIndex}.locations.${locationIndex}.itineraryDescription`}
                                    >
                                      Itinerary Description{" "}
                                      <span className="text-destructive">
                                        *
                                      </span>
                                    </Label>
                                    <Textarea
                                      id={`dayPlans.${dayIndex}.locations.${locationIndex}.itineraryDescription`}
                                      {...register(
                                        `dayPlans.${dayIndex}.locations.${locationIndex}.itineraryDescription`
                                      )}
                                      placeholder="Describe the visit plan and highlights..."
                                      rows={3}
                                    />
                                    {errors.dayPlans?.[dayIndex]?.locations?.[
                                      locationIndex
                                    ]?.itineraryDescription && (
                                      <p className="text-sm text-destructive">
                                        {
                                          errors.dayPlans[dayIndex]
                                            ?.locations?.[locationIndex]
                                            ?.itineraryDescription?.message
                                        }
                                      </p>
                                    )}
                                  </div>
                                  <div className="space-y-2 sm:col-span-2">
                                    <Label
                                      htmlFor={`dayPlans.${dayIndex}.locations.${locationIndex}.otherDetails`}
                                    >
                                      Other Details
                                    </Label>
                                    <Textarea
                                      id={`dayPlans.${dayIndex}.locations.${locationIndex}.otherDetails`}
                                      {...register(
                                        `dayPlans.${dayIndex}.locations.${locationIndex}.otherDetails`
                                      )}
                                      placeholder="Additional information, timings, tips, etc."
                                      rows={2}
                                    />
                                  </div>
                                </div>
                              </Card>
                            ))
                          )}
                        </div>

                        <Separator />

                        {/* Vehicles */}
                        <div className="space-y-4">
                          <div className="flex items-center justify-between">
                            <h4 className="font-semibold">Vehicles</h4>
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => addVehicle(dayIndex)}
                            >
                              <Plus className="mr-2 h-4 w-4" />
                              Add Vehicle
                            </Button>
                          </div>

                          {dayPlan.vehicles.length === 0 ? (
                            <p className="text-sm text-muted-foreground text-center py-4">
                              No vehicles added yet
                            </p>
                          ) : (
                            dayPlan.vehicles.map((vehicle, vehicleIndex) => (
                              <Card key={vehicle.id} className="p-4">
                                <div className="flex items-start justify-between mb-4">
                                  <h5 className="font-medium">
                                    Vehicle {vehicleIndex + 1}
                                  </h5>
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    onClick={() =>
                                      removeVehicle(dayIndex, vehicleIndex)
                                    }
                                    aria-label="Remove vehicle"
                                  >
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                  </Button>
                                </div>
                                <div className="space-y-4">
                                  <div className="space-y-2">
                                    <Label
                                      htmlFor={`dayPlans.${dayIndex}.vehicles.${vehicleIndex}.vehicleId`}
                                    >
                                      Select Vehicle{" "}
                                      <span className="text-destructive">
                                        *
                                      </span>
                                    </Label>
                                    <Select
                                      value={vehicle.vehicleId}
                                      onValueChange={(value) =>
                                        handleVehicleSelect(
                                          dayIndex,
                                          vehicleIndex,
                                          value
                                        )
                                      }
                                    >
                                      <SelectTrigger
                                        id={`dayPlans.${dayIndex}.vehicles.${vehicleIndex}.vehicleId`}
                                      >
                                        <SelectValue placeholder="Choose a vehicle" />
                                      </SelectTrigger>
                                      <SelectContent>
                                        {availableVehicles.map((v) => (
                                          <SelectItem key={v.id} value={v.id}>
                                            {v.name} - ₹{v.perDayPrice}/day (
                                            {v.passengerLimit} seats)
                                          </SelectItem>
                                        ))}
                                      </SelectContent>
                                    </Select>
                                    {errors.dayPlans?.[dayIndex]?.vehicles?.[
                                      vehicleIndex
                                    ]?.vehicleId && (
                                      <p className="text-sm text-destructive">
                                        {
                                          errors.dayPlans[dayIndex]?.vehicles?.[
                                            vehicleIndex
                                          ]?.vehicleId?.message
                                        }
                                      </p>
                                    )}
                                  </div>

                                  {vehicle.vehicleId && (
                                    <Card className="p-3 bg-muted/50">
                                      <div className="flex items-center gap-3">
                                        {vehicle.vehiclePhoto && (
                                          <img
                                            src={
                                              vehicle.vehiclePhoto ||
                                              "/placeholder.png"
                                            }
                                            alt={vehicle.vehicleName}
                                            className="h-16 w-24 rounded object-cover"
                                          />
                                        )}
                                        <div className="flex-1">
                                          <p className="font-medium">
                                            {vehicle.vehicleName}
                                          </p>
                                          <p className="text-sm text-muted-foreground">
                                            ₹{vehicle.perDayPrice} per day
                                          </p>
                                        </div>
                                      </div>
                                    </Card>
                                  )}
                                </div>
                              </Card>
                            ))
                          )}
                        </div>

                        <Separator />

                        {/* Pricing */}
                        <div className="space-y-4">
                          <h4 className="font-semibold">
                            Pricing (Per Person)
                          </h4>
                          <div className="grid gap-4 sm:grid-cols-3">
                            <div className="space-y-2">
                              <Label
                                htmlFor={`dayPlans.${dayIndex}.pricing.b2cWeekdayPerHead`}
                              >
                                B2C Weekday{" "}
                                <span className="text-destructive">*</span>
                              </Label>
                              <Input
                                id={`dayPlans.${dayIndex}.pricing.b2cWeekdayPerHead`}
                                type="number"
                                {...register(
                                  `dayPlans.${dayIndex}.pricing.b2cWeekdayPerHead`,
                                  {
                                    valueAsNumber: true,
                                  }
                                )}
                                placeholder="1500"
                              />
                              {errors.dayPlans?.[dayIndex]?.pricing
                                ?.b2cWeekdayPerHead && (
                                <p className="text-sm text-destructive">
                                  {
                                    errors.dayPlans[dayIndex]?.pricing
                                      ?.b2cWeekdayPerHead?.message
                                  }
                                </p>
                              )}
                            </div>
                            <div className="space-y-2">
                              <Label
                                htmlFor={`dayPlans.${dayIndex}.pricing.b2cWeekendPerHead`}
                              >
                                B2C Weekend{" "}
                                <span className="text-destructive">*</span>
                              </Label>
                              <Input
                                id={`dayPlans.${dayIndex}.pricing.b2cWeekendPerHead`}
                                type="number"
                                {...register(
                                  `dayPlans.${dayIndex}.pricing.b2cWeekendPerHead`,
                                  {
                                    valueAsNumber: true,
                                  }
                                )}
                                placeholder="1800"
                              />
                              {errors.dayPlans?.[dayIndex]?.pricing
                                ?.b2cWeekendPerHead && (
                                <p className="text-sm text-destructive">
                                  {
                                    errors.dayPlans[dayIndex]?.pricing
                                      ?.b2cWeekendPerHead?.message
                                  }
                                </p>
                              )}
                            </div>
                            <div className="space-y-2">
                              <Label
                                htmlFor={`dayPlans.${dayIndex}.pricing.b2bAgentPricing`}
                              >
                                B2B Agent{" "}
                                <span className="text-destructive">*</span>
                              </Label>
                              <Input
                                id={`dayPlans.${dayIndex}.pricing.b2bAgentPricing`}
                                type="number"
                                {...register(
                                  `dayPlans.${dayIndex}.pricing.b2bAgentPricing`,
                                  {
                                    valueAsNumber: true,
                                  }
                                )}
                                placeholder="1200"
                              />
                              {errors.dayPlans?.[dayIndex]?.pricing
                                ?.b2bAgentPricing && (
                                <p className="text-sm text-destructive">
                                  {
                                    errors.dayPlans[dayIndex]?.pricing
                                      ?.b2bAgentPricing?.message
                                  }
                                </p>
                              )}
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    )}
                  </Card>
                );
              })
            )}
          </CardContent>
        </Card>

        {/* Submit Button */}
        <div className="flex justify-end gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.back()}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button type="submit" disabled={isSubmitting}>
            <Save className="mr-2 h-4 w-4" />
            {isSubmitting
              ? "Saving..."
              : mode === "add"
                ? "Create Package"
                : "Update Package"}
          </Button>
        </div>
      </form>
    </section>
  );
}