import { Link } from '@inertiajs/react';
import { ArrowRight, Check, X } from 'lucide-react';

import { InstallLayout } from '@/layouts/InstallLayout';
import { Button } from '@/components/ui/button';

interface Props {
    permissions: Record<string, boolean>;
}

export default function InstallPermissions({ permissions }: Props) {
    const allPass = Object.values(permissions).every(Boolean);

    return (
        <InstallLayout
            title="File system permissions"
            description="Arcade needs write access to a handful of directories at runtime."
            currentStep={3}
        >
            <ul className="divide-y rounded-md border">
                {Object.entries(permissions).map(([path, ok]) => (
                    <li
                        key={path}
                        className="flex items-center justify-between px-4 py-2.5 text-sm"
                    >
                        <code className="font-mono text-xs">{path}</code>
                        {ok ? (
                            <Check className="size-4 text-emerald-500" aria-label="Writable" />
                        ) : (
                            <X className="size-4 text-destructive" aria-label="Not writable" />
                        )}
                    </li>
                ))}
            </ul>

            {!allPass && (
                <p className="text-xs text-muted-foreground">
                    Run chmod -R ug+rw storage bootstrap/cache .env on the server, then refresh this page.
                </p>
            )}

            <div className="flex justify-end">
                <Button asChild disabled={!allPass}>
                    <Link href="/install/database">
                        Continue
                        <ArrowRight className="ml-2 size-4" />
                    </Link>
                </Button>
            </div>
        </InstallLayout>
    );
}