BarevClub/apps/backoffice/src/pages/LeadCard.tsx

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { navigate, useToast, useTRPC } from '@barev/web';
import { useRef, useState } from 'react';
import type { Me } from '../App.tsx';
import { errText, useT } from '../i18n.tsx';
import { Avatar, I, Skeleton } from '../components/kit.tsx';
import { MapView, parseCoords, STAGE_COLORS } from '../components/map.tsx';
import { ConvertDialog, LeadDialog, LostDialog, TaskDialog } from './Crm.tsx';
import { CopyLink } from './Agencies.tsx';

type ActType = 'CALL' | 'MEETING' | 'NOTE';
const ACT_ICON: Record<string, 'phone' | 'clients' | 'journal' | 'file' | 'swap' | 'check'> = { CALL: 'phone', MEETING: 'clients', NOTE: 'journal', FILE: 'file', STAGE: 'swap', WON: 'check' };

export function LeadCard({ id, me }: { id: string; me: Me }) {
  const { t, date, dateTime } = useT();
  const trpc = useTRPC();
  const qc = useQueryClient();
  const toast = useToast();
  const lead = useQuery(trpc.bo.crm.get.queryOptions({ id }));
  const stages = useQuery(trpc.bo.crm.stages.queryOptions());
  const [dlg, setDlg] = useState<'edit' | 'task' | 'convert' | { lost: string } | null>(null);
  const refresh = () => {
    qc.invalidateQueries({ queryKey: trpc.bo.crm.get.queryKey({ id }) });
    qc.invalidateQueries({ queryKey: trpc.bo.crm.board.queryKey() });
    qc.invalidateQueries({ queryKey: trpc.bo.crm.summary.queryKey() });
    qc.invalidateQueries({ queryKey: trpc.bo.crm.tasks.queryKey() });
  };
  const onError = (e: unknown) => toast(errText(t, e), 'error');
  const move = useMutation(trpc.bo.crm.move.mutationOptions({ onSuccess: refresh, onError }));
  const toggleTask = useMutation(trpc.bo.crm.setTaskDone.mutationOptions({ onSuccess: refresh, onError }));
  const update = useMutation(trpc.bo.crm.update.mutationOptions({ onSuccess: refresh, onError }));
  const remove = useMutation(trpc.bo.crm.remove.mutationOptions({ onSuccess: () => navigate('/crm'), onError }));
  const [coords, setCoords] = useState('');
  const isSuper = me.roles.includes('SUPERADMIN');

  const back = (
    <a className="bo-back" href="#/crm">
      <I name="back" size={16} />
      {t('crm.back')}
    </a>
  );
  if (lead.isError)
    return (
      <>
        {back}
        <div className="bo-panel bo-empty">{errText(t, lead.error)}</div>
      </>
    );
  if (!lead.data || !stages.data)
    return (
      <div className="bo-col">
        <Skeleton h={90} />
        <Skeleton h={300} />
      </div>
    );
  const d = lead.data;
  const converted = !!(d.partner || d.agency);
  const tel = d.phone?.replace(/[^\d+]/g, '');
  const tgName = d.telegram?.replace(/^@/, '').replace(/^https?:\/\/t\.me\//, '');
  const now = Date.now();

  return (
    <>
      {back}
      <header className="bo-profile">
        <Avatar name={d.name} id={d.id} size={64} />
        <div style={{ flex: 1, minWidth: 220 }}>
          <h1 className="bo-title" style={{ fontSize: 'clamp(26px, 3.4vw, 38px)' }}>
            {d.name}
          </h1>
          <div className="bo-muted" style={{ marginTop: 6, display: 'flex', flexWrap: 'wrap', gap: '4px 12px', alignItems: 'center' }}>
            <span className={`bo-chip bo-chip--${d.kind === 'AGENCY' ? 'SUPPORT' : 'provider'}`}>{t(`crm.kind1.${d.kind}`)}</span>
            {d.category && <span>{t(`venue.cat.${d.category}`)}</span>}
            <span>{d.owner ? t('crm.ownerIs', { name: d.owner.name }) : t('crm.noOwner')}</span>
            <span>{t('crm.created', { date: date(d.createdAt) })}</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {tel && (
            <a className="bo-btn" href={`tel:${tel}`}>
              <I name="phone" size={16} />
              {t('ord.call')}
            </a>
          )}
          {tgName && (
            <a className="bo-btn bo-btn--ghost" href={`https://t.me/${tgName}`} target="_blank" rel="noreferrer">
              <I name="telegram" size={16} />
              Telegram
            </a>
          )}
          <button type="button" className="bo-btn bo-btn--ghost" onClick={() => setDlg('edit')}>
            {t('prv.edit')}
          </button>
        </div>
      </header>

      {/* этапы: клик — перевести */}
      <ol className="bo-steps bo-steps--click" aria-label={t('crm.stage')}>
        {stages.data.map((s) => {
          const cur = s.id === d.stageId;
          return (
            <li key={s.id} data-state={cur ? 'now' : 'next'} style={cur ? { borderTopColor: STAGE_COLORS[s.color], background: STAGE_COLORS[s.color] } : undefined}>
              <button
                type="button"
                disabled={cur || move.isPending}
                onClick={() => {
                  if (s.kind === 'WON' && !converted) return setDlg('convert');
                  if (s.kind === 'LOST') return setDlg({ lost: s.id });
                  move.mutate({ id, stageId: s.id });
                }}
              >
                {s.name}
              </button>
            </li>
          );
        })}
      </ol>
      {d.lostReason && <div className="bo-banner" style={{ background: 'var(--bc-pink)', color: 'var(--bc-plum)' }}>{t('crm.lostBanner', { reason: d.lostReason })}</div>}

      <div className="bo-client-grid">
        <div className="bo-col">
          <Composer leadId={id} onDone={refresh} />
          <section className="bo-panel">
            <div className="bo-panel__head">
              <h2 className="bo-h2">{t('crm.history')}</h2>
            </div>
            {d.activities.length === 0 ? (
              <p className="bo-hint">{t('crm.noHistory')}</p>
            ) : (
              <ol className="bo-acts">
                {d.activities.map((a) => (
                  <li key={a.id} data-type={a.type}>
                    <span className="bo-acts__icon">
                      <I name={ACT_ICON[a.type] ?? 'journal'} size={16} />
                    </span>
                    <span className="bo-grow" style={{ minWidth: 0 }}>
                      <span className="bo-small bo-faint">
                        {t(`crm.act.${a.type}`)} · {a.author ?? '—'} · {dateTime(a.at)}
                      </span>
                      {a.text && <span className="bo-acts__text">{a.text}</span>}
                      {a.file &&
                        (a.file.mime?.startsWith('image/') ? (
                          <a href={`/files/bo/lead-file/${a.id}`} target="_blank" rel="noreferrer">
                            <img className="bo-acts__img" src={`/files/bo/lead-file/${a.id}`} alt={a.file.name ?? ''} loading="lazy" />
                          </a>
                        ) : (
                          <a className="bo-msg__file" style={{ margin: '6px 0 0', background: 'var(--bo-soft)' }} href={`/files/bo/lead-file/${a.id}`} target="_blank" rel="noreferrer">
                            <I name="file" size={20} />
                            <span className="bo-msg__fname">{a.file.name}</span>
                          </a>
                        ))}
                    </span>
                  </li>
                ))}
              </ol>
            )}
          </section>
        </div>

        <div className="bo-col">
          <section className={`bo-panel${converted ? ' bo-wonbox' : ''}`}>
            <div className="bo-panel__head">
              <h2 className="bo-h2">{converted ? t('crm.connected') : t('crm.connect')}</h2>
            </div>
            {d.partner ? (
              <>
                <p className="bo-hint">{d.partner.ownerLinked ? t('crm.ownerLinked') : t('crm.ownerNotYet')}</p>
                {!d.partner.ownerLinked && d.partner.ownerInviteUrl && (
                  <div style={{ marginBottom: 10 }}>
                    <CopyLink url={d.partner.ownerInviteUrl} />
                  </div>
                )}
                {isSuper && (
                  <a className="bo-btn bo-btn--sm" href={`#/venues/${d.partner.id}`}>
                    {t('crm.openVenue')}
                  </a>
                )}
              </>
            ) : d.agency ? (
              <>
                <p className="bo-hint">{t('crm.agencyInfo', { code: d.agency.code, n: d.agency.clients })}</p>
                {isSuper && (
                  <a className="bo-btn bo-btn--sm" href={`#/agencies/${d.agency.id}`}>
                    {t('crm.openAgency')}
                  </a>
                )}
              </>
            ) : (
              <>
                <p className="bo-hint">{d.kind === 'VENUE' ? t('crm.convertVenueHint') : t('crm.convertAgencyHint')}</p>
                <button type="button" className="bo-btn bo-btn--accent bo-btn--sm" onClick={() => setDlg('convert')}>
                  <I name="check" size={16} />
                  {t('crm.convert')}
                </button>
              </>
            )}
          </section>

          <section className="bo-panel">
            <div className="bo-panel__head">
              <h2 className="bo-h2">{t('crm.tasks')}</h2>
              <button type="button" className="bo-btn bo-btn--ghost bo-btn--sm" onClick={() => setDlg('task')}>
                <I name="plus" size={16} />
                {t('crm.addTask')}
              </button>
            </div>
            {d.tasks.length === 0 ? (
              <p className="bo-hint">{t('crm.noLeadTasks')}</p>
            ) : (
              <ul className="bo-tasks">
                {d.tasks.map((x) => {
                  const overdue = !x.doneAt && x.dueAt.getTime() < now;
                  return (
                    <li key={x.id} data-overdue={overdue || undefined} data-done={!!x.doneAt || undefined}>
                      <label className="bo-tasks__check">
                        <input type="checkbox" checked={!!x.doneAt} onChange={(e) => toggleTask.mutate({ id: x.id, done: e.target.checked })} aria-label={x.title} />
                      </label>
                      <span className="bo-grow">
                        <b>{x.title}</b>
                      </span>
                      <span className="bo-tasks__due">{dateTime(x.dueAt)}</span>
                    </li>
                  );
                })}
              </ul>
            )}
          </section>

          <section className="bo-panel">
            <div className="bo-panel__head">
              <h2 className="bo-h2">{t('crm.contacts')}</h2>
            </div>
            <dl className="bo-kv">
              <dt>{t('crm.contactName')}</dt>
              <dd>{d.contactName ?? '—'}</dd>
              <dt>{t('chat.phone')}</dt>
              <dd>{d.phone ? <a href={`tel:${tel}`}>{d.phone}</a> : '—'}</dd>
              <dt>Telegram</dt>
              <dd>{tgName ? <a href={`https://t.me/${tgName}`} target="_blank" rel="noreferrer">@{tgName}</a> : '—'}</dd>
              <dt>{t('crm.address')}</dt>
              <dd>{d.address ?? '—'}</dd>
            </dl>
            {d.note && <p className="bo-side-panel__note" style={{ marginTop: 12 }}>{d.note}</p>}
            {d.kind === 'VENUE' && (
              <div style={{ marginTop: 14 }}>
                {d.lat != null && d.lng != null ? (
                  <MapView points={[{ id: d.id, lat: d.lat, lng: d.lng, title: d.name, color: '#b8235a', strong: true }]} height={200} focus={[d.lat, d.lng]} />
                ) : (
                  <p className="bo-hint">{t('crm.noCoords')}</p>
                )}
                <form
                  style={{ display: 'flex', gap: 8, marginTop: 8 }}
                  onSubmit={(e) => {
                    e.preventDefault();
                    const c = parseCoords(coords);
                    if (!c) return toast(t('crm.coordsBad'), 'error');
                    update.mutate({ id, lat: c.lat, lng: c.lng });
                    setCoords('');
                  }}
                >
                  <input className="bo-input" value={coords} onChange={(e) => setCoords(e.target.value)} placeholder={t('crm.coordsPh')} style={{ minHeight: 36, padding: '6px 12px' }} />
                  <button type="submit" className="bo-btn bo-btn--sm" disabled={!coords.trim()}>
                    {t('ui.save')}
                  </button>
                </form>
              </div>
            )}
          </section>

          {!converted && (
            <button type="button" className="bo-side__link" style={{ color: 'var(--bc-danger)', alignSelf: 'flex-start' }} onClick={() => confirm(t('crm.removeConfirm')) && remove.mutate({ id })}>
              {t('crm.remove')}
            </button>
          )}
        </div>
      </div>

      {dlg === 'edit' && <LeadDialog me={me} lead={d} onClose={() => setDlg(null)} />}
      {dlg === 'task' && <TaskDialog leadId={id} onClose={() => setDlg(null)} onDone={refresh} />}
      {dlg === 'convert' && <ConvertDialog leadId={id} canOpen={isSuper} onClose={() => setDlg(null)} onDone={refresh} />}
      {dlg && typeof dlg === 'object' && <LostDialog leadId={id} stageId={dlg.lost} onClose={() => setDlg(null)} onDone={refresh} />}
    </>
  );
}

/** Записать контакт: звонок / встреча / заметка, можно с фото или файлом */
function Composer({ leadId, onDone }: { leadId: string; onDone: () => void }) {
  const { t } = useT();
  const trpc = useTRPC();
  const toast = useToast();
  const [type, setType] = useState<ActType>('CALL');
  const [text, setText] = useState('');
  const [busy, setBusy] = useState(false);
  const file = useRef<HTMLInputElement>(null);
  const add = useMutation(
    trpc.bo.crm.addActivity.mutationOptions({
      onSuccess: () => {
        setText('');
        onDone();
      },
      onError: (e) => toast(errText(t, e), 'error'),
    }),
  );
  const upload = async (f: File) => {
    if (f.size > 10 * 1024 * 1024) return toast(t('chat.fileTooBig'), 'error');
    setBusy(true);
    try {
      const form = new FormData();
      form.set('text', text);
      form.set('file', f);
      const res = await fetch(`/files/bo/lead/${leadId}`, { method: 'POST', body: form, credentials: 'include' });
      if (!res.ok) throw new Error(((await res.json().catch(() => ({}))) as { error?: string }).error ?? String(res.status));
      setText('');
      onDone();
    } catch (e) {
      toast(errText(t, e), 'error');
    } finally {
      setBusy(false);
    }
  };
  return (
    <section className="bo-panel">
      <div className="bo-composer__tabs" role="tablist">
        {(['CALL', 'MEETING', 'NOTE'] as const).map((x) => (
          <button key={x} type="button" role="tab" aria-selected={type === x} onClick={() => setType(x)}>
            <I name={ACT_ICON[x]!} size={13} />
            {t(`crm.act.${x}`)}
          </button>
        ))}
      </div>
      <textarea className="bo-textarea" style={{ minHeight: 76 }} value={text} maxLength={4000} onChange={(e) => setText(e.target.value)} placeholder={t(`crm.actPh.${type}`)} />
      <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
        <button type="button" className="bo-btn bo-btn--sm" disabled={!text.trim() || add.isPending} onClick={() => add.mutate({ id: leadId, type, text })}>
          {t('crm.addAct')}
        </button>
        <button type="button" className="bo-btn bo-btn--ghost bo-btn--sm" disabled={busy} onClick={() => file.current?.click()}>
          <I name="clip" size={16} />
          {t('crm.attach')}
        </button>
        <input
          ref={file}
          type="file"
          hidden
          accept="image/*,application/pdf,.doc,.docx,.xls,.xlsx,.txt,.zip"
          onChange={(e) => {
            const f = e.target.files?.[0];
            e.target.value = '';
            if (f) void upload(f);
          }}
        />
      </div>
    </section>
  );
}