import { Link, useNavigate } from 'react-router-dom';
import { XerticaAssistant } from 'xertica-ui/assistant';
import { useLayout } from 'xertica-ui/hooks';
import { Header } from 'xertica-ui/layout';
import { useTranslation } from 'react-i18next';
import { AppLayout } from '../app/components/AppLayout';
import { useFdmAssistant } from '../features/assistant';

/**
 * FDM integration spike — not part of the CLI scaffold (see bin/cli.ts's
 * `pagesToCopy` allowlist, which never references this file). Only reachable
 * from this repo's own dev app, wired up in AuthGuard.tsx + navigation.ts.
 *
 * Talks to FDM's Agent Engine via server/fdm-proxy.mjs (`npm run server`),
 * never directly — FDM sends no CORS headers and the API key must stay
 * server-side. The connection logic itself lives in `useFdmAssistant` so it's
 * shared with the lateral assistant on Home/Template/Settings.
 */
export function FdmAssistantPage() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { sidebarExpanded } = useLayout();
  const { assistantProps } = useFdmAssistant();

  return (
    <AppLayout>
      <div
        style={{ paddingLeft: sidebarExpanded ? '320px' : '80px' }}
        className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
      >
        <Header
          breadcrumbs={[
            { label: t('nav.designSystem'), href: '/home' },
            { label: 'Assistente FDM' },
          ]}
          renderLink={(href: string, props: any) => <Link to={href} {...props} />}
        />
        <main className="flex-1 overflow-hidden bg-muted">
          <XerticaAssistant
            {...assistantProps}
            mode="fullPage"
            showHistory={false}
            showFavorites={false}
            onNavigateSettings={() => navigate('/settings')}
          />
        </main>
      </div>
    </AppLayout>
  );
}