@extends('layouts.app')

@section('title', '차량일지')

@push('styles')
<style>
    @media print { .no-print { display: none !important; } }
</style>
@endpush

@section('content')
<div id="vehicle-logs-root"></div>
@endsection

@push('scripts')
@include('partials.react-cdn')
<script src="https://unpkg.com/lucide@0.469.0?v={{ time() }}"></script>
@verbatim
<script type="text/babel">
const { useState, useRef, useEffect } = React;

const createIcon = (name) => {
    const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck','arrow-up-circle':'CircleArrowUp','arrow-down-circle':'CircleArrowDown'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
    const _c = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    return ({ className = "w-5 h-5", ...props }) => {
        if (!_def) return null;
        const [, attrs, children = []] = _def;
        const sp = { className };
        Object.entries(attrs).forEach(([k, v]) => { sp[_c(k)] = v; });
        Object.assign(sp, props);
        return React.createElement("svg", sp, ...children.map(([tag, ca], i) => {
            const cp = { key: i };
            if (ca) Object.entries(ca).forEach(([k, v]) => { cp[_c(k)] = v; });
            return React.createElement(tag, cp);
        }));
    };
};

const BookOpen = createIcon('book-open');
const Plus = createIcon('plus');
const Search = createIcon('search');
const Download = createIcon('download');
const X = createIcon('x');
const Edit = createIcon('edit');
const Trash2 = createIcon('trash-2');
const Car = createIcon('car');
const MapPin = createIcon('map-pin');
const User = createIcon('user');
const Calendar = createIcon('calendar');
const Navigation = createIcon('navigation');
const Copy = createIcon('copy');
const ArrowUpDown = createIcon('arrow-up-down');

