// Meta page
const Meta = () => {
  const { Icon, Button, useToast } = window.SB_UI;
  const { META_SUGGESTIONS, META_REPORTS, fa } = window.SB_DATA;
  const [items, setItems] = useState(META_SUGGESTIONS);
  const toast = useToast();
  const approve = (id) => { setItems(items.filter(x => x.id !== id)); toast('پیشنهاد تأیید و اعمال شد', 'success'); };
  const reject = (id) => { setItems(items.filter(x => x.id !== id)); toast('پیشنهاد رد شد', 'info'); };

  return (
    <div>
      {/* Status header */}
      <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 gap-24" style={{ alignItems: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: 'linear-gradient(135deg, var(--primary), #4F46E5)', display: 'grid', placeItems: 'center', boxShadow: '0 8px 24px var(--primary-glow)' }}>
            <Icon name="sparkles" size={26} color="#fff" strokeWidth={1.6} />
          </div>
          <div style={{ flex: 1 }}>
            <div className="row gap-8">
              <div className="bold" style={{ fontSize: 16 }}>متا — تحلیلگر هوشمند</div>
              <span className="badge ready">فعال</span>
            </div>
            <div className="text-sm text-2 mt-4">به‌طور خودکار مکالمات رو تحلیل می‌کنه و پیشنهاد بهبود می‌ده.</div>
          </div>
          <div className="row gap-24" style={{ paddingLeft: 16 }}>
            <Stat label="آخرین اجرا" value="۲ ساعت پیش" />
            <Stat label="گزارش بعدی" value="۶ ساعت دیگه" mono />
            <Stat label="پیشنهاد فعال" value={fa(items.length)} mono />
          </div>
          <Button kind="secondary" icon="play">اجرای دستی</Button>
        </div>
      </div>

      {/* Pending suggestions */}
      <div className="section-h">
        <h2>پیشنهادات در انتظار</h2>
        <div className="row gap-8">
          <Button kind="ghost" size="sm" icon="filter">فیلتر</Button>
          <Button kind="ghost" size="sm">تأیید همه</Button>
        </div>
      </div>

      <div className="col gap-16">
        {items.length === 0 && (
          <div className="card">
            <div className="empty">
              <div className="empty-icon"><Icon name="check-check" size={28} /></div>
              <div className="bold text-sm">پیشنهاد جدیدی نیست!</div>
              <div className="text-xs text-3">متا داره مکالمات رو بررسی می‌کنه. شش ساعت دیگه گزارش بعدی آماده می‌شه.</div>
            </div>
          </div>
        )}
        {items.map(s => (
          <div key={s.id} className="meta-card">
            <div className="row gap-12 between">
              <div className="row gap-12">
                <div style={{ width: 36, height: 36, borderRadius: 10, background: toneColor(s.tone), display: 'grid', placeItems: 'center' }}>
                  <Icon name={toneIcon(s.tone)} size={16} color={toneTextColor(s.tone)} />
                </div>
                <div>
                  <div className="row gap-8">
                    <span className="badge sold solid" style={{ background: 'rgba(108,99,255,0.18)', color: '#A5B4FC' }}>{s.tag}</span>
                    <span className="bold text-sm">{s.problem}</span>
                  </div>
                  <div className="text-xs text-3 mt-4">{s.desc}</div>
                </div>
              </div>
              <span className="badge ready solid" style={{ background: 'rgba(16,185,129,0.14)', color: '#34D399', fontSize: 11 }}>
                <Icon name="trending-up" size={11} strokeWidth={2.4} />&nbsp;{s.testResult}
              </span>
            </div>

            <div className="grid grid-2 gap-12 mt-16">
              <div className="diff-block diff-red">
                <span className="diff-tag red">وضعیت فعلی</span>
                <span className="text-2">{s.current}</span>
              </div>
              <div className="diff-block diff-green">
                <span className="diff-tag green">پیشنهاد جدید</span>
                <span>{s.proposed}</span>
              </div>
            </div>

            <div className="row gap-8 mt-16">
              <Button kind="success" icon="check" onClick={() => approve(s.id)}>تأیید و اعمال</Button>
              <Button kind="ghost" icon="edit-3">ویرایش</Button>
              <Button kind="danger" icon="x" onClick={() => reject(s.id)}>رد</Button>
              <button className="btn btn-ghost" style={{ marginRight: 'auto' }}><Icon name="external-link" size={13} /> جزئیات تست</button>
            </div>
          </div>
        ))}
      </div>

      {/* Reports */}
      <div className="section-h mt-24">
        <h2>گزارشات</h2>
        <div className="row gap-8">
          <button className="pill active">همه</button>
          <button className="pill">روزانه</button>
          <button className="pill">هفتگی</button>
        </div>
      </div>
      <div className="card" style={{ padding: 0 }}>
        <table className="table">
          <thead><tr><th>نوع</th><th>تاریخ</th><th>خلاصه</th><th style={{ width: 80 }}></th></tr></thead>
          <tbody>
            {META_REPORTS.map(r => (
              <tr key={r.id}>
                <td><span className="badge sold">{r.kind}</span></td>
                <td className="mono semi">{r.date}</td>
                <td className="text-2">{r.stats}</td>
                <td><button className="icon-btn" style={{ width: 30, height: 30 }}><Icon name="chevron-left" size={14} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const Stat = ({ label, value, mono }) => (
  <div>
    <div className="text-xs text-3">{label}</div>
    <div className={`semi mt-4 ${mono ? 'mono' : ''}`} style={{ fontSize: 13 }}>{value}</div>
  </div>
);

const toneColor = (t) => ({ warning: 'rgba(245,158,11,0.14)', critical: 'rgba(239,68,68,0.14)', opportunity: 'rgba(108,99,255,0.14)' }[t]);
const toneTextColor = (t) => ({ warning: '#FBBF24', critical: '#F87171', opportunity: '#A5B4FC' }[t]);
const toneIcon = (t) => ({ warning: 'alert-triangle', critical: 'alert-octagon', opportunity: 'lightbulb' }[t]);

window.Meta = Meta;