aurak/web/components/IndexingModal.tsx

import React, { useState, useEffect } from 'react';
import { ModelConfig, RawFile, IndexingConfig } from '../types';
import { useLanguage } from '../contexts/LanguageContext';
import { useToast } from '../contexts/ToastContext';
import { Layers, FileText, Database, X, ArrowRight, Files, Info } from 'lucide-react';
import { formatBytes } from '../utils/fileUtils';
import { chunkConfigService } from '../services/chunkConfigService';

interface IndexingModalProps {
  isOpen: boolean;
  onClose: () => void;
  files: RawFile[];
  embeddingModels: ModelConfig[];
  defaultEmbeddingId: string;
  onConfirm: (config: IndexingConfig) => void;
  isReconfiguring?: boolean;
}

const IndexingModal: React.FC<IndexingModalProps> = ({
  isOpen,
  onClose,
  files,
  embeddingModels,
  defaultEmbeddingId,
  onConfirm,
  isReconfiguring = false
}) => {
  const { t } = useLanguage();
  const { showWarning } = useToast();

  // Configuration state
  const [chunkSize, setChunkSize] = useState(200);
  const [chunkOverlap, setChunkOverlap] = useState(40);
  const [selectedEmbedding, setSelectedEmbedding] = useState('');

  // Limit info state
  const [limits, setLimits] = useState<{
    maxChunkSize: number;
    maxOverlapSize: number;
    defaultChunkSize: number;
    defaultOverlapSize: number;
    modelInfo: {
      name: string;
      maxInputTokens: number;
      maxBatchSize: number;
      expectedDimensions: number;
    };
  } | null>(null);

  const [isLoadingLimits, setIsLoadingLimits] = useState(false);

  // Get auth token
  const getAuthToken = () => {
    return localStorage.getItem('authToken') || '';
  };

  // Load config limits when selected model changes
  useEffect(() => {
    if (!isOpen || !selectedEmbedding) {
      setLimits(null);
      return;
    }

    const loadLimits = async () => {
      setIsLoadingLimits(true);
      try {
        const token = getAuthToken();
        if (!token) return;

        const limitData = await chunkConfigService.getLimits(selectedEmbedding, token);
        setLimits(limitData);

        // Auto-adjust if current values exceed new limits
        if (chunkSize > limitData.maxChunkSize) {
          setChunkSize(limitData.maxChunkSize);
          showWarning(t('autoAdjustChunk', limitData.maxChunkSize));
        }
        if (chunkOverlap > limitData.maxOverlapSize) {
          setChunkOverlap(limitData.maxOverlapSize);
          showWarning(t('autoAdjustOverlap', limitData.maxOverlapSize));
        }

      } catch (error) {
        console.error('Failed to read configuration limits:', error);
        showWarning(t('loadLimitsFailed'));
      } finally {
        setIsLoadingLimits(false);
      }
    };

    loadLimits();
  }, [isOpen, selectedEmbedding]);

  // Initialize modal
  useEffect(() => {
    if (isOpen) {
      // Set default embedding model
      const validDefault = embeddingModels.find(m => m.id === defaultEmbeddingId);
      if (validDefault) {
        setSelectedEmbedding(defaultEmbeddingId);
      } else if (embeddingModels.length > 0) {
        setSelectedEmbedding(embeddingModels[0].id);
      } else {
        setSelectedEmbedding('');
      }

      // Reset to defaults
      setChunkSize(200);
      setChunkOverlap(40);
    }
  }, [isOpen, defaultEmbeddingId, embeddingModels]);

  // Handle chunk size change
  const handleChunkSizeChange = (value: number) => {
    if (limits && value > limits.maxChunkSize) {
      showWarning(t('maxValueMsg', limits.maxChunkSize));
      setChunkSize(limits.maxChunkSize);
      return;
    }
    setChunkSize(value);

    // Auto-adjust overlap if it exceeds 50% of new chunk size
    if (chunkOverlap > value * 0.5) {
      setChunkOverlap(Math.floor(value * 0.5));
    }
  };

  // Handle overlap size change
  const handleChunkOverlapChange = (value: number) => {
    if (limits && value > limits.maxOverlapSize) {
      showWarning(t('maxValueMsg', limits.maxOverlapSize));
      setChunkOverlap(limits.maxOverlapSize);
      return;
    }

    // Check if it exceeds 50% of chunk size
    const maxOverlapByRatio = Math.floor(chunkSize * 0.5);
    if (value > maxOverlapByRatio) {
      showWarning(t('overlapRatioLimit', maxOverlapByRatio));
      setChunkOverlap(maxOverlapByRatio);
      return;
    }

    setChunkOverlap(value);
  };

  // Render limits info
  const renderLimitsInfo = () => {
    if (!limits || isLoadingLimits) {
      return null;
    }

    return (
      <div className="bg-blue-50/50 backdrop-blur-sm border border-blue-100 rounded-xl p-4 text-xs">
        <div className="flex items-center gap-2 mb-2 font-bold text-blue-900">
          <Info className="w-4 h-4 text-blue-600" />
          {t('modelLimitsInfo')}
        </div>
        <div className="grid grid-cols-2 gap-y-2 gap-x-4 text-slate-600">
          <div>{t('model')}: <span className="font-semibold text-slate-900">{limits.modelInfo.name}</span></div>
          <div>{t('maxChunkSize')}: <span className="font-semibold text-slate-900">{limits.maxChunkSize} tokens</span></div>
          <div>{t('maxOverlapSize')}: <span className="font-semibold text-slate-900">{limits.maxOverlapSize} tokens</span></div>
          <div>{t('maxBatchSize')}: <span className="font-semibold text-slate-900">{limits.modelInfo.maxBatchSize}</span></div>
        </div>
        {limits.modelInfo.maxInputTokens > limits.maxChunkSize && (
          <div className="mt-2 text-blue-600/80 text-[10px] flex items-center gap-1">
            <Info size={10} />
            {t('envLimitWeaker')}: {limits.maxChunkSize} &lt; {limits.modelInfo.maxInputTokens}
          </div>
        )}
      </div>
    );
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/40 backdrop-blur-md p-4 animate-in fade-in duration-300">
      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] border border-white/20">
        {/* Header */}
        <div className="p-6 border-b border-slate-50 bg-white">
          <div className="flex justify-between items-start">
            <div>
              <h2 className="text-xl font-bold text-slate-900 flex items-center gap-2.5">
                <div className="p-2 bg-blue-50 rounded-xl">
                  <Database className="w-5 h-5 text-blue-600" />
                </div>
                {isReconfiguring ? t('reconfigureFile') : t('idxModalTitle')}
              </h2>
              <p className="text-[13px] text-slate-500 mt-1 ml-12">
                {isReconfiguring ? t('modifySettings') : t('idxDesc')}
              </p>
            </div>
            <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl transition-all active:scale-95">
              <X className="w-5 h-5 text-slate-400" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-5 space-y-6">

          {/* Pending Files */}
          <div>
            <h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
              <Files className="w-4 h-4 text-slate-500" />
              {t('idxFiles')}
            </h3>
            <div className="space-y-1 max-h-32 overflow-y-auto bg-slate-50/50 rounded-xl p-3 border border-slate-100">
              {files.map((file, index) => (
                <div key={index} className="text-xs text-slate-600 flex items-center justify-between py-1.5 px-2 hover:bg-white/80 rounded-lg transition-colors">
                  <span className="truncate flex-1">{file.name}</span>
                  <span className="text-slate-400 ml-2 font-medium">{formatBytes(file.size)}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Embedding Model Selection */}
          <div>
            <h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
              <Layers className="w-4 h-4 text-slate-500" />
              {t('idxEmbeddingModel')}
            </h3>
            <select
              className="w-full text-sm border border-slate-100 bg-slate-50/50 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-400 outline-none transition-all cursor-pointer"
              value={selectedEmbedding}
              onChange={(e) => setSelectedEmbedding(e.target.value)}
            >
              <option value="">{t('pleaseSelect')}</option>
              {embeddingModels.map(model => (
                <option key={model.id} value={model.id}>
                  {model.name}
                </option>
              ))}
            </select>
          </div>

          {/* Chunk Configuration */}
          <div>
            <h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
              <FileText className="w-4 h-4 text-slate-500" />
              {t('idxMethod')}
            </h3>

            <div className="space-y-3">
              {/* Chunk Size */}
              <div>
                <div className="flex justify-between mb-1 text-xs">
                  <span className="text-slate-600">{t('chunkSize')}</span>
                  <span className="font-mono font-semibold text-blue-600">{chunkSize}</span>
                </div>
                <input
                  type="range"
                  min="50"
                  max={limits?.maxChunkSize || 8191}
                  value={chunkSize}
                  onChange={(e) => handleChunkSizeChange(Number(e.target.value))}
                  className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                  disabled={!selectedEmbedding || isLoadingLimits}
                />
                <div className="flex justify-between text-[10px] text-slate-400 mt-1">
                  <span>{t('min')}: 50</span>
                  <span>{t('max')}: {limits?.maxChunkSize || '—'}</span>
                </div>
              </div>

              {/* Overlap Size */}
              <div>
                <div className="flex justify-between mb-1 text-xs">
                  <span className="text-slate-600">{t('chunkOverlap')}</span>
                  <span className="font-mono font-semibold text-blue-600">{chunkOverlap}</span>
                </div>
                <input
                  type="range"
                  min="0"
                  max={limits?.maxOverlapSize || 200}
                  value={chunkOverlap}
                  onChange={(e) => handleChunkOverlapChange(Number(e.target.value))}
                  className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
                  disabled={!selectedEmbedding || isLoadingLimits}
                />
                <div className="flex justify-between text-[10px] text-slate-400 mt-1">
                  <span>{t('min')}: 0</span>
                  <span>{t('max')}: {limits?.maxOverlapSize || '—'}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Model Limits Info */}
          {renderLimitsInfo()}

          {/* Optimization Tips */}
          {limits && (
            <div className="bg-amber-50/50 backdrop-blur-sm border border-amber-100 rounded-xl p-4 text-xs text-amber-900">
              <p className="font-bold mb-2 flex items-center gap-1.5">
                <span className="text-amber-500">💡</span>
                {t('optimizationTips')}
              </p>
              <ul className="list-disc list-inside space-y-1.5 text-[11px] text-amber-800/80">
                {chunkSize > 800 && <li>{t('tipChunkTooLarge')}</li>}
                {chunkOverlap < chunkSize * 0.1 && <li>{t('tipOverlapSmall').replace('$1', String(Math.floor(chunkSize * 0.1)))}</li>}
                {chunkSize === limits.maxChunkSize && <li>{t('tipMaxValues')}</li>}
              </ul>
            </div>
          )}

        </div>

        {/* Footer Buttons */}
        <div className="p-6 border-t border-slate-50 bg-white flex justify-end gap-3">
          <button
            onClick={onClose}
            className="px-6 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-50 rounded-xl transition-all active:scale-95"
          >
            {t('idxCancel')}
          </button>
          <button
            onClick={() => {
              if (!selectedEmbedding) {
                showWarning(t('selectEmbeddingFirst'));
                return;
              }
              onConfirm({
                chunkSize,
                chunkOverlap,
                embeddingModelId: selectedEmbedding
              });
            }}
            disabled={!selectedEmbedding || isLoadingLimits}
            className="px-8 py-2.5 text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-200 flex items-center gap-2 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <ArrowRight className="w-4 h-4" />
            {t('idxStart')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default IndexingModal;