vtorio/app/components/layout-configurations/AddSectionDialog.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createLayoutSection } from "@/app/actions/layout-configurations";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToast } from "@/hooks/use-toast";

interface AddSectionDialogProps {
  configurationId: number;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function AddSectionDialog({
  configurationId,
  open,
  onOpenChange,
}: AddSectionDialogProps) {
  const router = useRouter();
  const { toast } = useToast();
  const [isLoading, setIsLoading] = useState(false);
  const [formData, setFormData] = useState({
    name: "",
    type: "table",
    sheetName: "",
    tableName: "",
    startingRow: "",
    endingRow: "",
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      const result = await createLayoutSection(configurationId, {
        name: formData.name,
        type: formData.type,
        sheetName: formData.sheetName,
        tableName: formData.tableName,
        startingRow: formData.startingRow ? parseInt(formData.startingRow) : undefined,
        endingRow: formData.endingRow ? parseInt(formData.endingRow) : undefined,
      });

      if (result.success) {
        toast({
          title: "Section added successfully",
          description: `Section "${formData.name}" has been added to the configuration.`,
        });
        
        // Reset form and close dialog
        setFormData({
          name: "",
          type: "table",
          sheetName: "",
          tableName: "",
          startingRow: "",
          endingRow: "",
        });
        onOpenChange(false);
        
        // Refresh the page to show the new section
        router.refresh();
      } else {
        toast({
          title: "Error adding section",
          description: result.error || "Failed to add section",
          variant: "destructive",
        });
      }
    } catch {
      toast({
        title: "Error",
        description: "An unexpected error occurred",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Add New Section</DialogTitle>
          <DialogDescription>
            Create a new section for this layout configuration
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Section Name *</Label>
              <Input
                id="name"
                name="name"
                value={formData.name}
                onChange={handleChange}
                placeholder="e.g., Customer Information"
                required
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="type">Section Type *</Label>
              <Input
                id="type"
                name="type"
                value={formData.type}
                onChange={handleChange}
                placeholder="e.g., table, header, footer"
                required
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="sheetName">Sheet Name *</Label>
              <Input
                id="sheetName"
                name="sheetName"
                value={formData.sheetName}
                onChange={handleChange}
                placeholder="e.g., Sheet1"
                required
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="tableName">Table Name *</Label>
              <Input
                id="tableName"
                name="tableName"
                value={formData.tableName}
                onChange={handleChange}
                placeholder="e.g., customers"
                required
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="startingRow">Starting Row</Label>
                <Input
                  id="startingRow"
                  name="startingRow"
                  type="number"
                  value={formData.startingRow}
                  onChange={handleChange}
                  placeholder="e.g., 2"
                  min="1"
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="endingRow">Ending Row</Label>
                <Input
                  id="endingRow"
                  name="endingRow"
                  type="number"
                  value={formData.endingRow}
                  onChange={handleChange}
                  placeholder="e.g., 100"
                  min="1"
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isLoading}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={isLoading}>
              {isLoading ? "Adding..." : "Add Section"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}