// crm_module.jsx — مدیریت ماژول CRM در پنل SmartBot

const CrmModule = () => {
  const { useState, useEffect } = React;
  const { Icon, Button, Modal, useToast } = window.SB_UI;
  const { push } = useToast();

  const [cfg, setCfg]     = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [toggling, setToggling] = React.useState(false);
  const [adminModal, setAdminModal] = React.useState(false);

  const token = localStorage.getItem(window.TOKEN_KEY);
  const headers = { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` };

  const load = async () => {
    try {
      const r = await fetch('/api/crm-settings', { headers });
      const d = await r.json();
      if (d.success) setCfg(d.data);
    } catch (e) { push('خطا در بارگذاری', 'error'); }
    finally { setLoading(false); }
  };

  useEffect(() => { load(); }, []);

  const toggle = async () => {
    setToggling(true);
    try {
      const r = await fetch('/api/crm-settings/toggle', { method: 'PUT', headers });
      const d = await r.json();
      if (d.success) { setCfg(p => ({...p, enabled: d.data.enabled})); push(d.data.enabled ? 'CRM فعال شد ✓' : 'CRM غیرفعال شد'); }
      else push(d.message, 'error');
    } catch { push('خطا', 'error'); }
    finally { setToggling(false); }
  };

  if (loading) return <div style={{padding:40, textAlign:'center'}}>در حال بارگذاری…</div>;

  return (
    <div style={{maxWidth:720, margin:'0 auto', padding:'28px 20px'}}>
      {/* هدر */}
      <div style={{marginBottom:28}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:6}}>
          <div style={{width:40, height:40, borderRadius:12, background:'linear-gradient(150deg,#7c4ddb,#2a6fdb)', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Icon name="layout-dashboard" size={20} style={{color:'#fff'}}/>
          </div>
          <div>
            <div style={{fontWeight:800, fontSize:20}}>ماژول CRM فروشندگان</div>
            <div style={{fontSize:12.5, color:'var(--text-3)'}}>پنل مستقل پیگیری و مدیریت لید — متصل به همین دیتابیس</div>
          </div>
        </div>
      </div>

      {/* کارت وضعیت */}
      <div className="card" style={{marginBottom:16, padding:'20px 24px'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div style={{fontWeight:700, fontSize:15, marginBottom:4}}>وضعیت ماژول</div>
            <div style={{fontSize:13, color:'var(--text-3)'}}>
              {cfg?.enabled
                ? 'ماژول CRM فعال است — فروشندگان می‌توانند وارد شوند'
                : 'ماژول CRM غیرفعال است — دسترسی مسدود است'}
            </div>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <div style={{
              display:'flex', alignItems:'center', gap:7,
              padding:'5px 14px', borderRadius:20, fontSize:13, fontWeight:700,
              background: cfg?.enabled ? '#e7f6ee' : '#f1f2f4',
              color: cfg?.enabled ? '#1f9d57' : '#6b7280',
            }}>
              <div style={{width:8, height:8, borderRadius:'50%', background:'currentColor'}}/>
              {cfg?.enabled ? 'فعال' : 'غیرفعال'}
            </div>
            <button
              onClick={toggle}
              disabled={toggling}
              style={{
                padding:'8px 20px', borderRadius:10, border:'none', cursor:toggling?'not-allowed':'pointer',
                fontFamily:'inherit', fontWeight:600, fontSize:13.5, transition:'.13s',
                background: cfg?.enabled ? '#fbeceb' : '#e7f6ee',
                color: cfg?.enabled ? '#d6453c' : '#1f9d57',
                opacity: toggling ? .6 : 1,
              }}>
              {toggling ? 'در حال تغییر…' : cfg?.enabled ? '⛔ غیرفعال کردن' : '✅ فعال کردن'}
            </button>
          </div>
        </div>
      </div>

      {/* یوزر ادمین CRM */}
      <div className="card" style={{marginBottom:16, padding:'20px 24px'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16}}>
          <div>
            <div style={{fontWeight:700, fontSize:15, marginBottom:4}}>یوزر ادمین CRM</div>
            <div style={{fontSize:13, color:'var(--text-3)'}}>
              این یوزر <b>جدا</b> از ادمین SmartBot است و فقط به پنل مدیریت CRM دسترسی دارد
            </div>
          </div>
          <button
            onClick={() => setAdminModal(true)}
            style={{
              padding:'8px 18px', borderRadius:10, border:'1.5px solid var(--border)',
              fontFamily:'inherit', fontWeight:600, fontSize:13, cursor:'pointer',
              background:'var(--surface)', display:'flex', alignItems:'center', gap:7,
            }}>
            <Icon name="user-cog" size={15}/>
            {cfg?.has_password ? 'ویرایش یوزر' : 'تعریف یوزر'}
          </button>
        </div>

        {cfg?.admin_username ? (
          <div style={{display:'flex', gap:20, padding:'12px 16px', background:'var(--bg)', borderRadius:10}}>
            <InfoItem label="نام کاربری" value={cfg.admin_username} mono/>
            <InfoItem label="نام نمایشی" value={cfg.admin_display_name}/>
            <InfoItem label="رمز عبور" value={cfg.has_password ? '••••••••' : 'تعریف‌نشده'}/>
          </div>
        ) : (
          <div style={{padding:'14px 16px', background:'#fbf3e2', borderRadius:10, color:'#c98a16', fontSize:13}}>
            ⚠️ یوزر ادمین CRM هنوز تعریف نشده. ابتدا یوزر تعریف کنید، سپس ماژول را فعال کنید.
          </div>
        )}
      </div>

      {/* دسترسی سریع */}
      <div className="card" style={{marginBottom:16, padding:'20px 24px'}}>
        <div style={{fontWeight:700, fontSize:15, marginBottom:14}}>دسترسی سریع</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
          <LinkCard
            title="پنل فروشندگان"
            desc="داشبورد اختصاصی هر فروشنده — لیدها، تماس، پیگیری، AI"
            href="/crm"
            icon="users"
            color="#2a6fdb"
            disabled={!cfg?.enabled}
          />
          <LinkCard
            title="پنل مدیریت CRM"
            desc="داشبورد مدیر — فروشندگان، توزیع لید، گزارش عملکرد"
            href="/crm/admin"
            icon="layout-dashboard"
            color="#7c4ddb"
            disabled={!cfg?.enabled || !cfg?.has_password}
          />
        </div>
      </div>

      {/* اطلاعات فنی */}
      <div className="card" style={{padding:'20px 24px', background:'var(--surface-2)'}}>
        <div style={{fontWeight:700, fontSize:14, marginBottom:12, display:'flex', alignItems:'center', gap:8}}>
          <Icon name="info" size={16}/> اطلاعات فنی
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:8}}>
          <TechRow label="دیتابیس" value="leads.db — مشترک با SmartBot"/>
          <TechRow label="آدرس فروشنده" value="http://localhost:3000/crm" mono/>
          <TechRow label="آدرس ادمین CRM" value="http://localhost:3000/crm/admin" mono/>
          <TechRow label="API" value="/api/crm/*"/>
          <TechRow label="سیستم توزیع" value="Market Cron (خودکار) + دستی از پنل ادمین"/>
          <TechRow label="AI مشاور" value="Claude API — همان کانفیگ SmartBot"/>
        </div>
      </div>

      {/* Modal تعریف/ویرایش یوزر ادمین */}
      {adminModal && (
        <AdminUserModal
          current={cfg}
          onClose={() => setAdminModal(false)}
          onSaved={(newCfg) => { setCfg(p => ({...p, ...newCfg})); setAdminModal(false); push('یوزر ادمین ذخیره شد ✓'); }}
          headers={headers}
          push={push}
        />
      )}
    </div>
  );
};

/* ── کامپوننت‌های کمکی ── */
function InfoItem({ label, value, mono }) {
  return (
    <div>
      <div style={{fontSize:11, color:'var(--text-3)', marginBottom:3}}>{label}</div>
      <div style={{fontWeight:600, fontSize:13, direction: mono ? 'ltr' : 'rtl'}}>{value}</div>
    </div>
  );
}

function TechRow({ label, value, mono }) {
  return (
    <div style={{display:'flex', justifyContent:'space-between', gap:12, fontSize:13, borderBottom:'1px solid var(--border)', paddingBottom:7}}>
      <span style={{color:'var(--text-3)'}}>{label}</span>
      <span style={{fontWeight:600, direction: mono?'ltr':'rtl'}}>{value}</span>
    </div>
  );
}

function LinkCard({ title, desc, href, icon, color, disabled }) {
  const { Icon } = window.SB_UI;
  return (
    <div
      onClick={() => !disabled && window.open(href, '_blank')}
      style={{
        padding:'16px', borderRadius:12, border:'1.5px solid var(--border)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? .5 : 1, transition:'.13s',
        background:'var(--surface)',
      }}
      onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = color; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}
    >
      <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:8}}>
        <div style={{width:32, height:32, borderRadius:9, background:color+'22', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icon name={icon} size={17} style={{color}}/>
        </div>
        <div style={{fontWeight:700, fontSize:13.5}}>{title}</div>
        {!disabled && <Icon name="external-link" size={12} style={{color:'var(--text-3)', marginRight:'auto'}}/>}
      </div>
      <div style={{fontSize:12, color:'var(--text-3)', lineHeight:1.6}}>{desc}</div>
      {disabled && <div style={{fontSize:11, color:'#c98a16', marginTop:6}}>⚠️ {title==='پنل مدیریت CRM' ? 'یوزر ادمین تعریف نشده' : 'ماژول غیرفعال است'}</div>}
    </div>
  );
}

function AdminUserModal({ current, onClose, onSaved, headers, push }) {
  const { Icon } = window.SB_UI;
  const [username, setUsername] = React.useState(current?.admin_username || '');
  const [displayName, setDisplayName] = React.useState(current?.admin_display_name || 'مدیر فروش');
  const [password, setPassword] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const save = async () => {
    if (!username.trim()) return push('نام کاربری الزامی است', 'error');
    if (!current?.has_password && !password) return push('رمز عبور الزامی است', 'error');
    if (password && password.length < 4) return push('رمز عبور حداقل ۴ کاراکتر', 'error');
    if (password && password !== confirm) return push('رمز عبور با تکرارش مطابقت ندارد', 'error');
    setLoading(true);
    try {
      const body = { username: username.trim(), display_name: displayName.trim() };
      if (password) body.password = password;
      const r = await fetch('/api/crm-settings/admin', { method:'PUT', headers, body:JSON.stringify(body) });
      const d = await r.json();
      if (d.success) onSaved({ admin_username: username.trim(), admin_display_name: displayName.trim(), has_password: true });
      else push(d.message, 'error');
    } catch { push('خطا در ذخیره', 'error'); }
    finally { setLoading(false); }
  };

  return (
    <div style={{position:'fixed',inset:0,background:'rgba(20,28,45,.55)',display:'flex',alignItems:'center',justifyContent:'center',zIndex:1000,backdropFilter:'blur(4px)'}} onClick={e=>{if(e.target===e.currentTarget)onClose()}}>
      <div style={{background:'var(--surface)',borderRadius:20,width:'100%',maxWidth:440,margin:16,boxShadow:'0 18px 50px rgba(20,28,45,.18)',overflow:'hidden'}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'18px 22px',borderBottom:'1px solid var(--border)'}}>
          <div style={{fontWeight:700,fontSize:16}}>تعریف یوزر ادمین CRM</div>
          <button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',color:'var(--text-3)'}}><Icon name="x" size={18}/></button>
        </div>
        <div style={{padding:22, display:'flex', flexDirection:'column', gap:14}}>
          <div style={{background:'#eaf1fc', color:'#2a6fdb', padding:'10px 14px', borderRadius:9, fontSize:12.5, lineHeight:1.6}}>
            این یوزر <b>جدا از ادمین SmartBot</b> است. فقط به <b>پنل مدیریت CRM</b> دسترسی دارد.
          </div>

          {[
            {label:'نام نمایشی', val:displayName, set:setDisplayName, ph:'مثال: مدیر فروش'},
            {label:'نام کاربری (برای ورود)', val:username, set:setUsername, ph:'مثال: sales_manager', mono:true},
            {label: current?.has_password ? 'رمز عبور جدید (خالی = بدون تغییر)' : 'رمز عبور *', val:password, set:setPassword, ph:'حداقل ۴ کاراکتر', type:'password', mono:true},
            {label:'تکرار رمز عبور', val:confirm, set:setConfirm, ph:'••••••', type:'password', mono:true, show:!!password},
          ].filter(f=>f.show!==false).map((f,i)=>(
            <div key={i}>
              <label style={{display:'block',fontSize:12,color:'var(--text-3)',fontWeight:600,marginBottom:6}}>{f.label}</label>
              <input type={f.type||'text'} value={f.val} onChange={e=>f.set(e.target.value)} placeholder={f.ph}
                style={{width:'100%',padding:'10px 14px',borderRadius:10,border:'1.5px solid var(--border)',background:'var(--surface-2)',color:'var(--text)',fontSize:13.5,outline:'none',fontFamily:'inherit',direction:f.mono?'ltr':'rtl',textAlign:f.mono?'left':'right'}}/>
            </div>
          ))}

          <div style={{display:'flex', gap:10, justifyContent:'flex-end', borderTop:'1px solid var(--border)', paddingTop:14}}>
            <button onClick={onClose} style={{padding:'9px 18px',borderRadius:10,border:'1.5px solid var(--border)',background:'var(--surface)',fontFamily:'inherit',fontWeight:600,fontSize:13.5,cursor:'pointer'}}>
              انصراف
            </button>
            <button onClick={save} disabled={loading} style={{padding:'9px 18px',borderRadius:10,border:'none',background:'var(--accent)',color:'#fff',fontFamily:'inherit',fontWeight:600,fontSize:13.5,cursor:loading?'not-allowed':'pointer',opacity:loading?.7:1,display:'flex',alignItems:'center',gap:7}}>
              {loading ? 'در حال ذخیره…' : <><Icon name="check" size={16}/> ذخیره</>}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CrmModule = CrmModule;