import React, { useState, useEffect } from 'react';
import api from '../api';
import { exportMaterialsToExcel } from '../utils/excelExport';
import './PurchaseRequestPage.css';

const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) => {
    const [requests, setRequests] = useState([]);
    const [selectedRequest, setSelectedRequest] = useState(null);
    const [requestMaterials, setRequestMaterials] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [editingTitle, setEditingTitle] = useState(null);
    const [newTitle, setNewTitle] = useState('');

    useEffect(() => {
        loadRequests();
    }, [fileId, jobNo, selectedProject]);

    const loadRequests = async () => {
        setIsLoading(true);
        try {
            const params = {};
            
            // 선택된 프로젝트가 있으면 해당 프로젝트만 조회
            if (selectedProject) {
                params.job_no = selectedProject.job_no || selectedProject.official_project_code;
            } else if (jobNo) {
                params.job_no = jobNo;
            }
            
            if (fileId) params.file_id = fileId;
            
            console.log('🔍 구매신청 목록 조회:', params);
            const response = await api.get('/purchase-request/list', { params });
            setRequests(response.data.requests || []);
        } catch (error) {
            console.error('Failed to load requests:', error);
            // API 오류 시 대시보드로 리다이렉트
            if (error.response?.status === 500 || error.response?.status === 404) {
                alert('구매신청 페이지에 문제가 발생했습니다. 대시보드로 이동합니다.');
                onNavigate('dashboard');
            }
        } finally {
            setIsLoading(false);
        }
    };

    const loadRequestMaterials = async (requestId) => {
        setIsLoading(true);
        try {
            const response = await api.get(`/purchase-request/${requestId}/materials`);
            // 그룹화된 자재가 있으면 우선 표시, 없으면 개별 자재 표시
            if (response.data.grouped_materials && response.data.grouped_materials.length > 0) {
                setRequestMaterials(response.data.grouped_materials);
            } else {
                setRequestMaterials(response.data.materials || []);
            }
        } catch (error) {
            console.error('Failed to load materials:', error);
        } finally {
            setIsLoading(false);
        }
    };

    const handleRequestSelect = (request) => {
        setSelectedRequest(request);
        loadRequestMaterials(request.request_id);
    };

    const handleDownloadExcel = async (requestId, requestNo) => {
        try {
            console.log('📥 엑셀 다운로드 시작:', requestId, requestNo);
            
            // 서버에서 생성된 엑셀 파일 직접 다운로드 (BOM 페이지와 동일한 파일)
            const response = await api.get(`/purchase-request/${requestId}/download-excel`, {
                responseType: 'blob'  // 파일 다운로드용
            });
            
            // 파일 다운로드 처리
            const blob = new Blob([response.data], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            });
            
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `${requestNo}_재다운로드.xlsx`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
            
            console.log('✅ 엑셀 파일 다운로드 완료');
        } catch (error) {
            console.error('❌ 엑셀 다운로드 실패:', error);
            alert('엑셀 다운로드 실패: ' + error.message);
        }
    };

    const handleEditTitle = (request) => {
        setEditingTitle(request.request_id);
        setNewTitle(request.request_no);
    };

    const handleSaveTitle = async (requestId) => {
        try {
            const response = await api.patch(`/purchase-request/${requestId}/title`, {
                title: newTitle
            });
            
            if (response.data.success) {
                // 목록에서 해당 요청의 제목 업데이트
                setRequests(prev => prev.map(req => 
                    req.request_id === requestId 
                        ? { ...req, request_no: newTitle }
                        : req
                ));
                
                // 선택된 요청도 업데이트
                if (selectedRequest?.request_id === requestId) {
                    setSelectedRequest(prev => ({ ...prev, request_no: newTitle }));
                }
                
                setEditingTitle(null);
                setNewTitle('');
                console.log('✅ 구매신청 제목 업데이트 완료');
            }
        } catch (error) {
            console.error('❌ 제목 업데이트 실패:', error);
            alert('제목 업데이트 실패: ' + error.message);
        }
    };

    const handleCancelEdit = () => {
        setEditingTitle(null);
        setNewTitle('');
    };

    return (
        <div className="purchase-request-page">
            <div className="page-header">
                <button onClick={() => onNavigate('dashboard')} className="back-btn">
                    ← 대시보드로 돌아가기
                </button>
                <h1>구매신청 관리</h1>
                <p className="subtitle">구매신청한 자재들을 그룹별로 관리합니다</p>
            </div>

            <div className="main-content">
                {/* 구매신청 목록 */}
                <div className="requests-panel">
                    <div className="panel-header">
                        <h2>구매신청 목록 ({requests.length})</h2>
                    </div>
                    
                    <div className="requests-list">
                        {isLoading ? (
                            <div className="loading">로딩중...</div>
                        ) : requests.length === 0 ? (
                            <div className="empty-state">구매신청이 없습니다</div>
                        ) : (
                            requests.map(request => (
                                <div
                                    key={request.request_id}
                                    className={`request-card ${selectedRequest?.request_id === request.request_id ? 'selected' : ''}`}
                                    onClick={() => handleRequestSelect(request)}
                                >
                                    <div className="request-header">
                                        {editingTitle === request.request_id ? (
                                            <div className="title-edit" onClick={(e) => e.stopPropagation()}>
                                                <input
                                                    type="text"
                                                    value={newTitle}
                                                    onChange={(e) => setNewTitle(e.target.value)}
                                                    onKeyPress={(e) => {
                                                        if (e.key === 'Enter') {
                                                            handleSaveTitle(request.request_id);
                                                        } else if (e.key === 'Escape') {
                                                            handleCancelEdit();
                                                        }
                                                    }}
                                                    style={{
                                                        width: '200px',
                                                        padding: '4px 8px',
                                                        border: '1px solid #ddd',
                                                        borderRadius: '4px',
                                                        fontSize: '14px'
                                                    }}
                                                    autoFocus
                                                />
                                                <button
                                                    onClick={() => handleSaveTitle(request.request_id)}
                                                    style={{
                                                        marginLeft: '8px',
                                                        padding: '4px 8px',
                                                        background: '#10b981',
                                                        color: 'white',
                                                        border: 'none',
                                                        borderRadius: '4px',
                                                        cursor: 'pointer',
                                                        fontSize: '12px'
                                                    }}
                                                >
                                                    저장
                                                </button>
                                                <button
                                                    onClick={handleCancelEdit}
                                                    style={{
                                                        marginLeft: '4px',
                                                        padding: '4px 8px',
                                                        background: '#6b7280',
                                                        color: 'white',
                                                        border: 'none',
                                                        borderRadius: '4px',
                                                        cursor: 'pointer',
                                                        fontSize: '12px'
                                                    }}
                                                >
                                                    취소
                                                </button>
                                            </div>
                                        ) : (
                                            <div className="title-display">
                                                <span className="request-no">{request.request_no}</span>
                                                <button
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        handleEditTitle(request);
                                                    }}
                                                    style={{
                                                        marginLeft: '8px',
                                                        padding: '2px 6px',
                                                        background: 'transparent',
                                                        border: '1px solid #d1d5db',
                                                        borderRadius: '4px',
                                                        cursor: 'pointer',
                                                        fontSize: '12px',
                                                        color: '#6b7280'
                                                    }}
                                                >
                                                    ✏️
                                                </button>
                                            </div>
                                        )}
                                        <span className="request-date">
                                            {new Date(request.requested_at).toLocaleDateString()}
                                        </span>
                                    </div>
                                    <div className="request-info">
                                        <div>{request.job_no} - {request.job_name}</div>
                                        <div className="material-count">
                                            {request.category || '전체'} | {request.material_count}개 자재
                                        </div>
                                    </div>
                                    <div className="request-footer">
                                        <span className="requested-by">{request.requested_by}</span>
                                        <button
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                handleDownloadExcel(request.request_id, request.request_no);
                                            }}
                                            className="download-btn"
                                        >
                                            📥 엑셀
                                        </button>
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </div>

                {/* 선택된 구매신청 상세 */}
                <div className="details-panel">
                    {selectedRequest ? (
                        <>
                            <div className="panel-header">
                                <h2>{selectedRequest.request_no}</h2>
                                <button
                                    onClick={() => handleDownloadExcel(selectedRequest.request_id, selectedRequest.request_no)}
                                    className="excel-btn"
                                >
                                    📥 엑셀 다운로드
                                </button>
                            </div>
                            
                            {/* 원본 파일 정보 */}
                            <div className="original-file-info" style={{
                                background: '#f8fafc',
                                border: '1px solid #e2e8f0',
                                borderRadius: '8px',
                                padding: '16px',
                                marginBottom: '20px'
                            }}>
                                <h3 style={{ 
                                    fontSize: '16px', 
                                    fontWeight: '600', 
                                    color: '#374151', 
                                    marginBottom: '12px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '8px'
                                }}>
                                    📄 원본 파일 정보
                                </h3>
                                <div className="file-details" style={{
                                    display: 'grid',
                                    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
                                    gap: '12px'
                                }}>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>파일명:</span>
                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.original_filename || 'N/A'}</span>
                                    </div>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>프로젝트:</span>
                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.job_no} - {selectedRequest.job_name}</span>
                                    </div>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>신청일:</span>
                                        <span className="value" style={{ color: '#1f2937' }}>{new Date(selectedRequest.requested_at).toLocaleString()}</span>
                                    </div>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>신청자:</span>
                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.requested_by}</span>
                                    </div>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>자재 수량:</span>
                                        <span className="value" style={{ color: '#1f2937', fontWeight: '600' }}>{selectedRequest.material_count}개</span>
                                    </div>
                                    <div className="file-item" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <span className="label" style={{ fontWeight: '500', color: '#6b7280', minWidth: '80px' }}>카테고리:</span>
                                        <span className="value" style={{ color: '#1f2937' }}>{selectedRequest.category || '전체'}</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div className="materials-table">
                                {/* 업로드 당시 분류된 정보를 그대로 표시 */}
                                {requestMaterials.length === 0 ? (
                                    <div className="empty-state">자재 정보가 없습니다</div>
                                ) : (
                                    <div>
                                        {/* 카테고리별로 그룹화하여 표시 */}
                                        {(() => {
                                            // 카테고리별로 자재 그룹화
                                            const groupedByCategory = requestMaterials.reduce((acc, material) => {
                                                const category = material.category || material.classified_category || 'UNCLASSIFIED';
                                                if (!acc[category]) acc[category] = [];
                                                acc[category].push(material);
                                                return acc;
                                            }, {});
                                            
                                            return Object.entries(groupedByCategory).map(([category, materials]) => (
                                                <div key={category} style={{ marginBottom: '30px' }}>
                                                    <h3 style={{ 
                                                        background: '#f0f0f0', 
                                                        padding: '10px', 
                                                        borderRadius: '4px',
                                                        fontSize: '14px',
                                                        fontWeight: 'bold'
                                                    }}>
                                                        {category} ({materials.length}개)
                                                    </h3>
                                                    <table>
                                                        <thead>
                                                            <tr>
                                                                <th>No</th>
                                                                <th>카테고리</th>
                                                                <th>자재 설명</th>
                                                                <th>크기</th>
                                                                <th>스케줄</th>
                                                                <th>재질</th>
                                                                <th>수량</th>
                                                                <th>사용자요구</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {materials.map((material, idx) => (
                                                                <tr key={material.item_id || material.id || `${category}-${idx}`}>
                                                                    <td>{idx + 1}</td>
                                                                    <td>
                                                                        <span className="category-badge">
                                                                            {material.category || material.classified_category}
                                                                        </span>
                                                                    </td>
                                                                    <td>{material.description || material.original_description}</td>
                                                                    <td>{material.size || material.size_spec || '-'}</td>
                                                                    <td>{material.schedule || '-'}</td>
                                                                    <td>{material.material_grade || material.full_material_grade || '-'}</td>
                                                                    <td>
                                                                        <span style={{ fontWeight: 'bold' }}>
                                                                            {Math.round(material.quantity || material.requested_quantity || 0)} {material.unit || material.requested_unit || '개'}
                                                                        </span>
                                                                    </td>
                                                                    <td>{material.user_requirement || '-'}</td>
                                                                </tr>
                                                            ))}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            ));
                                        })()}
                                    </div>
                                )}
                            </div>
                        </>
                    ) : (
                        <div className="empty-state">
                            <div className="empty-icon">📦</div>
                            <div>구매신청을 선택하세요</div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default PurchaseRequestPage;
