---
import Layout from '../../layouts/Layout.astro';
import { marked } from 'marked';

const { slug } = Astro.params;
const API_URL = (typeof process !== 'undefined' ? process.env.PUBLIC_API_URL : import.meta.env.PUBLIC_API_URL) || 'http://localhost:3000';

interface PostDetail {
  slug: string;
  content: string;
}

let post: PostDetail | null = null;
let html = '';
let error = '';

try {
  const response = await fetch(`${API_URL}/api/posts/${slug}`);
  if (response.ok) {
    post = await response.json();
    if (post) {
      html = await marked.parse(post.content);
    }
  } else {
    error = 'Post not found';
  }
} catch (e) {
  error = 'Could not connect to backend';
}

function formatSlug(slug: string) {
  return slug
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}
---

<Layout title={post ? formatSlug(post.slug) : 'Post'}>
  <article class="glass p-12 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
    <header class="mb-12 border-b border-white/5 pb-12">
      <a href="/" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
        Back to list
      </a>
      {post && (
        <h1 class="text-5xl font-extrabold text-mauve mt-4">
          {formatSlug(post.slug)}
        </h1>
      )}
    </header>

    {error && (
      <div class="text-red text-center py-12">
        <h2 class="text-2xl font-bold mb-4">{error}</h2>
        <a href="/" class="text-blue underline">Return home</a>
      </div>
    )}

    {post && (
      <div class="prose prose-invert max-w-none" set:html={html} />
    )}
  </article>
</Layout>