// Settings page
const Settings = () => {
  const { Icon, Button, Toggle, Field } = window.SB_UI;
  const [tab, setTab] = useState('general');
  const [notifEmail, setNotifEmail] = useState(true);
  const [notifSms, setNotifSms] = useState(false);
  const [autopilot, setAutopilot] = useState(true);
  const tabs = [
    { id: 'general', name: 'عمومی', icon: 'settings' },
    { id: 'integrations', name: 'یکپارچه‌سازی', icon: 'link' },
    { id: 'team', name: 'تیم', icon: 'users' },
    { id: 'billing', name: 'صورتحساب', icon: 'credit-card' },
  ];
  return (
    <div className="grid" style={{ gridTemplateColumns: '220px 1fr', gap: 24 }}>
      <aside className="card" style={{ padding: 8, alignSelf: 'flex-start' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            className="nav-item"
            style={{ width: '100%', background: tab === t.id ? 'var(--primary-soft)' : 'transparent', color: tab === t.id ? '#fff' : undefined }}>
            <Icon name={t.icon} size={14} />
            <span style={{ flex: 1 }}>{t.name}</span>
            {tab === t.id && <Icon name="chevron-left" size={13} />}
          </button>
        ))}
      </aside>
      <div className="col gap-16">
        {tab === 'general' && (
          <>
            <div className="card">
              <div className="bold">پروفایل کسب‌و‌کار</div>
              <div className="grid grid-2 gap-12 mt-16">
                <Field label="نام کسب‌و‌کار"><input className="input" defaultValue="فروشگاه AIP" /></Field>
                <Field label="ایمیل مدیر"><input className="input mono" defaultValue="admin@aip.ir" /></Field>
                <Field label="شماره تماس پشتیبانی"><input className="input mono" defaultValue="۰۲۱-۸۸۷۷۶۶۵۵" /></Field>
                <Field label="منطقه زمانی"><select className="select"><option>تهران (GMT+3:30)</option></select></Field>
              </div>
            </div>
            <div className="card">
              <div className="bold">اعلان‌ها</div>
              <div className="col gap-12 mt-16">
                <SettingRow title="اعلان ایمیلی" sub="گزارش روزانه و پیشنهادات متا" on={notifEmail} onChange={setNotifEmail} />
                <SettingRow title="اعلان پیامکی" sub="فقط برای لیدهای آماده خرید" on={notifSms} onChange={setNotifSms} />
                <SettingRow title="اتوپایلوت متا" sub="پیشنهادات با اطمینان بالای ۹۰٪ خودکار اعمال بشن" on={autopilot} onChange={setAutopilot} />
              </div>
            </div>
            <div className="card">
              <div className="bold">منطقه خطر</div>
              <div className="row between mt-12">
                <div>
                  <div className="text-sm semi">پاک کردن کل تاریخچه</div>
                  <div className="text-xs text-3 mt-4">همه مکالمات و لیدها به طور دائم حذف می‌شن.</div>
                </div>
                <Button kind="danger" icon="trash-2">پاک‌سازی</Button>
              </div>
            </div>
          </>
        )}

        {tab === 'integrations' && (
          <div className="card">
            <div className="bold">یکپارچه‌سازی‌ها</div>
            <div className="grid grid-2 gap-12 mt-16">
              {[
                { name: 'اینستاگرام', desc: 'دایرکت پیام', icon: 'instagram', on: true, color: '#FF6B35' },
                { name: 'واتساپ بیزنس', desc: 'WhatsApp Business API', icon: 'message-circle', on: true, color: '#34D399' },
                { name: 'تلگرام', desc: 'Bot API', icon: 'send', on: true, color: '#3B82F6' },
                { name: 'ووکامرس', desc: 'سینک محصولات', icon: 'shopping-bag', on: false, color: '#8B5CF6' },
                { name: 'گوگل آنالیتیکس', desc: 'تحلیل ترافیک', icon: 'bar-chart-3', on: false, color: '#F59E0B' },
                { name: 'CRM Bitrix24', desc: 'ارسال لید', icon: 'database', on: false, color: '#6C63FF' },
              ].map(i => (
                <div key={i.name} className="row gap-12" style={{ padding: 14, background: 'rgba(15,15,26,0.4)', border: '1px solid var(--border-soft)', borderRadius: 12 }}>
                  <div style={{ width: 38, height: 38, borderRadius: 10, background: i.color + '22', display: 'grid', placeItems: 'center' }}>
                    <Icon name={i.icon} size={18} color={i.color} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="text-sm semi">{i.name}</div>
                    <div className="text-xs text-3">{i.desc}</div>
                  </div>
                  {i.on ? <span className="badge ready">متصل</span> : <Button kind="ghost" size="sm">اتصال</Button>}
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === 'team' && (
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: 18 }} className="row between">
              <div>
                <div className="bold">اعضای تیم</div>
                <div className="text-xs text-3 mt-4">۴ نفر فعال • پلن: Pro</div>
              </div>
              <Button kind="primary" icon="user-plus">دعوت عضو</Button>
            </div>
            <table className="table">
              <thead><tr><th>اسم</th><th>ایمیل</th><th>نقش</th><th>آخرین فعالیت</th><th></th></tr></thead>
              <tbody>
                {[
                  { n: 'علی محمدی', e: 'ali@aip.ir', r: 'مدیر', t: 'الان' },
                  { n: 'سارا احمدی', e: 'sara@aip.ir', r: 'فروش', t: '۲ دقیقه پیش' },
                  { n: 'محمد حسینی', e: 'mh@aip.ir', r: 'پشتیبانی', t: '۱ ساعت پیش' },
                  { n: 'نگار رضایی', e: 'negar@aip.ir', r: 'تحلیلگر', t: 'دیروز' },
                ].map((m, i) => (
                  <tr key={i}>
                    <td>
                      <div className="row gap-12">
                        <div className="avatar" style={{ width: 30, height: 30, fontSize: 11 }}>{m.n.split(' ').map(w => w[0]).join('').slice(0,2)}</div>
                        <span className="semi">{m.n}</span>
                      </div>
                    </td>
                    <td className="mono text-2">{m.e}</td>
                    <td><span className="badge sold">{m.r}</span></td>
                    <td className="text-2 text-xs">{m.t}</td>
                    <td><button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="more-vertical" size={13} /></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {tab === 'billing' && (
          <>
            <div className="card" style={{ background: 'linear-gradient(135deg, rgba(108,99,255,0.12), rgba(255,107,53,0.08))', border: '1px solid rgba(108,99,255,0.3)' }}>
              <div className="row between">
                <div>
                  <div className="text-xs text-3">پلن فعلی</div>
                  <div className="bold mt-4" style={{ fontSize: 22 }}>Pro</div>
                  <div className="text-xs text-3 mt-4">تجدید در ۱۴۰۳/۰۴/۰۴</div>
                </div>
                <div style={{ textAlign: 'left' }}>
                  <div className="bold mono" style={{ fontSize: 22 }}>۲٬۴۰۰٬۰۰۰</div>
                  <div className="text-xs text-3">تومان / ماهانه</div>
                </div>
              </div>
              <div className="row gap-8 mt-16">
                <Button kind="primary">ارتقا به Enterprise</Button>
                <Button kind="ghost">مشاهده فاکتورها</Button>
              </div>
            </div>
            <div className="card">
              <div className="bold">مصرف ماه جاری</div>
              <div className="col gap-16 mt-16">
                {[
                  { l: 'مکالمات', v: 4280, max: 10000, u: 'مکالمه' },
                  { l: 'اجرای متا', v: 78, max: 120, u: 'اجرا' },
                  { l: 'فضای ذخیره‌سازی', v: 2.4, max: 10, u: 'GB' },
                ].map(u => (
                  <div key={u.l}>
                    <div className="row between">
                      <span className="text-sm">{u.l}</span>
                      <span className="mono text-sm"><span className="bold">{window.SB_DATA.fa(u.v)}</span><span className="text-3"> / {window.SB_DATA.fa(u.max)} {u.u}</span></span>
                    </div>
                    <div className="bar mt-8"><div className="bar-fill" style={{ width: (u.v / u.max * 100) + '%' }} /></div>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const SettingRow = ({ title, sub, on, onChange }) => (
  <div className="row between" style={{ padding: '10px 0', borderBottom: '1px solid var(--border-soft)' }}>
    <div>
      <div className="text-sm semi">{title}</div>
      <div className="text-xs text-3 mt-4">{sub}</div>
    </div>
    <window.SB_UI.Toggle on={on} onChange={onChange} />
  </div>
);

window.Settings = Settings;