import React, { useMemo } from 'react';
import { Kpi } from '../../types.ts';
import { formatNumber } from '../../utils/formatters.ts';

interface KarungDituangTodayCardProps {
  karungKpi?: Kpi;
  effectiveDate?: Date;
}

const KarungDituangTodayCard: React.FC<KarungDituangTodayCardProps> = ({
  karungKpi,
  effectiveDate,
}) => {
  const todayData = useMemo(() => {
    const totalKarung = karungKpi?.value ?? 0;
    const totalKg = totalKarung * 50;

    return { totalKarung, totalKg };
  }, [karungKpi]);

  const formatDisplayDate = (date: Date) =>
    date.toLocaleDateString('id-ID', {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });

  const displayDate = effectiveDate ?? new Date();

  return (
    <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl shadow-sm border-2 border-blue-200">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="bg-orange-500 text-white p-3 rounded-lg">
            <i className="fa-solid fa-arrow-up text-2xl"></i>
          </div>
          <div>
            <h2 className="text-xl font-bold text-gray-800">Karung Dituang</h2>
            <p className="text-sm text-gray-600">{formatDisplayDate(displayDate)}</p>
          </div>
        </div>
      </div>

      {/* Today's Usage Display */}
      <div className="bg-white rounded-lg p-6 border border-blue-200">
        <div className="flex items-center justify-center gap-8">
          {/* Karung Count */}
          <div className="text-center">
            <p className="text-sm font-semibold text-gray-600 mb-2">Total Karung</p>
            <p className="text-4xl font-bold text-orange-600">
              {formatNumber(todayData.totalKarung)}
            </p>
            <p className="text-xs text-gray-400 mt-1">karung</p>
          </div>

          {/* Divider */}
          <div className="h-16 w-px bg-gray-300"></div>

          {/* Kg Conversion */}
          <div className="text-center">
            <p className="text-sm font-semibold text-gray-600 mb-2">Total Berat</p>
            <p className="text-4xl font-bold text-gray-700">{formatNumber(todayData.totalKg)}</p>
            <p className="text-xs text-gray-400 mt-1">kg</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default KarungDituangTodayCard;