import { readHooks } from '@/lib/read-hooks';

const EVENT_DESCRIPTIONS: Record<string, string> = {
    PreToolUse: 'Fires before any tool call. Exit code 2 blocks execution and returns stderr to Claude.',
    PostToolUse: 'Fires after a tool call completes.',
    Notification: 'Fires when Claude sends a notification (e.g. waiting for input).',
    PermissionRequest: 'Fires when a permission prompt is triggered. Can block indefinitely with a long timeout.',
    PreCompact: 'Fires before context compaction (auto or manual).',
    SessionStart: 'Fires when a session begins.',
    SessionEnd: 'Fires when a session ends.',
    Stop: 'Fires when Claude finishes responding.',
    SubagentStop: 'Fires when a subagent finishes.',
    UserPromptSubmit: 'Fires when the user submits a message.',
};

export default function HooksPage() {
    const hooks = readHooks();
    const events = Object.entries(hooks);

    return (
        <div>
            <div className="mb-8">
                <h1 className="text-2xl font-semibold text-zinc-100">Hooks</h1>
                <p className="mt-1 text-sm text-zinc-500">
                    Shell commands that fire on Claude Code lifecycle events.
                </p>
            </div>

            {events.length === 0 ? (
                <div className="rounded-lg border border-zinc-800 bg-zinc-900 p-6">
                    <p className="mb-4 text-sm font-medium text-zinc-300">No hooks configured.</p>
                    <p className="mb-3 text-sm text-zinc-500">
                        Hooks let you run shell commands at key points in Claude&apos;s lifecycle. Some ideas:
                    </p>
                    <ul className="space-y-2 text-sm text-zinc-500">
                        <li>
                            <span className="font-mono text-zinc-400">PreToolUse</span> — log every tool call, or block disallowed commands
                        </li>
                        <li>
                            <span className="font-mono text-zinc-400">PostToolUse</span> — send desktop notifications when a long task completes
                        </li>
                        <li>
                            <span className="font-mono text-zinc-400">SessionStart / SessionEnd</span> — track session durations or log context
                        </li>
                        <li>
                            <span className="font-mono text-zinc-400">PermissionRequest</span> — route approvals to an external system (Slack, etc.)
                        </li>
                    </ul>
                    <p className="mt-4 text-xs text-zinc-600">
                        Add hooks under the <span className="font-mono">hooks</span> key in{' '}
                        <span className="font-mono">~/.claude/settings.json</span>
                    </p>
                </div>
            ) : (
                <div className="space-y-4">
                    {events.map(([event, entries]) => (
                        <section
                            key={event}
                            className="rounded-lg border border-zinc-800 bg-zinc-900 p-5"
                        >
                            <div className="mb-3">
                                <h2 className="font-mono text-sm font-semibold text-zinc-100">
                                    {event}
                                </h2>
                                {EVENT_DESCRIPTIONS[event] && (
                                    <p className="mt-0.5 text-xs text-zinc-500">
                                        {EVENT_DESCRIPTIONS[event]}
                                    </p>
                                )}
                            </div>
                            <div className="space-y-3">
                                {entries.map((entry, i) => (
                                    <div key={i} className="rounded border border-zinc-700 bg-zinc-950 p-3">
                                        {entry.matcher && (
                                            <p className="mb-2 text-xs text-zinc-500">
                                                matcher:{' '}
                                                <span className="font-mono text-zinc-400">
                                                    {entry.matcher}
                                                </span>
                                            </p>
                                        )}
                                        <div className="space-y-1">
                                            {entry.hooks.map((hook, j) => (
                                                <div key={j} className="flex items-start gap-2">
                                                    <code className="flex-1 break-all font-mono text-xs text-zinc-300">
                                                        {hook.command}
                                                    </code>
                                                    {hook.timeout && (
                                                        <span className="shrink-0 rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-xs text-zinc-400">
                                                            {hook.timeout}s
                                                        </span>
                                                    )}
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </section>
                    ))}
                </div>
            )}
        </div>
    );
}