import React from 'react';
import { AdMeshLayout } from 'admesh-ui-sdk';
// No CSS import needed! Styles are auto-injected ✨

const recommendations = [
  {
    title: "HubSpot CRM",
    reason: "Perfect for remote teams with excellent collaboration features",
    intent_match_score: 0.92,
    admesh_link: "https://useadmesh.com/track?ad_id=hubspot-123",
    ad_id: "hubspot-123",
    product_id: "hubspot-crm",
    has_free_tier: true,
    trial_days: 14,
    keywords: ["CRM", "Sales", "Marketing"]
  }
];

function App() {
  return (
    <div>
      <h1>My AI Application</h1>

      {/* AdMesh layout - auto-detects best format */}
      <AdMeshLayout
        recommendations={recommendations}
        layout="auto"
        maxItems={6}
        onRecommendationClick={(adId, admeshLink) => {
          window.open(admeshLink, '_blank');
        }}
      />
    </div>
  );
}

// Citation layout for AI conversations
<AdMeshLayout
  recommendations={recommendations}
  conversationText="Based on your startup needs, I recommend HubSpot CRM for its excellent free tier..."
  layout="citation"
/>

// Ecommerce layout for product grids
<AdMeshLayout
  ecommerceProducts={products}
  layout="ecommerce"
  title="Featured Products"
/>

// Grid layout for recommendation cards
<AdMeshLayout
  recommendations={recommendations}
  layout="grid"
  columns={3}
  spacing="lg"
  title="Recommended Solutions"
/>

import { AdMeshLayout } from 'admesh-ui-sdk';

// Auto-detection (recommended) - defaults to 1 item for layout, 3 for ecommerce
<AdMeshLayout
  recommendations={recommendations}
  ecommerceProducts={products}
  conversationText="Based on your needs..."
  layout="auto"
  // maxItems defaults: 1 for layout, 3 for ecommerce
/>

// Specific layouts with custom maxItems
<AdMeshLayout layout="citation" recommendations={recs} conversationText="..." />
<AdMeshLayout layout="ecommerce" ecommerceProducts={products} maxItems={3} />
<AdMeshLayout layout="grid" recommendations={recs} maxItems={1} columns={1} />
<AdMeshLayout layout="list" recommendations={recs} maxItems={1} />
<AdMeshLayout layout="mixed" recommendations={recs} ecommerceProducts={products} />

// Default clean minimal design (recommended)
<AdMeshProductCard
  recommendation={recommendation}
  showMatchScore={false} // Deprecated - Match Score removed from UI
  showBadges={true}
  showFeatures={false} // Default: clean minimal design
  onClick={(adId, admeshLink) => window.open(admeshLink)}
/>

// With features for detailed showcases
<AdMeshProductCard
  recommendation={recommendation}
  showFeatures={true} // Show key features section
  onClick={(adId, admeshLink) => window.open(admeshLink)}
/>

<AdMeshEcommerceCards
  products={ecommerceProducts}
  title="Recommended Laptops"
  showPricing={true}
  showRatings={true}
  showBrand={true}
  cardWidth="md"
  maxCards={10}
  onProductClick={(product) => window.open(product.admesh_link || product.url)}
/>

<AdMeshSummaryUnit
  recommendations={recommendations}
  summary="Here are the best CRM tools for your needs"
  followupSuggestions={[
    { label: "Compare pricing", query: "CRM pricing comparison" },
    { label: "Free trials", query: "CRM free trial options" }
  ]}
  onRecommendationClick={(adId, link) => window.open(link)}
  onFollowupClick={(query) => console.log('Follow-up:', query)}
/>

<AdMeshSummaryLayout
  recommendations={recommendations}
  summary="Based on your requirements, here are the top recommendations"
  layout="grid" // 'grid' | 'list'
  showFollowups={true}
/>

<AdMeshInlineCard
  recommendation={recommendation}
  compact={true}
  showReason={true}
  onClick={(adId, link) => window.open(link)}
/>

<AdMeshProductCard
  recommendation={recommendation}
  variation="simple" // Creates inline ad format
  onClick={(adId, admeshLink) => window.open(admeshLink)}
/>

<AdMeshLinkTracker
  adId={recommendation.ad_id}
  admeshLink={recommendation.admesh_link}
  productId={recommendation.product_id}
  onClick={() => handleClick()}
  trackingData={{ title: recommendation.title }}
>
  <YourCustomComponent />
</AdMeshLinkTracker>

import { createAdMeshTheme, themePresets } from 'admesh-ui-sdk';

