KnowledgeBase/web/components/IndexingModalWithMode.tsx

/**
 * Processing mode selection (Fast/Precise) support
 */

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { ModelConfig, RawFile, IndexingConfig } from '../types';
import { useLanguage } from '../contexts/LanguageContext';
import { useToast } from '../contexts/ToastContext';
import { useConfirm } from '../contexts/ConfirmContext';
import { Layers, FileText, Database, X, ArrowRight, Files, Info, Zap, Target, AlertTriangle, Clock, DollarSign } from 'lucide-react';
import { formatBytes } from '../utils/fileUtils';
import { chunkConfigService } from '../services/chunkConfigService';
import { uploadService } from '../services/uploadService';

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

const IndexingModalWithMode: React.FC<IndexingModalWithModeProps> = ({
  isOpen,
  onClose,
  files = [],
  embeddingModels,
  defaultEmbeddingId,
  onConfirm,
  authToken,
  isReconfiguring = false
}) => {
  const { t } = useLanguage();
  const { showWarning, showInfo } = useToast();
  const { confirm } = useConfirm();

  // Configuration state
  const [chunkSize, setChunkSize] = useState(200);
  const [chunkOverlap, setChunkOverlap] = useState(40);
  const [selectedEmbedding, setSelectedEmbedding] = useState('');
  const [mode, setMode] = useState<'fast' | 'precise'>('fast');
  const [userSelectedMode, setUserSelectedMode] = useState(false); // Track if user manually selected mode

  // Mode recommendation info
  const [modeRecommendation, setModeRecommendation] = useState<any>(null);
  const [isLoadingRecommendation, setIsLoadingRecommendation] = useState(false);

  // Limit info state
  const [limits, setLimits] = useState<{
    maxChunkSize: number;
    maxOverlapSize: number;
    minOverlapSize: 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 authToken || localStorage.getItem('kb_api_key') || '';
  };

  // Load mode recommendation when files change
  useEffect(() => {
    if (!isOpen || !files || files.length === 0) return;

    const loadRecommendation = async () => {
      setIsLoadingRecommendation(true);
      try {
        // Use first file for recommendation (assume similar types)
        const file = files[0];
        const rec = await uploadService.recommendMode(file.file);
        setModeRecommendation(rec);

        // Auto-select recommended mode if user hasn't manually selected one
        if (!isReconfiguring && !userSelectedMode) {
          setMode(rec.recommendedMode);
          showInfo(t('recommendationMsg', rec.recommendedMode === 'precise' ? t('preciseMode') : t('fastMode'), t(rec.reason, ...(rec.reasonArgs || []))));
        }
      } catch (error) {
        console.error('Failed to get mode recommendation:', error);
      } finally {
        setIsLoadingRecommendation(false);
      }
    };

    loadRecommendation();
  }, [isOpen, files, isReconfiguring]);

  // 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));
        }
        if (chunkOverlap < limitData.minOverlapSize) {
          setChunkOverlap(limitData.minOverlapSize);
          // Only show warning if it was manually set below the new minimum
          if (chunkOverlap < limitData.minOverlapSize) {
            showWarning(t('autoAdjustOverlapMin', limitData.minOverlapSize));
          }
        }

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

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

  // Track isOpen state change, reset only on open
  const [prevOpen, setPrevOpen] = useState(false);

  // Initialize modal
  useEffect(() => {
    if (isOpen && !prevOpen) {
      // Execute initialization only when going from closed to open
      console.log('DEBUG: IndexingModalWithMode opening, files:', files);

      // Set default embedding model
      const enabledModels = embeddingModels.filter(m => m.isEnabled !== false);
      const validDefault = enabledModels.find(m => m.id === defaultEmbeddingId);

      if (validDefault) {
        setSelectedEmbedding(defaultEmbeddingId);
      } else if (enabledModels.length > 0) {
        setSelectedEmbedding(enabledModels[0].id);
      } else {
        setSelectedEmbedding('');
      }

      // Reset to defaults
      setChunkSize(200);
      setChunkOverlap(40);
      if (!isReconfiguring) {
        setMode('fast');
        setUserSelectedMode(false); // Reset user selection status
      }
      setModeRecommendation(null);
    }

    setPrevOpen(isOpen);
  }, [isOpen, prevOpen, defaultEmbeddingId, embeddingModels, isReconfiguring]);

  // 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;
    }

    if (limits && value < limits.minOverlapSize) {
      // Don't show warning here, just set to min if they slide too low
      setChunkOverlap(limits.minOverlapSize);
      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 mt-2">
        <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>
    );
  };

  // Render mode recommendation info
  const renderModeRecommendation = () => {
    if (!modeRecommendation || isLoadingRecommendation) {
      return null;
    }

    return (
      <div className="space-y-2 p-4 bg-purple-50/50 backdrop-blur-sm border border-purple-100 rounded-xl text-xs">
        <div className="font-bold text-purple-900 flex items-center gap-2">
          <Target className="w-4 h-4 text-purple-600" />
          {t('processingMode')}
        </div>
        <div className="text-slate-600">
          <strong className="text-purple-900/70">{t('recommendationReason')}:</strong> {t(modeRecommendation.reason, ...(modeRecommendation.reasonArgs || []))}
        </div>
        {modeRecommendation.warnings && modeRecommendation.warnings.length > 0 && (
          <div className="mt-2 space-y-1.5 border-t border-purple-100 pt-2">
            {modeRecommendation.warnings.map((warning: string, idx: number) => (
              <div key={idx} className="text-purple-800/80 flex items-start gap-1.5 leading-relaxed">
                <AlertTriangle className="w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-purple-500" />
                <span>{t(warning as any)}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  // Render current mode description
  const renderModeDescription = () => {
    if (mode === 'fast') {
      return (
        <div className="text-xs text-slate-600 bg-slate-50/50 p-3 rounded-xl border border-slate-100">
          <div className="font-bold text-slate-900 mb-2 flex items-center gap-2">
            <Zap className="w-4 h-4 text-yellow-500" />
            {t('fastModeFeatures')}
          </div>
          <ul className="grid grid-cols-1 gap-1.5 text-[11px] text-slate-500">
            {['fastFeature1', 'fastFeature2', 'fastFeature3', 'fastFeature4', 'fastFeature5'].map((feature) => (
              <li key={feature} className="flex items-center gap-2 before:content-[''] before:w-1 before:h-1 before:bg-slate-300 before:rounded-full">
                {t(feature as any)}
              </li>
            ))}
          </ul>
        </div>
      );
    }

    return (
      <div className="text-xs text-slate-600 bg-slate-50/50 p-3 rounded-xl border border-slate-100">
        <div className="font-bold text-slate-900 mb-2 flex items-center gap-2">
          <Target className="w-4 h-4 text-blue-600" />
          {t('preciseModeFeatures')}
        </div>
        <ul className="grid grid-cols-1 gap-1.5 text-[11px] text-slate-500">
          {['preciseFeature1', 'preciseFeature2', 'preciseFeature3', 'preciseFeature4', 'preciseFeature5', 'preciseFeature6'].map((feature) => (
            <li key={feature} className="flex items-center gap-2 before:content-[''] before:w-1 before:h-1 before:bg-slate-300 before:rounded-full">
              {t(feature as any)}
            </li>
          ))}
        </ul>
      </div>
    );
  };

  if (!isOpen) return null;

  return createPortal(
    <>
      <div
        className="fixed inset-0 z-[100] bg-black/40 backdrop-blur-md transition-opacity"
        onClick={onClose}
      />
      <div className="fixed right-0 top-0 h-full w-full max-w-lg bg-white shadow-2xl z-[101] transform transition-transform duration-500 ease-out animate-in slide-in-from-right flex flex-col border-l border-slate-50">

        {/* Header */}
        <div className="p-6 border-b border-slate-50 bg-white shrink-0">
          <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('reconfigureTitle') : t('indexingConfigTitle')}
              </h2>
              <p className="text-[13px] text-slate-500 mt-1 ml-12">
                {isReconfiguring ? t('reconfigureDesc') : t('indexingConfigDesc')}
              </p>
            </div>
            <button
              onClick={(e) => {
                e.stopPropagation();
                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 - only show when there are files */}
          {files && files.length > 0 && (
            <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('pendingFiles')}
              </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>
          )}

          {/* Processing mode selection */}
          {!isReconfiguring && (
            <div>
              <h3 className="text-sm font-semibold text-slate-700 mb-2 flex items-center gap-2">
                <Target className="w-4 h-4 text-slate-500" />
                {t('processingMode')}
                {isLoadingRecommendation && <span className="text-xs text-blue-600 ml-2">{t('analyzingFile')}</span>}
              </h3>

              {/* Mode recommendation info */}
              {renderModeRecommendation()}

              {/* Mode selection */}
              <div className="grid grid-cols-2 gap-3 mt-3">
                {/* Fast Mode */}
                <button
                  onClick={() => {
                    setMode('fast');
                    setUserSelectedMode(true); // ユーザーによる手動選択をマーク
                  }}
                  className={`relative p-3 rounded-lg border-2 text-left transition-all ${mode === 'fast'
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-slate-200 hover:border-slate-300'
                    }`}
                >
                  <div className="flex items-center gap-2 mb-2">
                    <Zap className="w-4 h-4 text-yellow-600" />
                    <span className="font-semibold text-sm">{t('fastMode')}</span>
                  </div>
                  <div className="text-xs text-slate-600 leading-relaxed">
                    {t('fastModeDesc')}
                  </div>
                  {mode === 'fast' && (
                    <div className="absolute top-2 right-2 text-blue-600">
                      <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                    </div>
                  )}
                </button>

                {/* Precise Mode */}
                <button
                  onClick={() => {
                    setMode('precise');
                    setUserSelectedMode(true); // ユーザーによる手動選択をマーク
                  }}
                  className={`relative p-3 rounded-lg border-2 text-left transition-all ${mode === 'precise'
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-slate-200 hover:border-slate-300'
                    }`}
                >
                  <div className="flex items-center gap-2 mb-2">
                    <Target className="w-4 h-4 text-purple-600" />
                    <span className="font-semibold text-sm">{t('preciseMode')}</span>
                  </div>
                  <div className="text-xs text-slate-600 leading-relaxed">
                    {t('preciseModeDesc')}
                  </div>
                  {mode === 'precise' && (
                    <div className="absolute top-2 right-2 text-purple-600">
                      <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
                    </div>
                  )}
                </button>
              </div>

              {/* Mode description */}
              <div className="mt-3">
                {renderModeDescription()}
              </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('embeddingModel')}
            </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.filter(m => m.isEnabled !== false).map(model => (
                <option key={model.id} value={model.id}>
                  {model.name}
                </option>
              ))}
            </select>
          </div>

          {/* Chunk config */}
          <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('chunkConfig')}
            </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={limits?.minOverlapSize || 25}
                  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')}: {limits?.minOverlapSize || 25}</span>
                  <span>{t('max')}: {limits?.maxOverlapSize || '-'}</span>
                </div>
              </div>
            </div>
          </div>

          {isReconfiguring && 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', `${Math.floor(chunkSize * 0.1)}`)}</li>}
                {chunkSize === limits.maxChunkSize && <li>{t('tipMaxValues')}</li>}
                {mode === 'precise' && <li>{t('tipPreciseCost')}</li>}
              </ul>
            </div>
          )}

        </div>

        {/* Footer buttons */}
        <div className="p-6 border-t border-slate-50 bg-white flex justify-end gap-3 shrink-0">
          <button
            onClick={(e) => {
              e.stopPropagation();
              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('cancel')}
          </button>
          <button
            onClick={async () => {
              if (!selectedEmbedding) {
                showWarning(t('selectEmbeddingFirst'));
                return;
              }
              if (!isReconfiguring && mode === 'precise') {
                // Precise mode confirmation
                if (!(await confirm(t('confirmPreciseCost')))) {
                  return;
                }
              }
              onConfirm({
                chunkSize,
                chunkOverlap,
                embeddingModelId: selectedEmbedding,
                mode,
              });
            }}
            disabled={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('startProcessing')}
          </button>
        </div>
      </div>
    </>,
    document.body
  );
};

export default IndexingModalWithMode;