import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api';

const PurchaseConfirmationPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [purchaseItems, setPurchaseItems] = useState([]);
  const [revisionComparison, setRevisionComparison] = useState(null);
  const [loading, setLoading] = useState(true);
  const [editingItem, setEditingItem] = useState(null);
  const [confirmDialog, setConfirmDialog] = useState(false);

  // URL에서 job_no, revision 정보 가져오기
  const searchParams = new URLSearchParams(location.search);
  const jobNo = searchParams.get('job_no');
  const revision = searchParams.get('revision');
  const filename = searchParams.get('filename');
  const previousRevision = searchParams.get('prev_revision');

  useEffect(() => {
    if (jobNo && revision) {
      loadPurchaseItems();
      if (previousRevision) {
        loadRevisionComparison();
      }
    }
  }, [jobNo, revision, previousRevision]);

  const loadPurchaseItems = async () => {
    try {
      setLoading(true);
      const response = await api.get('/purchase/items/calculate', {
        params: { job_no: jobNo, revision: revision }
      });
      setPurchaseItems(response.data.items || []);
    } catch (error) {
      console.error('구매 품목 로딩 실패:', error);
    } finally {
      setLoading(false);
    }
  };

  const loadRevisionComparison = async () => {
    try {
      const response = await api.get('/purchase/revision-diff', {
        params: { 
          job_no: jobNo, 
          current_revision: revision,
          previous_revision: previousRevision 
        }
      });
      setRevisionComparison(response.data.comparison);
    } catch (error) {
      console.error('리비전 비교 실패:', error);
    }
  };

  const updateItemQuantity = async (itemId, field, value) => {
    try {
      await api.patch(`/purchase/items/${itemId}`, {
        [field]: parseFloat(value)
      });
      
      // 로컬 상태 업데이트
      setPurchaseItems(prev => 
        prev.map(item => 
          item.id === itemId 
            ? { ...item, [field]: parseFloat(value) }
            : item
        )
      );
      
      setEditingItem(null);
    } catch (error) {
      console.error('수량 업데이트 실패:', error);
    }
  };

  const confirmPurchase = async () => {
    try {
      // 입력 데이터 검증
      if (!jobNo || !revision) {
        alert('Job 번호와 리비전 정보가 없습니다.');
        return;
      }

      if (purchaseItems.length === 0) {
        alert('구매할 품목이 없습니다.');
        return;
      }

      // 각 품목의 수량 검증
      const invalidItems = purchaseItems.filter(item => 
        !item.calculated_qty || item.calculated_qty <= 0
      );

      if (invalidItems.length > 0) {
        alert(`다음 품목들의 구매 수량이 유효하지 않습니다:\n${invalidItems.map(item => `- ${item.specification}`).join('\n')}`);
        return;
      }

      setConfirmDialog(false);

      const response = await api.post('/purchase/orders/create', {
        job_no: jobNo,
        revision: revision,
        items: purchaseItems.map(item => ({
          purchase_item_id: item.id,
          ordered_quantity: item.calculated_qty,
          required_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // 30일 후
        }))
      });

      const successMessage = `구매 주문이 성공적으로 생성되었습니다!\n\n` +
        `- Job: ${jobNo}\n` +
        `- Revision: ${revision}\n` +
        `- 품목 수: ${purchaseItems.length}개\n` +
        `- 생성 시간: ${new Date().toLocaleString('ko-KR')}`;

      alert(successMessage);
      
      // 자재 목록 페이지로 이동 (상태 기반 라우팅 사용)
      // App.jsx의 상태 기반 라우팅을 위해 window 이벤트 발생
      window.dispatchEvent(new CustomEvent('navigateToMaterials', {
        detail: { 
          jobNo: jobNo,
          revision: revision,
          bomName: `${jobNo} ${revision}`,
          message: '구매 주문 생성 완료'
        }
      }));
    } catch (error) {
      console.error('구매 주문 생성 실패:', error);
      
      let errorMessage = '구매 주문 생성에 실패했습니다.';
      
      if (error.response?.data?.detail) {
        errorMessage += `\n\n오류 내용: ${error.response.data.detail}`;
      } else if (error.message) {
        errorMessage += `\n\n오류 내용: ${error.message}`;
      }
      
      if (error.response?.status === 400) {
        errorMessage += '\n\n입력 데이터를 확인해주세요.';
      } else if (error.response?.status === 404) {
        errorMessage += '\n\n해당 Job이나 리비전을 찾을 수 없습니다.';
      } else if (error.response?.status >= 500) {
        errorMessage += '\n\n서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
      }
      
      alert(errorMessage);
    }
  };

  const getCategoryColor = (category) => {
    const colors = {
      'PIPE': '#1976d2',
      'FITTING': '#9c27b0',
      'VALVE': '#2e7d32',
      'FLANGE': '#ed6c02',
      'BOLT': '#0288d1',
      'GASKET': '#d32f2f',
      'INSTRUMENT': '#7b1fa2'
    };
    return colors[category] || '#757575';
  };

  const formatPipeInfo = (item) => {
    if (item.category !== 'PIPE') return null;
    
    return (
      <div style={{ marginTop: '8px', fontSize: '12px', color: '#666' }}>
        절단손실: {item.cutting_loss || 0}mm | 
        구매: {item.pipes_count || 0}본 | 
        여유분: {item.waste_length || 0}mm
      </div>
    );
  };

  const formatBoltInfo = (item) => {
    if (item.category !== 'BOLT') return null;
    
    // 특수 용도 볼트 정보 (백엔드에서 제공되어야 함)
    const specialApplications = item.special_applications || {};
    const psvCount = specialApplications.PSV || 0;
    const ltCount = specialApplications.LT || 0;
    const ckCount = specialApplications.CK || 0;
    const oriCount = specialApplications.ORI || 0;
    
    return (
      <div style={{ marginTop: '8px' }}>
        <div style={{ fontSize: '12px', color: '#666' }}>
          분수 사이즈: {(item.size_fraction || item.size_spec || '').replace(/"/g, '')} | 
          표면처리: {item.surface_treatment || '없음'}
        </div>
        
        {/* 특수 용도 볼트 정보 */}
        <div style={{ 
          marginTop: '8px', 
          padding: '8px', 
          backgroundColor: '#e3f2fd', 
          borderRadius: '4px' 
        }}>
          <div style={{ fontSize: '12px', fontWeight: 'bold', color: '#0288d1' }}>
            특수 용도 볼트 현황:
          </div>
          <div style={{ 
            display: 'grid', 
            gridTemplateColumns: 'repeat(4, 1fr)', 
            gap: '8px', 
            marginTop: '4px' 
          }}>
            <div style={{ fontSize: '12px', color: psvCount > 0 ? '#d32f2f' : '#666' }}>
              PSV용: {psvCount}개
            </div>
            <div style={{ fontSize: '12px', color: ltCount > 0 ? '#ed6c02' : '#666' }}>
              저온용: {ltCount}개  
            </div>
            <div style={{ fontSize: '12px', color: ckCount > 0 ? '#0288d1' : '#666' }}>
              체크밸브용: {ckCount}개
            </div>
            <div style={{ fontSize: '12px', color: oriCount > 0 ? '#9c27b0' : '#666' }}>
              오리피스용: {oriCount}개
            </div>
          </div>
          {(psvCount + ltCount + ckCount + oriCount) === 0 && (
            <div style={{ fontSize: '12px', color: '#2e7d32', fontStyle: 'italic' }}>
              특수 용도 볼트 없음 (일반 볼트만 포함)
            </div>
          )}
        </div>
      </div>
    );
  };

  const exportToExcel = () => {
    if (purchaseItems.length === 0) {
      alert('내보낼 구매 품목이 없습니다.');
      return;
    }

    // 상세한 구매 확정 데이터 생성
    const data = purchaseItems.map((item, index) => {
      const baseData = {
        '순번': index + 1,
        '품목코드': item.item_code || '',
        '카테고리': item.category || '',
        '사양': item.specification || '',
        '재질': item.material_spec || '',
        '사이즈': item.size_spec || '',
        '단위': item.unit || '',
        'BOM수량': item.bom_quantity || 0,
        '구매수량': item.calculated_qty || 0,
        '여유율': ((item.safety_factor || 1) - 1) * 100 + '%',
        '최소주문': item.min_order_qty || 0,
        '예상여유분': ((item.calculated_qty || 0) - (item.bom_quantity || 0)).toFixed(1),
        '활용률': (((item.bom_quantity || 0) / (item.calculated_qty || 1)) * 100).toFixed(1) + '%'
      };

      // 파이프 특수 정보 추가
      if (item.category === 'PIPE') {
        baseData['절단손실'] = item.cutting_loss || 0;
        baseData['구매본수'] = item.pipes_count || 0;
        baseData['여유길이'] = item.waste_length || 0;
      }

      // 볼트 특수 정보 추가
      if (item.category === 'BOLT') {
        const specialApps = item.special_applications || {};
        baseData['PSV용'] = specialApps.PSV || 0;
        baseData['저온용'] = specialApps.LT || 0;
        baseData['체크밸브용'] = specialApps.CK || 0;
        baseData['오리피스용'] = specialApps.ORI || 0;
        baseData['분수사이즈'] = item.size_fraction || '';
        baseData['표면처리'] = item.surface_treatment || '';
      }

      // 리비전 비교 정보 추가 (있는 경우)
      if (previousRevision) {
        baseData['기구매수량'] = item.purchased_quantity || 0;
        baseData['추가구매필요'] = Math.max(item.additional_needed || 0, 0);
      }

      return baseData;
    });

    // 헤더 정보 추가
    const headerInfo = [
      `구매 확정서`,
      `Job No: ${jobNo}`,
      `Revision: ${revision}`,
      `파일명: ${filename || ''}`,
      `생성일: ${new Date().toLocaleString('ko-KR')}`,
      `총 품목수: ${purchaseItems.length}개`,
      ''
    ];

    // 요약 정보 계산
    const totalBomQty = purchaseItems.reduce((sum, item) => sum + (item.bom_quantity || 0), 0);
    const totalPurchaseQty = purchaseItems.reduce((sum, item) => sum + (item.calculated_qty || 0), 0);
    const categoryCount = purchaseItems.reduce((acc, item) => {
      acc[item.category] = (acc[item.category] || 0) + 1;
      return acc;
    }, {});

    const summaryInfo = [
      '=== 요약 정보 ===',
      `전체 BOM 수량: ${totalBomQty.toFixed(1)}`,
      `전체 구매 수량: ${totalPurchaseQty.toFixed(1)}`,
      `카테고리별 품목수: ${Object.entries(categoryCount).map(([cat, count]) => `${cat}(${count})`).join(', ')}`,
      ''
    ];

    // CSV 형태로 데이터 구성
    const csvContent = [
      ...headerInfo,
      ...summaryInfo,
      '=== 상세 품목 목록 ===',
      Object.keys(data[0]).join(','),
      ...data.map(row => Object.values(row).map(val => 
        typeof val === 'string' && val.includes(',') ? `"${val}"` : val
      ).join(','))
    ].join('\n');

    // 파일 다운로드
    const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    
    const timestamp = new Date().toISOString().split('T')[0];
    const fileName = `구매확정서_${jobNo}_${revision}_${timestamp}.csv`;
    link.setAttribute('download', fileName);
    
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // 성공 메시지
    alert(`구매 확정서가 다운로드되었습니다.\n파일명: ${fileName}`);
  };

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        height: '200px' 
      }}>
        <div>로딩 중...</div>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      {/* 헤더 */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '24px' }}>
        <button
          onClick={() => navigate(-1)}
          style={{
            background: 'none',
            border: 'none',
            fontSize: '24px',
            cursor: 'pointer',
            marginRight: '16px',
            padding: '8px'
          }}
        >
          ←
        </button>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: '0 0 8px 0', fontSize: '28px', fontWeight: 'bold' }}>
            🛒 구매 확정
          </h1>
          <h2 style={{ margin: 0, fontSize: '18px', color: '#1976d2' }}>
            Job: {jobNo} | {filename} | {revision}
          </h2>
        </div>
        <div style={{ display: 'flex', gap: '12px' }}>
          <button
            onClick={exportToExcel}
            style={{
              padding: '12px 24px',
              backgroundColor: '#2e7d32',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: 'bold'
            }}
          >
            📊 엑셀 내보내기
          </button>
          <button
            onClick={() => setConfirmDialog(true)}
            disabled={purchaseItems.length === 0}
            style={{
              padding: '12px 24px',
              backgroundColor: purchaseItems.length === 0 ? '#ccc' : '#1976d2',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: purchaseItems.length === 0 ? 'not-allowed' : 'pointer',
              fontSize: '14px',
              fontWeight: 'bold'
            }}
          >
            🛒 구매 주문 생성
          </button>
        </div>
      </div>

      {/* 리비전 비교 알림 */}
      {revisionComparison && (
        <div style={{
          padding: '16px',
          marginBottom: '24px',
          backgroundColor: revisionComparison.has_changes ? '#fff3e0' : '#e3f2fd',
          border: `1px solid ${revisionComparison.has_changes ? '#ed6c02' : '#0288d1'}`,
          borderRadius: '4px',
          display: 'flex',
          alignItems: 'center'
        }}>
          <span style={{ marginRight: '8px', fontSize: '20px' }}>🔄</span>
          <div>
            <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
              리비전 변경사항: {revisionComparison.summary}
            </div>
            {revisionComparison.additional_items && (
              <div style={{ fontSize: '14px' }}>
                추가 구매 필요: {revisionComparison.additional_items}개 품목
              </div>
            )}
          </div>
        </div>
      )}

      {/* 구매 품목 목록 */}
      {purchaseItems.length === 0 ? (
        <div style={{
          textAlign: 'center',
          padding: '48px',
          backgroundColor: '#f5f5f5',
          borderRadius: '8px'
        }}>
          <div style={{ fontSize: '48px', marginBottom: '16px' }}>📦</div>
          <div style={{ fontSize: '18px', color: '#666' }}>
            구매할 품목이 없습니다.
          </div>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
          {purchaseItems.map(item => (
            <div key={item.id} style={{
              border: '1px solid #ddd',
              borderRadius: '8px',
              padding: '20px',
              backgroundColor: 'white',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
                <span style={{
                  display: 'inline-block',
                  padding: '4px 12px',
                  backgroundColor: getCategoryColor(item.category),
                  color: 'white',
                  borderRadius: '16px',
                  fontSize: '12px',
                  fontWeight: 'bold',
                  marginRight: '16px'
                }}>
                  {item.category}
                </span>
                <h3 style={{ margin: 0, flex: 1, fontSize: '18px' }}>
                  {item.specification}
                </h3>
                {item.is_additional && (
                  <span style={{
                    padding: '4px 12px',
                    backgroundColor: '#fff3e0',
                    color: '#ed6c02',
                    border: '1px solid #ed6c02',
                    borderRadius: '16px',
                    fontSize: '12px',
                    fontWeight: 'bold'
                  }}>
                    추가 구매
                  </span>
                )}
              </div>

              <div style={{ 
                display: 'grid', 
                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
                gap: '24px' 
              }}>
                {/* BOM 수량 */}
                <div>
                  <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                    BOM 필요량
                  </div>
                  <div style={{ fontSize: '20px', fontWeight: 'bold' }}>
                    {item.bom_quantity} {item.unit}
                  </div>
                  {formatPipeInfo(item)}
                  {formatBoltInfo(item)}
                </div>

                {/* 구매 수량 */}
                <div>
                  <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                    구매 수량
                  </div>
                  {editingItem === item.id ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <input
                        type="number"
                        value={item.calculated_qty}
                        onChange={(e) => 
                          setPurchaseItems(prev => 
                            prev.map(i => 
                              i.id === item.id 
                                ? { ...i, calculated_qty: parseFloat(e.target.value) || 0 }
                                : i
                            )
                          )
                        }
                        style={{
                          width: '100px',
                          padding: '4px 8px',
                          border: '1px solid #ddd',
                          borderRadius: '4px'
                        }}
                      />
                      <button 
                        onClick={() => updateItemQuantity(item.id, 'calculated_qty', item.calculated_qty)}
                        style={{
                          background: 'none',
                          border: 'none',
                          color: '#1976d2',
                          cursor: 'pointer',
                          fontSize: '16px'
                        }}
                      >
                        ✓
                      </button>
                      <button 
                        onClick={() => setEditingItem(null)}
                        style={{
                          background: 'none',
                          border: 'none',
                          color: '#666',
                          cursor: 'pointer',
                          fontSize: '16px'
                        }}
                      >
                        ✕
                      </button>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1976d2' }}>
                        {item.calculated_qty} {item.unit}
                      </div>
                      <button 
                        onClick={() => setEditingItem(item.id)}
                        style={{
                          background: 'none',
                          border: 'none',
                          color: '#666',
                          cursor: 'pointer',
                          fontSize: '14px'
                        }}
                      >
                        ✏️
                      </button>
                    </div>
                  )}
                </div>

                {/* 이미 구매한 수량 */}
                {previousRevision && (
                  <div>
                    <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                      기구매 수량
                    </div>
                    <div style={{ fontSize: '20px', fontWeight: 'bold' }}>
                      {item.purchased_quantity || 0} {item.unit}
                    </div>
                  </div>
                )}

                {/* 추가 구매 필요량 */}
                {previousRevision && (
                  <div>
                    <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                      추가 구매 필요
                    </div>
                    <div style={{ 
                      fontSize: '20px', 
                      fontWeight: 'bold',
                      color: item.additional_needed > 0 ? '#d32f2f' : '#2e7d32'
                    }}>
                      {Math.max(item.additional_needed || 0, 0)} {item.unit}
                    </div>
                  </div>
                )}
              </div>

              {/* 여유율 및 최소 주문 정보 */}
              <div style={{
                marginTop: '16px',
                padding: '16px',
                backgroundColor: '#f5f5f5',
                borderRadius: '4px'
              }}>
                <div style={{ 
                  display: 'grid', 
                  gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', 
                  gap: '16px' 
                }}>
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>여유율</div>
                    <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
                      {((item.safety_factor || 1) - 1) * 100}%
                    </div>
                  </div>
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>최소 주문</div>
                    <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
                      {item.min_order_qty || 0} {item.unit}
                    </div>
                  </div>
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>예상 여유분</div>
                    <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
                      {(item.calculated_qty - item.bom_quantity).toFixed(1)} {item.unit}
                    </div>
                  </div>
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>활용률</div>
                    <div style={{ fontSize: '14px', fontWeight: 'bold' }}>
                      {((item.bom_quantity / item.calculated_qty) * 100).toFixed(1)}%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 구매 주문 확인 다이얼로그 */}
      {confirmDialog && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0,0,0,0.5)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            padding: '24px',
            borderRadius: '8px',
            minWidth: '400px',
            maxWidth: '500px'
          }}>
            <h3 style={{ margin: '0 0 16px 0' }}>구매 주문 생성 확인</h3>
            <div style={{ marginBottom: '16px' }}>
              총 {purchaseItems.length}개 품목에 대한 구매 주문을 생성하시겠습니까?
            </div>
            
            {revisionComparison && revisionComparison.has_changes && (
              <div style={{
                padding: '12px',
                marginBottom: '16px',
                backgroundColor: '#fff3e0',
                border: '1px solid #ed6c02',
                borderRadius: '4px'
              }}>
                ⚠️ 리비전 변경으로 인한 추가 구매가 포함되어 있습니다.
              </div>
            )}
            
            <div style={{ fontSize: '14px', color: '#666', marginBottom: '24px' }}>
              구매 주문 생성 후에는 수량 변경이 제한됩니다.
            </div>
            
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
              <button
                onClick={() => setConfirmDialog(false)}
                style={{
                  padding: '8px 16px',
                  backgroundColor: 'white',
                  color: '#666',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                취소
              </button>
              <button
                onClick={confirmPurchase}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#1976d2',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  fontWeight: 'bold'
                }}
              >
                주문 생성
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default PurchaseConfirmationPage;