import React, { useState, useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faImage, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
import { Link } from 'react-router-dom';
import Select from 'react-select'
import { ServerDownAnimation } from '../../../assets/images';

const CustomLabel = ({ overRide, children, ...props }) => {
    return <label {...props}>{children}</label>;
};

const Verify = () => {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const API_KEY = process.env.REACT_APP_API_KEY;
    const fileTypes = ["image/jpeg", "image/png"];
    const fileInputRef = useRef(null);

    const [isMobile, setIsMobile] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
    const [selectedImageName, setSelectedImageName] = useState('');
    const [resultImageLabel, setResultImageLabel] = useState('');
    const [file, setFile] = useState(null);
    const [applicationId, setApplicationId] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [applicationIds, setApplicationIds] = useState([]);
    const [imageUrl, setImageUrl] = useState('');
    const [imageError, setImageError] = useState('');
    const [data, setData] = useState(null);
    const [showResult, setShowResult] = useState(false);
    const [inputValueApplication, setInputValueApplication] = useState('');
    const [selectedQuota, setSelectedQuota] = useState(0);
    const [isServer, setIsServer] = useState(true);

    // Validation state
    const [validationErrors, setValidationErrors] = useState({
        applicationId: '',
        file: ''
    });

    // Fetch Application IDs
    useEffect(() => {
        const fetchApplicationIds = async () => {
            try {
                setIsLoading(true);
                const response = await fetch(`${BASE_URL}/application/list`, {
                    method: 'GET',
                    headers: {
                        'accept': 'application/json',
                        'x-api-key': API_KEY,
                    },
                });
        
                if (!response.ok) {
                    throw new Error('Failed to fetch application IDs');
                }
        
                const data = await response.json();
                console.log('Response Data:', data);
        
                if (data.status_code === 200) {
                    setApplicationIds(data.details.data);
                    setIsServer(true);
                } else {
                    setIsServer(false);
                    throw new Error(data.details.message || 'Failed to fetch application IDs');
                }
            } catch (error) {
                setErrorMessage(error.message || 'Error fetching application IDs');
                setIsServer(false);
            } finally {
                setIsLoading(false);
            }
        }; 

        fetchApplicationIds();

        const checkMobile = () => {
            setIsMobile(window.innerWidth <= 768);  // Example: 768px as the threshold for mobile devices
        };

        // Check on initial load
        checkMobile();

        // Add resize listener to adjust `isMobile` state on window resize
        window.addEventListener('resize', checkMobile);

        // Clean up the event listener when the component unmounts
        return () => {
            window.removeEventListener('resize', checkMobile);
        };
    }, []);

    const handleInputChangeApplication = (inputValue) => {
        setInputValueApplication(inputValue);
    };

    const handleApplicationChange = (selectedOption) => {
        const selectedId = selectedOption.value;
        const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));

        setApplicationId(selectedOption ? selectedOption.value : '');

        if (selectedApp) {
            setSelectedQuota(selectedApp.quota);
        }
    };

    const applicationOptions = applicationIds.map(app => ({
        value: app.id,   // This is what will be sent when an option is selected
        label: app.name  // This is what will be displayed in the dropdown
    }));

    // Handle file upload
    const handleFileDrop = (files) => {
        if (files && files[0]) {
            handleImageUpload(files[0]);
        } else {
            console.error('No valid files dropped');
        }
    };

    const checkImageDimensions = (file) => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = URL.createObjectURL(file);
            
            // img.onload = () => {
            //     URL.revokeObjectURL(img.src);
            //     if (img.width > 320 || img.height > 200) {
            //         reject('Image dimensions must not exceed 320x200 pixels');
            //     } else {
            //         resolve(true);
            //     }
            // };
            
            img.onerror = () => {
                URL.revokeObjectURL(img.src);
                reject('Failed to load image');
            };
        });
    };

    const handleImageUpload = async (file) => {
        setErrorMessage('');
        setFile(file);
        setSelectedImageName(file.name);
    
        try {
            // Check if file is PNG
            if (file.type === 'image/png') {
                setImageError('The image format is not suitable. Only JPG and JPEG files are allowed.');
                setFile(null);
                setSelectedImageName('');
                return;
            }
    
            // Validate file type
            if (!fileTypes.includes(file.type)) {
                setImageError('Invalid file type. Only JPG and JPEG are allowed.');
                return;
            }
    
            // Validate file size
            if (file.size > 2 * 1024 * 1024) {
                setImageError('File size exceeds 2MB.');
                return;
            }
    
            // Validate image dimensions
            await checkImageDimensions(file);
            setImageError('');
            
        } catch (error) {
            setImageError(error);
            setFile(null);
            setSelectedImageName('');
        }
    };   

    const handleImageCancel = () => {
        setFile(null);
        setSelectedImageName('');
        setImageError('');
        fileInputRef.current.value = '';
    };

    // Validate form inputs before submitting
    const validateForm = () => {
        const errors = {
            applicationId: '',
            file: ''
        };
    
        if (!applicationId) {
            errors.applicationId = 'Please select an Application ID.';
        }
    
        if (!file) {
            errors.file = 'Please upload an image file.';
        } else if (imageError) {
            errors.file = imageError;
        }
    
        setValidationErrors(errors);
        return Object.values(errors).every(error => error === '');
    };
    
    const handleApiError = (response) => {
        if (response.status_code === 400) {
            console.error('❌ Bad Request:', {
                status: response.status_code,
                detail: response.detail || 'Mohon Upload SIM'
            });
            return response.detail || 'Mohon Upload SIM';
        }
    
        if (response.status_code >= 500) {
            console.error('🔥 Server Error:', {
                status: response.status_code,
                message: 'Internal Server Error'
            });
            return 'Internal Server Error';
        }
    
        console.error('⚠️ Unknown Error:', {
            status: response.status_code,
            response
        });
        return 'Terjadi kesalahan. Silakan coba lagi.';
    };
    
    const handleCheckClick = () => {
        if (!validateForm()) {
            return;
        }
    
        setIsLoading(true);
        const formData = new FormData();
        formData.append('application_id', applicationId);
        formData.append('file', file);
    
        fetch(`${BASE_URL}/ocr-sim`, {
            method: 'POST',
            headers: {
                'accept': 'application/json',
                'x-api-key': API_KEY,
            },
            body: formData,
        })
        .then(response => {
            if (response.status === 400) {
                return response.json().then(errorData => {
                    throw new Error(errorData.detail);
                });
            }
            if (!response.ok) {
                throw new Error('OCR processing failed, Please check your input');
            }
            return response.json();
        })
        .then(result => {
            console.log('📡 API Response:', result);
            
            if (result.status_code !== 201) {
                throw new Error(handleApiError(result));
            }
    
            const responseData = result.details.data?.['data-sim'] || {};
            const updateQuota = result.details.data.quota;
    
            const data = {
                sim: responseData.sim || 'N/A',
                simName: responseData.name || 'N/A',
                simAddress: responseData.address || 'N/A',
                simType: responseData.type || 'N/A',
                simValidUntil: responseData.valid_until || 'N/A',
                simDomain: responseData.domain || 'N/A',
                simBirthPlace: responseData.birthplace || 'N/A',
                simDob: responseData.dob || 'N/A',
                simGender: responseData.gender || 'N/A',
                simHeight: responseData.height || 'N/A',
                simBlood: responseData.blood || 'N/A',
                simOccupation: responseData.occupation || 'N/A',
                imageUrl: result.details.data?.image_url || '',
            };
    
            setSelectedQuota(updateQuota);
            setData(data);
            setShowResult(true);
            setErrorMessage('');
            setSelectedImageName('');
            setResultImageLabel(selectedImageName);
    
            if (result.details.data?.image_url) {
                const imageFileName = result.details.data.image_url.split('/').pop();
                return fetchImage(imageFileName);
            }
        })
        .catch(error => {
            console.error('🔥 Request Failed:', error);
            setErrorMessage(error.message);
            setShowResult(false);
        })
        .finally(() => {
            setIsLoading(false);
        });
    };
    
    
    // The fetchImage function you already have in your code
    const fetchImage = async (imageFileName) => {
        setIsLoading(true);
        try {
            const response = await fetch(`${BASE_URL}/preview/image/${imageFileName}`, {
                method: 'GET',
                headers: {
                    'accept': 'application/json',
                    'x-api-key': API_KEY,
                }
            });
    
            if (!response.ok) {
                const errorDetails = await response.json();
                console.error('Image fetch error details:', errorDetails);
                setErrorMessage('Failed to fetch image, please try again.');
                return;
            }
    
            // Get the image blob
            const imageBlob = await response.blob();
            const imageData = URL.createObjectURL(imageBlob); // Create object URL from the blob
    
            // Debugging: Make sure imageData is correct
            console.log('Fetched image URL:', imageData);
    
            setImageUrl(imageData); // Update imageUrl state with the fetched image data
        } catch (error) {
            console.error('Error fetching image:', error);
            setErrorMessage(error.message);
        } finally {
            setIsLoading(false);
        }
    };     

    
    const styles = {
        selectWrapper: {
            position: 'relative',
            display: 'inline-block',
            width: '100%',
        },
        select: {
            fontSize: '16px',
            padding: '10px',
            width: '100%',
            borderRadius: '4px',
            border: '1px solid #ccc',
        },
        remainingQuota: {
            display: 'flex',
            alignItems: 'center',
        },
        quotaText: {
            fontSize: '24px',
            fontWeight: '600',
        },
        timesText: {
            fontSize: '16px',
            fontWeight: '300',
        },
        customLabel: {
            fontSize: '18px',
            fontWeight: '600',
            color: '#1f2d3d',
        },
        uploadWrapper: {
            marginTop: '1rem',
        },
        uploadArea: {
            backgroundColor: '#e6f2ff',
            height: !isMobile? '30svh' : '50svh',
            cursor: 'pointer',
            marginTop: '1rem',
            paddingTop: '22px',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            border: '1px solid #ced4da',
            borderRadius: '0.25rem',
            textAlign: 'center',
        },
        uploadIcon: {
            fontSize: '40px',
            color: '#0542cc',
            marginBottom: '10px',
        },
        uploadText: {
            color: '#1f2d3d',
            fontWeight: '400',
            fontSize: '16px',
        },
        browseLink: {
            color: '#0542cc',
            textDecoration: 'none',
            fontWeight: 'bold',
        },
        uploadError: {
            color: 'red',
            fontSize: '12px',
            marginTop: '10px',
        },
        errorContainer: {
            marginTop: '10px',
            padding: '10px',
            backgroundColor: '#f8d7da',
            border: '1px solid #f5c6cb',
            borderRadius: '4px',
        },
        errorText: {
            color: '#721c24',
            fontSize: '14px',
            margin: '0',
        },loadingOverlay: {
            position: 'fixed',  // Gunakan fixed untuk overlay penuh layar
            top: 0, 
            left: 0, 
            right: 0, 
            bottom: 0,  // Pastikan menutupi seluruh layar
            display: 'flex',
            justifyContent: 'center',  // Posisikan spinner di tengah secara horizontal
            alignItems: 'center',      // Posisikan spinner di tengah secara vertikal
            backgroundColor: 'rgba(0, 0, 0, 0.5)',  // Semitransparan di background
            color: 'white',
            fontSize: '24px',
            zIndex: 1000,  // Pastikan overlay muncul di atas konten lainnya
        },
        spinner: {
            border: '4px solid #f3f3f3', // Border gray untuk spinner
            borderTop: '4px solid #3498db', // Border biru untuk spinner
            borderRadius: '50%',  // Membuat spinner bulat
            width: '50px', // Ukuran spinner
            height: '50px', // Ukuran spinner
            animation: 'spin 2s linear infinite', // Menambahkan animasi spin
        },
        loadingText: {
            marginLeft: '20px',
        },
        tableStyle: {
            width: '100%',
            borderCollapse: 'collapse',
            marginTop: '20px',
        },
        tableCell: {
            padding: '8px 15px',
            border: '1px solid #ccc',
            textAlign: 'left',
        },
    };

    if (!isServer) {
        return (
            <div style={{ textAlign: 'center', marginTop: '50px' }}>
                <img 
                    src={ServerDownAnimation} 
                    alt="Server Down Animation" 
                    style={{ width: '18rem', height: '18rem', marginBottom: '20px' }} 
                />
                <h2 style={{ color: 'red' }}>Server tidak dapat diakses</h2>
                <p>{errorMessage || 'Silakan periksa koneksi internet Anda atau coba lagi nanti.'}</p>
                <button 
                    onClick={() => window.location.reload()} 
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#0542cc',
                        color: '#fff',
                        border: 'none',
                        borderRadius: '5px',
                        cursor: 'pointer'
                    }}>
                    Coba Lagi
                </button>
            </div>
        );
    }    

    return (
        <div className="container" style={{ marginTop: '3%' }}>
            {/* Inject keyframes for the spinner */}
            <style>
            {`
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            `}
            </style>
            {isLoading && (
                <div style={styles.loadingOverlay}>
                    <div style={styles.spinner}></div>
                    <p style={styles.loadingText}>Loading...</p>
                </div>
            )}

            <div className="row-card border-left border-primary shadow mb-4" style={{ backgroundColor: '#E2FBEA' }}>
                <div className="d-flex flex-column justify-content-start align-items-start p-4">
                    <div>
                        <h4 className="mb-3 text-start"><i className="fas fa-warning fa-bold me-3"></i>Alert</h4>
                        <p className="mb-0 text-start">
                            Get started now by creating an Application ID and explore all the demo services available on the dashboard.
                            Experience the ease and flexibility of trying out all our features firsthand.
                        </p>
                    </div>
                    <div className="d-flex flex-row mt-3">
                        <Link to="/createApps" style={{ textDecoration: 'none' }}>
                            <button className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
                                <i className="fas fa-plus text-white me-2"></i>
                                <p className="text-white mb-0">Create New App ID</p>
                            </button>
                        </Link>
                    </div>
                </div>
            </div>

            <div style={{ padding: '20px', border: '0.1px solid rgba(0, 0, 0, 0.2)', borderLeft: '4px solid #0542cc', borderRadius: '10px', width: '100%' }}>
                <div className="form-group row align-items-center">
                    <div className="col-md-6">
                        <div style={styles.selectWrapper}>
                        <Select
                            id="applicationId"
                            value={applicationOptions.find(option => option.value === applicationId)}
                            onChange={handleApplicationChange}
                            options={applicationOptions}
                            placeholder="Select Application ID"
                            isSearchable
                            menuPortalTarget={document.body}
                            menuPlacement="auto"
                            inputValue={inputValueApplication}
                            onInputChange={handleInputChangeApplication} // Limit input length for Application ID
                        />
                        </div>
                        {validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
                    </div>
                    <div className="col-md-6">
                        <p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
                            Remaining Quota
                        </p>
                        <div style={styles.remainingQuota}>
                            <span style={styles.quotaText}>{selectedQuota}</span>
                            <span style={styles.timesText}>(times)</span>
                        </div>
                    </div>
                </div>

                {/* Image Upload */}
                <div className="col-md-6">
                    <div className="form-group mt-4">
                        <CustomLabel htmlFor="imageInput" style={styles.customLabel}>
                            Upload Image (SIM)
                        </CustomLabel>
                        <div style={styles.uploadWrapper}>
                            {/* Drag and Drop File Input */}
                            <div
                                style={styles.uploadArea}
                                onDrop={(e) => {
                                    e.preventDefault();
                                    handleFileDrop(e.dataTransfer.files);
                                }}
                                onDragOver={(e) => e.preventDefault()}
                            >
                                <FontAwesomeIcon icon={faCloudUploadAlt} style={styles.uploadIcon} />
                                <p style={styles.uploadText}>Drag and Drop Here</p>
                                <p>Or</p>
                                <a href="#" onClick={() => fileInputRef.current.click()} style={styles.browseLink}>Browse</a>
                                <p className="text-muted" style={styles.uploadText}>Recommended size: 320x200 (Max File Size: 2MB)</p>
                                <p className="text-muted" style={styles.uploadText}>Supported file types: JPG, JPEG, PNG</p>
                            </div>

                            {/* File Input */}
                            <input
                                ref={fileInputRef}
                                type="file"
                                id="imageInput"
                                className="form-control"
                                style={{ display: 'none' }}
                                accept="image/jpeg, image/jpg"
                                onChange={(e) => handleImageUpload(e.target.files[0])}
                            />

                            {selectedImageName && (
                                <div className="mt-3">
                                    <p><strong>File:</strong> {selectedImageName}</p>
                                    <button className="btn btn-danger" onClick={handleImageCancel}>
                                        <FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
                                    </button>
                                </div>
                            )}
                            {/* Display validation errors */}
                            {validationErrors.file && <p style={styles.errorText}>{validationErrors.file}</p>}
                            {imageError && <p style={styles.errorText}>{imageError}</p>}
                        </div>
                    </div>
                </div>

                <div className="col-md-12 d-flex justify-content-end mt-4">
                    <button
                        className="btn btn-primary"
                        onClick={handleCheckClick}
                        disabled={isLoading || !file || !applicationId || validationErrors.file || validationErrors.applicationId}
                    >
                        <FontAwesomeIcon icon={faImage} className="me-2" />
                        Check SIM
                    </button>
                </div>

                {errorMessage && (
                    <div style={styles.errorContainer}>
                        <p style={styles.errorText}>{errorMessage}</p>
                    </div>
                )}
            </div>

            {showResult && data && (                
                <div className="mt-5">
                    <h4>OCR SIM Result</h4>
                    <div className="row">
                        {/* Gambar di kolom pertama */}
                        <div className="col-md-6">
                            <img
                                src={imageUrl || "path-to-your-image"}
                                alt="SIM Image"
                                style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
                                className="img-fluid"  // Menambahkan kelas Bootstrap img-fluid untuk responsif
                            />
                            <p style={{ marginTop: '10px' }}>
                                File Name: {resultImageLabel} {/* Display the resultImageLabel here */}
                            </p>
                        </div>

                        {/* Tabel di kolom kedua */}
                        <div className="col-md-6">
                            <table style={styles.tableStyle}>
                                <tbody>
                                    <tr>
                                        <td style={styles.tableCell}>SIM</td>
                                        <td style={styles.tableCell}>{data.sim}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Nama</td>
                                        <td style={styles.tableCell}>{data.simName}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Alamat</td>
                                        <td style={styles.tableCell}>{data.simAddress}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Tipe</td>
                                        <td style={styles.tableCell}>{data.simType}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Masa Berlaku</td>
                                        <td style={styles.tableCell}>{data.simValidUntil}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Domisili</td>
                                        <td style={styles.tableCell}>{data.simDomain}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Tempat Lahir</td>
                                        <td style={styles.tableCell}>{data.simBirthPlace}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Tanggal Lahir</td>
                                        <td style={styles.tableCell}>{data.simDob}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Jenis Kelamin</td>
                                        <td style={styles.tableCell}>{data.simGender}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>TInggi Badan</td>
                                        <td style={styles.tableCell}>{data.simHeight}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Golongan Darah</td>
                                        <td style={styles.tableCell}>{data.simBlood}</td>
                                    </tr>
                                    <tr>
                                        <td style={styles.tableCell}>Pekerjaan</td>
                                        <td style={styles.tableCell}>{data.simOccupation}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
               
                </div>
            )}
        </div>
    );
};

export default Verify;

