import Alert from '@/components/Alert';
import Card from '@/components/Card';
import { formatNumber } from '@/lib/helper';
import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
import { Icon } from '@iconify/react';

interface DashboardStatsProps {
  data: DashboardStatisticsData[];
}

// Konfigurasi untuk setiap kartu
const CARD_CONFIG = [
  {
    key: 'HPP Global',
    icon: 'heroicons:banknotes',
    alertColor: 'warning' as const,
    suffix: ' /Kg',
    prefix: 'RP ',
  },
  {
    key: 'Avg. Selling Price',
    icon: 'heroicons:document-currency-dollar',
    alertColor: 'success' as const,
    suffix: ' /Kg',
    prefix: '',
  },
  {
    key: 'FCR',
    icon: 'heroicons:clipboard-document-list',
    alertColor: 'info' as const,
    suffix: '',
    prefix: '',
  },
  {
    key: 'Mortality',
    icon: 'heroicons:exclamation-triangle',
    alertColor: 'error' as const,
    suffix: ' %',
    prefix: '',
  },
];

const DashboardStats = ({ data }: DashboardStatsProps) => {
  // Helper to get trend icon and color
  const getTrendDisplay = (percent: number) => {
    const isPositive = percent >= 0;
    return {
      icon: isPositive
        ? 'heroicons:arrow-trending-up'
        : 'heroicons:arrow-trending-down',
      color: isPositive ? 'text-success' : 'text-error',
      value: Math.abs(percent),
    };
  };

  // Helper to format value
  const formatValue = (value: number, prefix: string, suffix: string) => {
    return (
      <>
        {prefix}
        {formatNumber(value)}
        {suffix && (
          <span className='text-sm font-normal text-neutral-500'>{suffix}</span>
        )}
      </>
    );
  };

  return (
    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
      {CARD_CONFIG.map((config) => {
        // Find matching data from API
        const cardData = data.find((item) => item.label === config.key);

        if (!cardData) {
          // Show placeholder card for missing data (FCR & Mortality)
          return (
            <Card
              key={config.key}
              className={{
                wrapper: 'w-full rounded-lg',
                body: 'p-0',
              }}
              variant='bordered'
              footer={
                <div className='flex flex-row justify-between px-4 pb-4'>
                  <div className='text-neutral-400 font-semibold text-sm'>
                    From last month
                  </div>
                  <div className='text-neutral-400 font-semibold text-sm'>
                    Filter Required
                  </div>
                </div>
              }
            >
              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
                <Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
                  <Icon
                    icon={config.icon}
                    width={32}
                    height={32}
                    className='text-neutral-400'
                  />
                </Alert>
                <div>
                  <h3 className='text-neutral-400 font-semibold text-sm'>
                    {config.key}
                  </h3>
                  <p className='text-2xl font-semibold text-neutral-400'>
                    ********
                  </p>
                </div>
              </div>
            </Card>
          );
        }

        const trend = getTrendDisplay(cardData.percent_last_month);

        return (
          <Card
            key={config.key}
            className={{
              wrapper: 'w-full rounded-lg',
              body: 'p-0',
            }}
            variant='bordered'
            footer={
              <div className='flex flex-row justify-between px-4 pb-4'>
                <div className='text-neutral-500 font-semibold text-sm'>
                  From last month
                </div>
                <div
                  className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
                >
                  <Icon icon={trend.icon} width={16} height={16} />
                  {trend.value}%
                </div>
              </div>
            }
          >
            <div className='flex flex-row items-center gap-4 px-4 pt-4'>
              <Alert
                variant='soft'
                color={config.alertColor}
                className='rounded-lg p-3'
              >
                <Icon icon={config.icon} width={32} height={32} />
              </Alert>
              <div>
                <h3 className='text-neutral-500 font-semibold text-sm'>
                  {cardData.label}
                </h3>
                <p className='text-2xl font-semibold'>
                  {formatValue(cardData.value, config.prefix, config.suffix)}
                </p>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
};

export default DashboardStats;
