@extends('layouts.app')

@section('title', '일반 거래처')

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

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

@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
@verbatim
<script type="text/babel">
const { useState, useRef, useEffect } = React;

const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
    const ref = useRef(null);
    useEffect(() => {
        if (ref.current && lucide.icons[name]) {
            ref.current.innerHTML = '';
            const svg = lucide.createElement(lucide.icons[name]);
            svg.setAttribute('class', className);
            ref.current.appendChild(svg);
        }
    }, [className]);
    return <span ref={ref} className="inline-flex items-center" {...props} />;
};

const Building2 = createIcon('building-2');
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 Phone = createIcon('phone');
const Mail = createIcon('mail');
const Truck = createIcon('truck');
const Hammer = createIcon('hammer');

function PartnersManagement() {
    const [partners, setPartners] = useState([
        { id: 1, name: 'AWS Korea', type: 'vendor', category: '클라우드', bizNo: '111-22-33333', contact: '1544-1234', email: 'support@aws.amazon.com', manager: '김AWS', managerPhone: '', status: 'active', memo: '클라우드 인프라' },
        { id: 2, name: '(주)외주개발', type: 'vendor', category: '외주개발', bizNo: '222-33-44444', contact: '02-5555-6666', email: 'contact@outsource.co.kr', manager: '박개발', managerPhone: '010-5555-6666', status: 'active', memo: '프론트엔드 전문' },
        { id: 3, name: '한국타이어', type: 'vendor', category: '차량관리', bizNo: '333-44-55555', contact: '1588-0000', email: 'service@hankook.com', manager: '', managerPhone: '', status: 'active', memo: '' },
        { id: 4, name: '삼성화재', type: 'vendor', category: '보험', bizNo: '444-55-66666', contact: '1588-5114', email: 'insurance@samsung.com', manager: '이보험', managerPhone: '010-7777-8888', status: 'active', memo: '법인차량 보험' },
        { id: 5, name: '김개발 프리랜서', type: 'freelancer', category: '외주개발', bizNo: '', contact: '', email: 'kim.dev@gmail.com', manager: '김개발', managerPhone: '010-1111-2222', status: 'active', memo: '백엔드 개발자' },
    ]);

    const [searchTerm, setSearchTerm] = useState('');
    const [filterType, setFilterType] = useState('all');
    const [filterCategory, setFilterCategory] = useState('all');

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

    const types = [{ value: 'vendor', label: '공급업체' }, { value: 'freelancer', label: '프리랜서' }];
    const categories = ['클라우드', '외주개발', '차량관리', '보험', '사무용품', '마케팅', '법률/회계', '기타'];

    const initialFormState = {
        name: '',
        type: 'vendor',
        category: '기타',
        bizNo: '',
        contact: '',
        email: '',
        manager: '',
        managerPhone: '',
        status: 'active',
        memo: ''
    };
    const [formData, setFormData] = useState(initialFormState);

    const filteredPartners = partners.filter(item => {
        const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                             item.manager.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesType = filterType === 'all' || item.type === filterType;
        const matchesCategory = filterCategory === 'all' || item.category === filterCategory;
        return matchesSearch && matchesType && matchesCategory;
    });

    const totalPartners = partners.length;
    const vendorCount = partners.filter(p => p.type === 'vendor').length;
    const freelancerCount = partners.filter(p => p.type === 'freelancer').length;
    const activeCount = partners.filter(p => p.status === 'active').length;

    const handleAdd = () => { setModalMode('add'); setFormData(initialFormState); setShowModal(true); };
    const handleEdit = (item) => { setModalMode('edit'); setEditingItem(item); setFormData({ ...item }); setShowModal(true); };
    const handleSave = () => {
        if (!formData.name) { alert('거래처명을 입력해주세요.'); return; }
        if (modalMode === 'add') {
            setPartners(prev => [{ id: Date.now(), ...formData }, ...prev]);
        } else {
            setPartners(prev => prev.map(item => item.id === editingItem.id ? { ...item, ...formData } : item));
        }
        setShowModal(false); setEditingItem(null);
    };
    const handleDelete = (id) => { if (confirm('정말 삭제하시겠습니까?')) { setPartners(prev => prev.filter(item => item.id !== id)); setShowModal(false); } };

    const handleDownload = () => {
        const rows = [['일반 거래처'], [], ['거래처명', '유형', '분류', '사업자번호', '연락처', '이메일', '담당자', '상태'],
            ...filteredPartners.map(item => [item.name, item.type === 'vendor' ? '공급업체' : '프리랜서', item.category, item.bizNo, 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 getTypeIcon = (type) => type === 'vendor' ? <Truck className="w-4 h-4" /> : <Hammer className="w-4 h-4" />;
    const getTypeColor = (type) => type === 'vendor' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-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-emerald-100 rounded-xl"><Building2 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">Partners / Vendors</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><Building2 className="w-5 h-5 text-gray-400" /></div>
                    <p className="text-2xl font-bold text-gray-900">{totalPartners}개</p>
                </div>
                <div className="bg-white rounded-xl border border-blue-200 p-6">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-blue-700">공급업체</span><Truck className="w-5 h-5 text-blue-500" /></div>
                    <p className="text-2xl font-bold text-blue-600">{vendorCount}개</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">프리랜서</span><Hammer className="w-5 h-5 text-purple-500" /></div>
                    <p className="text-2xl font-bold text-purple-600">{freelancerCount}개</p>
                </div>
                <div className="bg-white rounded-xl border border-emerald-200 p-6">
                    <div className="flex items-center justify-between mb-2"><span className="text-sm text-emerald-700">활성</span></div>
                    <p className="text-2xl font-bold text-emerald-600">{activeCount}개</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-emerald-500" />
                    </div>
                    <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg"><option value="all">전체 유형</option>{types.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}</select>
                    <select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="px-3 py-2 border border-gray-300 rounded-lg"><option value="all">전체 분류</option>{categories.map(c => <option key={c} value={c}>{c}</option>)}</select>
                </div>
            </div>

            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
                <table className="w-full">
                    <thead className="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">거래처명</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">유형</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">분류</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">연락처</th>
                            <th className="px-6 py-3 text-left text-xs font-semibold text-gray-600">담당자</th>
                            <th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">상태</th>
                            <th className="px-6 py-3 text-center text-xs font-semibold text-gray-600">관리</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-100">
                        {filteredPartners.length === 0 ? (
                            <tr><td colSpan="7" className="px-6 py-12 text-center text-gray-400">데이터가 없습니다.</td></tr>
                        ) : filteredPartners.map(item => (
                            <tr key={item.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => handleEdit(item)}>
                                <td className="px-6 py-4"><p className="text-sm font-medium text-gray-900">{item.name}</p>{item.bizNo && <p className="text-xs text-gray-400">{item.bizNo}</p>}</td>
                                <td className="px-6 py-4"><span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${getTypeColor(item.type)}`}>{getTypeIcon(item.type)}{item.type === 'vendor' ? '공급업체' : '프리랜서'}</span></td>
                                <td className="px-6 py-4"><span className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs">{item.category}</span></td>
                                <td className="px-6 py-4"><p className="text-sm text-gray-600">{item.contact || item.email}</p></td>
                                <td className="px-6 py-4"><p className="text-sm text-gray-900">{item.manager}</p>{item.managerPhone && <p className="text-xs text-gray-400">{item.managerPhone}</p>}</td>
                                <td className="px-6 py-4 text-center"><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></td>
                                <td className="px-6 py-4 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>
                </table>
            </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>
                            <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><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" /></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.type} onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{types.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><select value={formData.category} onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))} className="w-full px-3 py-2 border border-gray-300 rounded-lg">{categories.map(c => <option key={c} value={c}>{c}</option>)}</select></div>
                            </div>
                            <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" /></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" /></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.com" 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><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" /></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} className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">{modalMode === 'add' ? '등록' : '저장'}</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

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