(function() {
  const { useState, useEffect } = React;

  function SiteSettingsPage() {
    const [settings, setSettings] = useState({});
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [tab, setTab] = useState('hero');
    const [msg, setMsg] = useState('');

    async function load() {
      setLoading(true);
      try {
        // ส่ง token — /site/settings เป็น admin-only แล้ว
        const token = await window.firebaseAuth.currentUser?.getIdToken();
        const r = await fetch(window.ADMIN_CONFIG.apiUrl + '/site/settings', { headers: { Authorization: 'Bearer ' + token } });
        const d = await r.json();
        setSettings(d.settings || {});
      } catch { /* ignore */ }
      setLoading(false);
    }
    useEffect(load, []);

    async function save(key, value) {
      setSaving(true); setMsg('');
      try {
        const token = await window.firebaseAuth.currentUser?.getIdToken();
        await fetch(window.ADMIN_CONFIG.apiUrl + '/admin/site/settings/' + key, {
          method: 'PUT',
          headers: { Authorization: 'Bearer ' + token, 'Content-Type': 'application/json' },
          body: JSON.stringify({ value }),
        });
        setSettings(s => ({ ...s, [key]: value }));
        setMsg('บันทึกเรียบร้อย ✅');
        setTimeout(() => setMsg(''), 3000);
      } catch(e) { setMsg('เกิดข้อผิดพลาด ❌'); }
      setSaving(false);
    }

    if (loading) return <div className="loading">กำลังโหลด...</div>;

    const tabs = [
      { id: 'hero', label: 'Hero' },
      { id: 'categories', label: 'หมวดหมู่' },
      { id: 'why_us', label: 'ทำไมต้องเรา' },
      { id: 'stats', label: 'สถิติ' },
      { id: 'sections_visible', label: 'แสดง/ซ่อน' },
    ];

    return (
      <div className="page">
        <div className="page-header">
          <h1><i className="ph ph-globe-hemisphere-west" style={{marginRight:8,color:'#4A6079'}}></i>จัดการหน้าเว็บ</h1>
          {msg && <span style={{color: msg.includes('✅') ? '#15976A' : '#D8567A', fontWeight: 600}}>{msg}</span>}
        </div>
        <div className="tabs" style={{marginBottom: 20}}>
          {tabs.map(t => <button key={t.id} className={'tab' + (tab===t.id?' active':'')} onClick={() => setTab(t.id)}>{t.label}</button>)}
        </div>

        {/* Hero */}
        {tab === 'hero' && <HeroEditor data={settings.hero || {}} onSave={v => save('hero', v)} saving={saving} />}

        {/* Categories */}
        {tab === 'categories' && <ListEditor title="หมวดหมู่หน้าแรก" data={settings.categories || []} onSave={v => save('categories', v)} saving={saving}
          fields={[
            {key:'icon',label:'Icon',type:'select',options:['bank','land','home','car','handshake','trending','shield','sparkle']},
            {key:'title_th',label:'ชื่อ (TH)'},{key:'title_en',label:'ชื่อ (EN)'},
            {key:'desc_th',label:'คำอธิบาย (TH)'},{key:'desc_en',label:'คำอธิบาย (EN)'},
            {key:'link',label:'ลิงก์ไปหน้า',type:'select',options:['listings','invest','matching','about']},
          ]} />}

        {/* Why Us */}
        {tab === 'why_us' && <ListEditor title="ทำไมต้องเลือกเรา" data={settings.why_us || []} onSave={v => save('why_us', v)} saving={saving}
          fields={[
            {key:'icon',label:'Icon',type:'select',options:['shield','sparkle','coins','handshake','trending','check','star','home']},
            {key:'title_th',label:'หัวข้อ (TH)'},{key:'title_en',label:'หัวข้อ (EN)'},
            {key:'desc_th',label:'คำอธิบาย (TH)'},{key:'desc_en',label:'คำอธิบาย (EN)'},
          ]} />}

        {/* Stats */}
        {tab === 'stats' && <ListEditor title="ตัวเลขสถิติ" data={settings.stats || []} onSave={v => save('stats', v)} saving={saving}
          fields={[
            {key:'icon',label:'Icon',type:'select',options:['layers','user','handshake','percent','trending','star','shield']},
            {key:'value',label:'ตัวเลข'},
            {key:'label_th',label:'ป้ายกำกับ (TH)'},{key:'label_en',label:'ป้ายกำกับ (EN)'},
          ]} />}

        {/* Sections Visible */}
        {tab === 'sections_visible' && <VisibilityEditor data={settings.sections_visible || {}} onSave={v => save('sections_visible', v)} saving={saving} />}
      </div>
    );
  }

  // Hero Editor
  function HeroEditor({ data, onSave, saving }) {
    const [form, setForm] = useState(data);
    useEffect(() => setForm(data), [data]);
    const set = (k, v) => setForm(f => ({...f, [k]: v}));
    const fields = [
      ['title_th', 'หัวข้อบรรทัด 1 (TH)'], ['title_th_2', 'หัวข้อบรรทัด 2 (TH)'],
      ['title_en', 'หัวข้อบรรทัด 1 (EN)'], ['title_en_2', 'หัวข้อบรรทัด 2 (EN)'],
      ['sub_th', 'คำอธิบาย (TH)'], ['sub_en', 'คำอธิบาย (EN)'],
    ];
    return (
      <div className="card" style={{padding: 24}}>
        <h3 style={{marginBottom: 20}}>แก้ไข Hero Section</h3>
        {fields.map(([k, label]) => (
          <div className="form-group" key={k}>
            <label>{label}</label>
            {k.startsWith('sub') ? <textarea className="input" rows={3} value={form[k]||''} onChange={e => set(k, e.target.value)} />
              : <input className="input" value={form[k]||''} onChange={e => set(k, e.target.value)} />}
          </div>
        ))}
        <button className="btn btn-primary" onClick={() => onSave(form)} disabled={saving}>{saving ? 'กำลังบันทึก...' : 'บันทึก'}</button>
      </div>
    );
  }

  // List Editor (categories, why_us, stats)
  function ListEditor({ title, data, onSave, saving, fields }) {
    const [items, setItems] = useState(data);
    useEffect(() => setItems(data), [data]);

    function update(idx, key, val) {
      setItems(prev => prev.map((item, i) => i === idx ? {...item, [key]: val} : item));
    }
    function add() {
      const newItem = {};
      fields.forEach(f => newItem[f.key] = '');
      setItems(prev => [...prev, newItem]);
    }
    function remove(idx) { setItems(prev => prev.filter((_, i) => i !== idx)); }
    function moveUp(idx) { if (idx === 0) return; setItems(prev => { const n = [...prev]; [n[idx-1], n[idx]] = [n[idx], n[idx-1]]; return n; }); }

    return (
      <div className="card" style={{padding: 24}}>
        <div className="row between" style={{marginBottom: 20}}>
          <h3>{title} ({items.length} รายการ)</h3>
          <button className="btn btn-primary btn-sm" onClick={add}>+ เพิ่ม</button>
        </div>
        {items.map((item, idx) => (
          <div key={idx} style={{border:'1px solid #E5E7EB',borderRadius:12,padding:16,marginBottom:12}}>
            <div className="row between" style={{marginBottom:12}}>
              <b>#{idx+1}</b>
              <div className="row gap-6">
                <button className="btn btn-ghost btn-sm" onClick={() => moveUp(idx)}>↑</button>
                <window.DeleteBtn onClick={() => remove(idx)} />
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              {fields.map(f => (
                <div className="form-group" key={f.key} style={{margin:0}}>
                  <label style={{fontSize:12}}>{f.label}</label>
                  {f.type === 'select'
                    ? <select className="input" value={item[f.key]||''} onChange={e => update(idx, f.key, e.target.value)}>
                        <option value="">เลือก</option>
                        {f.options.map(o => <option key={o} value={o}>{o}</option>)}
                      </select>
                    : <input className="input" value={item[f.key]||''} onChange={e => update(idx, f.key, e.target.value)} />}
                </div>
              ))}
            </div>
          </div>
        ))}
        <button className="btn btn-primary" onClick={() => onSave(items)} disabled={saving} style={{marginTop:12}}>{saving ? 'กำลังบันทึก...' : 'บันทึกทั้งหมด'}</button>
      </div>
    );
  }

  // Visibility Editor
  function VisibilityEditor({ data, onSave, saving }) {
    const [form, setForm] = useState(data);
    useEffect(() => setForm(data), [data]);
    const sections = [
      ['hero', 'Hero Section'],
      ['categories', 'หมวดหมู่'],
      ['why_us', 'ทำไมต้องเรา'],
      ['featured', 'ทรัพย์น่าสนใจ'],
      ['investor_card', 'การ์ดนักลงทุน'],
      ['stats', 'สถิติ'],
    ];
    function toggle(key) { setForm(f => ({...f, [key]: !f[key]})); }
    return (
      <div className="card" style={{padding: 24}}>
        <h3 style={{marginBottom: 20}}>แสดง/ซ่อน Section หน้าแรก</h3>
        {sections.map(([key, label]) => (
          <div key={key} style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'12px 0',borderBottom:'1px solid #E5E7EB'}}>
            <span style={{fontWeight:500}}>{label}</span>
            <button className={'btn btn-sm ' + (form[key] ? 'btn-success' : 'btn-ghost')} onClick={() => toggle(key)}>
              {form[key] ? 'แสดง' : 'ซ่อน'}
            </button>
          </div>
        ))}
        <button className="btn btn-primary" onClick={() => onSave(form)} disabled={saving} style={{marginTop:16}}>{saving ? 'กำลังบันทึก...' : 'บันทึก'}</button>
      </div>
    );
  }

  window.SiteSettingsPage = SiteSettingsPage;
})();