import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '../../../shared/ui/Card';
import { Button } from '../../../shared/ui/Button';
import { Input } from '../../../shared/ui/Input';
import { Select } from '../../../shared/ui/Select';
import { ArrowLeft, Save, Upload } from 'lucide-react';
import { getCategories, getLocations, getIDRule } from './AssetSettingsPage';
import { assetApi, type Asset } from '../../../shared/api/assetApi';
import './AssetRegisterPage.css';

export function AssetRegisterPage() {
    const navigate = useNavigate();

    // Load Settings Data
    const categories = getCategories();
    const locations = getLocations();
    const idRule = getIDRule();

    const [formData, setFormData] = useState({
        id: '', // Asset ID (Auto-generated)
        name: '',
        categoryId: '', // Use ID for selection
        model: '',
        serialNo: '',
        locationId: '', // Use ID for selection
        manager: '',
        status: 'active',
        purchaseDate: new Date().toISOString().split('T')[0], // Default to today
        purchasePrice: '',
        image: null as File | null,
        imagePreview: '' as string,
        manufacturer: ''
    });

    // Auto-generate Asset ID
    useEffect(() => {
        // If category is required by rule but not selected, can't generate fully
        const hasCategoryRule = idRule.some(r => r.type === 'category');
        if (hasCategoryRule && !formData.categoryId) {
            setFormData(prev => ({ ...prev, id: '' }));
            return;
        }

        const category = categories.find(c => c.id === formData.categoryId);
        const year = formData.purchaseDate ? new Date(formData.purchaseDate).getFullYear().toString() : new Date().getFullYear().toString();

        // Build ID string based on Rule
        const generatedId = idRule.map(part => {
            if (part.type === 'company') return part.value; // e.g. HK
            if (part.type === 'custom') return part.value;
            if (part.type === 'separator') return part.value;
            if (part.type === 'year') return year;
            if (part.type === 'category') return category ? category.code : 'UNKNOWN';
            if (part.type === 'sequence') return part.value;
            return '';
        }).join('');

        const finalId = generatedId.replace('001', '001');

        setFormData(prev => ({ ...prev, id: finalId }));

    }, [formData.categoryId, formData.purchaseDate, idRule, categories]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setFormData(prev => ({
                    ...prev,
                    image: file,
                    imagePreview: reader.result as string
                }));
            };
            reader.readAsDataURL(file);
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        if (e) e.preventDefault();

        // Validation
        if (!formData.categoryId || !formData.name || !formData.locationId) {
            alert('필수 항목(카테고리, 자산명, 설치위치)을 입력해주세요.');
            return;
        }

        try {
            const selectedCategory = categories.find(c => c.id === formData.categoryId);
            const selectedLocation = locations.find(l => l.id === formData.locationId);

            let imageUrl = '';
            if (formData.image) {
                const uploadRes = await assetApi.uploadImage(formData.image);
                imageUrl = uploadRes.data.url;
            }

            const payload: Partial<Asset> = {
                id: formData.id,
                name: formData.name,
                category: selectedCategory ? selectedCategory.name : '미지정',
                model: formData.model,
                serialNumber: formData.serialNo,
                location: selectedLocation ? selectedLocation.name : '미지정',
                manager: formData.manager,
                status: formData.status as Asset['status'],
                purchaseDate: formData.purchaseDate,
                purchasePrice: formData.purchasePrice ? Number(formData.purchasePrice) : 0,
                manufacturer: formData.manufacturer,
                image: imageUrl
            };

            await assetApi.create(payload);

            alert(`자산이 성공적으로 등록되었습니다.\n자산번호: ${formData.id}`);
            navigate('/asset/list');
        } catch (error) {
            console.error('Failed to register asset:', error);
            alert('자산 등록에 실패했습니다. 서버 상태를 확인해주세요.');
        }
    };

    return (
        <div className="page-container">
            <div className="page-header-right">
                <h1 className="page-title-text">자산 등록</h1>
                <p className="page-subtitle">새로운 자산을 시스템에 등록합니다.</p>
            </div>

            <Card className="w-full shadow-sm border border-slate-200 mb-8">
                <form onSubmit={handleSubmit} className="p-2 sm:p-4 lg:p-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
                        {/* Basic Info Section */}
                        <div className="col-span-full flex items-center gap-3 border-b border-slate-100 pb-3 mb-2">
                            <div className="w-1 h-6 bg-blue-500 rounded-full"></div>
                            <h3 className="text-xl font-bold text-slate-800">기본 정보</h3>
                        </div>

                        <Select
                            label="카테고리 *"
                            name="categoryId"
                            value={formData.categoryId}
                            onChange={handleChange}
                            options={categories.map(c => ({ label: c.name, value: c.id }))}
                            placeholder="카테고리 선택"
                            required
                        />

                        <Input
                            label="자산 관리 번호 (자동 생성)"
                            name="id"
                            value={formData.id}
                            disabled
                            placeholder="카테고리 선택 시 자동 생성됨"
                            className="bg-slate-50 font-mono text-slate-600"
                        />

                        <Input
                            label="자산명 *"
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            placeholder="예: CNC 머시닝 센터"
                            required
                        />

                        <Input
                            label="제작사"
                            name="manufacturer"
                            value={formData.manufacturer}
                            onChange={handleChange}
                        />

                        <Input
                            label="모델명"
                            name="model"
                            value={formData.model}
                            onChange={handleChange}
                        />

                        <Input
                            label="시리얼 번호 / 규격"
                            name="serialNo"
                            value={formData.serialNo}
                            onChange={handleChange}
                        />

                        {/* Image Upload Field */}
                        <div className="ui-field-container col-span-full">
                            <label className="ui-label">자산 이미지</label>
                            <div className="w-full bg-white border border-slate-200 rounded-md shadow-sm p-4 flex flex-col items-start gap-4" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '16px' }}>
                                <div
                                    className="shrink-0 bg-slate-50 border border-slate-200 rounded-md overflow-hidden"
                                    style={{
                                        width: '400px',
                                        height: '350px',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center'
                                    }}
                                >
                                    {formData.imagePreview ? (
                                        <img
                                            src={formData.imagePreview}
                                            alt="Preview"
                                            className="w-full h-full object-contain"
                                        />
                                    ) : (
                                        <div
                                            className="text-slate-300"
                                            style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'center',
                                                justifyContent: 'center',
                                                width: '100%',
                                                height: '100%'
                                            }}
                                        >
                                            <Upload size={32} strokeWidth={1.5} />
                                        </div>
                                    )}
                                </div>

                                <div className="flex flex-row items-center flex-wrap w-full max-w-[600px]" style={{ gap: '20px' }}>
                                    <label htmlFor="image-upload" className="ui-btn ui-btn-sm ui-btn-secondary cursor-pointer shrink-0">
                                        파일 선택
                                    </label>

                                    <span className="text-sm text-slate-600 font-medium truncate max-w-[200px]">
                                        {formData.image ? formData.image.name : '선택된 파일 없음'}
                                    </span>

                                    <span className="text-sm text-slate-400 border-l border-slate-300 pl-4" style={{ paddingLeft: '20px' }}>
                                        지원 형식: JPG, PNG, GIF (최대 5MB)
                                    </span>

                                    <input
                                        id="image-upload"
                                        type="file"
                                        style={{ display: 'none' }}
                                        accept="image/*"
                                        onChange={handleImageChange}
                                    />
                                </div>
                            </div>
                        </div>

                        {/* Management Info Section */}
                        <div className="col-span-full flex items-center gap-3 border-b border-slate-100 pb-3 mb-2 mt-8">
                            <div className="w-1 h-6 bg-blue-500 rounded-full"></div>
                            <h3 className="text-xl font-bold text-slate-800">관리 정보</h3>
                        </div>

                        <Select
                            label="설치 위치 / 보관 장소 *"
                            name="locationId"
                            value={formData.locationId}
                            onChange={handleChange}
                            options={locations.map(l => ({ label: l.name, value: l.id }))}
                            placeholder="위치 선택"
                            required
                        />

                        <Input
                            label="관리자 / 부서"
                            name="manager"
                            value={formData.manager}
                            onChange={handleChange}
                        />

                        <Select
                            label="초기 상태"
                            name="status"
                            value={formData.status}
                            onChange={handleChange}
                            options={[
                                { label: '정상 가동 (Active)', value: 'active' },
                                { label: '대기 (Idle)', value: 'idle' },
                                { label: '설치 중 (Installing)', value: 'installing' },
                                { label: '점검 중 (Maintenance)', value: 'maintain' }
                            ]}
                        />

                        <div className="col-span-1"></div>

                        {/* Purchasing Info Section */}
                        <div className="col-span-full flex items-center gap-3 border-b border-slate-100 pb-3 mb-2 mt-8">
                            <div className="w-1 h-6 bg-blue-500 rounded-full"></div>
                            <h3 className="text-xl font-bold text-slate-800">도입 정보</h3>
                        </div>

                        <Input
                            label="도입일"
                            name="purchaseDate"
                            type="date"
                            value={formData.purchaseDate}
                            onChange={handleChange}
                        />

                        <Input
                            label="구입 가격 (KRW)"
                            name="purchasePrice"
                            type="number"
                            value={formData.purchasePrice}
                            onChange={handleChange}
                            placeholder="0"
                        />
                    </div>

                    {/* Bottom Action Buttons */}
                    <div className="form-actions-footer">
                        <Button
                            variant="secondary"
                            onClick={() => navigate(-1)}
                            icon={<ArrowLeft size={16} />}
                        >
                            취소
                        </Button>
                        <Button
                            onClick={handleSubmit}
                            icon={<Save size={16} />}
                        >
                            저장
                        </Button>
                    </div>
                </form>
            </Card>
        </div>
    );
}