// screen-queue.jsx — «Очередь: требуют внимания». Те же данные, что у колокольчика
// десктоп-CRM (GET /api/operator-alerts): подписанные заявления, интернет-оплаты,
// спорные ЛК-регистрации, непробитые чеки, автосбросы помощника.
// Действия по элементу: открыть карточку клиента + «Просмотрено» (dismiss).
(() => {
  const { useState, useCallback } = React;
  const { fmtMoney, fmtAgo } = window.M;

  function ItemCard({ icon, tone, title, subtitle, meta, clientId, onOpen, onDismiss, noDismiss }) {
    const [busy, setBusy] = useState(false);
    // noDismiss — для рабочих заданий на смену: их не «гасят» крестиком,
    // они исчезают сами при выполнении (как в десктоп-колокольчике).
    const showBtnRow = clientId != null || !noDismiss;
    return (
      <div className="card">
        <div className="card-row" style={{ alignItems: 'flex-start' }}>
          <div className={'badge ' + (tone || '')} style={{ width: 38, height: 38, borderRadius: 11, padding: 0, justifyContent: 'center', flex: '0 0 auto' }}>
            <Icon name={icon} size={20} />
          </div>
          <div className="grow">
            <div style={{ fontWeight: 600 }}>{title}</div>
            {subtitle && <div className="subtle" style={{ marginTop: 2 }}>{subtitle}</div>}
            {meta && <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{meta}</div>}
          </div>
        </div>
        {showBtnRow && (
          <div className="btn-row" style={{ marginTop: 12 }}>
            {clientId != null && (
              <button className="btn btn-ghost btn-sm" style={{ flex: 1 }} onClick={() => onOpen(clientId)}>
                <Icon name="user" size={16} /> Клиент
              </button>
            )}
            {!noDismiss && (
              <button className="btn btn-sm" style={{ flex: 1 }} disabled={busy}
                onClick={async () => { setBusy(true); try { await onDismiss(); } finally { setBusy(false); } }}>
                <Icon name="check" size={16} /> Просмотрено
              </button>
            )}
          </div>
        )}
      </div>
    );
  }

  window.QueueScreen = function QueueScreen({ onOpenClient, onCountChange }) {
    const st = window.useAsync(() => window.api.operatorAlerts.get(), []);
    const { data, loading, error, reload } = st;

    const dismiss = useCallback(async (type, key) => {
      await window.api.operatorAlerts.dismiss(type, key);
      window.toast('Отмечено', 'ok');
      reload();
    }, [reload]);

    // После перезагрузки данных — обновляем бейдж вкладки.
    React.useEffect(() => { if (data && onCountChange) onCountChange(data.total || 0); }, [data]);

    if (loading) return <div className="screen"><Spinner /></div>;
    if (error) return (
      <div className="screen">
        <div className="empty"><span className="empty-emoji">⚠️</span>{error}
          <div style={{ marginTop: 14 }}><button className="btn btn-ghost btn-sm" onClick={reload}>Повторить</button></div>
        </div>
      </div>
    );

    const tasksOpen = data.task_open?.items || [];
    const tasksDone = data.task_done?.items || [];
    const debtUnsettled = data.debt_unsettled?.items || [];
    const apps = data.application_signed?.items || [];
    const pays = data.payment?.items || [];
    const reviews = data.review?.items || [];
    const fiscals = data.fiscal_failed?.items || [];
    const resets = data.assistant_reset?.items || [];
    const empty = !tasksOpen.length && !tasksDone.length && !debtUnsettled.length && !apps.length && !pays.length
      && !reviews.length && !fiscals.length && !resets.length;

    return (
      <div className="screen">
        {empty && (
          <div className="empty"><span className="empty-emoji">✓</span>Всё разобрано — новых событий нет</div>
        )}

        {tasksOpen.length > 0 && <div className="section-title">Задания на смену</div>}
        {tasksOpen.map((it) => (
          <ItemCard key={'to' + it.id} icon="bell" tone="warn"
            title={it.client_name || (it.client_id ? 'Клиент #' + it.client_id : 'Задание')}
            subtitle={it.text}
            meta={(it.created_by_name ? 'от ' + it.created_by_name : 'задание') + (it.for_shift ? ' · на смену' : '')}
            clientId={it.client_id}
            onOpen={onOpenClient}
            noDismiss
            onDismiss={() => {}} />
        ))}

        {debtUnsettled.length > 0 && <div className="section-title">Долг не списан абонементом</div>}
        {debtUnsettled.map((it) => (
          <ItemCard key={'du' + it.id} icon="card" tone="warn"
            title={(it.client_name || (it.client_id ? 'Клиент #' + it.client_id : '—')) + (it.discipline ? ' · ' + it.discipline : '')}
            subtitle={it.sub_type ? 'абонемент: ' + it.sub_type : 'есть свободный абонемент той же школы'}
            meta={it.visit_date ? 'долг ' + it.visit_date : null}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('debt_unsettled', it.id)} />
        ))}

        {apps.length > 0 && <div className="section-title">Подписанные заявления</div>}
        {apps.map((it) => (
          <ItemCard key={'app' + it.id} icon="snow" tone="info"
            title={it.kind_label}
            subtitle={it.client_name + (it.beneficiary_name && it.beneficiary_name !== it.client_name ? ` → ${it.beneficiary_name}` : '')}
            meta={'Подписано ' + fmtAgo(it.signed_at)}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('application_signed', it.id)} />
        ))}

        {pays.length > 0 && <div className="section-title">Интернет-оплаты</div>}
        {pays.map((it) => (
          <ItemCard key={'pay' + it.id} icon="card" tone="ok"
            title={fmtMoney(it.amount) + (it.type_name ? ' · ' + it.type_name : '')}
            subtitle={it.client_name + (it.payer_name ? ` (платил: ${it.payer_name})` : '')}
            meta={'Оплачено ' + fmtAgo(it.paid_at)}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('payment', it.id)} />
        ))}

        {reviews.length > 0 && <div className="section-title">Проверить регистрацию в ЛК</div>}
        {reviews.map((it) => (
          <ItemCard key={'rev' + it.id} icon="alert" tone="warn"
            title={it.name || '—'}
            subtitle={[it.phone, it.email].filter(Boolean).join(' · ')}
            meta={it.last_login ? 'Вход в ЛК ' + fmtAgo(it.last_login) : null}
            clientId={it.id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('review', it.id)} />
        ))}

        {fiscals.length > 0 && <div className="section-title">Чеки не пробились</div>}
        {fiscals.map((it) => (
          <ItemCard key={'fis' + it.id} icon="receipt" tone="danger"
            title={fmtMoney(it.amount)}
            subtitle={it.client_name}
            meta={(it.error ? it.error + ' · ' : '') + fmtAgo(it.created_at)}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('fiscal_failed', it.id)} />
        ))}

        {resets.length > 0 && <div className="section-title">Автосбросы помощника</div>}
        {resets.map((it) => (
          <ItemCard key={'res' + it.id} icon="message" tone=""
            title={it.client_name || it.channel}
            subtitle={it.reason_text}
            meta={fmtAgo(it.created_at)}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('assistant_reset', it.id)} />
        ))}

        {tasksDone.length > 0 && <div className="section-title">Выполненные задания</div>}
        {tasksDone.map((it) => (
          <ItemCard key={'td' + it.id} icon="check" tone="ok"
            title={it.client_name || (it.client_id ? 'Клиент #' + it.client_id : 'Задание')}
            subtitle={it.text}
            meta={(it.completed_by_name ? 'выполнил: ' + it.completed_by_name : '') + (it.result_text ? ' · «' + it.result_text + '»' : '')}
            clientId={it.client_id}
            onOpen={onOpenClient}
            onDismiss={() => dismiss('task_done', it.id)} />
        ))}
      </div>
    );
  };
})();