---
import type { ImageMetadata } from 'astro';
import siteConfig from '@/config/site.config';
import BaseLayout from './BaseLayout.astro';
import Header from '@/components/layout/Header.astro';
import AppFooter from '@/components/layout/AppFooter.astro';
import Breadcrumbs from '@/components/seo/Breadcrumbs.astro';
import ArticleHero from '@/components/blog/ArticleHero.astro';
import ShareButtons from '@/components/blog/ShareButtons.astro';
import RelatedPosts from '@/components/blog/RelatedPosts.astro';
import CTA from '@/components/ui/marketing/CTA/CTA.astro';
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
import { resolveSocialLinks } from '@/lib/utils';
import { useTranslations } from '@/i18n/utils';
import type { Locale } from '@/i18n/ui';

const socialLinks = resolveSocialLinks(siteConfig.socialLinks);

interface Props {
  title: string;
  description: string;
  publishedAt: Date;
  updatedAt?: Date;
  author?: string;
  image?: ImageMetadata;
  imageAlt?: string;
  svgSlug?: string;
  tags?: string[];
  slug?: string;
  locale?: Locale;
}

const {
  title,
  description,
  publishedAt,
  updatedAt,
  author = 'Team',
  image,
  imageAlt,
  svgSlug,
  tags = [],
  slug = '',
  locale = (Astro.currentLocale ?? 'de') as Locale,
} = Astro.props;

const t = useTranslations(locale);
const ogImage = image?.src || siteConfig.ogImage;

const breadcrumbs = [
  { label: 'Home', href: locale === 'de' ? '/' : `/${locale}/` },
  { label: t('nav.blog'), href: t('nav.blog.href') },
  { label: title },
];

// Get full URL for sharing
const fullUrl = new URL(Astro.url.pathname, Astro.site).toString();
---

<BaseLayout
  title={title}
  description={description}
  image={ogImage}
  imageAlt={imageAlt || title}
  article={{
    publishedTime: publishedAt,
    modifiedTime: updatedAt,
    authors: [author],
    tags,
  }}
>
  <Header
    slot="header"
    position="fixed"
    shape="bar"
    variant="solid"
    size="lg"
    showCta
    cta={{ label: t('hero.login'), href: 'https://app.armarium.ch/login' }}
    showScrollProgress
    showLanguageSwitcher
    currentLocale={locale}
    nav={[
      { label: t('nav.blog'),     href: t('nav.blog.href') },
      { label: t('nav.features'), href: t('nav.features.href') },
      { label: t('nav.about'),    href: t('nav.about.href') },
      { label: t('nav.contact'),  href: t('nav.contact.href') },
    ]}
  />

  <div class="min-h-screen pt-16">
  <!-- Article Hero -->
  <ArticleHero
    title={title}
    description={description}
    publishedAt={publishedAt}
    updatedAt={updatedAt}
    author={author}
    tags={tags}
    image={image}
    imageAlt={imageAlt}
    svgSlug={svgSlug}
  />

  <article class="pt-8 pb-[var(--space-section-md)]">
    <div class="mx-auto max-w-4xl px-6">
      <!-- Breadcrumbs -->
      <Breadcrumbs items={breadcrumbs} class="mb-8" />

      <!-- Article Content -->
      <div
        class="prose prose-lg max-w-none"
      >
        <slot />
      </div>

      <!-- Article Footer -->
      <footer class="border-border mt-12 border-t pt-8" data-reveal>
        <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
          <!-- Back link -->
          <a
            href={t('nav.blog.href')}
            class="text-brand-600 hover:text-brand-500 dark:text-brand-400 dark:hover:text-brand-300 inline-flex items-center gap-2 text-sm font-medium transition-colors"
          >
            <svg
              class="h-4 w-4"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"
              ></path>
            </svg>
            {t('blog.back')}
          </a>

          <!-- Share buttons -->
          <ShareButtons title={title} url={fullUrl} />
        </div>
      </footer>
    </div>
  </article>

  <!-- Related Posts -->
  {tags.length > 0 && (
    <div class="mx-auto max-w-screen-xl px-6" data-reveal>
      <RelatedPosts currentSlug={slug} tags={tags} locale="en" maxPosts={3} />
    </div>
  )}

  <!-- Follow Along -->
  <CTA variant="default" size="md" maxWidth="lg" glow={false} data-reveal class="bg-background-secondary">
    <h2 slot="heading" class="!text-4xl">{t('blog.follow.title')}</h2>
    <p slot="description" class="!text-lg text-balance">{t('blog.follow.desc')}</p>

    <div class="flex flex-wrap items-center justify-center gap-3">
      <a
        href="/rss.xml"
        class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-brand-500 hover:text-brand-500"
      >
        <Icon name="rss" size="sm" />
        RSS Feed
      </a>
      {socialLinks.map((link) => (
        <a
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-brand-500 hover:text-brand-500"
        >
          <Icon name={link.icon} size="sm" />
          {link.label}
        </a>
      ))}
      <a
        href={`mailto:${siteConfig.email}`}
        class="inline-flex items-center gap-2 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-brand-500 hover:text-brand-500"
      >
        <Icon name="mail" size="sm" />
        Email
      </a>
    </div>
  </CTA>
  </div>

  <AppFooter slot="footer" locale={locale} />
</BaseLayout>
