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

type Props = {
  warning: CountingAccuracyWarning;
};

const CountingAccuracyWarningBanner: React.FC<Props> = ({ warning }) => {
  const isOver = warning.direction === 'over';
  const title = isOver
    ? 'Hitung ayam IoT lebih tinggi dari stock manual'
    : 'Akurasi hitung ayam IoT rendah (IoT lebih rendah dari stock)';
  const body = isOver
    ? 'Manager perlu cek: kemungkinan fraud / ayam baru yang belum tercatat, atau AI overcount; pastikan juga video kamera lengkap dan tidak bermasalah.'
    : 'Manager perlu cek: video kamera lengkap atau tidak, kemungkinan masalah AI, atau ada selisih stok.';

  return (
    <div
      role="alert"
      className="mb-6 rounded-lg border-l-4 border-amber-500 bg-amber-50 p-4 text-amber-950"
    >
      <div className="flex items-start gap-3">
        <i className="fa-solid fa-triangle-exclamation mt-0.5 text-xl text-amber-600" aria-hidden />
        <div className="min-w-0 space-y-1">
          <p className="text-sm font-semibold">{title}</p>
          <p className="text-sm">
            Hari {warning.day} · IoT {formatNumber(warning.iotCount, 0)} vs stock{' '}
            {formatNumber(warning.stockAkhir, 0)} (akurasi {formatNumber(warning.accuracy, 1)}%)
          </p>
          <p className="text-sm">{body}</p>
        </div>
      </div>
    </div>
  );
};

export default CountingAccuracyWarningBanner;