import React, { useState, useEffect } from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link,
    useParams,
} from "react-router-dom";
import MarkdownIt from "markdown-it";
import { full as emoji } from "markdown-it-emoji";
import footnote from "markdown-it-footnote";
import DOMPurify from "dompurify";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
import { ThemeProvider } from "./contexts/ThemeContext";
import AdminDashboard from "./components/AdminDashboard";
import PostEditor from "./components/PostEditor";
import LoginForm from "./components/LoginForm";
import ProtectedRoute from "./components/ProtectedRoute";
import ThemesManager from "./components/ThemesManager";
import ThemeEditor from "./components/ThemeEditor";

const scrollableTablesPlugin = (md) => {
    const defaultRenderOpen =
        md.renderer.rules.table_open ||
        function (tokens, idx, options, env, self) {
            return self.renderToken(tokens, idx, options);
        };

    const defaultRenderClose =
        md.renderer.rules.table_close ||
        function (tokens, idx, options, env, self) {
            return self.renderToken(tokens, idx, options);
        };

    md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
        return (
            '<div class="overflow-x-auto">' +
            defaultRenderOpen(tokens, idx, options, env, self)
        );
    };

    md.renderer.rules.table_close = function (tokens, idx, options, env, self) {
        return defaultRenderClose(tokens, idx, options, env, self) + "</div>";
    };
};

const md = new MarkdownIt({
    html: true, // Enable HTML tags in source
    linkify: true, // Auto-convert URL-like text to links
    typographer: true, // Enable some language-neutral replacement + quotes beautification
    breaks: false, // Convert '\n' in paragraphs into <br>
})
    .use(scrollableTablesPlugin) // Keep our table scrolling enhancement
    .use(emoji) // GitHub-style emoji :emoji_name:
    .use(footnote); // Standard footnotes [^1]

import { API_BASE } from "./config";

// Navigation Header Component
function NavHeader() {
    const { isAdmin, user, logout } = useAuth();

    const handleLogout = async () => {
        await logout();
    };

    return (
        <header className="headercontainer py-6 border-b theme-border flex items-center justify-between">
            <div className="text-2xl font-bold theme-text">
                <Link to="/">
                    <span className="theme-primary">Goon</span>Blog
                </Link>
            </div>
            <nav>
                <ul className="flex space-x-4 items-center">
                    <li>
                        <Link
                            to="/"
                            className="theme-text-secondary hover:theme-text transition-colors duration-200 font-medium"
                        >
                            Home
                        </Link>
                    </li>
                    {isAdmin && (
                        <li>
                            <Link
                                to="/admin"
                                className="theme-primary hover:theme-secondary transition-colors duration-200 font-medium"
                            >
                                Admin
                            </Link>
                        </li>
                    )}
                    {user ? (
                        <li className="flex items-center space-x-2">
                            <span className="text-sm theme-text-secondary">
                                Welcome, {user.username}
                            </span>
                            <button
                                onClick={handleLogout}
                                className="text-red-600 hover:text-red-800 transition-colors duration-200 font-medium text-sm"
                            >
                                Logout
                            </button>
                        </li>
                    ) : (
                        <li>
                            <Link
                                to="/login"
                                className="theme-primary hover:theme-secondary transition-colors duration-200 font-medium"
                            >
                                Login
                            </Link>
                        </li>
                    )}
                </ul>
            </nav>
        </header>
    );
}