// Custom brand colors with automatic consistency
const customTheme = createAdMeshTheme({
  mode: 'light',
  primaryColor: '#ff6b6b',      // Your brand color
  secondaryColor: '#4ecdc4',    // Secondary brand color
  accentColor: '#45b7d1',       // Accent color
  borderRadius: '16px',         // Custom border radius
  fontFamily: '"Poppins", sans-serif', // Applied consistently across all components

  // Custom icons (emoji or React components)
  icons: {
    starIcon: '🌟',
    expandIcon: '▼',
    collapseIcon: '▲'
  },

  // Component-specific overrides (width settings are automatically applied)
  components: {
    button: {
      backgroundColor: '#custom-color',
      borderRadius: '12px'
    }
    // Width settings are automatically applied:
    // - productCard: { width: '100%' }
    // - citationUnit: { width: '100%' }
    // - inlineRecommendation: { width: '100%' }
    // - ecommerce cards maintain auto width for horizontal scrolling
  }
});

<AdMeshProductCard
  recommendations={recommendations}
  theme={customTheme}
/>

// Use built-in presets
<AdMeshProductCard theme={themePresets.minimal} />
<AdMeshProductCard theme={themePresets.vibrant} />
<AdMeshProductCard theme={themePresets.corporate} />

import { createDarkTheme } from 'admesh-ui-sdk';

const darkTheme = createDarkTheme({
  primaryColor: '#a78bfa',
  secondaryColor: '#34d399'
});

// Same recommendations for all components
const recommendations: AdMeshRecommendation[] = [
  {
    title: "HubSpot CRM",
    reason: "Perfect for remote teams with excellent collaboration features",
    intent_match_score: 0.92,
    admesh_link: "https://useadmesh.com/track?ad_id=hubspot-123",
    ad_id: "hubspot-123",
    product_id: "hubspot-crm",
    has_free_tier: true,
    trial_days: 14,
    keywords: ["CRM", "Sales", "Marketing"],
    pricing: "Free tier available, paid plans from $45/month",
    // ... additional fields as needed
  }
];

// Use with any ad unit
{recommendations.map(rec => <AdMeshProductCard key={rec.ad_id} recommendation={rec} />)}
<AdMeshLayout recommendations={recommendations} layout="auto" />
<AdMeshEcommerceCards recommendations={recommendations} />

import React from 'react';
import { AdMeshLayout } from 'admesh-ui-sdk';

const recommendations = [
  {
    product_id: "hubspot-crm",
    title: "HubSpot CRM",
    recommendation_description: "Perfect for remote teams with excellent collaboration features",
    admesh_link: "https://useadmesh.com/track?ad_id=hubspot-123",
    categories: ["CRM", "Sales", "Marketing"],
    trust_score: 95.0,
    meta: {
      ad_id: "hubspot-123",
      intent_match_score: 92.0,
      reason: "Perfect for remote teams with excellent collaboration features"
    }
  }
];

function RecommendationDisplay() {
  return (
    <div className="recommendations-container">
      <AdMeshLayout
        response={{
          layout_type: 'auto',
          recommendations: recommendations
        }}
      />
    </div>
  );
}

<AdMeshLayout
  recommendations={recommendations}
  layout="auto"
/>

<AdMeshLayout
  recommendations={recommendations}
  layout="grid"
/>

<AdMeshLayout
  recommendations={recommendations}
  layout="list"
/>

<AdMeshLayout
  recommendations={recommendations}
  layout="citation"
/>

import { AdMeshInlineCard } from 'admesh-ui-sdk';

<AdMeshInlineCard
  recommendation={recommendation}
  compact={true}
  showReason={true}
  onClick={(adId, link) => window.open(link)}
/>

import { AdMeshBadge } from 'admesh-ui-sdk';

<AdMeshBadge
  type="trust" // 'trust' | 'feature' | 'promotion'
  variant="primary" // 'primary' | 'secondary' | 'success'
  size="small" // 'small' | 'medium' | 'large'
  text="Highly Trusted"
/>

import { AdMeshLinkTracker } from 'admesh-ui-sdk';

<AdMeshLinkTracker
  adId={recommendation.meta.ad_id}
  admeshLink={recommendation.admesh_link}
  productId={recommendation.product_id}
  onClick={() => handleClick()}
  trackingData={{ title: recommendation.title }}
>
  <YourCustomComponent />
</AdMeshLinkTracker>

import { createAdMeshTheme } from 'admesh-ui-sdk';

const customTheme = createAdMeshTheme({
  mode: 'light', // 'light' | 'dark'
  accentColor: '#2563eb',
  borderRadius: '8px',
  fontFamily: 'Inter, sans-serif'
});

<AdMeshLayout
  recommendations={recommendations}
  theme={customTheme}
/>

import { createDarkTheme } from 'admesh-ui-sdk';

const darkTheme = createDarkTheme({
  accentColor: '#3b82f6'
});

<AdMeshLayout
  recommendations={recommendations}
  theme={darkTheme}
