'use client';

import React from 'react';
import {
  TrendingUp,
  TrendingDown,
  ShoppingBag,
  Receipt,
  Smartphone,
  Calculator,
  AlertTriangle,
  DollarSign,
} from 'lucide-react';
import Icon from '@/components/ui/AppIcon';


interface MetricCard {
  id: string;
  label: string;
  value: string;
  subValue?: string;
  change?: string;
  changeType?: 'up' | 'down' | 'neutral';
  icon: React.ComponentType<{ size?: number; className?: string }>;
  iconBg: string;
  iconColor: string;
  cardBg?: string;
  highlight?: boolean;
  alert?: boolean;
  span?: 'single' | 'double';
}

const metrics: MetricCard[] = [
  {
    id: 'metric-gross-sales',
    label: 'Gross Sales Today',
    value: 'KES 284,750',
    subValue: 'Target: KES 300,000',
    change: '+12.4% vs yesterday',
    changeType: 'up',
    icon: DollarSign,
    iconBg: 'bg-primary/10',
    iconColor: 'text-primary',
    span: 'double',
    highlight: true,
  },
  {
    id: 'metric-transactions',
    label: 'Transactions Today',
    value: '347',
    subValue: 'Avg 31.4/hr',
    change: '+8.2% vs yesterday',
    changeType: 'up',
    icon: Receipt,
    iconBg: 'bg-success/10',
    iconColor: 'text-success',
  },
  {
    id: 'metric-gross-profit',
    label: 'Gross Profit',
    value: 'KES 68,340',
    subValue: 'Margin: 24.0%',
    change: '+5.1% vs yesterday',
    changeType: 'up',
    icon: TrendingUp,
    iconBg: 'bg-success/10',
    iconColor: 'text-success',
  },
  {
    id: 'metric-avg-txn',
    label: 'Avg Transaction Value',
    value: 'KES 820',
    subValue: 'Median: KES 640',
    change: '-3.8% vs yesterday',
    changeType: 'down',
    icon: ShoppingBag,
    iconBg: 'bg-warning/10',
    iconColor: 'text-warning',
  },
  {
    id: 'metric-mpesa',
    label: 'M-Pesa Collections',
    value: 'KES 142,300',
    subValue: '49.9% of total sales',
    change: '+18.7% vs yesterday',
    changeType: 'up',
    icon: Smartphone,
    iconBg: 'bg-info/10',
    iconColor: 'text-info',
  },
  {
    id: 'metric-vat',
    label: 'VAT Collected (16%)',
    value: 'KES 39,410',
    subValue: 'Taxable: KES 246,310',
    change: 'Compliant',
    changeType: 'neutral',
    icon: Calculator,
    iconBg: 'bg-secondary',
    iconColor: 'text-muted-foreground',
  },
  {
    id: 'metric-low-stock',
    label: 'Low Stock Alerts',
    value: '7 Products',
    subValue: '2 critically out of stock',
    change: '↑ 3 new alerts today',
    changeType: 'down',
    icon: AlertTriangle,
    iconBg: 'bg-danger/10',
    iconColor: 'text-danger',
    alert: true,
  },
];

function MetricCardComponent({ card }: { card: MetricCard }) {
  const Icon = card.icon;

  return (
    <div
      className={`card-elevated rounded-xl p-5 flex flex-col gap-3 transition-all duration-200 hover:shadow-card-hover ${
        card.alert ? 'border-danger/30 bg-danger-bg/30' : ''
      } ${card.span === 'double' ? 'lg:col-span-2' : ''}`}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <p className="text-xs font-600 uppercase tracking-wide text-muted-foreground mb-0.5">
            {card.label}
          </p>
          {card.subValue && (
            <p className="text-xs text-muted-foreground">{card.subValue}</p>
          )}
        </div>
        <div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ml-2 ${card.iconBg}`}>
          <Icon size={18} className={card.iconColor} />
        </div>
      </div>

      <div>
        <p className={`font-tabular font-700 text-foreground ${card.span === 'double' ? 'text-hero-metric' : 'text-metric'}`}>
          {card.value}
        </p>
      </div>

      {card.change && (
        <div className="flex items-center gap-1.5">
          {card.changeType === 'up' && <TrendingUp size={12} className="text-success flex-shrink-0" />}
          {card.changeType === 'down' && <TrendingDown size={12} className="text-danger flex-shrink-0" />}
          {card.changeType === 'neutral' && <span className="w-3 h-px bg-muted-foreground inline-block" />}
          <span
            className={`text-xs font-500 ${
              card.changeType === 'up' ?'text-success'
                : card.changeType === 'down' ? card.alert ?'text-danger font-600': 'text-danger' :'text-muted-foreground'
            }`}
          >
            {card.change}
          </span>
        </div>
      )}
    </div>
  );
}

export default function MetricsBentoGrid() {
  // Grid plan: 7 cards → grid-cols-4
  // Row 1: hero (col-span-2) + 2 regular = 4 cols ✓
  // Row 2: 4 regular = 4 cols ✓
  // 7 total = rows fit perfectly

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
      {metrics.map((card) => (
        <MetricCardComponent key={card.id} card={card} />
      ))}
    </div>
  );
}