---
import Layout from '../layouts/BaseLayout.astro';
import TerminalWindow from '../components/ui/TerminalWindow.astro';
import { terminalConfig } from '../lib/config/terminal';
import { api } from '../lib/api/client';
import { getI18n } from '../lib/i18n';

const fullPrompt = `${terminalConfig.prompt.prefix}${terminalConfig.prompt.separator}${terminalConfig.prompt.path}${terminalConfig.prompt.suffix}`;
const { locale, t } = getI18n(Astro);

let popularPosts: Awaited<ReturnType<typeof api.getPosts>> = [];

try {
  popularPosts = (await api.getPosts()).slice(0, 4);
} catch (error) {
  console.error('Failed to load fallback posts:', error);
}
---

<Layout title={`404 - ${t('notFound.pageTitle')}`} description={t('notFound.pageDescription')}>
  <div class="max-w-4xl mx-auto px-4 py-12">
    <TerminalWindow title={terminalConfig.title} class="w-full">
      <div class="px-4 pb-2">
        <div class="terminal-panel ml-4 mt-4 space-y-6">
          <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
            <div class="space-y-4">
              <span class="terminal-kicker">
                <i class="fas fa-triangle-exclamation"></i>
                missing route
              </span>
              <div class="space-y-3">
                <pre class="ascii-art text-[var(--primary)]">EEEEE  RRRR   RRRR    OOO   RRRR
E      R   R  R   R  O   O  R   R
EEE    RRRR   RRRR   O   O  RRRR
E      R R    R R    O   O  R R
EEEEE  R  R   R  R    OOO   R  R</pre>
                <div>
                  <h1 class="text-3xl font-bold tracking-tight text-[var(--title-color)]">404 - {t('notFound.pageTitle')}</h1>
                  <p class="mt-3 max-w-2xl text-sm leading-7 text-[var(--text-secondary)]">
                    {t('notFound.intro')}
                  </p>
                </div>
              </div>
            </div>

            <div class="terminal-panel-muted min-w-[240px] space-y-3">
              <div class="font-mono text-sm">
                <span class="text-[var(--primary)]">{fullPrompt}</span>
                <span class="ml-2 text-[var(--secondary)]">find ./ -name "*.html"</span>
              </div>
              <div class="rounded-2xl border px-4 py-4 text-sm" style="border-color: color-mix(in oklab, var(--danger) 24%, var(--border-color)); background: color-mix(in oklab, var(--danger) 10%, var(--header-bg));">
                <div class="text-[var(--text-secondary)]">{t('notFound.terminalLog')}</div>
                <div class="mt-2 text-[var(--danger)]">{t('notFound.requestedRouteNotFound')}</div>
                <div class="mt-2 text-[var(--text-secondary)]">{t('notFound.path')}: <span id="current-path" class="font-mono text-[var(--title-color)]"></span></div>
                <div class="text-[var(--text-secondary)]">{t('notFound.time')}: <span id="current-time" class="font-mono text-[var(--title-color)]"></span></div>
              </div>
            </div>
          </div>

          <div class="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
            <section class="terminal-panel-muted space-y-4">
              <div class="terminal-section-title">
                <span class="terminal-section-icon">
                  <i class="fas fa-wrench"></i>
                </span>
                <div>
                  <h2 class="text-xl font-semibold text-[var(--title-color)]">{t('notFound.actions')}</h2>
                  <p class="text-sm text-[var(--text-secondary)]">{t('notFound.actionsIntro')}</p>
                </div>
              </div>

              <div class="flex flex-wrap gap-3">
                <button onclick="history.back()" class="terminal-action-button">
                  <i class="fas fa-arrow-left"></i>
                  <span>{t('common.goBack')}</span>
                </button>
                <a href="/" class="terminal-action-button terminal-action-button-primary">
                  <i class="fas fa-house"></i>
                  <span>{t('common.home')}</span>
                </a>
                <a href="/articles" class="terminal-action-button">
                  <i class="fas fa-file-lines"></i>
                  <span>{t('common.browsePosts')}</span>
                </a>
              </div>

              <div class="terminal-empty py-8">
                <p class="text-sm leading-7 text-[var(--text-secondary)]">
                  {t('notFound.searchHint')}
                </p>
              </div>
            </section>

            <section class="terminal-panel-muted space-y-4">
              <div class="terminal-section-title">
                <span class="terminal-section-icon">
                  <i class="fas fa-book-open"></i>
                </span>
                <div>
                  <h2 class="text-xl font-semibold text-[var(--title-color)]">{t('notFound.recommended')}</h2>
                  <p class="text-sm text-[var(--text-secondary)]">{t('notFound.recommendedIntro')}</p>
                </div>
              </div>

              <div class="space-y-3">
                {popularPosts.length > 0 ? (
                  popularPosts.map(post => (
                    <a href={`/articles/${post.slug}`} class="terminal-console-list-item hover:border-[var(--primary)] transition-colors">
                      <div class="min-w-0 flex-1">
                        <p class="font-medium text-[var(--title-color)]">{post.title}</p>
                        <p class="mt-1 text-sm text-[var(--text-secondary)]">{post.description}</p>
                      </div>
                      <i class="fas fa-arrow-right text-[var(--text-tertiary)]"></i>
                    </a>
                  ))
                ) : (
                  <div class="terminal-empty py-8">
                    <p class="text-sm text-[var(--text-secondary)]">{t('notFound.cannotLoad')}</p>
                  </div>
                )}
              </div>
            </section>
          </div>
        </div>
      </div>
    </TerminalWindow>
  </div>

  <script is:inline define:vars={{ locale }}>
    document.getElementById('current-path').textContent = window.location.pathname;
    document.getElementById('current-time').textContent = new Date().toLocaleString(locale, {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    });
  </script>
</Layout>

<style>
  .ascii-art {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.5rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    white-space: pre;
  }

  @media (min-width: 640px) {
    .ascii-art {
      font-size: 0.75rem;
    }
  }
</style>
