// Products page
const Products = () => {
  const { Icon, ProductTypeBadge, Toggle, Button, Modal, Field, useToast } = window.SB_UI;
  const { PRODUCTS, fa, faMoney } = window.SB_DATA;
  const [items, setItems] = useState(PRODUCTS);
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ name: '', desc: '', price: '', type: 'online', tags: '' });
  const toast = useToast();

  const toggle = (id) => setItems(it => it.map(p => p.id === id ? { ...p, active: !p.active } : p));
  const submit = () => {
    if (!form.name) return toast('اسم محصول الزامیه', 'error');
    const next = { id: items.length + 1, name: form.name, desc: form.desc, price: Number(form.price) || 0, type: form.type, active: true, tags: form.tags.split('،').map(t => t.trim()).filter(Boolean) };
    setItems([next, ...items]);
    toast('محصول اضافه شد', 'success');
    setOpen(false);
    setForm({ name: '', desc: '', price: '', type: 'online', tags: '' });
  };

  return (
    <div>
      <div className="row between">
        <div className="row gap-8">
          <span className="text-2 text-sm">{fa(items.length)} محصول • {fa(items.filter(p => p.active).length)} فعال</span>
        </div>
        <div className="row gap-8">
          <Button kind="ghost" icon="filter">فیلتر</Button>
          <Button kind="primary" icon="plus" onClick={() => setOpen(true)}>افزودن محصول</Button>
        </div>
      </div>

      <div className="grid grid-3 mt-16">
        {items.map(p => (
          <div key={p.id} className="card card-hover" style={{ padding: 0, overflow: 'hidden', opacity: p.active ? 1 : 0.6 }}>
            <div style={{ height: 110, background: `linear-gradient(135deg, ${typeColor(p.type)}, ${typeColorD(p.type)})`, display: 'grid', placeItems: 'center', position: 'relative' }}>
              <Icon name={typeIcon(p.type)} size={36} color="#fff" strokeWidth={1.4} />
              <div style={{ position: 'absolute', top: 12, right: 12 }}><ProductTypeBadge type={p.type} /></div>
            </div>
            <div style={{ padding: 18 }}>
              <div className="row between" style={{ alignItems: 'flex-start' }}>
                <div style={{ flex: 1 }}>
                  <div className="semi" style={{ fontSize: 14 }}>{p.name}</div>
                  <div className="text-xs text-3 mt-4">{p.desc}</div>
                </div>
                <Toggle on={p.active} onChange={() => toggle(p.id)} />
              </div>
              <div className="row between mt-16">
                <div>
                  <div className="text-xs text-3">قیمت</div>
                  <div className="bold mono mt-4" style={{ fontSize: 15 }}>
                    {p.price === 0 ? <span style={{ color: '#34D399' }}>رایگان</span> : <span>{faMoney(p.price)} <span className="text-xs text-3">تومان</span></span>}
                  </div>
                </div>
                <div className="row gap-6">
                  {p.tags.slice(0, 2).map(t => (
                    <span key={t} className="badge solid" style={{ background: 'rgba(255,255,255,0.04)', color: 'var(--text-2)', border: '1px solid var(--border-soft)' }}>{t}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <Modal open={open} onClose={() => setOpen(false)} title="افزودن محصول جدید" footer={
        <>
          <Button kind="primary" onClick={submit}>ذخیره محصول</Button>
          <Button kind="ghost" onClick={() => setOpen(false)}>انصراف</Button>
        </>
      }>
        <div className="col gap-16">
          <Field label="نام محصول">
            <input className="input" placeholder="مثلا دوره AIP پیشرفته" value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
          </Field>
          <Field label="توضیحات">
            <textarea className="textarea" placeholder="یک پاراگراف کوتاه..." value={form.desc} onChange={e => setForm({...form, desc: e.target.value})} />
          </Field>
          <div className="grid grid-2 gap-12">
            <Field label="قیمت (تومان)">
              <input className="input mono" placeholder="0" value={form.price} onChange={e => setForm({...form, price: e.target.value.replace(/\D/g, '')})} />
            </Field>
            <Field label="نوع">
              <select className="select" value={form.type} onChange={e => setForm({...form, type: e.target.value})}>
                <option value="online">آنلاین</option>
                <option value="workshop">کارگاه</option>
                <option value="free">رایگان</option>
              </select>
            </Field>
          </div>
          <Field label="تگ‌ها (با ، جدا کن)">
            <input className="input" placeholder="پایه، آنلاین، AIP" value={form.tags} onChange={e => setForm({...form, tags: e.target.value})} />
          </Field>
        </div>
      </Modal>
    </div>
  );
};

const typeColor = (t) => ({ online: 'rgba(139,92,246,0.7)', workshop: 'rgba(249,115,22,0.7)', free: 'rgba(52,211,153,0.7)' }[t] || 'rgba(108,99,255,0.7)');
const typeColorD = (t) => ({ online: 'rgba(67,56,202,0.4)', workshop: 'rgba(194,65,12,0.4)', free: 'rgba(5,150,105,0.4)' }[t] || 'rgba(31,31,56,0.5)');
const typeIcon = (t) => ({ online: 'monitor', workshop: 'users', free: 'gift' }[t] || 'package');

window.Products = Products;