import React from 'react';
import { FeedSackLogEntry } from '../../types.ts';
import { SackIcon } from '../icons/Icons.tsx';

interface FeedActivityLogProps {
  data: FeedSackLogEntry[];
}

const FeedActivityLog: React.FC<FeedActivityLogProps> = ({ data }) => {
  const formatDate = (date: Date) => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);

    if (date.toDateString() === today.toDateString()) {
      return 'Hari Ini';
    }
    if (date.toDateString() === yesterday.toDateString()) {
      return 'Kemarin';
    }
    return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm">
      <h2 className="text-xl font-bold mb-4">Aktivitas Terbaru</h2>
      {data.length > 0 ? (
        <div className="space-y-3 max-h-96 overflow-y-auto pr-2">
          {data.slice(0, 15).map((log) => (
            <div
              key={log.id}
              className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
            >
              <div
                className={`flex items-center justify-center h-10 w-10 rounded-lg ${log.type === 'inbound' ? 'bg-green-100 text-green-600' : 'bg-orange-100 text-orange-600'}`}
              >
                <i
                  className={`fa-solid ${log.type === 'inbound' ? 'fa-arrow-down' : 'fa-arrow-up'} text-lg`}
                ></i>
              </div>
              <div className="flex-grow min-w-0">
                <p className="font-semibold text-gray-800 text-sm">
                  {log.type === 'inbound' ? 'Karung Masuk Terdeteksi' : 'Karung Dituang Terdeteksi'}
                </p>
                <p className="text-xs text-gray-500">
                  {log.count} karung di {log.location}
                </p>
              </div>
              <div className="flex-shrink-0">
                <span className="inline-block px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full">
                  {formatDate(log.timestamp)}
                </span>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="text-center py-10">
          <SackIcon className="text-5xl text-gray-300 mx-auto" />
          <p className="mt-3 text-gray-500">Tidak ada aktivitas terdeteksi.</p>
        </div>
      )}
    </div>
  );
};

export default FeedActivityLog;