import React from 'react';
import { XerticaAssistant, generateDemoResponse } from 'xertica-ui/assistant';
import { useLayout } from 'xertica-ui/hooks';
import { useNavigate } from 'react-router-dom';
import { AppLayout } from '../app/components/AppLayout';
import { HomeContent } from '../features/home';
import {
  useAssistantConfig,
  getMockRichSuggestions,
  getMockFeedbackOptions,
} from '../features/assistant';

/**
 * Home page — thin layout shell.
 *
 * Assistant config (suggestions, feedback options) is fetched via React Query.
 * To connect to a real API replace `fetchAssistantConfig` in
 * `features/assistant/data/mock.ts`.
 */
export function HomePage() {
  const { assistenteExpanded, toggleAssistente } = useLayout();
  const navigate = useNavigate();

  const { data: assistantConfig } = useAssistantConfig();

  return (
    <AppLayout
      assistant={
        <XerticaAssistant
          isExpanded={assistenteExpanded}
          onToggle={toggleAssistente}
          defaultTab="chat"
          demoMode={true}
          userName="Ariel Santos"
          responseGenerator={generateDemoResponse}
          suggestions={assistantConfig?.suggestions}
          richSuggestions={assistantConfig?.richSuggestions ?? getMockRichSuggestions()}
          feedbackOptions={assistantConfig?.feedbackOptions ?? getMockFeedbackOptions()}
          showHistory={false}
          showFavorites={false}
          onNavigateSettings={() => navigate('/settings')}
          onNavigateFullPage={() => navigate('/assistente')}
          onEvaluation={(messageId, type, reason) => {
            // Wire your feedback persistence logic here
            console.log(`Avaliação: ${type} na mensagem ${messageId}. Motivo: ${reason}`);
          }}
        />
      }
    >
      <HomeContent />
    </AppLayout>
  );
}