import { FileText, Trash2, Calendar } from 'lucide-react';

interface HistoryItem {
    id: string;
    date: string;
    transcription: string; // This might be raw text or path?
    summary: string;
    subject?: string;
    filename?: string;
}

interface HistoryViewProps {
    history: HistoryItem[];
    onLoad: (item: HistoryItem) => void;
    onDelete: (id: string) => void;
}

export default function HistoryView({ history, onLoad, onDelete }: HistoryViewProps) {
    return (
        <div className="flex flex-col w-full h-full bg-background p-6">
            <h1 className="text-2xl font-bold mb-6 flex items-center gap-2">
                <FileText className="w-8 h-8" />
                Recording History
            </h1>

            {history.length === 0 ? (
                <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
                    <FileText size={48} className="mb-4 opacity-20" />
                    <p>No history found.</p>
                </div>
            ) : (
                <div className="flex-1 overflow-y-auto space-y-3 pr-2">
                    {history.map(item => (
                        <div key={item.id} className="bg-card border border-border rounded-xl p-4 hover:shadow-md transition-all group">
                            <div className="flex justify-between items-start">
                                <div
                                    className="flex-1 cursor-pointer"
                                    onClick={() => onLoad(item)}
                                >
                                    <h3 className="text-lg font-semibold group-hover:text-primary transition-colors mb-1">
                                        {item.subject || "Untitled Recording"}
                                    </h3>
                                    <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
                                        <Calendar size={12} />
                                        {item.date}
                                        {item.filename && <span className="bg-secondary px-1.5 py-0.5 rounded text-[10px] font-mono">{item.filename}</span>}
                                    </div>
                                    <p className="text-sm text-foreground/70 line-clamp-2">
                                        {item.summary ? item.summary.substring(0, 150) + "..." : "No summary available."}
                                    </p>
                                </div>

                                <button
                                    onClick={(e) => { e.stopPropagation(); onDelete(item.id); }}
                                    className="text-muted-foreground hover:text-destructive p-2 rounded-lg hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100"
                                    title="Delete"
                                >
                                    <Trash2 size={18} />
                                </button>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}