import { useState } from 'react';
import { __, _n, sprintf } from '@wordpress/i18n';
import { api, cfg } from '../api.js';
import { Button, Card, Field, Notice, Stat, toast } from '../ui.jsx';

export default function Notifications({ data }) {
  const [f, setF] = useState({ title: '', body: '', url: '', role: '' });
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  const [sent, setSent] = useState(null);
  const set = (k) => (e) => setF((x) => ({ ...x, [k]: e.target.value }));
  const audience = f.role ? data.roles.find((r) => r.slug === f.role)?.label : __('all members', 'dashbread');

  const send = async (e) => {
    e.preventDefault();
    setBusy(true); setErr('');
    try {
      const r = await api.broadcast(f);
      setSent(r);
      setF({ title: '', body: '', url: '', role: '' });
      toast.show(r.queued
        ? sprintf( /* translators: %s: number of members */ _n('Queued for %s member', 'Queued for %s members', r.sent, 'dashbread'), r.sent )
        : sprintf( /* translators: %s: number of members */ _n('Sent to %s member', 'Sent to %s members', r.sent, 'dashbread'), r.sent ));
    } catch (ex) { setErr(ex.message); }
    setBusy(false);
  };

  return (
    <div className="sa-stack">
      <div className="sa-stats">
        <Stat value={data.stats.notif_week.toLocaleString(document.documentElement.lang || undefined)} label={__('sent this week', 'dashbread')} tone="success" icon="send" />
        <Stat value={data.stats.notif_unread.toLocaleString(document.documentElement.lang || undefined)} label={__('unread right now', 'dashbread')} tone="info" icon="bell" />
        <Stat value={data.stats.members.toLocaleString(document.documentElement.lang || undefined)} label={__('members reachable', 'dashbread')} tone="primary" icon="users" />
      </div>
      <div className="sa-cols-3-2">
        <Card title={__('Send a notification', 'dashbread')}>
          <form onSubmit={send} className="sa-stack-sm">
            {err && <Notice tone="error" onClose={() => setErr('')}>{err}</Notice>}
            {sent && <Notice tone="ok" onClose={() => setSent(null)}>{sent.queued
              ? sprintf( /* translators: %s: number of members */ _n('Queued for %s member; delivery runs in the background over the next minute.', 'Queued for %s members; delivery runs in the background over the next minute.', sent.sent, 'dashbread'), sent.sent )
              : sprintf( /* translators: %s: number of members */ _n('Delivered to %s member.', 'Delivered to %s members.', sent.sent, 'dashbread'), sent.sent )}</Notice>}
            <Field label={__('Title', 'dashbread')} htmlFor="sui_bt"><input id="sui_bt" className="sa-input" type="text" required value={f.title} onChange={set('title')} maxLength={120} /></Field>
            <Field label={__('Message', 'dashbread')} htmlFor="sui_bb"><textarea id="sui_bb" className="sa-input" rows={4} value={f.body} onChange={set('body')} /></Field>
            <Field label={__('Link (optional)', 'dashbread')} htmlFor="sui_bu" help={__('Where the notification opens. Defaults to the app.', 'dashbread')}><input id="sui_bu" className="sa-input" type="url" value={f.url} onChange={set('url')} placeholder={data.status.app_url} /></Field>
            <Field label={__('Send to', 'dashbread')} htmlFor="sui_br">
              <select id="sui_br" className="sa-input" value={f.role} onChange={set('role')}>
                <option value="">{__('All members', 'dashbread')}</option>
                {data.roles.map((r) => <option key={r.slug} value={r.slug}>{r.label}</option>)}
              </select>
            </Field>
            <div className="sa-actions"><Button type="submit" variant="primary" icon="send" disabled={busy || !f.title.trim()}>{busy ? __('Sending…', 'dashbread') : sprintf( /* translators: %s: audience, e.g. "all members" or a role name */ __('Send to %s', 'dashbread'), audience )}</Button></div>
          </form>
        </Card>
        <div className="sa-stack-sm">
          <Card title={__('Where it shows up', 'dashbread')}>
            <ul className="sa-bullets">
              <li>{__('The bell badge and dropdown in the app header', 'dashbread')}</li>
              <li>{/* translators: followed by the notifications URL path */ __('The notifications panel and full list at', 'dashbread')} <code>/{data.status.route}/notifications</code></li>
              <li>{__('Members who turned off broadcasts in their profile are skipped', 'dashbread')}</li>
            </ul>
          </Card>
          {!cfg.pro && <Card title={__('Email delivery', 'dashbread')}><p className="sa-help">{__('In-app only.', 'dashbread')} <b>Dashbread Pro</b> {/* translators: follows the product name "Dashbread Pro" */ __('also emails each notification through your SMTP or SparkPost account with a branded HTML wrapper.', 'dashbread')} <a href="https://dashbread.com/pro" target="_blank" rel="noopener">{__('Learn more', 'dashbread')}</a></p></Card>}
          <Card title={__('Automatic notifications', 'dashbread')}>
            <ul className="sa-bullets">
              <li><b>{__('Comment reply', 'dashbread')}</b>: {__('a reply to a member\'s comment', 'dashbread')}</li>
              <li><b>{__('New content', 'dashbread')}</b>: {__('a hosted page is published', 'dashbread')}</li>
              <li><b>{__('Order status', 'dashbread')}</b>: {__('WooCommerce order changes', 'dashbread')}</li>
              <li>{/* translators: followed by a PHP function name */ __('Plugins add their own with', 'dashbread')} <code>dashbread_notify()</code></li>
            </ul>
          </Card>
        </div>
      </div>
    </div>
  );
}