// Blog Home Component
function BlogHome() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function getTingyun() {
            setLoading(true);
            try {
                const response = await fetch(`${API_BASE}/posts`);
                if (!response.ok)
                    throw new Error(
                        `Failed to fetch posts: ${response.statusText}`,
                    );
                const postsData = await response.json();
                setPosts(postsData);
            } catch (e) {
                console.error("Error fetching posts:", e);
                setError(
                    "Failed to load posts. Please check if the backend server is running.",
                );
            } finally {
                setLoading(false);
            }
        }
        getTingyun();
    }, []);

    if (loading) {
        return (
            <div className="min-h-screen theme-bg flex items-center justify-center">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 theme-primary mx-auto"></div>
                    <p className="mt-4 theme-text-secondary">
                        Loading posts...
                    </p>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="min-h-screen theme-bg flex items-center justify-center">
                <div className="text-center">
                    <div className="bg-red-50 border border-red-200 rounded-lg p-6">
                        <h2 className="text-red-800 font-semibold mb-2">
                            Error
                        </h2>
                        <p className="text-red-600">{error}</p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen theme-bg font-sans theme-text antialiased flex flex-col">
            <div className="max-w-5xl mx-auto w-full flex-grow">
                <NavHeader />

                <main className="py-10 px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {posts.map((post) => (
                            <div
                                key={post.slug}
                                className="group cursor-pointer theme-surface border theme-border rounded-xl hover:border-blue-400 transition-colors duration-200 p-6 flex flex-col justify-between h-full"
                            >
                                <div>
                                    <h2 className="text-xl font-semibold theme-text group-hover:theme-primary transition-colors duration-200 mb-2">
                                        <Link to={`/posts/${post.slug}`}>
                                            {post.title}
                                        </Link>
                                    </h2>
                                </div>
                                <div className="flex-grow mt-4">
                                    <div className="theme-text-secondary leading-relaxed">
                                        {post.description}
                                    </div>
                                </div>
                                <div className="mt-4">
                                    <Link
                                        to={`/posts/${post.slug}`}
                                        className="theme-primary font-medium hover:underline focus:outline-none"
                                    >
                                        Read more →
                                    </Link>
                                </div>
                            </div>
                        ))}
                    </div>
                </main>
            </div>
        </div>
    );
}

