import React from 'react';
import { formatNumber } from '../../utils/format.ts';

interface InitialBalanceComparisonProps {
  date: string;
  manual: number;
  iot: number | null;
  accuracy: number | null;
  syncError?: string | null;
  loading?: boolean;
}

const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
  date,
  manual,
  iot,
  accuracy,
  syncError = null,
  loading = false,
}) => {
  const accuracyLabel = accuracy == null ? 'N/A' : `${formatNumber(accuracy, 1)}%`;
  const accuracyColor =
    accuracy == null
      ? 'text-gray-500'
      : accuracy >= 95
        ? 'text-green-600'
        : accuracy >= 80
          ? 'text-yellow-600'
          : 'text-red-600';

  return (
    <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50/50 p-4">
      <p className="text-sm font-semibold text-gray-800 mb-3">
        Perbandingan {date}
        {loading ? ' · memuat...' : ''}
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center">
        <div className="rounded-lg bg-white border border-gray-200 p-3">
          <p className="text-xs font-semibold text-blue-700">Manual</p>
          <p className="text-2xl font-bold text-gray-800">{formatNumber(manual)} karung</p>
        </div>
        <div className="rounded-lg bg-white border border-gray-200 p-3">
          <p className="text-xs font-semibold text-purple-700">IOT</p>
          <p className="text-2xl font-bold text-gray-800">
            {iot == null ? 'N/A' : `${formatNumber(iot)} karung`}
          </p>
        </div>
        <div className="rounded-lg bg-white border border-gray-200 p-3">
          <p className="text-xs font-semibold text-gray-600">Akurasi</p>
          <p className={`text-2xl font-bold ${accuracyColor}`}>{accuracyLabel}</p>
        </div>
      </div>
      {syncError && (
        <p className="mt-3 text-xs text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
          Sinkron IoT di site: {syncError}
        </p>
      )}
    </div>
  );
};

export default InitialBalanceComparison;