/* หน้าหลังบ้าน: จัดการเจ้าของทรัพย์ (property owners) — ใช้เลือกในช่อง "ช่องทาง = ลีดตรง" ของทรัพย์ (แยกจากนายหน้า) */
(function () {
  const { useState, useEffect } = React;

  function OwnersPage() {
    const [rows, setRows] = useState([]);
    const [loading, setLoading] = useState(true);
    const [edit, setEdit] = useState(null); // เจ้าของที่กำลังแก้ หรือ {} = เพิ่มใหม่

    function load() {
      setLoading(true);
      window.api.owners().then(d => { setRows(d.owners || []); setLoading(false); }).catch(() => setLoading(false));
    }
    useEffect(load, []);

    async function remove(o) {
      if (!window.confirm('ลบเจ้าของทรัพย์ "' + o.name + '"? (ทรัพย์ที่อ้างถึงจะไม่มีเจ้าของ)')) return;
      try { await window.api.deleteOwner(o.id); load(); } catch (e) { alert('ลบไม่สำเร็จ: ' + e.message); }
    }

    const cols = [
      { label: 'ชื่อเจ้าของทรัพย์', sortKey: 'name', render: r => <span className="text-bold">{r.name}</span> },
      { label: 'เบอร์', sortKey: 'phone', render: r => r.phone || '-' },
      { label: 'หมายเหตุ', render: r => r.note || '-' },
      { label: 'สถานะ', sortKey: 'is_active', render: r => r.is_active ? <span className="badge badge-green">ใช้งาน</span> : <span className="badge badge-gray">ปิด</span> },
      { label: 'จัดการ', render: r => (
        <div className="row gap-8">
          <window.EditBtn onClick={() => setEdit(r)} />
          <window.DeleteBtn onClick={() => remove(r)} />
        </div>
      )},
    ];
    const ts = window.useTableSort(rows, 'name', 'asc');

    return (
      <div className="page">
        <div className="page-header">
          <h1><i className="ph ph-user-square" style={{marginRight:8,color:'#4A6079'}}></i>เจ้าของทรัพย์</h1>
          <button className="btn btn-primary" onClick={() => setEdit({})}>+ เพิ่มเจ้าของทรัพย์</button>
        </div>
        <p className="muted" style={{ marginTop: -8, marginBottom: 16 }}>เก็บรายชื่อเจ้าของ/แหล่งทรัพย์ (เช่น AMC) ไว้เลือกในช่อง “ช่องทาง = ลีดตรง” ของทรัพย์</p>
        <div className="card">
          <Table columns={cols} data={ts.sorted} loading={loading} empty="ยังไม่มีเจ้าของทรัพย์" sort={ts.sort} onSort={ts.onSort} />
        </div>
        {edit && <OwnerModal owner={edit} onClose={() => setEdit(null)} onSaved={() => { setEdit(null); load(); }} />}
      </div>
    );
  }

  function OwnerModal({ owner, onClose, onSaved }) {
    const isNew = !owner.id;
    const [f, setF] = useState({ name: owner.name || '', phone: owner.phone || '', note: owner.note || '', is_active: owner.is_active !== false });
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState('');
    const set = (k, v) => setF(s => ({ ...s, [k]: v }));

    async function save() {
      if (!f.name.trim()) { setErr('กรุณากรอกชื่อเจ้าของทรัพย์'); return; }
      setBusy(true); setErr('');
      try {
        if (isNew) await window.api.createOwner(f);
        else await window.api.updateOwner(owner.id, f);
        onSaved();
      } catch (e) { setErr('บันทึกไม่สำเร็จ: ' + e.message); setBusy(false); }
    }

    return (
      <Modal title={isNew ? 'เพิ่มเจ้าของทรัพย์' : 'แก้ไขเจ้าของทรัพย์'} onClose={onClose}>
        <div className="form-group"><label>ชื่อเจ้าของทรัพย์ *</label><input className="input" value={f.name} onChange={e => set('name', e.target.value)} /></div>
        <div className="form-group"><label>เบอร์โทร</label><input className="input" value={f.phone} onChange={e => set('phone', e.target.value)} /></div>
        <div className="form-group"><label>หมายเหตุ</label><textarea className="input" rows={2} value={f.note} onChange={e => set('note', e.target.value)} /></div>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginTop: 4 }}>
          <input type="checkbox" checked={f.is_active} onChange={e => set('is_active', e.target.checked)} style={{ width: 18, height: 18 }} />
          <span>ใช้งานอยู่ (โชว์ให้เลือก)</span>
        </label>
        {err && <div style={{ color: '#D8567A', marginTop: 10 }}>{err}</div>}
        <div className="row gap-10" style={{ marginTop: 18, justifyContent: 'flex-end' }}>
          <button className="btn btn-ghost" onClick={onClose}>ยกเลิก</button>
          <button className="btn btn-primary" onClick={save} disabled={busy}>{busy ? 'กำลังบันทึก...' : 'บันทึก'}</button>
        </div>
      </Modal>
    );
  }

  window.OwnersPage = OwnersPage;
})();