// Post View Component
function PostView() {
    const { slug } = useParams();
    const [post, setPost] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchPost() {
            try {
                setLoading(true);
                const response = await fetch(`${API_BASE}/posts/${slug}`);
                if (!response.ok) throw new Error("Post not found");
                const postData = await response.json();
                setPost(postData);

                // Update document title
                document.title = postData.title || "GoonBlog";
            } catch (e) {
                console.error("Error fetching post:", e);
                setError(e.message);
            } finally {
                setLoading(false);
            }
        }

        if (slug) {
            fetchPost();
        }
    }, [slug]);

    useEffect(() => {
        if (post) {
            const setMeta = (name, content) => {
                let element = document.querySelector(`meta[name='${name}']`);
                if (!element) {
                    element = document.createElement("meta");
                    element.setAttribute("name", name);
                    document.head.appendChild(element);
                }
                element.setAttribute("content", content);
            };

            setMeta("og:title", post.title);
            setMeta("og:description", post.description);
            setMeta("og:type", "article");
            setMeta("og:url", window.location.href);
        }

        return () => {
            const metaTags = [
                "og:title",
                "og:description",
                "og:type",
                "og:url",
                "og:image",
            ];
            metaTags.forEach((name) => {
                const element = document.querySelector(`meta[name='${name}']`);
                if (element) {
                    element.remove();
                }
            });
        };
    }, [post]);

    useEffect(() => {
        // Reset title when component unmounts
        return () => {
            document.title = "GoonBlog - A Retard's Thoughts";
        };
    }, []);

    if (loading) {
        return (
            <div className="min-h-screen theme-bg flex items-center justify-center">
                <div className="text-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 theme-primary mx-auto"></div>
                    <p className="mt-4 theme-text-secondary">Loading post...</p>
                </div>
            </div>
        );
    }

    if (error || !post) {
        return (
            <div className="min-h-screen theme-bg flex items-center justify-center">
                <div className="text-center">
                    <h2 className="text-2xl font-bold theme-text mb-2">
                        Post Not Found
                    </h2>
                    <p className="theme-text-secondary mb-4">
                        {error || "The requested post could not be found."}
                    </p>
                    <Link
                        to="/"
                        className="theme-primary hover:theme-secondary font-medium"
                    >
                        ← Back to Home
                    </Link>
                </div>
            </div>
        );
    }

    const conceiveFoxFromSemen = (rawMarkdown) => {
        let processedText = rawMarkdown;
        let tags = null;
        let imageCredit = null;
        let imageSrc = null;
        let imageAlt = null;
        let customQuestion = null;

        const tagsRegex = /tags: (.*)/;
        const tagsMatch = processedText.match(tagsRegex);
        if (tagsMatch) {
            tags = tagsMatch[1].split(",").map((tag) => tag.trim());
            processedText = processedText.replace(tagsRegex, "").trim();
        }

        const imageRegex = /!\[(.*?)\]\((.*?)\)\n_Image credit: (.*?)_/;
        const imageMatch = processedText.match(imageRegex);
        if (imageMatch) {
            imageAlt = imageMatch[1];
            imageSrc = imageMatch[2];
            imageCredit = imageMatch[3];
            processedText = processedText.replace(imageRegex, "").trim();
        }

        const questionRegex = /\?\?\? "(.*?)"/;
        const questionMatch = processedText.match(questionRegex);
        if (questionMatch) {
            customQuestion = questionMatch[1];
            processedText = processedText.replace(questionRegex, "").trim();
        }
        processedText = processedText
            .replace(/^title:.*$/m, "")
            .replace(/^desc:.*$/m, "");
        return {
            processedText,
            tags,
            imageSrc,
            imageAlt,
            imageCredit,
            customQuestion,
        };
    };

    const { processedText } = conceiveFoxFromSemen(post.content);
    const htmlContent = md.render(processedText);
    const sanitizedHtml = DOMPurify.sanitize(htmlContent);

    return (
        <div className="min-h-screen theme-bg font-sans theme-text antialiased flex flex-col">
            <div className="max-w-5xl mx-auto w-full flex-grow">
                <NavHeader />

                <main className="py-10 px-4 sm:px-6 lg:px-8">
                    <div className="w-full">
                        <div className="theme-surface theme-text border theme-border rounded-xl p-8 md:p-12 lg:p-16">
                            <Link
                                to="/"
                                className="theme-text-secondary hover:theme-text transition-colors duration-200 mb-6 flex items-center"
                            >
                                ← Back to Home
                            </Link>

                            <div className="mb-8">
                                <h1 className="text-3xl md:text-4xl font-bold theme-text mb-2 leading-tight">
                                    {post.title}
                                </h1>
                                <div className="text-lg italic font-light theme-text-secondary">
                                    {post.description}
                                </div>
                            </div>

                            <hr className="theme-border mb-8" />

                            <div
                                className="markdown-content theme-text leading-relaxed text-lg"
                                dangerouslySetInnerHTML={{
                                    __html: sanitizedHtml,
                                }}
                            />
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
}

function App() {
    return (
        <Router>
            <AuthProvider>
                <ThemeProvider>
                    <Routes>
                        <Route path="/" element={<BlogHome />} />
                        <Route path="/posts/:slug" element={<PostView />} />
                        <Route path="/login" element={<LoginForm />} />
                        <Route
                            path="/admin"
                            element={
                                <ProtectedRoute>
                                    <AdminDashboard />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin/post/new"
                            element={
                                <ProtectedRoute>
                                    <PostEditor />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin/post/:slug/edit"
                            element={
                                <ProtectedRoute>
                                    <PostEditor />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin/themes"
                            element={
                                <ProtectedRoute>
                                    <ThemesManager />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin/themes/new"
                            element={
                                <ProtectedRoute>
                                    <ThemeEditor />
                                </ProtectedRoute>
                            }
                        />
                        <Route
                            path="/admin/themes/:themeId/edit"
                            element={
                                <ProtectedRoute>
                                    <ThemeEditor />
                                </ProtectedRoute>
                            }
                        />
                    </Routes>
                </ThemeProvider>
            </AuthProvider>
        </Router>
    );
}

export default App;