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]

const API_BASE = 'https://goonblog.thevakhovske.eu.org/api';

// 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 bg-white flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading posts...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen bg-white 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(() => {
    // Reset title when component unmounts
    return () => {
      document.title = 'GoonBlog - A Retard\'s Thoughts';
    };
  }, []);

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

  if (error || !post) {
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Post Not Found</h2>
          <p className="text-gray-600 mb-4">{error || 'The requested post could not be found.'}</p>
          <Link 
            to="/"
            className="text-blue-600 hover:text-blue-800 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;