'use client';

import { useCurrencyStore } from '@/store/currencyStore';

interface AnalyticsData {
  total_orders: number;
  total_revenue: number;
  pending_orders: number;
  pending_revenue: number;
  today_orders: number;
  today_revenue: number;
  average_order_value: number;
  cancellation_rate: number;
  top_status: string;
  top_status_count: number;
  recent_trend: {
    date: string;
    orders: number;
    revenue: number;
  }[];
}

export default function OrdersAnalytics({ data }: { data: AnalyticsData }) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount);

  const cards = [
    {
      title: 'Total Orders',
      value: data.total_orders.toLocaleString(),
      icon: '📦',
      color: '#3B82F6',
      bg: 'rgba(59, 130, 246, 0.1)',
    },
    {
      title: 'Total Revenue',
      value: formatAmount(data.total_revenue),
      icon: '💰',
      color: '#10B981',
      bg: 'rgba(16, 185, 129, 0.1)',
    },
    {
      title: 'Pending Orders',
      value: data.pending_orders.toLocaleString(),
      subtitle: formatAmount(data.pending_revenue),
      icon: '⏳',
      color: '#F59E0B',
      bg: 'rgba(245, 158, 11, 0.1)',
    },
    {
      title: "Today's Orders",
      value: data.today_orders.toLocaleString(),
      subtitle: formatAmount(data.today_revenue),
      icon: '🔄',
      color: '#8B5CF6',
      bg: 'rgba(139, 92, 246, 0.1)',
    },
    {
      title: 'Avg. Order Value',
      value: formatAmount(data.average_order_value),
      icon: '📊',
      color: '#06B6D4',
      bg: 'rgba(6, 182, 212, 0.1)',
    },
    {
      title: 'Cancellation Rate',
      value: `${data.cancellation_rate}%`,
      icon: '❌',
      color: data.cancellation_rate > 10 ? '#EF4444' : '#F97316',
      bg: data.cancellation_rate > 10 ? 'rgba(239, 68, 68, 0.1)' : 'rgba(249, 115, 22, 0.1)',
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
      {cards.map((card, index) => (
        <div
          key={index}
          className="p-4 rounded-lg border transition-all hover:shadow-md"
          style={{
            background: 'var(--color-surface)',
            borderColor: 'var(--color-border)',
          }}
        >
          <div className="flex items-start justify-between">
            <div>
              <p className="text-xs font-medium mb-1" style={{ color: 'var(--color-text-secondary)' }}>
                {card.title}
              </p>
              <p className="text-xl font-bold" style={{ color: card.color }}>
                {card.value}
              </p>
              {card.subtitle && (
                <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                  {card.subtitle}
                </p>
              )}
            </div>
            <div
              className="w-10 h-10 rounded-lg flex items-center justify-center text-lg"
              style={{ background: card.bg }}
            >
              {card.icon}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}