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

  // กล่องกราฟ (Chart.js) — doughnut / bar · ถ้าข้อมูลเป็น 0 ทั้งหมดโชว์ "ยังไม่มีข้อมูล"
  function ChartBox({ title, type, labels, data, colors, empty }) {
    const canvasRef = useRef(null);
    const chartRef = useRef(null);
    const total = (data || []).reduce((a, b) => a + (Number(b) || 0), 0);
    const key = JSON.stringify([type, labels, data]);
    useEffect(() => {
      if (!canvasRef.current || !window.Chart || total === 0) return;
      const isDoughnut = type === 'doughnut';
      chartRef.current = new window.Chart(canvasRef.current, {
        type,
        data: {
          labels,
          datasets: [{
            data,
            backgroundColor: isDoughnut ? colors : (colors[0] || '#2A6BE0'),
            borderColor: '#fff', borderWidth: isDoughnut ? 2 : 0, borderRadius: isDoughnut ? 0 : 8,
            maxBarThickness: 46,
          }],
        },
        options: {
          responsive: true, maintainAspectRatio: false, cutout: isDoughnut ? '62%' : undefined,
          plugins: {
            legend: { display: isDoughnut, position: 'right', labels: { boxWidth: 12, padding: 12, font: { family: 'Prompt', size: 12 } } },
            tooltip: { bodyFont: { family: 'Prompt' }, titleFont: { family: 'Prompt' } },
          },
          scales: isDoughnut ? {} : {
            y: { beginAtZero: true, ticks: { precision: 0, font: { family: 'Prompt' } }, grid: { color: '#eef0f3' } },
            x: { ticks: { font: { family: 'Prompt' } }, grid: { display: false } },
          },
        },
      });
      return () => { if (chartRef.current) { chartRef.current.destroy(); chartRef.current = null; } };
    }, [key, total]);
    return (
      <div className="card" style={{ padding: 20 }}>
        <h3 style={{ marginBottom: 14 }}>{title}</h3>
        {total === 0
          ? <div style={{ color: 'var(--text-2)', padding: '40px 0', textAlign: 'center' }}>{empty || 'ยังไม่มีข้อมูล'}</div>
          : <div style={{ position: 'relative', height: 240 }}><canvas ref={canvasRef}></canvas></div>}
      </div>
    );
  }

  function ExecutivePage({ lang }) {
    const T = (a, b) => lang === 'en' ? b : a;
    const [r, setR] = useState(null);
    const [err, setErr] = useState('');
    const [emailMsg, setEmailMsg] = useState('');
    const [emailTesting, setEmailTesting] = useState(false);
    const [emailStat, setEmailStat] = useState(null);

    useEffect(() => {
      window.api.executiveReport().then(setR).catch(e => setErr(e.message));
      window.api.emailStatus().then(setEmailStat).catch(() => {});
    }, []);

    async function testEmail() {
      setEmailTesting(true); setEmailMsg('');
      try {
        const d = await window.api.testEmail();
        setEmailMsg(d.ok ? T('✅ ส่งสำเร็จ ผ่าน ', '✅ Sent via ') + (d.via || 'Gmail') + ' → ' + d.to
          : '⚠️ ' + (d.error || T('ส่งไม่สำเร็จ', 'Failed')));
        window.api.emailStatus().then(setEmailStat).catch(() => {});
      } catch (e) { setEmailMsg('⚠️ ' + e.message); }
      setEmailTesting(false);
    }

    const fmt = (n) => Number(n || 0).toLocaleString();
    const fmtBaht = (n) => {
      n = Number(n || 0);
      if (n >= 1e6) return (n / 1e6).toLocaleString(undefined, { maximumFractionDigits: 2 }) + T(' ล้าน', 'M');
      return fmt(n);
    };

    if (err) return <div className="page"><div className="card" style={{padding:24,color:'var(--red)'}}><i className="ph ph-prohibit" style={{marginRight:6}}></i>{err} — {T('เฉพาะผู้บริหาร (super admin) เท่านั้น', 'Executive (super admin) only')}</div></div>;
    if (!r) return <div className="loading">{T('กำลังโหลด...', 'Loading...')}</div>;

    const ds = (r.deals || {}).by_status || {}, is = (r.investors || {}).by_status || {}, ac = r.activity || {};
    r.deals = r.deals || {}; r.investors = r.investors || {};
    const dealStatusMeta = [
      { k: 'open', l: T('เปิดรับ', 'Open'), c: '#15976A' },
      { k: 'in_progress', l: T('ดำเนินการ', 'In progress'), c: '#1F58C4' },
      { k: 'paused', l: T('พักไว้', 'Paused'), c: '#B5860B' },
      { k: 'completed', l: T('สำเร็จ', 'Completed'), c: '#7C3AED' },
      { k: 'cancelled', l: T('ยกเลิก', 'Cancelled'), c: '#8A94A6' },
    ];

    const Stat = ({ label, value, sub, color }) => (
      <div className="card exec-stat">
        <div className="exec-stat-label">{label}</div>
        <div className="exec-stat-value" style={color ? { color } : {}}>{value}</div>
        {sub && <div className="exec-stat-sub">{sub}</div>}
      </div>
    );

    const TopTable = ({ title, rows }) => (
      <div className="card" style={{ padding: 20 }}>
        <h3 style={{ marginBottom: 14 }}>{title}</h3>
        {(!rows || !rows.length) ? <div style={{ color: 'var(--text-2)', padding: '12px 0' }}>{T('ยังไม่มีข้อมูล', 'No data yet')}</div>
          : <table className="exec-toptable"><tbody>
              {rows.map((x, i) => (
                <tr key={x.listing_id}>
                  <td style={{ width: 24, color: 'var(--text-2)' }}>{i + 1}</td>
                  <td>{x.title}</td>
                  <td style={{ textAlign: 'right', fontWeight: 700 }}>{x.n}</td>
                </tr>
              ))}
            </tbody></table>}
      </div>
    );

    return (
      <div className="page">
        <div className="page-header">
          <h1><i className="ph ph-chart-line-up" style={{marginRight:8,color:'#4A6079'}}></i>{T('รายงานผู้บริหาร', 'Executive report')}</h1>
          <div className="row gap-10" style={{alignItems:'center'}}>
            {emailMsg && <span style={{fontSize:13,fontWeight:600,color: emailMsg.startsWith('✅')?'var(--green)':'var(--red)'}}>{emailMsg}</span>}
            <button className="btn btn-ghost btn-sm" onClick={testEmail} disabled={emailTesting}><i className="ph ph-envelope" style={{marginRight:5}}></i>{emailTesting ? T('กำลังส่ง...', 'Sending...') : T('ทดสอบส่งอีเมล', 'Test email')}</button>
          </div>
        </div>

        {/* ===== สถานะระบบอีเมล ===== */}
        {emailStat && (
          <div className="card" style={{ padding: '14px 18px', marginBottom: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', fontSize: 13 }}>
              <b style={{ color: 'var(--navy)' }}>{T('ระบบอีเมล', 'Email')}: {emailStat.provider}</b>
              <span style={{ background: emailStat.gmail_ready ? 'var(--green-light)' : 'var(--red-light)', color: emailStat.gmail_ready ? 'var(--green)' : 'var(--red)', padding: '2px 10px', borderRadius: 99, fontWeight: 600 }}>
                {emailStat.gmail_ready ? T('พร้อมใช้งาน (ตั้งค่าครบ)', 'Ready') : T('ยังไม่พร้อม (ขาดการตั้งค่า)', 'Not configured')}
              </span>
              <span style={{ color: 'var(--text-2)' }}>{T('ผู้ส่ง', 'Sender')}: {emailStat.gmail_sender || '-'}</span>
              <span style={{ color: 'var(--text-2)' }}>· {T('อีเมลแจ้งทีม', 'Notify')}: {emailStat.notify_email ? T('ตั้งแล้ว', 'set') : T('ยังไม่ตั้ง (ADMIN_NOTIFY_EMAIL)', 'not set')}</span>
            </div>
            {emailStat.last_error && (
              <div style={{ marginTop: 8, padding: '8px 12px', background: 'var(--red-light)', borderRadius: 8, fontSize: 12.5, color: 'var(--red)' }}>
                <b>{T('error ล่าสุด', 'Last error')}:</b> {emailStat.last_error.error}
                <div style={{ color: 'var(--text-2)', marginTop: 2 }}>{new Date(emailStat.last_error.at).toLocaleString('th-TH')} · → {emailStat.last_error.to}</div>
              </div>
            )}
          </div>
        )}

        {/* ===== ภาพรวมดีล ===== */}
        <h3 className="exec-section">{T('ภาพรวมดีล', 'Deals overview')}</h3>
        <div className="exec-grid">
          {dealStatusMeta.map(m => <Stat key={m.k} label={m.l} value={ds[m.k] || 0} color={m.c} />)}
        </div>
        <div className="exec-grid" style={{ marginTop: 14 }}>
          <Stat label={T('ดีลปิดสำเร็จ', 'Completed deals')} value={r.deals.completed_count} color="#7C3AED" />
          <Stat label={T('มูลค่าทรัพย์รวม (สำเร็จ)', 'Completed asset value')} value={fmtBaht(r.deals.completed_value_price)} sub={T('บาท', 'THB')} />
          <Stat label={T('ยอดสินเชื่อรวม (สำเร็จ)', 'Completed loan value')} value={fmtBaht(r.deals.completed_value_loan)} sub={T('บาท', 'THB')} />
        </div>

        {/* ===== กราฟภาพรวม ===== */}
        <div className="exec-grid-2" style={{ marginTop: 18 }}>
          <ChartBox
            title={T('สัดส่วนสถานะดีล', 'Deal status share')}
            type="doughnut"
            labels={dealStatusMeta.map(m => m.l)}
            data={dealStatusMeta.map(m => ds[m.k] || 0)}
            colors={dealStatusMeta.map(m => m.c)} />
          {(() => {
            const pend = is.pending || 0, appr = is.approved || 0, rej = is.rejected || 0;
            const unv = Math.max(0, (r.investors.total || 0) - pend - appr - rej);
            return <ChartBox
              title={T('สัดส่วนสถานะนักลงทุน', 'Investor status share')}
              type="doughnut"
              labels={[T('รออนุมัติ', 'Pending'), T('อนุมัติแล้ว', 'Approved'), T('ปฏิเสธ', 'Rejected'), T('ยังไม่ยื่น', 'Unverified')]}
              data={[pend, appr, rej, unv]}
              colors={['#B5860B', '#15976A', '#D8567A', '#8A94A6']} />;
          })()}
        </div>

        {/* ===== นักลงทุน ===== */}
        <h3 className="exec-section">{T('นักลงทุน', 'Investors')}</h3>
        <div className="exec-grid">
          <Stat label={T('ทั้งหมด', 'Total')} value={r.investors.total} />
          <Stat label={T('รออนุมัติ', 'Pending')} value={is.pending || 0} color="#B5860B" />
          <Stat label={T('อนุมัติแล้ว', 'Approved')} value={is.approved || 0} color="#15976A" />
          <Stat label={T('ปฏิเสธ', 'Rejected')} value={is.rejected || 0} color="#D8567A" />
          <Stat label={T('กรอกโปรไฟล์ครบ', 'Profile ready')} value={r.investors.profile_complete} sub={T('พร้อม matching', 'matching-ready')} color="#1F58C4" />
        </div>

        {/* ===== กิจกรรม ===== */}
        <h3 className="exec-section">{T('กิจกรรมในระบบ', 'Activity')}</h3>
        <div className="exec-grid">
          <Stat label={T('เปิดดูทรัพย์ (view)', 'Views')} value={fmt(ac.view_total)} />
          <Stat label={T('บันทึกโปรด (save)', 'Saves')} value={fmt(ac.save_total)} />
          <Stat label={T('แสดงความสนใจ', 'Interest')} value={fmt(ac.interest_total)} color="#15976A" />
          <Stat label={T('ติดต่อ', 'Contact')} value={fmt(ac.contact_total)} />
        </div>
        <div style={{ marginTop: 14 }}>
          <ChartBox
            title={T('เปรียบเทียบกิจกรรม', 'Activity comparison')}
            type="bar"
            labels={[T('เปิดดู', 'Views'), T('บันทึก', 'Saves'), T('สนใจ', 'Interest'), T('ติดต่อ', 'Contact')]}
            data={[ac.view_total || 0, ac.save_total || 0, ac.interest_total || 0, ac.contact_total || 0]}
            colors={['#2A6BE0']} />
        </div>
        <div className="exec-grid-2" style={{ marginTop: 14 }}>
          <TopTable title={T('ทรัพย์ถูกดูมากสุด (Top 5)', 'Most viewed (Top 5)')} rows={ac.top_viewed} />
          <TopTable title={T('ทรัพย์ถูกบันทึกมากสุด (Top 5)', 'Most saved (Top 5)')} rows={ac.top_saved} />
        </div>

        {/* ===== แนวโน้มดีลสำเร็จ ===== */}
        {r.completed_trend && r.completed_trend.length > 0 && (
          <>
            <h3 className="exec-section">{T('แนวโน้มดีลสำเร็จรายเดือน', 'Completed deals by month')}</h3>
            <div className="card" style={{ padding: 20 }}>
              <table className="exec-toptable"><tbody>
                {r.completed_trend.map(m => (
                  <tr key={m.month}>
                    <td>{m.month}</td>
                    <td style={{ textAlign: 'right' }}>{m.n} {T('ดีล', 'deals')}</td>
                    <td style={{ textAlign: 'right', fontWeight: 700 }}>{fmtBaht(m.value)} {T('บาท', 'THB')}</td>
                  </tr>
                ))}
              </tbody></table>
            </div>
          </>
        )}

        <p style={{ color: 'var(--text-2)', fontSize: 13, marginTop: 20 }}>
          {T('* ข้อมูล read-only — ดีลสำเร็จถูกซ่อนหน้าบ้านแต่ยังนับในรายงาน', '* Read-only — completed deals are hidden from the site but counted here')}
        </p>
      </div>
    );
  }

  window.ExecutivePage = ExecutivePage;
})();