// AdminDashboard.jsx - Admin Dashboard Component
const { useState, useEffect } = React;

function AdminDashboard({
    upcomingClasses, setUpcomingClasses,
    courses, setCourses,
    galleryItems, setGalleryItems,
    testimonials, setTestimonials
}) {
    const [activeTab, setActiveTab] = useState('dashboard');
    const [notification, setNotification] = useState(null);

    // Notification helper
    const showNotification = (message, type = 'success') => {
        setNotification({ message, type });
        setTimeout(() => setNotification(null), 3000);
    };

    // Dashboard Stats
    const stats = {
        students: 2500,
        courses: 6,
        classes: upcomingClasses.length,
        testimonials: testimonials.length
    };

    // Upcoming Classes Management
    const handleAddClass = (newClass) => {
        const classWithId = { ...newClass, id: Date.now() };
        setUpcomingClasses([...upcomingClasses, classWithId]);
        showNotification('Class added successfully');
    };

    const handleDeleteClass = (id) => {
        setUpcomingClasses(upcomingClasses.filter(c => c.id !== id));
        showNotification('Class deleted');
    };

    // Courses Management
    const handleAddCourse = (newCourse) => {
        const courseWithId = { ...newCourse, id: Date.now() };
        setCourses([...courses, courseWithId]);
        showNotification('Course added successfully');
    };

    const handleDeleteCourse = (id) => {
        setCourses(courses.filter(c => c.id !== id));
        showNotification('Course deleted');
    };

    // Gallery Management
    const handleAddGalleryItem = (item) => {
        const newItem = { ...item, id: Date.now() };
        setGalleryItems([...galleryItems, newItem]);
        showNotification('Gallery item added');
    };

    const handleDeleteGalleryItem = (id) => {
        setGalleryItems(galleryItems.filter(i => i.id !== id));
        showNotification('Gallery item deleted');
    };

    // Testimonials Management
    const handleAddTestimonial = (testimonial) => {
        const newTestimonial = { ...testimonial, id: Date.now() };
        setTestimonials([...testimonials, newTestimonial]);
        showNotification('Testimonial added');
    };

    const handleDeleteTestimonial = (id) => {
        setTestimonials(testimonials.filter(t => t.id !== id));
        showNotification('Testimonial deleted');
    };

    return (
        <div className="min-h-screen bg-gray-100 pt-20">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col lg:flex-row gap-8">
                    {/* Sidebar */}
                    <div className="w-full lg:w-64 bg-white rounded-xl shadow-sm p-4">
                        <h2 className="font-serif text-xl font-semibold text-charcoal mb-6 px-2">Admin Dashboard</h2>
                        <nav className="space-y-2">
                            <button
                                onClick={() => setActiveTab('dashboard')}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-colors ${
                                    activeTab === 'dashboard' ? 'bg-crimson text-white' : 'text-gray-600 hover:bg-gray-100'
                                }`}
                            >
                                Dashboard
                            </button>
                            <button
                                onClick={() => setActiveTab('classes')}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-colors ${
                                    activeTab === 'classes' ? 'bg-crimson text-white' : 'text-gray-600 hover:bg-gray-100'
                                }`}
                            >
                                Upcoming Classes
                            </button>
                            <button
                                onClick={() => setActiveTab('courses')}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-colors ${
                                    activeTab === 'courses' ? 'bg-crimson text-white' : 'text-gray-600 hover:bg-gray-100'
                                }`}
                            >
                                Recorded Courses
                            </button>
                            <button
                                onClick={() => setActiveTab('gallery')}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-colors ${
                                    activeTab === 'gallery' ? 'bg-crimson text-white' : 'text-gray-600 hover:bg-gray-100'
                                }`}
                            >
                                Student Gallery
                            </button>
                            <button
                                onClick={() => setActiveTab('testimonials')}
                                className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-colors ${
                                    activeTab === 'testimonials' ? 'bg-crimson text-white' : 'text-gray-600 hover:bg-gray-100'
                                }`}
                            >
                                Testimonials
                            </button>
                        </nav>
                    </div>

                    {/* Main Content */}
                    <div className="flex-1">
                        {activeTab === 'dashboard' && (
                            <DashboardStats stats={stats} />
                        )}
                        {activeTab === 'classes' && (
                            <ManageClasses
                                classes={upcomingClasses}
                                onAdd={handleAddClass}
                                onDelete={handleDeleteClass}
                            />
                        )}
                        {activeTab === 'courses' && (
                            <ManageCourses
                                courses={courses}
                                onAdd={handleAddCourse}
                                onDelete={handleDeleteCourse}
                            />
                        )}
                        {activeTab === 'gallery' && (
                            <ManageGallery
                                items={galleryItems}
                                onAdd={handleAddGalleryItem}
                                onDelete={handleDeleteGalleryItem}
                            />
                        )}
                        {activeTab === 'testimonials' && (
                            <ManageTestimonials
                                testimonials={testimonials}
                                onAdd={handleAddTestimonial}
                                onDelete={handleDeleteTestimonial}
                            />
                        )}
                    </div>
                </div>
            </div>

            {/* Notification Toast */}
            {notification && (
                <div className={`fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-medium animate-fade-in-up ${
                    notification.type === 'success' ? 'bg-green-600' : 'bg-red-600'
                }`}>
                    {notification.message}
                </div>
            )}
        </div>
    );
}

// Dashboard Statistics Component
function DashboardStats({ stats }) {
    return (
        <div className="space-y-6">
            <div className="mb-6">
                <h2 className="font-serif text-2xl font-semibold text-charcoal">Dashboard</h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div className="bg-white p-6 rounded-xl shadow-sm border-l-4 border-crimson">
                    <div className="text-3xl font-serif font-semibold text-charcoal">{stats.students.toLocaleString()}</div>
                    <div className="text-gray-500 text-sm mt-1">Students Enrolled</div>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border-l-4 border-indigo">
                    <div className="text-3xl font-serif font-semibold text-charcoal">{stats.courses}</div>
                    <div className="text-gray-500 text-sm mt-1">Recorded Courses</div>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border-l-4 border-gold">
                    <div className="text-3xl font-serif font-semibold text-charcoal">{stats.classes}</div>
                    <div className="text-gray-500 text-sm mt-1">Upcoming Classes</div>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border-l-4 border-green-500">
                    <div className="text-3xl font-serif font-semibold text-charcoal">{stats.testimonials}</div>
                    <div className="text-gray-500 text-sm mt-1">Testimonials</div>
                </div>
            </div>

            <div className="bg-white rounded-xl shadow-sm p-6">
                <h3 className="font-semibold text-charcoal mb-4">Recent Activity</h3>
                <div className="space-y-3">
                    <div className="flex items-center py-3 border-b border-gray-100">
                        <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <div>
                            <div className="font-medium text-charcoal">New student enrollment</div>
                            <div className="text-sm text-gray-500">2 hours ago</div>
                        </div>
                    </div>
                    <div className="flex items-center py-3 border-b border-gray-100">
                        <div className="w-8 h-8 rounded-full bg-crimson-100 flex items-center justify-center mr-3">
                            <svg className="w-4 h-4 text-crimson" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                        </div>
                        <div>
                            <div className="font-medium text-charcoal">New course created</div>
                            <div className="text-sm text-gray-500">Yesterday</div>
                        </div>
                    </div>
                    <div className="flex items-center py-3 border-b border-gray-100">
                        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                            <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div>
                            <div className="font-medium text-charcoal">New testimonial</div>
                            <div className="text-sm text-gray-500">2 days ago</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

// Manage Classes Component
function ManageClasses({ classes, onAdd, onDelete }) {
    const [isAdding, setIsAdding] = useState(false);
    const [newClass, setNewClass] = useState({ title: '', date: '', time: '', type: 'group', image: '' });

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(newClass);
        setIsAdding(false);
        setNewClass({ title: '', date: '', time: '', type: 'group', image: '' });
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center mb-6">
                <h2 className="font-serif text-2xl font-semibold text-charcoal">Upcoming Classes</h2>
                <button
                    onClick={() => setIsAdding(true)}
                    className="bg-crimson text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition-colors"
                >
                    Add New Class
                </button>
            </div>

            {isAdding && (
                <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 className="font-semibold text-charcoal mb-4">Add New Class</h3>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input
                                type="text"
                                placeholder="Class Title"
                                value={newClass.title}
                                onChange={(e) => setNewClass({ ...newClass, title: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                            <input
                                type="date"
                                value={newClass.date}
                                onChange={(e) => setNewClass({ ...newClass, date: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input
                                type="text"
                                placeholder="Time (e.g., 10:00 AM IST)"
                                value={newClass.time}
                                onChange={(e) => setNewClass({ ...newClass, time: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                            <select
                                value={newClass.type}
                                onChange={(e) => setNewClass({ ...newClass, type: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                            >
                                <option value="group">Group Class</option>
                                <option value="masterclass">Masterclass</option>
                                <option value="offer">Special Offer</option>
                            </select>
                        </div>
                        <input
                            type="text"
                            placeholder="Image URL (optional)"
                            value={newClass.image}
                            onChange={(e) => setNewClass({ ...newClass, image: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                        />
                        <div className="flex gap-3">
                            <button type="submit" className="bg-crimson text-white px-6 py-2 rounded-lg font-medium">
                                Add Class
                            </button>
                            <button
                                type="button"
                                onClick={() => setIsAdding(false)}
                                className="px-6 py-2 rounded-lg font-medium text-gray-600 hover:bg-gray-100"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {classes.map(cls => (
                    <div key={cls.id} className="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div className="h-48 overflow-hidden">
                            <img
                                src={cls.image || `https://images.unsplash.com/photo-${Math.random()}?w=400`}
                                alt={cls.title}
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <div className="p-4">
                            <h3 className="font-semibold text-charcoal mb-2">{cls.title}</h3>
                            <p className="text-sm text-gray-500 mb-2">
                                <span className="font-medium">Date:</span> {cls.date}
                            </p>
                            <p className="text-sm text-gray-500 mb-4">
                                <span className="font-medium">Time:</span> {cls.time}
                            </p>
                            <div className="flex items-center justify-between">
                                <span className={`text-xs font-medium px-2 py-1 rounded-full ${
                                    cls.type === 'masterclass' ? 'bg-crimson text-white' :
                                    cls.type === 'offer' ? 'bg-gold text-white' : 'bg-indigo text-white'
                                }`}>
                                    {cls.type === 'masterclass' ? 'Masterclass' : cls.type === 'offer' ? 'Offer' : 'Group Class'}
                                </span>
                                <button
                                    onClick={() => onDelete(cls.id)}
                                    className="text-red-500 hover:text-red-700 p-2"
                                    title="Delete"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