/>

<AdMeshLayout
  recommendations={recommendations}
  className="my-custom-recommendations"
  style={{
    backgroundColor: '#f8f9fa',
    borderRadius: '12px',
    padding: '16px'
  }}
/>

import React, { useState } from 'react';
import { AdMeshChatInterface } from 'admesh-ui-sdk';

function ChatPage() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleSendMessage = async (messageContent) => {
    // Add user message
    const userMessage = {
      id: `user-${Date.now()}`,
      role: 'user',
      content: messageContent,
      timestamp: new Date(),
    };
    setMessages(prev => [...prev, userMessage]);
    setIsLoading(true);

    // Get AI response
    const response = await getAIResponse(messageContent);
    setMessages(prev => [...prev, response]);
    setIsLoading(false);
  };

  return (
    <div className="h-screen">
      <AdMeshChatInterface
        messages={messages}
        config={{
          placeholder: "Ask me about products...",
          enableTypingIndicator: true,
          maxMessages: 50
        }}
        theme={{ mode: 'light' }}
        isLoading={isLoading}
        onSendMessage={handleSendMessage}
        onRecommendationClick={(adId, link) => window.open(link)}
      />
    </div>
  );
}

// Embedded chat with message limit
<AdMeshChatInterface
  config={{
    maxMessages: 20,
    enableTypingIndicator: true,
    placeholder: "What can I help you find today?"
  }}
/>

// When ChatGPT detects software-related queries
const handleChatGPTResponse = (userQuery, gptResponse) => {
  if (containsSoftwareQuery(userQuery)) {
    const recommendations = await getAdMeshRecommendations(userQuery);
    showAutoRecommendations(recommendations, userQuery);
  }
};

// When Claude processes business queries
const handleClaudeQuery = async (query) => {
  const intent = await detectIntent(query);
  if (intent.category === 'software' || intent.category === 'tools') {
    const recommendations = await fetchRecommendations(intent);
    triggerAutoWidget(recommendations, query);
  }
};

// All components automatically track interactions
<AdMeshProductCard
  recommendations={recommendations}
  onProductClick={(adId, admeshLink) => {
    // This click is automatically tracked
    window.open(admeshLink, '_blank');
  }}
  onTrackView={(data) => {
    // Optional: Custom view tracking
    console.log('Recommendation viewed:', data);
  }}
/>

import { setAdMeshTrackerConfig } from 'admesh-ui-sdk';

setAdMeshTrackerConfig({
  enabled: true
});

import { AdMeshLinkTracker } from 'admesh-ui-sdk';

<AdMeshLinkTracker
  adId="custom-ad-123"
  admeshLink="https://useadmesh.com/track?ad_id=custom-ad-123"
  productId="product-456"
  trackingData={{
    customField: 'value',
    source: 'custom-component'
  }}
  onClick={() => {
    // Your custom click handler
    console.log('Custom click tracked');
  }}
>
  <YourCustomComponent />
</AdMeshLinkTracker>

import { useAdMeshTracker } from 'admesh-ui-sdk';

function CustomComponent() {
  const { trackClick, trackView, trackConversion } = useAdMeshTracker();

  const handleCustomEvent = async () => {
    await trackClick({
      adId: 'ad-123',
      admeshLink: 'https://useadmesh.com/track?ad_id=ad-123',
      productId: 'product-456',
      metadata: { source: 'custom-button' }
    });
  };

  return <button onClick={handleCustomEvent}>Track Custom Event</button>;
}

import { AdMesh } from '@admesh/typescript-sdk';
import { AdMeshProductCard, AdMeshLayout } from 'admesh-ui-sdk';

const client = new AdMesh({ apiKey: 'your-api-key' });

// Basic recommendation display
async function getRecommendations(query: string) {
  const response = await client.recommend.getRecommendations({
    query,
    format: 'auto'
  });

  return (
    <AdMeshProductCard
      recommendation={response.response?.recommendations?.[0]}
      autoLayout={true}
    />
  );
}

// Chat interface integration
function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [recommendations, setRecommendations] = useState([]);

  const handleUserMessage = async (message: string) => {
    // Add user message
    setMessages(prev => [...prev, { role: 'user', content: message }]);

    // Get AI response with recommendations
    const response = await client.recommend.getRecommendations({
      query: message,
      format: 'conversational'
    });

    // Add assistant response
    setMessages(prev => [...prev, {
      role: 'assistant',
      content: response.response?.summary || 'Here are some recommendations...'
    }]);

    // Show recommendations
    if (response.response?.recommendations) {
      setRecommendations(response.response.recommendations);
    }
  };

  return (
    <div className="chat-container">
      {messages.map((msg, i) => (
        <div key={i} className={`message ${msg.role}`}>
          {msg.content}

          {/* Show recommendations after assistant messages */}
          {msg.role === 'assistant' && recommendations.length > 0 && (
            <AdMeshLayout
              recommendations={recommendations}
              layout="list"
              maxItems={3}
              onRecommendationClick={(adId, link) => window.open(link)}
            />
          )}
        </div>
      ))}
    </div>
  );
}

