import React from 'react';
import { Search, Loader2 } from 'lucide-react';
import HistoryCard from '@/components/common/HistoryCard';
import MacroBadge from '@/components/common/MacroBadge';

interface DashboardHistoryProps {
    history: any[];
    loadingHistory: boolean;
    t: any;
    fallbackImage: string;
}

const DashboardHistory: React.FC<DashboardHistoryProps> = ({ history, loadingHistory, t, fallbackImage }) => {
    return (
        <div className="max-w-5xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500">
            <header className="mb-8">
                <h1 className="text-2xl md:text-3xl font-bold text-gray-900">{t.dashboard.historyTitle}</h1>
                <p className="text-gray-500">{t.dashboard.historySubtitle}</p>
            </header>

            <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 mb-6 flex gap-4">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                    <input type="text" placeholder={t.dashboard.searchPlaceholder} className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500/50" />
                </div>
            </div>

            {loadingHistory ? (
                <div className="flex justify-center p-12"><Loader2 className="animate-spin text-gray-400" size={32} /></div>
            ) : history.length === 0 ? (
                <div className="text-center py-12 bg-white rounded-xl border border-gray-200">
                    <p className="text-gray-500">{t.dashboard.emptyHistory}</p>
                </div>
            ) : (
                <div className="space-y-4">
                    {history.map(item => (
                        <div key={item.id} className="bg-white p-4 rounded-xl border border-gray-100 shadow-sm flex flex-col sm:flex-row items-start sm:items-center gap-4 hover:border-brand-200 transition-colors">
                            <div className="shrink-0 relative w-full sm:w-28 h-28 rounded-lg overflow-hidden bg-gray-100">
                                <img
                                    src={item.img}
                                    alt={item.category}
                                    onError={(e) => {
                                        const target = e.currentTarget;
                                        if (target.src !== fallbackImage) {
                                            target.src = fallbackImage;
                                        }
                                    }}
                                    className="w-full h-full object-cover"
                                />
                                {item.score > 0 && (
                                    <div className={`absolute top-1 right-1 text-[10px] font-bold px-1.5 py-0.5 rounded shadow-sm text-white ${item.score >= 80 ? 'bg-green-500' : (item.score >= 50 ? 'bg-yellow-500' : 'bg-red-500')}`}>
                                        {item.score}
                                    </div>
                                )}
                            </div>

                            <div className="flex-1 w-full">
                                <div className="flex justify-between items-start mb-1">
                                    <div>
                                        <h4 className="font-bold text-gray-900 text-lg">{item.category}</h4>
                                        {item.details && <p className="text-xs text-gray-500 line-clamp-1">{item.details}</p>}
                                    </div>
                                    <span className="text-xs text-gray-400 font-mono">{item.date}</span>
                                </div>

                                <div className="flex flex-wrap gap-2 mt-3">
                                    <MacroBadge label="Kcal" value={item.cals} color="bg-gray-100 text-gray-800" />
                                    <MacroBadge label="Prot" value={item.protein} color="bg-brand-50 text-brand-700" />
                                    <MacroBadge label="Carb" value={item.carbs} color="bg-blue-50 text-blue-700" />
                                    <MacroBadge label="Gord" value={item.fat} color="bg-yellow-50 text-yellow-700" />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

export default DashboardHistory;
