import { useQuery } from '@tanstack/react-query';
import { Send } from 'lucide-react';
import { api, type Me } from '../api.ts';
import { PageTitle } from '../components/ui.tsx';
import { TelegramLink } from '../pages/Settings.tsx';
import { useAcc } from './i18n.ts';

/** Тариф без веб-кабинета, открыт браузер: объясняем, что работа идёт в Telegram, и помогаем туда попасть. */
export function TelegramOnlyPage({ me }: { me: Me }) {
  const { a } = useAcc();
  const m = a.mini;
  const { data } = useQuery({
    queryKey: ['config'],
    queryFn: () => api<{ telegramBotUsername: string | null }>('/config'),
    staleTime: Infinity,
  });
  const bot = data?.telegramBotUsername;
  return (
    <>
      <PageTitle title={m.title} sub={m.sub} />
      <ol className="max-w-2xl space-y-4">
        <li className="card p-5">
          <p className="mb-3 font-medium"><span className="mr-2 text-signal tabular-nums">1</span>{m.step1}</p>
          <TelegramLink linked={me.user.telegramLinked} />
        </li>
        <li className="card p-5">
          <p className="mb-3 font-medium"><span className="mr-2 text-signal tabular-nums">2</span>{m.step2}</p>
          {bot && (
            <a className="btn btn-primary" href={`https://t.me/${bot}`} target="_blank" rel="noopener noreferrer">
              <Send size={16} aria-hidden="true" />
              {m.open}
            </a>
          )}
        </li>
      </ol>
      <p className="mt-6 max-w-2xl text-sm text-muted">{m.upgrade}</p>
    </>
  );
}