/**
 * FinalizeModal - Modal for finalizing an inbox study
 *
 * Allows user to:
 * - Select/create topic folder
 * - Choose whether to run baseline FEA
 * - See progress during finalization
 */

import React, { useState, useEffect } from 'react';
import {
  X,
  Folder,
  CheckCircle,
  Loader2,
  AlertCircle,
} from 'lucide-react';
import { intakeApi } from '../../api/intake';
import { TopicInfo, InboxStudyDetail } from '../../types/intake';

interface FinalizeModalProps {
  studyName: string;
  topics: TopicInfo[];
  onClose: () => void;
  onFinalized: (finalPath: string) => void;
}

export const FinalizeModal: React.FC<FinalizeModalProps> = ({
  studyName,
  topics,
  onClose,
  onFinalized,
}) => {
  const [studyDetail, setStudyDetail] = useState<InboxStudyDetail | null>(null);
  const [selectedTopic, setSelectedTopic] = useState('');
  const [newTopic, setNewTopic] = useState('');
  const [runBaseline, setRunBaseline] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [isFinalizing, setIsFinalizing] = useState(false);
  const [progress, setProgress] = useState<string>('');
  const [error, setError] = useState<string | null>(null);

  // Load study detail
  useEffect(() => {
    const loadStudy = async () => {
      try {
        const detail = await intakeApi.getInboxStudy(studyName);
        setStudyDetail(detail);
        // Pre-select topic if set in spec
        if (detail.spec.meta.topic) {
          setSelectedTopic(detail.spec.meta.topic);
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load study');
      } finally {
        setIsLoading(false);
      }
    };
    loadStudy();
  }, [studyName]);

  const handleFinalize = async () => {
    const topic = newTopic.trim() || selectedTopic;
    if (!topic) {
      setError('Please select or create a topic folder');
      return;
    }

    setIsFinalizing(true);
    setError(null);
    setProgress('Starting finalization...');

    try {
      setProgress('Validating study configuration...');
      await new Promise((r) => setTimeout(r, 500)); // Visual feedback

      if (runBaseline) {
        setProgress('Running baseline FEA solve...');
      }

      const result = await intakeApi.finalize(studyName, {
        topic,
        run_baseline: runBaseline,
      });

      setProgress('Finalization complete!');
      await new Promise((r) => setTimeout(r, 500));

      onFinalized(result.final_path);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Finalization failed');
      setIsFinalizing(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-dark-900/80 backdrop-blur-sm">
      <div className="w-full max-w-lg glass-strong rounded-xl border border-primary-400/20 overflow-hidden">
        {/* Header */}
        <div className="px-6 py-4 border-b border-primary-400/10 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary-400/10 flex items-center justify-center">
              <Folder className="w-5 h-5 text-primary-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">Finalize Study</h3>
              <p className="text-sm text-dark-400">{studyName}</p>
            </div>
          </div>
          {!isFinalizing && (
            <button
              onClick={onClose}
              className="p-2 hover:bg-white/5 rounded-lg transition-colors text-dark-400 hover:text-white"
            >
              <X className="w-5 h-5" />
            </button>
          )}
        </div>

        {/* Content */}
        <div className="p-6 space-y-6">
          {isLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="w-6 h-6 animate-spin text-primary-400" />
            </div>
          ) : isFinalizing ? (
            /* Progress View */
            <div className="text-center py-8 space-y-4">
              <Loader2 className="w-12 h-12 animate-spin text-primary-400 mx-auto" />
              <p className="text-white font-medium">{progress}</p>
              <p className="text-sm text-dark-400">
                Please wait while your study is being finalized...
              </p>
            </div>
          ) : (
            <>
              {/* Error Display */}
              {error && (
                <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm flex items-center gap-2">
                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
                  {error}
                </div>
              )}

              {/* Study Summary */}
              {studyDetail && (
                <div className="p-4 rounded-lg bg-dark-800 space-y-2">
                  <h4 className="text-sm font-medium text-dark-300">Study Summary</h4>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-dark-500">Status:</span>
                      <span className="ml-2 text-white capitalize">
                        {studyDetail.spec.meta.status}
                      </span>
                    </div>
                    <div>
                      <span className="text-dark-500">Model Files:</span>
                      <span className="ml-2 text-white">
                        {studyDetail.files.sim.length + studyDetail.files.prt.length + studyDetail.files.fem.length}
                      </span>
                    </div>
                    <div>
                      <span className="text-dark-500">Design Variables:</span>
                      <span className="ml-2 text-white">
                        {studyDetail.spec.design_variables?.length || 0}
                      </span>
                    </div>
                    <div>
                      <span className="text-dark-500">Objectives:</span>
                      <span className="ml-2 text-white">
                        {studyDetail.spec.objectives?.length || 0}
                      </span>
                    </div>
                  </div>
                </div>
              )}

              {/* Topic Selection */}
              <div>
                <label className="block text-sm font-medium text-dark-300 mb-2">
                  Topic Folder <span className="text-red-400">*</span>
                </label>
                <div className="flex gap-2">
                  <select
                    value={selectedTopic}
                    onChange={(e) => {
                      setSelectedTopic(e.target.value);
                      setNewTopic('');
                    }}
                    className="flex-1 px-4 py-2.5 rounded-lg bg-dark-800 border border-dark-600 
                               text-white focus:border-primary-400 focus:outline-none 
                               focus:ring-1 focus:ring-primary-400/50"
                  >
                    <option value="">Select existing topic...</option>
                    {topics.map((topic) => (
                      <option key={topic.name} value={topic.name}>
                        {topic.name} ({topic.study_count} studies)
                      </option>
                    ))}
                  </select>
                  <span className="text-dark-500 self-center">or</span>
                  <input
                    type="text"
                    value={newTopic}
                    onChange={(e) => {
                      setNewTopic(e.target.value.replace(/[^A-Za-z0-9_]/g, '_'));
                      setSelectedTopic('');
                    }}
                    placeholder="New_Topic"
                    className="flex-1 px-4 py-2.5 rounded-lg bg-dark-800 border border-dark-600 
                               text-white placeholder-dark-500 focus:border-primary-400 
                               focus:outline-none focus:ring-1 focus:ring-primary-400/50"
                  />
                </div>
                <p className="mt-1 text-xs text-dark-500">
                  Study will be created at: studies/{newTopic || selectedTopic || '<topic>'}/{studyName}/
                </p>
              </div>

              {/* Baseline Option */}
              <div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={runBaseline}
                    onChange={(e) => setRunBaseline(e.target.checked)}
                    className="w-4 h-4 rounded border-dark-600 bg-dark-800 text-primary-400 
                               focus:ring-primary-400/50"
                  />
                  <div>
                    <span className="text-white font-medium">Run baseline FEA solve</span>
                    <p className="text-xs text-dark-500">
                      Validates the model and captures baseline performance metrics
                    </p>
                  </div>
                </label>
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        {!isLoading && !isFinalizing && (
          <div className="px-6 py-4 border-t border-primary-400/10 flex justify-end gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 rounded-lg border border-dark-600 text-dark-300 
                         hover:border-dark-500 hover:text-white transition-colors"
            >
              Cancel
            </button>
            <button
              onClick={handleFinalize}
              disabled={!selectedTopic && !newTopic.trim()}
              className="px-6 py-2 rounded-lg font-medium transition-all disabled:opacity-50
                         flex items-center gap-2"
              style={{
                background: 'linear-gradient(135deg, #00d4e6 0%, #0891b2 100%)',
                color: '#000',
              }}
            >
              <CheckCircle className="w-4 h-4" />
              Finalize Study
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default FinalizeModal;