// SchemaGrid.jsx
import React, { useEffect, useState } from 'react';
import { fetchSchemas } from './Helpers/fetchSchemas';
import { excludedSchemas } from './ExcludedSchemas';
import { useNavigate } from 'react-router-dom';

const SchemaGrid = () => {
    const [schemas, setSchemas] = useState([]);
    const [filteredSchemas, setFilteredSchemas] = useState([]);
    const [searchQuery, setSearchQuery] = useState('');
    const [error, setError] = useState(null);
    const navigate = useNavigate();

    useEffect(() => {
        const apiEndpoint = import.meta.env.VITE_REACT_APP_LEUMAS_API_ENDPOINT;

        fetchSchemas(
            (data) => {
                setSchemas(data);
                setFilteredSchemas(data);
            },
            (error) => setError(error.message),
            apiEndpoint,
            excludedSchemas
        );
    }, []);

    useEffect(() => {
        setFilteredSchemas(
            schemas.filter((schema) =>
                schema.toLowerCase().includes(searchQuery.toLowerCase())
            )
        );
    }, [searchQuery, schemas]);

    return (
        <div className="min-h-screen bg-gray-100 p-4">
            <header className="text-center my-6">
                <h1 className="text-4xl font-bold text-gray-800">Schemas</h1>
            </header>
            <div className="max-w-md mx-auto mb-6">
                <input
                    type="text"
                    className="w-full p-2 border border-gray-300 rounded-lg"
                    placeholder="Search schemas..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                />
            </div>
            {error && <p className="text-red-500 text-center">{error}</p>}
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {filteredSchemas.map((schema, index) => (
                    <div
                        key={index}
                        className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"
                        onClick={() => navigate(`/schema-grid/${schema}`)}
                    >
                        <button className="w-full text-lg font-semibold text-gray-700">
                            {schema}
                        </button>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default SchemaGrid;