import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, signOut } from 'firebase/auth'; // Added signOut
import { getFirestore, doc, getDoc, addDoc, setDoc, updateDoc, deleteDoc, onSnapshot, collection, query, where } from 'firebase/firestore';

// Global variables provided by the Canvas environment
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

function App() {
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [products, setProducts] = useState([]);
    const [currentView, setCurrentView] = useState('list'); // 'list', 'add', 'detail', 'edit', 'login'
    const [selectedProduct, setSelectedProduct] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [isAdmin, setIsAdmin] = useState(false); // New state for admin status

    // Initialize Firebase and set up authentication listener
    useEffect(() => {
        try {
            const app = initializeApp(firebaseConfig);
            const firestoreDb = getFirestore(app);
            const firebaseAuth = getAuth(app);

            setDb(firestoreDb);
            setAuth(firebaseAuth);

            const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
                if (user) {
                    setUserId(user.uid);
                    console.log("Authenticated user ID:", user.uid);
                    // In a real app, you'd check user.uid against a list of admin UIDs
                    // or check custom claims from a token. For this demo, we'll manage
                    // admin status via the LoginScreen.
                } else {
                    console.log("No user signed in. Attempting anonymous sign-in.");
                    try {
                        if (initialAuthToken) {
                            await signInWithCustomToken(firebaseAuth, initialAuthToken);
                        } else {
                            await signInAnonymously(firebaseAuth);
                        }
                    } catch (authError) {
                        console.error("Firebase authentication error:", authError);
                        setError("Kimlik doğrulama hatası: " + authError.message);
                    }
                }
                setLoading(false); // Authentication state is ready
            });

            return () => unsubscribe(); // Cleanup auth listener on unmount
        } catch (initError) {
            console.error("Firebase initialization error:", initError);
            setError("Firebase başlatma hatası: " + initError.message);
            setLoading(false);
        }
    }, []);

    // Fetch products when db and userId are available
    useEffect(() => {
        if (db && userId) {
            const productsCollectionRef = collection(db, `artifacts/${appId}/users/${userId}/products`);
            const unsubscribe = onSnapshot(productsCollectionRef,
                (snapshot) => {
                    const productList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                    setProducts(productList);
                    setError(null); // Clear any previous errors
                },
                (err) => {
                    console.error("Firestore snapshot error:", err);
                    setError("Ürünler yüklenirken hata oluştu: " + err.message);
                }
            );
            return () => unsubscribe(); // Cleanup snapshot listener
        }
    }, [db, userId]);

    const handleAddProduct = async (productData) => {
        if (!db || !userId) {
            setError("Veritabanı veya kullanıcı kimliği mevcut değil.");
            return;
        }
        if (!isAdmin) {
            setError("Ürün eklemek için yetkili olmanız gerekmektedir.");
            setCurrentView('login');
            return;
        }
        try {
            const productsCollectionRef = collection(db, `artifacts/${appId}/users/${userId}/products`);
            await addDoc(productsCollectionRef, productData);
            setCurrentView('list');
            setError(null);
        } catch (err) {
            console.error("Ürün eklenirken hata:", err);
            setError("Ürün eklenirken hata oluştu: " + err.message);
        }
    };

    const handleUpdateProduct = async (id, productData) => {
        if (!db || !userId) {
            setError("Veritabanı veya kullanıcı kimliği mevcut değil.");
            return;
        }
        if (!isAdmin) {
            setError("Ürün düzenlemek için yetkili olmanız gerekmektedir.");
            setCurrentView('login');
            return;
        }
        try {
            const productDocRef = doc(db, `artifacts/${appId}/users/${userId}/products`, id);
            await updateDoc(productDocRef, productData);
            setCurrentView('list');
            setError(null);
        } catch (err) {
            console.error("Ürün güncellenirken hata:", err);
            setError("Ürün güncellenirken hata oluştu: " + err.message);
        }
    };

    const handleDeleteProduct = async (id) => {
        if (!db || !userId) {
            setError("Veritabanı veya kullanıcı kimliği mevcut değil.");
            return;
        }
        if (!isAdmin) {
            setError("Ürün silmek için yetkili olmanız gerekmektedir.");
            setCurrentView('login');
            return;
        }
        // Instead of alert, use a custom modal or confirmation UI
        if (window.confirm("Bu ürünü silmek istediğinizden emin misiniz?")) { // Using window.confirm for simplicity, replace with custom UI
            try {
                const productDocRef = doc(db, `artifacts/${appId}/users/${userId}/products`, id);
                await deleteDoc(productDocRef);
                setCurrentView('list');
                setError(null);
            } catch (err) {
                console.error("Ürün silinirken hata:", err);
                setError("Ürün silinirken hata oluştu: " + err.message);
            }
        }
    };

    const handleAdminLoginSuccess = () => {
        setIsAdmin(true);
        setCurrentView('list'); // Redirect to list after successful login
        setError(null);
    };

    const handleLogout = async () => {
        setIsAdmin(false);
        // Optional: Sign out from Firebase if you want to clear the anonymous session too
        // try {
        //     if (auth) {
        //         await signOut(auth);
        //     }
        // } catch (err) {
        //     console.error("Logout error:", err);
        // }
        setCurrentView('list');
    };

    const ProductList = () => (
        <div className="p-4">
            <h2 className="text-3xl font-bold text-gray-800 mb-6 text-center">Ürün Listesi</h2>
            <div className="flex justify-between items-center mb-6">
                {isAdmin ? (
                    <div className="flex space-x-4">
                        <button
                            onClick={() => setCurrentView('add')}
                            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            Yeni Ürün Ekle
                        </button>
                        <button
                            onClick={handleLogout}
                            className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            Çıkış Yap (Yönetici)
                        </button>
                    </div>
                ) : (
                    <button
                        onClick={() => setCurrentView('login')}
                        className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                    >
                        Yönetici Girişi
                    </button>
                )}
                {userId && (
                    <div className="text-gray-600 text-sm">
                        Kullanıcı Kimliği: <span className="font-mono text-xs break-all">{userId}</span>
                    </div>
                )}
            </div>

            {products.length === 0 ? (
                <p className="text-center text-gray-600 text-lg">Henüz hiç ürün eklenmedi. İlk ürününüzü eklemek için {isAdmin ? 'yukarıdaki düğmeyi' : 'yönetici olarak giriş yapın'}!</p>
            ) : (
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    {products.map(product => (
                        <div key={product.id} className="bg-white rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
                            <img
                                src={product.imageUrl || `https://placehold.co/400x300/E0E0E0/333333?text=${encodeURIComponent(product.name || 'Ürün Resmi')}`}
                                alt={product.name || 'Ürün Resmi'}
                                className="w-full h-48 object-cover object-center"
                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/400x300/E0E0E0/333333?text=${encodeURIComponent(product.name || 'Ürün Resmi')}`; }}
                            />
                            <div className="p-6">
                                <h3 className="font-semibold text-xl text-gray-900 mb-2">{product.name}</h3>
                                <p className="text-gray-600 text-sm mb-4 line-clamp-2">{product.description}</p>
                                <div className="flex justify-between items-center">
                                    <button
                                        onClick={() => { setSelectedProduct(product); setCurrentView('detail'); }}
                                        className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md transition duration-300"
                                    >
                                        Detayları Gör
                                    </button>
                                    {isAdmin && (
                                        <button
                                            onClick={() => { setSelectedProduct(product); setCurrentView('edit'); }}
                                            className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md transition duration-300"
                                        >
                                            Düzenle
                                        </button>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );

    const ProductForm = ({ onSubmit, initialData = {} }) => {
        const [name, setName] = useState(initialData.name || '');
        const [description, setDescription] = useState(initialData.description || '');
        const [features, setFeatures] = useState(initialData.features ? initialData.features.join('\n') : '');
        const [benefits, setBenefits] = useState(initialData.benefits ? initialData.benefits.join('\n') : '');
        const [usage, setUsage] = useState(initialData.usage || '');
        const [imageUrl, setImageUrl] = useState(initialData.imageUrl || '');
        const [isGenerating, setIsGenerating] = useState(false); // State for AI generation loading
        const [aiError, setAiError] = useState(null); // State for AI generation errors

        const handleSubmit = (e) => {
            e.preventDefault();
            const productData = {
                name,
                description,
                features: features.split('\n').filter(f => f.trim() !== ''),
                benefits: benefits.split('\n').filter(b => b.trim() !== ''),
                usage,
                imageUrl,
                createdAt: initialData.createdAt || new Date().toISOString(),
                updatedAt: new Date().toISOString(),
            };
            onSubmit(productData);
        };

        const handleGenerateWithAI = async () => {
            if (!name.trim()) {
                setAiError("Lütfen önce ürün adını girin.");
                return;
            }
            setIsGenerating(true);
            setAiError(null);

            try {
                const prompt = `"${name}" adlı ürün için kısa bir açıklama, özellikler (maddeler halinde), faydalar (maddeler halinde) ve kullanım şekli (detaylı) oluştur. Cevabı aşağıdaki JSON formatında döndür:\n\n` +
                               `{\n  "description": "...",\n  "features": ["...", "..."],\n  "benefits": ["...", "..."],\n  "usage": "..."\n}`;

                let chatHistory = [];
                chatHistory.push({ role: "user", parts: [{ text: prompt }] });

                const payload = {
                    contents: chatHistory,
                    generationConfig: {
                        responseMimeType: "application/json",
                        responseSchema: {
                            type: "OBJECT",
                            properties: {
                                "description": { "type": "STRING" },
                                "features": {
                                    "type": "ARRAY",
                                    "items": { "type": "STRING" }
                                },
                                "benefits": {
                                    "type": "ARRAY",
                                    "items": { "type": "STRING" }
                                },
                                "usage": { "type": "STRING" }
                            },
                            "required": ["description", "features", "benefits", "usage"]
                        }
                    }
                };

                const apiKey = ""; // Canvas will provide this at runtime
                const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });

                const result = await response.json();

                if (result.candidates && result.candidates.length > 0 &&
                    result.candidates[0].content && result.candidates[0].content.parts &&
                    result.candidates[0].content.parts.length > 0) {
                    const jsonString = result.candidates[0].content.parts[0].text;
                    const parsedJson = JSON.parse(jsonString);

                    setDescription(parsedJson.description || '');
                    setFeatures(parsedJson.features ? parsedJson.features.join('\n') : '');
                    setBenefits(parsedJson.benefits ? parsedJson.benefits.join('\n') : '');
                    setUsage(parsedJson.usage || '');
                } else {
                    setAiError("AI'dan beklenen yanıt alınamadı.");
                    console.error("AI yanıt yapısı beklenenden farklı:", result);
                }
            } catch (err) {
                console.error("AI ile doldurma hatası:", err);
                setAiError("AI ile doldurma sırasında bir hata oluştu: " + err.message);
            } finally {
                setIsGenerating(false);
            }
        };

        return (
            <div className="p-4 max-w-2xl mx-auto bg-white rounded-xl shadow-lg">
                <h2 className="text-3xl font-bold text-gray-800 mb-6 text-center">
                    {initialData.id ? 'Ürünü Düzenle' : 'Yeni Ürün Ekle'}
                </h2>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">Ürün Adı:</label>
                        <input
                            type="text"
                            id="name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                            required
                        />
                    </div>
                    <div className="flex justify-end">
                        <button
                            type="button"
                            onClick={handleGenerateWithAI}
                            disabled={isGenerating || !name.trim()}
                            className={`py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105
                                ${isGenerating ? 'bg-gray-400 cursor-not-allowed' : 'bg-purple-600 hover:bg-purple-700 text-white font-bold'}`}
                        >
                            {isGenerating ? 'AI ile Dolduruluyor...' : 'AI ile Doldur'}
                        </button>
                    </div>
                    {aiError && (
                        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
                            <strong className="font-bold">AI Hatası!</strong>
                            <span className="block sm:inline"> {aiError}</span>
                        </div>
                    )}
                    <div>
                        <label htmlFor="description" className="block text-gray-700 text-sm font-bold mb-2">Kısa Açıklama:</label>
                        <textarea
                            id="description"
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                            rows="3"
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                            required
                        ></textarea>
                    </div>
                    <div>
                        <label htmlFor="features" className="block text-gray-700 text-sm font-bold mb-2">Özellikler (Her satıra bir özellik):</label>
                        <textarea
                            id="features"
                            value={features}
                            onChange={(e) => setFeatures(e.target.value)}
                            rows="4"
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                        ></textarea>
                    </div>
                    <div>
                        <label htmlFor="benefits" className="block text-gray-700 text-sm font-bold mb-2">Faydalar (Her satıra bir fayda):</label>
                        <textarea
                            id="benefits"
                            value={benefits}
                            onChange={(e) => setBenefits(e.target.value)}
                            rows="4"
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                        ></textarea>
                    </div>
                    <div>
                        <label htmlFor="usage" className="block text-gray-700 text-sm font-bold mb-2">Kullanım Şekli:</label>
                        <textarea
                            id="usage"
                            value={usage}
                            onChange={(e) => setUsage(e.target.value)}
                            rows="5"
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                        ></textarea>
                    </div>
                    <div>
                        <label htmlFor="imageUrl" className="block text-gray-700 text-sm font-bold mb-2">Resim URL'si:</label>
                        <input
                            type="url"
                            id="imageUrl"
                            value={imageUrl}
                            onChange={(e) => setImageUrl(e.target.value)}
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                    </div>
                    <div className="flex justify-end space-x-4">
                        <button
                            type="button"
                            onClick={() => setCurrentView('list')}
                            className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            İptal
                        </button>
                        <button
                            type="submit"
                            className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            {initialData.id ? 'Ürünü Güncelle' : 'Ürünü Kaydet'}
                        </button>
                    </div>
                </form>
            </div>
        );
    };

    const ProductDetail = ({ product }) => (
        <div className="p-4 max-w-4xl mx-auto bg-white rounded-xl shadow-lg">
            <h2 className="text-4xl font-extrabold text-gray-900 mb-6 text-center">{product.name}</h2>
            <div className="mb-6 flex justify-center">
                <img
                    src={product.imageUrl || `https://placehold.co/600x400/E0E0E0/333333?text=${encodeURIComponent(product.name || 'Ürün Resmi')}`}
                    alt={product.name || 'Ürün Resmi'}
                    className="w-full max-w-md h-auto rounded-lg shadow-md object-cover"
                    onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/600x400/E0E0E0/333333?text=${encodeURIComponent(product.name || 'Ürün Resmi')}`; }}
                />
            </div>
            <p className="text-lg text-gray-700 mb-6 leading-relaxed">{product.description}</p>

            {product.features && product.features.length > 0 && (
                <div className="mb-6">
                    <h3 className="text-2xl font-semibold text-gray-800 mb-3">Özellikler:</h3>
                    <ul className="list-disc list-inside text-gray-700 space-y-1">
                        {product.features.map((feature, index) => (
                            <li key={index}>{feature}</li>
                        ))}
                    </ul>
                </div>
            )}

            {product.benefits && product.benefits.length > 0 && (
                <div className="mb-6">
                    <h3 className="text-2xl font-semibold text-gray-800 mb-3">Faydalar:</h3>
                    <ul className="list-disc list-inside text-gray-700 space-y-1">
                        {product.benefits.map((benefit, index) => (
                            <li key={index}>{benefit}</li>
                        ))}
                    </ul>
                </div>
            )}

            {product.usage && (
                <div className="mb-6">
                    <h3 className="text-2xl font-semibold text-gray-800 mb-3">Kullanım Şekli:</h3>
                    <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{product.usage}</p>
                </div>
            )}

            <div className="flex justify-end space-x-4 mt-8">
                <button
                    onClick={() => setCurrentView('list')}
                    className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                >
                    Listeye Geri Dön
                </button>
                {isAdmin && (
                    <>
                        <button
                            onClick={() => { setSelectedProduct(product); setCurrentView('edit'); }}
                            className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            Düzenle
                        </button>
                        <button
                            onClick={() => handleDeleteProduct(product.id)}
                            className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            Sil
                        </button>
                    </>
                )}
            </div>
        </div>
    );

    // New LoginScreen component
    const LoginScreen = ({ onLoginSuccess }) => {
        const [password, setPassword] = useState('');
        const [loginError, setLoginError] = useState(null);

        const handleLogin = (e) => {
            e.preventDefault();
            // This is a placeholder for a real authentication check.
            // In a real app, you'd use Firebase Auth (email/password, etc.)
            // For demo purposes, a simple hardcoded password.
            if (password === 'admin123') { // DEMO PASSWORD
                onLoginSuccess();
                setLoginError(null);
            } else {
                setLoginError("Yanlış şifre. Lütfen tekrar deneyin.");
            }
        };

        return (
            <div className="p-4 max-w-md mx-auto bg-white rounded-xl shadow-lg mt-8">
                <h2 className="text-3xl font-bold text-gray-800 mb-6 text-center">Yönetici Girişi</h2>
                <form onSubmit={handleLogin} className="space-y-4">
                    <div>
                        <label htmlFor="adminPassword" className="block text-gray-700 text-sm font-bold mb-2">Şifre:</label>
                        <input
                            type="password"
                            id="adminPassword"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500"
                            required
                        />
                    </div>
                    {loginError && (
                        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
                            <span className="block sm:inline"> {loginError}</span>
                        </div>
                    )}
                    <div className="flex justify-end space-x-4">
                        <button
                            type="button"
                            onClick={() => setCurrentView('list')}
                            className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            İptal
                        </button>
                        <button
                            type="submit"
                            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105"
                        >
                            Giriş Yap
                        </button>
                    </div>
                </form>
            </div>
        );
    };


    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gray-100">
                <div className="text-center text-lg text-gray-700">Yükleniyor...</div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-100 font-sans antialiased p-4">
            <style>
                {`
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
                body {
                    font-family: 'Inter', sans-serif;
                }
                `}
            </style>
            <script src="https://cdn.tailwindcss.com"></script>
            <div className="container mx-auto py-8">
                <header className="text-center mb-12">
                    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">
                        Ürün Tanıtım Portalı
                    </h1>
                    <p className="text-xl text-gray-600 mt-4">
                        Ürünlerinizin özelliklerini, faydalarını ve kullanım şekillerini keşfedin.
                    </p>
                </header>

                {error && (
                    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-6" role="alert">
                        <strong className="font-bold">Hata!</strong>
                        <span className="block sm:inline"> {error}</span>
                    </div>
                )}

                {currentView === 'list' && <ProductList />}
                {currentView === 'add' && isAdmin && <ProductForm onSubmit={handleAddProduct} />}
                {currentView === 'edit' && isAdmin && selectedProduct && (
                    <ProductForm onSubmit={(data) => handleUpdateProduct(selectedProduct.id, data)} initialData={selectedProduct} />
                )}
                {currentView === 'detail' && <ProductDetail product={selectedProduct} />}
                {currentView === 'login' && <LoginScreen onLoginSuccess={handleAdminLoginSuccess} />}

                {/* If trying to access admin-only views without being admin, redirect to login */}
                {(currentView === 'add' || currentView === 'edit') && !isAdmin && currentView !== 'login' && (
                    <div className="text-center text-red-700 text-lg mt-8">
                        Bu sayfaya erişmek için yönetici olarak giriş yapmalısınız.
                    </div>
                )}
            </div>
        </div>
    );
}

export default App;