// CreateSubfolderForm component - English version

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Loader2 } from "lucide-react";

interface CreateSubfolderFormProps {
  parentFolder: any;
  onSubmit: (name: string, category: string) => Promise<void>;
  onCancel: () => void;
}

export function CreateSubfolderForm({ 
  parentFolder, 
  onSubmit, 
  onCancel 
}: CreateSubfolderFormProps) {
  const [folderName, setFolderName] = useState("");
  const [category, setCategory] = useState(parentFolder?.category || "general");
  const [isCreating, setIsCreating] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!folderName.trim()) {
      setError("Please enter a folder name");
      return;
    }

    // Special character validation
    const invalidChars = /[<>:"|?*\/\\]/;
    if (invalidChars.test(folderName)) {
      setError("Folder name contains invalid characters");
      return;
    }

    setIsCreating(true);
    setError("");

    try {
      await onSubmit(folderName, category);
      setFolderName("");
      setCategory(parentFolder?.category || "general");
    } catch (error: any) {
      setError(error.message || "Failed to create folder");
    } finally {
      setIsCreating(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 py-4">
      <div className="space-y-2">
        <Label htmlFor="folder-name">Folder Name</Label>
        <Input
          id="folder-name"
          value={folderName}
          onChange={(e) => {
            setFolderName(e.target.value);
            setError("");
          }}
          placeholder="Enter folder name"
          disabled={isCreating}
          autoFocus
        />
        {error && (
          <p className="text-sm text-destructive">{error}</p>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="folder-category">Security Category</Label>
        <Select
          value={category}
          onValueChange={setCategory}
          disabled={isCreating}
        >
          <SelectTrigger id="folder-category">
            <SelectValue placeholder="Select category" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="general">General</SelectItem>
            <SelectItem value="confidential">Confidential</SelectItem>
            <SelectItem value="internal">Internal</SelectItem>
          </SelectContent>
        </Select>
        <p className="text-xs text-muted-foreground">
          Sub-folders inherit the security category from their parent folder by default
        </p>
      </div>

      <div className="flex justify-end gap-2">
        <Button
          type="button"
          variant="outline"
          onClick={onCancel}
          disabled={isCreating}
        >
          Cancel
        </Button>
        <Button
          type="submit"
          disabled={isCreating || !folderName.trim()}
        >
          {isCreating ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Creating...
            </>
          ) : (
            "Create Folder"
          )}
        </Button>
      </div>
    </form>
  );
}