flowchart LR
    A[Share Data] --> B[Data Aggregated]
    B --> C[Listed on Marketplace]
    C --> D[Advertiser Purchases]
    D --> E[Revenue Distributed]
    E --> F[Your Earnings]

interface UserEarnings {
  totalEarned: number;     // Lifetime total
  pendingEarnings: number; // Processing
  lastClaimDate: string | null; // Last claim
  weeklyEarnings: number[]; // Last 7 days
  monthlyEstimate: number; // Projected
}

interface UserBalance {
  available: number;  // Ready to claim
  pending: number;    // Being processed
  lifetime: number;   // All-time total
  currency: string;   // "PRIV"
}

// Request earnings from background
const response = await chrome.runtime.sendMessage({
  type: 'GET_EARNINGS'
});

if (response.success) {
  const earnings = response.data as UserEarnings;
  console.log('Total earned:', earnings.totalEarned);
  console.log('Pending:', earnings.pendingEarnings);
}

import { useEarnings } from '@/popup/hooks';

function EarningsDisplay() {
  const {
    earnings,
    stats,
    isLoading,
    error,
    refresh,
    claimEarnings
  } = useEarnings(walletAddress);

  if (isLoading) return <Spinner />;
  if (error) return <Error message={error} />;

  return (
    <div>
      <p>Total: {earnings.totalEarned} PRIV</p>
      <p>Pending: {earnings.pendingEarnings} PRIV</p>
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

// Weekly earnings array (last 7 days)
const weeklyEarnings = [
  2.5,   // 7 days ago
  3.2,   // 6 days ago
  1.8,   // 5 days ago
  4.1,   // 4 days ago
  2.9,   // 3 days ago
  3.7,   // 2 days ago
  2.3    // Yesterday
];

function EarningsHistory({ weeklyEarnings }: { weeklyEarnings: number[] }) {
  const maxEarning = Math.max(...weeklyEarnings);
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  return (
    <div className="flex items-end gap-1 h-20">
      {weeklyEarnings.map((earning, index) => {
        const height = maxEarning > 0
          ? (earning / maxEarning) * 100
          : 0;

        return (
          <div key={index} className="flex flex-col items-center flex-1">
            <div
              className="w-full bg-primary rounded-t"
              style={{ height: `${height}%` }}
            />
            <span className="text-xs mt-1">{days[index]}</span>
          </div>
        );
      })}
    </div>
  );
}

sequenceDiagram
    participant User
    participant Extension
    participant API as PRIV API
    participant Contract as Smart Contract
    participant Wallet

    User->>Extension: Click Claim
    Extension->>API: Request Claim
    API->>Contract: Execute Transfer
    Contract->>Wallet: Send PRIV Tokens
    Contract-->>API: TX Hash
    API-->>Extension: Success
    Extension->>Extension: Refresh Balance
    Extension-->>User: Show Success

async function claimEarnings(): Promise<boolean> {
  if (!walletAddress) {
    showError('No wallet connected');
    return false;
  }

  const response = await chrome.runtime.sendMessage({
    type: 'CLAIM_EARNINGS',
  });

  if (response.success) {
    const { txHash, amount } = response.data;
    showSuccess(`Claimed ${amount} PRIV! TX: ${txHash}`);
    await refreshEarnings(); // Update display
    return true;
  }

  showError(response.error ?? 'Claim failed');
  return false;
}

Your Share = (Your Data Points / Total Pool) × (Sale Price - Platform Fee)

Dataset sold for: 1000 PRIV
Total contributors: 500 users
Your data points: 2000
Total pool points: 100,000

Your share = (2000 / 100,000) × (1000 - 100)
           = 0.02 × 900
           = 18 PRIV

interface EarningsCache {
  earnings: UserEarnings | null;
  balance: UserBalance | null;
  lastFetched: number | null;
  expiresAt: number | null;
}

// Invalidate cache after claim
dataCache.lastFetched = 0;

// Force refresh
await chrome.runtime.sendMessage({ type: 'FLUSH_QUEUE' });

const EMPTY_EARNINGS: UserEarnings = {
  totalEarned: 0,
  pendingEarnings: 0,
  lastClaimDate: null,
  weeklyEarnings: [0, 0, 0, 0, 0, 0, 0],
  monthlyEstimate: 0,
};

const EMPTY_BALANCE: UserBalance = {
  available: 0,
  pending: 0,
  lifetime: 0,
  currency: 'PRIV',
};

async function fetchEarnings(walletAddress: string | null) {
  // No wallet = return empty (not error)
  if (!walletAddress) {
    return { success: true, data: EMPTY_EARNINGS };
  }

  try {
    const response = await getEarnings(walletAddress);

    if (response.success) {
      return response;
    }

    // Return cached data if available
    const cached = await getCachedEarnings();
    if (cached) {
      return { success: true, data: cached };
    }

    // Return empty as fallback
    return { success: false, error: response.error, data: EMPTY_EARNINGS };
  } catch (error) {
    return { success: false, error: error.message, data: EMPTY_EARNINGS };
  }
}

interface UserStats {
  privBalance: number;      // Current token balance
  totalDataPoints: number;  // Data submitted
  activeDataTypes: number;  // Enabled categories
  ranking: number;          // Contributor ranking
}

function StatsCard({ stats }: { stats: UserStats }) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Stat
        label="Data Points"
        value={stats.totalDataPoints.toLocaleString()}
      />
      <Stat
        label="Active Types"
        value={`${stats.activeDataTypes}/7`}
      />
      <Stat
        label="Ranking"
        value={`#${stats.ranking.toLocaleString()}`}
      />
      <Stat
        label="Balance"
        value={`${stats.privBalance.toFixed(2)} PRIV`}
      />
    </div>
  );
}