import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';

const Icons = {
    Tire: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" strokeWidth="2"/><circle cx="12" cy="12" r="4" strokeWidth="2"/></svg>,
    Sync: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>,
    Save: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>,
    Settings: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path></svg>,
    Link: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>,
    Play: () => <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>,
    Stop: () => <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>,
    Search: () => <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
};

export default function App() {
    const [activeTab, setActiveTab] = useState('products');
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [bulkLoading, setBulkLoading] = useState(false);
    const [progress, setProgress] = useState(0);
    const [logs, setLogs] = useState([]);
    const [showConfig, setShowConfig] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [strategy, setStrategy] = useState({ type: 'undercut', amount: 10000 });
    
    const abortRef = useRef(false);

    const [config, setConfig] = useState(() => {
        const saved = localStorage.getItem('azki_config');
        return saved ? JSON.parse(saved) : {
            url: 'https://azkitire.com',
            ck: 'ck_0ba7cf15f93aa51a610568a3ff2b1d6d909239dd',
            cs: 'cs_7c36c140f806894f9e165670273ace2a1fba12a7',
            scraper: 'http://139.162.172.61:7860/api/fetch',
            proxy: 'https://azkitre-torob.m-tavazoa.workers.dev',
            requestMode: 'direct' 
        };
    });

    const addLog = useCallback((msg, type = 'info') => {
        const time = new Date().toLocaleTimeString('fa-IR');
        setLogs(prev => [{ msg, type, time }, ...prev].slice(0, 150));
    }, []);

    const sendRequest = async (targetUrl, options = {}, isWoo = true) => {
        const { requestMode, proxy, ck, cs } = config;
        let finalUrl = targetUrl;
        const headers = { 'Content-Type': 'application/json', ...options.headers };
        if (isWoo) headers['Authorization'] = 'Basic ' + btoa(`${ck}:${cs}`);
        if (requestMode === 'proxy' && proxy) {
            finalUrl = `${proxy.replace(/\/$/, '')}/?url=${encodeURIComponent(targetUrl)}`;
        }
        try {
            const fetchOptions = {
                ...options,
                headers,
                body: options.method !== 'GET' ? options.body : undefined
            };
            const response = await fetch(finalUrl, fetchOptions);
            if (!response.ok) {
                const errText = await response.text();
                let msg = response.statusText;
                try { const json = JSON.parse(errText); msg = json.message || json.error || msg; } catch(e) {}
                throw new Error(msg || `Status ${response.status}`);
            }
            return await response.json();
        } catch (e) { throw e; }
    };

    const loadAll = async () => {
        setLoading(true);
        addLog(`در حال فراخوانی لیست محصولات...`, 'info');
        try {
            let allFetched = [];
            let page = 1;
            let keepGoing = true;
            while (keepGoing) {
                const data = await sendRequest(`${config.url.replace(/\/$/, "")}/wp-json/wc/v3/products?per_page=100&page=${page}&status=publish`);
                if (data && data.length > 0) {
                    allFetched = [...allFetched, ...data];
                    if (data.length < 100) keepGoing = false; else page++;
                } else keepGoing = false;
                if (page > 35) break; 
            }
            const mapped = allFetched.map(p => {
                // بازیابی هوشمند قیمت و تامین کننده از تمام کلیدهای احتمالی
                const torobLinkMeta = p.meta_data.find(m => m.key === '_torob_link')?.value || '';
                const priceMeta = p.meta_data.find(m => m.key === '_torob_last_price')?.value || '';
                
                // چک کردن چندین کلید متای احتمالی برای نام فروشنده
                const sellerMeta = p.meta_data.find(m => m.key === 'torob_seller_name')?.value || 
                                 p.meta_data.find(m => m.key === '_torob_supplier')?.value || '';
                
                const sellerAttr = p.attributes.find(a => a.name === 'تامین‌کننده')?.options[0] || '';

                return {
                    id: p.id,
                    name: p.name,
                    image: p.images[0]?.src || '',
                    stock: p.stock_status,
                    price: p.regular_price || '0', 
                    torobLink: torobLinkMeta,
                    originalTorobLink: torobLinkMeta,
                    torobPrice: priceMeta,
                    torobSupplier: sellerMeta || sellerAttr,
                    tireCount: p.attributes.find(a => a.name === 'تعداد حلقه')?.options[0] || '',
                    allAttributes: p.attributes || [],
                    syncStatus: 'idle'
                };
            });
            setProducts(mapped);
            addLog(`موفقیت: مجموعاً ${mapped.length} محصول بارگذاری شد.`, 'success');
        } catch (e) { addLog(`خطا در لود محصولات: ${e.message}`, 'error'); } 
        finally { setLoading(false); }
    };

    const saveToSite = async (p, isManual = false) => {
        const cleanPrice = String(p.price).replace(/[^\d]/g, '');
        
        // ۱. آماده‌سازی متا دیتا (فقط اگر مقدار داشته باشند ارسال شوند تا دیتای قبلی پاک نشود)
        let metaData = [];
        if (p.torobLink) metaData.push({ key: '_torob_link', value: p.torobLink });
        if (p.torobPrice) metaData.push({ key: '_torob_last_price', value: String(p.torobPrice).replace(/[^\d]/g, '') });
        if (p.torobSupplier) metaData.push({ key: 'torob_seller_name', value: p.torobSupplier });

        // ۲. مدیریت ویژگی‌ها
        let currentAttrs = p.allAttributes.map(attr => ({
            id: attr.id, name: attr.name, position: attr.position,
            visible: attr.visible, variation: attr.variation, options: attr.options
        }));

        if (p.torobSupplier && p.torobSupplier.trim() !== '') {
            const suppIdx = currentAttrs.findIndex(a => a.name === 'تامین‌کننده');
            const suppAttr = { name: 'تامین‌کننده', visible: false, variation: false, options: [p.torobSupplier] };
            if (suppIdx > -1) currentAttrs[suppIdx] = suppAttr; else currentAttrs.push(suppAttr);
        }

        if (isManual && p.tireCount && p.tireCount.trim() !== '') {
            const tireIdx = currentAttrs.findIndex(a => a.name === 'تعداد حلقه');
            const tireAttr = { name: 'تعداد حلقه', visible: true, variation: false, options: [p.tireCount] };
            if (tireIdx > -1) currentAttrs[tireIdx] = tireAttr; else currentAttrs.push(tireAttr);
        }

        const payload = {
            meta_data: metaData,
            attributes: currentAttrs
        };

        if (cleanPrice && cleanPrice !== '0' && cleanPrice !== '') {
            payload.regular_price = cleanPrice;
        }

        try {
            await sendRequest(`${config.url.replace(/\/$/, "")}/wp-json/wc/v3/products/${p.id}`, {
                method: 'PUT',
                body: JSON.stringify(payload)
            });
            setProducts(prev => prev.map(x => x.id === p.id ? { ...x, originalTorobLink: p.torobLink } : x));
            return true;
        } catch (e) {
            addLog(`خطای ووکامرس برای ${p.id}: ${e.message}`, 'error');
            return false;
        }
    };

    const syncAndApply = async (p) => {
        if (!p.torobLink || p.torobLink.trim() === "") {
            addLog(`${p.name}: لینک ترب ندارد.`, 'error');
            return { status: 'no-link' };
        }
        
        setProducts(prev => prev.map(x => x.id === p.id ? { ...x, syncStatus: 'loading' } : x));
        addLog(`استعلام قیمت: ${p.name}...`, 'info');

        try {
            const data = await sendRequest(config.scraper, {
                method: 'POST',
                body: JSON.stringify({ url: p.torobLink })
            }, false);
            
            if (!data.success) {
                if (data.message && (data.message.includes('490') || data.message.includes('500') || data.message.includes('timeout'))) {
                     return { status: 'blocked', message: data.message };
                }
                throw new Error(data.message || "خطا در اسکرپ");
            }

            const tPrice = parseInt(String(data.current_price).replace(/[^\d]/g, '')) || 0;
            let newPrice = 0;
            
            if (tPrice > 0) {
                newPrice = strategy.type === 'undercut' ? tPrice - strategy.amount : tPrice;
                newPrice = newPrice > 0 ? newPrice : 0;
            }

            const updated = { 
                ...p, 
                torobPrice: tPrice === 0 ? 'ناموجود' : String(data.current_price).replace(/\B(?=(\d{3})+(?!\d))/g, ","), 
                torobSupplier: data.supplier, 
                price: newPrice === 0 ? p.price : String(newPrice), 
                syncStatus: 'success' 
            };
            
            setProducts(prev => prev.map(x => x.id === p.id ? updated : x));
            const isSaved = await saveToSite(updated, false);
            
            if (isSaved) {
                addLog(`${p.name}: بروزرسانی موفق.`, 'success');
                return { status: 'success' };
            } else throw new Error("خطا در ثبت روی سایت");

        } catch (e) {
            addLog(`${p.name}: عملیات ناموفق - ${e.message}`, 'error');
            setProducts(prev => prev.map(x => x.id === p.id ? { ...x, syncStatus: 'error' } : x));
            return { status: 'fail' };
        }
    };

    const startBulkSync = async () => {
        abortRef.current = false;
        const targets = products.filter(p => p.torobLink && p.torobLink.trim() !== "");
        if (targets.length === 0) return addLog("محصولی با لینک یافت نشد.", "error");
        
        setBulkLoading(true); setProgress(0);
        addLog(`اتوماسیون آغاز شد...`, 'info');

        for (let i = 0; i < targets.length; i++) {
            if (abortRef.current) break;
            
            const result = await syncAndApply(targets[i]);
            
            if (result.status === 'blocked') {
                addLog(`بلاک/خطای موقت از ترب. ۲ دقیقه استراحت...`, "error");
                setProducts(prev => prev.map(x => x.id === targets[i].id ? { ...x, syncStatus: 'idle' } : x));
                await new Promise(r => setTimeout(r, 120000));
                i--; // تلاش مجدد
                continue;
            }

            setProgress(Math.round(((i + 1) / targets.length) * 100));
            const waitTime = Math.floor(Math.random() * 5000) + 7500; 
            await new Promise(r => setTimeout(r, waitTime));
        }
        setBulkLoading(false);
        addLog(`پایان اتوماسیون همگانی قیمت.`, 'success');
    };

    const bulkSaveLinks = async () => {
        abortRef.current = false;
        const targets = products.filter(p => p.torobLink !== p.originalTorobLink);
        if (targets.length === 0) return addLog("تغییر لینکی برای ثبت یافت نشد.", "info");

        setBulkLoading(true); setProgress(0);
        addLog(`شروع ثبت لینک‌های جدید (${targets.length} مورد)...`, 'info');

        for (let i = 0; i < targets.length; i++) {
            if (abortRef.current) break;
            const p = targets[i];
            const success = await saveToSite(p, false);
            if (success) addLog(`${p.name}: لینک ثبت شد.`, 'success');
            setProgress(Math.round(((i + 1) / targets.length) * 100));
            await new Promise(r => setTimeout(r, 600)); 
        }
        setBulkLoading(false);
        addLog(`پایان ثبت همگانی لینک‌ها.`, 'success');
    };

    const filtered = useMemo(() => 
        products.filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase())),
        [products, searchTerm]
    );

    return (
        <div className="flex flex-row h-screen w-full bg-[#f3f4f6] overflow-hidden text-right" dir="rtl">
            {/* Sidebar Logs */}
            <aside className="w-80 bg-slate-900 text-white flex flex-col flex-shrink-0 shadow-2xl z-50">
                <div className="p-4 border-b border-white/10 flex items-center justify-between">
                    <h2 className="text-xs font-black uppercase tracking-widest text-indigo-400">کنسول مانیتورینگ</h2>
                    <button onClick={() => setLogs([])} className="text-[10px] bg-white/5 hover:bg-white/10 px-2 py-1 rounded transition text-slate-400 font-bold">پاکسازی</button>
                </div>
                <div className="flex-1 overflow-y-auto custom-scroll p-4 space-y-2">
                    {logs.map((log, i) => (
                        <div key={i} className={`text-[10px] leading-relaxed border-b border-white/5 pb-2 last:border-0 ${log.type === 'error' ? 'text-red-400' : log.type === 'success' ? 'text-emerald-400' : 'text-slate-400'}`}>
                            <div className="flex items-center gap-2 mb-1 opacity-50 font-mono text-[9px]"><span>[{log.time}]</span><span className="uppercase">{log.type}</span></div>
                            <p className="font-medium">{log.msg}</p>
                        </div>
                    ))}
                    {logs.length === 0 && <div className="text-slate-600 text-center py-20 italic text-[11px]">در انتظار رویداد جدید...</div>}
                </div>
                <div className="p-4 bg-black/20 text-[9px] text-slate-500 font-bold text-center border-t border-white/5">Price Controller v3.4 (Safe Data)</div>
            </aside>

            {/* Content Area */}
            <div className="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
                <header className="bg-white border-b px-6 py-4 flex flex-wrap items-center justify-between sticky top-0 z-40 shadow-sm gap-4">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg text-lg">AZ</div>
                        <div>
                            <h1 className="text-sm font-black text-slate-800 leading-tight">داشبورد هوشمند ازکی‌تایر</h1>
                            <p className="text-[9px] text-slate-400 font-bold uppercase tracking-widest italic text-left">Automated Scraper Engine</p>
                        </div>
                    </div>
                    <div className="flex items-center gap-2">
                        <button onClick={loadAll} disabled={loading} className="bg-white border border-slate-200 px-4 py-2 rounded-xl text-[11px] font-bold hover:bg-slate-50 transition flex items-center gap-2 shadow-sm">{loading ? <div className="w-3 h-3 border-2 border-indigo-600 border-t-transparent rounded-full animate-spin"></div> : <Icons.Sync />} بروزرسانی لیست محصولات</button>
                        <button onClick={() => setShowConfig(true)} className="p-2.5 text-slate-400 hover:bg-slate-100 rounded-xl transition border border-slate-100 shadow-sm"><Icons.Settings /></button>
                    </div>
                </header>

                <div className="flex-1 overflow-y-auto p-4 md:p-8 space-y-6 bg-[#f8fafc]">
                    <div className="bg-white p-5 rounded-3xl shadow-sm border border-slate-200 flex flex-wrap items-center justify-between gap-6">
                        <div className="relative w-full sm:w-72">
                            <span className="absolute right-3 top-3 text-slate-400"><Icons.Search /></span>
                            <input type="text" placeholder="جستجو در نام محصول..." className="w-full bg-slate-50 border border-slate-200 rounded-2xl py-2.5 pr-10 pl-4 text-[11px] outline-none" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
                        </div>
                        <div className="flex items-center gap-4 bg-slate-50 p-2.5 rounded-2xl border border-dashed border-slate-200 text-[10px] font-bold text-slate-500">
                            استراتژی:
                            <select value={strategy.type} onChange={(e) => setStrategy({...strategy, type: e.target.value})} className="bg-white border border-slate-200 rounded-xl px-3 py-1.5 outline-none shadow-sm">
                                <option value="undercut">ارزان‌تر از رقیب</option>
                                <option value="match">هم‌قیمت رقیب</option>
                            </select>
                            {strategy.type === 'undercut' && (
                                <input type="number" value={strategy.amount} onChange={(e) => setStrategy({...strategy, amount: parseInt(e.target.value)})} className="w-24 bg-white border border-slate-200 rounded-xl px-3 py-1.5 text-center outline-none shadow-sm font-bold" />
                            )}
                        </div>
                        <div className="flex items-center gap-2">
                            {bulkLoading ? (
                                <div className="flex items-center gap-4 w-64">
                                    <div className="h-2 flex-1 bg-slate-100 rounded-full border overflow-hidden"><div className="h-full bg-indigo-600 transition-all duration-300" style={{ width: `${progress}%` }}></div></div>
                                    <button onClick={() => abortRef.current = true} className="p-2 bg-red-50 text-red-600 rounded-xl"><Icons.Stop /></button>
                                </div>
                            ) : (
                                <>
                                    <button onClick={bulkSaveLinks} className="bg-white border-2 border-indigo-100 text-indigo-600 px-5 py-2.5 rounded-2xl text-[11px] font-bold hover:bg-indigo-50 transition shadow-sm flex items-center gap-2 active:scale-95"><Icons.Link /> ثبت لینک‌های جدید</button>
                                    <button onClick={startBulkSync} className="bg-indigo-600 text-white px-6 py-2.5 rounded-2xl text-[11px] font-bold hover:bg-indigo-700 shadow-md flex items-center gap-2 active:scale-95 transition-all"><Icons.Play /> شروع اتوماسیون</button>
                                </>
                            )}
                        </div>
                    </div>

                    <div className="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
                        <div className="overflow-x-auto w-full custom-scroll">
                            <table className="w-full text-right border-collapse min-w-[1200px]">
                                <thead className="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase border-b">
                                    <tr>
                                        <th className="p-5 w-12 text-center">کد</th>
                                        <th className="p-5 text-right w-80">محصول و لینک ترب</th>
                                        <th className="p-5 text-center">تعداد حلقه</th>
                                        <th className="p-5 text-center">قیمت سایت</th>
                                        <th className="p-5 text-center">قیمت ترب</th>
                                        <th className="p-5 text-center">تأمین‌کننده</th>
                                        <th className="p-5 text-center">عملیات</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-100 text-[11px]">
                                    {filtered.map(p => (
                                        <tr key={p.id} className="hover:bg-slate-50/50 transition-all">
                                            <td className="p-5 text-[10px] font-mono text-slate-400 text-center">{p.id}</td>
                                            <td className="p-4">
                                                <div className="flex items-center gap-3">
                                                    <img src={p.image} className="w-12 h-12 rounded-2xl object-cover border-2 border-white shadow-sm" />
                                                    <div className="flex-1 overflow-hidden text-right">
                                                        <div className="font-bold text-slate-800 mb-1 truncate">{p.name}</div>
                                                        <input type="text" value={p.torobLink} placeholder="لینک ترب..." onChange={(e) => setProducts(prev => prev.map(x => x.id === p.id ? { ...x, torobLink: e.target.value } : x))} className="w-full bg-transparent text-[9px] outline-none font-mono text-indigo-400 border-b border-transparent focus:border-indigo-200" dir="ltr" />
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="p-4 text-center">
                                                <select value={p.tireCount} onChange={(e) => setProducts(prev => prev.map(x => x.id === p.id ? { ...x, tireCount: e.target.value } : x))} className="bg-slate-100 border border-slate-200 rounded-xl px-2 py-1.5 font-bold outline-none cursor-pointer text-[10px]">
                                                    <option value="">نامشخص</option>
                                                    <option value="تک حلقه">تک حلقه</option>
                                                    <option value="جفت (2 حلقه)">جفت (2 حلقه)</option>
                                                    <option value="پک 4 عددی">پک 4 عددی</option>
                                                </select>
                                            </td>
                                            <td className="p-4 text-center font-black text-slate-700">
                                                <input type="text" value={p.price} onChange={(e) => setProducts(prev => prev.map(x => x.id === p.id ? { ...x, price: e.target.value } : x))} className="w-28 text-center bg-white border border-slate-200 rounded-xl py-2 outline-none focus:border-indigo-400 shadow-inner" />
                                            </td>
                                            <td className="p-4 text-center text-indigo-600 font-black">
                                                <div className={`w-28 mx-auto bg-white border-2 border-slate-200 rounded-xl py-2 text-[11px] shadow-sm flex items-center justify-center ${p.torobPrice === 'ناموجود' ? 'text-red-500 border-red-100' : ''}`}>{p.torobPrice || '---'}</div>
                                            </td>
                                            <td className="p-4 text-center">
                                                <div className="w-40 mx-auto bg-white border-2 border-slate-200 rounded-xl py-2 px-2 text-[10px] text-slate-600 shadow-sm truncate font-bold min-h-[34px] flex items-center justify-center">{p.torobSupplier || '---'}</div>
                                            </td>
                                            <td className="p-4 text-center">
                                                <div className="flex justify-center gap-2">
                                                    <button onClick={() => syncAndApply(p)} disabled={p.syncStatus === 'loading'} className={`p-3 rounded-2xl transition shadow-sm ${p.syncStatus === 'loading' ? 'bg-slate-100 text-slate-400' : 'bg-indigo-50 text-indigo-600 hover:bg-indigo-600 hover:text-white'}`}>{p.syncStatus === 'loading' ? <div className="w-4 h-4 border-2 border-indigo-600 border-t-transparent rounded-full animate-spin"></div> : <Icons.Sync />}</button>
                                                    <button onClick={() => saveToSite(p, true).then(ok => ok && addLog(`${p.name}: ذخیره شد.`, 'success'))} className="p-3 bg-emerald-50 text-emerald-600 rounded-2xl hover:bg-emerald-600 hover:text-white transition shadow-sm"><Icons.Save /></button>
                                                </div>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {showConfig && (
                <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
                    <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={() => setShowConfig(false)}></div>
                    <div className="bg-white w-full max-w-sm rounded-[2.5rem] shadow-2xl relative z-10 p-10 border-t-8 border-indigo-600">
                        <h3 className="text-xl font-black text-slate-800 mb-8 text-center">تنظیمات اصلی</h3>
                        <div className="space-y-5 text-right">
                            <div><label className="text-[10px] font-bold text-slate-400 block mb-1.5 mr-1">متد ارسال درخواست</label><select value={config.requestMode} onChange={(e) => setConfig({...config, requestMode: e.target.value})} className="w-full bg-slate-50 border p-3.5 rounded-2xl text-[11px] font-bold outline-none"><option value="direct">ارسال مستقیم (مرورگر / VPN)</option><option value="proxy">ارسال از طریق کلودفلر (Proxy)</option></select></div>
                            <div className="space-y-1"><label className="text-[10px] font-bold text-slate-400 block mr-1 text-right">آدرس فروشگاه</label><input dir="ltr" type="text" className="w-full bg-slate-50 border p-3.5 rounded-2xl text-[11px] outline-none" value={config.url} onChange={(e) => setConfig({...config, url: e.target.value})} /></div>
                            <div className="grid grid-cols-2 gap-3"><div className="space-y-1 text-right"><label className="text-[10px] font-bold text-slate-400 block mr-1">WC Key (ck)</label><input dir="ltr" type="text" className="w-full bg-slate-50 border p-3.5 rounded-2xl text-[10px] outline-none" value={config.ck} onChange={(e) => setConfig({...config, ck: e.target.value})} /></div><div className="space-y-1 text-right"><label className="text-[10px] font-bold text-slate-400 block mr-1">WC Secret (cs)</label><input dir="ltr" type="password" className="w-full bg-slate-50 border p-3.5 rounded-2xl text-[10px] outline-none" value={config.cs} onChange={(e) => setConfig({...config, cs: e.target.value})} /></div></div>
                            <div className="space-y-1 text-right"><label className="text-[10px] font-bold text-slate-400 block mr-1">آدرس اسکرپر</label><input dir="ltr" type="text" className="w-full bg-indigo-50 border border-indigo-100 p-3.5 rounded-2xl text-[10px] font-bold outline-none" value={config.scraper} onChange={(e) => setConfig({...config, scraper: e.target.value})} /></div>
                            <button onClick={() => { localStorage.setItem('azki_config', JSON.stringify(config)); setShowConfig(false); addLog('تنظیمات جدید ذخیره شد.', 'success'); }} className="w-full bg-slate-900 text-white py-5 rounded-[1.5rem] font-black text-sm mt-4 shadow-xl active:scale-95 transition-all text-center">ذخیره و بارگذاری مجدد</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}