watch-finished-turbo/apps/web/src/app/indexing/page.tsx

"use client";

import {
  ArrowPathIcon,
  ChartBarIcon,
  FolderIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { del, get, post } from "../../lib/api";
import LoadingCard from "../components/Loading";
import { useAppContext } from "../providers/AppContext";

interface IndexStats {
  totalDuplicates: number;
  duplicatesByDataset: Array<{
    dataset: string;
    hash: string;
    file_size: number;
    file_count: number;
    files: string[];
  }>;
}

interface IndexCount {
  count: number;
}

export default function IndexManagementPage() {
  const queryClient = useQueryClient();
  const { datasets, datasetsConfig } = useAppContext();
  const [selectedDataset, setSelectedDataset] = useState<string>("");
  const [destinationPath, setDestinationPath] = useState<string>("");
  const [batchSize, setBatchSize] = useState<number>(100);

  const datasetNames = datasets
    ? datasets.map((p: string) => p.split("/").pop()).filter(Boolean)
    : [];

  // Auto-populate destination path from dataset configuration when a dataset is selected
  // We mimic the backend collector: prefer top-level destination, otherwise any nested config with a destination key
  useEffect(() => {
    if (!selectedDataset || !datasetsConfig) return;

    const cfg = datasetsConfig[selectedDataset];
    if (!cfg) return;

    const tryFindDestination = (obj: any): string | undefined => {
      if (!obj || typeof obj !== "object") return undefined;
      if (typeof obj.destination === "string" && obj.destination.trim()) {
        return obj.destination as string;
      }
      for (const value of Object.values(obj)) {
        if (
          value &&
          typeof value === "object" &&
          typeof value.destination === "string"
        ) {
          if (value.destination.trim()) return value.destination as string;
        }
      }
      return undefined;
    };

    const destination = tryFindDestination(cfg);
    if (destination && destination !== destinationPath) {
      setDestinationPath(destination);
    }
  }, [selectedDataset, datasetsConfig, destinationPath]);

  // Get index count for selected dataset
  const {
    data: indexCount,
    isLoading: isLoadingCount,
    refetch: refetchCount,
  } = useQuery<IndexCount>({
    queryKey: ["index-count", selectedDataset],
    queryFn: async () =>
      selectedDataset
        ? get("/maintenance/index/count", { dataset: selectedDataset })
        : { count: 0 },
    enabled: !!selectedDataset,
  });

  // Get duplicate stats
  const {
    data: stats,
    isLoading: isLoadingStats,
    refetch: refetchStats,
  } = useQuery<IndexStats>({
    queryKey: ["index-stats", selectedDataset],
    queryFn: async () => {
      const params = selectedDataset ? { dataset: selectedDataset } : undefined;
      return get("/maintenance/index/stats", params);
    },
  });

  // Index destination mutation
  const indexMutation = useMutation({
    mutationFn: async ({
      dataset,
      destination,
      reindex,
    }: {
      dataset: string;
      destination: string;
      reindex: boolean;
    }) =>
      post("/maintenance/index/destination", {
        dataset,
        destination,
        reindex,
        batchSize,
      }),
    onSuccess: (data) => {
      toast.success(
        `✅ Indexed: ${data.indexed}, Skipped: ${data.skipped}, Errors: ${data.errors}`
      );
      refetchCount();
      refetchStats();
    },
    onError: (err: any) => {
      console.error(err);
      toast.error("Failed to index destination");
    },
  });

  // Clear index mutation
  const clearMutation = useMutation({
    mutationFn: async (dataset: string) => del(`/maintenance/index/${dataset}`),
    onSuccess: (data) => {
      toast.success(`🗑️ Cleared ${data.cleared} index entries`);
      refetchCount();
      refetchStats();
    },
    onError: (err: any) => {
      console.error(err);
      toast.error("Failed to clear index");
    },
  });

  const handleIndex = (reindex: boolean) => {
    if (!selectedDataset) {
      toast.error("Please select a dataset");
      return;
    }
    if (!destinationPath) {
      toast.error("Please enter a destination path");
      return;
    }

    indexMutation.mutate({
      dataset: selectedDataset,
      destination: destinationPath,
      reindex,
    });
  };

  const handleClear = () => {
    if (!selectedDataset) {
      toast.error("Please select a dataset");
      return;
    }

    if (confirm(`Clear all index entries for ${selectedDataset}?`)) {
      clearMutation.mutate(selectedDataset);
    }
  };

  const formatBytes = (bytes: number) => {
    if (!bytes) return "0 B";
    const sizes = ["B", "KB", "MB", "GB", "TB"];
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
          Index Management
        </h1>
        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
          Index destination files for fast duplicate detection
        </p>
      </div>

      {/* Index Controls */}
      <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
          Index Destination
        </h2>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Dataset
            </label>
            <select
              value={selectedDataset}
              onChange={(e) => setSelectedDataset(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
            >
              <option value="">Select a dataset...</option>
              {datasetNames.map((name) => (
                <option key={name} value={name}>
                  {name}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Destination Path
            </label>
            <input
              type="text"
              value={destinationPath}
              onChange={(e) => setDestinationPath(e.target.value)}
              placeholder="/path/to/destination"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Batch Size
            </label>
            <input
              type="number"
              value={batchSize}
              onChange={(e) => setBatchSize(parseInt(e.target.value))}
              min="10"
              max="1000"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100"
            />
            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
              Number of files to process at once
            </p>
          </div>

          <div className="flex gap-2">
            <button
              onClick={() => handleIndex(false)}
              disabled={indexMutation.isPending}
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              <FolderIcon className="h-5 w-5 mr-2" />
              Index
            </button>

            <button
              onClick={() => handleIndex(true)}
              disabled={indexMutation.isPending}
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 disabled:opacity-50"
            >
              <ArrowPathIcon className="h-5 w-5 mr-2" />
              Re-index
            </button>

            <button
              onClick={handleClear}
              disabled={clearMutation.isPending || !selectedDataset}
              className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              <TrashIcon className="h-5 w-5 mr-2" />
              Clear Index
            </button>
          </div>
        </div>
      </div>

      {/* Index Stats */}
      {selectedDataset && (
        <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
          <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <ChartBarIcon className="h-5 w-5 mr-2" />
            Index Statistics
          </h2>

          {isLoadingCount ? (
            <LoadingCard message="Loading stats..." />
          ) : (
            <div className="space-y-4">
              <div className="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Indexed Files
                </span>
                <span className="text-2xl font-bold text-blue-600 dark:text-blue-400">
                  {indexCount?.count || 0}
                </span>
              </div>
            </div>
          )}
        </div>
      )}

      {/* Duplicate Stats */}
      <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
          Duplicate Statistics
        </h2>

        {isLoadingStats ? (
          <LoadingCard message="Loading duplicate stats..." />
        ) : stats && stats.totalDuplicates > 0 ? (
          <div className="space-y-4">
            <div className="flex justify-between items-center p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
              <span className="text-sm font-medium text-yellow-800 dark:text-yellow-300">
                Total Duplicate Groups
              </span>
              <span className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
                {stats.totalDuplicates}
              </span>
            </div>

            <div className="space-y-3 max-h-96 overflow-y-auto">
              {stats.duplicatesByDataset.slice(0, 10).map((dup, idx) => (
                <div
                  key={idx}
                  className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
                >
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                      [{dup.dataset}] {dup.file_count} files
                    </span>
                    <span className="text-sm text-gray-500 dark:text-gray-400">
                      {formatBytes(dup.file_size)}
                    </span>
                  </div>
                  <div className="text-xs text-gray-500 dark:text-gray-400 font-mono mb-2">
                    Hash: {dup.hash.substring(0, 32)}...
                  </div>
                  <div className="space-y-1">
                    {dup.files.map((file, fileIdx) => (
                      <div
                        key={fileIdx}
                        className="text-xs text-gray-600 dark:text-gray-400 truncate"
                        title={file}
                      >
                        • {file}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {stats.duplicatesByDataset.length > 10 && (
              <p className="text-sm text-gray-500 dark:text-gray-400 text-center">
                ... and {stats.duplicatesByDataset.length - 10} more duplicate
                groups
              </p>
            )}
          </div>
        ) : (
          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
            <p>No duplicates found in indexed files</p>
          </div>
        )}
      </div>
    </div>
  );
}