import React from 'react';
import { mdiTrendingUp, mdiTrendingDown, mdiCurrencyUsd, mdiCalculator } from '@mdi/js';
import BaseIcon from '../../BaseIcon';
import { useAppSelector } from '../../../stores/hooks';

const DashboardWidgets = () => {
  const { stats, loading } = useAppSelector((state) => state.dashboard);

  const widgets = [
    {
      label: 'Total Revenue',
      value: `ETB ${Number(stats?.revenue || 0).toLocaleString()}`,
      trend: '+12.5%',
      trendType: 'up',
      labelColor: 'text-emerald-600',
      bgColor: 'bg-emerald-50',
      icon: mdiTrendingUp,
      iconBg: 'bg-emerald-500',
      badge: 'Revenue'
    },
    {
      label: 'Total Expenses',
      value: `ETB ${Number(stats?.expenses || 0).toLocaleString()}`,
      trend: '+5.2%',
      trendType: 'down', // Expenses up is usually marked as red/down in financial context or just trend up
      labelColor: 'text-rose-600',
      bgColor: 'bg-rose-50',
      icon: mdiTrendingDown,
      iconBg: 'bg-rose-500',
      badge: 'Expenses'
    },
    {
      label: 'Net Profit',
      value: `ETB ${Number(stats?.profit || 0).toLocaleString()}`,
      trend: stats?.profit >= 0 ? 'Positive' : 'Negative',
      trendType: stats?.profit >= 0 ? 'up' : 'down',
      labelColor: 'text-indigo-600',
      bgColor: 'bg-indigo-50',
      icon: mdiCurrencyUsd,
      iconBg: 'bg-indigo-500',
      badge: 'Profit'
    },
    {
      label: 'VAT Payable',
      value: `ETB ${Number(stats?.vatPayable || 0).toLocaleString()}`,
      trend: 'Current period',
      trendType: 'neutral',
      labelColor: 'text-amber-600',
      bgColor: 'bg-amber-50',
      icon: mdiCalculator,
      iconBg: 'bg-amber-500',
      badge: 'Tax'
    }
  ];

  if (loading && !stats) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="bg-white dark:bg-dark-900 border border-gray-100 dark:border-dark-700 rounded-[1.5rem] p-6 shadow-sm animate-pulse">
            <div className="flex justify-between items-start mb-4">
              <div className="w-12 h-12 bg-gray-100 dark:bg-dark-800 rounded-xl"></div>
              <div className="w-12 h-4 bg-gray-100 dark:bg-dark-800 rounded-full"></div>
            </div>
            <div className="h-4 bg-gray-100 dark:bg-dark-800 rounded w-1/2 mb-2"></div>
            <div className="h-8 bg-gray-100 dark:bg-dark-800 rounded w-3/4"></div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      {widgets.map((widget, index) => (
        <div key={index} className="bg-white dark:bg-dark-900 border border-gray-100 dark:border-dark-700 rounded-[1.5rem] p-6 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden">
          <div className="flex justify-between items-start mb-4">
            <div className={`w-12 h-12 ${widget.iconBg} text-white rounded-xl flex items-center justify-center shadow-lg`}>
              <BaseIcon path={widget.icon} size={24} />
            </div>
            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${widget.bgColor} ${widget.labelColor}`}>
              {widget.badge}
            </span>
          </div>
          
          <div>
            <p className="text-gray-500 dark:text-gray-400 text-sm font-medium mb-1">{widget.label}</p>
            <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">{widget.value}</h3>
            
            <div className="flex items-center text-xs font-semibold">
              {widget.trendType === 'up' && (
                <BaseIcon path={mdiTrendingUp} size={14} className="text-emerald-500 mr-1" />
              )}
              {widget.trendType === 'down' && (
                <BaseIcon path={mdiTrendingDown} size={14} className="text-rose-500 mr-1" />
              )}
              <span className={
                widget.trendType === 'up' ? 'text-emerald-500' : 
                widget.trendType === 'down' ? 'text-rose-500' : 
                'text-gray-400'
              }>
                {widget.trend}
              </span>
              {widget.trendType !== 'neutral' && (
                 <span className="text-gray-400 ml-1 font-normal text-[10px]">vs last period</span>
              )}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default DashboardWidgets;