import React, { useState, useEffect, useMemo } from 'react';
import { useRevisionLogic } from '../../hooks/useRevisionLogic';
import { useRevisionComparison } from '../../hooks/useRevisionComparison';
import { useRevisionStatus } from '../../hooks/useRevisionStatus';
import { usePipeRevision } from '../../hooks/usePipeRevision';
import { LoadingSpinner, ErrorMessage, ConfirmDialog } from '../../components/common';
import RevisionStatusIndicator from '../../components/revision/RevisionStatusIndicator';
import './CategoryRevisionPage.css';
import './PipeCuttingPlanPage.css';

const PipeCuttingPlanPage = ({ 
    jobNo, 
    fileId, 
    previousFileId, 
    onNavigate, 
    user 
}) => {
    const [selectedMaterials, setSelectedMaterials] = useState(new Set());
    const [showConfirmDialog, setShowConfirmDialog] = useState(false);
    const [actionType, setActionType] = useState('');
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedArea, setSelectedArea] = useState('');
    const [searchDrawing, setSearchDrawing] = useState('');
    const [cuttingPlanStarted, setCuttingPlanStarted] = useState(false);
    const [areaAssignments, setAreaAssignments] = useState({});
    const [endPreparations, setEndPreparations] = useState({});

    // 리비전 로직 훅
    const {
        materials,
        loading: materialsLoading,
        error: materialsError,
        processingInfo,
        handleMaterialSelection,
        handleBulkAction,
        refreshMaterials
    } = useRevisionLogic(fileId, 'PIPE');

    // 리비전 비교 훅
    const {
        comparisonResult,
        loading: comparisonLoading,
        error: comparisonError,
        performComparison,
        getFilteredComparison
    } = useRevisionComparison(fileId, previousFileId);

    // PIPE 전용 리비전 훅
    const {
        revisionStatus: pipeRevisionStatus,
        comparisonResult: pipeComparisonResult,
        loading: pipeRevisionLoading,
        error: pipeRevisionError,
        checkRevisionStatus,
        handlePreCuttingPlanRevision,
        handlePostCuttingPlanRevision,
        processRevisionAutomatically,
        finalizeCuttingPlan,
        getSnapshotStatus,
        exportFinalizedExcel,
        checkFinalizationStatus,
        isPreCuttingPlan,
        isPostCuttingPlan,
        requiresAction
    } = usePipeRevision(jobNo, fileId);

    // 리비전 상태 훅
    const {
        revisionStatus,
        loading: statusLoading,
        error: statusError,
        uploadNewRevision,
        navigateToRevision
    } = useRevisionStatus(jobNo, fileId);

    // 구역 옵션
    const areaOptions = ['#01', '#02', '#03', '#04', '#05', '#06', '#07', '#08', '#09', '#10'];

    // 컴포넌트 마운트 시 데이터 로드 및 리비전 처리
    useEffect(() => {
        refreshMaterials();
        
        // PIPE 리비전 자동 처리
        if (jobNo && fileId && requiresAction) {
            handlePipeRevisionAutomatically();
        }
    }, [refreshMaterials, jobNo, fileId, requiresAction]);

    // PIPE 리비전 자동 처리 함수
    const handlePipeRevisionAutomatically = async () => {
        try {
            const result = await processRevisionAutomatically();
            
            if (result.success) {
                if (result.type === 'pre_cutting_plan') {
                    // Cutting Plan 작성 전 리비전 - 기존 데이터 삭제됨
                    alert(`${result.message}\n새로운 Cutting Plan을 작성해주세요.`);
                    setCuttingPlanStarted(false);
                    setAreaAssignments({});
                } else if (result.type === 'post_cutting_plan') {
                    // Cutting Plan 작성 후 리비전 - 비교 결과 표시
                    alert(`${result.message}\n변경사항을 검토해주세요.`);
                    setCuttingPlanStarted(true);
                }
            } else {
                console.error('PIPE 리비전 자동 처리 실패:', result.message);
            }
        } catch (error) {
            console.error('PIPE 리비전 자동 처리 중 오류:', error);
        }
    };
    
    // 끝단 처리 옵션
    const endPrepOptions = [
        { value: 'plain', label: '무개선' },
        { value: 'single_bevel', label: '한개선' },
        { value: 'double_bevel', label: '양개선' }
    ];

    // 필터링된 자재 목록 (도면 검색 적용)
    const filteredMaterials = useMemo(() => {
        if (!materials) return [];

        return materials.filter(material => {
            const matchesDrawing = !searchDrawing || 
                material.drawing_name?.toLowerCase().includes(searchDrawing.toLowerCase());
            
            return matchesDrawing;
        });
    }, [materials, searchDrawing]);

    // 구역별로 그룹화된 자재
    const groupedMaterials = useMemo(() => {
        const grouped = {
            assigned: {},
            unassigned: []
        };

        filteredMaterials.forEach(material => {
            const assignedArea = areaAssignments[material.id];
            if (assignedArea) {
                if (!grouped.assigned[assignedArea]) {
                    grouped.assigned[assignedArea] = [];
                }
                grouped.assigned[assignedArea].push(material);
            } else {
                grouped.unassigned.push(material);
            }
        });

        return grouped;
    }, [filteredMaterials, areaAssignments]);

    // 초기 비교 수행
    useEffect(() => {
        if (fileId && previousFileId && !comparisonResult) {
            performComparison('PIPE');
        }
    }, [fileId, previousFileId, comparisonResult, performComparison]);

    // Cutting Plan 시작
    const handleStartCuttingPlan = () => {
        if (!selectedArea) {
            alert('구역을 선택해주세요.');
            return;
        }

        // 선택된 구역과 검색된 도면에 맞는 자재들을 자동 할당
        const newAssignments = { ...areaAssignments };
        filteredMaterials.forEach(material => {
            if (!newAssignments[material.id]) {
                newAssignments[material.id] = selectedArea;
            }
        });

        setAreaAssignments(newAssignments);
        setCuttingPlanStarted(true);
    };

    // 구역 할당 변경
    const handleAreaAssignment = (materialId, area) => {
        setAreaAssignments(prev => ({
            ...prev,
            [materialId]: area
        }));
    };

    // 끝단 처리 변경
    const handleEndPrepChange = (materialId, endPrep) => {
        setEndPreparations(prev => ({
            ...prev,
            [materialId]: endPrep
        }));
    };

    // 자재 삭제
    const handleRemoveMaterial = (materialId) => {
        setSelectedMaterials(prev => {
            const newSet = new Set(prev);
            newSet.add(materialId);
            return newSet;
        });
        setActionType('delete_pipe_segment');
        setShowConfirmDialog(true);
    };

    // 액션 실행
    const confirmAction = async () => {
        try {
            if (actionType === 'delete_pipe_segment') {
                // PIPE 세그먼트 삭제 로직
                console.log('Deleting pipe segments:', Array.from(selectedMaterials));
            } else if (actionType === 'force_revision_upload') {
                // 강제 리비전 업로드 로직
                uploadNewRevision();
            }
            
            setSelectedMaterials(new Set());
            setShowConfirmDialog(false);
            await refreshMaterials();
        } catch (error) {
            console.error('Action failed:', error);
        }
    };

    // 파이프 정보 포맷팅
    const formatPipeInfo = (material) => {
        const parts = [];
        if (material.material_grade) parts.push(material.material_grade);
        if (material.schedule) parts.push(material.schedule);
        if (material.nominal_size) parts.push(material.nominal_size);
        
        return parts.join(' ') || '-';
    };

    // 길이 포맷팅
    const formatLength = (length) => {
        if (!length) return '-';
        return `${parseFloat(length).toFixed(1)}mm`;
    };

    // 임시 Excel 내보내기 (현재 작업 중인 데이터)
    const handleExportTempExcel = async () => {
        try {
            alert('임시 Excel 내보내기 기능은 구현 예정입니다.\n현재 작업 중인 데이터를 기준으로 생성됩니다.');
        } catch (error) {
            console.error('임시 Excel 내보내기 실패:', error);
            alert('Excel 내보내기에 실패했습니다.');
        }
    };

    // Cutting Plan 확정
    const handleFinalizeCuttingPlan = async () => {
        try {
            const confirmed = window.confirm(
                '⚠️ Cutting Plan을 확정하시겠습니까?\n\n' +
                '확정 후에는:\n' +
                '• 데이터가 고정되어 리비전 영향을 받지 않습니다\n' +
                '• 이슈 관리를 시작할 수 있습니다\n' +
                '• Excel 내보내기가 고정된 데이터로 제공됩니다'
            );

            if (!confirmed) return;

            const result = await finalizeCuttingPlan();
            if (result && result.success) {
                alert(`✅ ${result.message}\n\n스냅샷 ID: ${result.snapshot_id}\n총 단관: ${result.total_segments}개`);
                // 페이지 새로고침 또는 상태 업데이트
                window.location.reload();
            } else {
                alert(`❌ Cutting Plan 확정 실패\n${result?.message || '알 수 없는 오류'}`);
            }
        } catch (error) {
            console.error('Cutting Plan 확정 실패:', error);
            alert('Cutting Plan 확정에 실패했습니다.');
        }
    };

    // 확정된 Excel 내보내기 (고정된 데이터)
    const handleExportFinalizedExcel = async () => {
        try {
            const result = await exportFinalizedExcel();
            if (result && result.success) {
                alert('✅ 확정된 Excel 파일이 다운로드되었습니다.\n이 파일은 리비전과 무관하게 고정된 데이터입니다.');
            } else {
                alert(`❌ Excel 내보내기 실패\n${result?.message || '알 수 없는 오류'}`);
            }
        } catch (error) {
            console.error('확정된 Excel 내보내기 실패:', error);
            alert('Excel 내보내기에 실패했습니다.');
        }
    };

    // 이슈 관리 페이지로 이동
    const handleGoToIssueManagement = async () => {
        try {
            const snapshotStatus = await getSnapshotStatus();
            if (snapshotStatus && snapshotStatus.has_snapshot && snapshotStatus.is_locked) {
                // 이슈 관리 페이지로 이동
                onNavigate('pipe-issue-management');
            } else {
                alert('❌ 이슈 관리를 시작하려면 먼저 Cutting Plan을 확정해주세요.');
            }
        } catch (error) {
            console.error('이슈 관리 페이지 이동 실패:', error);
            alert('이슈 관리 페이지 접근에 실패했습니다.');
        }
    };

    if (materialsLoading || comparisonLoading || statusLoading || pipeRevisionLoading) {
        return <LoadingSpinner message="PIPE 데이터 로딩 중..." />;
    }

    const error = materialsError || comparisonError || statusError || pipeRevisionError;
    if (error) {
        return <ErrorMessage message={error} onClose={() => window.location.reload()} />;
    }

    return (
        <div className="pipe-cutting-plan-page">
            {/* PIPE 리비전 상태 표시 */}
            {pipeRevisionStatus && requiresAction && (
                <div className="revision-status-section">
                    <div className={`revision-alert ${isPreCuttingPlan ? 'pre-cutting' : 'post-cutting'}`}>
                        <div className="alert-icon">
                            {isPreCuttingPlan ? '🔄' : '⚠️'}
                        </div>
                        <div className="alert-content">
                            <h4>
                                {isPreCuttingPlan ? 'Cutting Plan 작성 전 리비전' : 'Cutting Plan 작성 후 리비전'}
                            </h4>
                            <p>{pipeRevisionStatus.message}</p>
                            {isPostCuttingPlan && pipeComparisonResult && (
                                <div className="revision-summary">
                                    <span>변경된 도면: {pipeComparisonResult.summary?.changed_drawings_count || 0}개</span>
                                    <span>추가된 단관: {pipeComparisonResult.summary?.added_segments || 0}개</span>
                                    <span>삭제된 단관: {pipeComparisonResult.summary?.removed_segments || 0}개</span>
                                    <span>수정된 단관: {pipeComparisonResult.summary?.modified_segments || 0}개</span>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* 헤더 */}
            <div className="materials-header">
                <div className="header-left">
                    <button 
                        className="back-button"
                        onClick={() => onNavigate('enhanced-revision')}
                    >
                        ← 리비전 관리로
                    </button>
                    <div className="header-center">
                        <h1>🔧 PIPE Cutting Plan 관리</h1>
                        <span className="header-subtitle">
                            도면-라인번호-길이 기반 파이프 절단 계획 관리
                        </span>
                    </div>
                </div>
                <div className="header-right">
                    <RevisionStatusIndicator 
                        revisionStatus={revisionStatus}
                        onUploadRevision={uploadNewRevision}
                        onNavigateToRevision={navigateToRevision}
                    />
                </div>
            </div>

            {/* 리비전 경고 (Cutting Plan 시작 전) */}
            {!cuttingPlanStarted && (
                <div className="revision-warning">
                    <div className="warning-content">
                        <h3>⚠️ PIPE 리비전 처리 안내</h3>
                        <p>
                            <strong>Cutting Plan 작성 전</strong>에 리비전이 발생하면 
                            <span className="highlight">기존 단관정보가 전부 삭제</span>되고 
                            <span className="highlight">새 BOM 파일 업로드</span>가 필요합니다.
                        </p>
                        {revisionStatus?.has_revision && (
                            <button 
                                className="btn-force-upload"
                                onClick={() => {
                                    setActionType('force_revision_upload');
                                    setShowConfirmDialog(true);
                                }}
                            >
                                🔄 새 BOM 파일 업로드
                            </button>
                        )}
                    </div>
                </div>
            )}

            {/* 분류 섹션 */}
            <div className="classification-section">
                <div className="section-header">
                    <h3>📂 구역 및 도면 분류</h3>
                </div>
                
                <div className="classification-controls">
                    <div className="control-group">
                        <label>구역 선택:</label>
                        <select 
                            value={selectedArea} 
                            onChange={(e) => setSelectedArea(e.target.value)}
                            disabled={cuttingPlanStarted}
                        >
                            <option value="">구역을 선택하세요</option>
                            {areaOptions.map(area => (
                                <option key={area} value={area}>{area}</option>
                            ))}
                        </select>
                    </div>

                    <div className="control-group">
                        <label>도면 검색:</label>
                        <input
                            type="text"
                            placeholder="도면명으로 검색..."
                            value={searchDrawing}
                            onChange={(e) => setSearchDrawing(e.target.value)}
                        />
                    </div>

                    <div className="control-group">
                        <button 
                            className="btn-start-cutting-plan"
                            onClick={handleStartCuttingPlan}
                            disabled={cuttingPlanStarted || !selectedArea}
                        >
                            {cuttingPlanStarted ? '✅ Cutting Plan 작성 중' : '📝 Cutting Plan 작성 시작'}
                        </button>
                    </div>
                </div>
            </div>

            {/* 자재 현황 */}
            <div className="materials-summary">
                <div className="summary-stats">
                    <div className="stat-item">
                        <span className="stat-label">전체 단관</span>
                        <span className="stat-value">{filteredMaterials.length}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">할당된 단관</span>
                        <span className="stat-value">{Object.keys(areaAssignments).length}</span>
                    </div>
                    <div className="stat-item">
                        <span className="stat-label">미할당 단관</span>
                        <span className="stat-value">{groupedMaterials.unassigned.length}</span>
                    </div>
                </div>
            </div>

            {/* 구역별 자재 테이블 */}
            <div className="cutting-plan-content">
                {/* 할당된 구역들 */}
                {Object.keys(groupedMaterials.assigned).sort().map(area => (
                    <div key={area} className="area-section">
                        <div className="area-header">
                            <h4>📍 구역 {area}</h4>
                            <span className="area-count">{groupedMaterials.assigned[area].length}개 단관</span>
                        </div>
                        
                        <div className="pipe-table">
                            <div className="table-header">
                                <div className="header-cell">구역</div>
                                <div className="header-cell">도면</div>
                                <div className="header-cell">라인번호</div>
                                <div className="header-cell">파이프정보(재질)</div>
                                <div className="header-cell">길이</div>
                                <div className="header-cell">끝단정보</div>
                                <div className="header-cell">액션</div>
                            </div>
                            
                            <div className="table-body">
                                {groupedMaterials.assigned[area].map(material => (
                                    <div key={material.id} className="table-row">
                                        <div className="table-cell">
                                            <select
                                                value={areaAssignments[material.id] || ''}
                                                onChange={(e) => handleAreaAssignment(material.id, e.target.value)}
                                            >
                                                <option value="">미할당</option>
                                                {areaOptions.map(opt => (
                                                    <option key={opt} value={opt}>{opt}</option>
                                                ))}
                                            </select>
                                        </div>
                                        <div className="table-cell">{material.drawing_name || '-'}</div>
                                        <div className="table-cell">{material.line_no || '-'}</div>
                                        <div className="table-cell">{formatPipeInfo(material)}</div>
                                        <div className="table-cell">{formatLength(material.length || material.total_length)}</div>
                                        <div className="table-cell">
                                            <select
                                                value={endPreparations[material.id] || 'plain'}
                                                onChange={(e) => handleEndPrepChange(material.id, e.target.value)}
                                            >
                                                {endPrepOptions.map(opt => (
                                                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                                                ))}
                                            </select>
                                        </div>
                                        <div className="table-cell">
                                            <div className="action-buttons-small">
                                                <button 
                                                    className="btn-small btn-edit"
                                                    onClick={() => {/* 편집 로직 */}}
                                                    title="편집"
                                                >
                                                    ✏️
                                                </button>
                                                <button 
                                                    className="btn-small btn-delete"
                                                    onClick={() => handleRemoveMaterial(material.id)}
                                                    title="삭제"
                                                >
                                                    ❌
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                ))}

                {/* 미할당 단관들 */}
                {groupedMaterials.unassigned.length > 0 && (
                    <div className="area-section unassigned">
                        <div className="area-header">
                            <h4>❓ 미할당 단관</h4>
                            <span className="area-count">{groupedMaterials.unassigned.length}개 단관</span>
                        </div>
                        
                        <div className="pipe-table">
                            <div className="table-header">
                                <div className="header-cell">구역</div>
                                <div className="header-cell">도면</div>
                                <div className="header-cell">라인번호</div>
                                <div className="header-cell">파이프정보(재질)</div>
                                <div className="header-cell">길이</div>
                                <div className="header-cell">끝단정보</div>
                                <div className="header-cell">액션</div>
                            </div>
                            
                            <div className="table-body">
                                {groupedMaterials.unassigned.map(material => (
                                    <div key={material.id} className="table-row">
                                        <div className="table-cell">
                                            <select
                                                value={areaAssignments[material.id] || ''}
                                                onChange={(e) => handleAreaAssignment(material.id, e.target.value)}
                                            >
                                                <option value="">미할당</option>
                                                {areaOptions.map(opt => (
                                                    <option key={opt} value={opt}>{opt}</option>
                                                ))}
                                            </select>
                                        </div>
                                        <div className="table-cell">{material.drawing_name || '-'}</div>
                                        <div className="table-cell">{material.line_no || '-'}</div>
                                        <div className="table-cell">{formatPipeInfo(material)}</div>
                                        <div className="table-cell">{formatLength(material.length || material.total_length)}</div>
                                        <div className="table-cell">
                                            <select
                                                value={endPreparations[material.id] || 'plain'}
                                                onChange={(e) => handleEndPrepChange(material.id, e.target.value)}
                                            >
                                                {endPrepOptions.map(opt => (
                                                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                                                ))}
                                            </select>
                                        </div>
                                        <div className="table-cell">
                                            <div className="action-buttons-small">
                                                <button 
                                                    className="btn-small btn-edit"
                                                    onClick={() => {/* 편집 로직 */}}
                                                    title="편집"
                                                >
                                                    ✏️
                                                </button>
                                                <button 
                                                    className="btn-small btn-delete"
                                                    onClick={() => handleRemoveMaterial(material.id)}
                                                    title="삭제"
                                                >
                                                    ❌
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )}

                {/* 빈 상태 */}
                {filteredMaterials.length === 0 && (
                    <div className="empty-state">
                        <p>조건에 맞는 PIPE 자재가 없습니다.</p>
                    </div>
                )}
            </div>

            {/* Cutting Plan 관리 액션 */}
            <div className="cutting-plan-management-section">
                <div className="section-header">
                    <h3>🔧 Cutting Plan 관리</h3>
                </div>
                
                <div className="cutting-plan-actions">
                    <button 
                        className="btn-export-temp"
                        onClick={handleExportTempExcel}
                        disabled={pipeRevisionLoading}
                    >
                        📊 임시 Excel 내보내기
                    </button>
                    
                    <button 
                        className="btn-finalize-cutting-plan"
                        onClick={handleFinalizeCuttingPlan}
                        disabled={pipeRevisionLoading}
                    >
                        🔒 Cutting Plan 확정 (이슈 관리 시작)
                    </button>
                    
                    <button 
                        className="btn-export-finalized"
                        onClick={handleExportFinalizedExcel}
                        disabled={pipeRevisionLoading}
                    >
                        📋 확정된 Excel 내보내기 (고정)
                    </button>
                    
                    <button 
                        className="btn-issue-management"
                        onClick={handleGoToIssueManagement}
                        disabled={pipeRevisionLoading}
                    >
                        🛠️ 이슈 관리 페이지
                    </button>
                </div>
                
                <div className="action-descriptions">
                    <div className="action-desc">
                        <strong>📊 임시 Excel:</strong> 현재 작업 중인 데이터 (리비전 시 변경됨)
                    </div>
                    <div className="action-desc">
                        <strong>🔒 확정:</strong> 데이터 고정 및 이슈 관리 시작 (리비전 보호)
                    </div>
                    <div className="action-desc">
                        <strong>📋 확정된 Excel:</strong> 고정된 데이터 (리비전과 무관)
                    </div>
                </div>
            </div>

            {/* 확인 다이얼로그 */}
            {showConfirmDialog && (
                <ConfirmDialog
                    title={actionType === 'force_revision_upload' ? '강제 리비전 업로드' : '작업 확인'}
                    message={
                        actionType === 'force_revision_upload' 
                            ? '기존 단관정보를 모두 삭제하고 새 BOM 파일을 업로드하시겠습니까?'
                            : `선택된 단관을 삭제하시겠습니까?`
                    }
                    onConfirm={confirmAction}
                    onCancel={() => setShowConfirmDialog(false)}
                />
            )}
        </div>
    );
};

export default PipeCuttingPlanPage;