function VehicleLogManagement() {
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);

    // 차량 목록
    const [vehicles, setVehicles] = useState([]);
    const [selectedVehicle, setSelectedVehicle] = useState('all');

    // 운행기록
    const [logs, setLogs] = useState([]);

    // 필터
    const now = new Date();
    const [filterYear, setFilterYear] = useState(now.getFullYear());
    const [filterMonth, setFilterMonth] = useState(now.getMonth() + 1);
    const [filterTripType, setFilterTripType] = useState('all');
    const [searchTerm, setSearchTerm] = useState('');

    // 모달
    const [showModal, setShowModal] = useState(false);
    const [modalMode, setModalMode] = useState('add');
    const [editingItem, setEditingItem] = useState(null);

    // 통계
    const [summary, setSummary] = useState({ byType: {}, total: { count: 0, distance: 0 } });

    const tripTypes = [
        { value: 'commute_to', label: '출근용', color: 'bg-blue-100 text-blue-700' },
        { value: 'commute_from', label: '퇴근용', color: 'bg-indigo-100 text-indigo-700' },
        { value: 'business', label: '업무용', color: 'bg-green-100 text-green-700' },
        { value: 'personal', label: '비업무', color: 'bg-gray-100 text-gray-700' }
    ];

    const locationTypes = [
        { value: 'home', label: '자택' },
        { value: 'office', label: '회사' },
        { value: 'client', label: '거래처' },
        { value: 'other', label: '기타' }
    ];

    const noteOptions = ['거래처방문', '제조시설등', '회의참석', '판촉활동', '교육등'];

    const years = Array.from({ length: 5 }, (_, i) => now.getFullYear() - i);
    const months = Array.from({ length: 12 }, (_, i) => i + 1);

    // 데이터 로드
    const loadVehicles = async () => {
        try {
            const response = await fetch('/finance/vehicle-logs/vehicles');
            const result = await response.json();
            if (result.success) {
                setVehicles(result.data.map(v => ({
                    id: v.id,
                    plateNumber: v.plate_number,
                    model: v.model,
                    ownershipType: v.ownership_type,
                    mileage: v.mileage || 0
                })));
            }
        } catch (error) {
            console.error('차량 로드 실패:', error);
        }
    };

    const loadLogs = async () => {
        try {
            const params = new URLSearchParams({
                year: filterYear,
                month: filterMonth,
                trip_type: filterTripType,
                vehicle_id: selectedVehicle,
                search: searchTerm
            });
            const response = await fetch(`/finance/vehicle-logs/list?${params}`);
            const result = await response.json();
            if (result.success) {
                setLogs(result.data);
            }
        } catch (error) {
            console.error('운행기록 로드 실패:', error);
        } finally {
            setLoading(false);
        }
    };

    const loadSummary = async () => {
        try {
            const params = new URLSearchParams({
                year: filterYear,
                month: filterMonth,
                vehicle_id: selectedVehicle
            });
            const response = await fetch(`/finance/vehicle-logs/summary?${params}`);
            const result = await response.json();
            if (result.success) {
                setSummary(result.data);
            }
        } catch (error) {
            console.error('통계 로드 실패:', error);
        }
    };

    useEffect(() => {
        loadVehicles();
    }, []);

    useEffect(() => {
        loadLogs();
        loadSummary();
    }, [filterYear, filterMonth, filterTripType, selectedVehicle]);

    const handleSearch = () => {
        loadLogs();
    };

    // 헬퍼 함수
    const formatCurrency = (num) => num ? num.toLocaleString() : '0';

    const getTripTypeInfo = (type) => {
        return tripTypes.find(t => t.value === type) || { label: type, color: 'bg-gray-100 text-gray-700' };
    };

    const getLocationTypeLabel = (type) => {
        const found = locationTypes.find(t => t.value === type);
        return found ? found.label : type || '';
    };

    const getSelectedVehicleInfo = () => {
        if (selectedVehicle === 'all') return null;
        return vehicles.find(v => v.id === parseInt(selectedVehicle));
    };

    // 폼 상태
    const initialFormState = {
        logDate: new Date().toISOString().split('T')[0],
        vehicleId: '',
        department: '',
        driverName: '',
        tripType: 'business',
        departureType: 'office',
        departureName: '',
        departureAddress: '',
        arrivalType: 'client',
        arrivalName: '',
        arrivalAddress: '',
        distanceKm: '',
        note: ''
    };
    const [formData, setFormData] = useState(initialFormState);

    // 운행기록 CRUD
    const handleAdd = () => {
        setModalMode('add');
        setFormData({
            ...initialFormState,
            vehicleId: selectedVehicle !== 'all' ? selectedVehicle : (vehicles[0]?.id || '')
        });
        setShowModal(true);
    };

    const handleEdit = (item) => {
        setModalMode('edit');
        setEditingItem(item);
        setFormData({
            logDate: item.logDate,
            vehicleId: item.vehicleId,
            department: item.department || '',
            driverName: item.driverName,
            tripType: item.tripType,
            departureType: item.departureType || '',
            departureName: item.departureName || '',
            departureAddress: item.departureAddress || '',
            arrivalType: item.arrivalType || '',
            arrivalName: item.arrivalName || '',
            arrivalAddress: item.arrivalAddress || '',
            distanceKm: item.distanceKm,
            note: item.note || ''
        });
        setShowModal(true);
    };

    const handleSave = async () => {
        if (!formData.vehicleId || !formData.driverName || !formData.distanceKm) {
            alert('차량, 운전자명, 주행거리는 필수입니다.');
            return;
        }
        setSaving(true);
        try {
            const payload = {
                vehicle_id: parseInt(formData.vehicleId),
                log_date: formData.logDate,
                department: formData.department,
                driver_name: formData.driverName,
                trip_type: formData.tripType,
                departure_type: formData.departureType || null,
                departure_name: formData.departureName,
                departure_address: formData.departureAddress,
                arrival_type: formData.arrivalType || null,
                arrival_name: formData.arrivalName,
                arrival_address: formData.arrivalAddress,
                distance_km: parseInt(formData.distanceKm) || 0,
                note: formData.note
            };
            const url = modalMode === 'add' ? '/finance/vehicle-logs' : `/finance/vehicle-logs/${editingItem.id}`;
            const method = modalMode === 'add' ? 'POST' : 'PUT';
            const response = await fetch(url, {
                method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(payload)
            });
            const result = await response.json();
            if (result.success) {
                await loadLogs();
                await loadSummary();
                setShowModal(false);
                setEditingItem(null);
            } else {
                alert(result.message || '저장에 실패했습니다.');
            }
        } catch (error) {
            console.error('저장 오류:', error);
            alert('저장 중 오류가 발생했습니다.');
        } finally {
            setSaving(false);
        }
    };

    // 복사 기능: 현재 데이터를 복사해서 새 기록 추가 모드로 전환
    const handleCopy = () => {
        setModalMode('add');
        setEditingItem(null);
    };

    // 출발지↔도착지 교환 + 출근↔퇴근 전환
    const handleSwapLocations = () => {
        setFormData(prev => {
            let newTripType = prev.tripType;
            if (prev.tripType === 'commute_to') newTripType = 'commute_from';
            else if (prev.tripType === 'commute_from') newTripType = 'commute_to';

            return {
                ...prev,
                tripType: newTripType,
                departureType: prev.arrivalType,
                departureName: prev.arrivalName,
                departureAddress: prev.arrivalAddress,
                arrivalType: prev.departureType,
                arrivalName: prev.departureName,
                arrivalAddress: prev.departureAddress,
            };
        });
    };

    const handleDelete = async (id) => {
        if (!confirm('정말 삭제하시겠습니까?')) return;
        try {
            const response = await fetch(`/finance/vehicle-logs/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            });
            const result = await response.json();
            if (result.success) {
                await loadLogs();
                await loadSummary();
                setShowModal(false);
            } else {
                alert(result.message || '삭제에 실패했습니다.');
            }
        } catch (error) {
            console.error('삭제 오류:', error);
            alert('삭제 중 오류가 발생했습니다.');
        }
    };

    const handleDownload = () => {
        const rows = [
            ['업무용승용차 운행기록부', `${filterYear}년 ${filterMonth}월`],
            [],
            ['날짜', '부서', '성명', '구분', '출발지분류', '출발지명', '출발지주소', '도착지분류', '도착지명', '도착지주소', '주행km', '비고'],
            ...logs.map(item => [
                item.logDate,
                item.department || '',
                item.driverName,
                getTripTypeInfo(item.tripType).label,
                getLocationTypeLabel(item.departureType),
                item.departureName || '',
                item.departureAddress || '',
                getLocationTypeLabel(item.arrivalType),
                item.arrivalName || '',
                item.arrivalAddress || '',
                item.distanceKm,
                item.note || ''
            ])
        ];
        const csvContent = rows.map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
        const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `운행기록부_${filterYear}년${filterMonth}월.csv`;
        link.click();
    };

    // 검색 필터링
    const filteredLogs = logs.filter(item => {
        if (!searchTerm) return true;
        const search = searchTerm.toLowerCase();
        return (item.driverName || '').toLowerCase().includes(search) ||
               (item.departureName || '').toLowerCase().includes(search) ||
               (item.arrivalName || '').toLowerCase().includes(search) ||
               (item.note || '').toLowerCase().includes(search);
    });

    const vehicleInfo = getSelectedVehicleInfo();

    return (
        <div className="bg-gray-50 min-h-screen">
            <header className="bg-white border-b border-gray-200 rounded-t-xl mb-6">
                <div className="px-6 py-4 flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <div className="p-2 bg-emerald-100 rounded-xl"><BookOpen className="w-6 h-6 text-emerald-600" /></div>
                        <div>
                            <h1 className="text-xl font-bold text-gray-900">차량일지</h1>
                            <p className="text-sm text-gray-500">업무용승용차 운행기록부</p>
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <button onClick={handleDownload} className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
                            <Download className="w-4 h-4" /><span className="text-sm">Excel</span>
                        </button>
                        <button onClick={handleAdd} className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg">
                            <Plus className="w-4 h-4" /><span className="text-sm font-medium">운행기록 등록</span>
                        </button>
                    </div>
                </div>
            </header>

            {/* 차량 선택 및 기본 정보 */}
            <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
                <div className="flex flex-wrap items-center gap-4">
                    <div className="flex items-center gap-2">
                        <Car className="w-5 h-5 text-gray-500" />
                        <select
                            value={selectedVehicle}
                            onChange={(e) => setSelectedVehicle(e.target.value)}
                            className="px-3 py-2 border border-gray-300 rounded-lg font-medium"
                        >
                            <option value="all">전체 차량</option>
                            {vehicles.map(v => (
                                <option key={v.id} value={v.id}>{v.plateNumber} ({v.model})</option>
                            ))}
                        </select>
                    </div>
                    {vehicleInfo && (
                        <div className="flex items-center gap-4 text-sm text-gray-600">
                            <span>차종: <strong>{vehicleInfo.model}</strong></span>
                            <span>현재 주행거리: <strong>{formatCurrency(vehicleInfo.mileage)}km</strong></span>
                        </div>
                    )}
                </div>
            </div>

            {/* 통계 카드 */}
            <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                <div className="bg-white rounded-xl border border-gray-200 p-4">
                    <div className="flex items-center justify-between mb-2">
                        <span className="text-sm text-gray-500">전체</span>
                        <Navigation className="w-5 h-5 text-gray-400" />
                    </div>
                    <p className="text-xl font-bold text-gray-900">{formatCurrency(summary.total?.distance || 0)}km</p>
                    <p className="text-xs text-gray-400 mt-1">{summary.total?.count || 0}건</p>
                </div>
                {tripTypes.map(type => {
                    const data = summary.byType?.[type.value] || { count: 0, distance: 0 };
                    return (
                        <div key={type.value} className="bg-white rounded-xl border border-gray-200 p-4">
                            <div className="flex items-center justify-between mb-2">
                                <span className={`text-sm ${type.color.split(' ')[1]}`}>{type.label}</span>
                            </div>
                            <p className="text-xl font-bold text-gray-900">{formatCurrency(data.distance)}km</p>
                            <p className="text-xs text-gray-400 mt-1">{data.count}건</p>
                        </div>
                    );
                })}
            </div>

            {/* 필터 */}
            <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
                <div className="flex flex-wrap items-center gap-4">
                    <div className="flex items-center gap-2">
                        <Calendar className="w-5 h-5 text-gray-400" />
                        <select value={filterYear} onChange={(e) => setFilterYear(parseInt(e.target.value))} className="px-5 py-2 border border-gray-300 rounded-lg min-w-[150px]">
                            {years.map(y => <option key={y} value={y}>{y}년</option>)}
                        </select>
                        <select value={filterMonth} onChange={(e) => setFilterMonth(parseInt(e.target.value))} className="px-5 py-2 border border-gray-300 rounded-lg min-w-[150px]">
                            {months.map(m => <option key={m} value={m}>{m}월</option>)}
                        </select>
                    </div>
                    <select value={filterTripType} onChange={(e) => setFilterTripType(e.target.value)} className="px-4 py-2 border border-gray-300 rounded-lg min-w-[120px]">
                        <option value="all">전체 구분</option>
                        {tripTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
                    </select>
                    <div className="flex-1 relative">
                        <Search className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
                        <input
                            type="text"
                            placeholder="운전자, 출발지, 도착지, 비고 검색..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500"
                        />
                    </div>
                </div>
            </div>

            {/* 운행기록 테이블 */}
            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full">
                        <thead className="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">날짜</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">차량</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">부서/성명</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">구분</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">출발지</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">도착지</th>
                                <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600">주행km</th>
                                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600">비고</th>
                                <th className="px-4 py-3 text-center text-xs font-semibold text-gray-600">관리</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100">
                            {loading ? (
                                <tr><td colSpan="9" className="px-6 py-12 text-center text-gray-400">로딩 중...</td></tr>
                            ) : filteredLogs.length === 0 ? (
                                <tr><td colSpan="9" className="px-6 py-12 text-center text-gray-400">운행기록이 없습니다.</td></tr>
                            ) : filteredLogs.map(item => {
                                const tripType = getTripTypeInfo(item.tripType);
                                return (
                                    <tr key={item.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => handleEdit(item)}>
                                        <td className="px-4 py-3 text-sm text-gray-600">{item.logDate}</td>
                                        <td className="px-4 py-3">
                                            <p className="text-sm font-medium text-gray-900">{item.plateNumber || '-'}</p>
                                            <p className="text-xs text-gray-400">{item.model || ''}</p>
                                        </td>
                                        <td className="px-4 py-3">
                                            <p className="text-sm text-gray-900">{item.driverName}</p>
                                            {item.department && <p className="text-xs text-gray-400">{item.department}</p>}
                                        </td>
                                        <td className="px-4 py-3">
                                            <span className={`px-2 py-1 rounded text-xs font-medium ${tripType.color}`}>{tripType.label}</span>
                                        </td>
                                        <td className="px-4 py-3">
                                            <p className="text-sm text-gray-900">{item.departureName || getLocationTypeLabel(item.departureType) || '-'}</p>
                                            {item.departureAddress && <p className="text-xs text-gray-400 truncate max-w-[150px]">{item.departureAddress}</p>}
                                        </td>
                                        <td className="px-4 py-3">
                                            <p className="text-sm text-gray-900">{item.arrivalName || getLocationTypeLabel(item.arrivalType) || '-'}</p>
                                            {item.arrivalAddress && <p className="text-xs text-gray-400 truncate max-w-[150px]">{item.arrivalAddress}</p>}
                                        </td>
                                        <td className="px-4 py-3 text-sm font-bold text-right text-emerald-600">{formatCurrency(item.distanceKm)}km</td>
                                        <td className="px-4 py-3 text-sm text-gray-600">{item.note || '-'}</td>
                                        <td className="px-4 py-3 text-center" onClick={(e) => e.stopPropagation()}>
                                            <button onClick={() => handleEdit(item)} className="p-1 text-gray-400 hover:text-blue-500"><Edit className="w-4 h-4" /></button>
                                            <button onClick={() => handleDelete(item.id)} className="p-1 text-gray-400 hover:text-rose-500"><Trash2 className="w-4 h-4" /></button>
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                        {filteredLogs.length > 0 && (
                            <tfoot className="bg-gray-50 border-t border-gray-200">
                                <tr>
                                    <td colSpan="6" className="px-4 py-3 text-sm font-semibold text-gray-700 text-right">합계</td>
                                    <td className="px-4 py-3 text-sm font-bold text-right text-emerald-700">
                                        {formatCurrency(filteredLogs.reduce((sum, item) => sum + item.distanceKm, 0))}km
                                    </td>
                                    <td colSpan="2"></td>
                                </tr>
                            </tfoot>
                        )}
                    </table>
                </div>
            </div>

            {/* 등록/수정 모달 */}
            {showModal && (
                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
                    <div className="bg-white rounded-xl p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
                        <div className="flex items-center justify-between mb-6">
                            <div className="flex items-center gap-3">
                                <h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '운행기록 등록' : '운행기록 수정'}</h3>
                                <div className="flex items-center gap-1">
                                    {modalMode === 'edit' && (
                                        <button
                                            type="button"
                                            onClick={handleCopy}
                                            className="flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:bg-blue-50 rounded border border-blue-200"
                                            title="이 기록을 복사하여 새로 추가"
                                        >
                                            <Copy className="w-3 h-3" />
                                            복사
                                        </button>
                                    )}
                                    <button
                                        type="button"
                                        onClick={handleSwapLocations}
                                        className="flex items-center gap-1 px-2 py-1 text-xs text-purple-600 hover:bg-purple-50 rounded border border-purple-200"
                                        title="출발지↔도착지 교환, 출근↔퇴근 전환"
                                    >
                                        <ArrowUpDown className="w-3 h-3" />
                                        출발↔도착
                                    </button>
                                </div>
                            </div>
                            <button onClick={() => setShowModal(false)} className="p-1 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-500" /></button>
                        </div>
                        <div className="space-y-4">
                            {/* 기본 정보 */}
                            <div className="grid grid-cols-3 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">날짜 *</label>
                                    <input
                                        type="date"
                                        value={formData.logDate}
                                        onChange={(e) => setFormData(prev => ({ ...prev, logDate: e.target.value }))}
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">차량 *</label>
                                    <select
                                        value={formData.vehicleId}
                                        onChange={(e) => setFormData(prev => ({ ...prev, vehicleId: e.target.value }))}
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                    >
                                        <option value="">선택하세요</option>
                                        {vehicles.map(v => <option key={v.id} value={v.id}>{v.plateNumber} ({v.model})</option>)}
                                    </select>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">구분 *</label>
                                    <select
                                        value={formData.tripType}
                                        onChange={(e) => setFormData(prev => ({ ...prev, tripType: e.target.value }))}
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                    >
                                        {tripTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
                                    </select>
                                </div>
                            </div>

                            <div className="grid grid-cols-3 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">부서</label>
                                    <input
                                        type="text"
                                        value={formData.department}
                                        onChange={(e) => setFormData(prev => ({ ...prev, department: e.target.value }))}
                                        placeholder="영업부"
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">운전자 *</label>
                                    <input
                                        type="text"
                                        value={formData.driverName}
                                        onChange={(e) => setFormData(prev => ({ ...prev, driverName: e.target.value }))}
                                        placeholder="홍길동"
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">주행거리 (km) *</label>
                                    <input
                                        type="number"
                                        value={formData.distanceKm}
                                        onChange={(e) => setFormData(prev => ({ ...prev, distanceKm: e.target.value }))}
                                        placeholder="0"
                                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-right"
                                    />
                                </div>
                            </div>

                            {/* 출발지 */}
                            <div className="border-t pt-4">
                                <h4 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                    <MapPin className="w-4 h-4 text-blue-500" /> 출발지
                                </h4>
                                <div className="grid grid-cols-3 gap-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">분류</label>
                                        <select
                                            value={formData.departureType}
                                            onChange={(e) => setFormData(prev => ({ ...prev, departureType: e.target.value }))}
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        >
                                            <option value="">선택</option>
                                            {locationTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
                                        </select>
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">출발지명</label>
                                        <input
                                            type="text"
                                            value={formData.departureName}
                                            onChange={(e) => setFormData(prev => ({ ...prev, departureName: e.target.value }))}
                                            placeholder="본사"
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">주소</label>
                                        <input
                                            type="text"
                                            value={formData.departureAddress}
                                            onChange={(e) => setFormData(prev => ({ ...prev, departureAddress: e.target.value }))}
                                            placeholder="서울시 강남구..."
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* 도착지 */}
                            <div className="border-t pt-4">
                                <h4 className="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                    <MapPin className="w-4 h-4 text-emerald-500" /> 도착지
                                </h4>
                                <div className="grid grid-cols-3 gap-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">분류</label>
                                        <select
                                            value={formData.arrivalType}
                                            onChange={(e) => setFormData(prev => ({ ...prev, arrivalType: e.target.value }))}
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        >
                                            <option value="">선택</option>
                                            {locationTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
                                        </select>
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">도착지명</label>
                                        <input
                                            type="text"
                                            value={formData.arrivalName}
                                            onChange={(e) => setFormData(prev => ({ ...prev, arrivalName: e.target.value }))}
                                            placeholder="거래처A"
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">주소</label>
                                        <input
                                            type="text"
                                            value={formData.arrivalAddress}
                                            onChange={(e) => setFormData(prev => ({ ...prev, arrivalAddress: e.target.value }))}
                                            placeholder="경기도 성남시..."
                                            className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* 비고 */}
                            <div className="border-t pt-4">
                                <label className="block text-sm font-medium text-gray-700 mb-1">비고</label>
                                <div className="flex flex-wrap gap-2 mb-2">
                                    {noteOptions.map(opt => (
                                        <button
                                            key={opt}
                                            type="button"
                                            onClick={() => setFormData(prev => ({ ...prev, note: opt }))}
                                            className={`px-3 py-1 text-sm rounded-full border ${formData.note === opt ? 'bg-emerald-100 border-emerald-500 text-emerald-700' : 'border-gray-300 text-gray-600 hover:bg-gray-50'}`}
                                        >
                                            {opt}
                                        </button>
                                    ))}
                                </div>
                                <input
                                    type="text"
                                    value={formData.note}
                                    onChange={(e) => setFormData(prev => ({ ...prev, note: e.target.value }))}
                                    placeholder="직접 입력"
                                    className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                />
                            </div>
                        </div>

                        <div className="flex gap-3 mt-6">
                            {modalMode === 'edit' && (
                                <button
                                    onClick={() => handleDelete(editingItem.id)}
                                    className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg"
                                >
                                    삭제
                                </button>
                            )}
                            <button
                                onClick={() => setShowModal(false)}
                                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
                            >
                                취소
                            </button>
                            <button
                                onClick={handleSave}
                                disabled={saving}
                                className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg disabled:opacity-50"
                            >
                                {saving ? '저장 중...' : (modalMode === 'add' ? '등록' : '저장')}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

const rootElement = document.getElementById('vehicle-logs-root');
if (rootElement) { ReactDOM.createRoot(rootElement).render(<VehicleLogManagement />); }
</script>
@endverbatim
@endpush
