import React, { useState, useEffect } from 'react';
import PocketBase from 'pocketbase';
import { useParams, BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

const pb = new PocketBase('https://db.out.jafre.li');

const Home = () => {
    const [message, setMessage] = useState('');
    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const data = { message };
            const record = await pb.collection('jbin').create(data);
            setSubmitted(record.id);
        } catch (err) {
            setError('Fehler beim Erstellen der Nachricht');
        }
    };

    return (
        <div className="flex flex-col items-center p-4">
            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
                <textarea
                    className="p-2 border rounded-xl w-full"
                    placeholder="Nachricht hier eingeben..."
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    required
                ></textarea>
                <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
                    Nachricht posten
                </button>
            </form>
            {submitted && (
                <p className="mt-4 text-green-500">
                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
                </p>
            )}
            {error && <p className="mt-4 text-red-500">{error}</p>}
        </div>
    );
};

const Message = () => {
    const { id } = useParams();
    const [message, setMessage] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchMessage = async () => {
            try {
                const record = await pb.collection('jbin').getOne(id);
                setMessage(record.message);
            } catch (err) {
                setError('Nachricht nicht gefunden');
            }
        };

        fetchMessage();
    }, [id]);

    return (
        <div className="flex flex-col items-center p-4">
            {error ? (
                <h1 className="text-xl font-bold text-red-500">{error}</h1>
            ) : message ? (
                <>
                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
                </>
            ) : (
                <p className="text-gray-500">Lädt...</p>
            )}
        </div>
    );
};

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path=":id" element={<Message />} />
            </Routes>
        </Router>
    );
};

export default App;