// Manage Courses Component
function ManageCourses({ courses, onAdd, onDelete }) {
    const [isAdding, setIsAdding] = useState(false);
    const [newCourse, setNewCourse] = useState({
        title: '', duration: '', level: 'Beginner', price: 0, image: '', category: 'Portrait', bestseller: false
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(newCourse);
        setIsAdding(false);
        setNewCourse({ title: '', duration: '', level: 'Beginner', price: 0, image: '', category: 'Portrait', bestseller: false });
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center mb-6">
                <h2 className="font-serif text-2xl font-semibold text-charcoal">Recorded Courses</h2>
                <button
                    onClick={() => setIsAdding(true)}
                    className="bg-crimson text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition-colors"
                >
                    Add New Course
                </button>
            </div>

            {isAdding && (
                <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 className="font-semibold text-charcoal mb-4">Add New Course</h3>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input
                                type="text"
                                placeholder="Course Title"
                                value={newCourse.title}
                                onChange={(e) => setNewCourse({ ...newCourse, title: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                            <input
                                type="text"
                                placeholder="Duration (e.g., 12 hours)"
                                value={newCourse.duration}
                                onChange={(e) => setNewCourse({ ...newCourse, duration: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <select
                                value={newCourse.level}
                                onChange={(e) => setNewCourse({ ...newCourse, level: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                            >
                                <option value="Beginner">Beginner</option>
                                <option value="Intermediate">Intermediate</option>
                                <option value="Advanced">Advanced</option>
                                <option value="All Levels">All Levels</option>
                            </select>
                            <select
                                value={newCourse.category}
                                onChange={(e) => setNewCourse({ ...newCourse, category: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                            >
                                <option value="Portrait">Portrait</option>
                                <option value="Landscape">Landscape</option>
                                <option value="Botanical">Botanical</option>
                                <option value="Sketching">Sketching</option>
                                <option value="Composition">Composition</option>
                                <option value="Still Life">Still Life</option>
                            </select>
                            <input
                                type="number"
                                placeholder="Price ($)"
                                value={newCourse.price}
                                onChange={(e) => setNewCourse({ ...newCourse, price: Number(e.target.value) })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                        </div>
                        <input
                            type="text"
                            placeholder="Image URL"
                            value={newCourse.image}
                            onChange={(e) => setNewCourse({ ...newCourse, image: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                        />
                        <label className="flex items-center space-x-2">
                            <input
                                type="checkbox"
                                checked={newCourse.bestseller}
                                onChange={(e) => setNewCourse({ ...newCourse, bestseller: e.target.checked })}
                                className="rounded text-crimson focus:ring-crimson"
                            />
                            <span className="text-gray-700">Mark as Bestseller</span>
                        </label>
                        <div className="flex gap-3">
                            <button type="submit" className="bg-crimson text-white px-6 py-2 rounded-lg font-medium">
                                Add Course
                            </button>
                            <button
                                type="button"
                                onClick={() => setIsAdding(false)}
                                className="px-6 py-2 rounded-lg font-medium text-gray-600 hover:bg-gray-100"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {courses.map(course => (
                    <div key={course.id} className="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div className="h-48 overflow-hidden">
                            <img
                                src={course.image || `https://images.unsplash.com/photo-${Math.random()}?w=400`}
                                alt={course.title}
                                className="w-full h-full object-cover"
                            />
                            {course.bestseller && (
                                <span className="absolute top-3 left-3 bg-gold text-white text-xs font-bold px-3 py-1 rounded-full">
                                    Bestseller
                                </span>
                            )}
                        </div>
                        <div className="p-4">
                            <h3 className="font-semibold text-charcoal mb-2">{course.title}</h3>
                            <p className="text-sm text-gray-500 mb-2">
                                <span className="font-medium">Duration:</span> {course.duration}
                            </p>
                            <p className="text-sm text-gray-500 mb-3">
                                <span className="font-medium">Level:</span> {course.level} | <span className="font-medium">Category:</span> {course.category}
                            </p>
                            <div className="flex items-center justify-between">
                                <span className="text-xl font-serif font-semibold text-charcoal">${course.price}</span>
                                <button
                                    onClick={() => onDelete(course.id)}
                                    className="text-red-500 hover:text-red-700 p-2"
                                    title="Delete"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

// Manage Gallery Component
function ManageGallery({ items, onAdd, onDelete }) {
    const [isAdding, setIsAdding] = useState(false);
    const [newItem, setNewItem] = useState({ title: '', student: '', class: '', image: '' });

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(newItem);
        setIsAdding(false);
        setNewItem({ title: '', student: '', class: '', image: '' });
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center mb-6">
                <h2 className="font-serif text-2xl font-semibold text-charcoal">Student Gallery</h2>
                <button
                    onClick={() => setIsAdding(true)}
                    className="bg-crimson text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition-colors"
                >
                    Add Gallery Item
                </button>
            </div>

            {isAdding && (
                <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 className="font-semibold text-charcoal mb-4">Add Gallery Item</h3>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <input
                                type="text"
                                placeholder="Artwork Title"
                                value={newItem.title}
                                onChange={(e) => setNewItem({ ...newItem, title: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                            <input
                                type="text"
                                placeholder="Student Name"
                                value={newItem.student}
                                onChange={(e) => setNewItem({ ...newItem, student: e.target.value })}
                                className="px-4 py-2 rounded-lg border border-gray-300"
                                required
                            />
                        </div>
                        <input
                            type="text"
                            placeholder="Class Name"
                            value={newItem.class}
                            onChange={(e) => setNewItem({ ...newItem, class: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                            required
                        />
                        <input
                            type="text"
                            placeholder="Image URL"
                            value={newItem.image}
                            onChange={(e) => setNewItem({ ...newItem, image: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                            required
                        />
                        <div className="flex gap-3">
                            <button type="submit" className="bg-crimson text-white px-6 py-2 rounded-lg font-medium">
                                Add Item
                            </button>
                            <button
                                type="button"
                                onClick={() => setIsAdding(false)}
                                className="px-6 py-2 rounded-lg font-medium text-gray-600 hover:bg-gray-100"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {items.map(item => (
                    <div key={item.id} className="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div className="aspect-video overflow-hidden">
                            <img
                                src={item.image}
                                alt={item.title}
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <div className="p-4">
                            <h3 className="font-semibold text-charcoal mb-2">{item.title}</h3>
                            <p className="text-sm text-gray-600 mb-2">
                                <span className="font-medium">Artist:</span> {item.student}
                            </p>
                            <p className="text-sm text-gray-500 mb-3">
                                <span className="font-medium">Class:</span> {item.class}
                            </p>
                            <div className="flex justify-end">
                                <button
                                    onClick={() => onDelete(item.id)}
                                    className="text-red-500 hover:text-red-700 p-2"
                                    title="Delete"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

// Manage Testimonials Component
function ManageTestimonials({ testimonials, onAdd, onDelete }) {
    const [isAdding, setIsAdding] = useState(false);
    const [newTestimonial, setNewTestimonial] = useState({ name: '', location: '', text: '', image: '' });

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(newTestimonial);
        setIsAdding(false);
        setNewTestimonial({ name: '', location: '', text: '', image: '' });
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center mb-6">
                <h2 className="font-serif text-2xl font-semibold text-charcoal">Student Testimonials</h2>
                <button
                    onClick={() => setIsAdding(true)}
                    className="bg-crimson text-white px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition-colors"
                >
                    Add Testimonial
                </button>
            </div>

            {isAdding && (
                <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h3 className="font-semibold text-charcoal mb-4">Add Testimonial</h3>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <input
                            type="text"
                            placeholder="Student Name"
                            value={newTestimonial.name}
                            onChange={(e) => setNewTestimonial({ ...newTestimonial, name: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                            required
                        />
                        <input
                            type="text"
                            placeholder="Location"
                            value={newTestimonial.location}
                            onChange={(e) => setNewTestimonial({ ...newTestimonial, location: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                            required
                        />
                        <textarea
                            placeholder="Testimonial Text"
                            value={newTestimonial.text}
                            onChange={(e) => setNewTestimonial({ ...newTestimonial, text: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300 w-full h-24"
                            required
                        />
                        <input
                            type="text"
                            placeholder="Image URL"
                            value={newTestimonial.image}
                            onChange={(e) => setNewTestimonial({ ...newTestimonial, image: e.target.value })}
                            className="px-4 py-2 rounded-lg border border-gray-300"
                        />
                        <div className="flex gap-3">
                            <button type="submit" className="bg-crimson text-white px-6 py-2 rounded-lg font-medium">
                                Add Testimonial
                            </button>
                            <button
                                type="button"
                                onClick={() => setIsAdding(false)}
                                className="px-6 py-2 rounded-lg font-medium text-gray-600 hover:bg-gray-100"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            )}

            <div className="space-y-4">
                {testimonials.map(t => (
                    <div key={t.id} className="bg-white rounded-xl shadow-sm p-6 flex flex-col md:flex-row gap-4">
                        <img
                            src={t.image}
                            alt={t.name}
                            className="w-20 h-20 rounded-full object-cover"
                        />
                        <div className="flex-1">
                            <div className="flex items-start justify-between">
                                <div>
                                    <h3 className="font-semibold text-charcoal">{t.name}</h3>
                                    <p className="text-gray-500 text-sm">{t.location}</p>
                                </div>
                                <button
                                    onClick={() => onDelete(t.id)}
                                    className="text-red-500 hover:text-red-700 p-2"
                                    title="Delete"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                            <p className="text-gray-600 mt-3 italic">"{t.text}"</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

window.AdminDashboard = AdminDashboard;