import { groupPermissions } from '@/lib/group-permissions';
import { readSettings } from '@/lib/read-settings';
import { Badge } from '@/components/badge';

function RuleList({ rules }: { rules: string[] }) {
    if (rules.length === 0) {
        return <p className="text-sm text-zinc-600">None.</p>;
    }
    return (
        <ul className="space-y-1">
            {rules.map(rule => (
                <li key={rule} className="font-mono text-xs text-zinc-400 break-all">
                    {rule}
                </li>
            ))}
        </ul>
    );
}

function GroupedRules({ rules }: { rules: string[] }) {
    const groups = groupPermissions(rules);

    if (groups.length === 0) {
        return <RuleList rules={rules} />;
    }

    return (
        <div className="space-y-5">
            {groups.map(group => (
                <div key={group.label}>
                    <div className="mb-2 flex items-center gap-2">
                        <Badge label={group.label} color={group.color} />
                        <span className="text-xs text-zinc-600">
                            {group.rules.length}
                        </span>
                    </div>
                    <RuleList rules={group.rules} />
                </div>
            ))}
        </div>
    );
}

export default function PermissionsPage() {
    const { main, local } = readSettings();

    const mainAllow = main.permissions?.allow ?? [];
    const localAllow = local.permissions?.allow ?? [];
    const defaultMode = main.permissions?.defaultMode ?? 'ask';

    return (
        <div>
            <div className="mb-8 flex items-center gap-4">
                <div>
                    <h1 className="text-2xl font-semibold text-zinc-100">Permissions</h1>
                    <p className="mt-1 text-sm text-zinc-500">
                        {mainAllow.length + localAllow.length} allow rules across both settings files.
                    </p>
                </div>
                <div className="ml-auto rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm">
                    <span className="text-zinc-500">Default mode </span>
                    <span className="font-mono font-medium text-violet-400">
                        {defaultMode}
                    </span>
                </div>
            </div>

            <div className="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 flex items-center gap-2 text-sm font-medium text-zinc-300">
                        settings.json
                        <span className="text-xs text-zinc-600">{mainAllow.length} rules</span>
                    </h2>
                    <GroupedRules rules={mainAllow} />
                </section>

                <section className="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
                    <h2 className="mb-4 flex items-center gap-2 text-sm font-medium text-zinc-300">
                        settings.local.json
                        <span className="text-xs text-zinc-600">{localAllow.length} rules</span>
                    </h2>
                    <GroupedRules rules={localAllow} />
                </section>
            </div>
        </div>
    );
}