"use client";

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/context/AuthContext';
import '@/styles/Auth.css';

export default function AdminPage() {
    const { user, loading } = useAuth();
    const router = useRouter();
    const [isAuthorized, setIsAuthorized] = useState(false);

    useEffect(() => {
        if (!loading) {
            if (!user || user.role !== 'admin') {
                router.push('/login');
            } else {
                setIsAuthorized(true);
            }
        }
    }, [user, loading, router]);

    if (loading || !isAuthorized) {
        return (
            <div className="auth-page-container flex items-center justify-center min-h-screen">
                <div className="text-xl font-bold">Laddar...</div>
            </div>
        );
    }

    return (
        <div className="auth-page-container" style={{ paddingTop: '8rem' }}>
            <div className="profile-card" style={{ width: '100%', maxWidth: '800px' }}>
                <div className="flex justify-between items-center mb-10 border-b border-gray-100 pb-8">
                    <h2 className="auth-title" style={{ textAlign: 'left', marginBottom: 0 }}>Admin Dashboard</h2>
                    <Link href="/me" className="auth-button secondary" style={{ width: 'auto', padding: '0.8rem 1.5rem', fontSize: '0.75rem', minHeight: 'auto' }}>
                        TILLBAKA
                    </Link>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <Link href="/admin/products" className="admin-nav-card text-center">
                        <h4 className="font-black text-xl mb-4 uppercase">Produkter</h4>
                        <p className="text-sm leading-relaxed">Hantera butikens sortiment</p>
                    </Link>
                    <Link href="/admin/categories" className="admin-nav-card text-center">
                        <h4 className="font-black text-xl mb-4 uppercase">Kategorier</h4>
                        <p className="text-sm leading-relaxed">Hantera produktkategorier</p>
                    </Link>
                </div>
            </div>
        </div>
    );
}