---
import BaseLayout from '../../layouts/BaseLayout.astro';
import TerminalWindow from '../../components/ui/TerminalWindow.astro';
import CommandPrompt from '../../components/ui/CommandPrompt.astro';
import StatsList from '../../components/StatsList.astro';
import TechStackList from '../../components/TechStackList.astro';
import { api, DEFAULT_SITE_SETTINGS } from '../../lib/api/client';
import { getI18n } from '../../lib/i18n';

export const prerender = false;

let siteSettings = DEFAULT_SITE_SETTINGS;
let systemStats = [];
let techStack = [];
const { t } = getI18n(Astro);

try {
  const [settings, posts, tags, friendLinks] = await Promise.all([
    api.getSiteSettings(),
    api.getPosts(),
    api.getTags(),
    api.getFriendLinks(),
  ]);

  siteSettings = settings;
  techStack = siteSettings.techStack.map(name => ({ name }));
  systemStats = [
    { label: t('common.posts'), value: String(posts.length) },
    { label: t('common.tags'), value: String(tags.length) },
    { label: t('common.friends'), value: String(friendLinks.filter(friend => friend.status === 'approved').length) },
    { label: t('common.location'), value: siteSettings.location || t('common.unknown') },
  ];
} catch (error) {
  console.error('Failed to load about data:', error);
  techStack = siteSettings.techStack.map(name => ({ name }));
  systemStats = [
    { label: t('common.posts'), value: '0' },
    { label: t('common.tags'), value: '0' },
    { label: t('common.friends'), value: '0' },
    { label: t('common.location'), value: siteSettings.location || t('common.unknown') },
  ];
}

const ownerInitial = siteSettings.ownerName.charAt(0) || 'T';
---

<BaseLayout
  title={`${t('about.pageTitle')} - ${siteSettings.siteShortName}`}
  description={siteSettings.siteDescription}
  siteSettings={siteSettings}
>
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <TerminalWindow title="~/about" class="w-full">
      <div class="mb-6 px-4">
        <CommandPrompt command="id -un" />
        <div class="terminal-panel ml-4 mt-4">
          <div class="terminal-kicker">identity profile</div>
          <div class="terminal-section-title mt-4">
            <span class="terminal-section-icon">
              <i class="fas fa-user-circle"></i>
            </span>
            <div>
              <h1 class="text-2xl font-bold text-[var(--title-color)]">{t('about.title')}</h1>
              <p class="mt-2 max-w-2xl text-sm leading-6 text-[var(--text-secondary)]">
                {t('about.intro')}
              </p>
            </div>
          </div>
          <div class="mt-5 flex flex-wrap gap-2">
            <span class="terminal-stat-pill">
              <i class="fas fa-location-dot text-[var(--primary)]"></i>
              <span>{siteSettings.location || t('common.unknown')}</span>
            </span>
            <span class="terminal-stat-pill">
              <i class="fas fa-layer-group text-[var(--primary)]"></i>
              <span>{t('about.techStackCount', { count: techStack.length })}</span>
            </span>
          </div>
        </div>
      </div>

      <div class="px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <CommandPrompt command="sed -n '1,80p' ~/profile.md" />
            <div class="ml-4 mt-4">
              <div class="terminal-panel p-6">
                <div class="flex items-center gap-4 mb-4">
                  {siteSettings.ownerAvatarUrl ? (
                    <img
                      src={siteSettings.ownerAvatarUrl}
                      alt={siteSettings.ownerName}
                      class="w-16 h-16 rounded-full object-cover border border-[var(--border-color)]"
                    />
                  ) : (
                    <div class="w-16 h-16 rounded-full bg-[var(--primary)] flex items-center justify-center text-[var(--terminal-bg)] text-2xl font-bold shadow-lg shadow-[var(--primary)]/20">
                      {ownerInitial}
                    </div>
                  )}
                  <div>
                    <h2 class="text-xl font-bold text-[var(--title-color)]">{siteSettings.ownerName}</h2>
                    <p class="text-sm text-[var(--text-secondary)] mt-1">{siteSettings.ownerTitle}</p>
                  </div>
                </div>
                <p class="text-[var(--text-secondary)] leading-7">{siteSettings.ownerBio}</p>
              </div>
            </div>

            <div class="mt-6">
              <CommandPrompt command="ls ~/.local/share/stack" />
              <div class="ml-4 mt-4">
                <TechStackList items={techStack} />
              </div>
            </div>
          </div>

          <div>
            <CommandPrompt command="uname -a" />
            <div class="ml-4 mt-4">
              <StatsList stats={systemStats} />
            </div>

            <div class="mt-6">
            <CommandPrompt command="printenv | grep -E 'MAIL|WEB'" />
            <div class="ml-4 mt-4">
              <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                {siteSettings.social.github && (
                  <a
                    href={siteSettings.social.github}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="terminal-interactive-card flex items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[linear-gradient(135deg,rgba(15,23,42,0.04),rgba(var(--primary-rgb),0.08))] px-4 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.08)]"
                  >
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#111827] text-white">
                      <i class="fab fa-github text-sm"></i>
                    </span>
                    <span class="min-w-0">
                      <span class="block text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">{t('about.contact')}</span>
                      <span class="mt-1 block text-sm font-semibold text-[var(--title-color)]">GitHub</span>
                    </span>
                  </a>
                )}
                {siteSettings.social.twitter && (
                  <a
                    href={siteSettings.social.twitter}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="terminal-interactive-card flex items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[linear-gradient(135deg,rgba(15,23,42,0.04),rgba(var(--secondary-rgb),0.1))] px-4 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.08)]"
                  >
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1d9bf0] text-white">
                      <i class="fab fa-twitter text-sm"></i>
                    </span>
                    <span class="min-w-0">
                      <span class="block text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">{t('about.contact')}</span>
                      <span class="mt-1 block text-sm font-semibold text-[var(--title-color)]">Twitter</span>
                    </span>
                  </a>
                )}
                {siteSettings.social.email && (
                  <a
                      href={siteSettings.social.email}
                      class="terminal-interactive-card flex items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[linear-gradient(135deg,rgba(15,23,42,0.04),rgba(59,130,246,0.08))] px-4 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.08)]"
                    >
                      <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-[var(--primary)] text-white">
                        <i class="fas fa-envelope text-sm"></i>
                      </span>
                      <span class="min-w-0">
                        <span class="block text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">{t('about.contact')}</span>
                        <span class="mt-1 block text-sm font-semibold text-[var(--title-color)]">{t('comments.email')}</span>
                      </span>
                    </a>
                  )}
                  <a
                    href={siteSettings.siteUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="terminal-interactive-card flex items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[linear-gradient(135deg,rgba(15,23,42,0.04),rgba(16,185,129,0.1))] px-4 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.08)]"
                  >
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500 text-white">
                      <i class="fas fa-globe text-sm"></i>
                    </span>
                    <span class="min-w-0">
                      <span class="block text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">{t('about.contact')}</span>
                      <span class="mt-1 block text-sm font-semibold text-[var(--title-color)]">{t('about.website')}</span>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </TerminalWindow>
  </div>
</BaseLayout>