'use client';

import { useMemo } from 'react';
import { buildOneTapExamples } from '@/lib/one-tap-examples';
import { useOneTapUrls } from '@/lib/use-one-tap-urls';
import { CodeExampleTabs } from '@/components/code-example-tabs';

export function OneTapCodeTabs() {
  const { urls, loading, error, apiBase, frontendBase } = useOneTapUrls();
  const examples = useMemo(() => (urls ? buildOneTapExamples(urls) : []), [urls]);

  if (loading) {
    return <p className="text-sm text-zinc-500 dark:text-zinc-400">Загрузка актуальных URL из настроек IdP…</p>;
  }

  if (error || !urls) {
    return (
      <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
        {error ?? 'Не удалось построить примеры интеграции.'}
      </p>
    );
  }

  return (
    <div className="space-y-3">
      <p className="text-sm text-zinc-500 dark:text-zinc-400">
        API (issuer): <code className="rounded bg-zinc-100 px-1.5 py-0.5 dark:bg-zinc-800">{apiBase}</code>
        {' · '}
        Frontend / виджет: <code className="rounded bg-zinc-100 px-1.5 py-0.5 dark:bg-zinc-800">{frontendBase}</code>
        {' — '}
        из настроек <strong>PUBLIC_API_URL</strong>, <strong>PUBLIC_FRONTEND_URL</strong> и <strong>PROJECT_NAME</strong>.
      </p>
      <CodeExampleTabs examples={examples} />
    </div>
  );
}