import { AchievementProvider, useAchievement, AchievementToastContent } from 'react-trophies';
import { Toaster, toast } from 'sonner';
import type { AchievementConfiguration } from 'react-trophies';

// 1. Define achievements
const achievementConfig = {
  score: [{
    isConditionMet: (value) => typeof value === 'number' && value >= 100,
    achievementDetails: {
      achievementId: 'high-score',
      achievementTitle: 'High Score!',
      achievementDescription: 'Score 100 points',
      achievementIconKey: 'trophy'
    }
  }]
};

// 2. Wrap your app with the provider and add Toaster component
function App() {
  return (
    <AchievementProvider 
      config={achievementConfig}
      storageKey="my-app-achievements" // Optional: for persistence
      achievementSoundUrl="/achievement-sound.mp3" // Optional: sound effect
      badgesButtonPosition="top-right" // Optional: position of the badges button
      enableToasts={true} // Optional: enable toast notifications (default: true)
      toastTitle="Achievement Unlocked!" // Optional: customize toast title
    >
      <YourApp />
      <Toaster position="bottom-right" richColors /> {/* Required for toast notifications */}
    </AchievementProvider>
  );
}

// 3. Use the hook to update metrics
function GameComponent() {
  const { updateMetrics, unlockedAchievements, notifications } = useAchievement();
  
  const handleScoreChange = (newScore) => {
    // IMPORTANT: All metrics must be arrays
    updateMetrics({ score: [newScore] });
  };
  
  // Rest of your component
}

// 4. Add a sound file to your public directory
// Create a file at: public/achievement-sound.mp3

import { TrophyModal } from 'react-trophies';
import { AchievementProvider, useAchievement } from 'react-trophies';

function App() {
  // Your achievement configuration
  const achievementConfig = {
    clicks: [
      {
        isConditionMet: (value) => value >= 10,
        achievementDetails: {
          achievementId: 'click-master',
          achievementTitle: 'Click Master',
          achievementDescription: 'Click 10 times',
          achievementIconKey: 'trophy', // Icon key that displays as emoji in the card
          targetValue: 10 // Used for progress calculation
        }
      }
      // More achievements...
    ]
  };
  
  // Your current metrics
  const currentMetrics = {
    clicks: [5] // User has clicked 5 times (50% progress)
  };
  
  return (
    <AchievementProvider config={achievementConfig}>
      {/* Rest of your app */}
      
      {/* Basic usage - requires config and metrics as props */}
      <TrophyModal 
        config={achievementConfig}
        metrics={currentMetrics}
        buttonPosition="bottom-right" // Optional: position of the trigger button
        modalTitle="Achievement Collection" // Optional: custom title
        // New customization options in v2.2.0
        modalClassName="bg-slate-900 text-white" // Custom modal styling
        cardClassName="bg-slate-800 border-slate-600" // Base card styling
        unlockedCardClassName="border-green-500 bg-green-500/10" // Unlocked card styling
        iconClassName="text-amber-400 text-2xl" // Achievement icon styling
      />
    </AchievementProvider>
  );
}

// With a custom trigger element
function AppWithCustomTrigger() {
  const achievementConfig = { /* ... */ };
  const currentMetrics = { /* ... */ };
  
  return (
    <div>
      <TrophyModal 
        config={achievementConfig}
        metrics={currentMetrics}
        customTrigger={
          <button className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg">
            <span>🏆</span> Custom Achievements Button
          </button>
        }
        // Style customizations work with custom triggers too
        modalClassName="bg-indigo-950 text-white border-indigo-800"
        cardClassName="bg-indigo-900 border-indigo-700"
        unlockedCardClassName="border-yellow-500 bg-yellow-500/10"
      />
    </div>
  );
}

// In your app root
function App() {
  return (
    <>
      <AchievementProvider 
        config={achievementConfig}
        enableToasts={true} // Set to false to disable all toast notifications
        toastTitle="You've Earned an Achievement!" // Customize the toast title
      >
        <YourApp />
      </AchievementProvider>
      
      {/* This Toaster will be automatically used by react-trophies */}
      <Toaster position="bottom-right" richColors />
    </>
  );
}

import { toast } from 'sonner';
import { AchievementToastContent } from 'react-trophies';

// Somewhere in your code
function showCustomAchievementToast(achievement) {
  toast.custom(
    <AchievementToastContent 
      achievement={achievement} 
      title="Custom Achievement!" 
    />
  );
}

import { useState } from 'react';
import { AchievementProvider, useAchievement } from 'react-trophies';
import type { AchievementConfiguration } from 'react-trophies';

// Component that uses the achievement system
function ClickGame() {
  const [clicks, setClicks] = useState(0);
  const { updateMetrics } = useAchievement();

  // Handle click and update the 'clicks' metric
  const handleClick = () => {
    const newClickCount = clicks + 1;
    setClicks(newClickCount);
    
    // Update the achievement metric - must be an array for each metric
    updateMetrics({ clicks: [newClickCount] });
  };

  return (
    <div>
      <p>Total Clicks: {clicks}</p>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  );
}

function App() {
  // Define achievement configuration
  const achievementConfig: AchievementConfiguration = {
    // The 'clicks' metric will trigger these achievements
    clicks: [
      {
        // Achievement for first click
        isConditionMet: (value) => typeof value === 'number' && value >= 1,
        achievementDetails: {
          achievementId: 'first-click',
          achievementTitle: 'First Click!',
          achievementDescription: 'You made your first click',
          achievementIconKey: 'trophy'
        }
      },
      {
        // Achievement for 5 clicks
        isConditionMet: (value) => typeof value === 'number' && value >= 5,
        achievementDetails: {
          achievementId: 'getting-started',
          achievementTitle: 'Getting Started',
          achievementDescription: 'Click 5 times',
          achievementIconKey: 'star'
        }
      }
    ]
  };

  return (
    <AchievementProvider 
      config={achievementConfig}
      storageKey="click-game-achievements"
      badgesButtonPosition="top-right"
      achievementSoundUrl="/achievement-sound.mp3"
    >
      <ClickGame />
    </AchievementProvider>
  );
}