import { useState, useEffect } from 'react';
import { useToast, inputStyle, pillBtn } from '../../teknav-ui.jsx';
import { adminApi } from '../lib/admin-api.js';
import { BRAND } from './Shared.jsx';

function NewsletterPanel() {
  const toast = useToast();
  const [campaigns, setCampaigns] = useState([]);
  const [subscribers, setSubscribers] = useState([]);
  const [subject, setSubject] = useState('');
  const [bodyHtml, setBodyHtml] = useState('');
  const load = () => Promise.all([adminApi.listNewsletterCampaigns(), adminApi.listNewsletterSubscribers()]).then(([c, s]) => { setCampaigns(c); setSubscribers(s); });
  useEffect(() => { load().catch(() => {}); }, []);
  const create = async (e) => {
    e.preventDefault();
    await adminApi.createNewsletterCampaign({ subject, bodyHtml });
    setSubject('');
    setBodyHtml('');
    toast('کمپین خبرنامه ذخیره شد');
    load();
  };
  const send = async (id) => { await adminApi.sendNewsletterCampaign(id); toast('کمپین ارسال شد'); load(); };
  return (
    <div style={{ display: 'grid', gap: 18, direction: 'rtl' }}>
      <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16 }}>مشترکان واقعی API: {subscribers.length.toLocaleString('fa-IR')}</div>
      <form onSubmit={create} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16, display: 'grid', gap: 10 }}>
        <input value={subject} onChange={e => setSubject(e.target.value)} placeholder="موضوع کمپین" style={inputStyle} dir="rtl" />
        <textarea value={bodyHtml} onChange={e => setBodyHtml(e.target.value)} placeholder="HTML خبرنامه" style={{ ...inputStyle, minHeight: 140 }} dir="rtl" />
        <button style={{ ...pillBtn, background: BRAND.primary, color: '#fff', justifySelf: 'start' }}>ذخیره کمپین</button>
      </form>
      {campaigns.map(c => (
        <div key={c.id} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16 }}>
          <div style={{ fontWeight: 900, color: BRAND.ink }}>{c.subject}</div>
          <div style={{ fontSize: 12, color: '#5F6B6D', margin: '6px 0 12px' }}>{c.sentAt ? `ارسال‌شده به ${c.recipientCount}` : 'آماده ارسال'}</div>
          {!c.sentAt && <button onClick={() => send(c.id)} style={{ ...pillBtn, background: BRAND.primary, color: '#fff' }}>ارسال</button>}
        </div>
      ))}
    </div>
  );
}

export { NewsletterPanel };