// Display the same recommendations in different formats
function MultiFormatDemo({ recommendations }: { recommendations: AdMeshRecommendation[] }) {
  return (
    <div className="space-y-8">
      {/* Main layout */}
      <AdMeshProductCard
        recommendations={recommendations}
        autoLayout={true}
      />

      {/* Citation format */}
      <AdMeshLayout
        recommendations={recommendations}
        layout="citation"
      />

      {/* Ecommerce cards */}
      {recommendations.length > 0 && (
        <AdMeshEcommerceCards
          recommendations={recommendations}
          showPricing={true}
        />
      )}
    </div>
  );
}

// Complete recommendation interface (see Unified JSON Response section above)
interface AdMeshRecommendation {
  // Core required fields
  title: string;
  reason: string;
  intent_match_score: number; // 0-1 normalized score
  admesh_link: string;
  ad_id: string;
  product_id: string;

  // All optional fields for different ad unit needs
  url?: string;
  description?: string;
  pricing?: string;
  features?: string[];
  keywords?: string[];
  categories?: string[];
  has_free_tier?: boolean;
  trial_days?: number;
  // ... see complete interface above
}

// Intent types for layout selection
type IntentType =
  | 'compare_products'
  | 'best_for_use_case'
  | 'trial_demo'
  | 'budget_conscious';

// Theme configuration
interface AdMeshTheme {
  mode: 'light' | 'dark';
  accentColor?: string;
  borderRadius?: string;
  fontFamily?: string;
}

// Conversational ad configuration
interface ConversationalAdConfig {
  displayMode: 'inline' | 'summary' | 'floating' | 'minimal' | 'citation';
  context: 'chat' | 'assistant' | 'agent' | 'support';
  maxRecommendations?: number;
  showPoweredBy?: boolean;
  autoShow?: boolean;
  delayMs?: number;
  position?: 'top' | 'bottom' | 'inline';
}

// Chat configuration
interface AdMeshChatConfig {
  position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  size: 'sm' | 'md' | 'lg' | 'xl';
  displayMode: 'widget' | 'fullscreen' | 'embedded';
  autoOpen?: boolean;
  showWelcomeMessage?: boolean;
  welcomeMessage?: string;
  placeholder?: string;
  maxMessages?: number;
  enableTypingIndicator?: boolean;
}

// Components automatically adapt to screen sizes
<AdMeshProductCard
  recommendations={recommendations}
  // Automatically shows:
  // - Grid layout on desktop
  // - Single column on mobile
  // - Optimized touch targets
  // - Readable typography scaling
/>

// Accessibility is built-in, no additional configuration needed
<AdMeshLayout
  recommendations={recommendations}
  layout="list"
  // Automatically includes:
  // - aria-labels for recommendations
  // - keyboard navigation
  // - screen reader announcements
  // - focus management
/>

// ❌ Missing recommendations data
<AdMeshProductCard recommendations={undefined} />

// ✅ Always provide valid recommendations array
<AdMeshProductCard recommendations={recommendations || []} />

// ❌ CSS not loading (if using manual import)
import { AdMeshProductCard } from 'admesh-ui-sdk';

// ✅ Styles are auto-injected, no import needed
import { AdMeshProductCard } from 'admesh-ui-sdk';
// Styles automatically included ✨

// ❌ Missing admesh_link in recommendations
const recommendations = [{
  title: "Product",
  // Missing admesh_link
}];

// ✅ Include proper tracking URLs
const recommendations = [{
  title: "Product",
  admesh_link: "https://useadmesh.com/track?ad_id=123",
  ad_id: "123",
  product_id: "product-123"
}];

// ❌ Fixed widths that don't scale
<div style={{ width: '800px' }}>
  <AdMeshProductCard recommendations={recommendations} />
</div>

// ✅ Use responsive containers
<div className="w-full max-w-4xl mx-auto">
  <AdMeshProductCard recommendations={recommendations} />
</div>

// ✅ Limit recommendations for better performance
<AdMeshProductCard
  recommendations={recommendations}
  maxDisplayed={6} // Limit to 6 items
/>

// ✅ Use React.memo for static recommendations
const MemoizedAdMeshProductCard = React.memo(AdMeshProductCard);

// ✅ Lazy load components
const AdMeshEcommerceCards = React.lazy(() =>
  import('admesh-ui-sdk').then(module => ({
    default: module.AdMeshEcommerceCards
  }))
);