import React from 'react';
import type { InitialBalanceResult } from '../../types/api.ts';
import { formatNumber } from '../../utils/format.ts';

interface InitialBalanceComparisonProps {
  result: InitialBalanceResult;
  loading?: boolean;
}

const InitialBalanceComparison: React.FC<InitialBalanceComparisonProps> = ({
  result,
  loading = false,
}) => {
  const accuracy = result.accuracy;
  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 {result.date}
        {loading ? ' · memuat IoT...' : ''}
      </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(result.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">
            {result.iot == null ? 'N/A' : `${formatNumber(result.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>
      {result.sync_error && (
        <p className="mt-3 text-xs text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-2">
          Gagal menarik data IoT dari karung-web-admin: {result.sync_error}
        </p>
      )}
    </div>
  );
};

export default InitialBalanceComparison;