Auth.jsx

import { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import api from '../utils/api';
import toast from 'react-hot-toast';
import { Shield, X, AlertCircle, Monitor, LogOut, Key, ExternalLink } from 'lucide-react';
import { useAuth } from '../context/AuthContext';

import AuthHeader from '../components/Auth/AuthHeader';
import UserTable from '../components/Auth/UserTable';
import Pagination from '../components/Database/Pagination';
import SectionHeader from '../components/Dashboard/SectionHeader';
import AddRecordDrawer from '../components/AddRecordDrawer';
import ConfirmationModal from './ConfirmationModal';
import { PUBLIC_API_URL } from '../config';

export default function Auth() {
    const unwrapApiResponse = (payload) => {
        if (!payload || typeof payload !== 'object') {
            return { ok: true, data: payload, message: '' };
        }

        if (Object.prototype.hasOwnProperty.call(payload, 'success')) {
            return {
                ok: payload.success !== false,
                data: payload.data ?? payload.project ?? payload,
                message: payload.message || payload.error || ''
            };
        }

        return { ok: true, data: payload, message: '' };
    };

    const normalizeUsersResponse = (payload) => {
        if (Array.isArray(payload)) return payload;
        if (Array.isArray(payload?.items)) return payload.items;
        if (Array.isArray(payload?.data?.items)) return payload.data.items;
        return [];
    };

    const { projectId } = useParams();
    const navigate = useNavigate();
    const { user } = useAuth();

    const [users, setUsers] = useState([]);
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(50);
    const [totalRecords, setTotalRecords] = useState(0);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [project, setProject] = useState(null);
    const [isEnabling, setIsEnabling] = useState(false);
    const [isTogglingSignup, setIsTogglingSignup] = useState(false);
    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
    const [isEditUsersSchemaModalOpen, setIsEditUsersSchemaModalOpen] = useState(false);
    const [editingUser, setEditingUser] = useState(null); // user being edited
    const latestUsersRequestId = useRef(0);

    const [isSessionsModalOpen, setIsSessionsModalOpen] = useState(false);
    const [sessionsTargetUser, setSessionsTargetUser] = useState(null);
    const [userSessions, setUserSessions] = useState([]);
    const [loadingSessions, setLoadingSessions] = useState(false);

    // Reset password modal state
    const [resetPasswordUser, setResetPasswordUser] = useState(null);
    const [newPassword, setNewPassword] = useState('');
    const [isResetLoading, setIsResetLoading] = useState(false);

    const myMember = project?.members?.find(m => {
        const memberId = typeof m.user === 'object' ? m.user?._id : m.user;
        return memberId?.toString() === user?._id?.toString() || m.email === user?.email;
    });
    const myRole = project?.owner?.toString() === user?._id?.toString() ? 'owner' : (myMember?.role || 'viewer');
    const isViewer = myRole === 'viewer';

    // Flow Logic
    const usersCollection = project?.collections?.find(c => c.name === 'users');
    const hasUserCollection = !!usersCollection;
    
    const normalizedUsersFields = (usersCollection?.model || []).map((f) => ({
        key: String(f?.key || '').replace(/\uFEFF/g, '').trim().toLowerCase(),
        type: String(f?.type || '').trim().toLowerCase(),
        required: f?.required === true
    }));
    const hasHiddenPasswordField = !normalizedUsersFields.some((f) => f.key === 'password');
    const hasRequiredUsersSchema =
        normalizedUsersFields.some((f) => f.key === 'email' && f.type === 'string' && f.required) &&
        (hasHiddenPasswordField || normalizedUsersFields.some((f) => f.key === 'password' && f.type === 'string' && f.required));

    useEffect(() => {
        let isMounted = true;
        const fetchData = async () => {
            try {
                const projRes = await api.get(`/api/projects/${projectId}`);
                const projectResult = unwrapApiResponse(projRes.data);

                if (!projectResult.ok) {
                    throw new Error(projectResult.message || 'Failed to load auth details');
                }

                if (isMounted) {
                    setProject(projectResult.data);
                    if (projectResult.data?.isAuthEnabled) {
                        const requestId = ++latestUsersRequestId.current;
                        const usersRes = await api.get(
                            `/api/projects/${projectId}/admin/users?page=${page}&limit=${limit}`
                        );

                        const usersResult = unwrapApiResponse(usersRes.data);

                        if (!usersResult.ok) {
                            throw new Error(usersResult.message || 'Failed to load auth users');
                        }

                        if (!isMounted || requestId !== latestUsersRequestId.current) return;
                        setUsers(normalizeUsersResponse(usersResult.data));
                        setTotalRecords(
                            usersResult.data?.data?.total ||
                            usersResult.data?.total ||
                            normalizeUsersResponse(usersResult.data).length
                        );
                    }
                }
            } catch (err) {
                toast.error(err?.response?.data?.message || err?.response?.data?.error || err.message || "Failed to load auth details");
            }
            finally { if (isMounted) setLoading(false); }
        };
        fetchData();
        return () => { isMounted = false; };
    }, [projectId, page, limit]);

    const handleEnableAuth = async () => {
        if (!hasUserCollection) return toast.error("Please create a 'users' collection first.");
        if (!hasRequiredUsersSchema) return toast.error("Your 'users' collection needs email and password fields.");

        setIsEnabling(true);
        try {
            const res = await api.patch(`/api/projects/${projectId}/auth/toggle`, { enable: true });
            setProject(res.data.project);
            toast.success("Authentication Enabled!");
        } catch (err) { 
            toast.error(err.response?.data?.message || "Failed to enable auth"); 
        } finally { setIsEnabling(false); }
    };

    const handleTogglePublicSignup = async (enable) => {
        if (isTogglingSignup || isViewer) return;
        setIsTogglingSignup(true);
        try {
            const res = await api.patch(`/api/projects/${projectId}/auth/public-signup`, { enable });
            setProject(res.data?.data?.project || res.data?.project);
            toast.success(`Public signup ${enable ? 'enabled' : 'disabled'}`);
        } catch (err) {
            toast.error(err.response?.data?.message || 'Failed to toggle public signup');
        } finally {
            setIsTogglingSignup(false);
        }
    };

    const goToUsersSchemaPreset = () => {
        navigate(`/project/${projectId}/create-collection?name=users&preset=auth-users`);
    };

    const handleOpenSessions = async (user) => {
        setSessionsTargetUser(user);
        setIsSessionsModalOpen(true);
        setLoadingSessions(true);
        try {
            const res = await api.get(`/api/projects/${projectId}/admin/users/${user._id}/sessions`);
            setUserSessions(res.data?.data?.sessions || res.data?.sessions || []);
        } catch { toast.error("Failed to load sessions"); }
        finally { setLoadingSessions(false); }
    };

    const handleEditUser = (user) => {
        setEditingUser(user);
        setIsAddModalOpen(true);
    };

    const handleDeleteUser = async (userId) => {
        if (!confirm('Delete this user? This cannot be undone.')) return;
        try {
            await api.delete(`/api/projects/${projectId}/admin/users/${userId}`);
            setUsers(prevUsers => {
                const nextUsers = normalizeUsersResponse(prevUsers).filter(
                    u => u._id !== userId
                );

                if (nextUsers.length === 0) {
                    setPage(prevPage => (prevPage > 1 ? prevPage - 1 : prevPage));
                }

                return nextUsers;
            });

            setTotalRecords(prev => Math.max(prev - 1, 0));
            toast.success('User deleted');
        } catch (err) {
            toast.error(err.response?.data?.message || err.response?.data?.error || 'Failed to delete user');
        }
    };

    const handleResetPassword = async () => {
        if (!newPassword || newPassword.length < 6) return toast.error('Password must be at least 6 characters');
        setIsResetLoading(true);
        try {
            await api.patch(`/api/projects/${projectId}/admin/users/${resetPasswordUser._id}/password`, { newPassword });
            toast.success('Password updated successfully');
            setResetPasswordUser(null);
            setNewPassword('');
        } catch (err) {
            toast.error(err.response?.data?.message || err.response?.data?.error || 'Failed to reset password');
        } finally {
            setIsResetLoading(false);
        }
    };

    const filteredUsers = users.filter(u => u.email?.toLowerCase().includes(searchTerm.toLowerCase()));

    if (loading) return (
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', paddingBottom: '4rem' }}>
            {/* Header Skeleton */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem' }}>
                <div>
                    <div className="skeleton" style={{ width: '180px', height: '24px', borderRadius: '4px' }} />
                    <div className="skeleton" style={{ width: '250px', height: '14px', marginTop: '6px', borderRadius: '4px' }} />
                </div>
                <div style={{ display: 'flex', gap: '10px' }}>
                    <div className="skeleton" style={{ width: '200px', height: '32px', borderRadius: '6px' }} />
                    <div className="skeleton" style={{ width: '120px', height: '32px', borderRadius: '6px' }} />
                </div>
            </div>

            {/* Main Content Layout Skeleton */}
            <div className="card" style={{ padding: '0', overflow: 'hidden' }}>
                <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--color-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div className="skeleton" style={{ width: '100px', height: '16px', borderRadius: '4px' }} />
                    <div className="skeleton" style={{ width: '120px', height: '32px', borderRadius: '6px' }} />
                </div>
                <div style={{ padding: '24px' }}>
                    {/* Table skeleton */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                        <div className="skeleton" style={{ width: '100%', height: '40px', borderRadius: '4px' }} />
                        {[1, 2, 3, 4].map(i => (
                            <div key={i} className="skeleton" style={{ width: '100%', height: '32px', borderRadius: '4px' }} />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );

    return (
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', paddingBottom: '4rem' }}>
            <AuthHeader 
                searchTerm={searchTerm}
                setSearchTerm={setSearchTerm}
                isAuthEnabled={project?.isAuthEnabled}
                hasUserCollection={hasUserCollection}
                onConfigureFields={() => navigate(`/project/${projectId}/database?collection=users`)}
                onAddUser={isViewer ? null : () => setIsAddModalOpen(true)}
            />

            {/* Add / Edit User Drawer */}
            <AddRecordDrawer
                key={editingUser?._id || 'new'}
                isOpen={isAddModalOpen}
                onClose={() => { setIsAddModalOpen(false); setEditingUser(null); }}
                onSubmit={async (userData) => {
                    try {
                        if (editingUser) {
                            // Edit: use admin PUT, backend strips password from updateAdminUser
                            await api.put(`/api/projects/${projectId}/admin/users/${editingUser._id}`, userData);
                            toast.success('User updated successfully');
                            setUsers(prev => normalizeUsersResponse(prev).map(u => u._id === editingUser._id ? { ...u, ...userData, password: undefined } : u));
                        } else {
                            await api.post(`/api/projects/${projectId}/admin/users`, userData);
                            toast.success('User created successfully');
                            const requestId = ++latestUsersRequestId.current;
                            const usersRes = await api.get(
                                `/api/projects/${projectId}/admin/users?page=${page}&limit=${limit}`
                            );

                            if (requestId !== latestUsersRequestId.current) return;
                            setUsers(normalizeUsersResponse(usersRes.data));
                            setTotalRecords(
                                usersRes.data?.data?.total ||
                                usersRes.data?.total ||
                                normalizeUsersResponse(usersRes.data).length
                            );
                        }
                        setIsAddModalOpen(false);
                        setEditingUser(null);
                    } catch (err) {
                        toast.error(err.response?.data?.message || err.response?.data?.error || 'Failed to save user');
                    }
                }}
                fields={[
                    ...(usersCollection?.model || []),
                    // Always ensure password is present for creation; hidden for edit
                    ...(!editingUser ? [{ key: 'password', type: 'String', required: true }] : [])
                ].filter((f, i, self) => i === self.findIndex(t => t.key === f.key))}
                initialData={editingUser}
            />

            {!project?.isAuthEnabled ? (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '600px', margin: '0 auto' }}>
                    {/* Schema Warnings */}
                    {!hasUserCollection ? (
                        <div className="glass-card" style={{ padding: '1rem 1.25rem', border: '1px solid rgba(255, 189, 46, 0.2)', background: 'rgba(255, 189, 46, 0.05)', borderRadius: '8px' }}>
                            <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                                <AlertCircle color="#FFBD2E" size={18} />
                                <div style={{ flex: 1 }}>
                                    <h4 style={{ color: '#FFBD2E', fontSize: '0.85rem', fontWeight: 600 }}>Users Collection Required</h4>
                                    <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: '8px' }}>You must create a "users" collection before enabling Auth.</p>
                                    <button className="btn btn-primary" style={{ height: '28px', fontSize: '0.7rem', padding: '0 10px' }} onClick={goToUsersSchemaPreset}>Create Users Collection</button>
                                </div>
                            </div>
                        </div>
                    ) : !hasRequiredUsersSchema ? (
                        <div className="glass-card" style={{ padding: '1rem 1.25rem', border: '1px solid rgba(255, 189, 46, 0.2)', background: 'rgba(255, 189, 46, 0.05)', borderRadius: '8px' }}>
                            <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                                <AlertCircle color="#FFBD2E" size={18} />
                                <div style={{ flex: 1 }}>
                                    <h4 style={{ color: '#FFBD2E', fontSize: '0.85rem', fontWeight: 600 }}>Incomplete Schema</h4>
                                    <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginBottom: '8px' }}>Missing required email or password fields in your users collection.</p>
                                    <button className="btn btn-primary" style={{ height: '28px', fontSize: '0.7rem', padding: '0 10px' }} onClick={goToUsersSchemaPreset}>Fix Users Schema</button>
                                </div>
                            </div>
                        </div>
                    ) : null}

                    {/* Main Enable Card */}
                    <div className="glass-card" style={{ padding: '4rem 2rem', textAlign: 'center', borderRadius: '12px', borderStyle: 'dashed' }}>
                        <h2 style={{ fontSize: '1.5rem', marginBottom: '0.5rem', fontWeight: 700 }}>Authentication</h2>
                        <p style={{ color: 'var(--color-text-muted)', fontSize: '0.9rem', marginBottom: '2rem' }}>
                            Manage users and login providers.
                        </p>
                        <button 
                            className="btn btn-primary" 
                            onClick={handleEnableAuth} 
                            disabled={isEnabling || !hasRequiredUsersSchema}
                            style={{ height: '40px', padding: '0 24px', fontSize: '0.9rem', fontWeight: 600, opacity: !hasRequiredUsersSchema ? 0.5 : 1 }}
                        >
                            {isEnabling ? 'Enabling...' : 'Configure Authentication'}
                        </button>
                    </div>
                </div>
            ) : (
                <div className="pro-grid">
                    <div>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.625rem' }}>
                            <div style={{ flex: 1 }}><SectionHeader title="User Management" /></div>
                            {!isViewer && (
                                <button 
                                    className="btn btn-secondary" 
                                    style={{ height: '28px', fontSize: '0.7rem', padding: '0 10px', marginLeft: '10px' }} 
                                    onClick={() => setIsEditUsersSchemaModalOpen(true)}
                                >
                                    Edit Users Schema
                                </button>
                            )}
                        </div>
                        <div className="glass-card" style={{ borderRadius: '12px', overflow: 'hidden' }}>
                            <UserTable 
                                users={filteredUsers}
                                isViewer={isViewer}
                                onOpenSessions={handleOpenSessions}
                                onEdit={handleEditUser}
                                onResetPassword={(u) => { setResetPasswordUser(u); setNewPassword(''); }}
                                onDelete={handleDeleteUser}
                            />
                            <Pagination
                                total={totalRecords}
                                page={page}
                                limit={limit}
                                onPageChange={(p) => setPage(p)}
                                onLimitChange={(newLimit) => {
                                    setLimit(newLimit);
                                    setPage(1);
                                }}
                            />
                        </div>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                        <SectionHeader title="Settings" />
                        
                        <div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <div>
                                <h4 style={{ fontSize: '0.85rem', fontWeight: 600, marginBottom: '4px' }}>Allow Public Signups</h4>
                                <p style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>
                                    When disabled, new users cannot sign up via API or OAuth. Only existing users can log in.
                                </p>
                            </div>
                            <label className="switch">
                                <input 
                                    type="checkbox" 
                                    checked={project?.allowPublicSignup !== false} 
                                    onChange={(e) => handleTogglePublicSignup(e.target.checked)} 
                                    disabled={isTogglingSignup || isViewer}
                                />
                                <span className={`slider round ${(isTogglingSignup || isViewer) ? 'disabled' : ''}`}></span>
                            </label>
                        </div>

                        <div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px', marginBottom: '1.25rem' }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
                                <div>
                                    <h4 style={{ fontSize: '0.88rem', fontWeight: 600, margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
                                        <Shield size={16} color="var(--color-primary)" /> OAuth2 & Social Providers
                                    </h4>
                                    <p style={{ margin: '4px 0 0 0', color: 'var(--color-text-muted)', fontSize: '0.75rem', lineHeight: '1.5' }}>
                                        Configure GitHub, Google, and third-party login integrations in <strong>Settings → Integrations & Services</strong>.
                                    </p>
                                </div>
                                <button
                                    className="btn btn-secondary"
                                    onClick={() => navigate(`/project/${projectId}/settings?tab=integrations`)}
                                    style={{ height: '32px', fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' }}
                                >
                                    <ExternalLink size={13} />
                                    Integrations
                                </button>
                            </div>
                        </div>
                        
                        <div className="glass-card" style={{ padding: '1.25rem', borderRadius: '12px' }}>
                            <h4 style={{ fontSize: '0.85rem', fontWeight: 600, marginBottom: '8px' }}>Security Policy</h4>
                            <p style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)', lineHeight: '1.5' }}>
                                JWT tokens are signed using your secret key. If you suspect a breach, roll your key in Project Settings to force all users to log in again.
                            </p>
                        </div>
                    </div>
                </div>
            )}

            {/* Sessions Modal */}
            {isSessionsModalOpen && (
                <div className="modal-overlay" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2000 }}>
                    <div className="glass-card" style={{ width: '450px', padding: '1.25rem', borderRadius: '12px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1.25rem' }}>
                            <h3 style={{ fontSize: '0.9rem', fontWeight: 600 }}>Active Sessions — {sessionsTargetUser?.email}</h3>
                            <X size={16} style={{ cursor: 'pointer' }} onClick={() => setIsSessionsModalOpen(false)} />
                        </div>
                        <div className="custom-scrollbar" style={{ maxHeight: '350px', overflowY: 'auto' }}>
                            {loadingSessions ? <div className="spinner" /> : userSessions.length === 0 ? (
                                <p style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>No active sessions found.</p>
                            ) : (
                                userSessions.map(s => (
                                    <div key={s.tokenId} style={{ padding: '8px 12px', border: '1px solid var(--color-border)', borderRadius: '6px', marginBottom: '6px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <div style={{ fontSize: '0.7rem' }}>
                                            <div style={{ color: 'var(--color-text-main)', fontWeight: 600 }}>{s.ip || 'Unknown IP'}</div>
                                            <div style={{ color: 'var(--color-text-muted)', fontSize: '0.65rem' }}>{new Date(s.lastUsedAt).toLocaleString()}</div>
                                        </div>
                                        <button
                                            className="btn btn-ghost"
                                            style={{ color: '#ef4444', padding: '4px' }}
                                            onClick={async () => {
                                                try {
                                                    await api.delete(`/api/projects/${projectId}/admin/users/${sessionsTargetUser._id}/sessions/${s.tokenId}`);
                                                    setUserSessions(prev => prev.filter(x => x.tokenId !== s.tokenId));
                                                    toast.success('Session revoked');
                                                } catch { toast.error('Failed to revoke session'); }
                                            }}
                                        >
                                            <LogOut size={12} />
                                        </button>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            )}

            {/* Reset Password Modal */}
            {resetPasswordUser && (
                <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2000 }}>
                    <div className="glass-card" style={{ width: '380px', padding: '1.25rem', borderRadius: '12px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '7px' }}>
                                <Key size={14} color="var(--color-primary)" />
                                <h3 style={{ fontSize: '0.9rem', fontWeight: 600 }}>Reset Password</h3>
                            </div>
                            <X size={16} style={{ cursor: 'pointer' }} onClick={() => setResetPasswordUser(null)} />
                        </div>
                        <p style={{ fontSize: '0.72rem', color: 'var(--color-text-muted)', marginBottom: '1rem' }}>Set a new password for <strong style={{ color: 'var(--color-text-main)' }}>{resetPasswordUser.email}</strong>.</p>
                        <input
                            type="password"
                            className="input-field"
                            placeholder="New password (min 6 chars)"
                            value={newPassword}
                            onChange={e => setNewPassword(e.target.value)}
                            style={{ width: '100%', padding: '8px 10px', marginBottom: '1rem', fontSize: '0.8rem' }}
                            autoFocus
                        />
                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                            <button className="btn btn-secondary" onClick={() => setResetPasswordUser(null)} style={{ height: '30px', fontSize: '0.75rem' }}>Cancel</button>
                            <button className="btn btn-primary" onClick={handleResetPassword} disabled={isResetLoading} style={{ height: '30px', fontSize: '0.75rem' }}>
                                {isResetLoading ? 'Saving...' : 'Update Password'}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {isEditUsersSchemaModalOpen && (
                <ConfirmationModal
                    open={isEditUsersSchemaModalOpen}
                    title="Warning: Editing Users Schema"
                    message="Editing the users collection schema may cause unwanted changes or break your production app. Are you sure you want to proceed?"
                    confirmLabel="Proceed"
                    confirmVariant="primary"
                    onConfirm={() => {
                        setIsEditUsersSchemaModalOpen(false);
                        navigate(`/project/${projectId}/edit-collection/users`);
                    }}
                    onCancel={() => setIsEditUsersSchemaModalOpen(false)}
                />
            )}

            <style>{`
                .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.1); border-left-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; }
                @keyframes spin { 100% { transform: rotate(360deg); } }
            `}</style>
        </div>
    );
}