@extends('layouts.app')

@section('title', '고객사 관리')

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

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="customers-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 Users = createIcon('users');
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 Building = createIcon('building');
const Phone = createIcon('phone');
const Mail = createIcon('mail');
const MapPin = createIcon('map-pin');
const ScanLine = createIcon('scan-line');

function CustomersManagement() {
    const [customers, setCustomers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState(false);
    const [stats, setStats] = useState({ total: 0, active: 0, vip: 0, inactive: 0 });
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    const [searchTerm, setSearchTerm] = useState('');
    const [filterGrade, setFilterGrade] = useState('all');
    const [filterStatus, setFilterStatus] = useState('all');

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

    const grades = ['VIP', 'Gold', 'Silver', 'Bronze'];
    const industries = ['IT/소프트웨어', '제조업', '서비스업', '유통업', '금융업', '기타'];

    const initialFormState = {
        name: '',
        bizNo: '',
        ceo: '',
        industry: 'IT/소프트웨어',
        grade: 'Silver',
        contact: '',
        email: '',
        address: '',
        manager: '',
        managerPhone: '',
        status: 'active',
        memo: ''
    };
    const [formData, setFormData] = useState(initialFormState);
    const [ocrLoading, setOcrLoading] = useState(false);
    const [ocrHighlightFields, setOcrHighlightFields] = useState([]);
    const ocrFileRef = useRef(null);
    const ocrCls = (field) => ocrHighlightFields.includes(field) ? ' ring-2 ring-amber-400 bg-amber-50 transition-all' : ' transition-all';

    const fetchCustomers = async () => {
        setLoading(true);
        try {
            const res = await fetch('/finance/customers/list');
            const data = await res.json();
            if (data.success) {
                setCustomers(data.data);
                setStats(data.stats);
            }
        } catch (err) {
            console.error('조회 실패:', err);
        } finally {
            setLoading(false);
        }
    };

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

    const filteredCustomers = customers.filter(item => {
        const matchesSearch = (item.name || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
                             (item.ceo || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
                             (item.manager || '').toLowerCase().includes(searchTerm.toLowerCase());
        const matchesGrade = filterGrade === 'all' || item.grade === filterGrade;
        const matchesStatus = filterStatus === 'all' || item.status === filterStatus;
        return matchesSearch && matchesGrade && matchesStatus;
    });

    const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
    const handleEdit = (item) => {
        setModalMode('edit');
        setEditingItem(item);
        const safeItem = {};
        Object.keys(initialFormState).forEach(key => { safeItem[key] = item[key] ?? ''; });
        setFormData(safeItem);
        setShowModal(true);
    };
    const handleSave = async () => {
        if (!formData.name) { alert('회사명을 입력해주세요.'); return; }
        setSaving(true);
        try {
            const url = modalMode === 'add' ? '/finance/customers/store' : `/finance/customers/${editingItem.id}`;
            const res = await fetch(url, {
                method: modalMode === 'add' ? 'POST' : 'PUT',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify(formData),
            });
            const data = await res.json();
            if (!res.ok) {
                const errors = data.errors ? Object.values(data.errors).flat().join('\n') : data.message;
                alert(errors || '저장에 실패했습니다.');
                return;
            }
            setShowModal(false);
            setEditingItem(null);
            fetchCustomers();
        } catch (err) {
            console.error('저장 실패:', err);
            alert('저장에 실패했습니다.');
        } finally {
            setSaving(false);
        }
    };
    const handleDelete = async (id) => {
        if (!confirm('정말 삭제하시겠습니까?')) return;
        try {
            const res = await fetch(`/finance/customers/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrfToken },
            });
            if (res.ok) {
                setShowModal(false);
                fetchCustomers();
            }
        } catch (err) {
            console.error('삭제 실패:', err);
            alert('삭제에 실패했습니다.');
        }
    };

    const handleDownload = () => {
        const rows = [['고객사 관리'], [], ['회사명', '사업자번호', '대표자', '업종', '등급', '연락처', '이메일', '담당자', '상태'],
            ...filteredCustomers.map(item => [item.name, item.bizNo, item.ceo, item.industry, item.grade, item.contact, item.email, item.manager, item.status === 'active' ? '활성' : '비활성'])];
        const csvContent = rows.map(row => row.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 = '고객사목록.csv'; link.click();
    };

    const handleOcr = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(file.type)) {
            alert('JPEG, PNG, GIF, WebP 이미지만 업로드 가능합니다.'); return;
        }
        if (file.size > 5 * 1024 * 1024) {
            alert('이미지 크기는 5MB 이하여야 합니다.'); return;
        }
        ocrFileRef.current.value = '';
        setOcrLoading(true);
        const reader = new FileReader();
        reader.onload = async () => {
            try {
                const res = await fetch('/finance/customers/ocr', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                    body: JSON.stringify({ image: reader.result }),
                });
                const data = await res.json();
                if (data.ok && data.data) {
                    const filled = [];
                    setFormData(prev => {
                        const updated = { ...prev };
                        Object.keys(data.data).forEach(key => {
                            if (data.data[key]) { updated[key] = data.data[key]; filled.push(key); }
                        });
                        return updated;
                    });
                    setOcrHighlightFields(filled);
                    setTimeout(() => setOcrHighlightFields([]), 2000);
                } else {
                    alert(data.message || 'OCR 인식에 실패했습니다.');
                }
            } catch (err) {
                console.error('OCR 실패:', err);
                alert('OCR 처리에 실패했습니다.');
            } finally {
                setOcrLoading(false);
            }
        };
        reader.readAsDataURL(file);
    };

    const getGradeColor = (grade) => {
        const colors = { VIP: 'bg-purple-100 text-purple-700', Gold: 'bg-amber-100 text-amber-700', Silver: 'bg-gray-100 text-gray-700', Bronze: 'bg-orange-100 text-orange-700' };
        return colors[grade] || 'bg-gray-100 text-gray-700';
    };

    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-blue-100 rounded-xl"><Users className="w-6 h-6 text-blue-600" /></div>
                        <div><h1 className="text-xl font-bold text-gray-900">고객사 관리</h1><p className="text-sm text-gray-500">Customer Management</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-blue-600 hover:bg-blue-700 text-white rounded-lg"><Plus className="w-4 h-4" /><span className="text-sm font-medium">고객사 등록</span></button>
                    </div>
                </div>
            </header>

            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div className="bg-white rounded-xl border border-gray-200 p-6">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">총 고객사</span><Building className="w-5 h-5 text-gray-400" /></div>
                    <p className="text-2xl font-bold text-gray-900">{stats.total}개</p>
                </div>
                <div className="bg-white rounded-xl border border-blue-200 p-6 bg-blue-50/30">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-blue-700">활성 고객</span></div>
                    <p className="text-2xl font-bold text-blue-600">{stats.active}개</p>
                </div>
                <div className="bg-white rounded-xl border border-purple-200 p-6">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-purple-700">VIP 고객</span></div>
                    <p className="text-2xl font-bold text-purple-600">{stats.vip}개</p>
                </div>
                <div className="bg-white rounded-xl border border-gray-200 p-6">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-gray-500">비활성</span></div>
                    <p className="text-2xl font-bold text-gray-900">{stats.inactive}개</p>
                </div>
            </div>

            <div className="bg-white rounded-xl border border-gray-200 p-4 mb-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="md:col-span-2 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)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
                    </div>
                    <select value={filterGrade} onChange={(e) => setFilterGrade(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg"><option value="all">전체 등급</option>{grades.map(g => <option key={g} value={g}>{g}</option>)}</select>
                    <div className="flex gap-1">
                        {['all', 'active', 'inactive'].map(status => (
                            <button key={status} onClick={() => setFilterStatus(status)} className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium ${filterStatus === status ? (status === 'active' ? 'bg-blue-600 text-white' : status === 'inactive' ? 'bg-gray-600 text-white' : 'bg-gray-800 text-white') : 'bg-gray-100 text-gray-600'}`}>
                                {status === 'all' ? '전체' : status === 'active' ? '활성' : '비활성'}
                            </button>
                        ))}
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {loading ? (
                    <div className="col-span-3 py-12 text-center text-gray-400">
                        <div className="flex items-center justify-center gap-2">
                            <svg className="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                            데이터를 불러오는 중...
                        </div>
                    </div>
                ) : filteredCustomers.map(item => (
                    <div key={item.id} onClick={() => handleEdit(item)} className="bg-white rounded-xl border border-gray-200 p-6 cursor-pointer hover:shadow-lg transition-shadow">
                        <div className="flex items-start justify-between mb-4">
                            <div>
                                <h3 className="font-bold text-gray-900">{item.name}</h3>
                                <p className="text-sm text-gray-500">{item.industry}</p>
                            </div>
                            <span className={`px-2 py-1 rounded text-xs font-medium ${getGradeColor(item.grade)}`}>{item.grade}</span>
                        </div>
                        <div className="space-y-2 text-sm">
                            <div className="flex items-center gap-2 text-gray-600"><Building className="w-4 h-4" /><span>대표: {item.ceo}</span></div>
                            <div className="flex items-center gap-2 text-gray-600"><Phone className="w-4 h-4" /><span>{item.contact}</span></div>
                            <div className="flex items-center gap-2 text-gray-600"><Mail className="w-4 h-4" /><span className="truncate">{item.email}</span></div>
                        </div>
                        <div className="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center">
                            <span className="text-sm text-gray-500">담당: {item.manager}</span>
                            <span className={`px-2 py-1 rounded-full text-xs font-medium ${item.status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-500'}`}>
                                {item.status === 'active' ? '활성' : '비활성'}
                            </span>
                        </div>
                    </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-lg mx-4 max-h-[90vh] overflow-y-auto">
                        <div className="flex items-center justify-between mb-6">
                            <h3 className="text-lg font-bold text-gray-900">{modalMode === 'add' ? '고객사 등록' : '고객사 수정'}</h3>
                            <div className="flex items-center gap-2">
                                <input type="file" ref={ocrFileRef} accept="image/*" onChange={handleOcr} className="hidden" />
                                <button onClick={() => ocrFileRef.current?.click()} disabled={ocrLoading} className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-amber-50 text-amber-700 border border-amber-300 rounded-lg hover:bg-amber-100 disabled:opacity-50">
                                    {ocrLoading ? <svg className="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> : <ScanLine className="w-4 h-4" />}
                                    {ocrLoading ? 'AI 분석중...' : '사업자등록증'}
                                </button>
                                <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>
                        <div className="space-y-4">
                            <div><label className="block text-sm font-medium text-gray-700 mb-1">회사명 *</label><input type="text" value={formData.name} onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))} placeholder="(주)회사명" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('name')}`} /></div>
                            <div className="grid grid-cols-2 gap-4">
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">사업자번호</label><input type="text" value={formData.bizNo} onChange={(e) => setFormData(prev => ({ ...prev, bizNo: e.target.value }))} placeholder="123-45-67890" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('bizNo')}`} /></div>
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">대표자</label><input type="text" value={formData.ceo} onChange={(e) => setFormData(prev => ({ ...prev, ceo: e.target.value }))} placeholder="대표자명" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('ceo')}`} /></div>
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">업종</label><select value={formData.industry} onChange={(e) => setFormData(prev => ({ ...prev, industry: e.target.value }))} className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('industry')}`}>{industries.map(i => <option key={i} value={i}>{i}</option>)}</select></div>
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">등급</label><select value={formData.grade} onChange={(e) => setFormData(prev => ({ ...prev, grade: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{grades.map(g => <option key={g} value={g}>{g}</option>)}</select></div>
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">연락처</label><input type="text" value={formData.contact} onChange={(e) => setFormData(prev => ({ ...prev, contact: e.target.value }))} placeholder="02-1234-5678" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('contact')}`} /></div>
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">이메일</label><input type="email" value={formData.email} onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))} placeholder="email@company.co.kr" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('email')}`} /></div>
                            </div>
                            <div><label className="block text-sm font-medium text-gray-700 mb-1">주소</label><input type="text" value={formData.address} onChange={(e) => setFormData(prev => ({ ...prev, address: e.target.value }))} placeholder="주소" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('address')}`} /></div>
                            <div className="grid grid-cols-2 gap-4">
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">담당자</label><input type="text" value={formData.manager} onChange={(e) => setFormData(prev => ({ ...prev, manager: 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.managerPhone} onChange={(e) => setFormData(prev => ({ ...prev, managerPhone: e.target.value }))} placeholder="010-1234-5678" className="w-full px-3 py-2 border border-gray-300 rounded-lg" /></div>
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">상태</label><select value={formData.status} onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg"><option value="active">활성</option><option value="inactive">비활성</option></select></div>
                                <div><label className="block text-sm font-medium text-gray-700 mb-1">메모</label><input type="text" value={formData.memo} onChange={(e) => setFormData(prev => ({ ...prev, memo: e.target.value }))} placeholder="메모" className={`w-full px-3 py-2 border border-gray-300 rounded-lg${ocrCls('memo')}`} /></div>
                            </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 flex items-center gap-2"><span>🗑️</span> 삭제</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-blue-600 hover:bg-blue-700 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">{saving ? '저장 중...' : (modalMode === 'add' ? '등록' : '저장')}</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

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