'use client'

import { WebVitalsCard } from "@/components/WebVitalsCard"
import { useWebVitals } from "@/hooks/useWebVitals"

const AdminPage = () => {
    const metrics = useWebVitals()

    const vitalsConfig = [
        {
            title: 'Time to First Byte (TTFB)',
            value: metrics.TTFB,
            unit: 'ms',
            description: 'Time between request and first byte of response',
            thresholds: { good: 200, needsImprovement: 500 }
        },
        {
            title: 'First Contentful Paint (FCP)',
            value: metrics.FCP,
            unit: 'ms',
            description: 'Time until first content is rendered',
            thresholds: { good: 1800, needsImprovement: 3000 }
        },
        {
            title: 'Largest Contentful Paint (LCP)',
            value: metrics.LCP,
            unit: 'ms',
            description: 'Time until largest content element is rendered',
            thresholds: { good: 2500, needsImprovement: 4000 }
        },
        {
            title: 'First Input Delay (FID)',
            value: metrics.FID,
            unit: 'ms',
            description: 'Time from first user interaction to browser response',
            thresholds: { good: 100, needsImprovement: 300 }
        },
        {
            title: 'Cumulative Layout Shift (CLS)',
            value: metrics.CLS,
            unit: '',
            description: 'Measures visual stability (lower is better)',
            thresholds: { good: 0.1, needsImprovement: 0.25 }
        },
        {
            title: 'Interaction to Next Paint (INP)',
            value: metrics.INP,
            unit: 'ms',
            description: 'Measures responsiveness to user interactions',
            thresholds: { good: 200, needsImprovement: 500 }
        }
    ]

    return (
        <div className="min-h-screen bg-gray-50 py-8">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="mb-8">
                    <h1 className="text-3xl font-bold text-gray-900">Web Vitals Dashboard</h1>
                    <p className="mt-2 text-gray-600">
                        Real-time Core Web Vitals metrics for your Next.js application
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {vitalsConfig.map((vital) => (
                        <WebVitalsCard
                            key={vital.title}
                            title={vital.title}
                            value={vital.value}
                            unit={vital.unit}
                            description={vital.description}
                            thresholds={vital.thresholds}
                        />
                    ))}
                </div>

                <div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <h2 className="text-lg font-semibold text-blue-900 mb-2">About Core Web Vitals</h2>
                    <p className="text-sm text-blue-800">
                        Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects
                        of user experience. They measure dimensions of web usability such as load time,
                        interactivity, and the stability of content as it loads.
                    </p>
                </div>
            </div>
        </div>
    )

}

export default AdminPage