import { readMemoryEntries } from '@/lib/read-memory';
import { Badge } from '@/components/badge';

const TYPE_COLORS: Record<string, string> = {
    feedback: 'bg-orange-700',
    project: 'bg-blue-700',
    reference: 'bg-teal-700',
    user: 'bg-violet-700',
};

export default function MemoryPage() {
    const entries = readMemoryEntries();

    const byType = entries.reduce<Record<string, typeof entries>>(
        (acc, entry) => {
            const key = entry.type ?? 'unknown';
            (acc[key] ??= []).push(entry);
            return acc;
        },
        {}
    );

    return (
        <div>
            <div className="mb-8">
                <h1 className="text-2xl font-semibold text-zinc-100">Memory</h1>
                <p className="mt-1 text-sm text-zinc-500">
                    {entries.length} entr{entries.length !== 1 ? 'ies' : 'y'} across{' '}
                    {Object.keys(byType).length} types.
                </p>
            </div>

            <div className="space-y-8">
                {Object.entries(byType).map(([type, items]) => (
                    <section key={type}>
                        <div className="mb-3 flex items-center gap-2">
                            <Badge
                                label={type}
                                color={TYPE_COLORS[type] ?? 'bg-zinc-700'}
                            />
                            <span className="text-xs text-zinc-600">
                                {items.length}
                            </span>
                        </div>

                        <div className="space-y-3">
                            {items.map(entry => (
                                <div
                                    key={entry.filePath}
                                    className="rounded-lg border border-zinc-800 bg-zinc-900 p-4"
                                >
                                    <p className="mb-1 text-sm font-medium text-zinc-200">
                                        {entry.name}
                                    </p>
                                    <p className="mb-3 text-sm text-zinc-500">
                                        {entry.description}
                                    </p>
                                    {entry.content && (
                                        <pre className="overflow-x-auto rounded bg-zinc-950 p-3 font-mono text-xs leading-relaxed text-zinc-400 whitespace-pre-wrap">
                                            {entry.content}
                                        </pre>
                                    )}
                                </div>
                            ))}
                        </div>
                    </section>
                ))}
            </div>
        </div>
    );
}