import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Sidebar from './OCRSidebar';
import Header from './OCRHeader';

const ConfigForm = () => {
    const [config, setConfig] = useState({
        MONGO_DETAILS: '',
        MongoDB_NAME: '',
        COLLECTION_NAMES: '',
        SECRET_KEY: '',
        ALGORITHM: '',
        ACCESS_TOKEN_EXPIRE_MINUTES: 0
    });

    useEffect(() => {
        axios.get('http://localhost:8000/config')
            .then(response => setConfig(response.data))
            .catch(error => console.error('Error fetching config:', error));
    }, []);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setConfig({
            ...config,
            [name]: value
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.patch('http://localhost:8000/config', config)
            .then(response => {
                setConfig(response.data);
                alert('Config updated successfully!');
            })
            .catch(error => console.error('Error updating config:', error));
    };

    return (
        <div className="min-h-screen bg-gray-100 flex">
            <Sidebar />
            <div className="flex-1 p-6">
                <Header />
                <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
                    <h2 className="text-2xl font-bold mb-6">Manage Credentials</h2>
                    <form className="space-y-4" onSubmit={handleSubmit}>
                        <div>
                            <label className="block text-gray-700">ERP details</label>
                            <input
                                type="text"
                                name="MONGO_DETAILS"
                                value={config.MONGO_DETAILS}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">Client ID</label>
                            <input
                                type="text"
                                name="MongoDB_NAME"
                                value={config.MongoDB_NAME}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">Client Secret</label>
                            <input
                                type="text"
                                name="COLLECTION_NAMES"
                                value={config.COLLECTION_NAMES}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">Username</label>
                            <input
                                type="text"
                                name="SECRET_KEY"
                                value={config.SECRET_KEY}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">Password</label>
                            <input
                                type="password"
                                name="ALGORITHM"
                                value={config.ALGORITHM}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">Company Code</label>
                            <input
                                type="text"
                                name="ACCESS_TOKEN_EXPIRE_MINUTES"
                                value={config.ACCESS_TOKEN_EXPIRE_MINUTES}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <div>
                            <label className="block text-gray-700">API Key (Optional)</label>
                            <input
                                type="text"
                                name="API_KEY"
                                value={config.API_KEY}
                                onChange={handleChange}
                                className="w-full px-4 py-2 border rounded-md"
                            />
                        </div>
                        <button
                            type="submit"
                            className="w-full bg-blue-500 text-white px-4 py-2 rounded-md"
                        >
                            Save Credentials
                        </button>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default ConfigForm;