watch-finished-turbo/apps/web/src/app/components/DatasetCrud.tsx

"use client";
import { useEffect, useState } from "react";
import PathConfigEditor from "./PathConfigEditor";
import SlideInForm from "./SlideInForm";

interface DatasetConfig {
  [path: string]: any;
}

interface DatasetCrudProps {
  datasetName?: string;
  datasetConfig?: DatasetConfig;
  onSave: (name: string, config: DatasetConfig) => void;
  onClose: () => void;
  onEnabledChange?: (enabled: boolean) => void;
  isOpen: boolean;
}

export default function DatasetCrud({
  datasetName = "",
  datasetConfig = {},
  onSave,
  onClose,
  onEnabledChange,
  isOpen
}: DatasetCrudProps) {
  const [name, setName] = useState(datasetName);
  const [config, setConfig] = useState<DatasetConfig>(datasetConfig);
  const [newPath, setNewPath] = useState("");
  const [enabled, setEnabled] = useState(true);
  const [isJsonMode, setIsJsonMode] = useState(false);

  const isEditing = !!datasetName;

  useEffect(() => {
    setName(datasetName);
    setConfig(datasetConfig);
    // Set enabled state from existing config, defaulting to true
    setEnabled(
      datasetConfig.enabled !== undefined ? datasetConfig.enabled : true
    );
  }, [datasetName, datasetConfig]);

  const handleEnabledChange = (newEnabled: boolean) => {
    setEnabled(newEnabled);
    if (onEnabledChange) {
      onEnabledChange(newEnabled);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) return;

    // Note: enabled is handled separately via onEnabledChange
    // so we don't include it in the config here
    onSave(name, config);
  };

  const addPath = () => {
    if (!newPath.trim()) return;
    setConfig({
      ...config,
      [newPath]: {}
    });
    setNewPath("");
  };

  const removePath = (path: string) => {
    const newConfig = { ...config };
    delete newConfig[path];
    setConfig(newConfig);
  };

  const updatePathConfig = (path: string, pathConfig: any) => {
    try {
      const parsedConfig =
        typeof pathConfig === "string" ? JSON.parse(pathConfig) : pathConfig;
      setConfig({
        ...config,
        [path]: parsedConfig
      });
    } catch {
      // Invalid JSON, ignore
    }
  };

  const handleJsonChange = (jsonValue: string) => {
    try {
      const parsedConfig = JSON.parse(jsonValue);
      setConfig(parsedConfig);
    } catch {
      // Invalid JSON, ignore for now
    }
  };

  return (
    <SlideInForm
      isOpen={isOpen}
      onClose={onClose}
      title={isEditing ? `Edit Dataset: ${datasetName}` : "Add New Dataset"}
      actions={
        <div className="flex justify-end space-x-3">
          <button
            type="button"
            onClick={onClose}
            className="inline-flex items-center rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          >
            Cancel
          </button>
          <button
            type="submit"
            onClick={handleSubmit}
            className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          >
            {isEditing ? "Update Dataset" : "Add Dataset"}
          </button>
        </div>
      }
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* JSON Mode Toggle */}
        <div className="flex items-center justify-between">
          <span className="text-xs text-gray-500">JSON Mode</span>
          <button
            type="button"
            onClick={() => setIsJsonMode(!isJsonMode)}
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
              isJsonMode ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-700"
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                isJsonMode ? "translate-x-6" : "translate-x-1"
              }`}
            />
          </button>
        </div>

        {isJsonMode ? (
          <>
            {/* JSON Editor Mode */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                Configuration JSON
              </label>
              <textarea
                value={JSON.stringify(config, null, 2)}
                onChange={(e) => handleJsonChange(e.target.value)}
                rows={12}
                className="block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono"
                placeholder='{"path": {}, ...}'
              />
              <p className="text-xs text-gray-500 mt-2">
                Edit the dataset configuration as JSON. Each key is a path, with
                nested settings.
              </p>
            </div>
          </>
        ) : (
          <>
            {/* Form Mode */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
                Dataset Name
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g., pr0n, kids, movies"
                className="block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                required
              />
            </div>

            {/* Enabled Toggle */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
                Status
              </label>
              <div className="flex items-center">
                <button
                  type="button"
                  onClick={() => handleEnabledChange(!enabled)}
                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
                    enabled ? "bg-indigo-600" : "bg-gray-200 dark:bg-gray-700"
                  }`}
                >
                  <span
                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                      enabled ? "translate-x-6" : "translate-x-1"
                    }`}
                  />
                </button>
                <span className="ml-3 text-sm text-gray-700 dark:text-gray-200">
                  {enabled ? "Enabled" : "Disabled"}
                </span>
              </div>
              <p className="text-xs text-gray-500 mt-1">
                When disabled, this dataset will not be monitored for new files.
              </p>
            </div>

            {/* Paths Configuration */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">
                Watch Paths
              </label>
              <p className="text-xs text-gray-500 mb-4">
                Add paths to watch for this dataset. Each path can have its own
                configuration.
              </p>

              {/* Add new path */}
              <div className="flex gap-2 mb-4">
                <input
                  type="text"
                  value={newPath}
                  onChange={(e) => setNewPath(e.target.value)}
                  placeholder="/path/to/watch"
                  className="flex-1 rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
                />
                <button
                  type="button"
                  onClick={addPath}
                  className="inline-flex items-center rounded-md bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                >
                  Add Path
                </button>
              </div>

              {/* Existing paths */}
              {Object.entries(config).filter(([key]) => key !== "enabled")
                .length > 0 ? (
                <div className="space-y-3">
                  {Object.entries(config)
                    .filter(([key]) => key !== "enabled")
                    .map(([path, pathConfig]) => (
                      <div
                        key={path}
                        className="border rounded-lg p-3 bg-gray-50 dark:bg-gray-800"
                      >
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-mono text-gray-900 dark:text-gray-100">
                            {path}
                          </span>
                          <button
                            type="button"
                            onClick={() => removePath(path)}
                            className="inline-flex items-center rounded-md bg-red-600 px-2 py-1 text-xs font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                          >
                            Remove
                          </button>
                        </div>
                        <PathConfigEditor
                          value={pathConfig}
                          onChange={(newConfig) =>
                            updatePathConfig(path, newConfig)
                          }
                        />
                      </div>
                    ))}
                </div>
              ) : (
                <p className="text-sm text-gray-500 italic text-center py-4">
                  No paths configured. Add a path above.
                </p>
              )}
            </div>
          </>
        )}
      </form>
    </SlideInForm>
  );
}