import { readAgents } from '@/lib/read-agents';
import { readMcps } from '@/lib/read-mcps';
import { readMemoryEntries } from '@/lib/read-memory';
import { readSettings } from '@/lib/read-settings';
import { readSkills } from '@/lib/read-skills';
import { StatCard } from '@/components/stat-card';

export default function OverviewPage() {
    const agents = readAgents();
    const mcps = readMcps();
    const memory = readMemoryEntries();
    const skills = readSkills();
    const { main, local } = readSettings();

    const mainRules = main.permissions?.allow ?? [];
    const localRules = local.permissions?.allow ?? [];
    const totalRules = mainRules.length + localRules.length;
    const defaultMode = main.permissions?.defaultMode ?? 'ask';
    const outputStyle = local.outputStyle ?? 'default';

    return (
        <div>
            <div className="mb-8">
                <h1 className="text-2xl font-semibold text-zinc-100">Overview</h1>
                <p className="mt-1 text-sm text-zinc-500">
                    Your Claude Code configuration at a glance.
                </p>
            </div>

            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
                <StatCard label="Agents" value={agents.length} accent />
                <StatCard label="MCP Servers" value={mcps.length} />
                <StatCard
                    label="Allow Rules"
                    value={totalRules}
                    sub={`${mainRules.length} global · ${localRules.length} local`}
                />
                <StatCard label="Memory Entries" value={memory.length} />
                <StatCard label="Skills" value={skills.length} />
            </div>

            <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
                <section className="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
                    <h2 className="mb-4 text-sm font-medium text-zinc-300">Settings</h2>
                    <dl className="space-y-2 text-sm">
                        <div className="flex justify-between">
                            <dt className="text-zinc-500">Default mode</dt>
                            <dd className="font-mono text-zinc-200">{defaultMode}</dd>
                        </div>
                        <div className="flex justify-between">
                            <dt className="text-zinc-500">Output style</dt>
                            <dd className="font-mono text-zinc-200">{outputStyle}</dd>
                        </div>
                        <div className="flex justify-between">
                            <dt className="text-zinc-500">Language</dt>
                            <dd className="font-mono text-zinc-200">
                                {main.language ?? 'default'}
                            </dd>
                        </div>
                    </dl>
                </section>

                <section className="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
                    <h2 className="mb-4 text-sm font-medium text-zinc-300">
                        Additional Directories
                    </h2>
                    {(main.permissions?.additionalDirectories ?? []).length === 0 ? (
                        <p className="text-sm text-zinc-600">None configured.</p>
                    ) : (
                        <ul className="space-y-1">
                            {(main.permissions?.additionalDirectories ?? []).map(dir => (
                                <li
                                    key={dir}
                                    className="truncate font-mono text-xs text-zinc-400"
                                >
                                    {dir}
                                </li>
                            ))}
                        </ul>
                    )}
                </section>
            </div>
        </div>
    );
}