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

  // Pipeline funnel (ตรงกับ backend STAGES) — id · ป้ายชื่อ · คลาส badge
  const STAGES = [
    { id: 'new',         label: 'ใหม่',        badge: 'badge-yellow' },
    { id: 'contacted',   label: 'ติดต่อแล้ว',   badge: 'badge-blue' },
    { id: 'appointment', label: 'นัดคุย',       badge: 'badge-purple' },
    { id: 'proposal',    label: 'เสนอดีล',      badge: 'badge-blue' },
    { id: 'negotiation', label: 'เจรจา',        badge: 'badge-yellow' },
    { id: 'won',         label: 'ปิดการขาย',    badge: 'badge-green' },
    { id: 'lost',        label: 'ไม่สำเร็จ',     badge: 'badge-red' },
  ];
  const stageMeta = (s) => STAGES.find(x => x.id === s) || STAGES.find(x => x.id === 'new');
  // dropdown เลือก stage (funnel)
  function StageSelect({ value, onChange }) {
    return (
      <select className="input input-sm" value={value || 'new'} onChange={e => onChange(e.target.value)}>
        {STAGES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
      </select>
    );
  }
  const StageBadge = ({ value }) => { const m = stageMeta(value); return <span className={'badge ' + m.badge}>{m.label}</span>; };
  // หมวดดีลของทรัพย์ (จาก listing_type) → ป้ายสี
  const DEAL_BADGE = {
    sale: ['ขาย', 'badge-green'], rent: ['เช่า', 'badge-blue'],
    mortgage: ['จำนอง', 'badge-yellow'], consignment: ['ขายฝาก', 'badge-yellow'], npl: ['NPL', 'badge-red'],
  };
  const money = (n) => n ? Number(n).toLocaleString() + ' ฿' : null;
  // คอลัมน์ "สนใจเมื่อ" — วันที่ + เวลาห่างจากตอนนี้ (ให้ทีมรู้ว่าลีดใหม่/เก่าแค่ไหน)
  const whenCell = (ts) => {
    if (!ts) return <span style={{ color: 'var(--text-2)' }}>—</span>;
    const d = new Date(ts), days = Math.floor((Date.now() - d.getTime()) / 86400000);
    const rel = days <= 0 ? 'วันนี้' : days === 1 ? 'เมื่อวาน' : days + ' วันก่อน';
    return (
      <div style={{ fontSize: 12.5 }}>
        <div>{d.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: '2-digit' })}</div>
        <div style={{ color: days <= 1 ? '#15976A' : 'var(--text-2)', fontWeight: days <= 1 ? 700 : 400 }}>{rel}</div>
      </div>
    );
  };
  // yyyy-mm-dd ของ next_action_at (สำหรับ input date)
  const toDateInput = (ts) => ts ? new Date(ts).toISOString().slice(0, 10) : '';
  const todayStr = () => new Date().toISOString().slice(0, 10);

  function LeadsPage({ t, navigate }) {
    const [tab, setTab] = useState('interest');
    const [data, setData] = useState({ interest: [], buyer: [], matching: [] });  // โหลดทั้ง 3 กลุ่ม → นับ+สลับไว
    const [loading, setLoading] = useState(true);

    function load() {
      setLoading(true);
      Promise.all([
        window.api.investorInterest().then(d => d.leads || []).catch(() => []),
        window.api.buyerLeads().then(d => d.leads || []).catch(() => []),
        window.api.matchingLeads().then(d => d.leads || []).catch(() => []),
      ]).then(([interest, buyer, matching]) => { setData({ interest, buyer, matching }); setLoading(false); });
    }
    useEffect(load, []);
    const leads = data[tab] || [];
    // นับ "ยังไม่ติดต่อ (new)" ต่อกลุ่ม → ใช้เป็นจุดเน้นว่ายังต้องตามกี่ราย
    const cntNew = arr => arr.filter(r => (r.lead_status || r.status || 'new') === 'new').length;
    const counts = { interest: data.interest.length, buyer: data.buyer.length, matching: data.matching.length };
    const newCounts = { interest: cntNew(data.interest), buyer: cntNew(data.buyer), matching: cntNew(data.matching) };

    const [staff, setStaff] = useState([]);
    useEffect(() => { window.api.staff().then(d => setStaff(d.staff || [])).catch(() => {}); }, []);

    // Phase 2: เปิดโปรไฟล์ลูกค้า (รวมทุกลีดของเบอร์เดียว + timeline)
    const [cust, setCust] = useState(null);
    const openCust = (r) => setCust({ phone: r.phone, userId: r.user_id, name: r.name || r.display_name });
    // กระโดดไปหน้าจัดการทรัพย์ (เลือกเมนูถูก normal/npl ตาม listing_type)
    const openListing = (listingId, listingType) => {
      if (!listingId || !navigate) return;
      navigate(listingType === 'npl' ? 'npl' : 'listings', 'edit', listingId);
    };

    async function updateStatus(id, status) { try { await window.api.updateLeadStatus(id, status); load(); } catch (e) { alert('อัปเดตไม่สำเร็จ: ' + e.message); } }
    async function updateOutcome(id, outcome) { try { await window.api.updateLeadOutcome(id, outcome); load(); } catch (e) { alert('อัปเดตไม่สำเร็จ: ' + e.message); } }
    async function updateInterest(eventId, status) { try { await window.api.updateInterestStatus(eventId, status); load(); } catch (e) { alert('อัปเดตไม่สำเร็จ: ' + e.message); } }
    async function updateBuyer(id, status) { try { await window.api.updateBuyerStatus(id, status); load(); } catch (e) { alert('อัปเดตไม่สำเร็จ: ' + e.message); } }
    // CRM: ตั้งผู้รับผิดชอบ / นัดติดตามครั้งถัดไป (kind = investor|buyer|matching)
    async function updateCrm(kind, id, body) { try { await window.api.updateLeadCrm(kind, id, body); load(); } catch (e) { alert('บันทึกไม่สำเร็จ: ' + e.message); } }

    // คอลัมน์ CRM ร่วม (ผู้รับผิดชอบ + นัดติดตามถัดไป) — ใช้ทั้ง 3 กลุ่ม
    function crmCell(r, kind) {
      const overdue = r.next_action_at && toDateInput(r.next_action_at) < todayStr();
      const due = r.next_action_at && toDateInput(r.next_action_at) === todayStr();
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 150 }}>
          <select className="input input-sm" value={r.assigned_to || ''} onChange={e => updateCrm(kind, r.id, { assigned_to: e.target.value || null })} title="ผู้รับผิดชอบ">
            <option value="">— ยังไม่มอบหมาย —</option>
            {staff.map(s => <option key={s.id} value={s.id}>{s.display_name || s.email}</option>)}
          </select>
          <input type="date" className="input input-sm" value={toDateInput(r.next_action_at)}
            onChange={e => updateCrm(kind, r.id, { next_action_at: e.target.value || null })} title="นัดติดตามครั้งถัดไป"
            style={overdue ? { borderColor: '#D8567A', color: '#C0344F' } : due ? { borderColor: '#B5860B', color: '#8A6D1B' } : {}} />
          {(overdue || due) && <span style={{ fontSize: 11, fontWeight: 700, color: overdue ? '#C0344F' : '#8A6D1B' }}>{overdue ? '⚠️ เกินกำหนด' : '📅 ครบวันนี้'}</span>}
        </div>
      );
    }
    // นับงานติดตามค้าง (ทุกกลุ่ม) — เกินกำหนด / ครบวันนี้
    const allLeads = [...data.interest, ...data.buyer, ...data.matching];
    const overdueN = allLeads.filter(r => r.next_action_at && toDateInput(r.next_action_at) < todayStr()).length;
    const dueTodayN = allLeads.filter(r => r.next_action_at && toDateInput(r.next_action_at) === todayStr()).length;

    // คอลัมน์ "ผู้ที่ต้องติดต่อ" — รวมชื่อ + ช่องทางติดต่อ (เบอร์/อีเมล) · คลิกชื่อ = เปิดโปรไฟล์ลูกค้า
    const contactCell = (name, phone, email, phoneVerified, onName) => (
      <div>
        <div className={'text-bold' + (onName ? ' cust-clickable' : '')} onClick={onName} title={onName ? 'ดูโปรไฟล์ลูกค้า' : ''}>{name || '-'}</div>
        <div style={{fontSize:12.5,marginTop:2}}>
          {phone
            ? <span><a href={'tel:'+phone} style={{color:'var(--blue)',textDecoration:'none'}}><i className="ph ph-phone" style={{marginRight:4}}></i>{phone}</a>{phoneVerified && <i className="ph ph-seal-check" style={{marginLeft:4,color:'#15976A'}} title="เบอร์ยืนยันด้วย OTP แล้ว"></i>}</span>
            : <span style={{color:'var(--text-2)'}}><i className="ph ph-phone" style={{marginRight:4}}></i>ไม่มีเบอร์ — ติดต่อทางอีเมล</span>}
        </div>
        {email && <div style={{fontSize:12,marginTop:1}}><a href={'mailto:'+email} style={{color:'var(--text-2)',textDecoration:'none'}}><i className="ph ph-envelope-simple" style={{marginRight:4}}></i>{email}</a></div>}
      </div>
    );
    // การ์ดทรัพย์แบบละเอียด — รูป + ชื่อ(ลิงก์) + รหัส + จังหวัด + ราคา + หมวด · คลิก = เปิดหน้าจัดการทรัพย์
    const propCell = (r) => {
      const code = r.listing_code || (r.listing_id || '').slice(0, 8);
      const deal = DEAL_BADGE[r.listing_type];
      const go = () => openListing(r.listing_id, r.listing_type);
      return (
        <div className="lead-prop" onClick={go} title="เปิดหน้าจัดการทรัพย์นี้">
          {r.cover_image_url
            ? <img src={r.cover_image_url} className="lead-prop-thumb" alt="" loading="lazy" />
            : <div className="lead-prop-thumb lead-prop-noimg"><i className="ph ph-image"></i></div>}
          <div style={{ minWidth: 0 }}>
            <div className="lead-prop-title">{r.listing_title || 'ทรัพย์'} <i className="ph ph-arrow-square-out"></i></div>
            <div className="lead-prop-meta">
              <span style={{ fontFamily: 'monospace', color: 'var(--blue)' }}>#{code}</span>
              {r.province && <span>· {r.province}</span>}
              {deal && <span className={'badge ' + deal[1]} style={{ padding: '0 6px', fontSize: 10.5 }}>{deal[0]}</span>}
            </div>
            {money(r.price) && <div className="lead-prop-price">{money(r.price)}</div>}
          </div>
        </div>
      );
    };

    const buyerCols = [
      { label: 'ผู้ที่ต้องติดต่อ', sortKey: 'name', render: r => contactCell(r.name || r.display_name, r.phone, r.email, true, () => openCust(r)) },
      { label: 'ทรัพย์ที่สนใจซื้อ', sortKey: 'listing_title', render: r => propCell(r) },
      { label: 'สนใจเมื่อ', sortKey: 'created_at', render: r => whenCell(r.created_at) },
      { label: 'ผู้รับผิดชอบ / นัดถัดไป', render: r => crmCell(r, 'buyer') },
      { label: 'สถานะ', sortKey: 'status', render: r => <StageBadge value={r.status} /> },
      { label: 'จัดการ', render: r => <StageSelect value={r.status} onChange={v => updateBuyer(r.id, v)} /> },
    ];

    const matchingCols = [
      { label: t('name'), sortKey: 'name', render: r => <span className="text-bold cust-clickable" onClick={() => openCust(r)} title="ดูโปรไฟล์ลูกค้า">{r.name || '-'}</span> },
      { label: t('phone'), sortKey: 'phone', render: r => r.phone },
      { label: t('leads_asset_type'), sortKey: 'asset_type', render: r => r.asset_type || '-' },
      { label: t('leads_amount'), sortKey: 'amount_needed', render: r => r.amount_needed ? Number(r.amount_needed).toLocaleString() + ' ฿' : '-' },
      { label: t('leads_province'), sortKey: 'province', render: r => r.province || '-' },
      { label: 'ผู้รับผิดชอบ / นัดถัดไป', render: r => crmCell(r, 'matching') },
      { label: t('status'), sortKey: 'status', render: r => <StageBadge value={r.status} /> },
      // ลูกค้ากรอกฟอร์มตอนยังไม่รู้ว่าจะเป็นขายฝากหรือจำนอง — ทีมเคาะแล้วบันทึกที่นี่
      { label: 'จบเป็นดีล', sortKey: 'deal_outcome', render: r => (
        <select className="input input-sm" value={r.deal_outcome || ''} onChange={e => updateOutcome(r.id, e.target.value)}>
          <option value="">— ยังไม่สรุป —</option>
          <option value="consignment">ขายฝาก</option>
          <option value="mortgage">จำนอง</option>
          <option value="no_deal">ไม่ได้ดีล</option>
        </select>
      )},
      { label: t('actions'), render: r => <StageSelect value={r.status} onChange={v => updateStatus(r.id, v)} /> },
    ];

    const interestCols = [
      { label: 'ผู้ที่ต้องติดต่อ', sortKey: 'display_name', render: r => contactCell(r.display_name, r.phone, r.email, !!r.phone, () => openCust(r)) },
      { label: 'สนใจทรัพย์', sortKey: 'listing_title', render: r => (
        <div>
          {propCell(r)}
          {/* ลูกค้ากดสนใจซ้ำ = ตามเรื่องอยู่ / ทีมยังไม่โทร → เน้นให้เห็นชัด */}
          {Number(r.interest_count) > 1 && (
            <div style={{ marginTop: 4 }}>
              <span className="badge badge-red" title={r.last_interest_at ? 'ล่าสุด ' + new Date(r.last_interest_at).toLocaleString('th-TH', { dateStyle: 'short', timeStyle: 'short' }) : ''}>
                🔔 ตามมาแล้ว {r.interest_count} ครั้ง
              </span>
            </div>
          )}
        </div>
      )},
      { label: 'สนใจเมื่อ', sortKey: 'created_at', render: r => whenCell(r.created_at) },
      // สถานะ KYC = ยืนยันตัวตนด้วยเอกสาร + แอดมินอนุมัติ (คนละเรื่องกับยืนยันเบอร์ OTP ที่ช่องผู้ติดต่อ)
      { label: 'ยืนยัน KYC', sortKey: 'kyc', render: r => {
        const m = { no_account: ['badge-red', 'ยังไม่สมัคร'], unverified: ['badge-yellow', 'ยังไม่ทำ KYC'],
                    pending: ['badge-blue', 'รอตรวจ KYC'], rejected: ['badge-red', 'KYC ไม่ผ่าน'], verified: ['badge-green', 'KYC ผ่านแล้ว'] }[r.kyc];
        return m ? <span className={'badge ' + m[0]}>{m[1]}</span> : <span style={{ color: 'var(--text-2)' }}>—</span>;
      }},
      { label: 'ผู้รับผิดชอบ / นัดถัดไป', render: r => crmCell(r, 'investor') },
      { label: 'สถานะ', sortKey: 'lead_status', render: r => <StageBadge value={r.lead_status} /> },
      { label: 'จัดการ', render: r => (
        <StageSelect value={r.lead_status} onChange={v => updateInterest(r.id, v)} />
      )},
    ];

    const inquiryCols = [
      { label: t('name'), sortKey: 'name', render: r => r.name },
      { label: t('phone'), sortKey: 'phone', render: r => r.phone },
      { label: t('leads_listing'), sortKey: 'listing_title', render: r => r.listing_title },
      { label: t('leads_message'), render: r => <span className="text-clamp">{r.message}</span> },
      { label: t('date'), sortKey: 'created_at', render: r => new Date(r.created_at).toLocaleDateString('th-TH') },
      { label: t('leads_read'), sortKey: 'is_read', render: r => r.is_read ? t('leads_read_yes') : t('leads_read_no') },
    ];

    const ts = window.useTableSort(leads, 'created_at', 'desc', ['amount_needed']);

    return (
      <div className="page">
        <div className="page-header"><h1><i className="ph ph-tray-arrow-down" style={{marginRight:8,color:'#4A6079'}}></i>{t('leads_title')}</h1></div>
        {/* การ์ดกลุ่มลีด — โชว์จำนวน + จุดเน้นถ้ายังมีคนยังไม่ติดต่อ (จุด = จำนวน new) · matching = เจ้าของทรัพย์ขอเงินทุน */}
        <window.FilterCards active={tab} onSelect={setTab} items={[
          { id: 'interest', label: 'ผู้สนใจลงทุน', icon: 'ph-trend-up', color: '#2A6BE0', bg: '#EAF1FD', count: counts.interest, hot: newCounts.interest > 0 },
          { id: 'buyer', label: 'ผู้สนใจซื้อทรัพย์', icon: 'ph-house', color: '#15976A', bg: '#E8F7F0', count: counts.buyer, hot: newCounts.buyer > 0 },
          { id: 'matching', label: 'ขอเงินทุน (เจ้าของทรัพย์)', icon: 'ph-hand-coins', color: '#B5860B', bg: '#FFF7E6', count: counts.matching, hot: newCounts.matching > 0 },
        ]} />
        {/* งานติดตามค้าง — นับจากนัดถัดไป (next_action_at) ทุกกลุ่ม เพื่อให้ทีมไม่พลาดคิว */}
        {(overdueN > 0 || dueTodayN > 0) && (
          <div style={{marginTop:12,display:'flex',gap:10,flexWrap:'wrap'}}>
            {overdueN > 0 && (
              <div style={{fontSize:13,fontWeight:700,color:'#C0344F',background:'#FDECEF',border:'1px solid #F5C6D0',borderRadius:10,padding:'9px 14px'}}>
                ⚠️ งานเกินกำหนด {overdueN} รายการ — ควรตามด่วน
              </div>
            )}
            {dueTodayN > 0 && (
              <div style={{fontSize:13,fontWeight:700,color:'#8A6D1B',background:'#FFF7E6',border:'1px solid #F0E0B0',borderRadius:10,padding:'9px 14px'}}>
                📅 นัดติดตามวันนี้ {dueTodayN} รายการ
              </div>
            )}
          </div>
        )}
        <div style={{marginTop:12,fontSize:13,color:'var(--text-2)',background:'#EEF3F9',border:'1px solid #DDE9FC',borderRadius:10,padding:'9px 14px'}}>
          💡 ลูกค้าที่กด “สนใจ” บนหน้าเว็บ — โทร/อีเมลกลับตามช่องทางในคอลัมน์ <b>ผู้ที่ต้องติดต่อ</b> · มอบหมาย <b>ผู้รับผิดชอบ</b> และตั้ง <b>นัดถัดไป</b> · เลื่อนสถานะตามขั้น <b>ใหม่ → ติดต่อแล้ว → นัดคุย → เสนอดีล → เจรจา → ปิดการขาย</b>
        </div>
        <div className="card" style={{marginTop:16}}>
          <Table columns={{interest:interestCols, buyer:buyerCols, matching:matchingCols}[tab] || interestCols} data={ts.sorted} loading={loading} empty={t('leads_no_data')} sort={ts.sort} onSort={ts.onSort} />
        </div>
        {cust && <window.CustomerDrawer phone={cust.phone} userId={cust.userId} name={cust.name}
          onOpenListing={(id, type) => { setCust(null); openListing(id, type); }}
          onClose={() => setCust(null)} />}
      </div>
    );
  }

  window.LeadsPage = LeadsPage;
})();