/* หน้าหลังบ้าน: บันทึก Log (Audit) — consent/การเข้าถึงข้อมูล ทั้งหมด ค้นหา/กรองได้ */
(function () {
  const { useState, useEffect } = React;

  const PURPOSE = {
    property_submission: 'ลงประกาศทรัพย์', register: 'สมัครนักลงทุน', kyc_verify: 'ยืนยันตัวตน (KYC)',
    buyer_lead: 'แจ้งสนใจซื้อ', matching_lead: 'ขอเงินทุน (เจ้าของทรัพย์)', inquiry: 'ติดต่อสอบถาม',
    cookie_consent: 'คุกกี้', privacy_request: 'คำขอใช้สิทธิ', document_access: 'เข้าถึงเอกสาร',
  };
  const ACTION = {
    granted: ['#15976A', '#DBF1E7', 'ยินยอม'],
    withdrawn: ['#B5860B', '#FBF0D0', 'ถอนความยินยอม'],
    accessed: ['#1F58C4', '#DCE9FC', 'เข้าถึงข้อมูล'],
  };
  function ABadge({ a }) {
    const m = ACTION[a] || ['#555', '#eee', a];
    return <span style={{ background: m[1], color: m[0], padding: '3px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap' }}>{m[2]}</span>;
  }
  const ESTATUS = { sent: ['#0F7A4D', '#DBF1E7', 'ส่งสำเร็จ'], failed: ['#D8567A', '#FBE4EC', 'ล้มเหลว'], skipped: ['#9A7400', '#FBF0D0', 'ข้าม (ยังไม่ตั้งค่า)'] };
  function EBadge({ s }) {
    const m = ESTATUS[s] || ['#555', '#eee', s];
    return <span style={{ background: m[1], color: m[0], padding: '3px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap' }}>{m[2]}</span>;
  }

  // ป้ายชื่อการกระทำแอดมิน + สี (แดง=อันตราย เขียว=อนุมัติ น้ำเงิน=ทั่วไป)
  const AACT = {
    'admin.login': ['เข้าระบบหลังบ้าน', '#6B7280'],
    'listing.create': ['สร้างทรัพย์', '#1F58C4'], 'listing.update': ['แก้ไขทรัพย์', '#1F58C4'], 'listing.approve': ['อนุมัติทรัพย์', '#0F7A4D'], 'listing.reject': ['ปฏิเสธทรัพย์', '#D8567A'], 'listing.visibility': ['เปิด/ปิดแสดงทรัพย์', '#1F58C4'], 'listing.delete': ['ลบทรัพย์', '#C0392B'],
    'investor.approve': ['อนุมัตินักลงทุน (KYC)', '#0F7A4D'], 'investor.reject': ['ปฏิเสธนักลงทุน', '#D8567A'],
    'user.ban': ['แบนผู้ใช้', '#C0392B'], 'user.unban': ['ปลดแบนผู้ใช้', '#0F7A4D'], 'user.role_change': ['เปลี่ยนสิทธิ์ (role)', '#C0392B'], 'user.create': ['สร้างทีมงาน', '#1F58C4'], 'user.delete': ['ลบผู้ใช้', '#C0392B'],
    'agent.approve': ['อนุมัตินายหน้า', '#0F7A4D'], 'agent.reject': ['ปฏิเสธนายหน้า', '#D8567A'],
    'article.create': ['สร้างบทความ', '#1F58C4'], 'article.update': ['แก้ไขบทความ', '#1F58C4'], 'article.publish': ['เผยแพร่บทความ', '#0F7A4D'], 'article.unpublish': ['เลิกเผยแพร่บทความ', '#B5860B'], 'article.delete': ['ลบบทความ', '#C0392B'],
    'submission.approve': ['อนุมัติทรัพย์ที่ส่งเข้า', '#0F7A4D'], 'submission.reject': ['ปฏิเสธทรัพย์ที่ส่งเข้า', '#D8567A'], 'submission.update': ['แก้ไขทรัพย์ที่ส่งเข้า', '#1F58C4'],
    'broker.create': ['เพิ่มนายหน้า', '#1F58C4'], 'broker.update': ['แก้ไขนายหน้า', '#1F58C4'], 'broker.delete': ['ลบนายหน้า', '#C0392B'],
    'lead.matching_status': ['สถานะ lead (ขอเงินทุน)', '#1F58C4'], 'lead.investor_status': ['สถานะ lead (นักลงทุน)', '#1F58C4'], 'lead.buyer_status': ['สถานะ lead (ผู้ซื้อ)', '#1F58C4'],
    'privacy.anonymize': ['ลบข้อมูล PDPA (anonymize)', '#C0392B'], 'privacy.update': ['อัปเดตคำขอ PDPA', '#1F58C4'],
  };

  function AuditLogsPage() {
    const [rows, setRows] = useState([]);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(true);
    const [q, setQ] = useState('');
    const [purpose, setPurpose] = useState('');
    const [action, setAction] = useState('');
    const [active, setActive] = useState(null);
    const [view, setView] = useState('consent');   // consent | email
    const [eRows, setERows] = useState([]);
    const [eTotal, setETotal] = useState(0);
    const [eLoading, setELoading] = useState(false);
    const [eStatus, setEStatus] = useState('');
    const [aRows, setARows] = useState([]);
    const [aTotal, setATotal] = useState(0);
    const [aLoading, setALoading] = useState(false);
    const [aQ, setAQ] = useState('');

    function load() {
      setLoading(true);
      const p = new URLSearchParams();
      if (q) p.set('q', q);
      if (purpose) p.set('purpose', purpose);
      if (action) p.set('action', action);
      p.set('limit', '200');
      window.api.auditLogs(p.toString())
        .then(d => { setRows(d.logs || []); setTotal(d.total || 0); setLoading(false); })
        .catch(() => setLoading(false));
    }
    useEffect(() => { if (view === 'consent') load(); }, [view, purpose, action]);

    function loadEmail() {
      setELoading(true);
      const p = new URLSearchParams();
      if (eStatus) p.set('status', eStatus);
      p.set('limit', '200');
      window.api.emailLogs(p.toString())
        .then(d => { setERows(d.logs || []); setETotal(d.total || 0); setELoading(false); })
        .catch(() => setELoading(false));
    }
    useEffect(() => { if (view === 'email') loadEmail(); }, [view, eStatus]);

    function loadAdmin() {
      setALoading(true);
      const p = new URLSearchParams();
      if (aQ) p.set('q', aQ);
      p.set('limit', '300');
      window.api.adminActions(p.toString())
        .then(d => { setARows(d.logs || []); setATotal(d.total || 0); setALoading(false); })
        .catch(() => setALoading(false));
    }
    useEffect(() => { if (view === 'admin') loadAdmin(); }, [view]);

    return (
      <div>
        <div className="page-head"><h1 className="page-title"><i className="ph ph-list-checks" style={{marginRight:8,color:'#4A6079'}}></i>บันทึก Log (Audit)</h1>
          <span className="page-sub">หลักฐานการยินยอม / การเข้าถึงข้อมูล / การส่งอีเมล — append-only</span>
        </div>

        <div style={{ display: 'flex', gap: 8, margin: '12px 0 16px', flexWrap: 'wrap' }}>
          <button className={'btn btn-sm ' + (view === 'consent' ? 'btn-primary' : 'btn-soft')} onClick={() => setView('consent')}>บันทึกยินยอม (PDPA)</button>
          <button className={'btn btn-sm ' + (view === 'email' ? 'btn-primary' : 'btn-soft')} onClick={() => setView('email')}>บันทึกอีเมล</button>
          <button className={'btn btn-sm ' + (view === 'admin' ? 'btn-primary' : 'btn-soft')} onClick={() => setView('admin')}>การกระทำแอดมิน</button>
        </div>

        {view === 'admin' ? (
          <>
            <div style={{ display: 'flex', gap: 8, margin: '0 0 16px', flexWrap: 'wrap', alignItems: 'center' }}>
              <input className="input" style={{ maxWidth: 280 }} placeholder="ค้นหา อีเมล/ชื่อแอดมิน/การกระทำ" value={aQ}
                onChange={e => setAQ(e.target.value)} onKeyDown={e => e.key === 'Enter' && loadAdmin()} />
              <button className="btn btn-sm btn-primary" onClick={loadAdmin}>ค้นหา</button>
              <span style={{ fontSize: 12.5, color: 'var(--text-2)', marginLeft: 'auto' }}>ทั้งหมด {aTotal} รายการ</span>
            </div>
            {aLoading ? <div style={{ padding: 30, color: 'var(--text-2)' }}>กำลังโหลด...</div>
              : aRows.length === 0 ? <div style={{ padding: 30, color: 'var(--text-2)' }}>ยังไม่มีบันทึกการกระทำแอดมิน</div>
              : (
                <div className="table-wrap">
                  <table className="table">
                    <thead><tr><th>วันที่-เวลา</th><th>แอดมิน</th><th>การกระทำ</th><th>เป้าหมาย</th><th>รายละเอียด</th><th>IP</th></tr></thead>
                    <tbody>
                      {aRows.map(r => {
                        const m = AACT[r.action] || [r.action, '#555'];
                        return (
                          <tr key={r.id}>
                            <td style={{ whiteSpace: 'nowrap' }}>{new Date(r.created_at).toLocaleString('th-TH')}</td>
                            <td style={{ fontSize: 12.5 }}>{r.admin_name || r.admin_email || '-'}</td>
                            <td><span style={{ background: m[1] + '1A', color: m[1], padding: '3px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap' }}>{m[0]}</span></td>
                            <td style={{ fontSize: 12 }}>{r.target_type ? r.target_type + (r.target_id ? ' · ' + String(r.target_id).slice(0, 8) : '') : '-'}</td>
                            <td style={{ fontSize: 12, color: 'var(--text-2)', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.detail ? JSON.stringify(r.detail) : ''}>{r.detail ? JSON.stringify(r.detail) : '-'}</td>
                            <td style={{ fontSize: 12 }}>{r.ip_address || '-'}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}
          </>
        ) : null}

        {view === 'email' ? (
          <>
            <div style={{ display: 'flex', gap: 8, margin: '0 0 16px', flexWrap: 'wrap', alignItems: 'center' }}>
              <select className="input" style={{ maxWidth: 180 }} value={eStatus} onChange={e => setEStatus(e.target.value)}>
                <option value="">ทุกสถานะ</option>
                {Object.keys(ESTATUS).map(k => <option key={k} value={k}>{ESTATUS[k][2]}</option>)}
              </select>
              <button className="btn btn-sm btn-primary" onClick={loadEmail}>รีเฟรช</button>
              <span style={{ fontSize: 12.5, color: 'var(--text-2)', marginLeft: 'auto' }}>ทั้งหมด {eTotal} รายการ</span>
            </div>
            {eLoading ? <div style={{ padding: 30, color: 'var(--text-2)' }}>กำลังโหลด...</div>
              : eRows.length === 0 ? <div style={{ padding: 30, color: 'var(--text-2)' }}>ยังไม่มีบันทึกการส่งอีเมล</div>
              : (
                <div className="table-wrap">
                  <table className="table">
                    <thead><tr><th>วันที่-เวลา</th><th>สถานะ</th><th>ถึง</th><th>หัวข้อ</th><th>รายละเอียด / error</th></tr></thead>
                    <tbody>
                      {eRows.map(r => (
                        <tr key={r.id}>
                          <td style={{ whiteSpace: 'nowrap' }}>{new Date(r.created_at).toLocaleString('th-TH')}</td>
                          <td><EBadge s={r.status} /></td>
                          <td style={{ fontSize: 12.5 }}>{r.to_addr || '-'}</td>
                          <td style={{ fontSize: 12.5 }}>{r.subject || '-'}</td>
                          <td style={{ fontSize: 12, color: r.error ? 'var(--red)' : 'var(--text-2)', maxWidth: 360, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.error || ''}>{r.error || (r.via ? 'ส่งผ่าน ' + r.via : '-')}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
          </>
        ) : view === 'consent' ? (<>
        <div style={{ display: 'flex', gap: 8, margin: '0 0 16px', flexWrap: 'wrap', alignItems: 'center' }}>
          <input className="input" style={{ maxWidth: 240 }} placeholder="ค้นหา เบอร์/อีเมล/IP" value={q}
            onChange={e => setQ(e.target.value)} onKeyDown={e => e.key === 'Enter' && load()} />
          <select className="input" style={{ maxWidth: 180 }} value={purpose} onChange={e => setPurpose(e.target.value)}>
            <option value="">ทุกช่องทาง</option>
            {Object.keys(PURPOSE).map(k => <option key={k} value={k}>{PURPOSE[k]}</option>)}
          </select>
          <select className="input" style={{ maxWidth: 160 }} value={action} onChange={e => setAction(e.target.value)}>
            <option value="">ทุกการกระทำ</option>
            {Object.keys(ACTION).map(k => <option key={k} value={k}>{ACTION[k][2]}</option>)}
          </select>
          <button className="btn btn-sm btn-primary" onClick={load}>ค้นหา</button>
          <span style={{ fontSize: 12.5, color: 'var(--text-2)', marginLeft: 'auto' }}>ทั้งหมด {total} รายการ</span>
        </div>

        {loading ? <div style={{ padding: 30, color: 'var(--text-2)' }}>กำลังโหลด...</div>
          : rows.length === 0 ? <div style={{ padding: 30, color: 'var(--text-2)' }}>ไม่พบ log ตามเงื่อนไข</div>
          : (
            <div className="table-wrap">
              <table className="table">
                <thead><tr><th>วันที่-เวลา</th><th>ช่องทาง</th><th>การกระทำ</th><th>ผู้ใช้/อ้างอิง</th><th>IP</th><th></th></tr></thead>
                <tbody>
                  {rows.map(r => (
                    <tr key={r.id}>
                      <td style={{ whiteSpace: 'nowrap' }}>{new Date(r.created_at).toLocaleString('th-TH')}</td>
                      <td>{PURPOSE[r.purpose] || r.purpose}</td>
                      <td><ABadge a={r.action} /></td>
                      <td style={{ fontSize: 12.5 }}>{r.user_name || r.user_email || r.subject_ref || '-'}</td>
                      <td style={{ fontSize: 12.5 }}>{r.ip_address || '-'}</td>
                      <td><button className="btn btn-sm btn-soft" onClick={() => setActive(r)}>ดู</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </>) : null}

        {active && (
          <div onClick={() => setActive(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
            <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 12, padding: 22, width: 'min(94vw,560px)', maxHeight: '88vh', overflow: 'auto' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <h3 style={{ fontSize: 17, fontWeight: 700 }}>รายละเอียด log</h3>
                <button className="btn btn-sm" onClick={() => setActive(null)}>ปิด</button>
              </div>
              <div style={{ fontSize: 13.5, lineHeight: 1.9 }}>
                <div><b>วันที่-เวลา:</b> {new Date(active.created_at).toLocaleString('th-TH')}</div>
                <div><b>ช่องทาง:</b> {PURPOSE[active.purpose] || active.purpose}</div>
                <div><b>การกระทำ:</b> {(ACTION[active.action] || [])[2] || active.action}</div>
                <div><b>ผู้ใช้:</b> {active.user_name || active.user_email || '-'}</div>
                <div><b>อ้างอิง (เบอร์/อีเมล/key):</b> {active.subject_ref || '-'}</div>
                <div><b>เวอร์ชันข้อความ:</b> {active.consent_version} · <b>นโยบาย:</b> {active.policy_version}</div>
                <div><b>IP:</b> {active.ip_address || '-'}</div>
                <div style={{ marginTop: 6 }}><b>ข้อความที่ผู้ใช้เห็น / รายละเอียด:</b><br />
                  <span style={{ display: 'block', marginTop: 4, padding: '8px 12px', background: '#F6F8FC', borderRadius: 8, fontStyle: 'italic' }}>“{active.consent_text}”</span>
                </div>
                <div style={{ marginTop: 6, color: 'var(--text-2)', fontSize: 12 }}><b>User-agent:</b> {active.user_agent || '-'}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  window.AuditLogsPage = AuditLogsPage;
})();