---
import AchizitiiLayout from '../../layouts/AchizitiiLayout.astro';
import { RECIPES_BY_SLUG } from '../../lib/recipes.js';

export const prerender = false;

const slug = Astro.params.slug as string;
const recipe = RECIPES_BY_SLUG[slug];

if (!recipe) {
  return Astro.redirect('/404');
}

const rows = await recipe.fetch();
const totalRows = rows.length;
const topRow = rows[0];

const ogImage = `/api/og/recipe/${slug}.png`;
const shareUrl = `https://vreaudigital.ro/retete/${slug}`;
const shareText = `${recipe.title} — vreaudigital.ro: ${topRow ? topRow.primary + ' · ' + topRow.metric : ''}`;
---

<AchizitiiLayout
  title={`${recipe.title} — Rețetă investigativă · vreaudigital.ro`}
  description={recipe.teaser}
  ogImage={ogImage}
>
  <main class="bg-page">
    <section class="max-w-content mx-auto px-4 py-8">

      <nav class="text-meta text-sm mb-3">
        <a href="/" class="hover:text-stamp">Achiziții</a> ›
        <a href="/retete" class="hover:text-stamp">Rețete</a> ›
        <span class="text-ink">{recipe.title}</span>
      </nav>

      <div class="flex items-start gap-4 mb-3">
        <div style="font-size: 36px; line-height: 1;">{recipe.icon}</div>
        <div class="flex-1">
          <span class="label-meta">Rețetă · {recipe.category}</span>
          <h1 class="font-display text-3xl text-ink mt-1 mb-2">{recipe.title}</h1>
          <p class="text-base text-meta max-w-3xl">{recipe.teaser}</p>
        </div>
      </div>

      <div class="rule-meta" />

      <div class="grid lg:grid-cols-3 gap-4 mb-6">
        <div class="lg:col-span-2 panel">
          <div class="label-meta">De ce contează</div>
          <p class="text-sm text-ink mt-2 leading-relaxed">{recipe.description}</p>
          <div class="mt-3 pt-3 border-t border-meta" style="border-color: var(--rule-soft);">
            <div class="label-meta text-stamp" style="font-size: 9.5px;">context</div>
            <p class="text-xs text-meta mt-1 leading-relaxed">{recipe.whyItMatters}</p>
          </div>
        </div>

        <div class="panel" style="background: var(--ink); color: var(--paper);">
          <div class="label-meta" style="color: rgba(255,255,255,0.5)">share această rețetă</div>
          <p class="text-xs mt-2 leading-relaxed" style="color: rgba(255,255,255,0.7)">URL stabil — re-rulează când îl deschide cineva, datele sunt mereu actualizate.</p>
          <div class="flex flex-col gap-2 mt-3">
            <a
              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`}
              target="_blank" rel="noopener"
              class="btn-brutal-primary text-center"
              style="background: white; color: var(--ink); border-color: white;"
            >Distribuie pe X</a>
            <a
              href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`}
              target="_blank" rel="noopener"
              class="btn-brutal text-center"
              style="background: transparent; color: white; border-color: white;"
            >LinkedIn</a>
            <button
              id="copy-link"
              class="btn-brutal text-center"
              style="background: transparent; color: white; border-color: white; cursor: pointer;"
              data-url={shareUrl}
            >Copiază link</button>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="flex justify-between items-baseline mb-3">
          <h2 class="font-display text-lg text-ink">Rezultate</h2>
          <span class="label-meta">{totalRows} rânduri · ordonat după {recipe.metricLabel.toLowerCase()}</span>
        </div>

        {totalRows === 0 ? (
          <div class="text-center py-8 text-meta text-sm">Niciun rezultat pentru această rețetă (datele se actualizează zilnic).</div>
        ) : (
          <div class="profile-topcps">
            {rows.map((r, i) => (
              <a
                href={r.primaryHref || '#'}
                class="profile-topcp"
                style={r.primaryHref ? '' : 'cursor: default; pointer-events: none;'}
              >
                <span class="profile-topcp-rank">{String(i + 1).padStart(2, '0')}</span>
                <div class="profile-topcp-info">
                  <div class="profile-topcp-name">{r.primary}</div>
                  {r.secondary && <div class="profile-topcp-meta">{r.secondary}</div>}
                  {r.detail && <div class="profile-topcp-meta" style="margin-top: 2px;">{r.detail}</div>}
                </div>
                <div class="flex flex-col items-end gap-1">
                  <div class="profile-topcp-value">{r.metric}</div>
                  {r.badge && (
                    <span class="badge" style={`font-size: 9.5px; padding: 1px 6px; ${
                      r.badge.tone === 'risk' ? 'background:#FEF2F2;color:#B91C1C;border:1px solid rgba(239,68,68,0.2);' :
                      r.badge.tone === 'warn' ? 'background:#FEF3C7;color:#B45309;border:1px solid rgba(180,83,9,0.2);' :
                      'background:#D1FAE5;color:#047857;border:1px solid rgba(16,185,129,0.2);'
                    }`}>{r.badge.label}</span>
                  )}
                </div>
              </a>
            ))}
          </div>
        )}
      </div>

      <div class="mt-6 panel" style="background: var(--rule-soft); border: none; padding: 14px 18px;">
        <div class="label-meta text-stamp" style="font-size: 9.5px;">disclaimer</div>
        <p class="text-xs text-meta mt-1 leading-relaxed">
          Indicatorii de risc sunt <strong>semnale statistice</strong>, nu acuzații. Un scor ridicat poate avea
          explicații legitime (specializare reală, lipsa furnizorilor locali, urgențe operaționale). Pentru concluzii
          definitive, verifică direct la sursa oficială (e-licitatie.ro, Curtea de Conturi, ANAP, Consiliul Concurenței)
          sau întreabă instituția vizată. Datele provin din SEAP / TED / data.gov.ro.
        </p>
      </div>

    </section>
  </main>
</AchizitiiLayout>

<script>
  document.addEventListener('click', (e) => {
    const target = e.target as HTMLElement;
    if (target.id === 'copy-link') {
      const url = target.getAttribute('data-url') || window.location.href;
      navigator.clipboard.writeText(url).then(() => {
        const orig = target.textContent;
        target.textContent = '✓ copiat';
        setTimeout(() => { target.textContent = orig; }, 1500);
      });
    }
  });
</script>
